/* 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;
  /* the UAE flag, for the mark */
  --uae-red:#ce1126; --uae-green:#00732f; --uae-white:#ffffff; --uae-black:#111820;
  --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 flag 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. */
#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)}
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}
/* Policra mark — a sheet with a severity scale running green to red. The scale is not
   decoration: it is the same green/amber/red the compliance matrix uses for covered /
   weak / gap, so the logo states what the product does. Drawn as SVG so it stays crisp
   at any size and takes its colours from the palette. */
.brand-mark{width:26px;height:25px;flex:none;overflow:visible;transition:.2s}
.brand-mark rect{stroke:rgba(0,0,0,.18);stroke-width:.6}
.brand-mark .bm-frame,.brand-mark .bm-hook{fill:none;stroke:#fff;stroke-width:5.4;
  stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.brand:hover .bm-frame,.brand:hover .bm-hook{stroke:#fff}
/* away from home the mark becomes the way back, so it reads as a close control */
.brand.close .brand-mark{transform:rotate(-90deg) scale(.94)}
.brand.close .bm-frame,.brand.close .bm-hook{stroke:var(--gold)}
.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. */
.topnav{display:flex;align-items:center;gap:clamp(9px,1.3vw,20px);flex:1 1 auto;min-width:0;
  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. */
.sidehd{position:sticky;top:0;z-index:3;background:var(--bg);
  padding:18px 0 12px;margin-bottom:10px;border-bottom:1px solid #e6ddc8}
.sidename{font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.01em;
  color:var(--navy);text-align:center;line-height:1.1;margin-bottom:12px}
.sidetools{display:flex;gap:7px}
.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{border-color:var(--navy)}
.hidebtn:hover{background:var(--gold-soft);border-color:var(--gold)}

/* With the list gone the reading column would otherwise run the full width of a wide
   display, so centre it and hold a comfortable measure. */
body.listhidden .wsmain{display:flex;flex-direction:column;align-items:center}
body.listhidden .wsmain>*{width:100%;max-width:1180px}
body.listhidden .wsmain>.twrap,body.listhidden .wsmain>.tcap{max-width:1180px}



.hactions{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}

/* regulation switcher — always visible */
/* The switcher lives in the drawer now, not on the bar — it is reachable from every
   screen there, and the bar keeps its width for the sections and the search. */
/* Built to match the search field beside it: the same translucent shell and the same
   999px radius, and the selected regulation is a round bubble styled like a search chip.
   Two controls sitting side by side on one bar should look like one family — the gold
   slab version read as a third thing. Size is unchanged. */
.regsw{display:flex;align-items:center;gap:4px;padding:5px;height:var(--ctrlh);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;flex:none;transition:.16s}
.regsw:focus-within{border-color:rgba(255,255,255,.4)}
.regsw button{display:flex;align-items:center;align-self:stretch;
  font-family:var(--body);font-size:10.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#c3d4e6;background:transparent;
  border:1px solid transparent;padding:0 14px;border-radius:999px;cursor:pointer;
  white-space:nowrap;
  transition:background-color .45s cubic-bezier(.4,0,.2,1),color .45s cubic-bezier(.4,0,.2,1),
             border-color .45s cubic-bezier(.4,0,.2,1)}
.regsw button:hover{color:#fff;background:rgba(255,255,255,.16)}
/* the same bubble the search chips use */
.regsw button.on{color:var(--navy);background:#fffdf7;border-color:#efe7d3;font-weight:800}
.regsw button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* header search — a pill, hidden on the home screen */
.topsearch[hidden]{display:none}          /* display:flex would otherwise beat [hidden] */
.topsearch{flex:1 1 260px;display:flex;align-items:center;gap:7px;min-width:0;max-width:520px;height:var(--ctrlh);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:0 7px 0 15px;
  /* 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}
.topsearch:focus-within{border-color:var(--navy);box-shadow:0 0 0 4px rgba(13,43,78,.07)}
.topsearch .tsico{color:var(--faint);font-size:14px;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:#fff;
  font-family:var(--body);font-size:12.5px;font-weight:300;padding:0;outline:none;
  text-overflow:ellipsis;align-self:stretch}
.topsearch input::placeholder{color:#a9bed4;opacity:1}
.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. */
#view{max-width:none;margin:0;padding:14px 32px 90px}
#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)}
.backbar a{font-size:13px;color:var(--on-muted);font-weight:300}
.backbar a:hover{color:var(--on-link)}
/* Back stays on the left; the provision stepper is centred on the same line. Three columns
   with the outer two equal is what actually centres the middle one — a flex row with
   space-between would leave it wherever "Back" happened to end, so it would sit off-centre
   and shift as the label changed. .bb-pad is the empty right column that buys the symmetry. */
.backbar.hasnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.backbar.hasnav .bb-back{justify-self:start}
.backbar.hasnav .bb-pad{display:block}
/* The regulation switcher's segmented pill, restated for the light workspace background.
   Same geometry and the same grouped reading; the switcher's own palette is built for the
   dark header and would disappear against this one. */
.provnav{justify-self:center;display:flex;align-items:stretch;gap:2px;padding:3px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:999px;
  box-shadow:var(--shadow)}
.provnav button{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;
  font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.05em;
  color:var(--ink2);background:transparent;border:1px solid transparent;border-radius:999px;
  cursor:pointer;white-space:nowrap;max-width:34vw;
  transition:background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),
             border-color .3s cubic-bezier(.4,0,.2,1)}
.provnav button:hover:not(:disabled){color:var(--navy);background:var(--panel);
  border-color:var(--line2)}
.provnav button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.provnav button:disabled{cursor:default;opacity:.42}
.provnav .pn-ar{font-size:16px;line-height:1;color:var(--gold)}
.provnav button:disabled .pn-ar{color:var(--muted)}
.provnav .pn-side{text-transform:uppercase;font-size:10px;letter-spacing:.09em;
  color:var(--muted);font-weight:800}
.provnav .pn-code{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis}
.provnav button:disabled .pn-code{font-family:var(--body);font-weight:400;color:var(--muted);
  letter-spacing:0}
/* the counter is the group's hinge — it says where you are without being a control */
.provnav .pn-at{display:flex;align-items:center;padding:0 12px;font-family:var(--mono);
  font-size:12px;font-weight:700;color:var(--navy);border-left:1px solid var(--line2);
  border-right:1px solid var(--line2)}
.provnav .pn-at span{color:var(--muted);font-weight:400}
@media(max-width:820px){
  /* the codes go first: the arrows and the counter still step and still locate */
  .provnav .pn-side,.provnav .pn-at{display:none}
  .provnav button{padding:0 12px}
  .backbar.hasnav{grid-template-columns:auto 1fr;gap:8px}
  .backbar.hasnav .bb-pad{display:none}
}
.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 */
.workspace{height:100%;display:grid;grid-template-columns:360px minmax(0,1fr);
  column-gap:clamp(18px,2.1vw,34px)}
/* No padding-top here. The pane is the scroll container and .sidehd sticks to its top
   edge, so any top padding becomes a live band ABOVE the stuck header with nothing
   covering it — the tree rows slid up through it. The 14px now lives on .sidehd, which
   has a background, so the strip is opaque at every scroll position. */
.wsside{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;color:var(--ink);
  padding:0 16px 60px;border-right:1px solid #e6ddc8;background:var(--bg);
  /* keep scrollIntoView clear of the sticky heading, or the row lands half-hidden */
  scroll-padding-top:110px;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 32px 80px;scroll-padding-top:12px}
/* Fill the pane on any normal display; only a very wide monitor keeps a margin, so
   regulation prose never runs to a 200-character line. Tables are exempt — they
   scroll inside their own wrapper. */
/* Browse / search / provision pages sit left in their pane, as they did before — the
   list is on the left and the reading column reads better anchored to it than floating
   away from it. The centred treatment still applies when the list is HIDDEN, which is a
   different case and was asked for separately. */
.wsmain>*{max-width:1400px}
.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. */
.badge{font-family:var(--mono);font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;
  letter-spacing:.04em;white-space:nowrap;border:1px solid}
.b-IR{background:var(--ir);color:var(--ir-ink);border-color:var(--ir-edge)}
.b-AMC{background:var(--amc);color:var(--amc-ink);border-color:var(--amc-edge)}
.b-GM{background:var(--gm);color:var(--gm-ink);border-color:var(--gm-edge)}
.b-Appendix{background:var(--appx);color:var(--appx-ink);border-color:var(--appx-edge)}
.b-Article{background:var(--art);color:var(--art-ink);border-color:var(--art-edge)}
.b-Definitions{background:var(--defn);color:var(--defn-ink);border-color:var(--defn-edge)}
.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. */
.mast-code{font-family:var(--mono);font-size:.58em;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. The line STYLE still says the same thing on its own
   — solid binds, dashed does not — so the distinction survives greyscale, printing and
   colour-blindness even though the masthead is now carrying it in colour.

   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 dashed 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 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 a.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{background:var(--mast-bg,var(--brand-surface));color:var(--mast-ink,#fff);
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 18px}
/* The instrument's label — AMC1, GM2. Outlined in the masthead's own ink rather than filled,
   because a filled chip would be the masthead's colour on the masthead's colour. */
.sub-kind{flex:none;font-family:var(--body);font-size:9.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mast-ink,#fff);
  border:1px solid var(--mast-line,rgba(255,255,255,.4));border-radius:99px;padding:3px 9px}
.sub-code{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--mast-ink,#fff);min-width:0;overflow-wrap:anywhere}
/* The PDF page. Quiet — it is provenance, not content — but it is the only thing
   distinguishing two instruments that carry the same label: CAT.POL.A.330 has a GM1 on
   page 823 and a second GM1 on page 825. */
.sub-pg{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mast-dim,rgba(255,255,255,.72));white-space:nowrap}
.sub-open{margin-left:auto;flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;
  color:var(--mast-ink,#fff);cursor:pointer;white-space:nowrap;
  border-bottom:1px solid var(--mast-line,rgba(255,255,255,.4));transition:opacity .14s}
.sub-open:hover{opacity:.72}
.sub-open:focus-visible{outline:2px solid var(--mast-ink,#fff);outline-offset:3px;border-radius:2px}
/* 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. */
.subsheet>.body,.subsheet>.note{border:0;border-radius:0;box-shadow:none;margin:0}
.subsheet>.body{padding:20px 24px 20px 94px}
/* The spine, and the same line STYLE as the full sheet: solid binds, dashed does not, so
   the distinction survives greyscale, printing and colour-blindness. */
.subsheet.k-IR{border-left:3px solid var(--ir)}
.subsheet.k-AMC{border-left:3px solid var(--amc)}
.subsheet.k-GM{border-left:3px dashed 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}
/* A rule between two instruments that share a label, so a second GM1 does not read as a
   continuation of the first. */
.sepnote{display:flex;align-items:center;gap:12px;margin:22px 14px 6px;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on2)}
.sepnote::before,.sepnote::after{content:"";flex:1 1 auto;height:1px;background:var(--gold);opacity:.5}
.sepnote span{flex:none}
.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 .badge{flex:none}

/* ---------- figures ---------- */
.figgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.figcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;
  cursor:pointer;transition:.16s;box-shadow:var(--shadow)}
.figcard:hover{border-color:var(--navy);transform:translateY(-3px)}
.figcard .fc-num{float:right;font-family:var(--mono);font-size:10px;color:#fff;background:var(--brand-surface);
  border-radius:999px;padding:2px 8px;font-weight:700}
.figcard .fc-code{font-family:var(--mono);color:var(--navy);font-weight:700;font-size:13px}
.figcard .fc-t{color:var(--muted);font-size:12.5px;margin-top:5px;font-weight:300}

/* ---------- 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}
.st-col{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  overflow:hidden;min-width:0;display:flex;flex-direction:column;max-height:62vh}
.st-body{overflow-y:auto;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:46vh}
}
/* 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{position:absolute;top:calc(100% + 6px);right:14px;width:400px;max-height:72vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--lift);z-index:60;padding:6px}
.figpanel .hd{font-weight:800;color:var(--navy);padding:9px 10px;position:sticky;top:0;background:var(--panel);border-bottom:1px solid var(--line)}
.figrow{padding:9px 10px;border-radius:8px;cursor:pointer;border-bottom:1px solid var(--line)}
.figrow:hover{background:var(--panel2)}
.figrow .n{float:right;font-family:var(--mono);font-size:10px;color:#fff;background:var(--brand-surface);border-radius:999px;padding:2px 8px;font-weight:700}
.figrow .fc{font-family:var(--mono);color:var(--navy);font-weight:700}
.figrow .ft{font-size:12px;color:var(--muted);margin-top:3px;font-weight:300}

/* ---------- disclaimer + footer ---------- */
.modal-ov{position:fixed;inset:0;background:rgba(13,43,78,.55);display:none;align-items:center;
  justify-content:center;z-index:1000;padding:20px;backdrop-filter:blur(3px)}
.modal-bx{background:var(--panel);max-width:580px;border-radius:20px;padding:30px 32px;
  border:1px solid var(--line2);box-shadow:0 24px 60px rgba(13,43,78,.3);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}
.foot{margin-top:70px;padding:26px 20px;border-top:1px solid var(--on-line);color:var(--on-muted);
  font-size:12px;text-align:center;font-weight:300}
.foot a{color:var(--on-link)}

/* ---------- 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,.backbar,.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,.sub-mast{background:#fff !important;color:#000;border-bottom:2px solid #000;padding:0 0 8pt}
  .mast h1,.mast-code,.sub-code{color:#000}
  .sub-kind{color:#000;border-color:#000}
  .mast-reg,.mast-meta,.sub-pg{color:#333}
  .sub-open{display:none}          /* "Open on its own" is a click; on paper it is nothing */
  .mast,.mast+.sheet-in,.sub-mast{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 a.xr::after{content:" [" attr(data-c) "]";font-size:.82em;color:#333}
  .body a.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 ---------- */
@media(max-width:1080px){
  /* 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 80px}
  body.wsmode .foot{display:block}
  .workspace{height:auto;grid-template-columns:1fr}
  .wsside{height:auto;overflow:visible;border-right:none;border-bottom:1px solid var(--line);
    background:transparent;padding:0 0 18px;margin-bottom:18px}
  .wsmain{height:auto;overflow:visible;padding:0}
  .sidehd{position:static}
}
/* "@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 80px}
  .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}
  .figgrid,    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 ---------- */
.showlist{position:absolute;left:0;top:14px;z-index:4;display:none;cursor:pointer;
  font:inherit;font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--brand-surface);border:0;
  border-radius:0 9px 9px 0;padding:9px 12px 9px 10px;box-shadow:var(--shadow)}
.showlist::before{content:"\203A";font-size:15px;line-height:1;margin-right:6px;vertical-align:-2px}
.showlist:hover{background:var(--brand-surface2)}
.showlist:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.workspace{position:relative;
  transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1),column-gap .28s cubic-bezier(.4,0,.2,1)}
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}
body.listhidden .showlist{display:block}
@media(prefers-reduced-motion:reduce){.workspace{transition:none}}
/* stacked layout has no side column to hide */
@media(max-width:1080px){
  .showlist{display:none !important}
  body.listhidden .workspace{grid-template-columns:1fr;column-gap:0}
  body.listhidden .wsside{opacity:1;pointer-events:auto;padding:0 0 18px}
}

/* ---------- 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 the flag bars once */
.brand-mark.riffle rect{animation:riffle 1.4s cubic-bezier(.4,0,.2,1) both}
.brand-mark.riffle rect:nth-of-type(2){animation-delay:.08s}
.brand-mark.riffle rect:nth-of-type(3){animation-delay:.16s}
.brand-mark.riffle rect:nth-of-type(4){animation-delay:.24s}
@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 rect{animation:none}}

/* The regulation switcher 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}}

/* ---------- cross-references on/off ----------
   Identical to the AIR OPS / FCL switcher: same pill, same bubble, same slow fade. It does
   the same kind of job — two states, one visible at a time — and it sits on the SAME navy
   masthead, so it takes the same light-on-dark treatment.

   This block was lost once already: it had been appended after the Ask panel CSS, and
   truncating the file to replace that panel took this with it, leaving two unstyled
   default buttons on the masthead. */
.xrsw{display:inline-flex;align-items:center;gap:4px;margin-left:14px;padding:4px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;vertical-align:middle;transition:.16s}
.xrsw:focus-within{border-color:rgba(255,255,255,.4)}
.xrsw button{display:inline-flex;align-items:center;font-family:var(--body);
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#c3d4e6;background:transparent;border:1px solid transparent;
  padding:4px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background-color .45s cubic-bezier(.4,0,.2,1),color .45s cubic-bezier(.4,0,.2,1),
             border-color .45s cubic-bezier(.4,0,.2,1)}
.xrsw button:hover{color:#fff;background:rgba(255,255,255,.16)}
.xrsw button.on{color:var(--navy);background:var(--chip-on);border-color:var(--chip-on-edge)}
.xrsw button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.xrefs[hidden]{display:none}

/* The related-instruments heading now carries the show/hide switch, so it becomes a row */
.subsheets-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* the switch sits on the light canvas here, not on the navy masthead */
.subsheets-hd .xrsw{background:rgba(13,43,78,.06);border-color:rgba(13,43,78,.14);margin-left:0}
.subsheets-hd .xrsw button{color:var(--on2)}
.subsheets-hd .xrsw button:hover{color:var(--navy);background:rgba(13,43,78,.09)}
.subsheets-hd .xrsw button.on{color:var(--navy);background:var(--chip-on);border-color:var(--chip-on-edge)}
.subsheet[hidden],.sepnote[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. */
.plates{display:flex;flex-direction:column;gap:0;margin:14px 0 64px;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 — --uae-red belongs to
   the flag in the mark, and --red flips to a pale pink in the dark theme for use as TEXT,
   which as a border would disappear. */
: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 ---------- */
#themebtn .ic-moon{display:none}
:root[data-theme="dark"] #themebtn .ic-sun{display:none}
:root[data-theme="dark"] #themebtn .ic-moon{display:block}

/* 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"] .regsw button.on{background:#e7eef6;border-color:#e7eef6;
  color:var(--brand-surface)}
: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}

.regpick{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin:0 0 40px}
.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)}

.lastup{margin:6px 0 26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.6;color:var(--muted)}
.lastup b{color:var(--ink2)}

/* ---------- 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. */
.bfilter{display:grid;gap:12px 14px;margin:0 0 14px;align-items:end;
  grid-template-columns:auto auto 1fr}
.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{display:flex;gap:4px;padding:4px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:11px;height:42px;align-items:center}
.bf-r{border:0;background:none;cursor:pointer;font:inherit;font-size:12px;font-weight:800;
  letter-spacing:.03em;color:var(--ink2);padding:7px 13px;border-radius:8px;white-space:nowrap}
.bf-r:hover{background:var(--line)}
.bf-r.on{background:var(--brand-surface);color:#fff}
#bfpart{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:250px;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}
.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 .badge{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}
.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}
.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:inherit;padding:0;opacity:.82}
.navmore:hover{opacity:1}
#topbar.navslim .navmore-wrap{display:block}
#topbar.navslim .topnav a[data-sec]{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 .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)}
@media(prefers-reduced-motion:reduce){.navmenu{animation:none}}

@media(max-width:1100px){
  .bfilter{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .bfilter{grid-template-columns:1fr}
  #bfpart,.bf-seg,.bf-fams{max-width:none;width:100%}
  .bf-seg,.bf-fams{justify-content:stretch}
  .bf-r,.bf-f{flex:1}
}