/* ==========================================================================
   Pulse for Mac — macOS design layer.
   Loaded last. Remaps every legacy token to macOS semantic colors and
   restyles shell, controls and overlays to native macOS conventions:
   system type, vibrant materials, inset grouped boxes, 0.5px hairlines.
   Component rules are scoped to html.mac so they outrank older layers.
   ========================================================================== */

/* ---------- Tokens: dark (default) ---------- */
html.mac {
  /* System palette */
  --sys-red: #FF453A; --sys-orange: #FF9F0A; --sys-yellow: #FFD60A; --sys-green: #30D158;
  --sys-mint: #63E6E2; --sys-teal: #40C8E0; --sys-blue: #0A84FF; --sys-indigo: #5E5CE6;
  --sys-purple: #BF5AF2; --sys-pink: #FF375F; --sys-graphite: #98989D;

  /* Labels & fills */
  --label: rgba(255, 255, 255, 0.88);
  --label-2: rgba(255, 255, 255, 0.55);
  --label-3: rgba(255, 255, 255, 0.25);
  --separator: rgba(255, 255, 255, 0.1);
  --fill: rgba(255, 255, 255, 0.07);
  --fill-2: rgba(255, 255, 255, 0.12);
  --fill-3: rgba(255, 255, 255, 0.2);

  /* Materials */
  --window-bg: #1e1e20;
  --sidebar-bg: rgba(42, 42, 46, 0.72);
  --sidebar-solid: #29292c;
  --sidebar-glass: rgba(40, 40, 44, 0.52);
  --desk-bg: #131315;
  --panel-glass: rgba(30, 30, 33, 0.78);
  --panel-edge: rgba(255, 255, 255, 0.09);
  --panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.55);
  --glass-edge: rgba(255, 255, 255, 0.13);
  --glass-sheen: rgba(255, 255, 255, 0.06);
  --glass-highlight: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.38), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
  --glass-tint-a: color-mix(in srgb, var(--accent) 16%, transparent);
  --glass-tint-b: color-mix(in srgb, var(--sys-indigo) 16%, transparent);
  --toolbar-bg: rgba(30, 30, 32, 0.8);
  --group-bg: rgba(255, 255, 255, 0.045);
  --group-border: rgba(255, 255, 255, 0.07);
  --control-bg: rgba(255, 255, 255, 0.13);
  --control-border: rgba(255, 255, 255, 0.1);
  --seg-bg: rgba(255, 255, 255, 0.08);
  --seg-thumb: rgba(255, 255, 255, 0.22);
  --popover-bg: rgba(44, 44, 48, 0.86);
  --sheet-bg: #2a2a2d;
  --field-bg: rgba(255, 255, 255, 0.06);
  --sheet-dim: rgba(0, 0, 0, 0.34);
  --shadow-control: 0 0.5px 1px rgba(0, 0, 0, 0.4), inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
  --shadow-float: 0 0 0 0.5px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 10px 32px rgba(0, 0, 0, 0.5);
  --heat-0: rgba(255, 255, 255, 0.07);

  /* Radii, motion */
  --r-control: 6px; --r-field: 7px; --r-row: 6px; --r-group: 10px; --r-pop: 10px; --r-sheet: 12px;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms;

  /* Type */
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", system-ui, sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace;

  /* Legacy token remap — every older rule now resolves to macOS values */
  --font-body: var(--font-text);
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-mono: var(--font-text);

  --tint-rgb: 255, 255, 255;
  --bg: var(--window-bg);
  --bg-deep: #19191b;
  --surface: #262628;
  --surface-2: #2a2a2d;
  --surface-3: #323235;
  --surface-4: #3a3a3d;
  --surface-glass: var(--popover-bg);
  --shell-grad-a: var(--sidebar-solid);
  --shell-grad-b: var(--sidebar-solid);
  --input-bg: var(--field-bg);
  --input-bg-focus: var(--field-bg);
  --topbar-bg: var(--toolbar-bg);
  --nav-bg: var(--toolbar-bg);
  --modal-bg: var(--sheet-bg);
  --overlay-bg: var(--sheet-dim);
  --overlay-bg-soft: rgba(0, 0, 0, 0.12);
  --menu-bg: var(--popover-bg);
  --tooltip-bg: var(--popover-bg);
  --tooltip-text: var(--label);
  --tooltip-border: var(--separator);
  --chart-track: var(--fill-2);
  --chart-grid: var(--separator);
  --border: var(--separator);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-faint: rgba(255, 255, 255, 0.05);
  --text: var(--label);
  --text-soft: rgba(255, 255, 255, 0.8);
  --muted: var(--label-2);
  --dim: var(--label-2);
  --faint: rgba(255, 255, 255, 0.38);
  --indigo: var(--sys-indigo); --indigo-bright: #7d7bff;
  --cyan: var(--sys-teal); --cyan-bright: var(--sys-teal);
  --amber: var(--sys-orange); --amber-bright: var(--sys-orange);
  --rose: var(--sys-red); --violet: var(--sys-purple);
  --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --radius-xl: 12px;
  --shadow-card: none;
  --shadow-hover: none;
  --shadow-pop: var(--shadow-float);
  --sidebar-w: 248px;
  --sidebar-inset: 8px;
  --r-glass: 18px;
  --topbar-h: 52px;
  --ease: var(--ease-spring);
  color-scheme: dark;
}

/* ---------- Tokens: light ---------- */
html.mac[data-theme='light'] {
  --sys-red: #FF3B30; --sys-orange: #FF9500; --sys-yellow: #FFCC00; --sys-green: #34C759;
  --sys-mint: #00C7BE; --sys-teal: #30B0C7; --sys-blue: #007AFF; --sys-indigo: #5856D6;
  --sys-purple: #AF52DE; --sys-pink: #FF2D55; --sys-graphite: #8E8E93;

  --label: rgba(0, 0, 0, 0.85);
  --label-2: rgba(0, 0, 0, 0.5);
  --label-3: rgba(0, 0, 0, 0.26);
  --separator: rgba(0, 0, 0, 0.1);
  --fill: rgba(0, 0, 0, 0.05);
  --fill-2: rgba(0, 0, 0, 0.1);
  --fill-3: rgba(0, 0, 0, 0.16);

  --window-bg: #ffffff;
  --sidebar-bg: rgba(236, 236, 240, 0.78);
  --sidebar-solid: #ececf0;
  --sidebar-glass: rgba(246, 246, 250, 0.58);
  --desk-bg: #e8e8ed;
  --panel-glass: rgba(255, 255, 255, 0.74);
  --panel-edge: rgba(0, 0, 0, 0.07);
  --panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-sheen: rgba(255, 255, 255, 0.55);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --glass-tint-a: color-mix(in srgb, var(--accent) 12%, transparent);
  --glass-tint-b: color-mix(in srgb, var(--sys-indigo) 10%, transparent);
  --toolbar-bg: rgba(255, 255, 255, 0.82);
  --group-bg: rgba(0, 0, 0, 0.028);
  --group-border: rgba(0, 0, 0, 0.06);
  --control-bg: #ffffff;
  --control-border: rgba(0, 0, 0, 0.12);
  --seg-bg: rgba(0, 0, 0, 0.06);
  --seg-thumb: #ffffff;
  --popover-bg: rgba(250, 250, 252, 0.86);
  --sheet-bg: #ffffff;
  --field-bg: #ffffff;
  --sheet-dim: rgba(0, 0, 0, 0.18);
  --shadow-control: 0 0.5px 1.5px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 10px 32px rgba(0, 0, 0, 0.2);
  --heat-0: rgba(0, 0, 0, 0.06);

  --tint-rgb: 0, 0, 0;
  --bg-deep: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f2f2f4;
  --surface-4: #e8e8eb;
  --border-strong: rgba(0, 0, 0, 0.14);
  --border-faint: rgba(0, 0, 0, 0.05);
  --text-soft: rgba(0, 0, 0, 0.78);
  --faint: rgba(0, 0, 0, 0.38);
  --indigo-bright: #4b49c8;
  --cyan-bright: #1e8ea3;
  --amber-bright: #c76f00;
  --overlay-bg-soft: rgba(0, 0, 0, 0.06);
  color-scheme: light;
}

/* ---------- Base ---------- */
html.mac body,
html.mac[data-theme='light'] body {
  background: var(--window-bg);
  color: var(--label);
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.38;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Sentence case and natural tracking everywhere. Pulse used uppercase mono
   labels; macOS uses neither. */
html.mac body *:not(.material-symbols-outlined) {
  text-transform: none !important;
  letter-spacing: normal !important;
}

html.mac ::selection,
html.mac[data-theme='light'] ::selection {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: inherit;
}

html.mac :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}

html.mac ::-webkit-scrollbar { width: 11px; height: 11px; }
html.mac ::-webkit-scrollbar-thumb,
html.mac[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: var(--fill-3);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
html.mac ::-webkit-scrollbar-thumb:hover { background-color: var(--label-3); }

/* SF Symbols stand-in */
html.mac .material-symbols-outlined {
  font-family: 'Material Symbols Rounded', 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 20;
}
html.mac .material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/* Kill decorative glows and orbs */
html.mac .hero-glow,
html.mac .orbs { display: none !important; }

/* Typography helpers */
html.mac .label-mono,
html.mac .eyebrow,
html.mac .card-eyebrow,
html.mac .modal-eyebrow,
html.mac .hero-eyebrow,
html.mac .nav-section {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  color: var(--label-2);
}
html.mac .mono { font-family: var(--font-text); font-variant-numeric: tabular-nums; }
html.mac code, html.mac pre, html.mac .code { font-family: var(--font-code); }

/* ==========================================================================
   Shell
   ========================================================================== */

/* Sidebar: a floating sheet of glass (macOS 26). It is inset from the window edges, rounded,
   blurs and saturates what sits behind it, and catches light along its top edge. The window
   behind carries a faint accent tint so the glass has colour to refract. */
html.mac body,
html.mac[data-theme='light'] body {
  background:
    radial-gradient(520px 460px at 0% 0%, var(--glass-tint-a), transparent 72%),
    radial-gradient(520px 560px at 4% 100%, var(--glass-tint-b), transparent 72%),
    radial-gradient(700px 500px at 100% 100%, var(--glass-tint-b), transparent 75%),
    var(--desk-bg);
  background-attachment: fixed;
}

html.mac .sidebar {
  inset: var(--sidebar-inset) auto var(--sidebar-inset) var(--sidebar-inset);
  width: var(--sidebar-w);
  gap: 0;
  padding: 0 10px 10px;
  border-radius: var(--r-glass);
  border: 0.5px solid var(--glass-edge);
  background:
    linear-gradient(180deg, var(--glass-sheen) 0%, transparent 38%),
    var(--sidebar-glass);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
}

html.mac .brand {
  height: 72px;
  padding: 0 6px;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  flex-shrink: 0;
}
html.mac .brand .brand-logo { width: 40px; height: 40px; }
html.mac .brand .brand-logo svg,
html.mac .brand .brand-logo img { width: 100%; height: 100%; }
html.mac .brand-text { gap: 1px; }
html.mac .brand-name { font: 700 21px/1.1 var(--font-display); letter-spacing: -0.02em !important; color: var(--label); }
html.mac .brand-sub { font: 400 11px/1.2 var(--font-text); color: var(--label-2); margin-top: 0; }
html.mac .brand-mark { box-shadow: none; border: 0; }

html.mac .nav { gap: 2px; }
html.mac .nav-section { padding: 10px 10px 5px; }

html.mac .nav-item,
html.mac[data-theme='light'] .nav-item {
  height: 32px;
  gap: 9px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--label);
  font-size: 13px;
  font-weight: 400;
  background: none;
  box-shadow: none;
  transition: background-color var(--dur-1) linear, color var(--dur-1) linear;
}
html.mac .nav-item::before,
html.mac .nav-item::after { display: none !important; }
html.mac .nav-item .material-symbols-outlined {
  font-size: 18px;
  width: 20px;
  text-align: center;
  color: var(--accent);
}
html.mac .nav-item:hover { background: var(--fill); color: var(--label); }
/* Selection: one frosted pill (.nav-pill, placed by app.js) that glides between rows on a
   spring. Tinted with the accent while the window is key, grey when it isn't. The rows
   themselves stay transparent so only the pill moves. */
html.mac .nav { position: relative; }
html.mac .nav-item { position: relative; z-index: 1; }
html.mac .nav-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 9px;
  background: var(--fill-2);
  box-shadow: inset 0 0.5px 0 var(--glass-highlight);
  pointer-events: none;
  opacity: 0;
}
html.mac .nav-pill.is-ready {
  transition:
    transform 420ms cubic-bezier(0.32, 0.72, 0, 1),
    height 420ms cubic-bezier(0.32, 0.72, 0, 1),
    background-color 200ms linear;
}
html.mac.window-focused .nav-pill { background: color-mix(in srgb, var(--accent) 24%, transparent); }
html.mac .nav-item.active,
html.mac[data-theme='light'] .nav-item.active,
html.mac.window-focused .nav-item.active,
html.mac.window-focused[data-theme='light'] .nav-item.active {
  background: transparent;
  color: var(--label);
  font-weight: 500;
  box-shadow: none;
}
html.mac .nav-item.active:hover { background: transparent; }
html.mac .nav-item .material-symbols-outlined { transition: font-variation-settings 200ms ease-out; }
html.mac.window-focused .nav-item.active .material-symbols-outlined {
  color: var(--accent);
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
html.mac .nav-badge,
html.mac .nav-item.active .nav-badge {
  font: 500 11px var(--font-text);
  padding: 0;
  background: none;
  color: var(--label-2);
}

html.mac .account-mini {
  border: 0;
  padding: 8px;
  margin-top: 6px;
  border-radius: 11px;
  background: var(--fill);
  box-shadow: inset 0 0.5px 0 var(--glass-highlight);
}
html.mac .account-mini:hover { background: var(--fill-2); border-color: transparent; }
html.mac .account-mini-name { font-size: 12px; font-weight: 500; color: var(--label); }
html.mac .account-mini-sub { font-size: 11px; color: var(--label-2); }

html.mac .avatar,
html.mac[data-theme='light'] .avatar {
  background: linear-gradient(135deg, var(--sys-teal), var(--sys-indigo));
  border: 0;
  box-shadow: none;
  color: #fff;
  font-family: var(--font-text);
  font-weight: 600;
}
html.mac .avatar-status { border-color: var(--sidebar-solid); box-shadow: none; }

html.mac .qlooq-badge { opacity: 0.6; }
html.mac .qlooq-badge:hover { opacity: 1; }

/* Unified toolbar */
html.mac .app-main { margin-left: calc(var(--sidebar-w) + var(--sidebar-inset)); }

/* Content panel: like the sidebar, the content sits on the desktop as its own rounded sheet,
   inset by the same 8px. It scrolls inside itself (js/utils.js scrollRoot), so its corners
   and the toolbar stay put while the page moves underneath. */
@media (min-width: 981px) {
  html.mac .app-shell { min-height: 0; }
  html.mac .app-main {
    position: fixed;
    top: var(--sidebar-inset);
    right: var(--sidebar-inset);
    bottom: var(--sidebar-inset);
    left: calc(var(--sidebar-w) + var(--sidebar-inset) * 2);
    margin: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--r-glass);
    border: 0.5px solid var(--glass-edge);
    background: transparent;
    box-shadow: var(--panel-shadow);
    scrollbar-gutter: stable;
  }
  /* The glass itself: a fixed layer behind the scrolling content (so the material stays put
     while the page moves), frosted and lit along its top edge like the sidebar. It lives on a
     pseudo-element because a backdrop-filter on the scroller would trap fixed children. */
  html.mac .app-main::before {
    content: '';
    position: fixed;
    z-index: -1;
    top: var(--sidebar-inset);
    right: var(--sidebar-inset);
    bottom: var(--sidebar-inset);
    left: calc(var(--sidebar-w) + var(--sidebar-inset) * 2);
    border-radius: var(--r-glass);
    background:
      linear-gradient(180deg, var(--glass-sheen) 0%, transparent 28%),
      var(--panel-glass);
    backdrop-filter: blur(40px) saturate(170%);
    -webkit-backdrop-filter: blur(40px) saturate(170%);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    pointer-events: none;
  }
  /* Keep the scroll bar inside the rounded corners. */
  html.mac .app-main::-webkit-scrollbar-track { margin-block: calc(var(--topbar-h) + 4px) 10px; }
  html.mac .topbar {
    top: 0;
    border-radius: var(--r-glass) var(--r-glass) 0 0;
  }
  /* Page switches crossfade the whole panel (toolbar included) as one layer. */
  html.mac.vt-page .app-main { view-transition-name: vt-page; }
  html.mac.vt-page #view,
  html.mac.vt-page .topbar { view-transition-name: none; }
  html.mac.vt-page::view-transition-group(vt-page) { overflow: visible; }
  html.mac.vt-page::view-transition-old(vt-page) { transform: none; }
  /* Sheets drop from under the panel's toolbar. */
  html.mac .modal-backdrop { padding-top: calc(var(--topbar-h) + var(--sidebar-inset)); padding-right: calc(16px + var(--sidebar-inset)); }
  /* Notifications sit just inside the panel's top-right corner. */
  html.mac .toast-wrap { top: calc(var(--topbar-h) + var(--sidebar-inset) + 10px); right: calc(var(--sidebar-inset) + 12px); }
}
html.mac .topbar {
  height: var(--topbar-h);
  padding: 0 14px 0 22px;
  background: var(--toolbar-bg);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-bottom: 0.5px solid var(--separator);
  pointer-events: auto;
}
html.mac .topbar-right {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  gap: 6px;
}
html.mac .toolbar-title { display: flex; flex-direction: column; min-width: 0; transition: opacity 160ms ease-out; }
/* The small toolbar title only appears once the page's large title has scrolled under it. */
html.mac:not(.title-collapsed) .toolbar-title { opacity: 0; pointer-events: none; }
/* Phones: the toolbar always names the page (and today's date on Today). */
@media (max-width: 980px) {
  html.mac:not(.title-collapsed) .toolbar-title { opacity: 1; pointer-events: auto; }
}
html.mac .toolbar-title strong {
  font: 600 15px/1.2 var(--font-display);
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.mac .toolbar-title span { font-size: 11px; color: var(--label-2); white-space: nowrap; }

html.mac .icon-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-control);
  color: var(--label-2);
  background: none;
}
html.mac .icon-btn:hover { background: var(--fill); color: var(--label); border-color: transparent; }
html.mac .icon-btn:active { background: var(--fill-2); }
html.mac .icon-btn .material-symbols-outlined { font-size: 19px; }

html.mac .streak-chip,
html.mac[data-theme='light'] .streak-chip {
  height: 24px;
  padding: 0 9px;
  gap: 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--label);
  font: 500 12px var(--font-text);
}
html.mac .streak-chip:hover { background: var(--fill); }
html.mac .streak-chip .material-symbols-outlined {
  color: var(--sys-orange);
  font-size: 15px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
html.mac .streak-long { display: none; }

html.mac .drive-status,
html.mac[data-theme='light'] .drive-status {
  height: 24px;
  padding: 0 9px;
  gap: 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  box-shadow: none;
  color: var(--label-2);
  font: 400 12px var(--font-text);
}
html.mac .drive-status::before,
html.mac .drive-status::after { display: none !important; }
html.mac .drive-status:hover { background: var(--fill); }
html.mac .drive-status-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent);
}
html.mac .drive-status-saved { font-size: 12px; }
html.mac .drive-status-saved .material-symbols-outlined { font-size: 15px; }

/* Content */
html.mac .view { padding: 32px 32px 48px; max-width: 1480px; }
/* Switching pages: macOS swaps the detail pane with a short crossfade, no slide or rise. */
html.mac .view-enter,
html.mac .route-enter { animation: mac-view-in 180ms ease-out; }
@keyframes mac-view-in { from { opacity: 0; } to { opacity: 1; } }

html.mac .page { gap: 20px; }
html.mac .page-title,
html.mac .hero-title {
  font: 700 26px/1.15 var(--font-display);
  letter-spacing: -0.02em !important;
  color: var(--label);
}
/* The toolbar already names the page; drop the small label above the large title. */
html.mac .page-heading > .eyebrow { display: none; }

/* Accent swatches: System Settings circles */
html.mac .accent-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
  position: relative;
}
html.mac .accent-swatch.active { box-shadow: 0 0 0 2px var(--window-bg), 0 0 0 3.5px var(--label-3); }
html.mac .accent-swatch.active::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #fff;
}
html.mac .accent-swatch .material-symbols-outlined { display: none; }
html.mac .accent-grid { display: flex; flex-wrap: wrap; gap: 9px; }

html.mac .page-sub,
html.mac .hero-sub { color: var(--label-2); font-size: 13px; line-height: 1.45; }
html.mac .hero-sub strong { color: var(--label); }

/* ==========================================================================
   Surfaces: cards become inset grouped boxes
   ========================================================================== */
html.mac .card,
html.mac .hero,
html.mac .side-card,
html.mac .insight-card,
html.mac .note-card,
html.mac .risk-card,
html.mac .goals-card,
html.mac .health-card,
html.mac .time-card,
html.mac .open-loops-card,
html.mac .stat-card,
html.mac .hero-stat,
html.mac .week-strip,
html.mac .overview-tabs {
  background: var(--group-bg) !important;
  border: 0.5px solid var(--group-border) !important;
  border-radius: var(--r-group) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.mac .card::before, html.mac .card::after,
html.mac .hero::before, html.mac .hero::after,
html.mac .hero-stat::before, html.mac .hero-stat::after,
html.mac .stat-card::before, html.mac .stat-card::after { display: none !important; }
html.mac .card:hover,
html.mac .hero-stat:hover,
html.mac .stat-card:hover { transform: none !important; box-shadow: none !important; }

/* The greeting is a plain header, not a box */
html.mac .hero {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: visible;
}
html.mac .hero-inner { padding: 0 !important; }
html.mac .hero-stat { background: var(--group-bg) !important; }
html.mac .hero-stat-value { font-family: var(--font-rounded); font-weight: 600; }
html.mac .hero-stat-foot.up { color: var(--sys-green); }

html.mac .card-title { font: 600 13px/1.35 var(--font-text); color: var(--label); gap: 6px; }
html.mac .card-title .material-symbols-outlined { font-size: 16px; color: var(--accent); }
html.mac .card-sub { font-size: 11px; color: var(--label-2); }
html.mac .card-pad { padding: 14px 16px; }
html.mac .card-head { margin-bottom: 12px; }

html.mac .stack-title { font: 600 15px/1.3 var(--font-display); color: var(--label); }
html.mac .stat-value { font-family: var(--font-rounded); font-weight: 600; }

/* ==========================================================================
   Controls
   ========================================================================== */
html.mac .btn {
  height: 24px;
  padding: 0 12px;
  gap: 5px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--label);
  font: 400 13px var(--font-text);
  transition: filter var(--dur-1);
}
html.mac .btn .material-symbols-outlined { font-size: 15px; }
html.mac .btn:hover:not(:disabled) { background: var(--control-bg); border-color: transparent; }
html.mac .btn:active { transform: none; filter: brightness(0.94); }
html.mac .btn:disabled { opacity: 0.45; }
html.mac .btn-sm { height: 22px; padding: 0 9px; font-size: 12px; }
html.mac .btn-lg { height: 32px; padding: 0 18px; font-weight: 500; border-radius: 8px; }

html.mac .btn-primary,
html.mac .btn-primary:hover:not(:disabled),
html.mac .btn-indigo,
html.mac .btn-indigo:hover:not(:disabled),
html.mac[data-theme='light'] .btn-primary,
html.mac[data-theme='light'] .btn-indigo {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.2), inset 0 0.5px 0 rgba(255, 255, 255, 0.25);
}
html.mac .btn-primary:active { filter: brightness(0.88); }

html.mac .btn-ghost,
html.mac .btn-ghost:hover:not(:disabled) {
  background: var(--control-bg);
  color: var(--label);
}
html.mac .btn-quiet,
html.mac .btn-icon {
  background: none;
  box-shadow: none;
  color: var(--label-2);
}
html.mac .btn-quiet:hover:not(:disabled),
html.mac .btn-icon:hover { background: var(--fill); color: var(--label); }

html.mac .btn-danger,
html.mac .btn-danger:hover:not(:disabled),
html.mac[data-theme='light'] .btn-danger {
  background: var(--control-bg);
  color: var(--sys-red);
}

html.mac .chip,
html.mac .tag-chip {
  height: 18px;
  padding: 0 7px;
  gap: 3px;
  border: 0 !important;
  border-radius: 9px;
  background: var(--fill);
  color: var(--label-2);
  font: 500 11px var(--font-text);
  box-shadow: none;
}
html.mac .chip .material-symbols-outlined { font-size: 12px; }
html.mac .chip-emerald,
html.mac[data-theme='light'] .chip-emerald { background: color-mix(in srgb, var(--sys-green) 16%, transparent); color: color-mix(in srgb, var(--sys-green) 78%, var(--label)); }
html.mac .chip-cyan { background: color-mix(in srgb, var(--sys-teal) 16%, transparent); color: color-mix(in srgb, var(--sys-teal) 78%, var(--label)); }
html.mac .chip-indigo { background: color-mix(in srgb, var(--sys-indigo) 16%, transparent); color: color-mix(in srgb, var(--sys-indigo) 78%, var(--label)); }
html.mac .chip-amber { background: color-mix(in srgb, var(--sys-orange) 16%, transparent); color: var(--sys-orange); }
html.mac .chip-rose,
html.mac[data-theme='light'] .chip-rose { background: color-mix(in srgb, var(--sys-red) 14%, transparent); color: var(--sys-red); }
html.mac .chip-violet,
html.mac[data-theme='light'] .chip-violet { background: color-mix(in srgb, var(--sys-purple) 16%, transparent); color: color-mix(in srgb, var(--sys-purple) 78%, var(--label)); }

/* Segmented control */
html.mac .seg,
html.mac .overview-tabs,
html.mac .filter-chips {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border: 0 !important;
  border-radius: var(--r-control) !important;
  background: var(--seg-bg) !important;
}
html.mac .seg-btn,
html.mac .overview-tab,
html.mac .filter-chip {
  height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  box-shadow: none;
  color: var(--label);
  font: 400 12px var(--font-text);
}
html.mac .seg-btn:hover,
html.mac .overview-tab:hover,
html.mac .filter-chip:hover { background: none; color: var(--label); }
html.mac .seg-btn.active,
html.mac .overview-tab.active,
html.mac .filter-chip.active,
html.mac[data-theme='light'] .seg-btn.active {
  background: var(--seg-thumb);
  box-shadow: var(--shadow-control);
  color: var(--label);
}
/* Today's segmented control: the white thumb slides to the chosen segment on a spring. */
html.mac .overview-tabs { position: relative; isolation: isolate; }
html.mac .overview-tab.active,
html.mac .overview-tabs.tab-indicator-ready .overview-tab.active { background: transparent; box-shadow: none; }
html.mac .overview-tab { position: relative; z-index: 1; }
html.mac .overview-tab-indicator {
  display: block;
  z-index: 0;
  border: 0;
  border-radius: 5px;
  background: var(--seg-thumb);
  box-shadow: var(--shadow-control);
}
html.mac .overview-tabs.tab-indicator-ready .overview-tab-indicator {
  transition:
    transform 340ms var(--ease-spring),
    width 340ms var(--ease-spring),
    height 340ms var(--ease-spring);
}
html.mac .overview-tab-count { font-size: 11px; color: var(--label-2); background: none; padding: 0 0 0 2px; }

/* Text fields */
html.mac .input,
html.mac .select,
html.mac .textarea,
html.mac .note-area {
  min-height: 24px;
  border: 0;
  border-radius: var(--r-field);
  background-color: var(--field-bg);
  box-shadow: inset 0 0 0 0.5px var(--control-border), 0 0.5px 0 rgba(0, 0, 0, 0.03);
  color: var(--label);
  font: 400 13px var(--font-text);
  transition: box-shadow var(--dur-1);
}
html.mac .input,
html.mac .select { height: 28px; padding: 0 9px; }
html.mac .select { padding-right: 26px; }
html.mac .textarea,
html.mac .note-area { padding: 7px 9px; line-height: 1.45; }
html.mac .input:focus,
html.mac .select:focus,
html.mac .textarea:focus,
html.mac .note-area:focus {
  outline: none;
  border-color: transparent;
  background-color: var(--field-bg);
  box-shadow: inset 0 0 0 0.5px var(--accent), 0 0 0 3.5px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Search-style fields: room for the magnifier on the left. */
html.mac .input-group { position: relative; }
html.mac .input-group > .material-symbols-outlined {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--label-2);
  pointer-events: none;
  z-index: 1;
}
html.mac .input-group .input { padding-left: 30px; }
html.mac .input::placeholder,
html.mac .textarea::placeholder { color: var(--label-3); }
html.mac .field > label,
html.mac .field-label { font: 400 12px var(--font-text); color: var(--label); }
html.mac .help { font-size: 11px; color: var(--label-2); }
html.mac .field-error { font-size: 11px; color: var(--sys-red); }

/* Switch */
html.mac .toggle {
  width: 32px;
  height: 18px;
  border: 0;
  border-radius: 9px;
  background: var(--fill-3);
  box-shadow: none;
  transition: background var(--dur-2);
}
html.mac .toggle::after {
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur-2) var(--ease-spring);
}
html.mac .toggle.on,
html.mac .toggle[aria-checked='true'],
html.mac .toggle:checked,
html.mac .toggle.active { background: var(--accent); }
html.mac .toggle.on::after,
html.mac .toggle[aria-checked='true']::after,
html.mac .toggle:checked::after,
html.mac .toggle.active::after { transform: translateX(14px); background: #fff; }
html.mac .toggle-row { border-color: var(--separator); }

/* Progress */
html.mac .progress { height: 5px; border-radius: 3px; background: var(--fill-2); }
html.mac .progress > span { border-radius: 3px; background: var(--accent); box-shadow: none; }

/* ==========================================================================
   Overview specifics
   ========================================================================== */
html.mac .week-strip { padding: 8px !important; }
html.mac .week-day {
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
}
html.mac .week-day:hover { background: var(--fill); }
html.mac .week-day .wd-date { font: 600 15px var(--font-rounded); color: var(--label); }
html.mac .week-day .wd-label { font: 500 10px var(--font-text); color: var(--label-2); }
html.mac .week-day.today,
html.mac .week-day.selected {
  background: var(--accent);
  border: 0;
  box-shadow: none;
}
html.mac .week-day.today .wd-date,
html.mac .week-day.today .wd-label,
html.mac .week-day.selected .wd-date,
html.mac .week-day.selected .wd-label,
html.mac[data-theme='light'] .week-day.today .wd-date { color: var(--accent-contrast); }
html.mac .week-strip-label { font-size: 11px; color: var(--label-2); }

/* Habit rows: inset grouped list rows */
html.mac .habit-list {
  gap: 0 !important;
  background: var(--group-bg);
  border: 0.5px solid var(--group-border);
  border-radius: var(--r-group);
  overflow: hidden;
}
html.mac .habit-row {
  position: relative;
  min-height: 48px;
  margin: 0;
  padding: 8px 14px;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}
html.mac .habit-row + .habit-row::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 48px;
  border-top: 0.5px solid var(--separator);
}
html.mac .habit-row:hover { background: color-mix(in srgb, var(--fill) 60%, transparent) !important; }
html.mac .habit-name .name,
html.mac .habit-name { font-size: 13px; font-weight: 400; color: var(--label); }
html.mac .habit-desc { font-size: 11px; color: var(--label-2); }
html.mac .habit-row.is-done .habit-name .name { color: var(--label-2); text-decoration: none; }

/* Small push buttons inside rows */
html.mac .log-btn,
html.mac .preset-btn,
html.mac .sw-main,
html.mac .sw-stop {
  height: 22px;
  padding: 0 8px;
  gap: 4px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--label);
  font: 400 12px var(--font-text);
}
html.mac .log-btn:hover,
html.mac .preset-btn:hover,
html.mac .sw-main:hover,
html.mac .sw-stop:hover {
  border-color: transparent;
  background: var(--control-bg);
  color: var(--label);
  filter: brightness(1.06);
}
html.mac .log-btn .material-symbols-outlined,
html.mac .sw-main .material-symbols-outlined,
html.mac .sw-stop .material-symbols-outlined { font-size: 14px; color: var(--label-2); }
html.mac .sw-main:active,
html.mac .sw-stop:active { transform: none; filter: brightness(0.94); }
html.mac .sw[data-state='running'] .sw-main {
  background: var(--accent);
  color: var(--accent-contrast);
  border: 0;
}
html.mac .sw[data-state='running'] .sw-main .material-symbols-outlined { color: var(--accent-contrast); }
html.mac .sw[data-state='paused'] .sw-main { border: 0; color: var(--sys-orange); }

html.mac .habit-time,
html.mac .habit-time .material-symbols-outlined { color: var(--label-2); font-size: 11px; }
html.mac .habit-time .material-symbols-outlined { font-size: 13px; }
html.mac .stack-count,
html.mac .stack-time {
  padding: 0;
  background: none;
  color: var(--label-2);
  font: 400 11px var(--font-text);
}
html.mac .stack-count.complete { background: none; color: var(--sys-green); }
html.mac .stack-dot { box-shadow: none !important; }

html.mac .streak-badge {
  height: 18px;
  padding: 0 6px 0 4px;
  gap: 2px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--sys-orange) 15%, transparent);
  color: var(--sys-orange);
  font: 500 11px var(--font-text);
}
html.mac .streak-badge .material-symbols-outlined {
  font-size: 12px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
html.mac .pip { border-radius: 2px; }
html.mac .pip.on { background: var(--habit-color, var(--accent)); box-shadow: none; }
html.mac .hero-stat-top { font: 500 11px var(--font-text); color: var(--label-2); }
html.mac .hero-stat-foot { font-size: 11px; }
html.mac .week-strip-label strong { font: 600 13px var(--font-text); color: var(--label); }

/* Focus timer: indigo for focus (matching the Focus ring on Today), green for breaks, no glow */
html.mac .timer-card,
html.mac .fx-timer { background: var(--group-bg) !important; }
html.mac .timer-track { stroke: var(--fill-2); stroke-width: 8; }
html.mac .timer-progress {
  stroke: var(--sys-indigo);
  stroke-width: 8;
  filter: none;
}
html.mac .timer-card.is-break .timer-progress { stroke: var(--sys-green); filter: none; }
html.mac .timer-mode { font: 500 12px var(--font-text); color: var(--sys-indigo); }
html.mac .timer-card.is-break .timer-mode { color: var(--sys-green); }
html.mac .timer-time {
  font-family: var(--font-rounded);
  font-weight: 300;
  letter-spacing: -0.02em !important;
}
html.mac .timer-sub,
html.mac .timer-session-label span { font: 400 11px var(--font-text); color: var(--label-2); }
html.mac .timer-main-btn {
  width: 60px;
  height: 60px;
  background: color-mix(in srgb, var(--sys-indigo) 22%, transparent);
  color: var(--sys-indigo);
  box-shadow: none;
}
html.mac .timer-card.is-break .timer-main-btn {
  background: color-mix(in srgb, var(--sys-green) 22%, transparent);
  color: var(--sys-green);
}
html.mac .timer-main-btn:hover { transform: none; background: color-mix(in srgb, var(--sys-indigo) 30%, transparent); }
html.mac .timer-main-btn:active { transform: scale(0.94); }
html.mac .timer-main-btn .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
html.mac .timer-side-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: var(--fill-2);
  color: var(--label);
}
html.mac .timer-side-btn:hover { background: var(--fill-3); border-color: transparent; color: var(--label); }

/* No neon glows on chart marks */
html.mac :is(svg circle, svg path, svg rect, svg line, svg polyline) { filter: none !important; }

/* Activity rings card on Today */
html.mac .hero-stats { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; max-width: 760px; }
/* Every Today summary card opens with the same titled header (icon, title, small meta). */
html.mac .mini-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
html.mac .mini-title { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--font-text); color: var(--label); }
html.mac .mini-title .material-symbols-outlined { font-size: 16px; color: var(--accent); }
html.mac .momentum-card .mini-title .material-symbols-outlined { color: var(--sys-orange); }
html.mac .mini-meta { font-size: 11px; color: var(--label-2); font-variant-numeric: tabular-nums; }
html.mac .rings-card {
  display: flex;
  flex-direction: column !important;
  align-items: stretch;
  gap: 10px;
  padding: 14px 18px !important;
}
html.mac .rings-body { display: flex; align-items: center; gap: 20px; min-width: 0; }
html.mac .momentum-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px !important; }
html.mac .momentum-card .hero-stat-value { margin-top: 4px; }
html.mac .act-rings { flex-shrink: 0; max-width: 100%; height: auto; }
html.mac .act-ring-track { opacity: 0.18; }
html.mac .act-ring-value { transition: stroke-dashoffset 900ms var(--ease-spring); }
html.mac .rings-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html.mac .rings-legend-row { display: flex; flex-direction: column; line-height: 1.2; }
html.mac .rings-legend-value { font: 600 19px/1.2 var(--font-rounded); }
html.mac .rings-legend-value small { font: 500 12px var(--font-text); color: var(--label-2); }
html.mac .rings-legend .hero-stat-foot { font-size: 11px; margin-top: 1px; }
/* Phones: rings and Momentum stay side by side, scaled down. */
@media (max-width: 720px) {
  html.mac .hero-stats { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px; }
  html.mac .rings-card { gap: 8px; padding: 12px !important; }
  html.mac .rings-body { gap: 12px; }
  html.mac .momentum-card { padding: 12px !important; gap: 4px; }
  html.mac .momentum-card .mini-meta { display: none; }
  html.mac .act-rings { width: 72px; height: 72px; }
  html.mac .rings-legend { gap: 6px; }
  html.mac .rings-legend-value { font-size: 16px; }
  html.mac .rings-legend-value small { font-size: 11px; }
  html.mac .rings-legend .hero-stat-foot { display: none; }
  html.mac .hero-stats > .hero-stat:not(.rings-card) { padding: 12px !important; min-width: 0; }
  html.mac .hero-stats > .hero-stat:not(.rings-card) .hero-stat-foot { font-size: 11px; line-height: 1.3; }
}

/* ==========================================================================
   Habits table (NSTableView: zebra rows, full-width accent selection)
   ========================================================================== */
html.mac .habit-table-wrap {
  overflow-x: auto;
  border: 0.5px solid var(--group-border);
  border-radius: var(--r-group);
  background: var(--window-bg);
}
html.mac .habit-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
html.mac .habit-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 28px;
  padding: 0 10px;
  border-bottom: 0.5px solid var(--separator);
  background: var(--window-bg);
  color: var(--label-2);
  font: 600 11px var(--font-text);
  text-align: left;
  white-space: nowrap;
}
html.mac .habit-table th + th { box-shadow: inset 0.5px 0 0 var(--separator); }
html.mac .habit-table td {
  height: 44px;
  padding: 0 10px;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--label);
}
html.mac .habit-table tbody tr { outline: none; cursor: default; }
html.mac .habit-table tbody tr td:first-child { border-radius: 6px 0 0 6px; }
html.mac .habit-table tbody tr td:last-child { border-radius: 0 6px 6px 0; }
/* Rows sit on the panel with hairline separators; only a focused selection is filled. */
html.mac .habit-table tbody td { background: none; border-bottom: 0.5px solid var(--separator); }
html.mac .habit-table tbody tr:last-child td { border-bottom: 0; }
html.mac .habit-table tbody tr:hover td { background: color-mix(in srgb, var(--fill) 55%, transparent); }
html.mac.window-focused .habit-table tbody tr[aria-selected='true']:focus-within td,
html.mac.window-focused .habit-table tbody tr[aria-selected='true']:focus td {
  background: var(--accent);
  color: var(--accent-contrast);
}
html.mac.window-focused .habit-table tbody tr[aria-selected='true']:is(:focus, :focus-within) :is(.habit-cell-sub, .t-dim, .cat-label, .col-time, .col-streak, .col-rate, .history-dots i:not(.on)) {
  color: var(--accent-contrast);
  opacity: 0.85;
}
html.mac.window-focused .habit-table tbody tr[aria-selected='true']:is(:focus, :focus-within) .rate-bar span,
html.mac.window-focused .habit-table tbody tr[aria-selected='true']:is(:focus, :focus-within) .history-dots i.on { background: var(--accent-contrast); }
html.mac.window-focused .habit-table tbody tr[aria-selected='true']:is(:focus, :focus-within) .habit-check:not(.checked) { border-color: var(--accent-contrast) !important; }
html.mac .habit-table tr.is-archived td { color: var(--label-2); }
html.mac .habit-table tr.is-archived .habit-tile { filter: grayscale(1); opacity: 0.6; }

html.mac .habit-table .col-check { width: 36px; padding-right: 0; }
html.mac .habit-table .col-more { width: 40px; text-align: right; }
html.mac .habit-table .col-name { min-width: 240px; }
html.mac .habit-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
html.mac .habit-tile {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
html.mac .habit-tile .material-symbols-outlined { font-size: 16px; }
html.mac .habit-cell-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html.mac .habit-cell-name { overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
html.mac .habit-cell-sub { font-size: 11px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; }
html.mac .cat-label { display: inline-flex; align-items: center; gap: 6px; color: var(--label-2); }
html.mac .cat-label i { width: 8px; height: 8px; border-radius: 50%; }
html.mac .col-time, html.mac .col-streak { color: var(--label-2); }
html.mac .rate-bar {
  display: inline-block;
  width: 56px;
  height: 5px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 3px;
  background: var(--fill-2);
  overflow: hidden;
}
html.mac .rate-bar span { display: block; height: 100%; border-radius: 3px; background: var(--habit-color, var(--accent)); }
html.mac .history-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
html.mac .history-dots i { width: 7px; height: 7px; border-radius: 2px; background: var(--fill-2); }
html.mac .history-dots i.on { background: var(--habit-color, var(--accent)); }
html.mac .history-dots i.part { background: color-mix(in srgb, var(--habit-color, var(--accent)) 40%, transparent); }
html.mac .history-dots i.rest { background: transparent; box-shadow: inset 0 0 0 1px var(--fill-2); }
html.mac .col-today { display: table-cell; }
html.mac .col-today > * { vertical-align: middle; }
html.mac .col-today .sw { margin-right: 4px; }
html.mac .t-dim { color: var(--label-2); }
html.mac .table-hint { font-size: 11px; color: var(--label-2); margin-top: -8px; }
html.mac .habit-card-kebab {
  width: 24px;
  height: 22px;
  border-radius: var(--r-control);
  color: var(--label-2);
}

/* Phones: keep the columns that matter one-handed (done, name, streak, today, actions). */
@media (max-width: 720px) {
  html.mac .habit-table { min-width: 0; }
  html.mac .habit-table :is(.col-cat, .col-time, .col-rate, .col-history, .col-streak) { display: none; }
  html.mac .habit-table .col-today .sw { display: none; }
  html.mac .habit-table td { padding: 0 6px; }
  html.mac .habit-table .col-name { min-width: 0; }
  html.mac .habit-cell-text { max-width: 130px; }
  html.mac .habit-table .col-check { width: 28px; padding: 0 0 0 8px; }
  html.mac .habit-table .col-more { width: 30px; padding: 0 4px 0 0; }
  html.mac .habit-cell-name { max-width: 100%; }
  html.mac .habit-cell-sub { white-space: nowrap; }
  html.mac .habit-table .col-name { width: 100%; }
  html.mac .habit-table td { height: 52px; }
  html.mac .table-hint { display: none; }
}

/* Stepper (count habits) */
html.mac .stepper {
  display: inline-flex;
  align-items: center;
  height: 22px;
  border-radius: var(--r-control);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--label);
  overflow: hidden;
}
html.mac .stepper button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--label);
}
html.mac .stepper button:active { background: var(--fill-2); }
html.mac .stepper button:disabled { opacity: 0.35; }
html.mac .stepper button .material-symbols-outlined { font-size: 14px; }
html.mac .stepper-value {
  min-width: 40px;
  padding: 0 4px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  border-inline: 0.5px solid var(--separator);
}

/* Menu shortcut hints */
html.mac .menu-item .menu-kbd {
  margin-left: auto;
  padding-left: 20px;
  font: 400 12px var(--font-text);
  color: var(--label-2);
}
html.mac .menu-item:hover .menu-kbd,
html.mac .menu-item:focus-visible .menu-kbd { color: var(--accent-contrast); opacity: 0.85; }
html.mac .menu-item:focus-visible { outline: none; background: var(--accent); color: var(--accent-contrast); }
html.mac .menu-item:focus-visible .material-symbols-outlined { color: var(--accent-contrast); }

/* Check circle (Reminders) */
html.mac .habit-check,
html.mac .task-check {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  border-radius: 50% !important;
  border: 1.5px solid var(--label-3) !important;
  background: none !important;
  box-shadow: none !important;
  transition: background var(--dur-1), border-color var(--dur-1);
}
html.mac .habit-check .material-symbols-outlined,
html.mac .task-check .material-symbols-outlined { font-size: 14px; font-weight: 700; }
html.mac .habit-check:hover,
html.mac .task-check:hover { border-color: var(--label-2) !important; }
html.mac .habit-check.checked,
html.mac .task-check.checked,
html.mac .task-check.done {
  background: var(--habit-color, var(--accent)) !important;
  border-color: var(--habit-color, var(--accent)) !important;
  color: #fff !important;
}
html.mac .habit-check.checked .material-symbols-outlined { color: #fff !important; }
html.mac .habit-check.partial {
  border-color: var(--habit-color, var(--accent)) !important;
  background: color-mix(in srgb, var(--habit-color, var(--accent)) 22%, transparent) !important;
}
html.mac .habit-check.check-pop { animation: mac-pop 280ms var(--ease-spring); }
html.mac .habit-check.check-pop::after { display: none !important; }
@keyframes mac-pop { from { transform: scale(0.84); } to { transform: scale(1); } }

html.mac .habit-icon,
html.mac[data-theme='light'] .habit-icon { filter: none; }

/* Rings */
html.mac .ring-value { font-family: var(--font-rounded); font-weight: 600; }

/* Heatmap */
html.mac .heat-cell { border-radius: 3px; box-shadow: none !important; }
html.mac .heat-cell.l0,
html.mac .heat-cell:not([class*='l']) { background: var(--heat-0); }

/* Empty states */
html.mac .empty-icon {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--label-3);
}
html.mac .empty h3 { font: 600 15px var(--font-display); color: var(--label); }
html.mac .empty p { color: var(--label-2); }

/* ==========================================================================
   Overlays
   ========================================================================== */

/* Modal → sheet: slides down from under the toolbar */
html.mac .modal-backdrop {
  align-items: flex-start;
  padding: var(--topbar-h) 16px 16px calc(var(--sidebar-w) + var(--sidebar-inset) + 16px);
  background: var(--sheet-dim);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.mac .modal,
html.mac[data-theme='light'] .modal {
  border: 0;
  border-radius: 0 0 var(--r-sheet) var(--r-sheet);
  background: var(--sheet-bg);
  box-shadow: var(--shadow-float);
  transform: translateY(-104%);
  transition: transform var(--dur-3) var(--ease-spring);
  max-height: calc(100dvh - var(--topbar-h) - 24px);
}
html.mac .modal-backdrop.open .modal { transform: none; }
html.mac .modal-backdrop:not(.open) .modal { transform: translateY(-104%); }
html.mac .modal-head { padding: 18px 20px 0; }
html.mac .modal-title { font: 700 17px/1.25 var(--font-display); color: var(--label); }
html.mac .modal-body { padding: 14px 20px; }
html.mac .modal-foot {
  padding: 12px 20px 16px;
  border-top: 0;
  background: none;
  gap: 10px;
}
html.mac .modal-foot .foot-note { font-size: 11px; color: var(--label-2); }
html.mac .confirm-icon,
html.mac .confirm-icon.danger {
  border: 0;
  border-radius: 10px;
}
html.mac .confirm-body p { color: var(--label-2); font-size: 12px; }

/* Menus */
html.mac .menu-pop,
html.mac[data-theme='light'] .menu-pop {
  min-width: 220px;
  padding: 5px;
  border: 0;
  border-radius: var(--r-pop);
  background: var(--popover-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--shadow-float);
  transition: opacity var(--dur-1) ease-out, transform var(--dur-1) var(--ease-out);
}
html.mac .menu-item {
  height: 22px;
  padding: 0 9px;
  gap: 8px;
  border-radius: 5px;
  color: var(--label);
  font-size: 13px;
}
html.mac .menu-item .material-symbols-outlined { font-size: 15px; color: var(--label-2); }
html.mac .menu-item:hover,
html.mac[data-theme='light'] .menu-item:hover { background: var(--accent); color: var(--accent-contrast); }
html.mac .menu-item:hover .material-symbols-outlined { color: var(--accent-contrast); }
html.mac .menu-item.is-danger,
html.mac .menu-item.is-danger .material-symbols-outlined,
html.mac[data-theme='light'] .menu-item.is-danger { color: var(--sys-red); }
html.mac .menu-item.is-danger:hover { background: var(--sys-red); color: #fff; }
html.mac .menu-item.is-danger:hover .material-symbols-outlined { color: #fff; }
html.mac .menu-sep { height: 0; border-top: 0.5px solid var(--separator); background: none; margin: 5px 9px; }

/* Toasts → notification banners, top-right */
html.mac .toast-wrap {
  top: calc(var(--topbar-h) + 10px);
  bottom: auto;
  left: auto;
  right: 12px;
  width: 360px;
  max-width: calc(100vw - 24px);
  justify-items: stretch;
  padding: 0;
}
html.mac .toast {
  max-width: none;
  padding: 11px 12px;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  background: var(--popover-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--shadow-float);
}
html.mac .toast-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--tone);
  color: #fff;
}
html.mac .toast-icon .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
html.mac .toast-text { color: var(--label); font-size: 13px; }
html.mac .toast-action {
  height: 24px;
  padding: 0 12px;
  border-radius: var(--r-control);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--label);
  font-weight: 400;
  font-size: 12px;
}
html.mac .toast-action:hover { background: var(--control-bg); filter: brightness(1.05); }
html.mac .toast-timer { display: none; }
html.mac .toast-success { --tone: var(--sys-green); }
html.mac .toast-error { --tone: var(--sys-red); }
html.mac .toast-warning { --tone: var(--sys-orange); }
html.mac .toast-info { --tone: var(--sys-blue); }

/* Tooltips: small, plain, delayed */
html.mac .tooltip-bubble,
html.mac[data-theme='light'] .tooltip-bubble {
  padding: 3px 7px;
  border: 0.5px solid var(--separator);
  border-radius: 5px;
  background: var(--popover-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  color: var(--label);
  font: 400 11px var(--font-text);
}

/* ==========================================================================
   Sign-in and boot
   ========================================================================== */
html.mac .login,
html.mac[data-theme='light'] .login { background: var(--window-bg); }
html.mac .login-card {
  border: 0.5px solid var(--group-border);
  border-radius: 14px;
  background: var(--group-bg);
  box-shadow: none;
  backdrop-filter: none;
}
html.mac .login-card h1 { font: 700 26px var(--font-display); letter-spacing: -0.02em !important; }
html.mac .tagline { color: var(--label-2); font-size: 13px; }
html.mac .btn-google {
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--label);
  font: 500 13px var(--font-text);
}
html.mac .link-btn { color: var(--accent); font-size: 13px; }
html.mac .login-points li { color: var(--label-2); font-size: 12px; }
html.mac .login-points .material-symbols-outlined { color: var(--accent); }
html.mac .boot { background: var(--window-bg); }

/* ==========================================================================
   Narrow widths: iOS-style tab bar
   ========================================================================== */
@media (max-width: 980px) {
  html.mac .app-main { margin-left: 0; }
  html.mac .modal-backdrop { padding: var(--topbar-h) 8px 8px; }
  html.mac .topbar { padding: env(safe-area-inset-top, 0px) 10px 0 14px; height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 980px) {
  html.mac .mobile-nav {
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--toolbar-bg);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-top: 0.5px solid var(--separator);
  }
  html.mac .mobile-nav-item {
    gap: 2px;
    padding: 4px 2px;
    background: none;
    color: var(--label-2);
    font: 500 10px var(--font-text);
  }
  html.mac .mobile-nav-item .material-symbols-outlined { font-size: 23px; }
  html.mac .mobile-nav-item.active { color: var(--accent); background: none; }
  html.mac .mobile-nav-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
  }
  html.mac .toast-wrap { right: 8px; left: 8px; width: auto; }
  html.mac .view { padding: 16px 14px 90px; }
}

/* ==========================================================================
   Tablets and phones (≤ 980px): the sidebar becomes a floating glass tab bar
   ========================================================================== */
@media (max-width: 980px) {
  /* Tab bar: a floating glass capsule. Seven destinations don't fit with labels, so each
     tab is an icon, and the current one opens into a tinted pill that names it. The pill
     grows and shrinks on a spring as you switch. */
  html.mac .mobile-nav {
    left: 50%;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(calc(100% - 24px), 440px);
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 6px;
    border-radius: 30px;
    border: 0.5px solid var(--glass-edge);
    /* Denser than the sidebar glass: list text scrolls right underneath it. */
    background:
      linear-gradient(180deg, var(--glass-sheen) 0%, transparent 55%),
      color-mix(in srgb, var(--window-bg) 92%, transparent);
    backdrop-filter: blur(32px) saturate(190%);
    -webkit-backdrop-filter: blur(32px) saturate(190%);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  }
  html.mac .mobile-nav-item {
    flex: 1 1 0;
    min-width: 40px;
    height: 48px;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 24px;
    background: transparent;
    color: var(--label-2);
    font: 600 13px/1 var(--font-text);
    transition:
      flex-grow 360ms var(--ease-spring),
      background-color 200ms ease-out,
      color 200ms ease-out;
  }
  html.mac .mobile-nav-item::before { display: none !important; }
  html.mac .mobile-nav-item .material-symbols-outlined {
    font-size: 24px;
    line-height: 1;
    transition: transform 160ms var(--ease-spring), font-variation-settings 200ms ease-out;
  }
  html.mac .mobile-nav-item:active .material-symbols-outlined { transform: scale(0.88); }
  html.mac .mobile-nav-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 360ms var(--ease-spring), opacity 160ms ease-out, margin 360ms var(--ease-spring);
  }
  html.mac .mobile-nav-item.active {
    flex-grow: 2.6;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent-bright);
  }
  html.mac .mobile-nav-item.active .material-symbols-outlined {
    font-size: 22px;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  }
  html.mac .mobile-nav-item.active .mobile-nav-label {
    max-width: 80px;
    margin-left: 6px;
    opacity: 1;
    transition-delay: 0s, 80ms, 0s;
  }
  html.mac .mobile-nav-item:focus-visible { outline-offset: -2px; border-radius: 24px; }

  html.mac .view { padding: 22px max(16px, env(safe-area-inset-left)) calc(104px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)); }

  /* Toolbar: app icon, title, then compact status items. */
  html.mac .topbar { padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); gap: 10px; }
  html.mac .topbar-left { gap: 10px; min-width: 0; }
  html.mac .mobile-brand { display: flex; margin: 0; }
  html.mac .mobile-brand .brand-logo { width: 30px; height: 30px; }
  html.mac .mobile-brand .brand-name { display: none; }
  html.mac .toolbar-title strong { font-size: 17px; }
  html.mac .topbar-right { gap: 2px; flex-shrink: 0; }
  html.mac .drive-status-label { display: none; }
  html.mac .drive-status { padding: 0 8px; }

  /* Notifications drop in at the top, full width. */
  html.mac .toast-wrap {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    bottom: auto;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    width: auto;
  }
}

/* ==========================================================================
   Phones (≤ 720px): iOS-proportioned type, inset grouped list rows, bottom sheets
   ========================================================================== */
@media (max-width: 720px) {
  /* Headings */
  html.mac .page-head { gap: 12px; align-items: flex-start; }
  html.mac .page-title,
  html.mac .hero-title { font-size: 28px; line-height: 1.15; }
  html.mac .page-sub,
  html.mac .hero-sub { font-size: 13px; }
  html.mac .page-actions { width: 100%; gap: 8px; }
  html.mac .page-actions .btn { flex: 1 1 0; height: 34px; border-radius: 9px; font-size: 14px; justify-content: center; }
  html.mac .hero-eyebrow { display: none; }

  /* Controls get finger-sized while keeping Mac proportions. */
  html.mac .btn { height: 32px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
  html.mac .btn-sm { height: 28px; font-size: 13px; }
  html.mac :is(.input, .select) { height: 36px; font-size: 15px; border-radius: 9px; padding: 0 11px; }
  html.mac .textarea,
  html.mac .note-area { font-size: 15px; border-radius: 9px; }
  html.mac :is(.seg, .overview-tabs, .filter-chips) { padding: 2px; border-radius: 9px !important; }
  html.mac :is(.seg-btn, .overview-tab, .filter-chip) { height: 30px; font-size: 13px; border-radius: 7px; flex: 1 1 0; justify-content: center; }
  html.mac .overview-tabs { display: flex; width: 100%; }
  /* Long filter rows scroll sideways instead of wrapping labels. */
  html.mac .filter-chips {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.mac .filter-chips::-webkit-scrollbar { display: none; }
  html.mac .filter-chip { flex: 1 0 auto; white-space: nowrap; padding: 0 12px; }
  html.mac .input-group .input { padding-left: 34px; }
  html.mac .input-group > .material-symbols-outlined { left: 11px; font-size: 18px; }
  html.mac .toggle { width: 51px; height: 31px; border-radius: 16px; }
  html.mac .toggle::after { width: 27px; height: 27px; top: 2px; left: 2px; }
  html.mac .toggle[aria-checked='true']::after { transform: translateX(20px); }

  /* Grouped boxes: iOS corner radius and padding. */
  html.mac :is(.card, .side-card, .insight-card, .note-card, .risk-card, .goals-card, .health-card, .time-card, .open-loops-card, .stat-card, .hero-stat, .week-strip) {
    border-radius: 12px !important;
  }
  html.mac .card-pad { padding: 14px; }

  /* Today: habit rows are list rows — circle, title and subtitle, one trailing control. */
  html.mac .overview-panel .habit-list { border-radius: 12px; }
  html.mac .overview-panel .habit-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas:
      'check name meta'
      'check tags meta'
      'check prog prog';
    column-gap: 12px;
    min-height: 58px;
    padding: 10px 12px 10px 14px;
    border-radius: 0 !important;
  }
  html.mac .overview-panel .habit-row + .habit-row::before { left: 50px; }
  html.mac .overview-panel .habit-row .habit-check { align-self: center; width: 24px !important; height: 24px !important; }
  html.mac .overview-panel .habit-row .name {
    padding-top: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    -webkit-line-clamp: 1;
  }
  html.mac .overview-panel .habit-row:has(.habit-kebab) .name { padding-right: 0; }
  html.mac .overview-panel .habit-row .habit-tags { margin-top: 3px; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
  html.mac .overview-panel .habit-row .habit-meta { align-self: center; margin-top: 0; gap: 4px; }
  html.mac .overview-panel .habit-row .habit-meta :is(.habit-time, .pips, .log-btn) { display: none; }
  html.mac .overview-panel .habit-row .habit-kebab {
    position: static;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    color: var(--label-2);
  }
  /* The stopwatch collapses to a round play button. */
  html.mac .overview-panel .habit-row .sw-main { width: 30px; height: 30px; padding: 0; border-radius: 15px; justify-content: center; }
  html.mac .overview-panel .habit-row .sw[data-state='idle'] .sw-time { display: none; }
  html.mac .overview-panel .activity-row .habit-meta { grid-area: prog; margin-top: 10px; }
  html.mac .overview-panel .activity-row .log-btn { display: inline-flex; height: 30px; }
  html.mac .overview-panel .activity-row { grid-template-areas: 'check name name' 'check tags tags' 'check prog prog'; }

  /* Week strip and rings */
  html.mac .week-strip { padding: 6px !important; }
  html.mac .week-day { border-radius: 10px; }
  html.mac .rings-card { gap: 16px; padding: 14px !important; }
  html.mac .rings-legend-value { font-size: 17px; }

  /* Sheets rise from the bottom edge (iOS), with a grabber. */
  html.mac .modal-backdrop { padding: 0; align-items: flex-end; }
  html.mac .modal,
  html.mac[data-theme='light'] .modal {
    border-radius: 14px 14px 0 0;
    max-height: calc(100dvh - 12px - env(safe-area-inset-top));
    transform: translateY(100%);
    transition: transform 380ms var(--ease-spring);
  }
  html.mac .modal-backdrop.open .modal { transform: none; }
  html.mac .modal-backdrop:not(.open) .modal { transform: translateY(100%); transition: transform 240ms cubic-bezier(0.4, 0, 1, 1); }
  html.mac .modal-head::before { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-3); }
  html.mac .modal-title { font-size: 17px; }
  html.mac .modal-foot .btn { min-height: 44px; font-size: 15px; border-radius: 11px; }

  /* Menus: bigger rows for fingers. */
  html.mac .menu-item { height: 40px; font-size: 15px; }
  html.mac .menu-pop { min-width: 240px; border-radius: 13px; }

  /* Settings and stats grids go single column with Mac spacing. */
  html.mac .stat-grid { gap: 10px; }
}

/* PWA: OS traffic lights sit over the sidebar's 52px header */
@media (display-mode: window-controls-overlay) {
  html.mac .topbar { -webkit-app-region: drag; app-region: drag; }
  html.mac .topbar button,
  html.mac .topbar a { -webkit-app-region: no-drag; app-region: no-drag; }
  /* The OS traffic lights sit at the window's top-left, over the glass sidebar. Keep a
     title-bar-high strip clear above the brand so the larger logo sits below them. */
  html.mac .brand {
    height: auto;
    padding: calc(env(titlebar-area-height, 28px) + 4px) 6px 14px;
    -webkit-app-region: drag;
    app-region: drag;
  }
  html.mac .brand a,
  html.mac .brand button { -webkit-app-region: no-drag; app-region: no-drag; }
}

/* Installed app without the overlay: the OS draws a title bar, so the toolbar needs no drag area. */
@media (display-mode: standalone) {
  html.mac .topbar { padding-top: 0; }
}

/* ==========================================================================
   Motion — macOS timing
   Short, decelerating, no overshoot. Things that appear fade and settle; things that leave
   go faster than they came. Nothing lifts or bounces under the pointer (see mac-motion.css).
   ========================================================================== */

/* Appearance change: the whole window crossfades (no circular wipe). */
html.mac:not([class*='vt-'])::view-transition-old(root) { animation: mac-fade-out 280ms ease-in-out both; }
html.mac:not([class*='vt-'])::view-transition-new(root) { animation: mac-fade-in 280ms ease-in-out both; clip-path: none; }
@keyframes mac-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mac-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Page switch: the detail pane crossfades; the sidebar selection jumps (it doesn't glide). */
/* Overlapping crossfade: the old page dims quickly while the new one fades up and settles a
   few pixels into place on the same spring as the sidebar pill, so both move as one. */
html.mac.vt-page::view-transition-old(vt-page) { animation: mac-fade-out 240ms cubic-bezier(0.4, 0, 0.6, 1) both; }
html.mac.vt-page::view-transition-new(vt-page) { animation: mac-page-in 420ms cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes mac-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.mac.vt-page .nav-item.active,
html.mac.vt-page .mobile-nav-item.active { view-transition-name: none; }
html.mac .route-enter .page > * { animation: none !important; }

/* Segmented tabs (Today's Habits / Activities / Tasks): crossfade in place. */
/* The panel's height eases while the old list drifts out and the new one slides in from the
   side the thumb moved toward. */
html.mac.vt-tab::view-transition-group(vt-tab) { animation-duration: 380ms; animation-timing-function: var(--ease-spring); }
html.mac.vt-tab::view-transition-old(vt-tab) { animation: mac-tab-out-fwd 180ms cubic-bezier(0.4, 0, 1, 1) both; }
html.mac.vt-tab::view-transition-new(vt-tab) { animation: mac-tab-in-fwd 380ms var(--ease-spring) 50ms both; }
html.mac.vt-tab[data-vt-dir='-1']::view-transition-old(vt-tab) { animation-name: mac-tab-out-back; }
html.mac.vt-tab[data-vt-dir='-1']::view-transition-new(vt-tab) { animation-name: mac-tab-in-back; }
@keyframes mac-tab-out-fwd { to { opacity: 0; transform: translateX(-12px); } }
@keyframes mac-tab-in-fwd { from { opacity: 0; transform: translateX(14px); } }
@keyframes mac-tab-out-back { to { opacity: 0; transform: translateX(12px); } }
@keyframes mac-tab-in-back { from { opacity: 0; transform: translateX(-14px); } }

/* List changes (a row added, removed or reordered) glide like NSTableView row animations. */
html.mac.vt-data::view-transition-group(*) { animation-duration: 300ms; animation-timing-function: var(--ease-spring); }
html.mac.vt-data::view-transition-old(*),
html.mac.vt-data::view-transition-new(*) { animation-duration: 200ms; animation-timing-function: ease-out; }

/* Sheets drop from under the toolbar and slide back up faster. */
html.mac .modal-backdrop { transition: opacity 240ms ease-out; }
html.mac .modal-backdrop:not(.open) { transition: opacity 200ms ease-in; }
html.mac .modal,
html.mac[data-theme='light'] .modal { opacity: 1; transition: transform 360ms var(--ease-spring); }
html.mac .modal-backdrop:not(.open) .modal {
  opacity: 1;
  transform: translateY(-104%);
  transition: transform 220ms cubic-bezier(0.4, 0, 1, 1);
}

/* Popovers grow out of their anchor; menus appear at once and fade away. */
html.mac :is(.drive-pop, .streak-banner, .cards-pop, .control-pop) {
  transition: opacity 160ms ease-out, transform 240ms var(--ease-spring);
}
html.mac :is(.drive-pop-backdrop:not(.open) .drive-pop, .streak-banner-backdrop:not(.open) .streak-banner, .cards-pop-backdrop:not(.open) .cards-pop, .control-pop:not(.is-open)) {
  transition: opacity 140ms ease-in, transform 140ms ease-in;
}
html.mac .menu-pop { transform: none; transition: opacity 80ms linear; }
html.mac .menu-pop.menu-in { opacity: 1; }
html.mac .menu-pop.menu-out { transform: none; transition: opacity 180ms ease-in; }
/* The chosen item blinks once before the menu fades, as in a native menu. */
html.mac .menu-item.menu-blink { animation: mac-menu-blink 170ms steps(1, end); }
@keyframes mac-menu-blink {
  0% { background: transparent; color: var(--label); }
  50% { background: var(--accent); color: var(--accent-contrast); }
}

/* Disclosure (task stacks): rows ease open; the chevron turns without overshoot. */
html.mac .task-list-wrap { transition: grid-template-rows 280ms var(--ease-spring); }
html.mac .task-list { transition: opacity 200ms ease-out, transform 280ms var(--ease-spring); }
html.mac .task-group-chevron { transition: transform 240ms var(--ease-spring), color 120ms linear; }

/* Controls respond with colour only; presses darken briefly instead of moving. */
html.mac :is(button, .btn, a):active { transform: none; }
html.mac :is(.btn, .icon-btn, .seg-btn, .filter-chip, .overview-tab, .log-btn, .preset-btn, .menu-item, .nav-item, .mobile-nav-item) {
  transition-property: background-color, color, box-shadow, opacity, filter;
  transition-duration: 120ms;
  transition-timing-function: linear;
}
html.mac :is(.timer-main-btn, .timer-side-btn):active { transform: scale(0.95); transition: transform 80ms linear; }

/* ==========================================================================
   Dialogs — floating, rounded on every corner, sized to their content
   On a Mac-sized window a dialog is a centred floating panel (it grows out of the middle);
   on a phone it is a floating sheet inset from the screen edges. Content is kept compact
   so most dialogs fit without scrolling; only a dialog taller than the screen scrolls.
   ========================================================================== */
@media (min-width: 721px) {
  html.mac .modal-backdrop {
    align-items: center;
    padding: 16px;
    background: var(--sheet-dim);
  }
  html.mac .modal,
  html.mac[data-theme='light'] .modal {
    max-height: calc(100dvh - 32px);
    border-radius: 18px;
    border: 0.5px solid var(--panel-edge);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.25), inset 0 1px 0 var(--glass-highlight);
    opacity: 0;
    transform: scale(0.96);
    transition: transform 320ms var(--ease-spring), opacity 180ms ease-out;
  }
  html.mac .modal-backdrop.open .modal { opacity: 1; transform: none; }
  html.mac .modal-backdrop:not(.open) .modal {
    opacity: 0;
    transform: scale(0.98);
    transition: transform 160ms ease-in, opacity 140ms ease-in;
  }
}

html.mac .modal-head { padding: 18px 22px 0; }
html.mac .modal-body { padding: 14px 22px; }
html.mac .modal-foot { padding: 12px 22px 18px; }
html.mac .modal-close {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--fill);
}
html.mac .modal-close:hover { background: var(--fill-2); }

/* Habit history: compact header, stats and calendar so the window fits on one screen. */
html.mac .habit-detail-head { gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 0.5px solid var(--separator); }
html.mac .habit-detail-head .habit-icon { width: 40px; height: 40px; border-radius: 10px; }
html.mac .habit-detail-stats { gap: 8px; margin-bottom: 12px; }
html.mac .habit-detail-stat {
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
}
html.mac .habit-detail-stat span { font-size: 11px; color: var(--label-2); margin-bottom: 1px; }
html.mac .habit-detail-stat strong { font: 600 17px/1.2 var(--font-rounded); color: var(--label); }
html.mac .habit-detail-chart {
  max-width: none;
  padding: 10px 12px 8px;
  border: 0;
  border-radius: 12px;
  background: var(--fill);
}
html.mac .pcal-bar { margin-bottom: 8px; }
html.mac .pcal-month {
  padding: 10px 10px 8px;
  border: 0;
  border-radius: 10px;
  background: var(--window-bg);
  box-shadow: 0 0 0 0.5px var(--separator);
}
html.mac .pcal-month-head { margin-bottom: 6px; }
html.mac .pcal-label { font: 600 13px var(--font-text); }
html.mac .pcal-count { font-size: 11px; color: var(--label-2); }
html.mac .pcal-weekdays { gap: 3px; margin-bottom: 3px; }
html.mac .pcal-weekdays span { padding: 0; text-align: center; font-size: 10px; color: var(--label-2); }
html.mac .pcal-grid { gap: 3px; }
html.mac .pcal-month .pcal-day {
  height: 26px;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  font: 500 12px/1 var(--font-text);
  box-shadow: none;
}
html.mac .pcal-day.is-done { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-bright); }
html.mac .pcal-day.is-partial { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-bright); }
html.mac .pcal-day.is-missed { background: color-mix(in srgb, var(--sys-red) 10%, transparent); color: var(--sys-red); }
html.mac .pcal-day.is-future,
html.mac .pcal-day.is-rest { background: transparent; color: var(--label-3); opacity: 1; }
html.mac .pcal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent) !important; }
html.mac .pcal-day::after { display: none !important; }
html.mac .pcal-legend { font-size: 11px; color: var(--label-2); gap: 4px; }
html.mac .pcal-legend .pcal-day { width: 10px; height: 10px; border: 0; border-radius: 3px; }
html.mac .pcal-note { font-size: 11px; color: var(--label-2); }
html.mac .pcal-nav { width: 24px; height: 22px; border: 0; border-radius: 6px; background: var(--control-bg); box-shadow: var(--shadow-control); }
html.mac .pcal-strip { scrollbar-width: none; }
html.mac .pcal-strip::-webkit-scrollbar { display: none; }

/* Habit editor: tighter sections and a smaller icon grid. */
html.mac .form-section { padding: 14px 16px; border-radius: 12px; border: 0; background: var(--fill); margin-bottom: 10px; }
html.mac .form-section-head { margin-bottom: 10px; }
html.mac .form-section-title { font: 600 13px var(--font-text); }
html.mac .form-section-title .step-num { display: none; }
html.mac .field { gap: 5px; }
html.mac .icon-grid { gap: 6px; }
html.mac .icon-grid button,
html.mac .icon-grid .icon-option { height: 34px; border-radius: 8px; }

/* Wide windows: the habit and tracker forms lay out in two columns (identity | frequency,
   target and cue) so the whole form fits without scrolling. */
@media (min-width: 1000px) {
  html.mac .modal-lg:has(#habit-form, #activity-form) { max-width: 980px; }
  html.mac :is(#habit-form, #activity-form).editor-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }
  html.mac :is(#habit-form, #activity-form) > .form-section { margin: 0; }
  html.mac #habit-form > .form-section:first-child { grid-row: span 2; }
  /* The tracker's three types stack in the narrower column. */
  html.mac #activity-form .type-cards { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  html.mac #activity-form .type-card { flex-direction: row; justify-content: space-between; align-items: center; min-height: 0; padding: 9px 12px; }
}

/* Pop-up buttons (every dropdown, date and time picker): button height, button look. */
html.mac .pulse-control,
html.mac[data-theme='light'] .pulse-control {
  height: 28px;
  min-height: 0;
  padding: 0 6px 0 10px;
  gap: 6px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--label);
  font: 400 13px var(--font-text);
}
html.mac .pulse-control:hover { background: var(--control-bg); border-color: transparent; filter: brightness(1.04); }
html.mac .pulse-control:focus-visible { box-shadow: var(--shadow-control), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
html.mac .pulse-control-caret { font-size: 15px !important; color: var(--label-2); }
html.mac .pulse-select-btn[aria-expanded='true'] .pulse-control-caret { transform: none; }
html.mac .select { height: 28px; }

/* Their option lists look like macOS menus: 24px rows, accent highlight, a check on the chosen one. */
html.mac .control-pop,
html.mac[data-theme='light'] .control-pop {
  padding: 5px;
  border: 0;
  border-radius: var(--r-pop);
  background: var(--popover-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: var(--shadow-float);
}
html.mac .control-option {
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 5px;
  color: var(--label);
  font-size: 13px;
}
html.mac .control-option:hover { background: var(--accent); color: var(--accent-contrast); }
html.mac .control-option.is-selected { background: transparent; color: var(--label); font-weight: 500; }
html.mac .control-option.is-selected:hover { background: var(--accent); color: var(--accent-contrast); }

@media (max-width: 720px) {
  html.mac .pulse-control { height: 36px; font-size: 15px; border-radius: 9px; padding: 0 8px 0 12px; }
  html.mac .select { height: 36px; }
  html.mac .control-option { min-height: 40px; font-size: 15px; }
}

/* Activities page: even rhythm between header, stat cards and the tracker list. */
html.mac .activity-kpis { margin: 0; gap: 12px; }
html.mac .activity-panel { display: flex; flex-direction: column; gap: 16px; }
html.mac .activity-panel > .habit-toolbar { margin: 0; }

/* Optical centering for button labels. A button centers its text's line box, but in system
   fonts the lowercase letters sit below that box's middle (the box reserves room for
   descenders), so mixed-case labels read ~1px low. Lift the label by 1px (2px bottom
   padding) and drop the icons back by the same 1px so both sit on the visual center. */
html.mac :is(.btn, .log-btn, .preset-btn, .seg-btn, .filter-chip, .overview-tab, .pulse-control, .toast-action, .sw-main, .sw-stop, .day-preset, .fz-chip, .mobile-nav-item.active) {
  padding-top: 0;
  padding-bottom: 2px;
  line-height: 1.2;
}
html.mac :is(.btn, .log-btn, .preset-btn, .seg-btn, .filter-chip, .overview-tab, .pulse-control, .toast-action, .sw-main, .sw-stop, .fz-chip) > .material-symbols-outlined {
  position: relative;
  top: 1px;
}

/* Editor building blocks, Mac-sized */
html.mac .type-card {
  border: 0;
  border-radius: 10px;
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  text-align: left;
}
html.mac .type-card strong { font: 600 13px var(--font-text); color: var(--label); }
html.mac .type-card span { font-size: 11px; color: var(--label-2); }
html.mac .type-card.active { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--control-bg)); }
html.mac .type-card.active strong { color: var(--accent-bright); }
html.mac .form-section-head .habit-icon { width: 36px; height: 36px; border-radius: 9px; }
html.mac .day-toggles { gap: 4px; }
html.mac .day-toggle { height: 28px; border-radius: 7px; font-size: 12px; }
html.mac .day-presets { gap: 6px; margin-top: 6px; }
html.mac .day-preset { height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11px; border: 0; background: var(--fill); color: var(--label); }
html.mac .day-preset:hover { background: var(--fill-2); }

/* Phones: a floating sheet with rounded corners all round, inset from the screen edges. */
@media (max-width: 720px) {
  html.mac .modal-backdrop { padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  html.mac .modal,
  html.mac[data-theme='light'] .modal {
    border-radius: 24px;
    padding-bottom: 0;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border: 0.5px solid var(--panel-edge);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  }
  html.mac .modal-head { padding: 22px 18px 0; }
  html.mac .modal-body { padding: 12px 18px; }
  html.mac .modal-foot { padding: 10px 14px 14px; }
  html.mac .habit-detail-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  html.mac .habit-detail-stat { padding: 7px 8px; }
  html.mac .habit-detail-stat span { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.mac .habit-detail-stat strong { font-size: 15px; }
  html.mac .pcal-month .pcal-day { height: 30px; }
}

/* ==========================================================================
   Phones and tablets — calmer materials and full habit rows
   ========================================================================== */
@media (max-width: 980px) {
  /* Less glass on small screens: a plain window, near-solid bars. Blur is costly to repaint
     while a phone scrolls, so the near-opaque toolbar drops it and the tab bar keeps a light one. */
  html.mac body,
  html.mac[data-theme='light'] body { background: var(--window-bg); }
  html.mac .topbar {
    background: color-mix(in srgb, var(--window-bg) 96%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.mac .mobile-nav { backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
  /* Tab switch on a phone: the new list slides in on a spring, composited only. */
  html.mac .overview-panel.tab-enter {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform, opacity;
  }
  html.mac .overview-tabs.tab-indicator-ready .overview-tab-indicator { will-change: transform, width; }
  html.mac .overview-tab-indicator { border-radius: 7px; }
}

@media (max-width: 720px) {
  /* Today rows show everything the desktop row shows, wrapped onto lines instead of
     scrolling sideways: name and tags, description, then time, progress dots, Start, Log
     and the ⋯ menu. */
  html.mac .overview-panel .habit-row,
  html.mac .overview-panel .activity-row {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      'check name'
      'check tags'
      'check desc'
      'check meta'
      'check prog';
    column-gap: 12px;
    align-items: start;
    padding: 12px 12px 12px 14px;
    overflow: visible;
  }
  html.mac .overview-panel .habit-row .habit-check { align-self: start; margin-top: 0; }
  /* Quick-log buttons share each line evenly instead of leaving a ragged edge. */
  html.mac .overview-panel .activity-row .habit-meta > :is(.log-btn, .sw) { flex: 1 1 auto; justify-content: center; }
  html.mac .overview-panel .habit-row .name {
    -webkit-line-clamp: 2;
    font-size: 15px;
    line-height: 1.3;
  }
  html.mac .overview-panel .habit-row .habit-tags { flex-wrap: wrap; overflow: visible; margin-top: 5px; }
  html.mac .overview-panel .habit-row .habit-desc {
    display: block;
    grid-area: desc;
    margin-top: 4px;
    font-size: 12px;
    color: var(--label-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.mac .overview-panel .habit-row .habit-meta,
  html.mac .overview-panel .activity-row .habit-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 10px;
    overflow: visible;
    align-self: stretch;
  }
  html.mac .overview-panel .habit-row .habit-meta :is(.habit-time, .pips, .log-btn) { display: inline-flex; }
  html.mac .overview-panel .habit-row .habit-meta .log-btn,
  html.mac .overview-panel .habit-row .habit-meta .sw-main { height: 30px; padding: 0 12px; font-size: 13px; border-radius: 8px; width: auto; }
  html.mac .overview-panel .habit-row .sw[data-state='idle'] .sw-time { display: inline; }
  html.mac .overview-panel .habit-row .habit-kebab {
    display: grid;
    place-items: center;
    position: static;
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 15px;
  }
  html.mac .overview-panel .habit-row + .habit-row::before { left: 50px; }

  /* Momentum (beside the rings): label and icon on one line, value, then a two-line note. */
  html.mac .hero-stats > .hero-stat:not(.rings-card) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
  }
  html.mac .hero-stats > .hero-stat:not(.rings-card) .hero-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 11px;
  }
  html.mac .hero-stats > .hero-stat:not(.rings-card) .hero-stat-top .material-symbols-outlined { font-size: 14px; }
  html.mac .hero-stats > .hero-stat:not(.rings-card) .hero-stat-value { font-size: 24px; line-height: 1.15; white-space: nowrap; }
  html.mac .hero-stats > .hero-stat:not(.rings-card) .hero-stat-value small { font-size: 12px; }
  html.mac .hero-stats > .hero-stat:not(.rings-card) .hero-stat-foot {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    font-size: 11px;
    line-height: 1.3;
  }
}

/* ==========================================================================
   A habit's day entry (click a habit on Today)
   ========================================================================== */
html.mac .log-sheet { display: flex; flex-direction: column; gap: 14px; }
html.mac .log-head { display: flex; align-items: center; gap: 12px; }
html.mac .log-head .habit-tile { width: 40px; height: 40px; border-radius: 10px; }
html.mac .log-head .habit-tile .material-symbols-outlined { font-size: 22px; }
html.mac .log-head-text { display: flex; flex-direction: column; min-width: 0; }
html.mac .log-head-text strong { font: 600 15px/1.3 var(--font-display); color: var(--label); }
html.mac .log-head-text span { font-size: 12px; color: var(--label-2); }
html.mac .log-seg { display: flex; width: 100%; }
html.mac .log-seg .seg-btn { flex: 1 1 0; height: 34px; font-size: 13px; justify-content: center; gap: 4px; }
html.mac .log-seg .seg-btn .material-symbols-outlined { font-size: 16px; }
html.mac .log-seg .seg-btn.active[data-binary='1'] { color: var(--habit-color, var(--accent)); }
html.mac .log-stepper {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: var(--fill);
}
html.mac .log-step {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  color: var(--label);
}
html.mac .log-step:active { filter: brightness(0.92); }
html.mac .log-step .material-symbols-outlined { font-size: 20px; }
html.mac .log-value { display: flex; flex-direction: column; align-items: center; gap: 0; cursor: text; }
html.mac .log-value input {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  text-align: center;
  font: 600 34px/1.1 var(--font-rounded);
  color: var(--habit-color, var(--label));
  -moz-appearance: textfield;
}
html.mac .log-value input::-webkit-outer-spin-button,
html.mac .log-value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html.mac .log-value span { font-size: 12px; color: var(--label-2); }
html.mac .log-presets { justify-content: center; gap: 6px; flex-wrap: wrap; }
html.mac .log-history { align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--accent-bright); }
html.mac .log-history .material-symbols-outlined { font-size: 16px; }

/* ==========================================================================
   Phones: Today rows on a strict grid
   [○] Name  tag tag                      ← title line, tags inline
       Description                        ← one line
       ⏱ 07:15 ▪▪▪▪▪        Start  Log  ⋯ ← details left, actions right
   ========================================================================== */
@media (max-width: 720px) {
  html.mac .overview-panel .habit-row,
  html.mac .overview-panel .activity-row {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas:
      'check main'
      'check meta'
      'check prog';
    column-gap: 12px;
    row-gap: 0;
    padding: 12px 12px 12px 14px;
  }
  html.mac .overview-panel .habit-row .habit-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  html.mac .overview-panel .habit-row .habit-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-width: 0;
  }
  html.mac .overview-panel .habit-row .name {
    display: block;
    -webkit-line-clamp: unset;
    font-size: 15px;
    line-height: 22px;
    white-space: normal;
  }
  html.mac .overview-panel .habit-row .habit-tags { display: contents; }
  html.mac .overview-panel .habit-row :is(.tag-chip, .streak-badge, .chip) { height: 18px; font-size: 11px; padding: 0 6px; }
  html.mac .overview-panel .habit-row .habit-desc {
    margin-top: 0;
    font-size: 12px;
    line-height: 16px;
  }
  html.mac .overview-panel .habit-row .habit-check { align-self: start; margin-top: 1px; }

  html.mac .overview-panel .habit-row .habit-meta,
  html.mac .overview-panel .activity-row .habit-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    min-width: 0;
  }
  html.mac .overview-panel .habit-row .habit-meta .habit-time { flex-shrink: 0; font-size: 11px; }
  html.mac .overview-panel .habit-row .habit-meta .pips { flex-shrink: 1; min-width: 0; overflow: hidden; }
  /* Details on the left take the free space, so the actions line up on the right edge. */
  html.mac .overview-panel .habit-row:not(.activity-row) .habit-meta > .pips { margin-right: auto; }
  html.mac .overview-panel .activity-row .habit-meta > .habit-time { margin-right: auto; }
  html.mac .overview-panel .habit-row .habit-meta :is(.log-btn, .sw-main) {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 9px;
    font-size: 12px;
    border-radius: 7px;
  }
  html.mac .overview-panel .habit-row .habit-meta :is(.log-btn, .sw-main) .material-symbols-outlined { font-size: 13px; }
  html.mac .overview-panel .habit-row .habit-kebab { flex: 0 0 28px; width: 28px; height: 28px; margin-left: 0; }
  html.mac .overview-panel .activity-row .habit-meta > :is(.log-btn, .sw) { flex: 0 0 auto; }
  /* Task rows already show priority and due date under the title. */
  html.mac .overview-panel .task-overview-row > .habit-meta { display: none; }
}

/* ==========================================================================
   Focus — one screen
   Left: the timer (task, dial, controls, length). Right: Today, Cycle, Today's blocks and
   the parking lot. Sizes scale with the window height so the page fits without scrolling.
   ========================================================================== */
html.mac .fz-page { gap: 16px; }
html.mac .fz-page .page-head { margin-bottom: 0; }
html.mac .fz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
  gap: 14px;
  align-items: stretch;
}
html.mac .fz-page.is-zen .fz-grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
html.mac .fz-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }

/* Shared card chrome: every card has a titled header. */
html.mac .fz-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-group);
  background: var(--group-bg);
  border: 0.5px solid var(--group-border);
  min-width: 0;
}
html.mac .fz-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
html.mac .fz-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: 600 13px/1.3 var(--font-text);
  color: var(--label);
}
html.mac .fz-card-title .material-symbols-outlined { font-size: 16px; color: var(--accent); }
html.mac .fz-card-meta { font-size: 11px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Timer card */
html.mac .fz-timer { flex: 1; align-items: stretch; gap: 12px; }
html.mac .fz-timer .fz-card-title .material-symbols-outlined { color: var(--sys-indigo); }
html.mac .fz-timer.is-break .fz-card-title .material-symbols-outlined { color: var(--sys-green); }
html.mac .fz-modes .seg-btn { height: 22px; padding: 0 10px; font-size: 12px; }

html.mac .fz-task { display: flex; flex-direction: column; gap: 8px; }
html.mac .fz-task-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 0.62fr); gap: 8px; }
html.mac .fz-intent {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--field-bg);
  box-shadow: inset 0 0 0 0.5px var(--control-border);
  transition: box-shadow var(--dur-1);
}
html.mac .fz-intent:focus-within { box-shadow: inset 0 0 0 0.5px var(--accent), 0 0 0 3.5px color-mix(in srgb, var(--accent) 35%, transparent); }
html.mac .fz-intent .material-symbols-outlined { font-size: 16px; color: var(--label-2); }
html.mac .fz-intent input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 400 14px var(--font-text); color: var(--label); }
html.mac .fz-intent input::placeholder { color: var(--label-3); }
html.mac .fz-link-select { height: 32px; font-size: 13px; }
html.mac .fz-recents { display: flex; flex-wrap: wrap; gap: 6px; }
html.mac .fz-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 12px;
  background: var(--fill);
  color: var(--label);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.mac .fz-chip:hover { background: var(--fill-2); }
html.mac .fz-chip .material-symbols-outlined { font-size: 13px; color: var(--label-2); }
html.mac .fz-link-progress {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--label-2);
}
html.mac .fz-link-progress span:first-child { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mac .fz-link-progress strong { color: var(--label); font-weight: 500; }
html.mac .fz-link-progress .material-symbols-outlined { font-size: 14px; }
html.mac .fz-link-progress.is-empty { grid-template-columns: 1fr; color: var(--label-3); }
html.mac .fz-link-bar { height: 5px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
html.mac .fz-link-bar i { display: block; height: 100%; border-radius: 3px; background: var(--link-color, var(--accent)); transition: width 400ms var(--ease-spring); }
html.mac .fz-link-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
html.mac .fz-break-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--sys-green) 12%, transparent); color: var(--label); font-size: 13px; }
html.mac .fz-break-note .material-symbols-outlined { color: var(--sys-green); font-size: 18px; }

html.mac .fz-dial {
  position: relative;
  align-self: center;
  width: clamp(170px, 31vh, 250px);
  aspect-ratio: 1;
  max-width: 100%;
  margin: 2px 0;
}
html.mac .fz-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
html.mac .fz-dial circle { fill: none; stroke-width: 9; }
html.mac .fz-dial-track { stroke: var(--fill-2); }
html.mac .fz-dial-value { stroke: var(--sys-indigo); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 300ms ease; }
html.mac .fz-timer.is-break .fz-dial-value { stroke: var(--sys-green); }
html.mac .fz-timer.is-paused .fz-dial-value { opacity: 0.7; }
html.mac .fz-dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
html.mac .fz-dial-mode { font: 500 12px var(--font-text); color: var(--sys-indigo); }
html.mac .fz-timer.is-break .fz-dial-mode { color: var(--sys-green); }
html.mac .fz-dial-time { font: 300 clamp(40px, 7vh, 56px)/1 var(--font-rounded); letter-spacing: -0.02em !important; color: var(--label); font-variant-numeric: tabular-nums; }
html.mac .fz-dial-state { font-size: 12px; color: var(--label-2); }

html.mac .fz-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
html.mac .fz-round {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fill-2);
  color: var(--label);
  transition: background-color 120ms linear, transform 80ms linear;
}
html.mac .fz-round:hover { background: var(--fill-3); }
html.mac .fz-round:active { transform: scale(0.94); }
html.mac .fz-round .material-symbols-outlined { font-size: 20px; }
html.mac .fz-round.fz-main { width: 60px; height: 60px; background: color-mix(in srgb, var(--sys-indigo) 22%, transparent); color: var(--sys-indigo); }
html.mac .fz-round.fz-main:hover { background: color-mix(in srgb, var(--sys-indigo) 30%, transparent); }
html.mac .fz-timer.is-break .fz-round.fz-main { background: color-mix(in srgb, var(--sys-green) 22%, transparent); color: var(--sys-green); }
html.mac .fz-round.fz-main .material-symbols-outlined { font-size: 28px; }

html.mac .fz-length { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
html.mac .fz-presets { display: flex; gap: 6px; }
html.mac .fz-presets .preset-btn.active { background: var(--accent); color: var(--accent-contrast); box-shadow: none; }
html.mac .fz-stepper .stepper-value { min-width: 64px; }

/* Today card */
html.mac .fz-goal-stepper .stepper-value { min-width: 78px; font-size: 11px; }
html.mac .fz-today-main { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; }
html.mac .fz-goal-ring { position: relative; width: 56px; height: 56px; }
html.mac .fz-goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
html.mac .fz-goal-ring circle { fill: none; stroke-width: 7; }
html.mac .fz-goal-track { stroke: color-mix(in srgb, var(--sys-indigo) 18%, transparent); }
html.mac .fz-goal-value { stroke: var(--sys-indigo); stroke-linecap: round; }
html.mac .fz-goal-value.is-met { stroke: var(--sys-green); }
html.mac .fz-goal-ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--font-rounded); color: var(--label); }
html.mac .fz-today-copy { display: flex; flex-direction: column; }
html.mac .fz-today-copy strong { font: 600 20px/1.2 var(--font-rounded); color: var(--label); }
html.mac .fz-today-copy span { font-size: 11px; color: var(--label-2); }
html.mac .fz-today-stats { display: flex; justify-content: flex-end; gap: 14px; margin: 0; }
html.mac .fz-today-stats div { display: flex; flex-direction: column; align-items: flex-end; }
html.mac .fz-today-stats dt { font-size: 10px; color: var(--label-2); }
html.mac .fz-today-stats dd { margin: 0; font: 600 14px var(--font-rounded); color: var(--label); }
html.mac .fz-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 54px; }
html.mac .fz-week-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 0; }
html.mac .fz-week-track { flex: 1; width: 100%; max-width: 22px; display: flex; align-items: flex-end; border-radius: 5px; background: var(--fill); overflow: hidden; }
html.mac .fz-week-track i { display: block; width: 100%; border-radius: 5px; background: color-mix(in srgb, var(--sys-indigo) 70%, transparent); transition: height 500ms var(--ease-spring); }
html.mac .fz-week-track i.met { background: var(--sys-green); }
html.mac .fz-week-label { font-size: 10px; color: var(--label-2); }
html.mac .fz-week-day.today .fz-week-label { color: var(--label); font-weight: 600; }

/* Cycle card: focus blocks and breaks as one strip */
html.mac .fz-steps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
html.mac .fz-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 40px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sys-indigo) 10%, transparent);
  color: color-mix(in srgb, var(--sys-indigo) 70%, var(--label-2));
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
html.mac .fz-step .material-symbols-outlined { font-size: 15px; }
html.mac .fz-step.is-break { background: color-mix(in srgb, var(--sys-green) 9%, transparent); color: color-mix(in srgb, var(--sys-green) 70%, var(--label-2)); }
html.mac .fz-step.done { background: var(--sys-indigo); color: #fff; }
html.mac .fz-step.is-break.done { background: var(--sys-green); color: rgba(0, 0, 0, 0.75); }
html.mac .fz-step.current { box-shadow: inset 0 0 0 2px var(--sys-indigo); color: var(--sys-indigo); background: color-mix(in srgb, var(--sys-indigo) 16%, transparent); }
html.mac .fz-step.is-break.current { box-shadow: inset 0 0 0 2px var(--sys-green); color: var(--sys-green); }
html.mac .fz-step.current .material-symbols-outlined { animation: fz-breathe 2.4s ease-in-out infinite; }
@keyframes fz-breathe { 50% { opacity: 0.45; } }
html.mac .fz-auto { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--label); cursor: pointer; }

/* Today's blocks: fills the space left in the column, scrolls inside if there are many. */
html.mac .fz-log { flex: 1 1 auto; min-height: 96px; }
html.mac .fz-log-list { flex: 1; min-height: 0; max-height: 22vh; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
html.mac .fz-log-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 0.5px solid var(--separator);
}
html.mac .fz-log-item:first-child { border-top: 0; }
html.mac .fz-log-time { font-size: 11px; color: var(--label-2); font-variant-numeric: tabular-nums; }
html.mac .fz-log-body { display: flex; flex-direction: column; min-width: 0; }
html.mac .fz-log-body strong { font-weight: 500; font-size: 13px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mac .fz-log-body span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--label-2); }
html.mac .fz-log-body .material-symbols-outlined { font-size: 12px; }
html.mac .fz-log-mins { font: 600 13px var(--font-rounded); color: var(--sys-indigo); }
html.mac .fz-empty { margin: 0; font-size: 12px; color: var(--label-2); line-height: 1.45; }

/* Parking lot */
html.mac .fz-notes textarea { min-height: 64px; height: 64px; resize: vertical; font-size: 13px; }

/* Narrow windows and phones: one column, timer first. */
@media (max-width: 1100px) {
  html.mac .fz-grid { grid-template-columns: minmax(0, 1fr); }
  html.mac .fz-log-list { max-height: none; }
}
@media (max-width: 720px) {
  html.mac .fz-task-row { grid-template-columns: minmax(0, 1fr); }
  html.mac .fz-link-progress { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  html.mac .fz-link-bar { grid-column: 1 / -1; grid-row: 2; }
  html.mac .fz-intent { height: 38px; }
  html.mac .fz-intent input { font-size: 16px; }
  html.mac .fz-link-select { height: 38px; }
  html.mac .fz-dial { width: min(240px, 68vw); }
  html.mac .fz-dial-time { font-size: 52px; }
  html.mac .fz-modes .seg-btn { height: 28px; font-size: 12px; padding: 0 8px; }
  html.mac .fz-card-head { flex-wrap: wrap; }
  html.mac .fz-timer .fz-card-head { flex-direction: column; align-items: stretch; }
  html.mac .fz-modes { display: flex; width: 100%; }
  html.mac .fz-today-main { grid-template-columns: auto minmax(0, 1fr); }
  html.mac .fz-today-stats { grid-column: 1 / -1; justify-content: space-between; }
  html.mac .fz-today-stats div { align-items: flex-start; }
  html.mac .fz-step { height: 44px; }
  html.mac .fz-round { width: 48px; height: 48px; }
  html.mac .fz-round.fz-main { width: 66px; height: 66px; }
}

/* Shown only when JavaScript is off (also what non-rendering crawlers read). */
.noscript { max-width: 560px; margin: 18vh auto 0; padding: 0 24px; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #1d1d1f; }
.noscript h1 { font-size: 28px; margin: 0 0 12px; }

/* Accessibility preferences */
@media (prefers-reduced-transparency: reduce) {
  html.mac {
    --sidebar-bg: var(--sidebar-solid);
    --toolbar-bg: var(--window-bg);
    --popover-bg: var(--sheet-bg);
  }
  html.mac * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.mac *,
  html.mac *::before,
  html.mac *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}