/* Standing: the visual system of the designer's reference (docs/design/ux-reference/, section 4; J42, J45, J46),
   applied in SKIN-1 over the components of batch 1, 4.2. One stylesheet, served by Standing itself; nothing is loaded
   from outside (batch 2, section 0). Light mode by default, following the device; a founder's appearance forces light
   or dark (html data-appearance). Five roles of colour, each with its word: act, late, wait, stand, new. The colours'
   names never reach the screen. No corner, no shadow. */

/* 1 · Tokens: three surfaces, the inks, the hairlines, the saddle, the five roles (reference, section 4). */
:root {
  --paper: #F1EDE6;
  --panel: #FAF8F4;
  --field: #FFFFFF;
  --line: #CFC5B8;
  --line-strong: #8F867B;
  --ink: #16171A;
  --ink-2: #585B61;
  --saddle: #95552F;
  --act: #FF5A1F;      --act-fill: #FF5A1F;   --act-text: #A33A0E;
  --late: #A62126;     --late-fill: #F3D9D8;  --late-text: #A62126;
  --wait: #8A6500;     --wait-fill: #F2E4B8;  --wait-text: #6F5100;
  --stand: #2F6B3F;    --stand-fill: #D9E8D9; --stand-text: #2A5E38;
  --new: #2D5B8E;      --new-fill: #D9E4F1;   --new-text: #2A4F7A;
  --on-act: #16171A;
  --focus: #16171A;
  --shade: rgb(22 23 26 / 6%);
  color-scheme: light;
}

/* Dark mode: the reference's dark tokens (deviation 21). */
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    --paper: #121315; --panel: #1A1B1E; --field: #202226; --line: #3B3D42; --line-strong: #6B6E74;
    --ink: #ECE7DF; --ink-2: #A7AAAF; --saddle: #C4825C;
    --act-text: #FF8A5C; --late-fill: #4A1E20; --late-text: #F29A9A;
    --wait-fill: #46380C; --wait-text: #E8C65A; --stand-fill: #1E3A26; --stand-text: #8FD19B;
    --new-fill: #1E3047; --new-text: #8FB8E8; --focus: #ECE7DF; --shade: rgb(236 231 223 / 8%);
    color-scheme: dark;
  }
}
:root[data-appearance="dark"] {
  --paper: #121315; --panel: #1A1B1E; --field: #202226; --line: #3B3D42; --line-strong: #6B6E74;
  --ink: #ECE7DF; --ink-2: #A7AAAF; --saddle: #C4825C;
  --act-text: #FF8A5C; --late-fill: #4A1E20; --late-text: #F29A9A;
  --wait-fill: #46380C; --wait-text: #E8C65A; --stand-fill: #1E3A26; --stand-text: #8FD19B;
  --new-fill: #1E3047; --new-text: #8FB8E8; --focus: #ECE7DF; --shade: rgb(236 231 223 / 8%);
  color-scheme: dark;
}

/* Type: size as hierarchy (deviation 11); spacing in 4 px units; gutters; widths (content 680, rail 320, 48 apart). */
:root {
  --grotesque: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: Georgia, "Times New Roman", serif;
  --t-display: 24px;
  --t-title: 24px;
  --t-section: 18px;
  --t-lead: 17px;
  --t-small: 14px;
  --t-label: 11.5px;
  --t-mono: 13.5px;
  --u: 4px;
  --gutter: 16px;
  --content: 680px;
  --rail: 320px;
  --rail-gap: 48px;
  --target: 44px;
  --bar: 56px;
}
@media (min-width: 1024px) {
  :root { --t-display: 32px; --t-title: 30px; --t-section: 20px; --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; box-shadow: none; text-shadow: none; }

html { background: var(--paper); color: var(--ink); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesque);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  padding-bottom: calc(var(--bar) + 16px);
}
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* The focus ring: 2 px, 2 px outside, in ink, on every focusable element; never removed (batch 1, 4.5). */
:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--saddle); }
strong, b { font-weight: 600; }

/* Type roles. */
.page-title { font-size: var(--t-title); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 calc(6 * var(--u)); text-wrap: balance; }
.display { font-size: var(--t-display); font-weight: 600; line-height: 1.2; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.display .display-id { display: block; font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-bottom: var(--u); }
.section-heading, .section { font-size: var(--t-section); font-weight: 600; line-height: 1.25; margin: calc(8 * var(--u)) 0 calc(3 * var(--u)); }
.lead { font-size: var(--t-lead); line-height: 1.45; }
.secondary, .sub { font-size: var(--t-small); color: var(--ink-2); }
.label {
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
h2.label, h3.label, .field > label, .choice > legend, .field-label { color: var(--ink-2); }
.mono, .mono-id { font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; }
.clock { font-family: var(--mono); font-size: var(--t-mono); white-space: nowrap; }
.the-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.failed { color: var(--late-text); }
.visually-hidden, .vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fine { font-size: var(--t-small); color: var(--ink-2); margin: 0; }

/* The page shell: skip link, header, main, foot, the phone's bottom bar. */
.skip {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--ink);
  padding: calc(3 * var(--u)) calc(4 * var(--u)); min-height: var(--target); z-index: 30;
}
.skip:focus { top: var(--u); }
.frame { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1024px) {
  .frame { max-width: calc(var(--content) + var(--rail-gap) + var(--rail) + 2 * var(--gutter)); }
  .columns { display: grid; grid-template-columns: var(--content) var(--rail); column-gap: var(--rail-gap); }
}
main { padding: calc(4 * var(--u)) 0 calc(8 * var(--u)); }
@media (min-width: 1024px) { main { padding-top: calc(8 * var(--u)); } }
.content { max-width: var(--content); }
.foot { padding: calc(6 * var(--u)) 0; border-top: 1px solid var(--line); }
.foot p { margin: 0; }

/* The header, 52 px on a phone: the name and the founder (deviation 2). On a laptop: the tabs with the Decide count,
   the Ask box in the centre, the founder's first name opening the menu (J19, J46). */
.header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.header-grid { display: flex; align-items: center; gap: calc(3 * var(--u)); min-height: 51px; } /* 52 px with its hairline */
.header-name { display: inline-flex; align-items: center; gap: calc(2 * var(--u)); min-height: var(--target); text-decoration: none; color: var(--ink); white-space: nowrap; }
.header-name .label { font-size: 11px; }
.header-who { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--target); min-width: var(--target); justify-content: flex-end; text-decoration: none; }
.header-menu { position: relative; }
.header-reduced .header-grid { justify-content: flex-start; }
.top-nav, .header-ask, .header-menu { display: none; }
@media (min-width: 1024px) {
  .header-grid { gap: calc(6 * var(--u)); min-height: 56px; }
  .top-nav { display: flex; gap: var(--u); }
  .top-nav a {
    display: inline-flex; align-items: center; gap: calc(2 * var(--u)); min-height: 56px; padding: 0 calc(3 * var(--u));
    text-decoration: none; color: var(--ink); border-bottom: 2px solid transparent;
  }
  .top-nav a[aria-current="page"] { border-bottom-color: var(--saddle); }
  .header-ask { display: flex; flex: 1 1 320px; max-width: 460px; margin-left: auto; }
  .header-ask .ask-box { flex: 1; display: flex; }
  .header-ask input { width: 100%; }
  .header-who { display: none; }
  .header-menu { display: block; }
}

/* The Ask box (deviation 1; A6): one field; until SKIN-2 it submits to the search. */
.ask-box input, .search-page input {
  width: 100%; min-height: var(--target); min-width: 0;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--field); border: 1px solid var(--line-strong);
  padding: 0 calc(3 * var(--u));
}

/* The phone's bottom bar: Waiting with the Decide count, Book, Ask in the centre, Actions, More (deviation 2). */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--target); min-width: var(--target); text-decoration: none; color: var(--ink);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-top: 2px solid transparent;
}
.bar a[aria-current="page"] { border-top-color: var(--saddle); }
.bar .count-mark { height: 20px; min-width: 20px; font-size: 12px; line-height: 20px; }
.bar .glyph { font-family: var(--serif); font-size: 18px; line-height: 1; text-transform: none; }
@media (min-width: 1024px) { .bar { display: none; } }

/* The menu: a native details element (J19), on a laptop. */
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); min-width: var(--target); padding: 0 calc(2 * var(--u));
}
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: 100%; z-index: 21;
  min-width: 15rem; margin: 0; padding: 0; list-style: none;
  background: var(--panel); border: 1px solid var(--line-strong);
}
.menu-list li + li { border-top: 1px solid var(--line); }
.menu-list a, .menu-list button {
  display: flex; align-items: center; width: 100%; min-height: var(--target);
  padding: 0 calc(4 * var(--u)); color: var(--ink); text-decoration: none;
  font: inherit; background: none; border: 0; cursor: pointer; text-align: left;
}
.menu-list form { margin: 0; }

/* Header states: break-glass band, expiry line. */
.header-band, .header-expiry { padding: calc(2 * var(--u)) 0; border-bottom: 1px solid var(--line); background: var(--panel); }
.header-band p, .header-expiry p { margin: 0 auto; }

/* The Decide count: the act fill, ink figures, mono, once per screen (deviation 22). */
.count-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); min-width: var(--target); text-decoration: none; }
.count-mark {
  display: inline-block; height: 22px; min-width: 22px; padding: 0 6px;
  background: var(--act-fill); color: var(--on-act);
  font-family: var(--mono); font-size: var(--t-small); font-weight: 600; line-height: 22px; text-align: center; letter-spacing: 0;
}

/* Buttons: 44 px; primary in ink on paper; secondary outlined; quiet a text link. Disabled: 45% and a reason. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(2 * var(--u));
  min-height: var(--target); min-width: var(--target);
  padding: 0 calc(4.5 * var(--u));
  font-family: var(--grotesque); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--ink); color: var(--ink); background: transparent;
}
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { color: var(--paper); }
.btn-primary:active { opacity: 0.85; }
.btn-secondary { background: transparent; color: var(--ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.btn-quiet {
  display: inline-flex; align-items: center; min-height: var(--target);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
}
.btn + .btn-quiet { margin-left: calc(6 * var(--u)); }
.quiet-done { display: inline-flex; align-items: center; min-height: var(--target); }
.disabled-reason { margin: calc(2 * var(--u)) 0 0; }
@media (max-width: 599px) {
  .btn { width: 100%; }
}
form.one-button { margin: 0; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3 * var(--u)); }
.btn-row .btn, .btn-row form, .btn-row form .btn { width: 100%; }

/* Fields: the label above; 44 px high, the field surface, a strong hairline; help below in the secondary ink. */
.field { margin: 0 0 calc(6 * var(--u)); }
.field > label, .field > .field-label, .choice > legend { display: block; margin-bottom: calc(1.5 * var(--u)); }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="date"], .field input[type="number"], .field select, .field textarea {
  width: 100%;
  min-height: var(--target);
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line-strong);
  padding: calc(2 * var(--u)) calc(3 * var(--u));
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { field-sizing: content; min-height: calc(4lh + 4 * var(--u)); max-height: calc(12lh + 4 * var(--u)); resize: vertical; }
.field.field-error input, .field.field-error select, .field.field-error textarea { border-width: 2px; border-color: var(--late); }
.field-help, .field-message { margin: calc(1 * var(--u)) 0 0; }
.field-message, .field-message .failed { font-size: var(--t-small); }
.field-disabled { opacity: 0.45; }
.field-readonly .field-value { margin: 0; }
.field input[type="file"] { min-height: var(--target); font: inherit; color: var(--ink); }
.date-restated { display: block; margin-top: calc(1 * var(--u)); }

/* Choices: rows 44 px high, the dot at the left. */
.choice { border: 0; margin: 0 0 calc(6 * var(--u)); padding: 0; min-width: 0; }
.choice-row {
  display: flex; align-items: center; gap: calc(3 * var(--u));
  min-height: var(--target); width: 100%;
  border-bottom: 1px solid var(--line);
}
.choice-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: none; }

/* Error message: the summary under the title, in the late role. */
.error-summary { margin: 0 0 calc(6 * var(--u)); border-left: 3px solid var(--late); background: var(--late-fill); padding: calc(3 * var(--u)) calc(4 * var(--u)); }
.error-summary .failed, .error-summary a { color: var(--late-text); }
.error-summary p { margin: 0 0 calc(2 * var(--u)); font-weight: 600; }
.error-summary ul { margin: 0; padding-left: calc(5 * var(--u)); }

/* Status line: one sentence, the key phrase bold, the clock in mono (reference, section 4). */
.status-line { margin: 0 0 calc(4 * var(--u)); font-size: 16px; line-height: 1.45; }
.status-line strong { font-weight: 700; }

/* Redline: removed words struck in the late red; added words underlined in saddle on a light shade. */
.redline del { color: var(--late-text); text-decoration: line-through; }
.redline ins { text-decoration: none; border-bottom: 2px solid var(--saddle); background: var(--shade); }

/* Chips. An identifier: mono, no capitals, a hairline; its tappable element is at least 44 by 44 px on a phone (J20).
   A class or state chip: 22 px, capitals, always a word; the role adds a fill (deviation 8). */
.chip { display: inline-block; position: relative; vertical-align: middle; }
.chip > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 599px) { .chip > summary { min-height: var(--target); min-width: var(--target); } }
.chip > summary::-webkit-details-marker { display: none; }
.chip-box, .chip-static {
  display: inline-block; border: 1px solid var(--line-strong); padding: 0 5px;
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; line-height: 22px; color: var(--ink);
}
.chip-retired .chip-box { text-decoration: line-through; }
.chip-first-pass-dot { font-family: var(--mono); margin: 0 4px 0 8px; }
.chip-first-pass { display: inline-flex; align-items: center; gap: calc(2 * var(--u)); }
.popover {
  position: absolute; left: 0; top: 100%; z-index: 4;
  width: max-content; max-width: min(22rem, 80vw);
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-strong); padding: calc(2 * var(--u)) calc(3 * var(--u));
  font-family: var(--grotesque); font-size: var(--t-small);
}
@media (max-width: 599px) {
  .chip .popover, .term .popover { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; width: auto; max-width: none; }
}
.tag {
  display: inline-flex; align-items: center; min-height: 22px; padding: 1px 7px;
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  border: 1px solid var(--line-strong); color: var(--ink); background: transparent; white-space: nowrap;
}
.tag.act { background: var(--act-fill); color: var(--on-act); border-color: transparent; }
.tag.late { background: var(--late-fill); color: var(--late-text); border-color: transparent; }
.tag.wait { background: var(--wait-fill); color: var(--wait-text); border-color: transparent; }
.tag.stand { background: var(--stand-fill); color: var(--stand-text); border-color: transparent; }
.tag.new { background: var(--new-fill); color: var(--new-text); border-color: transparent; }
.tag.quiet { border-color: var(--line); color: var(--ink-2); }
/* AI-1B4, A4: a legal question's professional and country may be long ('United Arab Emirates · for the UAE tax adviser'): it wraps */
.tag.addressed { white-space: normal; line-height: 1.3; max-width: 100%; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 calc(3 * var(--u)); }
.flag.failed { background: var(--late-fill); color: var(--late-text); border-color: transparent; }
.flag-cleared { margin: 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.dot.late { background: var(--late); } .dot.act { background: var(--act); } .dot.wait { background: var(--wait); }
.dot.stand { background: var(--stand); } .dot.new { background: var(--new); }

/* Glossary term: a dotted underline; tap shows the definition. */
.term { display: inline-block; position: relative; }
.term > summary { display: inline; list-style: none; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.term > summary::-webkit-details-marker { display: none; }

/* Card: the panel surface, a hairline, a coloured left edge for its role. Sealed: the label in the corner. */
.card { position: relative; background: var(--panel); border: 1px solid var(--line); padding: calc(4 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
@media (min-width: 1024px) { .card { padding: calc(5 * var(--u)) calc(6 * var(--u)); } }
.card.act { border-color: var(--act); border-left: 4px solid var(--act); }
.card.late { border-left: 4px solid var(--late); }
.card.wait { border-left: 4px solid var(--wait); }
.card.stand { border-left: 4px solid var(--stand); }
.card.new { border-left: 4px solid var(--new); }
.card > * + *, .col-main .card > * + * { margin-top: calc(2 * var(--u)); }
@media (min-width: 1024px) { .card > * + *, .col-main .card > * + * { margin-top: calc(3 * var(--u)); } }
.card .status-line, .card .title-line, .card .tags { margin-bottom: 0; }
.card p { margin-bottom: 0; }
.card-sealed-label { position: absolute; top: calc(3 * var(--u)); right: calc(4 * var(--u)); margin: 0; }
.card-sealed { padding-top: calc(10 * var(--u)); }

/* Consent card: the page on P23 (deviation 12); two buttons, full width in a pair, the primary at the right. */
.consent-title { font-size: var(--t-section); font-weight: 600; margin: 0 0 calc(3 * var(--u)); }
.consent-card p { margin-top: 0; }
.consent-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3 * var(--u)); margin-top: calc(4 * var(--u)); }
.consent-buttons .btn, .consent-buttons form { width: 100%; }
.consent-buttons form { margin: 0; }
.touches-line, .ai-line { font-size: var(--t-small); }
.card-section > h2 { margin: 0 0 var(--u); }

/* Band: a label with its count and a 2 px rule in the band's colour: Decide act, Do late when one is overdue,
   Changed new, the rest ink (reference, section 4). */
.band { margin: 0 0 calc(8 * var(--u)); display: grid; gap: calc(2 * var(--u)); }
.band-label {
  display: flex; align-items: baseline; gap: calc(2.5 * var(--u)); min-height: 28px; margin: 0;
  border-bottom: 2px solid var(--ink); padding-bottom: 6px; color: var(--ink);
}
.band-label .n { font-family: var(--mono); font-size: var(--t-small); font-weight: 600; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.band-label .more { margin-left: auto; font-size: var(--t-small); font-weight: 400; letter-spacing: 0; text-transform: none; }
.band.act > .band-label { border-bottom-color: var(--act); }
.band.late > .band-label { border-bottom-color: var(--late); }
.band.new > .band-label { border-bottom-color: var(--new); }
.band-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.band-label + .band-rows { border-top: 0; }
.band-empty { margin: calc(2 * var(--u)) 0 0; color: var(--ink-2); }
.counts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; }
.counts a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--target); text-decoration: none; }
.counts a:hover { text-decoration: underline; }
.counts .n { font-family: var(--mono); font-weight: 600; }

/* Fold: a native details element; a triangle, the title, the count in mono at the right (under it on a phone). */
.fold { display: block; border-bottom: 1px solid var(--line); }
.fold > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: calc(2 * var(--u)); align-items: center;
  min-height: var(--target); padding: calc(2 * var(--u)) 0;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid var(--ink-2); margin-left: 3px; }
.fold[open] > summary::before { transform: rotate(90deg); transform-origin: 3px 5px; }
.fold > summary > * { min-width: 0; }
.fold > summary .n { grid-column: 2; color: var(--ink-2); font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; }
@media (min-width: 600px) {
  .fold > summary { grid-template-columns: 16px minmax(10rem, 1fr) minmax(0, max-content); column-gap: calc(4 * var(--u)); }
  .fold > summary .n { grid-column: 3; text-align: right; max-width: 26rem; }
}
.fold > summary:hover { background: var(--shade); }
.fold > .fold-body, .fold > ul, .fold > p, .fold > div, .fold > form, .fold > section { margin-left: calc(6 * var(--u)); }
.fold > .fold-body { padding: var(--u) 0 calc(4 * var(--u)); }
.fold.top > summary { font-weight: 600; }
.fold .fold { border-bottom: 0; }
.folds { border-top: 1px solid var(--line); margin: 0 0 calc(6 * var(--u)); }

/* Row: the main text, a meta line in the secondary ink, the date or count in mono at the right. Overdue rows: a red
   edge, the date red and bold. */
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(3 * var(--u)); align-items: start;
  min-height: var(--target); padding: calc(2.5 * var(--u)) 0;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
a.row:hover .row-title { text-decoration: underline; }
.row-title { display: block; overflow-wrap: anywhere; }
.row-line, .row-meta { display: block; color: var(--ink-2); font-size: var(--t-small); margin-top: 2px; }
.row-when { font-family: var(--mono); font-size: var(--t-mono); font-weight: 500; text-align: right; color: var(--ink-2); white-space: nowrap; padding-top: 3px; }
.row-when.soon { color: var(--ink); }
.row-overdue { border-left: 3px solid var(--late); padding-left: calc(2.5 * var(--u)); }
.row-overdue .row-when { color: var(--late-text); font-weight: 700; }
.row .chip-static { margin-left: var(--u); }

/* Impact strip (P22): six cells in one row on a laptop, two rows of three on a phone. */
.impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
@media (min-width: 1024px) { .impact { grid-template-columns: repeat(6, 1fr); } }
.impact-cell { border: 1px solid var(--line); background: var(--panel); padding: calc(2 * var(--u)); min-height: var(--target); min-width: 0; }
.impact-cell > summary { list-style: none; cursor: pointer; }
.impact-cell > summary::-webkit-details-marker { display: none; }
.impact-cell .label { color: var(--ink-2); }
.impact-cell .label.failed { color: var(--late-text); }
.impact-count { display: block; font-family: var(--mono); font-size: 22px; line-height: 1.2; }
.impact-line { display: block; font-size: var(--t-small); overflow-wrap: anywhere; }
.impact-list { margin: calc(2 * var(--u)) 0 0; padding-left: calc(4 * var(--u)); font-size: var(--t-small); }

/* Table: a header row on the panel; hairlines; mono identifiers and dates. Phone: rows. */
.table-frame { overflow-x: auto; margin: 0 0 calc(6 * var(--u)); }
.table { border-collapse: collapse; width: 100%; }
.table th { background: var(--panel); color: var(--ink); text-align: left; font-weight: 600; }
.table th a { color: var(--ink); }
.table th, .table td { padding: calc(2 * var(--u)) calc(3 * var(--u)); border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 599px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table tr { display: block; padding: calc(3 * var(--u)) 0; border-bottom: 1px solid var(--line); }
  .table td { display: block; border: 0; padding: 0; }
}
.pagination { margin: 0 0 calc(6 * var(--u)); }
.pagination a { display: inline-flex; align-items: center; min-height: var(--target); }

/* Empty state, the AI note. */
.empty { margin: 0 0 calc(6 * var(--u)); color: var(--ink-2); }
.running { margin: 0 0 calc(4 * var(--u)); }
.ai-note { border: 1px solid var(--line); background: var(--panel); padding: calc(3 * var(--u)) calc(4 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
.ai-note p { margin: 0 0 calc(3 * var(--u)); }
.ai-note p:last-child { margin-bottom: 0; }
.ai-entry { margin: 0 0 calc(4 * var(--u)); }
.ai-failed { text-decoration: line-through; color: var(--late-text); }
.ai-rating { display: flex; gap: calc(3 * var(--u)); align-items: center; }

/* A note: the panel with a left edge in its role. */
.note { background: var(--panel); border-left: 3px solid var(--line-strong); padding: calc(2.5 * var(--u)) calc(3.5 * var(--u)); margin: 0 0 calc(4 * var(--u)); }
.note.act { border-left-color: var(--act); }
.note.new { border-left-color: var(--new); }
.note.late { border-left-color: var(--late); }

/* Confirmation page. */
.confirmation-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: calc(3 * var(--u)); }

/* No motion, except the fold's triangle, the redline's underline and a confirming button's label. */
@media (prefers-reduced-motion: no-preference) { .fold > summary::before { transition: transform 0.12s; } }
@media (prefers-reduced-motion: reduce) { * { transition: none; animation: none; } }

/* The pages' columns: below 1,024 px one column in the order each page's section gives (the shell's o-N classes); from
   1,024 px the content column and the rail. On a phone every link, button, select and summary of the main region is
   at least 44 by 44 px, the glossary word in running text excepted. */
.col-main, .col-rail { min-width: 0; }
@media (max-width: 1023px) {
  .ordered { display: flex; flex-direction: column; max-width: var(--content); }
  .ordered > .col-main, .ordered > .col-rail { display: contents; }
  .o-0 { order: 0; } .o-1 { order: 1; } .o-2 { order: 2; } .o-3 { order: 3; } .o-4 { order: 4; } .o-5 { order: 5; }
  .o-6 { order: 6; } .o-7 { order: 7; } .o-8 { order: 8; } .o-9 { order: 9; } .o-10 { order: 10; } .o-11 { order: 11; }
  .o-12 { order: 12; } .o-13 { order: 13; } .o-14 { order: 14; } .o-15 { order: 15; } .o-16 { order: 16; } .o-17 { order: 17; }
  .o-18 { order: 18; } .o-19 { order: 19; } .o-20 { order: 20; } .o-21 { order: 21; } .o-22 { order: 22; } .o-23 { order: 23; }
  .o-24 { order: 24; } .o-25 { order: 25; } .o-26 { order: 26; } .o-27 { order: 27; } .o-28 { order: 28; } .o-29 { order: 29; }
  .on-laptop-block { display: none; }
}
@media (min-width: 1024px) {
  .on-phone-block { display: none; }
  .col-rail > div:first-child { margin-top: calc(var(--t-title) * 1.2 + 6 * var(--u)); }
  .col-rail.rail-top > div:first-child, .no-title .col-rail > div:first-child { margin-top: 0; }
}
@media (max-width: 599px) {
  main a:not(.btn), main summary:not(.term > summary), main select, main input[type="search"], main input[type="text"], main input[type="email"], main input[type="password"] { min-height: var(--target); min-width: var(--target); }
  main a:not(.btn) { display: inline-flex; align-items: center; }
  main .book-row-link, main .value-row, main .result-link, main a.row-link, main a.row { display: grid; }
  main .term > summary { min-height: 0; min-width: 0; }
}
::placeholder { color: var(--ink-2); opacity: 1; }
.col-rail section, .col-main section { margin: 0 0 calc(6 * var(--u)); }
.col-rail h2.label, .col-main h2.label, .book-counts { margin: 0 0 calc(2 * var(--u)); }
.col-main section.band, .col-rail section.band { margin-bottom: calc(8 * var(--u)); }
.card section, .card h2.label { margin-bottom: 0; }
.plain-list, ul.tags { list-style: none; margin: 0; padding: 0; }
ul.tags { margin: 0 0 calc(3 * var(--u)); }
ul.tags > li { display: inline-flex; }
.value-row, .result-link, .book-row-link { text-decoration: none; }
.value-row > span:first-child { text-decoration: underline; }
form + section, form + div, .confirm-why { margin-bottom: calc(6 * var(--u)); }
.confirm-mapping form { display: inline; }
.book-group > summary { font-weight: 600; }
.documents td.mono { white-space: nowrap; }
.plain-list > li { margin: 0 0 calc(2 * var(--u)); }
.also-known, .retired-line { display: block; font-size: var(--t-small); margin-top: calc(1 * var(--u)); }
.done-message { border-left: 3px solid var(--stand); background: var(--panel); padding: calc(2 * var(--u)) calc(3 * var(--u)); }
.meta { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)) calc(4 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
.meta > div { display: flex; gap: calc(2 * var(--u)); }
.meta dt { font-weight: 600; }
.meta dd { margin: 0; }
.quote { margin: 0 0 calc(3 * var(--u)); padding-left: calc(4 * var(--u)); border-left: 3px solid var(--line-strong); }
.value-row { display: flex; justify-content: space-between; align-items: center; gap: calc(3 * var(--u)); min-height: var(--target); }
.quiet-link { margin: calc(2 * var(--u)) 0; }
.propose { margin: 0 0 calc(6 * var(--u)); }
@media (max-width: 1023px) {
  .propose { position: fixed; left: 0; right: 0; bottom: var(--bar); z-index: 15; margin: 0; padding: calc(2 * var(--u)) var(--gutter); background: var(--paper); border-top: 1px solid var(--line); }
  .propose .btn { width: 100%; }
  body:has(.propose) { padding-bottom: calc(var(--bar) + 44px + 8 * var(--u)); }
}
.filters .field { margin-bottom: calc(3 * var(--u)); }

/* P10 · The book (SKIN-2, deviation 5): rows that fold; rules one row each. */
.book-rows { margin: 0 0 calc(6 * var(--u)); }
.book-row { list-style: none; }
.book-row .row-meta .tag { margin: 2px calc(1 * var(--u)) 0 0; }
.book-row .row.is-selected { outline: 2px solid var(--focus); outline-offset: 2px; }
.book-law-cited { margin-right: var(--u); }
.book-filters .filters { margin: 0; }

/* P15 · Glossary: its find box. */
.search-page { display: flex; gap: calc(2 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
.search-page input { flex: 1; min-height: 48px; font-size: 17px; }
.search-page .btn { min-height: 48px; }
@media (max-width: 599px) { .search-page { flex-wrap: wrap; } .search-page input { flex-basis: 100%; } }
.result { border-bottom: 1px solid var(--line); padding: calc(2 * var(--u)) 0; }
.result-link { display: block; text-decoration: none; }
.result-text { text-decoration: underline; }
.result .tags { margin: calc(1 * var(--u)) 0 0; }
.glossary { margin: 0; }
.glossary-row { border-left: 2px solid transparent; padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(3 * var(--u)); border-bottom: 1px solid var(--line); }
.glossary-row dt { font-weight: 600; }
.glossary-row dd { margin: 0; }
.glossary-row:target { animation: glossary-mark 10s step-end; }
@keyframes glossary-mark { from { border-left-color: var(--saddle); } to { border-left-color: transparent; } }

/* P14 · Who decides. */
.who-form { margin: 0 0 calc(6 * var(--u)); }
.who-card { margin: 0 0 calc(3 * var(--u)); }
.who-card > div { margin: 0 0 calc(2 * var(--u)); }
.who-card dt { display: inline; font-weight: 600; }
.who-card dd { display: inline; margin: 0; }

/* P16 · Documents, P17 · Document. */
.add-form, .edit-form { margin: 0 0 calc(6 * var(--u)); }
@media (max-width: 599px) {
  .documents td.doc-revision, .documents td.doc-owner { display: none; }
}

/* The development page /dev/components only: specimens with their state's name. */
.specimen { margin: 0 0 calc(12 * var(--u)); }
.specimen-state { margin: 0 0 calc(6 * var(--u)); max-width: var(--content); }
.specimen-state.specimen-wide { max-width: none; }
.specimen-name { margin: 0 0 calc(2 * var(--u)); }
.specimen-pressed .btn-primary { opacity: 0.85; }
.specimen-focus .btn { outline: 2px solid var(--focus); outline-offset: 2px; }
.specimen-open { min-height: 6rem; }

/* P22 to P26. P22's rail is 480 px on a laptop (its page's one exception); the content column gives way rather than
   the page scrolling sideways. The strip in a rail keeps two rows of three. */
@media (min-width: 1024px) {
  .columns.rail-wide { grid-template-columns: minmax(0, var(--content)) 480px; }
  .frame:has(.rail-wide) { max-width: calc(var(--content) + var(--rail-gap) + 480px + 2 * var(--gutter)); }
}
.col-rail .impact { grid-template-columns: repeat(3, 1fr); }
fieldset.plain, fieldset.action-row { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.action-row { border-top: 1px solid var(--line); padding-top: calc(3 * var(--u)); margin-top: calc(3 * var(--u)); }
.beside { display: grid; gap: calc(4 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
@media (min-width: 1024px) { .col-main .beside { grid-template-columns: 1fr 1fr; } }
.reasons-then p:last-child { margin-top: 0; }
.propose-buttons, .propose-submit, .propose-withdraw { margin: calc(4 * var(--u)) 0; }
.propose-buttons .btn, .propose-submit .btn { min-width: 160px; }
.notice { font-weight: 600; border-left: 3px solid var(--stand); background: var(--panel); padding: calc(2 * var(--u)) calc(3 * var(--u)); }
.title-line { margin: 0 0 calc(3 * var(--u)); }
.acts > * { margin: 0 0 calc(4 * var(--u)); }
.consent-buttons details.decline > summary { list-style: none; text-align: center; }
.consent-buttons details.decline > summary::-webkit-details-marker { display: none; }
.consent-buttons details.decline[open] { grid-column: 1 / -1; }
/* CLEAR-1E, B: the log as mock/log.html draws it; open rows carry the accent edge (row-act). */
.log-row .main { min-width: 0; display: grid; gap: 2px; }
.log-row .row-meta { display: flex; flex-wrap: wrap; gap: 2px calc(2 * var(--u)); align-items: center; }
.log-row .row-meta .tag { margin: 0; }
.log-row .entry .name a { color: var(--ink); }
.log-part-of { margin: 0 0 calc(2 * var(--u)); }
.log-band h3.label { margin: 0; color: var(--ink); }
.log-fold > summary .label { margin: 0; color: var(--ink); }
.log-fold { margin-bottom: calc(2 * var(--u)); }
.log-more { margin: calc(2 * var(--u)) 0 0; font-size: var(--t-small); color: var(--ink-2); }
.log-more a { display: inline-flex; align-items: center; min-height: var(--target); }
.log-filters { margin: 0 0 calc(6 * var(--u)); }
.log-filters .fold-body { margin-left: 0; }
.log-chip-group p { margin: 0 0 var(--u); }
.log-chip.chosen, .doc-view.chosen { border-color: var(--ink); color: var(--ink); font-weight: 700; }
.log-dates { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); align-items: end; }
.sealed-label .label { margin-right: var(--u); }
.blocked { border-left: 3px solid var(--late); background: var(--late-fill); padding: calc(2.5 * var(--u)) calc(3.5 * var(--u)); }
.blocked, .blocked .label { color: var(--late-text); }
.would-not-seal { color: var(--late-text); }

/* P18 to P21. The page's tabs (P20-E01, P20-E11): a row of links, the active one underlined in saddle, scrolling
   sideways inside its own row on a phone, never the page. */
.page-tabs { display: flex; overflow-x: auto; margin: 0 0 calc(6 * var(--u)); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--target); padding: 0 calc(3 * var(--u)); white-space: nowrap;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.page-tabs a[aria-current="page"] { border-bottom-color: var(--saddle); }
.band-sub { margin: calc(3 * var(--u)) 0 0; color: var(--ink-2); }
.start-link a { display: inline-flex; align-items: center; min-height: var(--target); }
.start-card { margin: 0 0 calc(6 * var(--u)); padding: calc(4 * var(--u)); }
.start-card .btn { width: 100%; }
@media (min-width: 1024px) { .start-card .btn { width: auto; } }
.ruling-row { display: flex; justify-content: space-between; gap: calc(3 * var(--u)); align-items: center; min-height: var(--target); border-bottom: 1px solid var(--line); }
.ruling-row a { display: inline-flex; align-items: center; min-height: var(--target); min-width: var(--target); }
.know-lines .row { grid-template-columns: 1fr; }
.keys-fold { display: none; }
@media (min-width: 1024px) { .keys-fold { display: block; } }
.keys-fold p { color: var(--ink-2); font-size: var(--t-small); }
.row.is-selected, .decide-card .is-selected { outline: 2px solid var(--focus); outline-offset: 2px; }
.sweep-day { border: 0; padding: 0; margin: 0 0 calc(8 * var(--u)); min-width: 0; }
.sweep-day > legend { padding: 0; margin: 0 0 calc(3 * var(--u)); }
.sweep-row { padding: calc(3 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.sweep-title { margin: 0 0 calc(2 * var(--u)); }
.sweep-title a, .objective a, .later-row a { display: inline-flex; align-items: center; min-height: var(--target); }
.mark-all { margin: 0 0 calc(3 * var(--u)); }
.party-block { margin: 0 0 calc(8 * var(--u)); }
.chaser-form .choice-row { margin: 0 0 calc(2 * var(--u)); }
.action-meta { margin: 0 0 calc(4 * var(--u)); }
.action-forms > section { margin: 0 0 calc(6 * var(--u)); }
.action-forms .btn { width: 100%; }
@media (min-width: 1024px) {
  .action-forms { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(4 * var(--u)); }
}
.filters { margin: 0 0 calc(6 * var(--u)); }
.objectives { margin: 0 0 calc(6 * var(--u)); }
.later-row { padding: calc(3 * var(--u)) 0; border-bottom: 1px solid var(--line); }
td.overdue { font-weight: 700; color: var(--late-text); }

/* SKIN-1 · P19 Waiting for you in four bands (deviation 3): the title with the date; Decide as cards; Do in three
   levels; Changed by kind; Today on the day of the call; Getting started as one row. */
.waiting-sub { margin: calc(-4 * var(--u)) 0 calc(6 * var(--u)); }
.waiting-changed { margin: calc(-4 * var(--u)) 0 calc(6 * var(--u)); font-size: var(--t-small); }
@media (min-width: 1024px) { .waiting-changed { display: none; } }
.decide-card { margin: 0; }
.decide-card .section { margin: 0; }
.decide-card .section a { text-decoration: none; }
.decide-card .section a:hover { text-decoration: underline; }
.decide-card .status-line { margin-bottom: 0; }
.decide-cards { display: grid; gap: calc(3 * var(--u)); }
.row-meta .chip-static { margin: 0 calc(1 * var(--u)) 0 0; }
.today p { margin: 0; }

/* P20 to P26 as rows' meta lines; P04 to P06 in one column of 480 px. */
.narrow { max-width: 480px; }
.terms { margin: 0 0 calc(6 * var(--u)); }
.terms dt { margin: 0; }
.terms dd { margin: 0 0 calc(3 * var(--u)); }
#password { margin-top: calc(10 * var(--u)); }
.users-table td, .users-table th { padding: calc(2 * var(--u)); }
.users-table .email { overflow-wrap: anywhere; }
.acts form { margin: 0 0 calc(2 * var(--u)); }
.users-table tr:has(+ .acts-row) td { border-bottom: 0; }
.acts-row .acts { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); }
.acts-row .acts form { margin: 0; }
.user-cards { list-style: none; margin: 0 0 calc(6 * var(--u)); padding: 0; }
.user-card { padding: calc(3 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.user-card p { margin: 0 0 calc(1 * var(--u)); }
.user-card .acts .btn { width: 100%; }

/* More: the pages that are not on the bar, as large rows (deviation 2). */
.menu-rows .row { min-height: 56px; align-items: center; }
.menu-rows .row-title { font-size: var(--t-lead); }
.menu-rows form { margin: 0; }
.specimen-bar .bar { position: static; display: grid; }

/* SKIN-2: the book, the item and the value, Ask Standing, What changed (reference, sections 3, 4, 6; deviations 1, 4 to 7). */
.small { font-size: var(--t-small); }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.row-act { border-left: 3px solid var(--act); padding-left: calc(2.5 * var(--u)); }
.row-meta .tag { margin: 2px calc(1 * var(--u)) 0 0; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--u) calc(3 * var(--u)); margin: 0 0 calc(4 * var(--u)); }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv dd .empty { margin: 0; }
.fold-all { display: flex; gap: calc(2 * var(--u)); margin: 0 0 calc(3 * var(--u)); }
.fold-all[hidden] { display: none; }
.book-rows > .fold > summary .tag, .book-principle > summary .tag { margin-left: calc(1 * var(--u)); }
.book-row .book-confirm { margin: 0 0 calc(2 * var(--u)); }
.book-fact .row-meta .label { margin-right: var(--u); }
.book-queue p { margin: 0; }
.identity { margin: 0 0 calc(4 * var(--u)); }
.q-text { font-weight: 600; }
.q-answer { font-weight: 400; font-size: var(--t-small); }
.item-folds, .value-folds { border-top: 1px solid var(--line); margin: 0 0 calc(6 * var(--u)); }
.item-folds h3.label, .value-folds h3.label { margin: calc(4 * var(--u)) 0 calc(2 * var(--u)); }
.plain-reading p { margin: 0; }
.glance .kv { margin: 0; }
.class-sentence { margin: 0 0 calc(4 * var(--u)); }
.value-amount { font-family: var(--mono); font-weight: 600; }
.askbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(2 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
.askbox input { min-height: 48px; font-size: 17px; width: 100%; padding: 0 calc(3 * var(--u)); border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); }
.askbox .btn { min-height: 48px; }
@media (min-width: 1024px) { .askbox { grid-template-columns: minmax(0, 1fr) auto; } }
.ask-counts { margin: 0 0 calc(4 * var(--u)); }
.ask-question { margin: 0 0 calc(6 * var(--u)); }
.ask-mode .row-title b { font-weight: 600; }
.ask-mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(3 * var(--u)); padding: calc(2.5 * var(--u)) 0; min-height: var(--target); border-bottom: 1px solid var(--line); }
/* AI-1A: an answer of Ask, as mock/ask.html draws it: the sentences first, then their sources, the pact's rows, the foot */
.ask-answer { display: grid; gap: calc(3 * var(--u)); }
.ask-answer .tags, .ask-answer .lead, .ask-answer .label, .ask-answer p { margin: 0; }
.ask-answer .says { font-size: var(--t-lead); line-height: 1.45; }
.ask-answer .says b { font-weight: 600; }
.ask-answer .ask-sentence details.chip { display: inline-block; vertical-align: baseline; }
.ask-answer .sources { display: grid; gap: calc(1.5 * var(--u)); }
.ask-answer .source { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: calc(2.5 * var(--u)); align-items: baseline; }
.ask-answer .source q { font-style: italic; }
.ask-answer .boundary { font-size: var(--t-small); border-top: 1px solid var(--line); padding-top: calc(2 * var(--u)); }
.ask-answer .fold.top { margin: 0; }
.ask-answer .ask-items { margin: 0; padding-left: calc(4 * var(--u)); }
.ask-reload a, .ask-again a, .ask-recent a, .ask-owner { display: inline-flex; align-items: center; min-height: var(--target); }
.ask-nearest .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(3 * var(--u)); align-items: center; }
.ask-again { margin: 0 0 calc(4 * var(--u)); }
.ask-error { margin: calc(-4 * var(--u)) 0 calc(6 * var(--u)); }
.ask-recent ul, .ask-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(2 * var(--u)); }
.card.ask-recent > h2.label, .card.ask-rail > h2.label { margin: 0 0 calc(3 * var(--u)); }
.ask-rail p { margin: 0; }
.who-card { margin: 0; }
.not-found-ask { margin: 0 0 calc(6 * var(--u)); }
.not-found-ask .ask-box input { width: 100%; min-height: 48px; }
.changes-counts { margin: 0 0 calc(6 * var(--u)); }
.changes-band { margin: 0 0 calc(6 * var(--u)); }
.changes-band .band-label .dot { margin-right: calc(2 * var(--u)); }
.changes-line > summary .tag { margin-left: var(--u); }
/* CLEAR-1B, B (R2-17): the feed and its strip */
.changes-strip { margin: 0 0 calc(4 * var(--u)); }
.changes-strip a { min-height: var(--target); }
.changes-strip a[aria-current] { border-color: var(--ink); font-weight: 600; }
.changes-feed .before-after p { margin: 0 0 var(--u); }
.changes-feed .before-after .is { display: flex; gap: var(--u); align-items: baseline; }
.changes-feed .before-after .is .redline { margin: 0; }
.changes-feed .k { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-right: var(--u); }
.before-after { margin: 0 0 calc(3 * var(--u)); }
.before-after .label { margin: 0 0 var(--u); }
.span-links { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)); }
.span-links .tag { min-height: var(--target); display: inline-flex; align-items: center; text-decoration: none; }
.book-rows > .fold.top > summary { padding: 2px 0; }
.book-rows > .fold.top > summary .n { line-height: 1.3; }
/* The book's ten rows on a phone: the count follows the title on its last line, so that all ten fit the first screen
   (SKIN-2, B1 and D.3; the reference draws it under the title). */
@media (max-width: 599px) {
  .book-rows > .fold.top > summary { display: block; padding-left: calc(6 * var(--u)); position: relative; }
  .book-rows > .fold.top > summary::before { position: absolute; left: 0; top: calc(2 * var(--u) + 4px); }
  .book-rows > .fold.top > summary > span:first-child { display: inline; }
  .book-rows > .fold.top > summary .n { display: inline; margin-left: calc(2 * var(--u)); white-space: nowrap; }
}
/* A title's sub line sits close under it, as the reference's stack does (6 px). */
.book-counts { margin-top: calc(-4 * var(--u)); }
.dot.quiet { background: var(--line-strong); }
.note > p { margin: 0 0 calc(2 * var(--u)); } .note > p:last-child { margin-bottom: 0; }
.row-title.clamp { display: -webkit-box; }

/* =====================================================================
   CLEAR-1A · the second reference's components (R2-11 to R2-13, R2-01, R2-03 to R2-10), taken from
   docs/design/ux-reference-2/mock/standing.css, sections 17 to 21; --font is --grotesque here, --t-body 16px.
   ===================================================================== */
.header.noask .header-ask { display: none !important; }
/* ---------- 17 · Names first: kind, name, path, code ---------- */
.kind { display: inline-block; font: 600 var(--t-label)/1 var(--grotesque); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--line); padding: 3px 6px; vertical-align: middle; }
.kind.k-principle { border-color: var(--ink); color: var(--ink); }
.name { font-weight: 600; }
.path { color: var(--ink-2); font-size: var(--t-small); }
.path .sep { padding: 0 4px; }
.code { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.drafted { display: inline-block; font: 500 11px/1 var(--mono); color: var(--new-text); background: var(--new-fill); padding: 3px 6px; vertical-align: middle; white-space: nowrap; }
.entry { display: grid; gap: 2px; min-width: 0; }
.entry .line1 { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }

/* ---------- 18 · The ladder: the six kinds in order, what is touched lit ---------- */
.ladder { display: grid; gap: 0; border-left: 2px solid var(--line); padding-left: 0; }
.ladder .rung { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; column-gap: 8px; align-items: center; min-height: 36px; padding: 4px 0; position: relative; }
.ladder .rung::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); margin-left: -7px; }
.ladder .rung .tier { font-size: var(--t-small); color: var(--ink-2); }
.ladder .rung .what { font: 500 var(--t-mono)/1.3 var(--mono); color: var(--ink-2); text-align: right; }
.ladder .rung.lit::before { background: var(--act-fill); border-color: var(--act-fill); }
.ladder .rung.lit .tier, .ladder .rung.lit .what { color: var(--ink); font-weight: 600; }
.ladder .rung.here::before { background: var(--ink); border-color: var(--ink); }
.ladder .rung.here .tier { color: var(--ink); font-weight: 600; }
.ladder .rung.stand::before { background: var(--stand); border-color: var(--stand); }
.ladder .rung.late::before { background: var(--late); border-color: var(--late); }
.ladder.compact .rung { min-height: 28px; padding: 2px 0; }
.ladder.h { display: flex; flex-wrap: wrap; gap: 4px 14px; border-left: 0; }
.ladder.h .rung { display: inline-flex; gap: 6px; min-height: 28px; padding: 0; }
.ladder.h .rung::before { margin-left: 0; }

/* ---------- 19 · The home: Ask as a search engine ---------- */
.home-ask { display: grid; gap: 10px; padding: 8px 0 4px; }
.home-ask .field-wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.home-ask input { min-height: 52px; font-size: 18px; padding: 10px 14px; border: 2px solid var(--ink); background: var(--field); }
.home-ask .btn { min-height: 52px; padding: 0 20px; }
.home-ask .hints { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.home-ask .hints::-webkit-scrollbar { display: none; }
.home-ask .hints a { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 1024px) { .home-ask .hints { flex-wrap: wrap; overflow: visible; } }
.home-ask .hints a { font-size: var(--t-small); min-height: 36px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); max-width: 100%; }
.home-ask .hints a:hover { border-color: var(--ink); color: var(--ink); }
@media (min-width: 1024px) {
  .home-ask { padding: 24px 0 8px; }
  .home-ask input { min-height: 60px; font-size: 20px; }
  .home-ask .btn { min-height: 60px; }
}
/* the strip of counts under the box */
.strip { display: flex; flex-wrap: wrap; gap: 6px; }
.strip a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); text-decoration: none; font-size: var(--t-small); }
.strip a .n { font: 600 16px/1 var(--mono); }
.strip a.act { border-color: var(--act); } .strip a.act .n { color: var(--act-text); }
.strip a.late { border-color: var(--late); } .strip a.late .n { color: var(--late-text); }
.strip a.new { border-color: var(--new); } .strip a.new .n { color: var(--new-text); }

/* ---------- 20 · Answers: the type, the answer, the sources ---------- */
.qtype { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: var(--t-small); color: var(--ink-2); }
.qtype .chip { font-size: 10.5px; }
.answer .says { font-size: 18px; line-height: 1.45; }
@media (min-width: 1024px) { .answer .says { font-size: 20px; } }
.answer .says b { font-weight: 700; }
.answer .none { font-size: 22px; font-weight: 700; }
.point { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; display: grid; gap: 8px; }
.point .exits { display: flex; flex-wrap: wrap; gap: 8px; }
.point .exits .btn { min-height: 40px; padding: 0 12px; font-size: var(--t-small); }
.point .why { color: var(--ink-2); font-size: var(--t-small); }
.reading { display: grid; gap: 10px; border: 1px solid var(--line); background: var(--panel); padding: 16px; }
.reading .bar-track { height: 6px; background: var(--line); }
.reading .bar-fill { height: 6px; background: var(--ink); width: 58%; }

/* ---------- 21 · The package: lines by tier, each with its disposition ---------- */
.pkg-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pkg-sum .cell { border: 1px solid var(--line); background: var(--panel); padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.pkg-sum .cell .big { font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pkg-sum .cell .label { font-size: 10.5px; }
.tier-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid var(--ink); padding: 14px 0 6px; }
.tier-head .n { font: 600 var(--t-small)/1 var(--mono); color: var(--ink-2); }
.pline { border: 1px solid var(--line); background: var(--panel); padding: 14px; display: grid; gap: 10px; box-shadow: inset 4px 0 0 var(--act); }
.pline.ok { box-shadow: inset 4px 0 0 var(--stand); }
.pline.no { box-shadow: inset 4px 0 0 var(--line-strong); opacity: .75; }
.pline.flag { box-shadow: inset 4px 0 0 var(--late); }
.pline .head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.pline .verb { font: 600 var(--t-label)/1 var(--grotesque); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--ink); padding: 3px 6px; }
.pline .change { display: grid; gap: 6px; }
.pline .change .was, .pline .change .is { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 8px; font-size: 16px; }
.pline .change .k { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.pline .change .was > span:last-child { color: var(--ink-2); }
.pline .because { color: var(--ink-2); font-size: var(--t-small); }
.pline .acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pline .acts .btn { min-height: 44px; padding: 0 8px; font-size: var(--t-small); }
.pline .acts .btn.on { background: var(--stand-fill); border-color: var(--stand); color: var(--stand-text); }
.pline .done { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-small); }
.pline textarea { min-height: 72px; }
.pline .num { font-variant-numeric: tabular-nums; }
.laws { display: grid; gap: 6px; font-size: var(--t-small); }
.laws .law { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; align-items: start; }
.laws .law .mark { font-weight: 700; }
.laws .law.ok .mark { color: var(--stand-text); }
.laws .law.ko .mark { color: var(--late-text); }
.laws .law.wait .mark { color: var(--wait-text); }

/* a sticky answer row on a phone, above the bar */
.sticky-acts { position: sticky; bottom: 72px; z-index: 15; background: var(--paper); padding: 10px 0; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .sticky-acts { position: static; border-top: 0; padding: 0; } }

.pkg-sum a.cell { text-decoration: none; color: inherit; }
.pkg-sum a.cell:hover { border-color: var(--ink); }
.pkg-sum .big.stand-number { color: var(--stand-text); }
.pkg-sum .big.act-number { color: var(--act-text); }
.qtype .btn-quiet, .qtype form { display: inline; }
.answer .source { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); }
/* CLEAR-1A, I2: a grid item never grows past its column; every target 44 px; the strip one line on a phone */
.answer, .answer > *, .point, .point > *, .point .entry, .pline, .pline > *, .decide-card, .decide-card > * { min-width: 0; }
.answer .popover, .point .popover { white-space: normal; max-width: 80vw; }
.point .exits .btn, .pline .acts .btn, .pline .acts summary.btn { min-height: var(--target); }
.qtype .btn-quiet { min-width: var(--target); justify-content: center; }
@media (max-width: 1023px) {
  .strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip a { flex: 0 0 auto; white-space: nowrap; }
}
.page-title:has(> .visually-hidden:only-child) { margin: 0; height: 0; overflow: hidden; }
.answer .sources { display: grid; gap: 0; min-width: 0; }
.answer .sources > * { min-width: 0; overflow-wrap: anywhere; }
.home-ask .hints a { min-height: var(--target); }
.do-row input[type="date"] { min-height: var(--target); }
.ask-answer.answer .source { grid-template-columns: minmax(0, 1fr); }
/* CLEAR-1A, I4: the reference's band head (one line over its rule) and a Do row's date at the right */
.band-head { display: flex; align-items: baseline; gap: 10px; min-height: 28px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.band-head .label { color: var(--ink); margin: 0; }
.band-head .n { font: 600 var(--t-small)/1 var(--mono); color: var(--ink-2); }
.band-head .more { margin-left: auto; font-size: var(--t-small); }
.band.act .band-head { border-bottom-color: var(--act); }
.band.late .band-head { border-bottom-color: var(--late); }
.band.new .band-head { border-bottom-color: var(--new); }
details.do-row > summary, details.do-later > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
details.do-row > summary .n, details.do-later > summary .n { font: 500 var(--t-mono)/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }
details.do-row.overdue > summary .n { color: var(--late-text); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ladder .rung { grid-template-columns: 18px minmax(0, 1fr) minmax(0, max-content); }
.ladder .rung .what { white-space: normal; overflow-wrap: anywhere; }
.pline .change .is .redline, .pline .change .was .redline { margin: 0; }
.ladder .rung { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 45%); }
details.do-row > summary > .entry, details.do-later > summary > span:first-child { min-width: 0; flex: 1 1 auto; }
.band-head { flex-wrap: wrap; }
.home-ask, .home-ask .hints, .strip, .col-main > [class^="o-"], .col-rail > [class^="o-"] { min-width: 0; max-width: 100%; }
.row-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; max-width: 100%; }
.do-row .row-actions input[type="date"] { max-width: 100%; min-width: 0; }
details.do-row, details.do-row > summary { min-width: 0; max-width: 100%; }
details.do-row > summary .n, details.do-later > summary .n { flex: 0 0 auto; }

/* CLEAR-1B, C (R2-18, R2-19): the actions' tabs, rows that open in place, the sweep's banner */
.actions-tabs a .n { font-family: var(--mono); color: var(--ink-2); letter-spacing: 0; margin-left: 4px; }
.note.wait { border-left-color: var(--wait); }
.sweep-banner .btn { margin-left: var(--u); }
details.action-row > summary, details.actions-more > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
details.action-row > summary .entry { min-width: 0; flex: 1 1 auto; }
details.action-row > summary .n, details.actions-more > summary .n { font: 500 var(--t-mono)/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }
details.action-row.overdue > summary .n { color: var(--late-text); font-weight: 700; }
.row-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.row-form label { flex: 0 0 100%; font-size: var(--t-small); }
.row-form label.visually-hidden { flex: 0 0 auto; }
.row-form input { min-height: var(--target); min-width: 0; flex: 1 1 10rem; }
.action-row .row-actions form { margin: 0; }

/* CLEAR-1B, D (R2-14): the foot line of integrity, the integrity page's rows, folds and contradictions */
.integrity-line { margin: 0 0 var(--u); font-size: var(--t-small); }
.integrity-line a { color: inherit; display: inline-block; min-height: var(--target); padding: 10px 0; }
.integrity-line.late { color: var(--late-text); font-weight: 600; }
.integrity-line .dot { margin-right: 6px; }
.integrity-rows { display: grid; gap: calc(3 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
.integrity-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: calc(2 * var(--u)); align-items: start; padding: calc(3 * var(--u)); border: 1px solid var(--line); background: var(--panel); }
.integrity-row .mark { font: 700 18px/1.4 var(--mono); text-align: center; }
.integrity-row.ok .mark { color: var(--stand-text, var(--ink)); }
.integrity-row.ko { border-left: 3px solid var(--late); }
.integrity-row.ko .mark { color: var(--late-text); }
.integrity-row p { margin: 0; min-width: 0; }
.integrity-fold > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.integrity-fold > summary .entry { min-width: 0; flex: 1 1 auto; }
.contradiction { padding: calc(3 * var(--u)) 0; border-top: 1px solid var(--line); display: grid; gap: calc(2 * var(--u)); }
.contradiction.open { border-left: 3px solid var(--late); padding-left: calc(3 * var(--u)); }
.contradiction p { margin: 0; }
.auditor { margin: 0 0 calc(6 * var(--u)); }
/* CLEAR-1B, C1: the five tabs fit a phone, on two lines when they must */
.page-tabs.actions-tabs { flex-wrap: wrap; overflow-x: visible; }
.page-tabs.actions-tabs a { flex: 0 1 auto; }
.integrity-fold > summary { flex-wrap: wrap; }
.integrity-fold > summary .tag { white-space: normal; }
details.action-row > summary .entry .name, details.action-row > summary .entry .path { overflow-wrap: anywhere; }
details.action-row > summary .n, details.actions-more > summary .n { flex: 0 0 auto; }
details.actions-more > summary > span:first-child { min-width: 0; flex: 1 1 auto; }
.sweep-banner .btn { margin: var(--u) 0 0; max-width: 100%; white-space: normal; }
/* CLEAR-1E, C: the documents and a document, as mock/documents.html and mock/document.html draw them. */
.doc-views { margin: 0 0 calc(4 * var(--u)); }
.doc-views .tag { min-height: var(--target); text-decoration: none; }
.doc-groups > .fold > .fold-body, .doc-folds > .fold > .fold-body { margin-left: 0; }
.doc-row .row-meta, .doc-tocheck .row-meta { display: flex; flex-wrap: wrap; gap: 2px calc(2 * var(--u)); align-items: center; }
.doc-tocheck .row .btn { align-self: center; }
.doc-head .chips { display: flex; flex-wrap: wrap; gap: var(--u); }
.doc-head h1.title { font-size: var(--t-title); line-height: 1.2; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.doc-head h1.title .code { font-size: 14px; margin-left: var(--u); }
.doc-meta { margin: 0; }
.doc-flag p { margin: 0 0 var(--u); }

/* DOC-1A: a reading of a document. The sha256 and the document's text wrap at any width; its quotes too. */
.reading-sha { overflow-wrap: anywhere; }
.doc-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t-small); margin: 0; }
.reading-item .main, .reading-quote { min-width: 0; overflow-wrap: anywhere; }
.check-about { border: 0; padding: 0; margin: 0; min-width: 0; }

/* CALL-1A (J89, J90): the call's page, as the second reference's call-record.html draws its parts. */
.call-counts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.call-points { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(4 * var(--u)); }
.sugg { border: 1px solid var(--line); background: var(--panel); padding: calc(3 * var(--u)) calc(4 * var(--u)); display: grid; gap: calc(2 * var(--u)); min-width: 0; overflow-wrap: anywhere; }
.sugg p { margin: 0; }
.line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.exits { margin-top: calc(1 * var(--u)); }
.live-check .late-text, .late-text { color: var(--late-text); }
.own-card { border-top: 1px solid var(--line); padding-top: calc(2 * var(--u)); }
.own-card .consent-buttons { margin-top: calc(2 * var(--u)); }
.call-acts { display: grid; gap: calc(2 * var(--u)); }
/* CALL-1B (J92): the current point, marked in words ('Current point') and by its edge; the reconciliation's bands. */
.sugg.current { border-color: var(--act); border-left-width: 4px; }
.current-mark[hidden] { display: none; }
.from-call .sugg { margin-top: calc(2 * var(--u)); }
.recorder { display: none; }
.laptop-only { display: none; }
.phone-only { display: block; }
@media (min-width: 1024px) {
  .laptop-only, .recorder { display: grid; gap: calc(2 * var(--u)); }
  .phone-only { display: none; }
}

/* DOC-2, G: a reading's page that says what it means */
.reading-left a { white-space: nowrap; }
.band-line { margin: 0 0 calc(3 * var(--u)); }
.reading-labels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
.reading-labels dd { min-width: 0; overflow-wrap: anywhere; }
.reading-exits { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.reading-exit-wrap { max-width: 260px; min-width: 0; }
.reading-consequence { margin: 0; }
.reading-answered { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.reading-answered .reading-state { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.reading-undo-notice { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.reading-undo-notice p { margin: 0; }
.reading-estimate .field-help { margin-top: 0; }
@media (min-width: 720px) { .reading-labels { grid-template-columns: 11em minmax(0, 1fr); gap: 4px 12px; } .reading-labels dd { margin: 0; } }

/* UNDO-1 (J98): the notice after an act, each page's last act with its Undo, Your acts, Roll back */
.act-notice-wrap { margin: 0 0 calc(4 * var(--u)); }
.act-notice-wrap > * + * { margin-top: calc(2 * var(--u)); }
div.act-notice { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
div.act-notice p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.act-refused { border-left-color: var(--late); }
.act-line { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.act-line p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
form.act-undo { margin: 0; }
.act-rows { list-style: none; margin: 0; padding: 0; }
.act-row { border-top: 1px solid var(--line); padding: calc(3 * var(--u)) 0; display: grid; gap: calc(1 * var(--u)); }
.act-row p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.act-row .act-what { font-weight: 600; }
.rollback { margin: calc(4 * var(--u)) 0 0; display: grid; gap: calc(1 * var(--u)); justify-items: start; }
.rollback-lines { margin: 0 0 calc(3 * var(--u)); padding-left: 1.2em; }
.rollback-lines li { overflow-wrap: anywhere; }

/* READ-2, E (J99): the reading page in the look of the mock-up the owner approved on 5 November 2026
   (docs/design/reading-v2/), which supersedes J42, J45 and J46 on this page only; the other pages follow in a later
   mission. Inter for the interface, Source Serif 4 for a rule's wording, both served by Standing itself (@fontsource,
   SIL Open Font License, public/assets/fonts/). Corners of 16 to 18 px, a border of 1.5 px. Dark mode derived from the
   light tokens (the architect's answer 1), every text and pill at 4.5:1 or more (the delivery lists them). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }

.rv-page {
  --rv-ground: #F4F1EA; --rv-card: #FFFFFF; --rv-soft: #FAF8F3; --rv-border: #E2DCD0; --rv-field: #CFC8BA;
  --rv-ink: #17171B; --rv-ink2: #4A4A55; --rv-ink3: #3A3A42; --rv-link: #2B3A67; --rv-hover: #EFEBE2;
  --rv-agreed-bg: #D6F0DE; --rv-agreed: #14532D; --rv-idea-bg: #E3E8F5; --rv-idea: #26355E;
  --rv-pact-bg: #EADFF9; --rv-pact: #4A1D8F; --rv-reserved-bg: #FCE6CB; --rv-reserved: #713A00;
  --rv-ordinary-bg: #E8E8EB; --rv-ordinary: #3A3A42; --rv-todo-bg: #FFF0B8; --rv-todo: #5E4500;
  --rv-dup-bg: #D5EEEC; --rv-dup: #0D4B50; --rv-warn-bg: #FBDCDB; --rv-warn: #7F1A1A; --rv-who-bg: #F1EEE6; --rv-who: #3A3A42;
  --rv-del-bg: #FCE3E3; --rv-del: #7F1A1A; --rv-add-bg: #D6F0DE; --rv-add: #14532D;
  --rv-dark-bg: #17171B; --rv-dark-ink: #FFFFFF; --rv-bar-bg: #17171B; --rv-bar-ink: #FFFFFF; --rv-fill: #17171B; --rv-fill-done: #2F8F57;
  --rv-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rv-serif: "Source Serif 4", Georgia, serif;
  background: var(--rv-ground);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) .rv-page {
    --rv-ground: #17171B; --rv-card: #222228; --rv-soft: #1C1C21; --rv-border: #3A3A42; --rv-field: #5A5A64;
    --rv-ink: #F4F1EA; --rv-ink2: #C9C5BC; --rv-ink3: #DAD6CC; --rv-link: #B9C6F0; --rv-hover: #2C2C33;
    --rv-agreed-bg: #14361F; --rv-agreed: #B7E8C6; --rv-idea-bg: #1F2A45; --rv-idea: #C9D5F2;
    --rv-pact-bg: #33215A; --rv-pact: #DCCBF7; --rv-reserved-bg: #4A2A06; --rv-reserved: #F8D3A6;
    --rv-ordinary-bg: #2E2E35; --rv-ordinary: #DADAE0; --rv-todo-bg: #463600; --rv-todo: #FBE29A;
    --rv-dup-bg: #0F3A3D; --rv-dup: #B4E6E2; --rv-warn-bg: #4D1717; --rv-warn: #F6C2C1; --rv-who-bg: #2A2A30; --rv-who: #DAD6CC;
    --rv-del-bg: #4D1717; --rv-del: #F6C2C1; --rv-add-bg: #14361F; --rv-add: #B7E8C6;
    --rv-dark-bg: #F4F1EA; --rv-dark-ink: #17171B; --rv-bar-bg: #0B0B0D; --rv-bar-ink: #F4F1EA; --rv-fill: #F4F1EA; --rv-fill-done: #6FD08F;
  }
}
:root[data-appearance="dark"] .rv-page {
  --rv-ground: #17171B; --rv-card: #222228; --rv-soft: #1C1C21; --rv-border: #3A3A42; --rv-field: #5A5A64;
  --rv-ink: #F4F1EA; --rv-ink2: #C9C5BC; --rv-ink3: #DAD6CC; --rv-link: #B9C6F0; --rv-hover: #2C2C33;
  --rv-agreed-bg: #14361F; --rv-agreed: #B7E8C6; --rv-idea-bg: #1F2A45; --rv-idea: #C9D5F2;
  --rv-pact-bg: #33215A; --rv-pact: #DCCBF7; --rv-reserved-bg: #4A2A06; --rv-reserved: #F8D3A6;
  --rv-ordinary-bg: #2E2E35; --rv-ordinary: #DADAE0; --rv-todo-bg: #463600; --rv-todo: #FBE29A;
  --rv-dup-bg: #0F3A3D; --rv-dup: #B4E6E2; --rv-warn-bg: #4D1717; --rv-warn: #F6C2C1; --rv-who-bg: #2A2A30; --rv-who: #DAD6CC;
  --rv-del-bg: #4D1717; --rv-del: #F6C2C1; --rv-add-bg: #14361F; --rv-add: #B7E8C6;
  --rv-dark-bg: #F4F1EA; --rv-dark-ink: #17171B; --rv-bar-bg: #0B0B0D; --rv-bar-ink: #F4F1EA; --rv-fill: #F4F1EA; --rv-fill-done: #6FD08F;
}
.rv-page main { background: var(--rv-ground); }
.rv-page .frame { max-width: 1168px; }
.rv { font-family: var(--rv-sans); color: var(--rv-ink); display: flex; flex-direction: column; gap: 28px; padding: 32px 0 120px; max-width: 1120px; margin: 0 auto; }
.rv *, .rv *::before, .rv *::after { box-sizing: border-box; }
.rv a { color: var(--rv-link); }
.rv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; justify-content: space-between; }
.rv-head-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 520px; }
.rv-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rv-ink2); }
.rv-title { margin: 0; font-family: var(--rv-serif); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--rv-ink); }
.rv-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rv-close { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 320px; text-align: right; }
.rv-fine { font-size: 12px; color: var(--rv-ink2); margin: 0; line-height: 1.45; }
.rv-mono { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.rv-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--rv-sans); padding: 7px 11px; border-radius: 999px; background: var(--rv-who-bg); color: var(--rv-who); max-width: 100%; overflow-wrap: anywhere; }
.rv-agreed, .rv-done { background: var(--rv-agreed-bg); color: var(--rv-agreed); }
.rv-idea { background: var(--rv-idea-bg); color: var(--rv-idea); }
.rv-pact { background: var(--rv-pact-bg); color: var(--rv-pact); }
.rv-reserved { background: var(--rv-reserved-bg); color: var(--rv-reserved); }
.rv-ordinary, .rv-no { background: var(--rv-ordinary-bg); color: var(--rv-ordinary); }
.rv-todo { background: var(--rv-todo-bg); color: var(--rv-todo); }
.rv-dup { background: var(--rv-dup-bg); color: var(--rv-dup); }
.rv-warn { background: var(--rv-warn-bg); color: var(--rv-warn); }
.rv-who, .rv-test { background: var(--rv-who-bg); color: var(--rv-who); }
.rv-pill.rv-rule { background: var(--rv-card); color: var(--rv-ink); border: 1.5px solid var(--rv-ink); font-family: ui-monospace, Menlo, monospace; }
.rv-rule-link { text-decoration: none; }
.rv-no { font-size: 13px; font-weight: 700; color: var(--rv-ink2); margin-right: 4px; background: none; }
.rv-ai { font-size: 12px; color: var(--rv-ink2); margin-left: auto; }
.rv-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.rv-dash { background: var(--rv-card); border: 1.5px solid var(--rv-border); border-radius: 16px; padding: 18px 20px; text-decoration: none; color: var(--rv-ink); display: flex; flex-direction: column; gap: 10px; }
.rv .rv-dash { color: var(--rv-ink); }
.rv-dash:hover, .rv-dash.is-open { border-color: var(--rv-ink); }
.rv-dash-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-dash-name { font-size: 13px; font-weight: 600; color: var(--rv-ink2); }
.rv-dash-count { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--rv-ink2); flex-wrap: wrap; }
.rv-big { font-size: 34px; font-weight: 700; line-height: 1; color: var(--rv-ink); }
.rv-track { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--rv-hover); overflow: hidden; -webkit-appearance: none; appearance: none; color: var(--rv-fill); }
.rv-track::-webkit-progress-bar { background: var(--rv-hover); border-radius: 999px; }
.rv-track::-webkit-progress-value { background: var(--rv-fill); border-radius: 999px; }
.rv-track::-moz-progress-bar { background: var(--rv-fill); border-radius: 999px; }
.rv-track.all::-webkit-progress-value { background: var(--rv-fill-done); }
.rv-track.all::-moz-progress-bar { background: var(--rv-fill-done); }
.rv-bands { display: flex; flex-direction: column; gap: 14px; }
.rv-band > summary, .rv-answered > summary, .rv-details > summary, .rv-foot-fold > summary, .rv-addline > summary, .rv-fold-btn > summary { list-style: none; cursor: pointer; }
.rv-band > summary::-webkit-details-marker, .rv-answered > summary::-webkit-details-marker, .rv-details > summary::-webkit-details-marker,
.rv-foot-fold > summary::-webkit-details-marker, .rv-addline > summary::-webkit-details-marker, .rv-fold-btn > summary::-webkit-details-marker { display: none; }
.rv-band-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--rv-card); border: 1.5px solid var(--rv-border); border-radius: 16px; padding: 18px 22px; min-height: 44px; }
.rv-band-head:hover, .rv-band[open] > .rv-band-head { border-color: var(--rv-ink); }
.rv-band-head::before { content: "\25B8"; font-size: 18px; width: 18px; color: var(--rv-ink); }
.rv-band[open] > .rv-band-head::before { content: "\25BE"; }
.rv-band-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
.rv-band-name { font-size: 20px; font-weight: 700; }
.rv-band-line { font-size: 14px; color: var(--rv-ink2); margin: 0; }
.rv-band-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-band-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 0 0 8px; }
.rv-empty, .rv-alldone { margin: 0; border-radius: 16px; padding: 18px 22px; font-size: 15px; font-weight: 600; }
.rv-alldone { background: var(--rv-agreed-bg); color: var(--rv-agreed); }
.rv-empty { background: var(--rv-card); color: var(--rv-ink2); border: 1.5px solid var(--rv-border); }
.rv-card { background: var(--rv-card); border: 1.5px solid var(--rv-border); border-radius: 18px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.rv-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.rv-box { border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rv-today { background: var(--rv-soft); }
.rv-proposed { background: var(--rv-card); border: 2px solid var(--rv-ink); }
.rv-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rv-ink2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rv-proposed > .rv-label { color: var(--rv-ink); }
.rv-today-text { margin: 0; font-family: var(--rv-serif); font-size: 18px; line-height: 1.5; color: var(--rv-ink3); overflow-wrap: anywhere; }
.rv-nothing { font-style: italic; color: var(--rv-ink2); }
.rv-proposed-text { margin: 0; font-family: var(--rv-serif); font-size: 21px; line-height: 1.45; font-weight: 600; color: var(--rv-ink); overflow-wrap: anywhere; }
.rv-proposed-text q { quotes: "\201C" "\201D"; }
.rv-lead { margin: 0; font-family: var(--rv-serif); font-size: 21px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.rv-del { background: var(--rv-del-bg); color: var(--rv-del); text-decoration: line-through; text-decoration-thickness: 1.5px; border-radius: 3px; padding: 0 2px; }
.rv-add { background: var(--rv-add-bg); color: var(--rv-add); text-decoration: none; border-radius: 3px; padding: 0 2px; }
.rv-against { margin: 0; display: flex; gap: 10px; align-items: flex-start; }
.rv-against-text { font-family: var(--rv-serif); font-size: 17px; line-height: 1.45; color: var(--rv-ink3); overflow-wrap: anywhere; }
.rv-why { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.5; flex-wrap: wrap; }
.rv-why .rv-label { flex: 0 0 auto; }
.rv-warn[role="note"], p.rv-warn { margin: 0; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; font-weight: 500; }
.rv-check { margin: 0; border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--rv-warn-bg); color: var(--rv-warn); }
.rv-narrowed { margin: 0; font-size: 13px; color: var(--rv-ink2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex-basis: 100%; }
.rv-where { margin: 0; font-size: 13px; color: var(--rv-ink2); line-height: 1.5; overflow-wrap: anywhere; }
.rv-quote { font-style: italic; }
.rv-speaker { font-weight: 600; color: var(--rv-ink3); }
.rv-details > summary { font: 500 13px/1.4 var(--rv-sans); color: var(--rv-link); text-decoration: underline; padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.rv-details .rv-hide, .rv-details[open] .rv-show { display: none; }
.rv-details[open] .rv-hide { display: inline; }
.rv-dl { border-top: 1px solid var(--rv-border); padding-top: 12px; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; font-size: 13px; line-height: 1.5; color: var(--rv-ink3); }
.rv-dl dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rv-ink2); margin-bottom: 4px; }
.rv-dl dd { margin: 0; overflow-wrap: anywhere; }
.rv-around { grid-column: 1 / -1; }
.rv-pre { white-space: pre-wrap; font-family: var(--rv-sans); font-size: 13px; background: var(--rv-soft); border-radius: 10px; padding: 10px 12px; margin: 0; color: var(--rv-ink3); }
.rv-exits { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--rv-hover); padding-top: 16px; }
.rv-form, .rv-inline-form { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.rv-btn { font: 600 14px/1.1 var(--rv-sans); border-radius: 999px; padding: 12px 18px; min-height: 44px; cursor: pointer; border: 1.5px solid var(--rv-ink); background: var(--rv-card); color: var(--rv-ink); display: inline-flex; align-items: center; }
.rv-btn:hover { background: var(--rv-hover); }
.rv-btn.rv-dark { background: var(--rv-dark-bg); color: var(--rv-dark-ink); border-color: var(--rv-dark-bg); }
.rv-btn.rv-dark:hover { opacity: 0.9; }
.rv-btn.rv-light { background: var(--rv-card); }
.rv-btn.rv-ghost { border-color: transparent; background: transparent; color: var(--rv-ink2); text-decoration: underline; text-underline-offset: 3px; }
.rv-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.rv-btn.rv-on-dark { border-color: var(--rv-bar-ink); }
.rv-link { font: 500 13px/1.4 var(--rv-sans); background: none; border: none; padding: 12px 6px; color: var(--rv-link); text-decoration: underline; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.rv-fold-btn { display: inline-block; }
.rv-fold-btn[open] { flex-basis: 100%; }
.rv-fold-body { padding-top: 12px; }
.rv-stack { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.rv-addline { display: inline-flex; align-items: center; gap: 8px; }
.rv-addline[open] { flex-basis: 100%; }
.rv-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.rv-field .rv-label { font-size: 12px; }
.rv select, .rv input[type="text"], .rv input[type="date"], .rv textarea { font: 500 14px var(--rv-sans); padding: 10px 12px; border: 1.5px solid var(--rv-field); border-radius: 10px; background: var(--rv-card); color: var(--rv-ink); min-height: 44px; max-width: 100%; }
.rv-addline input[type="text"] { width: 320px; }
.rv .rv-what textarea { width: 100%; box-sizing: border-box; font: 600 19px/1.4 var(--rv-serif); resize: vertical; overflow-wrap: anywhere; }
.rv-who-by { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; flex-basis: 100%; }
.rv-due-line { font-size: 13px; color: var(--rv-ink2); padding-bottom: 12px; }
.rv-change { flex-direction: row; align-items: center; gap: 8px; }
.rv-answered { background: var(--rv-soft); border: 1.5px dashed var(--rv-field); border-radius: 16px; padding: 6px 10px; }
.rv-answered > summary { font-size: 14px; font-weight: 600; padding: 10px 8px; min-height: 44px; display: flex; align-items: center; }
.rv-answered > summary::before { content: "\25B8\00a0"; }
.rv-answered[open] > summary::before { content: "\25BE\00a0"; }
.rv-lines { list-style: none; margin: 0; padding: 0; }
.rv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--rv-hover); font-size: 14px; scroll-margin-top: 16px; }
.rv-short { flex: 1 1 240px; min-width: 0; color: var(--rv-ink3); overflow-wrap: anywhere; }
.rv-by { font-size: 12px; color: var(--rv-ink2); }
.rv-foot, .rv-register { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--rv-ink2); border-top: 1px solid var(--rv-border); padding-top: 18px; }
.rv-foot-fold > summary { font-size: 14px; color: var(--rv-ink); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.rv-foot .doc-text { max-height: 480px; overflow: auto; white-space: pre-wrap; background: var(--rv-card); border-radius: 12px; padding: 12px; color: var(--rv-ink3); }
.rv-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); z-index: 21; background: var(--rv-bar-bg); color: var(--rv-bar-ink); padding: 14px 24px; }
.rv-bar-in { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rv-bar-text { font-size: 15px; font-weight: 600; flex: 1 1 260px; }
.rv-bar .rv-btn { background: transparent; color: var(--rv-bar-ink); }
.rv-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar) + 96px); z-index: 30; background: #2B2B33; color: #FFFFFF; border-radius: 999px; padding: 4px 10px 4px 20px; display: flex; gap: 12px; align-items: center; margin: 0; max-width: calc(100% - 32px); }
.rv-toast p { margin: 0; font-size: 14px; font-weight: 600; }
.rv-toast .rv-link { color: #FFFFFF; font-weight: 700; }
.rv-toast[hidden] { display: none; }
.rv .error-summary, .rv .notice:not(.rv-toast) { border-radius: 12px; }
@media (max-width: 599px) {
  .rv { padding-top: 20px; gap: 20px; }
  .rv-title { font-size: 30px; }
  .rv-progress { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rv-dash { padding: 14px; }
  .rv-big { font-size: 28px; }
  .rv-card { padding: 18px 16px; }
  .rv-band-head { padding: 14px 16px; }
  .rv-close { align-items: flex-start; text-align: left; }
  .rv-addline input[type="text"] { width: 100%; }
  .rv-bar { padding: 12px 16px; }
  .rv-toast { bottom: calc(var(--bar) + 132px); }
}
@media (min-width: 1024px) {
  .rv-bar { bottom: 0; } /* the phone's tab bar is gone: the reading's bar at the foot of the window */
  .rv-toast { bottom: 96px; }
}
.rv-actfields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
/* PACK-2 (J100): the package's page in READ-2's look; the bar's drafting steps and its ticks. Every identifier a pill
   in the flow of its line, never placed over text. */
.pk-section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.pk-h { margin: 0; font-size: 20px; font-weight: 700; color: var(--rv-ink); }
.pk-cards { display: flex; flex-direction: column; gap: 14px; }
.pk-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--rv-ink3); }
.pk-waits { margin: 0; font-size: 15px; font-weight: 600; color: var(--rv-ink); overflow-wrap: anywhere; }
.pk-ready { color: var(--rv-agreed); }
.pk-tick { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 600; }
.pk-tick input, .rv-tick input { width: 22px; height: 22px; flex: 0 0 auto; }
.pk-test { padding-top: 8px; font-size: 14px; }
.pk-accept-all-wait { font-weight: 600; }
.rv-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rv-step { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--rv-bar-ink); opacity: 0.7; }
.rv-step-done { opacity: 1; }
.rv-step-done::before { content: "\2713\00a0"; }
.rv-step-now { opacity: 1; background: var(--rv-bar-ink); color: var(--rv-bar-bg); }
.rv-ticks > summary { list-style: none; cursor: pointer; }
.rv-ticks > summary::-webkit-details-marker { display: none; }
.rv-on-dark-link { color: var(--rv-bar-ink); }
.rv-tick-list { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.rv-tick { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; }
.pk-num { font-variant-numeric: tabular-nums; }