/*
Theme tokens: html[data-theme] = light | midnight | nord | solarized | (auto resolves to light/midnight).
Executive Minimalist default = zinc/slate neutrals + indigo accent (#6366f1).
*/
:root {
color-scheme: light;
--bg: #fafafa;
--surface: #ffffff;
--surface-alt: #f4f4f5;
--text: #18181b;
/* Meets WCAG AA on white/surface for typical body + small meta */
--muted: #64748b;
--primary: #18181b;
--accent: #6366f1;
--primary-soft: #eef2ff;
--warn: #b45309;
--shadow: 0 4px 24px rgba(24, 24, 27, 0.06), 0 1px 3px rgba(24, 24, 27, 0.04);
--shadow-hover: 0 12px 40px rgba(24, 24, 27, 0.1), 0 4px 12px rgba(24, 24, 27, 0.06);
--shadow-tight: 0 2px 8px rgba(24, 24, 27, 0.06);
/*
* Card surfaces — 3 elevations + corner tiers (mobile-first).
* L1 subtle (nested chips), L2 standard (dashboard tiles), L3 hero (Today’s Brief).
*/
--radius-card-primary: 16px;
--radius-card-secondary: 12px;
--radius: var(--radius-card-primary);
--radius-shell: 20px;
--card-elev-subtle: 0 1px 2px rgba(24, 24, 27, 0.05), 0 2px 10px rgba(24, 24, 27, 0.06);
--card-elev-standard: 0 2px 10px rgba(24, 24, 27, 0.07), 0 6px 22px rgba(24, 24, 27, 0.08);
--card-elev-highlight: 0 4px 16px rgba(24, 24, 27, 0.1), 0 12px 36px rgba(99, 102, 241, 0.13);
--card-elev-hover: 0 4px 14px rgba(24, 24, 27, 0.1), 0 10px 28px rgba(24, 24, 27, 0.09);
--card-padding: 1.125rem;
--gap-tiles: clamp(1rem, 0.75rem + 0.8vw, 1.35rem);
--accent-soft: rgba(99, 102, 241, 0.12);
--border: #e4e4e7;
--border-subtle: #f4f4f5;
--prefs-toggle-hover: #e4e4e7;
--chip-border: #e4e4e7;
--chip-bg: #fafafa;
--sparkline-color: #a1a1aa;
--reason-toggle-border: #e4e4e7;
--reason-toggle-bg: #f4f4f5;
--reason-toggle-text: #3f3f46;
--stock-up: #059669;
--stock-down: #dc2626;
--hour-border: #e4e4e7;
--hour-bg: #fafafa;
--news-tile-border: #e4e4e7;
--news-tile-bg: #fafafa;
--news-summary: #27272a;
--view-more-border: #d4d4d8;
--view-more-bg: #f4f4f5;
--view-more-text: #4338ca;
--refresh-bg: #18181b;
--refresh-fg: #fafafa;
--btn-solid-bg: #27272a;
--btn-solid-fg: #fafafa;
--btn-solid-hover: #3f3f46;
--ghost-border: #e4e4e7;
--ghost-bg: #ffffff;
--ghost-text: #18181b;
--scrollbar-thumb: #d4d4d8;
--scrollbar-track: #f4f4f5;
--status-error-bg: #fef3c7;
--hint-prefix-color: #dc2626;
/*
* Typography scale (targets — Title 20–22px semibold, Section 16–18 medium,
* Body 13–14 regular, Meta 11–12 regular). Pair with --text-secondary / --text-meta for WCAG AA.
*/
--type-title: clamp(1.25rem, 1.16rem + 0.32vw, 1.375rem);
--type-section: clamp(1rem, 0.95rem + 0.18vw, 1.125rem);
--type-body: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
--type-meta: clamp(0.6875rem, 0.64rem + 0.1vw, 0.75rem);
--font-weight-semibold: 600;
--font-weight-medium: 500;
--font-weight-regular: 400;
--font-weight-data: 600;
/*
* Semantic text hierarchy (~65–72% perceived emphasis vs primary text; solid colors for AA).
*/
--text-secondary: #3f3f46;
--text-meta: #52525b;
/*
* Design system layer (theme-agnostic): 8pt spacing, type steps, motion, a11y.
* Prefer these tokens in new/refactored rules; legacy rules still use ad-hoc values.
*/
--space-0: 0;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--font-size-xs: var(--type-meta);
--font-size-sm: var(--type-body);
--font-size-base: var(--type-body);
--font-size-md: var(--type-section);
--font-size-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
--font-line-tight: 1.2;
--font-line-snug: 1.35;
--font-line-normal: 1.45;
--font-line-relaxed: 1.55;
--duration-instant: 100ms;
--duration-fast: 150ms;
--duration-base: 220ms;
--duration-slow: 320ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--focus-ring-color: var(--accent);
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--touch-target-min: 44px;
--radius-sm: 8px;
--radius-md: var(--radius-card-secondary);
--radius-lg: var(--radius);
/* Micro-interactions: transform/opacity only for compositor-friendly motion */
--micro-tap-scale: 0.97;
--micro-tap-press-ms: 95ms;
--micro-tap-release-ms: 240ms;
--ease-micro-press: cubic-bezier(0.33, 0, 0.67, 1);
--ease-micro-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
--duration-card-motion: 260ms;
/* Elevation steps (alias card system for legacy rules) */
--elev-0: none;
--elev-1: var(--card-elev-subtle);
--elev-2: var(--card-elev-standard);
--elev-3: var(--card-elev-highlight);
}
/* Midnight — OLED-friendly deep charcoal */
html[data-theme="midnight"] {
color-scheme: dark;
--bg: #09090b;
--surface: #18181b;
--surface-alt: #27272a;
--text: #fafafa;
--muted: #a1a1aa;
--text-secondary: #d4d4d8;
--text-meta: #a1a1aa;
--primary: #fafafa;
--accent: #818cf8;
--primary-soft: #27272a;
--warn: #fbbf24;
--shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
--shadow-tight: 0 4px 14px rgba(0, 0, 0, 0.35);
--accent-soft: rgba(129, 140, 248, 0.18);
--border: #3f3f46;
--border-subtle: #27272a;
--prefs-toggle-hover: #3f3f46;
--chip-border: #3f3f46;
--chip-bg: #18181b;
--sparkline-color: #71717a;
--reason-toggle-border: #3f3f46;
--reason-toggle-bg: #27272a;
--reason-toggle-text: #d4d4d8;
--stock-up: #34d399;
--stock-down: #f87171;
--hour-border: #3f3f46;
--hour-bg: #18181b;
--news-tile-border: #3f3f46;
--news-tile-bg: #18181b;
--news-summary: #fafafa;
--view-more-border: #52525b;
--view-more-bg: #27272a;
--view-more-text: #a5b4fc;
--refresh-bg: #e4e4e7;
--refresh-fg: #18181b;
--btn-solid-bg: #e4e4e7;
--btn-solid-fg: #18181b;
--btn-solid-hover: #d4d4d8;
--ghost-border: #3f3f46;
--ghost-bg: #27272a;
--ghost-text: #fafafa;
--scrollbar-thumb: #52525b;
--scrollbar-track: #27272a;
--status-error-bg: #451a1a;
--hint-prefix-color: #fca5a5;
--card-elev-subtle: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.4);
--card-elev-standard: 0 2px 12px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.38);
--card-elev-highlight: 0 4px 20px rgba(0, 0, 0, 0.55), 0 12px 40px rgba(129, 140, 248, 0.16);
--card-elev-hover: 0 4px 18px rgba(0, 0, 0, 0.55), 0 10px 32px rgba(0, 0, 0, 0.42);
}
/* Nord — cool blue-gray “Arctic” */
html[data-theme="nord"] {
color-scheme: dark;
--bg: #2e3440;
--surface: #3b4252;
--surface-alt: #434c5e;
--text: #eceff4;
--muted: #d8dee9;
--text-secondary: #e5e9f0;
--text-meta: #d8dee9;
--primary: #eceff4;
--accent: #88c0d0;
--primary-soft: #434c5e;
--warn: #ebcb8b;
--shadow: 0 12px 36px rgba(46, 52, 64, 0.55), 0 4px 14px rgba(0, 0, 0, 0.28);
--shadow-hover: 0 18px 48px rgba(46, 52, 64, 0.6), 0 8px 18px rgba(0, 0, 0, 0.35);
--shadow-tight: 0 6px 18px rgba(0, 0, 0, 0.28);
--accent-soft: rgba(136, 192, 208, 0.18);
--border: #4c566a;
--border-subtle: #434c5e;
--prefs-toggle-hover: #4c566a;
--chip-border: #4c566a;
--chip-bg: #2e3440;
--sparkline-color: #aeb3bb;
--reason-toggle-border: #4c566a;
--reason-toggle-bg: #3b4252;
--reason-toggle-text: #e5e9f0;
--stock-up: #a3be8c;
--stock-down: #bf616a;
--hour-border: #4c566a;
--hour-bg: #2e3440;
--news-tile-border: #4c566a;
--news-tile-bg: #2e3440;
--news-summary: #eceff4;
--view-more-border: #5e81ac;
--view-more-bg: #3b4252;
--view-more-text: #8fbcbb;
--refresh-bg: #eceff4;
--refresh-fg: #2e3440;
--btn-solid-bg: #eceff4;
--btn-solid-fg: #2e3440;
--btn-solid-hover: #d8dee9;
--ghost-border: #4c566a;
--ghost-bg: #434c5e;
--ghost-text: #eceff4;
--scrollbar-thumb: #4c566a;
--scrollbar-track: #3b4252;
--status-error-bg: #4c2f2f;
--hint-prefix-color: #bf616a;
--card-elev-subtle: 0 1px 3px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.28);
--card-elev-standard: 0 2px 10px rgba(0, 0, 0, 0.38), 0 7px 22px rgba(0, 0, 0, 0.3);
--card-elev-highlight: 0 4px 16px rgba(0, 0, 0, 0.4), 0 12px 36px rgba(136, 192, 208, 0.14);
--card-elev-hover: 0 4px 14px rgba(0, 0, 0, 0.42), 0 10px 28px rgba(0, 0, 0, 0.34);
}
/* Solarized Light — low-contrast, long-session friendly */
html[data-theme="solarized"] {
color-scheme: light;
--bg: #fdf6e3;
--surface: #eee8d5;
--surface-alt: #fdf6e3;
--text: #657b83;
--muted: #93a1a1;
--text-secondary: #586e75;
--text-meta: #657b83;
--primary: #586e75;
--accent: #268bd2;
--primary-soft: #eee8d5;
--warn: #cb4b16;
--shadow: 0 4px 20px rgba(88, 110, 117, 0.08), 0 1px 3px rgba(88, 110, 117, 0.06);
--shadow-hover: 0 12px 36px rgba(88, 110, 117, 0.12), 0 4px 12px rgba(88, 110, 117, 0.08);
--shadow-tight: 0 2px 8px rgba(88, 110, 117, 0.07);
--accent-soft: rgba(38, 139, 210, 0.15);
--border: #e2d8be;
--border-subtle: #fdf6e3;
--prefs-toggle-hover: #e2d8be;
--chip-border: #e2d8be;
--chip-bg: #fdf6e3;
--sparkline-color: #93a1a1;
--reason-toggle-border: #e2d8be;
--reason-toggle-bg: #eee8d5;
--reason-toggle-text: #586e75;
--stock-up: #859900;
--stock-down: #dc322f;
--hour-border: #e2d8be;
--hour-bg: #fdf6e3;
--news-tile-border: #e2d8be;
--news-tile-bg: #fdf6e3;
--news-summary: #586e75;
--view-more-border: #93a1a1;
--view-more-bg: #eee8d5;
--view-more-text: #268bd2;
--refresh-bg: #586e75;
--refresh-fg: #fdf6e3;
--btn-solid-bg: #586e75;
--btn-solid-fg: #fdf6e3;
--btn-solid-hover: #657b83;
--ghost-border: #e2d8be;
--ghost-bg: #fdf6e3;
--ghost-text: #586e75;
--scrollbar-thumb: #cfc09a;
--scrollbar-track: #eee8d5;
--status-error-bg: #ffe8d9;
--hint-prefix-color: #dc322f;
--card-elev-subtle: 0 1px 2px rgba(88, 110, 117, 0.07), 0 2px 8px rgba(88, 110, 117, 0.06);
--card-elev-standard: 0 2px 8px rgba(88, 110, 117, 0.09), 0 6px 18px rgba(88, 110, 117, 0.08);
--card-elev-highlight: 0 4px 14px rgba(88, 110, 117, 0.11), 0 12px 32px rgba(38, 139, 210, 0.12);
--card-elev-hover: 0 4px 12px rgba(88, 110, 117, 0.11), 0 10px 24px rgba(88, 110, 117, 0.09);
}
* {
box-sizing: border-box;
}
/* Screen-reader only (keeps accessible name when heading text is hidden visually) */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
transition:
background-color var(--duration-slow) var(--ease-standard),
color var(--duration-slow) var(--ease-standard);
}
body {
margin: 0;
min-height: 100vh;
font-family:
"Inter",
"Noto Sans Devanagari",
"Noto Sans Gujarati",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: var(--type-body);
font-weight: var(--font-weight-regular);
line-height: var(--font-line-normal);
transition:
background var(--duration-slow) var(--ease-standard),
color var(--duration-slow) var(--ease-standard);
background:
radial-gradient(ellipse 78% 52% at 96% -6%, rgba(99, 102, 241, 0.07), transparent 52%),
radial-gradient(ellipse 56% 46% at 0% 102%, rgba(99, 102, 241, 0.05), transparent 48%),
var(--bg);
color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
transition: none;
}
body {
transition: none;
}
}
/* ---------------------------------------------------------------------------
Micro-interactions — compositor-friendly (transform / opacity only on tap).
--------------------------------------------------------------------------- */
@keyframes micro-content-reveal {
from {
opacity: 0.82;
}
to {
opacity: 1;
}
}
.micro-content-reveal {
animation: micro-content-reveal var(--duration-card-motion) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
.micro-content-reveal {
animation: none;
}
}
@media (prefers-reduced-motion: no-preference) {
body.micro-interactions .sortable-drag,
body.micro-interactions .sortable-ghost {
transform: none !important;
}
body.micro-interactions button:not(:disabled):not(.no-micro-tap):active,
body.micro-interactions .prefs-toggle:active,
body.micro-interactions #offline-banner-dismiss:active,
body.micro-interactions .tile-collapse-btn:active,
body.micro-interactions .glance-collapsible__trigger:active,
body.micro-interactions .glance-rotate__dot:active,
body.micro-interactions .app-bottom-nav__link:active,
body.micro-interactions .surface-interactive:active {
transform: scale(var(--micro-tap-scale));
transition: transform var(--micro-tap-press-ms) var(--ease-micro-press);
}
body.micro-interactions button:not(:disabled):not(.no-micro-tap),
body.micro-interactions .prefs-toggle,
body.micro-interactions #offline-banner-dismiss,
body.micro-interactions .tile-collapse-btn,
body.micro-interactions .glance-collapsible__trigger,
body.micro-interactions .glance-rotate__dot,
body.micro-interactions .app-bottom-nav__link,
body.micro-interactions .surface-interactive {
transition: transform var(--micro-tap-release-ms) var(--ease-micro-spring);
transform: translateZ(0);
}
body.micro-interactions .today-brief__card.card-interactive,
body.micro-interactions #weather-card.card-interactive,
body.micro-interactions #dashboard-tiles .dashboard-tile.card-interactive {
transition: transform var(--micro-tap-release-ms) var(--ease-micro-spring);
transform: translateZ(0);
}
}
@supports selector(:has(*)) {
@media (prefers-reduced-motion: no-preference) {
body.micro-interactions .today-brief__card.card-interactive:active:not(:has(button:active)):not(:has(summary:active)):not(
:has(a[href]:active)
),
body.micro-interactions #weather-card.card-interactive:active:not(:has(button:active)):not(:has(summary:active)):not(
:has(a[href]:active)
),
body.micro-interactions #dashboard-tiles .dashboard-tile.card-interactive:active:not(:has(button:active)):not(
:has(summary:active)
):not(:has(a[href]:active)) {
transform: scale(var(--micro-tap-scale));
transition: transform var(--micro-tap-press-ms) var(--ease-micro-press);
}
}
}
.dashboard-tile.card-interactive {
transition:
box-shadow var(--duration-card-motion) var(--ease-standard),
transform var(--micro-tap-release-ms) var(--ease-micro-spring);
}
.surface-interactive {
transition:
box-shadow var(--duration-card-motion) var(--ease-standard),
transform var(--micro-tap-release-ms) var(--ease-micro-spring);
}
@media (prefers-reduced-motion: reduce) {
.dashboard-tile.card-interactive,
.surface-interactive {
transition: none;
}
}
.skip-link {
position: absolute;
left: -9999px;
top: 0.35rem;
z-index: 10000;
padding: 0.45rem 0.75rem;
border-radius: 8px;
background: var(--btn-solid-bg);
color: var(--btn-solid-fg);
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-tight);
}
.skip-link:focus {
left: max(0.5rem, env(safe-area-inset-left, 0px));
outline: 2px solid var(--accent);
outline-offset: 2px;
}
#main-content:focus {
outline: none;
}
#main-content:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 4px;
}
.offline-banner {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.65rem;
margin: 0 auto 0.45rem;
max-width: min(1440px, calc(100% - 2rem));
padding: 0.5rem 0.85rem;
border-radius: var(--radius);
border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
background: var(--status-error-bg);
color: var(--text);
font-size: 0.84rem;
line-height: 1.35;
box-sizing: border-box;
}
.offline-banner[hidden] {
display: none !important;
}
.offline-banner__text {
flex: 1;
min-width: 0;
}
.offline-banner__dismiss {
flex-shrink: 0;
font: inherit;
font-size: 0.78rem;
font-weight: 600;
padding: 0.22rem 0.55rem;
min-height: var(--touch-target-min);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.offline-banner__dismiss:hover {
background: var(--surface-alt);
}
.offline-banner__dismiss:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.offline-banner__dismiss:active {
transform: scale(0.97);
}
.prefs-wrap {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.55rem;
}
@media (max-width: 480px) {
.dashboard__quote-column .quote-of-day {
max-height: 5.5rem;
overflow: hidden;
}
.dashboard__quote-column .quote-of-day__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
}
html[data-theme="midnight"] body,
html[data-theme="nord"] body {
background:
radial-gradient(ellipse 78% 52% at 94% -8%, rgba(129, 140, 248, 0.14), transparent 48%),
radial-gradient(ellipse 52% 44% at 4% 102%, rgba(99, 102, 241, 0.12), transparent 46%),
var(--bg);
}
html[data-theme="solarized"] body {
background:
radial-gradient(ellipse 72% 48% at 92% 0%, rgba(38, 139, 210, 0.09), transparent 52%),
radial-gradient(ellipse 48% 38% at 6% 100%, rgba(133, 153, 0, 0.06), transparent 48%),
var(--bg);
}
.app-shell {
width: min(1440px, calc(100% - var(--space-8)));
margin: var(--space-4) auto;
}
.dashboard {
flex: 1;
position: relative;
background: var(--surface);
border-radius: var(--radius-shell, 20px);
padding: clamp(1.125rem, 1rem + 0.5vw, 1.5rem) clamp(1.125rem, 0.85rem + 1vw, 1.65rem);
box-shadow: var(--shadow);
border: 1px solid var(--border);
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
@supports (backdrop-filter: blur(12px)) {
html[data-theme="light"] .dashboard,
html[data-theme="solarized"] .dashboard {
backdrop-filter: saturate(1.15) blur(14px);
-webkit-backdrop-filter: saturate(1.15) blur(14px);
background: color-mix(in srgb, var(--surface) 92%, transparent);
}
}
@media (prefers-reduced-motion: reduce) {
html,
body,
.dashboard,
.card {
transition: none !important;
}
html[data-theme="light"] .dashboard,
html[data-theme="solarized"] .dashboard {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--surface);
}
}
.dashboard__header {
margin-bottom: var(--space-4);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
}
/* Grid + align-items:start so the quote never stretches to the title stack height (flex row bug). */
.dashboard__header-lead {
flex: 1;
min-width: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
grid-template-rows: auto auto;
column-gap: var(--space-4);
row-gap: var(--space-3);
align-items: start;
justify-items: start;
}
.dashboard__title-row {
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
min-width: 0;
}
.dashboard__title-stack {
flex: 1;
min-width: 0;
max-width: 100%;
}
.dashboard__title-row .theme-toolbar-wrap {
flex-shrink: 0;
}
/* Icons-only in the title row; label stays for aria-labelledby. */
.dashboard__title-row .theme-toolbar__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.dashboard__title-row .theme-toolbar {
flex-wrap: nowrap;
gap: 0.28rem;
}
.dashboard__title-row .theme-toolbar__icons {
flex-wrap: nowrap;
}
.dashboard__title-row .dashboard__title-stack h1 {
margin-top: 0;
margin-bottom: 0;
}
.eyebrow {
margin: 0;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.78rem;
}
h1 {
margin: 0.35rem 0 0.5rem;
font-size: var(--type-title);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.02em;
line-height: var(--font-line-tight);
color: var(--text);
}
.dashboard-update-hint__prefix {
color: var(--hint-prefix-color);
font-weight: 600;
}
.dashboard__quote-column {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
width: fit-content;
max-width: min(40ch, 100%);
justify-self: start;
}
.dashboard-update-hint {
margin: 0;
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--type-body);
line-height: var(--font-line-snug);
color: var(--text-secondary);
border-radius: var(--radius-sm);
background: var(--surface-alt);
border-left: 3px solid var(--accent-soft);
box-sizing: border-box;
}
.dashboard-update-hint__text {
flex: 1;
min-width: 0;
}
.dashboard-update-hint__close {
flex-shrink: 0;
margin: -0.15rem -0.05rem 0 0;
padding: 0.2rem;
border: none;
border-radius: 6px;
background: transparent;
color: var(--muted);
cursor: pointer;
line-height: 0;
transition: background 0.15s ease, color 0.15s ease;
}
.dashboard-update-hint__close:hover {
background: rgba(128, 128, 128, 0.14);
color: var(--text);
}
.dashboard-update-hint__close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.dashboard-update-hint__close-icon {
display: block;
vertical-align: middle;
opacity: 0.85;
}
.quote-of-day {
box-sizing: border-box;
display: block;
margin: 0;
padding: var(--space-2) var(--space-3) var(--space-2);
width: fit-content;
max-width: min(40ch, 100%);
height: -webkit-fit-content;
height: fit-content;
min-height: 0;
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: var(--surface-alt);
}
.quote-of-day__label {
display: block;
margin: 0 0 var(--space-1);
font-size: var(--font-size-xs);
font-weight: 700;
line-height: var(--font-line-tight);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
.quote-of-day__blockquote {
display: block;
margin: 0;
margin-inline: 0;
padding: 0;
border: 0;
min-height: 0;
}
.quote-of-day__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
margin: 0;
overflow: hidden;
font-size: var(--font-size-sm);
line-height: var(--font-line-snug);
color: var(--text);
font-style: italic;
}
.quote-of-day__footer {
display: block;
margin: 0.3rem 0 0;
padding: 0;
font-size: 0.78rem;
line-height: 1.3;
color: var(--muted);
}
.quote-of-day__footer[hidden] {
display: none !important;
}
.quote-of-day__author {
margin: 0;
font-style: normal;
font-weight: 600;
}
.top-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
}
.prefs-toggle {
font: inherit;
font-size: var(--font-size-sm);
font-weight: 600;
padding: var(--space-2) var(--space-3);
min-height: var(--touch-target-min);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
background var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
.prefs-toggle:hover {
background: var(--prefs-toggle-hover);
}
.prefs-toggle:active {
transform: scale(0.98);
}
.prefs-toggle:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.prefs-toggle[aria-expanded="true"] {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.prefs-panel {
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
left: auto;
z-index: 40;
width: min(18rem, calc(100vw - var(--space-8)));
padding: var(--space-3) var(--space-4);
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: visible;
}
[dir="rtl"] .prefs-panel {
right: auto;
left: 0;
}
.prefs-panel[hidden] {
display: none !important;
}
.prefs-panel__scroll {
overflow: visible;
}
.prefs-panel__head {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
margin: 0 0 var(--space-2);
}
.prefs-panel__home-btn {
display: none;
}
.prefs-panel__head .prefs-panel__title {
margin: 0;
flex: 1;
text-align: center;
font-size: var(--font-size-md);
font-weight: 700;
}
body.mobile-prefs-screen .prefs-panel__home-btn {
display: inline-flex !important;
}
.prefs-panel__head .prefs-panel__home-btn {
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
}
.prefs-field {
margin-bottom: var(--space-3);
}
.prefs-field--hint {
font-size: var(--font-size-xs);
line-height: var(--font-line-snug);
color: var(--muted);
margin-bottom: var(--space-2);
}
.prefs-field__label {
display: block;
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--muted);
margin-bottom: var(--space-1);
}
.prefs-select {
width: 100%;
font: inherit;
/* Min 16px: iOS Safari zooms the page when focused inputs are smaller, breaking prefs autocomplete layout. */
font-size: max(16px, 0.85rem);
padding: var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
cursor: pointer;
}
.prefs-input {
width: 100%;
font: inherit;
font-size: max(16px, 0.85rem);
padding: var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
}
.prefs-select:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.prefs-input:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/*
* Home / work address fields: use a literal 16px size so iOS Safari does not zoom the viewport on
* focus (zoom breaks suggestion dropdown placement vs visualViewport). Generic .prefs-input max()
* is not always enough when ancestors or dynamic text sizing interact with the keyboard.
*/
.prefs-field--address #prefs-home-address.prefs-input,
.prefs-field--address #prefs-work-address.prefs-input {
font-size: 16px;
line-height: 1.4;
}
.prefs-field--address {
position: relative;
}
.prefs-suggestions {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 60;
touch-action: manipulation;
margin: 0.2rem 0 0;
padding: 0.2rem 0;
list-style: none;
max-height: 10.5rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
box-sizing: border-box;
}
.prefs-suggestions__item {
padding: 0.38rem 0.55rem;
font-size: 0.78rem;
line-height: 1.35;
color: var(--text);
cursor: pointer;
}
.prefs-suggestions__item:hover {
background: var(--primary-soft);
}
.prefs-suggestions__item--meta {
cursor: default;
color: var(--muted);
font-size: 0.74rem;
}
.prefs-suggestions__item--meta:hover {
background: transparent;
}
.lang-toolbar {
display: flex;
align-items: center;
gap: 0.4rem;
}
.lang-toolbar__label {
font-size: 0.8rem;
font-weight: 600;
color: var(--muted);
margin: 0;
}
.lang-toolbar__select {
font: inherit;
font-size: 0.85rem;
min-height: var(--touch-target-min);
padding: 0.35rem 0.5rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
min-width: 7.5rem;
cursor: pointer;
}
.lang-toolbar__select:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.cards {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--gap-tiles);
align-items: stretch;
}
.cards > #tile-order-live {
grid-column: 1 / -1;
margin: 0;
padding: 0;
min-height: 0;
}
.card {
background: var(--surface);
border-radius: var(--radius-card-primary);
box-shadow: var(--card-elev-standard);
padding: var(--card-padding);
border: 1px solid var(--border);
transition:
box-shadow var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard),
transform var(--duration-fast) var(--ease-out),
background-color var(--duration-base) var(--ease-standard);
}
.card:hover {
box-shadow: var(--card-elev-hover);
border-color: var(--border);
}
/* Tap / press: soft radial highlight (Material-style scale 1 → 0.98) */
.card.card-interactive {
position: relative;
isolation: isolate;
overflow: hidden;
}
.card.card-interactive::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at 50% 50%,
color-mix(in srgb, var(--accent) 22%, transparent),
transparent 62%
);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-standard);
pointer-events: none;
}
.card.card-interactive:active::before {
opacity: 1;
}
/* Primary grid tiles: stronger focus ring when any control inside is focused */
.card.card-interactive:focus-within {
border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
box-shadow: var(--card-elev-hover);
}
.card.card-interactive:active {
transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
.card.card-interactive::before {
transition: none;
opacity: 0 !important;
}
.card.card-interactive:active {
transform: none;
}
}
/* Movable dashboard tiles (order persisted in preferences cookie) */
.dashboard-tiles {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
/* Row flow keeps variable-height tiles in document order and avoids gaps/overlap quirks from dense packing. */
grid-auto-flow: row;
gap: var(--gap-tiles);
align-items: stretch;
}
.dashboard-tile {
grid-column: span 4;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
/* To-do tile grows with the list + composer so later tiles are pushed down (no max-height clip / overlap). */
#todo-card.dashboard-tile {
height: auto;
align-self: start;
max-height: none;
overflow-x: hidden;
overflow-y: visible;
}
.tile-type-square {
grid-column: span 3;
overflow: hidden;
}
.tile-type-square h2,
.tile-type-square .meta,
.tile-type-square .metric {
overflow-wrap: anywhere;
}
.tile-type-horizontal,
.tile-type-vertical {
grid-column: span 6;
}
.tile-type-square,
.tile-type-horizontal {
min-height: 12rem;
}
.tile-type-horizontal {
overflow: hidden;
}
.tile-type-horizontal-scroll {
grid-column: span 6;
min-height: 12rem;
overflow-x: hidden;
overflow-y: hidden;
}
/* Weather: optional column split on Today’s Brief; horizontal scroll only on #weather-hourly. */
#weather-card.dashboard-tile.tile-type-horizontal-scroll {
min-width: 0;
max-width: 100%;
min-height: min(17rem, 30vh);
overflow-x: hidden;
overflow-y: hidden;
}
.tile-type-vertical {
max-height: min(26rem, 58vh);
overflow-y: hidden;
overflow-x: hidden;
}
#tile-news.tile-type-vertical.dashboard-tile--resizable-v,
#stocks-tile.tile-type-vertical.dashboard-tile--resizable-v {
max-height: none;
align-self: start;
overflow: hidden;
}
.dashboard-tile--weather .weather-inline {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.dashboard-tile--weather .hourly-forecast {
flex: 1;
min-height: 0;
}
.card__top--tile {
--drag-handle-size: 2rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.45rem 0.55rem;
margin-bottom: 0.5rem;
}
.card__top--tile > h2 {
margin: 0;
min-width: 0;
font-size: var(--type-section);
font-weight: var(--font-weight-medium);
letter-spacing: -0.015em;
line-height: var(--font-line-snug);
color: var(--text);
}
.tile-drag-handle {
flex-shrink: 0;
width: var(--drag-handle-size, 2rem);
height: var(--drag-handle-size, 2rem);
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-subtle);
border-radius: 10px;
background: var(--surface-alt);
color: var(--muted);
cursor: grab;
touch-action: none;
}
.tile-drag-handle:hover {
color: var(--text);
border-color: var(--border);
}
.tile-drag-handle:active {
cursor: grabbing;
}
.tile-drag-handle__icon {
display: block;
}
.tile-resize-handle {
flex-shrink: 0;
width: 100%;
margin: 0.35rem 0 0;
padding: 0.35rem 0 0.15rem;
border: none;
border-top: 1px solid var(--border-subtle);
border-radius: 0 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px);
background: linear-gradient(180deg, transparent 0%, var(--surface-alt) 55%);
cursor: ns-resize;
touch-action: none;
display: flex;
align-items: center;
justify-content: center;
min-height: 1.25rem;
}
.tile-resize-handle:hover,
.tile-resize-handle:focus-visible {
background: var(--prefs-toggle-hover);
}
.tile-resize-handle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.tile-resize-handle__grip {
display: block;
width: 2.5rem;
height: 0.28rem;
border-radius: 999px;
background: var(--muted);
opacity: 0.65;
}
body.is-resizing-tile {
cursor: ns-resize !important;
user-select: none;
}
.sortable-drag {
opacity: 0.95;
box-shadow: var(--shadow-hover);
}
.sortable-ghost {
opacity: 0.42;
outline: 2px dashed var(--accent);
outline-offset: 2px;
}
/* Fixed bottom nav sits above the dashboard; let drag gestures reach tiles underneath */
body:has(.sortable-ghost) .app-bottom-nav,
body:has(.sortable-drag) .app-bottom-nav {
pointer-events: none;
}
.dashboard-tile.dashboard-tile--ipl {
padding: 1rem 1.05rem 1.05rem;
border-radius: calc(var(--radius) - 2px);
box-shadow: var(--shadow), inset 0 0 0 1px var(--accent-soft);
background: linear-gradient(165deg, var(--surface) 0%, var(--surface-alt) 100%);
max-height: none;
}
.dashboard-tile.dashboard-tile--ipl:hover {
box-shadow: var(--shadow-hover), inset 0 0 0 1px rgba(56, 142, 60, 0.22);
}
html[data-theme="midnight"] .dashboard-tile.dashboard-tile--ipl:hover,
html[data-theme="nord"] .dashboard-tile.dashboard-tile--ipl:hover {
box-shadow: var(--shadow-hover), inset 0 0 0 1px rgba(129, 199, 132, 0.28);
}
.ipl-scroll {
margin-top: 0.35rem;
max-height: none;
overflow: hidden;
padding-right: 0;
}
/* Broadcast-style IPL score strip (matches common live-score apps) */
.ipl-scoreboard {
margin-top: 0.25rem;
padding: 0.65rem 0.55rem 0.5rem;
border-radius: var(--radius-md, 10px);
background: linear-gradient(
180deg,
rgba(30, 34, 42, 0.92) 0%,
rgba(22, 24, 30, 0.96) 100%
);
color: var(--text, #e8eaef);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.ipl-scoreboard--modern {
background: linear-gradient(
165deg,
color-mix(in srgb, var(--surface) 92%, var(--surface-alt)),
color-mix(in srgb, var(--surface-alt) 88%, var(--surface))
);
color: var(--text, #111827);
border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
box-shadow: var(--shadow-tight);
border-radius: var(--radius-md, 12px);
padding: 0.5rem 0.45rem 0.45rem;
}
.ipl-scoreboard--live.ipl-scoreboard--modern {
border-color: color-mix(in srgb, #dc2626 28%, var(--border));
animation: iplScoreboardLiveHalo 2.8s ease-in-out infinite;
}
.ipl-scoreboard--completed.ipl-scoreboard--modern {
border-color: color-mix(in srgb, var(--muted) 45%, var(--border));
}
@keyframes iplScoreboardLiveHalo {
0%,
100% {
box-shadow: var(--shadow-tight);
}
50% {
box-shadow:
0 0 0 1px color-mix(in srgb, #dc2626 25%, transparent),
0 6px 22px color-mix(in srgb, #dc2626 12%, transparent);
}
}
@media (prefers-reduced-motion: reduce) {
.ipl-scoreboard--live.ipl-scoreboard--modern {
animation: none;
}
}
a.ipl-scoreboard-tap {
display: block;
text-decoration: none;
color: inherit;
border-radius: inherit;
-webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
outline: none;
}
a.ipl-scoreboard-tap:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: 2px;
border-radius: var(--radius-md, 12px);
}
.ipl-sb-badge-strip {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.38rem;
min-height: 1.25rem;
}
.ipl-sb-status-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
font-size: clamp(0.56rem, 1.9vw, 0.65rem);
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1;
border: 1px solid transparent;
}
.ipl-sb-status-pill--live {
color: #fef2f2;
background: linear-gradient(135deg, #b91c1c 0%, #dc2626 55%, #991b1b 100%);
border-color: color-mix(in srgb, #fecaca 55%, transparent);
box-shadow: 0 1px 8px color-mix(in srgb, #dc2626 28%, transparent);
}
.ipl-sb-status-pill--completed {
color: color-mix(in srgb, var(--text) 88%, var(--muted));
background: color-mix(in srgb, var(--surface-alt) 94%, var(--muted));
border-color: color-mix(in srgb, var(--border) 70%, transparent);
letter-spacing: 0.08em;
}
.ipl-sb-status-pill__text {
position: relative;
top: 0.02em;
}
.ipl-sb-live-row {
display: flex;
justify-content: flex-end;
align-items: center;
min-height: 1rem;
margin-bottom: 0.2rem;
gap: 0.35rem;
}
.ipl-sb-live-dot {
width: 8px;
height: 8px;
background: #dc2626;
border-radius: 999px;
display: inline-block;
position: relative;
}
.ipl-sb-live-ping {
position: absolute;
inset: -2px;
border-radius: 999px;
background: rgba(220, 38, 38, 0.4);
animation: iplLivePulse 1.4s ease-out infinite;
}
.ipl-sb-live-label {
font-size: 0.67rem;
letter-spacing: 0.08em;
font-weight: 800;
color: #dc2626;
}
.ipl-sb-completed {
font-size: 0.67rem;
letter-spacing: 0.03em;
font-weight: 700;
color: var(--muted);
}
/* Layout: Team A | Score | Team B */
.ipl-sb-arena {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: stretch;
gap: 0.35rem 0.45rem;
}
.ipl-sb-teamcol {
--ipl-accent: color-mix(in srgb, var(--accent) 55%, var(--border));
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.22rem;
min-width: 0;
padding: 0.28rem 0.22rem;
border-radius: var(--radius-sm, 8px);
background: color-mix(in srgb, var(--surface) 82%, transparent);
border: 1px solid color-mix(in srgb, var(--ipl-accent) 28%, var(--border-subtle));
box-shadow: inset 3px 0 0 0 var(--ipl-accent);
}
.ipl-sb-teamcol--right {
box-shadow: inset -3px 0 0 0 var(--ipl-accent);
}
.ipl-sb-teamcol[data-ipl-theme="mi"] {
--ipl-accent: #004ba0;
}
.ipl-sb-teamcol[data-ipl-theme="csk"] {
--ipl-accent: #e6a800;
}
.ipl-sb-teamcol[data-ipl-theme="csk"] .ipl-sb-teamabbr {
color: #9a6b0a;
}
.ipl-sb-teamcol[data-ipl-theme="rcb"] {
--ipl-accent: #ec1c24;
}
.ipl-sb-teamcol[data-ipl-theme="kkr"] {
--ipl-accent: #3a225d;
}
.ipl-sb-teamcol[data-ipl-theme="rr"] {
--ipl-accent: #254aa5;
}
.ipl-sb-teamcol[data-ipl-theme="srh"] {
--ipl-accent: #ff822a;
}
.ipl-sb-teamcol[data-ipl-theme="pbks"] {
--ipl-accent: #dd1f2d;
}
.ipl-sb-teamcol[data-ipl-theme="dc"] {
--ipl-accent: #2563eb;
}
.ipl-sb-teamcol[data-ipl-theme="gt"] {
--ipl-accent: #1c2374;
}
.ipl-sb-teamcol[data-ipl-theme="lsg"] {
--ipl-accent: #a72056;
}
.ipl-sb-teammedia {
flex-shrink: 0;
}
.ipl-sb-avatar {
width: clamp(2rem, 6vw, 2.55rem);
height: clamp(2rem, 6vw, 2.55rem);
border-radius: 999px;
overflow: hidden;
margin-inline: auto;
background: linear-gradient(145deg, color-mix(in srgb, var(--ipl-accent) 22%, var(--surface-alt)), var(--surface-alt));
box-shadow:
inset 0 0 0 2px color-mix(in srgb, var(--ipl-accent) 35%, transparent),
0 2px 8px rgba(0, 0, 0, 0.06);
}
.ipl-sb-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ipl-sb-avatar--fallback {
display: grid;
place-items: center;
font-size: clamp(0.62rem, 2vw, 0.75rem);
font-weight: 800;
color: var(--text);
}
.ipl-sb-teamtitle {
font-size: clamp(0.58rem, 2.1vw, 0.72rem);
font-weight: 700;
line-height: 1.2;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 100%;
}
.ipl-sb-teamabbr {
font-size: clamp(0.72rem, 2.6vw, 0.88rem);
font-weight: 800;
letter-spacing: 0.04em;
color: color-mix(in srgb, var(--ipl-accent) 55%, var(--text));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ipl-sb-arena-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.15rem 0.28rem;
min-width: clamp(4.25rem, 22vw, 6.5rem);
align-self: center;
}
.ipl-sb-runs-line {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
justify-content: center;
gap: 0.12rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.05;
}
.ipl-sb-runs-prefix {
font-size: clamp(0.62rem, 2vw, 0.78rem);
font-weight: 700;
color: var(--text-secondary);
white-space: nowrap;
}
.ipl-sb-runs-prefix:empty {
display: none;
}
.ipl-sb-runs-nums {
font-size: clamp(1.15rem, 4.5vw, 1.95rem);
color: var(--text);
}
.ipl-sb-overs-line {
margin-top: 0.12rem;
font-size: clamp(0.62rem, 2.4vw, 0.82rem);
font-weight: 600;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.ipl-sb-status {
margin-top: 0.42rem;
text-align: center;
font-size: clamp(0.68rem, 2.5vw, 0.82rem);
font-weight: 600;
color: var(--muted);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ipl-sb-status--result {
font-weight: 700;
font-size: clamp(0.72rem, 2.7vw, 0.88rem);
color: var(--text-secondary);
}
.ipl-scoreboard--completed .ipl-sb-status--result {
color: var(--text);
}
.ipl-sb-venue {
margin-top: 0.22rem;
text-align: center;
font-size: clamp(0.58rem, 2vw, 0.68rem);
color: var(--muted);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* Legacy class names — kept for other render paths */
.ipl-sb-teamface {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
gap: 0.2rem;
}
.ipl-sb-teamshort {
font-size: 0.8rem;
font-weight: 700;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ipl-sb-topline {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: end;
gap: 0.25rem 0.6rem;
}
.ipl-sb-vs {
font-size: 0.86rem;
font-weight: 700;
white-space: nowrap;
color: var(--text);
margin-bottom: 0.08rem;
}
.ipl-sb-scoreline {
margin-top: 0.42rem;
text-align: center;
font-size: clamp(1.18rem, 1.65vw, 1.78rem);
line-height: 1.12;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text);
}
@keyframes iplLivePulse {
0% {
opacity: 0.8;
transform: scale(0.8);
}
100% {
opacity: 0;
transform: scale(2);
}
}
.ipl-scoreboard__top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: start;
gap: 0.35rem 0.5rem;
}
.ipl-scoreboard__team {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.2rem;
min-width: 0;
}
.ipl-scoreboard__team--left {
justify-self: start;
}
.ipl-scoreboard__team--right {
justify-self: end;
}
.ipl-sb-badge {
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.05;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.ipl-sb-badge--a {
background: radial-gradient(circle at 30% 25%, #e53935 0%, #8b1010 100%);
}
.ipl-sb-badge--b {
background: radial-gradient(circle at 30% 25%, #1e88e5 0%, #0d47a1 100%);
}
.ipl-sb-abbr {
font-size: 0.78rem;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ipl-scoreboard__center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 0.15rem;
min-width: 5.5rem;
}
.ipl-sb-main {
font-size: 1.85rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.1;
}
.ipl-sb-overs {
margin-top: 0.12rem;
font-size: 0.92rem;
font-weight: 600;
color: rgba(232, 234, 239, 0.72);
font-variant-numeric: tabular-nums;
}
.ipl-sb-yet {
font-size: 0.72rem;
font-weight: 600;
color: rgba(232, 234, 239, 0.55);
margin-top: 0.1rem;
}
.ipl-sb-subscore {
font-size: 0.72rem;
font-weight: 600;
color: rgba(232, 234, 239, 0.75);
margin-top: 0.1rem;
font-variant-numeric: tabular-nums;
}
.ipl-scoreboard__context {
margin-top: 0.55rem;
text-align: center;
font-size: 0.78rem;
font-weight: 600;
color: rgba(232, 234, 239, 0.58);
line-height: 1.35;
}
.ipl-scoreboard__series {
margin-top: 0.2rem;
text-align: center;
font-size: 0.72rem;
color: rgba(232, 234, 239, 0.45);
}
.ipl-scoreboard__rule {
margin: 0.55rem 0 0.45rem;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ipl-scoreboard__players {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem 0.75rem;
align-items: start;
}
.ipl-scoreboard__col-title {
font-size: 0.76rem;
font-weight: 700;
margin-bottom: 0.35rem;
color: rgba(232, 234, 239, 0.85);
}
.ipl-sb-player-line {
display: flex;
align-items: baseline;
gap: 0.28rem;
margin-bottom: 0.28rem;
font-size: 0.8rem;
line-height: 1.35;
}
.ipl-sb-player-line:last-child {
margin-bottom: 0;
}
.ipl-sb-dot {
flex: 0 0 6px;
width: 6px;
height: 6px;
margin-top: 0.35em;
border-radius: 50%;
background: #e53935;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.ipl-sb-dot--empty {
visibility: hidden;
}
.ipl-sb-player-text {
flex: 1;
min-width: 0;
font-weight: 600;
color: rgba(232, 234, 239, 0.92);
}
.ipl-sb-empty-col {
font-size: 0.85rem;
color: rgba(232, 234, 239, 0.35);
}
#brief-card-ipl .ipl-scoreboard {
padding: 0.34rem 0.28rem 0.3rem;
}
#brief-card-ipl .ipl-sb-teamcol {
padding: 0.18rem 0.14rem;
gap: 0.12rem;
}
#brief-card-ipl .ipl-sb-arena {
gap: 0.22rem 0.28rem;
}
#brief-card-ipl .ipl-sb-arena-center {
min-width: clamp(3.5rem, 19vw, 5rem);
padding: 0.08rem 0.12rem;
}
#brief-card-ipl .ipl-sb-status--result {
-webkit-line-clamp: 2;
}
#brief-card-ipl .ipl-sb-badge-strip {
margin-bottom: 0.22rem;
min-height: 1rem;
}
#brief-card-ipl a.ipl-scoreboard-tap:focus-visible {
outline-offset: 1px;
}
/* Brief carousel: keep ping subtle */
#brief-card-ipl .ipl-sb-live-ping {
animation-duration: 1.8s;
}
.ipl-match-title {
font-weight: 600;
margin: 0 0 0.35rem;
line-height: 1.35;
}
.ipl-status-line,
.ipl-venue {
margin: 0.15rem 0;
font-size: 0.92rem;
line-height: 1.4;
}
.ipl-headline {
margin: 0.35rem 0;
font-size: 1rem;
line-height: 1.45;
}
.ipl-score-headline {
margin: 0.45rem 0 0.15rem;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.45;
}
.ipl-team-scores {
margin: 0.65rem 0 0.35rem;
}
.ipl-section-title {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 0.35rem;
}
.ipl-team-list {
list-style: none;
margin: 0;
padding: 0;
}
.ipl-team-list li {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: center;
padding: 0.45rem 0.55rem;
border: 1px solid var(--border-soft, rgba(128, 128, 128, 0.18));
border-radius: 0.55rem;
background: var(--surface-alt, rgba(128, 128, 128, 0.08));
font-size: 0.95rem;
margin-bottom: 0.4rem;
}
.ipl-team-name {
font-weight: 600;
}
.ipl-team-line {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.ipl-table-wrap {
margin-top: 0.65rem;
}
.ipl-table {
width: 100%;
border-collapse: collapse;
font-size: 0.82rem;
}
.ipl-table th,
.ipl-table td {
padding: 0.28rem 0.35rem;
text-align: right;
border-bottom: 1px solid var(--border-soft, rgba(128, 128, 128, 0.15));
}
.ipl-table th:first-child,
.ipl-table td:first-child {
text-align: left;
}
.ipl-table thead th {
color: var(--muted);
font-weight: 600;
font-size: 0.72rem;
}
.ipl-dismissal {
font-size: 0.78em;
color: var(--muted);
font-weight: 400;
}
.ipl-external-link {
display: inline-block;
margin-top: 0.65rem;
font-size: 0.9rem;
}
.ipl-error {
color: var(--danger, #c62828);
}
.ipl-empty {
margin: 0;
}
.ipl-note {
margin-top: 0.55rem;
}
.dashboard-tile.todo-card {
padding: 1rem 1rem 1rem;
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-tight);
background: var(--surface);
}
.dashboard-tile.todo-card:hover {
box-shadow: var(--shadow);
border-color: color-mix(in srgb, var(--border) 85%, var(--accent));
}
html[data-theme="midnight"] .dashboard-tile.todo-card:hover,
html[data-theme="nord"] .dashboard-tile.todo-card:hover {
border-color: color-mix(in srgb, var(--border) 80%, var(--accent));
}
#currency-tile.card--currency {
padding: 0.85rem 0.9rem 0.9rem;
border-radius: calc(var(--radius) - 2px);
box-shadow: var(--shadow-tight);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
}
#currency-tile.card--currency:hover {
box-shadow: var(--shadow);
}
#currency-tile.card--currency .card__top {
margin-bottom: 0.3rem;
}
#currency-tile .card__top--tile {
min-width: 0;
}
#currency-tile #fx-card-title {
min-width: 0;
overflow-wrap: anywhere;
}
#currency-tile #fx-status {
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#currency-tile .fx-conversion-panel {
display: flex;
flex-direction: column;
min-height: 0;
}
#currency-tile .fx-panel__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.35rem;
}
#currency-tile .fx-panel__footer-meta {
flex: 1;
min-width: 0;
margin: 0;
}
#currency-tile .fx-remove-btn {
flex-shrink: 0;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--muted);
font-size: 0.72rem;
line-height: 1.15;
padding: 0.28rem 0.45rem;
cursor: pointer;
}
#currency-tile .fx-remove-btn:hover {
color: var(--stock-down);
border-color: var(--stock-down);
}
#currency-tile .metric {
font-size: clamp(1.05rem, 0.8rem + 0.9vw, 1.45rem);
letter-spacing: -0.02em;
margin: 0.08rem 0;
}
/* One stock row height for scroll viewport inside stocks tile */
#stocks-tile.card--stocks {
--stock-row-h: 5.55rem;
--stock-gap: 0.34rem;
padding: 0.85rem 0.9rem 0.9rem;
border-radius: calc(var(--radius) - 2px);
box-shadow: var(--shadow-tight);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
}
#stocks-tile.card--stocks.dashboard-tile--resizable-v {
display: flex;
flex-direction: column;
height: 40vh;
min-height: min(14rem, 42vh);
box-sizing: border-box;
}
#stocks-tile.card--stocks:hover {
box-shadow: var(--shadow);
}
#stocks-tile .stocks-tile__top {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 0.3rem;
min-height: var(--drag-handle-size, 2rem);
box-sizing: border-box;
padding-inline: calc(var(--drag-handle-size, 2rem) + 2px);
}
#stocks-tile .stocks-tile__top .tile-mobile-leading {
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
align-items: center;
}
#stocks-tile .stocks-tile__top .tile-mobile-leading .tile-drag-handle {
position: static;
transform: none;
}
#stocks-tile .stocks-tile__top .tile-header-actions {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
#stocks-tile .stocks-tile__top .tile-collapse-btn {
position: static;
right: auto;
top: auto;
transform: none;
grid-column: unset;
grid-row: unset;
justify-self: unset;
max-width: min(5.75rem, 42vw);
}
#stocks-tile .stocks-tile__title {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: -0.01em;
min-width: 0;
max-width: 100%;
flex: 0 1 auto;
text-align: center;
}
#stocks-tile .stocks-wrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
margin-top: 0;
padding-top: 0;
overflow-x: hidden;
overflow-y: hidden;
}
#stocks-tile .markets-summary {
flex: 0 0 auto;
margin-bottom: 0.45rem;
padding: 0.35rem 0.42rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface-alt);
}
#stocks-tile .markets-summary__indices {
display: flex;
flex-direction: column;
gap: 0.22rem;
}
#stocks-tile .markets-summary__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
font-size: var(--type-body);
}
#stocks-tile .markets-summary__label {
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
}
#stocks-tile .markets-summary__chg {
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--text);
}
#stocks-tile .markets-summary__chg.is-up {
color: var(--stock-up);
}
#stocks-tile .markets-summary__chg.is-down {
color: var(--stock-down);
}
/* Add-symbol footer — matches TODO “Add a task” + composer pattern */
#stocks-tile .stocks-card__footer {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.35rem;
padding-top: 0.45rem;
border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
#stocks-tile .stock-composer .stocks-suggestions {
margin: 0.35rem 0 0;
}
#stocks-tile .stocks-suggestions {
margin: 0.22rem 0 0;
padding: 0.2rem 0;
list-style: none;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
max-height: 9rem;
overflow-y: auto;
}
#stocks-tile .stocks-suggestions__item {
padding: 0.25rem 0.4rem;
font-size: 0.68rem;
cursor: pointer;
}
#stocks-tile .stocks-suggestions__item:hover {
background: var(--primary-soft);
}
#stocks-tile .extra-stocks-list {
margin-top: 0.22rem;
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
}
#stocks-tile .extra-stock-chip {
border: 1px solid var(--border);
background: var(--surface-alt);
border-radius: 999px;
padding: 0.08rem 0.3rem;
font-size: 0.62rem;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
#stocks-tile .extra-stock-chip button {
border: none;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 0.7rem;
line-height: 1;
}
/* Middle region only: S&P/Dow + footer stay pinned outside this scrollport (desktop + mobile). */
#stocks-tile .stocks-scroll {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
box-sizing: border-box;
scroll-behavior: smooth;
}
#stocks-tile .stocks-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--stock-gap);
padding-right: 0.2rem;
padding-bottom: 0.15rem;
box-sizing: border-box;
min-height: min-content;
}
#stocks-tile .stock-chip {
padding: 0.28rem 0.38rem;
border-radius: 8px;
display: flex;
position: relative;
flex-wrap: wrap;
align-items: center;
gap: 0.12rem 0.45rem;
}
#stocks-tile .stock-chip__remove {
position: absolute;
bottom: 0.24rem;
right: 0.28rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--muted);
font-size: 0.6rem;
line-height: 1;
padding: 0.15rem 0.28rem;
cursor: pointer;
}
#stocks-tile .stock-chip__remove:hover {
color: var(--stock-down);
border-color: var(--stock-down);
}
.prefs-field--checkbox {
margin-top: 0.1rem;
}
.prefs-checkline {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.86rem;
color: var(--text);
}
.prefs-checkline input[type="checkbox"] {
width: 1rem;
height: 1rem;
accent-color: var(--accent);
}
#stocks-tile .stock-chip__name {
flex: 1 1 5.5rem;
min-width: 0;
margin: 0;
font-size: 0.66rem;
font-weight: 700;
line-height: 1.25;
color: var(--text);
}
#stocks-tile .stock-chip__price {
flex: 0 0 auto;
margin: 0;
font-size: 0.74rem;
font-weight: 700;
}
#stocks-tile .stock-chip__change {
flex: 1 1 100%;
margin: 0;
font-size: 0.68rem;
}
#stocks-tile .stock-chip__spark {
flex: 1 1 100%;
margin-top: 0.06rem;
height: 16px;
}
#stocks-tile .stock-chip__spark .sparkline {
width: 100%;
height: 16px;
}
#stocks-tile .stock-reason-wrap {
flex: 1 1 100%;
margin-top: 0.06rem;
}
#stocks-tile .stock-reason-toggle {
padding: 0.1rem 0.28rem;
font-size: 0.58rem;
}
#stocks-tile .stock-chip__reason {
font-size: 0.62rem;
margin: 0.2rem 0 0;
}
/* ---------------------------------------------------------------------------
AI CTAs — shared Listen / Ask AI affordances (accent + motion tokens)
--------------------------------------------------------------------------- */
.ai-cta {
font-family: inherit;
font-weight: 600;
letter-spacing: 0.02em;
}
.news-audio-btn.ai-cta:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* Latest News: primary “Listen” control (idle shows icon + label; play/load use compact circle) */
#news-category-audio-btn.news-audio-btn.ai-cta--listen-toolbar {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: auto;
min-width: 6.25rem;
height: auto;
min-height: var(--touch-target-min);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
background: linear-gradient(
180deg,
color-mix(in srgb, var(--accent-soft) 50%, var(--surface)) 0%,
color-mix(in srgb, var(--surface-alt) 94%, var(--accent-soft)) 100%
);
color: var(--text);
box-shadow: var(--elev-1);
transition:
background var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-out);
}
#news-category-audio-btn.ai-cta--listen-toolbar:hover:not(:disabled) {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-alt));
box-shadow: var(--elev-2);
}
#news-category-audio-btn.ai-cta--listen-toolbar .ai-cta__label {
font-size: var(--font-size-sm);
font-weight: 700;
white-space: nowrap;
}
#news-category-audio-btn.ai-cta--listen-toolbar.is-loading,
#news-category-audio-btn.ai-cta--listen-toolbar.is-playing,
#news-category-audio-btn.ai-cta--listen-toolbar.is-paused {
min-width: 2.75rem;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border-radius: 999px;
background: var(--surface-alt);
box-shadow: none;
}
#news-category-audio-btn.ai-cta--listen-toolbar.is-playing {
border-color: var(--accent);
color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
#news-category-audio-btn.ai-cta--listen-toolbar {
transition: none;
}
}
.brief-ai-news__audio-btn.news-audio-btn.ai-cta--brief-minutes {
transition:
background var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.brief-ai-news__audio-btn.news-audio-btn.ai-cta--brief-minutes {
transition: none;
}
}
/* Gemini CTA: muted gradient pill + spark icon (stocks + news) — kept subtle, not neon. */
.gemini-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.38rem;
flex-wrap: wrap;
max-width: 100%;
margin: 0;
text-align: left;
font-family: inherit;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.25;
color: #f4f6fb;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
padding: 0.42rem 0.95rem 0.42rem 0.78rem;
background: linear-gradient(145deg, #5c6b82 0%, #5f6dad 52%, #6974a8 100%);
box-shadow:
0 1px 4px rgba(30, 41, 59, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transition:
transform var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-standard),
filter var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard);
}
.gemini-action-btn:hover {
transform: translateY(-0.5px);
filter: brightness(1.04);
border-color: rgba(255, 255, 255, 0.16);
box-shadow:
0 2px 8px rgba(30, 41, 59, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.gemini-action-btn:active {
transform: translateY(0);
filter: brightness(0.98);
}
.gemini-action-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
@media (prefers-reduced-motion: reduce) {
.gemini-action-btn {
transition: none;
}
}
.gemini-btn-icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.gemini-logo-svg--brand {
display: block;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) saturate(0.88);
opacity: 0.95;
}
html[data-theme="midnight"] .gemini-action-btn,
html[data-theme="nord"] .gemini-action-btn {
color: #eef1f8;
border-color: rgba(255, 255, 255, 0.08);
background: linear-gradient(145deg, #4a5568 0%, #525d85 55%, #5a628f 100%);
box-shadow:
0 1px 5px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="midnight"] .gemini-action-btn:hover,
html[data-theme="nord"] .gemini-action-btn:hover {
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.stock-reason-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
}
/* Stocks “Why is it up/down?” — minimal footprint under each chip */
#stocks-tile .gemini-action-btn {
font-size: 0.52rem;
font-weight: 600;
letter-spacing: 0.008em;
line-height: 1.12;
padding: 0.14rem 0.38rem 0.14rem 0.3rem;
gap: 0.2rem;
}
#stocks-tile .gemini-action-btn .gemini-logo-svg--brand {
width: 11px;
height: 11px;
}
#stocks-tile .stock-why-audio-btn.news-audio-btn {
flex-shrink: 0;
width: 1.65rem;
height: 1.65rem;
min-width: 1.65rem;
padding: 0;
border-radius: 10px;
}
/* News Read More: smaller label + icon than stocks so headlines row stays dense */
#tile-news .news-read-more-btn.gemini-action-btn {
font-size: 0.54rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.18;
padding: 0.22rem 0.46rem 0.22rem 0.38rem;
gap: 0.26rem;
}
#tile-news .news-read-more-btn.gemini-action-btn .gemini-logo-svg--brand {
width: 12px;
height: 12px;
}
.gemini-chat-backdrop {
position: fixed;
inset: 0;
z-index: 10050;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
}
.gemini-chat-backdrop[hidden] {
display: none !important;
}
.gemini-chat-dialog {
width: min(100%, 28rem);
max-height: min(88vh, 36rem);
display: flex;
flex-direction: column;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow:
0 16px 48px rgba(15, 23, 42, 0.22),
0 0 0 1px rgba(124, 58, 237, 0.08);
overflow: hidden;
}
.gemini-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.09) 0%, rgba(124, 58, 237, 0.08) 50%, rgba(219, 39, 119, 0.06) 100%);
}
.gemini-chat-title {
margin: 0;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(90deg, #2563eb, #7c3aed, #db2777);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
html[data-theme="midnight"] .gemini-chat-title,
html[data-theme="nord"] .gemini-chat-title {
background: linear-gradient(90deg, #60a5fa, #c084fc, #f472b6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gemini-chat-close {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
padding: 0;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
border-color var(--duration-fast) var(--ease-standard),
background var(--duration-fast) var(--ease-standard);
}
.gemini-chat-close:hover {
border-color: var(--accent);
}
.gemini-chat-close:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.gemini-chat-close:active {
transform: scale(0.96);
}
.gemini-chat-messages {
flex: 1 1 auto;
min-height: 10rem;
max-height: 22rem;
overflow-y: auto;
padding: 0.75rem 0.85rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, transparent 32%);
}
html[data-theme="midnight"] .gemini-chat-messages,
html[data-theme="nord"] .gemini-chat-messages {
background: linear-gradient(180deg, rgba(30, 41, 59, 0.35) 0%, transparent 40%);
}
.gemini-chat-bubble {
padding: 0.45rem 0.55rem;
border-radius: 8px;
font-size: 0.84rem;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.gemini-chat-bubble--rich {
white-space: normal;
padding: 0.65rem 0.75rem;
border-radius: 12px;
line-height: 1.5;
}
.gemini-chat-bubble--model.gemini-chat-bubble--rich {
align-self: stretch;
max-width: 100%;
background: linear-gradient(145deg, var(--surface-alt) 0%, rgba(124, 58, 237, 0.04) 100%);
border: 1px solid rgba(124, 58, 237, 0.15);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.gemini-rich-p {
margin: 0 0 0.55rem;
font-size: 0.86rem;
color: var(--text);
}
.gemini-rich-p:last-child {
margin-bottom: 0;
}
.gemini-rich-strong {
font-weight: 700;
color: var(--text);
background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.12));
padding: 0.05rem 0.2rem;
border-radius: 4px;
}
.gemini-rich-list {
margin: 0.35rem 0 0.65rem;
padding: 0;
font-size: 0.86rem;
color: var(--text);
}
.gemini-rich-list:last-child {
margin-bottom: 0;
}
.gemini-rich-list--bullet {
list-style: none;
}
.gemini-rich-list--bullet li {
position: relative;
margin: 0.4rem 0;
padding-left: 1.15rem;
line-height: 1.45;
}
.gemini-rich-list--bullet li::before {
content: "";
position: absolute;
left: 0.1rem;
top: 0.48em;
width: 7px;
height: 7px;
border-radius: 50%;
background: linear-gradient(135deg, #4285f4, #a855f7);
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.gemini-rich-list--ordered {
margin-left: 1.1rem;
padding-left: 0.35rem;
}
.gemini-rich-list--ordered li {
margin: 0.35rem 0;
padding-left: 0.25rem;
line-height: 1.45;
}
.gemini-rich-list--ordered li::marker {
color: #7c3aed;
font-weight: 700;
}
html[data-theme="midnight"] .gemini-rich-strong,
html[data-theme="nord"] .gemini-rich-strong {
background: linear-gradient(90deg, rgba(96, 165, 250, 0.15), rgba(192, 132, 252, 0.15));
}
.gemini-chat-bubble--user {
align-self: flex-end;
background: var(--accent-soft);
border: 1px solid var(--border);
}
.gemini-chat-bubble--model:not(.gemini-chat-bubble--rich) {
align-self: flex-start;
background: var(--surface-alt);
border: 1px solid var(--border-subtle);
}
.gemini-chat-bubble--error {
border-color: var(--warn);
color: var(--warn);
}
.gemini-chat-thinking {
align-self: flex-start;
font-size: 0.78rem;
font-style: italic;
opacity: 0.85;
}
.gemini-chat-form {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0.55rem 0.65rem 0.65rem;
border-top: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.gemini-chat-input {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 2.5rem;
max-height: 8rem;
padding: 0.45rem 0.5rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
font: inherit;
}
.gemini-chat-send {
align-self: flex-end;
padding: 0.45rem 1.1rem;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #2563eb 0%, #7c3aed 55%, #c026d3 100%);
color: #fff;
font-weight: 600;
cursor: pointer;
font-family: inherit;
box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
transition: transform 0.15s ease, filter 0.15s ease;
}
.gemini-chat-send:hover:not(:disabled) {
transform: translateY(-1px);
filter: brightness(1.05);
}
.gemini-chat-send:disabled {
opacity: 0.45;
cursor: not-allowed;
}
@media (max-width: 480px) {
.gemini-chat-dialog {
max-height: min(92vh, 42rem);
}
.gemini-chat-messages {
max-height: 50vh;
}
}
.todo-card__top {
margin-bottom: 0.4rem;
}
/* Centered title; drag / mobile-home in `.tile-mobile-leading` at start edge */
.todo-card .todo-card__top.card__top--tile {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 0.45rem;
padding-inline: calc(var(--drag-handle-size, 2rem) + 2px);
box-sizing: border-box;
min-height: var(--drag-handle-size, 2rem);
}
.todo-card .todo-card__top.card__top--tile .tile-mobile-leading {
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
align-items: center;
}
.todo-card .todo-card__top.card__top--tile > h2 {
width: 100%;
text-align: center;
padding-inline: 0.35rem;
box-sizing: border-box;
font-size: var(--font-size-lg);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.favorites-card__top {
margin-bottom: 0.4rem;
}
.favorites-card .favorites-card__top.card__top--tile {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 0.45rem;
padding-inline: calc(var(--drag-handle-size, 2rem) + 2px);
box-sizing: border-box;
min-height: var(--drag-handle-size, 2rem);
}
.favorites-card .favorites-card__top.card__top--tile .tile-mobile-leading {
position: absolute;
inset-inline-start: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
align-items: center;
}
.favorites-card .favorites-card__top.card__top--tile > h2 {
width: 100%;
text-align: center;
padding-inline: 0.35rem;
box-sizing: border-box;
font-size: var(--font-size-lg);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.favorites-card .favorites-card__top.card__top--tile .favorites-card__status {
position: absolute;
inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
max-width: 38%;
font-size: 0.68rem;
text-align: end;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.todo-card {
display: flex;
flex-direction: column;
min-height: 0;
}
.todo-scroll {
min-height: 0;
--todo-item-min-h: 2.85rem;
/* `0px` keeps max-height calc() valid; unitless 0 can break length math in some engines. */
--todo-list-gap: 0px;
}
/* To-do: no vertical cap — height follows list + composer; list scrolls when .todo-scroll--limited applies. */
#todo-card.tile-type-vertical {
max-height: none;
overflow-y: visible;
overflow-x: hidden;
}
#todo-card.tile-type-vertical .todo-scroll {
flex: 0 1 auto;
min-height: 0;
/* max-height comes from .todo-scroll--limited when the list is long */
}
/* When adding a todo, list scrolls above composer; whole tile grows so tiles below move down. */
#todo-card.tile-type-vertical.todo-card--composer-open .todo-scroll {
flex: 0 1 auto;
min-height: 3.5rem;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
#todo-card.tile-type-vertical.todo-card--composer-open .todo-composer {
flex-shrink: 0;
margin-top: 0;
padding-top: 0;
border-top: none;
background: transparent;
}
#todo-card {
--todo-scroll-visible-rows: 5;
}
.todo-scroll--limited {
max-height: calc(
var(--todo-scroll-visible-rows, 5) * var(--todo-item-min-h) + (var(--todo-scroll-visible-rows, 5) - 1) *
var(--todo-list-gap)
);
overflow-y: auto;
overflow-x: hidden;
padding-right: 0.2rem;
scroll-behavior: smooth;
overscroll-behavior: contain;
}
/* List “well” — calm inset surface like Microsoft To Do */
#todo-card .todo-scroll {
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
background: color-mix(in srgb, var(--surface-alt) 82%, var(--surface));
padding: 0;
}
.todo-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--todo-list-gap, 0);
min-height: 0;
}
.todo-item {
display: flex;
align-items: flex-start;
gap: 0.55rem;
padding: 0.55rem 0.65rem;
min-height: var(--todo-item-min-h);
box-sizing: border-box;
border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
border-radius: 0;
background: transparent;
transition: background var(--duration-fast) var(--ease-standard);
}
.todo-item:last-child {
border-bottom: none;
}
.todo-item:hover {
background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.todo-item.is-done {
opacity: 0.88;
}
.todo-checkbox {
margin-top: 0.2rem;
width: 1.125rem;
height: 1.125rem;
flex-shrink: 0;
cursor: pointer;
accent-color: var(--accent);
border-radius: 999px;
}
.todo-empty {
list-style: none;
margin: 0;
padding: 1.35rem 1rem 1.5rem;
text-align: center;
border: none;
}
.todo-empty__text {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 500;
line-height: var(--font-line-snug);
color: var(--muted);
}
/* Bottom-nav full-screen tiles: home replaces drag handle (≤820px mobile shell only). */
.tile-mobile-leading {
position: relative;
}
.mobile-shell-home-btn {
display: none;
align-items: center;
justify-content: center;
width: var(--drag-handle-size, 2rem);
height: var(--drag-handle-size, 2rem);
padding: 0;
margin: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
cursor: pointer;
flex-shrink: 0;
transition: background var(--duration-fast) var(--ease-standard);
}
.mobile-shell-home-btn:hover {
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.mobile-shell-home-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: 2px;
}
.mobile-shell-home-btn__icon {
display: block;
}
body.mobile-news-screen #tile-news .tile-mobile-leading .tile-drag-handle,
body.mobile-stocks-screen #stocks-tile .tile-mobile-leading .tile-drag-handle,
body.mobile-todos-screen #todo-card .tile-mobile-leading .tile-drag-handle,
body.mobile-favorites-screen #favorites-card .tile-mobile-leading .tile-drag-handle {
display: none !important;
}
body.mobile-news-screen #tile-news .tile-mobile-leading .mobile-shell-home-btn,
body.mobile-stocks-screen #stocks-tile .tile-mobile-leading .mobile-shell-home-btn,
body.mobile-todos-screen #todo-card .tile-mobile-leading .mobile-shell-home-btn,
body.mobile-favorites-screen #favorites-card .tile-mobile-leading .mobile-shell-home-btn {
display: inline-flex !important;
}
.todo-item__text-col {
flex: 1;
min-width: 0;
}
.todo-item__edit {
display: flex;
flex-direction: column;
gap: 0.35rem;
width: 100%;
}
.todo-item__edit .todo-item__edit-input {
min-height: 2.4rem;
max-height: 5rem;
resize: vertical;
}
.todo-item__edit-actions {
margin-top: 0;
}
.todo-item--editing {
border-bottom-color: transparent;
background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}
.todo-text {
flex: 1;
min-width: 0;
font-size: 0.9rem;
line-height: 1.4;
color: var(--text);
padding: 0.18rem 0.35rem;
margin: -0.18rem -0.35rem;
word-break: break-word;
cursor: pointer;
border-radius: var(--radius-sm);
outline: none;
}
.todo-text:hover {
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.todo-text:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.todo-item.is-done .todo-text {
text-decoration: line-through;
color: var(--muted);
}
.todo-delete {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
margin: -0.08rem -0.15rem -0.08rem 0;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
cursor: pointer;
opacity: 0.55;
transition:
opacity var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard),
background var(--duration-fast) var(--ease-standard);
}
.todo-item:hover .todo-delete,
.todo-item:focus-within .todo-delete {
opacity: 1;
}
.todo-delete:hover {
color: var(--stock-down);
background: color-mix(in srgb, var(--stock-down) 12%, transparent);
}
.todo-delete:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
opacity: 1;
}
.todo-delete svg {
display: block;
}
.todo-card__footer {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.45rem;
padding-top: 0.5rem;
border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.todo-add-task-btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
width: 100%;
margin: 0;
padding: 0.48rem 0.55rem;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--accent);
font: inherit;
font-size: var(--font-size-sm);
font-weight: 600;
letter-spacing: 0.01em;
text-align: start;
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard);
}
.todo-add-task-btn__icon {
flex-shrink: 0;
color: var(--accent);
opacity: 0.95;
}
.todo-add-task-btn:hover {
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.todo-add-task-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.todo-composer {
margin-top: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Author `display:flex` wins over the HTML hidden attribute unless we reset it. */
.todo-composer[hidden] {
display: none !important;
}
.todo-input {
width: 100%;
min-height: 2.75rem;
max-height: 6.5rem;
font: inherit;
/* min 16px: iOS Safari auto-zooms focused fields below 16px (stock search, new task, etc.). */
font-size: max(16px, 0.9rem);
line-height: 1.4;
padding: 0.5rem 0.65rem;
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent));
background: var(--surface);
color: var(--text);
overflow-y: auto;
resize: none;
box-sizing: border-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.todo-input:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.todo-composer__actions {
display: flex;
justify-content: flex-end;
gap: 0.45rem;
}
.todo-ghost-btn {
font: inherit;
font-size: var(--font-size-xs);
font-weight: 600;
padding: 0.4rem 0.85rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-standard);
}
.todo-ghost-btn:hover {
background: var(--prefs-toggle-hover);
}
.todo-submit-btn {
font: inherit;
font-size: var(--font-size-xs);
font-weight: 600;
padding: 0.4rem 1rem;
border-radius: var(--radius-sm);
border: none;
background: var(--btn-solid-bg);
color: var(--btn-solid-fg);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-standard);
}
.todo-submit-btn:hover {
background: var(--btn-solid-hover);
}
.weather-inline {
margin-top: 0.9rem;
border-top: 1px solid var(--border-subtle);
padding-top: 0.8rem;
}
.commute-inline {
margin-top: 0.72rem;
border-top: 1px solid var(--border-subtle);
padding-top: 0.7rem;
}
.commute-inline__top {
margin-bottom: 0.25rem;
}
.commute-inline__route {
font-size: 0.76rem;
}
.commute-inline__route--missing {
color: var(--stock-down);
font-weight: 600;
}
.commute-inline__duration.metric {
margin: 0.08rem 0 0.12rem;
font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.45rem);
}
.commute-inline__detail {
font-size: 0.74rem;
line-height: 1.35;
}
#commute-card {
min-width: 0;
overflow-x: clip;
}
#commute-route {
max-width: 100%;
box-sizing: border-box;
}
/* Long route lines: same word-break behavior as other brief text */
#commute-card .commute-inline__route {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
#commute-card > * {
min-width: 0;
}
.weather-current-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.35rem 0.6rem;
margin: 0.12rem 0 0;
}
.weather-current__main.metric {
margin: 0;
}
.weather-current__feels {
font-size: var(--type-meta);
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
line-height: 1.2;
white-space: nowrap;
}
.weather-inline .weather-desc {
margin-top: 0.3rem;
font-size: 0.76rem;
line-height: 1.35;
}
.weather-card__top {
flex-wrap: wrap;
}
.news-summary {
margin: 0;
}
.tile-collapse-btn {
--tile-collapse-size: 2rem;
grid-column: -1;
grid-row: 1;
justify-self: end;
align-self: center;
flex-shrink: 0;
box-sizing: border-box;
width: auto;
max-width: min(7.25rem, 30vw);
min-width: 2.75rem;
min-height: var(--tile-collapse-size);
height: auto;
margin: 0;
padding: 0.2rem 0.42rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-alt);
color: var(--text-muted);
cursor: pointer;
line-height: 1.15;
font-size: clamp(0.58rem, 0.48rem + 0.35vw, 0.72rem);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
transform var(--micro-tap-release-ms) var(--ease-micro-spring);
}
.tile-collapse-btn:hover {
background: var(--prefs-toggle-hover);
border-color: var(--accent);
color: var(--text);
}
.tile-collapse-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.tile-collapse-btn__label {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.dashboard-tile--collapsed {
align-self: start;
/* Default tiles use height:100% to fill the grid row; collapsed tiles must size to the header only */
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden;
}
#commute-card.dashboard-tile--collapsed > :not(#commute-title) {
display: none !important;
}
/* Weather “collapse” only hides the hourly strip (+ caption); current conditions stay visible. */
#weather-card.dashboard-tile--collapsed .hourly-forecast__caption,
#weather-card.dashboard-tile--collapsed .hourly-forecast {
display: none !important;
}
/* Error / placeholder strip when forecast isn’t a horizontal scroller */
#weather-card:has(#weather-hourly:not(.hourly-forecast)) .hourly-forecast__caption {
display: none !important;
}
#stocks-tile.dashboard-tile--collapsed .stocks-wrap,
#stocks-tile.dashboard-tile--collapsed .tile-resize-handle {
display: none !important;
}
#currency-tile.dashboard-tile--collapsed #fx-conversion-panel > :not(.card__top--tile) {
display: none !important;
}
#todo-card.dashboard-tile--collapsed .todo-scroll,
#todo-card.dashboard-tile--collapsed .todo-card__footer {
display: none !important;
}
#tile-news.dashboard-tile--collapsed .news-category-audio-toolbar,
#tile-news.dashboard-tile--collapsed .news-summary__row,
#tile-news.dashboard-tile--collapsed .news-tiles,
#tile-news.dashboard-tile--collapsed .tile-resize-handle {
display: none !important;
}
#tile-ipl.dashboard-tile--collapsed .ipl-scroll {
display: none !important;
}
/*
Resizable news/stocks tiles use fixed heights in CSS (40vh / 50vh). Clearing inline
height on collapse would otherwise let those rules expand the shell again. Currency
uses tile-type-horizontal min-height — override when collapsed so only the header shows.
*/
#stocks-tile.card--stocks.dashboard-tile--resizable-v.dashboard-tile--collapsed,
#tile-news.news-summary--toolbar.dashboard-tile--resizable-v.dashboard-tile--collapsed {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
#currency-tile.card--currency.dashboard-tile--collapsed.tile-type-horizontal {
min-height: 0 !important;
max-height: none !important;
}
#currency-tile.dashboard-tile--collapsed #fx-conversion-panel {
display: flex;
flex-direction: column;
min-height: 0;
}
html[data-theme="midnight"] .tile-collapse-btn,
html[data-theme="nord"] .tile-collapse-btn {
background: var(--surface-alt);
}
.dashboard-tile--weather > .weather-inline {
margin-top: 0;
border-top: none;
padding-top: 0;
}
.dashboard-tile--weather.tile-type-horizontal-scroll .weather-inline {
min-width: 0;
width: 100%;
max-width: 100%;
}
.dashboard-tile--weather .weather-inline__summary {
flex-shrink: 0;
width: 100%;
min-width: 0;
}
.news-summary--toolbar {
padding: var(--space-3) var(--space-4) var(--space-5);
background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-tight);
display: grid;
gap: var(--space-2);
align-content: start;
min-height: min(28rem, 52svh);
}
#tile-news.news-summary--toolbar.dashboard-tile--resizable-v {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
min-height: min(16rem, 36vh);
height: 50vh;
box-sizing: border-box;
overflow: hidden;
}
#tile-news.news-summary--toolbar.dashboard-tile--resizable-v .news-summary__head--tile,
#tile-news.news-summary--toolbar.dashboard-tile--resizable-v .news-category-audio-toolbar,
#tile-news.news-summary--toolbar.dashboard-tile--resizable-v .news-summary__row {
flex-shrink: 0;
}
.news-category-audio-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
margin: 0;
padding: var(--space-2) 0;
border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.news-category-audio-toolbar__title {
margin: 0;
flex: 1 1 12rem;
min-width: 0;
font-size: var(--font-size-xs);
font-weight: 500;
color: var(--muted);
line-height: var(--font-line-snug);
overflow-wrap: anywhere;
}
.news-category-audio-toolbar__lead {
font-weight: 700;
color: var(--text);
}
.news-category-audio-toolbar__source {
font-weight: 500;
color: var(--muted);
}
#tile-news.news-summary--toolbar.dashboard-tile--resizable-v .news-tiles {
flex: 1 1 auto;
min-height: 0;
max-height: none;
margin-top: var(--space-2);
}
.news-summary__title {
margin: 0;
font-size: var(--font-size-base);
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.news-summary__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
/* Overrides .news-summary__head flex-wrap so status + refresh + collapse stay on one row */
.news-summary__head.news-summary__head--tile {
/* Match `.card__top--tile` so drag handles track weather tile sizing at every breakpoint */
--drag-handle-size: 2rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--space-2) var(--space-3);
margin: 0;
}
.news-summary__head--tile .tile-mobile-leading {
grid-column: 1;
display: flex;
align-items: center;
justify-content: center;
}
.news-summary__head--tile .news-summary__title {
min-width: 0;
grid-column: 2;
justify-self: center;
text-align: center;
}
.news-summary__head--tile #news-status {
grid-column: 3;
justify-self: end;
}
.news-summary__head--tile .tile-header-actions {
grid-column: 4;
}
.news-summary__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
margin: 0;
}
.news-summary__label {
margin: 0;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--muted);
max-width: 100%;
line-height: var(--font-line-snug);
overflow-wrap: anywhere;
word-break: break-word;
}
.news-source-select {
font: inherit;
font-size: var(--font-size-sm);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
min-width: min(100%, 14rem);
cursor: pointer;
}
.news-source-select:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.card__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
h2 {
margin: 0;
font-size: var(--type-section);
font-weight: var(--font-weight-medium);
line-height: var(--font-line-snug);
color: var(--text);
}
.status {
background: color-mix(in srgb, var(--surface-alt) 88%, var(--accent-soft));
color: var(--text-secondary);
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
font-size: var(--type-meta);
font-weight: var(--font-weight-medium);
padding: var(--space-1) var(--space-2);
white-space: nowrap;
}
#tile-news #news-status {
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.metric {
margin: 0.15rem 0;
font-size: clamp(1.35rem, 1.08rem + 1.2vw, 1.85rem);
font-weight: var(--font-weight-semibold);
color: var(--text);
letter-spacing: -0.02em;
}
.meta {
margin: 0;
font-size: var(--type-meta);
font-weight: var(--font-weight-regular);
color: var(--text-meta);
line-height: var(--font-line-relaxed);
}
.stocks-wrap {
margin-top: 0.65rem;
}
.stocks-title {
margin-bottom: 0.35rem;
font-weight: 600;
}
.stocks-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem;
}
.stock-chip {
border: 1px solid var(--chip-border);
background: var(--chip-bg);
border-radius: 10px;
padding: 0.4rem 0.5rem;
}
.stock-chip__name {
margin: 0;
font-size: var(--type-meta);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
}
.stock-chip__price {
margin: 0.2rem 0 0;
font-size: var(--type-body);
font-weight: var(--font-weight-semibold);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.stock-chip__change {
margin: 0.2rem 0 0;
font-size: var(--type-body);
font-weight: var(--font-weight-semibold);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.stock-chip__spark {
margin-top: 0.25rem;
height: 24px;
color: var(--sparkline-color);
}
.stock-chip__spark .sparkline {
display: block;
width: 100%;
height: 24px;
}
.stock-chip__reason {
margin: 0.3rem 0 0;
font-size: var(--type-meta);
line-height: var(--font-line-relaxed);
color: var(--text-meta);
}
.stock-chip__reason a {
color: inherit;
text-decoration: none;
}
.stock-chip__reason a:hover {
text-decoration: underline;
}
.stock-reason-wrap {
margin-top: 0.25rem;
}
.stock-reason-toggle {
border: 1px solid var(--reason-toggle-border);
background: var(--reason-toggle-bg);
color: var(--reason-toggle-text);
border-radius: 7px;
padding: 0.18rem 0.45rem;
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
}
.stock-reason-toggle:hover {
filter: brightness(0.98);
}
.stock-chip__change.is-up {
color: var(--stock-up);
}
.stock-chip__change.is-down {
color: var(--stock-down);
}
.stock-chip__spark.is-up {
color: var(--stock-up);
}
.stock-chip__spark.is-down {
color: var(--stock-down);
}
.stock-chip__reason.is-up {
color: var(--stock-up);
}
.stock-chip__reason.is-down {
color: var(--stock-down);
}
.hourly-forecast {
margin-top: 0.85rem;
max-width: 100%;
min-width: 0;
align-self: stretch;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
display: flex;
flex-direction: row;
gap: 0.3rem;
padding-right: 0;
padding-bottom: 0.2rem;
box-sizing: border-box;
scroll-behavior: smooth;
}
/* Hourly strip is the only horizontal scrollport; give chips a stable row height */
.dashboard-tile--weather #weather-hourly.hourly-forecast {
flex: 1 1 auto;
min-height: 5.1rem;
margin-top: 0.55rem;
}
.hourly-forecast .hour-block {
flex-shrink: 0;
min-width: 7.2rem;
border: 1px solid var(--hour-border);
border-radius: 8px;
background: var(--hour-bg);
padding: 0.35rem 0.42rem;
}
.hourly-forecast .hour-block__time {
margin: 0;
font-size: 0.68rem;
line-height: 1.25;
color: var(--muted);
}
.hourly-forecast .hour-block__feels-label {
margin: 0.12rem 0 0;
font-size: 0.58rem;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--muted);
text-transform: uppercase;
}
.hourly-forecast .hour-block__temp {
margin: 0.1rem 0 0;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2;
}
.hourly-forecast .hour-block__meta {
margin: 0.08rem 0 0;
font-size: 0.65rem;
line-height: 1.25;
color: var(--muted);
}
.news-tiles {
margin-top: var(--space-3);
display: block;
min-height: 0;
max-height: min(22rem, 52vh);
overflow-y: auto;
overflow-x: hidden;
padding-bottom: var(--space-2);
-webkit-overflow-scrolling: touch;
}
#tile-news.dashboard-tile--resizable-v .news-tiles {
margin-top: var(--space-2);
}
.news-tile {
min-height: 120px;
max-height: 420px;
overflow: auto;
border: 1px solid var(--news-tile-border);
border-radius: var(--radius-md);
background: var(--news-tile-bg);
padding: var(--space-1) var(--space-3) var(--space-3);
}
.news-tile__summary {
cursor: pointer;
font-weight: 700;
color: var(--news-summary);
background: none;
border: 0;
width: 100%;
text-align: left;
padding: 0.35rem 0.15rem;
}
.news-tile--collapsible .news-tile__summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
text-align: left;
}
.news-tile--collapsible .news-tile__summary::after {
content: "▼";
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.85rem;
height: 1.85rem;
padding: 0 0.2rem;
font-size: 0.62rem;
line-height: 1;
color: #fff;
background: var(--accent);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(255, 122, 0, 0.45);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.news-tile--collapsible .news-tile__summary[aria-expanded="true"]::after {
transform: rotate(180deg);
}
.news-tile__summary:disabled {
opacity: 0.8;
cursor: default;
}
.news-list {
margin: 0.35rem 0 0;
padding-left: 1.1rem;
display: grid;
gap: 0.55rem;
}
.news-list li {
color: var(--text);
line-height: 1.45;
}
/* Full story list (Latest News tile): card scan layout + favorites plain list */
#tile-news {
--news-card-gap: clamp(12px, 2.8vw, 16px);
}
#tile-news .news-list--all,
#favorites-card .news-list--all {
list-style: none;
margin: 0;
padding: 0;
padding-right: 0.2rem;
padding-bottom: 0.15rem;
display: grid;
grid-template-columns: 1fr;
gap: var(--stock-gap, 0.34rem);
box-sizing: border-box;
align-content: start;
}
#tile-news .news-list--all {
gap: var(--news-card-gap);
}
#tile-news .news-list--all .news-item--card {
margin: 0;
border: 1px solid color-mix(in srgb, var(--chip-border) 88%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--chip-bg) 96%, var(--surface));
padding: 0;
min-width: 0;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 35%, transparent);
}
#tile-news .news-list--all .news-item--card:nth-child(even) {
background: color-mix(in srgb, var(--surface-alt) 42%, var(--chip-bg));
}
#tile-news .news-item__shell {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
gap: 0.25rem;
min-height: 3.15rem;
padding: 0.48rem 0.42rem 0.48rem 0.52rem;
}
#tile-news .news-item__tap {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.35rem 0.5rem;
align-items: start;
min-width: 0;
text-decoration: none;
color: inherit;
outline: none;
}
#tile-news .news-item__tap--has-thumb {
grid-template-columns: clamp(3.1rem, 20vw, 4.25rem) minmax(0, 1fr);
}
#tile-news .news-item__thumb-wrap {
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--surface-alt);
aspect-ratio: 1;
align-self: start;
}
#tile-news .news-item__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#tile-news .news-item__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.14rem;
}
#tile-news .news-item__title {
margin: 0;
/* Override global .news-item__title { flex: 1 1 10rem } — growth was stretching the title box and leaving a gap above “hours ago”. */
flex: 0 1 auto;
font-weight: 650;
font-size: clamp(0.78rem, 2.5vw, 0.94rem);
line-height: 1.28;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
color: var(--text);
}
#tile-news .news-item__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.18rem 0.32rem;
font-size: clamp(0.58rem, 1.9vw, 0.7rem);
color: var(--muted);
line-height: 1.25;
}
#tile-news .news-item__source {
font-weight: 600;
color: var(--text-secondary);
max-width: min(100%, 11rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#tile-news .news-item__sep {
font-weight: 700;
opacity: 0.4;
}
#tile-news .news-item__time {
font-variant-numeric: tabular-nums;
}
#tile-news .news-item__actionbar {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.32rem;
padding: 0.2rem 0.15rem 0.2rem 0.38rem;
margin: -0.08rem 0;
border-inline-start: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
flex-shrink: 0;
}
#tile-news .news-item--card .news-audio-btn,
#tile-news .news-item--card .news-bookmark-btn {
width: 1.85rem;
height: 1.85rem;
font-size: 0.88rem;
}
#tile-news .news-item__tap-link:hover .news-item__title {
color: color-mix(in srgb, var(--accent) 22%, var(--text));
}
#tile-news .news-item__tap-link:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
#favorites-card .news-list--all .news-item {
margin: 0;
border: 1px solid var(--chip-border);
background: var(--chip-bg);
border-radius: 8px;
padding: 0.28rem 0.38rem;
min-width: 0;
box-sizing: border-box;
}
#tile-news .skeleton-news-list {
list-style: none;
margin: 0;
padding: 0 0.2rem 0.15rem 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--news-card-gap);
box-sizing: border-box;
}
#tile-news .skeleton-news-list--cards .news-skeleton-card {
list-style: none;
margin: 0;
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--chip-border) 88%, transparent);
background: color-mix(in srgb, var(--chip-bg) 96%, var(--surface));
overflow: hidden;
box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 35%, transparent);
}
#tile-news .skeleton-news-list--cards .news-skeleton-card:nth-child(even) {
background: color-mix(in srgb, var(--surface-alt) 42%, var(--chip-bg));
}
.news-skeleton-card__shell {
display: grid;
grid-template-columns: clamp(3.1rem, 20vw, 4.25rem) minmax(0, 1fr) auto;
gap: 0.45rem;
align-items: center;
padding: 0.48rem 0.42rem 0.48rem 0.52rem;
min-height: 3.6rem;
}
.news-skeleton-card__thumb {
width: 100%;
aspect-ratio: 1;
border-radius: var(--radius-sm);
}
.news-skeleton-card__body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.skeleton-line--title-short {
width: 72%;
margin-bottom: 0 !important;
}
.news-skeleton-card__actions {
display: flex;
flex-direction: column;
gap: 0.32rem;
padding-inline-start: 0.35rem;
margin-inline-start: 0.15rem;
border-inline-start: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.news-skeleton-card__action-dot {
width: 1.85rem;
height: 1.85rem;
border-radius: 999px;
}
.news-item__row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.4rem 0.65rem;
justify-content: space-between;
}
.news-item__actions {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.news-audio-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.05rem;
height: 2.05rem;
padding: 0;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
cursor: pointer;
flex-shrink: 0;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
opacity 0.15s ease;
}
.news-audio-btn:hover:not(:disabled) {
border-color: var(--accent);
background: var(--prefs-toggle-hover);
}
.news-audio-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.news-audio-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.news-audio-btn.is-loading {
opacity: 1;
pointer-events: none;
}
.news-audio-btn__spinner {
display: block;
width: 1.05rem;
height: 1.05rem;
border: 2px solid color-mix(in srgb, var(--muted) 55%, transparent);
border-top-color: var(--accent);
border-radius: 50%;
animation: news-audio-spin 0.65s linear infinite;
box-sizing: border-box;
}
@keyframes news-audio-spin {
to {
transform: rotate(360deg);
}
}
.news-audio-btn.is-playing {
border-color: var(--accent);
color: var(--accent);
}
.news-audio-btn.is-paused {
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
color: var(--accent);
}
.news-item__title {
flex: 1 1 10rem;
min-width: 0;
font-weight: 500;
line-height: 1.35;
overflow-wrap: anywhere;
color: var(--text);
}
.news-list--extra {
margin-top: 0.4rem;
}
.news-expanded {
margin-top: 0.15rem;
}
.view-more-btn {
margin-top: 0.5rem;
border: 1px solid var(--view-more-border);
background: var(--view-more-bg);
color: var(--view-more-text);
border-radius: 8px;
padding: 0.35rem 0.6rem;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
}
.view-more-btn:hover {
filter: brightness(0.98);
}
.theme-toolbar-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.65rem;
}
.theme-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
}
.theme-toolbar__label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--meta);
white-space: nowrap;
}
.theme-toolbar__icons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem;
}
.theme-icon-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 2.35rem;
padding: 0;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.theme-icon-btn svg {
flex-shrink: 0;
}
.theme-icon-btn:hover {
background: var(--prefs-toggle-hover);
}
.theme-icon-btn.is-active {
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.theme-icon-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.tile-refresh-corner {
pointer-events: none;
}
.tile-refresh-corner .tile-refresh-btn {
pointer-events: auto;
}
/* Avoid intercepting Sortable drag moves that cross tile bodies */
.dashboard-tiles:has(.sortable-ghost) .tile-refresh-btn {
pointer-events: none !important;
}
#commute-card.dashboard-tile--collapsed .tile-refresh-corner,
#tile-ipl.dashboard-tile--collapsed .tile-refresh-corner,
#currency-tile.dashboard-tile--collapsed .tile-refresh-corner {
display: none;
}
.tile-refresh-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
min-width: var(--touch-target-min);
min-height: var(--touch-target-min);
padding: 0;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
background var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard),
opacity var(--duration-base) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard);
}
.tile-refresh-btn:hover {
background: var(--prefs-toggle-hover);
}
.tile-refresh-btn:active:not(:disabled) {
transform: scale(0.96);
}
.tile-refresh-btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
.tile-refresh-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.tile-header-actions {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.35rem;
flex-shrink: 0;
}
.weather-hourly-toggle {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.65rem;
height: 2.65rem;
min-width: 44px;
min-height: 44px;
padding: 0;
margin: 0;
border-radius: 10px;
border: 2px solid var(--accent);
background: var(--surface-alt);
color: var(--accent);
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
transform 0.18s ease;
}
.weather-hourly-toggle:hover {
background: var(--prefs-toggle-hover);
color: var(--text);
border-color: var(--border);
}
.weather-hourly-toggle:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.weather-hourly-toggle__icon {
display: block;
transition: transform 0.2s ease;
}
.weather-hourly-toggle[aria-expanded="true"] .weather-hourly-toggle__icon {
transform: rotate(180deg);
}
.hourly-forecast__caption {
margin: 0.45rem 0 0;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--muted);
}
/* Today’s Brief — one chip height for Markets, Commute, Weather; IPL uses a taller token for score tables */
#today-brief-section {
--today-brief-commute-h: min(15rem, 40svh);
--today-brief-ipl-h: min(26rem, 64svh);
/* Identical inset for Markets + Commute chips (pair in home grid) */
--today-brief-chip-pad: 0.4rem 0.55rem 0.45rem;
}
/* Today’s Brief weather — single #weather-card (nested under #today-brief-section) */
.today-brief-weather.mobile-weather-brief {
display: block;
margin: 0.35rem 0 0.85rem;
padding: 0;
}
.today-brief .today-brief-weather.mobile-weather-brief:first-of-type {
margin-top: 0.25rem;
}
/* Match Commute chip box; align header with other brief chips (top-anchored, not vertically centered) */
#today-brief-section #brief-card-markets.today-brief__card--markets {
display: flex;
flex-direction: column;
height: var(--today-brief-commute-h);
min-height: var(--today-brief-commute-h);
max-height: var(--today-brief-commute-h);
overflow-x: hidden;
overflow-y: hidden;
box-sizing: border-box;
justify-content: flex-start;
align-items: stretch;
gap: 0.28rem;
padding: var(--today-brief-chip-pad);
color: inherit;
cursor: default;
}
#today-brief-section #brief-card-markets .today-brief__markets-title-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.15rem;
margin: 0;
line-height: 1.2;
align-self: stretch;
min-width: 0;
}
#today-brief-section #brief-card-markets .today-brief__eyebrow {
margin: 0;
line-height: 1.2;
flex: 0 0 auto;
}
#today-brief-section #brief-card-markets .today-brief__markets-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Same header treatment as Markets chip */
#today-brief-section #commute-card .today-brief__eyebrow {
margin: 0;
line-height: 1.2;
align-self: stretch;
/* Keep “Commute” from running under the top-right refresh control */
padding-inline-end: 2.65rem;
box-sizing: border-box;
}
#today-brief-section #commute-card.today-brief__card.today-brief__card--commute {
height: var(--today-brief-commute-h);
min-height: var(--today-brief-commute-h);
max-height: var(--today-brief-commute-h);
box-sizing: border-box;
padding: var(--today-brief-chip-pad);
gap: 0.32rem;
overflow-x: hidden;
overflow-y: hidden;
}
/* Weather in Today’s Brief — same footprint as commute chip; hourly scrolls inside */
#today-brief-section #weather-card.weather-card--brief {
cursor: default;
width: 100%;
max-width: 100%;
box-sizing: border-box;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: none;
padding: 0.36rem 0.5rem 0.42rem;
transition:
border-color 0.18s ease,
background 0.18s ease;
height: var(--today-brief-commute-h);
min-height: var(--today-brief-commute-h);
max-height: var(--today-brief-commute-h);
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Informational: subtle border highlight only (no “lift” — avoids looking tappable) */
#today-brief-section #weather-card.weather-card--brief:hover {
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
box-shadow: none;
transform: none;
}
#today-brief-section #weather-card.weather-card--brief.card:hover {
box-shadow: none;
border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
/* Current conditions: hourly lives in .weather-hourly-details (side-by-side on wide viewports). */
#today-brief-section #weather-card.weather-card--brief .weather-inline {
flex: 0 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
overflow: hidden;
}
#today-brief-section #weather-card.weather-card--brief .weather-hourly-details {
/* Size to heading + hourly strip only — flex-grow was leaving a dead band above the card bottom. */
flex: 0 1 auto;
min-height: 0;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: color-mix(in srgb, var(--surface) 88%, var(--border));
padding: 0;
margin: 0;
}
#today-brief-section #weather-card.weather-card--brief .weather-hourly-details__heading {
/* Keep hourly heading on same left vertical line as temperature row. */
padding: var(--space-1) 0 0.15rem;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text);
}
@media (min-width: 821px) {
#today-brief-section #weather-card.weather-card--brief {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: start;
column-gap: var(--space-2);
row-gap: 0;
}
#today-brief-section #weather-card.weather-card--brief .weather-inline {
grid-column: 1;
grid-row: 1;
}
#today-brief-section #weather-card.weather-card--brief .weather-hourly-details {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
min-height: 0;
border: none;
background: transparent;
}
#today-brief-section #weather-card.weather-card--brief .weather-hourly-details > .weather-hourly-details__heading {
display: none;
}
#today-brief-section #weather-card.weather-card--brief .weather-hourly-details #weather-hourly.hourly-forecast {
flex: 0 1 auto;
min-height: 0;
min-width: 0;
}
}
#today-brief-section #weather-card.weather-card--brief .weather-inline__summary {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.08rem;
text-align: left;
min-width: 0;
max-width: 100%;
overflow-x: hidden;
overflow-y: visible;
}
#today-brief-section #weather-card.weather-card--brief .weather-card__eyebrow {
margin: 0;
}
#today-brief-section #weather-card.weather-card--brief .weather-card__top--standalone {
margin-top: 0;
margin-bottom: 0;
width: 100%;
}
#today-brief-section #weather-card.weather-card--brief .card__top--tile > h2 {
margin: 0;
min-width: 0;
font-size: var(--type-meta);
font-weight: var(--font-weight-medium);
line-height: 1.2;
letter-spacing: normal;
text-transform: none;
color: var(--text-secondary);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
#today-brief-section #weather-card.weather-card--brief .weather-card__top--standalone .status {
font-size: var(--type-meta);
max-width: min(52vw, 16rem);
}
#today-brief-section #weather-card.weather-card--brief .weather-current-row {
margin: 0;
gap: 0.2rem 0.45rem;
flex-wrap: wrap;
align-items: flex-start;
min-width: 0;
}
#today-brief-section #weather-card.weather-card--brief .weather-current__main {
font-size: clamp(0.95rem, 0.88rem + 0.25vw, 1.1rem);
font-weight: var(--font-weight-semibold);
line-height: var(--font-line-tight);
color: var(--text);
letter-spacing: -0.02em;
min-width: 0;
flex: 0 1 auto;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
#today-brief-section #weather-card.weather-card--brief .weather-current__feels {
font-size: var(--type-meta);
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
white-space: normal;
min-width: 0;
max-width: 100%;
flex: 1 1 7.5rem;
line-height: 1.25;
overflow-wrap: anywhere;
word-break: break-word;
}
#today-brief-section #weather-card.weather-card--brief .weather-desc {
margin: 0;
font-size: var(--type-meta);
line-height: var(--font-line-snug);
color: var(--text-meta);
font-weight: var(--font-weight-regular);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
#today-brief-section #weather-card.weather-card--brief .hourly-forecast__caption {
margin: 0.2rem 0 0;
font-size: 0.58rem;
flex: 0 0 auto;
}
#today-brief-section #weather-card.weather-card--brief.dashboard-tile.tile-type-horizontal-scroll {
overflow: hidden;
}
#today-brief-section #weather-card.weather-card--brief #weather-hourly.hourly-forecast {
min-width: 0;
width: 100%;
/* Override .dashboard-tile--weather #weather-hourly min-height so strip hugs chips + scrollbar. */
min-height: 0;
max-height: 100%;
margin-top: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
touch-action: pan-x;
scrollbar-gutter: auto;
padding-left: 0;
padding-bottom: 0;
align-items: flex-start;
align-self: stretch;
}
#today-brief-section #weather-card.weather-card--brief .hourly-forecast .hour-block {
min-width: 3.95rem;
padding: 0.07rem 0.18rem;
color: var(--text);
border-color: var(--hour-border);
}
#today-brief-section #weather-card.weather-card--brief .hour-block__time,
#today-brief-section #weather-card.weather-card--brief .hour-block__temp {
color: var(--text);
}
#today-brief-section #weather-card.weather-card--brief .hour-block__feels-label,
#today-brief-section #weather-card.weather-card--brief .hour-block__meta {
color: var(--muted);
}
#today-brief-section #weather-card.weather-card--brief .hour-block__time {
font-size: 0.52rem;
margin: 0;
}
#today-brief-section #weather-card.weather-card--brief .hour-block__feels-label {
font-size: 0.48rem;
margin: 0.03rem 0 0;
}
#today-brief-section #weather-card.weather-card--brief .hour-block__temp {
font-size: 0.58rem;
margin: 0.03rem 0 0;
line-height: 1.12;
}
#today-brief-section #weather-card.weather-card--brief .hour-block__meta {
font-size: 0.5rem;
margin: 0.02rem 0 0;
line-height: 1.12;
}
#today-brief-section #weather-card.weather-card--brief .weather-hourly-toggle__icon {
width: 18px;
height: 18px;
}
/* Commute chip in Today’s Brief grid — stretch to grid row so height matches Markets */
.today-brief__grid-commute {
min-width: 0;
display: flex;
flex-direction: column;
align-self: stretch;
min-height: 0;
height: 100%;
}
#commute-card.today-brief__card.today-brief__card--commute {
cursor: default;
width: 100%;
max-width: 100%;
box-sizing: border-box;
position: relative;
flex: 1 1 auto;
min-height: 0;
text-align: left;
align-items: flex-start;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease;
}
#commute-card.today-brief__card.today-brief__card--commute:hover {
transform: none;
box-shadow: var(--card-elev-subtle);
border-color: var(--border);
}
#commute-card.today-brief__card .today-brief__commute-status {
font-size: var(--type-meta);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
max-width: min(52vw, 16rem);
}
#commute-card.today-brief__card .today-brief__text {
margin: 0;
width: 100%;
}
#commute-card.today-brief__card .today-brief__text--commute-duration {
font-size: clamp(1rem, 0.92rem + 0.28vw, 1.15rem);
font-weight: var(--font-weight-semibold);
line-height: var(--font-line-tight);
color: var(--text);
letter-spacing: -0.02em;
}
#commute-card.today-brief__card .commute-inline__detail {
color: var(--text-secondary);
font-size: var(--type-meta);
}
#commute-card.today-brief__card .tile-refresh-corner--top-end {
top: max(0.28rem, env(safe-area-inset-top, 0px));
right: max(0.28rem, env(safe-area-inset-right, 0px));
}
#commute-card.today-brief__card .tile-refresh-btn {
border-radius: 10px;
opacity: 0.92;
}
/* IPL snapshot in Today’s Brief — same chip height as Commute; body scrolls */
#brief-card-ipl.today-brief__card--ipl-brief {
cursor: default;
width: 100%;
max-width: 100%;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
height: var(--today-brief-ipl-h);
min-height: var(--today-brief-ipl-h);
max-height: var(--today-brief-ipl-h);
overflow: hidden;
padding: 0.36rem 0.48rem 0.42rem;
gap: 0.15rem;
}
#brief-card-ipl.today-brief__card--ipl-brief:hover {
transform: none;
box-shadow: var(--card-elev-subtle);
border-color: var(--border);
}
#brief-card-ipl .today-brief__eyebrow {
margin: 0;
flex: 0 0 auto;
line-height: 1.2;
}
#brief-card-ipl .brief-ipl-scroll {
width: 100%;
min-width: 0;
min-height: 0;
flex: 1 1 auto;
overflow: hidden;
overscroll-behavior: none;
font-size: clamp(0.52rem, 0.48rem + 0.18vw, 0.62rem);
line-height: 1.25;
}
#brief-card-ipl .brief-ipl-scroll .ipl-match-title {
font-size: 0.58rem;
margin: 0 0 0.12rem;
line-height: 1.2;
}
#brief-card-ipl .brief-ipl-scroll .ipl-section-title {
font-size: 0.54rem;
margin: 0.18rem 0 0.06rem;
}
#brief-card-ipl .brief-ipl-scroll .ipl-table {
font-size: 0.52rem;
}
#brief-card-ipl .brief-ipl-scroll .ipl-table th,
#brief-card-ipl .brief-ipl-scroll .ipl-table td {
padding: 0.06rem 0.14rem;
}
#brief-card-ipl .today-brief__ipl-status {
font-size: 0.56rem;
max-width: min(70vw, 18rem);
flex: 0 0 auto;
}
#brief-card-ai-news.today-brief__card--ai-news {
cursor: default;
width: 100%;
max-width: 100%;
grid-column: 1 / -1;
align-self: stretch;
gap: 0.5rem;
padding: 0.58rem 0.65rem 0.62rem;
box-sizing: border-box;
}
#brief-card-ai-news.today-brief__card--ai-news:hover {
transform: none;
box-shadow: var(--card-elev-subtle);
border-color: var(--border);
}
#brief-card-ai-news.today-brief__card--ai-news > .today-brief__eyebrow {
letter-spacing: 0.06em;
}
#brief-card-ai-news .brief-ai-news__block + .brief-ai-news__block {
margin-top: 0.35rem;
padding-top: 0.48rem;
border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}
.brief-ai-news__block {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.28rem;
}
.brief-ai-news__lead {
margin: 0;
font-size: 0.62rem;
line-height: 1.28;
font-weight: 600;
color: var(--muted);
}
.brief-ai-news__lead--with-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
}
.brief-ai-news__lead strong {
font-weight: 700;
color: var(--accent);
}
/* Align with Markets label rhythm: one row of controls per summary line */
.brief-ai-news__minutes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.28rem;
width: 100%;
align-items: stretch;
}
.brief-ai-news__audio-btn.news-audio-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.22rem;
width: 100%;
height: auto;
min-width: 0;
padding: 0.26rem 0.35rem;
min-height: 2.05rem;
border-radius: var(--radius);
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
background: color-mix(in srgb, var(--surface) 70%, var(--surface-alt));
}
.brief-ai-news__lead--with-action .brief-ai-news__audio-btn.news-audio-btn {
width: auto;
min-width: 4.2rem;
min-height: 1.65rem;
padding: 0.18rem 0.42rem;
margin-left: auto;
}
.brief-ai-news__audio-btn.news-audio-btn:hover:not(:disabled) {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface-alt));
}
.brief-ai-news__btn-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.22rem;
}
.brief-ai-news__min-label {
font-size: 0.6rem;
font-weight: 600;
white-space: nowrap;
color: var(--text);
}
.today-brief__browse-news-btn {
margin-top: 0.25rem;
align-self: stretch;
padding: 0.4rem 0.65rem;
min-height: 2.25rem;
border-radius: var(--radius);
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface-alt));
color: var(--text);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease;
}
.today-brief__browse-news-btn:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface-alt));
}
.today-brief__browse-news-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (max-width: 820px) {
#brief-card-ai-news.today-brief__card--ai-news {
padding: 0.38rem 0.5rem 0.45rem;
gap: 0.3rem;
}
#brief-card-ai-news .brief-ai-news__block + .brief-ai-news__block {
margin-top: 0.22rem;
padding-top: 0.32rem;
}
.brief-ai-news__block {
gap: 0.2rem;
}
.brief-ai-news__lead {
font-size: 0.6rem;
line-height: 1.22;
}
.brief-ai-news__lead--with-action {
gap: 0.3rem;
}
.brief-ai-news__minutes {
gap: 0.2rem;
}
.brief-ai-news__audio-btn.news-audio-btn {
/* Dense layout; stay close to 44×44 ideal via wider tap targets horizontally */
min-height: 2.05rem;
padding: 0.22rem 0.32rem;
}
.brief-ai-news__lead--with-action .brief-ai-news__audio-btn.news-audio-btn {
min-height: 1.55rem;
min-width: 3.95rem;
padding: 0.14rem 0.36rem;
}
.brief-ai-news__min-label {
font-size: 0.58rem;
}
.today-brief__browse-news-btn {
min-height: 1.85rem;
padding: 0.3rem 0.5rem;
font-size: 0.64rem;
margin-top: 0.12rem;
}
}
@media (prefers-reduced-motion: reduce) {
.today-brief__card,
#today-brief-section #weather-card.weather-card--brief {
transition: none;
}
.today-brief__card.card-interactive::before,
a.today-brief__panel.surface-interactive::before {
transition: none;
opacity: 0 !important;
}
.today-brief__card.card-interactive:active,
a.today-brief__panel.surface-interactive:active {
transform: none;
}
}
@media (max-width: 820px) {
#brief-card-ipl.today-brief__card--ipl-brief {
padding: 0.32rem 0.45rem 0.38rem;
gap: 0.14rem;
}
}
/* Very short viewports (e.g. phone landscape): hide quote, tighten chips so home stays usable */
@media (max-width: 820px) and (max-height: 520px) {
.dashboard__quote-column {
display: none;
}
.dashboard__header {
margin-bottom: 0.35rem;
gap: 0.35rem;
}
#today-brief-section {
--today-brief-commute-h: clamp(5.75rem, 18svh, 9rem);
--today-brief-ipl-h: clamp(9.5rem, 26svh, 15rem);
}
.today-brief {
margin-bottom: 0.35rem;
}
.today-brief__intro {
margin-bottom: 0.25rem;
}
.today-brief-weather.mobile-weather-brief {
margin: 0.08rem 0 0.28rem;
}
.today-brief__grid {
gap: 0.3rem;
}
}
.weather-card__top--standalone {
grid-template-columns: minmax(0, 1fr) auto auto;
}
/* Keep the hourly chevron tappable and visible beside long status text */
#weather-card .weather-card__top--standalone .status {
min-width: 0;
max-width: min(46vw, 14rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
justify-self: end;
}
#weather-card .tile-header-actions {
flex-shrink: 0;
position: relative;
z-index: 6;
}
#weather-card .weather-hourly-toggle {
position: relative;
z-index: 6;
}
#commute-card,
#tile-ipl,
#weather-card,
#currency-tile {
position: relative;
}
#tile-ipl {
padding-bottom: 2.35rem;
}
.tile-refresh-corner--bottom-end {
position: absolute;
right: max(0.35rem, env(safe-area-inset-right, 0px));
bottom: max(0.4rem, env(safe-area-inset-bottom, 0px));
z-index: 4;
}
.tile-refresh-corner--top-end {
position: absolute;
right: max(0.35rem, env(safe-area-inset-right, 0px));
top: max(0.35rem, env(safe-area-inset-top, 0px));
z-index: 4;
}
#weather-card {
padding-bottom: 2.35rem;
}
#currency-tile {
padding-bottom: 2.35rem;
}
.ghost-btn {
border: 1px solid var(--ghost-border);
border-radius: 10px;
background: var(--ghost-bg);
color: var(--ghost-text);
font-weight: 600;
padding: 0.65rem 0.95rem;
}
/* Landscape phones: often wider than narrow-width breakpoints but very short — stack header for readable quote + title. */
@media (orientation: landscape) and (max-height: 520px) {
.dashboard__header {
flex-direction: column;
align-items: flex-start;
gap: 0.55rem;
margin-bottom: 0.65rem;
}
.dashboard__header-lead {
display: grid;
grid-template-columns: 1fr;
width: 100%;
max-width: 100%;
column-gap: 0;
row-gap: 0.55rem;
align-items: start;
justify-items: stretch;
}
.dashboard__title-row {
grid-column: 1;
grid-row: 1;
width: 100%;
max-width: 100%;
}
.dashboard__title-stack {
width: 100%;
max-width: 100%;
min-width: 0;
}
.dashboard__quote-column {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 100%;
}
.quote-of-day {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.top-actions {
width: 100%;
max-width: 100%;
align-self: stretch;
flex-wrap: wrap;
justify-content: flex-end;
}
}
@media (max-width: 1100px) {
.tile-type-square {
grid-column: span 6;
}
.tile-type-horizontal,
.tile-type-horizontal-scroll,
.tile-type-vertical {
grid-column: 1 / -1;
}
}
@media (max-width: 820px) {
.app-shell {
width: 100%;
max-width: 100%;
margin: 0;
padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
padding-bottom: calc(4.2rem + max(0.5rem, env(safe-area-inset-bottom, 0px)));
box-sizing: border-box;
}
/* Bottom-nav tabs own News / Stocks / TODOs / Favorites — omit from the scrollable home rail */
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen)
#dashboard-tiles
> :is(#stocks-tile, #tile-news, #todo-card, #favorites-card) {
display: none !important;
}
/* Mobile home: single-screen density (portrait). Chip height uses svh with a rem floor so
brief rows stay aligned in landscape without collapsing below readable minima.
Floor must clear Today’s Brief weather (summary + hourly strip) without vertical clipping. */
#today-brief-section {
--today-brief-commute-h: clamp(7.75rem, 24svh, 11.5rem);
--today-brief-ipl-h: clamp(12.5rem, 32svh, 17rem);
}
.today-brief {
margin: 0 0 0.55rem;
}
.today-brief__intro {
margin-bottom: 0.35rem;
}
.today-brief__hero-title {
font-size: clamp(0.86rem, 0.8rem + 0.22vw, 1.02rem);
line-height: 1.25;
}
.today-brief-weather.mobile-weather-brief {
margin: 0.12rem 0 0.42rem;
}
.today-brief__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
justify-items: stretch;
gap: 0.4rem;
}
.today-brief__grid-commute {
grid-column: auto;
min-width: 0;
}
/* Full-width rows under Markets + Commute keep brief chips aligned and readable */
#brief-card-ipl.today-brief__card--ipl-brief,
#brief-card-ai-news.today-brief__card--ai-news {
grid-column: 1 / -1;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen) {
min-height: 100dvh;
min-height: 100svh;
}
.dashboard {
width: 100%;
max-width: 100%;
min-width: 0;
padding: clamp(0.5rem, 2.4vw, 0.75rem);
border-radius: clamp(14px, 3.5vw, 20px);
box-sizing: border-box;
overflow-x: hidden;
}
.dashboard__header {
flex-direction: column;
align-items: flex-start;
gap: 0.45rem;
margin-bottom: 0.5rem;
}
.dashboard__header-lead {
flex: 0 0 auto;
width: 100%;
max-width: 100%;
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 0.45rem;
align-items: start;
justify-items: stretch;
}
.dashboard__title-row {
grid-column: 1;
grid-row: 1;
width: 100%;
max-width: 100%;
gap: 0.35rem 0.5rem;
}
.dashboard__title-stack {
width: 100%;
max-width: 100%;
}
h1 {
font-size: clamp(1.18rem, 1rem + 1vw, 1.375rem);
font-weight: var(--font-weight-semibold);
margin: 0.08rem 0 0.2rem;
line-height: var(--font-line-tight);
}
.dashboard__quote-column {
grid-column: 1;
grid-row: 2;
width: 100%;
max-width: 100%;
}
.quote-of-day {
width: 100%;
max-width: 100%;
height: fit-content;
min-height: 0;
padding: 0.3rem 0.5rem 0.35rem;
border-radius: 10px;
}
.quote-of-day__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.top-actions {
width: 100%;
max-width: 100%;
align-self: stretch;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 0.32rem 0.42rem;
}
#prefs-toggle {
display: none !important;
}
/* Resize handles are hidden on full-screen tab tiles; hint is desktop-only. */
.prefs-field--tile-resize-hint {
display: none !important;
}
.theme-icon-btn {
min-height: 44px;
min-width: 44px;
width: 2.5rem;
height: 2.5rem;
}
/*
* Full-screen preferences when opened from bottom nav (header toggle hidden on narrow viewports).
* Match News/Stocks/Todos tile height so the bottom tab bar stays visible (same nav clearance as app-shell padding-bottom).
*/
.prefs-panel {
position: fixed;
z-index: 300;
left: max(0.5rem, env(safe-area-inset-left, 0px));
right: max(0.5rem, env(safe-area-inset-right, 0px));
top: max(0.35rem, env(safe-area-inset-top, 0px));
bottom: auto;
width: auto;
max-width: none;
height: calc(
100dvh - max(0.35rem, env(safe-area-inset-top, 0px)) -
(4.2rem + max(0.5rem, env(safe-area-inset-bottom, 0px)))
);
max-height: none;
border-radius: 0;
padding: max(0.65rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
max(0.75rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
overflow: hidden;
overscroll-behavior: contain;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.prefs-panel__scroll {
flex: 1;
min-height: 0;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.cards {
gap: clamp(0.4rem, 1.8vw, 0.65rem);
}
.dashboard-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.4rem, 1.8vw, 0.65rem);
/* Bottom-nav home hides every tile in this rail; keep a non-zero box so layout/tests stay stable */
min-height: 1px;
}
.tile-type-square {
grid-column: span 1;
min-height: 11.5rem;
max-height: 11.5rem;
overflow: hidden;
}
.tile-type-horizontal,
.tile-type-horizontal-scroll,
.tile-type-vertical {
grid-column: 1 / -1;
}
.tile-type-horizontal,
.tile-type-horizontal-scroll {
min-height: 8.8rem;
max-height: 8.8rem;
}
/* Full dashboard weather (not Today’s Brief chip): taller flexible tile */
#weather-card.tile-type-horizontal-scroll:not(.weather-card--brief) {
min-width: 0;
max-width: 100%;
min-height: min(15rem, 36svh);
max-height: min(24rem, 48svh);
overflow-x: hidden;
overflow-y: hidden;
}
#today-brief-section #weather-card.weather-card--brief.tile-type-horizontal-scroll {
height: var(--today-brief-commute-h);
min-height: var(--today-brief-commute-h);
max-height: var(--today-brief-commute-h);
overflow: hidden;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen)
#tile-ipl {
display: none !important;
}
.tile-type-vertical {
max-height: min(40svh, 40vh);
overflow: hidden;
}
/* To-do grows with content; do not inherit the short vertical cap used for stocks/news. */
#todo-card.tile-type-vertical,
#todo-card.tile-type-vertical.todo-card--composer-open,
#favorites-card.tile-type-vertical {
max-height: none;
overflow-y: visible;
overflow-x: hidden;
}
.dashboard-tile {
height: auto;
min-height: 0;
padding: 0.82rem 0.85rem 0.88rem;
overflow: hidden;
}
#todo-card.dashboard-tile {
height: auto;
align-self: start;
max-height: none;
overflow-x: hidden;
overflow-y: visible;
}
.card__top--tile {
--drag-handle-size: 2.25rem;
}
.news-summary__head.news-summary__head--tile {
--drag-handle-size: 2.25rem;
}
.tile-collapse-btn {
max-width: min(4.6rem, 22vw);
min-width: 2.2rem;
padding: 0.12rem 0.26rem;
font-size: clamp(0.48rem, 0.38rem + 0.32vw, 0.62rem);
}
.tile-drag-handle {
width: var(--drag-handle-size);
height: var(--drag-handle-size);
}
.dashboard-tile.todo-card {
padding: 0.85rem 0.88rem 0.9rem;
}
#currency-tile.card--currency {
min-height: 0;
padding: 0.72rem 0.78rem 0.82rem;
}
#currency-tile.tile-type-horizontal {
min-height: min(10.5rem, 26svh);
max-height: min(13.5rem, 30svh);
}
#stocks-tile.card--stocks {
min-height: 0;
padding: 0.72rem 0.78rem 0.82rem;
--stock-row-h: 5.2rem;
--stock-gap: 0.32rem;
}
#stocks-tile .stocks-wrap {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: hidden;
}
#stocks-tile .stocks-scroll {
flex: 1 1 auto;
min-height: 0;
}
.card__top {
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.dashboard h2 {
font-size: 0.95rem;
line-height: 1.25;
}
.dashboard-tile--weather .weather-inline {
flex: 1 1 auto;
min-height: 0;
overflow-x: visible;
overflow-y: hidden;
}
.dashboard-tile--weather .hourly-forecast,
.dashboard-tile--weather #weather-hourly.hourly-forecast {
flex: 1 1 auto;
min-height: min(5.25rem, 15svh);
margin-top: 0.55rem;
max-height: none;
}
/* Today’s Brief: right-column hourly scroller; grid layout from base rules */
#today-brief-section #weather-card.weather-card--brief #weather-hourly.hourly-forecast {
min-height: 0 !important;
margin-top: 0 !important;
max-height: 100%;
padding-bottom: 0 !important;
scrollbar-gutter: auto !important;
}
#today-brief-section #weather-card.weather-card--brief .hourly-forecast__caption {
display: none !important;
}
#today-brief-section #weather-card.weather-card--brief .weather-inline__summary {
gap: 0.06rem;
}
#today-brief-section #weather-card.weather-card--brief .weather-card__top--standalone {
margin-bottom: 0 !important;
}
#current-time.metric {
font-size: clamp(1.28rem, 1rem + 4.2vw, 1.95rem);
}
#stocks-tile .stocks-grid {
grid-template-columns: 1fr;
}
#stocks-tile.dashboard-tile--resizable-v .stocks-scroll {
max-height: none;
}
#tile-news.dashboard-tile--resizable-v .news-tiles {
max-height: none;
}
.news-summary--toolbar {
min-height: min(20rem, 54svh);
min-height: min(20rem, 54vh);
padding: 0.65rem 0.72rem 0.78rem;
}
.news-summary__head {
gap: 0.5rem;
}
.news-summary__row {
flex-wrap: wrap;
gap: 0.4rem 0.65rem;
}
.news-source-select {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
}
.news-tiles {
margin-top: 0.65rem;
max-height: min(50vh, 52svh);
max-height: min(50dvh, 52svh);
}
}
@media (max-width: 480px) {
.app-shell {
padding-left: max(0.4rem, env(safe-area-inset-left, 0px));
padding-right: max(0.4rem, env(safe-area-inset-right, 0px));
}
.dashboard {
padding: clamp(0.5rem, 2.8vw, 0.75rem);
border-radius: 12px;
}
.cards {
gap: 0.5rem;
}
.dashboard-tiles {
grid-template-columns: 1fr;
gap: 0.65rem;
}
.dashboard-tiles > .dashboard-tile,
.dashboard-tiles > .tile-type-square,
.dashboard-tiles > .tile-type-horizontal,
.dashboard-tiles > .tile-type-horizontal-scroll,
.dashboard-tiles > .tile-type-vertical {
grid-column: 1 / -1;
}
.card {
padding: 0.8rem;
}
.dashboard-tile {
padding: 0.75rem 0.78rem 0.82rem;
}
.dashboard-tile.todo-card {
padding: 0.72rem 0.75rem 0.78rem;
}
.prefs-toggle {
min-height: 44px;
padding: 0.42rem 0.8rem;
}
.news-summary--toolbar {
min-height: min(17rem, 48svh);
min-height: min(17rem, 48vh);
padding: 0.58rem 0.65rem 0.72rem;
}
.news-summary__row {
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
}
.news-summary__label {
flex: 0 0 auto;
}
.news-source-select {
width: 100%;
}
#tile-news #news-status {
text-align: end;
line-height: 1.25;
}
}
.cards::-webkit-scrollbar,
.news-tiles::-webkit-scrollbar,
.hourly-forecast::-webkit-scrollbar,
.news-tile::-webkit-scrollbar,
#stocks-tile .stocks-scroll::-webkit-scrollbar,
.todo-scroll.todo-scroll--limited::-webkit-scrollbar,
#todo-scroll-region::-webkit-scrollbar,
.todo-input::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.cards::-webkit-scrollbar-thumb,
.news-tiles::-webkit-scrollbar-thumb,
.hourly-forecast::-webkit-scrollbar-thumb,
.news-tile::-webkit-scrollbar-thumb,
#stocks-tile .stocks-scroll::-webkit-scrollbar-thumb,
.todo-scroll.todo-scroll--limited::-webkit-scrollbar-thumb,
#todo-scroll-region::-webkit-scrollbar-thumb,
.todo-input::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 999px;
}
.cards::-webkit-scrollbar-track,
.news-tiles::-webkit-scrollbar-track,
.hourly-forecast::-webkit-scrollbar-track,
.news-tile::-webkit-scrollbar-track,
#stocks-tile .stocks-scroll::-webkit-scrollbar-track,
.todo-scroll.todo-scroll--limited::-webkit-scrollbar-track,
#todo-scroll-region::-webkit-scrollbar-track,
.todo-input::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 999px;
}
/* Today Brief + anchor scroll offset for bottom nav / sticky UI */
#today-brief-section,
#mobile-weather-brief,
#mobile-commute-brief,
#tile-datetime,
#weather-card,
#commute-card,
#stocks-tile,
#tile-news,
#todo-card,
#main-content {
scroll-margin-top: 0.85rem;
}
@media (max-width: 820px) {
#today-brief-section,
#mobile-weather-brief,
#mobile-commute-brief,
#tile-datetime,
#weather-card,
#commute-card,
#stocks-tile,
#tile-news,
#todo-card,
#main-content {
scroll-margin-top: calc(4.55rem + env(safe-area-inset-top, 0px));
}
}
.today-brief {
margin: 0 0 1.15rem;
padding: 0;
}
.today-brief__intro {
margin-bottom: 0.75rem;
}
.today-brief__hero-title {
margin: 0;
font-size: var(--type-title);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.02em;
line-height: var(--font-line-snug);
color: var(--text);
}
.today-brief__hero-sep {
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
}
.today-brief__hero-value {
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
}
.today-brief__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
gap: 0.62rem;
align-items: stretch;
justify-items: stretch;
width: 100%;
}
@media (min-width: 900px) {
.today-brief__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.today-brief__card,
.today-brief__panel {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
text-align: left;
padding: 0.65rem 0.7rem;
border-radius: var(--radius-card-secondary);
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
box-shadow: var(--card-elev-subtle);
}
.today-brief__card {
cursor: default;
min-height: 4.5rem;
transition:
border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard),
background var(--duration-fast) var(--ease-standard);
}
.today-brief__card.card-interactive {
position: relative;
isolation: isolate;
overflow: hidden;
transition:
border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard),
background var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-out);
}
.today-brief__card.card-interactive::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at 50% 50%,
color-mix(in srgb, var(--accent) 22%, transparent),
transparent 62%
);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-standard);
pointer-events: none;
}
.today-brief__card.card-interactive:active::before {
opacity: 1;
}
.today-brief__card.card-interactive:focus-within {
border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
box-shadow: var(--card-elev-standard);
}
.today-brief__card.card-interactive:active {
transform: scale(0.98);
}
.today-brief__panel {
cursor: default;
}
a.today-brief__panel {
-webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
a.today-brief__panel.surface-interactive {
position: relative;
isolation: isolate;
overflow: hidden;
transition:
border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-out);
}
a.today-brief__panel.surface-interactive::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
circle at 50% 50%,
color-mix(in srgb, var(--accent) 22%, transparent),
transparent 62%
);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-standard);
pointer-events: none;
}
a.today-brief__panel.surface-interactive:active::before {
opacity: 1;
}
a.today-brief__panel.surface-interactive:active {
transform: scale(0.98);
}
#brief-card-markets.today-brief__panel:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.today-brief__card--markets {
min-height: 0;
gap: 0.28rem;
padding: 0.55rem 0.62rem 0.58rem;
}
.today-brief__markets-body {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.12rem;
}
.today-brief__markets-fx {
margin: 0;
font-size: clamp(0.62rem, 0.56rem + 0.22vw, 0.7rem);
font-weight: 600;
line-height: 1.25;
word-break: break-word;
color: var(--text);
}
.today-brief__markets-indices {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0.28rem 0.55rem;
width: 100%;
align-items: start;
}
.today-brief__markets-cell {
display: flex;
flex-direction: column;
gap: 0.08rem;
min-width: 0;
}
.today-brief__markets-cell .today-brief__markets-k {
font-size: clamp(0.66rem, 0.6rem + 0.24vw, 0.78rem);
line-height: 1.22;
}
.today-brief__markets-cell .today-brief__markets-v {
flex: 0 0 auto;
font-size: clamp(0.68rem, 0.62rem + 0.26vw, 0.82rem);
line-height: 1.18;
font-weight: var(--font-weight-medium);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.today-brief__markets-cell .today-brief__markets-chg {
flex: 0 0 auto;
font-size: clamp(0.68rem, 0.62rem + 0.24vw, 0.8rem);
line-height: 1.18;
text-align: left;
}
.today-brief__markets-k {
flex: 0 0 auto;
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
}
.today-brief__markets-chg {
flex: 1 1 auto;
text-align: right;
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.today-brief__markets-chg.is-up {
color: var(--stock-up);
}
.today-brief__markets-chg.is-down {
color: var(--stock-down);
}
/* Brief chips: L1 at rest; interactive chips lift to L2 on hover */
.today-brief__card:not(.card-interactive):hover {
border-color: var(--border);
box-shadow: var(--card-elev-subtle);
}
.today-brief__card.card-interactive:hover {
border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
box-shadow: var(--card-elev-standard);
}
.today-brief__panel.today-brief__card--markets:hover {
border-color: var(--border);
box-shadow: var(--card-elev-standard);
}
.today-brief__card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.today-brief__eyebrow {
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
.today-brief__text {
font-size: 0.82rem;
line-height: 1.35;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.today-brief__ai-row {
margin-top: 0.65rem;
}
.today-brief__ai-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.75rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
color: var(--text);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
transform 0.15s ease;
}
.today-brief__ai-btn:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.today-brief__ai-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.today-brief__ai-play {
display: inline-flex;
width: 1.35rem;
height: 1.35rem;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 0.65rem;
line-height: 1;
}
.pull-refresh-indicator {
position: fixed;
top: max(0.5rem, env(safe-area-inset-top, 0px));
left: 50%;
transform: translateX(-50%);
z-index: 40;
padding: 0.35rem 0.85rem;
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 92%, transparent);
border: 1px solid var(--border);
box-shadow: var(--shadow-tight);
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
}
.pull-refresh-indicator[hidden] {
display: none;
}
@media (min-width: 821px) {
.pull-refresh-indicator {
display: none !important;
}
}
.app-bottom-nav {
display: none;
}
@media (max-width: 820px) {
.app-bottom-nav {
display: flex;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
justify-content: space-around;
align-items: stretch;
gap: 0;
padding: 0.5rem max(0.5rem, env(safe-area-inset-left, 0px)) calc(0.55rem + env(safe-area-inset-bottom, 0px))
max(0.5rem, env(safe-area-inset-right, 0px));
background: color-mix(in srgb, var(--surface) 86%, transparent);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
box-shadow:
0 -1px 0 color-mix(in srgb, var(--border) 50%, transparent),
0 -10px 40px rgba(0, 0, 0, 0.08);
}
.app-bottom-nav__link {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
min-width: 0;
min-height: max(3.1rem, calc(var(--touch-target-min) + 4px));
padding: 0.48rem 0.32rem 0.42rem;
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--muted);
text-decoration: none;
border: none;
background: transparent;
cursor: pointer;
font-family: inherit;
line-height: var(--font-line-tight);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
color var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard),
opacity var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard);
}
.app-bottom-nav__link:hover,
.app-bottom-nav__link:focus-visible {
color: var(--text);
}
.app-bottom-nav__link:active {
opacity: 0.9;
transform: scale(0.97);
}
.app-bottom-nav__link:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-sm);
}
.app-bottom-nav__link--active {
color: var(--accent);
}
.app-bottom-nav__link--active::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(2.25rem, 42%);
height: 3px;
border-radius: 0 0 6px 6px;
background: var(--accent);
pointer-events: none;
}
.app-bottom-nav__link--active > span:last-child {
font-weight: 700;
color: color-mix(in srgb, var(--accent) 18%, var(--text));
}
.app-bottom-nav__link--active.app-bottom-nav__link--btn > span:last-child {
color: color-mix(in srgb, var(--accent) 22%, var(--text));
}
.app-bottom-nav__icon {
font-size: clamp(1.625rem, 4.5vw, 1.75rem);
line-height: 1;
}
.app-bottom-nav__link > span:last-child {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 390px) {
.app-bottom-nav__link {
gap: 0.14rem;
padding: 0.42rem 0.12rem 0.38rem;
font-size: clamp(0.56rem, 2.3vw, 0.64rem);
letter-spacing: 0;
min-height: max(2.95rem, var(--touch-target-min));
}
.app-bottom-nav__icon {
font-size: clamp(1.5rem, 4vw, 1.65rem);
}
.app-bottom-nav__link[href="#favorites-card"] > span:last-child,
#bottom-nav-settings > span:last-child {
white-space: normal;
overflow: visible;
text-overflow: clip;
line-height: 1.05;
font-size: clamp(0.5rem, 2.05vw, 0.58rem);
}
}
@media (prefers-reduced-motion: reduce) {
.app-bottom-nav__link:active {
transform: none;
}
}
/* Full-screen tiles (mobile): bottom-nav tabs replace dashboard with that tile’s UX */
body.mobile-news-screen,
body.mobile-stocks-screen,
body.mobile-todos-screen,
body.mobile-favorites-screen {
overflow-x: hidden;
}
body.mobile-news-screen .dashboard__header,
body.mobile-news-screen #today-brief-section,
body.mobile-news-screen #mobile-weather-brief,
body.mobile-news-screen #mobile-commute-brief,
body.mobile-stocks-screen .dashboard__header,
body.mobile-stocks-screen #today-brief-section,
body.mobile-stocks-screen #mobile-weather-brief,
body.mobile-stocks-screen #mobile-commute-brief,
body.mobile-todos-screen .dashboard__header,
body.mobile-todos-screen #today-brief-section,
body.mobile-todos-screen #mobile-weather-brief,
body.mobile-todos-screen #mobile-commute-brief,
body.mobile-favorites-screen .dashboard__header,
body.mobile-favorites-screen #today-brief-section,
body.mobile-favorites-screen #mobile-weather-brief,
body.mobile-favorites-screen #mobile-commute-brief {
display: none !important;
}
body.mobile-news-screen #dashboard-tiles > :not(#tile-news),
body.mobile-stocks-screen #dashboard-tiles > :not(#stocks-tile),
body.mobile-todos-screen #dashboard-tiles > :not(#todo-card),
body.mobile-favorites-screen #dashboard-tiles > :not(#favorites-card) {
display: none !important;
}
/*
* News full-screen: several flex-shrink:0 chrome rows plus a flex:1 story list can allocate
* 0px to .news-tiles when this panel uses overflow:hidden (clips the scroll child). Let the
* news tile scroll as one column; stocks/todos keep inner scrollports (see e2e).
*/
/*
* `backdrop-filter` on `#main-content.dashboard` (light/solarized) creates a containing block for
* `position: fixed` descendants. Mobile tabs then position relative to `.dashboard`; when most
* in-flow content is hidden the panel collapses and News/Stocks/TODO tiles clip or render empty.
*/
body.mobile-news-screen #main-content.dashboard,
body.mobile-stocks-screen #main-content.dashboard,
body.mobile-todos-screen #main-content.dashboard,
body.mobile-favorites-screen #main-content.dashboard {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[data-theme="light"] body.mobile-news-screen #main-content.dashboard,
html[data-theme="light"] body.mobile-stocks-screen #main-content.dashboard,
html[data-theme="light"] body.mobile-todos-screen #main-content.dashboard,
html[data-theme="light"] body.mobile-favorites-screen #main-content.dashboard,
html[data-theme="solarized"] body.mobile-news-screen #main-content.dashboard,
html[data-theme="solarized"] body.mobile-stocks-screen #main-content.dashboard,
html[data-theme="solarized"] body.mobile-todos-screen #main-content.dashboard,
html[data-theme="solarized"] body.mobile-favorites-screen #main-content.dashboard {
background: var(--surface);
}
body.mobile-news-screen #tile-news,
body.mobile-stocks-screen #stocks-tile,
body.mobile-todos-screen #todo-card,
body.mobile-favorites-screen #favorites-card {
position: fixed;
/* Above .app-bottom-nav (z-index 50) so the panel surface isn’t stacked under the tab bar */
z-index: 60;
left: max(0.5rem, env(safe-area-inset-left, 0px));
right: max(0.5rem, env(safe-area-inset-right, 0px));
top: max(0.35rem, env(safe-area-inset-top, 0px));
/* Avoid top+bottom+height over-constraint; nav clearance is inside the calc height. */
bottom: auto;
width: auto;
max-width: none;
margin: 0;
box-sizing: border-box;
/* Explicit height: without this, flex children can expand the panel (no inner scroll). */
height: calc(
100dvh - max(0.35rem, env(safe-area-inset-top, 0px)) -
(4.2rem + max(0.5rem, env(safe-area-inset-bottom, 0px)))
)
!important;
max-height: none !important;
min-height: 0 !important;
overflow: hidden;
display: flex;
flex-direction: column;
}
body.mobile-news-screen #tile-news {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
body.mobile-news-screen #tile-news.news-summary--toolbar {
min-height: 0 !important;
}
/*
* Do not set height: 100% here — it overrides the calc() height on #tile-news above (same
* specificity + later rule) and can collapse the full-screen news panel or hide its scroll area.
*/
body.mobile-news-screen #tile-news.news-summary--toolbar.dashboard-tile--resizable-v {
min-height: 0 !important;
}
body.mobile-news-screen #tile-news .news-tiles {
flex: 0 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: visible;
max-height: none !important;
}
body.mobile-news-screen #tile-news .tile-resize-handle {
display: none !important;
}
body.mobile-stocks-screen #stocks-tile.card--stocks.dashboard-tile--resizable-v {
min-height: 0 !important;
flex: 1 1 auto;
}
body.mobile-stocks-screen #stocks-tile .stocks-card__footer {
flex-shrink: 0;
}
body.mobile-stocks-screen #stocks-tile .stock-composer {
flex-shrink: 0;
}
/*
* Pin markets summary + add-a-stock; only .stocks-scroll (chip list) scrolls.
*/
body.mobile-stocks-screen #stocks-tile .stocks-wrap {
flex: 1 1 0%;
min-height: 0;
overflow-x: hidden;
overflow-y: hidden;
display: flex;
flex-direction: column;
}
body.mobile-stocks-screen #stocks-tile .stocks-scroll {
flex: 1 1 0%;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
}
body.mobile-stocks-screen #stocks-tile .stocks-grid {
flex: 0 0 auto;
min-height: 0;
overflow: visible;
max-height: none;
}
body.mobile-stocks-screen #stocks-tile .tile-resize-handle {
display: none !important;
}
body.mobile-todos-screen #todo-card.tile-type-vertical {
overflow-y: hidden;
overflow-x: hidden;
}
/*
* Full-screen TODO tab: let the list fill space between header and footer.
* `.todo-scroll--limited` max-height (~5 rows) is for the dashboard tile only; it caused a short
* scroll box and half-empty screen on mobile.
*/
body.mobile-todos-screen #todo-card.tile-type-vertical .todo-scroll,
body.mobile-todos-screen #todo-card.tile-type-vertical.todo-card--composer-open .todo-scroll {
flex: 1 1 0%;
min-height: 0;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
body.mobile-todos-screen #todo-card .todo-composer {
flex-shrink: 0;
}
body.mobile-favorites-screen #favorites-card.tile-type-vertical {
overflow-y: hidden;
overflow-x: hidden;
}
body.mobile-favorites-screen #favorites-card.tile-type-vertical .favorites-scroll {
flex: 1 1 0%;
min-height: 0;
max-height: none;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
#favorites-card .tile-collapse-btn {
display: none !important;
}
}
.prefs-saved-list {
list-style: none;
margin: 0.35rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
max-height: 11rem;
overflow: auto;
}
.prefs-saved-list__item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.85rem;
line-height: 1.35;
padding: 0.35rem 0.4rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface-alt);
}
.prefs-saved-list__link {
flex: 1;
min-width: 0;
color: var(--accent);
text-decoration: none;
word-break: break-word;
}
.prefs-saved-list__link:hover {
text-decoration: underline;
}
.prefs-saved-list__remove {
flex-shrink: 0;
width: 1.65rem;
height: 1.65rem;
padding: 0;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
}
.prefs-saved-list__remove:hover {
border-color: var(--warn);
color: var(--warn);
}
.news-bookmark-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.05rem;
height: 2.05rem;
padding: 0;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--accent);
cursor: pointer;
flex-shrink: 0;
font-size: 1rem;
line-height: 1;
transition:
background 0.15s ease,
border-color 0.15s ease,
transform 0.15s ease;
}
.news-bookmark-btn:hover {
border-color: var(--accent);
background: var(--prefs-toggle-hover);
}
.news-bookmark-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.news-bookmark-btn[aria-pressed="true"] {
background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface-alt));
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.favorites-remove-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
padding: 0;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
flex-shrink: 0;
}
.favorites-remove-btn:hover {
border-color: var(--warn);
color: var(--warn);
}
#favorites-card .favorites-item {
display: flex;
flex-direction: column;
align-items: stretch;
}
#favorites-card .favorites-item .news-item__row {
flex: 1 1 auto;
}
#favorites-card .favorites-item__open-row {
display: flex;
align-items: center;
margin-top: 0.38rem;
padding-top: 0.32rem;
border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.favorites-open-article-link {
display: inline-flex;
align-items: center;
margin-inline-start: auto;
font-size: 0.72rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.favorites-open-article-link:hover {
text-decoration: underline;
}
#favorites-card.favorites-card.tile-type-vertical {
display: flex;
flex-direction: column;
min-height: 0;
}
#favorites-card .favorites-card__top {
flex-shrink: 0;
}
#favorites-card .favorites-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
margin-top: 0.35rem;
}
#favorites-card .favorites-empty-hint {
margin: 0.5rem 0 0;
}
/* ---------------------------------------------------------------------------
Loading skeletons (news / stocks / weather) — pulse suppressed when reduced-motion
--------------------------------------------------------------------------- */
/* Weather tile: heading + temp + meta bars + horizontal hour placeholders */
#weather-card.skeleton-zone .weather-skeleton-heading {
display: block;
width: min(11rem, 72%);
height: 0.85rem;
margin: 0;
padding: 0;
color: transparent !important;
overflow: hidden;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--muted) 18%, var(--surface-alt));
}
#weather-card.skeleton-zone .weather-current__main.weather-skeleton-hero {
display: inline-block;
vertical-align: middle;
width: 5.75rem;
height: 1.35rem;
margin: 0.15rem 0;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
overflow: hidden;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--muted) 18%, var(--surface-alt));
}
#weather-card.skeleton-zone .weather-desc.weather-skeleton-desc {
height: 0.52rem;
width: min(100%, 14rem);
margin: 0.35rem 0 0;
padding: 0;
color: transparent !important;
overflow: hidden;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--muted) 18%, var(--surface-alt));
}
.hourly-forecast.hourly-forecast--skeleton {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: var(--space-2);
margin-top: var(--space-3);
padding-bottom: var(--space-2);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#weather-card.skeleton-zone .weather-hour-skeleton-block {
flex-shrink: 0;
min-width: 4.25rem;
height: 4rem;
margin: 0;
border-radius: var(--radius-md);
}
.skeleton-zone .skeleton-line,
.skeleton-zone .skeleton-block {
background: color-mix(in srgb, var(--muted) 18%, var(--surface-alt));
border-radius: var(--radius-sm);
}
.skeleton-zone .skeleton-line--title {
height: 0.72rem;
width: 92%;
margin-bottom: 0.38rem;
}
.skeleton-zone .skeleton-line--meta {
height: 0.52rem;
width: 42%;
}
.skeleton-zone .skeleton-chip-name {
height: 0.62rem;
width: 58%;
}
.skeleton-zone .skeleton-chip-price {
height: 0.55rem;
width: 36%;
}
.skeleton-zone .skeleton-chip-spark {
height: 2rem;
width: 100%;
margin-top: 0.35rem;
border-radius: var(--radius-md);
}
.stocks-skeleton-chips {
display: grid;
grid-template-columns: 1fr;
gap: var(--stock-gap, 0.32rem);
}
.stock-chip-skeleton {
padding: 0.38rem 0.42rem;
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
background: color-mix(in srgb, var(--surface-alt) 90%, var(--surface));
}
.stock-chip-skeleton__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
@media (prefers-reduced-motion: no-preference) {
.skeleton-zone .skeleton-line,
.skeleton-zone .skeleton-block {
animation: skeleton-pulse 1.4s ease-in-out infinite;
}
}
@keyframes skeleton-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.55;
}
}
@media (prefers-reduced-motion: reduce) {
.skeleton-zone .skeleton-line,
.skeleton-zone .skeleton-block {
opacity: 0.85;
}
}
/* ═══ Glance-first mobile home (≤820px): one-screen density, 8pt grid, rotating spotlight ═══ */
@media (min-width: 821px) {
.glance-rotate,
.glance-rotate__slides,
.glance-rotate__slide {
display: contents;
}
.glance-rotate__arrow {
display: none !important;
}
.glance-rotate__nav {
display: none !important;
}
.glance-collapsible--ai-news {
display: contents;
}
.glance-collapsible--ai-news .glance-collapsible__trigger {
display: none !important;
}
.glance-collapsible--ai-news .glance-collapsible__panel {
max-height: none !important;
opacity: 1 !important;
overflow: visible !important;
}
}
@media (max-width: 820px) {
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
.app-shell {
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#main-content.dashboard {
flex: 1;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell {
--grid-step: var(--space-2);
--glance-slot-h: clamp(8rem, 28svh, 12.5rem);
--today-brief-commute-h: var(--glance-slot-h);
flex: 1;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: column;
gap: var(--grid-step);
padding-bottom: var(--space-2);
margin-bottom: 0;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
.today-brief__intro--glance-primary {
flex: 0 0 auto;
padding: var(--space-4) var(--space-4);
margin-bottom: 0;
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius-card-primary);
background: linear-gradient(
145deg,
color-mix(in srgb, var(--surface-alt) 88%, var(--accent-soft)),
color-mix(in srgb, var(--surface-alt) 96%, transparent)
);
border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
box-shadow: var(--card-elev-highlight);
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
.today-brief__intro--glance-primary::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background: linear-gradient(
118deg,
transparent 18%,
color-mix(in srgb, var(--accent) 12%, transparent) 52%,
color-mix(in srgb, var(--accent) 20%, transparent) 100%
);
opacity: 0.92;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
.today-brief__intro--glance-primary
.today-brief__hero-title {
position: relative;
z-index: 1;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
.today-brief__hero-title {
font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
margin: 0;
line-height: var(--font-line-tight);
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
.today-brief-weather.mobile-weather-brief {
flex: 0 0 auto;
margin: 0;
min-height: 0;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
#weather-card.weather-card--brief {
height: auto;
min-height: 0;
max-height: none;
padding: var(--space-2) var(--space-3) var(--space-1);
opacity: 0.94;
box-shadow: var(--elev-1);
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
.weather-hourly-details {
max-height: min(14rem, 48svh);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
#weather-hourly.hourly-forecast {
max-height: min(11rem, 36svh);
}
body:not(.mobile-news-screen):not(.mobile-stocks-screen):not(.mobile-todos-screen):not(.mobile-favorites-screen):not(
.mobile-prefs-screen
)
#today-brief-section.glance-home-shell
.today-brief__grid--glance {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--grid-step);
/* Let the brief column scroll; clip horizontal bleed only (carousel uses position:absolute slides) */
overflow-x: hidden;
overflow-y: visible;
}
#glance-rotate {
/* Do not grow to fill the column — that stretched the slide stack and let chips paint over the AI block */
flex: 0 0 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
opacity: 0.96;
position: relative;
z-index: 0;
overflow: hidden;
}
#glance-rotate-slides {
position: relative;
flex: 0 0 auto;
width: 100%;
/* Horizontal swipe rail: app.js keeps height aligned to active card. */
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
min-height: var(--today-brief-commute-h);
scrollbar-width: none;
}
#glance-rotate-slides::-webkit-scrollbar {
display: none;
}
#glance-rotate .glance-rotate__slide {
position: relative;
inset: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
display: flex;
flex-direction: column;
flex: 0 0 100%;
width: 100%;
min-height: 0;
justify-content: flex-start;
align-items: stretch;
scroll-snap-align: start;
scroll-snap-stop: always;
}
#glance-rotate .glance-rotate__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 1.7rem;
height: 1.7rem;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, var(--surface-alt) 92%, transparent);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: var(--elev-1);
}
#glance-rotate .glance-rotate__arrow--prev {
left: 0.2rem;
}
#glance-rotate .glance-rotate__arrow--next {
right: 0.2rem;
}
#glance-rotate .glance-rotate__arrow:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
#glance-rotate .glance-rotate__arrow:active {
transform: translateY(-50%) scale(0.96);
}
#glance-rotate .glance-rotate__slide--active {
z-index: 0;
}
#glance-rotate .glance-rotate__slide > * {
flex: 1 1 auto;
min-height: 0;
height: 100%;
max-height: 100%;
width: 100%;
box-sizing: border-box;
}
#glance-rotate #brief-card-ipl.today-brief__card--ipl-brief {
height: auto;
min-height: 0;
max-height: none;
overflow: visible;
}
#glance-rotate #brief-card-ipl .brief-ipl-scroll {
flex: 0 1 auto;
min-height: 0;
max-height: none;
overflow-x: hidden;
overflow-y: hidden;
}
#glance-rotate-nav {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2);
padding: 0;
margin-top: 0.1rem;
}
.glance-rotate__dot {
width: var(--space-2);
height: var(--space-2);
padding: 0;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--muted) 55%, var(--border));
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background var(--duration-fast) var(--ease-standard),
transform var(--duration-fast) var(--ease-out);
}
.glance-rotate__dot--active {
background: var(--accent);
border-color: var(--accent);
transform: scale(1.15);
}
.glance-collapsible--ai-news {
flex: 0 0 auto;
min-height: 0;
position: relative;
z-index: 1;
isolation: isolate;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: color-mix(in srgb, var(--surface-alt) 92%, transparent);
opacity: 0.9;
box-shadow: var(--elev-1);
}
.glance-collapsible__trigger {
width: 100%;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: center;
gap: var(--space-1) var(--space-2);
padding: var(--space-3) var(--space-3);
margin: 0;
border: none;
background: transparent;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
border-radius: var(--radius-md);
-webkit-tap-highlight-color: transparent;
}
.glance-collapsible__label {
grid-column: 1;
grid-row: 1;
font-weight: var(--font-weight-semibold);
font-size: var(--type-section);
letter-spacing: 0.015em;
color: var(--text);
}
.glance-collapsible__summary {
grid-column: 1 / -1;
grid-row: 2;
font-size: var(--type-meta);
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
line-height: var(--font-line-snug);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.glance-collapsible__chevron {
grid-column: 2;
grid-row: 1;
width: 0.65rem;
height: 0.65rem;
border-right: 2px solid var(--text-secondary);
border-bottom: 2px solid var(--text-secondary);
transform: rotate(45deg);
transition: transform var(--duration-base) var(--ease-out);
justify-self: end;
margin-top: 0.2rem;
}
.glance-collapsible--ai-news[data-expanded="true"] .glance-collapsible__chevron {
transform: rotate(225deg);
margin-top: 0.2rem;
}
.glance-collapsible__panel {
position: static;
left: auto;
right: auto;
bottom: auto;
z-index: auto;
overflow: hidden;
max-height: 0;
opacity: 0.65;
visibility: visible;
pointer-events: auto;
transform: none;
transition:
max-height var(--duration-card-motion) var(--ease-out),
opacity var(--duration-card-motion) var(--ease-out);
}
.glance-collapsible--ai-news[data-expanded="true"] .glance-collapsible__panel {
max-height: 32rem;
opacity: 1;
overflow: visible;
border-top: 1px solid var(--border-subtle);
}
.glance-collapsible__panel-inner {
padding: 0;
overflow: visible;
}
.glance-collapsible--ai-news[data-expanded="true"] #brief-card-ai-news {
box-shadow: none;
border: 1px solid var(--border);
background: var(--surface-alt);
padding: var(--space-3);
overflow: visible;
}
/* Medium phones: open AI summary upward as a popup. */
@media (min-width: 380px) and (max-width: 460px) {
.glance-collapsible__chevron {
transform: rotate(225deg);
}
.glance-collapsible--ai-news[data-expanded="true"] .glance-collapsible__chevron {
transform: rotate(45deg);
}
.glance-collapsible__panel {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + var(--space-2));
z-index: 4;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(0.28rem);
overflow: visible;
max-height: none;
transition:
opacity var(--duration-card-motion) var(--ease-out),
transform var(--duration-card-motion) var(--ease-out),
visibility 0s linear var(--duration-card-motion);
}
.glance-collapsible--ai-news[data-expanded="true"] .glance-collapsible__panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
border-top: none;
transition:
opacity var(--duration-card-motion) var(--ease-out),
transform var(--duration-card-motion) var(--ease-out),
visibility 0s linear 0s;
}
}
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
#glance-rotate .glance-rotate__slide {
transition: none;
}
.glance-collapsible__panel {
transition: none;
}
}
/* First-run mobile tip: bottom navigation discoverability */
.mobile-nav-hint {
position: fixed;
z-index: 55;
left: max(0.5rem, env(safe-area-inset-left, 0px));
right: max(0.5rem, env(safe-area-inset-right, 0px));
top: max(0.4rem, env(safe-area-inset-top, 0px));
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
color: var(--text);
box-shadow: var(--elev-1);
font-size: var(--font-size-sm);
line-height: var(--font-line-snug);
}
.mobile-nav-hint[hidden] {
display: none !important;
}
.mobile-nav-hint__text {
margin: 0;
flex: 1;
min-width: 0;
}
.mobile-nav-hint__dismiss {
flex-shrink: 0;
font: inherit;
font-size: var(--font-size-sm);
font-weight: 600;
padding: 0.35rem 0.65rem;
min-height: var(--touch-target-min);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.mobile-nav-hint__dismiss:hover {
background: var(--surface-alt);
}
.mobile-nav-hint__dismiss:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
@media (min-width: 821px) {
.mobile-nav-hint {
display: none !important;
}
}