/* ── the token layer ─────────────────────────────────────────────────────────
   Colour, spacing, type, shape and the shell come from tokens.js and are
   emitted here as custom properties. They were literals in this file, which
   worked until two surfaces had to agree — a status chip on a page and the same
   status in a PDF — and then stopped working one literal at a time.

   The semantic colours in particular are no longer chosen by eye. Each pair was
   put through simulations of protanopia, deuteranopia and tritanopia and
   compared by a colour difference in Lab; the previous amber and red were
   indistinguishable to a red-green reader, and the green and purple to a
   blue-blind one, because each pair differed almost only in hue. See tokens.js.

   The --info token stays for now: it is used by callouts that are neither an
   action nor
   a finding, and removing it would mean deciding what those are, which is a
   later pass. */
:root{
  --bg:#F4F6F8;--panel:#FFFFFF;--raise:#FAFBFC;--sunk:#EDF0F3;--ink:#111519;--ink2:#38424E;--muted:#5E6976;--faint:#8A94A1;--line:#DFE4E9;--hair:#EAEEF2;--control:#7C8894;--brand:#0F4C81;--brand-ink:#FFFFFF;--brand-soft:#EEF4FC;--ok:#0A7A46;--ok-bg:#E7F6EC;--ok-line:#BCDFC9;--hold:#8A6B08;--hold-bg:#FFF4CE;--hold-line:#E4D4A4;--no:#7A0C14;--no-bg:#FDE7E9;--no-line:#F0CCC5;--other:#2E2478;--other-bg:#F1EEFF;--other-line:#DACDEE;--neutral:#374151;--neutral-bg:#F3F4F6;--focus:#0F6CBD;
  --sans:system-ui,"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Noto Sans Mono",monospace;
  --measure:68ch;
  --space-hair:2px;--space-tight:4px;--space-snug:6px;--space-base:8px;--space-gutter:12px;--space-card:16px;--space-section:24px;--space-block:32px;--space-major:40px;--space-page:48px;--text-micro:10.5px;--text-meta:12px;--text-small:13px;--text-body:15px;--text-body-large:16px;--text-lead:17px;--text-h3:18px;--text-h2:21px;--text-h1:27px;--text-display:34px;--lead-tight:1.25;--lead-snug:1.4;--lead-body:1.55;--lead-loose:1.7;--radius-control:6px;--radius-panel:10px;--radius-chip:6px;--border-width:1px;--focus-ring:2px;--focus-offset:2px;--shadow-raise:0 1px 2px rgba(17,21,25,.06);--shadow-panel:0 1px 3px rgba(17,21,25,.08);--shadow-dialog:0 12px 40px rgba(17,21,25,.22);--shell-top-bar:50px;--shell-rail-collapsed:72px;--shell-rail-expanded:240px;--shell-command-bar:46px;--shell-content-max:1600px;--shell-context-pane:360px;--shell-context-pane-from:1600px;--shell-reading-max:760px;--shell-public-max:1400px;--shell-touch-min:44px;--shell-touch-external:48px;--shell-touch-dense:28px;--motion-fast:120ms;--motion-base:160ms;--motion-slow:220ms;--motion-ease:cubic-bezier(.2,0,.2,1);
  color-scheme:light dark;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1317;--panel:#171C22;--raise:#1D232A;--sunk:#101519;--ink:#E8EDF2;--ink2:#C3CCD6;--muted:#95A1AE;--faint:#6F7C8A;--line:#2A323B;--hair:#222930;--control:#7A8798;--brand:#5CA8F0;--brand-ink:#0B1015;--brand-soft:#16242F;--ok:#6ED79A;--ok-bg:#13251B;--ok-line:#245437;--hold:#E8C468;--hold-bg:#241E10;--hold-line:#5A4A20;--no:#F08C90;--no-bg:#291418;--no-line:#5E2A2E;--other:#B3A4F0;--other-bg:#1E1A2E;--other-line:#3E3566;--neutral:#AEB8C4;--neutral-bg:#1A1F25;--focus:#7FC1FF}}
:root[data-theme="dark"]{--bg:#0F1317;--panel:#171C22;--raise:#1D232A;--sunk:#101519;--ink:#E8EDF2;--ink2:#C3CCD6;--muted:#95A1AE;--faint:#6F7C8A;--line:#2A323B;--hair:#222930;--control:#7A8798;--brand:#5CA8F0;--brand-ink:#0B1015;--brand-soft:#16242F;--ok:#6ED79A;--ok-bg:#13251B;--ok-line:#245437;--hold:#E8C468;--hold-bg:#241E10;--hold-line:#5A4A20;--no:#F08C90;--no-bg:#291418;--no-line:#5E2A2E;--other:#B3A4F0;--other-bg:#1E1A2E;--other-line:#3E3566;--neutral:#AEB8C4;--neutral-bg:#1A1F25;--focus:#7FC1FF}

/* the skip link: first in the DOM, invisible until focused ────────────────── */
.sh-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;
  background:var(--brand);color:var(--brand-ink);border-radius:0 0 var(--radius-control) 0;
  font-size:var(--text-small);text-decoration:none}
.sh-skip:focus{left:0}

/* top bar ────────────────────────────────────────────────────────────────── */
.sh-top{position:sticky;top:0;z-index:30;height:var(--shell-top-bar);background:var(--panel);
  border-bottom:1px solid var(--line)}
.sh-top-in{display:flex;align-items:center;gap:var(--space-card);height:100%;
  padding:0 var(--space-card);max-width:none}
.sh-brand{display:inline-flex;align-items:center;gap:var(--space-base);font-weight:600;
  font-size:var(--text-small);color:var(--ink);text-decoration:none;flex:none}
.sh-brand.is-static{cursor:default}
.sh-mark{width:16px;height:16px;border-radius:4px;background:var(--brand);flex:none}
.sh-org{font-size:var(--text-meta);color:var(--muted);padding-left:var(--space-gutter);
  border-left:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.sh-top-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-gutter)}
.sh-signin{font-size:var(--text-small);color:var(--brand);text-decoration:none}

/* ── the account, at the foot of the rail ───────────────────────────────────
   Not in the top bar. There it sat beside the brand, competing for the most
   valuable strip on the page, and told a reader nothing they needed while they
   were reading a record. At the foot of the rail it is where the eye goes last.

   Pressing it opens the menu and widens the rail together: a name and an
   address need room, and a narrow rail is exactly when somebody cannot read
   either. The widening is done by :has() where the browser supports it and by
   a class from app.js where it does not, so the control works either way. */
.sh-account{position:relative;margin-block-start:auto;padding-block-start:var(--space-base);
  border-block-start:1px solid var(--hair)}
.sh-account>summary{display:flex;align-items:center;gap:var(--space-base);cursor:pointer;
  padding:9px;border-radius:var(--radius-control);list-style:none;min-height:var(--shell-touch-min)}
.sh-account>summary::-webkit-details-marker{display:none}
.sh-account>summary:hover{background:var(--sunk)}
.sh-account>summary:focus-visible{outline:var(--focus-ring) solid var(--focus);outline-offset:2px}
.sh-avatar{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--brand);color:var(--brand-ink);
  font-size:var(--text-micro);font-weight:650;line-height:1}
.sh-rail-list{flex:none}
.sh-account-text{display:none;min-width:0;flex:1;flex-direction:column;gap:1px}
.sh-account-name{font-size:var(--text-meta);color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sh-account-org{font-size:var(--text-micro);color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sh-account-chev{display:none;flex:none;width:7px;height:7px;opacity:.5;
  border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;
  transform:translateY(-2px) rotate(-135deg)}
.sh-account[open] .sh-account-chev{transform:translateY(1px) rotate(45deg)}

/* The menu rises from the account rather than dropping off the top bar: there is
   no room below it, because it is already at the bottom. */
.sh-account-menu{position:absolute;inset-inline:0;bottom:calc(100% + 6px);min-width:230px;z-index:40;
  padding:var(--space-base);border:1px solid var(--line);border-radius:var(--radius-panel);
  background:var(--panel);box-shadow:var(--shadow-dialog)}
.sh-account-who{margin:0 0 var(--space-base);padding:0 var(--space-base);font-size:var(--text-meta);
  color:var(--muted);overflow-wrap:anywhere}
.sh-account-menu a,.sh-account-menu button{display:block;width:100%;text-align:left;
  padding:8px var(--space-base);border-radius:var(--radius-control);border:0;background:none;
  color:var(--ink);font:inherit;font-size:var(--text-small);text-decoration:none;cursor:pointer}
.sh-account-menu a:hover,.sh-account-menu button:hover{background:var(--sunk)}

/* rail ───────────────────────────────────────────────────────────────────── */
.sh-body{display:flex;min-height:calc(100vh - var(--shell-top-bar))}

/* Icons by default, words on request. The rail is a column now — sections at the
   top, the account at the foot — and it widens when somebody asks for it rather
   than when the window happens to be wide. A person on a large screen who wants
   the room back for the record can have it; a person on a laptop who wants the
   words can have those. */
.sh-rail{flex:none;width:var(--shell-rail-collapsed);border-right:1px solid var(--line);
  background:var(--panel);padding:var(--space-gutter) var(--space-base);
  display:flex;flex-direction:column;
  position:sticky;top:var(--shell-top-bar);align-self:flex-start;
  max-height:calc(100vh - var(--shell-top-bar));overflow:visible;
  transition:width var(--motion-base) var(--motion-ease)}
@media(prefers-reduced-motion:reduce){.sh-rail{transition:none}}
.sh-rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.sh-rail a{display:flex;align-items:center;gap:var(--space-gutter);padding:10px;
  border-radius:var(--radius-control);color:var(--ink2);text-decoration:none;
  font-size:var(--text-small);position:relative;min-height:var(--shell-touch-min)}
.sh-rail a:hover{background:var(--sunk);color:var(--ink)}
.sh-rail a:focus-visible{outline:var(--focus-ring) solid var(--focus);outline-offset:-2px}
/* Current page: a bar as well as a colour, because colour alone is not a state. */
.sh-rail a[aria-current]{background:var(--brand-soft);color:var(--brand);font-weight:600}
.sh-rail a[aria-current]::before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;
  width:3px;border-radius:0 2px 2px 0;background:var(--brand)}
.sh-rail-label{display:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-count{margin-inline-start:auto;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--brand);color:var(--brand-ink);font-size:var(--text-micro);font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}

/* ── wide, three ways ───────────────────────────────────────────────────────
   data-rail="wide" is the remembered choice, applied before first paint by
   theme.js so the rail does not visibly jump. :has([open]) widens it while the
   account menu is open, which is the founder's rule: pressing the account opens
   the rail. .is-wide is the same thing from app.js for browsers without
   :has(). All three set the same properties, so they cannot disagree. */
:root[data-rail="wide"] .sh-rail,
.sh-rail:has(.sh-account[open]),
.sh-rail.is-wide{
  width:var(--shell-rail-expanded);
  padding:var(--space-gutter);
}

/* On a laptop and wider the words are there unless the reader has put them away.
   That was the behaviour before this control existed and it is the right
   default — the rail collapses because somebody asked, not because they have
   not yet asked for it to be open. */
@media(min-width:1024px){
  :root:not([data-rail="icons"]) .sh-rail{
    width:var(--shell-rail-expanded);
    padding:var(--space-gutter);
  }
  :root:not([data-rail="icons"]) .sh-rail-label,
  :root:not([data-rail="icons"]) .sh-account-text{display:inline}
  :root:not([data-rail="icons"]) .sh-account-text{display:flex}
  :root:not([data-rail="icons"]) .sh-account-chev{display:block}
  :root:not([data-rail="icons"]) .sh-account>summary{justify-content:flex-start}
}
:root[data-rail="wide"] .sh-rail-label,
.sh-rail:has(.sh-account[open]) .sh-rail-label,
.sh-rail.is-wide .sh-rail-label{display:inline}
:root[data-rail="wide"] .sh-account-text,
.sh-rail:has(.sh-account[open]) .sh-account-text,
.sh-rail.is-wide .sh-account-text{display:flex}
:root[data-rail="wide"] .sh-account-chev,
.sh-rail:has(.sh-account[open]) .sh-account-chev,
.sh-rail.is-wide .sh-account-chev{display:block}

/* Collapsed, the avatar centres itself rather than sitting where a name would
   have started. */
.sh-rail:not(.is-wide) .sh-account>summary{justify-content:center}
:root[data-rail="wide"] .sh-account>summary,
.sh-rail:has(.sh-account[open]) .sh-account>summary,
.sh-rail.is-wide .sh-account>summary{justify-content:flex-start}

/* The handle that keeps the choice. Sits under the sections, above the account,
   so the two things that change the rail's width are together. */
.sh-rail-toggle{margin-block-start:var(--space-base);display:flex;align-items:center;
  gap:var(--space-base);padding:9px;border-radius:var(--radius-control);border:0;
  background:none;color:var(--muted);font:inherit;font-size:var(--text-meta);
  cursor:pointer;min-height:var(--shell-touch-min);width:100%}
.sh-rail-toggle:hover{background:var(--sunk);color:var(--ink)}
.sh-rail-toggle:focus-visible{outline:var(--focus-ring) solid var(--focus);outline-offset:-2px}
.sh-rail-toggle span{display:none}
:root[data-rail="wide"] .sh-rail-toggle span,
.sh-rail.is-wide .sh-rail-toggle span{display:inline}
.sh-rail:not(.is-wide) .sh-rail-toggle{justify-content:center}
.sh-rail-toggle svg{flex:none;transition:transform var(--motion-base) var(--motion-ease)}
:root[data-rail="wide"] .sh-rail-toggle svg,
.sh-rail.is-wide .sh-rail-toggle svg{transform:scaleX(-1)}
@media(prefers-reduced-motion:reduce){.sh-rail-toggle svg{transition:none}}



/* command bar ────────────────────────────────────────────────────────────── */
.sh-main-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.sh-command{display:flex;align-items:center;gap:var(--space-card);min-height:var(--shell-command-bar);
  padding:var(--space-base) var(--space-card);border-bottom:1px solid var(--hair);
  background:var(--panel);flex-wrap:wrap}
.sh-command-left{min-width:0;flex:1}
.sh-command-right{display:flex;gap:var(--space-base);flex-wrap:wrap}
.sh-crumbs{display:flex;align-items:center;gap:var(--space-snug);font-size:var(--text-meta);
  color:var(--muted);flex-wrap:wrap}
.sh-crumbs a{color:var(--muted);text-decoration:none}
.sh-crumbs a:hover{color:var(--ink)}
.sh-crumbs [aria-current]{color:var(--ink);overflow-wrap:anywhere}
.sh-crumb-sep{color:var(--faint)}
.sh-action{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  border-radius:var(--radius-control);border:1px solid var(--control);background:var(--panel);
  color:var(--ink);font-size:var(--text-small);text-decoration:none;white-space:nowrap}
.sh-action:hover{background:var(--sunk)}
/* Primary is brand blue and never semantic green: green is a finding here. */
.sh-action.is-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.sh-action.is-primary:hover{filter:brightness(1.08)}
.sh-action:focus-visible{outline:var(--focus-ring) solid var(--focus);outline-offset:var(--focus-offset)}

/* main and context pane ──────────────────────────────────────────────────── */
.sh-main{flex:1;display:block;padding:var(--space-section) var(--space-card) var(--space-page)}
.sh-main:focus{outline:none}
.sh-content{max-width:var(--shell-content-max);min-width:0}
.sh-title{margin:0 0 var(--space-section);font-size:var(--text-h1);line-height:var(--lead-tight);
  text-wrap:balance;overflow-wrap:break-word}
.sh-notice{margin:0 0 var(--space-card);padding:var(--space-gutter) var(--space-card);
  border-radius:var(--radius-panel);background:var(--brand-soft);border:1px solid var(--line);
  font-size:var(--text-small);color:var(--ink2)}
.sh-pane{display:none}

/* The context pane earns its place at 1600px and carries related work — next
   step, access, retention, policy version. Never the decision: a reader who has
   to look sideways to find out what was established is on a page that has
   misunderstood itself. */
@media(min-width:1600px){
  .sh-main.has-pane{display:grid;grid-template-columns:minmax(0,1fr) var(--shell-context-pane);
    gap:var(--space-block);align-items:start}
  .sh-pane{display:block;position:sticky;top:calc(var(--shell-top-bar) + var(--space-card));
    padding:var(--space-card);border:1px solid var(--hair);border-radius:var(--radius-panel);
    background:var(--panel);font-size:var(--text-small)}
}
/* Ultrawide: the shell stops growing. Extra width goes to related context, never
   to a longer line of prose — sixty-eight characters is where reading stops
   being work regardless of how big the monitor is. */
@media(min-width:1920px){
  .sh-main{padding-left:var(--space-block);padding-right:var(--space-block)}
  .sh-content{margin-inline:0}
}

/* Phone: the rail becomes a bottom bar. Four items, because a fifth is where a
   thumb lands by accident. */
@media(max-width:767px){
  .sh-body{flex-direction:column}
  /* The rail is the bottom bar here. Nothing about widening applies: there is no
     width to give back, the account lives in the bar with the sections, and the
     collapse handle would be a control for a dimension that does not exist. */
  .sh-rail-toggle,.sh-account-text,.sh-account-chev{display:none}
  .sh-account{margin-block-start:0;padding-block-start:0;border-block-start:0}
  .sh-account-menu{bottom:calc(100% + 10px);inset-inline:auto;right:8px;min-width:220px}
  .sh-rail{position:fixed;inset-inline:0;bottom:0;top:auto;width:auto;z-index:30;
    border-right:0;border-top:1px solid var(--line);padding:var(--space-tight) var(--space-base);
    padding-bottom:calc(var(--space-tight) + env(safe-area-inset-bottom,0px))}
  .sh-rail ul{flex-direction:row;justify-content:space-around}
  .sh-rail li:nth-child(4){display:none}
  .sh-rail a{flex-direction:column;gap:2px;min-width:var(--shell-touch-min);padding:6px 8px;
    font-size:var(--text-micro)}
  .sh-rail-label{display:inline}
  .sh-rail a[aria-current]::before{inset-inline:8px;top:0;bottom:auto;width:auto;height:2px;
    border-radius:0 0 2px 2px}
  .sh-main{padding:var(--space-card) var(--space-gutter) calc(var(--space-page) + 56px)}
  .sh-command{position:sticky;top:var(--shell-top-bar);z-index:20}
}

/* external shell ─────────────────────────────────────────────────────────── */
.sh-ext-top{border-bottom:1px solid var(--line);background:var(--panel)}
.sh-ext-in{display:flex;align-items:center;gap:var(--space-card);flex-wrap:wrap;
  max-width:var(--shell-reading-max);margin:0 auto;padding:var(--space-gutter) var(--space-card)}
.sh-ext-who{font-size:var(--text-meta);color:var(--muted);min-width:0;overflow-wrap:anywhere}
.sh-ext-main{max-width:var(--shell-reading-max);margin:0 auto;
  padding:var(--space-section) var(--space-card) var(--space-page)}
.sh-ext-main:focus{outline:none}
.sh-ext-title{margin:0 0 var(--space-card);font-size:var(--text-h1);line-height:var(--lead-tight);
  text-wrap:balance;overflow-wrap:break-word}
.sh-ext-foot{max-width:var(--shell-reading-max);margin:0 auto;
  padding:var(--space-section) var(--space-card) var(--space-page);border-top:1px solid var(--hair);
  font-size:var(--text-meta);color:var(--muted);line-height:var(--lead-body)}
/* A stranger is often on a phone, in a hurry, and owed the easier target. */
@media(max-width:767px){
  .sh-ext-main button,.sh-ext-main a.sh-action,.sh-ext-main input[type=submit]{
    min-height:var(--shell-touch-external)}
}

/* public shell ───────────────────────────────────────────────────────────── */
.sh-pub-top{border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:30}
.sh-pub-in{display:flex;align-items:center;gap:var(--space-section);max-width:var(--shell-public-max);
  margin:0 auto;padding:var(--space-gutter) var(--space-card)}
.sh-pub-nav{display:flex;gap:var(--space-card);font-size:var(--text-small)}
.sh-pub-nav a{color:var(--ink2);text-decoration:none}
.sh-pub-nav a:hover{color:var(--ink)}
.sh-pub-nav a[aria-current]{color:var(--brand);font-weight:600}
.sh-pub-actions{margin-inline-start:auto;display:flex;align-items:center;gap:var(--space-gutter);
  font-size:var(--text-small)}
.sh-pub-main{max-width:var(--shell-public-max);margin:0 auto;padding:var(--space-block) var(--space-card)}
.sh-pub-main:focus{outline:none}
.sh-pub-title{margin:0 0 var(--space-section);font-size:var(--text-display);
  line-height:var(--lead-tight);text-wrap:balance}
.sh-pub-foot{border-top:1px solid var(--hair);margin-top:var(--space-page)}
@media(max-width:767px){
  .sh-pub-nav{display:none}
  .sh-pub-in{gap:var(--space-gutter)}
}

/* Right-to-left: the shell is built on logical properties, so the rail, the
   current-page bar and the counts move without a mirrored stylesheet. What must
   stay left-to-right — an address, a hash, a reference, the authoritative
   English legal text — is isolated at the point it is written, with bdi. */
[dir="rtl"] .sh-crumbs{flex-direction:row-reverse}
[dir="rtl"] .sh-rail a[aria-current]::before{border-radius:2px 0 0 2px}


/* ── on paper ────────────────────────────────────────────────────────────────
   A record is printed. It goes into a bundle, it is handed across a table, it is
   read by somebody who was not at the screen. So the printed page has to carry
   the same evidence as the screen, and it has to carry it without colour —
   because most printing is monochrome and because a grey tick and a grey cross
   look identical.

   What goes: navigation, the account menu, the command bar, every control. None
   of it can be operated on paper and all of it takes room from the thing that
   can be read.

   What arrives: the reference of every link, printed after it, because a URL
   somebody cannot see is a citation they cannot follow; and the status as a word
   in a box, because that is what survives a fax. */
@media print{
  .sh-skip,.sh-top,.sh-rail,.sh-command,.sh-account,.sh-pub-nav,.sh-pub-actions{display:none!important}
  .sh-body{display:block}
  .sh-main,.sh-ext-main,.sh-pub-main{padding:0;display:block}
  .sh-main.has-pane{display:block}
  .sh-pane{display:block;margin-top:12pt;border:1px solid #000;padding:8pt;page-break-inside:avoid}
  .sh-content{max-width:none}

  /* Black on white, whatever the reader's theme was. A page printed from dark
     mode is a page of ink nobody asked for and, on many printers, unreadable. */
  :root{--bg:#fff;--panel:#fff;--raise:#fff;--sunk:#fff;--ink:#000;--ink2:#000;
    --muted:#333;--faint:#555;--line:#999;--hair:#ccc;--control:#666;
    --brand:#000;--brand-ink:#fff;--brand-soft:#fff;
    --ok:#000;--ok-bg:#fff;--hold:#000;--hold-bg:#fff;--no:#000;--no-bg:#fff;
    --other:#000;--other-bg:#fff}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.4}

  /* A link's destination, printed after it. A citation nobody can follow is not
     a citation — but only for real destinations: a fragment or a script link
     would print as noise. */
  a[href^="http"]::after,a[href^="/"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444}
  a[href^="#"]::after,a[href^="javascript"]::after{content:""}

  /* Nothing that was open on screen is closed on paper: a detail somebody did
     not expand is still evidence, and a printed record that omits it is a
     different document. */
  details{display:block}
  details>summary{list-style:none;font-weight:700}
  details:not([open])>*:not(summary){display:block!important}

  /* Keep what belongs together on one sheet. */
  .cmp-banner,.cmp-fact,.cmp-timeline-item,.cmp-confirm,.cmp-independent{page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}

  /* Controls cannot be operated on paper. */
  button,.sh-action,input[type=submit],.cmp-empty-action{display:none!important}
}


/* tone, and it comes only from the status registry ───────────────────────── */
.cmp-tone-ok{--cmp-fg:var(--ok);--cmp-bg:var(--ok-bg);--cmp-line:var(--ok-line)}
.cmp-tone-hold{--cmp-fg:var(--hold);--cmp-bg:var(--hold-bg);--cmp-line:var(--hold-line)}
.cmp-tone-no{--cmp-fg:var(--no);--cmp-bg:var(--no-bg);--cmp-line:var(--no-line)}
.cmp-tone-other{--cmp-fg:var(--other);--cmp-bg:var(--other-bg);--cmp-line:var(--other-line)}
.cmp-tone-none{--cmp-fg:var(--muted);--cmp-bg:var(--sunk);--cmp-line:var(--line)}

/* CMP-01 the decision banner ──────────────────────────────────────────────── */
.cmp-banner{display:flex;gap:var(--space-gutter);align-items:flex-start;
  padding:var(--space-card) calc(var(--space-card) + 2px);border-radius:var(--radius-panel);
  background:var(--cmp-bg);border:1px solid var(--cmp-line);color:var(--ink);margin:0 0 var(--space-section)}
.cmp-banner.is-compact{padding:var(--space-gutter);border-radius:var(--radius-control)}
.cmp-mark{flex:none;color:var(--cmp-fg);display:inline-flex;margin-top:1px}
.cmp-banner-text{display:flex;flex-direction:column;gap:var(--space-tight);min-width:0}
.cmp-banner-text strong{font-size:var(--text-lead);line-height:var(--lead-tight);color:var(--cmp-fg)}
.cmp-reason{font-size:var(--text-small);line-height:var(--lead-body);color:var(--ink2);overflow-wrap:anywhere}
.cmp-scope{font-size:var(--text-meta);color:var(--muted)}
/* The word, for print and for anybody the colour does not reach. Hidden on
   screen because the label above already says it; present on paper because paper
   has no tone. */
.cmp-print{display:none}
@media print{.cmp-print{display:inline;margin-left:auto;font-size:var(--text-micro);
  letter-spacing:.08em;border:1px solid currentColor;padding:2px 6px;border-radius:3px}}

/* CMP-01b chips ──────────────────────────────────────────────────────────── */
.cmp-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px;
  border-radius:var(--radius-chip);background:var(--cmp-bg);border:1px solid var(--cmp-line);
  color:var(--cmp-fg);font-size:var(--text-meta);line-height:1.5;white-space:nowrap;vertical-align:1px}
.cmp-chip svg{flex:none}

/* CMP-02 facts ───────────────────────────────────────────────────────────── */
.cmp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin:0;
  border:1px solid var(--hair);border-radius:var(--radius-panel);overflow:hidden;background:var(--panel)}
.cmp-fact{padding:var(--space-gutter) var(--space-card);border-right:1px solid var(--hair);min-width:0;
  overflow-wrap:anywhere}
.cmp-fact:last-child{border-right:0}
.cmp-fact dt{font-size:var(--text-micro);letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin:0 0 3px}
.cmp-fact dd{margin:0;font-size:var(--text-small);color:var(--ink);line-height:var(--lead-snug)}
.cmp-prov{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  background:var(--hold-bg);border:1px solid var(--hold-line);color:var(--hold);
  font-size:var(--text-micro);cursor:help}
.cmp-fact-why{margin:4px 0 0;font-size:var(--text-meta);color:var(--muted);line-height:var(--lead-snug)}
@media(max-width:639px){.cmp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp-fact{border-bottom:1px solid var(--hair)}}

/* CMP-04 disclosure ──────────────────────────────────────────────────────── */
.cmp-disclosure{border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--panel);
  margin:var(--space-gutter) 0 0}
.cmp-disclosure>summary{display:flex;align-items:center;gap:var(--space-base);cursor:pointer;
  padding:var(--space-gutter) var(--space-card);font-size:var(--text-small);list-style:none}
.cmp-disclosure>summary::-webkit-details-marker{display:none}
.cmp-disclosure>summary::before{content:"";width:7px;height:7px;flex:none;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:rotate(-45deg);transition:transform var(--motion-fast) var(--motion-ease)}
.cmp-disclosure[open]>summary::before{transform:rotate(45deg)}
.cmp-disclosure[open]>summary{border-bottom:1px solid var(--hair);font-weight:600}
.cmp-disclosure>summary:focus-visible{outline:var(--focus-ring) solid var(--focus);outline-offset:-2px}
.cmp-disclosure-count{margin-left:auto;font-size:var(--text-meta);color:var(--muted);
  font-variant-numeric:tabular-nums}
.cmp-disclosure-body{padding:var(--space-card)}

/* CMP-05 timeline ────────────────────────────────────────────────────────── */
.cmp-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cmp-timeline-item{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:var(--space-gutter);padding:var(--space-gutter) 0;border-bottom:1px solid var(--hair)}
.cmp-timeline-item:last-child{border-bottom:0}
.cmp-timeline-when{font-size:var(--text-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.cmp-timeline-what{display:flex;flex-direction:column;gap:2px;min-width:0}
.cmp-timeline-what strong{font-size:var(--text-small);font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.cmp-timeline-who,.cmp-timeline-detail{font-size:var(--text-meta);color:var(--muted);overflow-wrap:anywhere}
@media(max-width:559px){.cmp-timeline-item{grid-template-columns:minmax(0,1fr)}}

/* CMP-07 errors ──────────────────────────────────────────────────────────── */
.cmp-errors{border:2px solid var(--no);border-radius:var(--radius-panel);padding:var(--space-card);
  margin:0 0 var(--space-section);background:var(--panel)}
.cmp-errors:focus{outline:var(--focus-ring) solid var(--focus);outline-offset:var(--focus-offset)}
.cmp-errors-title{margin:0 0 var(--space-base);font-size:var(--text-h3);color:var(--no)}
.cmp-errors ul{margin:0;padding-left:20px;font-size:var(--text-small);line-height:var(--lead-loose)}
.cmp-errors a{color:var(--no)}
.cmp-field-error{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0;
  font-size:var(--text-meta);color:var(--no);line-height:var(--lead-snug)}
.cmp-field-error-mark{flex:none;width:15px;height:15px;border-radius:50%;background:var(--no);
  color:var(--panel);font-size:10px;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;margin-top:1px}

/* CMP-08 empty ───────────────────────────────────────────────────────────── */
.cmp-empty{padding:var(--space-block) var(--space-card);text-align:center;
  border:1px dashed var(--line);border-radius:var(--radius-panel);background:var(--raise)}
.cmp-empty h2{margin:0 0 var(--space-base);font-size:var(--text-h3)}
.cmp-empty p{margin:0 auto;max-width:46ch;font-size:var(--text-small);color:var(--muted);
  line-height:var(--lead-body)}
.cmp-empty-action{display:inline-block;margin-top:var(--space-card);padding:10px 18px;
  border-radius:var(--radius-control);background:var(--brand);color:var(--brand-ink);
  text-decoration:none;font-size:var(--text-small);font-weight:500}
.cmp-empty-secondary{margin-top:var(--space-gutter)!important;font-size:var(--text-meta)!important}

/* CMP-09 confirmation ────────────────────────────────────────────────────── */
.cmp-confirm{padding:var(--space-card);border:1px solid var(--line);border-radius:var(--radius-panel);
  background:var(--panel)}
.cmp-confirm h3{margin:0 0 var(--space-base);font-size:var(--text-h3)}
.cmp-confirm p{margin:0 0 var(--space-base);font-size:var(--text-small);line-height:var(--lead-body);
  color:var(--ink2)}
.cmp-confirm-undo{color:var(--muted)!important;font-size:var(--text-meta)!important}
/* Destructive, and deliberately not evidentiary red: red here means a check ran
   and found a mismatch, and lending it to a button teaches the wrong lesson. */
.cmp-destructive{background:var(--panel);color:var(--no);border:1px solid var(--no);
  padding:9px 16px;border-radius:var(--radius-control);font:inherit;font-size:var(--text-small);cursor:pointer}
.cmp-destructive:hover{background:var(--no-bg)}
.cmp-secondary{background:var(--panel);color:var(--ink);border:1px solid var(--control);
  padding:9px 16px;border-radius:var(--radius-control);font:inherit;font-size:var(--text-small);cursor:pointer}

/* CMP-10 progress ────────────────────────────────────────────────────────── */
.cmp-progress{display:flex;gap:var(--space-base);align-items:flex-start;margin:var(--space-gutter) 0 0;
  font-size:var(--text-small);color:var(--ink2)}
.cmp-progress>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.cmp-progress-spin{flex:none;width:14px;height:14px;margin-top:2px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--brand);
  animation:cmp-spin 700ms linear infinite}
@keyframes cmp-spin{to{transform:rotate(360deg)}}
/* An honest elapsed time, never a fabricated bar. */
.cmp-progress-time{font-size:var(--text-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.cmp-progress-note{font-size:var(--text-meta);color:var(--muted);line-height:var(--lead-snug)}
@media(prefers-reduced-motion:reduce){.cmp-progress-spin{animation:none;border-top-color:var(--line);
  background:var(--brand);border-radius:50%;width:8px;height:8px;border:0}}

/* CMP-18 independent check ───────────────────────────────────────────────── */
.cmp-independent{padding:var(--space-card);border:1px solid var(--line);
  border-radius:var(--radius-panel);background:var(--raise)}
.cmp-independent h3{margin:0 0 var(--space-base);font-size:var(--text-small)}
.cmp-independent p{margin:0 0 var(--space-base);font-size:var(--text-small);line-height:var(--lead-body)}
.cmp-reference{font-size:var(--text-h3)!important;letter-spacing:.06em;font-weight:600;
  padding:var(--space-base) var(--space-gutter);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-control);display:inline-block}
.cmp-independent-note{color:var(--muted)!important;font-size:var(--text-meta)!important;margin-bottom:0!important}

.cmp-empty-line{margin:0;font-size:var(--text-small);color:var(--muted)}

:root{--info:#1D4E8F;--infobg:#EEF4FC;--infoline:#C3D7EE;
  --lift:0 1px 1px rgba(17,21,25,.03),0 6px 20px -10px rgba(17,21,25,.14);
  --brandink:var(--brand-ink);--okbg:var(--ok-bg);--okline:var(--ok-line);
  --nobg:var(--no-bg);--noline:var(--no-line);--holdbg:var(--hold-bg);
  --holdline:var(--hold-line);--otherbg:var(--other-bg);--otherline:var(--other-line)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --info:#79B4F5;--infobg:#0D1520;--infoline:#1E3350;
  --lift:0 1px 1px rgba(0,0,0,.4),0 8px 26px -14px rgba(0,0,0,.7);
}}
:root[data-theme=dark]{
  --info:#79B4F5;--infobg:#0D1520;--infoline:#1E3350;
  --lift:0 1px 1px rgba(0,0,0,.4),0 8px 26px -14px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Type scales with the viewport rather than stepping at breakpoints: 16px on a
   narrow phone up to 17.5px on a wide screen, and it respects a reader who has
   enlarged their browser default because the clamp is in rem. 15px was simply too
   small for a document somebody reads to make a decision. */
html{font-size:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  /* ── the typeface, and why Segoe UI is not first ───────────────────────────
     The Promptbook asks for Office familiarity and, in the same breath, for not
     copying Microsoft. Putting Segoe UI at the head of the stack satisfies the
     first and breaks the second: the product would look like a Microsoft
     application on Windows and like something else everywhere else, which is not
     one identity, it is a chameleon.

     "system-ui" first does the whole job. On Windows it resolves to Segoe UI
     Variable — exactly what the Promptbook wants, chosen by the platform rather
     than imposed by us. On macOS it is San Francisco, on Linux whatever the
     desktop set. The named faces after it are there for the browsers that still
     do not implement "system-ui", and Segoe UI is among them, in its place.

     What is inherited from Office is the pattern — a predictable shell, a command
     bar, quiet surfaces. Not the lettering. */
  font:400 clamp(1rem,0.95rem + 0.25vw,1.09rem)/1.6 system-ui,"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.86em;font-variant-numeric:tabular-nums}
::selection{background:var(--brand);color:var(--brandink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}
a{color:var(--brand);text-underline-offset:2px}

.bar{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.bar .in{max-width:1120px;margin:0 auto;padding:0 16px;min-height:54px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mark{font-weight:600;letter-spacing:-.012em;display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;padding:14px 0}
.glyph{color:var(--brand);flex:none}
.who{color:var(--muted);font-size:0.867em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar nav{margin-left:auto;display:flex;gap:16px;font-size:13.5px;padding:6px 0}
.bar nav a{color:var(--muted);text-decoration:none}
.bar nav a:hover{color:var(--ink)}

main{max-width:1120px;margin:0 auto;padding:24px 16px 80px}
.narrow{max-width:760px}
@media(min-width:640px){main{padding:32px 24px 90px}.bar .in{padding:0 24px}}
h1{font-size:21px;font-weight:600;letter-spacing:-.018em;margin:0 0 6px}
@media(min-width:640px){h1{font-size:23px}}
.dek{color:var(--muted);font-size:0.933em;margin:0 0 22px;max-width:70ch}
/* The line under a record's name: when, how big, who ran it, which record. Four
   facts nobody reads until they need one, and on a phone they were taking three
   lines of monospace directly under the title at almost the title's weight. Two
   classes were setting the size and the later one won, so .mono was not making
   it smaller at all. Set once, here, and given room to breathe. */
.recmeta{font-size:.8em;line-height:1.55;color:var(--faint);margin-bottom:18px}
h2{font-size:1.12em;font-weight:600;margin:0 0 4px;line-height:1.3;text-wrap:balance}
h3{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:24px 0 9px}
p{margin:0 0 12px;max-width:72ch}
.sub{color:var(--muted);font-size:13.5px}
/* A panel is a surface above the page, not a rectangle outlined on it. One
   hairline and two very soft shadows — a tight one for the edge and a wide one
   for the lift. Shallow enough that a column of them does not look like a pile. */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-tight),var(--shadow-lift)}
.pad{padding:20px 18px}
@media(min-width:640px){.pad{padding:24px 26px}}
.stack{display:grid;gap:20px}
.cols{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:980px){.cols{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}

label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px}
/* Fields are recessed where buttons are raised: the same shadow, inward. It is
   the oldest cue in the interface and it still means "type here". */
input,select,textarea{font:inherit;width:100%;padding:12px 13px;color:var(--ink);background:var(--sunk);
  /* --control, not --line. The border is what identifies this as a field, and
     WCAG 2.2's non-text contrast rule asks 3:1 of it; --line is a divider at
     1.3:1, which is a boundary nobody can find. */
  border:1px solid var(--control);border-radius:var(--radius-control);
  box-shadow:0 1px 2px rgba(0,0,0,.06) inset;
  transition:border-color 120ms ease,box-shadow 120ms ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 1px 2px rgba(0,0,0,.06) inset,0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
textarea{min-height:76px;resize:vertical}
input[type=file]::file-selector-button{font:inherit;font-weight:500;margin:-4px 12px -4px -4px;padding:8px 13px;border:0;border-radius:6px;background:var(--line);color:var(--ink);cursor:pointer}
/* On a dark ground a black shadow does nothing and a white inset highlight
   shouts. Depth there comes from a deeper shadow under the element and the
   faintest possible light along its top edge — the same idea, much quieter. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --shadow-tight:0 1px 2px rgba(0,0,0,.55);
  --shadow-lift:0 4px 16px rgba(0,0,0,.45);
  --edge-light:rgba(255,255,255,.09);
}}
:root[data-theme=dark]{
  --shadow-tight:0 1px 2px rgba(0,0,0,.55);
  --shadow-lift:0 4px 16px rgba(0,0,0,.45);
  --edge-light:rgba(255,255,255,.09);
}
:root{
  --shadow-tight:0 1px 2px rgba(0,0,0,.10);
  --shadow-lift:0 4px 14px rgba(0,0,0,.06);
  --edge-light:rgba(255,255,255,.55);
}

/* ── controls that read as controls ──────────────────────────────────────
   The register is the one the iPhone settled on when it left skeuomorphism
   behind but before everything became a hairline: flat surfaces, real edges, a
   shadow shallow enough to be felt rather than seen. No bevels, no gloss, no
   gradients pretending to be plastic — but a button that is unmistakably a
   button, and that visibly answers when pressed.

   Three things do the work. A solid fill, so the primary action is the most
   saturated thing on the screen and the eye finds it first. A one-pixel darker
   edge plus a soft drop shadow, which together read as a raised surface at any
   size. And a press that actually moves — the shadow collapses and the face
   drops a pixel, which is the whole of what a physical key does. */
button,.btn{font:inherit;font-weight:600;font-size:1em;padding:12px 20px;
  border:1px solid var(--brand);border-radius:10px;background:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 82%,black);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 96%,white),var(--brand));
  color:var(--brandink);cursor:pointer;text-decoration:none;display:inline-block;text-align:center;
  box-shadow:0 1px 0 color-mix(in srgb,var(--brand) 70%,white) inset,
             0 1px 2px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.07);
  transition:box-shadow 120ms ease,transform 90ms ease,filter 120ms ease}
button:hover,.btn:hover{filter:brightness(1.06);
  box-shadow:0 1px 0 color-mix(in srgb,var(--brand) 70%,white) inset,
             0 2px 4px rgba(0,0,0,.16),0 4px 12px rgba(0,0,0,.10)}
button:active,.btn:active{transform:translateY(1px);filter:brightness(.97);
  box-shadow:0 1px 1px rgba(0,0,0,.18) inset}
button:focus-visible,.btn:focus-visible{outline:3px solid var(--brand);
  outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);
  outline-offset:2px}
button:disabled{filter:grayscale(.5) brightness(.97);opacity:.55;cursor:not-allowed;
  box-shadow:none;transform:none}

/* The secondary action: the same shape and the same shadow, so it reads as a
   control, with the colour taken out so it does not compete with the primary. */
button.secondary{background:var(--panel);
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 94%,var(--ink)));
  color:var(--ink);border-color:var(--line);
  box-shadow:0 1px 0 var(--edge-light) inset,var(--shadow-tight),var(--shadow-lift)}
button.secondary:hover{filter:none;border-color:var(--muted);
  box-shadow:0 1px 0 var(--edge-light) inset,var(--shadow-tight),var(--shadow-lift)}
button.wide{width:100%;margin-top:18px}
button.quiet{background:transparent;color:var(--muted);border:1px solid var(--line);font-weight:500;padding:7px 13px;font-size:0.867em}
button.quiet:hover{color:var(--no);border-color:var(--noline)}
button.alt{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
form.inline{display:inline}
.radios{display:grid;gap:8px;margin-top:8px}
/* A choice is a label, and the rule above sets every label in small uppercase
   with letter-spacing, which is right for the two words over a text field and
   catastrophic here: each of these options carries a paragraph explaining what
   it does, and all of it was being shouted. The whole request composer — six
   steps of prose about what a stranger will be asked — rendered in capitals, on
   every screen, not only a phone. Reset explicitly rather than by loosening the
   label rule, which the short field labels still need. */
.radio{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);
  border-radius:9px;cursor:pointer;background:var(--sunk);
  text-transform:none;letter-spacing:0;font-size:1em;font-weight:400;color:var(--ink);margin:0}
.radio input{width:auto;margin:2px 0 0;flex:none}
.radio b{display:block;font-weight:600;font-size:1em;line-height:1.4;margin-bottom:2px}
.radio em{font-style:normal;color:var(--muted);font-size:.9em;line-height:1.55;display:block}
/* Same trap: .sub means quiet prose, and a label wearing it is a sentence. */
label.sub{text-transform:none;letter-spacing:0;font-weight:400;font-size:.9em}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 9px 3px 7px;
  border-radius:5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;flex:none;background:currentColor}
.chip.ok{color:var(--ok);background:var(--okbg);border-color:var(--okline)}
.chip.ok::before{border-radius:50%}
.chip.no{color:var(--no);background:var(--nobg);border-color:var(--noline)}
.chip.no::before{background:none;border:2px solid currentColor;transform:rotate(45deg)}
.chip.hold{color:var(--hold);background:var(--holdbg);border-color:var(--holdline)}
.chip.hold::before{background:none;border:2px solid currentColor;border-radius:1px;height:2px}
.kv{width:100%;border-collapse:collapse;font-size:0.933em}
.kv td{padding:7px 10px 7px 0;border-top:1px solid var(--hair);vertical-align:top;color:var(--ink2)}
.kv tr:first-child td{border-top:0}
/* Workspace chrome. Dense, aligned, and quiet — this is a working screen, not
   a page to be admired. The rules borrowed are the ones that make a trading
   terminal readable at a glance: one place for each thing, numerals that line
   up, status carried by shape as well as colour, and nothing on screen that is
   not being used. Explanation lives in tooltips rather than in prose, so the
   density costs a newcomer nothing.

   Two declarations stood here with no selector in front of them — the residue of
   a range deletion of mine. CSS recovers from that by reading forward for an
   opening brace, which meant the whole of the table.dense rule below was
   consumed as part of a nonsense selector and never applied. Every record list
   has therefore been drawn without width:100% or border-collapse, sizing itself
   to its content with doubled rules. "node --check" cannot see this, and neither
   could I: it looked like a stylesheet.

   No braces in comments here, balanced or otherwise — an unmatched one blinds the
   very check that found this. */

table.dense{width:100%;border-collapse:collapse;font-size:13.5px}

/* CMP-06 · the records list: which set, and how it was narrowed ─────────────

   Three inherited rules had to be undone here, and each was invisible until the
   bar was on screen: every input and select in this stylesheet is
   width:100%, because everywhere else they sit in a stacked form; every
   label is display:block with a 16px top margin, for the same reason; and
   button is a full-size primary control. A row of filters is the first place
   in this product where a control is *not* a form field on its own line, so the
   row came out as a column of full-width boxes with a large button under it.

   Undone deliberately and narrowly — scoped to this bar rather than by weakening
   the global rules, which are right for every form on the site. */
.rl-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;
  justify-content:space-between;margin:0 0 16px;padding:0 0 16px;
  border-bottom:1px solid var(--hair)}
.rl-scope{display:inline-flex;border:1px solid var(--control);border-radius:9px;
  overflow:hidden;flex:none}
.rl-sc{padding:7px 14px;font-size:13px;line-height:1.35;color:var(--ink2);
  text-decoration:none;background:var(--raise);border-inline-end:1px solid var(--line);
  white-space:nowrap}
.rl-sc:last-child{border-inline-end:0}
.rl-sc.is-on{background:var(--brand-soft);color:var(--ink);font-weight:560}
.rl-sc:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

.rl-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
/* The three undone inheritances. */
.rl-filters label{display:inline-flex;align-items:center;margin:0;
  font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none}
.rl-filters select,.rl-filters input[type=search]{width:auto;min-width:0;
  font-size:13px;padding:6px 9px;border:1px solid var(--control);border-radius:8px;
  background:var(--raise);color:var(--ink);box-shadow:none}
.rl-filters input[type=search]{inline-size:clamp(9rem,22vw,15rem)}
.rl-filters .rl-go{width:auto;padding:6px 14px;font-size:13px;line-height:1.35;
  font-weight:500}

/* The three selects fold away behind one control. Positioned rather than in
   flow, because a panel that pushes the table down each time somebody opens it
   makes the rows they were reading move. */
.rl-more{position:relative}
.rl-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:7px;padding:6px 13px;font-size:13px;line-height:1.35;color:var(--ink2);
  border:1px solid var(--control);border-radius:8px;background:var(--raise);
  white-space:nowrap}
.rl-more>summary::-webkit-details-marker{display:none}
.rl-more>summary::after{content:"";width:7px;height:7px;border-inline-end:1.5px solid currentColor;
  border-block-end:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55}
.rl-more[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.rl-more>summary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.rl-n{display:inline-flex;align-items:center;justify-content:center;min-width:17px;
  height:17px;padding:0 4px;border-radius:9px;background:var(--brand);color:var(--brand-ink);
  font-size:11px;font-weight:650;font-variant-numeric:tabular-nums}
.rl-more-in{position:absolute;z-index:20;inset-inline-end:0;margin-block-start:7px;
  display:grid;gap:8px;padding:13px;min-inline-size:14rem;
  border:1px solid var(--line);border-radius:11px;background:var(--panel);
  box-shadow:var(--shadow-dialog)}
.rl-more-in select{width:100%}
.rl-more-in .rl-go{justify-self:start}

/* What is on screen, said twice: as chips that can be taken off, and as one
   sentence. A list that is empty for a reason the reader cannot see reads as a
   list that lost their records. */
.rl-said{margin:0 0 10px;font-size:13px;color:var(--muted)}
.rl-active{margin:0 0 14px}
.rl-chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.rl-chips a{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--sunk);
  font-size:12.5px;color:var(--ink2);text-decoration:none}
.rl-chips a:hover{border-color:var(--control)}
.rl-chips a:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.rl-chips em{font-style:normal;color:var(--faint);font-size:14px;line-height:1}
.rl-clear a{border-style:dashed;background:transparent}

@media(max-width:859px){
  /* On a narrow screen the two questions stack: which set, then how it was
     narrowed. The switch takes the full width because it changes what the list
     is, rather than which part of it is shown. */
  .rl-bar{flex-direction:column;align-items:stretch;gap:12px}
  .rl-scope{display:flex}
  .rl-sc{flex:1;text-align:center}
  .rl-filters{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .rl-filters label.rl-q{display:flex}
  .rl-filters input[type=search]{width:100%;inline-size:auto}
  /* On a narrow screen the panel spans the bar rather than hanging off its end,
     where it would either run off the edge or cover the switch above it. */
  .rl-more-in{inset-inline:0;min-inline-size:0}
}

/* A small control, defined once rather than per component. .sm existed only
   inside .rl-filters, so the same class on a button in a table cell got the
   full-size primary style and overwhelmed the row it sat in. */
.btn-sm{width:auto;padding:6px 13px;font-size:13px;line-height:1.35;font-weight:500}
table.dense th{text-align:left;font-size:0.733em;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:0 12px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.dense td{padding:9px 12px 9px 0;border-bottom:1px solid var(--hair);vertical-align:top}
table.dense tr:hover td{background:var(--sunk)}
table.dense .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.dense .t{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
table.dense a{color:var(--ink);text-decoration:none;font-weight:600}
table.dense a:hover{text-decoration:underline}

/* Tooltip. Hover and keyboard both, because a term nobody can look up is a term
   that gets guessed at. */
.hint{position:relative;border-bottom:1px dotted var(--faint);cursor:help}
.hint:focus{outline:2px solid var(--brand);outline-offset:2px}
.hint>span{position:absolute;left:0;top:calc(100% + 7px);z-index:30;width:max-content;max-width:19rem;
  background:var(--ink);color:var(--bg);font-size:12.5px;line-height:1.5;font-weight:400;letter-spacing:0;
  text-transform:none;padding:9px 11px;border-radius:8px;opacity:0;visibility:hidden;
  transition:opacity 110ms ease;box-shadow:0 6px 24px rgba(0,0,0,.22)}
.hint:hover>span,.hint:focus>span,.hint:focus-within>span{opacity:1;visibility:visible}

/* ── one navigation ──────────────────────────────────────────────────────
   Sections in the header on a wide screen; a fixed bar at the bottom on a
   phone. Never both at once, and never two rows of navigation stacked.
   Account controls are set quieter and pushed right, because Settings is not
   a place work happens and should not sit as a peer of the sections. */
.bar .in{display:flex;align-items:center;gap:0 20px}
.sections{display:flex;gap:2px;margin-left:14px}
.sections a{position:relative;padding:0 14px;height:52px;display:flex;align-items:center;gap:7px;
  font-size:0.933em;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.sections a:hover{color:var(--ink)}
.sections a[aria-current="page"]{color:var(--ink)}
.sections a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;
  height:2px;background:var(--brand);border-radius:2px 2px 0 0}
.sections .count{font-size:0.733em;font-weight:600;color:var(--muted);background:var(--sunk);
  border:1px solid var(--line);border-radius:9px;padding:0 6px;font-variant-numeric:tabular-nums}
.bar .who{margin-left:auto;font-size:0.867em;color:var(--muted);white-space:nowrap}
.bar nav.acct{display:flex;gap:16px;font-size:0.867em}
.bar nav.acct a{color:var(--faint);text-decoration:none}
.bar nav.acct a:hover{color:var(--ink)}
.tabbar{display:none}

@media(max-width:859px){
  /* Sections leave the header entirely rather than wrapping it to two lines. */
  .bar .sections{display:none}
  .bar .who{font-size:0.8em}
  /* Solid, not translucent. The bar was 94% opaque over a blur, which is the
     right effect when the blur paints and a page you can read through your own
     navigation when it does not — and it does not, on a browser without
     compositing, which is where the last of the page's text ends up printed
     faintly across the tab labels.
     The depth comes from a shadow cast upward onto the page instead. That is the
     honest version of the same cue: the bar is a surface above the document, and
     a surface above something casts a shadow on it whether or not the machine
     underneath can blur. */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--panel);border-top:1px solid var(--line);
    box-shadow:0 -1px 0 var(--edge-light) inset,0 -6px 20px -12px rgba(0,0,0,.28);
    padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:2px;min-height:52px;padding:8px 4px;
    font-size:11.5px;font-weight:600;letter-spacing:-.01em;color:var(--muted);text-decoration:none;
    text-align:center;position:relative}
  .tabbar a[aria-current="page"]{color:var(--brand)}
  .tabbar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;
    height:2px;background:var(--brand);border-radius:0 0 2px 2px}
  .tabbar .count{font-size:0.667em;font-weight:600;background:var(--sunk);border:1px solid var(--line);
    border-radius:8px;padding:0 5px;font-variant-numeric:tabular-nums}
  /* The bar sits over the page, so the page has to end above it — and on a phone
     with a home indicator the bar itself is taller than its links by the height
     of that inset, which the page has to clear too. Without the inset here the
     last row of a list sits under the bar on exactly the handsets most people
     have. */
  main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

/* ── the footer, folded ──────────────────────────────────────────────────────
   Six document links, a three-line disclaimer and a status notice sat at the
   bottom of every page. All of it has to be reachable and none of it is read at
   that length. One line stays visible — the sentence that actually matters —
   and the rest opens from a control named for what is behind it. */
.ft{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.ft-line{margin:0;flex:1;min-width:min(24rem,100%);font-size:11.5px;line-height:1.55;
  color:var(--muted)}
.ft-legal{flex:none;position:relative}
.ft-legal>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;font-size:12px;color:var(--ink2);border:1px solid var(--control);
  border-radius:8px;background:var(--panel);white-space:nowrap}
.ft-legal>summary::-webkit-details-marker{display:none}
.ft-legal>summary::after{content:"";width:6px;height:6px;opacity:.55;
  border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;
  transform:translateY(1px) rotate(225deg)}
.ft-legal[open]>summary::after{transform:translateY(-2px) rotate(45deg)}
.ft-legal>summary:hover{background:var(--sunk);color:var(--ink)}
.ft-legal>summary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* Rises from the control, because the control is at the bottom of the page and
   there is nothing below it to drop into. */
.ft-legal-in{position:absolute;z-index:30;inset-inline-end:0;bottom:calc(100% + 8px);
  inline-size:min(30rem,86vw);padding:15px 17px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);box-shadow:var(--shadow-dialog);
  text-align:start}
.ft-legal-in .legal{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 11px}
.ft-legal-in .legal a{font-size:12.5px}
.ft-full{margin:0;font-size:11.5px;line-height:1.6;color:var(--ink2)}
.ft-status{margin:9px 0 0;font-size:11px;line-height:1.55;color:var(--muted)}

@media(max-width:639px){
  .ft{flex-direction:column;align-items:stretch}
  .ft-legal>summary{justify-content:space-between;width:100%}
  .ft-legal-in{inset-inline:0;inline-size:auto}
}
  /* The header stays one line. It is sticky, so a second row is a permanent tax
     on the height of every screen; the organisation name is what gives way,
     because it is the one thing on the bar the reader already knows. */
  .bar .in{flex-wrap:nowrap;min-height:52px}
  .bar .who{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .bar nav.acct{flex:none;gap:14px;margin-left:14px}
}
@media(max-width:419px){
  /* Below this there is not room for both the name and the account links, and the
     links are the ones that do something. */
  .bar .who{display:none}
}

/* Responsive rules for a working screen.
   Three real constraints, not three breakpoints chosen for tidiness:
     · a phone at 360px, held one-handed, where a table must become a list;
     · a laptop, where the density is the point;
     · a 34-inch monitor, where an unbounded line becomes unreadable — the
       measure matters more than filling the glass.
   Nielsen's recognition over recall drives the small-screen table: a cell with
   no visible column heading is a cell nobody can read, so each carries its own
   label rather than relying on a header row that has scrolled away. */

/* Touch targets. Apple's guidance is 44pt square; below that a control is hit
   by luck rather than intention. */
@media(pointer:coarse){
  button,.btn{min-height:44px}
  /* Text fields grow to 44px and to 16px type, the size below which iOS zooms the
     whole page on focus and leaves the person scrolled sideways.
     A tick box and a radio are deliberately excluded. They are not text fields:
     giving them a 44px minimum height stretches the control's box while the mark
     itself stays 13px, so it floats away from the words it belongs to and the row
     it sits in gains half a line of empty space. Their touch area comes from the
     label wrapping them, which is both larger than 44px and the thing a person
     actually aims at. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{min-height:44px;font-size:16px}
  input[type=checkbox],input[type=radio]{min-height:0}
  /* A tappable row needs a tappable row, not a tappable word in it. */
  .radio{min-height:44px}
  table a,.rowlink{display:inline-block;min-height:28px;padding:6px 0}
  footer .legal{gap:2px 18px}
  footer .legal a{display:inline-block;padding:10px 0}
}

/* Tables become labelled lists on a phone. A horizontally scrolling table on a
   360px screen is a table nobody reads.
   This was two systems, and they fought. One turned "table.dense" into cards
   below 620px; the other turned every table on the site into cards below 639px.
   Both matched a dense table at once, so its rows took padding from one rule and
   a border and background from the other — a bordered card whose text sat flush
   against its own left edge. Between 621 and 639 only the second applied, so the
   same table changed shape twice on the way down. One system now, on the 640px
   seam every other rule in this stylesheet already uses. */

/* Wide screens. The working column is capped at a readable measure and the
   record list is allowed the extra width, because a table gains from it and a
   paragraph does not. Bloomberg's screens are dense but never a single column
   of full-width prose. */
main{max-width:1080px}
@media(min-width:1500px){
  main{max-width:1280px}
  .panel.pad{padding:30px 34px}
}
@media(min-width:1900px){
  main{max-width:1440px}
  table.dense{font-size:0.933em}
}
main .dek,main>p,.panel.pad>p:not(.sub):not(.note){max-width:68ch}
.panel.pad .sub{max-width:78ch}

/* The tooltip must not leave the screen on a phone. */
@media(max-width:639px){
  .hint>span{left:auto;right:0;max-width:calc(100vw - 48px)}
}

/* record tools — shut by default, and legible shut ───────────────────────── */
.ev-tools{margin:26px 0 0;display:flex;flex-direction:column;gap:10px}
.ev-tools-h{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.ev-tool{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ev-tool>summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:15px 18px;cursor:pointer;list-style:none;
  font-size:14px;letter-spacing:0;text-transform:none;font-weight:400}
.ev-tool>summary::marker{content:""}
.ev-tool>summary::-webkit-details-marker{display:none}
.ev-tool>summary::before{content:"";width:7px;height:7px;flex:none;align-self:center;
  border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);
  transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.ev-tool[open]>summary::before{transform:rotate(45deg)}
.ev-tool>summary:hover{background:var(--raise)}
.ev-tool>summary:focus-visible{outline:2px solid var(--ok);outline-offset:-2px}
.ev-tool-h{font-size:14px;font-weight:600;color:var(--ink)}
.ev-tool-line{font-size:13px;color:var(--muted);flex:1;min-width:0}
.ev-tool-body{padding:2px 18px 20px}
.ev-tool-body>.panel,.ev-tool-body>.ev-card{border:0;padding:0;background:none;border-radius:0}
.ev-tool-body h2{font-size:14px;margin:14px 0 6px}
@media(max-width:639px){
  .ev-tool>summary{padding:14px}
  .ev-tool-body{padding:2px 14px 16px}
  .ev-tool-line{flex-basis:100%}
}
/* the account control ────────────────────────────────────────────────────── */
.acctmenu{position:relative;margin-left:auto}
.acctmenu>summary{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 6px;
  border-radius:999px;cursor:pointer;list-style:none;border:1px solid transparent;
  font-size:13.5px;letter-spacing:0;text-transform:none;font-weight:500}
.acctmenu>summary::marker{content:""}
/* A global rule draws a chevron before every summary. This control has its own,
   on the other side, and two chevrons on one button reads as a fault. */
.acctmenu>summary::before{content:none}
.acctmenu>summary::-webkit-details-marker{display:none}
.acctmenu>summary:hover{background:var(--sunk)}
.acctmenu[open]>summary{background:var(--sunk);border-color:var(--line)}
.acctmenu>summary:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.acct-initial{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:12.5px;font-weight:600}
.acct-name{font-size:13.5px;color:var(--ink2);max-width:16ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.acct-caret{width:6px;height:6px;flex:none;border-right:1.5px solid var(--faint);
  border-bottom:1.5px solid var(--faint);transform:rotate(45deg) translate(-2px,-2px)}
.acctmenu[open] .acct-caret{transform:rotate(225deg) translate(-2px,-2px)}
.acct-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:230px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 10px 30px rgba(16,24,32,.14)}
.acct-who{margin:0;padding:11px 12px 12px;border-bottom:1px solid var(--hair)}
.acct-who strong{display:block;font-size:13.5px}
.acct-who span{display:block;font-size:12px;color:var(--muted);margin-top:2px;
  overflow-wrap:anywhere}
.acct-panel a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;
  color:var(--ink);text-decoration:none}
.acct-panel a:hover{background:var(--sunk)}
.acct-panel a:focus-visible{outline:2px solid var(--ok);outline-offset:-2px}
.acct-out{margin-top:4px;border-top:1px solid var(--hair);border-radius:0 0 8px 8px;
  color:var(--muted)}
@media(max-width:639px){
  .acct-name{display:none}
  .acct-panel{min-width:200px}
}
/* copying an address ─────────────────────────────────────────────────────── */
.srcaddr-row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.srcaddr-row .srcaddr{margin:0;flex:1;min-width:0;overflow-wrap:anywhere;align-self:center}
.copybtn{display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:9px 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.copybtn:hover{border-color:var(--muted);background:var(--raise)}
.copybtn:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.copybtn svg{width:15px;height:15px}
.copybtn.done{color:var(--ok);border-color:var(--okline);background:var(--okbg)}
@media(max-width:479px){ .copybtn{width:100%;justify-content:center} }
/* checking a file before taking it ───────────────────────────────────────── */
.ev-scanline{display:block;margin-top:5px;font-size:11.5px;font-style:normal;line-height:1.4}
.ev-scanline.is-ok{color:var(--ok)}
.ev-scanline.is-no{color:var(--no);font-weight:600}
.ev-scanline.is-hold{color:var(--hold)}
.ev-scanline.is-busy{color:var(--muted)}
.ev-scanbtn{cursor:pointer;font:inherit}
.ev-scanbtn[disabled]{opacity:.55;cursor:default}
.ev-why{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ev-why li{position:relative;padding-left:18px;font-size:13px;line-height:1.5;color:var(--ink2)}
.ev-why li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--ev)}
.ev-why li.is-for{color:var(--muted)}
.ev-why li.is-for::before{background:var(--muted)}
/* the message, read ──────────────────────────────────────────────────────── */
.msg-body{margin:14px 0 0;padding:16px 18px;border-radius:10px;background:var(--sunk);
  border:1px solid var(--hair);font-family:var(--mono);font-size:13px;line-height:1.65;
  color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;overflow-x:auto}
.ev-acts .ev-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.ev-acts .ev-primary:hover{filter:brightness(1.08);border-color:var(--brand)}
/* checking and taking, named ─────────────────────────────────────────────── */
.ev-att-acts{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.ev-attbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;
  font-size:12.5px;font-weight:500;text-decoration:none;cursor:pointer;white-space:nowrap}
.ev-attbtn:hover{border-color:var(--muted);background:var(--raise)}
.ev-attbtn:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.ev-attbtn svg{width:15px;height:15px;flex:none}
.ev-attbtn[disabled]{opacity:.55;cursor:default}

/* ── looking inside, rather than taking ──────────────────────────────────────
   Downloading is the irreversible step. Where a file can be shown safely it is
   shown; where it cannot, the label says what it is and its title says why —
   "no preview" with no reason reads as something being broken. */
.ev-attpeek{flex:none;padding:4px 11px;border-radius:7px;border:1px solid var(--control);
  background:var(--panel);color:var(--ink2);font-size:12px;text-decoration:none;white-space:nowrap}
.ev-attpeek:hover{background:var(--sunk);color:var(--ink)}
.ev-attpeek:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.ev-attwhy{flex:none;padding:3px 9px;border-radius:6px;background:var(--sunk);
  color:var(--muted);font-size:10.5px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;cursor:help}

/* The panel a preview opens into. A dialog rather than a div: Escape closes it,
   focus is held, and the rest of the page goes inert to a screen reader — none
   of which has to be written here and got subtly wrong. */
.pv-dlg{width:min(56rem,94vw);max-height:88vh;padding:0;border:1px solid var(--line);
  border-radius:13px;background:var(--panel);color:var(--ink);overflow:hidden}
.pv-dlg::backdrop{background:rgba(12,16,20,.55)}
.pv-head{display:flex;align-items:center;gap:12px;padding:13px 17px;
  border-bottom:1px solid var(--hair)}
.pv-name{flex:1;min-width:0;font-size:13.5px;font-weight:560;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pv-kind{flex:none;padding:2px 8px;border-radius:6px;background:var(--sunk);
  color:var(--muted);font-size:10.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.pv-close{flex:none;width:auto;padding:5px 12px;font-size:12.5px;font-weight:500}
.pv-body{padding:15px 17px;overflow:auto;max-height:calc(88vh - 110px)}
.pv-body img{max-width:100%;height:auto;display:block;margin:0 auto;
  border-radius:8px;background:var(--sunk)}
.pv-body pre{margin:0;font:12.5px/1.6 var(--mono);white-space:pre-wrap;
  overflow-wrap:anywhere;color:var(--ink2)}
.pv-body table{width:100%;border-collapse:collapse;font-size:12.5px}
.pv-body th,.pv-body td{padding:5px 9px;border:1px solid var(--hair);text-align:start;
  overflow-wrap:anywhere}
.pv-body th{background:var(--sunk);font-weight:600;color:var(--ink);position:sticky;top:0}
.pv-foot{padding:11px 17px;border-top:1px solid var(--hair);font-size:11.5px;
  color:var(--muted);line-height:1.5}
.pv-wrap{overflow:auto;max-height:60vh}

@media(max-width:639px){
  .pv-dlg{width:96vw;max-height:92vh}
  .ev-attpeek{width:100%;text-align:center}
}
.ev-scanbtn.is-ok{color:var(--ok);border-color:var(--okline);background:var(--okbg)}
.ev-scanbtn.is-no{color:var(--no);border-color:var(--noline);background:var(--nobg)}
@media(max-width:559px){
  .ev-att-acts{width:100%;margin-top:10px}
  .ev-attbtn{flex:1;justify-content:center}
}
.letterpaper{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:4px;max-height:70vh;overflow:auto}
.letterpaper table{max-width:100%}
/* the attachment list ────────────────────────────────────────────────────── */
.ev-att-name a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:anywhere}
.ev-att-name a:hover{color:var(--brand)}
.ev-att-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:14px 15px;border-top:1px solid var(--hair);background:var(--raise)}
.ev-att-hint{font-size:12px;color:var(--muted);flex:1;min-width:0}
.ev-attbtn.is-ok{color:var(--ok);border-color:var(--okline);background:var(--okbg)}
.ev-attbtn.is-no{color:var(--no);border-color:var(--noline);background:var(--nobg)}
.ev-attbtn.is-hold{color:var(--hold);border-color:var(--holdline);background:var(--holdbg)}
.ev-att-legal{border-top:1px solid var(--hair)}
.ev-att-legal>summary{padding:11px 15px;cursor:pointer;list-style:none;
  font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted)}
.ev-att-legal>summary::-webkit-details-marker{display:none}
.ev-att-legal>summary::marker{content:""}
.ev-att-legal>summary::before{content:"";width:6px;height:6px;display:inline-block;
  margin-right:8px;border-right:1.4px solid var(--faint);border-bottom:1.4px solid var(--faint);
  transform:rotate(-45deg) translateY(-1px)}
.ev-att-legal[open]>summary::before{transform:rotate(45deg) translateY(-2px)}
.ev-att-legal>div{padding:0 15px 15px}
.ev-att-legal p{margin:0 0 9px;font-size:12px;line-height:1.55;color:var(--muted)}
.ev-att-legal p:last-child{margin-bottom:0}
@media(max-width:559px){ .ev-att-foot .ev-attbtn{flex:1;justify-content:center} }
/* the message, in a panel ────────────────────────────────────────────────── */
.msgdlg{width:min(880px,92vw);height:min(84vh,900px);padding:0;border:0;border-radius:14px;
  background:var(--panel);color:var(--ink);overflow:hidden;
  box-shadow:0 24px 70px rgba(12,18,26,.32)}
.msgdlg::backdrop{background:rgba(12,18,26,.5)}
.msgdlg-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--line);background:var(--raise);font-size:14px}
.msgdlg-acts{display:flex;align-items:center;gap:14px}
.msgdlg-acts a{font-size:13px;color:var(--brand)}
.msgdlg-close{padding:7px 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.msgdlg-close:hover{border-color:var(--muted)}
.msgdlg-frame{display:block;width:100%;height:calc(100% - 52px);border:0;background:var(--bg)}
/* where a field came from ─────────────────────────────────────────────────── */
.prov{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:5px;
  background:var(--holdbg);border:1px solid var(--holdline);color:var(--hold);
  font-size:10.5px;letter-spacing:.03em;white-space:nowrap;cursor:help;vertical-align:1px}
.prov:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.ev-kv-prov td{overflow-wrap:anywhere}
/* ── the message, rendered ───────────────────────────────────────────────────
   A sandboxed document with no script and no origin of ours. The frame is given
   a height rather than sized to its content, because measuring content inside a
   sandbox needs a script inside the sandbox, and there is deliberately none. A
   generous height and its own scrollbar is the honest trade. */
.mv-render{margin:18px 0 20px}
.mv-tabs{display:flex;gap:4px;margin:0 0 12px;border-bottom:1px solid var(--hair)}
.mv-tab{padding:8px 14px;font-size:13px;color:var(--muted);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.mv-tab:hover{color:var(--ink)}
.mv-tab.is-on{color:var(--ink);font-weight:560;border-bottom-color:var(--brand)}
.mv-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

.mv-frame{display:block;width:100%;height:min(72vh,760px);border:1px solid var(--line);
  border-radius:10px;background:#fff}

/* Images: blocked until asked for, and said plainly why. Loading one tells the
   sender the message was opened, when and from where — and the reader here is
   frequently investigating that sender. */
.mv-imgbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 11px;
  padding:10px 13px;border-radius:9px;background:var(--holdbg);border:1px solid var(--holdline);
  font-size:12.5px;color:var(--ink2)}
.mv-imgbar.is-on{background:var(--sunk);border-color:var(--hair);color:var(--muted)}
.mv-imgwhy{flex:1;min-width:min(20rem,100%);font-size:11.5px;color:var(--muted);line-height:1.5}
.mv-imgbtn{flex:none;padding:5px 13px;border-radius:8px;border:1px solid var(--control);
  background:var(--panel);color:var(--ink);font-size:12.5px;text-decoration:none;white-space:nowrap}
.mv-imgbtn:hover{background:var(--sunk)}
.mv-imgbtn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* What was taken out. Evidence about the message, not a note about our
   processing — a letter carrying a script is a letter somebody built to act. */
.mv-stripped{margin:0 0 11px;padding:11px 13px;border-radius:9px;background:var(--nobg);
  border:1px solid var(--noline);font-size:12.5px;color:var(--ink2)}
.mv-stripped b{display:block;margin:0 0 5px;color:var(--ink);font-weight:600}
.mv-stripped ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.mv-stripped li{font-variant-numeric:tabular-nums}
.mv-stripped em{font-style:normal;color:var(--muted)}
.mv-stripped p{margin:8px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.mv-note{margin:11px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}

@media(max-width:639px){
  .mv-frame{height:min(64vh,560px)}
  .mv-imgbtn{width:100%;text-align:center}
}

/* how the text was read ───────────────────────────────────────────────────── */
.enc{margin:18px 0 0;padding:13px 15px;border-radius:10px;background:var(--holdbg);
  border:1px solid var(--holdline)}
.enc-head{margin:0;display:flex;flex-direction:column;gap:4px}
.enc-head strong{font-size:13px;color:var(--ink)}
.enc-head span{font-size:12.5px;line-height:1.55;color:var(--ink2)}
/* The panel states the answer and keeps the workings behind a control. It used
   to open with "1 character could not be read" and ten charset names, which asks
   somebody looking for an invoice to have an opinion about KOI8-R. Amber only
   when the reading is genuinely uncertain — a message that was simply repaired
   is good news and should not wear a warning colour. */
.enc{background:var(--sunk);border-color:var(--hair)}
.enc.is-low{background:var(--holdbg);border-color:var(--holdline)}
.enc-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;
  justify-content:space-between}
.enc-why{margin:9px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink2)}

/* The override, folded away. Positioned, so opening it does not push the
   message the reader is in the middle of. */
.enc-menu{position:relative;flex:none}
.enc-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;font-size:12.5px;color:var(--ink2);border:1px solid var(--control);
  border-radius:8px;background:var(--panel);white-space:nowrap}
.enc-menu>summary::-webkit-details-marker{display:none}
.enc-menu>summary::after{content:"";width:6px;height:6px;border-inline-end:1.5px solid currentColor;
  border-block-end:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55}
.enc-menu[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.enc-menu>summary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.enc-menu-in{position:absolute;z-index:20;inset-inline-end:0;margin-block-start:7px;
  display:grid;gap:3px;padding:9px;min-inline-size:15rem;max-inline-size:min(22rem,86vw);
  border:1px solid var(--line);border-radius:11px;background:var(--panel);
  box-shadow:var(--shadow-dialog)}
.enc-alt-head{margin:8px 0 2px;padding:0 5px;font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);font-weight:650}
.enc-opt{display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:7px;
  color:var(--ink2);font-size:12.5px;text-decoration:none}
.enc-opt b{font-weight:550;color:var(--ink)}
.enc-opt em{font-style:normal;font-size:11px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
a.enc-opt:hover{background:var(--sunk)}
a.enc-opt:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.enc-opt.is-on{background:var(--brand-soft)}
.enc-opt.is-on b::after{content:" ✓";color:var(--ok)}

.enc-tech{margin:11px 0 0}
.enc-tech>summary{cursor:pointer;font-size:11.5px;color:var(--muted)}
.enc-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;
  margin:9px 0 0;font-size:12px}
.enc-facts dt{color:var(--muted)}
.enc-facts dd{margin:0;color:var(--ink2);overflow-wrap:anywhere}
.enc-cands{list-style:none;margin:4px 0 0;padding:0;font-size:11.5px}
.enc-cands li{display:flex;justify-content:space-between;gap:12px;padding:2px 0;
  border-block-end:1px solid var(--hair);color:var(--muted)}
.enc-cands li:last-child{border-block-end:0}
.enc-cands b{font-weight:550;font-variant-numeric:tabular-nums;color:var(--ink2)}
.enc-note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}

@media(max-width:639px){
  .enc-top{flex-direction:column}
  .enc-menu{align-self:stretch}
  .enc-menu>summary{justify-content:space-between;width:100%}
  .enc-menu-in{inset-inline:0;max-inline-size:none}
}
/* what a third party will receive, before it goes ─────────────────────────── */
.ev-preview{margin:12px 0 0;padding:13px 15px;border-radius:9px;background:var(--sunk);
  border:1px solid var(--hair)}
.ev-preview-head{margin:0;display:flex;flex-direction:column;gap:3px}
.ev-preview-head strong{font-size:12.5px;color:var(--ink)}
.ev-preview-head span{font-size:12px;color:var(--muted);line-height:1.5}
.ev-preview-body{margin:11px 0 0;padding:11px 13px;border-left:2px solid var(--line);
  background:var(--panel);border-radius:0 7px 7px 0}
.ev-preview-body p{margin:0 0 7px;font-size:12.5px;line-height:1.55;color:var(--ink2)}
.ev-preview-body p:last-child{margin:0}
.ev-preview-none{margin:12px 0 0;padding:11px 13px;border-radius:9px;background:var(--holdbg);
  border:1px solid var(--holdline);font-size:12.5px;line-height:1.5;color:var(--hold)}
/* notifications on this device ────────────────────────────────────────────── */
.push{margin-top:4px}
.push-state{margin:12px 0 0;padding:10px 13px;border-radius:9px;background:var(--sunk);
  border:1px solid var(--hair);font-size:12.5px;line-height:1.55;color:var(--ink2)}
.push-state.is-ok{background:var(--okbg);border-color:var(--okline);color:var(--ok)}
.push-state.is-hold{background:var(--holdbg);border-color:var(--holdline);color:var(--hold)}
.push-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.push-acts button[hidden]{display:none}
/* what may be done to a record ────────────────────────────────────────────── */
.lc-notice{display:flex;flex-direction:column;gap:4px;margin:0 0 18px;padding:13px 15px;
  border-radius:10px;background:var(--sunk);border:1px solid var(--hair)}
.lc-notice.lc-hold{background:var(--holdbg);border-color:var(--holdline)}
.lc-notice strong{font-size:13px;color:var(--ink)}
.lc-notice span{font-size:12.5px;line-height:1.55;color:var(--ink2)}
.lc-wrap{padding:4px 0 0}
/* The two groups inside "Manage this record": your own list, and the
   organisation's record. They are separated because they differ in who they
   affect, and an h3 at its default size would make each group look like a page
   heading inside a disclosure. */
.lc-group{margin:18px 0 2px;font-size:11px;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint)}
.lc-group:first-child{margin-top:2px}
.lc-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.lc-off{display:flex;flex-direction:column;gap:3px;padding:10px 13px;border-radius:9px;
  background:var(--sunk);border:1px solid var(--hair);color:var(--faint);font-size:13px}
.lc-off em{font-style:normal;font-size:12px;color:var(--muted);line-height:1.5}
.lc-act{border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.lc-act>summary{padding:10px 13px;cursor:pointer;font-size:13px;list-style:none}
.lc-act>summary::-webkit-details-marker{display:none}
.lc-act[open]>summary{border-bottom:1px solid var(--hair);font-weight:600}
.lc-act.is-destructive>summary{color:var(--no)}
.lc-act form{padding:13px}
.lc-act p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--ink2)}
.lc-undo{color:var(--muted)!important;font-size:12px!important}
/* Destructive, and not wearing the colour that means a failed check. Red here is
   a warning about an action; evidentiary red is a finding about a message, and
   the two must not be learned as one thing. */
.lc-danger{background:var(--panel);color:var(--no);border:1px solid var(--noline)}
.lc-danger:hover{background:var(--nobg)}
/* who the letters go to ───────────────────────────────────────────────────── */
.ev-who{font-size:12px;color:var(--muted)}
.ev-recipients{margin:14px 0 0;padding:12px 14px;border-radius:9px;background:var(--infobg);
  border:1px solid var(--infoline);display:flex;flex-direction:column;gap:6px}
.ev-recipients.is-gap{background:var(--holdbg);border-color:var(--holdline)}
.ev-recipients b{font-size:12.5px;color:var(--ink)}
.ev-recipients span{font-size:12px;color:var(--ink2);line-height:1.5}
.ev-recipients-list{display:flex;flex-wrap:wrap;gap:6px}
.ev-recipients-list .mono{padding:2px 8px;border-radius:6px;background:var(--panel);
  border:1px solid var(--hair);font-size:11.5px;overflow-wrap:anywhere}
.ev-recipients-bad{color:var(--hold)!important}
/* what became of the letter ───────────────────────────────────────────────── */
.rq-track{margin:10px 0 0;padding:11px 13px;border-radius:9px;background:var(--sunk);
  border:1px solid var(--hair)}
.rq-track-head{margin:0;display:flex;flex-direction:column;gap:3px}
.rq-track-head strong{font-size:12.5px}
.rq-track-head span{font-size:12px;color:var(--muted);line-height:1.5}
.rq-track-head.rq-ok strong{color:var(--ok)}
.rq-track-head.rq-no strong{color:var(--no)}
.rq-steps{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.rq-steps li{display:flex;flex-direction:column;gap:2px;padding-left:19px;position:relative;
  font-size:12px;color:var(--muted)}
/* A ring for not yet, a filled dot for done. Shape as well as colour, so the
   distinction survives being printed and being colour-blind. */
.rq-steps li::before{content:"";position:absolute;left:2px;top:4px;width:9px;height:9px;
  border-radius:50%;border:1.5px solid var(--line);background:var(--panel)}
.rq-steps li.is-done{color:var(--ink2)}
.rq-steps li.is-done::before{background:var(--ok);border-color:var(--ok)}
.rq-steps em{font-style:normal;font-size:11.5px;color:var(--faint);line-height:1.45}
.rq-due{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:3px}
.rq-due strong{font-size:12.5px}
.rq-due span{font-size:12px;color:var(--muted);line-height:1.5}
.rq-due.is-over strong{color:var(--hold)}
/* the files that came with it, in the composer ────────────────────────────── */
.ev-attask{margin:14px 0 0;padding:13px 15px;border-radius:10px;background:var(--infobg);
  border:1px solid var(--infoline)}
.ev-attask.is-gap{background:var(--holdbg);border-color:var(--holdline)}
.ev-attask b{display:block;font-size:13px;color:var(--ink)}
.ev-attask p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink2)}
.ev-attask ul{margin:10px 0 0;padding-left:18px;font-size:12.5px;line-height:1.7}
.ev-attask li{overflow-wrap:anywhere}
.ev-attask-note{color:var(--muted)!important;font-size:12px!important}
/* the third person in the chain ───────────────────────────────────────────── */
.ev-via{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.ev-via h3{margin:0;font-size:13.5px;font-weight:600}
.ev-via-found{margin:11px 0 0;padding:11px 13px;border-radius:9px;background:var(--sunk);
  border:1px solid var(--hair);display:flex;flex-direction:column;gap:4px;overflow-wrap:anywhere}
.ev-via-found strong{font-size:13px}
.ev-via-found span{font-size:12px;color:var(--muted);line-height:1.5}
/* A label wrapping a whole explanation, so the sheet's small-caps label treatment
   has to come off it — forty words in capitals is not a label, it is shouting. */
.ev-check{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:12px 13px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer;
  text-transform:none;letter-spacing:normal;font-size:13px;color:var(--ink);font-weight:400}
.ev-check:hover{border-color:var(--muted)}
.ev-check input{width:auto;flex:none;margin:2px 0 0}
.ev-check>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.ev-check b{font-size:13px}
.ev-check .sub{margin:0;font-size:12px;line-height:1.5}
/* choosing a language ────────────────────────────────────────────────────── */
.langbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px;
  padding:10px 0;border-bottom:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.langbar a{color:var(--muted);text-decoration:none;padding:3px 8px;border-radius:7px}
.langbar a:hover{background:var(--sunk);color:var(--ink)}
.langbar a[aria-current]{color:var(--ink);background:var(--sunk);font-weight:600}
[dir="rtl"] .langbar{flex-direction:row-reverse}
@media(prefers-reduced-motion:reduce){.hint>span{transition:none}}


table{border-collapse:collapse;width:100%;font-size:13.5px}
th{text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:0 14px 9px 0;border-bottom:1px solid var(--line)}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right;padding-right:0}
.rowlink{color:inherit;text-decoration:none;font-weight:500}
.rowlink:hover{color:var(--brand)}
.empty{padding:36px 0;text-align:center;color:var(--faint);font-size:0.933em}
@media(max-width:639px){
  /* A row becomes a card, and each cell carries the column heading that has
     scrolled away. ".kv" is excluded: it is already a label beside a value, so
     the card chrome would box every single pair and the generated label would be
     a second, empty one — which is what it was doing. It gets its own treatment
     below. */
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows),table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) thead,table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) tbody,
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) tr,table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) th,table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td{display:block;width:100%}
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) tr{border:1px solid var(--line);border-radius:10px;padding:13px 15px;
    margin-bottom:10px;background:var(--raise);box-shadow:var(--shadow-tight)}
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) tr:last-child{margin-bottom:0}
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) tr:hover td{background:transparent}
  /* Grid rather than flex so the label column lines up down the card and a long
     value wraps inside its own column instead of shouldering the label aside.
     "minmax(0,1fr)" is what lets it wrap at all: a 64-character digest in an
     "auto" column sets the column's width and carries the card off the screen.
     6rem fits the longest heading we have ("Recipients", "Date shown") and
     leaves the value the rest. */
  /* justify-items:start matters more than it looks. A grid stretches its items
     by default, so a state chip — an inline-flex pill sized to its own word —
     was drawn as a full-width bar across the card, which reads as a progress
     meter rather than as a label. */
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td{border:0;padding:4px 0;text-align:left;
    display:grid;grid-template-columns:6rem minmax(0,1fr);gap:0 12px;
    align-items:baseline;justify-items:start}
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td[data-l]::before{content:attr(data-l);color:var(--faint);font-size:0.733em;
    line-height:1.7;letter-spacing:.07em;text-transform:uppercase;font-weight:600}
  /* A cell with nothing to label is a value on its own and takes the full width.
     Without this it became an empty first column that indented itself for no
     reason — three cells on the site do this. */
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td:not([data-l]){display:block}
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td.num,table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td.r{text-align:left}
  /* A timestamp column is set nowrap so it stays on one line in a table. In a card
     the value column is a fraction of that width, so nowrap stops being alignment
     and becomes a value running out past the card's own edge. */
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td.t,table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td.num{white-space:normal}
  /* The state chip is the thing a person looks for first in a list, so it keeps
     its own line rather than being squeezed into the value column. */
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td[data-l="State"],table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td[data-l="Status"]{padding-top:7px}

  /* A key/value table stays a key/value table: the label above, quiet and small,
     the value under it with the full width to wrap a digest into. No borders,
     because the rows are one group of facts about one thing, not a list of
     separate ones. */
  .kv,.kv tbody,.kv tr,.kv td,
  .mw-h,.mw-h tbody,.mw-h tr,.mw-h td,
  .pt-rows,.pt-rows tbody,.pt-rows tr,.pt-rows td{display:block;width:100%}
  .kv tr,.mw-h tr,.pt-rows tr{padding:9px 0;border-top:1px solid var(--hair)}
  .kv tr:first-child,.mw-h tr:first-child,.pt-rows tr:first-child{border-top:0;padding-top:0}
  .kv td,.mw-h td,.pt-rows td{border:0;padding:0}
  .kv td:first-child,.mw-h td:first-child,.pt-rows td:first-child{font-size:0.733em;letter-spacing:.07em;text-transform:uppercase;
    color:var(--faint);font-weight:600;line-height:1.7}
  .kv td+td,.mw-h td+td,.pt-rows td+td{color:var(--ink2)}
}

/* Below this the label column stops being alignment and starts being the reason
   the value has nowhere to go. The arithmetic, at 320px: the page keeps 16px each
   side, the panel 18, the card 15, which leaves 222px inside a row. A 6rem label
   and its gap take 108 of them and hand a timestamp 114px it cannot fit in — so
   the date ran out past the card's own border and a filename broke over four
   lines. The label goes above the value instead, and the value gets the width of
   the card. Alignment down the column is worth a great deal and not worth this. */
@media(max-width:379px){
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td{display:block}
  table:not(.kv):not(.ev-kv):not(.mw-h):not(.pt-rows) td[data-l]::before{display:block;margin-bottom:1px}
}

.verdict{border-radius:12px 12px 0 0;padding:24px 20px;border-left:5px solid var(--line)}
@media(min-width:640px){.verdict{padding:28px 30px 26px}}
.is-ok .verdict{border-left-color:var(--ok);background:var(--okbg)}
.is-no .verdict{border-left-style:double;border-left-width:7px;border-left-color:var(--no);background:var(--nobg)}
.is-hold .verdict{border-left-style:dashed;border-left-color:var(--hold);background:var(--holdbg)}
.asked{font-size:12.5px;color:var(--muted);margin:0 0 9px}
.verdict h2{font-size:clamp(22px,5.5vw,33px);line-height:1.14;letter-spacing:-.024em;margin:0 0 10px}
.is-ok .verdict h2{color:var(--ok)}.is-no .verdict h2{color:var(--no)}.is-hold .verdict h2{color:var(--hold)}
.verdict p{font-size:1em;color:var(--ink2);margin:0;max-width:62ch}
.two{display:grid;gap:2px 34px;grid-template-columns:1fr}
@media(min-width:700px){.two{grid-template-columns:1fr 1fr}}
ul{margin:0;padding-left:18px}li{margin-bottom:5px}li::marker{color:var(--faint)}

details{border-top:1px solid var(--hair);background:var(--raise)}
details:last-child{border-radius:0 0 12px 12px}
summary{cursor:pointer;padding:14px 20px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);list-style:none;display:flex;align-items:center;gap:9px}
@media(min-width:640px){summary{padding:14px 30px}}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform 220ms ease;flex:none}
details[open] summary::before{transform:rotate(45deg)}
.inner{padding:2px 20px 24px}
@media(min-width:640px){.inner{padding:2px 30px 26px}}
dl{display:grid;grid-template-columns:1fr;gap:2px 20px;margin:6px 0 0;font-size:0.867em}
@media(min-width:520px){dl{grid-template-columns:auto minmax(0,1fr);gap:8px 22px}}
dt{color:var(--muted)}dd{margin:0 0 8px;overflow-wrap:anywhere}
@media(min-width:520px){dd{margin:0}}


/* Nothing may push its container open.
   The file control is the usual offender: once a file is chosen the browser
   draws its name inside the control, that name does not wrap, and a long one —
   "Pay - Guaranteed Hours Staff+3.eml" is a real example — carries the whole
   panel off the side of the screen. Clipping it is the only fix that works
   without JavaScript, and the name is not information the person needs back:
   they have just chosen it.
   The rest of the block is the same defence applied everywhere prose or an
   identifier can arrive longer than the space it was given. */
input,select,textarea{max-width:100%;min-width:0}
input[type=file]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px}
input[type=file]::file-selector-button{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.two>div,.stack>div,.panel,.panel.pad,main,form{min-width:0}
.note,.sub,.dek,.panel p,.panel li{overflow-wrap:anywhere}
.mono{overflow-wrap:anywhere}
table.dense td,table.kv td{min-width:0}
/* A table cell is the one place a long identifier reliably arrives without being
   asked: a 64-character digest, a message id, a forwarding address. "minmax(0,1fr)"
   lets the column be narrow but does not give the word permission to break, so
   without this the text leaves the column and the card and the screen, in that
   order. Applied to every cell rather than the mono ones because a filename does
   the same thing and is not set in mono. */
td{overflow-wrap:anywhere}
/* The same for a heading: "Pay - Guaranteed Hours Staff+3.eml" is a real record
   label and "text-wrap:balance" will not break it. */
h1,h2,.vhead{overflow-wrap:break-word}

/* Field help. A circled question mark beside the label, opening on hover and on
   keyboard focus alike — a hint only a mouse can reach is a hint half the
   people using this cannot. It is a button rather than a span so that it is
   reachable by tab and announced as interactive. */
.fh{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;
  border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--faint);
  font:600 10px/1 system-ui,"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;cursor:help;padding:0;
  vertical-align:middle;position:relative;flex:none}
.fh:hover,.fh:focus-visible{color:var(--ink);border-color:var(--muted)}
.fh>span{position:absolute;left:-8px;top:calc(100% + 8px);z-index:30;width:max-content;max-width:22rem;
  background:var(--ink);color:var(--bg);font:400 12.5px/1.55 system-ui,"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:0;text-transform:none;text-align:left;padding:9px 12px;border-radius:8px;
  opacity:0;visibility:hidden;transition:opacity 110ms ease;box-shadow:0 8px 26px rgba(0,0,0,.24)}
.fh:hover>span,.fh:focus>span,.fh:focus-visible>span{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.fh>span{transition:none}}
@media(max-width:639px){.fh>span{left:auto;right:-8px;max-width:calc(100vw - 44px)}}

.note{border-left:3px solid var(--line);background:var(--sunk);padding:12px 15px;border-radius:0 8px 8px 0;font-size:13.5px;color:var(--ink2);margin:0 0 18px}
.note.ok{border-left-color:var(--ok);background:var(--okbg)}
.note.no{border-left-color:var(--no);background:var(--nobg);color:var(--no)}
.copy{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin-top:8px;word-break:break-all}
.hr{border:0;border-top:1px solid var(--hair);margin:22px 0}
.or{display:flex;align-items:center;gap:14px;color:var(--faint);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin:20px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.provider{display:block;width:100%;margin-bottom:10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);font-weight:500}
.hero{padding:44px 0 4px}
@media(min-width:640px){.hero{padding:60px 0 4px}}
.hero h1{font-size:clamp(25px,6vw,40px);line-height:1.14;letter-spacing:-.026em;max-width:17ch;margin-bottom:14px;text-wrap:balance}
.hero p{font-size:16.5px;line-height:1.6;color:var(--ink2);max-width:62ch}
footer{border-top:1px solid var(--line);background:var(--panel);padding:26px 0 46px;margin-top:56px}
footer .in{max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:640px){footer .in{padding:0 24px}}
footer p{color:var(--muted);font-size:12.5px;max-width:78ch;margin:0}
footer .creedline{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:var(--faint);margin:0 0 14px}
footer .legal{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:14px;font-size:12.5px}
footer .legal a{color:var(--muted);text-decoration:none}
footer .legal a:hover{color:var(--ink)}
.legalbody h3{margin-top:26px}
.legalbody p{font-size:14.5px;color:var(--ink2);max-width:70ch}
.legalbody ul{margin:0 0 14px;font-size:0.933em}
.doclist{display:grid;gap:10px;margin-top:18px}
.doclist a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:9px;text-decoration:none;background:var(--panel)}
.doclist b{display:block;color:var(--ink);font-size:15px}
.doclist span{color:var(--muted);font-size:0.867em}
/* ── composing a request ────────────────────────────────────────────────
   Numbered because it is a sequence a person walks once and has to be able to
   stop halfway through. Each step is a panel so the boundary between decisions
   is visible, and the letter at the end is set in mono so it reads as the
   artefact it is rather than as more of our prose. */
.draft .step{background:var(--panel);border:1px solid var(--hair);border-radius:12px;
  padding:22px;margin-top:18px}
.draft .step>h2{display:flex;align-items:center;gap:11px;font-size:1.16em;margin:0 0 12px}
.stepn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--sunk);border:1px solid var(--hair);color:var(--muted);
  font:600 .82em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;flex:none}
.draftbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;
  padding:16px 0 0;border-top:1px solid var(--hair)}
.draftbar button{width:auto}
button.secondary{background:var(--panel);color:var(--ink);border:1px solid var(--muted)}
button.secondary:hover{border-color:var(--ink)}
.letter{margin-top:12px;padding:20px;background:var(--sunk);border:1px solid var(--hair);
  border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:460px;overflow:auto;
  font:400 .93em/1.62 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sendform{margin-top:20px;background:var(--panel);border:1px solid var(--hair);
  border-radius:12px;padding:22px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:639px){
  .draft .step,.sendform{padding:16px}
  .draft .step>h2{font-size:1.08em;gap:9px}
  /* The letter stops being its own scrolling box. A scroll area inside a scrolling
     page is awkward with a thumb — the page stops moving and it is not obvious
     why — and this is the one thing on the screen the person has to read in full
     before they send it to a stranger. Let the page be as long as the letter. */
  .letter{padding:14px;font-size:.88em;max-height:none;overflow:visible}
  /* The two actions stack, widest first: on a phone a row of two buttons with a
     sentence between them wraps into something with no obvious order. */
  .draftbar{gap:10px}
  .draftbar button{width:100%}
  .draftbar .sub{order:2}
}

.rqacts{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.rqacts form button{width:auto}
/* A flat 260px minimum is wider than the content box of a padded panel on a
   320px handset, and a flex item that cannot shrink below its minimum takes the
   page sideways with it. "min()" keeps the intent — do not collapse this to a
   sliver on a desktop — without asserting it past the width that exists. */
.rqacts details{min-width:min(260px,100%)}
.rqacts summary{cursor:pointer}
.themeset{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.themebtn{padding:8px 14px;font-size:13.5px;border:1px solid var(--hair);border-radius:8px;
  background:var(--panel);color:var(--ink);cursor:pointer;width:auto}
.themebtn:hover{border-color:var(--muted)}
.themebtn[aria-pressed=true]{border-color:var(--brand);background:var(--sunk);font-weight:600}
.themebtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── the plain answer ────────────────────────────────────────────────────
   Built for the glance first: the state is readable before any word is read,
   and every state carries a mark and a word so colour is never the only
   carrier. Dense rather than airy — this is a working instrument, and a reader
   deciding something should not have to scroll to see the whole answer. */
.verdict-plain{margin-top:20px;border-left:4px solid var(--hair);overflow:hidden}
.verdict-plain.is-green{border-left-color:var(--ok)}
.verdict-plain.is-amber{border-left-color:var(--hold)}
.verdict-plain.is-red{border-left-color:var(--no)}
.verdict-plain.is-grey{border-left-color:var(--muted)}
.vstate{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.vmark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;flex:none}
.is-green .vmark{background:var(--okbg);color:var(--ok);border:1px solid var(--ok)}
.is-amber .vmark{background:var(--holdbg);color:var(--hold);border:1px solid var(--hold)}
.is-red   .vmark{background:var(--nobg);color:var(--no);border:1px solid var(--no)}
.is-grey  .vmark{background:var(--sunk);color:var(--muted);border:1px solid var(--hair)}
.vword{font-weight:600;font-size:11.5px;line-height:1;letter-spacing:.10em;text-transform:uppercase}
.is-green .vword{color:var(--ok)}.is-amber .vword{color:var(--hold)}.is-red .vword{color:var(--no)}
.is-grey .vword{color:var(--muted)}
.vhead{margin:0 0 10px;font-size:clamp(20px,2.4vw,26px);line-height:1.2;text-wrap:balance}
.vsent{margin:0;font-size:1.08em;line-height:1.6;max-width:64ch;color:var(--ink)}
.vmeans{margin:18px 0 0;display:grid;gap:0}
.vmeans dt{font-weight:600;font-size:.94em;line-height:1.45;letter-spacing:.01em;text-transform:none;
  color:var(--ink);padding-top:12px;border-top:1px solid var(--hair)}
.vmeans dd{margin:4px 0 0;font-size:.97em;line-height:1.6;color:var(--muted);max-width:68ch}
.vextra{margin:18px 0 0;padding:13px 15px;background:var(--sunk);border-radius:8px;
  font-size:.95em;line-height:1.6;color:var(--muted);max-width:72ch}
.vnext{padding:18px 22px;background:var(--sunk);border-top:1px solid var(--hair)}
.vnext.quiet{background:transparent}
/* h3 is small-uppercase across the site, which works at 11.5px and shouts at
   17px. This is the heading over the one action the reader can take, so it is
   set at reading size — and therefore has to leave the uppercase behind with it. */
.vnext h3{margin:0 0 6px;font-size:1.05em;text-transform:none;letter-spacing:-.006em;color:var(--ink)}
.vnext p{margin:0 0 14px;font-size:.97em;line-height:1.6;color:var(--muted);max-width:68ch}
.vnext.quiet p{margin-bottom:0}

/* ── the record, as the founder drew it ──────────────────────────────────────
   The answer beside the file it is about, the checks down one column and the
   message itself down the other, and a legend so the marks need no explaining.
   Two columns on a desk, one on a phone, and the picture goes second there
   because the checks are the reading and the picture is the proof of it. */
.rec-head{display:grid;gap:16px;grid-template-columns:1fr;align-items:center;margin:0 0 20px}
@media(min-width:900px){.rec-head{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:24px}}
.rec-name{display:flex;gap:14px;align-items:flex-start;min-width:0}
.rec-ico{color:var(--brand);flex:none;margin-top:2px}
.rec-name h1{margin:0 0 4px;font-size:clamp(19px,2.4vw,25px);line-height:1.2;overflow-wrap:anywhere}
.rec-name .recmeta{margin:0}
/* The banner. Tinted rather than solid: a solid red bar over somebody's document
   reads as an accusation, and an inconclusive answer is not one. */
.banner{display:flex;gap:13px;align-items:center;padding:15px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--sunk);
  box-shadow:var(--shadow-tight)}
.banner strong{display:block;font-size:clamp(17px,2.1vw,22px);line-height:1.15;letter-spacing:-.02em;
  text-transform:uppercase;font-weight:700}
.banner span{display:block;margin-top:3px;font-size:0.933em;line-height:1.4;color:var(--ink2)}
.banner-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;line-height:1;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px;font-weight:700}
.is-green .banner{background:var(--okbg);border-color:var(--okline)}
.is-green .banner strong{color:var(--ok)}
.is-green .banner-mark{background:var(--ok);color:#fff}
.is-amber .banner{background:var(--holdbg);border-color:var(--holdline)}
.is-amber .banner strong{color:var(--hold)}
.is-amber .banner-mark{background:var(--hold);color:#fff}
.is-red .banner{background:var(--nobg);border-color:var(--noline)}
.is-red .banner strong{color:var(--no)}
.is-red .banner-mark{background:var(--no);color:#fff}
.is-grey .banner-mark{background:var(--muted);color:var(--bg)}

.rec-cols{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
@media(min-width:1100px){.rec-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}}
.rec-cols>*{min-width:0;margin-top:0}

/* Each check: a mark that reads without colour, the finding in words, and the
   one-word state at the end of the line where the eye lands last. */
.checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0}
.chk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  padding:16px 0;border-top:1px solid var(--hair)}
@media(min-width:560px){.chk{grid-template-columns:auto minmax(0,1fr) auto;align-items:start}}
.chk-mark{grid-row:1;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:none;
  line-height:1;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;font-weight:700;margin-top:1px}
.chk.is-ok .chk-mark{background:var(--ok);color:#fff}
.chk.is-hold .chk-mark{background:var(--hold);color:#fff}
.chk.is-no .chk-mark{background:var(--no);color:#fff}
.chk.is-none .chk-mark{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.chk-txt b{display:block;font-size:1em;line-height:1.35;margin-bottom:3px}
.chk-txt p{margin:0;font-size:.94em;line-height:1.55;color:var(--muted);max-width:60ch}
.chk>.chip{grid-column:2;justify-self:start;margin-top:2px}
@media(min-width:560px){.chk>.chip{grid-column:3;grid-row:1;justify-self:end;margin-top:3px}}

/* A tinted aside. Used where something is worth saying and is not a finding. */
.callout{border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:14px 16px}
.callout.info{border-color:color-mix(in srgb,var(--brand) 26%,var(--line));
  background:color-mix(in srgb,var(--brand) 6%,var(--panel))}

/* The message, drawn. A window frame because that is what everybody's mail looks
   like, and the frame is what makes the boxes inside read as parts of a message
   rather than as our own panels. */
.mailwin{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--raise);box-shadow:var(--shadow-tight)}
.mw-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--sunk);
  border-bottom:1px solid var(--line)}
.mw-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.mw-bar i:first-child{background:color-mix(in srgb,var(--no) 55%,var(--line))}
.mw-bar i:nth-child(2){background:color-mix(in srgb,var(--hold) 55%,var(--line))}
.mw-bar i:nth-child(3){background:color-mix(in srgb,var(--ok) 55%,var(--line))}
.mw-bar span{margin-left:auto;font-size:0.733em;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--faint)}
.picture{container-type:inline-size}
/* Order matters here and cost an hour. The base rule hiding the brace was written
   after the container query that reveals it; equal specificity, later wins, so the
   brace stayed hidden while the grid went on reserving its 15px column — and the
   verdict card, landing in that column, rendered one letter per line. Base first,
   the query that overrides it second. */
.mw-tie{display:none;color:var(--line)}
.mw-tie.is-ok{color:var(--ok)}
.mw-tie.is-hold{color:var(--hold)}
.mw-tie.is-no{color:var(--no)}
.mw-brace{width:15px;height:100%;display:block}
.mw-pair{display:grid;gap:12px;grid-template-columns:1fr;padding:14px}
/* Asked of the panel, not the window: the record splits into two columns at
   1100px, so a viewport query reports "wide" at the moment this panel becomes
   narrow. Three columns — the part, the brace, the finding — and the boxes
   stretch so the brace has a full height to span. */
@container (min-width:520px){
  .mw-pair{grid-template-columns:minmax(0,1.05fr) 15px minmax(0,1fr);gap:0 10px;align-items:stretch}
  .mw-tie{display:block}
}
@supports not (container-type:inline-size){
  @media(min-width:1500px){
    .mw-pair{grid-template-columns:minmax(0,1.05fr) 15px minmax(0,1fr);gap:0 10px;align-items:stretch}
    .mw-tie{display:block}
  }
}
.mw-pair+.mw-pair{border-top:1px solid var(--hair)}
/* The part itself: a 3px edge on the side that says which state it is in. The
   edge rather than a fill, so a long message does not become a wall of colour. */
.mw-part{border:2px solid var(--line);border-radius:10px;padding:14px 16px;
  background:var(--panel);min-width:0}
.mw-part.is-ok{border-color:var(--ok);background:var(--okbg)}
.mw-part.is-hold{border-color:var(--hold);background:var(--holdbg)}
.mw-part.is-no{border-color:var(--no);background:var(--nobg)}
.mw-h{width:100%;border-collapse:collapse;font-size:.92em}
.mw-h td{padding:3px 0;vertical-align:top;border:0}
.mw-h .mw-k{color:var(--muted);white-space:nowrap;padding-right:14px;width:1%}
.mw-h .mw-v{color:var(--ink);overflow-wrap:anywhere}
.mw-body{margin:0;font-size:.92em;line-height:1.55;color:var(--ink);white-space:pre-wrap;
  overflow-wrap:anywhere;max-height:12.5em;overflow:auto}
.mw-body.mw-hidden{color:var(--muted);font-style:italic;white-space:normal}
.mw-att{display:flex;gap:9px;align-items:center;margin:10px 0 0;padding:9px 11px;
  border:1px dashed var(--line);border-radius:8px;background:var(--panel);font-size:.88em}
.mw-att svg{color:var(--muted);flex:none}
.mw-att b{display:block;font-weight:600;overflow-wrap:anywhere}
.mw-att em{display:block;font-style:normal;color:var(--muted);font-size:.9em}
.mw-att a{font-weight:600;overflow-wrap:anywhere}
.mw-scan{margin:9px 0 0;font-size:.82em;line-height:1.45;color:var(--muted)}
/* The reason, beside the part it explains. */
.mw-note{border-radius:10px;padding:13px 15px;border:2px solid var(--line);background:var(--panel);min-width:0}
.mw-note p{margin:0;font-size:.9em;line-height:1.55;color:var(--muted);max-width:none}
.mw-note-h{display:flex;gap:9px;align-items:center;margin:0 0 7px!important;
  font-weight:700;font-size:.95em!important;letter-spacing:.03em;text-transform:uppercase;line-height:1.2}
.mw-mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:7px;flex:none}
.mw-note.is-ok{border-color:var(--ok);background:var(--okbg)}
.mw-note.is-ok .mw-note-h{color:var(--ok)}
.mw-note.is-ok .mw-mark{background:var(--ok);color:#fff}
.mw-note.is-hold{border-color:var(--hold);background:var(--holdbg)}
.mw-note.is-hold .mw-note-h{color:var(--hold)}
.mw-note.is-hold .mw-mark{background:var(--hold);color:#fff}
.mw-note.is-no{border-color:var(--no);background:var(--nobg)}
.mw-note.is-no .mw-note-h{color:var(--no)}
.mw-note.is-no .mw-mark{background:var(--no);color:#fff}
.mw-note.is-none .mw-mark{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}

.legend{margin:18px 0 0;padding:15px 17px;background:var(--sunk);border-radius:10px;font-size:.9em}
.legend-h{margin:0 0 10px;font-weight:600;font-size:1em;color:var(--ink)}
.legend dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 11px;margin:0;align-items:center}
.legend dt{margin:0;display:flex}
.legend dd{margin:0;color:var(--muted);line-height:1.45}
.legend dd b{color:var(--ink);font-weight:600;margin-right:3px}
.lg{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px}
.lg.is-ok{background:var(--ok);color:#fff}
.lg.is-hold{background:var(--hold);color:#fff}
.lg.is-no{background:var(--no);color:#fff}

/* ── the pasted-text record ──────────────────────────────────────────────────
   Amber and slate throughout, never red: red belongs to a signature that does
   not fit its message, and lending it to "we have not got enough to say" would
   spend the one colour that must still mean something when it appears. */
.pt-hero{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;margin-top:4px}
@media(min-width:920px){.pt-hero{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}}
.pt-hero-text{padding:26px 24px}
@media(min-width:640px){.pt-hero-text{padding:30px 32px}}
.pt-eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 14px;
  font-size:11.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--hold)}
.pt-eyebrow-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--hold);color:#fff;line-height:1;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700}
.pt-head{margin:0 0 12px;font-size:clamp(21px,2.6vw,28px);line-height:1.22;letter-spacing:-.02em;
  text-wrap:balance}
.pt-lede{margin:0 0 20px;font-size:1.04em;line-height:1.6;color:var(--ink2);max-width:56ch}
.pt-facts{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 18px;
  border-top:1px solid var(--hair)}
@media(min-width:520px){.pt-facts{grid-template-columns:auto minmax(0,1fr)}}
.pt-facts dt{padding:11px 16px 2px 0;font-size:.733em;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;color:var(--faint);border-top:1px solid var(--hair)}
.pt-facts dt:first-of-type{border-top:0}
.pt-facts dd{margin:0;padding:0 0 11px;font-size:1em;font-weight:600;color:var(--ink)}
@media(min-width:520px){
  .pt-facts dt{padding:11px 16px 11px 0}
  .pt-facts dd{padding:11px 0;border-top:1px solid var(--hair)}
  .pt-facts dd:first-of-type{border-top:0}
}
.pt-facts .pt-none{color:var(--hold)}
.pt-note{margin:0 0 20px;font-size:.94em;line-height:1.55;color:var(--muted)}
.pt-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pt-cta button{width:100%}
@media(min-width:520px){.pt-cta button{width:auto}}
.pt-cta-help{margin:0}
.pt-alt{margin:16px 0 0;font-size:.94em;line-height:1.55}
.pt-alt .sub{font-size:1em}

/* The diagram. One idea only: what is here is not what is needed. */
.pt-viz{padding:22px 24px;background:var(--sunk);border-top:1px solid var(--line)}
@media(min-width:920px){.pt-viz{border-top:0;border-left:1px solid var(--line);padding:30px 26px}}
.pt-viz-h{margin:0 0 16px;font-size:.94em;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink2)}
.pt-card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.pt-have{border-color:var(--holdline);background:color-mix(in srgb,var(--holdbg) 60%,var(--panel))}
.pt-need{border-style:dashed}
.pt-card-eyebrow{margin:0 0 6px;font-size:.7em;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--faint)}
.pt-card-name{display:flex;align-items:center;gap:11px;margin:0 0 12px;font-weight:600;font-size:1.02em}
.pt-card-name svg{color:var(--muted);flex:none}
.pt-have .pt-card-name svg{color:var(--hold)}
.pt-rows{width:100%;border-collapse:collapse;font-size:.84em}
.pt-rows td{padding:2px 0;vertical-align:top;border:0;overflow-wrap:anywhere}
.pt-rows td:first-child{color:var(--muted);white-space:nowrap;padding-right:12px;width:1%}
.pt-tag{margin:9px 0 0;font-size:.7em;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--hold)}
.pt-body-lines{display:grid;gap:5px;margin-top:11px}
.pt-body-lines i{height:5px;border-radius:3px;background:var(--line);display:block}
.pt-gap{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0}
.pt-arrow{color:var(--faint)}
.pt-gap p{margin:0;font-size:.8em;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);text-align:center}
.pt-needs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pt-needs li{font-size:.8em;padding:3px 9px;border:1px solid var(--line);border-radius:20px;
  background:var(--sunk);color:var(--ink2)}
.pt-cap{margin:11px 0 0;font-size:.84em;line-height:1.5;color:var(--muted)}

/* Values, not disabled-looking inputs. A tick would assert the one thing this
   page exists to deny, so each card carries a word instead. */
.pvs{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0 0}
@media(min-width:640px){.pvs{grid-template-columns:1fr 1fr}}
.pv{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:var(--raise);min-width:0}
.pv-k{margin:0 0 5px;font-size:.733em;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:var(--faint)}
.pv-v{margin:0;font-size:1em;font-weight:600;color:var(--ink);overflow-wrap:anywhere;line-height:1.4}
.pv-v.pv-empty{font-weight:400;font-style:italic;color:var(--muted)}
.pv-tag{margin:7px 0 0;font-size:.76em;color:var(--muted)}
.pt-edit{border:0;background:transparent;margin-top:14px}
.pt-edit>summary{padding:9px 0;font-size:.94em;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--brand);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.pt-edit>summary::-webkit-details-marker{display:none}
.pt-edit>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform 200ms ease;flex:none}
.pt-edit[open]>summary::before{transform:rotate(45deg)}
.pt-count{margin-left:auto;font-size:.82em;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--muted)}


/* A sent request, opened. The letter is set as the artefact it is rather than as
   more of our prose, and it scrolls inside its own box so a list of requests
   stays a list. */
.rq-letter{border:0;background:transparent;margin:12px 0 0}
.rq-letter>summary{padding:9px 0;font-size:.92em;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--brand);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.rq-letter>summary::-webkit-details-marker{display:none}
.rq-letter>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform 200ms ease;flex:none}
.rq-letter[open]>summary::before{transform:rotate(45deg)}
.rq-letter-body{padding:4px 0 8px;border-top:1px solid var(--hair);margin-top:2px}
.rq-letter-body .letter{max-height:22em}


/* The status field. A fixed place on the page rather than a fixed sentence: the
   verdict lives here, and so does the fact that somebody has been written to.
   Both, when both are true — a request sent yesterday is news that a verdict
   unchanged since last week is not, and a reader who cannot see it comes back a
   week later not knowing whether anything was ever sent. */
.statusfield{display:grid;gap:10px;align-content:start}
.rq-status{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow-tight)}
.rq-status strong{display:block;font-size:1em;line-height:1.25;letter-spacing:-.006em}
.rq-status span{display:block;margin-top:3px;font-size:.9em;line-height:1.45;color:var(--muted)}
.rq-status-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;color:#fff;margin-top:1px}
.rq-status.is-ok{border-color:var(--okline);background:var(--okbg)}
.rq-status.is-ok strong{color:var(--ok)}
.rq-status.is-ok .rq-status-mark{background:var(--ok)}
.rq-status.is-hold{border-color:var(--holdline);background:var(--holdbg)}
.rq-status.is-hold strong{color:var(--hold)}
.rq-status.is-hold .rq-status-mark{background:var(--hold)}
.rq-status.is-none .rq-status-mark{background:var(--muted)}
.rq-status.is-no{border-color:var(--noline);background:var(--nobg)}
.rq-status.is-no strong{color:var(--no)}
.rq-status.is-no .rq-status-mark{background:var(--no)}
/* The receiving server's own words, kept as theirs. A person deciding what to do
   next needs "mailbox does not exist" rather than our word for it. */
.rq-said{margin:0;padding:11px 14px;border-radius:10px;background:var(--sunk);
  border:1px solid var(--line);font-size:.9em;line-height:1.5;color:var(--ink2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.rq-open{margin:0;padding:12px 15px;border-radius:10px;background:var(--okbg);
  border:1px solid var(--okline);font-size:.95em;line-height:1.45}
.rq-open a{font-weight:600}
.rq-open span{display:block;margin-top:3px;font-size:.88em;color:var(--muted);overflow-wrap:anywhere}
.rq-said span{display:block;margin-bottom:4px;font-family:inherit;font-size:.78em;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--faint)}


/* Two panels down the right of a record: the grammar first, the detail under it.
   The reader who only wants to know where they stand stops after the first. */
.rec-right{display:grid;gap:20px;align-content:start;min-width:0}
.rec-right>*{margin-top:0}
.pt-card.is-ok{border-color:var(--okline);background:color-mix(in srgb,var(--okbg) 70%,var(--panel))}
.pt-card.is-ok .pt-card-name svg{color:var(--ok)}
.pt-card.is-no{border-color:var(--noline);background:color-mix(in srgb,var(--nobg) 70%,var(--panel))}
.pt-card.is-no .pt-card-name svg{color:var(--no)}
.pt-card.is-hold{border-color:var(--holdline);background:color-mix(in srgb,var(--holdbg) 60%,var(--panel))}
.pt-card.is-hold .pt-card-name svg{color:var(--hold)}
/* Inside a record's right column the panel is already on white, so the diagram
   drops the tinted ground it uses inside the pasted hero. */
.picture .pt-viz{background:transparent;border:0;padding:0}
.picture .pt-viz-h{font-size:1.12em;font-weight:600;color:var(--ink);margin-bottom:14px}


/* The public request page. Whitespace and type do the hierarchy; only the two
   things a reader acts on sit in a card, so the page reads as one request rather
   than as five explanations. */
.srcpage h1{font-size:clamp(23px,3.2vw,31px);line-height:1.2;margin-bottom:10px;text-wrap:balance}
.srcpage>.panel{margin-top:22px}
.srcnote,.srcwhy,.srcno{margin-top:26px}
.srcnote h2,.srcwhy h2,.srcno h2{font-size:1.06em;margin:0 0 8px}
.srcnote p{margin:0;font-size:1.02em;line-height:1.6;color:var(--ink);
  padding-left:15px;border-left:3px solid var(--line)}
.srcwhy p{margin:0;color:var(--ink2);max-width:64ch}
.srcdo .srcsafe{margin-top:18px;padding:14px 16px;background:var(--sunk);border-radius:10px}
.srcdo .srcsafe p:first-child{margin:0 0 5px}
.srcno{padding-top:22px;border-top:1px solid var(--hair)}
.srcref{margin-top:26px;font-size:.82em;color:var(--faint)}
.srcfwd{margin:0 0 4px}
.srcfwd h3{font-size:1.02em;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 6px}
.srcaddr{margin:12px 0 0;padding:13px 15px;background:var(--sunk);border:1px solid var(--line);
  border-radius:9px;font-size:1em;font-weight:600;color:var(--ink);word-break:break-all;
  user-select:all;-webkit-user-select:all}
.srcdo h3{margin-top:22px}
.srccode{margin:14px 0 0;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:.14em;
  color:var(--ink);word-break:break-all}

/* The machinery, available and not in the way. */
details.tech{margin-top:18px;border:1px solid var(--hair);border-radius:10px;background:var(--raise)}
details.tech>summary{cursor:pointer;padding:15px 20px;font-weight:600;font-size:1em;line-height:1.4;
  list-style:none;display:flex;align-items:center;gap:9px}
details.tech>summary::-webkit-details-marker{display:none}
details.tech>summary::before{content:"▸";color:var(--muted);font-size:0.8em;transition:transform .15s}
details.tech[open]>summary::before{transform:rotate(90deg)}
details.tech>summary:hover{color:var(--brand)}
details.tech>summary:focus-visible{outline:2px solid var(--ok);outline-offset:-2px}
.techbody{padding:0 20px 20px}
@media(max-width:639px){
  .vnext{padding:16px}
  .techbody{padding:0 14px 16px}
  details.tech>summary{padding:13px 14px}
}
/* ── the evidence page ────────────────────────────────────────────────────────
   One shape for every state. What changes between a verified message, a failed
   signature and a message nobody could check is the colour, the mark and the
   words — never the furniture. A reader who has seen one result can read any of
   them, which is the whole reason to have a system rather than six layouts.

   Statuses carry three cues each: a colour, a mark and a word. Colour alone is
   not a cue, and the marks are drawn rather than typed so they survive a font
   that has no glyph for them. */

.ev-status-ok{--ev:var(--ok);--evbg:var(--okbg);--evline:var(--okline)}
.ev-status-hold{--ev:var(--hold);--evbg:var(--holdbg);--evline:var(--holdline)}
.ev-status-no{--ev:var(--no);--evbg:var(--nobg);--evline:var(--noline)}
.ev-status-blue{--ev:var(--info);--evbg:var(--infobg);--evline:var(--infoline)}
.ev-status-other{--ev:var(--other);--evbg:var(--otherbg);--evline:var(--otherline)}
.ev-status-none{--ev:var(--muted);--evbg:var(--sunk);--evline:var(--line)}

/* header ─────────────────────────────────────────────────────────────────── */
.ev-head{margin:0 0 18px}
.ev-back{display:inline-block;margin:0 0 12px;color:var(--muted);text-decoration:none;font-size:13.5px}
.ev-back:hover{color:var(--ink)}
.ev-titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ev-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.ev-title h1{margin:0;font-size:26px;line-height:1.22;letter-spacing:-0.015em;
  overflow-wrap:anywhere}
.ev-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:9px 0 0;color:var(--muted);font-size:12.5px}
.ev-metaitem{display:inline-flex;align-items:center}
.ev-metaitem:not(:last-child)::after{content:"·";color:var(--faint);margin:0 8px}
.ev-count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:500}
.ev-id{font-family:var(--mono);font-size:12px}
.ev-acts{display:flex;gap:8px;flex-wrap:wrap}
.ev-acts a,.ev-acts button{display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:9px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer;
  white-space:nowrap}
.ev-acts a:hover,.ev-acts button:hover{border-color:var(--muted)}
.ev-acts svg{width:15px;height:15px;flex:none}

/* the grid ───────────────────────────────────────────────────────────────── */
.ev-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:start}
.ev-c4{grid-column:span 4}
.ev-c5{grid-column:span 5}
.ev-c6{grid-column:span 6}
.ev-c7{grid-column:span 7}
.ev-c8{grid-column:span 8}
.ev-c12{grid-column:span 12}

.ev-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px;min-width:0}
.ev-card h2{margin:0 0 4px;font-size:16px;letter-spacing:-0.01em}
.ev-card h2 .ev-qual{font-weight:400;color:var(--muted)}

/* the chip ───────────────────────────────────────────────────────────────── */
.ev-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 8px;
  border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;
  color:var(--ev);background:var(--evbg);border:1px solid var(--evline)}
.ev-chip svg{width:14px;height:14px;flex:none}

/* hero ───────────────────────────────────────────────────────────────────── */
.ev-hero{background:var(--evbg);border:1px solid var(--evline);border-radius:14px;
  padding:24px;min-width:0}
.ev-hero-top{display:flex;gap:18px;align-items:flex-start}
.ev-seal{width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ev);color:var(--panel)}
.ev-seal svg{width:28px;height:28px}
.ev-hero-words{min-width:0;flex:1}
.ev-eyebrow{margin:0 0 5px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ev)}
.ev-hero h2{margin:0 0 9px;font-size:24px;line-height:1.22;letter-spacing:-0.02em;color:var(--ink)}
.ev-hero p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.55;max-width:62ch}
.ev-hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:none}
.ev-compound{margin:14px 0 0;font-size:13px;color:var(--ink2);font-weight:500}

/* the facts strip ────────────────────────────────────────────────────────── */
.ev-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  margin:20px 0 0;background:var(--panel);border:1px solid var(--evline);border-radius:11px;
  overflow:hidden}
.ev-fact{padding:15px 10px;text-align:center;border-right:1px solid var(--hair);min-width:0;
  /* A tile is 96px wide at its narrowest and the values in it come from
     somebody else's mailbox — a signing domain, an address, a subject. Without
     this, one long one leaves the tile, then the card, then the screen. */
  overflow-wrap:anywhere}
.ev-fact:last-child{border-right:0}
.ev-fact-ico{display:block;margin:0 auto 9px;color:var(--ink2)}
.ev-fact-ico svg{width:21px;height:21px}
.ev-fact b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.ev-fact span{display:block;margin-top:3px;font-size:11.5px;font-weight:500;color:var(--ev)}
.ev-fact-val{display:block;margin-top:4px;font-size:10.5px;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ev-foot{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:13px 15px;
  border-radius:10px;background:var(--panel);border:1px solid var(--evline);
  font-size:13.5px;color:var(--ink2);line-height:1.5}
.ev-foot svg{width:17px;height:17px;flex:none;color:var(--ev);margin-top:1px}
.ev-foot b{color:var(--ink)}

/* the details card ───────────────────────────────────────────────────────── */
.ev-kv{width:100%;border-collapse:collapse;margin:14px 0 0}
.ev-kv th{text-align:left;vertical-align:top;padding:7px 14px 7px 0;font-weight:500;
  font-size:13px;color:var(--muted);white-space:nowrap;width:1%}
/* A key-value table is already a label beside a value, so it is excluded from
   the rule that turns a table into cards on a phone — card chrome round every
   pair, with a generated label that would be a second, empty one. Excluding it
   is only half the answer: white-space:nowrap on the label was sized against
   "Raw source retained", and a longer one pushes the page sideways on a 320px
   screen with no way for the reader to get it back. Below the seam the label
   goes on its own line and is allowed to wrap. */
@media(max-width:639px){
  /* The same boundary it was taken out of. Excluding it at 639 and replacing the
     layout at 559 left an 80px band where these tables had neither — desktop
     widths with a nowrap label, on a screen too narrow to hold them. */
  .ev-kv th{white-space:normal;width:auto;padding-bottom:1px;display:block}
  .ev-kv td{display:block;padding-top:0;padding-bottom:11px}
  .ev-kv tr+tr th{padding-top:11px;border-top:1px solid var(--hair)}
}
.ev-kv td{padding:7px 0;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere;line-height:1.5}
.ev-kv tr+tr th,.ev-kv tr+tr td{border-top:1px solid var(--hair)}
.ev-kv .ev-claimed{color:var(--hold)}

.ev-atts{margin:18px 0 0;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.ev-atts>summary{display:flex;align-items:center;gap:9px;padding:12px 15px;cursor:pointer;
  font-size:13.5px;font-weight:600;list-style:none;background:var(--raise)}
.ev-atts>summary::-webkit-details-marker{display:none}
.ev-atts>summary svg{width:16px;height:16px;color:var(--muted);flex:none}
.ev-atts>summary:focus-visible{outline:2px solid var(--ok);outline-offset:-2px}
.ev-att{display:flex;gap:11px;padding:12px 15px;border-top:1px solid var(--hair);
  /* flex-start, not center: a filename that wraps to two lines must stay level
     with the size beside it rather than floating in the middle of the row. This
     was declared twice more, earlier in the sheet, and overridden here. */
  flex-wrap:wrap;align-items:flex-start}
.ev-att-ico{color:var(--muted);flex:none;display:grid;place-items:center}
.ev-att-ico svg{width:19px;height:19px}
.ev-att-name{flex:1;min-width:0;font-size:13.5px;overflow-wrap:anywhere}
.ev-att-name em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.ev-att-size{font-size:12px;color:var(--muted);font-family:var(--mono);flex:none}
.ev-att-dl{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;
  border:1px solid var(--line);color:var(--ink)}
.ev-att-dl:hover{border-color:var(--muted)}
.ev-att-dl svg{width:15px;height:15px}
.ev-att-note{padding:11px 15px;border-top:1px solid var(--hair);font-size:12px;
  color:var(--muted);line-height:1.5}

/* the layer notice ───────────────────────────────────────────────────────── */
.ev-notice{background:var(--evbg);border:1px solid var(--evline);border-radius:14px;padding:24px}
.ev-notice-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;
  align-items:start}
.ev-notice-top{display:flex;gap:17px;align-items:flex-start}
.ev-notice h2{margin:0 0 6px;font-size:21px;line-height:1.25;letter-spacing:-0.015em;color:var(--ink)}
.ev-notice-lede{margin:0 0 16px;color:var(--ink2);font-size:14px;line-height:1.55}
.ev-points{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:13px}
.ev-points li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;
  color:var(--ink2)}
.ev-points .ev-mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;margin-top:1px}
.ev-points .ev-mark svg{width:13px;height:13px}
.ev-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ev-cta button,.ev-cta .ev-btn{display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:10px;border:0;background:var(--brand);color:#fff;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.ev-cta button:hover,.ev-cta .ev-btn:hover{filter:brightness(1.08)}
.ev-cta svg{width:16px;height:16px}
.ev-cta form{margin:0}

/* the flow ───────────────────────────────────────────────────────────────── */
.ev-flow{background:var(--panel);border:1px solid var(--evline);border-radius:12px;padding:16px}
.ev-node{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel)}
.ev-node.is-root{border-color:var(--evline);background:var(--evbg)}
.ev-node-ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
  color:var(--ev);background:var(--evbg)}
.ev-node.is-root .ev-node-ico{background:var(--panel)}
.ev-node-ico svg{width:16px;height:16px}
.ev-node-txt{min-width:0}
.ev-node-txt b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.ev-node-txt span{display:block;font-size:12px;color:var(--muted);margin-top:2px;
  overflow-wrap:anywhere;line-height:1.4}
.ev-link{display:flex;align-items:center;gap:9px;padding:7px 0 7px 22px;color:var(--muted);
  font-size:11.5px}
.ev-link i{display:block;width:1px;height:17px;background:var(--line);flex:none;margin-left:4px}
.ev-link.is-dotted i{background:none;
  background-image:linear-gradient(var(--line) 50%,transparent 50%);background-size:1px 5px}
.ev-link svg{width:13px;height:13px;flex:none;margin-left:-11px}

/* can / cannot ───────────────────────────────────────────────────────────── */
.ev-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.ev-list li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;
  color:var(--ink2)}
.ev-list .ev-mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;margin-top:1px}
.ev-list .ev-mark svg{width:13px;height:13px}
.ev-mark{color:var(--panel);background:var(--ev)}
.ev-mark.is-hollow{color:var(--ev);background:var(--evbg);border:1.5px solid var(--ev)}

/* next actions ───────────────────────────────────────────────────────────── */
.ev-next-list{display:flex;flex-direction:column;gap:11px;margin:14px 0 0}
.ev-next-item{display:flex;gap:13px;align-items:center;width:100%;text-align:left;
  padding:14px 15px;border-radius:11px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);text-decoration:none;font:inherit;cursor:pointer}
.ev-next-item:hover{border-color:var(--muted);background:var(--raise)}
.ev-next-item[disabled]{cursor:default;opacity:1}
.ev-next-ico{flex:none;color:var(--muted);display:grid;place-items:center}
.ev-next-ico svg{width:21px;height:21px}
.ev-next-txt{flex:1;min-width:0}
.ev-next-txt b{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.ev-next-txt span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.ev-next-go{flex:none;color:var(--faint)}
.ev-next-go svg{width:16px;height:16px}
.ev-next-item form{margin:0;display:contents}

/* the message body ───────────────────────────────────────────────────────── */
.ev-body{margin:16px 0 0;padding:15px 17px;border-radius:10px;background:var(--sunk);
  border:1px solid var(--hair);font-size:13.5px;line-height:1.6;color:var(--ink2);
  white-space:pre-wrap;overflow-wrap:anywhere;max-height:16em;overflow:auto}
.ev-body.is-hidden{color:var(--muted);font-style:italic;white-space:normal}
.ev-readmore{margin:11px 0 0;font-size:13px}

/* mobile ─────────────────────────────────────────────────────────────────── */
@media(max-width:959px){
  .ev-c4,.ev-c5,.ev-c6,.ev-c7,.ev-c8{grid-column:span 12}
  .ev-notice-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:639px){
  .ev-title h1{font-size:21px}
  .ev-hero{padding:18px}
  .ev-hero h2{font-size:20px}
  .ev-hero-top{gap:14px}
  .ev-seal{width:44px;height:44px}
  .ev-seal svg{width:23px;height:23px}
  .ev-hero-side{flex-direction:row;align-items:center;width:100%;margin:14px 0 0;flex-wrap:wrap}
  .ev-card,.ev-notice{padding:18px}
  .ev-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-fact{border-bottom:1px solid var(--hair)}
  .ev-fact:nth-child(2n){border-right:0}
  .ev-titlerow{flex-direction:column;gap:12px}
  .ev-acts{width:100%}
  .ev-acts a,.ev-acts button{flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0ms!important;animation-duration:0ms!important}}