/* ============================================================
   JISM — /guides/* only.

   legal.css is shared by 28 pages (privacy, terms, about, contact,
   404 …) and stays the base layer. This file is linked ONLY by the
   guide pages and the guide hub, so nothing here can reach the
   legal pages.

   What it adds is reference-page machinery, not a restyle. The
   guides already read well; what they lacked was any way to use
   them as reference — a visitor arriving from search wants one
   number and had to read a whole article to find it.
   ============================================================ */

/* ── shell ────────────────────────────────────────────────────────────────
   `display:contents` keeps the wrapper inert at narrow widths and on any
   page that ships no table of contents, so the single-column reading
   layout is untouched until there is genuinely something to put beside it. */
.lp-shell{display:contents}

@media (min-width:1080px){
  /* `:has` guard — the hub and the 404s share this shell and ship no contents
     list. Without it their single child lands in the 236px sidebar track. */
  .lp-shell:has(> .g-toc){
    display:grid;
    grid-template-columns:236px minmax(0,1fr);
    gap:clamp(32px,4vw,64px);
    max-width:1120px;
    margin:0 auto;
    align-items:start;
  }
  .lp-shell:has(> .g-toc) .lp-main{margin:0;max-width:none;padding-inline:0 24px}
  .lp-shell > .g-toc{position:sticky;top:96px}
}

/* ── table of contents ────────────────────────────────────────────────────
   Built from the article's own <h2>s at build time, so it can never drift
   from the page. Below 1080px it collapses into a <details> above the
   article rather than being dropped — on a phone the need to skip ahead is
   greater, not smaller. */
.g-toc{
  padding:clamp(40px,6vw,72px) 24px 0;
  font-size:.92rem;
}
.g-toc-h{
  font-family:var(--font-mono);font-size:.64rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 14px;
}
.g-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.g-toc li{margin:0}
.g-toc a{
  display:block;padding:7px 0 7px 14px;line-height:1.35;
  color:var(--ink-soft);font-weight:600;
  border-inline-start:2px solid rgba(127,127,127,.28);
  transition:color .15s ease,border-color .15s ease;
}
.g-toc a:hover{color:var(--ink);border-inline-start-color:var(--ink)}
.g-toc a.is-current{color:var(--green-d);border-inline-start-color:var(--green);font-weight:800}
.g-toc a:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}

/* narrow: the same list, folded away */
.g-toc-fold{
  margin:0 0 2rem;border:2px solid var(--ink);border-radius:14px;
  background:var(--paper);overflow:hidden;
}
.g-toc-fold summary{
  cursor:pointer;padding:13px 18px;font-weight:800;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
}
.g-toc-fold summary::marker{color:var(--green-d)}
.g-toc-fold .g-toc{padding:0 18px 14px}
.g-toc-fold .g-toc-h{display:none}
@media (min-width:1080px){ .g-toc-fold{display:none} }
@media (max-width:1079px){ .lp-shell > .g-toc{display:none} }

/* Anchored headings must clear the 72px sticky nav. Nothing linked into the
   article before this file existed, so the omission was never reachable —
   adding the contents list is what makes it matter. */
.lp-main h2[id]{scroll-margin-top:96px}

/* ── the short answer ─────────────────────────────────────────────────────
   Was a slightly bolder paragraph, which read as an intro rather than as
   the answer. It now carries a label and the brand's own left rule, so a
   visitor who reads one element reads the right one. */
.lp-main .answer{
  position:relative;
  background:var(--green-pale);
  border-inline-start:4px solid var(--green);
  border-radius:0 14px 14px 0;
  padding:20px 24px 22px;
  margin:26px 0 34px;
  font-weight:600;color:var(--ink);
}
html[dir="rtl"] .lp-main .answer{border-radius:14px 0 0 14px}
.g-answer-h{
  display:block;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green-dd);
  margin-bottom:9px;
}
html[lang="ar"] .g-answer-h{font-family:var(--font-ar);letter-spacing:.03em}
html.dark .lp-main .answer{background:var(--green-pale)}

/* ── citations ────────────────────────────────────────────────────────────
   The whole value of these pages is that every claim carries a source, so
   the citation is functional here, not decoration: the marker jumps to the
   entry, the entry lights up, and a return arrow goes back to where you
   were reading. */
/* `vertical-align:super` grows the line box, which opened uneven leading on
   every paragraph carrying a citation. Offsetting with `position:relative`
   instead leaves the line box alone. */
.lp-main .ref{
  position:relative;top:-.42em;
  font-family:var(--font-mono);font-size:.66em;font-weight:700;
  color:var(--green-d);text-decoration:none;
  padding:0 1px;vertical-align:baseline;line-height:1;
}
.lp-main sup:has(> .ref){line-height:0;font-size:inherit;vertical-align:baseline}
.lp-main .ref:hover{text-decoration:underline}
.lp-main .ref:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}

.lp-main .sources li{
  scroll-margin-top:96px;
  padding:6px 10px;margin-inline-start:-10px;border-radius:8px;
  transition:background .35s ease;
}
.lp-main .sources li:target{background:var(--green-pale)}
.lp-main .src-back{
  font-family:var(--font-mono);font-weight:700;color:var(--green-d);
  text-decoration:none;margin-inline-start:6px;
}
.lp-main .src-back:hover{text-decoration:underline}

/* ── series navigation ────────────────────────────────────────────────────
   Six guides that never said so. Previous/next makes the set legible as a
   set, and gives a reader who finishes one somewhere to go that is not the
   back button. */
.g-series{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin:44px 0 0;padding-top:26px;
  border-top:2px dashed rgba(127,127,127,.35);
}
.g-series a{
  display:flex;flex-direction:column;gap:5px;
  border:2px solid var(--ink);border-radius:14px;padding:15px 18px;
  background:var(--paper);
  transition:background .15s ease;
}
.g-series a:hover{background:var(--green-pale)}
.g-series a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.g-series .gs-dir{
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}
html[lang="ar"] .g-series .gs-dir{font-family:var(--font-ar);letter-spacing:.03em}
.g-series .gs-t{font-weight:800;color:var(--ink);line-height:1.25}
/* The first guide has no previous and the last has no next; a lone "next"
   card belongs on the far side, not in the empty first track. */
.g-series .gs-next:only-child{grid-column:2}
.g-series .gs-next{text-align:end}
.g-series .gs-next .gs-t{text-align:end}
@media (max-width:620px){ .g-series{grid-template-columns:1fr} .g-series .gs-next,.g-series .gs-next .gs-t{text-align:start} }

/* ── hub: a reading path, not a link dump ─────────────────────────────────
   The six guides do build on each other — calories before the split of
   those calories, the rate before the arithmetic behind it — so the order
   carries information and is worth numbering. */
.g-path{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.g-path li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  padding:22px 0;border-bottom:2px dashed rgba(127,127,127,.28);
  align-items:start;
}
.g-path li:last-child{border-bottom:none}
.g-path .gp-n{
  font-family:var(--font-mono);font-size:.85rem;font-weight:700;
  width:38px;height:38px;display:grid;place-items:center;
  border:2px solid var(--ink);border-radius:11px;
  background:var(--green-pale);color:var(--green-dd);
  font-variant-numeric:tabular-nums;
}
.g-path .gp-t{font-family:var(--font-display);font-weight:800;font-size:1.16rem;
  line-height:1.25;color:var(--ink);display:block;margin-bottom:4px}
html[lang="ar"] .g-path .gp-t{line-height:1.4}
.g-path a:hover .gp-t{color:var(--green-d)}
.g-path .gp-b{color:var(--ink-soft);font-size:.97rem;display:block}
.g-path a{display:block}
.g-path a:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:8px}

/* ── nav: content should outrank chrome ───────────────────────────────────
   The green Home pill was the loudest element at every scroll position on a
   page whose job is to be read. It becomes the same flat mono pill as the
   language switch. */
.lp-nav .g-home{
  font-family:var(--font-mono);font-weight:700;font-size:.78rem;
  border:2px solid var(--ink);border-radius:999px;
  background:var(--paper);color:var(--ink);
  padding:7px 13px;white-space:nowrap;
  display:inline-flex;align-items:center;
  transition:background .15s ease,color .15s ease;
}
.lp-nav .g-home:hover{background:var(--ink);color:var(--paper)}
html[lang="ar"] .lp-nav .g-home{font-family:var(--font-ar)}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }