/* Shheletar — Methodology page (kit-local). Tokens from ds/styles.css.
   Civic flow diagrams: ledger nodes, an independence test, a sticky OR gate.
   Built to read like a public method statement, not a marketing explainer. */

/* ============================================================
   PAGE HERO
   ============================================================ */
.meth-hero{ padding:var(--s-8) 0; border-bottom:var(--bw-hair) solid var(--border); background:var(--paper-deep); position:relative; overflow:hidden; }
.meth-hero__grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--s-8); align-items:center; }
.meth-hero__title{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:clamp(2.4rem,4vw,3.4rem); line-height:1.05; letter-spacing:-.025em; margin:var(--s-4) 0 var(--s-4); color:var(--ink); text-wrap:balance; }
.meth-hero__title b{ color:var(--green); }
.meth-hero__lede{ font-family:var(--font-serif); font-size:var(--t-lede); line-height:1.45; color:var(--ink-soft); max-width:46ch; margin:0; text-wrap:pretty; }
.meth-hero__aside{ position:relative; }

/* the two governing questions, as a small ledger */
.qcard{ background:var(--paper-panel); border:var(--bw-hair) solid var(--border-strong); border-top:4px solid var(--green); border-radius:var(--r-md); box-shadow:var(--shadow-md); overflow:hidden; }
.qcard__row{ display:flex; gap:var(--s-4); padding:var(--s-5); align-items:flex-start; }
.qcard__row + .qcard__row{ border-top:var(--bw-hair) solid var(--rule); }
.qcard__n{ font-family:var(--font-mono); font-weight:var(--w-bold); font-size:1.6rem; line-height:1; color:var(--green-bright); flex:none; width:1.4em; }
.qcard__q{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h4); color:var(--ink); margin:0 0 4px; letter-spacing:-.01em; }
.qcard__sub{ font-family:var(--font-serif); font-size:var(--t-small); color:var(--ink-soft); margin:0; line-height:1.45; }
.qcard__sub b{ color:var(--green-bright); font-family:var(--font-mono); font-size:var(--t-caption); letter-spacing:.04em; }
.qcard__foot{ padding:var(--s-3) var(--s-5); background:var(--paper-deep); border-top:var(--bw-rule) solid var(--ink); font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

/* ============================================================
   PROCESS SECTION SCAFFOLD
   ============================================================ */
.proc{ padding:var(--s-9) 0; }
.proc--sunk{ background:var(--paper-deep); border-top:var(--bw-hair) solid var(--border); border-bottom:var(--bw-hair) solid var(--border); }
.proc__head{ max-width:60ch; margin-bottom:var(--s-7); }
.proc__index{ font-family:var(--font-mono); font-weight:var(--w-bold); font-size:var(--t-h3); color:var(--green-bright); letter-spacing:.02em; }
.proc__title{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h2); line-height:1.1; letter-spacing:-.02em; margin:var(--s-2) 0 var(--s-3); color:var(--ink); text-wrap:balance; }
.proc__intro{ font-family:var(--font-serif); font-size:var(--t-body); color:var(--ink-soft); line-height:1.55; margin:0; text-wrap:pretty; }

/* ============================================================
   FLOW — centered spine of stages
   ============================================================ */
.flow{ max-width:860px; margin:0 auto; }
.flow__stage{ position:relative; }
.flow__label{ font-family:var(--font-mono); font-size:10px; font-weight:var(--w-semibold); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s-3); display:flex; align-items:center; gap:var(--s-3); }
.flow__label::after{ content:""; flex:1; height:1px; background:var(--paper-edge); }

/* connector between stages */
.flow__link{ display:flex; flex-direction:column; align-items:center; padding:var(--s-3) 0; gap:2px; }
.flow__link i{ width:var(--bw-rule); height:18px; background:var(--paper-edge-2); display:block; }
.flow__link svg{ color:var(--ink-faint); }
.flow__link span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); background:var(--paper); padding:2px 8px; border:var(--bw-hair) solid var(--border); border-radius:99px; }
.proc--sunk .flow__link span{ background:var(--paper-deep); }

/* node — a record panel */
.node{ background:var(--paper-panel); border:var(--bw-hair) solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-sm); }
.node__pad{ padding:var(--s-5); }
.node--inset{ background:var(--paper-deep); box-shadow:none; }

/* source chips that converge into the night's record */
.chips{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3); }
.chip{ display:flex; gap:var(--s-3); align-items:flex-start; padding:var(--s-3) var(--s-4); background:var(--paper-panel); border:var(--bw-hair) solid var(--border-strong); border-left:3px solid var(--sky); border-radius:var(--r-sm); }
.chip--feed{ border-left-color:var(--amber); }
.chip--receiver{ border-left-color:var(--green); }
.chip--indep{ border-left-color:var(--green-bright); }
.chip__ic{ color:var(--ink-faint); flex:none; margin-top:1px; }
.chip__b{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.chip__name{ font-family:var(--font-mono); font-size:var(--t-caption); font-weight:var(--w-semibold); letter-spacing:.02em; color:var(--ink); }
.chip__role{ font-family:var(--font-serif); font-size:var(--t-caption); color:var(--ink-faint); line-height:1.35; }

/* status node header */
.statline{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; }
.statline__l{ display:flex; flex-direction:column; gap:4px; }
.statline__t{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h4); color:var(--ink); letter-spacing:-.01em; }
.statline__d{ font-family:var(--font-serif); font-size:var(--t-small); color:var(--ink-soft); margin:0; max-width:52ch; line-height:1.45; }

/* the independence test — the centrepiece */
.indep{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:var(--bw-hair) solid var(--rule); margin-top:var(--s-4); }
.indep__col{ padding:var(--s-5) var(--s-5) var(--s-5) 0; }
.indep__col + .indep__col{ padding:var(--s-5) 0 var(--s-5) var(--s-5); border-left:var(--bw-hair) solid var(--rule); }
.indep__tag{ font-family:var(--font-mono); font-size:10px; font-weight:var(--w-semibold); letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s-3); display:inline-flex; align-items:center; gap:6px; }
.indep__tag--no{ color:var(--ink-faint); }
.indep__tag--yes{ color:var(--green-bright); }
.indep__src{ display:flex; align-items:center; gap:var(--s-3); padding:var(--s-2) 0; font-family:var(--font-mono); font-size:var(--t-caption); }
.indep__src b{ color:var(--ink); font-weight:var(--w-semibold); }
.indep__verdict{ font-family:var(--font-serif); font-size:var(--t-small); color:var(--ink-soft); margin:var(--s-3) 0 0; line-height:1.45; }
.indep__verdict.is-no b{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--ink-ghost); }
.indep__verdict.is-yes b{ color:var(--green-bright); }
.mk-x{ color:var(--ink-ghost); }
.mk-tick{ color:var(--green-bright); }

/* branch — two outcomes side by side */
.branch{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.outcome{ border:var(--bw-hair) solid var(--border-strong); border-top:4px solid var(--ink-faint); border-radius:var(--r-md); background:var(--paper-panel); padding:var(--s-5); box-shadow:var(--shadow-sm); }
.outcome--ok{ border-top-color:var(--green-bright); background:color-mix(in srgb,var(--green-tint) 36%,var(--paper-panel)); }
.outcome--hold{ border-top-color:var(--amber); background:color-mix(in srgb,var(--amber-tint) 40%,var(--paper-panel)); }
.outcome--flag{ border-top-color:var(--stamp); background:color-mix(in srgb,var(--rust-tint) 40%,var(--paper-panel)); }
.outcome__head{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-3); }
.outcome__t{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h4); color:var(--ink); letter-spacing:-.01em; }
.outcome__d{ font-family:var(--font-serif); font-size:var(--t-small); color:var(--ink-soft); margin:0; line-height:1.5; }
.outcome__list{ list-style:none; margin:var(--s-3) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--s-2); }
.outcome__list li{ font-family:var(--font-serif); font-size:var(--t-small); color:var(--ink-soft); padding-left:var(--s-4); position:relative; line-height:1.4; }
.outcome__list li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:1px; }
.outcome--ok .outcome__list li::before,.outcome--hold .outcome__list li::before{ background:var(--green-bright); }
.outcome--flag .outcome__list li::before{ background:var(--stamp); }

/* status badge chips (provisional / confirmed / exempt / violation) */
.tagchip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:var(--t-caption); font-weight:var(--w-semibold); letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:99px; border:var(--bw-hair) solid transparent; }
.tagchip i{ width:8px; height:8px; border-radius:99px; flex:none; }
.tagchip--prov{ color:var(--amber-deep); background:var(--amber-tint); border-color:color-mix(in srgb,var(--amber) 40%,transparent); }
.tagchip--prov i{ background:var(--amber-deep); }
.tagchip--conf{ color:var(--green-bright); background:var(--green-tint); border-color:var(--green-line); }
.tagchip--conf i{ background:var(--green-bright); }
.tagchip--flag{ color:var(--stamp); background:var(--rust-tint); border-color:color-mix(in srgb,var(--stamp) 34%,transparent); }
.tagchip--flag i{ background:var(--stamp); }

/* ============================================================
   PROCESS 2 — exemption tests
   ============================================================ */
.tests{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); }
.test{ background:var(--paper-panel); border:var(--bw-hair) solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.test__head{ padding:var(--s-4) var(--s-5); border-bottom:var(--bw-rule) solid var(--ink); display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-3); }
.test__n{ font-family:var(--font-mono); font-size:10px; font-weight:var(--w-bold); letter-spacing:.16em; text-transform:uppercase; color:var(--green-bright); }
.test__role{ font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.test__t{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h4); color:var(--ink); margin:0; padding:var(--s-4) var(--s-5) 0; letter-spacing:-.01em; }
.test__d{ font-family:var(--font-serif); font-size:var(--t-small); color:var(--ink-soft); margin:6px 0 0; padding:0 var(--s-5); line-height:1.45; }
.test__pat{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:var(--s-4) var(--s-5) var(--s-2); }
.codes{ display:flex; flex-wrap:wrap; gap:var(--s-2); padding:0 var(--s-5) var(--s-5); }
.code{ font-family:var(--font-mono); font-size:var(--t-caption); font-weight:var(--w-medium); letter-spacing:.02em; color:var(--ink); background:var(--paper-deep); border:var(--bw-hair) solid var(--border-strong); border-radius:var(--r-sm); padding:4px 9px; }
.test__eg{ display:flex; align-items:center; gap:var(--s-3); margin:0; padding:var(--s-3) var(--s-5); background:var(--paper-deep); border-top:var(--bw-hair) solid var(--rule); font-family:var(--font-mono); font-size:var(--t-caption); color:var(--ink-soft); }
.test__eg b{ color:var(--ink); }
.test__eg .mk-tick{ margin-left:auto; }

/* the OR gate / sticky rule */
.gate{ max-width:860px; margin:var(--s-6) auto 0; background:var(--green); color:var(--paper); border-radius:var(--r-md); padding:var(--s-5) var(--s-6); display:flex; gap:var(--s-5); align-items:center; box-shadow:var(--shadow-md); }
.gate__op{ font-family:var(--font-mono); font-weight:var(--w-bold); font-size:1.9rem; letter-spacing:.1em; color:var(--green-line); flex:none; }
.gate__t{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h4); color:var(--paper); margin:0 0 4px; }
.gate__d{ font-family:var(--font-serif); font-size:var(--t-small); color:var(--green-line); margin:0; line-height:1.5; max-width:74ch; }
.gate__d b{ color:var(--paper); }

/* ============================================================
   PRINCIPLES + SOURCES
   ============================================================ */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.principle{ border-top:var(--bw-strong) solid var(--green); padding-top:var(--s-4); }
.principle__k{ font-family:var(--font-mono); font-size:10px; font-weight:var(--w-semibold); letter-spacing:.14em; text-transform:uppercase; color:var(--green-bright); }
.principle__t{ font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--t-h4); color:var(--ink); margin:var(--s-2) 0 var(--s-2); letter-spacing:-.01em; }
.principle__d{ font-family:var(--font-serif); font-size:var(--t-small); color:var(--ink-soft); line-height:1.5; margin:0; text-wrap:pretty; }

.srctable{ width:100%; border-collapse:collapse; font-family:var(--font-mono); margin-top:var(--s-5); }
.srctable th{ text-align:left; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); padding:0 var(--s-4) var(--s-3); border-bottom:var(--bw-rule) solid var(--ink); }
.srctable td{ padding:var(--s-3) var(--s-4); border-bottom:var(--bw-hair) solid var(--rule); font-size:var(--t-caption); color:var(--ink-soft); vertical-align:top; }
.srctable tr:nth-child(even) td{ background:color-mix(in srgb,var(--paper-deep) 50%,transparent); }
.srctable .src__name{ color:var(--ink); font-weight:var(--w-semibold); white-space:nowrap; }
.srctable .src__use{ font-family:var(--font-serif); font-size:var(--t-small); }
.feedtag{ display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.feedtag i{ width:7px; height:7px; border-radius:99px; }
.feedtag--feed{ color:var(--amber-deep); background:var(--amber-tint); }
.feedtag--feed i{ background:var(--amber-deep); }
.feedtag--indep{ color:var(--green-bright); background:var(--green-tint); }
.feedtag--indep i{ background:var(--green-bright); }
.feedtag--prim{ color:var(--ink-soft); background:var(--paper-deep); }
.feedtag--prim i{ background:var(--ink-faint); }

.honesty{ margin-top:var(--s-7); display:flex; gap:var(--s-4); align-items:flex-start; padding:var(--s-5) var(--s-6); background:var(--paper-panel); border:var(--bw-hair) solid var(--border-strong); border-left:var(--bw-strong) solid var(--amber); border-radius:var(--r-md); }
.honesty svg{ color:var(--amber-deep); flex:none; margin-top:2px; }
.honesty p{ margin:0; font-family:var(--font-serif); font-size:var(--t-small); color:var(--ink-soft); line-height:1.55; max-width:84ch; }
.honesty p + p{ margin-top:var(--s-3); }
.honesty b{ color:var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .meth-hero__grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .tests,.branch{ grid-template-columns:1fr; }
  .principles{ grid-template-columns:1fr; gap:var(--s-6); }
}
@media(max-width:720px){
  .meth-hero{ padding:var(--s-7) 0; }
  .proc{ padding:var(--s-8) 0; }
  .chips{ grid-template-columns:1fr; }
  .indep{ grid-template-columns:1fr; }
  .indep__col{ padding:var(--s-4) 0; }
  .indep__col + .indep__col{ padding:var(--s-4) 0; border-left:0; border-top:var(--bw-hair) solid var(--rule); }
  .gate{ flex-direction:column; align-items:flex-start; gap:var(--s-3); }
  .srctable thead{ display:none; }
  .srctable,.srctable tbody,.srctable tr,.srctable td{ display:block; width:100%; }
  .srctable tr{ border:var(--bw-hair) solid var(--border-strong); border-radius:var(--r-sm); margin-bottom:var(--s-3); padding:var(--s-2); }
  .srctable td{ border-bottom:0; padding:4px var(--s-3); }
  .srctable tr:nth-child(even) td{ background:transparent; }
}

/* ============================================================
   ICON SIZING — sprite icons render at 1em; pin explicit sizes
   and colours per context (mirrors the design's size props).
   ============================================================ */
.chip .icon{ width:18px; height:18px; color:var(--ink-faint); flex:none; margin-top:1px; }
.flow__link .icon{ width:16px; height:16px; color:var(--ink-faint); }
.indep__tag .icon{ width:13px; height:13px; }
.gate__op .icon{ width:26px; height:26px; color:var(--green-line); }
.honesty .icon{ width:20px; height:20px; color:var(--amber-deep); flex:none; margin-top:2px; }
.test__eg .icon{ width:15px; height:15px; color:var(--green-bright); margin-left:auto; }