/* ─────────────────────────────────────────────────────────────────
  OrbitTrack – Spring look and motion
  The third interface style (Settings → Style), picked on 2026-10-14 from two
  drafts: Material Design's parts and mechanics — ripple, state layers, a
  floating action button, filled fields, menus that unfold, the M3 switch —
  in a look of OrbiTrack's own. A connected button group in the title bar
  whose selected tab morphs into a pill, heavy display type, tinted stat
  chips in the app icon's slate, mint and gold, bubble rows, and springs
  with a little overshoot on everything that moves.
  One file carries both look and motion; js/ui-style.js switches it on with
  the 'material' style and js/ripple.js only acts while it is on.
  Every rule sits under :root[data-ui-style="material"].
  ───────────────────────────────────────────────────────────────── */

/* Roboto Flex (SIL OFL 1.1, fonts/roboto-flex/OFL.txt), cut down to Latin with
   the wght (400–900) and opsz axes. Declared here, the face is only fetched
   when this style is on; Chinese falls through to the system font. */
@font-face {
  font-family: "OrbiTrack Flex";
  src: url("/static/fonts/roboto-flex/RobotoFlex-latin.woff2?v=20261014b") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root[data-ui-style="material"] {
  --font: "OrbiTrack Flex", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bg: var(--mx-page); --window-bg: var(--mx-page); --view-bg: var(--mx-surface-2);
  --card-bg: var(--mx-surface); --bg-card: var(--mx-surface); --card-hover: var(--mx-surface-2); --bg-hover: var(--mx-surface-2);
  --bg-input: var(--mx-field); --headerbar-bg: var(--mx-page);
  --button-bg: var(--mx-surface-2); --button-hover: var(--mx-surface-2);
  --border: var(--mx-line); --text: var(--mx-text); --text-muted: var(--mx-muted); --text-dim: var(--mx-dim);
  --primary: var(--mx-primary); --primary-hover: var(--mx-primary); --primary-ghost: color-mix(in srgb, var(--mx-primary) 12%, transparent);
  --danger: var(--mx-error); --danger-hover: var(--mx-error); --success: var(--mx-mint); --warning: var(--mx-gold);
  --shade: rgba(10, 14, 20, .38); --shadow: none; --shadow-soft: none;
  --radius: var(--mx-r-card); --radius-sm: var(--mx-r-small);
  --mx-short: 150ms; --mx-medium: 300ms; --mx-long: 450ms;
  --transition: var(--mx-short) var(--mx-ease);
  interpolate-size: allow-keywords;

  body { font-family: var(--font); font-size: var(--fs-body); background: var(--mx-page); color: var(--mx-text); }
  body::before { display: none; }
  .tab-indicator { display: none; }

  /* ── Buttons ── */
  .btn {
    min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--mx-r-btn); box-shadow: none; position: relative; overflow: hidden;
    font-size: var(--fs-body); font-weight: 600; letter-spacing: .01em;
    background: var(--mx-primary-container); color: var(--mx-on-primary-container);
  }
  .btn svg { width: 18px; height: 18px; }
  .btn:has(svg) { padding-left: 14px; }
  .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-on-primary-container) 8%, var(--mx-primary-container)); box-shadow: none; }
  .btn-primary, .btn-primary:hover:not(:disabled) { background: var(--mx-primary); color: var(--mx-on-primary); }
  .btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-on-primary) 10%, var(--mx-primary)); }
  .btn-danger, .btn-danger:hover:not(:disabled) { background: var(--mx-error); color: var(--mx-on-error); }
  .btn-ghost, .btn-ghost:hover:not(:disabled) { background: transparent; color: var(--mx-primary); padding: 0 12px; }
  .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-primary) 10%, transparent); }
  .btn-outline, .btn-outline:hover:not(:disabled) { background: transparent; color: var(--mx-text); border: 1.5px solid var(--mx-line-strong); }
  .btn-outline:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-text) 6%, transparent); }
  .topbar-actions .btn { width: 40px; min-width: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--mx-muted); }
  .topbar-actions .btn:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-text) 8%, transparent); color: var(--mx-text); }
  .topbar-actions .btn svg { width: 20px; height: 20px; }
  .plan-icon-btn, .plan-nav-btn, .adw-date-nav, .timer-float-expand { border-radius: 50%; }
  .plan-icon-btn:hover:not(:disabled), .plan-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-text) 8%, transparent); }
  .group-toggle-btn { min-height: 30px; border-radius: var(--mx-r-btn); border: 0; background: transparent; color: var(--mx-primary); font-size: var(--fs-caption); font-weight: 600; }
  .group-toggle-btn:hover { background: color-mix(in srgb, var(--mx-primary) 10%, transparent); }

  /* New task becomes a floating action button in the bottom-right corner;
     while the timer card holds the bottom-left it folds to its icon. */
  .today-actions .btn-primary, .add-task-bar .btn-primary {
    position: fixed; right: 20px; bottom: 20px; z-index: 110;
    min-height: 56px; padding: 0 22px 0 18px; gap: 10px; border-radius: var(--mx-r-fab);
    background: var(--mx-fab-bg); color: var(--mx-fab-fg); box-shadow: var(--mx-fab-shadow);
    font-size: var(--fs-body); font-weight: 600;
    animation: mx-fab-in var(--mx-medium) var(--mx-ease-pop) 260ms backwards;
  }
  .today-actions .btn-primary svg, .add-task-bar .btn-primary svg { width: 22px; height: 22px; }
  .today-actions .btn-primary:hover:not(:disabled), .add-task-bar .btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-fab-fg) 8%, var(--mx-fab-bg)); }
  &.timer-floating .today-actions .btn-primary, &.timer-floating .add-task-bar .btn-primary { font-size: 0; gap: 0; width: 56px; padding: 0; }
  .content { padding-bottom: 104px; }
  .add-task-bar { min-height: 0; margin: 0; }

  /* ── Text fields (filled, with an underline) ── */
  input, select, textarea, .select, .adw-combo-button, .adw-date-button {
    background: var(--mx-field); border: 0; border-bottom: 1.5px solid var(--mx-line-strong);
    border-radius: var(--mx-r-small) var(--mx-r-small) 2px 2px; box-shadow: none; font-size: var(--fs-body); color: var(--mx-text);
  }
  input:focus, select:focus, textarea:focus { border-color: var(--mx-primary); box-shadow: inset 0 -1.5px 0 var(--mx-primary); }
  .adw-combo-button, .adw-date-button { min-height: 46px; padding: 8px 12px 8px 14px; }
  .adw-combo.open .adw-combo-button, .adw-date-field.open .adw-date-button,
  .adw-combo-button:hover:not(:disabled), .adw-date-button:hover {
    border-color: var(--mx-primary); box-shadow: inset 0 -1.5px 0 var(--mx-primary); background: color-mix(in srgb, var(--mx-text) 5%, var(--mx-field));
  }
  .field label { font-size: var(--fs-body); font-weight: 600; color: var(--mx-muted); letter-spacing: .02em; }
  .plan-entry-row input[type="text"], .plan-entry-row input[type="text"]:focus { border: 0; background: transparent; box-shadow: none; }
  .plan-entry-row { border-radius: var(--mx-r-btn); background: var(--mx-field); border: 0; box-shadow: none; min-height: 50px; padding: 4px 6px 4px 16px; }
  .plan-entry-row:focus-within { box-shadow: inset 0 0 0 2px var(--mx-primary); }
  .plan-entry-add { border-radius: 50%; width: 40px; height: 40px; }
  .plan-entry-row.ready .plan-entry-add { background: var(--mx-primary); color: var(--mx-on-primary); }

  /* ── Menus, drop-downs, date picker ── */
  .adw-combo-popover, .adw-menu {
    border-radius: var(--mx-r-menu); padding: 6px; background: var(--mx-menu); border: 1px solid var(--mx-line);
    box-shadow: 0 12px 32px rgba(10,14,20,.22); backdrop-filter: none;
  }
  .adw-combo-option, .adw-menu-item { min-height: 42px; border-radius: calc(var(--mx-r-menu) - 6px); padding: 0 12px; font-size: var(--fs-body); position: relative; overflow: hidden; }
  .adw-combo-option:hover, .adw-menu-item:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-text) 7%, transparent); }
  .adw-combo-option.selected, .adw-menu-item.selected { background: var(--mx-primary-container); color: var(--mx-on-primary-container); }
  .adw-menu-item.destructive { color: var(--mx-error); }
  .adw-menu-item.destructive:hover { background: color-mix(in srgb, var(--mx-error) 10%, transparent); }
  .adw-menu-label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--mx-muted); }
  .adw-menu-sep { background: var(--mx-line); }
  .adw-date-popover { border-radius: var(--mx-r-card); padding: 12px; background: var(--mx-menu); border: 1px solid var(--mx-line); box-shadow: 0 12px 32px rgba(10,14,20,.22); backdrop-filter: none; }
  .adw-date-title { font-weight: 600; }
  .adw-date-weekdays { font-weight: 500; }
  .adw-date-day { border-radius: 50%; font-weight: 400; border: 1.5px solid transparent; }
  .adw-date-day:hover { background: color-mix(in srgb, var(--mx-text) 7%, transparent); }
  .adw-date-day.today { border-color: var(--mx-gold); }
  .adw-date-day.selected { background: var(--mx-primary); color: var(--mx-on-primary); box-shadow: none; }
  .adw-date-link { border-radius: var(--mx-r-btn); font-weight: 600; color: var(--mx-primary); }
  .adw-date-footer { border-top-color: var(--mx-line); }

  /* ── Switch (M3 anatomy: small handle off, large handle on, larger still while pressed) ── */
  .toggle { width: 52px; height: 32px; }
  .toggle-slider { background: var(--mx-field); border: 2px solid var(--mx-line-strong); border-radius: 16px; box-shadow: none; }
  .toggle-slider::before {
    left: 6px; top: 6px; width: 16px; height: 16px; transform: none; background: var(--mx-line-strong); box-shadow: none;
    transition: left var(--mx-medium) var(--mx-ease-pop), top var(--mx-medium) var(--mx-ease-pop),
                width var(--mx-medium) var(--mx-ease-pop), height var(--mx-medium) var(--mx-ease-pop), background-color var(--mx-short) linear;
  }
  .toggle input:checked + .toggle-slider { background: var(--mx-primary); border-color: var(--mx-primary); }
  .toggle input:checked + .toggle-slider::before { left: 22px; top: 2px; width: 24px; height: 24px; transform: none; background: var(--mx-on-primary); }
  .toggle:active .toggle-slider::before { left: 0; top: 0; width: 28px; height: 28px; }
  .toggle:active input:checked + .toggle-slider::before { left: 20px; top: 0; width: 28px; height: 28px; }

  /* ── Round check ── */
  .task-status-btn { width: 40px; height: 40px; border-radius: 50%; margin: -4px; }
  .task-status-btn svg { width: 22px; height: 22px; stroke-width: 1.8; }
  .status-todo { color: var(--mx-muted); }
  .status-todo:hover { color: var(--mx-primary); background: color-mix(in srgb, var(--mx-primary) 10%, transparent); }
  .status-done { color: var(--mx-on-primary); }
  .status-done:hover { background: color-mix(in srgb, var(--mx-primary) 10%, transparent); }
  .status-done svg { padding: 4px; border-radius: 50%; background: var(--mx-primary); stroke-width: 3; }

  /* ── Dialogs, settings, sign-in, snackbar ── */
  .modal-overlay { background: var(--shade); backdrop-filter: none; }
  .modal-card { border-radius: var(--mx-r-dialog); padding: 24px; gap: 14px; background: var(--mx-dialog); border: 0; box-shadow: 0 24px 60px rgba(10,14,20,.3); }
  .modal-actions { gap: 8px; justify-content: flex-end; margin-top: 8px; }
  .recurring-info { border-radius: var(--mx-r-small); background: var(--mx-primary-container); color: var(--mx-on-primary-container); border: 0; }
  .repeat-day { border-radius: var(--mx-r-small); border-color: var(--mx-line); }
  .repeat-day.active { background: var(--mx-primary-container); color: var(--mx-on-primary-container); border-color: transparent; }
  .repeat-segmented { border-radius: var(--mx-r-btn); border: 1.5px solid var(--mx-line-strong); overflow: hidden; }
  .repeat-segmented button { min-height: 38px; font-weight: 600; }
  .repeat-segmented button + button { border-left-color: var(--mx-line-strong); }
  .repeat-segmented button.active { background: var(--mx-primary-container); color: var(--mx-on-primary-container); }
  .settings-panel { background: transparent; border-bottom: 0; padding: 12px 16px; }
  .settings-card { border-radius: var(--mx-r-dialog); border: 1px solid var(--mx-line); background: var(--mx-surface); box-shadow: none; padding: 22px; }
  .settings-footer { border-top-color: var(--mx-line); }
  .login-container { background: var(--mx-page); }
  .login-card { border-radius: var(--mx-r-dialog); border: 1px solid var(--mx-line); background: var(--mx-surface); box-shadow: none; }
  .toast, .toast-success, .toast-error, .toast-warning {
    left: 16px; right: auto; bottom: 20px; transform: none; max-width: min(520px, calc(100vw - 32px));
    min-height: 48px; padding: 13px 16px; border-radius: var(--mx-r-small); border: 0; text-align: left;
    background: var(--mx-inverse); color: var(--mx-on-inverse); box-shadow: 0 8px 24px rgba(10,14,20,.28);
    font-size: var(--fs-body); font-weight: 500; backdrop-filter: none;
  }
  &.timer-floating .toast { top: auto; bottom: 190px; }

  /* ── Timer ── */
  .timer-fullscreen, .timer-fullscreen-pomodoro, .timer-fullscreen-break { background: var(--mx-page); }
  .timer-fullscreen-label, .timer-plan-picker label, .timer-float-label { text-transform: none; letter-spacing: .02em; font-size: var(--fs-caption); font-weight: 600; color: var(--mx-primary); }
  .timer-fullscreen-time { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .clock-face { background: var(--mx-surface); border: 0; box-shadow: none; }
  .clock-tick { background: var(--mx-dim); }
  .hand-hour, .hand-minute { background: var(--mx-text); border-radius: 4px; }
  .hand-second { background: var(--mx-gold); }
  .timer-fullscreen-progress { height: 6px; background: var(--mx-line); border-radius: 3px; }
  .timer-fullscreen-progress-bar { background: var(--mx-primary); border-radius: 3px; }
  .timer-adjust-panel { border-radius: var(--mx-r-btn); background: var(--mx-surface); border: 1px solid var(--mx-line); box-shadow: none; backdrop-filter: none; padding: 6px; }
  .timer-adjust-btn { border-radius: 50%; border: 0; background: var(--mx-primary-container); color: var(--mx-on-primary-container); }
  .timer-stop-btn { min-height: 52px; border-radius: var(--mx-r-fab); padding: 0 30px; }
  .timer-minimize-btn { border-radius: var(--mx-r-btn); border: 0; background: transparent; color: var(--mx-primary); font-weight: 600; }
  .timer-float { left: 16px; right: auto; bottom: 20px; border-radius: var(--mx-r-card); border: 1px solid var(--mx-line); background: var(--mx-surface); box-shadow: 0 12px 32px rgba(10,14,20,.25); }

  /* ── Plan, shared parts ── */
  .plan-now-badge { border-radius: var(--mx-r-small); background: var(--mx-gold-container); color: var(--mx-on-gold-container); }
  .plan-headerbar-title { border-radius: var(--mx-r-btn); }
  .plan-linked-buttons { border-radius: var(--mx-r-btn); background: var(--mx-surface-2); }

  /* ════ Motion: Material mechanics, Spring timing ════ */
  .btn, .tab-btn, .plan-icon-btn, .plan-nav-btn, .group-toggle-btn, .adw-combo-option, .adw-menu-item, .adw-date-day,
  .task-status-btn, .timer-adjust-btn, .adw-combo-button, .adw-date-button, .today-item, .task-item, .repeat-day {
    transition: background-color var(--mx-short) linear, color var(--mx-short) linear, border-color var(--mx-short) linear,
                box-shadow var(--mx-short) var(--mx-ease), border-radius var(--mx-medium) var(--mx-ease-pop);
  }
  input, textarea, select { transition: border-color var(--mx-short) linear, box-shadow var(--mx-short) var(--mx-ease); }
  .toggle-slider { transition: background-color var(--mx-short) linear, border-color var(--mx-short) linear; }

  /* Expanders */
  .settings-slide-enter-active, .settings-slide-leave-active, .group-collapse-enter-active, .group-collapse-leave-active { overflow: hidden; }
  .settings-slide-enter-active, .group-collapse-enter-active { transition: height var(--mx-long) var(--mx-ease-enter), padding var(--mx-long) var(--mx-ease-enter), opacity 200ms linear; }
  .settings-slide-leave-active, .group-collapse-leave-active { transition: height 200ms var(--mx-ease-exit), padding 200ms var(--mx-ease-exit), opacity 150ms linear; }
  .settings-slide-enter-from, .settings-slide-leave-to, .group-collapse-enter-from, .group-collapse-leave-to { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

  /* Menus unfold from their anchor and their items rise one after another.
     The last item finishes inside the frame's own 420 ms, because Vue drops
     the transition classes when the frame is done. */
  .flyout-enter-active { transition: clip-path var(--mx-medium) var(--mx-ease-enter), opacity 60ms linear; }
  .flyout-enter-from { clip-path: inset(0 0 100% 0 round var(--mx-r-menu)); opacity: 0; }
  .flyout-enter-to { clip-path: inset(-40px -40px -40px -40px round var(--mx-r-menu)); }
  .flyout-leave-active { transition: opacity var(--mx-short) linear; }
  .flyout-leave-to { opacity: 0; }
  .flyout-enter-active > * { transition: opacity 200ms linear, transform 270ms var(--mx-ease-pop); }
  .flyout-enter-from > * { opacity: 0; transform: translateY(-8px); }
  .flyout-enter-active > :nth-child(2) { transition-delay: 30ms; }
  .flyout-enter-active > :nth-child(3) { transition-delay: 60ms; }
  .flyout-enter-active > :nth-child(4) { transition-delay: 90ms; }
  .flyout-enter-active > :nth-child(5) { transition-delay: 120ms; }
  .flyout-enter-active > :nth-child(n+6) { transition-delay: 150ms; }
  .plan-row-group.popover-up .adw-menu.flyout-enter-from,
  .task-item.popover-up .adw-menu.flyout-enter-from,
  .today-item.popover-up .adw-menu.flyout-enter-from { clip-path: inset(100% 0 0 0 round var(--mx-r-menu)); }

  /* Snackbar */
  .toast-enter-active { transition: opacity var(--mx-short) linear, transform var(--mx-medium) var(--mx-ease-pop); transform-origin: 0 100%; }
  .toast-leave-active { transition: opacity var(--mx-short) linear; }
  .toast-enter-from { opacity: 0; transform: translateY(16px) scale(.9); }
  .toast-leave-to { opacity: 0; }

  /* Timer card */
  .timer-float-enter-active { transition: opacity 200ms linear 100ms, transform var(--mx-long) var(--mx-ease-pop) 100ms; transform-origin: 0 100%; }
  .timer-float-leave-active { transition: opacity var(--mx-short) linear, transform 200ms var(--mx-ease-exit); }
  .timer-float-enter-from { opacity: 0; transform: scale(.7); }
  .timer-float-leave-to { opacity: 0; transform: scale(.9); }

  /* Rows arriving, plan rows expanding, a task being ticked */
  .task-groups, .today-grid, .task-item, .today-item, .empty-state, .task-group-empty { animation: mx-fade 200ms linear backwards; }
  .plan-row-detail { animation: mx-fade 200ms linear backwards, mx-drop var(--mx-long) var(--mx-ease-enter) backwards; }

  .task-status-btn.just-done svg path { stroke-dasharray: 23; animation: mx-check var(--mx-medium) var(--mx-ease-enter) 120ms backwards; }
  .task-status-btn.just-done svg { animation: mx-pop var(--mx-medium) var(--mx-ease-pop) backwards; }

  /* Ripple (js/ripple.js adds the spans on press) */
  .md-ripple-box { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
  .md-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .14; transform: scale(0); animation: md-ripple 450ms var(--mx-ease) forwards; }
  .md-ripple.out { opacity: 0; transition: opacity var(--mx-short) linear; }

  .loading-state .spinner { color: var(--mx-primary); }
  .plan-skeleton-row { animation: plan-shimmer 1.6s var(--mx-ease) infinite; }
}

:root[data-ui-style="material"] {
  --mx-page: #eef2f8; --mx-surface: #ffffff; --mx-surface-2: #e4ebf5; --mx-field: #e9eef6; --mx-menu: #ffffff; --mx-dialog: #ffffff;
  --mx-line: #d9e1ec; --mx-line-strong: #8d9bb0;
  --mx-text: #151d28; --mx-muted: #4f5d70; --mx-dim: #8090a6;
  --mx-primary: #36598a; --mx-on-primary: #ffffff; --mx-primary-container: #d5e3fa; --mx-on-primary-container: #10294a;
  --mx-mint: #23876e; --mx-mint-container: #c4f0e2; --mx-on-mint-container: #0d3a2f;
  --mx-gold: #b97f12; --mx-gold-container: #ffe1a3; --mx-on-gold-container: #3f2b00;
  --mx-error: #c0352b; --mx-on-error: #fff; --mx-error-container: #ffdad5; --mx-on-error-container: #6b130d;
  --mx-inverse: #1f2a38; --mx-on-inverse: #f1f5fb;
  --mx-fab-bg: #ffe1a3; --mx-fab-fg: #3f2b00; --mx-fab-shadow: 0 8px 22px rgba(185,127,18,.35);
  --mx-r-card: 24px; --mx-r-small: 12px; --mx-r-btn: 16px; --mx-r-fab: 20px; --mx-r-menu: 18px; --mx-r-dialog: 28px;
  /* Springs, written out with linear(): about 7 % and 16 % overshoot. */
  --mx-spring: linear(0, .009, .035 2.1%, .141 4.4%, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.059 22.4%, 1.071 25.6%, 1.065 28.9%, 1.044 33.4%, 1.012 41.5%, .997 49.6%, .993 56.5%, 1 75%, 1);
  --mx-spring-big: linear(0, .013 .9%, .052 1.9%, .209 4%, .469 6.6%, .755 9.6%, .962 12.4%, 1.087 15.2%, 1.15 17.9%, 1.163 20.3%, 1.148 22.9%, 1.109 25.8%, 1.003 33.7%, .977 37.6%, .966 41.3%, .968 45.3%, 1.006 59.9%, 1.008 67.1%, 1);
  --mx-ease: cubic-bezier(.2, 0, 0, 1);
  --mx-ease-enter: var(--mx-spring);
  --mx-ease-exit: cubic-bezier(.3, 0, .8, .15);
  --mx-ease-pop: var(--mx-spring-big);
  --mx-medium: 420ms; --mx-long: 600ms;

  &[data-theme="dark"] {
    --mx-page: #11151b; --mx-surface: #1c222b; --mx-surface-2: #252d38; --mx-field: #232b35; --mx-menu: #222a34; --mx-dialog: #202833;
    --mx-line: #2c3644; --mx-line-strong: #6a7a90;
    --mx-text: #eef2f8; --mx-muted: #b6c0cd; --mx-dim: #8494a8;
    --mx-primary: #a9c6f2; --mx-on-primary: #0c2443; --mx-primary-container: #2c4569; --mx-on-primary-container: #d8e6fc;
    --mx-mint: #8fd8c3; --mx-mint-container: #1c4a3e; --mx-on-mint-container: #c8f3e6;
    --mx-gold: #f2c56b; --mx-gold-container: #5c4410; --mx-on-gold-container: #ffe2a8;
    --mx-error: #ffb3aa; --mx-on-error: #5f1009; --mx-error-container: #7d1f17; --mx-on-error-container: #ffdad5;
    --mx-inverse: #e6ebf2; --mx-on-inverse: #18202a;
    --mx-fab-bg: #f2c56b; --mx-fab-fg: #2f2100; --mx-fab-shadow: 0 8px 22px rgba(0,0,0,.45);
  }

  /* ── Title bar: a connected button group; the selected tab morphs into a pill ── */
  .topbar { min-height: 60px; padding: 8px 12px; gap: 8px; background: var(--mx-page); border-bottom: 0; box-shadow: none; backdrop-filter: none; }
  .topbar-left { gap: 10px; }
  .topbar-left svg { width: 28px; height: 28px; filter: none; }
  .topbar-title { font-size: var(--fs-body); font-weight: 800; letter-spacing: -.02em; }
  .topbar-tabs { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 3px; }
  .tab-btn, .topbar-tabs.has-indicator .tab-btn.active {
    min-height: 42px; padding: 0 15px; gap: 6px; border-radius: 8px; box-shadow: none; position: relative; overflow: hidden;
    background: var(--mx-surface-2); color: var(--mx-muted); font-size: var(--fs-body); font-weight: 700;
  }
  .tab-btn:first-of-type { border-radius: 21px 8px 8px 21px; }
  .tab-btn:last-of-type { border-radius: 8px 21px 21px 8px; }
  .tab-btn svg { width: 17px; height: 17px; }
  .tab-btn:hover { background: color-mix(in srgb, var(--mx-text) 9%, var(--mx-surface-2)); color: var(--mx-text); }
  .tab-btn.active, .topbar-tabs.has-indicator .tab-btn.active { border-radius: 21px; background: var(--mx-primary); color: var(--mx-on-primary); }
  .tab-btn:active { border-radius: 14px; transform: scale(.95); }
  .tab-btn { transition: border-radius 520ms var(--mx-spring-big), background-color 150ms linear, color 150ms linear, transform 420ms var(--mx-spring-big); }
  /* At the narrowest density (360 px and so) the three tabs only fit as words:
     the icons step aside, the labels keep their size. */
  &[data-ui-density="3"] .tab-btn { padding: 0 12px; }
  &[data-ui-density="3"] .tab-btn svg { display: none; }

  /* ── Page ── */
  .content { max-width: 980px; padding-top: 14px; }
  .today-hero { margin: 4px 4px 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .today-hero-title { font-size: var(--fs-display); line-height: 1.25; font-weight: 800; letter-spacing: -.03em; }
  .today-hero-stats { gap: 6px; }
  .today-stat-pill {
    height: 30px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 15px; border: 0; box-shadow: none;
    background: var(--mx-primary-container); color: var(--mx-on-primary-container); font-size: var(--fs-caption); font-weight: 700;
  }
  .today-stat-pill:nth-child(3) { background: var(--mx-mint-container); color: var(--mx-on-mint-container); }
  .today-stat-pill:nth-child(4) { background: var(--mx-gold-container); color: var(--mx-on-gold-container); }
  .today-stat-pill.today-stat-pill-overdue { background: var(--mx-error-container); color: var(--mx-on-error-container); }
  .today-actions { margin: 0 4px 20px; gap: 8px; justify-content: flex-start; }
  .today-grid { gap: 26px 22px; }
  .today-section, .today-section:hover { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; }
  .today-title, .group-header { font-size: var(--fs-body); font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px 6px; padding: 0; color: var(--mx-text); }
  .group-header { margin-left: 2px; }

  /* ── Bubble rows: one rounded block per row, 6 px apart, lifting a little on hover ── */
  .today-list, .task-list { gap: 6px; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .today-item, .task-item, .today-item:hover, .task-item:hover {
    background: var(--mx-surface); border: 0; border-radius: 22px; padding: 11px 12px 11px 14px; min-height: 60px; align-items: center;
    box-shadow: 0 1px 2px rgba(20,30,45,.06);
  }
  .today-item + .today-item, .task-item + .task-item { border-top: 0; }
  .today-item:hover, .task-item:hover { box-shadow: 0 6px 16px rgba(20,30,45,.12); transform: translateY(-1px); }
  .today-item, .task-item { transition: box-shadow 300ms var(--mx-ease), transform 420ms var(--mx-spring-big), background-color 150ms linear; }
  .today-subhead { font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0; color: var(--mx-muted); padding: 10px 8px 2px; }
  .today-subhead:first-child { padding-top: 0; }
  .today-subhead-overdue { color: var(--mx-error); }
  .today-item-title, .task-name { font-size: var(--fs-body); font-weight: 600; }
  .today-item-meta { font-size: var(--fs-caption); color: var(--mx-muted); }
  .today-item-due { white-space: nowrap; }
  .today-item-dot { width: 10px; height: 10px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
  .today-item-percent { font-size: var(--fs-body); font-weight: 800; color: var(--mx-primary); }
  .task-group-empty { border-radius: 22px; background: var(--mx-surface); border: 0; box-shadow: none; color: var(--mx-muted); padding: 16px; }
  .task-group-body { overflow: visible; }
  .task-groups { gap: 26px; }
  .task-count { background: var(--mx-primary-container); color: var(--mx-on-primary-container); border: 0; box-shadow: none; border-radius: 12px; font-weight: 800; }
  .badge { border-radius: 10px; border: 0; box-shadow: none; background: var(--mx-surface-2); color: var(--mx-muted); font-weight: 700; }
  .badge-overdue { background: var(--mx-error-container); color: var(--mx-on-error-container); }

  /* Buttons round off and shrink a touch while pressed. */
  .btn:active:not(:disabled) { border-radius: 24px; transform: scale(.96); }
  .btn { transition: background-color 150ms linear, border-radius 420ms var(--mx-spring-big), transform 420ms var(--mx-spring-big), box-shadow 200ms var(--mx-ease); }
  .today-actions .btn-primary:active:not(:disabled), .add-task-bar .btn-primary:active:not(:disabled) { border-radius: 30px; transform: scale(.94); }

  /* Plan */
  .plan-headerbar-week { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; }
  .plan-boxed-list { background: transparent; border: 0; box-shadow: none; gap: 6px; border-radius: 0; }
  .plan-row-group, .plan-row-group:first-child, .plan-row-group:last-child, .plan-row-group:only-child { background: var(--mx-surface); border: 0; border-radius: 22px; box-shadow: 0 1px 2px rgba(20,30,45,.06); }
  .plan-row-title { font-size: var(--fs-body); font-weight: 700; }
  .plan-row-accent { width: 6px; height: 30px; border-radius: 3px; }
  .plan-entry-row { border-radius: 26px; }

  .modal-card h3, .settings-card h3 { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; }
  .login-header h1 { font-weight: 800; letter-spacing: -.03em; }
  .timer-fullscreen-time { font-weight: 800; letter-spacing: -.03em; }

  /* Spinner: a thick arc whose head runs ahead of its tail */

  .spinner {
    border: 4px solid currentColor;
    -webkit-mask: conic-gradient(from var(--ring-tail), #000 calc(var(--ring-head) - var(--ring-tail) + 14deg), #0000 0);
    mask: conic-gradient(from var(--ring-tail), #000 calc(var(--ring-head) - var(--ring-tail) + 14deg), #0000 0);
    animation: bounce-spin 1.4s linear infinite, bounce-head 1.1s cubic-bezier(.33, 0, .2, 1) infinite, bounce-tail 1.1s cubic-bezier(.8, 0, .67, 1) infinite;
  }
  .btn .spinner { border-width: 2px; }

  /* ════ Motion: everything that moves rides a spring ════ */
  .tab-panel-leave-active { transition: opacity 90ms linear; }
  .tab-panel-leave-to { opacity: 0; }
  .tab-panel-enter-active { transition: opacity 180ms linear, transform 600ms var(--mx-spring); }
  .tab-panel-enter-from { opacity: 0; transform: translateX(44px); }
  .app-shell[data-tab-dir="back"] .tab-panel-enter-from { transform: translateX(-44px); }
  .app-fade-enter-active { transition: opacity 250ms linear, transform 600ms var(--mx-spring); }
  .app-fade-leave-active { transition: opacity 100ms linear; }
  .app-fade-enter-from { opacity: 0; transform: translateY(30px) scale(.97); }
  .app-fade-leave-to { opacity: 0; }

  /* Dialogs pop in with an overshoot. app.js gives Vue the 600 ms explicitly
     (modalDuration), since the overlay itself is done after 250 ms. */
  .modal-pop-enter-active { transition: opacity 250ms linear; }
  .modal-pop-leave-active { transition: opacity 180ms linear; }
  .modal-pop-enter-from, .modal-pop-leave-to { opacity: 0; }
  .modal-pop-enter-active .modal-card { transition: transform 600ms var(--mx-spring-big), opacity 120ms linear; }
  .modal-pop-leave-active .modal-card { transition: transform 180ms var(--mx-ease-exit), opacity 150ms linear; }
  .modal-pop-enter-from .modal-card { transform: translateY(24px) scale(.86); opacity: 0; }
  .modal-pop-leave-to .modal-card { transform: scale(.95); opacity: 0; }

  /* Full-screen timer pops in; minimizing folds it into the bottom-left card. */
  .timer-overlay-enter-active { transition: opacity 200ms linear, transform 650ms var(--mx-spring); }
  .timer-overlay-leave-active { transition: opacity 200ms linear, transform 320ms var(--mx-ease-exit); }
  .timer-overlay-enter-from { opacity: 0; transform: scale(.8); }
  .timer-overlay-leave-to { opacity: 0; transform: scale(.96); }
  &.timer-floating .timer-overlay-leave-active { transform-origin: 126px calc(100% - 84px); }
  &.timer-floating .timer-overlay-leave-to { transform: scale(.4); }

  /* ── Hard hours (2026-10-15): gold tonal bar, pill controls ── */
  --hard-accent: var(--mx-gold);
  .hard-bar { border-radius: var(--mx-r-btn); border: 0; background: var(--mx-gold-container); color: var(--mx-on-gold-container); padding: 10px 8px 10px 16px; }
  .hard-bar .hard-mark { color: var(--mx-on-gold-container); }
  .hard-bar .btn-ghost { color: var(--mx-on-gold-container); }
  .hard-bar .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--mx-on-gold-container) 10%, transparent); }
  .hard-later { border-radius: var(--mx-r-btn); border: 1.5px dashed var(--mx-line-strong); color: var(--mx-muted); font-weight: 600; }
  .hard-later:hover { background: color-mix(in srgb, var(--mx-text) 6%, transparent); color: var(--mx-text); }
  .hard-item { border-radius: var(--mx-r-card); }
  .today-section-folded, .today-section-folded:hover { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .hard-goal { color: var(--mx-primary); }
  .timer-energy-btn { border-radius: 999px; border: 1.5px solid var(--mx-line-strong); background: transparent; color: var(--mx-text); font-weight: 600; }
  .timer-energy-btn:hover { background: color-mix(in srgb, var(--mx-text) 7%, transparent); }
  .timer-energy-btn.active, .timer-float-energy .timer-energy-btn.active { background: var(--mx-primary-container); color: var(--mx-on-primary-container); border-color: transparent; }
  .timer-float-energy .timer-energy-btn { color: var(--mx-muted); }
  .kickoff-preview { border-radius: var(--mx-r-small); background: var(--mx-field); border: 0; }
  .kickoff-dots span { background: var(--mx-line-strong); }
  .kickoff-dots span.active { background: var(--mx-primary); }
  .settings-group-title { color: var(--mx-primary); letter-spacing: .02em; text-transform: none; font-size: var(--fs-caption); }
  .hard-hours-time { border-radius: var(--mx-r-small); }
  .hard-day { width: 36px; height: 36px; background: var(--mx-surface-2); color: var(--mx-muted); font-weight: 700; }
  .hard-day:hover { background: color-mix(in srgb, var(--mx-text) 9%, var(--mx-surface-2)); color: var(--mx-text); }
  .hard-day.active, .hard-day.active:hover { background: var(--mx-primary); color: var(--mx-on-primary); }
}

/* Keyframes and registered properties the rules above refer to (top level:
   at-rules other than conditional ones cannot be nested). */
@property --ring-head { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ring-tail { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes mx-fab-in { from { opacity: 0; transform: scale(.5); } }
@keyframes mx-fade { from { opacity: 0; } }
@keyframes mx-drop { from { transform: translateY(-8px); } }
@keyframes mx-check { from { stroke-dashoffset: -23; } }
@keyframes mx-pop { from { transform: scale(.5); } }
@keyframes md-ripple { to { transform: scale(1); } }
@keyframes bounce-spin { to { transform: rotate(360deg); } }
@keyframes bounce-head { from { --ring-head: 0deg; } to { --ring-head: 360deg; } }
@keyframes bounce-tail { from { --ring-tail: 0deg; } to { --ring-tail: 360deg; } }
@keyframes plan-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}