/* Nav Numbers shared theme — Day / Dusk / Night.
   Loaded after each page's own <style>, so equal-specificity rules here win.
   Three display modes, cycled by the ◑ button (see /theme.js):
     Day   — cream ground, navy structure, orange action
     Dusk  — dimmed navy/amber for low bridge light (ECDIS-dusk style)
     Night — green phosphor with luminance hierarchy; protects night vision.
   No large bright fills in Dusk/Night: primary buttons become dark fills
   with a colored border + text so adapted eyes are never hit with a flash. */

/* DM Sans, self-hosted so the app never fetches a font from Google at runtime
   (it would fail on dead ship wifi). One variable font, weights 400–800, split
   into the same latin / latin-ext subsets Google serves. Both are precached by
   the service worker, so the typeface is available fully offline. */
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/dmsans-latin.woff2) format('woff2');
  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;
}
@font-face{
  font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/dmsans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --font:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --font-num:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);

  /* Day */
  --bg:#f2f0e9; --bg-top:rgba(242,240,233,.96); --card:#fff; --card2:#eceadf;
  --text:#1a222c; --muted:#67707e; --border:rgba(15,30,45,.1); --input-bg:#f8f7f2;
  --accent:#1e3f66;
  --btn:#e8622a; --btn-text:#fff; --btn-border:transparent;
  --btn-sh:0 4px 14px rgba(232,98,42,.28);
  --sel:#1e3f66; --sel-text:#fff;
  --sec:#39424f; --num:#1a222c;
  --error:#c0392b; --err-bg:rgba(192,57,43,.08); --err-bd:rgba(192,57,43,.3);
  --msg-bg:rgba(30,63,102,.08); --msg-bd:rgba(30,63,102,.25);
  --ok:#1d6b3c; --warn:#a06a12;
  --shadow:0 2px 10px rgba(20,35,50,.1); --modal-bg:rgba(0,0,0,.4);
  --orange:#e8622a;

  --chip-bg:rgba(30,63,102,.12); --chip-bd:rgba(30,63,102,.25);
  --wm:#0a1628; --wm-op:.025;
  --scheme:light;
  --help-ic-bg:rgba(30,63,102,.1); --help-ic:#1e3f66;
  --help-warn-bg:rgba(160,106,18,.12); --help-warn:#a06a12;
  --sa-nav:#1e3f66;  --sa-nav-bg:rgba(30,63,102,.1);
  --sa-plan:#0e7f8c; --sa-plan-bg:rgba(14,127,140,.1);
  --sa-wx:#a06a12;   --sa-wx-bg:rgba(160,106,18,.1);
  --sa-stab:#8c3a44; --sa-stab-bg:rgba(140,58,68,.1);
  --sa-util:#5b6c7c; --sa-util-bg:rgba(91,108,124,.12);
}

/* Dusk — every hue kept but dropped to low saturation and luminance */
html.dusk{
  --bg:#04070a; --bg-top:rgba(4,7,10,.96); --card:#0e141b; --card2:#101924;
  --text:#c3ced8; --muted:#5d6b78; --border:rgba(140,170,200,.15); --input-bg:#0a1017;
  --accent:#7ba3cc;
  --btn:#241206; --btn-text:#e08a52; --btn-border:rgba(224,138,82,.45); --btn-sh:none;
  --sel:#1b3a58; --sel-text:#d8e6f4;
  --sec:#5d7f9e; --num:#e8eef4;
  --error:#d06555; --err-bg:rgba(208,101,85,.1); --err-bd:rgba(208,101,85,.35);
  --msg-bg:rgba(123,163,204,.1); --msg-bd:rgba(123,163,204,.3);
  --ok:#4fae6e; --warn:#c9973f;
  --shadow:0 0 0 1px rgba(140,170,200,.12); --modal-bg:rgba(0,0,0,.72);
  --orange:#e08a52;

  --chip-bg:rgba(123,163,204,.12); --chip-bd:rgba(123,163,204,.3);
  --wm:#7ba3cc; --wm-op:.02;
  --scheme:dark;
  --help-ic-bg:rgba(123,163,204,.12); --help-ic:#7ba3cc;
  --help-warn-bg:rgba(201,151,63,.12); --help-warn:#c9973f;
  --sa-nav:#7ba3cc;  --sa-nav-bg:rgba(123,163,204,.1);
  --sa-plan:#4d9aa6; --sa-plan-bg:rgba(77,154,166,.1);
  --sa-wx:#c9973f;   --sa-wx-bg:rgba(201,151,63,.1);
  --sa-stab:#c46a6a; --sa-stab-bg:rgba(196,106,106,.1);
  --sa-util:#7d8fa0; --sa-util-bg:rgba(125,143,160,.1);
}

/* Night — green phosphor with hierarchy: pale green body text, dim green
   chrome, full phosphor reserved for the result figure and the action */
html.night{
  --bg:#000; --bg-top:rgba(0,0,0,.96); --card:#0a0f0b; --card2:#0d130e;
  --text:#9fd8ae; --muted:#3f7a4f; --border:rgba(70,220,120,.16); --input-bg:#070c08;
  --accent:#35e06b;
  --btn:#0b2413; --btn-text:#4be878; --btn-border:rgba(75,232,120,.4); --btn-sh:none;
  --sel:#0b2413; --sel-text:#4be878;
  --sec:#3f7a4f; --num:#4be878;
  --error:#e0705c; --err-bg:rgba(224,112,92,.08); --err-bd:rgba(224,112,92,.3);
  --msg-bg:rgba(75,232,120,.08); --msg-bd:rgba(75,232,120,.25);
  --ok:#4be878; --warn:#c9973f;
  --shadow:0 0 0 1px rgba(70,220,120,.14); --modal-bg:rgba(0,0,0,.78);
  --orange:#4be878;

  --chip-bg:rgba(75,232,120,.12); --chip-bd:rgba(75,232,120,.25);
  --wm:#35e06b; --wm-op:.02;
  --scheme:dark;
  --help-ic-bg:rgba(111,174,128,.12); --help-ic:#6fae80;
  --help-warn-bg:rgba(201,151,63,.1); --help-warn:#c9973f;
  --sa-nav:#6fae80;  --sa-nav-bg:rgba(111,174,128,.12);
  --sa-plan:#6fae80; --sa-plan-bg:rgba(111,174,128,.12);
  --sa-wx:#6fae80;   --sa-wx-bg:rgba(111,174,128,.12);
  --sa-stab:#6fae80; --sa-stab-bg:rgba(111,174,128,.12);
  --sa-util:#6fae80; --sa-util-bg:rgba(111,174,128,.12);
}

/* ---- shared component recolors (page CSS keeps layout; this file owns color) ---- */

/* Primary action: exactly one per screen */
.btn,.sheet-btn,.install-btn,.cta{
  background:var(--btn);color:var(--btn-text);
  border:1.5px solid var(--btn-border);box-shadow:var(--btn-sh);
}
/* Selected state (tabs) and header Sign In are structure-navy, not orange */
.tab.active{background:var(--sel);color:var(--sel-text)}
.auth-btn{background:var(--sel);color:var(--sel-text)}
.auth-btn.signed-in{background:transparent;color:var(--muted)}

/* Result figures: aligned tabular numerals in the theme's brightest ink */
.rval,.rtotal{
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;color:var(--num);
}

/* Semantic states */
.err{background:var(--err-bg);border-color:var(--err-bd);color:var(--error)}
.msg{background:var(--msg-bg);border-color:var(--msg-bd)}

/* Native pickers follow the theme */
input,select,textarea{color-scheme:var(--scheme)}

.pro-chip{background:var(--chip-bg);border-color:var(--chip-bd)}

/* Home screen: section accents + icon tint discs */
.tile{box-shadow:var(--shadow)}
.backdrop{color:var(--wm);opacity:var(--wm-op)}
.sec-nav{--sa:var(--sa-nav);--sa-bg:var(--sa-nav-bg)}
.sec-plan{--sa:var(--sa-plan);--sa-bg:var(--sa-plan-bg)}
.sec-wx{--sa:var(--sa-wx);--sa-bg:var(--sa-wx-bg)}
.sec-stab{--sa:var(--sa-stab);--sa-bg:var(--sa-stab-bg)}
.sec-util{--sa:var(--sa-util);--sa-bg:var(--sa-util-bg)}
.sec-title{color:var(--sa,var(--sec))}
.tile-img{
  color:var(--sa,var(--accent));background:var(--sa-bg,transparent);
  width:48%;padding:12px;border-radius:26%;
}