/* Airlaw — the entire stylesheet. Loaded as-is; there is no preprocessor.

   The palette and the fonts are LOCKED by the design brief in docs/Problems.txt:
   Bricolage Grotesque (body) / Fraunces (display) / JetBrains Mono (code), weight
   extremes rather than mid-weights, and large steps between sizes. Do not change colours.

   ── HOW THEMING WORKS ───────────────────────────────────────────────────────────────
   One set of custom properties is defined in :root below, and ONE override block
   (search for "dark theme") redefines those same tokens under :root[data-theme=dark].
   Nothing else is theme-aware. So a new colour belongs in both places as a token, never
   as a literal in a rule — a literal will look correct in one theme and wrong in the
   other, and only the theme you were not testing will show it.

   index.html sets data-theme before the first paint, so the page never flashes the wrong
   theme while app.js is still loading.

   ── MAP OF THIS FILE ────────────────────────────────────────────────────────────────
   Sections are marked "---------- name ----------". Roughly in order:

     tokens and dark theme · shell · top bar · the search bar · layout · hero ·
     ambient code field · recently viewed · browse-by-part contents page · section
     titles · badges · results · topic detail ("the Flight Brief") · page numbers that
     open the source PDF · browse tree · figures · operator profile · pages and forms ·
     admin · disclaimer and footer · print · responsive · compliance matrix and report ·
     easter eggs · Ask panel · cross-references toggle · applies-to-me · feature plates
     and their reveal · history button, dropdown and panel · "under construction" notice ·
     compact search button · theme button · landing page · browse issue badge and filter ·
     results from the other regulation · nav overflow

   Two sections carry most of the weight and are worth reading first: "topic detail",
   which styles a provision, and "feature plates", which is the animated home page.     */
:root{
  /* Warm whitish-gold canvas with white panels on it — white paper on a dark desk.
     The --on* tokens are for text sitting directly on the canvas with no panel under it;
     anything inside a panel keeps --ink / --navy.
     --muted is 4.48:1 here, so it stays above AA — but do not warm the canvas further
     (#f6f1e4 drops it to 4.25). Only the top bar stays dark, for contrast. */
  --bg:#faf7ee; --panel:#ffffff; --panel2:#f8fafc;
  --on:#16232f; --on2:#31424f; --on-muted:#647485; --on-line:#e6ddc8; --on-link:#1c5fa8;
  --ink:#16232f; --ink2:#31424f; --muted:#647485; --faint:#8a97a4;
  --line:#e3e8ee; --line2:#d3dbe4;
  --navy:#0d2b4e; --navy2:#123a68; --blue:#1c5fa8; --blue-soft:#eaf1fb;
  /* --navy does two unrelated jobs: it is the colour of headings (85 rules) and the fill of
     the dark surfaces — top bar, masthead, buttons, the specimen bezel (13 rules). Those have
     to move independently, because in the dark theme heading TEXT must go light while those
     SURFACES stay dark. Hence a separate token for the surface. */
  --brand-surface:#0d2b4e; --brand-surface2:#123a68;
  /* Two surfaces that were hard-coded light while the text on them used --navy, which goes
     LIGHT in the dark theme. The result was --navy on #d9e4f2 at 1.03:1 for a table header
     and 1.23:1 for the active filter chip — text that is present, selectable and invisible.
     A themed foreground needs a themed background; these are that pair. */
  --th-bg:#d9e4f2; --th-bg-hover:#eaf1fb; --th-bg-hot:#f2f7fd;
  --chip-on:#fffdf7; --chip-on-edge:#efe7d3;
  --gold:#b0862a; --gold-soft:#faf3e1;
  /* Gold READ AS TEXT. --gold is the colour of rules, spines and chips, where it sits
     against a tinted panel; the same value as body text on the page background measures
     3.1:1, under the 4.5:1 that 13px type needs. Darkened here for that one job. In the
     dark theme the lightened --gold already clears it, so the two coincide. */
  --note-ink:#8a6413;
  --green:#1f7a4d; --purple:#6a45b0; --pink:#a63a68; --red:#c02626;
  /* ---- the instrument colours ----
     Sampled, not chosen. Extraction_Scripts read the fill of the rectangle printed behind
     each heading in both source PDFs; 3,754 of the 3,847 headings were located, and AIR OPS
     is unanimous — IR #365f91, AMC #ffc000, GM #00b050. The 93 that were not located are
     the Articles and the Definitions block, which the PDF prints with no banner at all,
     hence no sampled colour for those two below.

     CAR-FCL prints the same three hues a shade brighter (#0070c0 / #fbbc39 / #16cc7f). One
     set is used for both documents on purpose: a results list can hold provisions from
     either, and two different blues both labelled IR would read as two different things.

     The INK is chosen, not copied. The PDF sets white on all three, which is 1.9:1 on the
     amber and 2.9:1 on the green — legible at 14pt in print, not in a 10px chip. The
     background is what identifies the instrument, so the foreground is free to be whatever
     can be read on it. Each pairing below clears 4.5:1.

     A solid chip carries its own ground, so these do NOT flip with the theme — that is why
     they are the one group of tokens the dark block leaves alone. */
  --ir:#365f91;   --ir-ink:#ffffff;   --ir-edge:#2a4a72;
  --amc:#ffc000;  --amc-ink:#3d2c00;  --amc-edge:#c99700;
  --gm:#00b050;   --gm-ink:#00301a;   --gm-edge:#009144;
  --appx:#0070c0; --appx-ink:#ffffff; --appx-edge:#005694;
  /* no banner in the source; these keep the hues the app already used for them */
  --art:#6a45b0;  --art-ink:#ffffff;  --art-edge:#573794;
  --defn:#a63a68; --defn-ink:#ffffff; --defn-edge:#8a2f56;
  --oth:#4b5a6b;  --oth-ink:#ffffff;  --oth-edge:#3c4957;
  --shadow:0 1px 2px rgba(16,32,52,.06), 0 1px 1px rgba(16,32,52,.04);
  --lift:0 10px 30px rgba(13,43,78,.10), 0 2px 6px rgba(13,43,78,.06);
  --body:"Bricolage Grotesque",ui-sans-serif,sans-serif;
  --display:"Fraunces",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --drawer:308px; --r:14px;
  /* shared height for the bar controls — the search field and the regulation slider
     sit side by side and must agree exactly; deriving it from padding meant they drifted
     apart by 12px whenever a font size changed. */
  --ctrlh:46px;
  color-scheme:light;
}

/* ---------- dark theme ----------
   The identity does not invert. Navy and gold are the brand and they stay; what flips is the
   PAPER. The light theme is dark ink on a warm near-white; the dark theme is a warm off-white
   on a deep blue-black, which is the contrasting counterpart of that canvas rather than a
   neutral grey. Keeping the hue family means the gold rules, the badges and the mark all
   still belong to the same document.

   Only tokens are redefined here. Every rule in the sheet already reads from them, so the
   dark theme is thirty-odd declarations rather than a parallel stylesheet — and a new
   component gets dark mode for free provided it uses tokens.

   Contrast: --ink on --panel is 13.6:1 and --muted on --panel is 5.6:1, both above AA. */
:root[data-theme="dark"]{
  --bg:#0b131d; --panel:#141d29; --panel2:#1a2432;
  --on:#e7eef6; --on2:#c3d0de; --on-muted:#93a3b5; --on-line:#2a3646; --on-link:#7cb2ee;
  --ink:#e7eef6; --ink2:#c3d0de; --muted:#9dacbd; --faint:#7d8d9f;
  --line:#25313f; --line2:#33404f;
  /* heading text, now light — the dark surfaces below keep their own token */
  --navy:#dce7f4; --navy2:#b6cbe3;
  /* the counterparts of the two light surfaces above: --navy reads 11.4:1 on this header
     ground and 10.1:1 on the chip, against 1.03 and 1.23 when they were left light */
  --th-bg:#1e2b3d; --th-bg-hover:#26364b; --th-bg-hot:#2d3f57;
  --chip-on:#243349; --chip-on-edge:#33465e;
  --blue:#7cb2ee; --blue-soft:#17293d;
  --brand-surface:#0a1523; --brand-surface2:#132542;
  /* gold lifted: #b0862a is only 2.9:1 on this canvas, #d3a447 is 6.4:1 */
  --gold:#d3a447; --gold-soft:#241d0d;
  --note-ink:var(--gold);   /* already 6.4:1 here — no separate value needed */
  --green:#4dbb85; --purple:#a98ae0; --pink:#e08bab; --red:#f08a8a;
  /* The instrument colours themselves are deliberately NOT redefined — they are read off
     the source PDF and a solid chip supplies its own ground, so they look the same in both
     themes, which is the point of copying them. Only the rims lift, so the edge of a chip
     stays visible against a dark panel instead of dissolving into it. */
  --ir-edge:#5b86bd; --amc-edge:#ffd75e; --gm-edge:#3ad183;
  --appx-edge:#3f9fe0; --art-edge:#9b7ede; --defn-edge:#d47ba1; --oth-edge:#7d8d9f;
  --shadow:0 1px 2px rgba(0,0,0,.42), 0 1px 1px rgba(0,0,0,.3);
  --lift:0 12px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.36);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Text defaults to the PANEL colour, not the canvas. Panels — tables, cards, the tree,
   provision text — are the bulk of the page, so anything that forgets to set a colour
   must land dark-on-white. Setting the canvas colour here instead cascaded near-white
   into every table cell and made them invisible. On-canvas text is enumerated below. */
body{background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:15.5px;font-weight:300;line-height:1.68;letter-spacing:.002em;min-height:100vh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
p{margin:0 0 .9em}
a{color:var(--blue);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
code,.mono{font-family:var(--mono);font-size:.92em}
mark{background:#fff2b8;color:#5a4a10;border-radius:2px;padding:0 1px}
::selection{background:#d6e6fb}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
h1,h2,h3{font-family:var(--display);color:var(--navy);font-weight:800;letter-spacing:-.01em}
b,strong{font-weight:800}

/* ---------- shell + drawer (the drawer pushes, it does not cover) ---------- */
#shell{min-height:100vh;transition:transform .26s cubic-bezier(.4,0,.2,1)}
/* Workspace screens lock the shell to the viewport so the tree and the content each
   scroll on their own. Without this the page scrolls as one and the sticky sidebar
   clips its rows mid-height. */
body.wsmode #shell{height:100vh;overflow:hidden;display:flex;flex-direction:column}
/* ---------- top bar ----------
   It carries the mark, every section, the search and the regulation switcher, so it is
   allowed to wrap onto a second row rather than push the switcher off a narrow window. */
/* THREE PARTS: what you work in, the field, and what the site is. The field takes the
   space the other two leave and centres itself in it, which is close enough to the middle
   of the bar to read as the middle without pretending the two sides weigh the same. */
#topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;row-gap:8px;padding:12px 22px;background:var(--brand-surface);
  border-bottom:3px solid var(--gold)}
/* About / Contact / Support, past the field.
   They were briefly wrapped, with the brand and the sections, in a pair of equal-flex
   containers — which centred the field to the pixel and broke the thing that keeps the
   header on one row. fitTopbar decides to retreat by comparing the offsetTop of the bar's
   own children; with two wrappers holding everything, those two children never move, the
   wrapping happened inside them, and a 162px-tall header reported itself as fitting.

   So the bar stays flat and the field is sized to fit beside the navigation rather than
   being centred by arithmetic. With About / Contact / Support moved past it the two sides
   come to 444px and 361px, so it sits about 40px off the true middle — which is not
   something anyone can see, and is worth more than a measurement that cost the header its
   ability to notice it had overflowed.

   ID IN THE SELECTOR, and that is the whole of item 18. This rule said ".topnav2" and was
   written above ".topnav" — but the element carries BOTH classes, and .topnav sets
   margin-left to clamp(20px,3vw,54px) to space the sections off the wordmark. Equal
   specificity, later rule, so About / Contact / Support were handed a 54px margin and the
   auto was silently gone. Nothing pushed anything to the right edge, the bar packed itself
   from the left, and its contents ended at 1,579px no matter how wide the window was: at
   2,560 that is 981px of empty navy with the page's own centre stranded in it. */
#topbar .topnav2{flex:0 1 auto;margin-left:auto}
body.wsmode #topbar{flex:none}
body.wsmode #view{flex:1;min-height:0;overflow:hidden;padding:0;max-width:none}
body.wsmode .foot{display:none}
/* the mark: a small abstract roundel, no wordmark */
#homebtn--retired::before{content:"";width:15px;height:15px;border-radius:50%;
  border:2.5px solid var(--navy);border-right-color:var(--gold);border-bottom-color:var(--gold);
  transform:rotate(-45deg);transition:.2s}
#homebtn--retired.close::before{width:14px;height:14px;border:none;border-radius:0;transform:none;
  background:
    linear-gradient(var(--navy),var(--navy)) center/100% 2.5px no-repeat,
    linear-gradient(var(--navy),var(--navy)) center/2.5px 100% no-repeat;
  rotate:45deg}

/* ---------- the bar ----------
   Controls on the dark bar are outlined, not filled: a row of white pills on navy was the
   "white boxes" that read as unrelated. One filled element only — the call to action. */
.brand{display:flex;align-items:center;gap:11px;background:none;border:0;cursor:pointer;
  padding:0;flex:none;font:inherit}
/* The mark: an aircraft climbing away from three ruled lines — the regulation, and what it
   governs. It replaced a sheet carrying the UAE flag, which is not ours to use and which
   read as endorsement on a tool that says in its own front door it has none.

   The aircraft is the one the home page flies across the wordmark, at .66 of its size and
   banked 34 degrees. Three shapes, no detail below 4px: it is drawn at 26px in the header
   and read at 16 in a browser tab, and anything finer is a smudge at both. */
.brand-mark{width:26px;height:26px;flex:none;overflow:visible;transition:.2s}
.brand-mark .bm-rules path{fill:none;stroke:#fff;stroke-width:4.6;stroke-linecap:round;
  transition:.2s}
.brand-mark .bm-plane{fill:var(--gold);transition:.2s}
/* Away from home the mark becomes the way back, so it reads as a close control: the whole
   thing turns, and the rules take the gold the aircraft had. */
.brand.close .brand-mark{transform:rotate(-90deg) scale(.94)}
.brand.close .bm-rules path{stroke:var(--gold)}
.brand.close .bm-plane{fill:#fff}
.brand-name{font-family:var(--body);font-size:18px;font-weight:800;letter-spacing:.2em;
  line-height:1;text-transform:uppercase;white-space:nowrap;color:#fff}
/* The domain is part of the name but not the same weight of it: gold and a shade smaller,
   so the header reads AIRLAW first and .AE as where it lives. */
.brand-tld{color:var(--gold);font-weight:700;letter-spacing:.12em}
.brand:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
/* Only ever rendered on the test deployment. It sits against the name, not off in a corner,
   because the question it answers — "am I looking at the real site?" — is asked while
   reading the name, and an indicator you have to go and find does not get looked at. */
.sitebadge{flex:none;align-self:center;margin-left:2px;padding:4px 9px;border-radius:6px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;color:#3a2a00;background:var(--gold);
  border:1px solid rgba(0,0,0,.18);cursor:default}
@media(max-width:560px){.sitebadge{letter-spacing:.08em;padding:3px 6px;font-size:9px}}

/* A deliberate gap after the mark so the identity and the navigation read as two
   separate things rather than one run-on strip. */
/* Eight sections plus the switcher share the bar, so the gaps tighten and the row is
   allowed to wrap rather than force anything off-screen. */
/* flex:0 — the sections take what they need and no more, so the space left over belongs
   to the field. They used to take it all and the field got what was left. */
.topnav{display:flex;align-items:center;gap:clamp(9px,1.3vw,20px);flex:0 1 auto;
  flex-wrap:wrap;margin-left:clamp(20px,3vw,54px);margin-right:clamp(12px,1.6vw,26px)}
.topnav a{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#b9cbe0;cursor:pointer;white-space:nowrap;padding:7px 10px;position:relative;
  text-decoration:none;border-radius:8px;
  transition:background-color .45s cubic-bezier(.4,0,.2,1),color .45s cubic-bezier(.4,0,.2,1)}
.topnav a:hover{color:#fff;background:rgba(255,255,255,.12)}
.topnav a.on{color:#fff}
.topnav a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;
  background:var(--gold);border-radius:2px}
.topnav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* ---------- the list header ----------
   The name of the source document, then the three controls sharing the width evenly. It
   sits in the list itself rather than on the global bar: these act on what is beneath
   them, and a control belongs next to the thing it changes. */
/* flex:none, not sticky: it sits above the scroller rather than floating over it, so it
   holds its place without a z-index or an opaque background to hide rows behind.

   position:relative is NOT decoration. The chevron that hides the list is absolutely
   placed with right:0 against this element, and it was sticky before — which made it a
   containing block for free. Dropping to static handed the chevron to .workspace, which
   is position:relative, and it went to the far right of the whole workspace: measured at
   x=1414 in a 1440 window, sitting over the provision instead of over the list. */
.sidehd{flex:0 0 auto;position:relative;background:var(--bg);
  padding:18px 0 12px;margin-bottom:10px;border-bottom:1px solid #e6ddc8}
/* ---------- the filter, above the list it filters ----------
   This was a card listing the two documents, with the CAR / Regulation / Part / Type
   dropdowns living separately on the Regulation page. Both chose which provisions you
   were looking at, so the same decision was made in two shapes depending on the screen.

   Stacked rather than in a row, because the column is 360px and four controls across it
   would each be too narrow to read an option in. Stacked they are also in the order the
   narrowing actually happens, top to bottom, ending at the list the last one filters. */
/* 38px controls against the 42px they had on the Regulation page, and two rows rather
   than four: the filter came to 373px of a 900px column stacked, more of it than the
   list it filters. Paired it is about 250px, and no control is smaller than a
   comfortable target. */
.sidefilter{display:flex;flex-direction:column;gap:9px;margin-bottom:11px}
.sf-row{display:flex;align-items:flex-end;gap:8px;min-width:0}
/* Each control gets the width its content needs rather than an equal share: the CAR is a
   numeral and the regulation beside it is a name, and splitting the row down the middle
   would truncate the name to pad the numeral.

   100px is measured, not chosen: the widest option is "All CARs" at 51px of text and the
   control carries 48px of padding and arrow. At 92px it was showing "All CA…", which is a
   short string that ought to fit. The row has 319px after the gap and the two together
   want 328, so the 9px comes off the regulation — which has always truncated its closed
   state on purpose, at 222px against the 229px its longest name needs, and opens in full
   regardless. Better there than on a word of eight characters. */
.sf-car{flex:0 0 100px}
/* Figures shares the second row with the Part; the view toggle has the third to itself,
   and the two are sized by opposite rules because they are shaped differently.

   FIGURES takes what its words need and no more — measured, "Any" and "With figures"
   come to 145px of the row's 327, leaving the Part 174. Splitting the pair down the
   middle instead gave each button 67px and truncated "With figures" to "With f…": equal
   halves are the wrong answer when one label is a word and the other is two. */
.sf-figs{flex:0 0 auto}
/* THE VIEW TOGGLE is the opposite case. Both labels are phrases of about the same
   length, it has a row to itself, and two content-width pills at the left of a 327px
   row read as unfinished — so here the halves ARE equal and they take the width. */
.sf-view{flex:1 1 auto;min-width:0}
.sidefilter .sf-view .bf-fams{width:100%;justify-content:stretch}
.sidefilter .sf-view .bf-f{flex:1 1 0;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-size:11px;letter-spacing:.01em;padding:7px 4px}
.sf-reg,.sf-part{flex:1 1 auto;min-width:0}
.sidefilter #bfcar,.sidefilter #bfreg,.sidefilter #bfpart,.sidefilter .bf-fams{height:38px}
/* The arrows are drawn at a fixed offset from the top, so a shorter control needs them
   moved up or they sit low in the box. */
.sidefilter #bfpart{background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px}
.sf-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.sf-field>label{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-left:2px}
/* The top row shares its line with the chevron that hides the list. The button is
   absolutely placed against the pane's right edge, so it is the row's LAST label that
   has to keep clear of it — both hold the same height so the two sit on one line. */
.sidefilter .sf-row:first-child>.sf-field>label{min-height:var(--sidehide);
  display:flex;align-items:center}
.sidefilter .sf-row:first-child>.sf-field:last-child>label{padding-right:34px}
/* Full width here, whatever the widths the same controls were given when they sat in a
   row. A class AND an id outranks the bare id, so this holds without depending on which
   rule comes first in the file — the ordering that has already cost an afternoon. */
.sidefilter #bfcar,.sidefilter #bfreg,.sidefilter #bfpart{width:100%;max-width:none}
.sidefilter .bf-fams{width:auto;flex:none}
/* 6px, not the 9px of the row this came from: the four buttons took 184px of a 328px row
   and left the Part beside them 135px, truncating a name to pad a set of three-letter
   labels. */
.sidefilter .bf-f{padding:7px 6px;text-align:center}
/* Visually hidden, still read aloud. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* One button now — Hide list moved to the heading — so it takes the row rather than half
   of it. .treebtn keeps flex:1 so it still stretches. */
.sidetools{display:flex;gap:7px}

/* The chevron that closes the list. In the corner of the heading, level with the word
   REGULATIONS, because it acts on the whole pane rather than on anything inside it.

   Boxed rather than a bare glyph: a lone chevron on a pane full of chevrons — every row
   in the tree ends in one — would read as another row marker instead of a control. The box
   is what says it is pressable.

   Absolutely placed against .sidehd, which is position:sticky and therefore already a
   containing block; it scrolls with the heading and stays put with it. */
/* One variable for the button's size and for the room the label holds open for it, so a
   bigger target on touch cannot drift from the space reserved under it. */
:root{--sidehide:26px}
.sidehide{position:absolute;top:18px;right:0;z-index:4;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--sidehide);height:var(--sidehide);padding:0;cursor:pointer;
  color:var(--navy);background:var(--panel);border:1px solid #ddd2b8;border-radius:7px;
  transition:background-color .15s,border-color .15s,color .15s}
.sidehide svg{width:52%;height:52%;display:block}
.sidehide:hover{background:var(--gold-soft);border-color:var(--gold)}
.sidehide:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.treebtn{flex:1 1 0;appearance:none;font:inherit;font-family:var(--body);font-size:10px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  color:var(--navy);background:var(--panel);border:1px solid #ddd2b8;border-radius:8px;
  padding:8px 6px;white-space:nowrap;text-align:center;
  transition:background-color .45s cubic-bezier(.4,0,.2,1),border-color .45s cubic-bezier(.4,0,.2,1)}
.treebtn:hover{background:#efe7d3;border-color:var(--navy)}
.treebtn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* .hidebtn styled the old full-width "Hide list"; .sidehide replaced it. */

/* Hiding the list held the column to 1180px, which meant the button whose own title reads
   'Hide the list and read full width' handed back LESS width than leaving the list open —
   2,078px of pane against 1,180. The centring stays and is now a no-op at every width the
   children actually reach; the cap is gone, because the control has to do what it says. */
body.listhidden .wsmain{display:flex;flex-direction:column;align-items:center}
body.listhidden .wsmain>*{width:100%}
/* The table's own 1180px went with the text column it was matching. With the text
   uncapped it would have been the narrower of the two, which is backwards for the one
   element people hide the list in order to see. */



/* Still no auto margin HERE. One on the icons would shove them to the edge on their own
   and leave About / Contact / Support stranded in the middle beside the field. The two
   autos that do the work are further up — one before the field, one before that nav —
   and the icons ride along behind them. */
.hactions{display:flex;align-items:center;gap:9px;flex:none}

/* regulation switcher — always visible */
/* The regulation switcher's styles went with it. Choosing a regulation is a dropdown now,
   grouped by CAR, and it is the same control in all three places it appears. */
.pgpick{margin:0 0 18px}

/* header search — a pill, hidden on the home screen */
.topsearch[hidden]{display:none}          /* display:flex would otherwise beat [hidden] */
/* BIGGER, CENTRED, AND A SURFACE OF ITS OWN.
   It was rgba(255,255,255,.09) on the navy bar — a nine-per-cent wash, which is why people
   asked to be shown where the search was. A field is a place you put something into, and it
   has to look like a hole in the chrome rather than a slightly paler part of it. --panel is
   the page's own surface: white on the navy in the light theme, 14.2:1 against the bar.

   The dark theme needs its own answer, because there the bar is #0a1523 and --panel is
   #141d29 — 1.07:1, the same trap the Show list button fell into. The rule below lifts it to
   --line2, the palette's lightest neutral surface. Nothing new is introduced either way. */
/* GROWS INTO WHAT IS LEFT, up to 540px. The ceiling is measured rather than chosen — the
   brand and sections come to 444px, About / Contact / Support and the three icons to 361px,
   and 1440 less 44px of padding and three 12px gaps leaves 951px for the field to sit in
   without pushing the bar onto a second row.

   THEN AN AUTO MARGIN, which the note here used to forbid: "one on a flex item swallows the
   free space before flex-grow sees it, and the field's width stopped being predictable."
   That was true of an unbounded item, and it is why the ceiling matters. Growing stops at
   540px; a flex item clamped by its own max-width is frozen, and only what is left AFTER it
   freezes reaches the auto margins. So the two behave as stages rather than as rivals:

     up to ~1,600px   there is no space to spare, the field grows, both auto margins resolve
                      to nothing, and the bar is laid out exactly as it was;
     beyond that      the field is full at 540px and the spare width is split evenly between
                      this margin and the one on About / Contact / Support — the right-hand
                      group reaches the right edge and the field travels with the middle
                      instead of being left behind at 572px.

   Even, not arithmetic: the left of the bar is heavier than the right, so the field settles
   a little past the true centre — 69px of it on a 2,560px monitor, against the 981px of
   dead navy this replaces. */
.topsearch{flex:1 1 320px;display:flex;align-items:center;gap:9px;min-width:200px;max-width:540px;
  margin-left:auto;
  height:52px;
  background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:0 8px 0 18px;
  /* Colour only — NAMED, not the "transition:.16s" shorthand this used to be, which means
     "all" and therefore animated the field's WIDTH. fitTopbar measures the bar to decide
     what has to give way; measured 30ms into a 160ms width animation it read 189px for a
     field on its way to 333px, concluded the bar fitted, and stopped the retreat one stage
     early. The header then wrapped as the animation finished — at some widths and not
     others, depending on where the field happened to be when the timer fired, which read as
     flakiness rather than as a rule that animated a layout property. */
  transition:background-color .16s,border-color .16s,box-shadow .16s}
/* The gold is the site's 'this one': on a field the reader has clicked into, it is the
   clearest possible answer to 'where am I typing'. */
.topsearch:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.topsearch .tsico{color:var(--muted);font-size:17px;flex:none}
/* Sized so the whole hint fits: the placeholder is 85 characters and the field has about
   530px of clear width once the icon and the three chips are subtracted, which lands at
   12.5px. Ellipsis is the safety net for the narrower breakpoints. */
.topsearch input{flex:1;min-width:40px;background:none;border:none;color:var(--ink);
  font-family:var(--body);font-size:14px;font-weight:400;padding:0;outline:none;
  text-overflow:ellipsis;align-self:stretch}
.topsearch input::placeholder{color:var(--muted);opacity:1}
/* Dark needs its own fill. There the bar is #0a1523 and --panel is #141d29 — 1.07:1, which
   is not a box, it is a rumour. --line2 is the lightest neutral surface in the palette and
   reads 1.58:1 against that bar with the text at 9:1 on it. Declared for both ways of asking
   for dark, so an explicit choice and a system preference land on the same field. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .topsearch{background:var(--line2);border-color:var(--muted)}
}
:root[data-theme="dark"] .topsearch{background:var(--line2);border-color:var(--muted)}
.chip{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink2);
  border:1px solid #efe7d3;background:#fffdf7;padding:5px 9px;border-radius:999px;
  cursor:pointer;white-space:nowrap;user-select:none;transition:.14s}
.chip:hover{border-color:#d8c9a6;color:var(--navy);background:#fffefb}
.chip.on{color:var(--navy);background:var(--gold-soft);border-color:var(--gold);font-weight:700}

/* ---------- layout ---------- */
/* Content is centred on every screen. #view still spans the window so the workspace can
   use the full width for its two panes, but anything that is a plain page column is
   held to a readable measure and centred in the space. */
/* 90px of paper under the last line, plus the footer's own 80px margin on top of it, was
   182px of nothing between the page and the band that closes it. The footer is a solid
   colour and does the separating; the page needs a breath, not a field. */
#view{max-width:none;margin:0;padding:14px 32px 36px}
#view>.reveal,#view>.page,#view>.cwrap{max-width:1400px;margin-left:auto;margin-right:auto}
/* Home is the exception: it keeps the full width it had before, because the hero and
   its two rails are built to span the window — capping them would strand the rails
   away from the edges they are meant to sit against. */
#view>.homewrap{max-width:none;margin-left:0;margin-right:0}
/* The workspace also carries `.reveal`, so the rule above was capping and centring the
   WHOLE browse layout — list and all — inside the window. It spans the viewport. */
#view>.workspace{max-width:none;margin-left:0;margin-right:0}
/* prose pages want a tighter measure than a table-heavy one */
.page{max-width:900px;margin-left:auto;margin-right:auto}
/* the admin correction grid and the questionnaire need more than a prose measure */
.page-wide{max-width:1400px}
.reveal{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}#shell{transition:none}}
/* ".backbar{margin-bottom:14px;color:var(--on-muted)}" was here, for the Back / Forward
   pair above a provision. The pair was withdrawn; see the note in app.js. The band it
   occupied is still reserved — see "body.reading .wsmain" beside .floatnav — because the
   floating stepper now sits in it, centred, which is where that pair used to be.

   ".backbar a" and its hover went at the same time: they dressed the bare <a> that Back was
   before item 24 made it a real button, and nothing has matched them since. ".backbar.hasnav"
   and ".bb-pad" had already gone, when the three-column grid that centred a stepper between
   Back and an empty cell stopped having a stepper to centre. */
/* .provnav styled the stepper above the masthead — the pill with Previous and Next and,
   before that, a position counter. The floating pair does this now, and did already;
   what came out was the duplicate. See .floatnav. */
.spin{color:var(--on-muted);padding:60px;text-align:center;font-weight:200;font-size:19px}

/* workspace: browse tree on the left, content on the right — two independent panes,
   each scrolling to its own end so nothing is clipped part-way through a row */
/* The list's width is the reader's, not a constant. --sidew is set from localStorage by
   wireGrip; the 360px here is the fallback for the first visit and for the moment before
   the script runs. */
/* --wsgap and --wspad are on :root rather than here because more than the workspace reads
   them. They were put there for the floating stepper, which was left-aligned under the
   first letter of the provision and needed all three numbers to find it; the stepper is
   pinned to the right of the window now and needs none of them. They stay on :root because
   the phone override below sets both together and that is easier to keep honest in one
   place. */
:root{--wsgap:clamp(18px,2.1vw,34px);--wspad:32px}
.workspace{height:100%;display:grid;grid-template-columns:var(--sidew,360px) minmax(0,1fr);
  column-gap:var(--wsgap)}
/* Sits ON the gap rather than taking a column of its own, so the layout is unchanged when
   nobody touches it. 11px wide to be catchable with a mouse; the visible line is 1px. */
.wsgrip{position:absolute;top:0;bottom:0;width:11px;z-index:5;cursor:col-resize;
  left:calc(var(--sidew,360px) + 1px);background:none;border:0;padding:0;
  touch-action:none}
.wsgrip::before{content:"";position:absolute;top:0;bottom:0;left:5px;width:1px;
  background:var(--line2);transition:background-color .15s,box-shadow .15s}
.wsgrip:hover::before,.wsgrip:focus-visible::before,body.resizing .wsgrip::before{
  background:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.wsgrip:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:3px}
/* While dragging: no text selection anywhere, and the cursor does not flicker as it crosses
   the panes. Also kills the grid transition, or the column chases the pointer a beat late. */
body.resizing{cursor:col-resize;user-select:none}
body.resizing .workspace{transition:none}
body.listhidden .wsgrip{display:none}
/* THE SCROLLBAR BELONGS TO THE LIST, NOT TO THE COLUMN. The whole aside used to be the
   scroll container, with the heading held in place by position:sticky. That works, but
   the scrollbar it produces runs the full height of the column — starting up beside a
   heading that never moves and cannot be scrolled — which says the whole column scrolls
   when only the list does.

   A flex column instead: the heading takes its own height and stays, the list takes what
   is left and scrolls, and the bar appears beside the rows it actually moves. The
   heading no longer needs to be sticky, because it is no longer inside the scroller —
   which also retires the 110px of scroll-padding that existed to stop rows landing
   underneath it. */
/* overflow-y:auto rather than hidden, and it is not a second scrollbar in the normal
   case: the list flexes to fill whatever the heading leaves, so the column's content is
   exactly the column's height and `auto` shows nothing. It earns its keep on a SHORT
   window — four controls and a button come to roughly 350px, and below about 600px of
   viewport the list would be squeezed to nothing and the heading clipped with no way to
   reach the controls at all. Then, and only then, the column scrolls too. */
.wsside{height:100%;min-height:0;display:flex;flex-direction:column;overflow-y:auto;
  color:var(--ink);padding:0 16px;border-right:1px solid #e6ddc8;background:var(--bg)}
#tree{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:60px;scroll-padding-top:8px;scroll-padding-bottom:16px}
.wsside .tleaf,.wsside details{scroll-margin-top:8px}
/* .wsmain is a SIBLING of .wsside, not a descendant — an earlier edit welded the two
   selectors together, so this rule matched nothing and the reading pane lost its
   scrolling entirely. In wsmode #view is overflow:hidden, so this is the only thing that
   scrolls the content. */
.wsmain{height:100%;min-height:0;min-width:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px var(--wspad) 80px;scroll-padding-top:12px}
/* The 1400px ceiling that used to sit here was the LAST cap on the reading column, and the
   one that survived removing the other two: at 2560 it left a 1,400px sheet with 320px of
   empty paper down each side while the table beside it had already taken the full 2,003.
   See THE READING MEASURE further down for why there is now no cap at all.

   Browse / search / provision pages sit left in their pane — the list is on the left and
   the reading column is anchored to it rather than floating away from it. */
.wsmain>.twrap,.wsmain>.tcap{max-width:none}

/* ---------- hero ---------- */
/* No box, no second navy. The hero simply IS the canvas — a panel of one navy floating
   on a canvas of another was the clash: three shades of the same hue competing. Ellipsus
   does the same thing, and it is why its hero reads as calm. */
.hero{position:relative;overflow:hidden;background:none;border:0;box-shadow:none;
  border-radius:0;margin:0 0 20px;
  min-height:clamp(440px,64vh,700px);
  padding:44px 24px;
  display:grid;grid-template-columns:200px minmax(0,1fr) 200px;gap:clamp(20px,3vw,54px);
  align-items:stretch}
.hero-mid{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-width:0}
/* The chart-grid overlay was removed when the drifting code field arrived — two
   ambient textures behind one masthead cancel each other out. */
.hero>*{position:relative;z-index:1;min-width:0}
.hero>.codefield{z-index:0}

/* ---------- ambient field of provision codes ----------
   The regulation's own vocabulary, drifting behind the masthead at the threshold of
   visibility. Inert and aria-hidden — decoration, never content. Held completely still
   for anyone who has asked for reduced motion. */
.codefield{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 50%,transparent 0%,#000 78%);
          mask-image:radial-gradient(72% 62% at 50% 50%,transparent 0%,#000 78%)}
.codefield span{position:absolute;font-family:var(--mono);font-size:12px;font-weight:400;
  color:rgba(122,92,20,.17);white-space:nowrap;letter-spacing:.02em;
  animation:drift var(--t,20s) ease-in-out var(--d,0s) infinite alternate}
@keyframes drift{
  from{transform:translate3d(0,0,0);opacity:.5}
  to{transform:translate3d(10px,-16px,0);opacity:1}
}
@media(prefers-reduced-motion:reduce){.codefield span{animation:none;opacity:.75}}
@media(max-width:720px){.codefield span{font-size:10.5px}}

.hero-mid .kicker{color:var(--navy);letter-spacing:.3em;font-size:10.5px;font-weight:800;text-transform:uppercase}
/* Sized for the CENTRE column, not the viewport: at the old 7.4vw the masthead was
   wider than the space between the two rails from 1000-1150px and collided with them.
   The stacked layout below 1000px gets the full width back and sizes up again. */
.hero-mid h1{font-family:var(--display);font-size:clamp(44px,6.6vw,124px);line-height:.92;
  margin:0 0 12px;font-weight:800;letter-spacing:-.035em;color:var(--navy)}
.hero-mid .subt{color:var(--ink2);font-size:17px;font-weight:200;margin:0}

/* ---- the name arrives by air ----
   An aircraft crosses the hero on a climbing path; the path stays behind it as a dashed
   track, and each letter settles in as the plane passes over it. The .AE lands last, at
   the end of the track, because it is the destination.

   This REPLACES the hand-drawn underline that used to sit here. The page still carries one
   flourish and no more — the track is that flourish now, and it is also the wordmark, so
   nothing was added to the page's weight.

   The track is one <path>, and the plane rides the SAME path through offset-path rather
   than a second copy of the curve — two curves would drift apart the moment either was
   nudged, and the plane would fly beside its own contrail. */
/* width:100% is load-bearing. .hero-mid centres its children, so the h1 shrink-wraps to its
   content; an <svg> with a viewBox and no width has an intrinsic size of 300x150, so the h1
   became 300px wide and the svg's own "min(100%,940px)" then resolved 100% against that 300
   and stayed there. Giving the heading a definite width breaks the circularity. */
.flightmark{margin:0 0 10px;line-height:1;width:100%}
/* Bigger than the h1 it replaced. That h1 was clamp(44px,6.6vw,124px) — about 92px on a
   1400px screen — and the first version of this mark rendered at 83px, so the name arrived
   smaller than it had been. The viewBox is 760 wide, so the cap below puts AIRLAW.AE at
   roughly 128px: larger than the old title at any width, and still short of the viewBox
   edges at the widest letter-spacing Fraunces gives it. */
.flightmark svg{display:block;width:min(100%,940px);height:auto;margin:0 auto;overflow:visible}
.fm-track{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:5 9;stroke-dashoffset:900;
  animation:fm-draw 1.7s linear .1s forwards}
@keyframes fm-draw{to{stroke-dashoffset:0}}
.fm-plane{fill:var(--navy);
  offset-path:path("M14 216C168 208 306 178 428 132 546 88 646 46 748 12");
  offset-rotate:auto;offset-distance:0%;opacity:0;
  animation:fm-fly 1.7s linear .1s forwards}
@keyframes fm-fly{
  0%{offset-distance:0%;opacity:0}
  6%{opacity:1}
  92%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.fm-word{font-family:var(--display);font-size:150px;font-weight:800;letter-spacing:-.035em;
  fill:var(--navy)}
/* The flight is LINEAR, not eased. With an ease-in-out the aircraft covered 91% of the
   path in the first two thirds of the time, so the last three letters landed at 97%, 100%
   and 100% — bunched at the right-hand end, after it had already passed. Linear motion is
   what lets a letter land as the plane is over it.

   --l is the letter's place in the word, and the delays are spread across the WHOLE
   flight so the aircraft passes over each letter as it lands. They used to finish at 1.94s
   while the plane flew on until 2.25s, so the last third of the crossing was over a word
   that had already fully arrived — the flight and the name were two animations that
   happened to overlap rather than one thing.

   The crossing is 1.7s. Every timing here is one ratio of it, so shortening it keeps the
   aircraft over the letter that is landing: a letter settles at .25 + l*.225 + .25, which
   is the same fraction of the flight it was at 2.6s. Last letter settles at 1.85s against
   the plane leaving at 1.80s. */
.fm-word tspan{opacity:0;animation:fm-land .25s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay:calc(.25s + var(--l,0)*.225s)}
.fm-tld{fill:var(--gold);font-size:.44em;letter-spacing:.02em}
@keyframes fm-land{from{opacity:0}to{opacity:1}}
/* Held still: the name is the point, the flight is the manner, and the manner is optional. */
@media(prefers-reduced-motion:reduce){
  .fm-track{stroke-dashoffset:0;animation:none}
  .fm-plane{opacity:1;offset-distance:100%;animation:none}
  .fm-word tspan{opacity:1;animation:none}
}
@media(max-width:620px){.fm-word{font-size:160px}}
.hero-mid .lede{color:var(--muted);max-width:620px;margin:0 auto 34px;font-weight:300;font-size:15.5px}
.herosearch{display:flex;gap:11px;width:100%;max-width:760px;margin:0 auto;background:var(--panel);
  border:1px solid var(--line2);border-radius:999px;padding:10px 10px 10px 30px;align-items:center;
  box-shadow:var(--lift);transition:.16s}
.herosearch:focus-within{border-color:var(--navy);box-shadow:0 0 0 5px rgba(13,43,78,.08)}
.herosearch input{flex:1;min-width:40px;background:none;border:none;color:var(--ink);
  font-family:var(--body);font-size:19px;font-weight:300;padding:15px 0;outline:none}
.herosearch .btn{padding:15px 34px;font-size:15.5px}
.btn{background:var(--brand-surface);color:#fff;border:none;padding:12px 26px;border-radius:999px;
  font-family:var(--body);font-weight:800;cursor:pointer;font-size:14.5px;letter-spacing:.01em;transition:.15s}
.btn:hover{background:var(--brand-surface2)}
.btn-ghost{background:var(--panel);border:1px solid var(--line2);color:var(--navy);
  padding:12px 20px;border-radius:999px;font-family:var(--body);font-weight:800;cursor:pointer}
.btn-ghost:hover{background:var(--panel2)}

/* ==================================================================================
   The lower half of the home page — a register, not a card wall.
   Everything below the masthead is set the way the source document sets its own back
   matter: ruled entries, a contents page with dot leaders, a dated list. No borders, no
   rounded rectangles, no drop shadows — the only devices are hairlines, type and space.
   ================================================================================== */

/* --- the ways in: four cards ----------------------------------------------------
   Boxes, but not the usual bordered rectangle: no visible frame at rest, just a white
   plane on the warm ground with a gold rule across the top that widens on hover. The
   weight sits in the type and the space, so the set reads as calm rather than boxed-in. */
.entries{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  margin-bottom:44px}
.entry{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  text-align:left;cursor:pointer;font:inherit;overflow:hidden;
  background:var(--panel);border:0;border-radius:16px;padding:26px 24px 22px;
  box-shadow:0 1px 2px rgba(20,40,70,.05);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}
/* the rule is the only ornament, and it earns its place by moving */
.entry::before{content:"";position:absolute;top:0;left:0;height:3px;width:44px;
  background:var(--gold);border-radius:0 3px 3px 0;
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.entry:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,40,70,.10)}
.entry:hover::before{width:100%}
.entry:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.en-name{font-family:var(--display);font-size:21px;font-weight:800;color:var(--navy);
  line-height:1.18;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.en-tag{font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:#7a5c14;
  border-bottom:2px solid var(--gold);padding-bottom:1px}
.en-desc{color:var(--muted);font-size:13.5px;font-weight:300;line-height:1.62;flex:1}
.en-go{font-size:16px;color:var(--faint);transition:.25s;margin-top:2px}
.entry:hover .en-go{color:var(--gold);transform:translateX(5px)}

/* --- recently viewed: a dated list --------------------------------------------- */
.reclist{border-top:1px solid var(--on-line);margin-bottom:40px}
.recrow{display:grid;grid-template-columns:52px 190px minmax(0,1fr) 96px;align-items:baseline;
  gap:16px;width:100%;text-align:left;cursor:pointer;background:none;border:0;
  border-bottom:1px solid var(--on-line);padding:11px 6px;font:inherit;
  transition:background-color .45s cubic-bezier(.4,0,.2,1)}
.recrow:hover{background:rgba(176,134,42,.07)}
.recrow:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.recrow .rc-code{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--navy)}
.recrow .rc-t{color:var(--ink2);font-size:13.5px;font-weight:300;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.recrow .rc-at{font-family:var(--mono);font-size:11px;color:var(--faint);justify-self:end}
@media(max-width:860px){
  .recrow{grid-template-columns:52px minmax(0,1fr);gap:9px 14px}
  .recrow .rc-t{grid-column:1/-1;white-space:normal}
  .recrow .rc-at{grid-column:1/-1;justify-self:start}
}

/* --- browse by part: the document's own contents page, dot leaders and all ------- */
.register{border-top:1px solid var(--on-line)}
.regrow{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--on-line);padding:13px 6px;font:inherit;
  transition:background-color .45s cubic-bezier(.4,0,.2,1)}
.regrow:hover{background:rgba(176,134,42,.07)}
.regrow:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.rg-code{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--navy);flex:none}
/* the leader is a quiet quotation of the PDF's own contents page */
.rg-lead{flex:1 1 auto;height:2px;min-width:24px;align-self:center;
  background-image:radial-gradient(circle,var(--faint) .9px,transparent 1.1px);
  background-size:6px 2px;background-repeat:repeat-x;opacity:.55}
.rg-n{font-family:var(--mono);font-size:13px;color:var(--muted);flex:none}
.rg-n::after{content:" provisions";font-family:var(--body);font-size:11.5px;font-weight:300;color:var(--faint)}

/* ---------- section titles ---------- */

/* ---------- the two rails flanking the masthead ----------
   Both run the full height of the hero with their rows distributed top to bottom, and both
   carry a gold hairline on their OUTER edge with a tick reaching in to each row — so the
   left column reads as one code taken apart, and the right as the size of the document.
   Labels face inward on both sides, which puts the code and the number on the outer edges
   and lets the two columns frame the title rather than crowd it. */
/* Centred on the vertical, hard against the outer edge — the rails flank the masthead
   at its midline rather than running the full height of the box. */
.anatomy,.herostats{position:relative;z-index:1;display:flex;flex-direction:column;
  justify-content:center;min-width:0}
.anatomy{border-left:1px solid rgba(176,134,42,.55);padding-left:16px;text-align:left}
.herostats{border-right:1px solid rgba(176,134,42,.55);padding-right:16px;text-align:right}
.anatomy-hd,.hs-hd{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;color:var(--navy);margin-bottom:20px;line-height:1.5}
.anatomy-row,.hs-list{flex:0 0 auto;display:flex;flex-direction:column;gap:clamp(13px,2vh,22px)}

/* left rail — a code taken apart, one segment per row */
.anseg{appearance:none;background:none;border:0;cursor:pointer;padding:0;margin:0;width:100%;
  display:flex;align-items:baseline;gap:10px;text-align:left;font:inherit;border-radius:6px;
  animation:anin .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * 80ms + 140ms)}
.anseg-tick{flex:none;width:11px;height:1px;background:rgba(176,134,42,.75);
  margin-left:-16px;align-self:center}
.anseg-code{font-family:var(--mono);font-size:clamp(15px,1.35vw,20px);font-weight:700;
  color:var(--navy);line-height:1.1;letter-spacing:-.01em;flex:none;
  min-width:4.4em;text-align:right}
.anseg-lab{font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);line-height:1.3;min-width:0}
.anseg:hover .anseg-code,.anseg:focus-visible .anseg-code{color:var(--blue)}
.anseg:hover .anseg-lab,.anseg:focus-visible .anseg-lab{color:var(--ink2)}
.anseg:hover .anseg-tick{background:var(--gold);width:15px}
.anseg:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@keyframes anin{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}

/* right rail — the size of the document, mirrored */
.herostats .st{display:flex;align-items:baseline;justify-content:flex-end;gap:10px}
.herostats .st span{font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);line-height:1.3;min-width:0}
.herostats .st b{font-family:var(--display);font-size:clamp(19px,1.9vw,27px);font-weight:800;
  color:var(--navy);line-height:1.1;flex:none;min-width:2.9em;text-align:right}

@media(prefers-reduced-motion:reduce){.anseg{animation:none}}

/* Below 1000px the rails would squeeze the title into a column of single words, so they
   go back to reading across, under the masthead. */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;gap:26px;padding:44px 22px 38px;min-height:0}
  .hero-mid{order:-1}
  .anatomy,.herostats{border:0;padding:0;text-align:center}
  .anatomy{border-top:1px solid rgba(176,134,42,.45);padding-top:16px}
  .herostats{border-top:1px solid rgba(176,134,42,.45);padding-top:16px}
  .anatomy-hd,.hs-hd{margin-bottom:13px;text-align:center}
  .anatomy-row,.hs-list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:9px 22px}
  .anseg{width:auto;flex-direction:column;align-items:center;gap:4px}
  .anseg-tick{display:none}
  .anseg-code{min-width:0;text-align:center}
  .herostats .st b{min-width:0;text-align:center}
  .hero-mid h1{font-size:clamp(44px,8.6vw,124px)}
  .herostats .st{flex-direction:column;align-items:center;gap:3px}
}



.secttl{display:flex;align-items:center;gap:14px;margin:38px 0 15px;color:var(--on);
  font-family:var(--display);font-size:12px;letter-spacing:.17em;text-transform:uppercase;font-weight:800}
.secttl::after{content:"";flex:1;height:1px;background:var(--on-line)}
.secttl .lnkbtn{font-family:var(--body);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--muted);background:none;border:none;cursor:pointer;padding:0 2px}
.secttl .lnkbtn:hover{color:var(--blue);text-decoration:underline}

/* ---------- recently viewed ---------- */
/* the whole perimeter turns gold on hover; idle is the same gold held right back */

/* ---------- badges ----------
   The badge is the instrument's colour as the source PDF prints it: a filled block, not a
   pale tint of one. That is the whole reason for reading the colours off the document —
   somebody who works from the printed regulation already knows blue means it binds, amber
   means it is one accepted way, green means it only explains, and they should not have to
   learn a second colour language here. See the token block for what was sampled. */
/* ONE chip for the instrument's kind, everywhere it appears — the list, a search result, a
   figure card, both mastheads. It used to be `.badge` in a list and something else on each
   masthead, and two classes for one symbol is how they drifted apart in the first place.
   `.badge` is gone; this is what every one of them uses. */
.kindchip{display:inline-block;vertical-align:middle;font-family:var(--mono);font-size:10px;
  font-weight:700;line-height:1.35;padding:3px 8px;border-radius:6px;letter-spacing:.02em;
  border:1px solid transparent;white-space:nowrap;flex:none}
.kindchip.b-IR{background:var(--ir);color:var(--ir-ink);border-color:var(--ir-edge)}
.kindchip.b-AMC{background:var(--amc);color:var(--amc-ink);border-color:var(--amc-edge)}
.kindchip.b-GM{background:var(--gm);color:var(--gm-ink);border-color:var(--gm-edge)}
.kindchip.b-Appendix{background:var(--appx);color:var(--appx-ink);border-color:var(--appx-edge)}
.kindchip.b-Article{background:var(--art);color:var(--art-ink);border-color:var(--art-edge)}
.kindchip.b-Definitions{background:var(--defn);color:var(--defn-ink);border-color:var(--defn-edge)}
/* The one place the colours invert, and only because they must: on a masthead the chip sits
   on its own family colour, where a family-coloured chip would be invisible. The shape, the
   size and the face are the same, which is what carries the recognition. */
.kindchip.onmast{background:transparent;color:var(--mast-ink,#fff);
  border-color:var(--mast-line,rgba(255,255,255,.45))}
/* IN THE H1 THE CHIP DOES RIDE THE CLAMP, and that reverses what this comment used to
   say: "it is a label, not part of the title's typography. Same 10px as everywhere else."
   Item 15 says otherwise — "the size of the 'IR', 'AMC' and 'GM' box is quite small - it
   should be quite prominent, also about the same font size (but I think it is a good idea
   to keep it in a box)". So it is part of the title's typography here, and only here: the
   chip in the tree, in a search result and in the browse rows is still 10px, because there
   it is a label on a row and not the first word of a heading.

   Everything below is in em, so the chip scales with whatever the clamp resolves to — 24px
   on a phone, 34px on a desktop — instead of staying 10px beside a heading that trebles.

   .78em, not .96em like the code beside it. The chip is the one piece of this line with a
   box around it, and a box adds its own padding and border to the height: at .96em the
   outline stood taller than the title's capitals and the line read as a chip with a title
   after it. At .78em the BOX comes out about the height of the title's capitals while the
   letters inside it stay clearly of the same family as the code — which is what "quite
   prominent" asks for. Measured, not guessed: see the numbers in the item 15 note.

   And the outline is --mast-dim rather than --mast-line — 74% white against 24%. A hairline
   at a quarter opacity is what a 10px chip could carry; at this size it read as a smudge
   around the letters rather than as a box. No new colour: both tokens are already set on
   every masthead a few rules further up. */
.mast h1 .kindchip{position:relative;top:-.06em;margin-right:.24em;
  font-size:.78em;line-height:1.16;padding:.05em .3em;border-radius:.2em;
  letter-spacing:.01em;border-color:var(--mast-dim,rgba(255,255,255,.74))}
.kindchip.b-Other{background:var(--oth);color:var(--oth-ink);border-color:var(--oth-edge)}
.regtag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--gold);
  background:var(--gold-soft);border:1px solid #eeddb8;border-radius:5px;padding:2px 6px;margin-left:8px}
.crossnote{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;padding:13px 17px;margin-bottom:14px;font-size:13.5px;
  font-weight:300;color:var(--ink2);box-shadow:var(--shadow)}
.crossnote a{font-weight:800}
.synote{font-size:12.5px;font-weight:300;color:var(--ink2);background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:0 10px 10px 0;
  padding:11px 15px;margin:16px 0}

/* ---------- results ---------- */
.rcount{color:var(--on-muted);font-size:12.5px;font-weight:300;margin-bottom:14px;letter-spacing:.01em}
.item{background:var(--panel);border:1px solid var(--line);border-left:3px solid transparent;
  border-radius:12px;padding:14px 17px;margin-bottom:9px;cursor:pointer;transition:.13s;box-shadow:var(--shadow)}
.item:hover{border-color:var(--line2);border-left-color:var(--gold);background:var(--panel2)}
.item .code{font-family:var(--mono);color:var(--navy);font-weight:700;margin-left:9px;font-size:13.5px}
.item .title{margin-top:5px;color:var(--ink2);font-size:14px;font-weight:300}
.item .snip{margin-top:7px;color:var(--muted);font-size:12.5px;line-height:1.55;font-weight:300}

/* ---------- topic detail — "the Flight Brief" ----------
   The provision is presented as a document with a masthead. What kind of instrument it
   is (binding rule vs accepted means vs explanation) is stated in words, and reinforced
   three ways — spine colour, ground tint and gutter token — so it survives greyscale,
   printing and colour-blindness. Gold is 3.34:1 on white, so it is only ever a rule,
   border or chip; navy (14.25:1) carries all reading. */
/* ---- the masthead wears the instrument's own colour ----
   Not navy. The source PDF prints each heading on a solid band — blue for an Implementing
   Rule, amber for an AMC, green for GM — so the masthead reproduces that band rather than
   inventing a house colour and then labelling it. Nobody should have to read the word
   "Implementing Rule" to learn something the page already says in colour.

   The INK is chosen, not copied, for the same reason as the badges: the PDF sets white on
   all three, which is 1.9:1 on the amber and 2.9:1 on the green. Each pairing below clears
   AA. --mast-dim is the same ink at 72%, for the metadata; --mast-line at 20%, for rules.

   Four tokens per kind rather than four rules per element, so a new instrument type is one
   line here and nothing else changes. Anything without its own set falls back to navy.

   The SAME token set serves the sub-sheets — the AMC and GM cards that open beneath a rule.
   An AMC is a provision, not a footnote on one, so it is drawn as the same kind of object:
   its own colour across its masthead, the same joined card, the same spine. One list here,
   so the two can never drift apart.

   The ink is white on every kind, so a masthead reads the same way whichever instrument it
   belongs to. Note what that costs and do not "fix" it by hand: white on the AMC amber
   measures 1.64:1 and on the GM green 2.87:1, both under the 3:1 WCAG floor for large text.
   That is a deliberate choice for one consistent masthead, taken with the numbers in view.
   The AMC and GM colours are fixed by the source documents and cannot be darkened to earn
   the contrast back, so the fallback for anyone who cannot read them is structural rather
   than chromatic: the code prefix leading the title in .mast-code names the instrument in
   text on every masthead — IR, AMC1, GM1 — the spine is solid for binding and dashed for
   not, and print forces black on white. Nothing here is the only carrier of its meaning.

   That fallback got thinner when the spelled-out kind was dropped from above the title: it
   is now the abbreviation rather than "Acceptable Means of Compliance" in full. Still text,
   still on every masthead, but if a plain-language label is ever wanted back, this is the
   paragraph that explains why it was there. */
.sheet.k-IR,.subsheet.k-IR{--mast-bg:var(--ir);   --mast-ink:#ffffff; --mast-dim:rgba(255,255,255,.74); --mast-line:rgba(255,255,255,.24)}
.sheet.k-AMC,.subsheet.k-AMC{--mast-bg:var(--amc); --mast-ink:#ffffff; --mast-dim:rgba(255,255,255,.74); --mast-line:rgba(255,255,255,.24)}
.sheet.k-GM,.subsheet.k-GM{--mast-bg:var(--gm);   --mast-ink:#ffffff; --mast-dim:rgba(255,255,255,.74); --mast-line:rgba(255,255,255,.24)}
.sheet.k-Appendix,.subsheet.k-Appendix{--mast-bg:var(--appx); --mast-ink:#ffffff; --mast-dim:rgba(255,255,255,.74); --mast-line:rgba(255,255,255,.24)}
.sheet.k-Article,.subsheet.k-Article{--mast-bg:var(--art);   --mast-ink:#ffffff; --mast-dim:rgba(255,255,255,.74); --mast-line:rgba(255,255,255,.24)}
.sheet.k-Definitions,.subsheet.k-Definitions{--mast-bg:var(--defn); --mast-ink:#ffffff; --mast-dim:rgba(255,255,255,.74); --mast-line:rgba(255,255,255,.24)}

/* The masthead and the text below it are ONE document. They used to be two cards with a
   16px gap, which read as a title card and then, separately, some text — so the sheet keeps
   its top corners, the body keeps its bottom ones, and the seam between them is closed. */
.sheet{background:var(--panel);border:1px solid var(--line);border-bottom:none;
  border-radius:var(--r) var(--r) 0 0;overflow:hidden;box-shadow:var(--lift);margin-bottom:0}
.sheet+.body,.sheet+.note{border-radius:0 0 var(--r) var(--r);border-top:none;
  box-shadow:var(--lift);margin-bottom:16px}
.mast{background:var(--mast-bg,var(--brand-surface));color:var(--mast-ink,#fff);
  padding:22px 28px 20px;position:relative}
.mast-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
/* The regulation label used to be pushed right by margin-left:auto because the spelled-out
   kind held the left of this row. It is the only thing in the row now, and a lone label
   floating against the right edge reads as a mistake, so it takes the left. */
.mast-reg{font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mast-dim,rgba(255,255,255,.5))}
/* The code leads the title INSIDE the h1, so it is sized in em and rides whatever the
   clamp() below resolves to rather than being pinned to 13px while the title scales.
   Full masthead ink, not the dim token: the prefix is what says IR, AMC1 or GM1 now that
   the kind is not spelled out, so it is not decoration. Hierarchy comes from the size and
   the mono face instead.

   NOT white-space:nowrap, which was the first attempt. The longest code in the corpus is
   "AMC1 SPO.IDE.H.120(b)(1)(iii) & SPO.IDE.H.125(a)(8)" at 51 characters — about 428px of
   mono, wider than a 360px phone — so nowrap sent it straight off the edge of the masthead.
   What actually matters is that it must not break in the MIDDLE of a token: "NCO.SPEC.
   MCF.125" split across two lines is unreadable as a code. Normal wrapping already does
   exactly that, breaking at the spaces and never inside a word, so the pair below is
   stated explicitly to stop an inherited overflow-wrap:anywhere from reaching in. (Line
   breaks never harmed copying — the clipboard gets the text either way.)

   There is a real space in the markup between the code and the title, not just this margin.
   Without it the heading's text content ran together as "IR NCO.SPEC.MCF.125Crew
   composition…" — which is what a screen reader announces and what lands on the clipboard,
   however wide the visual gap looked. The margin only tunes what the eye sees. */
/* .96em, AND THAT NUMBER IS MEASURED  (item 15)
   The request was that the code and the title be "approximately the same" size. They were
   0.58em apart, which on a 34px title put the code at 19.7px against a 34px title — read
   as a label above a heading rather than as one line of one heading.

   Equal font-size would NOT have made them look equal. What the eye compares on a line of
   capitals and digits is cap height, and the two faces differ: measured on this machine
   with both webfonts loaded, Fraunces at weight 800 has a cap height of 70 per 100px and
   JetBrains Mono at 700 has 73. So the mono is set at 70/73 = .959em, and "IR" in the chip,
   "CAT.GEN.MPA.100" in the code and "Crew responsibilities" in the title all stand exactly
   the same height. Change either face and this number is wrong — it is a ratio between two
   specific fonts, not a round number that looked about right.

   THE TWO FACES STAY DIFFERENT, which is the answer to the question in the request — "the
   entire font of the title being the same... although telling the number apart from the
   title then becomes more difficult". That difficulty is the whole of it. Once the code and
   the title are the same size, the mono face is the ONLY thing left separating
   "CAT.GEN.MPA.100" from "Crew responsibilities"; make them one face as well and the reader
   has nothing but a space to go on. The face is doing the work the size used to do. */
.mast-code{font-family:var(--mono);font-size:.96em;font-weight:700;letter-spacing:.01em;
  color:var(--mast-ink,#fff);overflow-wrap:normal;word-break:normal;margin-right:.28em}
.mast h1{font-family:var(--display);font-size:clamp(24px,2.6vw,34px);line-height:1.14;
  margin:10px 0 10px;color:var(--mast-ink,#fff);font-weight:800;letter-spacing:-.02em}
/* "Reserved" is the document's word for a rule number held open with no subject. It is
   standing in for a title, so it should not be read AS one: lighter, italic, and dimmed,
   so the masthead says "there is nothing here" rather than naming a rule called Reserved. */
.mast h1 .mast-marker{font-weight:400;font-style:italic;letter-spacing:0;
  color:var(--mast-dim,rgba(255,255,255,.74))}
.mast-meta{font-size:12px;font-weight:300;color:var(--mast-dim,rgba(255,255,255,.58))}
.sheet-in{padding:16px 28px 20px}
.sheet-in .related:first-child{margin-top:0}
/* The spine runs the full height of the joined card, so the instrument's colour carries
   past the masthead and down the text.

   GM's spine was dashed — "solid binds, dashed does not" — a second, non-colour carrier of
   the distinction. It is solid now, at the reader's request: three colours of spine that
   differ in weight as well as hue read as three grades of importance rather than three
   kinds of instrument, and guidance is not a lesser thing than a rule. The non-colour
   carrier is not lost, only moved: .mast-code names the instrument in text on every
   masthead — IR, AMC1, GM1 — and the kind chip repeats it beside the code.

   The 3px rule that used to sit under the masthead is gone: it was there to mark the kind,
   and the whole masthead does that now. */
.sheet.k-IR,.sheet.k-IR+.body,.sheet.k-IR+.note{border-left:3px solid var(--ir)}
.sheet.k-AMC,.sheet.k-AMC+.body,.sheet.k-AMC+.note{border-left:3px solid var(--amc)}
.sheet.k-GM,.sheet.k-GM+.body,.sheet.k-GM+.note{border-left:3px solid var(--gm)}
.sheet.k-Appendix,.sheet.k-Appendix+.body,.sheet.k-Appendix+.note{border-left:3px solid var(--appx)}
.sheet.k-Article,.sheet.k-Article+.body,.sheet.k-Article+.note{border-left:3px solid var(--art)}
.flagbanner{margin-top:9px;color:#8a6413;font-size:12.5px}
.related{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.related .rlbl{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;margin-right:3px}
.related .chip2{font-family:var(--mono);background:var(--panel2);border:1px solid var(--line2);
  color:var(--ink2);font-size:11.5px;padding:5px 10px;border-radius:8px;cursor:pointer;transition:.14s}
.related .chip2:hover{border-color:var(--navy);color:var(--navy);background:var(--panel)}

/* ---------- the cross-references, folded ----------
   Three lists of chips, one under the other, pushed the first line of regulation more than
   1,300px down the page on the worst provisions. The reader opened a rule and had to scroll
   through its bibliography to reach it.

   A real <details>: it opens with the keyboard, is announced as a disclosure, and needs no
   script — so nothing here can get out of step with the chips inside, which keep their own
   handlers whether the fold is open or shut.

   Dressed as one more line of metadata rather than as a button, because that is what it is
   standing in for. The count is in the summary: 'Related' alone does not tell you whether
   opening it is worth the scroll. */
.xrfold{margin-top:11px;border-top:1px solid var(--line);padding-top:9px}
.xrfold>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:2px 0;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase}
.xrfold>summary::-webkit-details-marker{display:none}
.xrfold>summary:hover{color:var(--navy)}
.xrfold>summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:5px}
/* The triangle is drawn rather than borrowed from the marker, so it turns with the state
   and keeps the same weight as the rule above it. */
.xrf-n::before{content:'';display:inline-block;width:0;height:0;margin-right:8px;
  vertical-align:1px;border-left:4.5px solid currentColor;
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
  transition:transform .15s}
.xrfold[open]>summary .xrf-n::before{transform:rotate(90deg)}
.xrf-go{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line2);border-radius:6px;padding:1px 7px}
.xrfold[open] .xrf-go::after{content:''}
.xrfold[open] .xrf-go{font-size:0;border:0;padding:0}
.xrfold[open] .xrf-go::before{content:'hide';font-size:10.5px}
.xrf-in>.related:first-child{margin-top:7px}

/* ---------- when the search finds nothing ----------
   The page knew two things it was not saying: that All mode was the reason, and that the
   words were nearly a provision code. It said 'try fewer words' and kept both.

   Offers, not results: the same quiet ghost button used elsewhere, sitting on the gold
   left rule that marks the other place on this page where the site speaks to the reader
   in its own voice rather than the regulation's. */
.rescue{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 16px;
  padding:11px 14px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:10px}
.rescue-l{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase}
.rescue .btn-ghost{padding:6px 13px;font-size:12px}

/* The gutter. Top-level enumerators hang out into it as mono pills, so the enumeration is
   read in the margin rather than inside the sentence. Deeper levels stay inline, indented,
   or nested lists would collide in the same 74px of margin.

   There WAS a hairline down the gutter, the full height of the provision, in the
   instrument's colour. It has been removed. In a regulation a vertical rule beside the text
   means one thing — this passage changed in the current revision — and none of this text
   has. A reader who knows the convention was being told, on every provision in both
   documents, that the whole corpus had just been amended. The margin is doing the same job
   without it: the pills mark the enumeration, and the spine on the card edge still carries
   the instrument's colour and line style. */
.body{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 32px 28px 106px;font-size:15.5px;font-weight:300;line-height:1.75;
  box-shadow:var(--shadow);color:var(--ink)}
.body .ln{white-space:pre-wrap;padding-left:calc(var(--d,0)*26px);line-height:1.75;margin:.16em 0}
/* a numbered paragraph hangs: wrapped lines align with the first word, not the marker */
.body .ln.hang{display:flex;align-items:baseline;gap:.55em}
.body .ln.hang>.mk{flex:0 0 auto;min-width:2.1em}
.body .ln.hang>.tx{flex:1 1 auto;min-width:0;white-space:pre-wrap}
/* top-level markers step out into the gutter */
.body .ln.hang.top{position:relative}
.body .ln.hang.top>.mk{position:absolute;left:-58px;top:0;width:46px;min-width:0;text-align:right;
  font-size:12px;color:var(--navy);background:var(--panel);padding:1px 6px;border-radius:6px;
  border:1px solid var(--line);box-shadow:0 1px 0 rgba(16,32,52,.03)}
/* AMC used to take a cream chip and gold text here. Removed: it was the one marker of the
   three carrying a visible ground, and the instrument is already said by the masthead and
   the spine. All three now read the same — the card's own colour behind a hairline, and the
   letter in ink. */
@media(max-width:820px){
  .body{padding-left:24px}
  .body .ln.hang.top>.mk{position:static;width:auto;min-width:2.1em;text-align:left;
    border:none;background:none;box-shadow:none;padding:0}
}
.body .ln .mk{font-weight:800;color:var(--navy);font-family:var(--mono);font-size:.9em}
/* A continuation line carries a COPY of its parent's marker, hidden. visibility, not
   display — the box must still occupy exactly the width the visible marker does, because
   that is the whole mechanism: the continuation aligns because it is the same box, not
   because someone worked out the offset. Hiding it with display:none, or omitting it and
   padding instead, would put the arithmetic back and it would drift again. */
.body .ln .mk.mkghost{visibility:hidden}
/* At the outermost level the marker is absolutely positioned into the gutter, so a hidden
   copy would be an invisible pill sitting on top of the real one. It contributes no width
   there, so it can go entirely. */
.body .ln.hang.top>.mk.mkghost{display:none}
/* subscripts as the PDF prints them — small, dropped, and never affecting line height */
.body sub,.body sup,table.data sub,table.data sup{font-size:.68em;line-height:0;position:relative}
.body sub,table.data sub{bottom:-.28em}
.body sup,table.data sup{top:-.45em}
.body .ln.gap{height:.6em}
.body .ln.hdr{font-family:var(--display);font-weight:800;color:var(--navy);padding-top:1em;font-size:1.02em}
.body .ln.hdr:first-child{padding-top:0}
.body .ln.subhl{background:#fff8e1;border-radius:5px}
.body .ln.blk{background:#fafbfc}
.body .xr{color:var(--blue);border-bottom:1px dotted #a8c3e4}
.body b{color:var(--ink);font-weight:800}
.gapflag{color:var(--red);font-size:12px;font-style:italic}
.tblhere{font-size:12px;color:var(--navy);background:var(--gold-soft);border-left:3px solid var(--gold);
  padding:5px 12px;margin:8px 0;border-radius:0 7px 7px 0;font-weight:800}
.tsec{font-family:var(--display);margin:28px 0 11px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on);font-weight:800}
.tcap{font-size:12.5px;color:var(--on2);margin:14px 0 7px;font-weight:300;scroll-margin-top:18px}
.tcap b{color:var(--on);font-weight:800}
/* Both halves of the round trip: the promise in the paragraph, and the way back from the
   thing itself. Given a pointer and an underline on hover so they read as controls — a
   line that only LOOKS like a label does not get clicked. */
.tblhere a.tbljump,.tblhere a.figjump{color:inherit;cursor:pointer;text-decoration:none}
.tblhere a.tbljump:hover,.tblhere a.figjump:hover{text-decoration:underline}
.backref{display:inline-block;margin-left:10px;font-size:11px;font-weight:700;color:var(--navy);
  cursor:pointer;border-bottom:1px dotted var(--gold);line-height:1.2}
.backref:hover{color:var(--gold-ink,var(--navy));border-bottom-style:solid}
.figcap .backref{margin-left:12px}
/* the picture is its own way back, so say so on hover */
.figimg.clickback{cursor:pointer}
/* The landing cue. This class was already being added and removed on every figure jump
   but was never defined anywhere, so the jump landed you somewhere with no indication of
   which of eight formulae you had been sent to. */
@keyframes flashmark{
  0%{background:var(--gold-soft);box-shadow:0 0 0 6px var(--gold-soft)}
  100%{background:transparent;box-shadow:0 0 0 6px transparent}
}
.figflash{animation:flashmark 1.4s ease-out;border-radius:8px;scroll-margin-top:18px}
.figbox{scroll-margin-top:18px}
.tblhere a.tbljump.figflash,.tblhere a.figjump.figflash{border-radius:6px}
@media(prefers-reduced-motion:reduce){.figflash{animation:none;outline:2px solid var(--gold);outline-offset:3px}}
.twrap{overflow-x:auto;border:1px solid var(--line2);border-radius:12px}
/* mirrored scrollbar above a wide table, so you can pan sideways without first
   scrolling to the bottom of the table to reach its own bar */
.tscroll{overflow-x:auto;overflow-y:hidden;height:14px;margin-bottom:5px;
  border-radius:7px;background:var(--panel2)}
.tscroll::-webkit-scrollbar{height:10px}
.subnote{font-size:12.5px;font-weight:300;color:var(--ink2);background:var(--gold-soft);
  border:1px solid #eeddb8;border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  padding:11px 15px;margin:16px 0}
.subnote code{background:var(--panel);border:1px solid var(--line2);padding:1px 6px;border-radius:5px}
table.data{border-collapse:collapse;width:100%;font-size:13px;font-weight:300;background:var(--panel)}
/* a wide table keeps readable column widths and scrolls instead of squeezing */
table.data.wide{width:100%;table-layout:fixed}
table.data.wide th,table.data.wide td{overflow-wrap:break-word;padding:7px 6px}
table.data th,table.data td{border:1px solid var(--line2);padding:8px 11px;vertical-align:top;text-align:left}
/* The header carries its own shade so it reads as a different kind of row, and lifts
   slowly to a lighter tint of the same colour on hover — a quick flash on a 5,000-cell
   table is noise, so this is deliberately unhurried. */
table.data th{background:var(--th-bg);color:var(--navy);font-weight:800;
  border-color:var(--line2);transition:background-color .45s cubic-bezier(.4,0,.2,1)}
table.data thead:hover th,table.data tr:first-child:hover th{background:var(--th-bg-hover)}
table.data th:hover{background:var(--th-bg-hot)}
@media(prefers-reduced-motion:reduce){table.data th{transition:none}}
table.data tr:nth-child(even) td{background:var(--panel2)}
/* The footnote label on a table. The body of the table is font-weight:300, and the PDF
   prints "Note 2" in the same plain face as the data beside it, so the qualification
   read as just another row. Weight is what separates a label from content here. */
table.data .tnote{font-weight:800;color:var(--navy)}

/* ---------- the related instruments, drawn as provisions ----------
   An AMC or a GM opened beneath its rule used to arrive as unstyled markup: a bare line of
   text above a body, with nothing to say where one instrument ended and the next began. It
   is the same kind of object as the rule above it, so it is drawn the same way — the
   instrument's own colour across the masthead, the same joined card, the same coloured
   spine down the side. Smaller only: less padding, one line of masthead instead of four,
   because the rule is what you came for and these hang off it.

   Shares --mast-bg / --mast-ink / --mast-dim / --mast-line with .sheet, set once further
   up, so the two cannot drift apart. */
.subsheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);margin:14px 0 0}
/* ".sub-mast", ".sub-code", ".sub-pg" and ".sub-open" were here: a flex row holding an
   outlined chip, the code in 13px mono, the PDF page in 10.5px caps, and a link reading
   "Open on its own →". They are gone with item 14. The nested instrument is drawn with
   .mast, the same masthead the rule above it uses — so the title is on it, and the two
   renderings of one instrument can no longer disagree about what it is called.

   .subsheet keeps its own border, radius, shadow, spine and top margin. That is what still
   says "this hangs off the rule above" now that the masthead no longer says it by being
   smaller. */
/* The body is the same component the rule uses, joined to the masthead above it rather than
   floating below it as a second card — the seam is closed exactly as it is on .sheet.
   Same padding as a rule's body too, so a GM's first line starts on the same measure as
   the rule's does rather than 12px in from it. */
.subsheet>.body,.subsheet>.note{border:0;border-radius:0;box-shadow:none;margin:0}
.subsheet>.body{padding:28px 32px 28px 106px}
/* The spine, the same weight and style as the full sheet's. The kind is carried in text by
   the chip and the code beside it, which is what survives greyscale and printing. */
.subsheet.k-IR{border-left:3px solid var(--ir)}
.subsheet.k-AMC{border-left:3px solid var(--amc)}
.subsheet.k-GM{border-left:3px solid var(--gm)}
.subsheet.k-Appendix{border-left:3px solid var(--appx)}
.subsheet.k-Article{border-left:3px solid var(--art)}
.subsheet.k-Definitions{border-left:3px solid var(--defn)}

/* ---------- page numbers that open the source PDF ----------
   Every "PDF page 1802" in the app is a link into the document it was read from. The number
   keeps the colour of the line it sits in, because it appears on the navy masthead, in a
   table caption, in a footnote and inside an Ask citation — a fixed link blue would be
   wrong or invisible in at least one of those. A dotted underline marks it instead, which
   reads on any ground, and it commits to the gold on hover.

   The arrow says it leaves the page, which matters because these open in a new tab: losing
   your place in a provision to look at the PDF of that same provision would be absurd. */
a.pglink{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;
  cursor:pointer;transition:color .14s,border-color .14s}
a.pglink:hover{color:var(--gold);border-bottom-color:var(--gold);text-decoration:none}
a.pglink:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
a.pglink::after{content:"\2197";font-size:.8em;margin-left:.15em;opacity:.6;vertical-align:.08em}
/* .sepnote was the gold rule between two instruments sharing a label. Its markup is gone:
   each sub-sheet states its own page in its own header. */
.tnote{font-size:12px;color:var(--on-muted);margin:7px 0 4px;padding-left:9px;border-left:2px solid var(--line2);font-weight:300}
.contdiv{font-size:11.5px;color:var(--navy);background:var(--panel2);padding:4px 11px;font-weight:800;border-left:3px solid var(--gold)}
.note{font-size:12px;color:var(--on-muted);margin-top:9px;font-weight:300}
.figbox{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--panel);box-shadow:var(--shadow)}
.figcap{font-weight:300;color:var(--navy);font-size:13px;margin-bottom:9px}
.figcap b{font-family:var(--display);font-weight:800;font-size:16px;color:var(--navy)}
.figimg{max-width:100%;height:auto;display:block;border-radius:6px;border:1px solid var(--line)}

/* ---------- browse tree ---------- */
details.tpart,details.tsec2{border:1px solid #e6ddc8;border-radius:11px;margin-bottom:8px;
  background:var(--panel);overflow:hidden;box-shadow:var(--shadow);color:var(--ink)}
details.tsec2{margin:6px 0;background:var(--panel2);box-shadow:none;border-radius:9px}
summary{cursor:pointer;padding:12px 14px;list-style:none;display:flex;align-items:center;gap:10px;
  font-weight:800;color:var(--ink);font-size:13.5px}
summary::-webkit-details-marker{display:none}
summary:hover{background:var(--panel2)}
.caret{width:6px;height:6px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);transition:.15s}
details[open]>summary .caret{transform:rotate(45deg)}
.tcount{margin-left:auto;color:var(--faint);font-family:var(--mono);font-size:10.5px;font-weight:400}
.tbody{padding:6px 11px 12px}
.tcode{font-family:var(--mono);color:var(--navy);font-weight:700;font-size:12.5px;flex:none}
/* clamp rather than let a long provision title run to six lines in a narrow column */
.ttl2{color:var(--muted);font-size:12.5px;font-weight:300;flex:1 1 auto;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
details.tsec2>summary{align-items:flex-start}
details.tsec2>summary .caret{margin-top:6px}
.tleaf{display:flex;align-items:baseline;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;flex-wrap:wrap}
.tleaf:hover{background:var(--panel)}
.tleaf.on{background:var(--brand-surface)}
.tleaf.on .tlc,.tleaf.on .tlt{color:#fff}
/* A joined heading — "CAT.POL.A.330 & CAT.POL.A.335" — is more than twice the width of
   a single code, and flex:none would have pushed the title out of a 360px sidebar.
   Let the code wrap and the row grow instead of clipping the provision's name. */
.tlc{font-family:var(--mono);color:var(--navy);font-size:12px;font-weight:700;
  flex:0 1 auto;overflow-wrap:anywhere;line-height:1.35}
/* min-width:0 is what lets a flex child actually ellipsis instead of wrapping */
.tlt{color:var(--muted);font-size:12.5px;font-weight:300;flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tleaf .kindchip{flex:none}
/* CAR-FCL groups its Subparts into numbered Sections; CAR-AIR OPS has none, and this simply
   does not appear there. A rule, not a card: the tree is already three levels deep and a
   fourth box inside a box would read as another thing to open rather than a label on what
   follows. */
.tsecthd{display:flex;align-items:baseline;gap:9px;margin:15px 0 6px;padding:0 2px 6px;
  border-bottom:1px solid var(--line2)}
.tsecthd:first-child{margin-top:2px}
.tsecthd-n{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
  background:var(--gold-soft);border:1px solid rgba(176,134,42,.3);border-radius:5px;
  padding:2px 6px}
.tsecthd-t{font-size:11.5px;font-weight:700;color:var(--ink2);line-height:1.3;min-width:0}

/* The figures grid stood here — .figgrid and .figcard, the cards the Figures page drew.
   The page is a filter now and its results are ordinary register rows. */

/* ---------- section picker ----------
   The dropdowns read left to right as one sentence — Regulation, Part, then the levels
   under it — so the chevrons between them are part of the control, not decoration. They
   wrap onto a second line rather than shrinking, because a truncated Part label
   ("Cover Regulation — Art…") is worse than a second row. */
/* ---------------- Sections: the live tree ----------------
   Replaces the cascade (four dropdowns, an Add button and a separate Apply). The tree IS
   the control: what you see is the structure of the regulation, and what you tick is in
   force. See renderSections. */
.st-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px}
.st-find{display:flex;align-items:center;gap:8px;min-width:0;height:42px;flex:1 1 320px;
  padding:0 12px;background:var(--panel);border:1px solid var(--line2);border-radius:11px}
.st-find:focus-within{border-color:var(--navy);box-shadow:0 0 0 4px rgba(13,43,78,.07)}
.st-find>span{color:var(--faint);flex:none}
.st-find input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13.5px;
  color:var(--ink);outline:none}
.st-x{flex:none;width:24px;height:24px;border:0;background:none;cursor:pointer;border-radius:6px;
  color:var(--faint);font-size:18px;line-height:1}
.st-x:hover{background:var(--line);color:var(--ink)}
.st-acts{display:flex;gap:8px;flex:none}
.st-acts .btn-ghost{padding:8px 14px;font-size:12px}

/* What is in force, stated above the tree rather than left to be counted off the ticks. */
.st-sum{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px;padding:11px 15px;
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 11px 11px 0;
  background:var(--gold-soft);font-size:13px;font-weight:300;color:var(--ink2)}
.st-sum b{color:var(--navy);font-weight:800}
.st-sum-none{color:var(--muted)}
.st-sum .btn-ghost{margin-left:auto;padding:6px 13px;font-size:12px}

/* Two regulations, two columns. Stacked, CAR-FCL began below 3,486 provisions of CAR-AIR
   OPS and you had to scroll a whole document to reach the other one. Each column scrolls
   independently, so opening CAT does not move CAR-FCL. */
.sectree{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
/* One regulation chosen: the single tree takes the whole width rather than sitting in a
   half-width column with the other half empty. */
.sectree.one{grid-template-columns:1fr}
.st-regpick{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;max-width:420px}
.st-regpick label{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint)}
.st-regpick select{height:44px;padding:0 34px 0 13px;border:1px solid var(--line2);
  border-radius:11px;background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;
  cursor:pointer;appearance:none;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.st-regpick select:focus{outline:none;border-color:var(--navy)}
.st-col{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  overflow:hidden;min-width:0;display:flex;flex-direction:column}
/* No inner scroll. A list that scrolls inside a box on a page that also scrolls gives the
   reader two scrollbars and hides its own end: you cannot see how much of a Part you have
   ticked without scrolling a panel you may not have noticed is scrollable. The page is
   long instead, which is the honest shape of the thing. */
.st-body{min-height:0}
@media(max-width:900px){
  /* below this the two columns are too narrow for a nested tree with counts, so they stack
     — and the max-height comes down so the second one is still reachable by scrolling the
     page rather than being pushed a screen and a half down it */
  .sectree{grid-template-columns:1fr}
  .st-col{max-height:none}
}
/* the regulation's own line: a heading, not something to tick — a whole regulation in
   scope is the same as no scope at all, and offering it as a choice only invites that */
.st-reg{display:flex;align-items:baseline;gap:10px;padding:11px 15px;background:var(--panel2);
  border-bottom:1px solid var(--line);flex:none}
.st-reg>span:first-child{font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--navy)}
.st-regn{margin-left:auto;font-size:11px;color:var(--muted);font-weight:300}

/* --sd is the depth. Indent is padding on the row, not a nested margin, so the hover and
   the ticked background still run the full width at every level. */
.st-row{display:flex;align-items:center;gap:9px;padding:6px 15px;
  padding-left:calc(15px + var(--sd,0)*22px);transition:background-color .12s}
.st-row:hover{background:var(--panel2)}
.st-row.on{background:var(--gold-soft)}
.st-tw{flex:none;width:20px;height:20px;border:0;background:none;cursor:pointer;padding:0;
  color:var(--muted);font-size:13px;line-height:1;border-radius:5px;
  transition:transform .16s,color .14s}
.st-tw.open{transform:rotate(90deg)}
.st-tw:hover{color:var(--navy);background:var(--line)}
.st-tw.ghost{cursor:default;pointer-events:none}
.st-tw:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.st-lbl{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto;cursor:pointer}
.st-lbl input{margin:0;accent-color:var(--navy);cursor:pointer;flex:none}
.st-lbl input:disabled{cursor:default}
.st-name{font-size:13px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.st-row.on .st-name{font-weight:700;color:var(--navy)}
/* a Part is a mono code, the levels under it are prose — keep the codes monospaced so a
   column of them lines up the way it does in the document */
.st-row[style*="--sd:0"] .st-name{font-weight:700}
.st-n{flex:none;font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.st-row.on .st-n{color:var(--note-ink)}
.st-kids{display:block}
@media(max-width:620px){
  .st-row{padding-left:calc(10px + var(--sd,0)*14px);padding-right:10px}
  .st-acts{width:100%}
  .st-acts .btn-ghost{flex:1}
}

/* saved selections */
.presets{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.presetrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px}
.presetrow+.presetrow{border-top:1px solid var(--line)}
.presetrow:hover{background:var(--panel2)}
.pname{font-weight:700;color:var(--navy);font-size:13.5px}
.pmeta{font-size:11.5px;color:var(--muted);font-weight:300}
.presetrow .btn-ghost{margin-left:0;padding:5px 12px;font-size:12px}
.presetrow .pload{margin-left:auto}
.pinput{font:inherit;font-size:13px;color:var(--on);background:var(--panel);
  border:1px solid var(--line2);border-radius:9px;padding:9px 13px;min-width:260px;flex:0 1 320px}
.pinput:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--navy)}
/* Quiet, but not so quiet it stops being a control: --faint is 3:1 on the light panel,
   which is under the threshold for something you are meant to be able to aim at. */
.slx{flex:none;border:0;background:none;cursor:pointer;font-size:17px;line-height:1;
  color:var(--muted);padding:0 2px;transition:color .14s}
.slx:hover{color:var(--uc)}
.profbar .pb-n{font-family:var(--mono);font-size:11.5px;color:#8a6413;flex:none}
.profbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--gold-soft);
  border:1px solid #eeddb8;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  padding:10px 15px;margin-bottom:14px;font-size:12.5px;font-weight:300;color:var(--ink2)}
.profbar .pb-t{font-weight:800;color:#8a6413;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.profbar .pb-v{color:var(--navy);font-weight:800}
.profbar a{margin-left:auto;font-weight:800;white-space:nowrap}
.profbar a+a{margin-left:0}

/* ---------- pages / forms ---------- */
.page h1{font-family:var(--display);font-size:44px;color:var(--on);font-weight:800;
  letter-spacing:-.03em;margin:6px 0 14px;line-height:1.05}
.page h2{font-family:var(--display);font-size:19px;margin-top:30px;color:var(--on);font-weight:800}
.page p{color:var(--ink2);max-width:740px;font-weight:300}
.page code{background:var(--panel2);padding:2px 7px;border-radius:5px;color:var(--navy);border:1px solid var(--line)}
.form{max-width:640px;display:flex;flex-direction:column;gap:14px;margin-top:18px}
.form>label,.form .frow label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;color:var(--navy)}
.form input,.form select,.form textarea{font-family:var(--body);font-size:15px;font-weight:300;
  padding:12px 14px;border:1px solid var(--line2);border-radius:11px;background:var(--panel);color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(13,43,78,.07)}
.form .frow{display:flex;gap:13px}.form .frow label{flex:1}
/* "optional" sits inside the field's own label, so it is read with the field rather than
   found later. Lower case and unbolded against the label's caps, because it qualifies the
   label — it is not a second label. */
.lopt{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted);font-size:11px}
/* What the server does with a name and an email, stated where they are being asked for
   rather than in a policy page nobody opens. */
.fbprivacy{font-size:12.5px;font-weight:300;color:var(--muted);margin-top:-4px;
  padding-left:11px;border-left:2px solid var(--line2)}
/* A stated gap in the corpus. Deliberately NOT styled as an error — nothing has gone wrong,
   the tool is telling you what it does not contain. Gold, the note colour, on the warm
   ground, with the same left rule the other advisory notes use. Bold opener so the subpart
   name is readable at a glance, because the one thing a reader must take away is "this
   silence is mine, not the regulation's". */
.gapnote{display:block;margin:0 0 14px;padding:11px 15px;border-left:3px solid var(--gold);
  background:var(--gold-soft);border-radius:0 9px 9px 0;font-size:13px;font-weight:300;
  color:var(--ink)}
.gapnote b{display:block;font-weight:800;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--note-ink);margin-bottom:4px}
.gapnote span{display:block;line-height:1.55}
.fbbtns{display:flex;gap:11px;margin-top:6px;flex-wrap:wrap}
.formmsg{font-size:13px;margin-top:7px;font-weight:300}
.formmsg.ok{color:var(--green)} .formmsg.err{color:var(--red)}
/* Not an error — the section is already covered, which is a statement about the list
   rather than something the reader did wrong. Gold, the tool's own note colour, taken from
   the token so it lightens in the dark theme rather than sinking into the background. */
.formmsg.warn{color:var(--note-ink)}
/* A button that cannot do anything yet says so, rather than doing nothing when pressed. */
.btn:disabled,.btn-ghost:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover,.btn-ghost:disabled:hover{filter:none}

/* ---------- admin ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin:18px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.stat b{display:block;font-family:var(--display);font-size:32px;font-weight:800;color:var(--navy)}
.stat span{color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.adtable{width:100%;border-collapse:collapse;font-size:13px;margin-top:9px;font-weight:300}
.adtable th,.adtable td{border-bottom:1px solid var(--line);padding:9px;text-align:left;vertical-align:top}
.adtable th{color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.pill{font-size:11px;padding:3px 10px;border-radius:999px;border:1px solid var(--line2);cursor:pointer;color:var(--ink2)}
.pill.new{color:#8a6413;border-color:#eeddb8;background:var(--gold-soft)}

/* ---------- figures dropdown panel ---------- */
/* .figpanel and .figrow styled the figures dropdown, which nothing had opened for some
   time: there was no button for it and no #figPanel in the markup. Gone with the page. */

/* ---------- disclaimer + footer ---------- */
/* The scrim used to be a wall: navy at .55 over a 3px blur, so the first thing anyone saw of
   this site was a notice floating on a smear. The notice says the site is an unofficial
   reader of published regulation — and the fastest way to make that claim legible is to let
   the visitor SEE the thing being described while they read about it.

   So it is lifted to the point where the page behind is readable and the box in front is
   still unmistakably in front: .22 navy and a 1px blur, with the box's own shadow and gold
   top edge doing the separating instead of the scrim. Slightly heavier on the dark theme,
   where the same alpha over a near-black page is invisible. */
.modal-ov{position:fixed;inset:0;background:rgba(13,43,78,.22);display:none;align-items:center;
  justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(1px)}
:root[data-theme="dark"] .modal-ov{background:rgba(4,10,18,.42)}
/* The page behind does not scroll while the notice is up. */
body.modal-open{overflow:hidden}
.modal-bx{background:var(--panel);max-width:580px;border-radius:20px;padding:30px 32px;
  border:1px solid var(--line2);box-shadow:0 30px 80px rgba(13,43,78,.45);
  border-top:4px solid var(--gold)}
.modal-bx .mic{font-size:24px;color:var(--gold)}
.modal-bx h2{font-family:var(--display);margin:8px 0 12px;font-size:26px;font-weight:800}
.modal-bx p{font-size:14px;line-height:1.6;color:var(--ink2);margin:0 0 13px;font-weight:300}
/* ==================================================================================
   THE FOOTER
   Navy on the light theme — the opposite of the page it closes. A footer the same colour as
   the body is not a footer, it is where the text happens to stop.
   ================================================================================== */
.foot{margin-top:44px;background:var(--ft-bg);color:var(--ft-ink);
  border-top:3px solid var(--gold)}
/* Light page, navy footer. On the DARK theme that same navy is the page's own colour — 0.08
   luminance against the body's 0.07 — so the footer vanished into the bottom of the screen
   rather than closing it. Inverted there instead: the rule is "opposite the page", not "navy",
   and the two happen to coincide only in the light theme. */
/* Solid, not translucent. The first version dimmed the text with alpha, which reads fine
   until it is measured: rgba(231,238,246,.72) composited on this navy is 3.8:1, and the
   legal line at .55 was 3.1 — both under the 4.5 body text needs. Every value below is
   measured against the ground it actually sits on, and the ratio is written beside it so
   the next person to change one knows what it has to clear. */
:root{
  --ft-bg:var(--brand-surface);  /* navy, 5.0 against the light page */
  --ft-ink:#e7eef6;              /* 12.2 */
  --ft-dim:#dbe6f2;              /* 11.3 — links and the strapline */
  --ft-quiet:#c3d2e4;            /* 9.3 — the legal line */
  --ft-gold:#d9b463;             /* 7.2 — the brand gold is 4.3 here, too low for a label */
  --ft-line:rgba(255,255,255,.14)}
:root[data-theme="dark"]{
  --ft-bg:#e7eef6;               /* paper, 8.1 against the dark page */
  --ft-ink:#16232f;              /* 13.7 */
  --ft-dim:#31424f;              /* 8.9 */
  --ft-quiet:#4a5b6b;            /* 6.0 */
  --ft-gold:#8a6413;             /* 4.6 */
  --ft-line:rgba(13,43,78,.16)}
.ft-in{max-width:1180px;margin:0 auto;padding:40px 26px 26px}
.ft-brand{margin-bottom:30px}
.ft-name{display:block;font-family:var(--body);font-size:19px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ft-ink)}
.ft-tld{color:var(--gold);font-weight:700;letter-spacing:.12em}
.ft-sub{display:block;margin-top:9px;max-width:56ch;font-size:13px;font-weight:300;
  color:var(--ft-dim);line-height:1.6}
.ft-cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding-bottom:26px;border-bottom:1px solid var(--ft-line)}
.ft-col h4{margin:0 0 11px;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ft-gold)}
.ft-col a{display:block;margin-bottom:8px;font-size:13.5px;font-weight:300;
  color:var(--ft-dim);cursor:pointer;text-decoration:none;width:fit-content;
  border-bottom:1px solid transparent;transition:border-color .14s,color .14s}
.ft-col a:hover{color:var(--ft-ink);border-bottom-color:var(--gold)}
.ft-col a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.ft-note{display:block;margin-top:11px;font-family:var(--mono);font-size:10.5px;
  color:var(--ft-quiet)}
/* The legal line is quieter than everything above it and says two different things: what is
   ours, and what is not. */
.ft-legal{display:grid;gap:7px;padding-top:20px;font-size:11.5px;font-weight:300;
  color:var(--ft-quiet);line-height:1.6;max-width:82ch}
@media(max-width:620px){.ft-in{padding:30px 18px 22px}.ft-cols{gap:20px}}

/* ---------- print ----------
   A provision is often printed or emailed. On paper the chrome is noise, colour is
   unreliable, and a hyperlink says nothing — so cross-references are expanded to their
   code in the text, and a masthead is never allowed to separate from its first line. */
@media print{
  @page{margin:16mm}
  /* chrome off the page; the drawer and scrim no longer exist */
  #topbar,.foot,.wsside,.profbar,.tscroll,.crossnote,.modal-ov{display:none !important}
  body{background:#fff;font-size:11pt;color:var(--ink)}
  .secttl,.tsec,.page h1,.page h2,.chd h1{color:var(--navy)}
  .rcount,.spin,.note,.tnote,.tcap{color:var(--muted)}
  body.wsmode #shell{height:auto;overflow:visible;display:block}
  body.wsmode #view{overflow:visible;padding:0}
  .workspace{display:block}
  .wsmain{height:auto;overflow:visible;padding:0}
  .sidehd{position:static}
  .wsmain>*{max-width:none}
  .sheet,.subsheet,.body,.figbox,.twrap{box-shadow:none;border-radius:0}
  .sheet,.subsheet{border:1px solid #000;break-inside:avoid}
  /* The masthead's instrument colour is a solid block of ink on paper, and it tells a
     reader holding the page nothing the words above it do not. Print it white. The
     sub-sheets now carry the same masthead, so they get the same treatment. */
  .mast{background:#fff !important;color:#000;border-bottom:2px solid #000;padding:0 0 8pt}
  .mast h1,.mast-code{color:#000}
  .kindchip{color:#000;border-color:#000;background:none}
  .mast-reg,.mast-meta{color:#333}
  .mast,.mast+.sheet-in{break-after:avoid}
  .body{border:none;padding:10pt 0 0 74px}
  .body .ln.hang.top>.mk{border:none;background:none;box-shadow:none}
  /* a link is useless on paper — print the code it points at */
  .body .xr::after{content:" [" attr(data-c) "]";font-size:.82em;color:#333}
  .body .xr{color:#000;border-bottom:none;font-weight:700}
  table.data{font-size:9pt}
  table.data.wide{table-layout:auto;width:100%}
  .twrap{overflow:visible;border-color:#000}
  tr,.figbox,.tcap{break-inside:avoid}
}

/* ---------- responsive ---------- */
/* Stacking begins at 760px rather than 1080. An iPad in PORTRAIT is 820 wide and was
   falling into the phone layout — the whole provision list above the text, so opening a rule
   meant scrolling past hundreds of rows to reach it. 820px is ample for two panes with a
   narrower list, which is what a tablet reader wants; below 760 there genuinely is not room
   and it stacks as before. */
@media(max-width:760px){
  /* stack the panes and go back to one scrolling document */
  body.wsmode #shell{height:auto;overflow:visible;display:block}
  body.wsmode #view{overflow:visible;padding:14px 18px 30px}
  body.wsmode .foot{display:block}
  .workspace{height:auto;grid-template-columns:1fr}
  .wsside{height:auto;display:block;overflow:visible;border-right:none;
    border-bottom:1px solid var(--line);background:transparent;padding:0 0 18px;
    margin-bottom:18px}
  /* The window is the scroller down here, so the list must not open a second one
     inside it — a short box with its own bar in the middle of a scrolling page. */
  #tree{flex:none;overflow:visible;padding-bottom:0}
  .wsmain{height:auto;overflow:visible;padding:0}
}
/* "@media(max-width:1100px){.topnav{display:none}}" was here. It cut the navigation at a
   round number and put nothing in its place, so below 1100px the site had no way to reach a
   section at all. fitTopbar now folds the nav into the "More" menu instead, at the measured
   width where the links genuinely stop fitting — see the navall stage. */
@media(max-width:900px){
  #view{padding:12px 16px 28px}
  .hero{padding:56px 18px 44px;border-radius:20px}
}
@media(max-width:680px){
  .brand-name{font-size:15px}
  /* ".topsearch{order:3;flex-basis:100%}" was here — it PUT the field on its own row below
     680px, which is the second row the reader was complaining about, arriving by a different
     route than the one fitTopbar guards. The field now shrinks in place instead, and if it
     genuinely cannot fit, fitTopbar folds the nav into More to make room. */
  .hactions{margin-left:auto;display:flex;align-items:center;gap:10px}
  .dhead{padding:16px 17px}.dhead h1{font-size:22px}
  .body{padding:18px 16px}
  .page h1{font-size:32px}
  table.data{font-size:12px}
}
@media(max-width:430px){
  .hero-mid h1{font-size:40px}
}

/* ==================================================================================
   COMPLIANCE MATRIX
   ================================================================================== */
.cwrap{max-width:1400px;margin-left:auto;margin-right:auto}
.chd{margin:4px 0 26px}
.chd h1{font-family:var(--display);font-size:clamp(32px,4.6vw,56px);line-height:1;letter-spacing:-.02em;
  margin:12px 0 14px;color:var(--on);font-weight:200}
.chd h1 strong{font-weight:800}
.chd .kicker{color:var(--gold-soft);letter-spacing:.28em;font-size:10.5px;font-weight:800;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:11px}
.chd .kicker::before{content:"";width:24px;height:2px;background:var(--gold);flex:none;border-radius:2px}
.clede{color:var(--on2);font-weight:300;max-width:70ch;font-size:15px}
.cgrid{display:grid;gap:16px;grid-template-columns:1.55fr 1fr;align-items:start}
@media(max-width:960px){.cgrid{grid-template-columns:1fr}}
.cpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.cpanel-hd{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.cstep{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.cbtns{margin-left:auto;display:flex;gap:7px}
.minibtn{appearance:none;font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:6px 11px;color:var(--ink2)}
.minibtn:hover{border-color:var(--navy);color:var(--navy)}
.cdrop{border:1.5px dashed var(--line2);border-radius:12px;padding:20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:12px;background:var(--panel2)}
.cdrop.on{border-color:var(--gold);background:var(--gold-soft)}
.cdrop b{font-size:14px;color:var(--navy);font-weight:800}
.cdrop span{font-size:12px;color:var(--muted);font-weight:300}
.ctext{width:100%;min-height:240px;resize:vertical;border:1px solid var(--line2);border-radius:11px;
  padding:13px 14px;font-family:var(--mono);font-size:12.5px;line-height:1.62;color:var(--ink);
  background:var(--panel2);outline:none}
.ctext:focus{border-color:var(--navy);background:var(--panel)}
.cmeta{margin-top:9px;font-size:12px;color:var(--muted);font-weight:300;min-height:17px}
.cmuted{color:var(--faint);font-weight:300;font-size:12.5px}
.creport>.cmuted{color:var(--on-muted)}
.chelp{font-size:12.5px;color:var(--muted);font-weight:300;margin:0 0 13px}
.creport .chelp{color:var(--on-muted)}
.chelp em{color:var(--ink2);font-style:normal;font-weight:800}
.cparts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px;align-items:center}
.cpart{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:9px;
  padding:6px 10px;cursor:pointer;background:var(--panel2);font-size:12.5px}
.cpart.on{border-color:var(--navy);background:var(--blue-soft)}
.cpart input{margin:0;accent-color:var(--navy)}
.cpart b{font-family:var(--mono);font-weight:700;color:var(--navy);font-size:12px}
.cpart span{color:var(--muted);font-size:11px;font-weight:300}
.ctoggle{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink2);font-weight:300;margin-bottom:15px}
.ctoggle input{accent-color:var(--navy)}
.cgo{width:100%;justify-content:center}
.cgo:disabled{opacity:.45;cursor:not-allowed}

/* --- the report ------------------------------------------------------------------ */
.creport{margin-top:30px}
.csum{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between;
  background:linear-gradient(148deg,var(--brand-surface2),var(--brand-surface) 62%);border-radius:20px;
  padding:26px 30px;color:#fff;box-shadow:var(--lift)}
.cbig b{font-family:var(--display);font-size:clamp(46px,6vw,74px);font-weight:800;line-height:.95;display:block}
.cbig b i{font-style:normal;font-size:.42em;font-weight:300;color:var(--gold);margin-left:3px}
.cbig span{display:block;color:#a9bed4;font-size:13px;font-weight:300;max-width:34ch;margin-top:7px}
.cnums{display:flex;gap:0;flex-wrap:wrap}
.cn{padding:0 22px;border-right:1px solid rgba(255,255,255,.14);text-align:center}
.cn:last-child{border-right:none}
.cn b{display:block;font-family:var(--display);font-size:30px;font-weight:800;line-height:1.15}
.cn span{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7f97b2}
.cn.ok b{color:#6ee7a8}
.cn.warn b{color:#f0c66b}
.cn.bad b{color:#ff9d9d}
.cn.flag b{color:var(--gold)}
.cwarn{background:var(--gold-soft);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  padding:11px 15px;font-size:12.5px;color:var(--ink2);font-weight:300;margin-top:14px}
.cparts-out{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cpo{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 15px;box-shadow:var(--shadow)}
.cpo-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.cpo-hd b{font-family:var(--mono);font-size:13px;color:var(--navy);font-weight:700}
.cpo-hd span{font-size:11.5px;color:var(--muted);font-weight:300}
.cbar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--line)}
.cbar i{display:block;height:100%}
.cbar i.ok{background:var(--green)}
.cbar i.warn{background:var(--gold)}
.cbar i.bad{background:#e5b4b4}
.cct{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);margin-left:7px}
.cfind{display:grid;gap:11px}
.cf{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 11px 11px 0;padding:14px 16px;box-shadow:var(--shadow)}
.cf-hd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:5px}
.cf-code{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--navy);cursor:pointer}
.cf-code:hover{text-decoration:underline}
.cf-t{font-size:13.5px;color:var(--ink2);font-weight:300;margin-bottom:9px}
.cf-q{margin:0;padding:10px 13px;background:var(--panel2);border-left:2px solid var(--line2);
  border-radius:0 8px 8px 0;font-size:13px;font-weight:300;color:var(--ink)}
.cf-ref{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--navy);
  background:var(--blue-soft);border-radius:5px;padding:1px 6px;margin-right:8px}
.obl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-radius:20px;padding:2px 9px;border:1px solid var(--line2);color:var(--ink2);background:var(--panel2)}
.ob-mandatory{border-color:var(--navy);color:var(--navy);background:var(--blue-soft)}
.ob-recommended{border-color:var(--gold);color:#7a5c14;background:var(--gold-soft)}
.ob-permitted{border-color:var(--line2);color:var(--muted)}
.cunm{display:grid;gap:8px}
.cu{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px;
  font-size:13px;font-weight:300;color:var(--ink2)}
.cfilters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 11px;align-items:center}
.cfil{appearance:none;font:inherit;font-size:12px;font-weight:800;cursor:pointer;background:var(--panel);
  border:1px solid var(--line2);border-radius:20px;padding:6px 14px;color:var(--ink2)}
.cfil.on{background:var(--brand-surface);border-color:var(--brand-surface);color:#fff}
.cfilters .minibtn{margin-left:auto}
.cpall{margin-left:auto}
table.cmx td{font-size:12.5px;font-weight:300;vertical-align:top}
table.cmx td b{font-weight:800;color:var(--navy);display:block;font-size:13px}
.cmx-p{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.cmx-x{display:block;color:var(--muted);margin-top:4px;font-size:12px}
.cpill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-radius:20px;padding:2px 9px;margin:0 4px 3px 0}
.cpill.ok{background:#e4f4ec;color:#155f3b;border:1px solid #b9e0cc}
.cpill.warn{background:var(--gold-soft);color:#7a5c14;border:1px solid #e8d5a4}
.cpill.bad{background:#fdecec;color:#8f2020;border:1px solid #f2c9c9}
.cpill.flag{background:var(--brand-surface);color:#fff;border:1px solid var(--brand-surface)}
tr.cr-gap td{background:#fdf7f7}
.tmore{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 4px}
.tmore-n{font-family:var(--mono);font-size:11.5px;color:var(--on-muted)}

/* ---------- admin: correction editor ---------- */
.adhelp{font-size:13px;color:var(--on-muted);font-weight:300;max-width:70ch}
.adhelp code{background:rgba(255,255,255,.1);border:1px solid var(--on-line);padding:1px 6px;border-radius:5px;color:var(--on)}
.ovbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  box-shadow:var(--shadow);margin-top:14px;color:var(--ink)}
.ovhd{font-size:15px;color:var(--navy);margin-bottom:14px}
.ovhd b{font-family:var(--mono);font-weight:700}
.ovpg{display:block;font-size:11.5px;color:var(--muted);font-weight:300;margin-top:3px}
.ovlab{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--navy);margin-bottom:14px}
.ovlab span{font-weight:300;text-transform:none;letter-spacing:0;color:var(--muted);font-size:12px}
.ovlab textarea,.ovlab input{font-family:var(--body);font-size:14px;font-weight:300;color:var(--ink);
  border:1px solid var(--line2);border-radius:9px;padding:10px 12px;background:var(--panel2)}
.ovlab textarea:focus,.ovlab input:focus{outline:none;border-color:var(--navy);background:var(--panel)}
.ovtab{margin:16px 0}
.ovtab-hd{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);margin-bottom:7px}
.ovtab-hd span{font-weight:300;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:8px}
table.ovgrid td{padding:0;border:1px solid var(--line2)}
.ovcell{width:100%;min-width:120px;border:0;background:none;padding:6px 8px;font-family:var(--body);
  font-size:12.5px;font-weight:300;color:var(--ink)}
.ovcell:focus{outline:2px solid var(--navy);outline-offset:-2px;background:var(--blue-soft)}
/* a cell carrying a correction is marked, so what has been changed is obvious */
.ovcell.on{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold)}
.ovacts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  border-top:1px solid var(--line);padding-top:16px}

/* ---------- hide the browse list to read full width ---------- */
/* IT USED TO APPEAR WITH display:block, which is not something that can be animated: the
   column took 280ms to fold away and the button arrived in the same frame as the class,
   fully formed, before the space it belongs in existed. It slides out of the edge the list
   left behind instead, on the same curve and the same 280ms, so the two read as one
   movement rather than an animation and a jump.

   visibility, not display, is what keeps it out of the way when the list is open —
   opacity alone would leave an invisible button in the tab order. It is switched with a
   zero-length transition delayed until the slide has finished, which is the only way to
   have it both animate out and then genuinely disappear. */
.showlist{position:absolute;left:0;top:14px;z-index:4;cursor:pointer;
  font:inherit;font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;border:0;
  border-radius:0 9px 9px 0;padding:9px 12px 9px 10px;box-shadow:var(--shadow);
  /* A LIGHT SHADE, and the reason is the dark theme. --brand-surface is #0a1523 there and
     the page behind it is #0b131d — a navy tab on a navy page, which is why it was hard to
     find. --line2 is the palette's lightest neutral that is still a surface: #33404f on
     that dark ground and #d3dbe4 on the cream one, so it separates from the page in both
     without becoming another loud element. The text reads 8.5:1 dark, 10.9:1 light. */
  color:var(--ink);background:var(--line2);
  visibility:hidden;opacity:0;transform:translateX(-101%);
  transition:transform .16s cubic-bezier(.4,0,.2,1),opacity .14s linear,
             visibility 0s linear .16s,background-color .15s}
body.listhidden .showlist{visibility:visible;opacity:1;transform:none;
  transition:transform .16s cubic-bezier(.4,0,.2,1),opacity .14s linear,
             visibility 0s,background-color .15s}
.showlist::before{content:"\203A";font-size:15px;line-height:1;margin-right:6px;vertical-align:-2px}
.showlist:hover{background:var(--line)}
.showlist:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .showlist,body.listhidden .showlist{transition:opacity .01s,visibility 0s}
}
/* THE COLUMN NO LONGER ANIMATES. grid-template-columns is a layout property, so every
   frame of that 280ms re-laid-out the whole reading pane — and in the read view that pane
   holds a Part: 443 provisions, tens of thousands of elements, re-flowed sixty times a
   second. It was not a slow animation, it was a slideshow.

   The fold is instant now and nothing about it can stutter, because no layout happens more
   than once. What still moves is the button, on transform and opacity only — the two
   properties a compositor can animate without consulting layout at all — and it is quick
   enough that the snap beside it reads as the same gesture rather than a separate event. */
.workspace{position:relative}
body.listhidden .workspace{grid-template-columns:0 minmax(0,1fr);column-gap:0}
body.listhidden .wsside{opacity:0;pointer-events:none;padding-left:0;padding-right:0;border-right:0}
/* stacked layout has no side column to hide */
/* The stacked layout puts the list ABOVE the text rather than beside it, so hiding it
   matters MORE here, not less — on a 375px screen the tree is ~700px tall and the provision
   you tapped starts below all of it. The tab-shaped .showlist that hangs off the left edge
   of a side column has nothing to hang from once there is no column, so it becomes an
   ordinary full-width button, ordered to the top of the grid because it is last in the DOM.

   `listhidden` is the reader's own preference and is left alone; `reading` is set by the
   route and lasts only while a provision is open. */
@media(max-width:760px){
  .wsgrip{display:none !important}
  .workspace{grid-template-columns:1fr;column-gap:0}
  /* In the flow rather than hanging off an edge, so there is no edge to slide out of and
     the transform would only shift it sideways for nothing. It fades, and display goes back
     to carrying the show/hide because the button takes part in the grid here — an invisible
     one would still hold its row. */
  .showlist{display:none;position:static;order:-1;width:100%;margin:0 0 14px;
    border-radius:11px;padding:12px 15px;text-align:left;font-size:11px;
    transform:none;visibility:visible;opacity:1;transition:background-color .15s}
  body.listhidden .showlist,body.reading .showlist{display:block}
  body.listhidden .wsside,body.reading .wsside{display:none}
  body.listhidden .workspace{grid-template-columns:1fr;column-gap:0}
}

/* ---------- easter eggs ----------
   The one visible egg is a quiet line under a genuine "no matches" message, so it can
   only ever appear where the search has already failed and there is nothing to obstruct. */
.egg{font-size:12.5px;font-weight:300;color:var(--on-muted);font-style:italic;
  border-left:2px solid rgba(176,134,42,.5);padding:2px 0 2px 11px;margin:0 0 14px}
/* Five deliberate clicks on the mark riffle it once. It used to ripple the flag bars; the
   flag is gone, so it ripples the three rules instead — the aircraft holds still and the
   lines shuffle under it, which is closer to what a riffle is anyway. */
.brand-mark.riffle .bm-rules path{animation:riffle 1.4s cubic-bezier(.4,0,.2,1) both}
.brand-mark.riffle .bm-rules path:nth-of-type(2){animation-delay:.08s}
.brand-mark.riffle .bm-rules path:nth-of-type(3){animation-delay:.16s}
@keyframes riffle{
  0%{transform:translateX(0)}
  30%{transform:translateX(3px)}
  60%{transform:translateX(-2px)}
  100%{transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){.brand-mark.riffle .bm-rules path{animation:none}}

/* The bar has been pushed onto a second row: drop the search field rather
   than run a two-storey header. Toggled from measurement in fitTopbar(), not a breakpoint.
   ":not(.searchopen)" because once the field has moved into the drawer under the bar it is
   no longer on the bar, so there is nothing here to drop — and hiding it would hide the
   drawer the reader has just opened. See "the search drawer". */
#topbar.nosearch:not(.searchopen) .topsearch{display:none}

/* ---------- Ask: a flight-deck panel ----------
   Dark instrument face, gold detailing, gauge-style readouts across the header. It is the
   one screen in the tool that is not a document, so it is allowed to look like equipment
   rather than paper — but it uses the same navy and gold, so it still belongs here. */
/* A round instrument button carrying an aircraft, banked as if turning onto final.
   Deliberately not a pill with a word in it — that reads as a generic support widget from
   somewhere else, and this is part of the flight deck. */
#asklaunch{position:fixed;right:26px;bottom:26px;z-index:120;
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,#1b4c8c,#0d2b4e 70%);
  color:var(--gold);box-shadow:0 8px 26px rgba(13,43,78,.36);
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s,border-color .2s}
#asklaunch:hover{transform:translateY(-3px) scale(1.04);
  box-shadow:0 14px 34px rgba(13,43,78,.44);border-color:rgba(176,134,42,.6)}
#asklaunch:active{transform:translateY(-1px) scale(.99)}
#asklaunch:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* the bank angle: it reads as a turn rather than a static icon */
.al-plane{width:26px;height:26px;transform:rotate(-38deg);transition:transform .28s cubic-bezier(.4,0,.2,1)}
#asklaunch:hover .al-plane{transform:rotate(-20deg) translateX(1px)}
/* a faint ring, like an instrument bezel */
#asklaunch::after{content:"";position:absolute;inset:5px;border-radius:50%;
  border:1px solid rgba(176,134,42,.28);pointer-events:none}
/* while the panel is open the aircraft levels off and dims — it is now a close control */
#asklaunch.on{color:#c3d4e6}
#asklaunch.on .al-plane{transform:rotate(0deg)}
.al-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  #asklaunch,.al-plane{transition:none}
  #asklaunch:hover{transform:none}
}

#askpanel{position:fixed;right:24px;bottom:88px;z-index:121;
  width:min(620px,calc(100vw - 48px));height:min(760px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#0d2b4e;border:1px solid rgba(255,255,255,.14);border-radius:18px;
  box-shadow:0 24px 64px rgba(6,20,38,.45)}
#askpanel[hidden]{display:none}
/* Full screen exists because a long answer runs to a dozen provisions.
   No size transition, deliberately. While testing it the panel measured 1280px after
   leaving full screen where it should have been 620px — but the same harness was later
   caught reporting stale computed styles elsewhere, so that reading may have been the
   measurement rather than the browser. Either way the animation bought nothing: a
   window-to-fullscreen toggle wants to be instant, and dropping it removes any chance of
   the size being wrong at all. */
#askpanel.full{right:0;bottom:0;top:0;left:0;width:100vw;height:100vh;border-radius:0;border:0}
body.askfull{overflow:hidden}

.ap-hd{display:flex;align-items:center;gap:11px;flex:none;padding:13px 14px 13px 16px;
  background:linear-gradient(180deg,#164079,#102f57);
  border-bottom:2px solid var(--gold);color:#fff}
.ap-badge{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  flex:none;border-radius:9px;background:rgba(255,255,255,.1);color:var(--gold);
  transform:rotate(45deg)}
.ap-badge svg{transform:rotate(-45deg)}
.ap-hdtxt{display:flex;flex-direction:column;line-height:1.15;flex:none}
.ap-hdtxt b{font-size:14px;letter-spacing:.05em}
.ap-reg{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
/* instrument readouts: the corpus size, and what the last answer drew on */
.ap-gauges{display:flex;gap:7px;margin-left:auto;flex-wrap:nowrap;overflow:hidden}
.ap-g{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:52px;padding:3px 8px;border-radius:7px;background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);font-family:var(--mono)}
.ap-g i{font-style:normal;font-size:8px;letter-spacing:.12em;color:rgba(255,255,255,.45)}
.ap-g b{font-size:11.5px;color:var(--gold);letter-spacing:.02em}
.ap-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;
  color:#fff;cursor:pointer;transition:background-color .2s}
.ap-icon:hover{background:rgba(255,255,255,.18)}
.ap-icon:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.ap-thread{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px;display:flex;
  flex-direction:column;gap:13px;
  background:radial-gradient(1100px 420px at 50% -12%,rgba(255,255,255,.05),transparent 70%),#0d2b4e}
#askpanel.full .ap-thread{padding:26px max(26px,calc((100vw - 900px)/2))}
.ap-msg{font-size:13.5px;line-height:1.65;max-width:100%}
.ap-me{align-self:flex-end;max-width:80%;background:var(--gold);color:#22180a;
  padding:10px 15px;border-radius:14px 14px 4px 14px;font-weight:700}
.ap-bot{align-self:flex-start;color:#dde6f1;max-width:92%}
.ap-bot b{color:#fff}
.ap-bot i,.ap-bot em{color:#a9bed4;font-style:normal}
.ap-note{align-self:stretch;background:rgba(176,134,42,.16);border-left:3px solid var(--gold);
  padding:11px 14px;border-radius:0 9px 9px 0;font-size:11.5px;line-height:1.6;color:#cfd9e6}
.ap-note b{color:var(--gold)}

/* The composed answer. Set apart from the assistant's own remarks because every clause in
   it is quoted from a provision — it is the document speaking, not the tool. */
.ap-answer{align-self:stretch;background:rgba(255,255,255,.06);
  border:1px solid rgba(176,134,42,.4);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;padding:14px 16px;color:#eef3f9;font-size:13.5px;line-height:1.7}
.ap-answer .aq{display:block;margin:0 0 9px;padding-left:12px;
  border-left:2px solid rgba(176,134,42,.45);color:#cddaeb}
.ap-answer .aq:last-child{margin-bottom:0}
.ap-answer cite{display:block;margin-top:4px;font-style:normal;font-family:var(--mono);
  font-size:10.5px;color:var(--gold);cursor:pointer}
.ap-answer cite:hover{text-decoration:underline}

.ap-dots{display:inline-flex;gap:5px;padding:5px 0}
.ap-dots i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:apblink 1.1s infinite}
.ap-dots i:nth-child(2){animation-delay:.16s}
.ap-dots i:nth-child(3){animation-delay:.32s}
@keyframes apblink{0%,60%,100%{opacity:.22}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ap-dots i{animation:none;opacity:.55}}

.ap-hits{align-self:stretch;display:flex;flex-direction:column;gap:10px}
#askpanel.full .ap-hits{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.ap-hit{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  border-radius:12px;padding:13px 15px;transition:border-color .2s,background-color .2s}
.ap-hit:hover{border-color:rgba(176,134,42,.5);background:rgba(255,255,255,.08)}
.ap-hit-hd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ap-code{font-family:var(--mono);font-size:12.5px;font-weight:800;color:var(--gold);
  cursor:pointer;text-decoration:none;overflow-wrap:anywhere}
.ap-code:hover{text-decoration:underline}
.ap-why{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#cfd9e6;background:rgba(255,255,255,.1);border-radius:99px;padding:2px 8px;white-space:nowrap}
.ap-ttl{font-size:12.5px;font-weight:700;color:#fff;margin:5px 0 7px}
.ap-pass{margin:0;padding:7px 0 7px 12px;border-left:2px solid rgba(176,134,42,.55);
  font-size:12px;line-height:1.6;color:#bccadb;white-space:pre-wrap}
.ap-foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;
  font-size:10.5px;font-family:var(--mono);color:#8fa6be}
.ap-open{color:var(--gold);font-weight:700;cursor:pointer;text-decoration:none;font-family:var(--body)}
.ap-open:hover{text-decoration:underline}
.ap-rel{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap}
.ap-chip{font-family:var(--mono);font-size:10px;font-weight:700;color:#cfd9e6;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:99px;padding:3px 9px;cursor:pointer}
.ap-chip:hover{border-color:var(--gold);color:#fff}

.ap-form{flex:none;display:flex;gap:9px;padding:13px;
  border-top:1px solid rgba(255,255,255,.1);background:#0a2340}
#askpanel.full .ap-form{padding:16px max(26px,calc((100vw - 900px)/2))}
.ap-form input{flex:1 1 auto;min-width:0;height:44px;padding:0 15px;font:inherit;font-size:13.5px;
  color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:11px}
.ap-form input::placeholder{color:#8fa6be}
.ap-form input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.1)}
.ap-send{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:none;border-radius:11px;cursor:pointer;background:var(--gold);color:#22180a}
.ap-send:hover{filter:brightness(1.08)}
.ap-send:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media(max-width:640px){
  #askpanel{right:0;bottom:0;top:0;left:0;width:100vw;height:100dvh;border-radius:0;border:0}
  #asklaunch{right:14px;bottom:14px}
  .ap-gauges{display:none}
}
@media print{#asklaunch,#askpanel{display:none !important}}

/* The cross-references on/off switch was removed from the related-instruments heading, and
   its styles with it. The .xrefs[hidden] rule stays: hidden is still set programmatically
   when a jump target is being isolated. */
.xrefs[hidden]{display:none}

/* .subsheets-hd held the count of related instruments and, before that, a Shown / Hidden
   switch. Both are gone; the fold above the provision names them. */
.subsheet[hidden]{display:none}

/* ---------- feature plates ----------
   Deliberately not a row of cards with icons. A regulation presents things as numbered
   FIGURES — a plate, a frame, a caption underneath — so that is what these are. The
   specimen inside each frame is live corpus data, which is the whole point: the page shows
   the tool working rather than describing it.

   The alternating sides and the oversized outlined numeral do the work that an icon would
   do in a generic layout, without pretending a feature can be summed up by a pictogram. */
/* THE FLOW.
   The four plates are stations on a single route line running down the page. The dashed
   line is the planned route; the solid gold overlay is the distance flown, and its height
   is driven by scroll position (--flow, set in wirePlates). Each plate sits on a diamond
   waypoint. Nothing separates the plates but the line — the old border-top was doing that
   job worse, and cutting it lets the route read as continuous. */
/* 64px under the last plate made sense when the page ended in paper. It now ends in the
   footer's navy band, which separates far more strongly than white space can. */
.plates{display:flex;flex-direction:column;gap:0;margin:14px 0 20px;position:relative}
.plates::before,.plates::after{content:'';position:absolute;left:50%;width:2px;
  transform:translateX(-1px);pointer-events:none}
.plates::before{top:0;bottom:0;
  background:repeating-linear-gradient(180deg,var(--line) 0 7px,transparent 7px 15px)}
.plates::after{top:0;height:var(--flow,0px);
  background:linear-gradient(180deg,rgba(176,134,42,.35),var(--gold));
  box-shadow:0 0 12px rgba(176,134,42,.4)}

/* The two columns must be EQUAL. The route line and its waypoints are pinned to 50%, so
   the only way 50% lands in the gutter rather than on top of a column is symmetry. They
   were 0.92fr/1.08fr, which pushed the gutter centre to ~46% and dropped every waypoint
   diamond directly onto the first line of body text on the flipped plates. The text column
   is kept narrow by max-width on .plate-body instead, which does not move the centre. */
.plate{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,88px);align-items:center;
  padding:clamp(46px,6vw,86px) 0}
.plate:first-child{padding-top:18px}
.plate.flip .plate-txt{order:2}
.plate.flip .plate-spec{order:1}
/* the waypoint marker, sitting on the route line */
.plate::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;
  margin:-6px 0 0 -6px;background:var(--gold);border:2px solid var(--gold);
  transform:rotate(45deg);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .15s,opacity .4s .15s,
             border-color .4s .15s,background .4s .15s}

/* ---- reveal: text drifts up, specimen banks in from its own side ----

   EVERY hidden-state rule below is scoped to `.plates.anim`, a class that only JavaScript
   adds. Read the plain cascade and the plates are fully visible; the animation is something
   that gets switched ON, never something that has to be switched off.

   That is not defensive style for its own sake. The reveal is driven by IntersectionObserver,
   and if the observer never fires — no JS, an old browser, a harness that stubs it out — an
   `opacity:0` default means the entire home page renders blank with no error anywhere. The
   content must not depend on the decoration working. (This exact failure showed up in
   testing: the observer never fired and all four plates were invisible.) */
.plates.anim .plate::after{opacity:0;transform:rotate(45deg) scale(.6);
  background:var(--bg);border-color:var(--line)}
.plates.anim .plate.in::after{opacity:1;transform:rotate(45deg) scale(1);
  border-color:var(--gold);background:var(--gold)}

.plates.anim .plate-txt,.plates.anim .plate-spec{opacity:0;
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.plates.anim .plate-txt{transform:translateY(26px)}
.plates.anim .plate-spec{transform:translateY(26px) translateX(30px)}
.plates.anim .plate.flip .plate-spec{transform:translateY(26px) translateX(-30px)}
.plates.anim .plate.in .plate-txt,.plates.anim .plate.in .plate-spec{opacity:1;transform:none}
.plates.anim .plate.in .plate-spec{transition-delay:.12s}
/* and inside the text block, a short stagger so it assembles rather than appears */
.plates.anim .plate-txt>*{opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.plates.anim .plate.in .plate-txt>*{opacity:1;transform:none}
.plates.anim .plate.in .plate-no{transition-delay:.05s}
.plates.anim .plate.in .plate-txt h3{transition-delay:.13s}
.plates.anim .plate.in .plate-lead{transition-delay:.20s}
.plates.anim .plate.in .plate-body{transition-delay:.27s}
.plates.anim .plate.in .plate-cta{transition-delay:.34s}

.plate-txt{position:relative;min-width:0}
/* the plate number, set like a figure number on a drawing sheet */
.plate-no{font-family:var(--display);font-size:clamp(58px,7vw,88px);line-height:.9;font-weight:800;
  color:transparent;-webkit-text-stroke:2px var(--gold);letter-spacing:-.03em;
  opacity:.5;margin:0 0 10px}
.plates.anim .plate.in .plate-no{opacity:.5}
.plate-txt h3{font-family:var(--display);font-size:clamp(27px,3.3vw,40px);font-weight:800;
  color:var(--navy);margin:0 0 10px;letter-spacing:-.015em;line-height:1.08}
.plate-lead{font-size:clamp(15.5px,1.5vw,18px);font-weight:700;color:var(--on);margin:0 0 14px;
  line-height:1.45}
.plate-body{font-size:clamp(14.5px,1.25vw,16px);line-height:1.75;color:var(--on2);
  margin:0 0 26px;max-width:50ch}
.plate-cta{appearance:none;font:inherit;font-size:13px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy);background:none;border:0;cursor:pointer;
  padding:9px 0;border-bottom:2px solid var(--gold);transition:gap .2s}
.plate-cta span{display:inline-block;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.plate-cta:hover span{transform:translateX(6px)}
.plate-cta:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

/* the bezel: an instrument face holding a live readout */
.plate-spec{margin:0;min-width:0}
.spec-bezel{position:relative;background:var(--brand-surface);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:6px;box-shadow:0 22px 50px rgba(13,43,78,.2);overflow:hidden;
  transition:box-shadow .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.plate-spec:hover .spec-bezel{transform:translateY(-4px);box-shadow:0 28px 60px rgba(13,43,78,.28)}
/* a single sweep of light across the glass as the plate arrives — the instrument waking up */
.spec-bezel::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:18px;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%)}
.plates.anim .plate.in .spec-bezel::after{animation:specsweep 1.15s cubic-bezier(.4,0,.2,1) .28s 1 both}
@keyframes specsweep{to{transform:translateX(120%)}}
.spec-in{background:linear-gradient(180deg,#123456,#0d2b4e);border-radius:13px;
  padding:26px 28px;min-height:248px;display:flex;flex-direction:column;justify-content:center;
  gap:13px;color:#dde6f1;font-size:13.5px;line-height:1.62;overflow:hidden}
.plate-spec figcaption{margin-top:13px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on2);font-family:var(--body);font-weight:700}
.spec-load{color:#8fa6be;font-style:italic;text-align:center}

/* ---- specimen internals ---- */
.sx-q{align-self:flex-end;max-width:88%;background:var(--gold);color:#22180a;font-weight:700;
  padding:9px 15px;border-radius:14px 14px 3px 14px;font-size:13.5px}
.sx-a{border-left:2px solid var(--gold);padding-left:15px}
.sx-quote{display:block;color:#eef3f9}
.sx-a cite{display:block;margin-top:8px;font-style:normal;font-family:var(--mono);
  font-size:11.5px;color:var(--gold)}

.sxm{width:100%;border-collapse:collapse;font-size:12.5px}
.sxm th{text-align:left;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8fa6be;font-weight:700;padding:0 0 9px;border-bottom:1px solid rgba(255,255,255,.14)}
.sxm td{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
.sxm tr:last-child td{border-bottom:0}
.sx-code{display:block;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold)}
.sx-code.big{font-size:18px;letter-spacing:.01em}
.sx-t{display:block;color:#a9bed4;font-size:12px;margin-top:3px}
.sx-pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.sx-pill.ok{background:rgba(80,180,120,.2);color:#8fe0b0}
.sx-pill.warn{background:rgba(224,178,74,.2);color:#f0cd84}
.sx-pill.bad{background:rgba(214,96,96,.2);color:#f3a3a3}

/* The section specimen: one line per dropdown, indented like the cascade it stands for,
   each carrying the count that level would offer. The bars are proportions of the whole
   regulation, so the narrowing is visible as the eye goes down. */
.sxcas{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;
  margin-bottom:9px}
.sxcas.sub{margin-left:16px}
.sxc-k{font-family:var(--mono);font-size:12.5px;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sxc-n{font-family:var(--mono);font-size:11.5px;color:var(--gold)}
.sxc-bar{grid-column:1/-1;height:5px;border-radius:99px;
  background:rgba(255,255,255,.12);overflow:hidden;margin-top:3px}
.sxc-bar i{display:block;height:100%;border-radius:99px;width:var(--w,0%);
  background:linear-gradient(90deg,var(--gold),#e0c37a);
  transition:width 1.1s cubic-bezier(.22,1,.36,1) .35s}
.plates.anim .plate:not(.in) .sxc-bar i{width:0}
.sxfig{display:flex;align-items:baseline;gap:12px}
.sxfig b{font-family:var(--display);font-size:40px;line-height:1;color:#fff}
.sxfig.sub b{font-size:25px;color:var(--gold)}
.sxfig i{font-style:normal;font-size:13px;color:#a9bed4}
.sxfoot{font-family:var(--mono);font-size:11px;color:#8fa6be;letter-spacing:.02em}

.sxmast{display:flex;flex-direction:column;gap:6px}
.sx-kind{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sx-title{font-family:var(--display);font-size:21px;font-weight:800;color:#fff;line-height:1.2}
.sxrel{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px}
.sx-chip{font-family:var(--mono);font-size:11px;color:#cfd9e6;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);border-radius:99px;padding:3px 10px}

@media(max-width:860px){
  /* Stacked: the route line moves to a left gutter and the waypoints sit on it.
     The gutter is padding on .plate, NOT on .plates. An absolutely positioned child is
     placed against its ancestor's PADDING box, so padding on .plates would move the plates
     inward while leaving the line and the diamonds at x=0 — the diamond ended up on top of
     the numeral instead of on the line. Padding the plate instead insets only the content,
     and left:0 keeps line and waypoint on the same axis. */
  .plates{padding-left:0}
  .plates::before,.plates::after{left:0;transform:none}
  .plate{grid-template-columns:1fr;gap:26px;padding:38px 0 38px 42px}
  .plate.flip .plate-txt{order:1}
  .plate.flip .plate-spec{order:2}
  .plate::after{left:0;top:64px;margin-left:-5px}
  .plates.anim .plate-spec,.plates.anim .plate.flip .plate-spec{transform:translateY(26px)}
  .spec-in{padding:20px 20px;min-height:210px}
}

/* Motion here is decoration, not information — every plate is fully legible without it.
   So when the OS asks for less, all of it goes, rather than being merely shortened. */
@media(prefers-reduced-motion:reduce){
  .plates.anim .plate-txt,.plates.anim .plate-spec,.plates.anim .plate-txt>*{
    opacity:1!important;transform:none!important;transition:none!important}
  .plates.anim .plate::after{opacity:1!important;transform:rotate(45deg)!important;
    background:var(--gold)!important;border-color:var(--gold)!important;transition:none!important}
  .plates.anim .plate.in .spec-bezel::after{animation:none}
  .plates::after{display:none}
  .sxc-bar i,.plates.anim .plate:not(.in) .sxc-bar i{transition:none;width:var(--w,0%)}
  .plate-spec:hover .spec-bezel{transform:none}
}

/* ---------- history: header button, dropdown, panel ----------
   The lists used to sit at the foot of Home and Browse. That put them below four feature
   plates and a part register — technically present, practically unreachable, and absent
   entirely from the results view where you are most likely to want your last query. They
   now live where they are used: hanging off the search field, and behind one header button
   reachable from every page. */
.iconbtn{display:flex;align-items:center;justify-content:center;width:var(--ctrlh);
  height:var(--ctrlh);flex:none;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#e8eef6;transition:background .18s,border-color .18s,color .18s}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{background:rgba(255,255,255,.17);color:#fff;border-color:rgba(255,255,255,.34)}
.iconbtn[aria-expanded="true"]{background:#fffdf7;border-color:#efe7d3;color:var(--navy)}
.iconbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Fixed on <body>, positioned from the field's rect by place(). It is NOT nested inside the
   search field's container: the home hero sets overflow:hidden to crop its background
   lettering, and an absolutely-positioned child was being sliced off at the hero's edge. */
.hmenu{position:fixed;z-index:125;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;
  box-shadow:var(--lift);padding:7px;overflow:auto;
  animation:hmin .16s cubic-bezier(.22,1,.36,1) both}
@keyframes hmin{from{opacity:0;transform:translateY(-6px)}}
.hmenu[hidden]{display:none}
.hm-sec{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:9px 10px 6px}
.hm-row{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:10px;
  cursor:pointer;font-size:13px;color:var(--ink);border:0;background:none;text-align:left}
.hm-row:hover,.hm-row.sel{background:var(--blue-soft)}
.hm-row.sel{box-shadow:inset 0 0 0 1px rgba(28,95,168,.35)}
.hm-ico{color:var(--faint);flex:none;font-size:13px}
.hm-code{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--navy);flex:none}
.hm-main{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-main.dim{color:var(--ink2);font-weight:400}
.hm-n{font-family:var(--mono);font-size:10.5px;color:var(--faint);flex:none}
.hm-ago{font-size:10.5px;color:var(--faint);flex:none}
.hm-x{flex:none;width:22px;height:22px;border:0;background:none;cursor:pointer;border-radius:6px;
  color:var(--faint);font-size:17px;line-height:1;opacity:0;transition:opacity .15s,background .15s}
.hm-row:hover .hm-x,.hm-row.sel .hm-x,.hp-row:hover .hm-x{opacity:1}
.hm-x:hover{background:rgba(192,38,38,.12);color:var(--red)}
.hm-foot{border-top:1px solid var(--line);margin-top:5px;padding-top:5px}
.hm-all{width:100%;padding:9px;border:0;background:none;cursor:pointer;border-radius:9px;
  font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--navy)}
.hm-all:hover{background:var(--panel2)}

.histback{position:fixed;inset:0;z-index:130;background:rgba(13,43,78,.28)}
.histback[hidden]{display:none}
.histpanel{position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);z-index:131;
  background:var(--panel);border-left:1px solid var(--line2);display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(13,43,78,.22);transform:translateX(100%);
  transition:transform .24s cubic-bezier(.22,1,.36,1)}
.histpanel.open{transform:none}
.histpanel[hidden]{display:none}
.hp-head{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 14px;
  border-bottom:1px solid var(--line)}
.hp-head b{display:block;font-family:var(--display);font-size:19px;color:var(--navy)}
.hp-head i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:3px}
.hp-x{margin-left:auto;width:32px;height:32px;border:1px solid var(--line2);background:var(--panel2);
  border-radius:9px;cursor:pointer;font-size:19px;line-height:1;color:var(--ink2);flex:none}
.hp-x:hover{background:var(--line);color:var(--ink)}
.hp-tabs{display:flex;gap:5px;padding:12px 20px 0}
.hp-tab{flex:1;padding:9px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;
  border-radius:10px;font:inherit;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink2)}
.hp-tab.on{background:var(--brand-surface);border-color:var(--brand-surface);color:#fff}
.hp-body{flex:1;min-height:0;overflow:auto;padding:12px 14px 18px}
.hp-day{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:14px 8px 7px}
.hp-row{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:10px;cursor:pointer;
  font-size:13px;color:var(--ink)}
.hp-row:hover{background:var(--blue-soft)}
.hp-foot{border-top:1px solid var(--line);padding:12px 20px}
.hp-empty{text-align:center;color:var(--muted);font-size:13.5px;padding:44px 20px}
.hp-empty span{display:block;margin-top:8px;font-size:12px;color:var(--faint)}

/* the query chips in the empty results pane */
.qchips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 6px}
.qchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:99px;
  border:1px solid var(--line2);background:var(--panel);cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--ink);transition:border-color .15s,background .15s}
.qchip:hover{border-color:var(--navy);background:var(--blue-soft)}
.qchip i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint)}
.wsblank{padding:40px 8px;color:var(--muted);font-size:14px}
.wsblank b{display:block;font-family:var(--display);font-size:20px;color:var(--navy);margin-bottom:7px}
.wsblank span{display:block;max-width:46ch;font-size:13px;line-height:1.65}
.wsblank em{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--navy)}

@media(prefers-reduced-motion:reduce){
  .hmenu{animation:none}
  .histpanel{transition:none}
}

/* ---------- "under construction", on a single feature ----------
   There is no site-wide banner. There was one, briefly, and it was the wrong instrument:
   the provision text IS audited against the source, so a red bar over the whole site warned
   about the part that is actually reliable, and a warning shown on every screen is read on
   none of them.

   So it sits only where the doubt genuinely is — on the three features whose OUTPUT this
   tool derives rather than reproduces: Ask, the compliance matrix, and the applicability
   filter. Those are the ones that could be confidently wrong.

   Red, not gold. Gold is the brand and it reads as decoration here; this has to read as a
   caveat. Its red is its own token and the same value in both themes, because --red flips to
   a pale pink in the dark theme for use as TEXT and would disappear as a border. */
:root{--uc:#b3261e; --uc-soft:#fdf0ef; --uc-edge:#e6b4b0}
:root[data-theme="dark"]{--uc:#f3877f; --uc-soft:#2a1512; --uc-edge:#6d2b26}
.betanote{display:flex;align-items:flex-start;gap:11px;margin:0 0 18px;padding:12px 15px;
  border:1px solid var(--uc-edge);border-left:4px solid var(--uc);border-radius:10px;
  background:var(--uc-soft)}
.bn-tag{flex:none;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--uc);border:1px solid var(--uc);border-radius:99px;
  padding:3px 9px;margin-top:1px}
.bn-t{font-size:12.5px;line-height:1.6;color:var(--ink2)}
/* the same statement, shrunk to a chip, for the home-page plates */
.betachip{display:inline-block;vertical-align:middle;margin-left:11px;
  font-family:var(--body);font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--uc);border:1px solid var(--uc);
  background:var(--uc-soft);
  border-radius:99px;padding:3px 10px;position:relative;top:-4px}
.qhint{font-size:12.5px;line-height:1.65;color:var(--muted);margin:10px 0 0;max-width:74ch}
.qhint b{color:var(--ink2)}

/* ---------- compact search button + its overlay ----------
   The button shows only when the real field is not on the bar: either the page hid it
   (Home has its own) or it would have forced a second row. Opening it lays the field
   across the bar rather than navigating, so the page underneath is not lost. */
#searchbtn{display:none}
#topbar.nofield #searchbtn,#topbar.nosearch #searchbtn{display:flex}
#topbar.searchopen #searchbtn{display:flex;background:#fffdf7;border-color:#efe7d3;
  color:var(--brand-surface)}
/* ---------- the search drawer ----------
   Opening the search does not touch the header. The field leaves the bar's flex row
   altogether and hangs UNDER the bar as a panel: the sections stay where they were, the
   brand stays, the icon buttons stay, the bar keeps the exact height it had a moment
   before, and the page below does not shift by a pixel — the drawer floats over it.

   Everything the bar used to give up to make room — the wordmark, the history and theme
   buttons, the All/Any/Aa chips, the nav itself — it no longer has to. There is nothing to
   trade, because the field is not competing for the row any more.

   Closed, .tsdrawer is display:contents: no box, no effect, the field is a flex item of the
   header exactly as before. That is what keeps this ONE mechanism rather than two. */
.tsdrawer{display:contents}
/* The gold rule is the header's bottom edge, so when the drawer is out the edge is the
   DRAWER's. Handing it over rather than drawing a second one is what stops this reading as
   a separate box that has landed on the page: bar, drawer and rule are one surface that got
   taller. The bar keeps its 3px border so its height does not change by a pixel — only the
   colour goes, and the drawer showing through from behind takes its place. */
#topbar.searchopen{border-bottom-color:transparent}
#topbar.searchopen .tsdrawer{
  display:block;position:absolute;top:100%;left:0;right:0;
  /* Behind the header's own background, so the panel slides out from under it rather than
     across it. Still inside #topbar's stacking context, so it stays above the page.
     top:100% is the PADDING box — it starts under the 3px border, which is now transparent,
     which is exactly how the seam closes. */
  z-index:-1;
  padding:12px 22px 14px;                 /* the bar's own side padding, so edges line up */
  background:var(--brand-surface);
  border-bottom:3px solid var(--gold);
  /* The shadow is the only thing saying this floats: it is over the page, not part of it. */
  box-shadow:0 22px 38px -24px rgba(6,17,32,.62);
  animation:tsdrop .2s cubic-bezier(.22,1,.36,1) both}
/* The drawer is a row: the field, then the hint pushed to the far end. The field is capped
   rather than spanning the whole width — at 1600px an uncapped field is a 1,550px pill,
   which is a shape nobody recognises as a search box. 860px is generous for the longest
   code in either regulation and still reads as a field. It aligns left with the brand
   above it, so the drawer looks like part of the header rather than a panel that happens
   to have landed there. */
#topbar.searchopen .tsdrawer{display:flex;align-items:center;gap:18px}
#topbar.searchopen .topsearch{display:flex;flex:1 1 auto;max-width:860px;min-width:0;margin:0}
.tshint{display:none}
/* .58 rather than .5: composited over the navy, half-white lands at 4.66:1, which clears AA
   for normal text by a hair and this is 11px. .58 puts it at 5.6:1 without making a hint
   compete with the field beside it. */
#topbar.searchopen .tshint{display:block;flex:0 1 auto;font-size:11px;font-weight:300;
  letter-spacing:.03em;color:rgba(255,255,255,.58);white-space:nowrap;margin-left:auto}
/* Below about 900px there is no spare width for it, and a hint that wraps or squeezes the
   field is worse than no hint. Measured against the drawer, not the viewport. */
@media(max-width:900px){#topbar.searchopen .tshint{display:none}}
#topbar.brandbare .brand-name{display:none}
@keyframes tsdrop{from{transform:translateY(-100%);opacity:.55}}
@media(prefers-reduced-motion:reduce){#topbar.searchopen .tsdrawer{animation:none}}

/* ---------- theme button ---------- */
/* The icon is the DESTINATION, not the current state. It used to show a sun in the light
   theme while its own label read "Switch to dark theme" — the picture and the words
   disagreed, and the picture is what people act on. Moon in the light theme, sun in the
   dark, matching the label in both. */
#themebtn .ic-sun{display:none}
#themebtn .ic-moon{display:block}
:root[data-theme="dark"] #themebtn .ic-sun{display:block}
:root[data-theme="dark"] #themebtn .ic-moon{display:none}

/* A few surfaces are painted rather than tokenised because they are deliberately dark in
   BOTH themes (the specimen bezel, the Ask panel). On a dark canvas they need a hairline to
   separate them from the page, which white-on-white never needed. */
:root[data-theme="dark"] .spec-bezel{border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] .iconbtn{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] #topbar.searchopen #searchbtn{background:#e7eef6;border-color:#e7eef6}

/* ---------- landing page: neutral hero, how-it-works, regulation chooser ---------- */
/* width:100% matters. `margin:0 auto` makes a grid item shrink-to-fit, so this column was
   only ever as wide as its widest child — which was the lede paragraph's max-width:620px.
   Deleting that paragraph took the hero down to 380px and squeezed the search box with it.
   The column's width should not depend on which paragraph happens to be inside it. */
.hero-neutral .hero-mid.wide{grid-column:1/-1;width:100%;max-width:760px;margin:0 auto}
.hero-neutral{grid-template-columns:1fr}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px}
.herosub{margin-top:11px;font-size:12px;color:var(--on-muted)}
.howto{list-style:none;counter-reset:h;margin:6px 0 34px;padding:0;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.howto li{counter-increment:h;position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 20px 20px 22px;font-size:13.5px;line-height:1.65;
  color:var(--ink2);box-shadow:var(--shadow)}
.howto li::before{content:counter(h,decimal-leading-zero);display:block;
  font-family:var(--display);font-size:26px;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px var(--gold);opacity:.75;margin-bottom:9px}
.howto b{color:var(--navy);font-weight:800}

/* The chooser is now a CAR dropdown with the cards under it, so the grid moved off the
   container and onto .rp-cards — the container holds two things stacked, not a row of
   cards. */
.regpick{display:block;margin:0 0 4px}
.rp-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin:0 0 40px}
.rp-choose{display:flex;flex-direction:column;gap:6px;margin:0 0 18px;max-width:420px}
.rp-choose label{font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
#carsel{height:46px;padding:0 36px 0 14px;border:1px solid var(--line2);border-radius:12px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:14px;cursor:pointer;
  appearance:none;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
#carsel:focus{outline:none;border-color:var(--navy)}
/* The CAR beside the name on the card, quiet like everywhere else it appears. */
.rp-car{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--gold);background:var(--gold-soft);border:1px solid rgba(176,134,42,.3);
  border-radius:5px;padding:2px 7px}
.rpick{display:flex;flex-direction:column;align-items:stretch;gap:9px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 20px;cursor:pointer;font:inherit;box-shadow:var(--shadow);
  transition:border-color .18s,transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s}
.rpick:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:var(--lift)}
.rpick:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.rp-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rp-name{font-family:var(--display);font-size:23px;font-weight:800;color:var(--navy);
  letter-spacing:-.01em}
.rp-iss{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--gold);
  border:1px solid var(--gold);border-radius:99px;padding:3px 10px;white-space:nowrap}
.rp-iss:empty{display:none}
.rp-sub{font-size:13px;color:var(--muted)}
.rp-stats{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:5px;
  padding-top:13px;border-top:1px solid var(--line)}
.rp-s{display:flex;flex-direction:column;gap:1px}
.rp-s b{font-family:var(--display);font-size:19px;color:var(--ink);line-height:1.1}
.rp-s i{font-style:normal;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint)}
.rp-go{margin-top:9px;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy)}
.rpick:hover .rp-go{color:var(--gold)}


/* ---------- browse: issue badge + filter ---------- */
.rg-iss{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--gold);
  border:1px solid var(--gold);border-radius:99px;padding:2px 8px;flex:none;margin-left:10px}
/* Four labelled fields rather than a row of unexplained controls. The labels are the point:
   "Regulation / Part / Containing / Type" tells you what the filter can do without you
   having to click anything to find out. */
/* Three fields, not four: the "Containing" box is gone and the header field does that job.
   The last column takes the slack so the three pack to the left instead of spreading. */
/* Flex, not grid, and nothing in it grows. A grid column takes its share of the row whether
   it needs it or not; these are three controls of fixed, honest widths standing next to each
   other, and the space left over at the right belongs to nobody.

   They also hold ONE row far further down than the grid did. It had a rule at 1100px that
   dropped to two columns — so a laptop got the filters on two lines with half the row empty
   beside them. Flex wraps only when the controls genuinely stop fitting. */
/* The register's heading and the one action that acts on the whole register. */
.secthd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:2px}
.secthd .secttl{margin-bottom:0}
.readgo{margin-left:auto;padding:7px 14px;font-size:12px;white-space:nowrap}

/* ---------- reading straight through ----------
   The document's own heading, then a bar, then the provisions one after another. */
.readhd{margin:18px 0 14px}
.rh-k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.readhd h1{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.015em;
  color:var(--navy);margin:0 0 7px;line-height:1.12;text-wrap:balance}
.rh-m{font-size:13px;font-weight:300;color:var(--muted);max-width:60ch;line-height:1.5}
.rh-m b{color:var(--ink);font-weight:700}
/* Sticky, because it is the only thing on screen that says how much of the document is
   under you — and on a document this long that question is asked while scrolling, not
   before.

   WHY THIS IS A TRACK AND NOT A TINTED FILL BEHIND THE WORDS. It was the latter, and the
   tint was --gold-soft on --panel: #faf3e1 on #ffffff, which is 1.11:1 — and in the dark
   theme #241d0d on #141d29, 1.02:1. Both are invisible. The only part anyone could see was
   the 2px --gold edge, a hairline creeping across a white strip, which reads as a rendering
   artefact rather than as progress. A pale tint IS the right way to fill behind text, and
   that is exactly why it cannot also be the bar: whatever is faint enough to read through
   is too faint to see. So the words and the measurement get a row each, and the bar is
   solid --gold on a --panel2 track — 3.19:1 light, 6.83:1 dark, clear of the 3:1 that
   non-text graphics need. The same two palette entries as before, used where they show. */
/* A FLEX COLUMN, NOT A BLOCK WITH PADDING, and that is a bug fix rather than a tidy-up.
   As a block this strip rendered 16px tall — exactly its own padding and borders, with a
   content box of zero — while the browser simultaneously reported its two children as 14px
   and 5px and its scrollHeight as 33. The label was cut through the middle and left as a
   stray line above the first provision, which is what it looked like on screen.

   I could not account for the zero: no rule set a height, forcing height:auto changed
   nothing, and the children were in flow and unfloated. Rather than keep guessing at it,
   the strip no longer asks block layout for a height at all. Its height is its rows: the
   label carries its own padding, the track is a row under it, and a flex column is the sum
   of the two. min-height is the belt to that brace. */
.readprog{position:sticky;top:0;z-index:6;margin:0 0 18px;min-height:31px;
  /* flex-start, not flex-end. Pushed to the end, the label rides up as the track shrinks
     to nothing — and since the strip clips, the top of the text is cut for the length of
     that 200ms. Measured at 3.1px above the strip's own top edge. From the start the
     label does not move at all and the track simply closes beneath it, which is also the
     order the two are read in. */
  display:flex;flex-direction:column;
  overflow:hidden;background:var(--panel);border:1px solid var(--line2);border-radius:9px}
.rp-say{flex:none;padding:7px 12px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);line-height:1.3;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Full-bleed to the strip's own edges: a track inset from a border looks like a second
   box, a track flush with the bottom edge looks like the edge filling up. A flex row needs
   no negative margins to manage it. */
.rp-track{flex:none;height:5px;background:var(--panel2);
  border-top:1px solid var(--line);overflow:hidden;transition:height .2s ease}
.rp-track>i{display:block;height:100%;width:0;background:var(--gold);
  transition:width .18s linear}
/* Before the first byte there is nothing to measure. A sweep says "working" without
   claiming a number it does not have — and it is also what a browser that will not stream
   gets for the whole fetch, instead of a bar sitting empty. */
.readprog.wait .rp-track>i{width:34%;animation:rpsweep 1.15s ease-in-out infinite}
@keyframes rpsweep{0%{transform:translateX(-105%)}100%{transform:translateX(300%)}}
/* Fetched. The track has nothing left to report, so it folds away and the line above it
   carries on as the readout of how much is on the page. */
.readprog.done .rp-track{height:0;border-top:0}
.readprog.done .rp-say{color:var(--faint)}
@media(prefers-reduced-motion:reduce){
  .rp-track,.rp-track>i{transition:none}
  .readprog.wait .rp-track>i{animation:none;width:34%}
}
/* Off-screen pieces are not laid out until they are near the screen. Without this each
   new chunk re-lays-out everything already drawn, and the cost climbs with the length of
   the document: appending 20 provisions to a 600,000px page was taking about a second by
   the end of Part-ORO, which is the point at which scrolling stops feeling like reading.
   The intrinsic size is a guess at a chunk's height so the scrollbar has something
   sensible to represent before the real height is known; `auto` lets the browser keep the
   true one once it has been measured. */
.readchunk{content-visibility:auto;contain-intrinsic-size:auto 2400px}
/* Space between provisions, so one rule does not run into the next. */
.readchunk>.sheet{margin-top:26px}
.readchunk:first-child>.sheet:first-child{margin-top:0}
@media print{.readprog{display:none}}

.bfilter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;margin:0 0 14px}
.bf-field{flex:0 1 auto}
.bf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.bf-field>label{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint)}
/* .bf-seg and .bf-r — the segmented Regulation control — are gone. Two documents fit on
   a row of buttons; four will not, and the CAR grouping a <select> gives for free is the
   thing that makes a growing library findable. The select below is styled to match the
   Part dropdown beside it, because they now do the same kind of job. */
/* A <select> sizes itself to its longest option — here "CAR-AIR OPS — Air Operations" —
   which made the control half again as wide as the job needs. Given a width it truncates the
   closed state and still opens to show every option in full. */
#bfreg,#bfcar,#pgregsel{width:222px;height:42px;padding:0 34px 0 12px;border:1px solid var(--line2);
  border-radius:11px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;
  cursor:pointer;appearance:none;max-width:100%;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
/* #bfcar was 132px: the CAR step is a number, and sizing it like the regulation beside it
   would have said the two choices carry equal weight. Nothing is beside it in a stack,
   where a half-width control reads as broken rather than as subordinate. .sidefilter
   gives all three the column's width. */
#bfreg:disabled{opacity:.45;cursor:not-allowed}
/* .bf-pair held the CAR beside its regulation while the filter was a row of controls,
   so the two could not wrap apart on an iPad. Stacked in the sidebar there is no row to
   wrap and nothing to hold together. */
#bfreg:focus,#bfcar:focus,#pgregsel:focus{outline:none;border-color:var(--navy)}
/* An <optgroup> label is a heading, not an option: browsers grey it and it is not
   selectable, which is exactly right for a CAR number. Weight is all it needs. */
#bfreg optgroup,#pgregsel optgroup,.st-regpick optgroup{font-weight:800;
  font-family:var(--mono);font-size:12px;color:var(--navy)}
#bfreg option,#bfcar option,#pgregsel option,.st-regpick option{font-family:var(--body);
  font-weight:400;font-size:13px;color:var(--ink)}
#bfpart{width:196px;height:42px;padding:0 34px 0 12px;border:1px solid var(--line2);border-radius:11px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer;
  appearance:none;max-width:100%;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#bfpart:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(13,43,78,.07)}
/* Same 42px as the segmented control and the select, so the three fields sit on one baseline
   rather than three slightly different heights. */
.bf-fams{display:flex;gap:4px;padding:4px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:11px;flex:none;height:42px;align-items:center}
.bf-f{border:0;background:none;cursor:pointer;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.05em;color:var(--ink2);padding:7px 12px;border-radius:8px}
.bf-f:hover{background:var(--line)}
.bf-f.on{background:var(--brand-surface);color:#fff}
.bf-count{font-size:12.5px;color:var(--muted);margin:0 0 12px;min-height:1px}
.bf-count b{color:var(--ink)}
.bf-count:empty{margin:0}
#bfpart:disabled{opacity:.45;cursor:not-allowed}
/* What a cross-reference is about, on hover. A chip carries a code and nothing else, so
   the box says the title — the one thing that decides whether it is worth opening.

   position:fixed and a child of <body>, because the folds it appears over sit inside a
   scrolling pane: anything positioned within that is clipped by it, and a tooltip that
   is cut off by the edge of the column is worse than none.

   pointer-events:none is load-bearing. The box opens a few pixels from the chip, and a
   box that took the pointer would fire mouseout on the chip, hide itself, restore the
   hover, and flicker between the two states for as long as the mouse sat still. */
.chiptip{position:fixed;left:0;top:0;z-index:60;max-width:300px;
  padding:8px 11px;border-radius:9px;
  background:var(--brand-surface);color:#fff;
  font-family:var(--body);font-size:12.5px;font-weight:400;line-height:1.35;
  letter-spacing:0;text-transform:none;text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.22);pointer-events:none}
/* --tipx is set per placement: the caret points at the chip, which stops being the box's
   middle as soon as the box is clamped against the edge of the window. */
.chiptip::after{content:'';position:absolute;top:100%;left:var(--tipx,50%);margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--brand-surface)}
.chiptip.below::after{top:auto;bottom:100%;
  border-top-color:transparent;border-bottom-color:var(--brand-surface)}
@media print{.chiptip{display:none}}

/* ---------- what this page costs (#/perf) ----------
   A diagnostic, so it is plain: a number, a word for whether that number is fine, and a
   line saying what it is measured against. The colour is the verdict and the word repeats
   it, because a green pill alone is a reading nobody can check.

   The palette is the site's own. Nothing new is introduced for a page four people will
   ever open. */
.perftab{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:13px}
.perftab th,.perftab td{text-align:left;vertical-align:baseline;padding:11px 12px 11px 0;
  border-bottom:1px solid var(--line)}
.perftab th{font-weight:700;color:var(--ink);white-space:nowrap;width:1%}
.pv-n{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--navy);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.pv-u{font-family:var(--body);font-size:10.5px;font-weight:400;color:var(--muted);
  margin-left:5px;text-transform:uppercase;letter-spacing:.08em}
.pv{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;
  letter-spacing:.04em;white-space:nowrap;border:1px solid transparent}
/* Not the gold: gold is this site's 'you are here' and would read as a highlight rather
   than as a verdict. These borrow the tones already used for scope and correction notes. */
.pv-ok{background:rgba(31,122,74,.12);color:#1f7a4a;border-color:rgba(31,122,74,.35)}
.pv-warn{background:var(--gold-soft);color:#8a6410;border-color:rgba(176,134,42,.45)}
.pv-bad{background:rgba(168,42,42,.1);color:#a82a2a;border-color:rgba(168,42,42,.38)}
.pv-none{background:var(--panel2);color:var(--faint);border-color:var(--line2)}
.pv-note{font-size:12px;font-weight:300;color:var(--muted);line-height:1.45}
.pv-h2{font-family:var(--display);font-size:17px;font-weight:800;color:var(--navy);
  margin:26px 0 0}
.pv-foot{margin-top:20px;font-size:12.5px}
.pv-foot code{font-family:var(--mono);font-size:11.5px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:5px;padding:1px 5px}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .pv-ok
  {background:rgba(74,190,130,.14);color:#6fd6a0;border-color:rgba(74,190,130,.4)}
  :root:not([data-theme="light"]) .pv-warn{color:#e0b457}
  :root:not([data-theme="light"]) .pv-bad
  {background:rgba(232,106,106,.13);color:#f08a8a;border-color:rgba(232,106,106,.4)}}
:root[data-theme="dark"] .pv-ok
  {background:rgba(74,190,130,.14);color:#6fd6a0;border-color:rgba(74,190,130,.4)}
:root[data-theme="dark"] .pv-warn{color:#e0b457}
:root[data-theme="dark"] .pv-bad
  {background:rgba(232,106,106,.13);color:#f08a8a;border-color:rgba(232,106,106,.4)}

.tempty{padding:12px 14px;font-size:12.5px;color:var(--faint);font-style:italic}

/* ---------- browse: the matches themselves ----------
   Shown in the page, at full width, whenever a filter is running — which is where the
   results always should have been. The badge, the code and the title get room to sit on one
   line here; in the sidebar the title was truncated to about four words. */
.bres{display:flex;flex-direction:column;gap:6px}
.bresrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;
  padding:10px 14px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid transparent;border-radius:11px;cursor:pointer;
  box-shadow:var(--shadow);transition:border-color .13s,background .13s}
.bresrow:hover{border-color:var(--line2);border-left-color:var(--gold);background:var(--panel2)}
.bresrow .kindchip{flex:none}
.br-code{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--navy);flex:none}
/* The title takes the slack and ellipsises only when there is genuinely none left. */
.br-t{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:300;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bresrow .regtag{flex:none;margin-left:0}
/* How many figures the provision owns, shown only while filtering by figures. The same
   fact the Figures page put on its cards, in the same place a count belongs on a row:
   the far end, where the eye can run down it. */
.br-figs{flex:none;margin-left:auto;min-width:22px;padding:2px 7px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;text-align:center;
  color:#fff;background:var(--brand-surface)}
.bresmore{display:flex;justify-content:center;margin:16px 0 4px}
.bresnote{font-size:11.5px;color:var(--faint);margin:8px 0 0;padding-left:2px}
/* The regulation divider is the one already used for cross-regulation search results, so
   "results from the other document" looks the same wherever you meet it. */
.bres+.othersec{margin-top:26px}
@media(max-width:720px){
  .bresrow{flex-wrap:wrap;gap:8px}
  .br-t{flex:1 1 100%;white-space:normal}
}

/* ---------- search results from the other regulation ---------- */
.othersec{display:flex;align-items:center;gap:12px;margin:26px 0 12px;
  padding-top:16px;border-top:1px solid var(--line)}
.othersec span{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);flex:none}
.othersec i{font-style:normal;font-size:11px;color:var(--faint)}
.othersec::after{content:'';flex:1;height:1px;background:var(--line)}
.regtag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.04em;
  color:var(--gold);border:1px solid var(--gold);border-radius:99px;padding:2px 8px;
  margin-left:8px;white-space:nowrap;vertical-align:1px}
.item.foreign{border-left:3px solid var(--gold)}

/* ---------- nav overflow ("More") ----------
   Hidden until fitTopbar decides the bar cannot hold everything. The three secondary
   sections then fold in here instead of the whole header wrapping to two rows. */
.navmore-wrap{position:relative;display:none}
/* The header is navy in BOTH themes, so its contents need light ink in both. color:inherit
   picked up --ink, which is dark in the light theme: the button measured 1.12:1 against the
   bar it sits on and was, in practice, invisible. It is now the same explicit light ink the
   nav links beside it use. */
.navmore{display:flex;align-items:center;gap:5px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit;
  color:#dbe6f2;padding:0;opacity:1}
.navmore:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:5px}
.navmore:hover{color:#fff}
#topbar.navslim .navmore-wrap{display:block}
/* The secondary sections have their own nav past the field now, so the first stage of the
   retreat hides that nav rather than picking links out of the main one. */
#topbar.navslim .topnav2{display:none}
/* The menu is rendered with EVERY section in it, so that the last stage can fold the whole
   nav in here. Until then only the entries the bar has given up are shown — otherwise More
   would list Regulation a second time, directly beneath the Regulation link. */
.navmenu button:not([data-sec]){display:none}
#topbar.navall .navmore-wrap{display:block}
#topbar.navall .topnav a{display:none}
#topbar.navall .topnav2{display:none}
#topbar.navall .navmenu button{display:block}
/* The nav is flex:1 1 auto so it can absorb the bar's slack while it holds eight links.
   Holding one button it must stop doing that: at 560px it was still claiming 340px of a
   516px row and elbowing the icon buttons onto a second line — the nav taking the space
   and then not using it. */
#topbar.navall .topnav{flex:0 1 auto}
.navmenu{position:absolute;top:calc(100% + 12px);right:0;z-index:60;min-width:172px;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  box-shadow:var(--lift);padding:6px;
  animation:hmin .16s cubic-bezier(.22,1,.36,1) both}
.navmenu[hidden]{display:none}
.navmenu button{display:block;width:100%;text-align:left;border:0;background:none;
  cursor:pointer;font:inherit;font-size:13px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink);padding:9px 12px;border-radius:8px}
.navmenu button:hover{background:var(--blue-soft);color:var(--navy)}
/* The panel is anchored to the right edge of the More button, which is right for a wide bar
   where that button sits near the right. On a phone the whole nav has folded into it, so the
   button is near the LEFT — and right:0 hung 37px of the panel off the side of the screen,
   taking the start of every section name with it.
   Below 620px it opens from the button's left edge instead, and is clamped so it can never
   exceed the viewport whatever the bar has retreated to. */
@media(max-width:620px){
  .navmenu{right:auto;left:0;min-width:200px;max-width:calc(100vw - 24px)}
}
@media(prefers-reduced-motion:reduce){.navmenu{animation:none}}

/* The two-column rule that used to live here is gone. It fired at 1100px — a perfectly
   ordinary laptop — and split three controls across two rows while half of each row stayed
   empty. Flex wraps them when they stop fitting and not a pixel sooner. */
@media(max-width:620px){
  .bf-field{flex:1 1 100%}
  /* The pair still shares one row — they are one decision, and stacking a CAR above the
     regulation it governs reads as two unrelated filters. The number keeps only what a
     number needs and the document name takes the rest, which is the way round it wants to
     be when there are 309px to divide. */
  #bfcar{width:100%}
  #bfpart,#bfreg,#pgregsel,.bf-fams{max-width:none;width:100%}
  .bf-fams{justify-content:stretch}
  .bf-r,.bf-f{flex:1}
}


/* ==================================================================================
   THE PHONE
   Everything below was measured on a 375px viewport, not guessed at a round number.
   ================================================================================== */
@media(max-width:560px){
  /* The hero field was 132px of a 307px box: the button took the rest and the placeholder
     was cut mid-word — "Search both re". Stacked, the field gets the whole width and the
     button stops competing with it for the one thing you came to do. */
  .herosearch{flex-direction:column;align-items:stretch;gap:9px;border-radius:20px;
    padding:12px}
  .herosearch input{padding:13px 10px;font-size:17px;text-align:center}
  .herosearch .btn{width:100%;padding:14px 24px}

  /* 44px is the smallest target a finger hits reliably, and stepping between provisions
     is the control people use most while reading. The floating pair is a 44px circle at
     this width — see .fn-b below 640px — so the rule the old stepper needed here is
     already kept by the one that replaced it. */


  /* One filter per row. Three side by side on a phone gives each of them a third of 375px,
     which is narrower than the words inside them. */
  .bf-field{flex:1 1 100%}
  .pgpick,.st-regpick{max-width:none}
  #bfpart,#bfreg,#pgregsel,.bf-fams,.st-regpick select{width:100%;max-width:none}
  .bf-fams{justify-content:space-between}

  /* Reading room: the pane keeps 4px less on each side than it does on a tablet, which is
     roughly one character per line back. */
  .wsmain{padding:14px 15px 70px}

  /* Fingers, not pointers. 32px is a comfortable click and an uncomfortable tap. */
  .btn-ghost{min-height:42px}
  /* The section ticks were 13px square. The row is the real target — the label already
     covers it — but the box itself has to be findable, and a 13px box beside a two-line
     title reads as decoration rather than as the control. */
  .sectree input[type=checkbox]{width:19px;height:19px}
}

/* ==================================================================================
   REPORT A PROBLEM WITH THIS PROVISION
   Fixed to the viewport and shown only while a provision is open, because that is the only
   time it has something to be about. It sits bottom-right, clear of the reading column:
   the alternative — a control inside each provision — would put a button between a rule and
   its guidance 3,923 times over for the handful of occasions anyone presses it.
   ================================================================================== */
.rpbtn{display:none;position:fixed;right:22px;bottom:22px;z-index:40;
  align-items:center;gap:9px;padding:11px 16px 11px 13px;
  background:var(--brand-surface);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:999px;cursor:pointer;font-family:var(--body);font-size:12.5px;font-weight:800;
  letter-spacing:.02em;box-shadow:var(--lift);transition:background-color .16s,transform .16s}
body.reading .rpbtn{display:inline-flex}
.rpbtn:hover{background:var(--brand-surface2);transform:translateY(-1px)}
.rpbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rpbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
/* On a phone the label would take a third of the width for a control most readers never
   press, so the flag stands on its own. */
@media(max-width:640px){
  .rpbtn{right:14px;bottom:14px;padding:12px;border-radius:50%}
  .rpbtn-t{display:none}
}
@media print{.rpbtn,.rppanel{display:none !important}}

.rppanel{position:fixed;right:22px;bottom:76px;z-index:41;width:min(360px,calc(100vw - 32px));
  background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:16px 17px 15px;
  animation:rp-in .18s cubic-bezier(.2,.8,.3,1) both}
@keyframes rp-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rppanel{animation:none}}
@media(max-width:640px){.rppanel{right:14px;left:14px;bottom:74px;width:auto}}
.rp-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rp-hd b{font-family:var(--display);font-size:16px;color:var(--navy);font-weight:800}
.rp-x{border:0;background:none;font-size:21px;line-height:1;color:var(--muted);cursor:pointer;
  padding:0 2px}
.rp-x:hover{color:var(--ink)}
/* Which provision this is about, in the code's own face — it is the thing that makes the
   report worth sending, so it is stated rather than assumed. */
.rp-where{font-family:var(--mono);font-size:11px;color:var(--muted);margin:5px 0 12px;
  padding:6px 9px;background:var(--panel2);border-left:2px solid var(--gold);border-radius:0 6px 6px 0}
.rp-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rp-k{border:1px solid var(--line2);background:var(--panel);color:var(--ink2);cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:700;padding:6px 11px;border-radius:999px;
  transition:background-color .14s,color .14s,border-color .14s}
.rp-k:hover{background:var(--panel2)}
.rp-k.on{background:var(--brand-surface);border-color:var(--brand-surface);color:#fff}
.rp-k:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rp-lab{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:11px}
.rp-lab span{font-weight:300;letter-spacing:0;text-transform:none;color:var(--muted);font-size:11px}
.rp-lab textarea,.rp-lab input{font-family:var(--body);font-size:13.5px;font-weight:300;
  color:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:9px 11px;
  background:var(--panel2);resize:vertical}
.rp-lab textarea:focus,.rp-lab input:focus{outline:none;border-color:var(--navy);background:var(--panel)}
.rp-acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rp-acts .btn{padding:9px 20px;font-size:13px}
.rp-msg{font-size:12px;color:var(--muted)}
/* The same two tokens .formmsg uses, so a confirmation reads the same here as on the
   Contact form rather than being a second green invented for one panel. */
.rp-msg.ok{color:var(--green);font-weight:700}
.rp-msg.err{color:var(--red);font-weight:700}

/* ==================================================================================
   ABOUT / HOW TO USE / CONTACT
   These were three walls of prose describing the interface. They are now the things a
   reader came to find out, in pieces they can scan.
   ================================================================================== */
.plede{font-size:16.5px;font-weight:300;color:var(--on2);max-width:66ch;margin:0 0 26px}
.pcards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;margin:4px 0 8px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px 19px;
  box-shadow:var(--shadow);animation:rise .44s cubic-bezier(.2,.7,.3,1) both}
.pcard p{margin:9px 0 14px;font-size:13.5px;font-weight:300;color:var(--ink2)}
.pcard .btn-ghost{padding:9px 15px;font-size:12.5px}
.pc-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pc-hd b{font-family:var(--display);font-size:17px;font-weight:800;color:var(--navy);
  letter-spacing:-.01em}
.pc-hd span{font-size:12px;font-weight:300;color:var(--muted)}
.pc-n{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:8px 0 11px}
.pc-fams{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.pc-fam{font-size:11px;font-weight:300;color:var(--ink2);background:var(--panel2);
  border:1px solid var(--line2);border-radius:999px;padding:3px 9px}
.pc-fam b{font-family:var(--mono);font-weight:700;color:var(--navy)}

/* The three families, each beside the chip that stands for it — the key is the chip itself,
   not a description of one, so what is learned here is what is seen everywhere else. */
.kindkey{display:grid;gap:11px;margin:6px 0 20px}
.kk{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:12px;
  padding:11px 14px;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  animation:rise .44s cubic-bezier(.2,.7,.3,1) both}
.kk b{font-size:13.5px;color:var(--navy);white-space:nowrap}
.kk>span:last-child{font-size:13px;font-weight:300;color:var(--ink2)}
/* On the page the chips carry their family's own colour — the same fill they have in the
   list — rather than the masthead inversion, because here the ground is the panel. */
.kindkey .kindchip.b-IR{background:var(--ir);color:var(--ir-ink);border-color:var(--ir-edge)}
.kindkey .kindchip.b-AMC{background:var(--amc);color:var(--amc-ink);border-color:var(--amc-edge)}
.kindkey .kindchip.b-GM{background:var(--gm);color:var(--gm-ink);border-color:var(--gm-edge)}
@media(max-width:560px){.kk{grid-template-columns:auto 1fr;gap:8px 11px}
  .kk>span:last-child{grid-column:1/-1}}

/* The unofficial notice, and the pointer from Contact to the per-provision report. Same
   shape, different weight: one is a warning, the other is a shortcut. */
.pnote{margin:22px 0 6px;padding:15px 17px;border-radius:11px;font-size:13.5px;font-weight:300;
  color:var(--ink2);background:var(--gold-soft);border:1px solid rgba(176,134,42,.32);
  border-left:3px solid var(--gold)}
.pnote b{font-weight:800;color:var(--navy);display:block;margin-bottom:4px}
.pnote-tip{background:var(--panel2);border-color:var(--line2);border-left-color:var(--navy)}
@media(prefers-reduced-motion:reduce){.pcard,.kk{animation:none}}

/* ==================================================================================
   YOU ARE HERE
   In the sidebar's sticky header, shown only while the current provision's row is out of
   view — collapsed away, never drawn, or scrolled off. Pressing it opens the way back down.
   The crest is the reader's own idea for the mark, kept for this one job: a marker on a map
   is exactly where an emblem belongs.
   ================================================================================== */
.herepill{display:flex;align-items:center;gap:8px;width:100%;margin-top:9px;
  padding:7px 10px 7px 8px;background:var(--brand-surface);color:#fff;border:1px solid
  rgba(255,255,255,.12);border-radius:999px;cursor:pointer;font:inherit;text-align:left;
  box-shadow:var(--shadow);animation:rise .32s cubic-bezier(.2,.7,.3,1) both}
.herepill[hidden]{display:none}
.herepill:hover{background:var(--brand-surface2)}
.herepill:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.herepill svg{width:18px;height:18px;flex:none;color:var(--gold)}
.hp-lab{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.hp-code{font-family:var(--mono);font-size:11.5px;font-weight:700;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.herepill{animation:none}}

/* the admin inbox: which provision a report is about, in the code's own face */
.ad-where{font-family:var(--mono);font-size:11px;white-space:nowrap;color:var(--navy)}

/* ==================================================================================
   THE LIST, AS A DRILL-DOWN
   One level on screen at a time: Parts, then a Part's codes, then a code's instruments.
   The trail at the top says where you are and every step of it goes back.
   ================================================================================== */
.tcrumb{position:sticky;top:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:2px;
  padding:0 0 9px;margin-bottom:9px;background:var(--bg);border-bottom:1px solid var(--line2)}
.tcrumb-b{border:0;background:none;cursor:pointer;font:inherit;font-family:var(--mono);
  font-size:11px;font-weight:700;color:var(--blue);padding:3px 5px;border-radius:6px}
.tcrumb-b:hover{background:var(--blue-soft);text-decoration:underline}
.tcrumb-b:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.tcrumb-s{color:var(--faint);font-size:12px;padding:0 1px}
/* Where you are is not a control. A breadcrumb whose last crumb is clickable offers to take
   you where you already are. */
.tcrumb-at{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink);
  padding:3px 5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the heading of the level you are on — the full name the trail had no room for */
.tlhd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:2px 0 10px;
  font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.3}
.tlhd-c{font-family:var(--mono);flex:none}
.tlhd-t{font-weight:300;color:var(--ink2);min-width:0}

/* a row that goes one level deeper */
.tstep{display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;border:0;
  background:none;cursor:pointer;font:inherit;padding:9px 8px;border-radius:8px;
  color:var(--ink);transition:background-color .12s}
.tstep:hover{background:var(--blue-soft)}
.tstep:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.ts-lab{font-size:12.5px;font-weight:700;color:var(--navy);min-width:0;flex:1 1 auto}
.ts-code{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--navy);flex:none}
.ts-ttl{font-size:12px;font-weight:300;color:var(--ink2);min-width:0;flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-n{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none}
/* The chevron says "this goes somewhere", which a row that only highlights does not. */
.ts-go{flex:none;color:var(--faint);font-size:14px;line-height:1;transition:transform .12s,color .12s}
.tstep:hover .ts-go{color:var(--navy);transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.ts-go{transition:none}}

/* the CAR number, wherever a regulation is named. Quiet: it is the one thing on screen this
   tool cannot check against the PDF, so it sits beside the label it can. */
/* .side-car and .sd-car both went with the document card the filter replaced. */
.pc-car{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--gold);
  background:var(--gold-soft);border:1px solid rgba(176,134,42,.3);border-radius:5px;
  padding:2px 6px;flex:none}

/* ---------- admin: reports you can work through ---------- */
.ad-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:11px;margin:10px 0 16px}
.ad-tab{border:0;background:none;cursor:pointer;font:inherit;font-size:12px;font-weight:800;
  color:var(--ink2);padding:7px 14px;border-radius:8px}
.ad-tab b{font-family:var(--mono);font-weight:700;margin-left:6px;opacity:.7}
.ad-tab:hover{background:var(--line)}
.ad-tab.on{background:var(--brand-surface);color:#fff}
.ad-tab.on b{opacity:.85}
.adfb{display:grid;gap:12px}
.adfb-c{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;box-shadow:var(--shadow)}
/* Unread is marked on the edge rather than by colouring the card: a wall of tinted cards
   stops meaning anything once there are twenty of them. */
.adfb-c.new{border-left:3px solid var(--gold)}
.adfb-h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:9px}
.adfb-t{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy)}
.adfb-w{font-family:var(--mono);font-size:11px;color:var(--gold);background:var(--gold-soft);
  border:1px solid rgba(176,134,42,.3);border-radius:5px;padding:2px 7px}
.adfb-d{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
/* The message is the thing. It was a cell in a five-column table; it is the biggest text on
   the card now, and white-space:pre-line keeps the line breaks somebody typed. */
.adfb-m{margin:0 0 13px;font-size:14.5px;font-weight:300;color:var(--ink);line-height:1.65;
  white-space:pre-line;max-width:80ch}
.adfb-a{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.adfb-a .btn-ghost{padding:7px 13px;font-size:12px;text-decoration:none;display:inline-block}
.adfb-n{font-size:12px;color:var(--muted);font-weight:300}
/* The provision links in the other tables were bare <a> with no href — plain grey text that
   happened to respond to a click. */
.adtable a[data-k]{color:var(--on-link);cursor:pointer;border-bottom:1px solid transparent}
.adtable a[data-k]:hover{border-bottom-color:var(--on-link)}

/* ==================================================================================
   THE FLOATING STEPPER
   ON THE PAGE, not beside it. It was pinned 22px from the VIEWPORT's left edge, which on
   any desktop put it on top of the list of Parts — a control for moving through the
   provision, floating over the navigation instead of over the thing it moves through.

   It now starts where the reading pane starts, so it belongs to the page it pages. --sidew
   is the list's width, mirrored onto :root by setSide for exactly this (the stepper is a
   child of <body>, outside the workspace, so it cannot read the workspace's own copy).

   Still bottom LEFT of that pane, because the report flag has the bottom right. Two
   floating controls in one corner would overlap on a phone, and these are pressed far
   more often than that one is.
   ================================================================================== */
/* AT THE TOP. --topbarh is measured and published by fitTopbar, because the header's
   height is not a constant: it drops the search box and folds the navigation as the window
   narrows, and is allowed a second row. A number typed in here would be right at one width
   and wrong at the next.

   AND ON THE RIGHT, which is not a preference. Left-aligned at the top it landed exactly on
   "Back" — measured, the two shared the band from 422px to 468px — and clipped the top of
   the masthead below it. The left edge of that row is taken; the right of it is empty for
   the width of the pane. That also ends the stepper's dependence on --sidew, --wsgap and
   --wspad: those three placed it under the first letter of the provision, which was the
   right sum for a control sitting at the foot of the text and is no sum at all for one
   pinned to the far side of the window. */
/* IN THE MIDDLE, and the middle of the READING PANE rather than of the window.
   The pair it replaces — Back and Forward — was centred on the column of text, because
   that is the measure these controls govern; centring on the window instead would put them
   180px to the left of it, over the gap beside the list.

   Fixed, so it still follows the reader down a long rule, but spanning the pane rather than
   pinned to one edge of it: left at the list's own width plus the gap, right at the window,
   and the contents centred in between. That arithmetic is exactly the content column's
   centre, and --sidew is the variable the grip writes when the list is dragged — so the
   pair re-centres itself as the reader resizes the list, with nothing to keep in step.

   pointer-events:none on the band, auto on the buttons: the band is now 1,100px wide and
   mostly empty, and an invisible strip across the top of the pane would otherwise swallow
   clicks meant for the masthead under it. */
.floatnav{display:none;position:fixed;top:calc(var(--topbarh,88px) + 14px);
  left:calc(var(--sidew,360px) + var(--wsgap));right:0;
  justify-content:center;z-index:40;gap:8px;pointer-events:none}
.floatnav .fn-b{pointer-events:auto}
body.reading .floatnav{display:flex}
/* NO LIST, NO OFFSET. Three states collapse the grid to a single column, and in each of
   them the pane IS the window, so its centre is the window's.

   The 760px one is the one that caught me: .workspace goes to a single column there, but
   the phone rule that zeroed this offset was written at 640. Between 641 and 760 the
   stepper kept an offset for a list that was no longer on the screen — measured at 700px,
   141px to the right of the column it is supposed to be centred on. The rule belongs with
   the grid change, not with the phone type. */
body.listhidden .floatnav{left:0}
@media(max-width:760px){.floatnav{left:0}}
/* The band the stepper sits in. It was the Back row's min-height, which reserved 56px above
   the masthead so the floating pair did not hang over it. The row is gone; the reservation
   is not, because the stepper still needs those 56px to be empty. It is the pane's own top
   padding now — 18px of air plus the band. */
body.reading .wsmain{padding-top:74px}
.floatnav[hidden]{display:none !important}
.fn-b{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;cursor:pointer;
  background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-radius:999px;
  font:inherit;box-shadow:var(--lift);transition:background-color .15s,transform .15s,border-color .15s}
.fn-b[hidden]{display:none}
.fn-b:hover{background:var(--panel2);border-color:var(--navy);transform:translateY(-1px)}
.fn-b:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.fn-ar{font-size:16px;line-height:1;color:var(--gold);flex:none}
/* The direction above the code it goes to: the word is what you aim at, the code is what
   tells you whether you want to. */
.fn-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.fn-t.fn-r{text-align:right}
.fn-t i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.fn-t b{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--navy);
  white-space:nowrap}
@media print{.floatnav{display:none !important}}
/* On a phone the codes go and the arrows stand alone. Two labelled pills plus the report
   flag is three floating things across a 375px screen, which is a toolbar, not a shortcut. */
/* The 760px rule that stood here moved the stepper left when the layout stopped having a
   list beside the text. Anchored to the right it never knew about the list in the first
   place, so there is nothing left to undo. */
@media(max-width:640px){
  .floatnav{left:0;right:0;top:calc(var(--topbarh,88px) + 10px);gap:6px}
  /* 13px, not 12: the arrow is 16px and the border 1px each side, so this is the 44px
     circle a finger hits reliably. The old stepper above the masthead carried that rule
     and it left with it — this is now the only way to step, so it inherits the floor. */
  .fn-b{padding:13px;border-radius:50%}
  .fn-t{display:none}
}

/* ==================================================================================
   PHONE TYPE
   A few things are set at sizes chosen for a 1400px canvas and simply take too much of a
   375px one — a 24px provision title over three lines before the rule starts, a 23px card
   name that wraps mid-word. Reading text is NOT among them: the body stays at 16px, because
   the point of shrinking the furniture is to leave that alone.
   ================================================================================== */
@media(max-width:560px){
  .mast h1{font-size:20px;line-height:1.2}
  /* ".mast-code{font-size:.62em}" was here. With the title at 20px it put the code at
     12.4px — which is the "quite small" of item 15 all over again, just at phone size.
     The code rides the title at .96em here as everywhere else, and it is measured: on an
     ordinary provision at 390px the masthead is 149px tall either way, the same two
     lines. The ones that pay for it are the 31 provisions whose code runs past 40
     characters — 112 pair two provisions with an "&" — and the worst of those comes to 293px
     against 245px. Neither overflows the window. The chip scales with the title
     already, so nothing else here needs a phone value. */

  .rp-name{font-size:19px}
  .rp-s b{font-size:17px}
  .ft-name{font-size:17px}
  .page h1{font-size:30px}
  .plede{font-size:15.5px}
  .pc-hd b{font-size:15.5px}
  /* the counters and labels that sit beside them come down in step, or they stop reading as
     subordinate to the thing they label */
  .rp-s i{font-size:9px}
}

/* ==================================================================================
   NO MARK ON A PHONE — THE NAME INSTEAD
   The mark is three stacked horizontal lines, which IS the menu icon; at 26px in the
   top-left corner people read it as one, and no amount of ring or padding argues them out
   of that. On a phone the brand is the WORDMARK and nothing else — unambiguous, and it says
   whose site this is, which an icon only manages once you already know.

   Measured before committing to it: the bar has 58px spare at 375px and the name at 13px
   with .12em costs 85 against the mark's 44, so it lands with 17px to spare.

   The name is forced visible past .brandbare — the last stage of the header retreat, which
   exists to drop the name when space runs out. On a phone there is nothing left to drop to,
   so that stage becomes a no-op here rather than emptying the brand entirely.
   ================================================================================== */
@media(max-width:620px){
  .brand-mark{display:none}
  .brand-name{display:inline;font-size:13px;letter-spacing:.12em}
  /* .brandbare is the last stage of the header retreat and its job was to drop the name.
     With the name now the ONLY thing in the brand it cannot drop it — the bar wrapped to
     three rows and 107px when it tried and had nothing left to give. So at that stage the
     name SHRINKS instead: the domain goes and the type comes down, which frees about 30px
     while still saying whose site this is. */
  #topbar.brandbare .brand-name{display:inline;font-size:11.5px;letter-spacing:.07em}
  #topbar.brandbare .brand-tld{display:none}
  .brand-tld{letter-spacing:.08em}
  .brand{gap:0;padding:2px;border:0;background:none}
  .brand:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:5px}
}

/* ==================================================================================
   THE READING MEASURE — THERE ISN'T ONE, AND THAT IS THE DECISION
   The provision fills its pane at every width. No max-width, no centring, nothing here to
   reintroduce: this block exists to say the absence is deliberate, because a cap is the
   obvious thing to add back and it has now been removed twice.

   It was 45rem. Measuring what that did on a 1920 desktop settled it — a 768px sheet with
   353px of empty paper down EACH side, a third of the window used and two thirds spent
   protecting a typographic ideal. It was then 90rem, which freed every machine this is
   actually read on but still held a 2560 monitor to the line a 1920 one gets. That last
   cap is gone too, asked for directly: a wide monitor was bought to be used.

   The cost is stated rather than argued, since the width was the ask. Roughly 8.15px per
   character at 15.5px, so the line grows with the window: about 100 characters on a 1440
   laptop, 174 on a 1920 desktop, 250 on a 2560 monitor. Long lines are harder to return
   from — the reader who minds that has HIDE LIST for more of them and can narrow the
   window, and the drag handle on the list sets the pane width directly.

   Two things still hold their own width and are not affected: tables scroll inside .twrap,
   and the landing page keeps #view's 1180px. */

/* ==================================================================================
   THINGS THAT WERE NOT CONTROLS AND NOW ARE
   The list rows, the cross-reference chips, the codes linked inside the text and "open on
   its own" were <div>, <span> and <a href-less> with click handlers — 69 of the 80 clickable
   elements on a provision page could not be reached by a keyboard, and could not show a focus
   ring because they could not take focus.

   They are <button> now, which brings a border, a background, a font and centred text with
   it. This puts each of them back exactly where it looked before, and adds the focus ring
   they were never able to have.
   ================================================================================== */
.tleaf,.chip2,.xr{font:inherit;font-family:inherit;color:inherit;
  background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer}
.tleaf{display:flex;width:100%;align-items:baseline;gap:9px;padding:8px 10px;
  border-radius:8px;flex-wrap:wrap;text-align:left}
/* Inline, so a code inside a sentence stays inside the sentence rather than becoming a block
   that breaks the line it sits on. */
.body .xr{display:inline;font:inherit;color:var(--blue);
  border-bottom:1px dotted #a8c3e4;border-radius:0;vertical-align:baseline}
.body .xr:hover{border-bottom-style:solid}
.related .chip2{display:inline-flex;align-items:center}
/* The focus ring these could never show. Gold on both grounds, offset so it never sits on
   the text it is marking. */
.tleaf:focus-visible,.chip2:focus-visible,.xr:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:5px}

/* The skip link, and the class the live region uses to be heard and not seen. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#16232f;
  font-weight:800;font-size:14px;padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==================================================================================
   THE TABLET
   Landscape 1180 and portrait 820, both keeping the two panes. What changes between them is
   how much of the width the list may take: a fixed 360px is a fifth of a landscape screen and
   nearly half a portrait one.
   ================================================================================== */
@media(min-width:761px) and (max-width:1100px){
  /* The list is clamped rather than fixed, so portrait gives the text the room instead. The
     reader can still drag it — the stored width is clamped into this range, not overridden. */
  /* The width is NOT overridden here. Two rules both trying to own it put the grid and the
     drag handle on different numbers — the divider drawn in one place and the grabbable strip
     in another. --sidew stays the single source of truth and the JS clamps it against the
     viewport instead, so the handle is always exactly on the seam. */
  :root{--wsgap:clamp(14px,1.8vw,24px);--wspad:22px}
  /* Touch, not a pointer: every row in the list becomes a comfortable target. */
  .tstep,.tleaf{min-height:44px;align-items:center}
  .treebtn{padding:11px 8px}
  .tcrumb-b{padding:6px 8px}
  /* The reading measure still applies; there is simply less width to cap. */
  .wsmain{padding:16px var(--wspad) 70px}
}
/* A finger has no hover, so the chevron that appears on hover has to be there already. */
@media(hover:none){
  .sidefilter #bfcar,.sidefilter #bfreg,.sidefilter #bfpart,.sidefilter .bf-fams{height:44px}
  .sidefilter #bfpart{background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px}
  .ts-go{color:var(--muted)}
  /* 26px is a mouse target. The label's min-height follows the same variable, so the rows
     below still start clear of it. */
  :root{--sidehide:40px}
}

/* ==================================================================================
   THE SITE'S OWN WORDS — the editing screen at #/copy
   ----------------------------------------------------------------------------------
   A key and a sentence is what data/copy.json holds, so a row is a narrow gutter with
   the id in it and a wide column with the words. The words are set in the body font at
   something close to reading size and on the panel colour, because the thing being
   edited is a paragraph and a box that looks like a form field invites the wrong kind of
   writing. The chrome — the border, the buttons — arrives on focus or on an edit; with
   thirty-eight passages on one page, a row that is not being worked on should be quiet.

   No new colours. The states use tokens that already carry these meanings elsewhere:
   gold for something changed and not yet saved (as the gold spine does everywhere else),
   --red / --green / --note-ink for the verdicts, --line2 for a surface that has to sit
   apart from the panel without becoming a second panel.
   ================================================================================== */
.cpage{padding-bottom:70px}

/* --- the bar of counters, and the find box --- */
.cpbar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:16px 0 15px;border-top:1px solid var(--on-line);border-bottom:1px solid var(--on-line);
  margin:0 0 6px}
.cpsum{display:flex;flex-direction:column;gap:1px;flex:none}
.cpsum b{font-family:var(--mono);font-size:20px;font-weight:700;
  color:var(--on);font-variant-numeric:tabular-nums;line-height:1.1}
.cpsum span{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-muted)}
#cpfind{flex:1 1 240px;min-width:200px;margin-left:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:999px;
  padding:10px 16px;font-family:var(--body);font-size:14px;color:var(--ink)}
#cpfind:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}

.cpfoot{font-size:12.5px;color:var(--on-muted);font-weight:300;max-width:80ch;margin:12px 0 30px}
.cpfoot code{background:var(--panel);border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:.92em;color:var(--on2);overflow-wrap:anywhere}

/* --- a group of passages: where on the site they appear --- */
.cpgrp{margin:0 0 34px}
.cphd{font-family:var(--display);font-size:19px;font-weight:800;color:var(--navy);
  margin:0 0 2px;display:flex;align-items:baseline;gap:9px;letter-spacing:-.01em}
.cphd span{font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--on-muted);font-variant-numeric:tabular-nums}
.cphint{font-size:12px;color:var(--on-muted);font-weight:300;margin:0 0 12px}
.cphint code{font-size:11.5px;color:var(--note-ink)}

/* --- one passage --- */
.cprow{display:grid;grid-template-columns:230px 1fr;gap:0 20px;align-items:start;
  padding:14px 0 15px;border-top:1px solid var(--line)}
.cprow[hidden]{display:none}
.cpkey{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-top:6px}
.cpid{font-family:var(--mono);font-size:11px;line-height:1.5;
  color:var(--on2);word-break:break-all;background:none;border:0;padding:0}
.cpt{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--on-muted);
  background:var(--panel)}
.cpt.mk{color:var(--on-muted)}
.cpt.say{color:var(--note-ink);border-color:var(--gold);background:var(--gold-soft);cursor:help}
.cpt.gap{color:var(--red);border-color:var(--red)}
.cpt.unused{color:var(--on-muted);border-style:dashed}

/* The words. Set as prose, not as a field: the border only appears when it is being
   worked on, so a page of thirty-eight of these is a page of paragraphs. */
.cptx{display:block;width:100%;resize:vertical;overflow:hidden;
  font-family:var(--body);font-size:14.5px;line-height:1.6;font-weight:300;color:var(--ink);
  background:var(--panel);border:1px solid transparent;border-left:2px solid var(--line2);
  border-radius:0 7px 7px 0;padding:9px 12px;transition:border-color .12s,background .12s}
.cptx:hover{border-left-color:var(--muted)}
.cptx:focus{outline:none;border-color:var(--line2);border-left-color:var(--blue);
  background:var(--panel)}
.cprow.dirty .cptx{border-left-color:var(--gold);background:var(--gold-soft)}
.cprow.gap .cptx{border-left-color:var(--red)}

/* Actions, small and quiet. .btn is sized for a page's main action and is far too big
   to repeat thirty-eight times, so it is scaled down here rather than given a new class
   that would then have to be kept in step with it. */
.cpacts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px;min-height:26px}
.cpacts .btn,.cpacts .btn-ghost{padding:5px 13px;font-size:12px;font-weight:700;border-radius:999px}
.cpacts .btn{background:var(--brand-surface)}
.cprow:not(.dirty) .cpacts .btn:disabled{background:var(--line2);color:var(--on2)}
/* .btn:disabled is .45 opacity site-wide, which is right for a page's main action — one
   large button, obviously greyed. At 12px on thirty-eight rows it takes the label to 2.2:1
   and the shape to 1.1:1 against the canvas, and a Save nobody can see does not read as
   disabled, it reads as absent. Lifted here only: still plainly inactive (the label is
   around 3.3:1, well under the 4.5:1 an ACTIVE control would owe), but present, so what
   happens when you type is discoverable before you type. Disabled controls are exempt from
   the contrast minimum, which is what makes the lower bound a judgement and not a rule. */
.cpacts .btn:disabled,.cpacts .btn-ghost:disabled{opacity:.62}
.cpmsg{font-size:12px;font-weight:300;color:var(--on-muted);line-height:1.45;flex:1 1 200px;
  min-width:0}
.cpmsg.ok{color:var(--green);font-weight:400}
.cpmsg.err{color:var(--red);font-weight:400}
.cpmsg.warn{color:var(--note-ink);font-weight:400}

/* The rendered markup, in a box that cannot be mistaken for the editor. */
.cppv{margin-top:10px;padding:14px 16px;border:1px dashed var(--line2);border-radius:9px;
  background:var(--panel2);font-size:14px;color:var(--ink);overflow-x:auto}
.cppv[hidden]{display:none}
.cppv>*:first-child{margin-top:0}
.cppv>*:last-child{margin-bottom:0}
/* A passage may carry a whole page's markup — the About page is one string — and that
   markup sets its own width and animation. Neither belongs inside a preview box. */
.cppv .page,.cppv .reveal{max-width:none;margin:0;animation:none}

.cpend{margin-top:34px;padding-top:16px;border-top:1px solid var(--on-line);
  font-size:12.5px;color:var(--on-muted);font-weight:300}

/* One column under about 760px: a 230px gutter beside a textarea stops being a gutter and
   starts being a squeeze. The id goes above the words, which is the order it reads in. */
@media(max-width:760px){
  .cprow{grid-template-columns:1fr;gap:6px}
  .cpkey{flex-direction:row;align-items:center;flex-wrap:wrap;padding-top:0}
  .cpid{word-break:break-word}
  #cpfind{margin-left:0}
}


/* ==================================================================================
   THE HIERARCHY, INDENTED  (item 16)
   ----------------------------------------------------------------------------------
   Under one code the list is the rule, then the AMC that offer a way to comply, then
   the GM that only explain. They were drawn at one depth, so the list read as nine
   equal things; now each step in is a level of authority.

   The gutter carries a hairline rather than plain space. Three levels of bare indent
   at this row height reads as a ragged left margin — the line makes it deliberate and
   says the row hangs off something above it. --line2 because it is the same weight of
   rule used everywhere else for a division inside a panel; no new colour.
   ================================================================================== */
.tleaf{position:relative}
.tleaf.tl-lv1{padding-left:30px}
.tleaf.tl-lv2{padding-left:50px}
.tleaf.tl-lv1::before,.tleaf.tl-lv2::before{
  content:"";position:absolute;top:4px;bottom:4px;width:1px;background:var(--line2)}
.tleaf.tl-lv1::before{left:14px}
.tleaf.tl-lv2::before{left:34px}
/* On the selected row the ground goes dark, so the hairline has to come off it or it
   draws a bright scratch down the middle of the highlight. */
.tleaf.on::before{background:rgba(255,255,255,.28)}
/* A phone gives the list about half the width. The steps halve with it: the hierarchy is
   worth less than the title being readable, and at 30px+50px a GM title had four words
   a line. */
@media(max-width:760px){
  .tleaf.tl-lv1{padding-left:20px}
  .tleaf.tl-lv2{padding-left:32px}
  .tleaf.tl-lv1::before{left:9px}
  .tleaf.tl-lv2::before{left:21px}
}


/* ---- item 22: the history control inside the search bar ----
   Styled as the three chips beside it, because it belongs to the same row of controls on
   the same field. A <button> needs the reset the chips do not: a browser gives it its own
   font, background and border, and .chip was written for a <span>. */
.topsearch .tshist{font-family:var(--mono);padding:5px 9px;
  display:inline-flex;align-items:center;justify-content:center;min-width:26px;flex:none;
  /* line-height:inherit is the point. The three chips beside it are spans, which take the
     body's line-height; a button does not — the browser gives it `normal`, about 1.2 — so
     the control stood 4px shorter than its neighbours in a row whose whole purpose is that
     they are one set of controls. Inheriting is the literal statement of "the same as those".
     The glyph is a shade larger than the chips' 10.5px because it is a symbol, not a word. */
  font-size:11px;line-height:inherit}
.topsearch .tshist[aria-expanded="true"]{color:var(--navy);background:var(--gold-soft);
  border-color:var(--gold)}


/* ---- item 8: the declutter control ----
   Hides the apparatus and nothing else. .related carries all three cross-reference rows
   (Related, Refers to, Referenced by); .subnote is the note about subscripts and
   superscripts. The provision text, its tables, its figures and its PDF page number are
   deliberately untouched — see the note on setLean in app.js.

   display:none rather than visibility or opacity, because the point is to take the elements
   out of layout: on a rule with fourteen related instruments these rows are most of what
   the page costs, and a hidden element that is still laid out saves nothing. */
/* "body.lean .related, body.lean .subnote{display:none}" and ".sf-row-lean{margin-top:2px}"
   were here, for the Shown / Hidden control in the sidebar. Both went when the control did
   — see the withdrawal note in app.js where LEAN used to be defined. */


/* ---- item 24's own block, now empty ----
   ".backbar" and ".bb-nav" stood here: a centred pair of ghost pills reading "← Back" and
   "Forward →", sized like .btn-ghost but smaller so they would not compete with the
   provision's title. Withdrawn on request. The centring they introduced did not go with
   them — it moved to .floatnav, further up this file, which is the pair that is left. */

/* ==================================================================================
   THE COMPLIANCE MATRIX  (#/matrix)
   A seven-column table an auditor reads across, so it is a real <table> and not a grid of
   divs: the row-and-column relationship is what lets a screen reader say "Company
   reference: OM-A 8.2.1.8" rather than reading 105 cells in a line.

   Palette untouched. The only colours here are the tokens this site already has — the gold
   for a thing needing attention, the navy for a reference, the muted greys for provenance.
   A compliance status is deliberately NOT a traffic light: green/amber/red would say this
   screen knows whether the operator complies, and it does not. Weight and ink carry the
   distinction instead, and "Not applicable" recedes rather than reassures.
   ================================================================================== */
.mxpage{max-width:none}
.mxsrc{font-size:12.5px;font-weight:300;color:var(--ink2);background:var(--panel2);
  border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:0 10px 10px 0;
  padding:11px 15px;margin:0 0 18px}
.mxwarn{color:var(--gold-ink,var(--navy));font-weight:700}

/* the picker: one field and one button, on the measure of the prose above it */
.mxpick{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0 0 20px;max-width:620px}
.mxpick label{display:flex;flex-direction:column;gap:5px;flex:1 1 280px;min-width:0;
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.mxpick input{font-family:var(--mono);font-size:14px;padding:10px 13px;border-radius:9px;
  border:1px solid var(--line2);background:var(--panel);color:var(--ink)}
.mxpick input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* the provision this matrix is about */
.mxhd{background:var(--ir);color:#fff;border-radius:var(--r) var(--r) 0 0;padding:18px 24px 16px}
.mxhd-c{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.01em}
.mxhd-t{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;margin:4px 0 6px}
.mxhd-m{font-size:12px;font-weight:300;color:rgba(255,255,255,.74)}

/* step 2, as its own block, because it is its own step */
.mxscope{background:var(--panel);border:1px solid var(--line);border-top:none;padding:18px 24px}
.mxscope h2{font-family:var(--display);font-size:17px;font-weight:800;margin:0 0 6px;color:var(--navy)}
.mxscope ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.mxscope li{border-left:2px solid var(--line2);padding:2px 0 2px 13px}
.mxsc-t{font-size:13.5px;font-weight:700;color:var(--ink)}
.mxsc-w{font-size:12.5px;font-weight:300;color:var(--ink2);margin-top:3px}
.mxsc-b{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:4px}
.mxsc-a{font-size:11px;color:var(--faint);margin-top:3px}

.mxnote{font-size:13px;font-weight:300;color:var(--ink2);line-height:1.6;margin:0}
.mxnote-hard{background:var(--gold-soft);border:1px solid #eeddb8;border-radius:10px;
  padding:13px 17px;margin:16px 0;color:var(--ink)}

/* the table */
.mxwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.mxt{border-collapse:collapse;width:100%;min-width:980px;font-size:12.5px}
.mxt th,.mxt td{text-align:left;vertical-align:top;padding:11px 13px;border-bottom:1px solid var(--line)}
.mxt thead th{position:sticky;top:0;background:var(--panel2);font-family:var(--mono);
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid var(--line2);z-index:1}
.mxt tbody tr:hover{background:var(--panel2)}
.mxt tbody th{font-weight:400}
.mxref{display:block;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--navy)}
.mxreq{display:block;font-weight:300;color:var(--ink2);margin-top:3px;max-width:30ch}
.mxsec{display:block;font-weight:300;color:var(--ink2);margin-top:2px;max-width:24ch}
.mxpg{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:2px}
.mxev{max-width:44ch}
.mxev q{font-style:normal;color:var(--ink);quotes:"\201C" "\201D"}
.mxwhy{display:block;font-size:11.5px;font-weight:300;color:var(--muted);margin-top:4px}
.mxamc{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:3px}
.mxcov{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:2px}
.mxwhen{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.mxby,.mxsign{display:block;color:var(--faint);margin-top:2px}

/* A status is a word, not a colour. "Likely" must not look like a pass, because it is not
   one — the only emphasis here distinguishes a row that needs attention from one that does
   not, and nothing on this screen is allowed to look like an approval. */
.mx-s{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;
  border:1px solid var(--line2);color:var(--ink2);background:var(--panel2);white-space:nowrap}
.mx-likely{border-color:var(--navy);color:var(--navy)}
.mx-unknown,.mx-pointer{border-color:var(--gold);color:var(--gold-ink,var(--navy));
  background:var(--gold-soft)}
.mx-not-applicable,.mx-no-stated{opacity:.6}
.mxt tr.mx-off th,.mxt tr.mx-off td{opacity:.62}

.mxfoot{font-size:12px;font-weight:300;color:var(--muted);margin:14px 0 0}

@media(max-width:760px){
  .mxhd-t{font-size:20px}
  .mxscope{padding:15px 17px}
}