/* Design v3 tokens: "Tigris" (light) and "Night shift" (dark, html.dark). Loaded AFTER design.css/palette.css so the same custom properties are re-valued;
   no selector or layout is restructured. Contrast (WCAG AA) is checked by restyle/contrast.py. The Fun (crazy) theme is untouched. */
:root{--bg:#f2f4f8;--surface:#ffffff;--surface-2:#e8ecf3;--line:#d6dce8;--line-strong:#bcc6d8;--input-border:#8794ad;--ink:#0a1630;--ink-2:#38455e;--muted:#5b6780;
  --accent:#2347e6;--accent-hover:#1f3fd1;--accent-soft:#e4ebff;--accent-ink:#1f3fd1;--on-accent:#ffffff;
  --success-soft:#e0f3ec;--success-ink:#0d7a5a;--success-solid:#0d7a5a;--warning:#8f5500;--warning-soft:#fbf0db;--warning-ink:#8f5500;
  --danger:#c0303b;--danger-soft:#fbe9ea;--danger-ink:#c0303b;--danger-solid:#c0303b;--info:#2347e6;--info-soft:#e4ebff;--info-ink:#1f3fd1;
  --violet-soft:#ece9fd;--violet-ink:#4c3fb8;--neutral-soft:#e8ecf3;
  --side-bg:#0b1a3a;--side-text:#b3c1de;--side-active-text:#ffffff;--side-active-bg:#13285a;--side-line:#1b2f63;--side-bar:#7a9bff;
  --glass:rgba(242,244,248,.82);--scrim:rgba(10,22,48,.5);--hero-a:#0b1a3a;--hero-b:#13285a;--amber:#8f5500;
  --sh-1:0 1px 2px rgba(10,22,48,.05),0 1px 1px rgba(10,22,48,.04);--sh-2:0 2px 6px rgba(10,22,48,.06),0 8px 24px rgba(10,22,48,.07);--sh-3:0 12px 40px rgba(10,22,48,.18);
  --pal-bg:#ffffff;--pal-ink:#0a1630;--pal-muted:#5b6780;--pal-line:#d6dce8;--pal-sel:#e4ebff;--pal-accent:#2347e6;--pal-kbd:#e8ecf3;--pal-scrim:rgba(10,22,48,.5);--pal-shadow:0 24px 70px rgba(10,22,48,.3),0 2px 8px rgba(10,22,48,.12)}
html.dark:not(.crazy){--bg:#02050b;--surface:#0a111d;--surface-2:#121c2c;--line:#1c2a40;--line-strong:#2a3c5a;--input-border:#5b6f89;--ink:#e9f4fb;--ink-2:#bcd0dd;--muted:#8299ad;
  --accent:#3ee0ff;--accent-hover:#7aebff;--accent-soft:#0b2a36;--accent-ink:#3ee0ff;--on-accent:#021018;
  --success-soft:rgba(70,214,163,.12);--success-ink:#46d6a3;--success-solid:#0d7a5a;--warning:#f3b84a;--warning-soft:rgba(243,184,74,.12);--warning-ink:#f3b84a;
  --danger:#ff7f8a;--danger-soft:rgba(255,127,138,.12);--danger-ink:#ff7f8a;--danger-solid:#c0303b;--info:#3ee0ff;--info-soft:rgba(62,224,255,.1);--info-ink:#7aebff;
  --violet-soft:rgba(160,150,255,.14);--violet-ink:#b7b0ff;--neutral-soft:#121c2c;
  --side-bg:#0e1726;--side-text:#8299ad;--side-active-text:#e9f4fb;--side-active-bg:#121c2c;--side-line:#1c2a40;--side-bar:#3ee0ff;
  --glass:rgba(2,5,11,.82);--scrim:rgba(0,0,0,.66);--hero-a:#061626;--hero-b:#0b2a40;--amber:#f3b84a;
  --pal-bg:#0a111d;--pal-ink:#e9f4fb;--pal-muted:#8299ad;--pal-line:#1c2a40;--pal-sel:#0b2a36;--pal-accent:#3ee0ff;--pal-kbd:#121c2c;--pal-scrim:rgba(0,0,0,.66);--pal-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px #1c2a40}
/* Hard-coded hero gradient on Home */
html:root .home-welcome{background:linear-gradient(110deg,var(--hero-a),var(--hero-b));border:1px solid transparent}
html:root.dark .home-welcome{background:linear-gradient(110deg,var(--hero-a),var(--hero-b));border:1px solid var(--line-strong)}
html:root .home-welcome p{color:#cfdcf6}
/* Form controls keep a 3:1 border against their surface */
html:root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-color:var(--input-border)}
/* Focus ring in the accent colour */
html:root :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html:root .skeleton-card{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);background-size:200% 100%}
/* Literal colours left by earlier layers (workspace-design / dashboard-design) */
html:root .side .brand-mark,html:root .side .avatar{background:var(--accent);color:var(--on-accent)}
::selection{background:var(--accent-soft);color:var(--ink)}
html.dark ::selection{background:var(--accent-soft);color:var(--ink)}
html:root .home-command,html:root.dark .home-command{--home-blue:var(--accent);--home-soft:var(--accent-soft)}
html:root .home-decisions .team-home .primary{background:var(--accent);color:var(--on-accent)}
html:root .home-setup-strip .setup-progress>span{background:var(--accent)}
html:root.dark .home-welcome img{opacity:.7}
/* Sign-in screen (auth-design.css kept its own blue palette) */
html:root .auth-gate,html:root .modal.auth-dialog{--auth-ink:var(--ink);--auth-muted:var(--muted);--auth-surface:var(--surface);--auth-line:var(--input-border)}
html.dark:root:not(.crazy) .auth-gate,html.dark:root:not(.crazy) .modal.auth-dialog{--auth-ink:var(--ink);--auth-muted:var(--muted);--auth-surface:var(--surface);--auth-line:var(--input-border)}
html:root .auth-dialog-back{background:var(--surface)}
html:root .auth-scene{background:radial-gradient(ellipse at 90% 0,#2d4fc4 0,#13285a 48%,#0b1a3a 100%)}
html.dark:root:not(.crazy) .auth-scene{background:radial-gradient(ellipse at 90% 0,#0f4a63 0,#0b2a40 48%,#061626 100%)}
html:root .auth-scene-art::after{background:linear-gradient(to bottom,transparent 82%,var(--hero-a) 100%)}
html:root .auth-scene-copy p,html:root .auth-scene-caption{color:#d3def6}
html:root .auth-dialog #pilot-auth-submit,html:root .auth-gate-button{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
html:root .auth-dialog #pilot-auth-submit:hover,html:root .auth-gate-button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
html.dark:root:not(.crazy) .auth-dialog #pilot-auth-submit,html.dark:root:not(.crazy) .auth-gate-button{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
html.dark:root:not(.crazy) .auth-dialog #pilot-auth-submit:hover,html.dark:root:not(.crazy) .auth-gate-button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
html:root .auth-themes button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-ink)}
html:root .auth-remember input{accent-color:var(--accent)}
html.dark:root:not(.crazy) .auth-dialog .field input{background:var(--surface-2)}
html:root .auth-dialog :is(button,input):focus-visible{outline-color:var(--accent)}

/* ===== Visual QA 19 Oct (docs/web-visual-qa-2026-10-19.md) ===== */
/* V-1: the legacy tokens used by ~150 rules (styles.css / ui.css) now follow the v3 palette in BOTH themes (light --blue used to stay teal #0e7490, dark kept old emerald/red). */
:root,html.dark:not(.crazy){--blue:var(--accent);--cyan:var(--accent);--green:var(--success-ink);--red:var(--danger);--white:var(--surface);--navy:var(--side-bg);
  --sidebar-text:var(--side-text);--sidebar-active-text:var(--side-active-text);--sidebar-hover:var(--side-active-bg);--sidebar-active:var(--side-active-bg);--sidebar-border:var(--side-line);--side-muted:var(--side-text);--brand:var(--accent);--accent-active:var(--accent)}
html.dark:not(.crazy) .mobile-nav{background:var(--glass)!important}
html.dark:not(.crazy) header{background:var(--bg)}   /* opaque (a test requires it): the legacy #111 became the page colour */
html.dark:not(.crazy) .vp-lang span.on{color:var(--on-accent)}
html:root .notif-mark-read:hover{background:var(--accent-soft)}
html:root .week-col{background:var(--surface-2)}html:root .week-col-today{background:var(--accent-soft);border-color:var(--accent)}html:root .week-item{background:var(--surface);color:var(--ink)}
/* V-2: native radios and checkboxes use the accent; unchecked ones in dark mode are drawn, not the browser's grey fill */
input[type=radio],input[type=checkbox]{accent-color:var(--accent)}
html.dark:not(.crazy) input[type=radio]:not(:checked),html.dark:not(.crazy) input[type=checkbox]:not(:checked){appearance:none;-webkit-appearance:none;inline-size:18px;block-size:18px;border:1.5px solid var(--input-border);background:var(--surface);border-radius:50%;vertical-align:middle}
html.dark:not(.crazy) input[type=checkbox]:not(:checked){border-radius:4px}
/* V-3: the remaining native selects and date inputs look like the themed fields */
html:root :is(.tm-controls select,.tm-controls input,.imp select,.imp input[type=date],#mg-drop,#mg-keep,.report-filters select,.report-filters input[type=date]){background:var(--surface);color:var(--ink);border:1px solid var(--input-border);border-radius:10px;min-block-size:44px;padding-inline:12px;font:inherit}
html:root .tm-controls{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
html:root .report-filters select{min-inline-size:16ch}
/* V-4: the funnel ramp stays cyan in dark mode (opacity over black read as teal) */
html:root .funnel-bar{opacity:1;background:color-mix(in srgb,var(--accent) calc(60% + var(--i,0)*8%),var(--surface-2))}
html:root :is(.wf-savebar .primary:disabled,.primary:disabled){background:var(--surface-2);color:var(--muted);border-color:var(--line);opacity:1}
/* V-5/V-6: board column titles and the planner week keep their words and digits together on tablets */
html:root .board :is(h3,.board-col-title,.lead-col-title){overflow-wrap:normal;word-break:normal;hyphens:auto}
@media (min-width:640px) and (max-width:1100px){html:root .board{overflow-x:auto}html:root .board>*{min-inline-size:200px}html:root .week-grid{overflow-x:auto}html:root .week-col{min-inline-size:120px}}
html:root .week-day-label>*{white-space:nowrap}
html:root .week-item{unicode-bidi:plaintext}
/* V-7: RTL form controls */
html[dir=rtl] .field :is(input[type=datetime-local],input[type=date],input[type=time]){direction:rtl;text-align:right}
html[dir=rtl] .field input[type=tel]:placeholder-shown{direction:rtl;text-align:right}
/* V-8: mixed-direction subtitles keep their parts together */
html:root :is(.queue-list .queue-row small,.queue-row small){unicode-bidi:isolate}
/* V-12: the floating button never covers the last row */
html:root #view{padding-block-end:88px}
/* V-13: Leaflet controls follow the theme and the reading direction */
html.dark:not(.crazy) .tm-map :is(.leaflet-bar a,.leaflet-control-attribution){background:var(--surface);color:var(--ink);border-color:var(--line)}
html.dark:not(.crazy) .tm-map .leaflet-control-attribution a{color:var(--accent)}
html[dir=rtl] .tm-map .leaflet-top.leaflet-left{left:auto;right:0}
html:root .tm-pin span{background:var(--accent);color:var(--on-accent);border-color:var(--surface)}
html:root .tm-pin.tm-sel span{background:var(--warning)}
html:root .tm-pin.tm-stop span{background:var(--success-solid);color:#fff}
html:root .tm-pin.tm-stop.tm-unknown span{background:var(--muted);color:var(--surface)}
html:root .team-map .tm-row.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
/* V-14: contact avatars use soft v3 tints with ink initials */
html:root .av-1{--ab:var(--accent-soft)}html:root .av-2{--ab:var(--violet-soft)}html:root .av-3{--ab:var(--danger-soft)}html:root .av-4{--ab:var(--warning-soft)}html:root .av-5{--ab:var(--success-soft)}html:root .av-6{--ab:var(--neutral-soft)}html:root .av-7{--ab:var(--warning-soft)}html:root .av-8{--ab:var(--info-soft)}
/* V-16: the dialog close button shows a ring only for keyboard focus */
html:root .modal-close:focus:not(:focus-visible){outline:0;box-shadow:none}
html:root .av{--ab:var(--accent-soft);color:var(--accent-ink)}
html:root :is(.av-1,.av-2,.av-3,.av-4,.av-5,.av-6,.av-7,.av-8){color:var(--ink)}