/* Agresca Nile Monitor — product layer on top of tokens.css.
   Additions the design system does not define yet: base element styles, type classes, data-kind tags,
   reservoir-state marks, alert-tier chips, the <Value> pattern, chart and map variables, layout helpers.
   Everything reads tokens; no literal colours here except the required white on filled marks. */

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface-alt); color: var(--text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
:lang(ar) body, body:lang(ar) { font-family: var(--font-sans-ar); font-size: 1.0625rem; line-height: 1.75; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img, svg { display: block; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- type classes (names = token styles) ---------- */
.t-h1, .t-h2, .t-h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--heading); margin: 0; }
.t-h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.t-h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.t-h3 { font-size: 1.25rem; }
.t-lede { font-size: 1.18rem; line-height: 1.55; color: var(--text-dim); max-width: 60ch; }
.t-body { font-size: 1rem; line-height: 1.55; }
.t-ui { font-size: 14px; line-height: 20px; }
.t-data { font-size: 13px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.t-caption { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted); }
.t-kpi { font-family: var(--font-display); font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--heading); font-variant-numeric: tabular-nums; }
.t-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
:lang(ar) .t-h1, :lang(ar) .t-h2, :lang(ar) .t-h3 { font-family: var(--font-display-ar); letter-spacing: 0; line-height: 1.3; }
:lang(ar) .t-ui { font-size: 15px; line-height: 24px; }
:lang(ar) .t-caption { font-size: 13px; line-height: 20px; }
:lang(ar) .t-label { letter-spacing: 0; text-transform: none; font-family: var(--font-sans-ar); }
.num { font-variant-numeric: tabular-nums; }
[dir="rtl"] .num, [dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }

/* ---------- surfaces ---------- */
.card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.card--dense { padding: var(--space-4); }
.card--lg { border-radius: var(--radius-lg); }
.card--hover { transition: box-shadow .15s ease; }
.card--hover:hover { box-shadow: var(--shadow-md); }
.panel { background: var(--surface); border-bottom: 1px solid var(--border); }
.hairline { border-color: var(--border); }
.hairline--strong { border-color: var(--border-strong); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius); font-weight: 600; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--action); color: var(--action-on); }
.btn--primary:hover { background: var(--action-hover); color: var(--action-on); }
.btn--secondary { background: var(--surface); color: var(--heading); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--text-dim); }
.btn--ghost { background: transparent; color: var(--link); }
.btn--sm { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; }
.btn--icon { width: 44px; padding: 0; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); }
.seg__item { min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; }
.seg__item[aria-pressed="true"], .seg__item[aria-selected="true"] { background: var(--c-navy); color: var(--c-paper); }
[data-theme="dark"] .seg__item[aria-pressed="true"], [data-theme="dark"] .seg__item[aria-selected="true"] { background: var(--action); color: var(--action-on); }

/* ---------- data-kind tags (rule 2) ---------- */
.kind { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--heading); border: 1px solid var(--border-strong); background: var(--surface-alt); }
.kind--observed { background: var(--c-navy); color: var(--c-paper); border-color: var(--c-navy); }
.kind--satellite { border-style: solid; }
.kind--modelled { border-style: dotted; }
.kind--forecast { border-style: dashed; background: transparent; }

/* ---------- the <Value> pattern (rule 3) ---------- */
.value { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.value__num { font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.value__unit { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.value__unc { font-size: 12px; font-weight: 500; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.value__meta { flex-basis: 100%; font-size: 12px; line-height: 16px; color: var(--text-muted); }
.value--stale .value__num { color: var(--text-muted); }
.value--stale .value__meta::after { content: " · stale"; }
:lang(ar) .value--stale .value__meta::after { content: " · قديمة"; }

/* ---------- reservoir-state marks (design rule, product layer) ---------- */
.mark { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; vertical-align: middle; }
.mark--normal { border: 2.5px solid var(--state-normal); background: var(--surface-raised); }
.mark--high { background: var(--state-high); border: 2px solid var(--c-paper); box-shadow: 0 0 0 1px var(--state-high); }
.mark--low { background: var(--state-low); border: 2px solid var(--c-paper); box-shadow: 0 0 0 1px var(--state-low); }
.mark--critical-low { background: var(--state-critical-low); border: 2px solid var(--c-paper); box-shadow: 0 0 0 1px var(--state-critical-low); }
.mark--at-fsl { background: var(--state-spill); border: 2px solid var(--c-paper); box-shadow: 0 0 0 1px var(--state-spill); }
.mark--no-data { border: 2px dashed var(--state-nodata); background: var(--map-land); }
.mark--gauge { width: 10px; height: 10px; border-radius: 0; background: var(--c-navy); border: 1.5px solid var(--c-paper); box-shadow: 0 0 0 1px var(--c-navy); transform: rotate(45deg); }
.mark--selected { box-shadow: 0 0 0 3px var(--surface-raised), 0 0 0 5px var(--accent-text); }

/* ---------- alert-tier chips (NB-FFEWS Ready / Set / Go) ---------- */
.tier { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; line-height: 18px; }
.tier--ready { background: var(--alert-watch); color: var(--alert-watch-on); }
.tier--set { background: var(--alert-warning); color: var(--alert-warning-on); }
.tier--go { background: var(--alert-severe); color: var(--alert-severe-on); }
.tier--info { background: var(--alert-info); color: var(--alert-info-on); }
.tint--ready { background: var(--alert-watch-tint); }
.tint--set { background: var(--alert-warning-tint); }
.tint--go { background: var(--alert-severe-tint); }
.tint--info { background: var(--alert-info-tint); }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px var(--space-5); border-bottom: 1px solid var(--border); }

/* ---------- AI label and sample tag ---------- */
.ai-label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--alert-info-tint); color: var(--alert-info); font-size: 12px; font-weight: 600; }
.sample-tag { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px dashed var(--border-strong); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- charts (CSS variables consumed by the chart wrapper) ---------- */
.chart { --grid: var(--chart-grid); --axis: var(--chart-axis); --band: var(--chart-band); --obs: var(--series-1); --model: var(--text-muted); --fsl: var(--chart-axis); }
.chart__obs { fill: var(--obs); stroke: var(--surface-raised); stroke-width: 1.5; }
.chart__errbar { stroke: var(--obs); stroke-width: 1.5; }
.chart__model { fill: none; stroke: var(--model); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.chart__forecast { fill: none; stroke: var(--obs); stroke-width: 2.5; stroke-dasharray: 8 5; }
.chart__band { fill: var(--band); }
.chart__fsl { stroke: var(--fsl); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart__grid { stroke: var(--grid); }
.chart__axis { stroke: var(--axis); stroke-width: 1.5; }
.chart__tick { font-family: var(--font-sans); font-size: 11px; fill: var(--text-muted); }

/* ---------- map ---------- */
.map { background: var(--map-water); border-radius: var(--radius-lg); overflow: hidden; }
.map-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); font-size: 12px; line-height: 16px; white-space: nowrap; }
.map-chip--selected { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text), var(--shadow-md); }
.map-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-dim); text-shadow: 0 0 3px var(--map-halo), 0 0 3px var(--map-halo); }
.map-control { background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--heading); }
.map-attribution { font-size: 11px; line-height: 14px; color: var(--text-dim); background: color-mix(in srgb, var(--surface) 75%, transparent); padding: 2px 6px; border-radius: var(--radius-xs); }

/* ---------- layout helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.two-col { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); }
.two-col > .main { flex: 999 1 600px; min-width: 0; }
.two-col > .side { flex: 1 1 420px; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 820px) { .hide-sm { display: none !important; } }
@media (min-width: 821px) { .only-sm { display: none !important; } }

/* ---------- phone shell ---------- */
.app-header { height: 56px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.bottom-nav { position: fixed; inset-inline: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-top: 1px solid var(--border); }
.bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-dim); font-size: 12px; font-weight: 500; text-decoration: none; }
.bottom-nav__item[aria-current="page"] { color: var(--heading); font-weight: 600; }
.bottom-nav__pill { display: flex; align-items: center; justify-content: center; width: 56px; height: 28px; border-radius: var(--radius-pill); }
.bottom-nav__item[aria-current="page"] .bottom-nav__pill { background: var(--c-sand); }
.sheet { position: fixed; inset-inline: 0; bottom: calc(64px + env(safe-area-inset-bottom)); background: var(--surface); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg); transition: height .2s ease; display: flex; flex-direction: column; }
.sheet__handle { height: 28px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; }
.sheet__handle::before { content: ""; width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong); }
.sheet--peek { height: 176px; } .sheet--half { height: 50vh; } .sheet--full { height: calc(100vh - 56px - 64px); }