/* rain-next.css — "Næste regn" (12 timer) på forsiden.
   Parrer med src/views/rain-next.php. Direction B, tokens.css er LÅST:
   ingen nye tokens her, kun --ink/--paper/--surface/--line/--muted/--mono
   og --agree-*-kanalen fra enigheds-chippene.

   MOBILREGLEN (ikke-forhandlelig): 12 kolonner skal ligge inden for ÉN
   skærmbredde ved 380 px uden vandret scroll. Det er hele grunden til at
   vinduet er 12 timer og ikke 24. Gitteret bruger derfor minmax(0,1fr) —
   uden 0-minimum ville grid'ets automatiske min-content-bund lade
   kolonnerne skubbe sig selv bredere end sporet og genskabe scrollen. */

.rn{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 18px 14px;
  margin-bottom:26px;
}

/* ── Hoved: kicker + radar-genvej ─────────────────────────────────────────── */

.rn-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}

.rn-kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  margin:0;font-weight:600;
}

/* Genbruger .ins-link-mønstret fra heroens nedbørsinstrument: statisk
   stregikon. ALDRIG live-thumbnail, aldrig tredjepartskald ved sideload.
   Det er svaret på 0–60-minutters-hullet, som vi bevidst ikke dækker med data. */
.rn-radar{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px;
  transition:background .18s,border-color .18s;
}
.rn-radar svg{width:13px;height:13px;flex:none}
.rn-radar:hover{background:var(--paper);border-color:var(--muted)}
.rn-radar:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── Målt nedbør (fase 3) — virkeligheden før modellen ────────────────────── */

.rn-measured{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 8px;font-size:14px;color:var(--ink);
}
.rn-measured[hidden]{display:none}
.rn-dot{
  width:8px;height:8px;border-radius:50%;background:var(--rain);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rain) 22%,transparent);
}
.rn-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:2px 7px;
}

/* ── Overskriftssætningen — modulets hovedperson ──────────────────────────── */

.rn-title{
  margin:0 0 14px;
  font-size:clamp(21px,4.2vw,33px);
  font-weight:700;letter-spacing:-.02em;line-height:1.12;
  color:var(--ink);
  text-wrap:balance;
}
.rn-sub{
  display:block;margin-top:5px;
  font-size:clamp(12.5px,1.6vw,14px);
  font-weight:500;letter-spacing:0;color:var(--muted);
}

/* ── Skalalabel ───────────────────────────────────────────────────────────── */

.rn-scale{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--muted);margin-bottom:4px;
}

/* ── Striben ──────────────────────────────────────────────────────────────── */

.rn-strip{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:3px;
  align-items:end;
  border-top:1px dashed var(--line);   /* y-max-linjen, som skalalabelen navngiver */
  padding-top:6px;
}

.rn-col{min-width:0;display:flex;flex-direction:column;gap:5px}

.rn-bar{
  position:relative;
  height:76px;
  border-bottom:1px solid var(--line);  /* nul-linjen */
  border-radius:3px 3px 0 0;
}

/* Båndet FLYDER fra min til max — derfor absolut placeret med bottom+height,
   ikke en søjle der vokser fra nul. Det er spændet, ikke et middeltal. */
.rn-bar span{
  position:absolute;left:0;right:0;
  border-radius:2px;
  background:var(--ink);
}

.rn-lbl{
  font-family:var(--mono);font-size:10px;text-align:center;
  color:var(--muted);letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Flertal af de dækkende modeller er våde → fuld inkfarve. */
.rn-col.is-wet .rn-bar span{background:var(--ink)}
.rn-col.is-wet .rn-lbl{color:var(--ink);font-weight:600}

/* Kun et MINDRETAL er våde → dæmpet flade + skravering. Skraveringen er den
   farveblinde-venlige kanal (samme princip som enigheds-chippenes prik):
   signalet må aldrig bæres af kulør alene. */
.rn-col.is-minority .rn-bar span{
  background:repeating-linear-gradient(
    -45deg,
    var(--muted) 0 2px,
    transparent 2px 5px
  );
  outline:1px solid var(--muted);
  outline-offset:-1px;
  opacity:.85;
}

/* Dækket, men ingen model giver regn. Den flade stribe ER informationen —
   den må aldrig fjernes, for fraværet af søjler er selve svaret. */
.rn-col.is-dry .rn-bar span{background:var(--line)}

/* ── Tørt vindue: samme information, en tredjedel af vægten ────────────────
   Striben BLIVER — den viser at vi faktisk har spurgt 12 konkrete timer,
   hvilke klokkeslæt vinduet dækker, og hvor dækningen er tynd. Men en flad
   linje skal ikke fylde som et skybrud: i Danmark er tørt normalen, og en
   stor tom kasse de fleste dage lærer folk at springe modulet over.
   Valgt 08-08 efter måling af tre varianter (266 / 207 / 148 px på mobil).
   Fuld kollaps blev fravalgt: det ville gøre "tørt" til en påstand uden
   synligt belæg. Skalalabelen renderes slet ikke her — se partialen. */
.rn[data-rn-state="dry"] .rn-bar{height:22px}
/* Den stiplede toplinje ER y-max-linjen, som skalalabelen navngiver. Uden
   label peger den på ingenting — så den følger med ud af tør tilstand. */
.rn[data-rn-state="dry"] .rn-strip{border-top:0;padding-top:0}

/* Ingen modeldækning. Skraveret TOM kolonne — ikke en nul-søjle:
   "0 mm" og "vi ved det ikke" er ikke det samme påstand. */
.rn-col.is-void .rn-bar{
  background:repeating-linear-gradient(
    -45deg,
    var(--line) 0 3px,
    transparent 3px 7px
  );
  opacity:.6;
}
.rn-col.is-void .rn-lbl{opacity:.5}

/* Midnat: kraftigere lodret skiller + datoskift, samme konvention som
   gridDecor's midnatsstreg i graferne. Sat med box-shadow frem for
   border-left, så kolonnens bredde i gitteret er uændret — en border
   ville flytte alle efterfølgende kolonner en pixel og på 380 px er
   det forskellen på at passe og ikke passe. */
.rn-col.is-midnight{
  box-shadow:-2px 0 0 -1px var(--muted);
}
.rn-col.is-midnight .rn-lbl{color:var(--ink);font-weight:600}

/* ── Fodlinje ─────────────────────────────────────────────────────────────── */

.rn-foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--muted);
}
.rn-upd{margin-left:auto}
/* .delayed-badge arves fra forsidens egen stil — ingen kopi her. */

/* ── Mobil ────────────────────────────────────────────────────────────────── */

@media (max-width:640px){
  .rn{padding:14px 12px 12px;border-radius:12px;margin-bottom:20px}
  .rn-strip{gap:2px}
  .rn-bar{height:62px}
  .rn[data-rn-state="dry"] .rn-bar{height:20px}
  .rn-lbl{font-size:9px}
  /* Fodlinjen har tre elementer der ikke kan dele én linje på 380 px.
     margin-left:auto ville skubbe "opdateret" ud i et hjørne for sig selv. */
  .rn-upd{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .rn-radar{transition:none}
}