/* AgAI Labs: dark mode, the plan set printed on a dark sheet.
   Follows the visitor's system setting. No toggle. Loaded last in every page
   head by scripts/darkmode.py, with media="(prefers-color-scheme: dark)".

   Ground map (light -> dark):
     Sheet  #EEF2F5 page ground          -> Deep      #152C43
     Paper  #F7F9FB cards, panels, menus -> Cyanotype #1D3A57
     Cyanotype header, CTA band, footer  -> Bar       #0F2236
     Cyanotype page head                 -> Cyanotype (unchanged)
   Text map: Text #1B2C3D and Cyanotype text -> Ink #E6ECF0; Mute -> Soft
   #B9C6D0; Print #355A7C -> Print light #9DC0E0 (7.50:1 on Deep, 6.16:1 on
   Cyanotype, 8.48:1 on Bar). Rules: Silver line at 30 percent; frames that
   were Cyanotype on Paper: Silver line at 45 percent. Redline #E0644C and the
   #B5482F button fill do not change.

   Only colors change here: no size, spacing, border width, or display value,
   so nothing shifts layout. tools.css is linked inside <body> on /start/ and
   the tool pages, after this file; rules that must beat it carry an extra
   :root or html:root. */

@media (prefers-color-scheme: dark) {

:root {
  color-scheme: dark;
  /* dark-only tokens */
  --dk-ground: #152C43;
  --dk-panel: #1D3A57;
  --dk-bar: #0F2236;
  --dk-frame: rgba(201, 210, 217, .45);
  --dk-stripe: rgba(201, 210, 217, .05);
  /* shared tokens whose every use sits on a light surface */
  --text: #E6ECF0;
  --mute: #B9C6D0;
  --paper: #1D3A57;
  --sheet: #152C43;
  --print: #9DC0E0;
  --line: rgba(201, 210, 217, .3);
  --grid-light: rgba(201, 210, 217, .06);
}

/* ---- grounds ---- */
body { background: var(--dk-ground); color: var(--ink); }
.sheet { background-color: var(--dk-ground); }
.site-header { background-color: var(--dk-bar); }
.cta-band,
.site-footer { background-color: var(--dk-bar); }
.cta-inner::after,
.tb-wide::after { background: #C9D2D9; }

/* ---- links ---- */
a { color: var(--print); }
a:hover { color: var(--ink); }
:is(.page-head, .cta-band, .site-footer) a:not(.btn):not(.brand):hover { color: #fff; }

/* ---- prose ---- */
.prose h2,
.prose h3,
.prose strong,
.lede,
blockquote,
.answer { color: var(--ink); }
.prose h2 { border-top-color: var(--dk-frame); }

/* ---- tables and their scroll wrapper ---- */
.prose table { border-color: var(--dk-frame); }
.prose thead th { background: var(--dk-bar); color: var(--ink); }
.prose tbody tr:nth-child(even) { background: var(--dk-stripe); }
.prose .table-scroll {
  background-color: var(--dk-panel);
  background-image:
    linear-gradient(to left, var(--dk-panel) 35%, transparent),
    linear-gradient(to left, rgba(201, 210, 217, .22), transparent);
}

/* ---- stage cards and cards ---- */
.stage-index a,
.cards a { border-color: var(--dk-frame); }
.stage-index a:hover,
.cards a:hover { background: var(--dk-panel); border-color: var(--mute); }
.stage-index strong,
.cards strong { color: var(--ink); }
.stage-index span.visual-stage-icon { color: var(--ink); }

/* ---- split, checklist, steps ---- */
.split,
.split > div + div { border-color: var(--dk-frame); }
.split > div + div { background: var(--dk-ground); }
.checklist li::before { border-color: var(--dk-frame); }
.steps li::before { background: var(--dk-bar); box-shadow: inset 0 0 0 1px var(--dk-frame); }

/* ---- FAQ ---- */
.faq details { border-color: var(--dk-frame); }
.faq summary { color: var(--ink); }
.faq summary:hover { background: var(--dk-ground); }
.faq summary:hover::after { color: var(--ink); }

/* ---- stage sheet nav ---- */
.sn-row,
.sn-cell + .sn-cell,
.sn-dots { border-color: var(--dk-frame); }
a.sn-cell:hover { background: var(--dk-ground); }
.sn-cell strong,
a.sn-cell:hover strong { color: var(--ink); }
.sn-dot:hover { background: var(--dk-ground); color: var(--ink); }
.sn-dot.is-cur { background: var(--ink); color: var(--dk-ground); }
.sn-dot.is-cur::after { background: var(--dk-panel); }

/* ---- secondary buttons on former light grounds ---- */
:is(.sheet, .prose, .agai-nav-panel, .agai-mobile-menu) .btn-ghost,
.btn-ghost.on-light { color: var(--ink); border-color: var(--ink); }
:is(.sheet, .prose, .agai-nav-panel, .agai-mobile-menu) .btn-ghost:hover,
.btn-ghost.on-light:hover { background: var(--ink); border-color: var(--ink); color: var(--dk-ground); }
:is(.sheet, .prose, .agai-nav-panel, .agai-mobile-menu) .btn-ghost:active,
.btn-ghost.on-light:active { background: var(--mute); border-color: var(--mute); color: var(--dk-ground); }
:is(.sheet, .prose) .btn:is(:disabled, [aria-disabled=true], .is-disabled) {
  background: transparent; color: var(--mute); border-color: var(--mute);
}

/* ---- mega panel (desktop) ---- */
.agai-nav-panel { color: var(--ink); border-bottom-color: var(--mute); }
.agai-nav-entry,
.agai-nav-entry:hover,
.agai-nav-entry:focus-visible,
.agai-nav-entry:active { color: var(--ink); }
.agai-nav-footer:hover { color: var(--ink); background: var(--dk-bar); }
.agai-nav-fallback,
.agai-nav-fallback a { color: var(--ink); }

/* ---- mobile menu ---- */
.agai-mobile-menu,
.agai-mobile-group h2 button,
.agai-mobile-menu > .agai-nav-link { color: var(--ink); }
.agai-mobile-group h2 button[aria-expanded=true] { background: var(--dk-ground); }
.agai-mobile-group h2 button:hover,
.agai-mobile-group h2 button:focus-visible,
.agai-mobile-menu > .agai-nav-link:hover,
.agai-mobile-menu > .agai-nav-link:focus-visible,
.agai-mobile-group h2 button:active,
.agai-mobile-menu > .agai-nav-link:active { color: var(--ink); }
.agai-menu-toggle:hover,
.agai-menu-close:hover { color: var(--dk-ground); }

/* ---- /start/ intake form ---- */
.intake { border-color: var(--dk-frame); }
.intake label,
.intake legend,
.intake fieldset:disabled label { color: var(--ink); }
.intake :is(input:not([type=checkbox]), select, textarea) { background: var(--dk-ground); color: var(--ink); }
.intake input:focus,
.intake select:focus,
.intake textarea:focus { border-color: var(--ink); }
.intake input[type=checkbox] { accent-color: var(--print); }
:root #intake :is(input:not([type=checkbox]), select, textarea) { border-color: var(--print); }

/* ---- tools (tools.css loads after this file) ---- */
:root .agai-tools :is(input:not([type=checkbox]), select, textarea) {
  background: var(--dk-ground); color: var(--ink); color-scheme: dark;
}
:root .agai-tools :is(input, select, textarea):disabled { background: var(--dk-ground); color: var(--mute); }
:root .agai-tools ::placeholder { color: var(--mute); opacity: 1; }
:root .agai-tools :is(input, select, textarea):focus,
:root #intake :is(input, select, textarea):focus { border-color: var(--ink); }
:root .agai-tools .tool-error,
:root .agai-tools .tool-status[data-state="error"],
:root .agai-tools .tool-note[data-state="warning"] { background: var(--dk-ground); color: var(--ink); }
:root .agai-tools .tool-table-wrap { background: var(--dk-panel); color: var(--ink); }
:root .agai-tools caption,
:root .agai-tools :is(th, td) { color: var(--ink); background: var(--dk-panel); }
:root .agai-tools thead th { background: var(--dk-bar); }
html:root .agai-tools button:not([type=submit]):hover:not(:disabled) {
  background: var(--ink); border-color: var(--ink); color: var(--dk-ground);
}
html:root .agai-tools button:not([type=submit]):active:not(:disabled) {
  background: var(--mute); border-color: var(--mute); color: var(--dk-ground);
}

/* ---- covers: a Silver line frame so each cover reads as a sheet ---- */
.visual-cover,
.visual-band { position: relative; }
.visual-cover::after,
.visual-band::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--dk-frame);
  pointer-events: none;
}

/* ---- diagrams: remap the light-ground literals ----
   Sheet ground -> Deep, Paper nodes -> Cyanotype, Cyanotype line and
   lettering -> Ink, Print -> Soft, Silver -> Silver at 45 percent.
   Redline #E0644C keeps its attributes. */
.visual-diagram { background: var(--dk-ground); color: var(--ink); }
.visual-diagram figcaption { border-top-color: var(--line); color: var(--mute); }
.visual-diagram svg [fill="#EEF2F5"] { fill: #152C43; }
.visual-diagram svg [fill="#F7F9FB"] { fill: #1D3A57; }
.visual-diagram svg [fill="#1D3A57"] { fill: #E6ECF0; }
.visual-diagram svg [stroke="#1D3A57"] { stroke: #E6ECF0; }
.visual-diagram svg [fill="#355A7C"] { fill: #B9C6D0; }
.visual-diagram svg [stroke="#355A7C"] { stroke: #B9C6D0; }
.visual-diagram svg [stroke="#C9D2D9"] { stroke: rgba(201, 210, 217, .45); }

}