/* Shared component contracts. Legacy selectors in base.css remain only while pages migrate. DESIGN-SYSTEM.md §5 is the binding contract. This file implements it. */ /* ========================================================================== §1 Touch targets and control contexts (R-503) ========================================================================== */ /* `.add-item` is the shared control ROW (base.css): usually a
, but the issue target picker renders one as a
so Enter cannot submit a bare search field. Naming the row keeps the tap floor with the component, not with the tag it uses. */ :where(.tabbar, .bottom-tabs, .app-header, .book-row, .lib-card, .shelf-item, .sheet, .more-sheet, form, .add-item, .pager, .control) :is(a[href], button, [role="button"], input, select, summary), :where(a, button, [role="button"], input, select, summary).control { min-block-size: var(--tap-min); min-inline-size: var(--tap-min); } /* Prose links retain normal flow but gain a forgiving vertical hit area. Scoped to actual PROSE contexts (paragraphs, table cells, prose blocks and explicit inline markers). Card/row title links (`li.book-row > a.book-title`, `li.shelf-item > a.card-link`, `li.bookmark > a`, etc.) are NOT prose — they are controls and the tap-target floor above still applies to them. UI-BRIEF §6.5 read with SPEC-ADDENDUM correction 2. */ p a[href], td a[href], .inline-link, .empty-state a[href], .home-surface-count a[href], .more-sheet p a[href], .filter-strip > a[href]:not(.filter-chip):not(.chip) { min-block-size: auto; min-inline-size: auto; padding-block: .2em; } /* …but a kit ROW is a list item too, and its title / author / series links are real targets, not prose (R-503). Every surface that renders line() rows gets ≥44 px links from the kit itself — no per-surface special-casing (library.css used to carry this rule alone). The box is the HIT area, not the layout: block padding grows the box to the tap floor and equal negative margins hand that padding back, so a card's title, byline and date sit one line apart instead of 44px apart (owner report 2026-10-03). Padding (not min-block-size) keeps a two-line title's box at content + padding, never shorter than its text. The hit boxes of stacked links overlap; the later link wins the overlap, as in a native list. */ .book-row > a[href], .book-row .book-row-author a[href], .book-row .book-row-series a[href], .book-row .book-title, .ledger-row__title, .catalogued-buckets a[href], /* `.hit-link` is the same contract as a class: any text link that must be a ≥44px touch target without taking 44px of layout (DESIGN-SYSTEM.md §3.6). */ .hit-link { --hit-pad: max(0px, calc((var(--tap-min) - 1lh) / 2)); min-inline-size: var(--tap-min); display: inline-flex; align-items: center; padding-block: var(--hit-pad); margin-block: calc(var(--hit-pad) * -1); } input, select, textarea { font-size: var(--fs-input); } .button, .btn { min-block-size: var(--tap-min); align-items: center; justify-content: center; } /* A checkbox or radio is drawn at its own size and its LABEL carries the tap floor (R-287, R-376, #830). Stretching the native box to 44×44 drew the empty grey squares the owner reported. Segmented-control radios are invisible overlays sized by `.segmented` below. */ input:is([type="checkbox"], [type="radio"]) { min-block-size: 0; min-inline-size: 0; inline-size: 1.25rem; block-size: 1.25rem; margin: 0; flex: none; accent-color: var(--accent); } label:has(> input:is([type="checkbox"], [type="radio"])) { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: var(--tap-min); min-inline-size: var(--tap-min); cursor: pointer; } /* A label that holds only the box (Discover's dismiss pick) centres it in the tap square. */ label.book-row-pick { justify-content: center; } /* ========================================================================== §2 Page container ========================================================================== */ .page-container { inline-size: min(100%, var(--page-max)); margin-inline: auto; padding-inline: var(--space-4); } /* ========================================================================== §2b Section header row + quiet actions (#784) ========================================================================== */ /* One shape for every "heading + trailing action" pair: baseline-aligned flex row, the heading at --fs-h3, the action a QUIET text link — never a full-size pill. */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-2); } .section-head > :is(h1, h2, h3) { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); } /* …except the page title. Shelves, Discover, Notifications and the browse lists put their

in a section-head and so rendered it at 17px, while Library, Profile and every admin page rendered 24px — one app, two title sizes (owner report 2026-10-03). */ .section-head > h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } .section-head__aside { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; } /* Quiet action: link-weight affordance with a full tap-floor hit box. The visual is small text that lines up with the content edge; the hit box comes from the hit-area pattern (padding returned by negative margin), so it neither takes 44px of the row nor sits 8px inside the gutter as the old inline padding made it. A