/* The users' pages' only stylesheet (internal/web), and the operator
   pages' (internal/ops; their few own rules in the last section), served
   same-origin at /assets/site.css so the site CSP (default-src 'self') stays
   as it is; no external font, image or script.

   Taken from the reviewed mockup, docs/design/functional/mockups/
   argus-dbl-mockup.html: its colours, the two font stacks, font sizes,
   spacing, the brand bar, account bar, buttons, form fields, tables,
   banners and the role-of-the-platform footer; the P8-0d UI round's
   colours, sizes, three kinds of text and decoration (docs/design/
   functional/mockups/p8-0d-ui-round.md); the navigation, the Account
   page's sub-navigation, the footers and the dark log-in, sign-up and
   forgot-password pages, whose colours, letter spacing and sea are the
   website's home page's (P8-0e; D0 4.3 items 13, 14). A new page reuses
   these variables and components; changing the look is a change to this
   file. */

:root {
  /* Colours (mockup :root). */
  --ink: #1c1c1c;
  --muted: #595959;
  --hair: #e4e1da;
  --paper: #ffffff;
  --on-gold: #ffffff;
  --field-line: #bdb8ad;
  --quiet-hover: #f5f3ee;
  --row-hover: #fbfaf7;
  --gold: #b98a2e;
  --gold-dark: #9a7122;
  /* Gold text: small text in the gold family, on white or --gold-wash
     (--gold-dark stays for lines and large text; P8-0d 1.2). */
  --gold-ink: #7d5a17;
  --gold-wash: #fbf4e4;
  --gold-line: #e8d6ad;
  --gold-disabled: #e7dcc3;
  --gold-disabled-line: #e0d3b6;
  --gold-disabled-ink: #8c7a55;
  --danger: #b23a2e;
  --danger-wash: #fbecea;
  --danger-line: #efc4bf;
  --ok: #2f6b3a;
  --ok-wash: #e9f3ea;
  --ok-line: #bfd9c3;
  /* Ended dBLs' status (mockup .pill.end). */
  --end-wash: #f0efeb;
  --end-line: #dcd9d1;
  /* The dark pages (log-in, sign-up, forgot password; D0 4.3 item 14): the
     website's home page's navy, cream and gold (argus-dbl-site index.html
     :root), the cream at the label's and the field line's
     strength, and the error card's line. */
  --navy: #1b2a47;
  --navy-deep: #15213a;
  --cream: #f1ece2;
  --cream-2: rgba(241, 236, 226, .72);
  --cream-3: rgba(241, 236, 226, .6);
  --cream-label: rgba(241, 236, 226, .86);
  --cream-line: rgba(241, 236, 226, .18);
  --door-gold: #c9a24a;
  --door-field: #ffffff;

  /* Fonts. */
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* Font sizes. */
  --text: 15px;
  --text-small: 13.5px;
  --text-tiny: 13px;
  --text-button: 13px;
  --text-brand: 15px;
  --text-h1: 26px;
  /* The status block (P8-0d 1.4): the Bill of Lading number, the status. */
  --text-bl: 28px;
  --text-status: 22px;
  --text-h2: 18px;
  --text-micro: 11px;
  /* Form fields on a narrow screen: a phone browser zooms into a field
     whose text is smaller than 16px when it is tapped (P8-0e ⑤). */
  --text-input: 16px;
  /* The dark pages: brand, title, labels, the line under the form, the
     button, the gold line above the title (the home page's .eyebrow). */
  --door-brand: 22px;
  --door-h1: 44px;
  --door-label: 14px;
  --door-text: 15px;
  --door-button: 16px;
  --door-eyebrow: 13px;

  /* Spacing. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 22px;
  --space-7: 28px;
  --space-8: 36px;
  /* Fine spacing inside controls, labels and lists (mockup). */
  --pad-1: 1px;
  --pad-2: 2px;
  --pad-3: 3px;
  --pad-4: 5px;
  --pad-5: 6px;
  --pad-6: 7px;
  --pad-7: 9px;
  --pad-8: 11px;
  --pad-9: 12px;
  --pad-10: 16px;
  /* The page's side gutter and bottom margin (narrow: below --narrow). */
  --gutter: 20px;
  --page-bottom: 60px;
  --page-bottom-narrow: 50px;

  /* Widths and heights. */
  --page-max: 1080px;
  /* The Account page's sub-navigation column. */
  --subnav: 180px;
  /* Every button's least height (a finger's target, P8-0e); on a narrow
     screen every control's and every link standing on its own (P8-0e ⑤).
     A check box or a radio button on a narrow screen. */
  --tap: 44px;
  --check: 20px;
  /* The dark pages: the home page's header width and gutters, the form
     column, its distance from the top, the field and button heights, the
     brand logo, the watermark (width, bleed, opacity) and the gold line. */
  --door-max: 1180px;
  --door-gutter: 64px;
  --door-gutter-narrow: 44px;
  --door-column: 400px;
  --door-top: 72px;
  --door-field-height: 44px;
  --door-button-height: 48px;
  --door-logo: 32px;
  --door-mark: 1180px;
  --door-mark-top: -140px;
  --door-mark-right: -300px;
  --door-mark-opacity: .07;
  --eyebrow-line: 28px;
  --door-radius: 4px;
  --form-max: 420px;
  --wide-form-max: 640px;
  --text-max: 720px;
  --role-max: 820px;
  --facts-label: 150px;
  --search-min: 260px;
  --suggest-height: 190px;
  --legal-height: 360px;
  --legal-box-height: 420px;
  --logo: 18px;
  --count-min: 18px;
  /* The record's dots: an entry's on the line, a resolution's under it. */
  --dot: 10px;
  --dot-top: 12px;
  --dot-small: 6px;
  --dot-small-top: 11px;
  /* The document pages' logo watermark (P8-0d 1.5): its width and how far
     it bleeds off the top right. */
  --watermark: 1000px;
  --watermark-top: -160px;
  --watermark-right: -300px;
  --watermark-opacity: .06;
  /* A reminder chip's info icon. */
  --icon: 15px;
  /* The stepper's narrowest width before it goes under the status. */
  --stepper-min: 340px;

  /* Lines, focus and corners. */
  --line: 1px;
  --line-strong: 2px;
  --line-accent: 3px;
  --underline-offset: 2px;
  --focus-offset: 2px;
  --radius: 3px;
  --radius-count: 9px;
  --radius-pill: 10px;

  /* Breakpoint: narrow screens at 720px and below (the website's home
     page's; P8-0e, was 700px). CSS cannot read a variable inside @media, so
     the @media rules below repeat the value; change them together. */
  --narrow: 720px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--text)/1.5 var(--sans);
}
a { color: var(--ink); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
h1 { font-size: var(--text-h1); line-height: 1.2; margin-bottom: var(--space-5); }
h2 { font-size: var(--text-h2); margin-top: var(--space-7); }
.wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--space-5) var(--gutter) var(--page-bottom); }
/* The whole page, full width: it holds a document page's watermark and
   clips it at the window's edge (P8-0d 1.5). At least the window's height,
   main taking what is left, so on a short page the footer sits at the
   window's bottom (owner 2026-10-17, PR 283 ruling 4). */
.page { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; }
.page > .wrap { flex: 1 0 auto; display: flex; flex-direction: column; }
.page main { flex: 1 0 auto; }
.watermark {
  position: absolute;
  top: var(--watermark-top);
  right: var(--watermark-right);
  z-index: -1;
  width: var(--watermark);
  height: auto;
  opacity: var(--watermark-opacity);
  pointer-events: none;
}
main { margin-top: var(--space-6); }

/* Brand bar: logo and "Argus dBL" on every page (D0 4.3 item 7). */
.brand {
  padding-bottom: var(--space-2);
  border-bottom: var(--line-strong) solid var(--gold);
}
.brand a, .brand .mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: .06em;
  font-size: var(--text-brand);
}
.brand img { width: var(--logo); height: var(--logo); }

/* The navigation after log-in (D0 4.3 item 13): the dBL pages on the
   left, the company, login email, Account and Log out on the right; on a
   narrow screen the two wrap onto two lines (no menu button). The current
   page in bold over a gold line. */
.who {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pad-5) var(--pad-10);
  margin: var(--space-3) 0 0;
  font-size: var(--text-small);
}
.who .co { font-weight: 700; }
.who .mail, .who .sep { color: var(--muted); }
.who form { display: inline; margin: 0; }
.who .nav-main, .who .nav-me { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.who .nav-me { gap: var(--space-1) var(--space-2); }
/* Company and email, Account and Log out: two pairs that wrap as wholes. */
.who .me-id, .who .me-act { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.who a { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.who a.on { text-decoration: none; font-weight: 700; border-bottom: var(--line-strong) solid var(--gold); }
/* The dBL pages in two labelled groups (D0 4.3 item 13; PR 284): INBOUND over
   Inbox · Inbound dBLs, OUTBOUND over Issue New dBL · Outbound dBLs, a line
   between them; the label in the door pages' eyebrow type (uppercase, the
   same letter spacing) one size smaller, in --gold-ink. */
.who { align-items: flex-end; }
.who .nav-main { align-items: stretch; gap: var(--space-1) 0; }
.nav-group { display: flex; flex-direction: column; gap: var(--space-1); }
/* The line between Inbound and Outbound: heavier than a hairline (owner
   2026-10-18, Prime's first round 2; D38). */
.nav-group + .nav-group { margin-left: var(--space-4); padding-left: var(--space-4); border-left: var(--line-strong) solid var(--field-line); }
.nav-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); }
.nav-label { font-size: var(--text-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }

/* The Account page's sub-navigation (D0 4.3 item 13): a column beside the
   account pages' content, the current page in bold with a gold line; on a
   narrow screen a row of tabs above the content that scrolls sideways. */
.acct { display: grid; grid-template-columns: var(--subnav) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.acct-main { min-width: 0; }
.subnav { display: flex; flex-direction: column; border-left: var(--line) solid var(--hair); font-size: var(--text-small); }
.subnav a {
  padding: var(--pad-5) var(--space-4);
  margin-left: calc(-1 * var(--line));
  border-left: var(--line-accent) solid transparent;
  text-decoration: none;
}
.subnav a:hover { background: var(--quiet-hover); }
.subnav a.on { font-weight: 700; border-left-color: var(--gold); }

/* Banners: one line of result or refusal above the content. */
.banner {
  padding: var(--pad-9) var(--space-4);
  border: var(--line) solid var(--gold-line);
  background: var(--gold-wash);
  margin: var(--space-4) 0 var(--space-5);
  max-width: var(--text-max);
}
.banner.ok { background: var(--ok-wash); border-color: var(--ok-line); }
.banner.warn { background: var(--danger-wash); border-color: var(--danger-line); }

/* Buttons. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  border: var(--line) solid var(--gold-dark);
  background: var(--gold);
  color: var(--on-gold);
  font: 600 var(--text-button) var(--sans);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--gold-dark); }
.btn:disabled {
  background: var(--gold-disabled);
  border-color: var(--gold-disabled-line);
  color: var(--gold-disabled-ink);
  cursor: not-allowed;
}
.btn.quiet { background: var(--paper); color: var(--ink); border-color: var(--field-line); }
.btn.quiet:hover { background: var(--quiet-hover); }
.btn.danger { background: var(--paper); color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-wash); }
.btn.sm { padding: var(--pad-4) var(--space-3); font-size: var(--text-tiny); }
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
}
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .linkbtn:focus-visible {
  outline: var(--line-strong) solid var(--gold);
  outline-offset: var(--focus-offset);
}
.actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: var(--space-5) 0 var(--pad-5); }

/* Forms. */
.form { max-width: var(--form-max); }
.f { margin: var(--space-4) 0; }
.f label { display: block; font-weight: 600; font-size: var(--text-button); margin-bottom: var(--pad-4); }
.f input[type=text], .f input[type=email], .f input[type=password], .f input[type=tel], .f select.field {
  width: 100%;
  font: var(--text) var(--sans);
  padding: var(--pad-7) var(--space-3);
  border: var(--line) solid var(--field-line);
  border-radius: var(--radius);
}
.f .rule { margin-top: var(--space-1); }
.links { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-small); margin-top: var(--space-5); }

/* Three kinds of text (P8-0d 1.3; applied page by page in P8-0e). Red is
   for errors only.
   .hint: secondary information one may ignore (an email under a name, a
   file's size, a time, a count, a list's state word such as Unassigned).
   .rule: a sentence of a rule the user needs to know, in ink, not grey:
   what to upload, a limit, a consequence, what to do (D0 4.3 item 18).
   .chip: an inline reminder to act on now (why Accept or Reject cannot be
   used yet): gold wash, gold line, an info icon in --gold-ink, ink text.
   Every rule here that uses --muted, and every word a grey class shows, is
   listed with its reason in TestGreyText. */
.hint { color: var(--muted); font-size: var(--text-small); }
/* An email that did not arrive: a state shown each time the page opens,
   not a one-time banner (M11 3.4 item 8). */
.mail-failed { color: var(--danger); font-size: var(--text-small); }
.rule { color: var(--ink); font-size: var(--text-small); font-weight: 400; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--pad-4) var(--space-3);
  border: var(--line) solid var(--gold-line);
  border-radius: var(--radius);
  background: var(--gold-wash);
  color: var(--ink);
  font-size: var(--text-small);
}
.chip::before {
  content: "i";
  flex: none;
  width: var(--icon);
  height: var(--icon);
  border: var(--line) solid var(--gold-ink);
  border-radius: 50%;
  color: var(--gold-ink);
  font: italic 700 var(--text-tiny)/calc(var(--icon) - 2 * var(--line)) var(--serif);
  text-align: center;
  align-self: center;
}

/* A legal text collapsed to its title line (M14 3.2 item 1), and the
   checkbox under it. */
.legal {
  max-width: var(--text-max);
  margin: var(--space-4) 0;
  border: var(--line) solid var(--hair);
  padding: var(--space-3) var(--space-4);
}
.legal summary { cursor: pointer; font-size: var(--text-button); }
.legal-title { font-family: var(--serif); font-weight: 700; }
.legal-text {
  white-space: pre-wrap;
  font-size: var(--text-small);
  max-height: var(--legal-height);
  overflow-y: auto;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--line) solid var(--hair);
}
/* A legal text in full (the Legal page, a version, a confirmation page):
   one paragraph per block, its line breaks kept (M14 3.2 item 4: plain
   text); on a confirmation page it scrolls in a box above the box to tick. */
.legal-full { max-width: var(--text-max); margin: var(--space-5) 0 var(--space-7); }
.legal-doc { max-width: var(--text-max); font-size: var(--text-small); }
.legal-doc p { white-space: pre-line; margin: 0 0 var(--space-3); }
.legal-box { max-height: var(--legal-box-height); overflow-y: auto; }
.note { white-space: pre-line; max-width: var(--text-max); }
.f.check { display: flex; gap: var(--space-2); align-items: flex-start; }
.f.check label { font-weight: 400; margin: 0; }
.f.check input { margin-top: var(--pad-3); }

/* Tables (lists, from P4-9 on). */
table { width: 100%; border-collapse: collapse; font-size: var(--text-button); }
th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  font-size: var(--text-tiny);
  padding: var(--space-2);
  border-bottom: var(--line-strong) solid var(--gold-line);
}
td { padding: var(--space-3) var(--space-2); border-bottom: var(--line) solid var(--hair); vertical-align: top; }
tr:hover td { background: var(--row-hover); }

td.num { font-family: var(--serif); font-weight: 700; white-space: nowrap; }
td.row-actions { white-space: nowrap; text-align: right; }
form.inline { display: inline; margin: 0 0 0 var(--space-1); }

/* A list's toolbar (search, filters) and page links (D0 4.3 item 3). */
.tools {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-4) 0;
  font-size: var(--text-small);
}
.tools input, .tools select {
  font: var(--text-button) var(--sans);
  padding: var(--pad-6) var(--pad-7);
  border: var(--line) solid var(--field-line);
  border-radius: var(--radius);
  background: var(--paper);
}
.tools input[type=search] { min-width: var(--search-min); flex: 1; }
.tools input, .tools select { max-width: 100%; }
/* A list wider than a narrow screen scrolls sideways, not the page. */
.scroll { overflow-x: auto; }
.pager {
  display: flex;
  gap: var(--pad-5);
  justify-content: flex-end;
  align-items: center;
  margin-top: var(--pad-9);
  font-size: var(--text-small);
  color: var(--muted);
}
/* Rows per page (P8-0e): the size in use in bold ink, the others links. */
.pager .sizes { display: inline-flex; gap: var(--space-2); margin-left: var(--space-3); }
.pager .sizes b { color: var(--ink); }
/* The Inbox's filters in one row (P8-0e); a narrow screen wraps them. */
.tools.one-row { flex-wrap: nowrap; }
.tools.one-row select { min-width: 0; }
/* The dBL details' way back to its list (P8-0e). */
.back-link { margin: 0 0 var(--space-3); font-size: var(--text-small); }
.back-link a::before { content: "\2190\00a0"; }

/* A label on a list row or a fact: invitation state, role mark. */
.pill {
  display: inline-block;
  padding: var(--pad-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-tiny);
  font-weight: 600;
  background: var(--gold-wash);
  border: var(--line) solid var(--gold-line);
  white-space: nowrap;
}

/* Facts: label and value pairs (the account page). */
.facts {
  display: grid;
  grid-template-columns: var(--facts-label) 1fr;
  gap: var(--pad-5) var(--space-4);
  max-width: var(--text-max);
  margin: var(--space-4) 0;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* Every page's footer (layout.html; D0 4.3 items 4, 13): after log-in
   the operator's line with Legal and Support, else the role of the
   platform (master plan principle 2), in ink, right under the content;
   under either the gold-line sea across the page's foot, down to the
   window's bottom (P8-0d 1.5). */
.role, .foot .op {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--line) solid var(--hair);
  color: var(--ink);
  font-size: var(--text-tiny);
  max-width: var(--role-max);
}
.ocean {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--space-6) 0 calc(-1 * var(--page-bottom));
  pointer-events: none;
}

/* A page holding one fixed sentence: maintenance, temporarily unavailable. */
.notice { font-family: var(--serif); font-size: var(--text-h2); max-width: var(--text-max); }

/* The dBL pages (P4-9; mockup Inbox, Inbound dBLs, Outbound dBLs, dBL details). */
.who .count {
  display: inline-block;
  min-width: var(--count-min);
  padding: 0 var(--pad-4);
  margin-left: var(--space-1);
  border-radius: var(--radius-count);
  background: var(--gold);
  color: var(--on-gold);
  font-size: var(--text-micro);
  font-weight: 700;
  text-align: center;
}
/* Inbound dBLs: held now or all handled. */
.seg { display: inline-flex; border: var(--line) solid var(--field-line); border-radius: var(--radius); overflow: hidden; }
.seg a { padding: var(--pad-6) var(--pad-8); text-decoration: none; font-size: var(--text-button); }
.seg a.on { background: var(--gold); color: var(--on-gold); font-weight: 600; }
/* The issue pages' switch, One dBL · In batch (D0 4.2): the same segments. */
.issue-switch { margin: 0 0 var(--space-4); }
.tools label { display: inline-flex; gap: var(--space-1); align-items: center; }
tr.empty:hover td { background: none; }
/* The lists' Found in (M5 3.5): under the empty line, in ink, its place a
   link. */
.found-in { margin: var(--space-2) 0 0; color: var(--ink); }

/* Status labels (M10 part 5): pending gold, valid green, suspended red,
   ended grey. Role labels (M5 3.2; D21): issued by this account gold
   filled, its text --gold-ink; received (holder, destination agent) a gold
   outline with ink text and no fill, told apart by their words (no blue;
   owner 2026-10-17). */
.pill.s-valid { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok); }
.pill.s-suspended { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger); }
.pill.mail-failed { background: var(--danger-wash); border-color: var(--danger-line); color: var(--danger); }
.pill.s-voided, .pill.s-expired { background: var(--end-wash); border-color: var(--end-line); color: var(--muted); }
.pill.r-issuer { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-ink); }
.pill.r-agent, .pill.r-holder { background: transparent; border-color: var(--gold); color: var(--ink); }

/* The dBL pages' status block (P8-0d 1.4), like a parcel tracking page's
   head: the number, the status in large type, the latest step and its
   time; beside it (under it on a narrow screen) the four-stage stepper, a
   reached stage's bar gold, the current one's text in bold. */
.track {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4) var(--space-7);
  padding: var(--space-5) var(--space-6);
  margin: 0 0 var(--space-5);
  background: var(--gold-wash);
  border-left: var(--line-accent) solid var(--gold);
}
.track-main { min-width: 0; }
.track h1 { font-size: var(--text-bl); margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.track-status { margin: 0; font-family: var(--serif); font-size: var(--text-status); font-weight: 600; color: var(--gold-ink); }
.track-status.s-valid { color: var(--ok); }
.track-status.s-suspended { color: var(--danger); }
.track-status.s-voided, .track-status.s-expired { color: var(--muted); }
.track-step { margin: var(--space-1) 0 0; font-size: var(--text-small); overflow-wrap: anywhere; }
.stepper {
  display: flex;
  flex: 1 1 var(--stepper-min);
  max-width: var(--text-max);
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.stepper li {
  flex: 1;
  padding-top: var(--space-2);
  border-top: var(--line-accent) solid var(--gold-line);
  color: var(--muted);
  font-size: var(--text-small);
  white-space: nowrap;
}
.stepper li.done { border-top-color: var(--gold); color: var(--ink); }
.stepper li.on { border-top-color: var(--gold); color: var(--ink); font-weight: 700; }

/* The dBL details: facts, the two PDFs, the actions, the link. */
.times { margin: 0 0 var(--space-4); max-width: var(--text-max); }
.docs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); max-width: var(--text-max); margin-top: var(--space-3); }
.doc { border: var(--line) solid var(--hair); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.doc-title { font-family: var(--serif); font-weight: 700; font-size: var(--text-brand); }
.doc-state { color: var(--ink); font-size: var(--text-small); }
.doc-state.done { color: var(--ok); font-weight: 700; }
.actions form.inline { margin: 0; }
.btn.act-reject, .btn.act-void { background: var(--paper); color: var(--danger); border-color: var(--danger); }
.btn.act-reject:hover, .btn.act-void:hover { background: var(--danger-wash); }
.btn.act-withdraw, .btn.act-endorse { background: var(--paper); color: var(--ink); border-color: var(--field-line); }
.btn.act-withdraw:hover, .btn.act-endorse:hover { background: var(--quiet-hover); }
.btn.act-reject:disabled, .btn.act-accept:disabled {
  background: var(--gold-disabled);
  border-color: var(--gold-disabled-line);
  color: var(--gold-disabled-ink);
}
/* A bank detail on the Billing page with its Copy button, and the sentence
   beside it when the copy is refused (M21 6.1 item 4; billing.js); the
   details page's refused copy says it in the same red (owner 2026-10-22).
   Its label sits level with the value and the button, which is --tap tall
   (owner 2026-10-22). */
.copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.copy .err, .vlink .err { color: var(--danger); font-size: var(--text-small); }
.facts dt:has(+ dd > .copy) { align-self: center; }
.vlink { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-5); max-width: var(--text-max); }
.vlink code {
  flex: 1;
  min-width: 0;
  font-size: var(--text-tiny);
  padding: var(--pad-6) var(--pad-7);
  border: var(--line) solid var(--hair);
  background: var(--row-hover);
  overflow-wrap: anywhere;
}

/* The record (M5 3.4 item 5; M10 3.2 item 5): a line down the left, one dot
   per entry like a parcel tracking list; an offer still pending has a hollow
   dot; its acceptance, rejection, withdrawal or lapse sits under it, and an
   acceptance (someone became the holder) has a filled dot and bold text. An
   endorsement is plain text with its line breaks. */
.rec, .rec-sub { list-style: none; margin: var(--space-2) 0 0; padding: 0; max-width: var(--text-max); }
.rec { border-left: var(--line-strong) solid var(--gold-line); }
.rec > li { position: relative; padding: var(--pad-5) 0 var(--pad-5) var(--pad-10); font-size: var(--text-button); }
.rec > li::before {
  content: "";
  position: absolute;
  left: calc((var(--dot) + var(--line-strong)) / -2);
  top: var(--dot-top);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--gold);
}
.rec > li.pend::before { background: var(--paper); border: var(--line-strong) solid var(--gold); }
.rec-sub > li { position: relative; padding: var(--space-1) 0 var(--space-1) var(--space-4); }
.rec-sub > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--dot-small-top);
  width: var(--dot-small);
  height: var(--dot-small);
  border-radius: 50%;
  border: var(--line) solid currentColor;
}
.rec-sub > li.held { font-weight: 600; }
.rec-sub > li.held::before { background: var(--ok); border-color: var(--ok); }
.rec .when { color: var(--muted); font-size: var(--text-tiny); font-weight: 400; }
/* In the time line, at the line's own size: pending acceptance, a status
   word in ink; a time-stamp still pending, a reminder. */
.rec .when .rule { font-size: inherit; }
.rec .when .chip { padding: 0 var(--space-2); font-size: inherit; }
.rec .endo {
  margin-top: var(--pad-3);
  padding: var(--pad-5) var(--space-2);
  background: var(--row-hover);
  border: var(--line) solid var(--hair);
  font-family: var(--serif);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The verification page (M10 3.2): the status block and the Documents as
   the dBL details'; under them the two SHA-256 values, secondary
   information (.hint), folded under Technical details (a native details,
   closed; owner 2026-10-19), wrap anywhere on a phone; below them the
   time-stamp proof's download, set apart from the two values, and the
   sentence for auditors (M16 3.4 item 4). */
.prints { max-width: var(--text-max); margin: var(--space-4) 0; }
.prints summary { cursor: pointer; margin-bottom: var(--space-1); }
.prints summary:focus-visible { outline: var(--line-strong) solid var(--gold); outline-offset: var(--focus-offset); }
.prints p { margin: 0 0 var(--space-1); }
.prints code { font-size: var(--text-tiny); overflow-wrap: anywhere; }
.prints .proof { margin-top: var(--space-2); }

/* A line between two parts of a page (the Account page's login email
   change, owner 2026-10-18). */
.divider { margin: var(--space-6) 0 var(--space-5); border: 0; border-top: var(--line) solid var(--hair); max-width: var(--form-max); }

/* The public lookup (M10 part 6): the answer under the form, in the dBL
   pages' status block look, its title in the status type. */
.lookup-result {
  max-width: var(--form-max);
  margin: var(--space-5) 0 0;
  padding: var(--space-5) var(--space-6);
  background: var(--gold-wash);
  border-left: var(--line-accent) solid var(--gold);
}
.lookup-result h2 { margin: 0; font-family: var(--serif); font-size: var(--text-status); font-weight: 600; color: var(--gold-ink); }

/* The issue page's band (M5 3.5; D21): the one page that creates a dBL,
   in the reminder chip's colours, the row as wide as before (no blue;
   owner 2026-10-17). */
.band {
  margin: calc(-1 * var(--space-6)) 0 var(--space-5);
  padding: var(--space-3) var(--gutter);
  background: var(--gold-wash);
  border: var(--line) solid var(--gold-line);
  color: var(--ink);
  font: 600 var(--text-button) var(--sans);
  letter-spacing: .02em;
}

/* The issue page (P4-4; mockup "Issue a dBL"): the recipient group, the
   contact suggestions under the company field, each file's status, a
   field's own refusal. */
.issue { max-width: var(--wide-form-max); }
.issue fieldset { border: 0; margin: 0; padding: 0; }
.issue legend { font-family: var(--serif); font-weight: 600; font-size: var(--text-h2); margin-top: var(--space-5); }
.f .err { color: var(--danger); font-size: var(--text-small); margin-top: var(--space-1); }
.f.bad input { border-color: var(--danger); }
.f input[type=file] { font: var(--text) var(--sans); max-width: 100%; }
.sug { position: relative; }
.sug-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  margin: 0; padding: 0; list-style: none;
  background: var(--paper); border: var(--line) solid var(--field-line); border-top: 0;
  max-height: var(--suggest-height); overflow: auto;
}
.sug-list button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: var(--space-2) var(--space-3); border: 0; border-bottom: var(--line) solid var(--hair);
  background: var(--paper); font: var(--text) var(--sans); color: var(--ink);
}
.sug-list button:hover, .sug-list button:focus-visible { background: var(--gold-wash); }
.sug-list .e { display: block; color: var(--muted); font-size: var(--text-tiny); }
.st { color: var(--muted); font-size: var(--text-small); margin-top: var(--space-1); }
.st.ok { color: var(--ok); font-weight: 600; }
.st.bad { color: var(--danger); font-weight: 600; }

/* The transfer, reissue, endorsement and void pages (P4-10): the transfer
   and the reissue are .issue forms; the heading the endorsement will carry,
   its text box and count (.st); the void's reasons, and its button, which
   looks and works as disabled until the reason, the tick and the number
   are given (M8 E1: the browser does not submit an invalid form). */
.endorse, .void { max-width: var(--wide-form-max); }
.entry-head { margin: var(--space-5) 0; padding: var(--space-3) var(--space-4); border-left: var(--line-accent) solid var(--gold-line); background: var(--row-hover); }
.entry-head .what { font-weight: 600; }
.f textarea {
  width: 100%;
  font: var(--text) var(--serif);
  padding: var(--pad-7) var(--space-3);
  border: var(--line) solid var(--field-line);
  border-radius: var(--radius);
  resize: vertical;
}
.f.bad textarea { border-color: var(--danger); }
.choices { border: 0; margin: var(--space-4) 0; padding: 0; }
.choices legend { font-weight: 600; font-size: var(--text-button); margin-bottom: var(--pad-4); padding: 0; }
.choices label { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-1) 0; }
/* The Notifications page's modes (P5-4): each with its line under it, the
   Digest's frequency under its line. */
.choices .opt { margin: var(--space-3) 0; }
.choices .opt .hint { margin-left: var(--space-5); }
.choices .opt .f { margin: var(--space-2) 0 0 var(--space-5); }
.f select { font: var(--text) var(--sans); padding: var(--pad-4) var(--space-3); max-width: 100%; }
form.void:invalid .btn[type=submit] {
  background: var(--gold-disabled);
  border-color: var(--gold-disabled-line);
  color: var(--gold-disabled-ink);
  cursor: not-allowed;
  pointer-events: none;
}
/* The batch issue page (P4-16, P8-0i; batch part 5): the batch's back page
   box, the rows table with a field in each cell (fixed layout, so the page
   never scrolls sideways; long names wrap; the fields as wide as their
   columns), each file box a button over a native file input with the
   file's name and state beside it (the issue page's two boxes too, the
   "filePick" fragment; Prime's second round 2), the rows that follow the
   row above (Same recipient as above: read only, greyed), a row asking
   before its Delete (its question and two buttons over its cells but its
   number; D0 4.3 item 9), and the Review's rows not ready. */
.hide { position: absolute; width: var(--pad-1); height: var(--pad-1); overflow: hidden; clip-path: inset(50%); }
table.brows { table-layout: fixed; margin: var(--space-4) 0; }
table.brows th.c-n, table.brows td.c-n { width: 3.2em; }
table.brows th.c-file { width: 20%; }
table.brows th.c-act { width: 4.5em; }
.brows .f { margin: 0; }
.file-pick { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }
/* .file-pick .file-btn, not .file-btn: inside a field (.f) the field's
   ".f label" (display: block, a bottom margin) would win and lift the
   button's words to its top (the batch back box since P8-0i). */
.file-pick .file-btn { position: relative; display: inline-flex; align-items: center; margin: 0; padding: var(--pad-4) var(--space-3); font-size: var(--text-tiny); }
.file-btn:focus-within { outline: var(--line-strong) solid var(--gold); outline-offset: var(--line-strong); }
.file-name { font-size: var(--text-small); }
.file-pick .st { margin-top: 0; }
.back-file { margin: var(--space-4) 0; }
.back-file > label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.same-above { display: flex; gap: var(--space-1); align-items: center; margin-top: var(--space-1); font-size: var(--text-tiny); }
.brows .f input[readonly] { background: var(--quiet-hover); color: var(--muted); }
.review-back { margin: var(--space-2) 0 0; }
.brows .f input { width: 100%; padding: var(--pad-5) var(--space-2); font: var(--text-button) var(--sans);
  border: var(--line) solid var(--field-line); border-radius: var(--radius); }
.brows .err, .batch .err { color: var(--danger); font-size: var(--text-small); margin-top: var(--space-1); }
.brows .issue-to { margin: var(--space-2) 0 0; padding: var(--space-2); font-size: var(--text-tiny); overflow-wrap: anywhere; }
.brows .sug-list { min-width: 16em; right: auto; }
.brows .hint { margin-top: var(--space-1); font-size: var(--text-tiny); }
.brows td.row-actions { white-space: normal; text-align: left; }
.brows td.row-actions .linkbtn { display: block; margin-bottom: var(--space-1); text-align: left; }
.brows tr.bad td { background: var(--danger-wash); }
.brows td.row-confirm { vertical-align: middle; }
.confirm-q { font-weight: 600; margin-right: var(--space-3); }
.confirm-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.wrap-any { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }


/* Review selected (P4-17; batch part 4): the Inbox's boxes and button; the
   page's heading with where it stands, Skip and Exit set apart from Accept
   and Reject. */
.pick { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; margin: 0 0 var(--space-3); }
.pick-all { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--text-small); }
th.pick-cell, td.pick-cell { width: 1.6em; }
.pick-cell input { margin: var(--pad-3) 0 0; }
/* A row's box sits in a label, a finger's target on a narrow screen. */
.pick-hit { display: inline-flex; }
.review-head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; }
.review-head .progress { color: var(--muted); font-size: var(--text-small); font-weight: 600; }
.review h2 { margin-top: 0; font-family: var(--serif); overflow-wrap: anywhere; }
/* An acceptance or rejection not yet posted, where its buttons were (batch
   4.3): its line, then Undo · Next. */
.pending { margin: 0; font-weight: 600; }
.pending .linkbtn { font-weight: 600; }
.review-nav { border-top: var(--line) solid var(--hair); padding-top: var(--space-4); }

/* The log-in, sign-up and forgot-password pages (D0 4.3 item 14: outside
   dark, inside light), the website's home page's look: the navy
   gradient over the whole page, the logo bleeding off the top right, the
   brand and one link at the top, one column with the gold line above the
   title, white fields, the gold button, and the website's dotted sea across
   the foot with the footer over it, aligned left. A refusal or a result is
   a light card with a coloured line on the left, readable on the navy. */
body.door { background: var(--navy-deep); color: var(--cream); }
.door-page {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy) 100%);
}
.door-mark {
  position: absolute;
  top: var(--door-mark-top);
  right: var(--door-mark-right);
  z-index: -1;
  width: var(--door-mark);
  height: auto;
  opacity: var(--door-mark-opacity);
  pointer-events: none;
}
.door-sea { position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: auto; pointer-events: none; }
.door-top, .door-foot { width: min(var(--door-max), 100% - var(--door-gutter)); margin: 0 auto; }
.door-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding-top: var(--space-8); }
.door-brand { display: flex; align-items: center; gap: var(--pad-9); text-decoration: none; }
.door-brand img { width: var(--door-logo); height: var(--door-logo); flex: none; }
.door-brand span { font: 700 var(--door-brand) var(--serif); letter-spacing: .01em; color: var(--cream); }
.door-link { font-size: var(--door-text); color: var(--cream-2); text-decoration: none; white-space: nowrap; }
.door-link:hover { color: var(--cream); }
.door-main {
  /* Takes what is left, so the footer sits at the window's bottom. */
  flex: 1 0 auto;
  width: min(var(--door-column), 100% - var(--door-gutter-narrow));
  margin: var(--door-top) auto 0;
  /* The form stays above the sea (1440×360: a quarter of the width tall). */
  padding-bottom: max(var(--page-bottom), calc(25vw - 2 * var(--page-bottom)));
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: var(--door-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--door-gold);
}
.eyebrow::before { content: ""; flex: none; width: var(--eyebrow-line); height: var(--line); background: var(--door-gold); }
.door h1 { font: 700 var(--door-h1)/1.1 var(--serif); color: var(--cream); margin: 0 0 var(--space-7); }
.door a { color: var(--cream); }
.door .form { max-width: none; }
.door .f label { font-size: var(--door-label); font-weight: 400; color: var(--cream-label); }
.door .f input[type=text], .door .f input[type=email], .door .f input[type=password], .door .f input[type=tel],
.door .f select.field {
  height: var(--door-field-height);
  padding: 0 var(--pad-9);
  background: var(--door-field);
  border: var(--line) solid var(--cream-line);
  border-radius: var(--door-radius);
  color: var(--ink);
}
.door .f-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--pad-4); }
.door .f-head label { margin: 0; }
.door .f-head a { font-size: var(--door-label); color: var(--cream-2); text-underline-offset: var(--underline-offset); }
.door .actions { margin-top: var(--space-6); }
.door .btn {
  width: 100%;
  min-height: var(--door-button-height);
  border: 0;
  border-radius: var(--door-radius);
  background: var(--door-gold);
  color: var(--navy-deep);
  font: 700 var(--door-button) var(--sans);
}
.door .btn:hover { background: var(--door-gold); filter: brightness(1.08); }
.door-alt, .door .links { font-size: var(--door-text); color: var(--cream-2); }
.door-alt a, .door .links a { color: var(--cream); text-decoration: underline; text-underline-offset: var(--underline-offset); }
.door .banner { border: 0; border-left: var(--line-accent) solid var(--door-gold); background: var(--gold-wash); color: var(--ink); }
.door .banner.warn { border-left-color: var(--danger); background: var(--danger-wash); }
.door .banner.ok { border-left-color: var(--ok); background: var(--ok-wash); }
/* The sign-up page's consent: its title line and, opened, its full text in
   light colours on the navy (owner 2026-10-17, PR 283 ruling 5). */
.door .legal { border-color: var(--cream-line); color: var(--cream-label); }
.door .legal summary, .door .legal-title { color: var(--cream); }
.door .legal-text { color: var(--cream-label); border-top-color: var(--cream-line); }
.door .f.check label { color: var(--cream-label); }
.door a:focus-visible, .door input:focus-visible, .door select:focus-visible, .door .btn:focus-visible { outline-color: var(--door-gold); }
.door-foot { padding-bottom: var(--space-7); font-size: var(--text-small); color: var(--cream-3); }
.door-foot .role { margin: 0 0 var(--space-2); padding: 0; border: 0; color: var(--cream-3); font-size: var(--text-small); }
.door-foot .op { margin: 0; }
.door-foot .op a { color: var(--cream-2); text-decoration: none; }
.door-foot .op a:hover { color: var(--cream); }

/* Narrow screens: var(--narrow). After every rule but print, so it overrides
   them. */
@media (max-width: 720px) {
  .wrap { padding: var(--space-4) var(--space-4) var(--page-bottom-narrow); }
  .acct { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .subnav { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: var(--line) solid var(--hair); }
  .subnav a { white-space: nowrap; margin: 0 0 calc(-1 * var(--line)); border-left: 0;
    border-bottom: var(--line-accent) solid transparent; padding: var(--space-3); }
  .subnav a.on { border-bottom-color: var(--gold); }
  /* The dark pages: the home page's narrow gutters, the column nearer the top. */
  .door-top, .door-foot { width: calc(100% - var(--door-gutter-narrow)); }
  .door-top { padding-top: var(--space-6); }
  .door-main { margin-top: var(--space-8); }
  .ocean { margin-bottom: calc(-1 * var(--page-bottom-narrow)); }
  .form { max-width: none; }
  .facts { grid-template-columns: 1fr; }
  .tools input[type=search] { min-width: 0; }
  .tools.one-row { flex-wrap: wrap; }
  /* The navigation's labels and line hidden; the links wrap as one row. */
  .nav-label { display: none; }
  .nav-group, .nav-links { display: contents; }
  .who .nav-main { gap: var(--space-1) var(--space-4); }
  /* A list table (table.list) becomes cards: one card per row, each cell
     under its column's name, given by the cell's data-label (M5 3.5;
     mockup .cards); any list page that marks its table so folds the same
     (P8-0e). */
  table.list thead { display: none; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list tr { border: var(--line) solid var(--hair); padding: var(--space-3); margin: var(--space-3) 0; }
  table.list td { border: 0; padding: var(--pad-2) 0; }
  table.list td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font: 400 var(--text-tiny) var(--sans);
  }
  table.list td.row-actions { text-align: left; padding-top: var(--space-2); }
  .docs { grid-template-columns: 1fr; }
  .band { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4); padding: var(--space-3) var(--space-4); }
  /* Review selected (P4-17, below): the box under its card's top. */
  table.list td.pick-cell { padding-bottom: var(--space-1); }

  /* Phones (P8-0e ⑤): one column, nothing wider than the screen (only the
     Account page's tabs scroll sideways), and every control, and every link
     standing on its own, at least --tap tall; a link inside a sentence
     stays as it is. */
  /* The navigation in two lines: the dBL pages, then the company, Account
     and Log out; no login email and no dots, so a wrapped line never
     starts with one (owner 2026-10-18, PR 285 ruling 1). */
  .who .sep, .who .mail { display: none; }
  .who .nav-me { gap: 0 var(--space-4); }
  .who .me-act { gap: 0 var(--space-4); }
  .who a, .who .linkbtn { display: inline-flex; align-items: center; min-height: var(--tap); }
  .subnav a { display: flex; align-items: center; min-height: var(--tap); }
  .seg a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .page .links a, .back-link a, .foot .op a, .facts dd > div > a, table.list td a:not(.btn), table.list .linkbtn,
  .pager .sizes a, .pager .sizes b {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }
  .pager { flex-wrap: wrap; }
  .pager .sizes { align-items: center; }
  .pager .sizes a, .pager .sizes b { justify-content: center; min-width: var(--tap); }
  /* Fields: a finger's height, text at --text-input. */
  .f input[type=text], .f input[type=email], .f input[type=password], .f input[type=tel], .f select, .tools input, .tools select,
  .brows .f input {
    min-height: var(--tap);
    font-size: var(--text-input);
  }
  .f textarea { font-size: var(--text-input); }
  .f input[type=file]::file-selector-button { min-height: var(--tap); }
  input[type=checkbox], input[type=radio] { width: var(--check); height: var(--check); }
  .choices label, .f.check, .pick-all { min-height: var(--tap); }
  .f.check { align-items: center; }
  .f.check input { margin-top: 0; flex: none; }
  td.pick-cell .pick-hit { align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); }
  td.pick-cell .pick-hit input { margin: 0; }
  /* A list's search and filters: each control a whole row. */
  .tools > * { flex: 1 1 100%; }
  .tools label { display: flex; }
  .tools label input[type=date] { flex: 1; }
  /* A page's buttons: each a whole row. */
  .actions > * { flex: 1 1 100%; }
  .actions .btn { width: 100%; }
  /* A card: no empty line; its buttons apart. */
  table.list td:empty { display: none; }
  table.list td.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  table.list td.row-actions form.inline { margin: 0; }
  /* The batch page's cards: the row number as wide as the card; Delete,
     the file buttons and the Same recipient as above box a finger's
     height. */
  table.list td.c-n { width: 100%; }
  .brows td.row-actions .linkbtn { display: flex; margin: 0; }
  .file-btn, .same-above { min-height: var(--tap); }
  .confirm-q { display: block; margin: 0 0 var(--space-2); }
  .confirm-actions { display: flex; }
  .confirm-actions > .btn { flex: 1 1 100%; }
  /* The dBL pages: the status block's padding, a stage's name that wraps
     (Transferred ×n), the verification link under its label. */
  .track { padding: var(--space-4); }
  .stepper li { white-space: normal; }
  .vlink code { flex-basis: 100%; }
  .prints summary { line-height: var(--tap); }
}

/* Print (P8-0d 1.6), every page: no navigation, account bar, watermark,
   footer sea, buttons or form controls; the role of the platform stays;
   the page as wide as the paper. The dBL details and a guest's dBL page
   keep the status block, the facts and the record, the Documents only
   their names. The verification page keeps the status block, the facts,
   the Documents' names, the two SHA-256 values (shown even while
   Technical details is closed, without its summary line) and the record;
   the values and the witness sentence are not split across pages. */
@media print {
  .who, .subnav, .watermark, .ocean, .btn, button, .linkbtn, form, input, select, textarea, .actions, .back-link,
  .f.check, .consent-read, .doc .hint, .doc-state { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  main { margin-top: 0; }
  .page { min-height: 0; }
  .track, .rec > li, .doc, .prints, .witnessed { break-inside: avoid; }
  .prints > summary { display: none; }
  .prints::details-content { content-visibility: visible; display: block; }
}

/* ops: the operator pages (internal/ops; owner 2026-10-18) use the classes
   above, and only these rules of their own. The brand bar carries
   "Operator tools" on its right, in grey. A field whose label is around it
   (the second TOTP's, which a page repeats on several forms) sits under its
   label. A long value (a SHA-256, a key id, an action's parameters) breaks
   inside its cell instead of widening the page. The evidence choices and a
   text box in focus are gold, never the browser's blue. The authenticator
   set-up's three steps are a numbered list, and its key is folded under a
   line that reads as a link (owner 2026-10-18). */
.ops .brand { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.ops-tag { color: var(--muted); font-size: var(--text-tiny); }
.ops .f label > input, .ops .f label > select { display: block; margin-top: var(--pad-4); font-weight: 400; }
.ops td code, .ops .choices code { overflow-wrap: anywhere; }
.ops input[type=radio] { accent-color: var(--gold); }
.ops textarea:focus-visible { outline: var(--line-strong) solid var(--gold); outline-offset: var(--focus-offset); }
.ops .totp-steps { max-width: var(--text-max); margin: var(--space-3) 0; padding-left: var(--space-7); }
.ops .totp-key { margin: var(--space-3) 0; }
.ops .totp-key summary { cursor: pointer; color: var(--gold-ink); text-decoration: underline; }
.ops .totp-key code { overflow-wrap: anywhere; }
/* The account page's actions with the second TOTP: a list of closed
   details, each the action's name; its form shows when it is opened, and
   the form a refused second TOTP came from is shown open (M19 3.1; owner
   2026-10-20). */
.ops .op-action { border-bottom: var(--line) solid var(--hair); }
.ops :not(.op-action) + .op-action { margin-top: var(--space-5); border-top: var(--line) solid var(--hair); }
.ops .op-action summary { cursor: pointer; padding: var(--space-3) 0; font-family: var(--serif); font-weight: 600; }
.ops .op-action summary:focus-visible { outline: var(--line-strong) solid var(--gold); outline-offset: var(--focus-offset); }
.ops .op-action > .form, .ops .op-action > p { margin-bottom: var(--space-5); }