/* «الجواب» — one stylesheet. Tokens: day (default), night (prefers-color-scheme: dark), sun (high glare).
   Logical properties only, so the same rules serve RTL and LTR. */

:root {
  color-scheme: light dark;
  /* day — bone paper, soil ink */
  --bg: #ece4d6;
  --surface: #f8f3ea;
  --fg: #1a140e;
  --muted: #54473a;
  --line: #b9aa94;
  --accent: #e0a930;       /* Go fill, black text on it */
  --on-accent: #1a140e;
  --rain: #1f4e8c;         /* rain as ink */
  --rain-fill: #3f78c4;
  --green: #2c6636;
  --hunt: #8a5a00;         /* hunt window ink */
  --hunt-fill: #e0a930;
  --peak-fill: #c98f1c;
  --closed: #a3302a;
  --focus: #1f4e8c;
  --sat-line: #54473a;
  --shadow: 0 1px 0 rgb(26 20 14 / 0.06), 0 6px 18px -8px rgb(76 52 20 / 0.28);
  --radius: 16px;
  --rule: 1px;
  --scale: 1;

  --font-text: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-display: var(--font-text);   /* one family across the whole site: IBM Plex Sans Arabic */
  --font-num: var(--font-text);

  --tabs-h: 60px;
  --col: 560px;           /* main column; 1120px on computers */
  --gobar-h: 84px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="sun"]) {
    --bg: #140f0a;
    --surface: #231b13;
    --fg: #ede5d8;
    --muted: #bcae9a;
    --line: #4a3d2e;
    --accent: #e0a930;
    --on-accent: #140f0a;
    --rain: #9cc2f2;
    --rain-fill: #5a8fd0;
    --green: #8fd19e;
    --hunt: #f0c064;
    --hunt-fill: #e0a930;
    --peak-fill: #a8781a;
    --closed: #f29a8e;
    --focus: #9cc2f2;
    --sat-line: #bcae9a;
    --shadow: 0 1px 0 rgb(0 0 0 / 0.4);
  }
}

/* sun — pure black on white. No grays, no translucency, no shadows, thick rules, bigger type. */
:root[data-theme="sun"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --fg: #000000;
  --muted: #000000;
  --line: #000000;
  --accent: #000000;
  --on-accent: #ffffff;
  --rain: #000000;
  --rain-fill: #000000;
  --green: #000000;
  --hunt: #000000;
  --hunt-fill: #000000;
  --peak-fill: #000000;
  --closed: #000000;
  --focus: #000000;
  --sat-line: #000000;
  --shadow: none;
  --radius: 6px;
  --rule: 2px;
  --scale: 1.15;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* keyboard focus / #anchors never hide under the sticky tabs */
  scroll-padding-block-start: calc(var(--tabs-h) + env(safe-area-inset-top, 0px) + 8px);
}
body {
  margin: 0;
  min-block-size: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: calc(18px * var(--scale));
  line-height: 1.55;
  padding-block-end: calc(env(safe-area-inset-bottom) + 16px);
}
body.has-gobar { padding-block-end: calc(var(--gobar-h) + env(safe-area-inset-bottom) + 16px); }

.sprite { display: none; }
.icon {
  inline-size: 24px; block-size: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
[dir="rtl"] .icon--dir { transform: scaleX(-1); }
.icon--hero { inline-size: 48px; block-size: 48px; color: var(--rain); }

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  unicode-bidi: isolate;
  font-weight: 500;
}
bdi { unicode-bidi: isolate; }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.main:focus { outline: none; }

.skip {
  position: absolute; inset-inline-start: 8px; inset-block-start: -80px;
  background: var(--fg); color: var(--bg); padding: 12px 16px; border-radius: 8px; z-index: 50;
  text-decoration: none; font-weight: 600;
}
.skip:focus { inset-block-start: 8px; }

/* ---------- header ---------- */
.top { padding: 12px 16px 4px; max-inline-size: 560px; margin-inline: auto; }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: calc(24px * var(--scale)); line-height: 1.2;
}
.dateline { margin: 2px 0 0; color: var(--muted); font-size: calc(15px * var(--scale)); font-weight: 600; }
.sun {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 48px; min-inline-size: 48px; padding-inline: 14px;
  border: var(--rule) solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--fg);
  font: 600 calc(15px * var(--scale)) / 1 var(--font-text); cursor: pointer;
}
.sun[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- banners ---------- */
.banners { max-inline-size: 560px; margin-inline: auto; padding-inline: 16px; }
.banner {
  display: flex; gap: 10px; align-items: center; margin: 8px 0 0; padding: 10px 14px;
  border-radius: 12px; font-size: calc(15px * var(--scale)); font-weight: 600;
  border: var(--rule) solid var(--line); background: var(--surface);
}
.banner--fixture { border-style: dashed; border-width: 2px; border-color: var(--hunt); color: var(--hunt); }
.banner--offline { border-color: var(--rain); color: var(--rain); }

/* ---------- layout ---------- */
.main { display: block; max-inline-size: 560px; margin-inline: auto; padding: 8px 16px 0; }
.view { display: flex; flex-direction: column; gap: 16px; }
.headline {
  margin: 12px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: calc(26px * var(--scale)); line-height: 1.3; text-wrap: balance;
}
.subline { margin: -8px 0 0; color: var(--muted); font-size: calc(15px * var(--scale)); font-weight: 600; }
.section-title {
  margin: 8px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: calc(20px * var(--scale)); line-height: 1.35;
}
.empty { color: var(--muted); }

/* ---------- cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.card {
  background: var(--surface); border: var(--rule) solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.card--top { border-width: calc(var(--rule) + 1px); border-color: var(--fg); }
.cards--muted .card { box-shadow: none; }
.card__head, .place__head { display: flex; gap: 12px; align-items: flex-start; }
.card__names { min-inline-size: 0; }
.rank {
  flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font: 800 calc(20px * var(--scale)) / 1 var(--font-display);
}
.card__name, .place__name {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: calc(22px * var(--scale)); line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere;
}
.card--top .card__name, .place__name { font-weight: 800; font-size: calc(30px * var(--scale)); }
.card__name a { text-decoration: none; }
.card__name a:hover { text-decoration: underline; }
.card__region { margin: 2px 0 0; color: var(--muted); font-size: calc(15px * var(--scale)); font-weight: 600; }
.card__status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card__count { margin: 0; font-weight: 600; }

.phase, .conf {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 32px; padding: 4px 12px;
  border-radius: 999px; border: var(--rule) solid var(--line);
  font-size: calc(15px * var(--scale)); font-weight: 600; line-height: 1.2;
}
.phase__ring { inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid currentColor; }
.phase--signs .phase__ring { background: linear-gradient(to right, currentColor 50%, transparent 50%); }
.phase--hunt, .phase--peak { background: var(--hunt-fill); border-color: var(--hunt-fill); color: var(--on-accent); }
:root[data-theme="sun"] .phase--hunt, :root[data-theme="sun"] .phase--peak { color: #fff; }
.phase--hunt .phase__ring, .phase--peak .phase__ring { background: currentColor; }
.phase--over .phase__ring, .phase--late .phase__ring { border-style: dashed; }

.conf__bars { display: inline-flex; gap: 3px; align-items: flex-end; block-size: 16px; }
.conf__bars span { inline-size: 5px; background: transparent; border: 1.5px solid currentColor; border-radius: 1px; }
.conf__bars span:nth-child(1) { block-size: 8px; }
.conf__bars span:nth-child(2) { block-size: 12px; }
.conf__bars span:nth-child(3) { block-size: 16px; }
.conf__bars span.on { background: currentColor; }
.conf--high { color: var(--green); }
.conf--low { color: var(--muted); border-style: dashed; }
.conf__hint { color: var(--muted); font-weight: 400; }
.conf-box .conf { flex-wrap: wrap; border-radius: 12px; padding: 10px 14px; }

.stats { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.stat { display: flex; flex-direction: column; min-inline-size: 72px; }
.stat__value { font-size: calc(30px * var(--scale)); line-height: 1.1; font-weight: 600; }
.stat__value .num { font-size: calc(34px * var(--scale)); }
.card:not(.card--top) .stat__value { font-size: calc(20px * var(--scale)); }
.card:not(.card--top) .stat__value .num { font-size: calc(22px * var(--scale)); }
.stat__label { color: var(--muted); font-size: calc(15px * var(--scale)); font-weight: 600; }

.reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reason { display: flex; gap: 10px; align-items: flex-start; text-wrap: pretty; }
.reason .icon { margin-block-start: 3px; color: var(--rain); }
.reason--hunt_window .icon, .reason--signs_date .icon { color: var(--hunt); }
.reason--satellite_agrees .icon { color: var(--muted); }

.card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 56px; padding-inline: 22px; border-radius: 14px; text-decoration: none;
  font: 700 calc(20px * var(--scale)) / 1 var(--font-display); cursor: pointer;
  border: var(--rule) solid transparent;
}
.btn--go { background: var(--accent); color: var(--on-accent); flex: 1 1 auto; border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); border-width: 2px; }
.btn--wide { flex: 1 1 auto; min-block-size: 64px; }
.card:not(.card--top) .btn { min-block-size: 48px; font-size: calc(18px * var(--scale)); }
.link-quiet {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 8px;
  color: var(--fg); font-weight: 600; font-size: calc(15px * var(--scale));
}

/* ---------- strip ---------- */
.strip { margin: 0; }
.strip__bar {
  position: relative; block-size: 28px; border-radius: 6px;
  background: linear-gradient(var(--line), var(--line)) center / 100% 2px no-repeat;
}
.strip__seg {
  position: absolute; inset-block: 9px; inset-inline-start: var(--s); inline-size: var(--w);
  border-radius: 3px;
}
.seg--wait { background: transparent; border-block-end: 2px dashed var(--muted); inset-block: 12px 13px; }
.seg--signs { background: var(--line); inset-block: 10px; }
.seg--hunt { background: var(--hunt-fill); inset-block: 6px; }
.seg--peak { background: var(--peak-fill); inset-block: 8px; opacity: 0.75; }
.seg--window { background: var(--rain-fill); inset-block: 8px; opacity: 0.35; }
.seg--after { background: var(--hunt-fill); inset-block: 10px; opacity: 0.35; }
:root[data-theme="sun"] .strip__seg { opacity: 1; }
:root[data-theme="sun"] .seg--peak, :root[data-theme="sun"] .seg--window,
:root[data-theme="sun"] .seg--after { background: repeating-linear-gradient(45deg, #000 0 3px, #fff 3px 6px); }
.strip__drop {
  position: absolute; inset-block-start: 7px; inset-inline-start: var(--s);
  inline-size: 12px; block-size: 14px; margin-inline-start: -6px;
  background: var(--rain-fill); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border: 2px solid var(--surface);
}
.strip__today {
  position: absolute; inset-block: -4px; inset-inline-start: var(--s); inline-size: 3px;
  margin-inline-start: -1px; background: var(--fg); border-radius: 2px;
}
.strip__today::after {
  content: ''; position: absolute; inset-block-start: -6px; inset-inline-start: -4px;
  inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--fg);
}
.strip__legend {
  display: flex; justify-content: space-between; gap: 8px; margin-block-start: 6px;
  color: var(--muted); font-size: calc(15px * var(--scale)); font-weight: 600; line-height: 1.3;
}
.lg { flex: 1 1 0; }
.lg--hunt { text-align: center; color: var(--hunt); }
.lg--peak { text-align: end; }

/* ---------- hero states ---------- */
.hero {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 20px 16px; border: var(--rule) solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.hero .headline { margin: 0; }
.hero__big { margin: 0; font-size: calc(22px * var(--scale)); font-weight: 600; line-height: 1.4; }
.hero__big .num { font-size: calc(28px * var(--scale)); }
.hero__body { margin: 0; }
.hero--dry { border-width: calc(var(--rule) + 1px); border-color: var(--closed); }
.hero--dry .icon--hero { color: var(--closed); }

/* ---------- satellite section ---------- */
.sat {
  border: 2px dashed var(--sat-line); border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.sat__title { display: flex; gap: 10px; align-items: center; margin: 0; font: 700 calc(18px * var(--scale)) / 1.35 var(--font-display); }
.sat__note { margin: 0; color: var(--muted); font-size: calc(15px * var(--scale)); }
.sat__list, .valid__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sat__item, .valid__list li { display: flex; flex-direction: column; padding-block: 6px; border-block-start: var(--rule) solid var(--line); }
.sat__name, .valid__name { font-weight: 600; }
.sat__meta { color: var(--muted); font-size: calc(15px * var(--scale)); }

/* ---------- place detail ---------- */
.back {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; align-self: flex-start;
  font-weight: 600; text-decoration: none; padding-inline-end: 8px;
}
.map {
  block-size: 280px; border-radius: var(--radius); overflow: hidden; border: var(--rule) solid var(--line);
  background: var(--surface); direction: ltr; z-index: 0;
}
.map--failed { display: grid; place-items: center; color: var(--muted); direction: inherit; }
.map__note { margin: -8px 0 0; color: var(--muted); font-size: calc(15px * var(--scale)); }
:root[data-theme="sun"] .map .leaflet-tile-pane { filter: grayscale(1) contrast(1.25); }
.map .cell { stroke: var(--rain); fill: var(--rain-fill); }
.map .cell--sat { stroke: var(--sat-line); fill: transparent; }
:root[data-theme="sun"] .map .cell { stroke: #000; fill: transparent; stroke-dasharray: 6 4; stroke-width: 3; }
.map .pin { stroke: #fff; fill: #1a140e; }
.map .me { stroke: #fff; fill: #1f4e8c; }
.map .leaflet-control-zoom a { inline-size: 44px; block-size: 44px; line-height: 44px; font-size: 22px; }
.map .leaflet-control-attribution { font-size: 12px; }
.leaflet-tooltip { font-family: var(--font-text); font-size: 15px; direction: rtl; }
[dir="ltr"] .leaflet-tooltip { direction: ltr; }

.events { inline-size: 100%; border-collapse: collapse; font-size: calc(16px * var(--scale)); }
.events caption { text-align: start; font: 700 calc(20px * var(--scale)) / 1.35 var(--font-display); padding-block-end: 8px; }
.events th { text-align: start; color: var(--muted); font-size: calc(15px * var(--scale)); font-weight: 600; padding: 6px 4px; border-block-end: var(--rule) solid var(--line); }
.events td { padding: 8px 4px; border-block-end: var(--rule) solid var(--line); vertical-align: top; }
.events__station { display: block; color: var(--muted); font-size: calc(15px * var(--scale)); }

.safety {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px;
  border-radius: 12px; border: 2px solid var(--fg); font-weight: 600;
}
.coords { margin: 0; color: var(--muted); font-size: calc(15px * var(--scale)); }

.gobar {
  position: fixed; inset-inline: 0; inset-block-end: 0;
  z-index: 20; display: flex; align-items: center; gap: 8px;
  padding: 10px max(16px, calc((100vw - 560px) / 2 + 16px)) calc(10px + env(safe-area-inset-bottom));
  background: var(--bg); border-block-start: var(--rule) solid var(--line);
}

/* ---------- season ---------- */
.keydates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kd {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'label rel' 'date rel';
  padding-block: 10px; border-block-end: var(--rule) solid var(--line); gap: 0 12px; align-items: center;
}
.kd__label { grid-area: label; font-weight: 600; }
.kd__date { grid-area: date; color: var(--muted); font-size: calc(15px * var(--scale)); }
.kd__rel { grid-area: rel; font-weight: 600; font-size: calc(15px * var(--scale)); }
.kd--past .kd__rel, .kd--past .kd__label { color: var(--muted); }
.raindays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rd {
  display: grid; grid-template-columns: 7.5em 1fr; grid-template-areas: 'date track' 'meta meta' 'reg reg';
  gap: 2px 10px; padding-block: 8px; border-block-end: var(--rule) solid var(--line); align-items: center;
}
.rd__date { grid-area: date; font-weight: 600; }
.rd__track { grid-area: track; position: relative; block-size: 12px; }
.rd__bar { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); background: var(--rain-fill); border-radius: 3px; min-inline-size: 4px; }
.rd__meta { grid-area: meta; color: var(--muted); font-size: calc(15px * var(--scale)); }
.rd__regions { grid-area: reg; font-size: calc(15px * var(--scale)); }
.valid { display: flex; flex-direction: column; gap: 8px; }

/* ---------- footer ---------- */
.foot {
  max-inline-size: 560px; margin: 28px auto 0; padding: 16px; border-block-start: var(--rule) solid var(--line);
  color: var(--muted); font-size: calc(15px * var(--scale)); display: flex; flex-direction: column; gap: 6px;
}
.foot p { margin: 0; }
.foot__sources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.src { display: inline-flex; align-items: center; gap: 6px; }
.src__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--green); flex: none; }
.src--stale .src__dot { background: transparent; border: 2px solid var(--closed); }
.src--never .src__dot { background: transparent; border: 2px dashed var(--muted); }
.src--standby .src__dot { background: var(--muted); opacity: 0.55; }
.src--standby .src__dot { background: var(--muted); opacity: 0.55; }

/* ---------- top tabs: sticky under the header row ---------- */
.tabs {
  position: sticky; inset-block-start: env(safe-area-inset-top, 0px); z-index: 30;
  display: flex; gap: 4px; margin-block-start: 8px;
  padding: 4px max(12px, calc((100% - var(--col)) / 2 + 12px));
  background: var(--surface); border-block: var(--rule) solid var(--line);
}
.tab {
  flex: 1 1 0; min-inline-size: 0; min-block-size: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 6px; text-decoration: none; text-align: center;
  font: 700 calc(15px * var(--scale)) / 1.15 var(--font-display); color: var(--muted); border-radius: 12px;
}
.tab .icon { inline-size: 22px; block-size: 22px; }
.tab__label { overflow-wrap: anywhere; }
.tab:hover { color: var(--fg); }
.tab[aria-current] { color: var(--fg); background: var(--bg); box-shadow: inset 0 -3px 0 var(--fg); }
@media (min-width: 600px) {
  .tabs { justify-content: flex-start; }
  .tab { flex: 0 1 200px; flex-direction: row; gap: 8px; min-block-size: 48px; font-size: calc(17px * var(--scale)); }
  .tab .icon { inline-size: 24px; block-size: 24px; }
}

/* ---------- coverage: statement + tile-less map ---------- */
.coverage {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border: var(--rule) solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.coverage__line { margin: 0; font-weight: 600; text-wrap: pretty; }
.covmap { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.covmap__map {
  block-size: 180px; border-radius: 12px; background: var(--bg); direction: ltr; z-index: 0;
}
.covmap__map.leaflet-container { background: var(--bg); cursor: default; }
.covmap--failed { display: none; }
.covmap .cov--saudi { fill: var(--surface); stroke: var(--muted); fill-opacity: 1; }
.covmap .cov--north { fill: var(--accent); fill-opacity: 0.45; stroke: var(--hunt); stroke-width: 2; }
:root[data-theme="sun"] .covmap__map { border: var(--rule) solid #000; }
:root[data-theme="sun"] .covmap .cov--saudi { fill: #fff; stroke: #000; }
:root[data-theme="sun"] .covmap .cov--north { fill: #000; fill-opacity: 0.3; stroke: #000; stroke-width: 3; }
.covmap__caption {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: calc(15px * var(--scale)); font-weight: 600;
}
.covmap__swatch {
  inline-size: 16px; block-size: 12px; flex: none; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 45%, var(--surface)); border: 2px solid var(--hunt);
}
:root[data-theme="sun"] .covmap__swatch { background: #b3b3b3; border-color: #000; }
@media (min-width: 768px) {
  .coverage { display: grid; grid-template-columns: 1fr minmax(260px, 360px); align-items: center; gap: 16px; }
  .covmap__map { block-size: 240px; }
}

/* ---------- methodology + PIN ---------- */
.pin {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 16px; max-inline-size: 70ch;
  border: var(--rule) solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.pin__title { margin: 0; }
.pin__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pin__label { flex: 1 1 100%; font-weight: 600; }
.pin__input {
  inline-size: 7.5ch; min-block-size: 56px; padding: 0 12px;
  font: 700 calc(28px * var(--scale)) / 1 var(--font-num); letter-spacing: 0.3em; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--fg); background: var(--bg);
  border: 2px solid var(--line); border-radius: 12px;
}
.pin__input[aria-invalid="true"] { border-color: var(--closed); }
.pin__submit { flex: 0 0 auto; min-inline-size: 7em; }
.pin__submit:disabled { opacity: 0.6; cursor: progress; }
.pin__msg { flex: 1 1 100%; margin: 0; min-block-size: 1.55em; color: var(--closed); font-weight: 600; }
.method-state { display: flex; flex-direction: column; gap: 14px; padding-block: 12px; }
.method { max-inline-size: 70ch; display: flex; flex-direction: column; gap: 14px; }
.method .headline { margin: 0; }
.method .headline:focus { outline: none; }
.method__intro { margin: 0; font-size: calc(19px * var(--scale)); text-wrap: pretty; }
.method__sec { display: flex; flex-direction: column; gap: 8px; }
.method__sec p { margin: 0; text-wrap: pretty; }
.method__items { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.method__items dt { font-weight: 700; }
.method__items dd { margin: 2px 0 0; }
.method__steps { margin: 0; padding-inline-start: 1.5em; display: flex; flex-direction: column; gap: 6px; }
.method__steps li::marker { font-weight: 700; }
.method__updated { margin: 8px 0 0; color: var(--muted); font-size: calc(15px * var(--scale)); }

/* ---------- loading skeleton ---------- */
.card--skeleton { gap: 14px; }
.sk { display: block; block-size: 16px; border-radius: 6px; background: var(--line); opacity: 0.55; }
.sk--title { block-size: 30px; inline-size: 60%; }
.sk--nums { block-size: 40px; inline-size: 80%; }
.sk--short { inline-size: 45%; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-theme="sun"]) .sk {
    background: linear-gradient(90deg, var(--line) 0%, var(--surface) 50%, var(--line) 100%) 0 0 / 200% 100%;
    animation: shimmer 1.4s linear infinite;
  }
  [dir="rtl"] .sk { animation-direction: reverse; }
  .view { animation: enter 200ms cubic-bezier(0.16, 1, 0.3, 1); }
  :root[data-theme="sun"] .view { animation: none; }
}
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes enter { from { opacity: 0; } }

@media (min-width: 768px) {
  .card { padding: 20px; }
}
.sat__region { font-weight: 400; color: var(--muted); }
.btn__label { min-inline-size: 0; overflow-wrap: anywhere; line-height: 1.25; }
.view--home .gobar .btn--go { box-shadow: var(--shadow); }

/* ---------- computer screens: a website, not a phone column ---------- */
@media (min-width: 1024px) {
  :root { --col: 1120px; }
  .top, .banners, .main { max-inline-size: 1120px; }
  #foot > * { max-inline-size: 1120px; margin-inline: auto; }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; gap: 16px; }
  /* each card already carries its own «اذهب»; the floating thumb bar is a phone affordance */
  .view--home .gobar { display: none; }
  .gobar { padding-inline: max(16px, calc((100vw - 1120px) / 2 + 16px)); }
  .headline { font-size: calc(30px * var(--scale)); }
}

/* numbers line up in columns without a separate monospace font */
[class*='num'], .foot, table { font-variant-numeric: tabular-nums; }

/* ---------- header lock link ---------- */
.top__tools { display: flex; align-items: center; gap: 8px; }
.lock {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: 48px; min-inline-size: 48px; padding-inline: 12px; justify-content: center;
  border: var(--rule) solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted); text-decoration: none;
  font: 600 calc(15px * var(--scale)) / 1 var(--font-text);
}
.lock:hover { color: var(--fg); }
.lock .icon { inline-size: 20px; block-size: 20px; }
@media (max-width: 359px) { .lock__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ---------- PIN gate pages (/pin.html, /pin-slow.html) ---------- */
.gate__main { padding-block-start: 24px; }
.gate[data-wait] .pin { visibility: hidden; }
.gate .pin { margin-inline: auto; }
.gate .pin__input { inline-size: 100%; max-inline-size: 12ch; min-block-size: 64px; font-size: calc(34px * var(--scale)); }
.gate .pin__submit { min-block-size: 64px; flex: 1 1 8em; }
.gate .pin p { margin: 0; }

/* ---------- ground vs satellite disclosure ----------
   Shown wherever a satellite estimate stands next to a ground reading that did not veto it. It is
   a correction to the picture, not a warning, so it is quiet ink on a dotted rule — never an alarm. */
.gd {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border: 2px dashed var(--sat-line); border-radius: 12px;
  color: var(--muted); font-size: calc(15px * var(--scale)); line-height: 1.45;
}
.gd__head {
  display: flex; gap: 8px; align-items: center; margin: 0;
  color: var(--fg); font-weight: 700;
}
.gd__head .icon { color: var(--sat-line); }
.gd__line, .gd__more, .gd__why { margin: 0; text-wrap: pretty; }
.gd__line { color: var(--fg); }
.gd__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gd__why { padding-block-start: 6px; border-block-start: var(--rule) solid var(--line); }
.sat__item .gd { margin-block-start: 6px; }
.conf-box__note { margin: 6px 0 0; color: var(--muted); font-size: calc(15px * var(--scale)); }
.reason--ground_disagrees .icon, .reason--ground_unknown .icon { color: var(--sat-line); }
.events--sat td:last-child { color: var(--muted); }
:root[data-theme="sun"] .gd { border-style: solid; }