/* Reading colours are separate from numerical/data colours. Light mode keeps
   the existing palette; legacy declarations use these dark-only fallbacks. */
html[data-theme="dark"] {
  color-scheme: dark !important;
  --paper: #10181f;
  --ink: #e2e8ec;
  --muted: #afc0c8;
  --surface: #15212a;
  --surface-raised: #192832;
  --surface-subtle: #122029;
  --canvas: #122029;
  --line: #40545f;
  --green-soft: #193c38;
  --indigo-soft: #262b48;
  --warning-soft: #392e20;
  --danger-soft: #38242c;
  --focus: #79decf;
  --theme-text: #e2e8ec;
  --theme-muted: #afc0c8;
  --theme-accent: #79decf;
  --theme-blue: #b3c8ff;
  --theme-warning: #ffcb9a;
  --theme-surface: #15212a;
  --theme-tint: #1c3039;
  --theme-border: #40545f;
}
html[data-theme="light"] { color-scheme: light; }

/* One viewport gutter for landing, model, and generated public-page headers.
   Keep this independent of the narrower article/content reading column. */
:root { --mo-header-gutter: clamp(18px,2.2vw,42px); }
@media (max-width:820px) { :root { --mo-header-gutter:26px; } }
@media (max-width:760px) { :root { --mo-header-gutter:10px; } }
header.topbar.phase21-topbar, header.model-page-header, header.top .nav {
  padding-left:max(var(--mo-header-gutter),env(safe-area-inset-left));
  padding-right:max(var(--mo-header-gutter),env(safe-area-inset-right));
}
html[data-theme="dark"] body,
html[data-theme="dark"] #root { color-scheme: dark; background: var(--paper); color: var(--ink); }
html[data-theme="dark"] ::selection { background: #275f58; color: #fff; }

/* One lightweight animated switch in every header. The track remains compact while
   the 44px+ button hit area stays touch-friendly. The thumb uses transform only, so
   the interaction stays cheap on low-end devices and does not involve application state. */
.model-page-header .model-page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
header.top .nav { grid-template-columns: auto minmax(0,1fr) auto; }
@media (max-width: 760px) {
  header.top .nav { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
  .model-page-header .model-page-header-actions { gap: 4px; }
  .phase21-topbar .topbar-actions { gap: 4px; }
}

/* The brand PNG already has transparency, so keep it unboxed everywhere.
   Dark mode uses a dedicated pixel-identical asset where only the complete
   “Model” word (x 284..488) is light. This avoids the old clipped pseudo-image
   overlay, which could miss the final “l” and scale/overflow in flexible
   header/footer containers. The icon and “Origen” colours stay unchanged. */
img[src$="modelorigen-brand.png"] { background: transparent; border-radius: 0; filter: none; }
html[data-theme="dark"] img[src$="modelorigen-brand.png"] {
  content: url("/modelorigen-brand-dark.png");
}

/* Data plots retain their original colour encoding on a light plotting
   surface. The logo-only filter above never applies to data or photographs. */
html[data-theme="dark"] :is(svg[role="img"],svg.chart,svg.plot,svg[class*="chart"],svg[class*="plot"],svg.nn-network-svg) {
  color-scheme: light; background: #f7faf9; color: #0a3035; border-radius: 8px;
  --ink: #0a3035; --muted: #607572; --surface: #fff; --surface-subtle: #f7faf9;
  --paper: #f2f8f6; --line: #cfdfdb; --canvas: #edf5f3;
  --theme-text: initial; --theme-muted: initial; --theme-accent: initial;
  --theme-blue: initial; --theme-warning: initial; --theme-surface: initial;
  --theme-tint: initial; --theme-border: initial;
}
@media print {
  html[data-theme] { color-scheme: light !important; }
  button.site-theme-toggle { display: none; }
}

/* Header search is icon-only in every interaction state. Keep keyboard focus visible. */
header .command-trigger, header .command-trigger:is(:hover,:active,:focus){background:transparent!important;border:0!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent;min-width:44px;min-height:44px}
header .command-trigger:focus-visible{outline:2px solid var(--theme-accent,#075d58);outline-offset:2px}

/* Header shortcut disclosures: shared by React and generated public pages. */
header .mo-header-shortcuts{position:relative;min-width:0;flex:0 0 auto;border:0;padding:0;margin:0;color:var(--theme-text,#173d38)}
header .mo-header-shortcuts>summary{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:44px;padding:0 8px;list-style:none;cursor:pointer;background:transparent;border:0;border-radius:8px;color:var(--theme-muted,#49635d);font-family:inherit;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;-webkit-tap-highlight-color:transparent}
header .mo-header-shortcuts>summary::-webkit-details-marker{display:none}
header .mo-header-shortcuts>summary svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none;transition:transform .16s ease}
header .mo-header-shortcuts[open]>summary svg{transform:rotate(180deg)}
header .mo-header-shortcuts[open]>summary,header .mo-header-shortcuts>summary:hover,header .mo-header-shortcuts[data-current]>summary{color:var(--theme-accent,#075d58)}
header .mo-header-shortcuts>summary:focus-visible,header .mo-shortcut-panel a:focus-visible{outline:2px solid var(--theme-accent,#075d58);outline-offset:2px}
header .mo-header-shortcuts .mo-shortcut-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:90;width:min(440px,calc(100vw - 32px));box-sizing:border-box;padding:12px;border:1px solid var(--theme-border,#bfd3cf);border-radius:16px;background:var(--theme-surface,#fff);color:var(--theme-text,#173d38);box-shadow:0 12px 30px #001c281c;max-height:min(65dvh,520px);overflow-y:auto;overscroll-behavior:contain}
header .mo-shortcut-panel .mo-shortcut-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
header .mo-shortcut-panel a{display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:44px;padding:9px 10px!important;border:0;border-radius:8px;background:transparent;color:var(--theme-text,#173d38)!important;font-size:13px!important;line-height:1.4;font-weight:550;text-decoration:none;white-space:normal!important;overflow-wrap:anywhere;text-align:left}
header .mo-shortcut-panel a span[aria-hidden]{flex:none;color:var(--theme-accent,#075d58)}
header .mo-shortcut-panel a:hover{background:var(--theme-tint,#edf5f2)!important;color:var(--theme-accent,#075d58)!important}
header .mo-shortcut-panel .mo-shortcut-all{color:var(--theme-accent,#075d58)!important;font-weight:750;margin-bottom:7px;border-bottom:1px solid var(--theme-border,#bfd3cf);border-radius:0}
header .model-page-nav,header .desktop-quick-nav,header .navlinks{overflow:visible!important}
header .navlinks>.mo-header-shortcuts:last-of-type .mo-shortcut-panel{left:auto;right:0;transform:none}
header .model-page-menu-panel .mo-header-shortcuts,header .navpanel .mo-header-shortcuts{width:100%}
header .model-page-menu-panel .mo-header-shortcuts>summary,header .navpanel .mo-header-shortcuts>summary{font-size:14px;padding:10px 12px;white-space:normal}
header .model-page-menu-panel .mo-shortcut-panel,header .navpanel .mo-shortcut-panel{position:static;transform:none;width:100%;max-height:45dvh;box-shadow:none;padding:5px}
header .model-page-menu-panel .mo-shortcut-links,header .navpanel .mo-shortcut-links{grid-template-columns:1fr}
@media(min-width:761px) and (max-width:1100px){header .mo-header-shortcuts>summary{padding-inline:5px;font-size:9px;gap:3px}}
@media(prefers-reduced-motion:reduce){header .mo-header-shortcuts>summary svg{transition:none}}

header .model-page-menu-panel,header .navpanel{max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:980px){header.top .navlinks{display:none}header.top .navmenu{display:block}header.top .nav{grid-template-columns:minmax(0,1fr) auto auto}}

.site-footer-contact{display:grid;gap:2px;min-width:0;margin:10px 0 0;font-size:.85rem;line-height:1.5}
.site-footer-contact strong{color:var(--theme-text,#173d38);font-weight:700}
.site-footer-contact a{display:block;min-width:0;width:fit-content;max-width:100%;padding-block:5px;color:var(--theme-accent,#075d58);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.site-footer-contact a:focus-visible{outline:2px solid var(--theme-accent,#075d58);outline-offset:3px}

/* Shared primary navigation: centered on desktop; contextual controls stay local. */
@media(min-width:981px){
  header.topbar.phase21-topbar,header.model-page-header,header.top .nav{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  header.topbar.phase21-topbar .desktop-quick-nav,header.model-page-header .model-page-nav,header.top .navlinks{position:static!important;transform:none!important;width:auto!important;max-width:none!important;justify-self:center;justify-content:center;grid-column:2;display:flex;gap:3px}
  header .topbar-actions,header .model-page-header-actions,header.top .nav>.site-theme-toggle{justify-self:end;grid-column:3}
}
header .mo-header-shortcuts .mo-shortcut-categories{width:min(720px,calc(100vw - 32px));left:0;transform:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
header .mo-shortcut-categories>.mo-shortcut-all{grid-column:1/-1}
header .mo-shortcut-category{min-width:0}
header .mo-shortcut-category h3{margin:0 0 5px;font-size:13px}
header .mo-shortcut-category h3 a{color:var(--theme-accent,#075d58)!important;font-weight:750;border-bottom:1px solid var(--theme-border,#bfd3cf);border-radius:0}
header .mo-shortcut-category .mo-shortcut-links{grid-template-columns:1fr}
header .mo-shortcut-panel>.mo-shortcut-links:empty{display:none}
header .mo-header-shortcuts[data-group="resources"]>.mo-shortcut-panel{left:auto;right:0;transform:none}
@media(max-width:980px){
  header.topbar.phase21-topbar{grid-template-columns:minmax(0,1fr) auto}
  header.topbar.phase21-topbar .desktop-quick-nav,header.model-page-header .model-page-nav{display:none!important}
  header.model-page-header{grid-template-columns:minmax(0,1fr) auto}
  header.model-page-header .model-page-menu{display:block}
}
@media(min-width:761px) and (max-width:980px){header .mo-tablet-menu{display:block}}
@media(max-width:760px){header .mo-tablet-menu{display:none}}
header .model-page-menu-panel .mo-shortcut-categories,header .navpanel .mo-shortcut-categories{grid-template-columns:1fr;width:100%;left:auto;right:auto;transform:none}