:root{
  /* Surfaces and ink. A near-white warm neutral, one step calmer than the old #fbfbf9,
     so white cards read as cards without needing a heavy border. */
  --bg:#f6f7f5; --panel:#ffffff; --ink:#0f1418; --ink-2:#26303a; --dim:#5e6a75;
  --line:#e5e9ec; --line-2:#eef1f4;
  /* Accent kept green -- it is the brand of the record -- but deepened for contrast on white,
     with a soft tint and a hairline to build chips, pills and the answer callout from ONE colour. */
  --accent:#17694a; --accent-deep:#0e5136; --accent-soft:#e9f3ee; --accent-line:#d3e5da;
  --mark:#fdf2cf; --mark-line:#e6d086;
  /* the passage an answer quoted: warmer and stronger than a summary highlight, still light
     enough that body text on it stays far above the 4.5:1 minimum */
  --cited:#fbdfc0; --cited-line:#d3873a;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sh:0 1px 2px rgba(15,20,24,.04),0 10px 30px -22px rgba(15,20,24,.35);
  --sh-hi:0 2px 4px rgba(15,20,24,.05),0 18px 42px -26px rgba(15,20,24,.45);
  /* The sticky header's height, stated once because two other rules have to agree with it:
     .yearhead sticks below it, and a year jump lands clear of it. */
  --hdr:58px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
/* ONE container width for every view. The old layout ran the full bleed of the window, which on a
   laptop put the transcript at ~200 characters a line -- the single biggest reason it felt
   uncomfortable. ~880px holds a 90-character serif column inside the card padding. */
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
/* --- top bar --- */
header.top{position:sticky;top:0;z-index:20;background:rgba(246,247,245,.86);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px}
.brand{font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;min-height:44px;flex:none}
/* a small mark instead of a bare wordmark: enough identity to stop the bar reading as unstyled */
.brand::before{content:'';width:9px;height:9px;border-radius:3px;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);flex:none}
.brand span{color:var(--dim);font-weight:600}
/* No crumb pill in the header. 'Index' as a nav button restates the site the reader is already
   on, beside a wordmark that already links home, so it was removed rather than relabelled. */
/* --- the years menu --- */
.nav{display:flex;align-items:center;gap:8px;min-width:0}
.ymenu{position:relative;flex:none}
.ymenu>summary{list-style:none;cursor:pointer;font-size:12px;font-weight:650;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;display:inline-flex;align-items:center;gap:5px;min-height:32px;
  user-select:none}
.ymenu>summary::-webkit-details-marker{display:none}
.ymenu>summary .chev{font-size:9px;color:var(--dim);transition:transform .18s}
.ymenu[open]>summary{border-color:#c9d2d8}
.ymenu[open]>summary .chev{transform:rotate(180deg)}
/* Capped and internally scrollable: 12 anchors at 44px is 528px, which is taller than a phone
   viewport minus the sticky bar, and a menu whose last row cannot be reached is worse than no
   menu. 44px is the standard comfortable tap target on touch (Apple's HIG minimum); this repo
   has no layout gate of its own that checks it, so it is a choice, stated as one. */
.ymenu-body{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:186px;
  max-height:min(60vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 42px -22px rgba(15,20,24,.4);padding:6px}
.ymenu-body a{display:flex;justify-content:space-between;align-items:center;gap:12px;
  min-height:44px;padding:0 11px;border-radius:10px;font-size:14px;font-weight:620;
  color:var(--ink);text-decoration:none}
.ymenu-body a:hover,.ymenu-body a:focus-visible{background:var(--accent-soft)}
.ymenu-body a .yn{font-size:11.5px;color:var(--dim);font-weight:600}
.ymenu-body .call{border-bottom:1px solid var(--line-2);border-radius:10px 10px 0 0;
  color:var(--accent);font-weight:680}
.ymenu>summary{min-height:44px;padding-top:7px;padding-bottom:7px}
/* --- the index, grouped by year --- */
.yearhead{position:sticky;top:var(--hdr);z-index:5;display:flex;align-items:baseline;gap:9px;
  margin:20px 0 4px;padding:7px 2px;background:rgba(246,247,245,.94);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.yearhead:first-of-type{margin-top:6px}
.yearhead .y{font-weight:750;font-size:15px;letter-spacing:-.02em}
.yearhead .yc{font-size:11.5px;color:var(--dim);font-weight:600}
.yearhead .gotop{margin-left:auto;font-size:11.5px;font-weight:650;color:var(--dim);
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.yearhead .gotop:hover{color:var(--accent)}
/* Smooth scrolling stays: arriving at a cited passage from a citation is a short hop inside a
   sitting and easing it reads better. Year jumps are the exception and are made instant in
   year_jump_style() -- 38,000px of animated travel is a blur, not a transition. */
/* Two things must line up with the height of the sticky header: the year heading sticks just
   below it, and a year jump has to land clear of it. Both were hardcoded (52px and 104px) and
   both would have silently rotted the moment the header grew -- which it did, as soon as the
   Years control was given a full-size tap target. So the height is stated once. */
[id]{scroll-margin-top:calc(var(--hdr) + 52px)}
/* --- type scale --- */
h1{font-size:26px;line-height:1.2;margin:20px 0 6px;letter-spacing:-.03em;font-weight:750}
h2{font-size:17px;margin:0;letter-spacing:-.015em}
h3{letter-spacing:-.015em}
.sub{color:var(--dim);font-size:13.5px;margin:0 0 10px;line-height:1.58}
.sub b{color:var(--ink);font-weight:650}
/* the sitting's own header, lifted into a card so the date, the coverage claim and the counts read
   as one panel instead of four loose paragraphs */
.sithead{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;
  margin:16px 0 14px;box-shadow:var(--sh)}
.sithead h1{margin:0 0 6px}
.sithead .sub:last-of-type{margin-bottom:0}
.sithead .foldnote{margin-bottom:14px}
/* --- ask box --- */
.ask,form.ask{display:flex;gap:8px;margin:14px 0 8px}
.ask input,form.ask input{flex:1;min-width:0;font:inherit;font-size:15px;padding:13px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);min-height:46px;
  box-shadow:inset 0 1px 2px rgba(15,20,24,.03);transition:border-color .18s,box-shadow .18s}
.ask input:focus,form.ask input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.ask button,form.ask button{font:inherit;font-weight:650;font-size:15px;padding:0 20px;border:0;
  border-radius:12px;background:var(--accent);color:#fff;min-height:46px;
  box-shadow:0 8px 18px -12px rgba(23,105,74,.9);transition:background .18s,transform .12s}
.ask button:hover,form.ask button:hover{background:var(--accent-deep)}
.ask button:active,form.ask button:active{transform:translateY(1px)}
/* The published copy: the same box, switched off, with the reason printed beside it.
   It has to READ as disabled or a reader will try it and think the site is broken, so the
   controls drop their accent, the button loses its lift, and the note is set at the size of
   the caption text around it rather than shouting.
   SELECTORS ARE PREFIXED WITH `form` ON PURPOSE. The rules above are written as `form.ask
   input`, which is specificity (0,1,2); a bare `.ask--off input` is (0,1,1) and loses whatever
   it touches -- measured: the button kept the live accent green and only the properties the
   higher rule did not set (cursor, border-style) actually applied. */
form.ask--off{align-items:center}
form.ask--off input{background:#f1f3f2;color:var(--dim);border-style:dashed;cursor:not-allowed}
form.ask--off input::placeholder{color:#9aa5ae}
form.ask--off button{background:#c3ccd2;box-shadow:none;cursor:not-allowed}
form.ask--off button:hover{background:#c3ccd2}
form.ask--off .askoff{font-size:12.5px;line-height:1.45;color:var(--dim);max-width:34ch}
@media (max-width:600px){form.ask--off{flex-wrap:wrap;gap:6px}
  form.ask--off input{flex:1 1 100%}form.ask--off .askoff{flex:1 1 100%;max-width:none}}
/* --- the sitting index --- */
.item{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin:12px 0;
  overflow:hidden;box-shadow:var(--sh)}
.item>summary{list-style:none;cursor:pointer;padding:14px 16px;display:block;min-height:44px}
.item>summary::-webkit-details-marker{display:none}
.ih{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.meta{font-size:12px;color:var(--dim);margin-top:5px;display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-deep)}
.pill.heavy{background:#fdeee2;color:#9a4a12}
.pill.ok{background:var(--accent-soft);color:var(--accent-deep)}
.pill.bad{background:#fdecec;color:#9a1c1c}
.bar{height:4px;background:var(--line);border-radius:2px;margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
/* --- the topic fold (a report == a topic) --- */
.topic{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin:0 0 10px;
  overflow:hidden;box-shadow:var(--sh);transition:box-shadow .2s,border-color .2s}
.topic:hover{box-shadow:var(--sh-hi);border-color:#d9dfe4}
.topic[open]{box-shadow:var(--sh-hi)}
.topic>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  column-gap:10px;row-gap:6px;padding:14px 16px;cursor:pointer;min-height:44px;list-style:none}
.topic>summary::-webkit-details-marker{display:none}
.topic>summary:active{background:#f7f8f7}
/* Inline in the meta line, so the row reads title -> context -> counts. A 284px uppercase chip
   above the title made every row open with a pale bar and demoted the title to a subtitle. */
.topic>summary .rtype{margin:0 6px 0 0;background:none;padding:0;display:inline;
  color:var(--accent-deep);font-size:10.5px;letter-spacing:.07em}
.topic>summary .ttl{font-size:16.5px;font-weight:680;line-height:1.3;letter-spacing:-.02em;
  color:var(--ink);grid-column:1;grid-row:1}
.topic>summary .tmeta2{font-size:11.5px;color:var(--dim);font-weight:550;grid-column:1/-1;
  grid-row:2}
.topic>summary .chev{color:var(--dim);font-size:20px;line-height:.9;grid-column:2;grid-row:1;
  transition:transform .2s,color .2s}
.topic[open]>summary .chev{transform:rotate(90deg);color:var(--accent)}
.topicbody{padding:0 16px 16px}
.topic .rhead{margin:0 0 12px;padding-top:10px;border-top:1px solid var(--line-2)}
/* --- the inline fold for unsummarised text --- */
.gap{display:inline}
.gap>summary{display:inline;font-family:var(--sans);font-size:11.5px;font-weight:650;
  color:var(--accent);cursor:pointer;list-style:none;white-space:nowrap;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:7px;
  padding:2px 7px;margin:0 3px;transition:background .15s}
.gap>summary::-webkit-details-marker{display:none}
.gap>summary:hover{background:#dcebe2}
.gap>summary:active{background:#d3e5da}
.gap[open]>summary{color:var(--dim);background:#f2f4f3;border-color:var(--line);font-weight:500}
/* A highlight held back as procedure or repetition. Deliberately quieter than a live highlight --
   it is still the record, and still one tap away, but it is not what the page is asking to be read. */
.gap.hidden>summary{background:#f2f4f3;border-color:var(--line);color:var(--dim);font-weight:500}
.tbody mark.hl.dim{background:#f4f3ef;box-shadow:none;color:#455059;border-radius:2px}
.gapdemo{font-size:11.5px;font-weight:650;color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent-line);border-radius:7px;padding:2px 7px;white-space:nowrap}
.foldnote{font-size:13px;color:var(--dim);line-height:1.6}
.foldnote b{font-weight:680;color:var(--ink)}
/* --- record headings and turns --- */
.rhead{margin:26px 0 10px;padding-top:14px;border-top:2px solid var(--ink)}
.rhead:first-of-type{border-top:0;padding-top:0}
.rtype{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);
  border-radius:999px;padding:3px 9px;margin-bottom:6px;width:fit-content}
.rhead h3{font-size:16.5px;margin:0 0 3px;letter-spacing:-.02em;line-height:1.3;font-weight:680}
.rid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--dim)}
.otherdate{display:inline-block;margin-left:8px;font-size:11px;font-weight:650;padding:2px 8px;
  border-radius:999px;background:#fdeee2;color:#9a4a12}
.turn{margin:0 0 22px;padding-left:13px;border-left:2px solid var(--line-2)}
.turn.proc{opacity:.66}
.turn.proc .tbody{font-size:14.5px;color:var(--dim)}
.tmeta{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px;display:flex;justify-content:space-between;gap:10px;
  align-items:baseline}
.tmeta .tw{font-weight:500;text-transform:none;letter-spacing:0}
/* The reading column, capped at a comfortable measure. The card stays 832px so the row rhythm and
   the folds keep their line, but the prose inside stops at ~72 characters -- an 89-character serif
   line is the thing that made long sittings tiring to read. */
.tbody{font-family:var(--serif);font-size:16.5px;line-height:1.74;color:var(--ink-2);
  overflow-wrap:anywhere;max-width:64ch}
.tbody mark.hl{background:var(--mark);box-shadow:inset 0 -1px 0 var(--mark-line);
  padding:1px 0;border-radius:2px;color:var(--ink)}
/* the passage an ANSWER quoted -- distinct from a summary highlight, because they are
   different claims: this one is what the model cited, that one is what the Government wrote */
.tbody mark.hl.cited{background:var(--cited);box-shadow:inset 0 -2px 0 var(--cited-line);
  font-weight:600}
.callout{background:linear-gradient(180deg,#f2f9f5,#eaf4ee);border:1px solid var(--accent-line);
  border-left:3px solid var(--accent);border-radius:12px;padding:12px 14px;margin:12px 0 8px;
  max-width:64ch}
.callout .slabel{margin-bottom:5px}
.callout .summary{font-family:var(--serif);font-size:16px;line-height:1.64;margin:0;color:#1c252e}
.callout .cite{font-size:11.5px;color:var(--dim);margin-top:7px;line-height:1.5}
.sec{border-top:1px solid var(--line);padding:14px 16px}
.sec:first-child{border-top:0}
.slabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:6px}
.summary{font-family:var(--serif);font-size:16.5px;line-height:1.64;margin:0 0 12px}
.transcript{border-left:3px solid var(--mark-line);padding-left:12px;margin-top:4px}
.sent{font-family:var(--serif);font-size:15.5px;line-height:1.7;margin:0 0 9px;color:var(--ink-2)}
.sent mark{background:var(--mark);padding:1px 0;border-radius:2px;color:var(--ink)}
.sent.ctx{color:var(--dim);font-size:14.5px}
.who{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--dim);
  text-transform:uppercase;letter-spacing:.05em;margin-right:6px}
.note{font-size:12.5px;color:var(--dim);margin-top:10px;line-height:1.55}
.note.warn{color:#9a4a12}
.cite{font-family:var(--sans);font-size:11.5px;color:var(--dim);margin-top:3px}
.openfull{font:inherit;font-weight:650;font-size:14px;color:var(--accent);background:none;border:0;
  padding:12px 0;cursor:pointer;min-height:44px}
.openfull:hover{text-decoration:underline}
.moretext{font-family:var(--serif);font-size:15px;line-height:1.72;color:#3a424c;
  background:#fafbf9;border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:8px;
  max-height:340px;overflow:auto}
/* --- counts: chips instead of a bare run of numbers --- */
.stat{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--dim);margin:12px 0 16px}
.stat span{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px;
  white-space:nowrap;font-weight:600}
.sithead .stat{margin-bottom:0}
.grid{display:grid;gap:8px}
.row{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);
  min-height:44px;align-items:center;box-shadow:var(--sh);
  transition:box-shadow .2s,border-color .2s,transform .12s}
.row:hover{box-shadow:var(--sh-hi);border-color:#d9dfe4}
.row:active{transform:translateY(1px)}
.row .n{font-size:12px;color:var(--dim);text-align:right;white-space:nowrap;line-height:1.45}
.row b{font-weight:680;font-size:15.5px;letter-spacing:-.015em}
/* The sitting's name is the row's headline: a reader scanning the index is looking for a
   topic, and the date below is how they confirm they found the right one. */
.row .t{display:block}
/* The sitting's name, set as a subtitle under the date heading. A name is longer than a date
   and some are long titles, so it is set as text rather than as a heading: normal weight,
   its own colour, and allowed to run to a comfortable measure and wrap. Truncating it was
   rejected -- a title cut at a character count severs compound nouns. */
.sithead .sitname{margin-top:1px;font-weight:650;font-size:15.5px;color:var(--ink-2);
  letter-spacing:-.011em;line-height:1.4;max-width:64ch}
.row.rel{text-decoration:none}
.empty{color:var(--dim);font-size:14px;padding:14px 0}
/* --- ask / answer view --- */
.qecho{font-size:12.5px;color:var(--dim);margin:0 0 14px;font-style:italic}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px 16px;
  margin:12px 0;box-shadow:var(--sh);position:relative;overflow:hidden}
.quote::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.quote blockquote{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.68;color:#1b242c}
.quote .cite{font-size:12px;color:var(--dim);margin-top:10px;line-height:1.5}
.quote .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.cid{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--dim)}
.gotoread{display:inline-flex;align-items:center;gap:5px;min-height:44px;font-size:13.5px;
  font-weight:650;color:var(--accent);text-decoration:none}
.gotoread:hover{text-decoration:underline}
.refusal{background:#fffaf4;border:1px solid #f0dcc6;border-left:3px solid #b4622a;
  border-radius:12px;padding:14px;margin:12px 0;font-size:15px;line-height:1.62}
.refusal .why{font-size:13px;color:var(--dim);margin-top:8px}
.fail{background:#fdecec;border:1px solid #e8bcbc;border-radius:12px;padding:14px;margin:12px 0;
  font-size:14px;color:#7a1c1c}
.turn.flash{border-left-color:var(--accent);background:var(--accent-soft);
  border-radius:0 12px 12px 0;padding-left:13px}
footer{max-width:880px;margin:26px auto 0;color:var(--dim);font-size:12px;
  padding:20px 16px 34px;border-top:1px solid var(--line)}
footer code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
/* Mobile-first: everything above IS the 390px layout. Below only widens the gutters and lifts
   the two headline sizes -- no layout switches, so a 360px screen gets the same design. */
@media (min-width:760px){
  .wrap{padding:0 24px}
  h1{font-size:30px}
  .sithead{padding:20px 22px}
  .topic>summary{padding:15px 18px}
  .topicbody{padding:0 18px 18px}
  .sec{padding:16px 18px}
  .sub{font-size:14px}
  footer{padding-left:24px;padding-right:24px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}