/* UGC public surfaces (join, submit, status, certificate/share, cards, review, text pages).
 * Copied as-is from fixtures-final-20260920/fixtures/ per ACCEPTANCE_SPEC.md section 3 (D-CSS: new file,
 * not merged into styles.css). Loaded after styles.css in baseLayout.
 *
 * Inter @font-face is deliberately NOT included here -- self-hosting Inter is explicit scope of the
 * separate CSS/Inter/focus lane (gated on E21's baseline), not this lane. --font keeps its current
 * system-stack value. The two token/keyboard-baseline blocks below (error/band/risk tokens, skip-link,
 * focus-visible default, footer-links, sr-only, reduced-motion) ARE part of this lane -- required by
 * DESIGN.md's accessibility rules and the new surfaces themselves, not a retrofit of existing pages. */

/* ---- from css/ugc-base.css (tokens + keyboard baseline; Inter @font-face lines dropped) ---- */
:root {
  /* --font intentionally not redeclared here -- keeps styles.css's current system-stack value.
     Self-hosting Inter belongs to the separate CSS/Inter/focus lane. */
  --error-text: #ff8a8a;
  --error-line: #ff5c5c;
  --error-tint: rgba(255,92,92,.07);
  --on-fill: #000;
  --verdict-partial-text: #A277FF;
  --band-tint: rgba(136,136,170,.18);
  --risk-surface: #3a1010;
  --risk-line: #FF4444;
  --risk-text: #ffb3b3;
}
/* Keyboard baseline */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary-lg:focus-visible, .btn-add-review:focus-visible, .btn-approve:focus-visible, .btn-primary:focus-visible, .btn-new:focus-visible, .btn-nav-accent:focus-visible, .hp-send:focus-visible, .skip-link:focus-visible { outline-color: #fff; }
.hp-input-row .hp-input:focus-visible, .hp-input-row .hp-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-input:focus, .fx-textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
html { scroll-padding-top: 5rem; scroll-padding-bottom: 6rem; }
main:focus { outline: none; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: .75rem; top: .75rem; z-index: 1000; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--accent); color: var(--bg-base); font-weight: 700; border-radius: var(--radius-md); }
/* Shared footer links */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; margin-top: .25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; opacity: .9; }
.footer-links a:hover { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---- from css/join.css (nav, /join) ---- */
/* Design fixture styles for /join. Uses ONLY the real tokens from styles.css. Not repo code. */
.nav { gap: 1.5rem; }
.nav-auth-fx { display: flex; align-items: center; gap: 1rem; margin-left: 1rem; }
.rv-auth-pending #nav-auth-fx { min-width: var(--rv-auth-w, 0px); } /* the width the signed-in nav had last time, so the reveal moves nothing */
.rv-auth-pending [data-nav-auth-slot] { visibility: hidden; } /* set by the head script while a stored session is checked; keeps the space, see templates-nav.js authPendingHeadScript */
.nav-login { color: var(--text-secondary); font-size: .9rem; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.nav-login:hover { color: var(--text-primary); opacity: 1; }
/* The signed-in identity: the public @handle or "Signed in", never the email. 18ch keeps a 50-character
   handle well under the 600px the head script accepts as the stored nav width. */
.nav-id { font-family: var(--font-mono); font-size: .8rem; color: var(--text-secondary); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 44px; }
.nav-id a, .nav-id a:visited { color: var(--text-primary); }
.nav-menu .menu-id { font-family: var(--font-mono); font-size: .8rem; color: var(--text-secondary); padding: .7rem 1rem; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.nav-menu .menu-id a, .nav-menu .menu-id a:visited { display: inline; padding: 0; min-height: 0; color: var(--text-primary); }
.nav-brand { display: inline-flex; align-items: center; gap: .55rem; }
.nav-brand .nav-mark { flex: none; }
.nav-brand .mark-check { stroke: var(--accent); }
.btn-add-review { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--accent); color: var(--bg-base); font-weight: 700; font-size: .9rem; border-radius: var(--radius-md); white-space: nowrap; }
.btn-add-review:hover { opacity: .9; }
.btn-add-review.is-paused { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); font-weight: 500; cursor: not-allowed; }
/* The disabled Add Review reason line (public-surfaces lane: a real
   visible reason via aria-describedby, not a hover-only title tooltip --
   see templates-nav.js). No fixture defines this element at all (it
   doesn't exist in fixtures-final-20260920), so its layout was never
   vetted at narrow widths: as a bare flex sibling of .nav's other items
   it wrapped and overlapped the brand/menu at mobile widths, found via
   a real screenshot at 375px while building this lane's checkpoint, not
   assumed. flex-basis: 100% forces it onto its own full-width row
   whenever .nav wraps, instead of colliding with neighboring flex items. */
.nav-add-review-reason { flex-basis: 100%; color: var(--text-secondary); font-size: .8rem; text-align: right; margin-top: .25rem; }
@media (max-width: 640px) { .nav-add-review-reason { text-align: left; } }
.nav-menu { display: none; position: relative; }
.nav-menu summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--text-primary); cursor: pointer; border-radius: var(--radius-md); }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu ul { position: absolute; right: 0; top: 48px; min-width: 200px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); list-style: none; padding: .25rem 0; z-index: 10; }
.nav-menu li a { display: block; padding: .75rem 1rem; color: var(--text-primary); min-height: 44px; }
.nav-menu .menu-sep { border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .nav-links, .nav-login, .nav-id { display: none; }
  /* margin-left: auto right-aligns .nav-menu on its own wrapped flex row
     (found live, not assumed): once the reason line's flex-basis:100%
     below forces a wrap, .nav-menu -- alone on the next row -- has
     nothing to space-between against and sits flush left by default,
     which then breaks its own dropdown's `right: 0` anchor (the dropdown
     rendered mostly off-screen to the left, at the wrong x position
     entirely, verified via a real headless-browser click-and-inspect,
     not just visual inspection). */
  .nav-menu { display: block; margin-left: auto; }
  .nav-auth-fx { margin-left: auto; gap: .5rem; }
  /* Real horizontal-overflow bug found via the CSS/Inter/focus lane's
     before/after diff at 320px (present in the "before" baseline too, so
     predates this lane -- the Inter swap only made it ~7px worse): .nav
     never actually had flex-wrap, so .nav-add-review-reason's
     flex-basis:100% (above) had no row to wrap onto and instead pushed
     the text past the right edge of the viewport whenever the disabled
     Add Review reason line renders. height was fixed at 60px in
     styles.css, which would have clipped a second row once wrapping is
     enabled, so it's relaxed to a min-height here too. */
  .nav { gap: .5rem; flex-wrap: wrap; height: auto; min-height: 60px; padding-top: .5rem; padding-bottom: .5rem; }
}

.join-page { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
.join-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: start; }
.join-eyebrow { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: .75rem; }
.join-page .join-h1 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1rem; max-width: 18ch; }
.join-page .join-h1-sm { font-size: 1.75rem; max-width: none; }
.join-lede { color: var(--text-secondary); font-size: 1.1rem; max-width: 36rem; margin-bottom: 1.5rem; }
.queue-strip { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-md); padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .92rem; max-width: 36rem; }
.queue-strip .dot { flex: none; width: 8px; height: 8px; margin-top: .5rem; background: var(--accent); border-radius: 50%; }
.queue-strip strong { color: var(--text-primary); }
.notice-paused { border: 1px solid var(--accent); background: rgba(245,158,11,.06); border-radius: var(--radius-md); padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .95rem; max-width: 36rem; }
.notice-paused strong { display: block; color: var(--text-primary); margin-bottom: .15rem; }
.btn-google { display: inline-flex; align-items: center; gap: .75rem; min-height: 48px; padding: 0 1.5rem; background: #fff; color: #1f1f1f; font-weight: 600; border: 1px solid #dadce0; border-radius: var(--radius-md); }
.btn-google:hover { background: #f7f8f8; opacity: 1; }
.btn-google:focus-visible, .btn-add-review:focus-visible, .wanted-action a:focus-visible, .nav-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-google.is-disabled { opacity: .4; cursor: not-allowed; }
.btn-lg { min-height: 48px; padding: 0 1.75rem; display: inline-flex; align-items: center; }
.join-reason { color: var(--text-secondary); font-size: .85rem; margin-top: .6rem; }
.join-code-note { margin-top: .75rem; font-size: .88rem; color: var(--text-secondary); }
.join-code-note.is-ok { color: var(--verdict-hidden_gem); }
.join-micro { color: var(--text-secondary); font-size: .85rem; max-width: 34rem; margin-top: 1rem; line-height: 1.55; }

.join-example { margin: 0; }
.join-chips { display: flex; gap: .5rem; margin-bottom: .6rem; }
.chip { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .2rem .55rem; border-radius: var(--radius-sm); }
.chip-example { border: 1px solid var(--accent); color: var(--accent); }
.chip-track { border: 1px solid var(--border); color: var(--text-secondary); }
.join-example .certificate-card { text-align: center; }
.join-caption { color: var(--text-secondary); font-size: .82rem; margin-top: .6rem; }
.join-caption a { margin-left: .25rem; }

.join-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3.5rem; }
.join-page .join-h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.join-steps { list-style: none; padding: 0; margin: 0; }
.join-steps li { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.join-steps li:last-child { border-bottom: 1px solid var(--border); }
.join-steps .num { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.join-steps strong { display: block; font-weight: 600; }
.join-steps .sub { display: block; color: var(--text-secondary); font-size: .9rem; margin-top: .15rem; }
.join-expect { list-style: none; padding: 0; margin: 0; }
.join-expect li { padding: .55rem 0 .55rem 1.5rem; position: relative; border-top: 1px solid var(--border); }
.join-expect li:last-child { border-bottom: 1px solid var(--border); }
.join-expect li::before { content: "\2014"; position: absolute; left: 0; color: var(--accent); }
.join-note { color: var(--text-secondary); font-size: .88rem; margin-top: .9rem; }

.join-wanted { margin-top: 3.5rem; }
.join-sub { color: var(--text-secondary); font-size: .92rem; margin: -.5rem 0 1rem; }
.wanted-list { list-style: none; padding: 0; margin: 0; }
.wanted-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 16rem; gap: 1rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--border); min-height: 56px; }
.wanted-row:last-child { border-bottom: 1px solid var(--border); }
.wanted-name { font-weight: 600; word-break: break-word; }
.wanted-desc { color: var(--text-secondary); font-size: .92rem; }
.wanted-action { text-align: right; white-space: nowrap; }
.wanted-action a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.wanted-status { color: var(--text-secondary); font-size: .88rem; margin-right: .75rem; }
.join-footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.join-footer-links a { color: var(--text-primary); opacity: .85; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.join-transition { text-align: left; max-width: 640px; padding-top: 4rem; }

@media (max-width: 900px) {
  .join-hero, .join-cols { grid-template-columns: 1fr; gap: 2rem; }
  .join-example { order: 2; }
}
@media (max-width: 640px) {
  .join-page { padding: 1.5rem 1rem 2.5rem; }
  .join-cols { margin-top: 2.5rem; }
  .btn-google { width: 100%; justify-content: center; }
  .btn-lg { width: 100%; justify-content: center; }
  .wanted-row { grid-template-columns: 1fr; gap: .15rem; }
  .wanted-action { text-align: left; }
}

@media (min-width: 641px) and (max-width: 1099px) { .nav-id { display: none; } }

.wanted-what { display: block; font-weight: 400; color: var(--text-secondary); font-size: .88rem; margin-top: .1rem; }

/* verdict badge on the certificate is a LABEL, not a button */

/* Signed-in nav fits at 768: tighter gaps between 641px and 900px */
/* Signed in, the header carries My submission and Log out too; these sizes keep it on one line from 700px up
   (641-699px still overflows, plan finding at commit 11). */
@media (min-width: 641px) and (max-width: 900px) { .nav { gap: .5rem; } .nav-links { gap: .6rem; } .nav-links a { font-size: .82rem; } .nav-auth-fx { gap: .5rem; margin-left: .25rem; } .nav-auth-fx .nav-login { font-size: .82rem; } .btn-add-review { padding: 0 .7rem; font-size: .85rem; } }

/* ---- from css/app.css (form, status, banners, buttons) ---- */
/* Design fixture: shared APP component library (form, status). Uses ONLY real tokens from styles.css. Not repo code. */
.app-page { max-width: 1040px; margin: 0 auto; padding: 2rem 1.25rem 3.5rem; }
.app-page .app-h1 { font-size: 1.9rem; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .35rem; }
.app-sub { color: var(--text-secondary); margin-bottom: 1.25rem; }
.app-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.draft-ind { color: var(--text-secondary); font-size: .85rem; display: inline-flex; align-items: center; gap: .45rem; }
.draft-ind::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verdict-hidden_gem); }
.draft-ind.is-off::before { background: var(--text-secondary); }

.form-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.5rem; margin-top: 1.25rem; }
.rail { position: sticky; top: 1rem; align-self: start; }
.rail h2 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: .75rem; font-weight: 700; }
.rail ol { list-style: none; padding: 0; margin: 0; }
.rail li { display: grid; grid-template-columns: 1.5rem 1fr; padding: .55rem 0; color: var(--text-secondary); font-size: .92rem; }
.rail li .n { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: 700; }
.rail li.is-current { color: var(--text-primary); }
.rail li.is-current .n { color: var(--accent); }
.rail li.is-done .n { color: var(--verdict-hidden_gem); }
.mobile-progress { display: none; margin: .5rem 0 1rem; }
.mobile-progress .bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: .45rem; }
.mobile-progress .bar span { height: 4px; border-radius: 2px; background: var(--border); }
.mobile-progress .bar span.on { background: var(--accent); }
.mobile-progress p { font-size: .85rem; color: var(--text-secondary); }

.banner { display: flex; gap: .75rem; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-md); padding: .85rem 1rem; margin-bottom: 1rem; font-size: .95rem; }
.banner strong { display: block; margin-bottom: .15rem; }
.banner .b-body { flex: 1; }
.banner.warn { border-color: var(--accent); background: rgba(245,158,11,.06); }
.banner.error { border-color: var(--error-line); background: var(--error-tint); }
.banner.info { }
.banner .b-act { align-self: center; }
.quote { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem 1rem; margin-top: .6rem; color: var(--text-primary); font-size: .95rem; background: rgba(255,255,255,.02); }
.quote .q-label { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: .25rem; font-weight: 700; }

.first-panel { border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.first-panel .fp-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.first-panel h2 { font-size: 1rem; margin: 0; }
.first-panel ol { margin: .75rem 0 .5rem; padding-left: 1.1rem; color: var(--text-secondary); font-size: .93rem; }
.first-panel li { margin: .3rem 0; }
.first-panel li strong { color: var(--text-primary); font-weight: 600; }
.first-panel .fp-links { font-size: .88rem; }
.first-panel .fp-links a + a { margin-left: 1rem; }
.link-btn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; min-height: 44px; padding: 0 .25rem; }

.form-section { border-top: 1px solid var(--border); padding: 1.5rem 0 .5rem; }
.form-section:first-of-type { border-top: 0; padding-top: .25rem; }
.form-section > h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.field { margin-bottom: 1.25rem; }
.field > label, .field > .lbl { display: block; font-weight: 600; margin-bottom: .35rem; }
.req { color: var(--accent); margin-left: .15rem; }
.hint { color: var(--text-secondary); font-size: .86rem; margin-top: .3rem; line-height: 1.5; }
.fx-input, .fx-textarea { width: 100%; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .7rem .85rem; font: inherit; min-height: 44px; }
.fx-textarea { min-height: 110px; resize: vertical; }
.fx-input::placeholder, .fx-textarea::placeholder { color: var(--text-secondary); opacity: 1; }
.fx-input:focus, .fx-textarea:focus { outline: 2px solid rgba(245,158,11,.5); border-color: var(--accent); }
.counter { text-align: right; color: var(--text-secondary); font-size: .78rem; margin-top: .2rem; }
.field.has-error .fx-input, .field.has-error .fx-textarea { border-color: var(--error-line); }
.error { color: var(--error-text); font-size: .86rem; margin-top: .35rem; display: flex; gap: .4rem; }
.error::before { content: "!"; font-weight: 800; border: 1px solid var(--error-text); border-radius: 50%; width: 1.1rem; height: 1.1rem; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; flex: none; margin-top: .1rem; }
.tier { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .12rem .45rem; border-radius: 4px; margin-left: .5rem; vertical-align: middle; }
.tier.pref { border: 1px solid var(--accent); color: var(--accent); }
.tier.sup { border: 1px solid var(--border); color: var(--text-secondary); }

.radio-list { display: grid; gap: .5rem; }
.radio-row { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-md); padding: .7rem .9rem; min-height: 44px; cursor: pointer; background: var(--bg-card); }
.radio-row input { margin-top: .25rem; accent-color: var(--accent); }
.radio-row.is-on { border-color: var(--accent); }

.verdict-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.verdict-card { display: block; border: 1px solid var(--border); border-radius: var(--radius-md); padding: .75rem .8rem; cursor: pointer; background: var(--bg-card); min-height: 72px; }
.verdict-card input { position: absolute; opacity: 0; }
.verdict-card .vn { display: block; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .2rem; }
.verdict-card .vh { display: block; color: var(--text-secondary); font-size: .82rem; }
.verdict-card.hidden_gem .vn { color: var(--verdict-hidden_gem); } .verdict-card.solid .vn { color: var(--verdict-solid); }
.verdict-card.overhyped .vn { color: var(--verdict-overhyped); } .verdict-card.dangerous .vn { color: var(--verdict-dangerous); }
.verdict-card.partial .vn { color: var(--verdict-partial); }
.verdict-card.is-on.hidden_gem { border-color: var(--verdict-hidden_gem); background: rgba(0,200,150,.08); } .verdict-card.is-on.solid { border-color: var(--verdict-solid); background: rgba(74,158,255,.08); }
.verdict-card.is-on.overhyped { border-color: var(--verdict-overhyped); background: rgba(245,158,11,.08); } .verdict-card.is-on.dangerous { border-color: var(--verdict-dangerous); background: rgba(255,68,68,.08); }
.verdict-card.is-on.partial { border-color: var(--verdict-partial); background: rgba(155,109,255,.08); }
.verdict-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.verdict-note { margin-top: .75rem; font-size: .9rem; color: var(--text-secondary); }

.score-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.score-row .sl { font-size: .95rem; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.seg label { min-width: 42px; min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-variant-numeric: tabular-nums; color: var(--text-secondary); border-left: 1px solid var(--border); }
.seg label:first-child { border-left: 0; }
.seg label.on { background: var(--accent); color: var(--bg-base); font-weight: 700; }
.seg input { position: absolute; opacity: 0; }
/* Two-tone inset ring: a white edge over a dark band reads on both the unselected card and the
   orange selected fill. Inset because .seg clips with overflow:hidden. */
.seg label:has(input:focus-visible) { outline: 2px solid var(--text-primary); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--bg-base); }
@supports not selector(:has(*)) {
  .seg label:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
}
.scores-total { display: flex; justify-content: space-between; padding-top: .75rem; color: var(--text-secondary); font-size: .92rem; }
.scores-total strong { color: var(--text-primary); }

.consent { border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-md); padding: 1rem 1.25rem; }
.id-preview { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--border); }
/* The no-handle line's own height is reserved (3 lines below 480px, 2 above), so the swap to
   "Published as @handle." never moves the checkboxes. */
.id-line { margin: 0; font-weight: 600; line-height: 1.45; min-height: 2.9em; }
@media (max-width: 479px) { .id-line { min-height: 4.35em; } }
.id-handle { font-family: var(--font-mono); font-weight: 600; overflow-wrap: anywhere; }
.id-note { margin: .35rem 0 0; color: var(--text-secondary); font-size: .86rem; line-height: 1.5; }
.check-row { display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; min-height: 44px; }
.check-row input { margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1.25rem; }
.btn-secondary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; }
.btn-primary-lg { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.75rem; background: var(--accent); color: var(--bg-base); border: 0; border-radius: var(--radius-md); font: inherit; font-weight: 700; cursor: pointer; }
.btn-primary-lg[disabled], .is-disabled { opacity: .4; cursor: not-allowed; }
.form-foot { color: var(--text-secondary); font-size: .86rem; margin-top: 1rem; }
.form-disabled .fx-input, .form-disabled .fx-textarea, .form-disabled .radio-row, .form-disabled .verdict-card, .form-disabled .seg { opacity: .55; pointer-events: none; }

.status-wrap { padding: 1.5rem 1.25rem 3rem; }
.status-card { max-width: 640px; margin: 0 auto; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-lg); padding: 1.75rem; }
.slabel { display: inline-block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .28rem .6rem; border-radius: 4px; }
.slabel.progress { border: 1px solid var(--accent); color: var(--accent); }
.slabel.success { background: var(--verdict-hidden_gem); color: var(--bg-base); }
.slabel.attention { background: var(--accent); color: var(--bg-base); }
.slabel.ended { border: 1px solid var(--border); color: var(--text-secondary); }
.status-card h1 { font-size: 1.5rem; line-height: 1.2; margin: .9rem 0 .25rem; word-break: break-word; }
.status-meta { color: var(--text-secondary); font-size: .9rem; margin-bottom: 1rem; }
.status-msg { margin: .5rem 0 1rem; }
.timeline { list-style: none; margin: 1.25rem 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .5rem; padding: .45rem 0; color: var(--text-secondary); font-size: .93rem; align-items: center; }
.timeline li .tk { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border); justify-self: center; }
.timeline li.done { color: var(--text-primary); } .timeline li.done .tk { background: var(--verdict-hidden_gem); border-color: var(--verdict-hidden_gem); }
.timeline li.now { color: var(--text-primary); font-weight: 600; } .timeline li.now .tk { background: var(--accent); border-color: var(--accent); }
.timeline li .td { font-size: .82rem; color: var(--text-secondary); font-weight: 400; }
.status-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }
.status-fine { color: var(--text-secondary); font-size: .85rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding: 1.5rem 1.25rem; max-width: 1280px; margin: 0 auto; }
.sheet .cap { color: var(--text-secondary); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; font-weight: 700; }
.sheet .status-card { padding: 1.25rem; }
.sheet .status-card h1 { font-size: 1.2rem; }

@media (max-width: 900px) {
  .form-layout { grid-template-columns: 1fr; gap: 0; }
  .rail { display: none; } .mobile-progress { display: block; }
  .verdict-grid { grid-template-columns: 1fr; }
  .verdict-card { min-height: 56px; display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: .5rem; }
  .verdict-card .vn { margin: 0; }
  .sheet { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app-page { padding: 1.25rem 1rem 6rem; }
  .score-row { grid-template-columns: 1fr; gap: .4rem; }
  .seg { display: grid; grid-template-columns: repeat(6, 1fr); }
  .form-actions.sticky { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-base); border-top: 1px solid var(--border); padding: .75rem 1rem; margin: 0; z-index: 5; }
  .form-actions.sticky .btn-primary-lg { flex: 1; justify-content: center; white-space: nowrap; padding: 0 1rem; }
  .form-actions.sticky .btn { white-space: nowrap; }
  .form-actions.sticky { gap: .5rem; flex-wrap: nowrap; }
  body { padding-bottom: 5.5rem; }
  html { scroll-padding-top: 5rem; scroll-padding-bottom: 6rem; }
  .banner { flex-direction: column; }
  .status-card { padding: 1.25rem; }
}

/* hollow radios + checkboxes (unselected must look unselected) */
.radio-row input[type=radio], .check-row input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 2px solid var(--text-secondary); background: transparent; flex: none; margin-top: .25rem; cursor: pointer; }
.radio-row input[type=radio] { border-radius: 50%; }
.check-row input[type=checkbox] { border-radius: 4px; }
.radio-row input[type=radio]:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 45%, transparent 50%); }
.check-row input[type=checkbox]:checked { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230a0a0f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
.radio-row input:focus-visible, .check-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.anchor { display: block; color: var(--text-secondary); font-size: .8rem; margin-top: .15rem; line-height: 1.4; }
.tier.req-tier { background: var(--accent); color: var(--bg-base); border: 1px solid var(--accent); }
.err-list { margin-top: .35rem; display: flex; gap: 0 1.25rem; flex-wrap: wrap; }
.err-list a { color: var(--error-text); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.confirm-box { max-width: 640px; margin: 0 auto; }
.slabel.neutral { border: 1px solid var(--border); color: var(--text-secondary); }
.timeline li.done.neutral .tk { background: var(--text-secondary); border-color: var(--text-secondary); }

/* Tranche 3: form and status additions */
.affx { margin: .75rem 0 .25rem; padding-left: 1rem; border-left: 1px solid var(--border); }
.affx[hidden] { display: none; }
/* .banner, .error and .draft-ind all set their own `display` (flex/
   inline-flex), which has the SAME specificity as the browser's native
   [hidden] rule -- author CSS wins the tie, so a server-rendered
   `hidden` attribute on any of them was silently doing nothing at all
   (found via a real screenshot of /submit showing "Restored your
   draft" and an empty "Fix these to submit" banner on a freshly loaded,
   empty-storage page -- not a template-source read, a rendered-page
   check). The fixture's own CSS already carried this exact fix for
   .affx (line above) but never extended it to these three -- extended
   here, same pattern, not a new one. */
.banner[hidden], .error[hidden], .draft-ind[hidden] { display: none; }
.first-note, .founding-line, .contact-line { color: var(--text-secondary); font-size: .92rem; margin: .5rem 0; }
.founding-line { color: var(--text-primary); margin-top: .75rem; }
.contact-line a { text-decoration: underline; text-underline-offset: 3px; display: inline; }
.rev-list { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1rem; }
.rev-list h2 { font-size: .95rem; margin-bottom: .5rem; }
.rev-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rev-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.rev-list li.is-now { border-color: var(--accent); }
.rv-out { font-weight: 700; text-align: right; }
.rv-note { grid-column: 1 / -1; color: var(--text-secondary); font-size: .85rem; }
.rv-fine { color: var(--text-secondary); font-size: .85rem; margin-top: .5rem; }
.status-card .banner { margin: .75rem 0; }
.form-actions .btn-primary-lg[aria-busy="true"] { opacity: .8; }
.link-btn { min-height: 44px; }

/* ---- from t2/css/t2-public.css (certificate, share, cards, review page, text pages) ---- */
/* Tranche 2 public fixtures. Real tokens only (styles.css). Not repo code yet: at build this moves into styles.css as-is. */

/* Certificate: verdict is a LABEL, not a button (Tranche 1 checklist), site-wide */
.certificate-footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* Share block */
.share-block { text-align: left; margin-top: var(--space-md); padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.share-block h2 { font-size: 1.1rem; margin-bottom: .6rem; }
.share-text { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .8rem 1rem; color: var(--text-primary); font-size: .95rem; word-break: break-word; background: var(--bg-base); }
.share-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.share-status { color: var(--verdict-hidden_gem); font-size: .9rem; min-height: 1.4em; }
.share-status.is-error { color: var(--error-text); }
.share-note { color: var(--text-secondary); font-size: .85rem; margin-top: .75rem; }
.report-row { margin-top: var(--space-sm); text-align: center; }
.report-row a, .report-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; font-size: .88rem; }
.report-row a:hover, .report-link:hover { color: var(--text-primary); opacity: 1; }
.certificate-revoked-box { border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md); text-align: center; margin-top: var(--space-md); }
.certificate-revoked-box h1 { font-size: 1.5rem; margin-bottom: .6rem; }
.certificate-revoked-box p { color: var(--text-secondary); margin-bottom: 1.25rem; }

/* Boards and sheets */
.board-page { max-width: 1120px; margin: 0 auto; padding: var(--space-md) var(--space-sm) var(--space-lg); }
.board-h1 { font-size: 1.6rem; margin-bottom: .4rem; }
.board-sub { color: var(--text-secondary); margin-bottom: var(--space-md); max-width: 60ch; }
.sheet.sheet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1440px; }
.sheet-cell { min-width: 0; }
.sheet-cell .certificate-page { padding: 0; }
.img-frame { width: 100%; aspect-ratio: 1200 / 630; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); position: relative; }
.img-frame iframe { border: 0; width: 1200px; height: 630px; transform-origin: 0 0; transform: scale(.5); position: absolute; left: 0; top: 0; }
@media (max-width: 1100px) { .sheet.sheet-2 { grid-template-columns: 1fr; } }
.table-scroll { overflow-x: auto; }
.inv { width: 100%; border-collapse: collapse; font-size: .9rem; }
.inv th, .inv td { text-align: left; padding: .7rem .8rem; border-top: 1px solid var(--border); vertical-align: top; }
.inv th { color: var(--text-secondary); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.inv td.cur { color: var(--text-secondary); }
.inv td.new { color: var(--text-primary); }

/* Provenance labels: neutral on purpose (amber and verdict colors already mean something) */
.pv-chip { display: inline-block; align-self: flex-start; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .2rem .55rem; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-secondary); }
.pv-chip.founder, .pv-label.founder { background: var(--border); color: var(--text-primary); border-color: var(--border); }
.pv-chip.community, .pv-label.community { background: transparent; color: var(--text-secondary); border: 1px solid var(--text-secondary); }
.pv-foot { margin-top: var(--space-xs); padding-top: var(--space-xs); border-top: 1px solid var(--border); color: var(--text-secondary); font-size: .8rem; line-height: 1.45; }
.pv-foot.pv-a { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pv-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--border); color: var(--text-primary); font-size: .62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pv-a .pv-text { flex: 1 1 12rem; min-width: 0; }
.pv-label { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: .15rem .45rem; border-radius: var(--radius-sm); white-space: nowrap; }
.pv-foot.pv-b { border-top: 0; padding-top: 0; margin-top: auto; }
.pv-card-B .pv-chip { margin-top: .1rem; }
.pv-card-C { border-left-width: 3px; }
.pv-card-C.pv-founder { border-left-color: var(--text-primary); }
.pv-card-C.pv-community { border-left-color: var(--text-secondary); }
.pv-foot.pv-c strong { color: var(--text-primary); }
.var-row { margin-bottom: var(--space-md); }
.var-h { font-size: 1rem; margin-bottom: .25rem; }
.var-h span { color: var(--text-secondary); font-weight: 400; font-size: .9rem; margin-left: .5rem; }
.var-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
@media (max-width: 700px) { .var-grid { grid-template-columns: 1fr; } }
.hp-proof-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.review-card-link { min-width: 0; }
.review-card { height: 100%; }

/* Review page provenance + CTA */
.review-prov { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: var(--space-xs); }
.review-prov-text { color: var(--text-secondary); font-size: .92rem; margin: 0; }
.try-block { display: flex; gap: var(--space-md); justify-content: space-between; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-md); margin: var(--space-md) 0; }
.try-block h2 { font-size: 1.15rem; margin: 0 0 .35rem; }
.try-block p { color: var(--text-secondary); max-width: 52ch; margin: 0 0 .35rem; }
.try-block .try-fine { font-size: .85rem; }
.try-block .btn-primary-lg { text-decoration: none; }

/* Text pages */
.doc-page { max-width: 1040px; margin: 0 auto; padding: var(--space-md) var(--space-sm) var(--space-lg); }
.doc-page h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; margin-bottom: .5rem; }
.doc-narrow { max-width: 640px; }
.doc-lede { color: var(--text-secondary); font-size: 1.1rem; max-width: 60ch; margin-bottom: 1.25rem; }
.doc-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 3rem; margin-top: 1.25rem; }
.doc-toc { position: sticky; top: 1rem; align-self: start; font-size: .9rem; }
.doc-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--border); }
.doc-toc a { display: flex; align-items: center; min-height: 44px; padding: 0 .9rem; color: var(--text-secondary); }
.doc-toc a:hover { color: var(--text-primary); opacity: 1; }
.doc-body section { padding: 1.5rem 0; border-top: 1px solid var(--border); }
.doc-body section:first-child { border-top: 0; padding-top: 0; }
.doc-body h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.doc-body p, .doc-body li { max-width: 68ch; margin-bottom: .6rem; }
.doc-body ul { padding-left: 1.2rem; }
.doc-body a { text-decoration: underline; text-underline-offset: 3px; }
.doc-fine { color: var(--text-secondary); font-size: .85rem; margin-top: 1.5rem; }
.doc-body .ph { color: var(--text-secondary); font-style: italic; border: 1px dashed var(--border); border-radius: var(--radius-md); padding: .8rem 1rem; }
.vdef { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.vdef li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0; max-width: none; }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 1rem; } .doc-toc { position: static; } .doc-toc ol { display: flex; flex-wrap: wrap; border-left: 0; gap: 0 .25rem; } .doc-toc a { padding: 0 .6rem; border: 1px solid var(--border); border-radius: var(--radius-md); margin: 0 .25rem .5rem 0; } }
@media (max-width: 480px) { .vdef li { grid-template-columns: 1fr; gap: .35rem; } }

/* Existing components that miss 44px today. Part of the acceptance spec. */
.breadcrumb { display: inline-flex; align-items: center; min-height: 44px; }
.repo-link-large { display: inline-flex; align-items: center; min-height: 44px; }
.copy-btn { min-height: 44px; min-width: 44px; }
.hp-input-row .hp-input, .hp-input-row .hp-send { min-height: 44px; }
.hp-footer-link { display: inline-flex; align-items: center; min-height: 44px; }

/* Contrast fixes (measured). Partial label text was 4.49:1 on its tint; now 4.93:1. */
.verdict-partial { color: var(--verdict-partial-text); }

.privacy-note { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm); margin: var(--space-sm) 0; background: var(--bg-card); }
.privacy-note h2 { font-size: 1rem; margin-bottom: .4rem; }
.privacy-note ul { padding-left: 1.2rem; color: var(--text-secondary); font-size: .92rem; }
.privacy-note li { margin-bottom: .25rem; }

/* Tranche 3: emails, profile, error pages, worked example */
.em-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: var(--space-sm); }
.em-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); text-transform: capitalize; font-weight: 600; }
.em-tab.is-on { color: var(--text-primary); border-color: var(--accent); }
.em-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; margin: 0 0 var(--space-sm); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.em-head dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.em-head dd { margin: 0; word-break: break-word; }
.em-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); align-items: start; }
.em-cols h2, .em-checks h2 { font-size: 1rem; margin-bottom: .4rem; }
.em-text { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm); background: var(--bg-card); margin: 0; }
.em-html { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm); background: var(--bg-card); font-size: .95rem; }
.em-html p { margin-bottom: .75rem; }
.em-html a { text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.em-html blockquote { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .6rem .8rem; margin: 0 0 .75rem; color: var(--text-secondary); }
.em-html blockquote strong { color: var(--text-primary); }
.em-foot { color: var(--text-secondary); font-size: .85rem; }
.em-checks { margin-top: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm); background: var(--bg-card); }
.em-checks ul { list-style: none; padding: 0; display: grid; gap: .3rem; }
.em-checks li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.em-checks .is-ok > span:first-child { color: var(--verdict-hidden_gem); }
.em-checks .is-bad > span:first-child { color: var(--error-text); }
@media (max-width: 900px) { .em-cols { grid-template-columns: 1fr; } .em-head { grid-template-columns: 1fr; } }
.pf-head { display: flex; gap: 1.25rem; align-items: center; margin-bottom: var(--space-sm); flex-wrap: wrap; }
.pf-avatar { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.pf h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1.12; letter-spacing: -.02em; margin: 0; }
.pf-handle { color: var(--text-secondary); font-size: 1.05rem; margin: 0 0 .25rem; }
.pf-note { color: var(--text-secondary); font-size: .88rem; margin: .25rem 0 0; }
.pf-note a { text-decoration: underline; text-underline-offset: 3px; }
.pf-stats { display: flex; gap: 2rem; flex-wrap: wrap; margin: 0 0 var(--space-sm); padding: var(--space-sm) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pf-stats dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.pf-stats dd { margin: 0; font-weight: 700; font-size: 1.2rem; }
.pf-h2 { font-size: 1.05rem; margin: var(--space-sm) 0 .6rem; }
.pf-mix { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.pf-mix li { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; }
.pf-mix li.is-zero { opacity: .55; }
.pf-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.err-page { padding-top: var(--space-lg); }
.err-page h1 { margin-bottom: .5rem; }
.worked { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-sm); background: var(--bg-card); }
.worked dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .5rem 1rem; margin: .5rem 0; }
.worked dt { color: var(--text-secondary); font-size: .85rem; }
.worked dd { margin: 0; }
.worked p { max-width: none; }
@media (max-width: 480px) { .worked dl { grid-template-columns: 1fr; gap: .1rem; } .worked dd { margin-bottom: .5rem; } }

/* Long titles, URLs and handles must wrap inside cards and quotes at 320 */
.review-card, .review-card * { overflow-wrap: anywhere; }
.review-card-link { min-width: 0; }
.em-html blockquote, .em-html p, .em-head dd { overflow-wrap: anywhere; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note { color: var(--text-secondary); font-size: .85rem; line-height: 1.5; }
.em-tab { text-transform: none; }