/* One page column everywhere: width:100% defeats flex-column shrink-to-fit on
   pages whose body is a flex column (sticky footers) — without it the header
   collapses to content width and the appbar drifts off the shared grid. */
.wrap{ width:100%; max-width:1160px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
/* Shared page rhythm — the vertical spacing between sections on every page.
   Link this AFTER the kit stylesheet so its tokens are already defined and
   these rules can win on source order without needing !important.

   Owner feedback (walkthrough #2, 2026-08-31): home's section spacing read
   "too far apart" — this file's --sect-gap is deliberately tighter than the
   ad hoc clamp(32px,4vw,48px)/clamp(48px,6vw,80px) values pages had been
   hand-rolling per section. Apply the `.sect` class to any top-level page
   section (or `.sect-tight` for a smaller in-page break, e.g. between a hero
   and the strip directly under it) instead of writing a new margin-top.

   This is the foundation piece of a cross-page pass: W1 wires home.html;
   later batches wire find/clubs/profile/shelves onto the same classes so
   rhythm stays consistent app-wide. Keep this file small — layout/columns
   stay in each page's own <style>, only vertical rhythm lives here. */

:root{
  --sect-gap: var(--s5);      /* section-to-section, tightened from the old 32–48px range */
  --sect-gap-tight: var(--s3); /* a closer in-page break, e.g. hero → shelf strip directly under it */
  --sect-gap-loose: var(--s5);   /* rare: a deliberately larger break (e.g. above the footer) */
}

.sect{ margin-top: var(--sect-gap); }
.sect-tight{ margin-top: var(--sect-gap-tight); }
.sect-loose{ margin-top: var(--sect-gap-loose); }

/* ── Shared appbar + footer (D0, 2026-08-31) ───────────────────────────────
   Every page (book/clubs/find/home/import/profile/shelves) hand-rolled its
   own copy of these rules and they'd started to drift — book.html's wordmark
   was 17px against everyone else's 18px, find.html's nav gap was a flat 24px
   instead of the clamp() the rest used, some pages had the nav a:hover rule
   and some didn't. nav.js renders the markup (.appbar > .wordmark + .nav +
   .who); this is now the ONE place its geometry is defined, so every tab's
   top bar is pixel-identical. wrapped.html hand-codes its own appbar markup
   (it needs an extra year-switcher control nav.js doesn't support) but reuses
   these same class names deliberately, for the same reason.
   Sub-component sizing inside .who (the 44px theme toggle + avatar hit
   target, the notifications panel) is injected by nav.js itself at runtime
   (see ensureStyles() in nav.js) — that half of the appbar was already single-
   sourced; this file closes the other half. */
.appbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s5) 0; flex-wrap:wrap; }
.wordmark{ font-size:var(--t-sect); font-weight:800; letter-spacing:var(--h-track); color:var(--ink); text-decoration:none; flex:0 0 auto; }
.wordmark b{ color:var(--link); }
.nav{ display:flex; gap:var(--s6); align-items:center; flex-wrap:wrap; }
.nav a{ font-size:var(--t-body); font-weight:650; color:var(--ink-3); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; min-width:44px; justify-content:center; touch-action:manipulation; padding-block:3px; padding-inline:var(--s2); border-block:2px solid transparent; border-radius:var(--r-chip); letter-spacing:normal; }
.nav a[aria-current]{ color:var(--ink); border-bottom-color:var(--butter); }
@media (hover:hover) and (pointer:fine){ .nav a:hover{ color:var(--ink); } }
.who{ display:flex; align-items:center; gap:var(--s3); flex:0 0 auto; position:relative; }
/* The 44px theme-toggle + avatar hit-target, shared by every appbar (nav.js's
   rendered markup on 7 pages, and wrapped.html's hand-coded twin). Kit's base
   .iconbtn is 48px with a shadow pill; the appbar variant is smaller, flat,
   and outlined instead — .nav-theme carries that override. */
.nav-theme{ width:44px; height:44px; background:transparent; border:1px solid var(--hair); box-shadow:none; }
.nav-avatar-hit{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; flex:0 0 auto; background:transparent; border:0; cursor:pointer; position:relative; }
.nav-avatar-circle{ width:36px; height:36px; }
/* D5: a signed-in reader's uploaded photo (avatarUrl) can now show anywhere
   a plain .avatar chip renders — kit's base .avatar has no overflow clip, so
   an <img> child would spill past the circle without this. Additive only;
   the initial+color fallback (kit.css's own .avatar rules) is untouched. */
.avatar{ overflow:hidden; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Keep the label underline alongside a genuine control outline. */
:where(a,button,summary,[tabindex]:not(h1,h2,h3,h4,h5,h6)):focus-visible{outline:2px solid var(--link)!important;outline-offset:2px;text-decoration:underline!important;text-decoration-color:var(--ink)!important;text-decoration-thickness:2px!important;text-underline-offset:var(--s1)}
#session-error{padding:var(--s5) var(--s4);display:grid;justify-items:start;gap:var(--s3)}
#session-error p{margin:0}
#session-error:focus-visible{outline:2px solid var(--ink)!important;outline-offset:2px;text-decoration:none!important}
#session-error:focus-visible p{text-decoration:none}
:is(input,select,textarea):focus-visible{outline:2px solid var(--link)!important;outline-offset:2px;border-radius:var(--r-chip)}
:is(.iconbtn,.nav-avatar-hit):focus-visible{outline:2px solid var(--link)!important;outline-offset:2px;border-radius:var(--r-pill)}
:is(button,a):not(.iconbtn,.nav-avatar-hit,.edge,.bs-sheet-symbol-button,.iconbtn-mini,.shelf-menu-btn,.pencil-btn,.xbtn):focus-visible :is(svg,.like-mark,.feed-cover,.bs-solid){outline:2px solid var(--link);outline-offset:2px;border-radius:var(--r-cover)}
:is(.swatch,a:empty,button:empty,[tabindex]:empty):focus-visible{outline:2px solid var(--link)!important;outline-offset:2px;border-radius:var(--r-pill)}
.btn:not(.btn-soft,.btn-ghost):focus-visible{text-decoration-color:var(--ink-on-accent)!important}
@media (max-width:640px){
  .appbar{ row-gap:var(--s3); }
  .nav{ width:100%; justify-content:center; gap:var(--s3) var(--s6); flex-wrap:wrap; }
}

/* ── D6 · cover-tilt (CSS 3D, shared component treatment) ──────────────────
   A tiny pointer-hover perspective tilt on a book cover — reads as a physical
   object you could pick up, not a UI effect. Shared between the home deck
   strip and the shelves grids (both scroll a row of covers a reader taps
   through), so it lives here rather than duplicated per page. Settles back
   flat the instant hover ends (transition, not a hold state); no
   entrance loop, no bounce, transform-only (no layout shift). Gated on
   prefers-reduced-motion: no-preference — with reduced motion the cover
   never leaves its flat resting transform. Not applied to shelves.html's
   .trow (want-to-read list): those rows are drag-reorder targets and already
   carry their own drag transform/transition, and a hover tilt there would
   read as fighting the drag affordance rather than aiding it.
   The transition is !important: every page this class is used on also sets
   its own `transition: opacity …` on the same image (the existing hover
   fade), and a shorthand `transition` from a same- or higher-specificity
   page rule would otherwise silently drop the transform half — this keeps
   the shared effect working regardless of what a page's own rule declares,
   without requiring every page to remember to append `, transform …` to it. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .cover-tilt{ transition: opacity var(--d-ui) var(--ease-out-quart), transform var(--d-ui) var(--ease-out-quart) !important; transform: perspective(640px) rotateX(0deg) rotateY(0deg); }
  .cover-tilt:hover{
    transform: perspective(640px) rotateX(2deg) rotateY(-4deg);
  }
}

/* ── Continue-reading strip (goodnight R1 B, prototype-tonight #5) ─────────
   Rendered by nav.js into the [data-continue-strip] div it appends after
   .appbar inside every data-nav mount (reader.html never mounts nav.js at
   all, so the strip never appears there — no extra exclusion rule needed).
   One insertion point for all seven pages that carry the appbar, same as
   D0's own appbar/footer pass above. */
.continue-strip{ box-sizing:border-box; min-height:70px; display:flex; align-items:center; gap:var(--s3); padding:10px var(--s4); margin-bottom:var(--s3); background:var(--surf-2); border-radius:var(--r-card); }
.continue-strip.is-reserving{ visibility:hidden; }
html[data-strip="none"] .continue-strip.is-reserving{ display:none; }
.continue-link{ flex:1; min-width:44px; min-height:44px; display:flex; align-items:center; gap:var(--s3); text-decoration:none; color:inherit; }
.continue-cover{ width:34px; height:50px; border-radius:var(--r-strip-cover); object-fit:cover; box-shadow:var(--sh-cover); flex:0 0 auto; }
.continue-cover-wrap{ display:flex; flex:0 0 auto; }
.continue-meta{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.continue-title{ font-size:var(--t-label); font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:normal; }
.continue-pos{ font-size:var(--t-label); color:var(--ink-3); letter-spacing:normal; }
.continue-dismiss{ flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; font-size:var(--t-body); line-height:1; color:var(--ink-3); letter-spacing:normal; }
@media (hover:hover) and (pointer:fine){ .continue-dismiss:hover{ background:var(--surf-3); color:var(--ink); } }

/* Quiet one-line footer used across the app shell (class="wrap" on the
   <footer>, matching each page's content-width wrapper). Scoped to
   footer.wrap deliberately — it must not touch reader.html's immersive
   .pagefoot, import.html's .closing completion panel, or index.html's
   pre-auth micro-footer, all of which are intentionally different. */
footer.wrap{ margin-top: var(--sect-gap-loose); padding: var(--s6) 0 var(--s8); border-top: 1px solid var(--hair-soft); font-size: var(--t-label); color: var(--ink-3); letter-spacing:normal; }

/* R1: reserve appbar geometry before nav.js arrives. Desktop: 44 + 2*20.
   Mobile adds a 12px row gap and the 44px nav targets.
   Scope to nav mounts so wrapped's independent header remains untouched. */
[data-nav] .who{min-width:156px;width:156px;justify-content:flex-end}
.nav-feedback{width:44px;height:44px;background:transparent;border:1px solid var(--hair);box-shadow:none}
/* Real boxes, rather than overlapping pseudo targets, keep adjacent actions distinct.
   Typography stays unchanged; padding supplies the missing hit area. */
body :is(.reply-action,.reply-toggle,[data-like-review],[data-like-comment],[data-report-id],[data-block-id],[data-block-author],.finish-remove-btn,#badge-edit,#review-delete){
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:var(--s3) 6px;touch-action:manipulation;
}
body #rate-save{min-height:44px;height:auto;touch-action:manipulation}

/* Static loading blocks share the final section reservation; no animation. */
.load-skeleton{min-height:inherit;background:transparent;border-radius:0;pointer-events:none}
[data-nav] .who{flex:0 0 156px;min-height:44px}

/* Shared surface treatment also covers sheets injected by app/nav.js. */
body :is(.hero-book,.who-card,.club-row,.club-preview,.club-sheet,.sheet,.nav-notif-panel,.fb-sheet){border:0;box-shadow:var(--card-elev)}
body :is(.club-row,.club-preview){background:var(--surf);border-radius:var(--r-card)}
body .club-row+.club-row{margin-top:var(--s5)}
body :is(.nav-notif-panel,.fb-sheet){padding:var(--s3)}
body .fb-sheet{padding:var(--s6) var(--s6) calc(var(--s6) + env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:no-preference){
  .fb-overlay[data-pointer="true"]{opacity:1;transition:opacity var(--d-sheet) var(--ease-out-quart),display var(--d-sheet) allow-discrete}
  .fb-overlay[data-pointer="true"] .fb-sheet{transform:none;transition:transform var(--d-sheet) var(--ease-out-quart)}
  .fb-overlay[data-pointer="true"][hidden]{opacity:0;transition-duration:var(--d-close)}
  .fb-overlay[data-pointer="true"][hidden] .fb-sheet{transform:translateY(12px);transition-duration:var(--d-close)}
  @starting-style{
    .fb-overlay[data-pointer="true"]:not([hidden]){opacity:0}
    .fb-overlay[data-pointer="true"]:not([hidden]) .fb-sheet{transform:translateY(12px)}
  }
}
body :is(.nav-notif-panel,.fb-sheet) :is(h2,h3){font-size:var(--t-sect);letter-spacing:var(--h-track)}
body :is(.nav-notif-panel,.fb-sheet) :is(p,label,button,textarea){font-size:var(--t-body);letter-spacing:normal}
body :is(.fb-close,.club-preview-close,.club-sheet-close,.pencil-btn,.av-dot){border-radius:50%}
body .fb-close{width:44px;height:44px;touch-action:manipulation}
body .fb-close:focus-visible{text-decoration:none!important}

@media(prefers-reduced-motion:reduce){.cover-tilt{transition:none!important;transform:none!important;will-change:auto}}

body :is(.iconbtn-mini,.shelf-menu-btn,.pencil-btn,.xbtn){width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;touch-action:manipulation}
body :is(.avatar-chip,.avatar-hit,.nav-avatar-hit,.av-dot){border-radius:50%}

body :is(.nav-notif-item,.nav-notif-profile-name,.nav-notif-profile-avatar){font-size:var(--t-body);letter-spacing:normal}
body .nav-notif-item--circle{font-size:var(--t-label)}
body :is(.nav-notif-profile-handle,.nav-notif-time,.nav-notif-empty,.nav-notif-invite-msg,.nav-notif-chip,.demo-banner){font-size:var(--t-label);letter-spacing:normal}
body .nav-notif-divider{font-size:var(--t-label);letter-spacing:.06em}
body .nav-notif-profile-link:focus-visible{text-decoration:none!important}
body .nav-notif-profile-link:focus-visible svg{outline:none}
body .nav-notif-profile-link{gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-cover-lg)}
body .nav-notif-invite-btn{border-radius:var(--r-row)}
body .listen-transport button,body .edge .hit{border-radius:50%}

/* Balanced appbar and compact secondary bands. The continue strip is in the first markup, so it reserves its own 44px row. */
body header.wrap{padding-inline:var(--s6)}
header .appbar{padding-block:var(--s2);gap:var(--s2)}
@media(min-width:900px){
  header .wordmark,header .who{flex:0 0 156px}
  header .nav{margin-inline:auto}
}
header .continue-cover-wrap{display:none}
header .continue-strip{min-height:44px;padding:0 var(--s3);margin-top:var(--s2)}
header .continue-meta{flex-direction:row;align-items:baseline;gap:var(--s2)}
header .continue-title{min-width:0}
header .continue-pos{flex:none}
/* A gated mean has an explanatory key immediately after the heading. */
#rate-card .rate-top:has(+ .key) .big{display:none}

/* Loaded shelf content determines its own section height; keep one empty bay. */
body #spine-library:has(.bs-library){min-height:0}
body :is(#read-spines,#wanted-spines)[aria-busy="false"]{min-height:0}
@media(max-width:600px){body #spine-library .bs-rail{min-height:338px}}

/* Quiet labels keep their type size inside a full touch target. */
body :is(.read-card .not-reading,.peek-start,.fav-edit-link){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;touch-action:manipulation}

/* Gossip journal: artwork and prose sit directly on the page. */
.feed-journal .gossip-day{margin-bottom:var(--s8)}
.feed-journal .day-heading{position:sticky;top:0;z-index:2;background:var(--ground);font-size:var(--t-label);font-weight:400;padding:var(--s3) 0;margin:0 0 var(--s5);border-bottom:1px solid var(--hair)}
.feed-journal .gossip-book{display:flex;align-items:flex-start;gap:var(--s5);padding:0;margin:0 0 var(--s6);background:transparent;border:0;border-radius:0;box-shadow:none}
.feed-journal .gossip-copy{flex:1;min-width:0}.feed-journal .feed-prose{font-size:var(--t-body);line-height:1.6;margin:0;overflow-wrap:anywhere}
.feed-journal button,.feed-journal a,.feed-journal summary,.feed-earlier{min-width:44px;min-height:44px;touch-action:manipulation}.feed-journal button{font:inherit;cursor:pointer}
.feed-journal .feed-title{display:inline;text-align:left;color:var(--link);font-style:italic;padding:var(--s2) 0;overflow-wrap:anywhere}
.feed-journal .feed-cover-button{position:relative;flex:none;width:44px;display:grid;place-items:center;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.feed-cover{display:block;width:var(--s8);height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:var(--r-cover);box-shadow:var(--sh-cover)}
.feed-score{position:absolute;bottom:var(--s1);left:0;border-radius:var(--r-pill);background:var(--surf);border:1px solid var(--hair);padding:2px 5px;font-size:var(--t-label)}
.feed-marginalia{display:flex;align-items:center;font-size:var(--t-body);font-style:italic;color:var(--ink-2);line-height:1.55;overflow-wrap:anywhere}
.feed-time{display:block;font-size:var(--t-label);color:var(--ink-2);margin-top:var(--s2)}.feed-readers{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--t-label)}.feed-reader-rest ul{max-height:192px;overflow:auto;padding-left:var(--s4)}.feed-reader{display:inline-flex;align-items:center;gap:var(--s1)}.feed-reader-circle{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--butter-soft)}
.feed-ending{color:var(--ink-2);font-size:var(--t-body)}

[data-shelve-status]:empty{display:none}

/* Shell overlay sits outside every remembered-height feed reservation. */
#shell-loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none}
.zipper-loader{--d-loader-cycle:4800ms;position:relative;width:72px;height:80px}
.zipper-loader{isolation:isolate}
.zipper-loader::before{content:"";position:absolute;inset:calc(-1 * var(--s3));z-index:-1;background:var(--surf);border-radius:var(--r-card);box-shadow:var(--sh-2);pointer-events:none}
.zipper-book{position:absolute;box-sizing:border-box;left:var(--x);top:var(--y);width:var(--length);height:var(--thick);border:1.5px solid var(--ink);border-radius:calc(var(--thick) * .225);background:transparent;transform:rotate(var(--angle));transform-origin:center}
.zipper-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* #45: the one pre-mounted live region; always visually hidden, never the visible label. */
.zipper-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Bottom-up arrivals every 200 ms; 1 px settle, shared hold and fade. */
.zipper-book-0{animation:zipper-arrive-0 var(--d-loader-cycle) var(--ease-out-quart) infinite}
@keyframes zipper-arrive-0{0%,1%{transform:translateY(-4px) rotate(calc(var(--angle) - 1deg));opacity:0}7%{transform:translateY(1px) rotate(calc(var(--angle) + .6deg));opacity:1}11%,89%{transform:translateY(0) rotate(var(--angle));opacity:1}100%{transform:translateY(0) rotate(var(--angle));opacity:0}}
.zipper-book-1{animation:zipper-arrive-1 var(--d-loader-cycle) var(--ease-out-quart) infinite}
@keyframes zipper-arrive-1{0%,9.3333%{transform:translateY(-4px) rotate(calc(var(--angle) - 1deg));opacity:0}15.3333%{transform:translateY(1px) rotate(calc(var(--angle) + .6deg));opacity:1}19.3333%,89%{transform:translateY(0) rotate(var(--angle));opacity:1}100%{transform:translateY(0) rotate(var(--angle));opacity:0}}
.zipper-book-2{animation:zipper-arrive-2 var(--d-loader-cycle) var(--ease-out-quart) infinite}
@keyframes zipper-arrive-2{0%,17.6667%{transform:translateY(-4px) rotate(calc(var(--angle) - 1deg));opacity:0}23.6667%{transform:translateY(1px) rotate(calc(var(--angle) + .6deg));opacity:1}27.6667%,89%{transform:translateY(0) rotate(var(--angle));opacity:1}100%{transform:translateY(0) rotate(var(--angle));opacity:0}}
.zipper-book-3{animation:zipper-arrive-3 var(--d-loader-cycle) var(--ease-out-quart) infinite}
@keyframes zipper-arrive-3{0%,26%{transform:translateY(-4px) rotate(calc(var(--angle) - 1deg));opacity:0}32%{transform:translateY(1px) rotate(calc(var(--angle) + .6deg));opacity:1}36%,89%{transform:translateY(0) rotate(var(--angle));opacity:1}100%{transform:translateY(0) rotate(var(--angle));opacity:0}}
.zipper-book-4{animation:zipper-arrive-4 var(--d-loader-cycle) var(--ease-out-quart) infinite}
@keyframes zipper-arrive-4{0%,34.3333%{transform:translateY(-4px) rotate(calc(var(--angle) - 1deg));opacity:0}40.3333%{transform:translateY(1px) rotate(calc(var(--angle) + .6deg));opacity:1}44.3333%,89%{transform:translateY(0) rotate(var(--angle));opacity:1}100%{transform:translateY(0) rotate(var(--angle));opacity:0}}
.zipper-book-5{animation:zipper-arrive-5 var(--d-loader-cycle) var(--ease-out-quart) infinite}
@keyframes zipper-arrive-5{0%,42.6667%{transform:translateY(-4px) rotate(calc(var(--angle) - 1deg));opacity:0}48.6667%{transform:translateY(1px) rotate(calc(var(--angle) + .6deg));opacity:1}52.6667%,89%{transform:translateY(0) rotate(var(--angle));opacity:1}100%{transform:translateY(0) rotate(var(--angle));opacity:0}}
/* Disabling motion reveals all six books at their final placement. */
@media(prefers-reduced-motion:reduce){.zipper-loader,.zipper-book{animation:none!important;opacity:1!important}}
html[data-motion="reduce"] .zipper-loader,html[data-motion="reduce"] .zipper-book{animation:none!important;opacity:1!important}

/* Rings for controls with no text label to underline. */
.page-edge:focus-visible{outline:2px solid var(--link)!important;outline-offset:-3px;text-decoration:none!important}
[role="slider"]:focus-visible{outline:2px solid var(--link)!important;outline-offset:2px;text-decoration:none!important}
[role="slider"]:focus-visible .glass-labels{text-decoration:none!important}
.zipper-waiting .zipper-label{top:100%;left:50%;transform:translateX(-50%);width:max-content;height:auto;margin:var(--s2) 0;overflow:visible;clip-path:none;background:var(--surf);color:var(--ink)}
.zipper-cancel{position:absolute;top:calc(100% + var(--s8));left:50%;transform:translateX(-50%);min-width:44px;min-height:44px;pointer-events:auto;background:var(--surf);color:var(--ink);border:1px solid var(--ink);border-radius:var(--r-chip)}
.offline-status{position:fixed;bottom:var(--s4);left:50%;transform:translateX(-50%);z-index:101;max-width:calc(100% - var(--s8));padding:var(--s3) var(--s4);background:var(--surf);color:var(--danger);border:1px solid var(--danger);border-radius:var(--r-chip)}

.zipper-retry{top:calc(100% + var(--s8));left:0}.zipper-cancel:not(.zipper-retry){top:calc(100% + var(--s8));left:100%}

/* Standalone footer actions keep real, non-overlapping boxes. Prose links stay inline. */
body :is(footer nav,.legal nav){display:flex;align-items:center;flex-wrap:wrap;gap:var(--s6)}
body :is(footer nav,.legal nav) a{display:inline-flex;align-items:center;justify-content:center;min-block-size:24px;min-inline-size:24px}
body .legal nav a+a{margin-left:0}
.offline-status{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s6)}
.offline-status button{min-block-size:44px;min-inline-size:44px}
@media(max-width:640px){
  body :is(footer nav,.legal nav) a{min-block-size:44px;min-inline-size:44px}
  /* Specificity also wins over the injected feedback font and inline-page input rules. */
  body :is(input,select,textarea){font-size:16px!important}
}
/* The ground backing separates the link outline from accent-filled controls. */
:is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{box-shadow:0 0 0 4px var(--ground)!important}
@media(forced-colors:active){
  :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid Highlight!important;outline-offset:2px}
}