/* Forecast Arabia — the long-form pages, on top of the network shell.
 *
 * `/heat`, `/dust`, `/shamal`, `/models`, `/sources` and `/mesoscale` are
 * arguments rather than instruments: running prose with tables, code blocks and
 * a lot of numbers in it. The network stylesheet is built for the explorer's
 * chrome — sign panels, exit chips, a timeline, a legend row — and has no
 * vocabulary for a paragraph, so this sheet supplies one and nothing else.
 *
 * It is a *supplement*, loaded after `forecastarabia.css` and deliberately
 * holding no colour of its own. Every value below is one of the network's own
 * tokens under a prose name, so the two sheets cannot drift apart: change the
 * palette in one place and these pages follow. The rules are scoped to `main`
 * wherever the network already styles the same selector, so the utility bar,
 * the country strip and the footer are the network's on every page of the site.
 *
 * This began as `web/assets/fa.css`, a whole stylesheet with its own reset,
 * header, footer and palette. Everything it duplicated is gone; what is left is
 * what the network sheet genuinely does not have.
 */

:root {
  /* Prose names for network colours. Aliases, never new values. */
  --ink-2: var(--ink2);
  --ink-3: #2c3c4e;
  --sand: #efe6d6;                /* the tint behind table heads and notes */
  --sand-2: #e2d5bd;
  --text: var(--ink);
  --teal: var(--sign);
  --teal-2: var(--sign-dk);
  --gold: var(--amber);
  --gold-2: var(--amber-2);
  --hot: #c0392b;
  --radius: 10px;
  --mono: var(--mono-font);
  --sans: var(--font);
}

/* ---- the measure ------------------------------------------------------- */

main { max-width: var(--maxw); margin: 0 auto; padding: 1.2rem 1rem 3rem;
       font-size: 16px; line-height: 1.6; }
main.wide { max-width: 1560px; }

main h1 { font-size: 1.9rem; line-height: 1.2; letter-spacing: -.01em; margin: .2rem 0 .5rem; }
main h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; letter-spacing: -.005em; }
main h3 { font-size: 1.02rem; margin: 1.3rem 0 .4rem; color: var(--ink-2); }
main p { margin: .7rem 0; }
main ul, main ol { margin: .7rem 0 .7rem 1.3rem; }
main li { margin: .3rem 0; }

/* The network sets `a { color: inherit }`, which is right for chrome made of
   panels and wrong for a paragraph — an unmarked link in running text is not a
   link. Scoped to main so the utility bar keeps the network's treatment. */
main a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
main a:hover { color: var(--gold); }

.lede { font-size: 1.08rem; color: var(--ink-2); }
.dek { color: var(--mut); font-size: .95rem; margin-bottom: 1rem; }

/* ---- components -------------------------------------------------------- */

/* `.box` and `.chip`, not `.card` and `.tag`: the network sheet already owns
   both of those names for the front page's link cards and the sign's tagline,
   and a prose page that loads both sheets would get whichever came last. Two
   meanings for one class name is a bug waiting for the day the load order
   changes. */
.box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin: 1rem 0;
}
.box.sand { background: var(--sand); border-color: var(--sand-2); }

.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.note {
  border-left: 3px solid var(--gold); background: var(--sand);
  padding: .7rem .9rem; border-radius: 0 8px 8px 0; margin: 1rem 0;
  font-size: .93rem;
}

main table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
main th, main td { text-align: left; padding: .42rem .6rem;
                   border-bottom: 1px solid var(--line); vertical-align: top; }
main th { background: var(--sand); font-weight: 600; white-space: nowrap; }
main td.num, main th.num { text-align: right; font-variant-numeric: tabular-nums;
                           font-family: var(--mono); white-space: nowrap; }

main code { font-family: var(--mono); font-size: .87em; background: var(--sand);
            padding: .1em .35em; border-radius: 4px; }
main pre { background: var(--figure); color: #d8e2ea; padding: .8rem 1rem;
           border-radius: 8px; overflow-x: auto; font-size: .82rem; line-height: 1.5; }
main pre code { background: none; color: inherit; padding: 0; }

.chip {
  display: inline-block; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .15rem .45rem; border-radius: 4px;
  background: var(--teal); color: #fff; font-weight: 600; vertical-align: middle;
}
.chip.warn { background: var(--gold); color: #fff; }
.chip.no { background: #94a3b1; }

@media (max-width: 640px) {
  main { font-size: 15px; }
  main h1 { font-size: 1.5rem; }
}