/* «الفقع» — one stylesheet, ported from the approved design (ClaudeAudit/design-2026-09-24/v2/faqa-base.css).
   Three themes via data-theme: day (default), night, sun (black on white for glare). No choice saved ->
   no attribute, and night follows the phone's dark setting. IBM Plex Sans Arabic 400/600/700 only.
   Logical properties throughout, so the same rules serve RTL and LTR. */

/* ---------------------------------------------------------------- tokens */
:root, [data-theme="day"] {
  color-scheme: light;
  --bg: #ece4d6; --surface: #f8f3ea; --ink: #1a140e; --muted: #54473a; --line: #b9aa94;
  --accent: #e0a930; --rain: #1f4e8c; --rain-fill: #3f78c4; --pos: #2c6636; --pick: #8a5a00;
  --peak: #c98f1c; --alert: #a3302a; --soft: #e4dbca;
  --hatch: rgb(138 90 0 / 0.14);
  --focus: #1f4e8c;
  --f: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --base: 13px;
  --pad: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #15110c; --surface: #211b14; --ink: #f3ebdd; --muted: #bcae98; --line: #4d4234;
    --rain: #8fb4e6; --rain-fill: #3f78c4; --pos: #7fbd88; --pick: #d9a54a; --peak: #e2b45c;
    --alert: #e07a72; --soft: #2c251c; --hatch: rgb(217 165 74 / 0.18); --focus: #8fb4e6;
  }
}
[data-theme="night"] {
  color-scheme: dark;
  --bg: #15110c; --surface: #211b14; --ink: #f3ebdd; --muted: #bcae98; --line: #4d4234;
  --rain: #8fb4e6; --rain-fill: #3f78c4; --pos: #7fbd88; --pick: #d9a54a; --peak: #e2b45c;
  --alert: #e07a72; --soft: #2c251c; --hatch: rgb(217 165 74 / 0.18); --focus: #8fb4e6;
}
[data-theme="sun"] {
  color-scheme: light;
  --bg: #fff; --surface: #fff; --ink: #000; --muted: #000; --line: #000; --accent: #000;
  --rain: #000; --rain-fill: #000; --pos: #000; --pick: #000; --peak: #000; --alert: #000; --soft: #fff;
  --hatch: #000; --focus: #000;
  --base: 15px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-block-size: 100dvh; background: var(--bg); color: var(--ink);
  font-family: var(--f); font-size: var(--base); line-height: 1.45;
  padding-block-end: env(safe-area-inset-bottom);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--rain); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[data-theme="sun"] :focus-visible { outline-width: 3px; }
.main-slot:focus { outline: none; }
.sprite { display: none; }
.sr-only, .sun__label {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.num { unicode-bidi: isolate; font-variant-numeric: tabular-nums lining-nums; }
bdi { unicode-bidi: isolate; }
.icon, .ic {
  inline-size: 16px; block-size: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
[dir="rtl"] .ic--dir { transform: scaleX(-1); }
.ic--big { inline-size: 32px; block-size: 32px; color: var(--rain); }

.skip {
  position: absolute; inset-inline-start: 8px; inset-block-start: -60px; z-index: 10;
  background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 6px; font-weight: 700;
}
.skip:focus { inset-block-start: 8px; color: var(--bg); }

/* the side gutters grow on wide screens so every row lines up on one 1320px column */
.top, .tabs, .banners, .pg, .foot { padding-inline: max(var(--pad), calc((100% - 1320px) / 2)); }

/* ---------------------------------------------------------------- top bar + nav */
.top { display: flex; align-items: center; gap: 12px; padding-block: 10px 0; }
.brand { margin: 0 0 0 0; margin-inline-end: auto; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.brand a:hover { color: inherit; }
.tg {
  inline-size: 36px; block-size: 36px; border-radius: 8px; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted); background: var(--surface); cursor: pointer; padding: 0;
}
.tg:hover { color: var(--ink); }
.tg .ic { inline-size: 18px; block-size: 18px; }
[data-theme="sun"] .tg { border-width: 2px; color: #000; }
.tabs {
  display: flex; gap: 2px; padding-block: 6px 0; border-block-end: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 6px 7px 8px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap;
  min-block-size: 36px; display: inline-flex; align-items: center;
}
.tab[aria-current] { color: var(--ink); border-color: var(--ink); }
[data-theme="sun"] .tabs { border-block-end-width: 2px; }
[data-theme="sun"] .tab[aria-current] { border-block-end-width: 3px; }

.banners:empty { display: none; }
.banners { display: flex; flex-direction: column; gap: 6px; padding-block-start: 10px; }
.banner {
  margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); border-inline-start: 3px solid var(--pick); border-radius: 6px;
  padding: 7px 10px; background: var(--surface);
}
.banner .ic { color: var(--pick); margin-block-start: 1px; }
.banner--offline { border-inline-start-color: var(--rain); }
.banner--offline .ic { color: var(--rain); }

/* ---------------------------------------------------------------- page grid */
.pg { padding-block: 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.main, .side { display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; }
/* phone: one column — main and side dissolve; .first / .last pick their place in it */
@media (max-width: 959px) {
  .main, .side { display: contents; }
  .pg > .h1 { order: -2; }
  .pg .first { order: -1; }
  .pg .last { order: 1; }
}
@media (min-width: 960px) {
  :root { --pad: 32px; }
  .top { padding-block-start: 14px; }
  .tab { font-size: 13.5px; padding: 8px 10px 10px; }
  .pg {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px 24px;
    align-content: start; padding-block: 20px 32px;
  }
  .pg > .h1 { grid-column: 1 / -1; font-size: 24px; }
  .view--method .toc { position: sticky; inset-block-start: 16px; max-block-size: calc(100dvh - 32px); overflow: auto; }
  .card { padding: 12px 16px; }
}

/* ---------------------------------------------------------------- type */
.h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.h1 small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-block-start: 3px; letter-spacing: 0; }
.h2 { margin: 0; font-size: 14px; font-weight: 700; }
.h3 { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.meta { font-size: 11.5px; color: var(--muted); }
p.meta { margin: 0; }
.lead { font-weight: 600; }
.foot-note { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.link { font-size: 12.5px; font-weight: 600; color: var(--rain); display: inline-flex; align-items: center; gap: 4px; }
.link .ic { inline-size: 14px; block-size: 14px; }
.link:hover { text-decoration: underline; }
.foot-note .link { font-size: inherit; }

/* ---------------------------------------------------------------- surfaces */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-inline-size: 0;
}
.card > p { margin: 0; }
[data-theme="sun"] .card { border-width: 2px; border-radius: 4px; }
.card__hd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card__hd .meta { margin-inline-start: auto; }
.state { align-items: flex-start; }
.state .h1 { font-size: 17px; }
.cards, .daylist, .sat-only__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cards--muted .card { opacity: 0.9; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; }
.st b { display: block; font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.st > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 11px; color: var(--muted); margin-block-start: 2px; }
.st--w { grid-column: span 2; }
.st--w b { font-size: 14px; line-height: 1.3; }
.st--span { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .view--rain .stats { grid-template-columns: repeat(2, 1fr); }
  .view--rain .st--w { grid-column: 1 / -1; }
}
.view--place .stats { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }

/* ---------------------------------------------------------------- chips */
.chips {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none;
  margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); padding-block: 2px;
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 960px) { .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding-inline: 0; } }
.chip {
  display: inline-flex; align-items: center; gap: 5px; min-block-size: 32px; padding: 0 11px;
  border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); white-space: nowrap; flex: none; cursor: pointer;
}
.chip .num { color: var(--muted); font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip[aria-pressed="true"] .num { color: inherit; opacity: 0.8; }
[data-theme="sun"] .chip { border-width: 2px; }

/* ---------------------------------------------------------------- readings: sources and amounts */
.src {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted);
  white-space: nowrap; line-height: 1.5;
}
.src--gnd { background: var(--soft); border-color: transparent; color: var(--ink); }
.src--sat { border-style: dashed; background: transparent; }
[data-theme="sun"] .src--gnd { border-color: #000; }
.tr {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; font-weight: 700;
  color: var(--rain); border: 1.5px solid var(--rain); border-radius: 4px; padding: 0 5px; line-height: 1.5;
}
.zero {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; font-weight: 700;
  color: var(--ink); background: var(--soft); border-radius: 4px; padding: 0 6px; line-height: 1.5;
}
[data-theme="sun"] .zero { border: 1.5px solid #000; }
.unk {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; font-weight: 700;
  color: var(--pick); border: 1.5px dashed var(--pick); border-radius: 4px; padding: 0 4px;
  line-height: 1.5; background: repeating-linear-gradient(135deg, transparent 0 3px, var(--hatch) 3px 4px);
}
.unk::after {
  content: '?'; font-weight: 700; display: inline-grid; place-items: center; inline-size: 13px; block-size: 13px;
  border-radius: 50%; background: var(--pick); color: var(--surface); font-size: 9.5px; line-height: 1;
}
[data-theme="sun"] .unk { background: #fff; border-style: dashed; color: #000; }
.amt { font-weight: 700; color: var(--rain); white-space: nowrap; }
.amt--min { font-weight: 700; color: var(--rain); }
.amt--sat { color: var(--muted); font-weight: 600; }
.states { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: var(--muted); }
.states .num { font-weight: 700; }

/* one reading row: amount + bar | place | source */
.rows { margin: 0; padding: 0; list-style: none; }
.rd {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
  padding-block: 6px; border-block-start: 1px solid var(--line);
}
.rd .mm { grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.15; }
.rd .mm .num { font-size: 15px; font-weight: 700; color: var(--rain); letter-spacing: -0.02em; }
.rd .mm.geq { color: var(--rain); font-weight: 700; }
.rd .bar { grid-column: 1; grid-row: 2; block-size: 3px; border-radius: 2px; background: var(--soft); position: relative; overflow: hidden; }
.rd .bar i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w, 0); background: var(--rain-fill); border-radius: 2px; }
.rd .pl { grid-column: 2; grid-row: 1 / 3; font-size: 13px; font-weight: 600; line-height: 1.3; min-inline-size: 0; }
.rd .pl small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.rd > .src { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: end; }
.rd--extra { display: none; }
.rows--open .rd--extra { display: grid; }
[data-theme="sun"] .rd .bar { background: #fff; border: 1px solid #000; }
@media (min-width: 960px) {
  .rd { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 2px 14px; padding-block: 7px; }
  .rd .pl small { display: inline; margin-inline-start: 6px; }
}

/* measured vs estimated: a station row leads with a solid badge naming who measured; a radar row is
   quieter and carries one compact chip saying how the stations within 30 km answered it */
.src--stn { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; }
.rd--radar .mm .num, .rd--radar .mm.geq { color: var(--muted); font-weight: 600; }
.rd--radar .bar i { background: var(--line); }
.rd--radar .pl { font-weight: 400; color: var(--muted); }
.rd--radar .pl > small { color: var(--muted); }
.chk {
  display: inline-flex; align-items: center; gap: 4px; margin-block-start: 3px; font-size: 11px;
  font-weight: 600; line-height: 1.5; border-radius: 4px; padding: 0 6px; border: 1.5px solid currentColor;
  white-space: normal; max-inline-size: 100%;
}
.chk::before { content: ''; flex: none; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.chk--confirmed { color: var(--pos); }
.chk--contradicted { color: var(--alert); }
.chk--unchecked { color: var(--muted); border-style: dashed; }
.chk--unchecked::before { background: transparent; border: 1.5px solid currentColor; inline-size: 4px; block-size: 4px; }
.rd .pl > .chk { display: flex; inline-size: fit-content; }
.key .chk { margin: 0; }
.radar-only {
  flex-basis: 100%; margin: 2px 0 0; font-size: 11.5px; font-weight: 600; color: var(--pick);
}
/* hail REPORTED at an airport: one compact marker per day, separate from every amount */
.hail {
  display: flex; align-items: baseline; gap: 4px 6px; flex-wrap: wrap; margin: 4px 0 2px;
  font-size: 12px; line-height: 1.45; color: var(--ink);
}
.hail > b { font-weight: 700; color: var(--rain); }
.hail__it { white-space: normal; }
.hail__ic {
  flex: none; align-self: center; inline-size: 14px; block-size: 12px;
  background:
    radial-gradient(circle at 30% 70%, var(--rain) 0 2.4px, transparent 2.9px),
    radial-gradient(circle at 72% 72%, var(--rain) 0 2px, transparent 2.5px),
    radial-gradient(circle at 52% 28%, var(--rain) 0 2.7px, transparent 3.2px);
}
.hail--sum { margin-block-start: 8px; font-weight: 600; }
/* hail OR snow pellets: the same marker, hollow stones — a weaker claim than hail itself */
.hail--hail_or_pellets .hail__ic {
  background:
    radial-gradient(circle at 30% 70%, transparent 0 1.2px, var(--rain) 1.4px 2.4px, transparent 2.9px),
    radial-gradient(circle at 72% 72%, transparent 0 1px, var(--rain) 1.2px 2px, transparent 2.5px),
    radial-gradient(circle at 52% 28%, transparent 0 1.4px, var(--rain) 1.6px 2.7px, transparent 3.2px);
}
.hail--key { margin: 0; display: inline-flex; align-items: center; font-weight: 700; color: var(--rain); }
.day--hail .dh > span { font-style: italic; }
[data-theme="sun"] .hail > b, [data-theme="sun"] .hail--key { color: #000; }
.kinds { margin: 10px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.kinds__stn { color: var(--ink); font-weight: 600; }
.chips--kind { margin-block-end: 2px; }
.filter-slot:empty { display: none; }
[data-theme="sun"] .src--stn { background: #000; color: #fff; }
.day .dh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.day .dh h2 { margin: 0; font-size: 14px; font-weight: 700; }
.day .dh > span { font-size: 11.5px; color: var(--muted); margin-inline-start: auto; }
.day .states { padding-block-start: 8px; border-block-start: 1px solid var(--line); }
.more, .tail {
  background: none; border: 0; padding: 6px 0; cursor: pointer; text-align: start;
  font-size: 12px; font-weight: 600; color: var(--rain); min-block-size: 32px;
}
.day .more { border-block-start: 1px solid var(--line); }
.more:hover, .tail:hover { text-decoration: underline; }
.tail { align-self: center; font-size: 12.5px; }
.tail-slot { display: flex; justify-content: center; }
.tail-slot:empty { display: none; }

.key { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; font-size: 11.5px; color: var(--muted); }
.key > *:nth-child(odd) { justify-self: start; }
.key .mm.geq { font-size: 11px; font-weight: 700; color: var(--rain); }

/* season: one row per rain day */
.days { margin: 0; padding: 0; list-style: none; }
.rd--day { grid-template-columns: 120px minmax(0, 1fr); }
.rd--day .mm { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rd--day .pl { font-weight: 400; font-size: 12.5px; }
.rd--day .bar { grid-row: 2; }
.rd--link { display: block; padding: 0; }
.rd__a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding-block: 7px; min-block-size: 40px; }
.rd__a .ic { color: var(--rain); }
.rd__a:hover .pl { color: var(--rain); }

/* ---------------------------------------------------------------- the answer */
.cd { margin: 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.cd b { font-size: 14px; font-weight: 600; line-height: 1; }
.cd b .num { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.cd > span { font-size: 12.5px; color: var(--muted); }
.cd__row { margin: 0; display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 4px; line-height: 1.6; border: 1.5px solid currentColor; white-space: nowrap;
}
.badge::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.badge--hi { color: var(--pos); }
.badge--mid { color: var(--pick); }
.badge--lo { color: var(--muted); border-style: dashed; }
.badge--lo::before { background: transparent; border: 1.5px solid currentColor; }
.phase {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 4px; line-height: 1.6; background: var(--soft); color: var(--ink); white-space: nowrap;
}
.phase--pick { background: var(--pick); color: #fff; }
.phase--peak { background: var(--peak); color: #1a140e; }
[data-theme="night"] .phase--pick { color: #15110c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .phase--pick { color: #15110c; } }
[data-theme="sun"] .phase { border: 1.5px solid #000; background: #fff; color: #000; }
.conf { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

.rank { display: flex; align-items: flex-start; gap: 8px; }
.rank > i {
  inline-size: 22px; block-size: 22px; border-radius: 4px; background: var(--ink); color: var(--bg);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; font-style: normal; flex: none; margin-block-start: 1px;
}
.nm { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.2; flex: 1 1 auto; min-inline-size: 0; }
.nm a:hover { text-decoration: underline; color: inherit; }
.nm small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); margin-block-start: 1px; }
.tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.tagrow { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.why { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.45; }
.why li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.why__src { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-self: center; }

.strip { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.strip .bar { display: flex; block-size: 8px; border-radius: 4px; position: relative; gap: 2px; }
.strip .bar > i { display: block; block-size: 100%; flex: var(--flex, 1) 1 0%; min-inline-size: 0; border-radius: 2px; }
.strip .bar .w { background: repeating-linear-gradient(90deg, var(--line) 0 4px, transparent 4px 7px); }
.strip .bar .s { background: var(--soft); border: 1px solid var(--line); }
.strip .bar .p { background: var(--pick); }
.strip .bar .k { background: var(--peak); }
.strip .bar .r {
  position: absolute; inset-block: -2px; inset-inline-start: var(--s, 0); margin-inline-start: -2px;
  inline-size: 10px; background: var(--rain-fill); border-radius: 2px; border: 2px solid var(--surface);
}
.strip .bar .t { position: absolute; inset-block: -4px; inset-inline-start: var(--s, 0); inline-size: 2px; background: var(--ink); }
.strip .bar .t::after {
  content: ''; position: absolute; inset-block-start: -4px; inset-inline-start: -3px;
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ink);
}
[data-theme="sun"] .strip .bar .s { background: #fff; border: 1.5px solid #000; }
[data-theme="sun"] .strip .bar .p { background: repeating-linear-gradient(45deg, #000 0 2px, #fff 2px 4px); }
[data-theme="sun"] .strip .bar .k { background: #000; }
.strip .lg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.strip .lg b { display: block; color: var(--ink); font-weight: 600; }
.strip .lg > span:nth-child(2), .strip .lg > span:nth-child(3) { text-align: center; }
.strip .lg > span:nth-child(4) { text-align: end; }

.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 40px;
  padding: 0 18px; border-radius: 6px; background: var(--accent); color: #000; font-size: 13.5px;
  font-weight: 700; border: 1px solid rgb(0 0 0 / 0.15); cursor: pointer; flex: none;
}
.go:hover { color: #000; filter: brightness(1.05); }
.go .ic { stroke-width: 2.2; }
[data-theme="sun"] .go, [data-theme="sun"] .go:hover { background: #000; color: #fff; }
.act { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding-block-start: 2px; }
.act .meta { min-inline-size: 0; }
.lines { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 3px; }
.safety {
  margin: 0; display: flex; gap: 8px; align-items: flex-start; border: 1.5px solid var(--alert); color: var(--ink);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 600; line-height: 1.45; background: var(--surface);
}
.safety .ic { color: var(--alert); margin-block-start: 1px; }
.callout {
  border: 1px solid var(--line); border-inline-start: 3px solid var(--rain); border-radius: 6px;
  padding: 8px 10px; font-size: 12.5px; line-height: 1.5; background: var(--surface);
  display: flex; flex-direction: column; gap: 4px;
}
.callout--unk { border-inline-start-color: var(--pick); }
.callout p { margin: 0; }
.callout__hd { font-weight: 700; }
.callout__list { margin: 0; padding-inline-start: 18px; font-size: 12px; }
[data-theme="sun"] .callout { border-width: 2px; border-inline-start-width: 5px; }

.sat-only { display: flex; flex-direction: column; gap: 8px; }
.sat-only .h2 { color: var(--muted); font-size: 12.5px; }
.sat-only .card { border-style: dashed; background: transparent; }
.sat-only .nm { font-size: 15px; }

/* ---------------------------------------------------------------- tables */
.tbl-wrap { overflow-x: auto; margin-inline: -2px; padding-inline: 2px; }
.tbl { inline-size: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th, .tbl td { text-align: start; padding: 6px 4px; border-block-end: 1px solid var(--line); vertical-align: middle; }
.tbl thead th { color: var(--muted); font-weight: 600; font-size: 11px; padding-block: 4px; vertical-align: bottom; line-height: 1.3; }
@media (max-width: 599px) { .tbl th, .tbl td { padding-inline: 3px; } .tbl .amt { white-space: normal; } }
.tbl tbody th { font-weight: 600; white-space: nowrap; }
.tbl td:first-child, .tbl th:first-child { padding-inline-start: 0; }
.tbl td:last-child, .tbl th:last-child { padding-inline-end: 0; }
.tbl tfoot td { font-size: 11px; color: var(--muted); border: 0; padding-block-start: 6px; }
.tbl__sub { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.v--sat { color: var(--muted); font-weight: 600; border: 1px dashed var(--line); border-radius: 4px; padding: 0 5px; display: inline-block; white-space: nowrap; }
.v--sat .amt { color: inherit; font-weight: inherit; }
.dash { color: var(--muted); }
.tbl--kv th { width: 40%; }
.tbl--kv td { font-weight: 600; }

/* ---------------------------------------------------------------- season timeline */
.tl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; position: relative; }
.tl::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 5px; inline-size: 2px; background: var(--line); }
.tl li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding-block: 6px; padding-inline-start: 20px; }
.tl li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 10px; inline-size: 12px; block-size: 12px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--line);
}
.tl li.now::before { background: var(--ink); border-color: var(--ink); }
.tl li.rain::before { background: var(--rain-fill); border-color: var(--rain-fill); }
.tl li.pick::before { background: var(--pick); border-color: var(--pick); }
.tl li.peak::before { background: var(--peak); border-color: var(--peak); }
.tl b { grid-column: 2; font-size: 13px; font-weight: 700; display: block; }
.tl li > span { grid-column: 2; font-size: 11.5px; color: var(--muted); display: block; }
.tl em {
  grid-column: 1; grid-row: 1 / 3; font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  color: var(--muted); align-self: start; margin-block-start: 2px; min-inline-size: 64px;
}
.tl .now em, .tl .now b { color: var(--ink); }
.tl li.past b { color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------------- methodology prose */
.prose { font-size: 14px; line-height: 1.7; gap: 8px; }
.prose > * { max-inline-size: 72ch; }
.prose .map { max-inline-size: none; }
.prose h2 { margin: 14px 0 0; font-size: 16px; font-weight: 700; line-height: 1.3; scroll-margin-block-start: 16px; }
.prose h2:first-of-type { margin-block-start: 6px; }
.prose p { margin: 0; text-wrap: pretty; }
.prose .lead { font-size: 15px; }
.prose ol, .prose ul { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 4px; }
.prose .ranked { gap: 8px; }
.prose .ranked li::marker { font-weight: 700; }
.prose .ranked b { display: block; font-weight: 700; }
.prose .ranked span { display: block; font-size: 13px; color: var(--muted); line-height: 1.6; }
.prose .tbl { font-size: 13px; }
.dl { margin: 0; display: flex; flex-direction: column; }
.dl > div { display: grid; grid-template-columns: minmax(120px, 32%) 1fr; gap: 2px 12px; padding-block: 7px; border-block-start: 1px solid var(--line); }
.dl dt { font-weight: 700; font-size: 13px; }
.dl dd { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (max-width: 599px) { .dl > div { grid-template-columns: 1fr; } }
.toc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.toc a { display: block; padding: 5px 8px; border-radius: 4px; color: var(--muted); font-weight: 600; }
.toc a:hover { background: var(--bg); color: var(--ink); }
@media (max-width: 959px) {
  .toc ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .toc a { border: 1px solid var(--line); font-size: 11.5px; padding: 3px 9px; border-radius: 999px; min-block-size: 28px; display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------- maps */
.map {
  position: relative; border-radius: 8px; overflow: hidden; background: var(--bg);
  border: 1px solid var(--line); padding: 6px; min-block-size: 120px;
}
.map__draw { position: relative; inline-size: min(100%, var(--mw, 100%)); margin-inline: auto; }
.map svg { display: block; inline-size: 100%; block-size: auto; }
/* on a place page the Kingdom is only a locator: keep it modest beside the detail map */
.view--place .map__draw { inline-size: min(100%, calc(var(--mw, 100%) * 0.7)); }
.nm-land { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }
.nm-north { fill: var(--rain-fill); fill-opacity: 0.18; stroke: var(--rain); stroke-width: 1.5; stroke-linejoin: round; }
.nm-lat { stroke: var(--alert); stroke-width: 1.2; stroke-dasharray: 6 5; }
[data-theme="sun"] .nm-land { fill: #fff; stroke: #000; }
[data-theme="sun"] .nm-north { fill: #000; fill-opacity: 0.12; stroke: #000; stroke-width: 2.5; }
.map .lg {
  position: absolute; z-index: 1; inset-block-start: 6px; inset-inline-start: 8px; display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; color: var(--muted); background: var(--surface); border-radius: 4px; padding: 3px 6px; border: 1px solid var(--line);
}
.map .lg > span { display: flex; align-items: center; gap: 5px; }
.map .lg i { inline-size: 12px; block-size: 8px; border-radius: 2px; background: rgb(63 120 196 / 0.18); border: 1px solid var(--rain); flex: none; }
.map .lg i.lat { block-size: 0; border: 0; border-block-start: 1.5px dashed var(--alert); border-radius: 0; background: none; }
.map .lg i.pin, .map .pin i { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); border: 1.5px solid #000; }
.map .lg i.pin { inline-size: 8px; block-size: 8px; }
.map .pin {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, calc(-100% + 2px));
  display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none;
}
.map .pin i { inline-size: 14px; block-size: 14px; }
.map .pin b { font-size: 10.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; white-space: nowrap; }
[data-theme="sun"] .map .lg i { background: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 3px); }
[data-theme="sun"] .map .pin i, [data-theme="sun"] .map .lg i.pin { background: #fff; border: 2px solid #000; }
.map--failed { display: grid; place-items: center; }

.detail-map {
  block-size: 240px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--soft);
  direction: ltr;
}
@media (min-width: 960px) { .detail-map { block-size: 300px; } }
.detail-map.map--failed { display: grid; place-items: center; color: var(--muted); direction: inherit; }
[data-theme="sun"] .detail-map .leaflet-tile-pane { filter: grayscale(1) contrast(1.25); }
.detail-map .cell { stroke: var(--rain); fill: var(--rain-fill); }
.detail-map .cell--sat { stroke: var(--muted); fill: transparent; }
[data-theme="sun"] .detail-map .cell { stroke: #000; fill: transparent; stroke-dasharray: 6 4; stroke-width: 3; }
.detail-map .pin { stroke: #fff; fill: #1a140e; }
.detail-map .me { stroke: #fff; fill: #1f4e8c; }
.detail-map .leaflet-control-zoom a { inline-size: 40px; block-size: 40px; line-height: 40px; font-size: 20px; }
.detail-map .leaflet-control-attribution { font-size: 10px; }
.leaflet-tooltip { font-family: var(--f); font-size: 13px; direction: rtl; }
[dir="ltr"] .leaflet-tooltip { direction: ltr; }

/* ---------------------------------------------------------------- footer */
.foot { border-block-start: 1px solid var(--line); padding-block: 14px 24px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.foot p { margin: 0; }
.foot__sources { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.hs { display: inline-flex; align-items: center; gap: 5px; }
.hs__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--pos); flex: none; }
.hs--stale .hs__dot { background: var(--pick); }
.hs--never .hs__dot { background: transparent; border: 1.5px solid var(--alert); }
.hs--standby .hs__dot { background: transparent; border: 1.5px solid var(--muted); }
[data-theme="sun"] .foot { border-block-start-width: 2px; }

/* ---------------------------------------------------------------- loading */
.card--skeleton { gap: 10px; }
.sk { display: block; block-size: 12px; border-radius: 4px; background: var(--soft); }
.sk--title { block-size: 20px; inline-size: 55%; }
.sk--short { inline-size: 40%; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-theme="sun"]) .sk {
    background: linear-gradient(90deg, var(--soft) 0 40%, var(--bg) 50%, var(--soft) 60% 100%);
    background-size: 250% 100%; animation: sk 1.4s linear infinite;
  }
  [dir="rtl"] .sk { animation-direction: reverse; }
}
@keyframes sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .tg, .tabs, .go, .detail-map { display: none; } }