/* FCF-220 "Flow Glass": Liquid Glass chrome on top of focus.css. Loaded last; every rule sits under html.glass,
   so taking the class off <html> brings the previous look back.
   The focus room: while a Session runs the timer dims to one deep canvas tinted by the category and the time is the
   only bright thing, in light and dark alike. FCF-262: overtime keeps the room and adds one amber chip under the total.
   Phone-only layout (floating tab bar, room behind the tab bar, sizes) is inside @media(max-width:600px); the Mac keeps
   its side rail and calendar, and only the timer pane becomes the room. */
html.glass{--g-ink:#1d1d1f;--g-muted:#6e6e73;--g-bg:#f2f3f7;
  --g-glass:rgba(255,255,255,.56);--g-edge:rgba(255,255,255,.75);--g-line:rgba(15,23,42,.06);
  --g-shadow:0 10px 30px rgba(15,23,42,.10),0 1px 2px rgba(15,23,42,.06);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 58%);
  --g-card:rgba(255,255,255,.66);--g-track:rgba(118,118,128,.12)}
html.glass body.dark{--g-ink:#f5f5f7;--g-muted:#98989f;--g-bg:#0b0c10;
  --g-glass:rgba(44,46,54,.52);--g-edge:rgba(255,255,255,.14);--g-line:rgba(255,255,255,.06);
  --g-shadow:0 10px 30px rgba(0,0,0,.45);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 58%);
  --g-card:rgba(255,255,255,.06);--g-track:rgba(118,118,128,.24)}

/* Ambient canvas: the category colour as a soft light, so the glass has something to refract.
   --surface stays opaque: menus, suggestions, calendar events and dialogs paint with it. */
html.glass body{background:var(--g-bg)}
html.glass #app{--soft:var(--g-track);--border:var(--g-line);color:var(--g-ink);
  background:radial-gradient(90% 55% at 15% 0%,color-mix(in oklab,var(--accent) 26%,transparent),transparent 70%),
             radial-gradient(80% 50% at 100% 100%,color-mix(in oklab,var(--accent) 16%,transparent),transparent 70%),var(--g-bg)!important}
html.glass #app button,html.glass #app input{letter-spacing:-.01em}
/* Sheets and menus paint with the opaque surface colour: they always carry the theme's ink (FCF-268). The toast keeps its own dark chip. */
html.glass #modal-root{color:var(--g-ink)}
/* Small grey icons on glass keep 3:1 (FCF-268 sweep). */
html.glass .category-pill svg,html.glass .time-pill svg,html.glass .dialog .close,html.glass .phone-timer-switch button{color:var(--g-muted)!important}
html.glass .phone-timer-switch button[aria-pressed=true]{color:var(--g-ink)!important}
html.glass .day-box small,html.glass .todo-meta,html.glass .todo-progress,html.glass .setting-link .chevron{color:var(--g-muted)!important}
/* FCF-318: the week strip sits on up to 19% accent glow on a phone (measured), so its grey text is tuned for 22% and every category colour. */
html.glass .day-box small{color:#68686d!important}
html.glass body.dark .day-box small{color:#bebec3!important}
html.glass body.dark .day-box strong{color:#bfbfbf}
html.glass .day-total{color:#4f4f4f}
html.glass body.dark .day-total{color:#b0b0b0}
/* The selected settings row is dark green: its chevron takes the row's white ink (grey gave 2.1:1 in light). */
html.glass .setting-link.active .chevron{color:inherit!important}
html.glass body:not(.dark) .distribution-row .positive{color:#367a24}  /* the light green change text was 2.3:1 on the light card */
html.glass .timer-pane,html.glass section.reports,html.glass .report-records,html.glass .todo-pane,html.glass .settings-pane{background:transparent!important}

/* One glass recipe for every floating control. */
html.glass #rail,html.glass .category-pill,html.glass .time-pill,html.glass .circle:not(.primary),html.glass .round-small,html.glass .corner,
html.glass .phone-timer-switch,html.glass .todo-status,html.glass .segmented{
  background:var(--g-sheen),var(--g-glass)!important;border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.35)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);color:var(--g-ink)!important}
html.glass #rail button{color:color-mix(in oklab,var(--g-ink) 78%,transparent)!important}
html.glass #rail button[aria-current=page]{background:color-mix(in oklab,var(--accent) 16%,rgba(120,120,128,.10));color:color-mix(in oklab,var(--accent) 50%,var(--g-ink))!important}
html.glass body.dark #rail button[aria-current=page]{color:color-mix(in oklab,var(--accent) 45%,white)!important}
html.glass #rail button[aria-current=page] svg{fill:currentColor;fill-opacity:.18;stroke-width:2}
html.glass #rail button[aria-current=page]:after{display:none}
html.glass .corner{border-radius:50%!important}

/* Idle timer */
html.glass #app{--accent-ink:var(--on-accent,#fff)}
html.glass .start-button,html.glass .add-circle,html.glass .cal-today,html.glass .circle.primary{background:var(--g-sheen),var(--accent)!important;color:var(--accent-ink,#fff)!important;
  border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 10px 24px color-mix(in oklab,var(--accent) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.45)!important;font-weight:600}
html.glass .start-button{border-radius:999px!important;padding:14px 34px!important;font-size:17px}
/* FCF-271: the calendar zoom pair is one small glass capsule. */
html.glass .cal-zoom{background:var(--g-sheen),var(--g-glass)!important;border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);color:var(--g-ink)!important}
html.glass .cal-zoom button+button{border-top:1px solid var(--g-line)}
html.glass .intention-area input,html.glass #intention{background:transparent!important;border:0!important;border-bottom:1px solid var(--g-line)!important;color:var(--g-ink)!important}
html.glass .timer-value{font-weight:250!important;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--g-ink)!important}
html.glass .parked-chip{background:color-mix(in oklab,var(--accent) 14%,transparent)!important;border:0!important;color:var(--g-ink)!important}

/* Cards and lists: frosted, rounder, no grey 1px borders. */
html.glass .stats-box,html.glass .todo-row,html.glass .plan-summary,html.glass .report-filter,html.glass .day-box,html.glass .tiny-square,html.glass .date-title{
  background:var(--g-card)!important;border:1px solid var(--g-edge)!important;border-radius:20px!important;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);color:var(--g-ink)!important}
html.glass .day-box,html.glass .tiny-square,html.glass .date-title{border-radius:12px!important}
html.glass body.dark .stats-box,html.glass body.dark .todo-row,html.glass body.dark .plan-summary{box-shadow:none}
/* FCF-309: the card rule above wins over .todo-row.selected (focus-planner.css), so a clicked or arrowed-to Todo looked like every other row. */
html.glass .todo-row.selected{border-color:color-mix(in srgb,var(--accent) 72%,#000)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 72%,#000) inset,0 8px 24px rgba(15,23,42,.08)!important;background:color-mix(in srgb,var(--accent) 12%,var(--g-card))!important}
html.glass body.dark .todo-row.selected{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent) inset!important;background:color-mix(in srgb,var(--accent) 20%,var(--g-card))!important}
/* FCF-318: on that accent tint the grey category · time line keeps 4.5:1 (it gave 3.2:1 in dark, 3.9:1 in light). */
html.glass .todo-row.selected .todo-meta,html.glass .todo-row.selected .todo-progress{color:#5c5c61!important}
html.glass body.dark .todo-row.selected .todo-meta,html.glass body.dark .todo-row.selected .todo-progress{color:#d2d2d7!important}
/* FCF-321: an agent row's grey line keeps 4.5:1 on its light hover (#efefef gave 4.4:1). */
html.glass body:not(.dark) .agent-row:hover .todo-meta{color:#6a6a6f!important}
html.glass .todo-row:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent)!important}
html.glass .segmented{border-radius:14px!important;padding:3px!important;background:var(--g-track)!important;box-shadow:none!important;border:0!important}
html.glass .segmented button{border-radius:11px!important;color:var(--g-muted)!important;background:transparent!important;border:0!important}
html.glass .segmented button.active,html.glass .segmented button[aria-pressed=true],html.glass .segmented button[aria-selected=true]{background:var(--g-sheen),var(--g-glass)!important;color:var(--g-ink)!important;font-weight:600;box-shadow:0 2px 8px rgba(15,23,42,.12)}
/* FCF-308: an unselected segment reads at 4.5:1 on the grey track, also over the accent glow (--g-muted #6e6e73 gave 3.98:1 in light).
   FCF-318: tuned for 22% glow, 18% measured under the To-do tabs on the Mac (#505055 / #b0b0b5 were tuned for 16%). */
html.glass .segmented button:not(.active):not([aria-pressed=true]):not([aria-selected=true]){color:#48484d!important}
html.glass body.dark .segmented button:not(.active):not([aria-pressed=true]):not([aria-selected=true]){color:#c0c0c5!important}
html.glass .todo-status{border-radius:16px!important}
html.glass .phone-timer-switch{border-radius:999px!important}
html.glass #app input[type=checkbox]{accent-color:var(--accent)}

/* ── The focus room (FCF-270) ── the theme stays and the category colour leads, like Session: a soft wash of the colour
   behind the timer, the elapsed wedge in the true colour, the theme's own ink. Ink never flips, so nothing goes light-on-light.
   Overtime keeps the room and adds one amber chip under the total (FCF-262). Break keeps its graphite room. */
html.glass .timer-pane.running,html.glass .timer-pane.overflow{--dial-base:#fff;--dial-fill:100%;--dial-empty:24%;--g-muted:color-mix(in srgb,var(--g-ink) 76%,transparent);
  --g-glass:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.62));color:var(--g-ink)!important;
  background:radial-gradient(130% 85% at 50% 0%,color-mix(in oklab,var(--accent) 24%,var(--g-bg)),color-mix(in oklab,var(--accent) 9%,var(--g-bg)) 78%)!important}
html.glass body.dark .timer-pane.running:not(.rest),html.glass body.dark .timer-pane.overflow:not(.rest){--dial-base:#17181d;--dial-empty:30%;
  --g-glass:color-mix(in srgb,var(--accent) 14%,rgba(44,46,54,.56));
  background:radial-gradient(130% 85% at 50% 0%,color-mix(in oklab,var(--accent) 34%,var(--g-bg)),color-mix(in oklab,var(--accent) 12%,var(--g-bg)) 78%)!important}
/* The base overflow look paints on a full-colour pane with --on-accent; on the wash that ink is the theme's. */
html.glass .timer-pane.overflow:not(.rest){--on-accent:var(--g-ink)}
html.glass .timer-pane.running .intention-title,html.glass .timer-pane.overflow .intention-title{font-weight:600;letter-spacing:-.02em}
html.glass .timer-pane.running .edit-link,html.glass .timer-pane.overflow .edit-link{color:var(--g-muted)!important;text-decoration:none}
html.glass .timer-pane.running .timer-value,html.glass .timer-pane.overflow .timer-value{font-weight:200!important}
html.glass .timer-pane.running .circle.primary,html.glass .timer-pane.overflow .circle.primary{box-shadow:0 8px 20px color-mix(in oklab,var(--accent) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.4)!important}
html.glass .timer-pane.running .dial-hand,html.glass .timer-pane.overflow .dial-hand{background:var(--accent)!important}
html.glass .timer-pane.running .dial-ticks,html.glass .timer-pane.overflow .dial-ticks{stroke:color-mix(in srgb,var(--g-ink) 20%,transparent)!important}
html.glass .timer-pane.running .dial-ticks.major,html.glass .timer-pane.overflow .dial-ticks.major{stroke:color-mix(in srgb,var(--g-ink) 55%,transparent)!important}
html.glass .timer-pane.running .dial-disc,html.glass .timer-pane.overflow .dial-disc{box-shadow:0 12px 32px color-mix(in oklab,var(--accent) 22%,transparent)}
html.glass .timer-pane.overflow .dot{background:var(--accent)!important}
/* Break: graphite room with light ink, in both themes. A Break pane is also .running or .overflow, so the dark focus room skips .rest (FCF-321). */
html.glass body .timer-pane.rest{--g-ink:#f5f5f7;--g-muted:rgba(245,245,247,.82);--g-glass:rgba(255,255,255,.14);--g-edge:rgba(255,255,255,.22);
  --g-sheen:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 58%);color:#f5f5f7!important;
  background:radial-gradient(130% 85% at 50% 0%,#6c6c72,#4a4a4f 78%)!important}
html.glass:has(.timer-pane.rest) .phone-timer-switch{--g-ink:#f5f5f7;--g-muted:rgba(245,245,247,.82);--g-glass:rgba(255,255,255,.14);--g-edge:rgba(255,255,255,.22)}
/* FCF-318: "Edit Session" on the graphite reads at 4.5:1 (the 82% white gave 4.3:1). */
html.glass .timer-pane.rest .edit-link{color:#e8e8eb!important}
/* FCF-321: the category pill sits where the graphite is lightest; white glass there gave its name 3.7:1, a dark glass gives 6:1.
   "Taking a break" (23px, not large text) at 70% white gave 4.4:1 on a phone. */
html.glass .timer-pane.rest .category-pill{--g-glass:rgba(0,0,0,.12)}
html.glass .timer-pane.rest .break-label{color:#dcdce0}
/* FCF-262 overtime chip: one short line under the total. Its own frosted base keeps the amber ink readable on any wash. */
html.glass .timer-status.is-over{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:6px 13px 6px 11px;border-radius:999px;
  background:linear-gradient(rgba(255,149,0,.16),rgba(255,149,0,.16)),rgba(255,255,255,.72);border:1px solid rgba(255,149,0,.38);color:#8f4c00!important;font:600 14px/1 -apple-system,BlinkMacSystemFont,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0}
html.glass .timer-status.is-over:before{content:'';width:7px;height:7px;border-radius:50%;background:#ff9500;box-shadow:0 0 0 3px rgba(255,149,0,.22)}
html.glass .timer-status.is-over b{font-weight:700;color:#5e3200}
html.glass body.dark .timer-status.is-over{background:linear-gradient(rgba(255,184,92,.16),rgba(255,184,92,.16)),rgba(12,10,8,.5);border-color:rgba(255,184,92,.34);color:#ffd59a!important}
html.glass body.dark .timer-status.is-over:before{background:#ffb85c}
html.glass body.dark .timer-status.is-over b{color:#fff3e0}

/* Mac: the side rail becomes a glass column. */
@media(min-width:601px){
 html.glass #rail{border-radius:16px!important}
 html.glass #rail button[aria-current=page]{border-radius:10px}
 html.glass .timer-pane.running,html.glass .timer-pane.overflow{border-radius:18px;margin:6px}
}

/* iPhone: floating tab bar like iOS 26, and the whole screen is the room while the timer page shows a running Session. */
@media(max-width:600px){
 /* FCF-267: the tab bar floats over the page, so its old grid row goes (that row left an empty band and cut every page short). */
 html.glass #app{grid-template-rows:minmax(0,1fr)!important}
 html.glass #rail{position:absolute!important;left:16px;right:16px;bottom:14px;height:62px;border-radius:31px!important;padding:0 6px!important;z-index:30}
 html.glass #rail button{width:62px;height:50px;border-radius:25px}
 html.glass #rail button svg{width:24px;height:24px;stroke-width:1.8}
 html.glass #workspace{padding-bottom:84px}
 html.glass #app.phone-keyboard #workspace{padding-bottom:0}
 html.glass .circle{width:58px!important;height:58px!important}
 html.glass .corner{width:40px;height:40px}
 /* The running-Session bar is a glass capsule right above the tab bar; pages stop 8px above it, and lists fade out at that edge. */
 html.glass .mini-bar{left:16px;right:16px;bottom:84px;height:56px;padding:6px 8px 6px 10px;border-radius:22px;border:1px solid var(--g-edge)!important;
   background:var(--g-sheen),var(--g-glass)!important;box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.35);
   -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);color:var(--g-ink)!important}
 html.glass .mini-bar.overflow{background:linear-gradient(rgba(255,184,92,.2),rgba(255,184,92,.2)),var(--g-glass)!important;border-color:rgba(255,184,92,.45)!important}
 html.glass .mini-bar .mini-detail small{color:var(--g-muted)!important}
 /* FCF-318: the category name keeps 4.5:1 on the overtime amber too (3.7:1 in dark, 4.4:1 in light), with up to 10% glow behind. */
 html.glass body:not(.dark) .mini-bar .mini-detail small{color:#646469!important}
 html.glass body.dark .mini-bar.overflow .mini-detail small{color:#b9b9be!important}
 html.glass .mini-bar .circle{width:40px!important;height:40px!important}
 html.glass #app.phone-keyboard .mini-bar{bottom:8px}
 html.glass .has-mini{padding-bottom:64px!important}
 html.glass #toast{bottom:86px}
 html.glass #app:has(.mini-bar) #toast{bottom:150px}
 html.glass .settings-nav,html.glass .calendar-scroll,html.glass .report-grid,html.glass .todo-pane{
   -webkit-mask-image:linear-gradient(#000 calc(100% - 24px),transparent);mask-image:linear-gradient(#000 calc(100% - 24px),transparent)}
 /* The room fills the phone screen only while the timer page itself is on screen: the phone calendar keeps the hidden
    timer in the page (FCF-269). Ink stays the theme's, so sheets, menus and toasts read as usual (FCF-268). */
 html.glass:has(.timer-pane.running):not(:has(.mobile-calendar)) #app,html.glass:has(.timer-pane.overflow):not(:has(.mobile-calendar)) #app{
   background:radial-gradient(130% 85% at 50% 0%,color-mix(in oklab,var(--accent) 24%,var(--g-bg)),color-mix(in oklab,var(--accent) 9%,var(--g-bg)) 78%)!important}
 html.glass body.dark:has(.timer-pane.running:not(.rest)):not(:has(.mobile-calendar)) #app,html.glass body.dark:has(.timer-pane.overflow:not(.rest)):not(:has(.mobile-calendar)) #app{
   background:radial-gradient(130% 85% at 50% 0%,color-mix(in oklab,var(--accent) 34%,var(--g-bg)),color-mix(in oklab,var(--accent) 12%,var(--g-bg)) 78%)!important}
 html.glass:has(.timer-pane.rest):not(:has(.mobile-calendar)) #app{background:radial-gradient(130% 85% at 50% 0%,#6c6c72,#4a4a4f 78%)!important}
 html.glass body .timer-pane.running,html.glass body .timer-pane.overflow,html.glass body .timer-pane.rest{background:transparent!important}
 html.glass:has(.timer-pane.running):not(:has(.mobile-calendar)) #rail,html.glass:has(.timer-pane.overflow):not(:has(.mobile-calendar)) #rail{opacity:.82}
 html.glass:has(.timer-pane.rest):not(:has(.mobile-calendar)) #rail{--g-ink:#f5f5f7;--g-glass:rgba(255,255,255,.14);--g-edge:rgba(255,255,255,.22);
   --g-sheen:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 58%)}
 html.glass:has(.timer-pane.rest):not(:has(.mobile-calendar)) #rail button[aria-current=page]{color:#fff!important;background:rgba(255,255,255,.18)}
 /* With the dial showing, the time sits a little higher so the overtime chip never meets the controls (a Break has no dial). */
 html.glass .timer-pane.running:not(.rest) .timer-anchor,html.glass .timer-pane.overflow:not(.rest) .timer-anchor{top:36%}
 html.glass .timer-pane.running .timer-value,html.glass .timer-pane.overflow .timer-value{font-size:56px!important;line-height:1.05;margin-top:6px}
}
/* FCF-324: the card rule wins over .todo-row.dragging, so a dragged row stayed see-through and flat; lift it on an almost solid card */
html.glass .todo-row.dragging{background:color-mix(in srgb,var(--g-card) 30%,#fff)!important;box-shadow:0 14px 34px rgba(15,23,42,.18)!important}
html.glass body.dark .todo-row.dragging{background:#2c2c30!important;box-shadow:0 14px 34px rgba(0,0,0,.55)!important}
/* FCF-332: the floating tab bar sits just above the home indicator (iOS 26) instead of a band higher; on the web and on phones
   without a home indicator the inset is 0, so it stays 14px from the bottom. Everything that clears the bar follows it. */
@media(max-width:600px){
 html.glass #app{--tab-gap:max(14px,calc(env(safe-area-inset-bottom,0px) - 10px));--tab-clear:calc(var(--tab-gap) + 70px)}
 html.glass #rail{bottom:var(--tab-gap)}
 html.glass #workspace{padding-bottom:var(--tab-clear)}
 html.glass .mini-bar{bottom:var(--tab-clear)}
 html.glass #toast{bottom:calc(var(--tab-clear) + 2px)}
 html.glass #app:has(.mini-bar) #toast{bottom:calc(var(--tab-clear) + 66px)}
 /* FCF-330: six tabs share the bar */
 html.glass #rail button{width:auto;flex:1 1 0;max-width:62px}
 /* FCF-331: Report and Review run under the running-Session bar and the tab bar (frosted), like lists in iOS 26;
    the end of the page still scrolls clear of both. */
 html.glass #app[data-view=reports] #workspace{padding-bottom:0}
 html.glass #app[data-view=reports] #workspace>.has-mini{padding-bottom:0!important}
 html.glass .reports .report-grid{-webkit-mask-image:none;mask-image:none}
 html.glass .reports{padding-bottom:calc(var(--tab-clear) + 8px)}
 html.glass .has-mini>.reports{padding-bottom:calc(var(--tab-clear) + 72px)}
}
/* FCF-448: rest of a long Todo — readable on the glass card, light and dark, selected too */
html.glass .todo-rest{color:color-mix(in srgb,var(--g-ink) 80%,transparent)!important}
html.glass .todo-row.selected .todo-rest{color:#3a3a3e!important}
html.glass body.dark .todo-row.selected .todo-rest{color:#e5e5ea!important}
/* FCF-490/491: the find / filter / sort bar on the glass cards */
html.glass .todo-search,html.glass .todo-tools>select,html.glass .todo-clear{background:var(--g-card);color:var(--g-ink);border-color:color-mix(in srgb,var(--g-ink) 22%,transparent)}
html.glass .todo-search svg,html.glass .todo-search input::placeholder{color:color-mix(in srgb,var(--g-ink) 62%,transparent)}
html.glass body.dark .todo-search,html.glass body.dark .todo-tools>select,html.glass body.dark .todo-clear{background:#2a2a2c;color:#f2f2f2}