/* ───────────────────────────────────────────────────────────────────────────
   styles.css — PADUM production theme. The tokens below are the brand's, not
   this page's: they are lifted from padum.css via the extracted copy in
   decompression_gf, so this tool reads as part of the same site rather than as
   a generic dark dashboard. Dark only — the live site has no light mode.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --padum-ocean:  #244D78;
  --padum-deep:   #16324F;
  --padum-sea:    #346B8F;
  --padum-lagoon: #539DB8;
  --padum-sky:    #95D1EB;
  --padum-coral:  #D2564E;
  --padum-coral-hover: #BC463F;
  --padum-sand:   #EEA570;
  --padum-sun:    #FAC669;
  --padum-paper:  #F6F3EE;

  --surface-page-top:  #14375A;
  --surface-page-mid:  #0E2740;
  --surface-page-deep: #0A1E33;
  --surface-card: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.045) 100%);
  --tint-08: rgba(255,255,255,.09);
  --tint-16: rgba(255,255,255,.16);

  --surface-1: #0A1E33;
  --ink:       #FFFFFF;
  --ink-2:     #D3D6DA;
  --ink-muted: #A2AAB2;
  --grid:      #233448;
  --axis:      #405060;
  --hairline:  rgba(255,255,255,.14);

  --st-good:     #0ca30c;
  --st-warning:  #FAC669;
  --st-serious:  #EEA570;
  --st-critical: #D2564E;

  --font-display: "Oswald", "DIN Condensed", "Arial Narrow", sans-serif;
  --font-ui: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --track-display: .06em;
  --track-eyebrow: .22em;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  line-height: 1.55;
  color: var(--ink-2);
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(83,157,184,.16), transparent 60%),
    linear-gradient(180deg, var(--surface-page-top) 0%, var(--surface-page-mid) 46%, var(--surface-page-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* `hidden` has to outrank the layout rules below. The UA stylesheet gives
   [hidden] display:none at specificity (0,1,0), which any `.layout { display:
   grid }` beats -- so the attribute is set, the DOM agrees it is hidden, and
   the element is on screen anyway. */
[hidden] { display: none !important; }

/* Language switching. The attribute lives on <html>, so a single toggle flips
   every pair on the page at once and nothing can be left in the other tongue.
   !important for the same reason as above: these pairs sit inside components
   that set their own display, and a tie on specificity goes to whichever rule
   is written later -- which would silently leave both languages on screen. */
[data-lang="en"] [data-lang="th"] { display: none !important; }
[data-lang="th"] [data-lang="en"] { display: none !important; }
[data-lang="th"] body,
[data-lang="th"] { font-family: "IBM Plex Sans Thai", var(--font-ui); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--track-display); color: var(--ink); margin: 0; }
em { font-style: normal; color: var(--padum-sky); }
strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  display: block; font-family: var(--font-display); font-size: .68rem;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--padum-lagoon); margin-bottom: .5rem;
}

/* ── masthead ───────────────────────────────────────────────────────────── */

.masthead {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
.masthead__id { display: flex; gap: 1rem; align-items: flex-start; max-width: 62ch; }
.brand { border-radius: 50%; flex: none; }
.rule { display: block; width: 46px; height: 3px; background: var(--padum-coral); margin-bottom: .55rem; }
.masthead h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.1; text-transform: uppercase; }
.masthead__sub { margin: .55rem 0 0; font-size: .92rem; color: var(--ink-muted); }
.masthead__meta { display: flex; flex-direction: column; gap: .7rem; align-items: flex-end; }
.chrome { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.lang { display: flex; gap: .25rem; }

.ghost-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 .78rem/1 var(--font-ui); color: var(--ink-2);
  background: var(--tint-08); border: 1px solid var(--hairline);
  border-radius: 999px; padding: .5rem .85rem; cursor: pointer;
  text-decoration: none; transition: background .15s, color .15s;
}
.ghost-btn:hover { background: var(--tint-16); color: var(--ink); }
.ghost-btn[aria-pressed="true"] { background: var(--padum-lagoon); color: #06202f; border-color: transparent; }
.ghost-btn.wide { width: 100%; justify-content: center; margin-top: .6rem; }

.disclaimer {
  margin: 0; max-width: 42ch; text-align: right;
  font-size: .74rem; color: var(--ink-muted);
}
.disclaimer strong { color: var(--padum-sun); }

/* ── landing gate ───────────────────────────────────────────────────────── */

.gate { display: grid; place-items: center; padding: clamp(2rem, 7vw, 5rem) 1rem; }
.gate__card {
  max-width: 44rem; width: 100%;
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem);
  backdrop-filter: blur(6px);
}
.gate__card h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: .6rem; }
.gate__card p { margin: 0 0 1.1rem; color: var(--ink-muted); }
.gate__row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
.gate__row .field { flex: 1 1 18rem; }
.gate__foot { font-size: .8rem; margin: 1.4rem 0 0 !important; padding-top: 1rem; border-top: 1px solid var(--hairline); }

.cta {
  font: 600 .9rem/1 var(--font-ui); color: #fff;
  background: var(--padum-coral); border: none; border-radius: 999px;
  padding: .85rem 1.5rem; cursor: pointer; transition: background .15s;
}
.cta:hover { background: var(--padum-coral-hover); }

/* ── layout ─────────────────────────────────────────────────────────────── */

.layout {
  display: grid; grid-template-columns: 21rem minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 3vw, 2.5rem) 3rem;
  align-items: start;
}
.rail { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.stage { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.panel {
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: 1rem 1.1rem;
}
.panel__title {
  font-size: .78rem; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--padum-lagoon); margin-bottom: .85rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.panel--judgement { border-color: rgba(250,198,105,.35); }
.panel--judgement .panel__title { color: var(--padum-sun); }
.tag {
  font-family: var(--font-ui); font-size: .62rem; letter-spacing: .08em;
  background: rgba(250,198,105,.16); color: var(--padum-sun);
  border-radius: 999px; padding: .15rem .5rem; text-transform: uppercase;
}

.note { font-size: .78rem; color: var(--ink-muted); margin: .7rem 0 0; }
.note em { color: var(--ink-2); font-style: italic; }

.field { display: block; }
.field > span {
  display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .35rem;
}
select, input[type="date"] {
  width: 100%; font: 400 .92rem/1.3 var(--font-ui); color: var(--ink);
  background: rgba(10,30,51,.75); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: .6rem .7rem;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: right 1rem center, right .7rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select optgroup { background: var(--surface-page-deep); color: var(--padum-lagoon); }
select option { background: var(--surface-page-deep); color: var(--ink-2); }

.daynav { display: grid; grid-template-columns: 2.5rem minmax(0,1fr) 2.5rem; gap: .4rem; }
.step {
  font: 500 1.1rem/1 var(--font-ui); color: var(--ink-2);
  background: var(--tint-08); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); cursor: pointer;
}
.step:hover { background: var(--tint-16); color: var(--ink); }

.slider { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .75rem; align-items: center; }
.slider input[type="range"] { width: 100%; accent-color: var(--padum-sun); }
.slider output { font: 500 1.1rem/1 var(--font-mono); color: var(--padum-sun); min-width: 2.6ch; text-align: right; }

.prov { margin: 0; font-size: .76rem; }
.prov dt { color: var(--ink-muted); letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; margin-top: .6rem; }
.prov dt:first-child { margin-top: 0; }
.prov dd { margin: .1rem 0 0; color: var(--ink-2); }
.prov dd.good { color: var(--padum-sky); }
.prov dd.warn { color: var(--padum-sun); }

/* ── stage head ─────────────────────────────────────────────────────────── */

.stage__head { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.stage__head h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); text-transform: uppercase; }
.stage__head p { margin: .2rem 0 0; font-size: .82rem; color: var(--ink-muted); }
.badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge {
  font: 500 .7rem/1 var(--font-ui); letter-spacing: .06em;
  background: var(--tint-08); border: 1px solid var(--hairline);
  color: var(--ink-2); border-radius: 999px; padding: .4rem .7rem;
}

/* ── readout ────────────────────────────────────────────────────────────── */

.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem 1.25rem;
  background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: 1rem 1.25rem;
}
.readout .lbl { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.readout strong { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; letter-spacing: .02em; }
.readout .unit { font-size: .7rem; color: var(--ink-muted); }
.readout__flow { grid-column: span 2; min-width: 0; }
.readout__flow canvas { display: block; width: 100%; max-width: 220px; height: 54px; margin-top: .2rem; }
#ro-flow { color: var(--padum-sky); }

/* ── charts ─────────────────────────────────────────────────────────────── */

.chart {
  margin: 0; background: var(--surface-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: .9rem 1rem 1rem;
}
.chart figcaption {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .6rem;
}
.chart canvas { display: block; width: 100%; touch-action: pan-y; }
#cv-tide { cursor: ew-resize; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }

.ext, .win { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.ext li, .win li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
}
.ext li:last-child, .win li:last-child { border-bottom: none; }
.ext .kind { font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; min-width: 3.2rem; }
.ext .kind--high { color: var(--padum-sky); }
.ext .kind--low  { color: var(--padum-sand); }
.ext .when, .win .when { font-family: var(--font-mono); color: var(--ink); }
.ext .hgt { margin-left: auto; font-family: var(--font-mono); color: var(--ink-muted); }
.win .dur { margin-left: auto; font-size: .78rem; color: var(--ink-muted); }
.win .dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: var(--st-good); }
.win .empty, .ext .empty { color: var(--ink-muted); font-style: italic; }

/* ── the year ───────────────────────────────────────────────────────────── */

.year { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.year__head { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
.year__head h2 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); text-transform: uppercase; }
.year__port { margin: .3rem 0 0; font-size: .8rem; color: var(--ink-muted); max-width: 62ch; }
.year__controls { display: flex; gap: .5rem; flex-wrap: wrap; }
.seg { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(10,30,51,.5); }
.seg .ghost-btn { border-color: transparent; background: transparent; }
.seg .ghost-btn[aria-pressed="true"] { background: var(--padum-lagoon); color: #06202f; }
#cv-year, #cv-cal { cursor: pointer; }
.year__readout { margin: .5rem 0 0; min-height: 1.3em; font: .76rem/1.4 var(--font-mono); color: var(--ink-2); }

.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; font-size: .72rem; color: var(--ink-muted); }
.legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; flex: none; }
.sw--ramp { width: 2.4rem; background: linear-gradient(90deg, #102B47, #244D78, #539DB8, #7DBFDC); }
.sw--night { background: rgba(4,12,22,.85); outline: 1px solid var(--hairline); }
.sw--slot { border: 1.5px solid var(--ink); }

.trip__inputs { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.trip__inputs .field { flex: 1 1 9.5rem; min-width: 0; }
.trip__inputs .slot { flex: 1 1 15rem; }
.trip__inputs .ghost-btn { flex: 1 1 12rem; justify-content: center; padding: .65rem .85rem; }
input[type="time"] {
  width: 100%; min-width: 0; font: 400 .92rem/1.3 var(--font-ui); color: var(--ink);
  background: rgba(10,30,51,.75); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: .6rem .5rem;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.slot__pair { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: .3rem; align-items: center; }
.slot__pair b { color: var(--ink-muted); font-weight: 400; }
.trip__err { margin: .6rem 0 0; min-height: 0; font-size: .8rem; color: var(--padum-coral); }
.trip__err:empty { display: none; }

.trip__days { list-style: none; margin: .8rem 0 0; padding: 0; }
.trip__day, .trip__axis {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 6.5rem; gap: .75rem; align-items: start;
  padding: .55rem 0; border-top: 1px solid rgba(255,255,255,.07);
}
.trip__axis { border-top: none; padding: 0 0 .15rem; font: .62rem/1 var(--font-mono); color: var(--ink-muted); }
.trip__axis > div:last-child { text-align: right; }
.trip__ticks { display: flex; justify-content: space-between; }
.trip__date { font-size: .82rem; color: var(--ink); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.trip__tag { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: .1rem .45rem; }
.trip__tag--spring { background: rgba(210,86,78,.2); color: #F2A29C; }
.trip__tag--neap { background: rgba(12,163,12,.2); color: #8FDB8F; }
.trip__bar { position: relative; height: 18px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.trip__bar > span { position: absolute; top: 0; bottom: 0; }
.trip__night { background: rgba(4,12,22,.7); }
.trip__calm { background: var(--st-good); opacity: .85; }
.trip__slot { border: 1.5px solid var(--ink); border-radius: 3px; }
.trip__turn { width: 2px; margin-left: -1px; }
.trip__turn--high { background: #FFFFFF; }
.trip__turn--low { background: var(--padum-sand); }
.trip__turns { display: flex; flex-wrap: wrap; gap: .1rem .7rem; margin-top: .3rem; font: .72rem/1.4 var(--font-mono); }
.trip__t--high { color: var(--ink); }
.trip__t--low { color: var(--padum-sand); }
.trip__turns small { color: var(--ink-muted); font-size: .66rem; }
.trip__src { font-family: var(--font-ui); color: var(--ink-muted); }
.trip__src--model { color: var(--padum-sun); }
.trip__mins { display: flex; flex-direction: column; align-items: flex-end; font: .82rem/1.35 var(--font-mono); color: var(--ink); }
.trip__mins small { color: var(--ink-muted); font-size: .66rem; }

/* ── prose ──────────────────────────────────────────────────────────────── */

.prose {
  background: var(--surface-card); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: 1.25rem clamp(1rem, 2.5vw, 2rem);
  max-width: 76ch;
}
.prose h2 { font-size: 1.15rem; text-transform: uppercase; margin-bottom: .8rem; }
.prose h3 { font-size: .95rem; color: var(--padum-sky); margin: 1.4rem 0 .35rem; letter-spacing: .04em; }
.prose p { margin: 0 0 .7rem; font-size: .88rem; }
.prose ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.prose li { font-size: .86rem; margin-bottom: .5rem; }

.foot {
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 2.5rem;
  border-top: 1px solid var(--hairline);
  font-size: .74rem; color: var(--ink-muted);
}
.foot p { margin: 0; }

/* ── narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* On a phone the rail stacks ABOVE the stage, which put three panels of
     controls and a provenance table between the reader and the chart they came
     for. `display: contents` dissolves the rail so its panels become siblings
     of the stage and can be ordered individually: the two controls somebody
     actually touches stay on top, and the provenance -- which is reference,
     read once -- drops below the charts. */
  .layout { display: flex; flex-direction: column; }
  .rail { display: contents; }
  .stage { order: 2; }
  .panel--prov { order: 3; }
  .rail { position: static; }
  .masthead { flex-direction: column; }
  .masthead__meta { align-items: flex-start; }
  .disclaimer { text-align: left; }
  .readout__flow { grid-column: span 2; }
}

@media (max-width: 640px) {
  .trip__day, .trip__axis { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  .trip__date { grid-column: 1 / -1; }
  .trip__axis > div:first-child { display: none; }
  .year__controls { width: 100%; }
}

@media (max-width: 520px) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout strong { font-size: 1.3rem; }
  .gate__row { flex-direction: column; align-items: stretch; }
  .cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}