/* ==========================================================================
   LCS — components.css
   Extracted from the v8 inline block, plus the pieces the sub-pages need.
   Nothing here names a colour. Everything reads the ground's variables so
   the section accent flows through automatically.
   ========================================================================== */

/* ── BUTTONS ───────────────────────────────────────────────────────────── */

.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:var(--r-md);
  font-weight:var(--w-reg);font-size:15.5px;
  border:1px solid transparent;cursor:pointer;
  min-inline-size:max-content;
  transition:background var(--t-micro) var(--e-out),
             border-color var(--t-micro) var(--e-out),
             color var(--t-micro) var(--e-out),
             transform var(--t-micro) var(--e-out)}
.btn--p{background:var(--accent);color:var(--accent-ink);font-weight:var(--w-med)}
.btn--p:hover{background:var(--accent-hi);transform:translateY(-1px)}
.btn--p:active{transform:none}
.btn--s{border-color:var(--rule-2);color:var(--fg)}
.btn--s:hover{border-color:var(--fg)}
.btn--t{padding-inline:0;text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;text-decoration-color:var(--rule-2)}
.btn--t:hover{text-decoration-color:var(--accent)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

.cta{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:32px}

/* ── GLASS ─────────────────────────────────────────────────────────────── */
/* The inset top highlight is what makes it read as glass rather than
   a translucent box. On light grounds it inverts to a white fill. */

.glass{background:rgb(255 255 255/.05);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgb(255 255 255/.11);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.09), 0 22px 60px -28px rgb(0 0 0/.85)}
.g-parchment .glass,.g-ivory .glass{
  background:rgb(255 255 255/.66);border-color:rgb(20 16 8/.08);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9), 0 18px 44px -26px rgb(20 16 8/.26)}

/* ── HEADER ────────────────────────────────────────────────────────────── */

.hdr{position:sticky;inset-block-start:0;z-index:80;
  background:rgb(8 9 10/.55);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border-block-end:1px solid rgb(255 255 255/.055);
  transition:background var(--t-state) var(--e-out),
             box-shadow var(--t-state) var(--e-out)}
.hdr.stuck{background:rgb(8 9 10/.86);box-shadow:0 1px 0 rgb(255 255 255/.06)}
.hdr__in{display:flex;align-items:center;gap:8px;height:66px}

.logo{display:flex;align-items:center;gap:9px;
  font-weight:var(--w-reg);font-size:19px;letter-spacing:-.03em;color:var(--on-ink)}
.logo i{inline-size:22px;block-size:22px;border-radius:6px;background:var(--brand);
  display:grid;place-items:center;font-style:normal;font-size:12px;
  color:var(--brand-ink);font-weight:700}

.nav{display:flex;gap:2px;margin-inline-start:16px}
.nav a{padding:8px 10px;border-radius:8px;font-size:14px;font-weight:var(--w-thin);
  color:var(--on-ink-mid);
  transition:color var(--t-micro) var(--e-out),background var(--t-micro) var(--e-out)}
.nav a:hover{color:var(--on-ink);background:rgb(255 255 255/.05)}
.nav a[aria-current]{color:var(--on-ink)}

.hdr__e{margin-inline-start:auto;display:flex;gap:10px;align-items:center}

/* the signature. one control, doing the thing nobody else can do. */
.dir{font:var(--w-med) 12px/1 var(--mono);letter-spacing:.08em;
  color:var(--on-ink-mid);background:rgb(255 255 255/.05);
  backdrop-filter:blur(12px);
  border:1px solid var(--rule-ink-2);border-radius:100px;padding:7px 13px;
  cursor:pointer;
  transition:border-color var(--t-micro) var(--e-out),color var(--t-micro) var(--e-out)}
.dir:hover{border-color:var(--brand);color:var(--on-ink)}
.dir b{font-family:var(--arab);font-size:13px;font-weight:var(--w-reg)}

/* ── MEDIA ─────────────────────────────────────────────────────────────── */
/* Never browser chrome. Never tilted. Never a 3D mockup scene.
   Dark UI on a dark ground needs the inset hairline or it floats unmoored. */

.shot{border:1px solid rgb(255 255 255/.10);border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.08), 0 26px 60px -26px rgb(0 0 0/.7)}
.shot img{width:100%;object-fit:cover;object-position:top center}
.g-parchment .shot,.g-ivory .shot{
  border-color:rgb(20 16 8/.10);
  box-shadow:0 20px 48px -26px rgb(20 16 8/.28)}

.bleed .shot{border-radius:0;border-inline:0}
.bleed img{width:100%;object-fit:cover;object-position:top center;max-height:74vh}

/* On a phone a 3:1 admin screenshot scaled to 390px is mush. It scrolls
   instead — the same rule tables follow. */
@media(max-width:768px){
  .bleed{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .bleed img{min-inline-size:880px;width:auto}
}

/* caption offset one column from its media */
.figrow{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  margin-block-start:18px}
.figrow .cap{grid-column:2 / span 6}
@media(max-width:768px){.figrow .cap{grid-column:1 / -1}}

/* ── SEQUENCE (T4) ─────────────────────────────────────────────────────── */
/* Hairline between, no cards. Numbers only because these stages are
   genuinely ordered in time. */

.seq{margin-block-start:clamp(40px,5vw,64px);border-block-start:1px solid var(--rule)}
.seq li{display:grid;grid-template-columns:auto 4fr 7fr;gap:clamp(16px,3vw,44px);
  padding-block:clamp(26px,3vw,38px);
  border-block-end:1px solid var(--rule);align-items:baseline}
.seq__n{font:var(--w-med) 12px/1 var(--mono);letter-spacing:.14em;
  color:var(--accent);padding-block-start:6px}
.seq__t{font-size:var(--fs-h3);letter-spacing:var(--tr-h3);
  font-weight:var(--w-reg);color:var(--fg);line-height:1.3}
.seq__b{color:var(--fg-mid);max-width:56ch;text-wrap:pretty}
.seq__b em{font-style:normal;color:var(--fg)}
@media(max-width:768px){
  .seq li{grid-template-columns:auto 1fr;gap:14px 18px}
  .seq__b{grid-column:2}
}

/* ── DATA CALLOUT (T5) ─────────────────────────────────────────────────── */
/* One number. Never four in a row. */

.callout{display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(28px,5vw,72px);align-items:end}
.callout__r{border-block-start:1px solid var(--rule);padding-block-start:20px}
@media(max-width:768px){.callout{grid-template-columns:1fr}}

/* placeholder state — this is a build artefact, not publishable copy.
   Replace when the aimer.ma figure arrives. */
.stat--pending{color:var(--fg-low);opacity:.5}
.pending{display:inline-flex;align-items:center;gap:8px;margin-block-start:14px;
  font:var(--w-med) 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-low);border:1px dashed var(--rule-2);border-radius:100px;padding:7px 12px}

/* ── PULL QUOTE (T8) ───────────────────────────────────────────────────── */
/* Maximum one per page. Hanging punctuation. Indented from column 3. */

.pull{grid-column:3 / span 8;
  font:var(--w-reg) clamp(26px,3.4vw,42px)/1.24 var(--serif);
  letter-spacing:-.018em;color:var(--fg);
  hanging-punctuation:first;text-indent:-.42em;text-wrap:balance}
.pull__a{display:block;margin-block-start:22px;text-indent:0;
  font:var(--w-med) 12px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-low)}
@media(max-width:768px){.pull{grid-column:1 / -1}}

/* marginalia — a note in the outer column beside prose */
.marg{grid-column:11 / span 2;font-size:13.5px;line-height:1.55;color:var(--fg-low);
  border-inline-start:1px solid var(--rule);padding-inline-start:14px}
@media(max-width:1024px){.marg{grid-column:1 / span 6;border-inline-start:0;
  padding-inline-start:0;border-block-start:1px solid var(--rule);padding-block-start:12px;
  margin-block-start:28px}}

/* ── LIST ──────────────────────────────────────────────────────────────── */

.bul{margin-block-start:24px;display:grid;gap:11px}
.bul li{padding-inline-start:22px;position:relative;color:var(--fg-mid);font-size:15.5px}
.bul li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:9px;
  inline-size:7px;block-size:7px;border-radius:2px;background:var(--accent)}
.bul b{color:var(--fg);font-weight:var(--w-med)}

/* ── FACT LIST ─────────────────────────────────────────────────────────── */
/* Hairline rows, not cards. Cards are for browsable sets. */

.facts{border-block-start:1px solid var(--rule);margin-block-start:6px}
.facts > div{padding-block:18px;border-block-end:1px solid var(--rule)}
.facts dt{font:var(--w-med) 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-low)}
.facts dd{margin:0;margin-block-start:8px;font-size:15.5px;color:var(--fg-mid);
  max-width:38ch;text-wrap:pretty}

/* ── TABLE ─────────────────────────────────────────────────────────────── */
/* Hairline rows, mono numbers, tabular. No zebra. Never reflows to cards. */

.tblwrap{overflow-x:auto;margin-block-start:32px}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-inline-size:520px}
.tbl th,.tbl td{padding:14px 16px;text-align:start;border-block-end:1px solid var(--rule)}
.tbl thead th{font:var(--w-med) 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-low)}
.tbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:end}
.tbl tr.us td,.tbl tr.us th{background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-block-end-color:var(--accent);font-weight:var(--w-med)}
.tbl tr.us td.n{color:var(--accent)}
.src{font-size:13px;color:var(--fg-low);margin-block-start:14px;max-width:60ch}

/* ── FOOTER ────────────────────────────────────────────────────────────── */

.ftr{border-block-start:1px solid var(--rule-ink);padding-block:52px 32px;
  background:var(--ink);color:var(--on-ink);
  --fg:var(--on-ink);--fg-mid:var(--on-ink-mid);--fg-low:var(--on-ink-low);
  --rule:var(--rule-ink);--accent:var(--brand)}
.ftr__c{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px}
.ftr h4{font:var(--w-med) 11px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-low);margin-block-end:13px}
.ftr li{padding-block:5px}
.ftr li a{font-size:14.5px;color:var(--fg-mid);
  transition:color var(--t-micro) var(--e-out)}
.ftr li a:hover{color:var(--accent)}
.ftr__b{margin-block-start:36px;padding-block-start:20px;
  border-block-start:1px solid var(--rule);
  display:flex;gap:12px 24px;flex-wrap:wrap;font-size:13.5px;color:var(--fg-low)}

@media(max-width:960px){
  .nav,.hdr__e .btn--s{display:none}
  .ftr__c{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:560px){
  .ftr__c{grid-template-columns:1fr}
}

/* ── INDEX (T9) ────────────────────────────────────────────────────────── */
/* Dense, small type, hairline column heads. Extends past the container —
   at least one element per page has to, or the page reads as a template. */

.idx{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(24px,3vw,44px);margin-block-start:clamp(40px,5vw,64px);
  margin-inline:clamp(0px,-4vw,-40px);
  border-block-start:1px solid var(--rule);padding-block-start:26px}
.idx__c h4{font:var(--w-med) 11px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-low);margin-block-end:16px}
.idx__c li{padding-block:7px;font-size:15px;color:var(--fg-mid);
  border-block-end:1px solid var(--rule);text-wrap:pretty}
.idx__c li:last-child{border-block-end:0}

/* ── BROWSE RAIL (T7) ──────────────────────────────────────────────────── */
/* Horizontal scroll. Stays horizontal on mobile — it's the most
   mobile-native pattern available and reflowing it wastes it. */

.rail{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-inline:max(24px,calc((100vw - 1240px)/2 + 24px));
  /* snap must respect the start padding, or the rail opens pre-scrolled */
  scroll-padding-inline-start:max(24px,calc((100vw - 1240px)/2 + 24px));
  padding-block:clamp(32px,4vw,52px) 8px;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{height:0}
.rail__i{flex:none;inline-size:min(268px,72vw);scroll-snap-align:start;
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:22px 20px 24px;
  transition:border-color var(--t-micro) var(--e-out),
             transform var(--t-micro) var(--e-out)}
.rail__i:hover{border-color:var(--rule-2);transform:translateY(-3px)}
.rail__i .h3{color:var(--fg)}
.rail__i .cap{margin-block-start:8px}

/* unnumbered sequence — for sets that are ordered in the reading, not in time */
.seq--plain li{grid-template-columns:auto 4fr 7fr}
.seq--plain .seq__n{inline-size:0}
@media(max-width:768px){
  .seq--plain li{grid-template-columns:1fr}
  .seq--plain .seq__b{grid-column:1}
}

/* a table can be the container break */
.r .tblwrap{margin-inline:clamp(0px,-3vw,-32px)}

/* Language switcher (.lang) styles live in tokens.css — the home page loads
   only tokens.css, so the switcher must be styled there to render everywhere. */