/* Grove's pages (ITEM-2 ratify, ITEM-8 overview, garden and decision pages; PLAT-1397 record text).
   Kapable design language 1.37 on tokens.css: the Document page, Prose surface, Tabs, Consent form
   and Refusal page recipes (DESIGN.md section 9), the table from "List row" and the Badge dots.
   The decision log (list, decision page, ratify page) takes Cordon's structure: one bar of view
   tabs, one row per decision with one state tag, a two-column record page, a history ledger.
   No script. Every value reads the language's tokens, so the org's look (linked after tokens.css,
   presets D21) restyles the page; a value with no role is literal with its reason on the line.
   The accent comes from the look; a page that links no look (no organisation in its address)
   keeps the default org colour, whose dark values tokens.css does not hold (PLAT-1538). */
@font-face {
  font-family: 'InterK';
  src: url('/assets/inter-subset-fbea9927.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not(:has(link[data-kapable-look])) { --accent-text: #fc8f6d; --accent-soft: color-mix(in oklab, #ab4725 26%, transparent); }
}
:root[data-theme='dark']:not(:has(link[data-kapable-look])) { --accent-text: #fc8f6d; --accent-soft: color-mix(in oklab, #ab4725 26%, transparent); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: 1.45;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: var(--font-ui-features);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) body { color-scheme: dark; } }
:root[data-theme='dark'] body { color-scheme: dark; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; /* raw: a visually hidden box, not a density value */
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Page widths: a record reads in the 720 px document column; ledgers get the room they need. */
.page { max-width: 720px; margin: 0 auto; padding: calc(28px * var(--pad-factor)); box-sizing: border-box; }
.page.wide { max-width: 1120px; }
.page.full { max-width: 1400px; }
.page.full .sec:not(#controls) { max-width: 1120px; }
.page.record-page { max-width: 1160px; }

/* Header (Document page). The kind line carries the way back. */
.ak-head { display: grid; gap: calc(10px * var(--pad-factor)); padding-bottom: calc(22px * var(--pad-factor)); margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.ak-kind { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-secondary); font-weight: var(--control-weight); }
.ak-kind a { color: var(--text-2); text-decoration: none; }
.ak-kind a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.ak-kind .sep { color: var(--text-3); font-weight: 400; } /* raw: weight 400, plain text inside a heavier element; no weight role holds it */
.ak-title { margin: 0; font-family: var(--font-display); font-feature-settings: var(--font-display-features); font-size: var(--type-greeting); font-weight: calc(var(--title-weight) + 30); letter-spacing: calc(var(--title-tracking) - 0.007em); line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }
.page.wide .ak-title, .page.full .ak-title { font-size: var(--type-view-title); letter-spacing: var(--title-tracking); }
.ak-meta { display: flex; flex-wrap: wrap; gap: calc(6px * var(--pad-factor)) calc(16px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-secondary); }
.ak-meta strong { color: var(--text-2); font-weight: var(--control-weight); }
.ak-meta a.jump, .jump-line a.jump { color: var(--text-2); font-weight: var(--control-weight); text-decoration: none; }
.jump-line { margin: -8px 0 18px; font-size: var(--type-secondary); }
#ratify { scroll-margin-top: 16px; }
.ak-meta a.jump:hover, .jump-line a.jump:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* Sections of an operator page: a plain heading with its count after it, then the rows. */
.sec { margin: 0 0 34px; }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4px * var(--pad-factor)) calc(10px * var(--pad-factor)); margin: 0 0 12px; }
.sec-h h2 { margin: 0; font-size: var(--type-subheading); font-weight: var(--heading-weight); }
.sec-h .count { color: var(--text-3); font-size: var(--type-control); font-variant-numeric: tabular-nums; }
.sec-h .aside { margin-left: auto; color: var(--text-3); font-size: var(--type-secondary); }
.sec-h .aside a { color: var(--text-2); }

/* Ledger: one line per record (the table from "List row"); a record's detail opens on its own page. */
.ledger-wrap { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: var(--type-control); }
.ledger th { padding: 0 calc(10px * var(--pad-factor)) calc(8px * var(--pad-factor)); border-bottom: 1px solid var(--line); color: var(--text-3); font-size: calc(var(--type-meta) * 11.5 / 12);
             font-weight: var(--control-weight); text-align: left; white-space: nowrap; }
.ledger td { padding: calc(9px * var(--pad-factor)) calc(10px * var(--pad-factor)); border-bottom: 1px solid var(--line); vertical-align: baseline; }
.ledger tbody tr:hover td { background: var(--surface-2); }
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger .n { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .sub { display: block; color: var(--text-3); font-size: var(--type-secondary); }
.ledger .t { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger .when { color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ledger a.rec { color: var(--text); font-family: var(--font-body); font-weight: var(--row-title-weight); text-decoration: none; }
.ledger a.rec:hover { text-decoration: underline; text-underline-offset: 2px; }
a.card-code { color: var(--text-2); font-variant-numeric: tabular-nums; text-underline-offset: 2px; }
a.card-code:hover { color: var(--text); }
.ledger .act { text-align: right; white-space: nowrap; }
.ledger .clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* What waits for the visitor is said in words and weight; the overview keeps colour for failures. */
.waits { color: var(--text); font-weight: var(--heading-weight); }
a.waits { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
a.waits:hover { text-decoration-color: currentColor; }
.failed { color: var(--bad); font-weight: var(--control-weight); }
.quiet { color: var(--text-3); }

/* The controls matrix: products are rows, controls are columns; a failure is the only colour.
   A cell opens its evidence in the row under its product (:target), with no script. */
/* A border, not an inset shadow: the pinned product column paints over a shadow drawn under it. */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); }
.matrix { border-collapse: separate; border-spacing: 0; font-size: var(--type-meta); min-width: 100%; }
.matrix th, .matrix td { padding: 0; }
.matrix thead th { vertical-align: bottom; border-bottom: 1px solid var(--line); }
.matrix th.corner { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left;
                    padding: 0 calc(14px * var(--pad-factor)) calc(10px * var(--pad-factor)); color: var(--text-3); font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: var(--control-weight);
                    box-shadow: inset -1px 0 0 var(--line); } /* raw: the pinned column's rule, not an edge or elevation */
.matrix th.ctl { min-width: 64px; height: 148px; padding: 0 0 calc(10px * var(--pad-factor)); } /* raw: the turned column heads' room, table geometry, not a control height */
.matrix th.ctl span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
                      color: var(--text-2); font-size: var(--type-meta); font-weight: var(--control-weight); line-height: 1.2; text-align: left; }
.matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 0 calc(14px * var(--pad-factor));
                   font-size: var(--type-control); font-weight: var(--row-title-weight); font-family: var(--font-body); white-space: nowrap; box-shadow: inset -1px 0 0 var(--line); } /* raw: the pinned column's rule, not an edge or elevation */
.matrix tbody th .sub { display: block; color: var(--text-3); font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: 400; } /* raw: weight 400, plain text inside a heavier element; no weight role holds it */
.matrix tbody tr.prod + tr.prod > *, .matrix tbody tr.ev + tr.prod > * { border-top: 1px solid var(--line); }
.matrix td.cell a { display: grid; place-items: center; min-height: 44px; padding: calc(2px * var(--pad-factor)) calc(4px * var(--pad-factor)); color: var(--text-2); /* raw: a cell is a 44px target, the floor in every preset (presets DESIGN 2.1) */
                    font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: var(--control-weight); line-height: 1.2; text-align: center; text-decoration: none;
                    font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix td.cell a:hover { background: var(--hover); }
.matrix td.cell a:focus-visible { outline-offset: -2px; }
.matrix td.cell.na { color: var(--text-3); text-align: center; height: 44px; } /* raw: a cell is a 44px target, the floor in every preset (presets DESIGN 2.1) */
.matrix td.cell.todo a { color: var(--text-3); }
.matrix td.cell.holds a { color: var(--text); }
.matrix td.cell.fail a { color: var(--bad); }
.matrix td.cell.fail a::before { content: ''; display: block; width: 6px; height: 6px; margin-bottom: 3px; border-radius: 50%; /* raw: a dot, round in every look */
                                 background: var(--bad); }
/* One evidence row under each product holds its cells' evidence; the targeted one opens. */
.matrix tr.ev { display: none; }
.matrix tr.ev:has(.ev-b:target) { display: table-row; }
.matrix tr.ev .ev-b { display: none; scroll-margin-top: 140px; }
.matrix tr.ev .ev-b:target { display: grid; }
.matrix tr.prod:has(+ tr.ev .ev-b:target) > * { background: var(--surface-2); }
.matrix tr.ev > td { padding: 0; background: var(--surface-2); box-shadow: inset 0 1px 0 var(--line); } /* raw: the evidence row's top rule, not an edge or elevation */
.ev-b { position: sticky; left: 0; box-sizing: border-box; width: min(100%, var(--ev-w, 760px)); max-width: calc(100vw - 56px);
        display: grid; gap: calc(10px * var(--pad-factor)); padding: calc(14px * var(--pad-factor)) calc(16px * var(--pad-factor)) calc(16px * var(--pad-factor)); font-size: var(--type-control); }
.ev-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4px * var(--pad-factor)) calc(12px * var(--pad-factor)); }
.ev-h strong { font-size: var(--type-body); font-weight: var(--heading-weight); }
.ev-h .close { margin-left: auto; color: var(--text-2); font-size: var(--type-secondary); font-weight: var(--control-weight); }
.ev-b p { margin: 0; color: var(--text-2); line-height: 1.5; }
.ev-b p strong { color: var(--text); font-weight: var(--control-weight); }
.ev-b ul { margin: 0; padding-left: calc(18px * var(--pad-factor)); color: var(--text-2); }
.ev-b li + li { margin-top: 4px; }
.ev-b .facts { display: flex; flex-wrap: wrap; gap: calc(4px * var(--pad-factor)) calc(16px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-secondary); }

/* The matrix on a phone: one short list per product, only what applies, each opening in place. */
.matrix-phone { display: none; }
.mp h3 { display: flex; align-items: baseline; gap: calc(10px * var(--pad-factor)); margin: 0 0 4px; font-size: var(--type-body); font-weight: var(--heading-weight); }
.mp h3 .sub { color: var(--text-3); font-size: var(--type-secondary); font-weight: 400; } /* raw: weight 400, plain text inside a heavier element; no weight role holds it */
.mp ul { margin: 0 0 18px; padding: 0; list-style: none; }
.mp li { border-bottom: 1px solid var(--line); }
.mp-i > summary { display: flex; align-items: center; gap: calc(8px * var(--pad-factor)); min-height: 44px; list-style: none; cursor: pointer; font-size: var(--type-description); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
.mp-i > summary::-webkit-details-marker { display: none; }
.mp-i > summary svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--text-3); stroke-width: var(--glyph-stroke); /* raw: size of a glyph, not a density value */
                      stroke-linecap: var(--glyph-cap); stroke-linejoin: var(--glyph-join); }
.mp-i[open] > summary svg { transform: rotate(90deg); }
.mp-t { flex: 1; min-width: 0; }
.mp-s { flex: none; color: var(--text-2); font-size: var(--type-secondary); font-weight: var(--control-weight); font-variant-numeric: tabular-nums; }
.mp-i > .ev-b { padding: 0 0 calc(14px * var(--pad-factor)) calc(22px * var(--pad-factor)); }

/* A read time said once, and a failed or missing read said in place (principle 4). */
.stamp { margin: 10px 0 0; color: var(--text-3); font-size: var(--type-secondary); }
.empty { margin: 0; padding: calc(12px * var(--pad-factor)) 0; color: var(--text-2); font-size: var(--type-control); }

/* State tags (Badge and count; the Document page's status tag): one per decision. Settled is white
   on a fill token, waiting is an outline, and only "waits for you" takes the accent's text tone,
   which the Attention list keeps for exactly that (1.21.0). History is the quietest. */
.tag { display: inline-block; padding: 2px 7px; border-radius: var(--radius-tag); font-size: var(--type-tag); font-weight: var(--heading-weight); line-height: 1.5;
       white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag.ok { background: var(--ok-fill); color: #fff; } /* raw: white on the fill tokens in both themes (Badge and count, D30) */
.tag.fill { background: var(--neutral-fill); color: #fff; } /* raw: white on the fill tokens in both themes (Badge and count, D30) */
.tag.edge { color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag.waits { color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-text) 45%, transparent); } /* raw: the accent text tone as an edge, no edge token holds it */
.tag.soft { background: var(--surface-3); color: var(--text-2); }
.tag.gone { color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); }

/* The decision log's bar: the views as underline tabs (Cordon's status bar; every tab an address on
   the three filters), and a search that Enter sends. The hairline runs under the whole bar. */
.dl-lede { margin: -4px 0 14px; color: var(--text-2); font-size: var(--type-description); line-height: 1.5; }
.dl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--pad-factor)) calc(16px * var(--pad-factor)); box-shadow: inset 0 -1px 0 var(--line); } /* raw: the bar's hairline, drawn so the chosen tab's line can sit on it */
.vtabs { display: flex; flex: 1 1 auto; min-width: 0; gap: calc(2px * var(--pad-factor)); overflow-x: auto; scrollbar-width: none; }
.vtabs::-webkit-scrollbar { display: none; }
.vtab { display: inline-flex; align-items: center; height: var(--list-row-h); padding: 0 calc(10px * var(--pad-factor)); color: var(--text-2); font-size: var(--type-control);
        font-weight: var(--control-weight); white-space: nowrap; text-decoration: none; }
.vtab:hover { color: var(--text); }
.vtab[aria-current='page'] { color: var(--text); box-shadow: inset 0 -2px 0 var(--text); } /* raw: the chosen tab's underline, in ink as Cordon draws it; the accent is kept for what waits */
.vtab:focus-visible { outline-offset: -2px; }
.dl-search { flex: 0 1 260px; margin: 0 0 calc(4px * var(--pad-factor)); }
.dl-search .field { max-width: none; }
.dl-said { margin: calc(10px * var(--pad-factor)) 0 0; color: var(--text-2); font-size: var(--type-secondary); }
.dl-said a { color: var(--text-2); font-weight: var(--control-weight); text-underline-offset: 2px; }
.dl-said a:hover { color: var(--text); }

/* The decision log's rows (List row; the Project list's whole-row link): number, title and its
   meta line, one state tag, the day. A row that waits for the visitor has the accent dot. */
.dlog { margin: 0; padding: 0; list-style: none; }
.dl-row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px 64px; grid-template-areas: 'n main state when'; /* raw: column geometry, the widths of "D9999", two tags and a day */
          column-gap: calc(14px * var(--pad-factor)); align-items: baseline; padding: calc(11px * var(--pad-factor)) calc(8px * var(--pad-factor)); border-bottom: 1px solid var(--line); }
.dlog.act .dl-row { grid-template-columns: 52px minmax(0, 1fr) 150px 100px 64px; grid-template-areas: 'n main state act when'; } /* raw: column geometry, as above plus the Ratify button */
.dl-row:hover { background: var(--hover); }
.dl-n { grid-area: n; color: var(--text-2); font-size: var(--type-control); font-weight: var(--control-weight); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dl-main { grid-area: main; min-width: 0; overflow-wrap: anywhere; } /* a gap's reason can hold a long path */
.dl-t { color: var(--text); font-family: var(--font-body); font-size: var(--type-body); font-weight: var(--row-title-weight); line-height: 1.4; text-decoration: none; }
.dl-t::after { content: ''; position: absolute; inset: 0; } /* the whole row opens the decision (Project list) */
@supports selector(:has(*)) {
  .dl-t:focus-visible { outline: none; }
  .dl-row:has(.dl-t:focus-visible) { outline: 2px solid var(--accent-ring); outline-offset: -2px; }
}
.dl-tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dl-meta { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--type-secondary); }
.dl-state { grid-area: state; display: flex; flex-wrap: wrap; gap: 4px; }
.dl-when { grid-area: when; position: relative; z-index: 1; justify-self: end; color: var(--text-3); font-size: var(--type-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-act { grid-area: act; position: relative; z-index: 1; justify-self: end; }
@media (hover: hover) {
  .dl-act { visibility: hidden; }
  .dl-row:hover .dl-act, .dl-row:focus-within .dl-act { visibility: visible; }
}
.wdot { display: inline-block; width: 6px; height: 6px; margin: 0 8px 0 1px; border-radius: 50%; vertical-align: 0.12em; /* raw: a dot, round in every look */
        background: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); } /* raw: the Attention list's waiting dot and halo */
.dl-row.past .dl-t { color: var(--text-2); }
.dl-row.gap { padding-top: calc(7px * var(--pad-factor)); padding-bottom: calc(7px * var(--pad-factor)); }
.dl-row.gap:hover { background: transparent; }
.dl-row.gap .dl-n, .dl-gap { color: var(--text-3); font-size: var(--type-secondary); }
.dl-row.gap .dl-meta { display: inline; margin: 0 0 0 8px; }

/* A record's page (Cordon's decision page): the header and record on the left, what to do beside it,
   held in view at desktop; one column on a phone. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr; grid-template-areas: 'head side' 'main side'; /* raw: the side column's width, Cordon's 20rem */
       column-gap: calc(48px * var(--pad-factor)); align-items: start; }
.doc-head { grid-area: head; min-width: 0; }
.doc-main { grid-area: main; min-width: 0; }
.doc-side { grid-area: side; position: sticky; top: 20px; display: grid; gap: calc(14px * var(--pad-factor)); max-height: calc(100vh - 40px); overflow-y: auto;
            padding: 2px; margin: -2px; } /* raw: room for focus rings inside the scrolling column, given back by the margin */
.doc-side > * { margin: 0; }
.doc-side .field { max-width: none; }
.doc-side .actions.wide .btn.primary { flex: 1 1 100%; }
.note.phone-only, .jump-line { display: none; }
.dh { gap: calc(8px * var(--pad-factor)); }
.dh-line { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6px * var(--pad-factor)) calc(10px * var(--pad-factor)); color: var(--text-2); font-size: var(--type-control);
           font-weight: var(--control-weight); }
.dh-line .tag + .tag { margin-left: -4px; }
.dh-n { color: var(--text); font-variant-numeric: tabular-nums; }
.dh-by { margin: 0; color: var(--text-3); font-size: var(--type-secondary); line-height: 1.5; }

/* Sections of the record: a sentence-case label over each part (section 4), the decision and its
   alternative as two cards with the reason between them, the check beside the impact. */
.eyebrow { margin: 0 0 calc(10px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight); line-height: 1.3; }
.fsec { margin: 0 0 calc(30px * var(--pad-factor)); }
.opts { display: grid; gap: calc(12px * var(--pad-factor)); }
.opt { padding: calc(14px * var(--pad-factor)) calc(18px * var(--pad-factor)) calc(16px * var(--pad-factor)); border-radius: var(--radius-card); background: var(--surface-2); box-shadow: var(--card-edge); }
.opt.chosen { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* A chosen option of a decision that no longer stands (revoked, rejected, replaced, withdrawn):
   kept on record, drawn like the options around it, not as the one in force. */
.opt.chosen.ended { box-shadow: inset 0 0 0 1px var(--line); }
.opt.chosen.ended .prose { color: var(--text-2); }
.opt:not(.chosen) .prose { color: var(--text-2); }
.opt-h { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4px * var(--pad-factor)) calc(10px * var(--pad-factor)); margin: 0 0 calc(8px * var(--pad-factor)); }
.opt-h h3 { margin: 0; font-size: var(--type-body); font-weight: var(--heading-weight); }
.opt-state { color: var(--text-3); font-size: var(--type-secondary); font-weight: var(--control-weight); }
/* Why the chosen option won: under its card, unboxed, its text lined up with the card's text, and
   nearer the chosen card than the alternative so it reads as the chosen card's reason. */
.opt-why { padding: 0 calc(18px * var(--pad-factor)) calc(8px * var(--pad-factor)); }
.why-none { margin: 0; color: var(--text-3); font-size: var(--type-secondary); line-height: 1.5; }
.fpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(28px * var(--pad-factor)); }
.fpair .prose { font-size: var(--type-body); }
.rec-links { padding-top: calc(18px * var(--pad-factor)); border-top: 1px solid var(--line); }
.links { display: grid; gap: calc(7px * var(--pad-factor)); margin: 0; }
.links > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: calc(14px * var(--pad-factor)); } /* raw: the label column's width, "Relied on by" at 12.5 px */
.links dt { color: var(--text-3); font-size: var(--type-secondary); font-weight: var(--control-weight); line-height: 1.6; }
.links dd { margin: 0; color: var(--text); font-size: var(--type-description); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.links dd a { color: var(--text); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.links dd a:hover { text-decoration-color: currentColor; }

/* History as a signed ledger: one hairline, a dot per event, the ratification's dot filled in the
   organisation's colour, the ratifier's own words set under it in the title face. */
.hist { margin: calc(34px * var(--pad-factor)) 0 0; }
.tl { position: relative; margin: 0; padding: 0 0 0 calc(24px * var(--pad-factor)); list-style: none; }
.tl-i { position: relative; padding: 0 0 calc(20px * var(--pad-factor)); }
.tl-i:last-child { padding-bottom: 0; }
/* The hairline runs dot to dot, one piece per entry, so it stops at the last event, not under its words. */
.tl-i:not(:last-child)::before { content: ''; position: absolute; left: calc(-24px * var(--pad-factor) + 4px); top: 10px; bottom: -6px; width: 1px; background: var(--line-strong); } /* raw: the ledger's hairline, geometry not a density value */
.tl-dot { position: absolute; left: calc(-24px * var(--pad-factor)); top: 6px; width: 9px; height: 9px; border-radius: 50%; /* raw: a dot, round in every look */
          background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--text-3), 0 0 0 3px var(--surface); } /* raw: the dot's ring, and the ground cut around it so the hairline stops short */
.tl-i.signed .tl-dot { background: var(--accent); box-shadow: 0 0 0 3px var(--surface); } /* raw: the ground cut around the dot */
.tl-what { margin: 0; color: var(--text-2); font-size: var(--type-body); line-height: 1.45; }
.tl-what strong { color: var(--text); font-weight: var(--heading-weight); }
.tl-when { margin: 2px 0 0; color: var(--text-3); font-size: var(--type-secondary); font-variant-numeric: tabular-nums; }
.tl-words { margin: calc(10px * var(--pad-factor)) 0 0; padding: 0; }
.tl-words p { margin: 0; color: var(--text); font-size: var(--type-body);
              line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
/* PLAT-2151: a rejected or revoked decision's state line, and the reason its person typed set under
   it as the decision's own sentence, the way the Why sits under the chosen card. */
.said { margin: 0 0 calc(18px * var(--pad-factor)); }
.said-line { margin: 0; color: var(--text-2); font-size: var(--type-body); line-height: 1.45; }
.said-line strong { color: var(--text); font-weight: var(--heading-weight); }
.said-words { margin: calc(8px * var(--pad-factor)) 0 0; padding: 0; }
.said-after { margin: calc(8px * var(--pad-factor)) 0 0; color: var(--text-3); font-size: var(--type-secondary); line-height: 1.45; }
.said-words p { margin: 0; color: var(--text); font-family: var(--font-display); font-feature-settings: var(--font-display-features); font-size: var(--type-dialog-title);
                line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The side column's cards: what to do, who ratified, and the three axes. */
.side-card .card-b { gap: calc(10px * var(--pad-factor)); padding: calc(14px * var(--pad-factor)) calc(16px * var(--pad-factor)) calc(16px * var(--pad-factor)); }
.side-h { margin: 0; font-size: var(--type-body); font-weight: var(--heading-weight); }
.side-p { margin: 0; color: var(--text-2); font-size: var(--type-description); line-height: 1.5; }
.btn.block { width: 100%; box-sizing: border-box; }
.kv { display: grid; gap: calc(6px * var(--pad-factor)); margin: 0; }
.kv > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: calc(10px * var(--pad-factor)); } /* raw: the label column's width, "Ratification" at 12.5 px */
.kv dt { color: var(--text-3); font-size: var(--type-secondary); line-height: 1.55; }
.kv dd { margin: 0; color: var(--text); font-size: var(--type-control); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The record: formatted (Prose surface at reading size) or exactly as stored, one switch for both. */
.rec { margin: 0 0 26px; }
.rec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--pad-factor)) calc(12px * var(--pad-factor)); margin: 0 0 18px; }
.rec-bar .hint { flex: 1 1 220px; }
.view-switch { display: inline-grid; grid-auto-flow: column; gap: calc(2px * var(--pad-factor)); padding: calc(2px * var(--pad-factor)); border-radius: calc(var(--radius-row) + 2px); background: var(--field); /* raw: + 2px keeps the track concentric around its 2px-inset segments */
               box-shadow: var(--control-edge); }
.view-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } /* raw: a visually hidden box, not a control height */
.view-switch label { display: inline-flex; align-items: center; height: calc(var(--control-h) * 28 / 30); padding: 0 calc(12px * var(--pad-factor)); border-radius: var(--radius-row);
                     color: var(--text-2); font-size: var(--type-secondary); font-weight: var(--control-weight); white-space: nowrap; cursor: pointer; }
.view-switch label:hover { color: var(--text); }
.view-switch input:checked + label { background: var(--surface); color: var(--text);
                                     box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--line); } /* raw: the chosen segment's lift, no elevation token holds it */
.view-switch input:focus-visible + label { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.rec:has(#view-stored:checked) .rec-formatted { display: none; }
.rec:not(:has(#view-stored:checked)) .rec-stored { display: none; }
.field-h { margin: 26px 0 8px; font-size: var(--type-dialog-title); font-weight: var(--heading-weight); line-height: 1.3; }
.rec-formatted > .field-h:first-child, .rec-stored > .field-h:first-child { margin-top: 0; }
.rec-stored { margin: 0 0 calc(30px * var(--pad-factor)); }
.stored { margin: 0; padding: calc(12px * var(--pad-factor)) calc(14px * var(--pad-factor)); border-radius: var(--radius-field); background: var(--field); box-shadow: var(--control-edge);
          color: var(--text); font: var(--type-secondary)/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* raw: the stored text in a fixed-width face, which no look changes; no face token holds it */
          white-space: pre-wrap; overflow-wrap: anywhere; }
.md-ctl { padding: 0 calc(3px * var(--pad-factor)); border-radius: calc(var(--radius-tag) * 2 / 3); background: var(--surface-3); color: var(--text); font: var(--control-weight) var(--type-tag)/1.4 var(--font-ui);
          font-variant-numeric: tabular-nums; white-space: nowrap; }

.prose { max-width: 720px; color: var(--text); font-family: var(--font-body); font-size: var(--type-subheading); line-height: 1.6; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin: 26px 0 8px; color: var(--text); font-weight: var(--heading-weight);
                                                                   line-height: 1.3; text-wrap: balance; }
.prose h1, .prose h2 { font-size: calc(var(--type-view-title) * 20 / 22); letter-spacing: var(--title-tracking); }
.prose h3 { font-size: var(--type-dialog-title); }
.prose h4 { font-size: var(--type-subheading); }
.prose h5, .prose h6 { font-size: var(--type-body); }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose .md-table, .prose .md-code, .prose .md-raw, .prose .md-refs { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: calc(22px * var(--pad-factor)); }
.prose li + li { margin-top: 4px; }
.prose li > ul, .prose li > ol { margin: 4px 0 0; }
.prose li:has(> input[type='checkbox']) { list-style: none; margin-left: -22px; }
.prose li > input[type='checkbox'] { margin: 0 6px 0 0; accent-color: var(--accent); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: var(--heading-weight); }
.prose blockquote { padding-left: calc(16px * var(--pad-factor)); color: var(--text-2); }
.prose hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line); }
.prose code { padding: calc(1px * var(--pad-factor)) calc(4px * var(--pad-factor)); border-radius: calc(var(--radius-tag) * 2 / 3); background: var(--field);
              font: var(--type-control)/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* raw: code in a fixed-width face, which no look changes; no face token holds it */
.prose pre { margin: 0; padding: calc(12px * var(--pad-factor)) calc(14px * var(--pad-factor)); border-radius: var(--radius-field); background: var(--field); box-shadow: var(--control-edge);
             overflow-x: auto; font: var(--type-secondary)/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* raw: code in a fixed-width face, which no look changes; no face token holds it */
.prose pre code { padding: 0; background: transparent; font: inherit; }
.prose .md-lang { margin: 0 0 6px; color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight); }
.prose .md-table { overflow-x: auto; }
.prose .md-table th, .prose .md-table td { overflow-wrap: break-word; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--type-description); line-height: 1.45; }
.prose th { padding: 0 calc(10px * var(--pad-factor)) calc(8px * var(--pad-factor)); border-bottom: 1px solid var(--line); color: var(--text-3); font-size: calc(var(--type-meta) * 11.5 / 12); font-weight: var(--control-weight);
            text-align: left; vertical-align: bottom; }
.prose td { padding: calc(9px * var(--pad-factor)) calc(10px * var(--pad-factor)); border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th:first-child, .prose td:first-child { padding-left: 0; }
.prose .al-r { text-align: right; }
.prose .al-c { text-align: center; }
.prose .md-dest { color: var(--text-3); font-size: var(--type-control); overflow-wrap: anywhere; }
.prose .md-html, .prose .md-raw { color: var(--text-2); font-size: var(--type-control); white-space: pre-wrap; overflow-wrap: anywhere; }
.prose .md-refs { display: grid; gap: calc(4px * var(--pad-factor)); padding-top: calc(10px * var(--pad-factor)); border-top: 1px solid var(--line); font-size: var(--type-control); }
.prose .md-refs > div { display: flex; flex-wrap: wrap; gap: calc(2px * var(--pad-factor)) calc(8px * var(--pad-factor)); }
.prose .md-refs dt { color: var(--text-3); font-weight: var(--control-weight); }
.prose .md-refs dd { margin: 0; color: var(--text-2); overflow-wrap: anywhere; }

/* Short facts beside a record: one line each, label then value. */
.rows { display: grid; margin: 0; }
.rows > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: calc(12px * var(--pad-factor)); padding: calc(9px * var(--pad-factor)) 0; border-top: 1px solid var(--line); }
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows dt { color: var(--text-2); font-size: var(--type-control); font-weight: var(--control-weight); }
.rows dd { margin: 0; color: var(--text); font-family: var(--font-body); font-size: var(--type-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.rows dd a { color: var(--text); }

/* Cards (Card inside a page): the ratify form and the provenance of a ratification. */
.card { margin: 0 0 14px; border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--card-edge); overflow: hidden; }
.card-h { padding: calc(13px * var(--pad-factor)) calc(16px * var(--pad-factor)); border-bottom: 1px solid var(--line); }
.card-h strong { display: block; font-size: var(--type-body); font-weight: var(--heading-weight); }
.card-b { display: grid; gap: calc(12px * var(--pad-factor)); padding: calc(14px * var(--pad-factor)) calc(16px * var(--pad-factor)); }

/* Consent form (the ratify form). */
.doc-text { margin: 0; color: var(--text); font: var(--type-subheading)/1.6 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.form { display: grid; gap: calc(14px * var(--pad-factor)); }
.form > * { margin: 0; }
.signer { margin: 0; color: var(--text-2); font-size: var(--type-description); line-height: 1.5; overflow-wrap: anywhere; }
.signer strong { color: var(--text); font-weight: var(--control-weight); }
.fld { display: grid; gap: calc(6px * var(--pad-factor)); min-width: 0; }
.fld > label { font-size: var(--type-control); font-weight: var(--control-weight); color: var(--text); }
.field { width: 100%; max-width: 420px; height: var(--control-h); padding: 0 calc(10px * var(--pad-factor)); border-radius: var(--radius-field); border: 0; background: var(--field);
         box-shadow: var(--control-edge); color: var(--text); font: inherit; font-size: var(--type-control); box-sizing: border-box; }
.field:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); } /* raw: focus ring, no elevation token holds it */
textarea { width: 100%; min-height: 88px; padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor)); resize: vertical; border: 0; border-radius: var(--radius-field); box-sizing: border-box; /* raw: field geometry (four lines), not a control height */
           background: var(--field); box-shadow: var(--control-edge); color: var(--text); font: var(--type-body)/1.4 var(--font-ui); }
textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); } /* raw: focus ring, no elevation token holds it */
.hint { margin: 0; color: var(--text-3); font-size: var(--type-meta); line-height: 1.45; }
/* The second-factor fields (SIG-240 part 2): a short code box, and the backup code behind a disclosure. */
.field.code { max-width: 168px; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.alt > summary { display: inline-flex; align-items: center; gap: calc(4px * var(--pad-factor)); padding: calc(2px * var(--pad-factor)) calc(4px * var(--pad-factor)); margin-left: -4px; border-radius: var(--radius-tag); /* raw: padding given back by a negative margin, so the text keeps its place in every preset */
                 color: var(--text-2); font-size: var(--type-secondary); font-weight: var(--control-weight); list-style: none; cursor: pointer; }
.alt > summary::-webkit-details-marker { display: none; }
.alt > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: var(--glyph-stroke); /* raw: size of a glyph, not a density value */
                     stroke-linecap: var(--glyph-cap); stroke-linejoin: var(--glyph-join); }
.alt[open] > summary svg { transform: rotate(90deg); }
.alt > .fld { margin-top: 10px; }
/* SIG-240 passkey: the password path behind its disclosure, and the hidden default button that keeps
   Enter in the password field on that path. */
.alt > .alt-b { display: grid; gap: calc(14px * var(--pad-factor)); margin-top: 12px; }
.default-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; /* raw: a visually hidden box, not a control height */
                  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#passkey-continue { display: grid; gap: calc(14px * var(--pad-factor)); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--pad-factor)); }
.actions .hint { flex: 1 1 200px; }
.btn { height: var(--control-h); padding: 0 calc(12px * var(--pad-factor)); border-radius: var(--radius-button); border: 0; display: inline-flex; align-items: center;
       justify-content: center; gap: calc(6px * var(--pad-factor)); font: inherit; font-size: var(--type-control); font-weight: var(--control-weight); background: var(--surface-3);
       color: var(--text); box-shadow: var(--control-edge); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--press); }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-primary); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.small { height: calc(var(--control-h) * 26 / 30); padding: 0 calc(10px * var(--pad-factor)); font-size: var(--type-secondary); }

.note { display: flex; align-items: baseline; gap: calc(10px * var(--pad-factor)); margin: 0 0 14px; padding: calc(12px * var(--pad-factor)) calc(14px * var(--pad-factor)); border-radius: var(--radius-note);
        background: var(--surface-2); color: var(--text-2); font-size: var(--type-description); line-height: 1.5; }
.note > .dot { transform: translateY(-1px); }
.note > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.note p { margin: 0; }
.note p + p { margin-top: 6px; }
.note .actions { margin-top: 10px; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); /* raw: a dot, round in every look */
       box-shadow: 0 0 0 3px var(--ok-soft); } /* raw: halo around a dot, no elevation token holds it */
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); } /* raw: halo around a dot, no elevation token holds it */
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); } /* raw: halo around a dot, no elevation token holds it */
.dot.neutral { background: var(--text-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-3) 18%, transparent); } /* raw: halo around a dot, no elevation token holds it */
.err-details { margin-top: 6px; }
.err-details > summary, .more > summary { display: inline-flex; align-items: center; gap: calc(4px * var(--pad-factor)); padding: calc(2px * var(--pad-factor)) calc(4px * var(--pad-factor)); margin-left: -4px; /* raw: padding given back by a negative margin, so the text keeps its place in every preset */
                         border-radius: var(--radius-tag); color: var(--text-3); font-size: var(--type-meta); font-weight: var(--control-weight); list-style: none; cursor: pointer; }
.more > summary { color: var(--text-2); font-size: var(--type-secondary); }
.err-details > summary::-webkit-details-marker, .more > summary::-webkit-details-marker { display: none; }
.err-details > summary svg, .more > summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: var(--glyph-stroke); /* raw: size of a glyph, not a density value */
                             stroke-linecap: var(--glyph-cap); stroke-linejoin: var(--glyph-join); }
.err-details[open] > summary svg, .more[open] > summary svg { transform: rotate(90deg); }
.err-details .err-body { margin: 8px 0 0; padding-top: calc(8px * var(--pad-factor)); border-top: 1px solid var(--line); color: var(--text-2);
                         font: var(--type-meta)/1.45 var(--font-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.more > .more-b { margin-top: 12px; }

/* Below 960 px the record page is one column: the side's call to act gives way to the same words
   in the main column, and the jump to the ratify form shows. */
@media (max-width: 960px) {
  .doc { display: block; }
  .doc-side { position: static; max-height: none; overflow: visible; padding: 0; margin: 28px 0 0; }
  .doc-side .act-card { display: none; }
  .note.phone-only { display: flex; }
  .jump-line { display: block; }
}
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .page, .page.wide, .page.full, .page.record-page { padding: calc(18px * var(--pad-factor)) calc(16px * var(--pad-factor)) calc(30px * var(--pad-factor)); }
  .ak-title { font-size: var(--type-greeting); }
  .ak-meta { align-items: center; column-gap: calc(14px * var(--pad-factor)); }
  .page.wide .ak-title, .page.full .ak-title { font-size: calc(var(--type-view-title) * 20 / 22); }
  .rows > div { grid-template-columns: 1fr; gap: calc(2px * var(--pad-factor)); }
  .btn { height: 44px; padding: 0 calc(16px * var(--pad-factor)); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .btn.small { height: 44px; padding: 0 calc(14px * var(--pad-factor)); font-size: var(--type-control); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .field { height: 44px; font-size: 16px; max-width: none; } /* raw: phone input at 16px so iOS does not zoom, explicit in every preset; phone target, 44px floor in every preset (presets DESIGN 2.1) */
  textarea { font-size: 16px; } /* raw: phone input at 16px so iOS does not zoom, explicit in every preset */
  .actions.wide .btn.primary { flex: 1 1 100%; }
  .err-details > summary, .alt > summary, .more > summary { min-height: 44px; padding: 0 calc(8px * var(--pad-factor)); margin-left: -8px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1); padding given back by a negative margin, so the text keeps its place in every preset */
  .field.code { max-width: none; }
  .vtab { height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .dl-bar { box-shadow: none; }
  .vtabs { flex: 1 1 100%; box-shadow: inset 0 -1px 0 var(--line); } /* raw: the bar's hairline, under the tabs only once the search wraps below */
  .dl-search { flex: 1 1 100%; margin: calc(6px * var(--pad-factor)) 0 calc(2px * var(--pad-factor)); }
  /* A phone row: number, day and tag on one line, the title under them. Flex, not the grid: a
     grid item spanning auto tracks let the clamped title's width push the row past the screen. */
  .dl-row, .dlog.act .dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: calc(12px * var(--pad-factor)) 0; }
  .dl-n { order: 1; }
  .dl-when { order: 2; }
  .dl-state { order: 3; margin-left: auto; }
  .dl-main { order: 4; flex: 1 1 100%; }
  .dl-act { display: none; }
  .dl-row:hover { background: transparent; }
  .fpair { grid-template-columns: minmax(0, 1fr); }
  .links > div, .kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .opt { padding: calc(12px * var(--pad-factor)) calc(14px * var(--pad-factor)) calc(14px * var(--pad-factor)); }
  .opt-why { padding-left: calc(14px * var(--pad-factor)); padding-right: calc(14px * var(--pad-factor)); }
  .view-switch label { height: 44px; padding: 0 calc(14px * var(--pad-factor)); } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .ak-kind a, .ev-h .close, .sec-h .aside a, .ak-meta a.jump, .jump-line a.jump, .dl-said a { display: inline-flex; align-items: center; min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) */
  .prose { font-size: var(--type-subheading); }
  .matrix-wrap { display: none; }
  .matrix-phone { display: block; }
  .ev-b { max-width: calc(100vw - 34px); }
  /* A ledger row stacks: its title first, its facts on the lines under it. */
  .ledger.stack thead { display: none; }
  .ledger.stack, .ledger.stack tbody { display: block; }
  .ledger.stack tr { display: flex; flex-wrap: wrap; gap: calc(2px * var(--pad-factor)) calc(12px * var(--pad-factor)); padding: calc(10px * var(--pad-factor)) 0; border-bottom: 1px solid var(--line); }
  .ledger.stack td { display: block; padding: 0; border: 0; }
  .ledger.stack td.lead { flex: 1 1 100%; }
  .ledger.stack td[data-label]::before { content: attr(data-label) ' '; color: var(--text-3); font-weight: 400; } /* raw: weight 400, plain text inside a heavier element; no weight role holds it */
  .ledger.stack .act { flex: 1 1 100%; text-align: left; margin-top: 6px; }
  .ledger.stack tbody tr:hover td { background: transparent; }
  .ledger a.rec, .ledger a.card-code, .rows dd a { display: inline-block; padding: 12px 0; margin: -12px 0; } /* raw: padding given back by a negative margin, so the text keeps its place in every preset */
}