/* A record's page: a client, a company, a property, a case (owner, 22 October 2026: "make it clear as day every step and
   nice and easy to nivigate ... know where you are and at which stage clean look"). One header for all four: a small
   eyebrow naming the kind with the menu's icon on the kind's own colour, the name, one line of key facts, the actions on
   the right. Then white cards on the page's grey, one heading each, that fold at the heading (js/views/people.js
   foldCard); long lists end with Show all. Colours are the theme's tokens (app.css), light and dark. */

:root {
  --k-client: #2563b8; --k-company: #6247c4; --k-property: #a3540f; --k-case: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --k-client: #7eaef0; --k-company: #ab9df4; --k-property: #eea468; }
}
:root[data-theme="dark"] { --k-client: #7eaef0; --k-company: #ab9df4; --k-property: #eea468; }

/* ---- the header */
.rec-head { align-items: flex-end; margin-bottom: 20px; }
.rec-head[data-kind="client"] { --k: var(--k-client); }
.rec-head[data-kind="company"] { --k: var(--k-company); }
.rec-head[data-kind="property"] { --k: var(--k-property); }
.rec-head[data-kind="case"] { --k: var(--k-case); }
.rec-id { min-width: 0; flex: 1 1 380px; }
.rec-kind { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font: 600 13.5px/1 var(--f-body); }
.rec-kind:hover { color: var(--ink); text-decoration: none; }
.rec-kind-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: color-mix(in srgb, var(--k) 14%, var(--surface)); color: var(--k); font-size: 15px; }
.rec-head h1 { margin-top: 8px; overflow-wrap: anywhere; }
/* The facts with a dot between them; a line that wraps starts with a fact, not a dot (the dot before the first fact on
   each line sits in the 23px the inner row is pulled left by, which the outer row clips). */
.rec-facts { margin-top: 6px; padding: 3px 0; overflow: hidden; color: var(--ink-2); font-size: 14px; }
.rec-facts-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-left: -23px; }
.rec-fact { display: inline-block; min-width: 0; overflow-wrap: anywhere; }
.rec-fact::before { content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); margin: 0 10px; }
.rec-fact > .badge, .rec-fact > .epc { vertical-align: 1px; }
.rec-fact .badge { white-space: nowrap; }
.rec-owner { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.rec-epc { display: inline-flex; align-items: center; gap: 6px; }
.rec-head .actions { align-items: center; }
@media (max-width: 640px) {
  .rec-head { position: relative; margin-bottom: 14px; }
  .rec-head h1 { font-size: 23px; }
  .rec-head .actions .btn { flex: 1 1 auto; }
  /* Delete keeps to the corner, beside the kind, so the main actions share the row. */
  .rec-head .actions > #del { position: absolute; top: -9px; right: -6px; }
  .rec-id { padding-right: 40px; }
}

/* ---- the cards */
.rec-grid { margin-top: 16px; }
.rec-side > * + *, .rec-side > #ext > * + * { margin-top: 16px; }
.rec-side > #ext:empty { display: none; }
.rec-wide { margin-top: 16px; }
.rec-tiles { margin-bottom: 0; }
.rec-tile-day { font-size: 20px !important; }
.rec-empty { padding: 22px 12px; }
.rec-none { margin: 4px 0 2px; color: var(--ink-2); }
.rec-note { margin: 0; padding: 10px 16px 0; }
.rec-top { margin-bottom: 16px; }
/* The summary band without its cases (they are the one list above it): what is outstanding, and the notes. */
.ov.ov-two .ov-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 760px) { .ov.ov-two .ov-grid { grid-template-columns: minmax(0, 1fr); } }
/* Where a change is saved, said in words beside the heading. */
.rec-where { font-style: normal; }

/* ---- ONE list of cases (people.js casesList): a row each, its counts under it, the row one target to press.
   On a phone each case is a block: the reference and the step on the first line, then who borrows, the property,
   the chase, each saying what it is. */
.kx td { vertical-align: top; }
.kx .kx-id { width: 1%; white-space: nowrap; }
.kx .kx-id .mono { font-weight: 700; }
.kx-what { font-size: 12.5px; color: var(--ink-2); }
.kx .kx-step .stage { white-space: normal; }
.kx .kx-step .badge { margin-left: 2px; }
.kx-done { color: var(--ink-2); font-size: 13px; }
.kx-k { display: none; }
.kx tbody.kx-case:hover > tr { background: var(--sunk); }
.kx tr.click:has(+ tr.kx-more) > td { border-bottom: 0; }
.kx tr.kx-more > td { padding-top: 0; }
.kx tr.kx-more .ov-counts { margin: 0; padding: 0; border: 0; }
.kx tbody.kx-closed td { color: var(--ink-2); }
.kx tbody.kx-closed .kx-id .mono { font-weight: 600; }
.kx + .show-all-row { margin: 0; padding: 6px 16px 10px; }
@media (max-width: 760px) {
  .kx, .kx tbody, .kx tr, .kx td { display: block; }
  .kx thead { display: none; }
  .kx tbody.kx-case { padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  .kx tbody.kx-case:hover > tr { background: none; }
  .kx td { padding: 0; border: 0 !important; }
  .kx tr.click { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .kx .kx-id { width: auto; white-space: normal; }
  .kx .kx-id .mono { display: inline-flex; align-items: center; min-height: 28px; }
  .kx .kx-step { grid-column: 2; grid-row: 1; text-align: right; }
  .kx .kx-who, .kx .kx-prop, .kx .kx-chase { grid-column: 1 / -1; }
  .kx tr.kx-more { margin-top: 6px; }
  .kx-k { display: inline; color: var(--muted); }
}

/* Show all at the end of a long list. */
.show-all-row { display: flex; justify-content: center; margin-top: 6px; }
.panel > .show-all-row { margin: 0; padding: 6px 16px 10px; border-top: 1px solid var(--line-2); }
.show-all { color: var(--accent-2); font-weight: 600; }

/* A card that folds at its heading: the chevron turns, everything but the heading hides. */
.panel.pf > .panel-h > .pf-btn { margin: -6px -2px -6px -8px; padding: 4px; color: var(--muted); }
.panel.pf > .panel-h > .pf-btn svg { transition: transform .15s; }
.panel.pf.pf-shut > .panel-h > .pf-btn svg { transform: rotate(-90deg); }
.panel.pf > .panel-h > h2, .panel.pf > .panel-h > h3 { cursor: pointer; }
.panel.pf.pf-shut > :not(.panel-h) { display: none !important; }
.panel.pf.pf-shut > .panel-h { border-bottom-color: transparent; }
.panel.pf.pf-shut > .panel-h > .actions { display: none; }

/* A record's answers as words (forms.js view): a section's notes read as words too; the box to add one comes with Edit. */
.ff-section.vx[data-mode="view"] .sec-notes > .row { display: none; }
.ff-section.vx[data-mode="view"] .sec-notes:not(:has(.note)) { display: none; }
/* A client's companies: their part and what the company has, as words. */
.co-role abbr.psc, .pc-role abbr.psc { text-decoration: underline dotted; cursor: help; }
.co-sum { margin-top: -4px; }
.pf-owner { color: var(--ink-2) !important; }
.pf-compact td:first-child { width: 42%; }
@media (max-width: 760px) {
  .pf-compact, .pf-compact tbody, .pf-compact tfoot { display: block; }
  .pf-compact thead { display: none; }
  .pf-compact tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); }
  .pf-compact td { display: block; padding: 0; border: 0 !important; text-align: left !important; font-size: 14px; background: none !important; }
  .pf-compact td:first-child { grid-column: 1 / -1; width: auto; }
  .pf-compact td[data-l]::before { content: attr(data-l); display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
  .pf-compact td.nowrap { white-space: normal; }
  .pf-compact td.pf-none { display: none; }
  .pf-compact tfoot tr { background: var(--sunk); border-bottom: 0; }
}
@media (max-width: 760px) { .kx td { font-size: 14.5px; } }
.pf-compact td .t-sub .badge { margin-left: 4px; }
.pf-compact .t-main .epc { margin-left: 6px; vertical-align: 1px; }
.pf-compact td.num .t-sub { white-space: normal; }
.pf-compact tfoot .t-sub { font-weight: 400; }

/* A part of a card that folds (UI.foldable): pressable at a phone's size, its summary on one line when it fits. */
details.fold > summary { flex-wrap: wrap; row-gap: 2px; }
details.fold > summary .badge { margin-left: auto; }
@media (pointer: coarse), (max-width: 760px) { details.fold > summary { min-height: 44px; } }

/* ---- a company's people: words first; their ticks and Take off with Edit */
.person-cards:not(.editing) .person-card:not(.editing) .pc-edit, .person-cards:not(.editing) .pc-rm { display: none; }
/* Each person's own pencil (owner, 26 October 2026) opens their ticks alone; with Edit, every card's are open already. */
.person-cards.editing .pc-pen { display: none; }
.person-card .pc-pen { margin-left: auto; }
.person-card .pc-pen + .pc-rm { margin-left: 0; }
@media (hover: hover) and (pointer: fine) { .person-card:hover .pc-pen, .person-card.editing .pc-pen { opacity: 1; } }
.pc-reach { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-reach .btn svg { width: 14px; height: 14px; }

/* ---- the Companies House card: the headline, then each long part folded with its one line */
.ch-folds { margin-top: 12px; }
.ch-folds:empty { display: none; }
/* What is fine reads quietly, a tick and the words; what needs a look keeps its tinted box. */
#p-check .flag.good, #p-check .flag.info { background: transparent; padding: 3px 0; }
#p-check .flags { gap: 4px; }
#p-check .flag.warn, #p-check .flag.bad { margin: 4px 0; }
/* Each folding part: its name (and a badge when something in it needs a look) on the first line, its summary under it. */
details.ch-fold > summary, .epc-panel details.epc-fold > summary { gap: 2px 8px; }
.ch-fold-t { flex: none; }
details.ch-fold > summary .badge, .epc-panel details.fold > summary .badge { margin-left: 0; }
details.ch-fold > summary .fold-sub, .epc-panel details.epc-fold > summary .fold-sub { flex-basis: 100%; padding-left: 21px; min-width: 0; overflow-wrap: anywhere; }
.ch-fold-b { padding: 0 0 12px; }
.ch-fold-b > .flags + * { margin-top: 10px; }
.ch-kv { margin: 0; }
.ch-tbl td { vertical-align: top; }
.ch-names { margin: 0; padding-left: 18px; }
.ch-reg { white-space: nowrap; }
#chk-when { overflow-wrap: anywhere; }

/* ---- a property: the EPC's long parts fold like the rest */
.epc-panel details.fold { margin: 0; padding: 0; }
.epc-panel details.fold:first-of-type { margin-top: 4px; }
.epc-panel details.fold > summary { padding: 10px 0; }
.epc-panel details.fold > .tbl-wrap, .epc-panel details.fold > .epc-facts { margin-bottom: 12px; }

/* ---- a pencil beside every answer (owner, 26 October 2026: "an edit next to each field so can edit there directly";
   forms.js viewBodyHtml and mount's openPlace, steps.js stepCard). Quiet until its row is pointed at or focused on a desk;
   always shown on a touch screen, where it is a 44px target. The answer opened turns into its box in place, in a calm card
   ringed in the accent; the rest of the page stays as it is. Light and dark from the theme's tokens. */
.vx-row { position: relative; }
.vx-row.vx-pens { padding-right: 30px; }
.vx-pen { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; vertical-align: middle; transition: opacity .12s, background-color .12s, color .12s; }
.vx-pen svg { width: 15px; height: 15px; }
.vx-pen:hover, .vx-pen:focus-visible { background: var(--accent-soft); color: var(--accent-2); }
.vx-row > dd > .vx-pen { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); }
.vx-rep { display: flex; align-items: flex-start; gap: 6px; }
.vx-rep > .vx-v { flex: 1 1 auto; min-width: 0; }
.vx-rep > .vx-pen { margin-top: -4px; }
.addr-what > .vx-pen { margin: -5px 0 -4px 4px; }
.step-kv dd > .vx-pen { margin: -6px -6px -6px 4px; }
@media (hover: hover) and (pointer: fine) {
  .vx-pen { opacity: 0; }
  .vx-row:hover > dd > .vx-pen, .vx-rep:hover > .vx-pen, .addr-at:hover .vx-pen, .step-kv dd:hover > .vx-pen,
  .step-kv dt:hover + dd > .vx-pen, .vx-pen:focus-visible, .vx-pen:focus { opacity: 1; }
}
@media (pointer: coarse) {
  .vx-pen { width: 44px; height: 44px; }
  .vx-row.vx-pens { padding-right: 40px; }
  .vx-row > dd > .vx-pen { right: -10px; }
  .vx-rep > .vx-pen, .addr-what > .vx-pen { margin-top: -12px; margin-bottom: -12px; }
  .step-kv dd > .vx-pen { margin: -12px -10px -12px 0; }
}

/* What else may be added: each question asked and not answered, its name with a plus; quiet, dashed, a press away. */
.vx-adds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 2px; }
.vx-adds-h { color: var(--muted); font-size: 12px; margin-right: 2px; }
.vx-add { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px; border: 1px dashed var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
.vx-add svg { width: 12px; height: 12px; color: var(--muted); }
.vx-add:hover, .vx-add:focus-visible { border-color: var(--accent); border-style: solid; color: var(--accent-2); background: var(--accent-soft); }
.vx-add:hover svg, .vx-add:focus-visible svg { color: var(--accent-2); }
.vx-add-item { margin-top: 8px; }
.vx-add[hidden], .vx-need-one[hidden] { display: none; }
/* Each answer still needed opens its own box: its name, underlined lightly as something to press. */
.vx-need-one { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.vx-need-one:hover, .vx-need-one:focus-visible { color: var(--accent-2); text-decoration-style: solid; }
@media (pointer: coarse) {
  .vx-add { min-height: 44px; padding: 0 14px 0 12px; }
  .vx-need-one { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 2px; }
}

/* The answer open: its box in a card ringed in the accent, Save and Cancel under it. A wide one takes the row. */
.vx-row.vx-on { padding-right: 0; }
.vx-row.vx-wide { grid-column: 1 / -1; }
.vx-place { margin: -6px -8px 0; padding: 10px 12px 12px; border-radius: 10px; background: var(--surface); text-align: left; font-weight: 400;
  box-shadow: 0 0 0 1.5px var(--accent), 0 6px 18px -10px color-mix(in srgb, var(--accent) 55%, transparent); animation: vx-in .14s ease-out; }
.vx-rep.vx-on, .addr-at.vx-on { display: block; }
.vx-rep.vx-on > .vx-place, .addr-at.vx-on > .vx-place { margin: 6px 0; }
.addr-line > li.vx-on::before { top: 18px; }
.vx-place-h { margin: 0 0 8px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.vx-place > .field > .lbl { color: var(--accent-2); }
.vx-place-row { padding: 0; border: 0; background: none !important; }
/* An address in a pencil's box (review, 29 October 2026: five boxes in half a row cut "Birmingham" and the postcode): its
   lines each half the row, the town, county and postcode a third each; on a phone two to a row, line 1 the whole row. */
.vx-place .addr-parts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vx-place .addr-parts > [data-part-of="line1"], .vx-place .addr-parts > [data-part-of="line2"] { grid-column: span 3; }
.vx-place .addr-parts > [data-part-of="town"], .vx-place .addr-parts > [data-part-of="county"], .vx-place .addr-parts > [data-part-of="postcode"] { grid-column: span 2; }
@media (max-width: 560px) {
  .vx-place .addr-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-place .addr-parts > [data-part-of] { grid-column: span 1; }
  .vx-place .addr-parts > [data-part-of="line1"] { grid-column: 1 / -1; }
}
.vx-place-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.vx-place-rm { margin-left: auto; color: var(--bad); }
.step-kv dd.step-on { grid-column: 1 / -1; text-align: left; }
.step-place .step-form { grid-template-columns: minmax(0, 1fr); }
@keyframes vx-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .vx-place { animation: none; } }
@media (pointer: coarse), (max-width: 760px) { .vx-place-foot .btn { flex: 1 1 auto; } .vx-place-rm { flex-basis: 100% !important; margin-left: 0; } }

/* Round 14 (owner, 29 October 2026): where an answer came from, what doesn't match Companies House, and what was filled in for
   you (js/views/people.js Views._answerMarks, Views._chDiffs; js/views/portfolio.js autofillDetails). */
.ans-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--warn);
  background: var(--warn-soft); border-radius: 6px; padding: 1px 6px; white-space: normal; }
.field > .ans-flag { margin: 4px 0 0; }
.ans-hint { margin-left: 8px; font-size: 12px; color: var(--muted); }
.ch-diffs { padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ch-diff-panel .ch-diffs { border-bottom: 0; }
.ch-diffs[hidden] { display: none; }
.ch-diffs-h { margin: 0 0 6px; }
.ch-diffs-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.ch-diffs-list li { overflow-wrap: anywhere; }
.autofill-line { padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--accent-soft); overflow-wrap: anywhere; }
.autofill-line .muted { margin-top: 2px; }
@media print { .ans-flag, .ans-hint, .autofill-line, .ch-diffs { display: none !important; } }

/* No Save (owner, 29 October 2026: "it should close and save auto"): a quiet line says how it saves; Cancel stays for a touch
   screen, where there is no Esc; a refused answer's sentence sits in the box, above them. */
.vx-place-hint { margin-right: auto; }
.vx-place-msg { margin: 8px 0 0; font-size: 13px; }
@media (pointer: coarse), (max-width: 760px) { .vx-place-hint { flex-basis: 100%; } }
.vx-row dt > .saved { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--good); }

/* ---- Edit opens only what's missing (owner, 29 October 2026): each answered question stays words in the grid, its name
   above as a box's label is, its pencil beside the words; the boxes for what is still to answer between them, in order. */
.ff-said { min-width: 0; }
.ff-said > .lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.ff-said-v { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-height: 36px; padding: 0 0 0 1px; font-size: 14px;
  color: var(--ink); overflow-wrap: anywhere; border-bottom: 1px dashed var(--line-2); }
.ff-said-v > .vx-v { flex: 1 1 auto; min-width: 0; padding: 6px 0; }
.ff-said-v > .vx-pen { opacity: 1; }
.ff-said-item + .ff-said-item { margin-top: 4px; }
.ff-sec-help { margin: 0 0 10px; }
/* The deposit on a purchase, the price less the loan (round 18, owner, 5 November 2026). */
.ff-deposit { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--info-soft); font-size: 13.5px; overflow-wrap: anywhere; }
.ff-all-said { margin: 0 0 10px; }
.ff-all { display: flex; justify-content: flex-end; margin-top: 12px; }
/* A question no longer asked, answered before (owner, 29 October 2026): its words, a quiet note, Clear. */
.ff-old { font-size: 11.5px; color: var(--muted); font-style: italic; }
.vx-retired dd { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.vx-retired .vx-v, .ff-retired .vx-v { color: var(--ink-2); }
.ff-clear { padding: 2px 8px; min-height: 0; }
@media (pointer: coarse), (max-width: 760px) { .ff-clear { min-height: 44px; padding: 0 14px; } .ff-said-v { min-height: 44px; } }

/* ---- a client's and a company's page: one page with everything, in tabs on every width (round 17, owner, 4 November 2026;
   js/views/people.js recordTabs, Views._rail `all`). The row stays in view under the top bar; one tab shows at a time. */
.rec-tabs.rec-tabs-all { display: flex; position: sticky; z-index: 14; gap: 2px; margin: 2px 0 16px; padding: 0 2px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); }
.rec-tabs.rec-tabs-all::-webkit-scrollbar { display: none; }
.rec-tabs-at:has(+ .rec-tabs-all) { display: block; height: 0; margin: 0 !important; }
.rec-tabs-all [role=tab] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 10px 12px 7px;
  border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 600; white-space: nowrap; cursor: pointer; }
.rec-tabs-all [role=tab]:hover { color: var(--ink); }
.rec-tabs-all [role=tab][aria-selected=true] { color: var(--accent-2); border-bottom-color: var(--accent); }
.rec-tabs-all .tab-n { padding: 0 6px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); font-size: 11.5px; font-weight: 700; line-height: 18px; }
.tab-hide { display: none !important; }
@media (max-width: 900px) { .rec-tabs.rec-tabs-all { margin: 0 -16px 14px; padding: 0 10px; } }
#part-details > .rec-grid { margin-top: 16px; }
#part-details > #overview:empty + .rec-grid { margin-top: 0; }

/* Properties & portfolio: the totals, the lender's form, Download and Email to the lender (js/views/pbview.js _portfolioBar). */
.pf-bar { padding: 12px 16px; margin-bottom: 16px; }
.pf-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pf-totals { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.pf-pick select { width: auto; max-width: 240px; }
.pf-held, .pf-said { margin: 8px 0 0; }
.pf-said.bad { color: var(--bad); }
@media (max-width: 640px) { .pf-bar-row > .grow { display: none; } .pf-totals { flex-basis: 100%; } }

/* Documents: what each is from, and the filter by that (js/views/case.js _documentsPanel `gathered`). */
.doc-from-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.doc-from-help { margin: 8px 16px 0; }
.doc-held { min-width: 120px; }
.doc-held-k { color: var(--muted); }
#docs [data-from-none] { padding: 12px 16px; }