/* ─────────────────────────────────────────────────────────────────
  OrbitTrack – Pane look (Windows 11)
  The Pane interface style's look, picked from three drafts on 2026-10-13
  (option A, "like Windows Settings"): neutral Mica-grey window, Segoe UI
  Variable, 4 px controls and 8 px cards and flyouts, a SelectorBar of text
  tabs in the title bar, and one small card per task, event or goal with the
  group heading outside the cards. The accent stays OrbiTrack's slate blue.
  Loaded after style.css and motion-windows.css and switched on with them
  (Settings → Style, js/ui-style.js). Every rule sits under
  :root[data-ui-style="windows"] so it outranks the density rules in
  style.css (:root[data-ui-density] .x) without !important.
  ───────────────────────────────────────────────────────────────── */

:root[data-ui-style="windows"] {
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Dark: Win11 Mica base, layer fill and strokes, as solid greys. */
  --bg: #202020; --window-bg: #202020; --view-bg: #272727;
  --card-bg: #2b2b2b; --bg-card: #2b2b2b; --card-hover: #323232; --bg-hover: #323232;
  --bg-input: #2d2d2d; --headerbar-bg: #202020;
  --button-bg: #2d2d2d; --button-hover: #333333;
  --border: #3b3b3b; --stroke-strong: #474747; --stroke-card: #1c1c1c;
  --text: #ffffff; --text-muted: #c8c8c8; --text-dim: #9a9a9a;
  --primary: #8fb1d6; --primary-hover: #a3c1e2; --on-primary: #0f1a26;
  --primary-ghost: rgba(143,177,214,.14);
  --danger: #ff99a4; --danger-hover: #ff99a4; --success: #6ccb5f; --warning: #fce100;
  --shade: rgba(0,0,0,.42);
  --shadow: 0 8px 16px rgba(0,0,0,.26);
  --shadow-soft: none;
  --flyout-shadow: 0 8px 16px rgba(0,0,0,.26);
  --radius: 8px; --radius-sm: 4px;

  &[data-theme="light"] {
    --bg: #f3f3f3; --window-bg: #f3f3f3; --view-bg: #f9f9f9;
    --card-bg: #fbfbfb; --bg-card: #fbfbfb; --card-hover: #f5f5f5; --bg-hover: #f0f0f0;
    --bg-input: #ffffff; --headerbar-bg: #f3f3f3;
    --button-bg: #fbfbfb; --button-hover: #f6f6f6;
    --border: #e5e5e5; --stroke-strong: #d1d1d1; --stroke-card: #e5e5e5;
    --text: #1b1b1b; --text-muted: #5d5d5d; --text-dim: #8a8a8a;
    --primary: #3f6a96; --primary-hover: #4f7aa6; --on-primary: #ffffff;
    --primary-ghost: rgba(63,106,150,.10);
    --danger: #c42b1c; --danger-hover: #c42b1c; --success: #0f7b0f; --warning: #9d5d00;
    --shade: rgba(0,0,0,.30);
    --shadow: 0 8px 16px rgba(0,0,0,.14);
    --flyout-shadow: 0 8px 16px rgba(0,0,0,.14);
  }

  body { font-family: var(--font); font-size: var(--fs-body); background: var(--window-bg); }
  body::before { display: none; }

  /* Win11 sets type in Regular and Semibold only. */
  .today-hero-title, .topbar-title, .today-title, .group-header, .modal-card h3,
  .plan-row-title, .adw-date-title, .settings-card h3, .timer-fullscreen-time,
  .plan-headerbar-week, .login-header h1 { font-weight: 600; letter-spacing: 0; }
  .adw-date-weekdays, .adw-date-day, .adw-date-link, .today-item-percent,
  .timer-fullscreen-label, .timer-fullscreen-round, .timer-adjust-label { font-weight: 400; }
  .today-hero-title, .login-header h1, .timer-fullscreen-time { font-family: var(--font-display); }

  :focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }

  /* ── Buttons (Button / AccentButton) ── */
  .btn {
    min-height: 32px; padding: 0 12px; border-radius: 4px; font-size: var(--fs-body); font-weight: 400;
    background: var(--button-bg); color: var(--text);
    border: 1px solid var(--border); border-bottom-color: var(--stroke-strong);
    box-shadow: none;
  }
  .btn:hover:not(:disabled) { background: var(--button-hover); box-shadow: none; }
  .btn-primary, .btn-primary:hover:not(:disabled) {
    background: var(--primary); color: var(--on-primary);
    border-color: color-mix(in srgb, var(--primary) 80%, #fff);
    border-bottom-color: color-mix(in srgb, var(--primary) 70%, #000);
  }
  .btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
  .btn-danger, .btn-danger:hover:not(:disabled) { background: #c42b1c; color: #fff; border-color: #c42b1c; }
  .btn-danger:hover:not(:disabled) { background: #b3261a; }
  .btn-ghost { background: transparent; border-color: transparent; }
  .btn-outline { background: var(--button-bg); border-color: var(--border); border-bottom-color: var(--stroke-strong); color: var(--text); }
  .btn-ghost:hover:not(:disabled), .btn-outline:hover:not(:disabled) { background: var(--button-hover); color: var(--text); }
  .btn-ghost:hover:not(:disabled) { border-color: transparent; }
  .btn-delete:hover:not(:disabled) { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

  /* ── Title bar: app mark, a SelectorBar of text tabs, icon buttons ── */
  .topbar {
    min-height: 48px; padding: 6px 12px; gap: 8px;
    background: var(--window-bg); border-bottom: 0; box-shadow: none; backdrop-filter: none;
  }
  .topbar-left { gap: 10px; }
  .topbar-left svg { width: 20px; height: 20px; filter: none; }
  .topbar-title { font-size: var(--fs-body); font-weight: 400; }
  .topbar-tabs { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 2px; }
  .tab-btn {
    min-height: 36px; padding: 0 12px; border-radius: 4px; font-size: var(--fs-body); font-weight: 400;
    color: var(--text-muted); background: transparent; box-shadow: none;
  }
  .tab-btn svg { display: none; }
  .tab-btn:hover { background: var(--button-hover); color: var(--text); }
  .tab-btn.active, .topbar-tabs.has-indicator .tab-btn.active { color: var(--text); background: transparent; box-shadow: none; }
  /* SelectorBar pill: 16 px wide, centred under the selected label. The
     script gives the active tab's left and right insets; centring them here
     keeps the pill's two edges independent, so the stretch in
     motion-windows.css still runs as it slides. */
  .tab-indicator {
    top: calc(var(--tab-ind-top) + var(--tab-ind-height) - 3px);
    height: 3px;
    left: calc(var(--tab-ind-left) + (100% - var(--tab-ind-left) - var(--tab-ind-right)) / 2 - 8px);
    right: calc(var(--tab-ind-right) + (100% - var(--tab-ind-left) - var(--tab-ind-right)) / 2 - 8px);
    border-radius: 2px; background: var(--primary); box-shadow: none;
  }
  .topbar-actions .btn {
    width: 36px; min-width: 36px; min-height: 36px; padding: 0;
    border: 0; border-radius: 4px; background: transparent;
  }
  .topbar-actions .btn:hover:not(:disabled) { background: var(--button-hover); }
  .topbar-actions .btn svg { width: 16px; height: 16px; }

  /* ── Text fields (TextBox: an accent underline when focused) ── */
  input, select, textarea, .select, .adw-combo-button, .adw-date-button {
    border-radius: 4px; background: var(--bg-input); box-shadow: none; font-size: var(--fs-body);
    border: 1px solid var(--border); border-bottom-color: var(--stroke-strong);
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--border); border-bottom-color: var(--primary); box-shadow: inset 0 -1px 0 var(--primary);
  }
  .adw-combo-button, .adw-date-button { min-height: 32px; padding: 5px 11px; }
  .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(--border); border-bottom-color: var(--stroke-strong); background: var(--button-hover); box-shadow: none;
  }
  .field label { font-size: var(--fs-body); color: var(--text); font-weight: 400; }
  .checkbox-row { font-size: var(--fs-body); color: var(--text); }
  .plan-entry-row input[type="text"], .plan-entry-row input[type="text"]:focus { border: 0; background: transparent; box-shadow: none; }
  .timer-adjust-input, .timer-adjust-input:focus { border-radius: 4px; }

  /* ── Flyouts (MenuFlyout, ComboBox drop-down, CalendarView) ── */
  .adw-combo-popover, .adw-date-popover, .adw-menu {
    border-radius: 8px; padding: 4px;
    background: color-mix(in srgb, var(--card-bg) 92%, var(--window-bg));
    border: 1px solid var(--stroke-card); box-shadow: var(--flyout-shadow); backdrop-filter: blur(30px) saturate(1.25);
  }
  .adw-date-popover { padding: 8px; }
  .adw-combo-option, .adw-menu-item { min-height: 32px; border-radius: 4px; padding: 0 12px; font-size: var(--fs-body); position: relative; }
  .adw-combo-option:hover, .adw-menu-item:hover:not(:disabled) { background: var(--button-hover); }
  .adw-combo-option.selected, .adw-menu-item.selected { background: var(--button-hover); }
  .adw-combo-option.selected::before, .adw-menu-item.selected::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px;
    border-radius: 2px; background: var(--primary);
  }
  .adw-menu-item.destructive:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
  .adw-menu-label { font-size: var(--fs-caption); letter-spacing: 0; text-transform: none; font-weight: 400; }
  .adw-menu-sep { background: var(--border); }
  .adw-date-nav { border-radius: 4px; background: transparent; }
  .adw-date-nav:hover { background: var(--button-hover); }
  .adw-date-day { border-radius: 50%; font-size: 13px; }
  .adw-date-day.today { border-color: transparent; color: var(--primary); font-weight: 600; }
  .adw-date-day.selected { background: var(--primary); color: var(--on-primary); box-shadow: none; }
  .adw-date-link { border-radius: 4px; font-weight: 400; color: var(--primary); }
  .adw-date-footer { border-top-color: var(--border); }

  /* ── ToggleSwitch, 40 × 20: the knob grows on hover, stretches while pressed ── */
  .toggle { width: 40px; height: 20px; }
  .toggle-slider { background: transparent; border: 1px solid var(--text-muted); box-shadow: none; }
  .toggle-slider::before { width: 12px; height: 12px; left: 3px; top: 3px; background: var(--text-muted); box-shadow: none; }
  .toggle:hover .toggle-slider::before { transform: scale(1.17); }
  .toggle input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary); }
  .toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--on-primary); }
  .toggle:hover input:checked + .toggle-slider::before { transform: translateX(20px) scale(1.17); }
  .toggle:active .toggle-slider::before { width: 17px; transform: none; }
  .toggle:active input:checked + .toggle-slider::before { transform: translateX(15px); }

  /* ── Round check (Microsoft To Do) ── */
  .task-status-btn { width: 28px; height: 28px; border-radius: 50%; }
  .task-status-btn svg { width: 20px; height: 20px; stroke-width: 1.5; }
  .status-todo { color: var(--text-muted); }
  .status-todo:hover { color: var(--primary); background: transparent; }
  .status-done { color: var(--on-primary); }
  .status-done:hover { background: transparent; }
  .status-done svg { padding: 4px; border-radius: 50%; background: var(--primary); stroke-width: 3; }

  /* ── Badges and counts ── */
  .badge, .task-count, .today-stat-pill {
    border-radius: 4px; border: 0; box-shadow: none; font-weight: 400;
    background: var(--button-hover); color: var(--text-muted);
  }
  .badge-recurring { color: var(--text-muted); }
  .badge-overdue, .today-stat-pill.today-stat-pill-overdue { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); border: 0; }

  /* ── Page ── */
  .content { max-width: 1000px; padding: 8px 16px 48px; }
  .today-hero { margin: 4px 0 12px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .today-hero-title { font-size: var(--fs-display); line-height: 1.25; }
  .today-hero-stats { gap: 6px; }
  .today-stat-pill { padding: 2px 8px; font-size: var(--fs-caption); }
  .today-actions, .add-task-bar { gap: 8px; margin-bottom: 20px; }
  .today-grid { gap: 28px 24px; }
  .today-section, .today-section:hover {
    background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; border-radius: 0;
  }
  .today-title, .group-header { font-size: var(--fs-body); font-weight: 600; margin: 0 0 8px; padding: 0; }
  .loading-state, .empty-state { color: var(--text-muted); }

  /* ── One card per row (Windows Settings' SettingsCard) ── */
  .task-list, .today-list { gap: 2px; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .today-item, .task-item {
    background: var(--card-bg); border: 1px solid var(--stroke-card); border-radius: 4px;
    padding: 10px 12px; min-height: 56px; align-items: center; box-shadow: none;
  }
  .today-item:hover, .task-item:hover { background: var(--card-hover); border-color: var(--stroke-card); box-shadow: none; }
  .today-subhead {
    font-size: var(--fs-caption); letter-spacing: 0; text-transform: none; font-weight: 600;
    color: var(--text-muted); padding: 14px 2px 6px;
  }
  .today-subhead:first-child { padding-top: 0; }
  .today-subhead-overdue { color: var(--danger); }
  .today-item-title, .task-name { font-size: var(--fs-body); font-weight: 400; }
  .today-item-meta { font-size: var(--fs-caption); color: var(--text-muted); }
  .today-item-percent { font-size: var(--fs-body); color: var(--text); }
  .task-group-body { overflow: visible; }
  .task-groups { gap: 28px; }
  .group-toggle-btn { min-height: 28px; border-radius: 4px; border: 0; background: transparent; font-size: var(--fs-caption); }
  .group-toggle-btn:hover { background: var(--button-hover); }
  .task-group-empty {
    border-radius: 4px; box-shadow: none; border: 1px solid var(--stroke-card);
    background: var(--card-bg); color: var(--text-muted); font-size: var(--fs-body);
  }
  .plan-icon-btn { border-radius: 4px; }
  .plan-icon-btn:hover:not(:disabled) { background: var(--button-hover); }

  /* ── Plan ── */
  .plan-nav-btn { border-radius: 4px; }
  .plan-headerbar-title { border-radius: 4px; }
  .plan-headerbar-week { font-size: var(--fs-title); }
  .plan-now-badge { border-radius: 4px; }
  .plan-entry-row {
    border-radius: 4px; box-shadow: none; background: var(--bg-input);
    border-color: var(--border); border-bottom-color: var(--stroke-strong);
  }
  .plan-entry-row:focus-within { border-color: var(--border); border-bottom-color: var(--primary); box-shadow: inset 0 -1px 0 var(--primary); }
  .plan-entry-add { border-radius: 4px; }
  .plan-entry-row.ready .plan-entry-add { background: var(--primary); color: var(--on-primary); }
  .plan-boxed-list { background: transparent; border: 0; box-shadow: none; gap: 2px; border-radius: 0; }
  .plan-row-group, .plan-row-group:first-child, .plan-row-group:last-child, .plan-row-group:only-child {
    background: var(--card-bg); border: 1px solid var(--stroke-card); border-radius: 4px;
  }
  .plan-row { min-height: 60px; }
  .plan-row-title { font-size: var(--fs-body); }
  .plan-linked-buttons { border-radius: 4px; }
  .plan-skeleton-row { border-bottom-color: var(--border); }

  /* ── ContentDialog: buttons sit in a footer band, equal width ── */
  .modal-overlay { background: var(--shade); backdrop-filter: none; }
  .modal-card {
    border-radius: 8px; padding: 24px; gap: 12px;
    background: var(--card-bg); border: 1px solid var(--stroke-card); box-shadow: 0 32px 64px rgba(0,0,0,.37);
  }
  .modal-card h3 { font-size: var(--fs-title); }
  .modal-actions {
    margin: 12px -24px -24px; padding: 20px 24px; gap: 8px;
    background: var(--window-bg); border-top: 1px solid var(--stroke-card); border-radius: 0 0 8px 8px;
  }
  .modal-actions .btn { flex: 1 1 0; }
  .modal-actions .btn-ghost { background: var(--button-bg); border-color: var(--border); border-bottom-color: var(--stroke-strong); }
  .recurring-info { border-radius: 4px; }
  .repeat-day { border-radius: 4px; }
  .repeat-day.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
  .repeat-segmented { border-radius: 4px; border-color: var(--border); }
  .repeat-segmented button.active { background: var(--primary); color: var(--on-primary); font-weight: 400; }

  /* ── Settings ── */
  .settings-panel { background: transparent; border-bottom: 0; }
  .settings-card { border-radius: 8px; border: 1px solid var(--stroke-card); background: var(--card-bg); box-shadow: none; }
  .settings-card h3 { font-size: var(--fs-title); }
  .settings-footer { border-top-color: var(--border); }

  /* ── Sign-in ── */
  .login-container { background: var(--window-bg); }
  .login-card { border-radius: 8px; border: 1px solid var(--stroke-card); background: var(--card-bg); box-shadow: var(--shadow); }
  .login-header h1 { font-size: var(--fs-display); }

  /* ── Toasts (InfoBar colours) ── */
  .toast {
    border-radius: 8px; background: var(--card-bg); border: 1px solid var(--stroke-card);
    box-shadow: var(--flyout-shadow); color: var(--text); font-weight: 400; backdrop-filter: none;
  }
  .toast-success { background: color-mix(in srgb, var(--success) 14%, var(--card-bg)); color: var(--text); }
  .toast-error { background: color-mix(in srgb, var(--danger) 16%, var(--card-bg)); color: var(--text); }
  .toast-warning { background: color-mix(in srgb, var(--warning) 14%, var(--card-bg)); color: var(--text); }

  /* ── Timer ── */
  /* Windows never sets labels in spaced capitals. */
  .timer-fullscreen-label, .timer-plan-picker label, .timer-float-label {
    text-transform: none; letter-spacing: 0; font-size: var(--fs-body);
  }
  .timer-float-label { font-size: var(--fs-caption); }
  .timer-fullscreen, .timer-fullscreen-pomodoro, .timer-fullscreen-break { background: var(--window-bg); }
  .timer-minimize-btn { border-radius: 4px; background: var(--button-bg); border-color: var(--border); }
  .clock-face { box-shadow: none; background: var(--card-bg); }
  .timer-fullscreen-progress { height: 4px; background: var(--border); }
  .timer-adjust-panel { border-radius: 8px; box-shadow: none; backdrop-filter: none; background: var(--card-bg); border-color: var(--stroke-card); }
  .timer-adjust-btn { border-radius: 4px; }
  .timer-stop-btn { min-height: 40px; }
  .timer-float {
    border-radius: 8px; border: 1px solid var(--stroke-card); background: var(--card-bg);
    box-shadow: var(--flyout-shadow);
  }
  .timer-float-expand { border-radius: 4px; }

  /* ── Hard hours (2026-10-15): InfoBar-style bar, 4 px controls ── */
  .hard-bar { border-radius: 4px; border-color: var(--stroke-card); background: color-mix(in srgb, var(--warning) 12%, var(--card-bg)); }
  .hard-bar-label { font-weight: 600; }
  .hard-later { border-radius: 4px; border: 1px solid var(--stroke-card); border-bottom-color: var(--stroke-strong); background: var(--button-bg); color: var(--text); }
  .hard-later:hover { background: var(--button-hover); }
  .hard-item-actions .btn-primary { min-height: 32px; }
  .today-section-folded, .today-section-folded:hover { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .timer-energy-btn { border-radius: 4px; }
  .timer-energy-btn.active { background: var(--primary); color: var(--on-primary); }
  .timer-float-energy .timer-energy-btn.active { background: var(--primary); color: var(--on-primary); }
  .kickoff-preview { border-radius: 4px; background: var(--bg-input); border-color: var(--border); }
  .kickoff-dots span.active { background: var(--primary); }
  .settings-group-title { text-transform: none; letter-spacing: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text); }
  .hard-hours-time { border-radius: 4px; min-height: 32px; }
  .hard-day { background: var(--button-bg); border: 1px solid var(--border); color: var(--text); font-weight: 400; }
  .hard-day:hover { background: var(--button-hover); }
  .hard-day.active, .hard-day.active:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600; }
}