/* ═══════════════════════════════════════════════════════════════════════
   Field Notes — the article surface.

   Deliberately not styles.css. The chapter app is a WebGL single page that
   locks scrolling and paints a city; an article is the opposite of that. It
   needs to be crawlable, printable, readable at 360px, and to render before
   a single script runs — because the strongest correlate of being cited by
   an answer engine is simply that the page can be fetched and understood
   (URL accessibility scored 9.5/10 in the 2026 citation-factor data, ahead
   of every content signal). So: no JavaScript on these pages at all.

   Vendored font, vendored everything. Zero external requests, same rule as
   the rest of the site.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'InterVariable';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root{
  --bg:#000000;
  --panel:#111112;
  --ink:#f5f5f7;
  --mut:#c6c6cc;
  --dim:#8a8a90;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --font:'InterVariable',-apple-system,'SF Pro Display','Helvetica Neue',Arial,sans-serif;
  --measure:34rem;
  --pad:clamp(1.15rem,5vw,2rem);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.62;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto}
::selection{background:#f5f5f7;color:#000}

a{color:inherit;text-decoration:underline;text-underline-offset:.18em;
  text-decoration-color:var(--line-2);text-decoration-thickness:1px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid #f5f5f7;outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:#f5f5f7;color:#000;
  padding:.7rem 1rem;border-radius:0 0 10px 0;z-index:99;font-weight:600}
.skip:focus{left:0}
/* Visually hidden, still read out. The shell's brand link and one table
   header used this class for two days before the rule existed in THIS
   stylesheet - it lived only in styles.css, which the generated pages do not
   load - so every page showed the word "Noxia" beside the wordmark. Same
   rule as styles.css, and test/pages.js now fails if a page uses a class
   that neither stylesheet it links defines. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── shell ─────────────────────────────────────────────────────────── */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}
.site-bar{border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(0,0,0,.86);backdrop-filter:blur(14px);z-index:10}
.site-bar .wrap{max-width:52rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;min-height:56px}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:640;letter-spacing:-.02em;font-size:15px;padding:.5rem .1rem}
.brand-mark{display:inline-flex;align-items:center}
.brand svg{width:74px;height:auto;display:block}
.bar-cta{font-size:13.5px;color:var(--mut);text-decoration:none;
  border:1px solid var(--line-2);border-radius:999px;padding:.5rem .95rem;
  min-height:34px;display:inline-flex;align-items:center;white-space:nowrap}
.bar-cta:hover{color:var(--ink);border-color:#f5f5f7}
/* Three destinations rather than one. N3-13 wants no orphan pages, and the
   cheapest way to guarantee it is to put the links in the shell every
   generated page shares, where they cannot be forgotten on a new page. */
.bar-nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;
  justify-content:flex-end}
.bar-nav a{font-size:13px;color:var(--mut);text-decoration:none;
  border-radius:999px;padding:.5rem .7rem;min-height:34px;
  display:inline-flex;align-items:center;white-space:nowrap;
  border:1px solid transparent}
.bar-nav a:hover{color:var(--ink);border-color:var(--line-2)}
@media(max-width:520px){
  .site-bar .wrap{flex-wrap:wrap;gap:.4rem;padding-top:.5rem;padding-bottom:.5rem}
  .bar-nav{width:100%;justify-content:flex-start;margin-left:-.7rem}
  .bar-nav a{padding:.45rem .6rem;font-size:12.5px}
}

/* ── breadcrumbs ───────────────────────────────────────────────────── */
.crumbs{padding-top:clamp(1.6rem,4vw,2.4rem);font-size:12.5px;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
/* 20px tall before; breadcrumbs are navigation, not words in a sentence,
   so the inline-link exception to the 24px target minimum does not apply. */
.crumbs a{color:var(--mut);text-decoration:none;display:inline-block;
  padding-block:.25rem;min-height:24px;line-height:1.2}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs span[aria-current]{color:var(--dim)}
.crumbs+.note-head{padding-top:clamp(1rem,3vw,1.6rem)}

/* ── article head ──────────────────────────────────────────────────── */
.note-head{padding:clamp(2.4rem,7vw,4.4rem) 0 0}
.eyebrow{font-size:11.5px;font-weight:660;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
h1{font-size:clamp(1.85rem,5.6vw,3rem);line-height:1.08;font-weight:680;
  letter-spacing:-.035em;margin:.7rem 0 0;text-wrap:balance}
.standfirst{font-size:clamp(1.02rem,2.4vw,1.2rem);color:var(--mut);
  margin-top:1rem;line-height:1.5;text-wrap:pretty}
.note-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1.4rem;
  padding-bottom:1.6rem;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--dim)}

/* ── the short answer — first thing after the head, on purpose ─────── */
.answer{border-left:2px solid #f5f5f7;background:var(--panel);
  padding:1.15rem 1.25rem;border-radius:0 14px 14px 0;margin:2rem 0}
.answer h2{font-size:11.5px;font-weight:660;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.55rem}
.answer p{font-size:1.05rem;line-height:1.55;margin:0}

/* ── prose ─────────────────────────────────────────────────────────── */
.note-body>*+*{margin-top:1.15rem}
.note-body h2{font-size:clamp(1.3rem,3.4vw,1.65rem);font-weight:660;
  letter-spacing:-.028em;line-height:1.2;margin-top:2.9rem;text-wrap:balance}
.note-body h3{font-size:1.06rem;font-weight:640;letter-spacing:-.02em;
  margin-top:1.9rem}
.note-body p{text-wrap:pretty}
.note-body strong{font-weight:640}
.note-body ul,.note-body ol{padding-left:1.15rem}
.note-body li+li{margin-top:.5rem}
.note-body li::marker{color:var(--dim)}
blockquote{border-left:2px solid var(--line-2);padding-left:1.1rem;
  color:var(--mut);font-size:1.05rem}

.pull{font-size:clamp(1.15rem,3.2vw,1.5rem);line-height:1.32;font-weight:620;
  letter-spacing:-.028em;color:var(--ink);margin:2.4rem 0;padding:1.4rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-wrap:balance}

/* ── tables ────────────────────────────────────────────────────────── */
.t-wrap{overflow-x:auto;margin:1.7rem 0;border:1px solid var(--line);
  border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:26rem}
th,td{text-align:left;padding:.72rem .85rem;border-bottom:1px solid var(--line);
  vertical-align:top}
thead th{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:660;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td strong{font-weight:640}

/* ── figures ───────────────────────────────────────────────────────── */
figure{margin:2.2rem 0}
figure svg{display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:16px;background:var(--panel)}
figcaption{font-size:13px;color:var(--mut);margin-top:.7rem;line-height:1.45}
figcaption b{color:var(--ink);font-weight:640}
figcaption cite{display:block;font-style:normal;font-size:11.5px;
  color:var(--dim);margin-top:.3rem}

/* Diagrams and tables break out past the reading measure. A 34rem column is
   right for prose and wrong for a five-step chain: squeezing the diagram to
   the text width is how charts end up unreadable on the device most people
   read on second. */
@media(min-width:860px){
  figure,.t-wrap{width:calc(100% + 12rem);margin-left:-6rem}
  /* and so do the related cards, for the same reason: at the reading
     measure, two of them put a headline on five lines and left a third
     card sitting alone in an empty cell. Out here they are a tidy row. */
  .related{width:calc(100% + 12rem);margin-left:-6rem}
}

/* ── sources: N1-12, every figure carries one ──────────────────────── */
.sources{margin-top:3.2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.sources h2{font-size:11.5px;font-weight:660;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.9rem}
.sources ol{padding-left:1.15rem;font-size:13.5px;color:var(--mut)}
.sources li+li{margin-top:.55rem}
.sources .weight{color:var(--dim)}
/* the re-check cadence, per source. A `checked` date is a claim about the
   past; a cadence is a commitment about the future, and the second is the
   one a reader deciding whether to trust the number actually wants. */
.sources .cadence{display:inline-block;margin-left:.35rem;font-size:11px;
  letter-spacing:.02em;color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:.05rem .45rem;white-space:nowrap;
  vertical-align:.06em}
/* 12.5px of dim grey, set solid, was the least readable element on the
   site - and it is the paragraph that carries the dates the whole argument
   rests on. Same hierarchy, one size up and breathing. */
.fresh{margin-top:1.1rem;font-size:13.5px;line-height:1.68;color:var(--mut);
  max-width:var(--measure)}
.fresh b{color:var(--ink);font-weight:640}
.fresh a{color:var(--mut);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:.5px}
.fresh a:hover{color:var(--ink)}

/* ── the public register ───────────────────────────────────────────── */
/* Five columns of dated evidence want more room than a reading measure. The
   prose keeps the measure; the tables get the width. */
.page-register .wrap{max-width:44rem}
.page-register .note-head,.page-register .answer,
.page-register .note-body,.page-register .faq,
.page-register .end-cta{max-width:var(--measure);margin-left:auto;margin-right:auto}
@media(min-width:1180px){
  .page-register .t-wrap{width:calc(100% + 20rem);margin-left:-10rem}
}
td.nw,th.nw{white-space:nowrap}
table.reg{font-size:13px}
table.reg td.src{min-width:22rem;color:var(--mut)}
table.reg td:first-child{min-width:11rem}
table.reg a{color:var(--ink)}
.t-wrap table b{color:var(--ink);font-weight:640}

/* ── faq ───────────────────────────────────────────────────────────── */
/* ── /work: the systems list ─────────────────────────────────────────
   Shipped for two days with no rules at all - eight bulleted <li>s and a
   status as bare text - because the classes were written into render.mjs
   and never into this file. test/pages.js now checks that every class a
   generated page uses has a rule in the stylesheet it links. */
.sys-list{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:.7rem}
.sys{border:1px solid var(--line);border-radius:14px;padding:1rem 1.15rem;background:var(--panel)}
.sys-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.sys-head h3{font-size:1.08rem;font-weight:660;letter-spacing:-.02em;margin:0}
.sys-head h3 a{color:var(--ink);text-decoration:none}
.sys-head h3 a:hover{text-decoration:underline}
.sys-status{font-size:11px;font-weight:660;letter-spacing:.12em;text-transform:uppercase;
  padding:.3rem .55rem;border-radius:999px;border:1px solid var(--line-2);color:var(--mut);white-space:nowrap}
.s-live{color:var(--ink);border-color:var(--ink)}
.s-private-beta{color:var(--ink)}
.s-in-build{color:var(--dim)}
.sys>p{margin:.55rem 0 0;font-size:.98rem;line-height:1.5;color:var(--mut)}
.sys .sys-meta{font-size:.82rem;color:var(--dim);font-variant-numeric:tabular-nums}
.sys .sys-note{font-size:.9rem;color:var(--mut);border-top:1px solid var(--line);padding-top:.55rem;margin-top:.7rem}

.faq{margin-top:3rem}
.faq h2{font-size:clamp(1.3rem,3.4vw,1.65rem);font-weight:660;
  letter-spacing:-.028em;margin-bottom:1.2rem}
.faq details{border:1px solid var(--line);border-radius:14px;
  padding:.9rem 1.05rem;background:var(--panel)}
.faq details+details{margin-top:.6rem}
.faq summary{cursor:pointer;font-weight:620;list-style:none;
  min-height:24px;display:flex;align-items:center;gap:.6rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--dim);font-weight:500;
  width:1ch;flex:none}
.faq details[open] summary::before{content:'\2212'}
.faq details p{margin-top:.65rem;color:var(--mut);font-size:15px}

/* ── end matter ────────────────────────────────────────────────────── */
.end-cta{margin-top:3rem;border:1px solid var(--line);border-radius:18px;
  padding:1.5rem;background:var(--panel)}
.end-cta h2{font-size:1.2rem;font-weight:660;letter-spacing:-.025em}
.end-cta p{color:var(--mut);margin-top:.5rem;font-size:15px}
.pill{display:inline-flex;align-items:center;min-height:40px;margin-top:1rem;
  padding:.6rem 1.15rem;border-radius:999px;background:#f5f5f7;color:#000;
  font-weight:620;font-size:14.5px;text-decoration:none}
.pill:hover{background:#fff}

.note-nav{display:grid;gap:.7rem;margin:2.6rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.note-nav a{border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;
  text-decoration:none;display:block;min-height:44px}
.note-nav a:hover{border-color:var(--line-2)}
.note-nav span{display:block;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim)}
.note-nav b{display:block;font-weight:620;font-size:14.5px;margin-top:.3rem;
  letter-spacing:-.02em}

footer.site-foot{border-top:1px solid var(--line);margin-top:4rem;
  padding:1.6rem 0 3rem;font-size:12.5px;color:var(--dim)}
footer.site-foot .wrap{max-width:52rem;display:flex;flex-wrap:wrap;
  gap:.5rem 1.2rem;justify-content:space-between;align-items:center}
/* the footer nav on every generated page: 24px targets, not 12.5px text */
.foot-nav{display:inline-flex;flex-wrap:wrap;gap:0 .2rem;align-items:center}
.foot-nav a,footer.site-foot>.wrap>span>a{display:inline-flex;align-items:center;
  min-height:28px;padding:0 .25rem}
/* ── tables on a phone ────────────────────────────────────────────────
   .t-wrap scrolls sideways, which nothing told the reader. A fading edge
   says "there is more" without a scrollbar that only appears on hover. */
.t-wrap{position:relative}
.t-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:2.2rem;
  pointer-events:none;border-radius:0 14px 14px 0;
  background:linear-gradient(to right,rgba(17,17,18,0),rgba(17,17,18,.9));
  opacity:0;transition:opacity .2s}
.t-wrap.can-scroll::after{opacity:1}
.t-wrap.at-end::after{opacity:0}

/* ── index ─────────────────────────────────────────────────────────── */
.idx-head{padding:clamp(2.6rem,8vw,5rem) 0 2.2rem}
.idx-grid{display:grid;gap:.8rem;padding-bottom:1rem}
/* ── cards ─────────────────────────────────────────────────────────────
   The thumbnail is generated from the slug, so it cannot be missing and
   nobody has to choose one. It is also the reason these are cards rather
   than a list: pages combining text, structure and an image were selected
   by answer engines 156% more often than text alone, and an index of
   seventeen paragraphs was the one place on this site with no picture. */
.note-card{border:1px solid var(--line);border-radius:18px;
  text-decoration:none;display:block;background:var(--panel);overflow:hidden;
  transition:border-color .18s ease,transform .18s ease}
.note-card:hover{border-color:var(--line-2);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.note-card:hover{transform:none}}
.thumb-wrap{aspect-ratio:16/10;border-bottom:1px solid var(--line);
  background:#0a0a0b;overflow:hidden;display:block}
.thumb-wrap .thumb{display:block;width:100%;height:100%}
.note-card .card-body{padding:1.15rem 1.3rem 1.3rem}
/* N4-09: a tool says what it wants from you before you run it, on the index
   rather than after the first field. N4-13 is the stronger version of the
   same promise — the answer is always "nothing". */
.card-needs{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5}
.card-needs dt{color:var(--dim);letter-spacing:.02em;margin-top:.5rem}
.card-needs dt:first-child{margin-top:0}
.card-needs dd{color:var(--mut);margin:.15rem 0 0}
.note-card .eyebrow{color:var(--dim)}
.note-card h2{font-size:1.16rem;font-weight:650;letter-spacing:-.026em;
  line-height:1.24;margin:.55rem 0 .45rem;text-wrap:balance}
.note-card p{font-size:14.5px;color:var(--mut);line-height:1.5}
.note-card .card-meta{font-size:12px;color:var(--dim);margin-top:.8rem}
.idx-wide{max-width:52rem}
.note-card h3{font-size:1.1rem;font-weight:650;letter-spacing:-.026em;
  line-height:1.26;margin:.55rem 0 .45rem;text-wrap:balance}
.idx-note{margin-top:1.6rem;font-size:13.5px;color:var(--dim);
  line-height:1.6;max-width:var(--measure)}

/* ── related notes: N3-13, no orphan pages ─────────────────────────── */
.related{margin-top:3rem}
.related h2{font-size:11.5px;font-weight:660;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:1rem}
.related .idx-grid{display:grid;gap:.9rem}
@media(min-width:760px){.related .idx-grid{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.related .idx-grid{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
/* a related card is a signpost, not the page: smaller type, a shorter
   picture, and a standfirst clamped to three lines so the row stays level */
.related .thumb-wrap{aspect-ratio:16/7}
.related .note-card h3{font-size:.99rem;line-height:1.28;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related .note-card .card-body{padding:.95rem 1.05rem 1.1rem}
.related .note-card p{font-size:13px;line-height:1.45;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tool-line{margin:1.4rem 0}

/* ── the calculator: N2-07 ─────────────────────────────────────────────
   Deliberately plain. The credibility of a tool that can tell you not to
   buy comes from the arithmetic being legible, not from the chrome. */
.calc{margin-top:2.6rem;border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.15rem,4vw,1.75rem);background:var(--panel)}
.calc h2{font-size:1.25rem;font-weight:660;letter-spacing:-.026em}
.calc-note{margin-top:.4rem;font-size:13.5px;color:var(--dim);
  line-height:1.55;max-width:var(--measure)}
.calc-note b{color:var(--mut);font-weight:640}
.calc-grid{display:grid;gap:1.15rem;margin-top:1.4rem}
@media(min-width:680px){.calc-grid{grid-template-columns:1fr 1fr;gap:1.15rem 1.6rem}}
.calc-grid--one{margin-top:1.4rem;padding-top:1.4rem;
  border-top:1px solid var(--line)}
@media(min-width:680px){.calc-grid--one{grid-template-columns:1fr}}
.calc-row label{display:block;font-size:14px;font-weight:620;
  letter-spacing:-.012em;color:var(--ink);margin-bottom:.4rem}
.calc-row label em{font-style:normal;text-decoration:underline;
  text-underline-offset:.16em;text-decoration-thickness:1px;
  text-decoration-color:var(--line-2)}
.calc-row label .u{color:var(--dim);font-weight:500}
.calc-in{display:flex;align-items:stretch;border:1px solid var(--line-2);
  border-radius:11px;background:#000;overflow:hidden}
.calc-in:focus-within{border-color:var(--ink)}
.calc-in .pre{display:flex;align-items:center;padding:0 .1rem 0 .75rem;
  color:var(--dim);font-size:16px}
.calc-in input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);
  font:inherit;font-size:16px;font-weight:620;letter-spacing:-.01em;
  padding:.6rem .75rem;min-height:44px}
.calc-in input:focus{outline:none}
.calc-hint{margin-top:.4rem;font-size:12.5px;line-height:1.5;color:var(--dim)}
.calc-hint em{font-style:normal;color:var(--mut)}

.calc-out{margin-top:1.6rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.calc-figs{display:grid;gap:1rem}
@media(min-width:680px){.calc-figs{grid-template-columns:repeat(3,1fr)}}
.calc-fig span{display:block;font-size:12px;letter-spacing:.02em;color:var(--dim)}
.calc-fig b{display:block;font-size:clamp(1.5rem,4.6vw,2rem);font-weight:660;
  letter-spacing:-.034em;line-height:1.1;margin-top:.25rem;
  font-variant-numeric:tabular-nums}
.calc-fig i{display:block;font-style:normal;font-size:12px;color:var(--dim);
  margin-top:.2rem}
.calc-fig--hero b{color:var(--ink)}
.calc-fig:not(.calc-fig--hero) b{color:var(--mut)}

.calc-verdict{margin-top:1.4rem;font-size:15.5px;line-height:1.55;
  color:var(--mut);border-left:2px solid var(--line-2);padding-left:.95rem;
  max-width:44rem}
.calc-verdict.is-no{border-left-color:var(--ink);color:var(--ink)}
.calc-verdict.is-maybe{border-left-color:var(--mut);color:var(--mut)}
.calc-verdict.is-yes{border-left-color:var(--ink);color:var(--ink)}
.calc-sum{margin-top:1rem;font-size:13.5px;color:var(--dim);line-height:1.55}

/* ── the decision tool ─────────────────────────────────────────────── */
.q-grid{display:grid;gap:1.5rem;margin-top:1.5rem}
@media(min-width:760px){.q-grid{grid-template-columns:1fr 1fr;gap:1.6rem 2rem}}
fieldset.q{border:0;padding:0;margin:0;min-width:0}
fieldset.q legend{font-size:14.5px;font-weight:640;letter-spacing:-.014em;
  color:var(--ink);padding:0;margin-bottom:.3rem}
.q-opts{display:grid;gap:.4rem;margin-top:.7rem}
.q-opt{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  border:1px solid var(--line);border-radius:11px;padding:.6rem .8rem;
  min-height:44px;background:#000;transition:border-color .15s ease}
.q-opt:hover{border-color:var(--line-2)}
.q-opt input{appearance:none;-webkit-appearance:none;flex:none;
  width:16px;height:16px;margin-top:.16rem;border-radius:50%;
  border:1.5px solid var(--dim);background:transparent}
.q-opt input:checked{border-color:var(--ink);
  box-shadow:inset 0 0 0 3.5px #000,inset 0 0 0 9px var(--ink)}
.q-opt input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.q-opt span{font-size:14px;line-height:1.4;color:var(--mut)}
.q-opt:has(input:checked){border-color:var(--ink)}
.q-opt:has(input:checked) span{color:var(--ink)}

.dt-label{font-size:11.5px;font-weight:660;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.6rem}
.dt-because{margin:1rem 0 0 1.1rem;padding:0;font-size:13.5px;
  color:var(--dim);line-height:1.6}
.dt-because li{margin-top:.25rem}

/* ── findings lists (N4-01, N2-09, N4-02, N4-04) ───────────────────── */
.qz-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.85rem}
.qz-list li{border:1px solid var(--line);border-left:2px solid var(--ink);
  border-radius:0 12px 12px 0;padding:.9rem 1.05rem;background:#000}
.qz-list li b{display:block;font-size:15px;font-weight:640;letter-spacing:-.015em}
.qz-list li p{margin-top:.4rem;font-size:14px;line-height:1.55;color:var(--mut)}
.qz-list li a{display:inline-block;margin-top:.55rem;font-size:12.5px;color:var(--dim)}
.qz-list li a:hover{color:var(--ink)}
/* axe measured these at 3.3:1 — the .opt rule stacked opacity .7 on top of
   --dim, which computes to #66666a on the panel. Small text needs 4.5:1, so
   the opacity trick is gone and the colour carries the hierarchy instead. */
.calc-row label .req{font-weight:400;font-size:11.5px;color:var(--mut);
  letter-spacing:.02em}
.calc-row label .opt{font-weight:400;font-size:11.5px;color:var(--mut)}
.calc-row .calc-in+.calc-hint{margin-bottom:.3rem}


/* ── the checker ───────────────────────────────────────────────────────
   Monochrome, so weight does the work colour does elsewhere. Three levels,
   and the order is deliberate: the loudest treatment goes to "stopped
   counting", the next to every verdict that means *we could not tell you*,
   and the quietest to the good news. An unrecognised reference is the row
   most likely to be a real problem and the one a reader skims past, so it
   is never allowed to look calmer than the row that is fine. */
.calc-in textarea{flex:1;min-width:0;background:transparent;border:0;
  color:var(--ink);font:inherit;font-size:15px;line-height:1.55;
  padding:.7rem .85rem;resize:vertical;min-height:132px}
.calc-in textarea:focus{outline:none}
.calc-in select{flex:1;min-width:0;background:transparent;border:0;
  color:var(--ink);font:inherit;font-size:15px;padding:.7rem .85rem;
  min-height:44px;cursor:pointer}
.calc-in select:focus{outline:none}
.calc-in select option{background:#0b0b0c;color:var(--ink)}

.ck-rows{margin-top:1.4rem;border-top:1px solid var(--line)}
.ck-row{border-bottom:1px solid var(--line)}
.ck-row summary{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.5rem .8rem;padding:.85rem .2rem;cursor:pointer;min-height:44px;
  list-style:none}
.ck-row summary::-webkit-details-marker{display:none}
.ck-row summary::after{content:'+';margin-left:auto;color:var(--dim);
  font-size:15px;line-height:1}
.ck-row[open] summary::after{content:'\2212'}
.ck-row summary:hover .ck-ref{text-decoration:underline;
  text-decoration-color:var(--line-2)}

.ck-badge{flex:none;font-size:11px;font-weight:660;letter-spacing:.04em;
  border:1px solid var(--dim);border-radius:999px;padding:.24rem .6rem;
  color:var(--dim);white-space:nowrap}
/* Loudest: the citation has already stopped conferring anything. */
.ck-badge.is-no{background:var(--ink);border-color:var(--ink);color:#000}
/* Everything that means "I cannot tell you", including "not found". */
.ck-badge.is-maybe{border-color:var(--ink);color:var(--ink)}

.ck-ref{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:14px;color:var(--ink);word-break:break-word}
.ck-date{font-size:13px;color:var(--mut)}
.ck-reg{font-size:12.5px;color:var(--dim)}

.ck-body{padding:0 .2rem 1.1rem}
.ck-why{font-size:14px;line-height:1.6;color:var(--mut);
  border-left:2px solid var(--line-2);padding-left:.9rem}
.ck-note{margin-top:.8rem;font-size:13.5px;line-height:1.6;color:var(--ink);
  border-left:2px solid var(--ink);padding-left:.9rem}
.ck-steps{margin:.9rem 0 0 1.1rem;padding:0;font-size:13px;
  line-height:1.65;color:var(--dim)}
.ck-steps li{margin-top:.2rem}
/* Padded to clear the 24px target minimum: measured at 171x20 without it,
   and it is a standalone block link rather than a word inside a sentence,
   so the exception for inline links does not cover it. */
.ck-src{display:inline-block;margin-top:.75rem;padding:.3rem 0;font-size:12.5px;
  color:var(--dim)}
/* A grid item defaults to min-width:auto, so a <select> whose longest option
   is "Conformity assessment and management systems" widens its whole column
   and pushes the page sideways on a phone - 423px of content in a 390px
   viewport, measured. The fix belongs on the row, not on the control. */
.calc-row,.calc-in{min-width:0}
.calc-in select,.calc-in textarea{width:100%;max-width:100%}


/* ── target size, WCAG 2.2 2.5.8 ─────────────────────────────────────────
   Measured, not guessed: every link in the header nav and the footer sat at
   15-20px tall on all forty-three pages — 328 undersized targets across the
   site, and the same eight links every time. They are navigation, not words
   inside a sentence, so the inline exception does not cover them.

   The header nav was already fine (min-height:34px); it is the footer that
   was short. Padding rather than font-size, so nothing about the type changes:
   clickable box grows to 24px and the design does not move. The negative
   margin on the footer keeps the row from growing taller now that each link
   carries its own padding. */
.foot-nav a,.site-foot a{display:inline-block;padding-block:.35rem;
  min-height:24px;line-height:1.3}
.site-foot .wrap{margin-block:-.35rem}


/* the link out from a source entry - present only where the URL was verified */
.sources .src-link{display:inline-block;margin-left:.15rem;padding:.2rem .45rem;
  min-height:24px;font-size:12px;color:var(--ink);text-decoration:none;
  border:1px solid var(--line-2);border-radius:999px;white-space:nowrap}
.sources .src-link:hover{border-color:var(--ink)}

@media(min-width:760px){.idx-grid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){body{font-size:16px}.wrap{--pad:1.1rem}}

@media print{
  .site-bar,.note-nav,.end-cta,.skip{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  figure svg{border-color:#ccc;background:#fff}
}