/* ============================================================
   شمس حلب — الموقع
   The website's expression of system.css.

   Same design language as the phone app, different shell. The app is a
   fixed 100dvh frame with a tab bar; the website scrolls, has a real
   navigation bar, and gets to use a desktop's width — which the old
   layout never did: it stranded a 740px column inside a 1440px viewport
   and filled the rest with orange.


   Three rules, the same three the app holds itself to:
     1. Nothing sits on an arbitrary number.
     2. Depth is a hairline first, a shadow second.
     3. The accent buys one primary action and one number. Not a mood.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-app);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  color: var(--ink);
  background: var(--app-ground);
  -webkit-font-smoothing: auto;   /* antialiased thins Arabic strokes */
}

/* ── Measure ──────────────────────────────────────────────────
   Three widths, each with a job. Prose wants ~65 characters; a
   dashboard of numbers wants room; a form wants neither. */
.container      { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--s-6); }
.container-narrow { max-width: 720px; }

/* ── Links ────────────────────────────────────────────────────
   Nothing here styled a bare <a>, so every inline link on the site was
   rendering in the browser's default #0000EE — a blue nobody chose, on a
   palette of warm sand and burnt orange. Components (.btn, .tool-card,
   .navbar-link, .page-back) all set their own colour, so this is scoped to
   links that carry no class of their own: the ones inside prose.
   The underline stays: colour alone is not a link.

   It sits up here, before any component, because `.navbar-links a` and
   `a:not([class])` have identical specificity — put this lower in the file
   and it wins on source order, which is exactly how the navigation ended up
   underlined in orange. Base first, components after. */
a:not([class]),
.link-btn {
  /* Vertical padding on an inline element grows the pointer target without
     moving the line it sits in — which is how a link inside a sentence
     reaches 44px without the paragraph opening up.

     11px, not 9: the site renders in Readex now that its @font-face finally
     reaches the website at all, and Readex sits a couple of pixels shorter
     in the line box than the Cairo it had been silently falling back to. */
  padding-block: 11px;
}

a:not([class]) {
  color: var(--brand-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--brand-ink) 45%, transparent);
  transition: text-decoration-color var(--move) var(--out);
}
a:not([class]):hover { text-decoration-color: currentColor; }

.container-xs   { max-width: 560px; }

@media (max-width: 640px) {
  .container { padding-inline: var(--gutter); }
}

.section    { padding-block: calc(var(--section) * 1.6); }
.section-sm { padding-block: var(--section); }

@media (max-width: 640px) {
  .section    { padding-block: var(--section); }
  .section-sm { padding-block: var(--s-8); }
}

/* ── Grid ─────────────────────────────────────────────────────
   Collapses at a width the CONTENT chooses, not at a device name.
   Cards of numbers stay two-up on a phone; cards of prose go single. */
.grid   { display: grid; gap: var(--s-4); }
/* A grid item's default min-width is min-content, so one wide child — a
   canvas Chart.js has stamped a pixel width onto, say — pushes the card out
   past its own track and takes the page sideways with it. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Everything goes single-file on a phone. Two columns of 134px could not
     hold a number field between its two buttons — the value had 32px — and
     a row of half-width cards is density bought at the cost of the reading
     this site is supposed to be easy to do. */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.text-center { text-align: center; }
.text-right  { text-align: start; }
.mt-2 { margin-top: var(--s-2); }  .mb-2 { margin-bottom: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }  .mb-3 { margin-bottom: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }  .mb-4 { margin-bottom: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }  .mb-5 { margin-bottom: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }  .mb-6 { margin-bottom: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }  .mb-8 { margin-bottom: var(--s-8); }
.p-4 { padding: var(--s-4); } .p-6 { padding: var(--s-6); } .p-8 { padding: var(--s-8); }
/* Each utility only speaks on the side where it hides something.
   The earlier version paired `.hide-desktop { display: none !important }`
   with a mobile `display: inline-flex !important` to switch it back on —
   and that show rule beat [hidden], so the mobile menu panel, which carries
   both `hide-desktop` and `hidden`, was open on every phone page load.
   Scoping each rule to its own breakpoint means nothing has to be forced
   back on: an element keeps its own display where it is not hidden, and
   [hidden] still means hidden. */
@media (min-width: 861px) { .hide-desktop { display: none !important; } }
@media (max-width: 860px) { .hide-mobile  { display: none !important; } }
/* There is no .hide-narrow. The text-size control is the single most useful
   button on this site for the person it is built for, and an unlabelled "Aa"
   is exactly the kind of guessing this redesign removes. Its label stays at
   every width — the brand subtitle drops instead, next to .navbar-subtitle
   itself so it wins on source order rather than losing to it. */

/* ── Typography ───────────────────────────────────────────────
   The page's own heading scale. One h1 per page, and it is allowed
   to be large — that is what makes the rest of the page calm. */
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-strong); line-height: var(--lh-tight); }
h1 { font-size: var(--t-large); letter-spacing: -0.8px; }
h2 { font-size: var(--t-title); letter-spacing: -0.4px; }
h3 { font-size: var(--t-headline); }
h4 { font-size: var(--t-body); }
p  { margin: 0; }

@media (min-width: 900px) {
  h1 { font-size: calc(var(--t-display) * 0.82); }
}

.lede {
  font-size: var(--t-headline);
  font-weight: var(--w-body);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  max-width: 46ch;
}

.eyebrow {
  display: block;
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}

/* The section heading pattern, shared by every page. */
.section-head { margin-bottom: var(--s-6); }
.section-head h2 + p { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--t-footnote); }

/* ── Navigation ───────────────────────────────────────────────
   Sticky, quiet, and translucent over what scrolls beneath it. The
   hairline only appears once something IS beneath it. */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--app-ground) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid transparent;
  transition: border-color var(--move) var(--out);
}
.navbar.is-stuck { border-bottom-color: rgba(28, 25, 23, 0.10); }
:root[data-theme="night"] .navbar.is-stuck { border-bottom-color: rgba(255,255,255,0.10); }

.navbar-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  min-height: 72px;
  padding-block: var(--s-2);
}

/* The brand yields before the controls do: on a narrow phone the name can
   truncate, but a labelled button must never be pushed off the edge. */
.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--hit-min);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}

.navbar-logo {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-tile);
  background: var(--app-accent);
  color: var(--brand-contrast);
}

/* The brand text is the one thing on the bar allowed to truncate. Without
   min-width:0 on this wrapper it could not shrink at all, and at 320px with
   the text size turned up it pushed the labelled button off the edge. */
.navbar-brand > span:last-child { min-width: 0; }
.navbar-title    { display: block; font-size: var(--t-body); font-weight: var(--w-strong); line-height: 1.25;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar-subtitle { display: block; font-size: var(--t-caption); color: var(--ink-soft); font-weight: var(--w-body); }
@media (max-width: 460px) { .navbar-subtitle { display: none; } }

/* .navbar-nav held the five desktop links. Both it and the hamburger that
   mirrored it on phones are gone — the deck is the navigation now. */

.navbar-actions { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; margin-inline-start: auto; }

/* On the narrowest phones — and only there — the two labelled buttons drop
   to their own full-width row rather than squeezing the brand out or
   scrolling the page sideways. Shrinking the labels was the other option;
   two big buttons on their own line is the one that keeps the words. */
/* One button now (26 Sep 2026): it fits beside the brand down to ~330 px. */
@media (max-width: 329px) {
  .navbar-actions { flex: 1 0 100%; margin-inline-start: 0; }
  .navbar-actions > * { flex: 1 1 0; }
}

.icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-chip);
  background: transparent; color: var(--ink);
  cursor: pointer;
  transition: background-color var(--tap) var(--out);
}
.icon-btn:hover { background: var(--tile); }

/* .mobile-menu and its links lived here. The panel and the hamburger that
   opened it are both gone: the home deck shows every destination as a
   labelled card, so there is nothing left for a hidden menu to hide. */

/* ── Buttons ──────────────────────────────────────────────────
   A real hierarchy: one filled primary, a bordered secondary, a bare
   tertiary. If three buttons sit together and all look the same, the
   page has not decided what it wants you to do. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: var(--hit);
  padding-inline: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-app);
  font-size: var(--t-body);
  font-weight: var(--w-strong);
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
  /* Long Arabic labels at the largest text size are wider than a 320px
     phone. A button that wraps is fine; a page that scrolls sideways is not. */
  white-space: normal;
  text-align: center;
  line-height: var(--lh-snug);
  transition: transform var(--tap) var(--spring),
              background-color var(--move) var(--out),
              border-color var(--move) var(--out);
}
.btn:active { transform: scale(0.98); }

.btn-primary   { background: var(--app-accent); color: var(--brand-contrast); }
.btn-primary:hover { background: color-mix(in srgb, var(--app-accent) 88%, #000); }

.btn-secondary,
.btn-outline   { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover,
.btn-outline:hover { background: var(--tile); border-color: var(--ink-soft); }

.btn-ghost     { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--tile); }

/* WhatsApp is how Aleppo actually shares things, so it stays the emphasised
   choice in the row — but a quiet green tint, not a filled brand slab. The
   icon carries the recognition; the colour only has to hint. */
.btn-whatsapp  { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.btn-whatsapp:hover { background: color-mix(in srgb, var(--ok) 16%, var(--ok-bg)); }

/* ── Share row ────────────────────────────────────────────────
   One emphasised button and two quiet ones. Order and the icons do the
   telling; three saturated platform colours would only shout over the
   figures they are meant to be sharing. */
.share-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
}
.share-row .btn { flex: 0 1 auto; }
.share-lede { color: var(--ink-soft); font-size: var(--t-footnote); margin-bottom: var(--s-3); }

.btn-sm  { min-height: var(--hit-min); padding-inline: var(--s-5); font-size: var(--t-footnote); }
.btn-lg  { min-height: var(--hit-primary); padding-inline: var(--s-8); font-size: var(--t-headline); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── Surfaces ─────────────────────────────────────────────────
   One card treatment. Hairline first, shadow barely. The old sheet had
   .card, .card-glass and .card-hover doing three versions of the same
   idea, which is how a page ends up with cards inside cards. */
.card {
  background: var(--app-card);
  border: var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-6);
  box-shadow: var(--lift-1);
}
.card-glass, .card-hover { /* legacy aliases — same surface, no variants */
  background: var(--app-card);
  border: var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-6);
  box-shadow: var(--lift-1);
}
.card-hover { transition: box-shadow var(--move) var(--out), transform var(--move) var(--out); }
.card-hover:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }

/* An inline <svg> with only a viewBox has no intrinsic width, so it fills
   its container — which is how one FAQ chevron gave the whole home page a
   horizontal scrollbar. Anything that means to be bigger says so. */
svg:not([width]):not([height]) { width: 1.25em; height: 1.25em; flex: 0 0 auto; }

/* ── Figures ──────────────────────────────────────────────────
   A number and its label. The number is the content; the label is
   metadata and is sized like it. */
.stat-card, .result-tile, .compare-tile {
  background: var(--app-card);
  border: var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--lift-1);
}

.stat-value, .result-value, .compare-tile-value {
  display: block;
  font-size: var(--t-title);
  font-weight: var(--w-strong);
  line-height: var(--lh-tight);
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.stat-label, .result-label, .compare-tile-label {
  display: block;
  font-size: var(--t-caption);
  font-weight: var(--w-body);
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}

.stat-sub, .result-sub, .compare-tile-sub {
  display: block;
  font-size: var(--t-caption);
  color: var(--ink-soft);
  margin-top: var(--s-1);
}

/* The single figure a page is actually about gets the accent. One. */
.compare-tile--highlight .compare-tile-value,
.stat-card--lead .stat-value { color: var(--app-accent); }

.result-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--s-5); }
.form-label {
  display: block;
  font-size: var(--t-footnote);
  font-weight: var(--w-medium);
  margin-bottom: var(--s-2);
  color: var(--ink);
}
.form-input, .form-textarea, select.form-input {
  width: 100%;
  min-height: var(--hit);
  padding: var(--s-3) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  background: var(--app-card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font-family: var(--font-app);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  transition: box-shadow var(--move) var(--out);
}
.form-input:focus, .form-textarea:focus, select.form-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.form-textarea { min-height: 120px; padding-block: var(--s-3); line-height: var(--lh-body); }

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-control);
  background: var(--tile);
}
.segmented-btn {
  min-height: 42px;
  padding-inline: var(--s-4);
  border: none;
  border-radius: calc(var(--r-control) - 3px);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-app);
  font-size: var(--t-footnote);
  font-weight: var(--w-body);
  cursor: pointer;
  transition: background-color var(--move) var(--out);
}
.segmented-btn[aria-pressed="true"], .segmented-btn.is-active {
  background: var(--app-card);
  box-shadow: var(--lift-1);
  font-weight: var(--w-strong);
}

/* ── Status ───────────────────────────────────────────────────
   Never colour alone — every one of these carries an icon and a word
   in the markup. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s-3);
  border-radius: var(--r-chip);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
}
.badge-success { background: var(--ok-bg);   color: var(--ok); }
.badge-warning,
.badge-amber   { background: var(--warn-bg); color: var(--warn); }
.badge-danger  { background: var(--bad-bg);  color: var(--bad); }
.badge-info    { background: var(--tile);    color: var(--ink); }

.alert {
  display: flex; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-card);
  background: var(--tile);
  font-size: var(--t-footnote);
  line-height: var(--lh-body);
  color: var(--ink);
}
.alert-icon { flex: 0 0 auto; margin-top: 2px; }
.alert-clean { background: var(--ok-bg);   color: var(--ok); }
.alert-light { background: var(--warn-bg); color: var(--warn); }
.alert-storm { background: var(--bad-bg);  color: var(--bad); }

.tip-card {
  display: flex; gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--tile);
  font-size: var(--t-footnote);
  line-height: var(--lh-body);
}
.tip-icon { flex: 0 0 auto; color: var(--ink-soft); }

/* ── Tables ─────────────────────────────────────────────────── */
/* A table wider than a phone has to scroll inside its own box, or it takes
   the whole page sideways with it — which is exactly what the dashboard's
   readings table was doing at 360px. */
.table-container {
  border: var(--hairline);
  border-radius: var(--r-card);
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--app-card);
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--t-footnote); }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: start; }
.table th {
  font-weight: var(--w-medium);
  color: var(--ink-soft);
  font-size: var(--t-caption);
  border-bottom: var(--hairline);
}
.table td { border-bottom: var(--hairline); font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: none; }

/* ── FAQ ─────────────────────────────────────────────────────
   A list of hairlines, not a stack of cards. */
.faq-item { border-bottom: var(--hairline); }
.faq-question {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  min-height: 64px;
  padding: var(--s-4) 0;
  border: none; background: none;
  font-family: var(--font-app);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}
.faq-chevron { width: 20px; height: 20px; margin-inline-start: auto; color: var(--ink-soft); transition: transform var(--move) var(--out); flex: 0 0 auto; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }
/* Height animates through grid rows, not max-height: no layout guess, no
   600px cap a long answer could exceed. */
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--move) var(--out); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer-inner { min-height: 0; overflow: hidden; color: var(--ink-soft); font-size: var(--t-footnote); line-height: var(--lh-body); max-width: 62ch; }
.faq-item.is-open .faq-answer-inner { padding-bottom: var(--s-5); }

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  border-top: var(--hairline);
  padding-block: var(--section) var(--s-8);
  margin-top: var(--section);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-8); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.footer-brand { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); text-decoration: none; color: var(--ink); }
.footer-brand-name { display: block; font-weight: var(--w-strong); font-size: var(--t-body); }
.footer-brand-sub  { display: block; font-size: var(--t-caption); color: var(--ink-soft); }
.footer-tagline { color: var(--ink-soft); font-size: var(--t-footnote); line-height: var(--lh-body); max-width: 42ch; }
.footer-title { font-size: var(--t-caption); font-weight: var(--w-strong); color: var(--ink); margin-bottom: var(--s-3); }
.footer-link { display: block; padding-block: 7px; color: var(--ink-soft); text-decoration: none; font-size: var(--t-footnote); }
.footer-link:hover { color: var(--ink); }
.footer-bottom { margin-top: var(--s-8); padding-top: var(--s-5); border-top: var(--hairline); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; }
.footer-fine, .footer-legal { font-size: var(--t-caption); color: var(--ink-soft); }

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .no-print, .navbar, .footer { display: none !important; }
  body { background: #fff; }
  .card, .stat-card, .result-tile { box-shadow: none; border: 1px solid #ddd; }
}

/* ── Page header ──────────────────────────────────────────────
   Every tool page opens here. It used to be a full-bleed orange
   gradient with white body copy on it (2.85:1 — under the floor), and
   the same banner on all 19 pages made the accent meaningless. Now the
   type does the work: a back link, a large title, one line of lede,
   and a hairline. The colour is saved for the answer further down. */
.page-head {
  padding-block: var(--section) var(--s-6);
  border-bottom: var(--hairline);
  margin-bottom: var(--section);
}

.page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--hit-min);
  margin-bottom: var(--s-3);
  font-size: var(--t-footnote);
  font-weight: var(--w-medium);
  color: var(--ink-soft);
  text-decoration: none;
}
.page-back:hover { color: var(--ink); }
/* The chevron points the way the language runs. */
.page-back svg { transform: scaleX(-1); }

.page-title { font-size: var(--t-large); letter-spacing: -0.8px; }
@media (min-width: 900px) { .page-title { font-size: calc(var(--t-display) * 0.72); } }

.page-lede {
  margin-top: var(--s-3);
  font-size: var(--t-headline);
  font-weight: var(--w-body);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  max-width: 54ch;
}

/* A .page-head already ends with its own breathing room; the section that
   follows it was adding a second helping on top, which read as a hole. */
.page-head + .section,
.page-head + .section-sm { padding-block-start: 0; }

/* ── Desktop layout ───────────────────────────────────────────
   The old site put every page in one ~740px column and left the rest
   of a 1440px screen empty. A calculator is not an article: on a wide
   screen the inputs and the answer want to be visible at the same
   time, so you can change a number and watch the result move without
   scrolling between them.

   Below 1024px it returns to one column, answer first — on a phone the
   answer is what you came for and the inputs are what you already know. */
@media (min-width: 1024px) {
  .tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--s-8);
    align-items: start;
  }
  /* Explicit placement, because source order puts the ANSWER first —
     that is what a phone should show first, and grid lets the desktop
     disagree without changing the markup. In RTL column 1 is the right
     one, so the inputs you work through sit where reading starts and
     the answer sits alongside. */
  .tool-main  { grid-column: 1; grid-row: 1; }
  .tool-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(68px + var(--s-6)); }
}

.tool-layout > * { min-width: 0; }

@media (max-width: 1023px) {
  .tool-layout { display: flex; flex-direction: column; gap: var(--s-6); }
  .tool-aside  { order: -1; }
}

/* Figures inside the narrow sticky column: the unit sits under the
   number instead of beside it, which is what stopped "2.8 ك.و.س" from
   wrapping mid-unit in a 150px card. */
.stat-card .stat-value small,
.result-tile .result-value small {
  display: block;
  font-size: var(--t-caption);
  font-weight: var(--w-body);
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Number grids size to their content, not to a fixed column count, so a
   figure never has to break across lines to fit its own box. */
.result-grid,
.mini-stats {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

/* A narrow sticky column lists its figures; it does not tile them. Two
   170px cells could not hold a 30px number and its unit, so every figure
   was breaking across lines — "٢٫٨ ك.و.س" split mid-unit. */
/* All of this only makes sense once .tool-aside is actually a 380px sidebar.
   Below 1024px it is just the next block down the page, and laying its
   figures out as a flex row there put the third line — the "بالسنة" note —
   off the side of a phone. The aside's treatment lives with the layout that
   creates it. */
@media (min-width: 1024px) {
  .tool-aside .mini-stats,
  .tool-aside .result-grid { grid-template-columns: minmax(0, 1fr); }

  .tool-aside .mini-stat,
  .tool-aside .stat-card {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
  }
  .tool-aside .mini-stat-value,
  .tool-aside .stat-value { white-space: nowrap; }
  .tool-aside .mini-stat-label,
  .tool-aside .stat-label { margin-bottom: 0; }
  /* The sub-note is a third line, not a third column. */
  .tool-aside .mini-stat-sub,
  .tool-aside .stat-sub { flex: 1 0 100%; margin-top: 0; }
}

/* The lede keeps a readable measure even though the header now spans the
   full container, so the title lines up with the content it introduces. */
.page-lede { max-width: 58ch; }

/* ── Home hero ────────────────────────────────────────────────
   Type opens the page. The day's reading sits beside it as a figure
   on its own surface, which is what lets it be read at a glance
   without a wash of colour behind it. */
.hero { padding-block: calc(var(--section) * 1.5) var(--section); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-10);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); gap: var(--s-12); }
}

.hero-copy h1 { margin-bottom: var(--s-5); }
.hero-copy .lede { margin-bottom: var(--s-8); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* The third option was a third large button competing with the other
   two. A page with three primary actions has none. */
.hero-aside-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--hit-min);
  font-size: var(--t-body);
  font-weight: var(--w-medium);
  color: var(--ink-soft);
  text-decoration: none;
}
.hero-aside-link:hover { color: var(--ink); }
.hero-aside-link svg { transform: scaleX(-1); }

.hero-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-8);
  border-radius: var(--r-card);
  background: var(--app-card);
  border: var(--hairline);
  box-shadow: var(--lift-2);
}

.hero-figure-label { font-size: var(--t-caption); color: var(--ink-soft); }

.hero-figure-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--t-display);
  font-weight: var(--w-strong);
  line-height: var(--lh-tight);
  letter-spacing: -2.5px;
  font-variant-numeric: tabular-nums;
  color: var(--app-accent);      /* the one number this page is about */
}
.hero-figure-value small {
  font-size: var(--t-title);
  font-weight: var(--w-body);
  letter-spacing: 0;
  color: var(--ink-soft);
}

.hero-figure-note {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-footnote);
  font-weight: var(--w-medium);
  color: var(--ink);
}
.hero-figure-fine {
  font-size: var(--t-caption);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}

/* ── Section header ───────────────────────────────────────────
   Aligned to the same edge as everything else on the page. The old
   sheet centred each section inside its own narrower box, so the page
   had no single alignment spine — headings drifted toward the middle
   while the hero sat at the margin. */
.section-header { margin-bottom: var(--s-8); }
.section-header h2 { margin-bottom: var(--s-2); }
.section-header p  { color: var(--ink-soft); font-size: var(--t-footnote); max-width: 58ch; }

/* Prose keeps its measure without centring its container. */
.prose, .faq-list { max-width: 68ch; }

/* ── The dark band ────────────────────────────────────────────
   Two inverted sections on the home page — this one separates the
   "what you pay now" comparison from everything around it. */
.compare-section {
  background: var(--band);
  color: var(--on-band);
  border-radius: var(--r-card);
  padding-block: var(--section);
  margin-block: var(--section);
}
.compare-section h2,
.compare-section h3 { color: inherit; }
.compare-section .section-header p { color: var(--on-band-soft); }
.compare-card {
  background: var(--band-tile);
  border: 1px solid var(--band-line);
  border-radius: var(--r-card);
  padding: var(--s-6);
}
.compare-result {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--s-5);
}
@media (min-width: 720px) { .compare-result { grid-template-columns: repeat(2, 1fr); } }
.compare-vs { text-align: center; color: var(--on-band-faint); font-size: var(--t-caption); padding-block: var(--s-3); }
.compare-section .compare-tile {
  background: var(--band-tile);
  border: 1px solid var(--band-line);
  box-shadow: none;
}
.compare-section .compare-tile-value { color: var(--on-band); }
.compare-section .compare-tile-label,
.compare-section .compare-tile-sub { color: var(--on-band-soft); }
.compare-section .compare-tile--highlight { background: var(--band-tile-up); border-color: var(--band-line); }
/* Four figures, one answer. The band exists to say how long the system takes
   to pay for itself, so that is the only figure that gets the accent. */
.compare-section .compare-tile--answer .compare-tile-value { color: var(--amber-400); }
.compare-section .form-input,
.compare-section .form-textarea {
  background: var(--band-tile);
  box-shadow: inset 0 0 0 1px var(--band-line);
  color: var(--on-band);
}
.compare-section .form-label { color: var(--on-band-soft); }
.compare-section .explain-btn {
  background: var(--band-tile);
  border-color: var(--band-line);
  color: var(--on-band-soft);
}
.compare-section .explain-btn:hover {
  background: var(--band-tile-up);
  border-color: var(--on-band-faint);
  color: var(--on-band);
}
/* The chips inherit a light card background from wizard.css; on the dark
   band that painted white-on-white and swallowed them whole. */
.compare-section .preset-chip {
  background: var(--band-tile);
  border-color: var(--band-line);
  color: var(--on-band-soft);
}
.compare-section .preset-chip:hover {
  background: var(--band-tile-up);
  border-color: var(--on-band-faint);
}
.compare-section .preset-chip.is-active {
  background: var(--on-band);
  border-color: var(--on-band);
  color: var(--sand-900);
}

/* ── The dark band, continued: type and figures ───────────── */
.compare-note { color: var(--on-band-faint); font-size: var(--t-caption); }
.compare-section .preset-title { color: var(--on-band-soft); }
/* The cost figure was red for a while. Four tiles, an amber answer and a red
   cost is three colours doing one job: the labels already say which is which,
   and the band reads far better monochrome with one accent in it. */

/* ── Sections ─────────────────────────────────────────────────
   One tinted band, declared once. Two sections used to invent their own
   backgrounds inline — one of them a three-stop amber gradient — which is
   how a page ends up with four different notions of "a section". */
.section--tinted { background: var(--surface-alt); }
.section-header-meta { margin-top: var(--s-3); }

.badge-ok   { background: var(--ok-bg);   color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: blink 2s ease-in-out infinite; }
}

.alert-title { font-weight: var(--w-strong); margin-bottom: 2px; }
.alert-note  { margin-top: var(--s-2); font-size: var(--t-caption); color: var(--text-muted); }

/* Where someone signs the printed agreement. A dashed rule says "write
   here" in a way a solid border does not. */
.sign-box {
  min-height: 90px;
  padding: var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
}
.tip-list { display: grid; gap: var(--s-4); }

/* ── Small print ───────────────────────────────────────────── */
.note-sm { font-size: var(--t-footnote); color: var(--ink-soft); }
.note-xs { font-size: var(--t-caption);  color: var(--ink-soft); }

/* ── Form / button odds and ends ──────────────────────────── */
.form-group--flush { margin-bottom: 0; }
.btn-icon { flex: 0 0 auto; }
/* An outline button standing on an inverted ground. */
.btn-ondark {
  background: transparent;
  color: var(--on-band);
  border-color: var(--on-band-faint);
}
.btn-ondark:hover { background: var(--band-tile-up); border-color: var(--on-band); }

/* ── Charts ───────────────────────────────────────────────── */
.chart-container { position: relative; width: 100%; height: 300px; }
.chart-container > canvas { display: block; max-width: 100%; }
.chart-legend {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--s-5);
  margin-top: var(--s-5);
}
.chart-legend > div { display: flex; align-items: center; gap: var(--s-2); }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.legend-swatch--clean { background: var(--solar-clean); }
.legend-swatch--dust  { background: var(--solar-dust); }
.legend-swatch--storm { background: var(--solar-storm); }
.legend-label { font-size: var(--t-caption); color: var(--ink-soft); }

/* ── The home calculator's shell ──────────────────────────── */
.calculator-shell {
  background: var(--app-card);
  border: var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-6);
  box-shadow: var(--lift-1);
}
@media (min-width: 900px) {
  .calculator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
}

/* ── Partnership ──────────────────────────────────────────────
   The second inverted band. It shares the compare band's ground rather
   than inventing a second dark gradient of its own. */
.partnership {
  background: var(--band);
  color: var(--on-band);
  padding-block: var(--section);
}
.partnership-name {
  font-size: var(--t-headline);
  font-weight: var(--w-strong);
  color: inherit;
  margin-block: var(--s-3) var(--s-4);
}
.partnership-lede {
  color: var(--on-band-soft);
  font-size: var(--t-footnote);
  max-width: 52ch;
  margin-inline: auto;
}
.partnership-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--s-8);
}
.partnership-card {
  background: var(--band-tile);
  border: 1px solid var(--band-line);
  border-radius: var(--r-card);
  padding: var(--s-6);
  text-align: center;
}
.partnership-icon { color: var(--on-band-faint); margin-bottom: var(--s-3); }
.partnership-title { font-size: var(--t-body); font-weight: var(--w-strong); margin-bottom: var(--s-2); }
.partnership-desc  { font-size: var(--t-footnote); color: var(--on-band-soft); line-height: var(--lh-body); }

.navbar-logo--lg { width: 36px; height: 36px; }

/* A plain tinted cell — the dashboard's system-spec readouts. Not a card:
   these are reference constants, not findings, and giving them borders and
   shadows would put them at the same weight as the readings above. */
.spec-tile {
  padding: var(--s-4);
  border-radius: var(--r-chip);
  background: var(--tile);
  text-align: center;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Sub-headings inside a long page ──────────────────────────
   Eight tool pages were setting this inline, each with its own idea of the
   spacing above it. It is one thing, so it is one rule. */
.sub-head {
  font-size: var(--t-headline);
  font-weight: var(--w-strong);
  line-height: var(--lh-snug);
  margin-block: var(--s-6) var(--s-2);
}
.sub-head--tight { margin-block-start: 0; }

.page-note {
  margin-top: var(--s-3);
  font-size: var(--t-footnote);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ── The hub's filter ─────────────────────────────────────────
   Nineteen tools is past the point where scanning works. The field sits in
   the header, at the width of the lede it follows, so it reads as part of
   the sentence rather than as a widget bolted above the grid. */
.hub-search {
  position: relative;
  margin-top: var(--s-6);
  max-width: 420px;
}
.hub-search-icon {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
  display: flex;
}
.hub-search-input {
  width: 100%;
  min-height: 52px;
  padding-inline: calc(var(--s-4) * 2 + 18px) var(--s-4);
  border: 0;
  border-radius: var(--r-card);
  background: var(--app-card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
}
.hub-search-input::placeholder { color: var(--ink-soft); }
.hub-search-input:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--focus);
}
/* The browser's own clear button is a 10px target; the field takes Escape. */
.hub-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hub-search-count { margin-top: var(--s-2); font-size: var(--t-caption); color: var(--ink-soft); }
.hub-empty {
  padding: var(--s-8) 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--t-footnote);
}

/* The one row a results table is pointing at — today's date, the direction
   you actually face. A themed pair, so it survives the night inversion that
   two hardcoded pastel fills did not. */
.table tr.is-highlight {
  background: var(--tile);
  font-weight: var(--w-strong);
}
.table tr.is-highlight td { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   THE DECK — the one screen
   ═══════════════════════════════════════════════════════════════
   Everything a person needs in order to use this site is here, in
   view, spelled out in words. What is deliberately absent is as much
   of the design as what is present: no menu to open, no icon whose
   meaning has to be guessed, no control that only appears on hover,
   no gesture, and nothing that moves on its own.

   The rank is fixed and only three deep — today's number, the one
   action, the six doors — so there is never a moment of deciding
   what to look at first.
   ─────────────────────────────────────────────────────────────── */

.deck {
  padding-block: var(--s-6) var(--s-10);
  background: var(--surface);
}

.deck-inner {
  width: min(100% - var(--s-8), 640px);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  /* On a wide screen the reading and the doors sit side by side, so the
     whole deck still lands within one screen without scrolling. Two
     stacks, not a five-row area map: the reading is followed by the one
     action it leads to, and nothing can slip between them. */
  .deck-inner {
    width: min(100% - var(--s-12), 1180px);
    display: grid;
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--s-10);
  }
  .deck-date { grid-column: 1 / -1; }
  .deck-foot { grid-column: 1 / -1; }
  .deck-heading { margin-top: 0; }
}

.deck-date {
  font-size: var(--t-footnote);
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}

/* ── Today's reading ──────────────────────────────────────────
   A card, because a card says "this is one thing". The number is the
   only place on the screen where the accent appears twice — once here
   and once on the button below it, and nowhere else. */
.deck-today {
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--app-card);
  box-shadow: var(--lift-1);
  text-align: center;
}

.deck-today-label {
  font-size: var(--t-headline);
  font-weight: var(--w-medium);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}

.deck-figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-block: var(--s-2) var(--s-4);
  color: var(--app-accent);
  font-weight: var(--w-strong);
  line-height: var(--lh-tight);
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}
.deck-figure .num  { font-size: var(--t-display); }
.deck-figure .unit { font-size: var(--t-title); letter-spacing: 0; }

/* The verdict in words, because a percentage is not an answer.
   The icon is beside the sentence, never instead of it. */
.deck-verdict {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  max-width: 100%;
  min-height: var(--hit-min);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-card);
  font-size: var(--t-headline);
  font-weight: var(--w-strong);
  line-height: var(--lh-snug);
  text-align: start;
}
.deck-verdict.is-good { background: var(--ok-bg);   color: var(--ok); }
.deck-verdict.is-fair { background: var(--warn-bg); color: var(--warn); }
.deck-verdict svg { flex: 0 0 auto; }

.deck-plain {
  margin-top: var(--s-5);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.deck-plain strong { font-weight: var(--w-strong); }

.deck-source {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: var(--hairline);
  font-size: var(--t-footnote);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  text-align: start;
}
.deck-source svg { flex: 0 0 auto; margin-top: 3px; }

/* ── The primary action ───────────────────────────────────────
   68px tall, full width, filled, and the only filled control on the
   screen. It is the largest thing here after the number itself. */
.deck-primary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: var(--hit-primary);
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-card);
  background: var(--app-accent);
  color: var(--brand-contrast);
  text-decoration: none;
  box-shadow: var(--lift-2);
  transition: transform var(--tap) var(--spring), background-color var(--move) var(--out);
}
.deck-primary:active { transform: scale(0.985); }
.deck-primary svg { flex: 0 0 auto; }

.deck-primary-text { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.deck-primary-title { font-size: var(--t-headline); font-weight: var(--w-strong); line-height: var(--lh-snug); }
.deck-primary-sub   { font-size: var(--t-footnote); font-weight: var(--w-body); opacity: 0.9; }

/* ── The six doors ────────────────────────────────────────────
   Secondary, and clearly so: outlined, not filled, and separated from
   the primary by a heading that says what they are. */
.deck-heading {
  margin-block: var(--s-10) var(--s-4);
  font-size: var(--t-headline);
  font-weight: var(--w-strong);
  color: var(--ink);
}

.deck-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}

.deck-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon title" "icon sub";
  align-items: center;
  column-gap: var(--s-4);
  min-height: var(--hit-primary);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--app-card);
  text-decoration: none;
  transition: border-color var(--move) var(--out), background-color var(--move) var(--out);
}
.deck-card:active { background: var(--tile); }
/* Hover is a bonus, never the thing that reveals meaning — every card
   already says what it is in words, at rest. */
.deck-card:hover { border-color: var(--line-strong); }
.deck-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.deck-card-icon {
  grid-area: icon;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-chip);
  background: var(--tile);
  color: var(--app-accent);
}
.deck-card-title {
  grid-area: title;
  font-size: var(--t-body);
  font-weight: var(--w-strong);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.deck-card-sub {
  grid-area: sub;
  margin-top: 2px;
  font-size: var(--t-footnote);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}

.deck-foot {
  margin-top: var(--s-8);
  font-size: var(--t-footnote);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

/* ── Checkable rows ───────────────────────────────────────────
   A 22px box is a target for a mouse, not for a hand. The row is the
   control: full width, 56px tall, and the words toggle it too. */
.check-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--hit);
  padding-inline: var(--s-2);
  border-radius: var(--r-control);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  cursor: pointer;
}
.check-row:hover { background: var(--tile); }
.check-row:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

.check-box {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  accent-color: var(--success);
  cursor: pointer;
}

.quote-summary {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: var(--hairline);
  font-size: var(--t-footnote);
  line-height: 2;
}

/* ═══════════════════════════════════════════════════════════════
   THE SUN — colour brought back
   ═══════════════════════════════════════════════════════════════
   The restraint pass removed the gradient hero because the white type on
   it measured 2.85:1. That was the right diagnosis and the wrong cure: it
   threw out the colour instead of the white. The gradient is back exactly
   as the live site has it, carrying near-black type at 6.24–10.48:1 —
   louder than what shipped, and more readable than what it replaces.

   The rule that keeps it safe: warm colour is a SURFACE. Type on warm
   colour is near-black; type that must itself be warm is #C2410C on a
   light ground. Nothing sits white on amber.
   ─────────────────────────────────────────────────────────────── */

/* The gradient goes on the PAGE, not the section — the nav sits above .deck
   in the DOM, so a gradient scoped to .deck left a white bar floating over
   it. On the body it runs behind everything at the top, which is what makes
   it read as one lit surface instead of a coloured box. */
.deck-page {
  background-image: var(--sun-grad);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 820px;
}

.deck {
  background: transparent;
  color: var(--on-sun);
  padding-block: var(--s-6) var(--s-12);
}

/* The nav sits on the gradient too, so it stops being a white bar with a
   coloured box under it. */
.deck-page .navbar {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.deck-page .navbar-title b,
.deck-page .navbar-subtitle { color: var(--on-sun); }
.deck-page .navbar.is-stuck {
  background: var(--sun-grad);
  border-bottom: 1px solid rgba(28, 25, 23, 0.10);
}

.deck-date { color: var(--on-sun-soft); font-weight: var(--w-medium); }
.deck-heading { color: var(--on-sun); }
.deck-foot,
.deck-main > .deck-source { color: var(--on-sun-soft); }
.deck-main > .deck-source { border-top: none; padding-top: 0; }

/* The reading keeps a white card — a figure this large deserves the
   cleanest ground on the screen, and it lifts off the colour. */
.deck-today {
  background: var(--deck-card-bg);
  box-shadow: 0 12px 32px rgba(120, 53, 15, 0.18), 0 2px 6px rgba(120, 53, 15, 0.10);
}

/* On amber, a burnt-orange button turns to mud. Near-black is the one fill
   that stays a button here — and it is 16:1, which no other option is. */
.deck-primary {
  background: var(--cta-bg);
  color: var(--cta-ink);
  box-shadow: 0 10px 26px rgba(69, 26, 3, 0.28);
}
.deck-primary:active { filter: brightness(0.88); }

/* The doors: warm tinted grounds, not nineteen identical white cards. */
.deck-card {
  background: var(--deck-card-bg);
  border-color: var(--deck-card-line);
}
.deck-card:hover { border-color: var(--deck-card-line-hover); }
.deck-card-icon {
  background: var(--sun-grad-soft);
  color: var(--on-sun-tint);
}

/* ── Tool tiles ───────────────────────────────────────────────
   The icon grid is the screen people look at most. Warm discs give it a
   pulse without putting colour anywhere near a glyph of text. */
.tool-card-icon,
.quick-disc {
  background: var(--sun-grad-soft);
  color: var(--on-sun-tint);
}

/* ── Page headers ─────────────────────────────────────────────
   Every tool page opened on flat sand. A warm wash under the title costs
   nothing and stops nineteen pages reading as one long grey corridor. */
.page-head {
  background: var(--page-wash);
  border-bottom: none;
}

/* ── Figures ──────────────────────────────────────────────────
   The number a page exists to tell gets the warm ground it deserves. */
.stat-card--lead {
  background: var(--sun-grad-soft);
  border-color: rgba(120, 53, 15, 0.16);
}
.stat-card--lead .stat-value { color: var(--on-sun-tint); }
.stat-card--lead .stat-label,
.stat-card--lead .stat-sub { color: var(--on-sun-tint-soft); }

/* ── The hook ─────────────────────────────────────────────────
   A stranger gets about three seconds. They used to spend them reading a
   weather label over a 97٪ efficiency figure — the most prominent thing on
   the page and the least motivating thing on it. The promise leads now, the
   money carries the weight, and today's reading moved below the action where
   it works as evidence instead of as an obstacle. */
.deck-hook {
  font-size: var(--t-large);
  font-weight: var(--w-strong);
  line-height: var(--lh-tight);
  letter-spacing: -1px;
  color: var(--ink);
  margin: 0;
}

.deck-money-label {
  margin: var(--s-5) 0 0;
  font-size: var(--t-footnote);
  color: var(--ink-soft);
}

.deck-money {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-1) 0 0;
  color: var(--app-accent);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.deck-money .num { font-size: var(--t-display); font-weight: var(--w-strong); letter-spacing: -3px; }
.deck-money .cur { font-size: var(--t-title); font-weight: var(--w-strong); }
.deck-money .per { font-size: var(--t-headline); font-weight: var(--w-medium); color: var(--ink-soft); letter-spacing: 0; }

/* ── Proof ────────────────────────────────────────────────────
   Three facts that cost nothing to state and answer the questions a
   stranger silently asks: is this live, is it about my weather, is it real. */
.deck-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: var(--hairline);
}
.deck-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-footnote);
  font-weight: var(--w-medium);
  /* This strip sits ON the gradient, not on a card. --ink-soft is tuned for a
     pale ground and measured 1.98:1 here. */
  color: var(--on-sun);
}
.deck-proof-item svg { flex: 0 0 auto; color: currentColor; }
.deck-proof { border-top-color: rgba(28, 25, 23, 0.18); }

/* ═══════════════════════════════════════════════════════════════
   The five tabs
   One bar, five labelled destinations, on every page. Fixed to the
   bottom where a thumb already is; on a wide screen it narrows to
   the page's measure instead of stretching across a monitor.
   ═══════════════════════════════════════════════════════════════ */
:root { --tabbar-h: 74px; }

body { padding-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

.tabbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block-end: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -8px 24px rgba(28, 25, 23, 0.06);
}
:root[data-theme="night"] .tabbar { box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); }

.tab {
  min-height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.tab .icon {
  width: 38px; height: 38px;
  padding: 6px;
  border-radius: 12px;
  transition: background-color var(--tap), color var(--tap);
}
.tab.is-on { color: var(--brand-ink); font-weight: var(--w-strong); }
.tab.is-on .icon { background: var(--sun-grad-soft); color: var(--on-sun-tint); }
.tab:active .icon { transform: scale(0.94); }
.tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 12px; }

@media (min-width: 900px) {
  .tabbar {
    inset-inline: auto;
    inset-inline-start: 50%;
    transform: translateX(50%);
    width: min(720px, 100%);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
  }
  :root[dir="ltr"] .tabbar { transform: translateX(-50%); }
}
@media print { body { padding-block-end: 0; } }

/* ═══════════════════════════════════════════════════════════════
   The launcher — every tool as a tile
   ═══════════════════════════════════════════════════════════════ */
.launch { padding-block: var(--s-6) var(--s-8); }
.launch-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-2) var(--s-4); margin-block-end: var(--s-4);
}
.launch-head h2 { margin: 0; font-size: var(--t-headline); }
.launch-head p { margin: 0; color: var(--text-muted); font-size: var(--t-footnote); }

.launch .hub-group { margin-block-end: var(--s-6); }
.launch .hub-group-head { margin-block-end: var(--s-3); }
.launch .hub-group-title { font-size: var(--t-body); font-weight: var(--w-strong); }
.launch .hub-group-sub { font-size: var(--t-footnote); }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-3);
}
@media (min-width: 640px) { .tile-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-4); } }

.tile-grid .tool-card {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 150px;
  padding: var(--s-4);
  background: var(--deck-card-bg);
  border: 1px solid var(--deck-card-line);
  border-radius: var(--r-card);
}
.tile-grid .tool-card:hover { border-color: var(--deck-card-line-hover); transform: none; }
.tile-grid .tool-card-icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--sun-grad-soft); color: var(--on-sun-tint);
}
.tile-grid .tool-card-icon .icon { width: 28px; height: 28px; }
.tile-grid .tool-card-body { gap: 2px; }
.tile-grid .tool-card-title { font-size: var(--t-body); line-height: var(--lh-snug); }
.tile-grid .tool-card-desc {
  font-size: var(--t-caption); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-grid .tool-card-go { display: none; }
.tile-grid .tool-card-badge { inset-inline-end: var(--s-3); inset-block-start: var(--s-3); }

/* ═══════════════════════════════════════════════════════════════
   Statistic cards — value, unit, and what it is compared with
   ═══════════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
@media (min-width: 760px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }

.kpi {
  display: flex; flex-direction: column; gap: 2px;
  min-height: 132px;
  padding: var(--s-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.kpi-l {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-caption); font-weight: var(--w-medium); color: var(--text-muted);
}
.kpi-l .icon { width: 18px; height: 18px; color: var(--brand-ink); flex: 0 0 auto; }
.kpi-v {
  margin-block-start: auto;
  font-size: var(--t-title); font-weight: var(--w-strong); line-height: 1.05;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.kpi-v small { font-size: var(--t-caption); font-weight: var(--w-medium); color: var(--text-muted); margin-inline-start: 4px; }
.kpi-d { font-size: var(--t-caption); color: var(--text-muted); display: flex; align-items: center; gap: 4px; min-height: 1.4em; }
.kpi-d .icon { width: 16px; height: 16px; }
.kpi-d.is-up { color: var(--success); }
.kpi-d.is-down { color: var(--bad); }
.kpi--lead { background: var(--sun-grad-soft); border-color: transparent; color: var(--on-sun-soft); }
.kpi--lead .kpi-l, .kpi--lead .kpi-d, .kpi--lead .kpi-v small { color: var(--on-sun-soft); }
.kpi--lead .kpi-l .icon { color: var(--on-sun-tint); }
.kpi--lead .kpi-v { color: var(--on-sun); }

/* When and where the numbers came from. */
.stamp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: var(--s-3) 0 0;
  font-size: var(--t-caption); color: var(--text-muted);
}
.stamp .icon { width: 16px; height: 16px; }
.stamp b { font-weight: var(--w-medium); color: var(--text); }
.stamp .live-dot { margin-inline-end: 2px; }

/* ═══════════════════════════════════════════════════════════════
   Charts, said in words too
   ═══════════════════════════════════════════════════════════════ */
.chart-summary { margin: var(--s-2) 0 0; font-size: var(--t-footnote); color: var(--text-muted); line-height: var(--lh-body); }
.chart-data { margin-block-start: var(--s-2); }
.chart-data > summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--hit-min); padding: 0 var(--s-2);
  font-size: var(--t-caption); font-weight: var(--w-medium); color: var(--brand-ink);
  cursor: pointer; list-style: none; border-radius: var(--r-control);
}
.chart-data > summary::-webkit-details-marker { display: none; }
.chart-data > summary .icon { width: 16px; height: 16px; transition: transform var(--tap); }
.chart-data[open] > summary .icon { transform: rotate(180deg); }
.chart-data table { width: 100%; margin-block-start: var(--s-2); border-collapse: collapse; font-size: var(--t-caption); }
.chart-data th, .chart-data td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: start; }
.chart-data th { font-weight: var(--w-medium); color: var(--text-muted); }
.chart-data td.num, .chart-data th.num { text-align: end; font-variant-numeric: tabular-nums; }
.chart-data caption { text-align: start; font-weight: var(--w-medium); padding-block: 6px; }
.chart-nodata {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 120px; padding: var(--s-4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  color: var(--text-muted); font-size: var(--t-footnote);
}
.chart-nodata .icon { width: 24px; height: 24px; flex: 0 0 auto; }

/* ── Narrow measure + three-up choice cards ─────────────────── */
.container-narrow { max-width: 780px; }
.method-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .method-grid.method-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.method-card-title .icon { vertical-align: -5px; margin-inline-end: 4px; color: var(--brand-ink); }
fieldset.form-group { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.form-group > legend { padding: 0; margin-block-end: var(--s-2); }
/* Tile layout: icon and the «جاهز» badge share the top row; the words below. */
.tile-grid .tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "icon badge" "body body";
  align-items: start;
  row-gap: var(--s-3);
}
.tile-grid .tool-card-icon { grid-area: icon; }
.tile-grid .tool-card-body { grid-area: body; }
.tile-grid .tool-card-badge { grid-area: badge; position: static; inset: auto; justify-self: end; }
.tile-grid .tool-card-desc { -webkit-line-clamp: 3; }
/* The band's faint ink, when the same card sits on a light page. */
.section .compare-vs, .section .compare-note { color: var(--text-muted); }
/* Five labels must fit a 320px phone at the largest type size. */
.tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab { min-width: 0; }
.tab span { font-size: min(var(--t-caption), 5vw); max-width: 100%; }
.checklist-item a, .checklist-item strong { overflow-wrap: anywhere; }
.method-card { font-family: inherit; font-size: var(--t-body); }

/* ═══════════════════════════════════════════════════════════════
   The monitoring-app ground
   Warm paper-grey under white cards, an amber wash at the top of every
   page, soft offset shadows instead of borders. Header and tab bar are
   white so the cards read as the coloured things on the page.
   ═══════════════════════════════════════════════════════════════ */
body {
  background-color: var(--page-bg);
  background-image: var(--page-top);
  background-repeat: no-repeat;
  background-size: 100% 360px;
}
.navbar { background: rgba(255,255,255,0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; }
:root[data-theme="night"] .navbar { background: rgba(23,19,15,0.86); }
.navbar.is-stuck { border-bottom-color: var(--line); }
.tabbar { background: var(--card); }

.card, .kpi, .tile-grid .tool-card, .stat-card, .compare-card, .faq-item, .tip-card, .deck-today {
  background: var(--card);
  border: 0;
  box-shadow: var(--card-shadow);
  border-radius: 16px;
}
.tile-grid .tool-card:hover { box-shadow: 0 10px 28px rgba(80,50,10,0.12), 0 1px 2px rgba(80,50,10,0.06); }
.kpi { min-height: 128px; gap: 4px; }
.kpi-l { color: var(--text); font-weight: var(--w-medium); }
.kpi-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--icon-well); color: var(--brand-ink); flex: 0 0 auto;
}
.kpi-ic .icon { width: 22px; height: 22px; }
.kpi-v { font-size: 30px; }
.kpi--lead { background: var(--card); color: var(--text); }
.kpi--lead .kpi-l, .kpi--lead .kpi-d, .kpi--lead .kpi-v small { color: var(--text-muted); }
.kpi--lead .kpi-v { color: var(--brand-ink); }
.section--tinted { background: transparent; }
.page-head { background: transparent; }

/* Home: the promise sits in a white card on the wash, the way the
   reference apps open on a plant card over a light gradient. */
.deck-page { background-image: var(--page-top); background-size: 100% 520px; }
.deck-page .navbar { background: rgba(255,255,255,0.86); }
:root[data-theme="night"] .deck-page .navbar { background: rgba(23,19,15,0.86); }
.deck-page .navbar-title b, .deck-page .navbar-subtitle, .deck-heading, .deck-foot, .deck-proof-item, .deck-main > .deck-source { color: var(--text); }
.deck-main > .deck-source, .deck-foot { color: var(--text-muted); }
.deck-card { background: var(--card); border: 0; box-shadow: var(--card-shadow); border-radius: 16px; }
.deck-card-icon { background: var(--icon-well); color: var(--brand-ink); border-radius: 50%; }
.deck-proof { background: var(--card); box-shadow: var(--card-shadow); border-radius: 14px; padding: 12px 16px; }
.deck-money .num, .deck-money .cur { color: var(--brand-ink); }
.footer { background: transparent; }
/* A list inside a card is rows with hairlines, never cards inside a card. */
.card .checklist-item { background: transparent; border: 0; border-block-end: 1px solid var(--line); border-radius: 0; box-shadow: none; padding-inline: 0; }
.card .checklist-item:last-child { border-block-end: 0; }