/* record.css -- the shared "lab record" pieces (DESIGN.md section 5), rendered by
   templates-record.js. Tokens only: every colour is a :root token from styles.css.
   Loaded after styles.css and ugc.css on every page (templates.js baseLayout). */

/* ---------- Record head: the metadata strip that opens a record ---------- */
.record-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; margin: 0; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--text-secondary); text-transform: uppercase; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.record-head > div { white-space: nowrap; }
.record-head dt { display: inline; }
.record-head dd { display: inline; margin: 0 0 0 .4em; color: var(--text-primary); }
.record-head a, .record-head a:visited { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--text-secondary); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Record title: owner prefix in mono above the repo name ---------- */
.record-title { font-size: var(--text-record); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere; margin: 0; }
.record-title .owner { display: block; font-family: var(--font-mono); font-weight: 400; font-size: .9rem; letter-spacing: 0; color: var(--text-secondary); margin-bottom: .4rem; }

/* ---------- Stamp: the verdict, always written out ----------
   Text and a 2px border in the verdict ink on the surface; never a fill.
   Small stamps never tilt. */
.stamp { --ink: var(--text-primary); display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; border: 2px solid var(--ink); border-radius: var(--radius-sm); color: var(--ink); padding: .3rem .6rem .35rem; line-height: 1.1; white-space: nowrap; }
.stamp-kicker { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.stamp-label { font-weight: 800; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.stamp-hidden_gem { --ink: var(--verdict-hidden_gem); }
.stamp-solid { --ink: var(--verdict-solid); }
.stamp-partial { --ink: var(--verdict-partial-text); }
.stamp-overhyped { --ink: var(--verdict-overhyped); }
.stamp-dangerous { --ink: var(--verdict-dangerous); }

/* Large stamp (decision D7, option B): the words stay straight and selectable; only the
   decorative ::before frame tilts -2deg, and it does not change the layout box. The stamp
   keeps a real 2px border (transparent normally) so forced-colors mode still draws one.
   The slot's padding holds the rotated frame's corners (6px/4px covers stamps up to ~340px wide). */
.stamp-slot { display: inline-block; padding: 6px 4px; max-width: 100%; }
.stamp-lg { position: relative; margin: 0; padding: .55rem 1rem .6rem; border-color: transparent; }
.stamp-lg .stamp-kicker { font-size: .7rem; }
.stamp-lg .stamp-label { font-size: clamp(1.1rem, .9rem + 1vw, 1.5rem); letter-spacing: .12em; }
.stamp-lg::before { content: ""; position: absolute; inset: -2px; border: 2px solid var(--ink); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 3px var(--bg-card), inset 0 0 0 4px var(--ink); transform: rotate(-2deg); pointer-events: none; }
@media (forced-colors: active) {
  .stamp, .stamp-lg { border-color: CanvasText; color: CanvasText; }
  .stamp-lg::before { display: none; }
}

/* ---------- Provenance and scope lines ---------- */
.provenance-line { font-size: 1rem; color: var(--text-primary); margin: 0; overflow-wrap: anywhere; }
.provenance-line a, .provenance-line a:visited { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.scope-line { font-size: .88rem; color: var(--text-secondary); max-width: 62ch; margin: 0; }

/* ---------- Measure table: 0-5 cells, the value always written out ---------- */
.measure-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.measure-table th, .measure-table td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.measure-table thead th { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); padding-top: 0; }
.measure-table tbody th { font-weight: 500; padding-right: 1rem; overflow-wrap: anywhere; }
.measure-table .hint { display: block; font-size: .78rem; color: var(--text-secondary); font-weight: 400; }
.measure-table .cells-col { width: 120px; }
.measure-table .val { font-family: var(--font-mono); text-align: right; white-space: nowrap; width: 4.5rem; }
.measure-table tfoot th, .measure-table tfoot td { border-bottom: 0; border-top: 2px solid var(--text-secondary); font-weight: 700; }
.measure-table.legacy td { font-family: var(--font-mono); overflow-wrap: anywhere; }
.cells { display: inline-flex; gap: 4px; }
.cells i { width: 14px; height: 14px; border: 1px solid var(--text-secondary); border-radius: 2px; }
.cells.c1 i:nth-child(-n+1), .cells.c2 i:nth-child(-n+2), .cells.c3 i:nth-child(-n+3),
.cells.c4 i:nth-child(-n+4), .cells.c5 i:nth-child(-n+5) { background: var(--text-primary); border-color: var(--text-primary); }
.legacy-note, .measure-empty { font-size: .85rem; color: var(--text-secondary); margin: .5rem 0 0; }
@media (max-width: 420px) {
  .measure-table .cells-col { width: 86px; }
  .cells { gap: 3px; }
  .cells i { width: 11px; height: 11px; }
}

/* ---------- Environment block ---------- */
.env-block { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.env-block dl { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); margin: 0; }
.env-block dt, .env-block dd { font-family: var(--font-mono); font-size: .85rem; padding: .55rem 1rem; margin: 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.env-block dt { color: var(--text-secondary); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; padding-top: .7rem; }
.env-block dd { white-space: pre-line; }
.env-block dl > :nth-last-child(-n+2) { border-bottom: 0; }
.env-block .env-src { font-size: .78rem; color: var(--text-secondary); padding: .6rem 1rem; margin: 0; border-top: 1px solid var(--border); }
.env-empty { padding: 1rem; margin: 0; color: var(--text-secondary); font-size: .92rem; }
.env-empty strong { color: var(--text-primary); font-weight: 600; display: block; }
@media (max-width: 420px) { .env-block dl { grid-template-columns: minmax(0, 1fr); } .env-block dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Evidence line ---------- */
.evidence { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; }
.evidence .ev-status { margin: 0; }

/* ---------- Other runs of this repo ---------- */
.runs h2 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); font-weight: 500; margin: 0 0 .4rem; }
.runs .runs-note { font-size: .8rem; color: var(--text-secondary); margin: 0 0 .4rem; }
.runs ol { list-style: none; margin: 0; padding: 0; }
.runs li a, .runs li a:visited { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; min-height: 44px; padding: .4rem 0; border-bottom: 1px solid var(--border); color: var(--text-primary); font-size: .88rem; overflow-wrap: anywhere; }
.runs li a:hover { text-decoration: none; }
/* Basis so the tester line wraps under the stamp instead of shrinking to one character per line. */
.runs .run-by { flex: 1 1 18ch; min-width: 0; }
.runs li a:hover .run-by { text-decoration: underline; }

/* ---------- Review page layout ---------- */
.record { max-width: 1100px; margin: 0 auto; padding: 1rem 16px 4rem; }
.record-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem 2rem; align-items: start; margin-top: 1.25rem; }
.record-top .stamp-slot { margin-top: .35rem; }
.record-meta { margin-top: .9rem; display: grid; gap: .35rem; }
.record-stars { font-family: var(--font-mono); font-size: .78rem; color: var(--text-secondary); margin: 0; }
.record-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; margin-top: 2.5rem; align-items: start; }
.record-main > section { margin-bottom: 2.5rem; }
.sec-h { font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 .75rem; display: flex; gap: .6rem; align-items: baseline; }
.sec-h .num { color: var(--text-primary); }
.claim-box { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.45; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.observations-lead { margin: 0 0 1rem; }
.record-rail { position: sticky; top: 84px; display: grid; gap: 1rem; }
.try { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; display: grid; gap: .9rem; }
.try h2 { font-size: 1.15rem; margin: 0; }
.try p { font-size: .9rem; color: var(--text-secondary); margin: 0; }
.try .actions { display: grid; gap: .6rem; }
.try .actions .btn-secondary, .try .actions .btn-primary-lg { justify-content: center; text-align: center; }
.btn-primary-lg.is-paused { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); cursor: not-allowed; }
.try .reason-line { font-size: .85rem; }
.maint { border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 1rem; }
.maint h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.record .standard-note, .record .creator-badge { font-size: .85rem; color: var(--text-secondary); margin: 1.25rem 0 0; }
.record .feedback-section { margin-top: 2rem; }
.helpful-h { font-size: 1rem; font-weight: 600; margin: 0 0 .6rem; }
.record .feedback-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Neutral text buttons: the old green/red (verdict colours) and filled hover are overridden here. */
.record .feedback-btn { --btn-color: var(--text-secondary); color: var(--text-primary); border-width: 1px; min-height: 44px; }
.record .feedback-btn:hover:not(:disabled) { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.record .feedback-btn[aria-pressed="true"] { border-color: var(--text-primary); color: var(--text-primary); font-weight: 700; }
@media (max-width: 1023px) {
  .record-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .record-rail { position: static; }
}
@media (max-width: 640px) {
  .record-top { grid-template-columns: minmax(0, 1fr); }
  .record-top .stamp-slot { order: -1; justify-self: start; margin-top: 0; }
}

/* ---------- Prose links (review observations; blog, legal and about join later) ----------
   :visited allows colour properties only, so visited changes text and underline colour. */
.prose a { color: var(--accent); text-decoration: underline solid; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:visited { color: var(--text-secondary); text-decoration-color: var(--text-secondary); }
.prose a:hover, .prose a:visited:hover, .prose a:focus-visible, .prose a:visited:focus-visible { color: var(--accent); text-decoration-color: var(--text-primary); text-decoration-thickness: 2px; }
.prose code { font-family: var(--font-mono); font-size: .88em; overflow-wrap: anywhere; }
.prose pre { max-width: 100%; overflow-x: auto; }

/* ---------- The one review card (DD4) ----------
   The article is not a link; the heading's link is stretched over the card by its ::after,
   so the whole card is clickable and the focus ring sits on the card's outline. */
.rcard { position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: .65rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem 1rem; transition: border-color var(--duration-fast); overflow-wrap: anywhere; }
.rcard * { overflow-wrap: anywhere; }
.rcard:hover { border-color: var(--text-secondary); }
.rcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.rcard-stars { font-family: var(--font-mono); font-size: .76rem; color: var(--text-secondary); white-space: nowrap; padding-top: .2rem; }
.rcard-repo { font-size: 1.15rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.rcard-repo .owner { display: block; font-family: var(--font-mono); font-size: .78rem; font-weight: 400; color: var(--text-secondary); letter-spacing: 0; margin-bottom: .1rem; }
.rcard-link, .rcard-link:visited { color: var(--text-primary); text-decoration: none; }
.rcard-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.rcard-link:focus-visible { outline: none; }
.rcard-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Full claim text stays in the DOM; only two lines show. */
.rcard-claim { font-size: .92rem; color: var(--text-primary); margin: 0; align-self: start; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rcard-claim-label { color: var(--text-secondary); }
.rcard-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding-top: .65rem; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-secondary); }
.rcard-foot .by { color: var(--text-primary); }
.rcard-foot .date { font-family: var(--font-mono); font-size: .74rem; margin-left: auto; white-space: nowrap; }
.rcard-votes { font-size: .8rem; color: var(--text-secondary); margin: 0; }
.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1rem; }
@media (prefers-reduced-motion: reduce) { .rcard { transition: none; } }

/* ---------- Homepage: compact chat hero (moved from the inline <style> in landingPage;
   colours now come from the :root tokens) ----------
   Resting state is h1 + subline + a bare input bar + one helper line (~330px total) so the
   record cards peek above the fold. The dark panel, message list and chips only appear once
   the visitor engages. */
/* Compact chat hero (workspace/HERO_COMPACT_REDESIGN_PLAN.md): resting state is
   h1 + subline + a bare input bar + one helper line (~330px total) so the proof
   cards peek above the fold on every viewport. The dark panel, message list, and
   chips only appear once the visitor engages. */
.hp-wrap { min-height: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: clamp(1.5rem, 4vh, 3rem) 1rem 2rem; }
.hp-main { width: 100%; max-width: 580px; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.hp-headline { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); text-align: center; letter-spacing: -0.02em; margin: 0; }
.hp-subline { font-size: 0.95rem; color: var(--text-secondary); text-align: center; max-width: 440px; line-height: 1.6; margin: 0; }
.hp-chat { width: 100%; border-radius: 14px; overflow: hidden; }
.hp-chat.conversing { background: var(--bg-card); border: 1px solid var(--border); }
/* D3/E3: collapsed at rest, transitions open to the existing 340px cap on first message. */
.hp-messages { min-height: 0; max-height: 340px; padding: 20px; display: flex; flex-direction: column; gap: 0.75rem; overflow-y: auto; scroll-behavior: smooth; transition: max-height 220ms var(--ease-out-expo, ease), opacity 180ms, padding 200ms; }
.hp-messages.collapsed { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; }
.hp-msg { max-width: 85%; padding: 0.6rem 0.875rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.55; word-break: break-word; }
.hp-msg.user { align-self: flex-end; background: var(--accent); color: var(--on-fill); font-weight: 500; }
.hp-msg.assistant { align-self: flex-start; background: rgba(255,255,255,0.06); color: var(--text-primary); white-space: pre-line; }
.hp-msg.assistant a { color: var(--accent); text-decoration: none; }
.hp-msg.assistant a:hover { text-decoration: underline; }
.hp-msg.system-msg { align-self: center; color: var(--text-secondary); font-size: 0.82rem; text-align: center; padding: 0.5rem 0; background: transparent; max-width: 100%; }
.hp-typing { font-size: 0.8rem; color: var(--text-secondary); padding: 0 20px 8px; display: none; }
.hp-typing.visible { display: block; }
/* Chips only ever show in the resting state (send() hides them for good). */
.hp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 0 10px; }
.hp-chips.hidden { display: none; }
.hp-chip { font-size: 0.78rem; padding: 0.35rem 0.75rem; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s; font-family: inherit; white-space: nowrap; }
.hp-chip:hover { border-color: var(--accent); color: var(--accent); }
.hp-input-row { display: flex; gap: 0.5rem; padding: 0; }
.hp-input-row[hidden] { display: none; }
.hp-chat.conversing .hp-input-row { padding: 12px 16px; border-top: 1px solid var(--border); }
/* D8/I2: usage disclosure under the input at rest. */
.hp-helper { font-size: 0.78rem; color: var(--text-secondary); text-align: center; margin: 8px 0 0; line-height: 1.4; }
/* E1: quota-wall swap. Hidden sibling of .hp-input-row, toggled via el.hidden by lockChat. */
.hp-walled { display: none; }
.hp-walled:not([hidden]) { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.625rem; padding: 0; font-size: 0.85rem; color: var(--text-secondary); text-align: center; }
.hp-chat.conversing .hp-walled:not([hidden]) { padding: 12px 16px; border-top: 1px solid var(--border); }
.hp-walled .btn-nav-accent { flex-shrink: 0; }
.hp-input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.04); color: var(--text-primary); font-size: 0.9rem; font-family: inherit; outline: none; transition: border-color 0.15s; }
.hp-input:focus { border-color: var(--accent); }
.hp-input::placeholder { color: var(--text-secondary); }
.hp-input:disabled { opacity: 0.4; cursor: not-allowed; }
.hp-send { padding: 0.5rem 1.125rem; background: var(--accent); color: var(--on-fill); border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: opacity 0.15s; white-space: nowrap; }
.hp-send:hover { opacity: 0.85; }
.hp-send:disabled { opacity: 0.35; cursor: default; }
.btn-nav-accent { padding: 0.35rem 0.875rem; border: none; border-radius: 6px; background: var(--accent); color: var(--on-fill); font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
.btn-nav-accent:hover { opacity: 0.85; }
@media (max-width: 640px) {
  .hp-headline { font-size: 1.4rem; }
  .hp-chips { flex-direction: column; }
  .hp-chip { white-space: normal; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-messages { transition: none; }
}
.hp-reaction-row { display: flex; gap: 0.5rem; padding: 0.375rem 0 0 0.25rem; align-items: center; }
.hp-reaction-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-size: 0.75rem; padding: 0.2rem 0.5rem; cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s; }
.hp-reaction-btn:hover { border-color: var(--accent); color: var(--accent); }
.hp-reaction-btn.active { border-color: var(--accent); color: var(--accent); }
.hp-feedback-chip { font-size: 0.78rem; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; text-decoration: underline; padding: 0.25rem 0; font-family: inherit; display: block; margin-top: 0.25rem; }
.hp-feedback-chip:hover { color: var(--accent); }
.hp-inline-form { padding: 0.75rem; background: rgba(255,255,255,0.03); border-radius: 8px; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.hp-inline-form textarea, .hp-inline-form input[type=email] { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 0.85rem; padding: 0.5rem; resize: vertical; width: 100%; box-sizing: border-box; }
.hp-inline-form textarea:focus, .hp-inline-form input[type=email]:focus { outline: none; border-color: var(--accent); }
.hp-feedback-submit { background: var(--accent); color: var(--on-fill); border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 700; padding: 0.4rem 1rem; cursor: pointer; font-family: inherit; align-self: flex-start; transition: opacity 0.15s; }
.hp-feedback-submit:hover { opacity: 0.85; }
.hp-all-good-btn { font-size: 0.78rem; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.75rem; cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s; margin-top: 0.375rem; display: inline-block; }
.hp-all-good-btn:hover { border-color: var(--accent); color: var(--accent); }
.hp-footer-bar { border-top: 1px solid var(--border); padding: 8px 16px; font-size: 0.78rem; color: var(--text-secondary); text-align: center; position: relative; }
.hp-footer-link { background: none; border: none; color: var(--text-secondary); font-size: 0.78rem; cursor: pointer; text-decoration: underline; font-family: inherit; }
.hp-footer-link:hover { color: var(--accent); }
.hp-footer-form { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px 8px 0 0; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 10; }
.hp-footer-form textarea, .hp-footer-form input[type=email] { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-family: inherit; font-size: 0.85rem; padding: 0.5rem; resize: none; width: 100%; box-sizing: border-box; }
.hp-footer-form textarea:focus, .hp-footer-form input[type=email]:focus { outline: none; border-color: var(--accent); }
.hp-footer-form-row { display: flex; gap: 0.5rem; }
.hp-footer-cancel { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-size: 0.85rem; padding: 0.4rem 0.875rem; cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s; }
.hp-footer-cancel:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.hp-advisor-options { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0 0.25rem 0; }
.hp-option-chip { background: transparent; border: 1px solid var(--border); border-radius: 20px; color: var(--text-secondary); font-size: 0.82rem; padding: 0.35rem 0.875rem; cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s, background 0.15s; white-space: nowrap; }
.hp-option-chip:hover { border-color: var(--accent); color: var(--accent); }
.hp-option-chip.selected { border-color: var(--accent); background: rgba(245,158,11,.1); color: var(--accent); }
.hp-chat-header { display: flex; justify-content: flex-end; padding: 6px 10px 0; }
.hp-chat-header.hidden { display: none; }
.hp-new-conv-btn { background: transparent; border: none; color: var(--text-secondary); font-size: 0.72rem; cursor: pointer; font-family: inherit; transition: color 0.15s; padding: 0.2rem 0.4rem; }
.hp-new-conv-btn:hover { color: var(--accent); }

.promise { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-align: center; margin: 0; }

/* ---------- Homepage sections ---------- */
.hp-body { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.hp-sec { padding: 2.5rem 0; }
.hp-sec + .hp-sec { border-top: 1px solid var(--border); }
.hp-h { font-size: clamp(1.35rem, 1rem + 1.6vw, 1.9rem); font-weight: 750; letter-spacing: -.015em; line-height: 1.2; margin: 0 0 .4rem; }
.hp-lead { color: var(--text-secondary); max-width: 62ch; margin: 0 0 1.5rem; font-size: .98rem; }
.kicker { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); display: block; margin-bottom: .5rem; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sec-head a, .sec-head a:visited { display: inline-flex; align-items: center; min-height: 44px; font-size: .92rem; }
.hp-proof-dist { margin-top: 1rem; color: var(--text-secondary); font-size: .9rem; }
.fine { font-size: .82rem; color: var(--text-secondary); margin: 1.5rem 0 0; }

/* How a repo gets tested: ruled, numbered steps, not cards */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--text-secondary); }
.how-steps li { padding: 1rem 1.25rem 0 0; position: relative; }
.how-steps li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--bg-base); border: 2px solid var(--text-secondary); border-radius: 50%; }
.how-steps .n { font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); letter-spacing: .08em; display: block; margin-bottom: .2rem; }
.how-steps h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .25rem; }
.how-steps p { font-size: .9rem; color: var(--text-secondary); margin: 0; }
.how-steps .who { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .05rem .4rem; display: inline-block; margin-top: .5rem; }
@media (max-width: 900px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--text-secondary); margin-left: 6px; }
  .how-steps li { padding: 0 0 1.25rem 1.5rem; }
  .how-steps li::before { top: .3rem; left: -7px; }
}

/* What you get: a sample record with lettered markers, and the list they point to */
.anatomy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.anatomy-rec { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; display: grid; gap: 1rem; }
.anatomy-rec .rcard-repo { font-size: 1.05rem; }
.anatomy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: a; }
.anatomy-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .1rem .5rem; }
.anatomy-list li::before { counter-increment: a; content: counter(a, upper-alpha); font-family: var(--font-mono); font-size: .8rem; color: var(--text-primary); border: 1px solid var(--text-secondary); border-radius: var(--radius-sm); width: 1.6rem; height: 1.6rem; display: grid; place-items: center; grid-row: span 2; }
.anatomy-list b { font-size: 1rem; }
.anatomy-list span { color: var(--text-secondary); font-size: .9rem; }
.tag { font-family: var(--font-mono); font-size: .66rem; color: var(--text-secondary); border: 1px solid var(--text-secondary); border-radius: var(--radius-sm); padding: 0 .3rem; margin-left: .3rem; vertical-align: middle; }
.anatomy-badge { display: flex; align-items: center; gap: .3rem; margin: 0; }
.tracks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
.tracks > div { border-top: 1px solid var(--border); padding-top: 1rem; }
.tracks p { color: var(--text-secondary); font-size: .92rem; margin: .5rem 0 0; }

/* Become a tester */
.join-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; background: var(--bg-card); }
.join-band h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); letter-spacing: -.015em; line-height: 1.2; margin: 0; }
.join-band p { color: var(--text-secondary); margin: .4rem 0 0; max-width: 56ch; font-size: .95rem; }
.join-band .reason-line { font-size: .85rem; }
@media (max-width: 900px) { .anatomy { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tracks { grid-template-columns: minmax(0, 1fr); }
  .join-band { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .join-band .btn-primary-lg { width: 100%; justify-content: center; }
  .hp-sec { padding: 2rem 0; }
}

/* ---------- Certificate in the record look: one 760px column ---------- */
.certificate-page { max-width: 760px; text-align: left; }
.certificate-card { text-align: left; }
.certificate-card .record-head { margin-bottom: 1.25rem; }
.certificate-card .certificate-repo { margin: .4rem 0 .6rem; }
.certificate-card .certificate-body { margin: 0 0 1rem; max-width: 62ch; }
.certificate-card .stamp-slot { margin: .25rem 0 1.25rem; }
.certificate-card .certificate-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; margin: 0 0 1rem; max-width: none; }
.certificate-card .certificate-fields dd { overflow-wrap: anywhere; }
.certificate-card .scope-line { margin-bottom: 1rem; }
@media (max-width: 480px) { .certificate-card .certificate-fields { grid-template-columns: minmax(0, 1fr); } }

/* Print: dark text on a white page, the stamp straight with a plain black border, no site chrome. */
@media print {
  .site-header, .site-footer, .skip-link, .share-block, .report-row { display: none; }
  body, .certificate-page { background: #fff; color: #000; }
  .certificate-card { background: #fff; color: #000; border-color: #000; box-shadow: none; }
  .certificate-card * { color: #000 !important; border-color: #000 !important; } /* beats .record-head dd and other set colours */
  .stamp-lg::before { display: none; }
  .stamp, .stamp-lg { transform: none; color: #000; border-color: #000; }
}