/* ReefNav — design system.
   Written from scratch; shares no tokens with the previous interface.

   The rule that drives everything here: the map is the content. Chrome is
   glass laid over it, hairline-bordered and heavily blurred so the map stays
   legible through it, and there is as little of it as the job allows. */

:root{
  /* Ground + ink */
  --abyss:#050910;
  --ink:#f2f7ff;
  --ink-2:rgba(242,247,255,.66);
  --ink-3:rgba(242,247,255,.38);

  /* Glass. Two weights: chrome floats over the map, deck is a reading
     surface and sits a little denser so long text stays comfortable.
     Neutral, near-gray tints — colour belongs to the data, not the chrome. */
  --glass:rgba(24,27,36,.46);
  --glass-deck:rgba(15,18,26,.64);
  --glass-hi:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.10);
  --stroke-2:rgba(255,255,255,.16);
  --fill:rgba(255,255,255,.055);
  --fill-2:rgba(255,255,255,.10);

  /* Accents. signal = interactive/brand. now = the present moment and the
     sun, and nothing else, so it can never be read as a risk colour. */
  --signal:#64d2ff;
  --signal-deep:#0a84ff;
  --now:#ffb340;
  --moon:#b9a6ff;

  /* Condition scale, used for verdicts only. */
  --good:#34d399;
  --warn:#fbbf24;
  --rough:#fb923c;
  --danger:#f87171;

  --radius:22px;
  --radius-sm:14px;
  --radius-lg:28px;
  --shadow:0 10px 40px rgba(0,0,0,.38);
  --shadow-lg:0 -14px 50px rgba(0,0,0,.42);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.85,.25,1);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);


  /* Surfaces layout.css used to hardcode. A recessed well is darker than its
     pane in the dark theme and darker-but-tinted in the light one; a raised
     key is the reverse. Naming them by ROLE is what lets one flip. */
  --sunk:rgba(0,0,0,.28);
  --raise:rgba(255,255,255,.09);
  --raise-2:rgba(255,255,255,.16);
  --tip:rgba(10,16,26,.86);
  --head:rgba(255,255,255,.95);
  --head-glow:0 0 0 .5px rgba(0,0,0,.4),0 0 10px rgba(255,255,255,.5);
  --grab:rgba(255,255,255,.22);
  --credit:rgba(255,255,255,.42);
  --credit-shadow:0 1px 3px rgba(0,0,0,.8);
  --now-ground:rgba(10,14,22,.66);
  --now-ink:#ffe6bd;
  --thumb-shadow:0 1px 4px rgba(0,0,0,.5);
  --mark-shadow:drop-shadow(0 1px 4px rgba(0,0,0,.45));

  /* Tiles: the low-alpha washes that separate a row or card from the deck
     behind it. Three steps — rest, hover, press. */
  --tint:rgba(255,255,255,.03);
  --tile:rgba(255,255,255,.055);
  --tile-h:rgba(255,255,255,.10);
  --tile-a:rgba(255,255,255,.14);
  --opt-bg:#0d1626;
  --head-wind:#ef8a6a;

  --panel:rgba(11,18,31,.82);
  --chartbg:rgba(10,14,22,.32);
  --scrim:rgba(3,6,12,.5);
  --dockbg:rgba(20,23,32,.42);
  --glow-sun:rgba(255,179,64,.34);
  --glow-moon:rgba(185,166,255,.34);
  --prime:rgba(52,211,153,.09);
  --prime-edge:rgba(52,211,153,.30);

  color-scheme:dark;
}

/* Explicit choice. */
:root[data-theme="light"]{
  --abyss:#e9eef4;
  --ink:#0b1420;
  --ink-2:rgba(11,20,32,.68);
  --ink-3:rgba(11,20,32,.44);

  /* White panes over a pale ground. The blur and the hairline are unchanged —
     it is the same material, lit differently. */
  --glass:rgba(255,255,255,.66);
  --glass-deck:rgba(252,253,255,.82);
  --glass-hi:rgba(255,255,255,.95);
  --stroke:rgba(12,26,44,.13);
  --stroke-2:rgba(12,26,44,.20);
  --fill:rgba(12,26,44,.055);
  --fill-2:rgba(12,26,44,.10);

  /* Accents go DEEPER, not lighter. #64d2ff is legible on black and invisible
     on white; the same hue at full saturation carries in sunlight. */
  --signal:#0a6ecb;
  --signal-deep:#064a8c;
  --now:#c2600a;
  --moon:#6b4fd8;

  --good:#0a8f5e;
  --warn:#b07500;
  --rough:#d1590f;
  --danger:#c62f2f;

  --shadow:0 8px 30px rgba(20,40,70,.14);
  --shadow-lg:0 -12px 40px rgba(20,40,70,.16);

  --sunk:rgba(12,26,44,.07);
  --raise:rgba(255,255,255,.80);
  --raise-2:rgba(255,255,255,.98);
  --tip:rgba(255,255,255,.93);
  /* On a pale chart a white playhead vanishes. Ink it instead — same role,
     inverted material, and the glow becomes a shadow. */
  --head:rgba(11,20,32,.88);
  --head-glow:0 0 0 .5px rgba(255,255,255,.7),0 0 10px rgba(11,20,32,.25);
  --grab:rgba(12,26,44,.22);
  --credit:rgba(11,20,32,.55);
  --credit-shadow:0 1px 3px rgba(255,255,255,.85);
  --now-ground:rgba(255,255,255,.72);
  --now-ink:#7a3a00;
  --thumb-shadow:0 1px 4px rgba(20,40,70,.35);
  --mark-shadow:drop-shadow(0 1px 4px rgba(20,40,70,.28));
  --tint:rgba(12,26,44,.030);
  --tile:rgba(12,26,44,.052);
  --tile-h:rgba(12,26,44,.085);
  --tile-a:rgba(12,26,44,.125);
  --opt-bg:#ffffff;
  --head-wind:#c2410c;
  --panel:rgba(255,255,255,.86);
  /* The tide chart's ground. On a light deck this is near-white with the
     faintest cool cast — the washes above it carry the reading, and a grey
     slab under them was the single thing making the chart look unfinished. */
  --chartbg:rgba(235,241,248,.9);
  --scrim:rgba(20,36,58,.22);
  --dockbg:rgba(255,255,255,.62);
  --glow-sun:rgba(220,150,20,.30);
  --glow-moon:rgba(107,79,216,.26);
  --prime:rgba(10,143,94,.10);
  --prime-edge:rgba(10,143,94,.34);
  color-scheme:light;
}

/* Auto: follow the device unless dark was explicitly chosen. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --abyss:#e9eef4;
    --ink:#0b1420;
    --ink-2:rgba(11,20,32,.68);
    --ink-3:rgba(11,20,32,.44);

    /* White panes over a pale ground. The blur and the hairline are unchanged —
       it is the same material, lit differently. */
    --glass:rgba(255,255,255,.66);
    --glass-deck:rgba(252,253,255,.82);
    --glass-hi:rgba(255,255,255,.95);
    --stroke:rgba(12,26,44,.13);
    --stroke-2:rgba(12,26,44,.20);
    --fill:rgba(12,26,44,.055);
    --fill-2:rgba(12,26,44,.10);

    /* Accents go DEEPER, not lighter. #64d2ff is legible on black and invisible
       on white; the same hue at full saturation carries in sunlight. */
    --signal:#0a6ecb;
    --signal-deep:#064a8c;
    --now:#c2600a;
    --moon:#6b4fd8;

    --good:#0a8f5e;
    --warn:#b07500;
    --rough:#d1590f;
    --danger:#c62f2f;

    --shadow:0 8px 30px rgba(20,40,70,.14);
    --shadow-lg:0 -12px 40px rgba(20,40,70,.16);

    --sunk:rgba(12,26,44,.07);
    --raise:rgba(255,255,255,.80);
    --raise-2:rgba(255,255,255,.98);
    --tip:rgba(255,255,255,.93);
    /* On a pale chart a white playhead vanishes. Ink it instead — same role,
       inverted material, and the glow becomes a shadow. */
    --head:rgba(11,20,32,.88);
    --head-glow:0 0 0 .5px rgba(255,255,255,.7),0 0 10px rgba(11,20,32,.25);
    --grab:rgba(12,26,44,.22);
    --credit:rgba(11,20,32,.55);
    --credit-shadow:0 1px 3px rgba(255,255,255,.85);
    --now-ground:rgba(255,255,255,.72);
    --now-ink:#7a3a00;
    --thumb-shadow:0 1px 4px rgba(20,40,70,.35);
    --mark-shadow:drop-shadow(0 1px 4px rgba(20,40,70,.28));
  --tint:rgba(12,26,44,.030);
    --tile:rgba(12,26,44,.052);
    --tile-h:rgba(12,26,44,.085);
    --tile-a:rgba(12,26,44,.125);
    --opt-bg:#ffffff;
    --head-wind:#c2410c;
  --panel:rgba(255,255,255,.86);
    /* The tide chart's ground. On a light deck this is near-white with the
       faintest cool cast — the washes above it carry the reading, and a grey
       slab under them was the single thing making the chart look unfinished. */
    --chartbg:rgba(235,241,248,.9);
    --scrim:rgba(20,36,58,.22);
    --dockbg:rgba(255,255,255,.62);
    --glow-sun:rgba(220,150,20,.30);
    --glow-moon:rgba(107,79,216,.26);
    --prime:rgba(10,143,94,.10);
    --prime-edge:rgba(10,143,94,.34);
    color-scheme:light;
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--abyss);color:var(--ink);
  font:400 15px/1.45 var(--font);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
button,input{font:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---- the one glass recipe ------------------------------------------------
   Hairline border, deep blur, and a faint inset top edge — the top edge is
   what makes glass read as a physical pane rather than a tinted rectangle.
   Saturation stays modest: over-saturated blur is what reads as a toy. */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  backdrop-filter:blur(28px) saturate(150%);
  border:.5px solid var(--stroke);
  box-shadow:inset 0 .5px 0 var(--glass-hi),var(--shadow);
}
.glass-deck{
  background:var(--glass-deck);
  -webkit-backdrop-filter:blur(42px) saturate(150%);
  backdrop-filter:blur(42px) saturate(150%);
  border-top:.5px solid var(--stroke-2);
  box-shadow:inset 0 .5px 0 var(--glass-hi),var(--shadow-lg);
}

/* ---- small primitives ---------------------------------------------------- */
.eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.chip{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  border-radius:999px;background:var(--fill);border:.5px solid var(--stroke);
  color:var(--ink-2);font-size:13.5px;font-weight:600;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.chip:hover{background:var(--fill-2)}
.chip[aria-pressed="true"]{
  background:color-mix(in srgb,var(--signal) 22%,transparent);
  border-color:color-mix(in srgb,var(--signal) 45%,transparent);
  color:var(--ink);
}
.chip svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.seg{display:grid;grid-auto-flow:column;gap:3px;padding:3px;border-radius:999px;
  background:var(--sunk);border:.5px solid var(--stroke)}
.seg button{height:34px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--ink-2);transition:background .16s var(--ease),color .16s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--fill-2);color:var(--ink);
  box-shadow:inset 0 .5px 0 var(--glass-hi)}

.iconbtn{
  width:44px;height:44px;border-radius:999px;display:grid;place-items:center;
  color:var(--ink);
}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}