/* My Honest Pick: styles per design/design_system.md v2 (tokens in section 10). Phone first. */
:root {
  --paper:#FAF7F2; --surface:#FFFFFF; --sunk:#F2EDE4; --line:#E3DCD0; --control-border:#7A8680;
  --ink:#14211D; --ink-2:#3C4A45; --ink-3:#5E6A66;
  --trail:#1E6B58; --trail-strong:#154F41; --trail-tint:#E1F0EA; --on-trail:#FFFFFF;
  --sun:#F2B33D; --on-sun:#14211D; --sun-tint:#FDF1D8; --sun-ink:#6B4A00;
  --danger:#B42318; --danger-tint:#FDECEA; --info:#2F6FB2; --info-tint:#E8F0FA;
  --font-display:"Fraunces", ui-serif, Georgia, serif;
  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-bubble:20px; --r-card:18px; --r-sheet:24px; --r-btn:14px; --r-input:12px;
  --shadow-1:0 1px 2px rgba(20,33,29,.06),0 1px 1px rgba(20,33,29,.04);
  --shadow-2:0 8px 24px rgba(20,33,29,.10);
  --shadow-3:0 16px 48px rgba(20,33,29,.16);
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:16px;
  --bk:#1E6B58;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0E1513; --surface:#15201C; --sunk:#1B2823; --line:#2A3933; --control-border:#6F7E78;
    --ink:#ECF2EF; --ink-2:#C3CEC9; --ink-3:#94A39D;
    --trail:#5CC3A5; --trail-strong:#8BD3BE; --trail-tint:#13302A; --on-trail:#06231B;
    --sun-tint:#2A2210; --sun-ink:#F2C66B; --danger:#E58A80; --danger-tint:#2A1513;
    --info:#7FB0E6; --info-tint:#152536;
    --shadow-1:none; --shadow-2:none; --shadow-3:none; --bk:#5CC3A5;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper:#0E1513; --surface:#15201C; --sunk:#1B2823; --line:#2A3933; --control-border:#6F7E78;
  --ink:#ECF2EF; --ink-2:#C3CEC9; --ink-3:#94A39D;
  --trail:#5CC3A5; --trail-strong:#8BD3BE; --trail-tint:#13302A; --on-trail:#06231B;
  --sun-tint:#2A2210; --sun-ink:#F2C66B; --danger:#E58A80; --danger-tint:#2A1513;
  --info:#7FB0E6; --info-tint:#152536;
  --shadow-1:none; --shadow-2:none; --shadow-3:none; --bk:#5CC3A5;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/24px var(--font-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
a { color: var(--trail); }
svg { width: 100%; height: 100%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); border-radius: 10px; }
.ic16 { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.ic20 { width: 20px; height: 20px; flex: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }
strong, b { font-weight: 600; }

/* ---------------- top bar ---------------- */
.topbar { position: sticky; top: 0; z-index: 30; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gutter); background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topbar.scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.mark { width: 28px; height: 28px; border-radius: 50%; background: var(--trail); color: var(--on-trail); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mark svg { width: 17px; height: 17px; }
.mark.sm { width: 28px; height: 28px; }
.mark { --mark-check: var(--trail); }
.mark.heads { background: var(--sun); color: var(--on-sun); --mark-check: var(--sun); }
.wordmark { font: 600 20px/1 var(--font-display); font-variation-settings: "SOFT" 50; letter-spacing: -.01em; }
.topnav { display: flex; align-items: center; gap: 4px; }
.linkish { background: none; border: 0; padding: 10px 8px; min-height: 44px; color: var(--ink-2); font: 500 14px/20px var(--font-ui); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink-2) 40%, transparent); text-underline-offset: 3px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.linkish:hover { color: var(--ink); text-decoration-color: currentColor; }
.desk-only { display: none; }

/* ---------------- profile strip (mobile) ---------------- */
.strip { position: sticky; top: 56px; z-index: 25; display: flex; align-items: center; gap: 10px; padding: 8px var(--gutter); background: var(--sunk); border-bottom: 1px solid var(--line); min-height: 48px; }
.strip-label { font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.strip-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 24px; }
.strip-chips::-webkit-scrollbar { display: none; }
.pchip { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: 500 14px/20px var(--font-ui); white-space: nowrap; }
.pchip svg { width: 13px; height: 13px; color: var(--ink-3); }
.pchip:hover { border-color: var(--trail); }
.pchip.flash { animation: flash 1s var(--ease); }
@keyframes flash { 0%, 60% { background: var(--trail-tint); } 100% { background: var(--surface); } }

/* ---------------- layout ---------------- */
.layout { max-width: 1120px; margin: 0 auto; }
.chat { min-height: calc(100dvh - 56px); display: flex; flex-direction: column; padding: 0 var(--gutter); }
.pane { display: none; }
.hero { padding: 20px 0 8px; }
.hero h1 { font: 600 32px/36px var(--font-display); font-variation-settings: "SOFT" 50; letter-spacing: -.015em; margin: 0 0 8px; text-wrap: balance; }
.hero p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 22px; max-width: 34em; }
.hero.gone { display: none; }
.log { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 0 24px; }

/* ---------------- bubbles ---------------- */
.turn { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.row { display: flex; align-items: flex-end; gap: 8px; }
.row.bot { padding-right: 8%; }
.row .mark { margin-bottom: 2px; }
.row .spacer { width: 28px; flex: none; }
.bubble { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-bubble); border-bottom-left-radius: 6px; padding: 12px 16px; max-width: 560px; color: var(--ink); animation: enter .18s var(--ease) both; overflow-wrap: anywhere; }
.bubble p { margin: 0; }
.bubble p + p { margin-top: 8px; }
.bubble.catch { background: var(--sun-tint); border-color: color-mix(in srgb, var(--sun) 50%, var(--line)); box-shadow: inset 3px 0 0 var(--sun); color: var(--ink); }
.bubble.note { background: var(--sunk); border-color: var(--line); }
.bubble.nugget { background: var(--surface); border-style: dashed; }
.bubble .over { display: block; font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--trail); margin-bottom: 4px; }
.row.user { justify-content: flex-end; padding-left: 15%; }
.bubble.user { background: var(--trail); border-color: var(--trail); color: var(--on-trail); border-radius: var(--r-bubble); border-bottom-right-radius: 6px; }
.heard { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.heard span { background: var(--trail-tint); color: var(--trail-strong); border-radius: 999px; padding: 2px 10px; font: 500 14px/22px var(--font-ui); }
:root[data-theme="dark"] .heard span { color: var(--trail-strong); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes settle { 0% { transform: none; } 50% { transform: translateY(-6px); } 100% { transform: none; } }
.mark.found { animation: settle .24s ease-in-out; }
.typing { display: flex; align-items: center; gap: 8px; padding: 0 0 12px; }
.dots { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-bubble); border-bottom-left-radius: 6px; padding: 14px 16px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }

/* ---------------- answers ---------------- */
.answers { margin: 4px 0 8px 36px; animation: enter .18s var(--ease) both; }
.progress { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; color: var(--ink-3); font: 400 13px/18px var(--font-ui); }
.progress .track { flex: 1; max-width: 200px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress .fill { height: 100%; background: var(--trail); border-radius: 3px; transition: width .3s ease-out; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--control-border); color: var(--ink); font: 500 15px/20px var(--font-ui); text-align: left; display: inline-flex; align-items: center; gap: 8px; transition: background .12s ease-out, border-color .12s ease-out, color .12s; }
.chip:hover { border-color: var(--trail); }
.chip[aria-pressed="true"], .chip.on { background: var(--trail); border-color: var(--trail); color: var(--on-trail); }
.chip .tick { width: 16px; height: 16px; display: none; }
.chip[aria-pressed="true"] .tick { display: inline-block; }
.chip.primary { background: var(--trail); border-color: var(--trail); color: var(--on-trail); }
.chip.primary:hover { background: var(--trail-strong); border-color: var(--trail-strong); }
.chip.quiet { border-color: transparent; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; padding-left: 8px; padding-right: 8px; }
.chip:disabled { opacity: .45; cursor: default; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--control-border); text-align: left; font: 500 15px/20px var(--font-ui); color: var(--ink); transition: background .12s, border-color .12s; }
.tile:hover { border-color: var(--trail); }
.tile .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--sunk); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--trail); }
.tile .ico svg { width: 20px; height: 20px; }
.tile[aria-pressed="true"] { background: var(--trail-tint); border-color: var(--trail); }
.tile[aria-pressed="true"] .ico { background: var(--trail); color: var(--on-trail); }
.hilltile { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 92px; }
.hilltile svg { width: 100%; height: 30px; }
.answers .more { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; align-items: center; }
.donebar { display: flex; justify-content: flex-end; margin-top: 10px; }
.zipform { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin-bottom: 8px; }
.zipform label { width: 100%; font: 500 13px/18px var(--font-ui); color: var(--ink-2); }
.zipform input, .zipform select { min-height: 48px; border-radius: var(--r-input); border: 1.5px solid var(--control-border); background: var(--surface); padding: 10px 12px; font-size: 16px; }
.zipform input { width: 9em; }
.zipform select { flex: 1; min-width: 12em; }
.trust { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--ink-3); font: 400 13px/18px var(--font-ui); }
.trust li { display: inline-flex; align-items: center; gap: 4px; }
.trust svg { width: 14px; height: 14px; color: var(--trail); }
.entries { margin-top: 10px; display: flex; flex-direction: column; gap: 0; }
.entries .linkish { color: var(--trail); padding: 6px 0; min-height: 36px; text-decoration-color: color-mix(in srgb, var(--trail) 45%, transparent); }

/* ---------------- matching moment ---------------- */
.matching { background: var(--sunk); border-radius: var(--r-card); padding: 16px; margin: 8px 0; animation: enter .18s var(--ease) both; }
.matching h3 { margin: 0 0 8px; font: 600 15px/20px var(--font-ui); }
.matching ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.matching li { display: flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(4px); transition: opacity .3s ease-out, transform .3s ease-out; }
.matching li.show { opacity: 1; transform: none; }
.matching li svg { width: 16px; height: 16px; color: var(--trail); flex: none; transform: translateY(3px); }
.matching li b { min-width: 1.6em; display: inline-block; text-align: right; }
.matching .linkish { margin-top: 6px; padding-left: 0; color: var(--trail); }

/* ---------------- cards ---------------- */
.cards { display: grid; gap: 12px; margin: 4px 0 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1); overflow: hidden; position: relative; animation: rise .28s var(--ease) both; }
.card.hero-card { box-shadow: var(--shadow-2); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.card .art { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(180deg, var(--surface) 70%, var(--sunk)); display: flex; align-items: center; justify-content: center; }
.card .art img { width: 100%; height: 100%; object-fit: contain; padding: 14px 18px 10px; mix-blend-mode: multiply; }
:root[data-theme="dark"] .card .art img { mix-blend-mode: normal; background: #fff; border-radius: 12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.card .art, .alt .thumb, .d-art, .cmp .h-art) { background: #F4F1EC; border-color: transparent; } :root:not([data-theme="light"]) :is(.card .art, .alt .thumb, .d-art, .cmp .h-art) img { mix-blend-mode: normal; } :root:not([data-theme="light"]) :is(.alt .thumb, .d-art, .cmp .h-art) .fallback, :root:not([data-theme="light"]) .card .art .fallback { color: #14211D; } :root:not([data-theme="light"]) .photo-note { background: rgba(255,255,255,.8); color: #3C4A45; } }
:root[data-theme="dark"] :is(.card .art, .alt .thumb, .d-art, .cmp .h-art) { background: #F4F1EC; border-color: transparent; }
:root[data-theme="dark"] :is(.card .art, .alt .thumb, .d-art, .cmp .h-art) img { mix-blend-mode: normal; background: none; }
.cmp .h-art { border-radius: 8px; }
.card .art .fallback { width: 72%; color: var(--ink); }
.ribbon { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--sun); color: var(--on-sun); font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 8px; }
.ribbon.cond { background: var(--surface); color: var(--sun-ink); border: 1.5px solid var(--sun); }
.photo-note { position: absolute; right: 10px; bottom: 8px; font: 400 11px/14px var(--font-ui); color: var(--ink-3); background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 1px 6px; border-radius: 6px; }
.save-heart { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.save-heart svg { width: 20px; height: 20px; }
.save-heart[aria-pressed="true"] { color: #C2410C; }
.save-heart[aria-pressed="true"] svg path { fill: currentColor; }
.card .body { padding: 14px 16px 16px; }
.card h3 { margin: 0; font: 600 24px/30px var(--font-display); font-variation-settings: "SOFT" 50; letter-spacing: -.01em; }
.variant { margin: 2px 0 0; color: var(--ink-2); font: 400 13px/18px var(--font-ui); }
.priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; }
.price { font: 600 28px/32px var(--font-display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.price.sm { font-size: 20px; line-height: 24px; }
.was { color: var(--ink-3); text-decoration: line-through; font-size: 14px; }
.seller { color: var(--ink-2); font-size: 15px; }
.fresh { margin: 2px 0 0; color: var(--ink-3); font: 400 13px/18px var(--font-ui); display: flex; align-items: center; gap: 4px; }
.fresh button { background: none; border: 0; padding: 0; width: 20px; height: 20px; color: var(--ink-3); display: inline-flex; }
.meterrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: none; border: 0; padding: 4px 0; min-height: 36px; text-align: left; color: var(--ink); }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 22px; height: 8px; border-radius: 4px; background: var(--line); }
.meter i.on { background: var(--trail); }
.meter.possible i.on { background: var(--sun); }
.meter.sm i { width: 14px; height: 6px; }
.meterlabel { font: 500 15px/20px var(--font-ui); }
.meterlabel span { color: var(--ink-3); font-weight: 400; }
.sec { margin-top: 14px; }
.overline { font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--trail); margin: 0 0 6px; }
.why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.why li { display: flex; gap: 8px; font-size: 15px; line-height: 22px; }
.why li svg { width: 16px; height: 16px; color: var(--trail); flex: none; transform: translateY(3px); }
.catchbox { margin-top: 12px; background: var(--sun-tint); color: var(--ink); border-radius: 12px; padding: 10px 12px; display: flex; gap: 8px; font-size: 15px; line-height: 22px; box-shadow: inset 3px 0 0 var(--sun); }
.catchbox svg { width: 18px; height: 18px; color: var(--sun-ink); flex: none; transform: translateY(2px); }
.catchbox b { color: var(--sun-ink); }
.confirm { margin-top: 10px; border: 1.5px dashed var(--sun); border-radius: 12px; padding: 8px 12px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.trustrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 14px 0 0; padding: 0; list-style: none; font: 400 13px/18px var(--font-ui); color: var(--ink-2); }
.trustrow li { display: flex; align-items: flex-start; gap: 6px; }
.trustrow svg { width: 16px; height: 16px; flex: none; color: var(--trail); transform: translateY(1px); }
.trustrow li.unk svg { color: var(--ink-3); }
.actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.actions .twin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn { min-height: 48px; border-radius: var(--r-btn); padding: 12px 16px; font: 600 15px/20px var(--font-ui); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid transparent; text-decoration: none; transition: background .12s, transform .08s; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--trail); color: var(--on-trail); border-color: var(--trail); }
.btn.primary:hover { background: var(--trail-strong); border-color: var(--trail-strong); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--control-border); }
.btn.secondary:hover { border-color: var(--trail); }
.btn.text { background: none; color: var(--trail); padding-left: 0; padding-right: 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--trail) 40%, transparent); }
.btn svg { width: 18px; height: 18px; }
.btn.block { width: 100%; }
.wider-tag { display: inline-block; margin-top: 6px; font: 500 12px/16px var(--font-ui); color: var(--ink-2); background: var(--sunk); padding: 3px 8px; border-radius: 6px; }

.alt { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px; }
.alt .thumb { width: 96px; height: 96px; border-radius: 12px; background: linear-gradient(180deg, var(--surface) 60%, var(--sunk)); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.alt .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.alt .thumb .fallback { width: 86%; color: var(--ink); }
.role { font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--trail); }
.alt h3 { font-size: 19px; line-height: 24px; margin-top: 2px; }
.alt .priceline { margin-top: 4px; gap: 4px 8px; }
.overb { font: 500 12px/16px var(--font-ui); color: var(--sun-ink); background: var(--sun-tint); padding: 2px 6px; border-radius: 6px; }
.alt .meterrow { margin-top: 4px; min-height: 28px; }
.alt .meterlabel { font-size: 13px; }
.alt .line { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.alt .line b { color: var(--ink); }
.alt .line.c { color: var(--ink-2); }
.alt .links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.alt .links .btn.text { min-height: 36px; font-size: 14px; }
.disclose { font-size: 14px; line-height: 20px; color: var(--ink-2); margin: 4px 0; }
.disclose .linkish { padding: 0 2px; min-height: 0; font-size: 14px; }
.changed { background: var(--trail-tint); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 20px; margin: 4px 0; animation: enter .18s var(--ease) both; }

/* ---------------- suggestions ---------------- */
.suggest { margin: 4px 0 8px 36px; }
.suggest .lead { margin: 0 0 8px; font-size: 15px; }

/* ---------------- law card ---------------- */
.lawcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; margin: 4px 0 8px; max-width: 600px; animation: enter .18s var(--ease) both; }
.lawcard h3 { margin: 0 0 2px; font: 600 19px/26px var(--font-display); }
.lawcard .sub { margin: 0 0 10px; color: var(--ink-3); font-size: 13px; line-height: 18px; }
.lawgrid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; line-height: 20px; margin: 0; }
.lawgrid dt { color: var(--ink-3); }
.lawgrid dd { margin: 0; }
.status { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.status svg { width: 14px; height: 14px; }
.status.yes { color: var(--trail); } .status.limited, .status.unclear { color: var(--sun-ink); } .status.not_recognized { color: var(--danger); }
.banner { margin-top: 10px; background: var(--sun-tint); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 18px; }
details.more { margin-top: 10px; font-size: 14px; line-height: 20px; }
details.more summary { cursor: pointer; color: var(--trail); font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.srcs { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.srcs a { color: var(--info); }

/* ---------------- composer ---------------- */
.composer { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 30%); }
.composer input { flex: 1; min-width: 0; height: 52px; border-radius: 26px; border: 1.5px solid var(--control-border); background: var(--surface); padding: 0 60px 0 18px; font-size: 16px; color: var(--ink); }
.composer input::placeholder { color: var(--ink-3); }
.composer input:focus { border-color: var(--trail); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--trail) 25%, transparent); }
.send { position: absolute; right: 4px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--trail); color: var(--on-trail); display: inline-flex; align-items: center; justify-content: center; }
.send svg { width: 20px; height: 20px; }
.newmsg { position: sticky; bottom: 80px; align-self: flex-end; z-index: 21; border: 0; background: var(--ink); color: var(--paper); border-radius: 999px; min-height: 40px; padding: 8px 14px; font: 500 14px/20px var(--font-ui); display: inline-flex; gap: 6px; align-items: center; box-shadow: var(--shadow-2); }

/* ---------------- footer ---------------- */
.foot { max-width: 1120px; margin: 0 auto; padding: 16px var(--gutter) 28px; color: var(--ink-3); font-size: 13px; line-height: 19px; border-top: 1px solid var(--line); }
.foot p { margin: 0 0 6px; max-width: 70em; }
.foot .linkish { padding: 0 2px; min-height: 0; font-size: 13px; color: var(--ink-2); }

/* ---------------- sheets ---------------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(14, 21, 19, .45); animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-3); animation: up .26s var(--ease); }
:root[data-theme="dark"] .sheet { border: 1px solid var(--line); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-grab { width: 36px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 0; flex: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px var(--gutter) 8px; flex: none; }
.sheet-head h2 { margin: 6px 0 0; font: 600 24px/30px var(--font-display); font-variation-settings: "SOFT" 50; letter-spacing: -.01em; }
.iconbtn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--sunk); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.iconbtn svg { width: 20px; height: 20px; }
.sheet-body { overflow-y: auto; padding: 0 var(--gutter) 20px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet-foot { flex: none; padding: 10px var(--gutter) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
.sheet .subtitle { margin: -2px 0 12px; color: var(--ink-2); font-size: 14px; line-height: 20px; }

/* detail sheet */
.d-art { aspect-ratio: 16/9; border-radius: var(--r-card); background: linear-gradient(180deg, #fff 70%, var(--sunk)); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); }
.d-art img { width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; }
.d-art .fallback { width: 60%; color: #14211D; }
.block { margin: 18px 0 0; }
.block h3 { margin: 0 0 8px; font: 600 19px/26px var(--font-display); }
.fitlist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.fitlist li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 22px; }
.fitlist li:first-child { border-top: 0; }
.fitlist .dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.fitlist .dot svg { width: 14px; height: 14px; }
.fitlist li.yes .dot { background: var(--trail); color: var(--on-trail); }
.fitlist li.caveat { background: var(--sun-tint); } .fitlist li.caveat .dot, .fitlist li.unknown .dot { background: var(--sun); color: #14211D; }
.fitlist li.unknown { background: var(--sunk); }
.fitlist li.no { background: var(--danger-tint); } .fitlist li.no .dot { background: var(--danger); color: #fff; }
.fitlist .w { font-weight: 600; }
.fitlist .lab { color: var(--ink-3); font-size: 13px; display: block; line-height: 18px; }
.qlist { margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; }
.qlist li + li { margin-top: 4px; }
.specs { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; background: var(--surface); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.specs th, .specs td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.specs tr:first-child th, .specs tr:first-child td { border-top: 0; }
.specs th { font-weight: 500; color: var(--ink-2); width: 38%; }
.specs .mean { display: block; color: var(--ink-3); font-size: 13px; line-height: 18px; margin-top: 2px; }
.ev { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 500 12px/16px var(--font-ui); color: var(--info); background: var(--info-tint); border-radius: 999px; padding: 2px 8px; text-decoration: none; }
.ev svg { width: 11px; height: 11px; }
.claim { font: 600 12px/16px var(--font-ui); color: var(--ink-2); margin-right: 4px; }
.range { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.slider { margin: 10px 0 14px; }
.slider label { display: flex; justify-content: space-between; font: 500 14px/20px var(--font-ui); color: var(--ink-2); }
.slider output { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; height: 44px; accent-color: var(--trail); background: transparent; }
.rangeout { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.gauge { width: 120px; height: 36px; position: relative; flex: none; }
.gauge .shell { position: absolute; inset: 0 8px 0 0; border: 2.5px solid var(--ink-2); border-radius: 8px; padding: 3px; }
.gauge .nub { position: absolute; right: 0; top: 11px; width: 6px; height: 14px; background: var(--ink-2); border-radius: 0 3px 3px 0; }
.gauge .lvl { height: 100%; border-radius: 4px; background: var(--trail); transition: width .3s ease-out; }
.gauge.low .lvl { background: var(--sun); } .gauge.crit .lvl { background: var(--danger); }
.foot-note { font-size: 13px; line-height: 18px; color: var(--ink-3); margin: 10px 0 0; }
.flags { margin: 0; padding-left: 20px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.flags li + li { margin-top: 6px; }

/* price box */
.offer { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-2); }
.offer-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.offer-top .s { font-weight: 600; }
.pill { font: 500 12px/16px var(--font-ui); background: var(--sunk); color: var(--ink-2); padding: 3px 8px; border-radius: 999px; }
.badge { font: 500 12px/16px var(--font-ui); background: var(--trail-tint); color: var(--trail-strong); padding: 3px 8px; border-radius: 999px; display: inline-flex; gap: 4px; align-items: center; }
.badge svg { width: 12px; height: 12px; }
.badge.info { background: var(--info-tint); color: var(--info); }
.facts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.facts li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.facts svg { width: 16px; height: 16px; color: var(--ink-3); transform: translateY(2px); }
.facts li.unk { color: var(--ink-3); }
.disclosure-line { margin: 12px 0 10px; font-size: 16px; line-height: 24px; color: var(--ink-2); background: var(--sunk); border-radius: 12px; padding: 10px 12px; display: flex; gap: 8px; }
.disclosure-line svg { width: 18px; height: 18px; flex: none; color: var(--info); transform: translateY(3px); }
.storebtn { display: flex; gap: 8px; align-items: center; }
.storebtn .btn { flex: 1; }
.tag { font: 500 12px/16px var(--font-ui); background: var(--sunk); color: var(--ink-2); padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.tag.nocomm { background: var(--info-tint); color: var(--info); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 22px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.ck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--control-border); display: inline-flex; align-items: center; justify-content: center; transform: translateY(1px); }
.ck.on { background: var(--trail); border-color: var(--trail); color: var(--on-trail); }
.ck svg { width: 12px; height: 12px; }
.ready h3 { display: flex; justify-content: space-between; align-items: baseline; }
.ready h3 span { font: 500 14px/20px var(--font-ui); color: var(--ink-3); }
.ready .ok { color: var(--trail); font-weight: 600; margin: 6px 0 0; }
.ready .linkish { padding: 0; min-height: 0; color: var(--trail); font-size: 14px; }

/* compare */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; }
.cmp thead th { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 8px 4px 10px; vertical-align: bottom; text-align: center; font-weight: 500; }
.cmp .h-art { width: 64px; height: 44px; margin: 0 auto 4px; position: relative; }
.cmp .h-art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cmp .h-art .fallback { width: 100%; color: var(--ink); }
.cmp .h-name { display: block; font-size: 13px; line-height: 17px; }
.cmp .h-price { display: block; font: 600 16px/20px var(--font-display); font-variant-numeric: tabular-nums; }
.cmp .toppick::before { content: ""; position: absolute; top: -2px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--sun); }
.cmp .grp th { text-align: left; background: var(--sunk); font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 8px; }
.cmp .lab th { text-align: left; font-weight: 600; font-size: 13px; padding: 10px 4px 2px; color: var(--ink); }
.cmp .q { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--control-border); background: none; font: 600 12px/1 var(--font-ui); color: var(--ink-2); margin-left: 4px; vertical-align: 1px; padding: 0; }
.cmp .explain { display: block; font-weight: 400; color: var(--ink-3); font-size: 13px; line-height: 18px; margin-top: 2px; }
.cmp td { text-align: center; padding: 6px 4px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cmp td .v { display: block; border-radius: 8px; padding: 6px 4px; }
.cmp td.best .v { background: var(--trail-tint); font-weight: 600; }
.cmp td.best .bf { display: block; font: 500 11px/14px var(--font-ui); color: var(--trail-strong); }
.cmp td.bad .v { background: var(--danger-tint); }
.cmp td .sub { display: block; color: var(--ink-3); font-size: 12px; line-height: 16px; }
details.same { margin-top: 10px; }
details.same summary { cursor: pointer; font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--sunk); padding: 10px 8px; border-radius: 8px; }
.verdict { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; }
.buyrow { display: grid; gap: 8px; margin-top: 12px; }

/* receipts */
.rgroup { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-top: 10px; }
.rgroup summary { cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; font-weight: 500; min-height: 44px; align-items: center; }
.rgroup summary .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rgroup ul { list-style: none; margin: 0; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.rgroup li { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.rgroup li b { color: var(--ink); display: block; }
.rgroup .fix { color: var(--ink-3); font-size: 13px; }

/* save + forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.field label { font: 500 14px/20px var(--font-ui); }
.field input[type=email] { min-height: 48px; border-radius: var(--r-input); border: 1.5px solid var(--control-border); background: var(--surface); padding: 10px 12px; font-size: 16px; }
.checkrow { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 14px; line-height: 20px; min-height: 44px; }
.checkrow input { width: 22px; height: 22px; accent-color: var(--trail); flex: none; margin-top: 0; }
.btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.small { font-size: 13px; line-height: 18px; color: var(--ink-3); }
.prose p { margin: 0 0 12px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.prose h3 { font: 600 19px/26px var(--font-display); margin: 18px 0 8px; color: var(--ink); }
.prose ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); }
.prose li + li { margin-top: 4px; }
.savedlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.savedlist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }

/* pane (desktop) */
.pane-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow-1); }
.pane-title { margin: 0 0 6px; font: 600 19px/26px var(--font-display); }
.pane-empty { margin: 0; color: var(--ink-3); font-size: 14px; line-height: 20px; }
.pane-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pane-chips .pchip { white-space: normal; text-align: left; }
.pane-count { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font: 500 14px/20px var(--font-ui); color: var(--ink-2); }
.pane-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.whatchanged { margin-top: 10px; background: var(--trail-tint); border-radius: 10px; padding: 8px 10px; font-size: 13px; line-height: 18px; }
.sample { color: var(--ink-3); }
.sample-card { border: 1px dashed var(--line); border-radius: 14px; padding: 12px; position: relative; opacity: .8; }
.sample-card .ribbon { position: static; display: inline-block; font-size: 11px; padding: 3px 7px; }
.sample-art { height: 80px; color: var(--ink-3); margin: 6px 0; }
.sample-name { font: 600 17px/22px var(--font-display); color: var(--ink-2); margin: 0 0 6px; }
.sample-line { margin: 6px 0 0; font-size: 13px; line-height: 18px; }
.sample-line.catch { color: var(--sun-ink); }
.sample-note { margin: 8px 0 0; font-size: 12px; line-height: 16px; }
.pane-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pane-actions .btn { font-size: 14px; padding: 10px; }

.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; background: var(--ink); color: var(--paper); border-radius: 12px; padding: 10px 16px; font: 500 14px/20px var(--font-ui); box-shadow: var(--shadow-2); }
.noscript { padding: 24px; text-align: center; }

/* ---------------- tablet ---------------- */
@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .chat { max-width: 680px; margin: 0 auto; }
  .hero h1 { font-size: 40px; line-height: 44px; }
  .tiles { grid-template-columns: 1fr 1fr 1fr; }
  .alts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .alt { grid-template-columns: 1fr; }
  .alt .thumb { width: 100%; height: 120px; }
  .sheet { left: 50%; right: auto; transform: translateX(-50%); width: min(720px, 100vw); bottom: 0; }
  @keyframes up { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translateX(-50%); } }
}

/* ---------------- desktop ---------------- */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  .desk-only { display: inline-flex; }
  .desk-only[hidden] { display: none; }
  .strip { display: none !important; }
  .layout { display: grid; grid-template-columns: minmax(0, 680px) 360px; gap: 40px; justify-content: center; padding: 0 var(--gutter); }
  .chat { padding: 0; margin: 0; max-width: 680px; }
  .pane { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 72px; align-self: start; padding-top: 24px; max-height: calc(100dvh - 88px); overflow-y: auto; }
  .hero h1 { font-size: 44px; line-height: 48px; }
  .sheet.side { left: auto; right: 0; top: 0; bottom: 0; transform: none; width: 480px; max-height: none; border-radius: var(--r-sheet) 0 0 var(--r-sheet); animation: slide .26s var(--ease); }
  .sheet.side .sheet-grab { display: none; }
  .sheet.modal { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(1040px, 92vw); max-height: 88dvh; border-radius: var(--r-sheet); animation: pop .22s var(--ease); }
  .sheet.modal.narrow { width: min(720px, 92vw); }
  .sheet.modal .sheet-grab { display: none; }
  @keyframes slide { from { transform: translateX(40px); opacity: 0; } }
  @keyframes pop { from { transform: translate(-50%, -48%); opacity: 0; } to { transform: translate(-50%, -50%); } }
  .trustrow { grid-template-columns: repeat(4, auto); justify-content: start; gap: 6px 18px; }
  .actions .primary-wrap { display: flex; gap: 8px; }
  .cmp thead th { padding: 10px 8px; }
}
.cmp th.rowlab { display: none; text-align: left; font-weight: 600; font-size: 14px; padding: 10px 8px; width: 220px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (min-width: 1024px) { .cmp tr.lab { display: none; } .cmp th.rowlab { display: table-cell; } .cmp thead th.rowlab { border-bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .08s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; scroll-behavior: auto !important; }
  .card, .bubble, .answers, .matching { animation-name: fade !important; }
  .mark.found { animation: none !important; }
  .dots i { animation: none !important; opacity: .7; }
}


/* ======================= v2: My Honest Pick ======================= */
.category { font: 500 14px/1 var(--font-ui); color: var(--ink-3); margin-left: -4px; }
.brand .mark svg { width: 18px; height: 18px; }

/* landing */
.landing { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.entries-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.entries-main .btn { min-width: 200px; font-size: 16px; }
.nosignup { font: 500 13px/18px var(--font-ui); color: var(--ink-3); }
.entries-alt { display: flex; gap: 4px 12px; flex-wrap: wrap; margin-top: -8px; }
.entries-alt .linkish { padding-left: 0; color: var(--trail); text-decoration-color: color-mix(in srgb, var(--trail) 45%, transparent); }
.example { margin: 0; background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--r-card); padding: 12px 14px 14px; }
.example .overline { margin: 0 0 8px; }
.proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 500 14px/20px var(--font-ui); color: var(--ink-2); }
.proof li { display: flex; gap: 8px; align-items: flex-start; }
.proof svg { color: var(--trail); margin-top: 2px; }
.editor-strip { display: flex; gap: 10px; align-items: center; background: var(--sunk); border-radius: 12px; padding: 8px 12px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.editor-strip p { margin: 0; }
.editor-strip .linkish { min-height: 32px; padding: 6px 2px; font-size: 13px; }
.ed-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--surface); border: 2px solid var(--trail); }
.ed-avatar.pending { border: 2px dashed var(--control-border); background: transparent; }
.honesty { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.honesty li:not(:last-child)::after { content: "·"; margin: 0 8px; }
.hero.started { padding-bottom: 0; }
.hero.started h1 { font-size: 24px; line-height: 30px; margin-bottom: 0; }
.hero.started > p, .hero.started .landing { display: none; }

/* decision receipt (example, pick card, detail) */
.receipt { display: grid; gap: 6px; margin: 10px 0 12px; }
.receipt .r { margin: 0; display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 10px; font-size: 15px; line-height: 21px; }
.receipt .r svg { width: 16px; height: 16px; margin-top: 3px; }
.receipt .why svg { color: var(--trail); }
.receipt .drawback { background: var(--sun-tint); color: var(--sun-ink); }
.receipt .drawback b { color: var(--sun-ink); }
.receipt .confirm { background: var(--info-tint); }
.receipt .confirm svg { color: var(--info); }
.receipt .thin { color: var(--ink-2); font-size: 14px; }
.receipt .thin svg { color: var(--info); }

/* coverage receipt */
.coverage { background: var(--sunk); border-radius: var(--r-card); padding: 14px 16px; margin: 6px 0; animation: rise .2s var(--ease) both; }
.coverage .cv1 { margin: 0 0 8px; font-size: 15px; line-height: 22px; }
.cv2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; line-height: 22px; }
.cv2 li { display: flex; gap: 8px; align-items: flex-start; }
.cv2 svg { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.cv2 .ok svg { color: var(--trail); } .cv2 .prov svg { color: var(--info); } .cv2 .out svg { color: var(--danger); }
.cv2 b { font-variant-numeric: tabular-nums; }
.cvlinks { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 0 14px; }
.cvlinks .linkish { padding-left: 0; }

/* no-fit result */
.nofit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-2); padding: 18px 16px; margin: 6px 0; animation: rise .28s var(--ease) both; }
.nofit h2 { font: 600 22px/28px var(--font-display); font-variation-settings: "SOFT" 50; margin: 0 0 12px; }
.blockers { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.blockers li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 15px; line-height: 22px; }
.blockers svg { width: 18px; height: 18px; color: var(--danger); margin-top: 2px; }
/* CX walk v170 #19: under the closest card the counters sit behind one tap */
details.whynofit { margin: 0 0 14px; } details.whynofit > summary { cursor: pointer; color: var(--trail); font-weight: 500; min-height: 44px; display: flex; align-items: center; } details.whynofit .blockers { margin-top: 6px; }
.unlocks { display: grid; gap: 8px; margin: 6px 0 4px; }
.unlocks .btn { justify-content: flex-start; text-align: left; }
.dontbuy { display: grid; grid-template-columns: 20px 1fr; gap: 8px; background: var(--sun-tint); color: var(--sun-ink); border-left: 3px solid var(--sun); border-radius: 10px; padding: 10px 12px; margin: 12px 0; font-size: 15px; line-height: 22px; }
.dontbuy svg { width: 18px; height: 18px; margin-top: 2px; }

/* pick card */
.card.pick-card { box-shadow: var(--shadow-2); }
.pick-card.provisional .ribbon { background: var(--info-tint); color: var(--info); }
.pick-card .body { padding: 14px 16px 16px; }
.pick-card h3 { font: 600 22px/28px var(--font-display); font-variation-settings: "SOFT" 50; margin: 0; }
.priceline .pstate { font-size: 13px; line-height: 18px; color: var(--ink-2); }
.priceline { flex-wrap: wrap; row-gap: 2px; }
.evline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0; font: 600 13px/18px var(--font-ui); color: var(--ink-2); }
.evline > svg { color: var(--ink-3); }
.conf { font: 600 12px/16px var(--font-ui); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.conf.high, .conf.med { background: var(--trail-tint); color: var(--trail-strong); }
.conf.low { background: var(--sun-tint); color: var(--sun-ink); }
.evline .reason { background: none; border: 0; padding: 0 2px; min-height: 44px; margin: -12px 0; font: 500 13px/18px var(--font-ui); color: var(--info); text-decoration: underline; text-underline-offset: 3px; text-align: left; }
.fitsum { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 8px 10px; background: var(--sunk); border: 0; border-radius: 10px; text-align: left; font: 500 14px/20px var(--font-ui); color: var(--ink); }
.fitsum span { display: inline-flex; gap: 6px; align-items: center; }
.fitsum .m svg { color: var(--trail); } .fitsum .c svg { color: var(--info); } .fitsum .n svg { color: var(--danger); }
.alsocheck { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.alsocheck li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.alsocheck svg { color: var(--info); margin-top: 2px; }
.pick-card .actions { margin-top: 14px; }
.actions .twin { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .twin .btn { flex: 1 1 140px; }
.commission { margin: 10px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* alternates and misses */
.alts { display: grid; gap: 12px; }
.alt .abody { min-width: 0; }
.alt.value .role { color: var(--trail-strong); }
.alt.diff .role { color: var(--sun-ink); }
.alt .evline { margin-top: 6px; font-size: 12px; }
.alt .fitsum { font-size: 13px; padding: 6px 8px; }
.alt .line.q b { color: var(--info); }
.misses { display: grid; gap: 8px; margin-top: 4px; }
.misses .overline { margin: 6px 0 0; }
.card.miss { box-shadow: none; border: 1.5px dashed var(--control-border); background: transparent; padding: 12px 14px; animation: none; }
.card.miss .role { color: var(--ink-3); }
.card.miss h3 { margin: 2px 0 4px; font: 600 17px/22px var(--font-display); }
.line.nm { display: grid; grid-template-columns: 18px 1fr; gap: 6px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.line.nm svg { color: var(--danger); margin-top: 2px; }
.under { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.under .linkish { min-height: 32px; padding: 4px 2px; font-size: 13px; }

/* question forms */
.qnote { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.qform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.qform select, .qform input { min-height: 48px; border-radius: var(--r-input); border: 1.5px solid var(--control-border); background: var(--surface); padding: 10px 12px; font-size: 16px; }
.qform select { min-width: 92px; }
#state-sel { flex: 1 1 200px; }
.pair { display: flex; gap: 8px; }
.numfield { position: relative; display: inline-flex; }
.numfield input { width: 150px; padding-right: 40px; }
.numfield .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 15px; }
.err { flex-basis: 100%; color: var(--danger); font-size: 13px; line-height: 18px; }
.err:empty { display: none; }

/* fit check: four states, word first */
.fitlist li { align-items: start; }
.fitlist li.meets .dot { background: var(--trail); color: var(--on-trail); }
.fitlist li.likely { background: var(--sun-tint); }
.fitlist li.likely .dot { background: var(--sun); color: var(--on-sun); }
.fitlist li.unknown { background: var(--info-tint); }
.fitlist li.unknown .dot { background: var(--info); color: var(--surface); }
.fitlist li.no { background: var(--danger-tint); }
.fitlist li.no .dot { background: var(--danger); color: var(--surface); }
.fitlist .w { display: block; font-weight: 600; color: var(--ink); }
.fitlist .t { display: block; color: var(--ink-2); }
.fitlist .lab { display: block; font: 600 12px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* evidence */
.srcchip { font: 600 11px/16px var(--font-ui); padding: 2px 8px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.srcchip.brand { background: var(--sunk); color: var(--ink-2); }
.srcchip.rev { background: var(--trail-tint); color: var(--trail-strong); }
.srcchip.est { background: var(--sun-tint); color: var(--sun-ink); }
.srcchip.own { background: var(--info-tint); color: var(--info); }
.tablewrap { overflow-x: auto; margin: 6px 0 4px; }
.evtable { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.evtable th, .evtable td { text-align: left; vertical-align: top; padding: 8px 6px; border-top: 1px solid var(--line); }
.evtable thead th { border-top: 0; font: 600 11px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.evtable tbody th { font-weight: 600; min-width: 96px; }
.evtable td:nth-child(2) { min-width: 160px; }
.evtable .ev { min-height: 32px; }
.rvlist { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 12px; }
.rvlist li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 15px; line-height: 22px; }
.disc { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 var(--font-ui); }
.disc.plus { background: var(--trail-tint); color: var(--trail-strong); }
.disc.minus { background: var(--sun-tint); color: var(--sun-ink); }
.rvlist .meta { display: block; font-size: 13px; line-height: 18px; color: var(--ink-3); margin-top: 2px; }
.rvlist .ev { min-height: 28px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pills .pill { background: var(--sunk); color: var(--ink-2); font: 500 12px/16px var(--font-ui); padding: 3px 8px; border-radius: 999px; }
.block h3.sub, h3.sub { font: 600 17px/22px var(--font-display); margin: 18px 0 6px; }
.empty { display: grid; grid-template-columns: 20px 1fr; gap: 8px; background: var(--info-tint); border-radius: 10px; padding: 10px 12px; margin: 6px 0; font-size: 15px; line-height: 22px; }
.empty svg { color: var(--info); width: 18px; height: 18px; margin-top: 2px; }
.disagree { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 14px; line-height: 20px; }
.disagree p { margin: 0; }
.banner { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }

/* offer box + purchase-risk summary */
.sticky-disc { position: sticky; top: -16px; z-index: 3; display: grid; grid-template-columns: 20px 1fr; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 15px; line-height: 22px; }
.sticky-disc svg { color: var(--info); margin-top: 3px; }
.offer .priceline { margin-top: 6px; }
.msrp { margin: 4px 0 0; color: var(--ink-3); }
.tag.paid, .tag.unknown { background: var(--sunk); color: var(--ink-2); }
.tag.none { background: var(--info-tint); color: var(--info); }
.allin { margin: 10px 0 0; color: var(--ink-3); }
.risk { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.risk h3 { font: 600 18px/24px var(--font-display); margin: 0 0 8px; }
.risk .overline { margin: 14px 0 6px; }
.cklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 22px; }
.cklist li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.cklist svg { width: 18px; height: 18px; margin-top: 2px; }
.cklist.ok svg { color: var(--trail); }
.cklist.q svg { color: var(--info); }
.copybox { background: var(--sunk); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.copybox pre { margin: 0; white-space: pre-wrap; font: 400 14px/20px var(--font-ui); color: var(--ink); }
.copybox .btn { justify-self: start; min-height: 44px; }
.checkpoints { margin-top: 4px; }
.preview { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.preview p { margin: 0 0 6px; }
.identity { margin: 0 0 12px; background: var(--sunk); border-radius: 10px; padding: 8px 12px; font: 500 13px/18px var(--font-ui); color: var(--ink-2); }
.note-info { background: var(--info-tint); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; line-height: 20px; }
.field textarea { min-height: 112px; border-radius: var(--r-input); border: 1.5px solid var(--control-border); background: var(--surface); padding: 10px 12px; font-size: 16px; resize: vertical; }
.pickdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); margin-right: 6px; vertical-align: 2px; }
.cmp .bf.no { background: var(--danger-tint); color: var(--danger); }
.foot .proto { color: var(--ink-3); }
.whatchanged strong { font-weight: 600; }
#pane-editor { display: grid; gap: 10px; }
#pane-editor .honesty { display: grid; gap: 4px; }
#pane-editor .honesty li::after { content: none; }

@media (min-width: 768px) {
  .landing { gap: 18px; }
  .proof { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .alts { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hero.started h1 { font-size: 28px; line-height: 34px; }
  .sticky-disc { top: -20px; }
}
@media (forced-colors: active) {
  .receipt .r, .fitlist li, .coverage, .conf, .tag, .srcchip { border: 1px solid CanvasText; }
}

.receipt .confirm { border: 0; }
.wordmark, .category { white-space: nowrap; }
.topnav .linkish { white-space: nowrap; }
@media (max-width: 479px) {
  .brand { display: grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; }
  .brand .mark { grid-row: 1 / span 2; }
  .wordmark { font-size: 18px; line-height: 20px; }
  .category { margin-left: 0; font-size: 12px; line-height: 14px; }
  .topnav .linkish { font-size: 13px; padding: 10px 4px; }
}

.tile { position: relative; }
.tile .tick { display: none; }
.tile[aria-pressed="true"] .tick { display: block; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; color: var(--trail); }
.stale { display: grid; grid-template-columns: 18px 1fr; gap: 6px; margin: 6px 0 0; background: var(--info-tint); border-radius: 8px; padding: 6px 10px; font-size: 13px; line-height: 18px; }
.stale svg { color: var(--info); margin-top: 1px; }
.evline .basis { display: inline-flex; gap: 6px; align-items: flex-start; }
.evline .basis svg { margin-top: 1px; color: var(--ink-3); }
.storebtn { flex-wrap: wrap; }
.storebtn .btn { flex: 1 1 230px; }

/* ===== v3 additions: why I ask, what changed, priorities, trade-offs, limits ===== */
.qwhy { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.qwhy span { font-weight: 600; color: var(--ink-2); }
.delta { display: grid; grid-template-columns: 18px 1fr; gap: 6px; align-self: flex-start; max-width: 560px; margin: 0 0 2px 36px; padding: 6px 10px; background: var(--trail-tint); border-radius: 10px; font-size: 13px; line-height: 18px; color: var(--ink); animation: rise .2s var(--ease) both; }
.delta svg { color: var(--trail-strong); width: 14px; height: 14px; margin-top: 2px; }
.chip .rankno { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; font: 700 12px/1 var(--font-ui); }
.chip[aria-pressed="true"] .rankno { background: var(--on-trail); color: var(--trail); }
.chip[aria-pressed="false"] .rankno { display: none; }
.importance { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 6px; }
.impack { display: inline-flex; gap: 6px; align-items: center; margin: 4px 0; font-size: 13px; color: var(--trail-strong); }
.impack svg { width: 14px; height: 14px; }
.limits { margin: 0; padding: 8px 12px; background: var(--sunk); border-radius: 10px; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.limits span { font-weight: 600; color: var(--ink); }
.limits .linkish { min-height: 32px; padding: 4px 2px; font-size: 13px; }
.tradeoffs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; }
.tradeoffs .overline { margin: 0 0 6px; }
.tradeoffs .chip { text-align: left; }
.tradeoffs .chip .sub { color: var(--ink-3); font-weight: 400; }
.tradeoffs .chip.on .sub, .tradeoffs .chip[aria-pressed="true"] .sub { color: var(--on-trail); }
.undo { margin: 4px 0; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.undo .btn.text { min-height: 44px; }
.pli { display: inline-flex; flex: none; }
.pane-chips .pli { flex: 0 1 auto; }
.ed-avatar.initials, .ed-photo.initials { display: inline-flex; align-items: center; justify-content: center; background: var(--trail-tint); color: var(--trail-strong); border: 0; font: 600 13px/1 var(--font-ui); letter-spacing: .02em; }
.ed-avatar.photo { object-fit: cover; border: 0; }
.editor-card { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.ed-photo { width: 56px; height: 56px; border-radius: 50%; flex: none; object-fit: cover; }
.ed-photo.initials { font-size: 18px; }
.ed-name { margin: 0; font: 600 19px/24px var(--font-display); }
.edlinks { white-space: nowrap; }
.aids { list-style: none; margin: 12px 0 0; padding: 10px 12px; background: var(--sunk); border-radius: 12px; display: grid; gap: 8px; font-size: 14px; line-height: 20px; }
.aids .aid { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.aids svg { color: var(--info); margin-top: 2px; }
.aids .linkish { min-height: 32px; padding: 2px; font-size: 14px; color: var(--trail); }
.aidbtn { margin: 6px 0 0; }
.aidbtn .btn.text { min-height: 44px; padding-left: 0; }

/* design batch 9: stage progress (design_system 5.5) */
.progress.stages { display: block; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin: 0 0 8px; }
.progress.stages::-webkit-scrollbar { display: none; }
.progress.stages ol { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 0; }
.progress.stages li { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 3px; }
.progress.stages li + li::before { content: '·'; margin: 0 6px; color: var(--ink-3); }
.progress.stages li.cur { color: var(--ink); font-weight: 600; }
.progress.stages li.done svg { width: 12px; height: 12px; color: var(--trail); }
.progress.stages > span:not(.sr) { font-size: 12px; color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* restored "still true?" chips (design_system 5.5c) */
.chips.restored { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip.restored { border-style: dashed; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
.chip.restored .from { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.chip.restored.confirmed { border-style: solid; }
.chip.restored.confirmed .from { display: none; }
.chip.restored.gone { opacity: .5; text-decoration: line-through; }
.suggest .forget { margin: 6px 0 0; }

/* early shortlist (design_system 5.5b) */
.shortlist { background: var(--surface, #fff); border: 1px solid var(--line, #d9e0dc); border-radius: 16px; padding: 14px 16px; margin: 8px 0 12px; }
.shortlist ol { list-style: none; margin: 0 0 10px; padding: 0; }
.shortlist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #e3e8e5); }
.shortlist li:last-child { border-bottom: 0; }
.shortlist .nm { font-weight: 600; color: var(--ink); }
.shortlist .pr { font-variant-numeric: tabular-nums; color: var(--ink); }
.shortlist .nc { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }
.shortlist .nc.prov { color: var(--ink-2); font-style: italic; }
.shortlist .btnrow .btn { min-height: 44px; }
.shortlist .refinelead { margin: 12px 0 6px; color: var(--ink-2); }
.chips.refine .chip { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
.chips.refine .cap { font-size: 12px; color: var(--ink-3); font-weight: 400; }
.optfield { margin: 10px 0 0; }
.optfield label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 4px; }
.chip.toggle[aria-pressed="false"] svg { visibility: hidden; }
.chip.toggle[aria-pressed="true"] { border-color: var(--trail); color: var(--trail-strong); }

/* growth freshness drill banner (?asof=) */
.asof-banner { margin: 0; padding: 6px 16px; font-size: 13px; background: var(--trail-tint); color: var(--ink); text-align: center; }
.shortlist .shared { margin: 0 0 6px; }
.shortlist .shared .nc { margin: 0 0 2px; font-size: 13px; color: var(--ink-2); }
.shortlist .shared .prov { font-style: italic; }
.proof { margin: 0 0 10px; }
.proof .pp { margin: 0 0 4px; color: var(--ink-2); font-size: 15px; }
.proof .pp.lead { color: var(--ink); font-size: 16px; }
.sizeline { margin: 6px 0 4px; color: var(--ink-2); }
.builds { margin: 8px 0; }
.builds p { margin: 4px 0; }
.buildchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }

/* ---------------- batch 12: best bikes now, bike-sheet tabs, policies, owners (design_system 5.25-5.28) ---------------- */
.composer.haspill { padding-top: 54px; background: var(--paper); box-shadow: 0 -1px 0 var(--line); }
.bestpill { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--control-border); background: var(--surface); color: var(--ink); font: 500 14px/20px var(--font-ui); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; box-shadow: var(--shadow-1); z-index: 2; }
.bestpill:hover { border-color: var(--trail); }
.bestpill:focus-visible { outline: 3px solid var(--trail); outline-offset: 2px; }
.provtag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--sun-tint); color: var(--sun-ink); font: 600 12px/18px var(--font-ui); vertical-align: 1px; }
.bestlist { list-style: none; padding: 0; margin: 12px 0; counter-reset: best; }
.bestlist li { counter-increment: best; }
.bestrow { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; font: 15px/20px var(--font-ui); }
.bestrow::before { content: counter(best) "."; color: var(--ink-2); min-width: 18px; }
.bestrow .nm { flex: 1; font-weight: 600; }
.bestrow .ps { color: var(--ink-2); font-size: 14px; }
.unknowns { list-style: none; padding: 0; margin: 8px 0 12px; }
.unknowns li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.unlocks { list-style: none; padding: 0; }
.dtabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 0 14px; padding: 2px; border-radius: 12px; background: var(--sunk); scrollbar-width: none; }
.dtabs::-webkit-scrollbar { display: none; }
.dtabs [role=tab] { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 14px/20px var(--font-ui); white-space: nowrap; }
.dtabs [role=tab][aria-selected=true] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.dtabs [role=tab]:focus-visible { outline: 3px solid var(--trail); outline-offset: 1px; }
.pchips { margin: 4px 0 10px; }
.pcard { border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; background: var(--surface); margin-bottom: 12px; }
.pcard .ph { margin: 0 0 8px; }
.prow { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.prow .pl { font-size: 13px; color: var(--ink-2); }
.prow .pv { font-size: 15px; color: var(--ink); }
.prow .pd { font-size: 12px; color: var(--ink-3); }
.prow .ns { color: var(--ink-2); display: inline-flex; align-items: center; gap: 4px; }
.prow .ns svg { width: 14px; height: 14px; }
.pdiff { padding: 8px 10px; border-radius: 10px; background: var(--trail-tint); }
.pconf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: var(--info-tint); margin-bottom: 8px; font-size: 14px; }
.owncols { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .owncols { grid-template-columns: 1fr 1fr; } }
.themes { list-style: none; padding: 0; margin: 4px 0; }
.themes li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.themes li .small { display: block; color: var(--ink-2); }
.rvlist.plain li { padding: 6px 0; }
.rvlist .q { font-style: italic; font-size: 14px; }
.revs { list-style: none; padding: 0; margin: 6px 0 12px; }
.revs li { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 22px; }
.revs .q { display: block; margin-top: 4px; font-style: italic; font-size: 14px; color: var(--ink-2); }
.revs .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.btn .sm { display: none; }
@media (max-width: 400px) { .btn .lg { display: none; } .btn .sm { display: inline; } }
.pdet { display: inline; } .pdet summary { display: inline; cursor: pointer; color: var(--trail); font-size: 14px; } .pdet[open] { display: block; margin-top: 4px; }
.lawsent { list-style: none; padding: 0; margin: 8px 0; }
.lawsent li { padding: 6px 0; border-bottom: 1px solid var(--line); }

/* ---------------- CX batch 17 (design_system §8b): the page is the chat, at every size ----------------
   A 44 px brand bar, one scrolling log and the composer pinned to the bottom. Only the log scrolls; the height follows the
   visual viewport (--app-h, set by app.js) so the composer and the last message stay above the on-screen keyboard. */
html:has(body.appshell) { height: 100%; overflow: hidden; scroll-behavior: auto; }
body.appshell { height: 100vh; height: var(--app-h, 100dvh); display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none; }
.appshell .topbar { position: relative; top: auto; flex: none; height: 44px; border-bottom: 1px solid var(--line); padding: 0 max(var(--gutter), calc((100% - 640px) / 2 + var(--gutter))); }
.appshell .topbar .brand { min-height: 44px; }
.appshell .toplink { font-size: 13px; line-height: 18px; min-height: 44px; padding: 0 2px; color: var(--ink-2); white-space: nowrap; text-align: right; }
.appshell .strip:not([hidden]) { display: flex !important; }
.appshell .strip { position: relative; top: auto; flex: none; gap: 12px; padding: 0 max(var(--gutter), calc((100% - 640px) / 2 + var(--gutter))); min-height: 44px; }
.strip-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 14px/20px var(--font-ui); text-align: left; cursor: pointer; }
.strip-btn .strip-label { text-transform: none; letter-spacing: 0; font: 600 14px/20px var(--font-ui); color: var(--ink); }
.strip-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.strip-edit { margin-left: auto; color: var(--trail-strong, var(--trail)); text-decoration: underline; text-underline-offset: 3px; }
.appshell .strip .linkish { min-height: 44px; white-space: nowrap; font-size: 14px; }
.appshell .layout { display: contents; }
.appshell .chat { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 640px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; }
.scroller { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 var(--gutter); }
.appshell .hero { padding: 0; }
.appshell .foot { max-width: none; margin: 0; padding: 10px 0 0; border-top: 0; color: var(--ink-3); font-size: 12px; line-height: 18px; text-align: center; }
.appshell .foot .linkish { font-size: 12px; line-height: 18px; min-height: 0; padding: 0 2px; color: var(--ink-3); }
.appshell .log { flex: none; padding: 12px 0 16px; }
.appshell .composer { position: relative; bottom: auto; flex: none; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: none; }
.appshell .composer.haspill { padding-top: 54px; box-shadow: none; }
.appshell .composer input { font-size: 16px; }
.appshell .newmsg { position: absolute; right: var(--gutter); bottom: calc(100% - 100% + 140px); margin: 0; }
.appshell .pane { display: none !important; }
.appshell .chips { flex-wrap: wrap; }
@media (min-width: 768px) {
  .appshell .sheet, .appshell .sheet.side { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(560px, 92vw); max-height: 88dvh; border-radius: var(--r-sheet); animation: shellpop .22s var(--ease); }
  .appshell .sheet.modal { width: min(720px, 92vw); }
  .appshell .sheet .sheet-grab { display: none; }
  @keyframes shellpop { from { transform: translate(-50%, -48%); opacity: 0; } to { transform: translate(-50%, -50%); } }
}
@media (max-width: 359px) { .appshell .toplink { font-size: 12px; } .appshell .wordmark { font-size: 15px; } }
@media (max-width: 479px) {
  .appshell .topbar { gap: 8px; }
  .appshell .toplink { white-space: normal; max-width: 9.5em; font-size: 12px; line-height: 15px; }
  .appshell .wordmark { font-size: 17px; }
}
.bubble .caption { margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.suggest.quiet .chips { gap: 4px 6px; }
.suggest.quiet .chip { min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--trail-strong, var(--trail)); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.appshell .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appshell .tile > span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 768px) { .appshell .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359px) { .appshell .tile { gap: 8px; padding: 8px 10px; font-size: 14px; } .appshell .tile .ico { width: 28px; height: 28px; } }
.appshell .bestpill { height: 44px; top: 8px; }
.appshell .composer.haspill { padding-top: 60px; }
.lawdirect { margin: 0 0 8px; font-size: 16px; line-height: 22px; }
.tile.proposed, .chip.proposed:not(.primary) { border-color: var(--trail); background: var(--trail-tint); }
.tile.proposed::after { content: "You said"; position: absolute; top: 6px; right: 8px; font: 600 11px/14px var(--font-ui); color: var(--trail-strong, var(--trail)); }
.lawmore { margin-top: 6px; }
.lawmore summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--trail-strong, var(--trail)); font-weight: 600; }
/* CX batch 20 */
.appshell .topbar { position: sticky; top: 0; z-index: 30; }
.appshell .tile > span { word-break: keep-all; overflow-wrap: normal; hyphens: manual; }
.appshell .infobtn { width: 44px; height: 44px; flex: none; margin-right: -10px; color: var(--ink-2); }
.appshell .infobtn svg { width: 22px; height: 22px; }
.appshell .topbar .brand { margin-right: auto; }
.infolist { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.inforow { width: 100%; min-height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: 500 16px/22px var(--font-ui); text-align: left; cursor: pointer; }
.inforow .small { color: var(--ink-3); font-size: 13px; line-height: 18px; }
.toplink .tl-sm { display: none; }
@media (max-width: 359px) {
  .toplink .tl-lg { display: none; } .toplink .tl-sm { display: inline; }
  .appshell .toplink { max-width: 6.5em; }
  .appshell .wordmark { font-size: 15px; }
  .appshell .topbar .mark { transform: scale(.85); }
}
/* one-step confirmation card */
.confirmcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; display: grid; gap: 10px; margin: 4px 0; }
.confirmcard .lead { margin: 0; font-weight: 600; }
.confirmcard .crow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.confirmcard .crow.ctl { display: grid; gap: 6px; }
.confirmcard .cv { flex: 1; min-width: 0; }
.confirmcard .clabel { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.confirmcard .chips { gap: 6px; }
.confirmcard .chip.small { min-height: 44px; padding: 8px 12px; font-size: 14px; }
.confirmcard .chip.on { background: var(--trail-tint); border-color: var(--trail); font-weight: 600; }
.confirmcard .linkish.small { min-height: 44px; padding: 0 4px; }
.confirmcard .chip.on, .confirmcard .chip[aria-pressed="true"] { color: var(--ink); }

/* ---------------- brand A2 "Circled" (design_system v4 §10, brand/logo/tokens.css verbatim) ---------------- */
/* My Honest Pick, brand A2 "Circled". Copied verbatim from design/design_system.md v4 §10; that file is the source of truth. */
:root{
  --paper:#F3EADB; --surface:#FFFDF8; --sunk:#EADFCC; --line:#DFD1BC; --control-border:#8A7766;
  --ink:#2A211B; --ink-2:#4A3D33; --ink-3:#66554A;
  --trail:#2D5F48; --on-trail:#FFFFFF; --trail-strong:#224A38; --trail-tint:#E3EDE6;
  --marker:#B5461A; --on-marker:#FFFFFF; --marker-tint:#FBE6D8; --marker-ink:#8A3412;
  --sun:#F2B33D; --on-sun:#2A211B; --sun-tint:#FDF1D8; --sun-ink:#6B4A00;
  --danger:#B42318; --danger-tint:#FDECEA; --info:#2C66A6; --info-tint:#E8F0FA;
  --font-display:"Fraunces", ui-serif, Georgia, serif;
  --font-ui:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-bubble:20px; --r-card:18px; --r-sheet:24px; --r-btn:14px; --r-input:12px;
  --shadow-1:0 1px 2px rgba(42,33,27,.06),0 1px 1px rgba(42,33,27,.04);
  --shadow-2:0 10px 24px -18px rgba(42,33,27,.5);
  --shadow-3:0 16px 48px rgba(42,33,27,.16);
  --focus-ring:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15110D; --surface:#1F1914; --sunk:#29211B; --line:#3A2F27; --control-border:#8E7D6E;
    --ink:#F3EADB; --ink-2:#D9CCBA; --ink-3:#B5A593;
    --trail:#7CC4A2; --on-trail:#0E2419; --trail-strong:#A6D9C0; --trail-tint:#1B3027;
    --marker:#F08C5E; --on-marker:#2A1206; --marker-tint:#3A2318; --marker-ink:#F6B595;
    --sun-tint:#2C2312; --sun-ink:#F2C66B; --danger:#E8907F; --danger-tint:#2D1714;
    --info:#86B4E8; --info-tint:#16263A;
    --shadow-1:none; --shadow-2:none; --shadow-3:none;
  }
}
:root[data-theme="dark"]{
  --paper:#15110D; --surface:#1F1914; --sunk:#29211B; --line:#3A2F27; --control-border:#8E7D6E;
  --ink:#F3EADB; --ink-2:#D9CCBA; --ink-3:#B5A593;
  --trail:#7CC4A2; --on-trail:#0E2419; --trail-strong:#A6D9C0; --trail-tint:#1B3027;
  --marker:#F08C5E; --on-marker:#2A1206; --marker-tint:#3A2318; --marker-ink:#F6B595;
  --sun-tint:#2C2312; --sun-ink:#F2C66B; --danger:#E8907F; --danger-tint:#2D1714;
  --info:#86B4E8; --info-tint:#16263A;
  --shadow-1:none; --shadow-2:none; --shadow-3:none;
}
:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus-ring); }
@media (forced-colors: active){ :focus-visible{ outline:2px solid CanvasText; box-shadow:none; } }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

.appshell .topbar { height: 52px; padding-top: env(safe-area-inset-top); }
.mhp-wordmark { height: 36px; width: auto; display: block; }
.appshell .topbar .brand { min-height: 44px; display: flex; align-items: center; color: var(--ink); }
.appshell .toplink { font: 700 14px/18px var(--font-ui); color: var(--trail); min-height: 44px; max-width: none; white-space: nowrap; }
.avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; align-self: flex-end; }
.receipt .r.why b { color: var(--trail); font-weight: 800; }
.receipt .r.drawback { background: var(--marker-tint); border-left: 3px solid var(--marker); border-radius: 4px 12px 12px 4px; padding: 8px 10px; font-size: 15px; line-height: 21px; }
.receipt .r.drawback b { color: var(--marker-ink); }
.actions .commission { margin: 4px 0 8px; font: 600 13.5px/19px var(--font-ui); color: var(--ink-2); }
.actions .tocheck, .tocheck { margin: 0 0 6px; padding: 8px 10px; background: var(--info-tint); border-radius: 10px; font-size: 14px; line-height: 20px; color: var(--ink); }
.offer .commission { margin: 8px 0 6px; font: 600 13.5px/19px var(--font-ui); color: var(--ink-2); }
.price, .pricebox, .tab, .specval { font-variant-numeric: tabular-nums; }

/* pick rules: Next sits directly under the options and is always visible */
.answers .donebar { position: static; margin: 10px 0 4px; padding: 0; background: none; box-shadow: none; border: 0; }
.answers .donebar .btn[disabled] { opacity: .5; cursor: not-allowed; }
.chip[aria-pressed="true"], .tile[aria-pressed="true"] { background: var(--trail-tint); border-color: var(--trail); font-weight: 700; }
.chip[aria-pressed="true"] .tick, .tile[aria-pressed="true"] .tick { display: inline-block; color: var(--trail); }
/* a clear check on every pick (CEO: "every tap gets instant visible feedback") */
.tile[aria-pressed="true"] { background: var(--trail-tint); border-color: var(--trail); box-shadow: inset 0 0 0 1.5px var(--trail); }
.tile[aria-pressed="true"] .tick { display: block; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--trail); color: var(--on-trail); top: 6px; right: 6px; }
.chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--trail); }

/* scope note: a plain note on our own limits, not a warning */
.bubble.note { background: var(--surface); border-style: dashed; color: var(--ink-2); font-size: 15px; line-height: 21px; }

/* one line with an inline More (CEO #one-line-rule) */
details.oneline { display: inline-block; width: 100%; }
details.oneline > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
details.oneline > summary::-webkit-details-marker { display: none; }
details.oneline .ol-more::after { content: "More"; color: var(--trail); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
details.oneline[open] .ol-more::after { content: "Less"; }
details.oneline > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: 6px; }
details.oneline .ol-body { padding: 0 0 6px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
details.oneline .ol-body p { margin: 0; }

/* barriers-2 #14: the applied-answer line */
.noted { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; line-height: 20px; color: var(--ink-2); padding: 2px 0; }
.noted b { color: var(--ink); font-weight: 700; }
.noted .linkish { min-height: 44px; }

/* card v3: verdict pill, two reasons, catch, one-liners, receipts toggle */
.pick-card.v3 .why2 { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.pick-card.v3 .why2 li, .pick-card.v3 .v3line { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 22px; margin: 0 0 6px; }
.pick-card.v3 .catch { margin: 0 0 8px; font-size: 15px; line-height: 22px; }
.pick-card.v3 .v3line.bad { color: #7a1f14; }
.pick-card.v3 details.receipts { margin-top: 12px; border-top: 1px solid var(--line, #e3e6e8); }
.pick-card.v3 details.receipts > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--trail); }
.pick-card.v3 details.receipts > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: 6px; }

/* card v3 store card */
.offer.v3 .o-total { margin: 4px 0 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--ink); }
.offer.v3 details.oneline .ol-body p { margin: 0 0 6px; }
.pricebox details.receipts > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--trail); }

.pick-card.v3 .meanwhile .linkish { min-height: 44px; margin-left: 4px; font-weight: 700; }

/* CX 5e.30: a bubble's sources behind More */
.bubble details.bubblemore > summary { min-height: 44px; }
.bubble details.bubblemore .ol-body p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }

/* CX 5e.31 compare card v3 */
.cmpcard { border: 1px solid var(--line, #e3e6e8); border-radius: 12px; padding: 14px 16px; margin: 0 0 12px; }
.cmpcard h3 { margin: 0 0 6px; }
.cmpcard .cdiff { font-weight: 700; margin: 0 0 6px; }
.cmpcard .cbikes { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 4px; font-size: 15px; }
.cmpcard .btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.cmpcard .btnrow .btn { min-height: 44px; }
.pick-card.v3 .catch.weak { font-weight: 600; }

/* CX 5e.32 Assuming row */
.assuming { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.assuming .al { font-weight: 700; color: var(--ink); }
.assuming .achip { padding: 2px 10px; border-radius: 999px; background: var(--surface-2, #eef2ef); color: var(--ink); }
.assuming .achip[hidden] { display: none; } .assuming .achip.more { background: transparent; border: 1px solid var(--line, #d6ddd9); font: inherit; cursor: pointer; color: var(--trail); min-height: 0; line-height: inherit; }
.assuming .achip.guess { background: transparent; border: 1px dashed var(--ink-3, #7a8580); color: var(--ink); font: inherit; cursor: pointer; min-height: 32px; } .assuming .achip.guess:hover { border-color: var(--trail); } .assuming .achip.guess.used { opacity: .5; cursor: default; }
.assuming .linkish { min-height: 44px; }

/* CX 5e.32: headline and verdict in the first phone view */
@media (max-width: 480px) { .pick-card.v3 .art { aspect-ratio: auto; height: 132px; } .pick-card.v3 .art svg { max-height: 112px; } }

.cards.superseded { display: none; }

/* CEO v158 #5: ?ai=1 preview label */
.ai-test { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--control-border); background: var(--sunk); color: var(--ink); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.v3line.equip.partial { color: var(--ink); }
@media (max-width: 419px) { .ai-test { margin-left: 4px; padding: 1px 6px; font-size: 11px; line-height: 16px; } .ai-test .ai-mode { display: none; } }

/* CX 5e.33 two-line price */
details.price2 .ol-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
details.price2 .pt1 { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
details.price2 .pt2 { color: var(--ink-2); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
ul.receipt { list-style: none; margin: 4px 0 8px; padding: 0; }
ul.receipt li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px dashed var(--line); }
ul.receipt li:last-child { border-bottom: 0; font-weight: 700; color: var(--ink); }
.limcap { margin: 2px 0 6px; color: var(--ink-2); font-size: 13px; line-height: 18px; }
.chip.dashed { border-style: dashed; }
.ai-test { display: inline-block; }   /* a flex pill would drop the space before "mode" */
.reading { margin: 4px 0 8px 36px; color: var(--ink-2); font-size: 14px; line-height: 20px; }
.cohead { margin: 8px 0; font-weight: 600; color: var(--ink); }
.card.closest .misses { list-style: none; margin: 6px 0; padding: 0; }
.card.closest .misses li { display: flex; gap: 8px; align-items: flex-start; padding: 2px 0; }
.cochange { margin: 8px 0; color: var(--ink); }
.cobox { margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunk); }
.cobox p { margin: 0 0 6px; }
.cocav { color: var(--ink-2); }
.card.closest details.mbasis > summary { cursor: pointer; list-style: none; }
.card.closest details.mbasis > summary::-webkit-details-marker { display: none; }

/* CEO 2026-11-01 (Ricky: the range check must look adjustable, not like a score) */
.range .rc-intro { margin: 0 0 6px; font: 500 14px/20px var(--font-ui); color: var(--ink); }
.range .rc-intro span { color: var(--trail); font-weight: 700; margin-right: 4px; }
.range .slider output { border: 1.5px solid var(--trail); color: var(--trail); border-radius: 999px; padding: 0 10px; min-width: 56px; text-align: center; }
.range input[type=range] { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; cursor: pointer; }
.range input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line); }
.range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--trail); border: 3px solid var(--surface); box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.range input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.range input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--trail); border: 3px solid var(--surface); box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.range .rc-out { margin: 14px 0 2px; border-top: 1px solid var(--line); padding-top: 12px; }

/* CEO 2026-11-01 (Ricky: the requirements box was a dead end) */
.req-cta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 2px; }

/* CX 5e.41 / design_system 5.1: the "E-bikes" category label after the wordmark (not a link yet) */
.appshell .topbar { gap: 6px; }
.appshell .topbar .brand { margin-right: 0; }
.appshell .mhp-wordmark { height: 30px; }
.catpill { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; margin-right: auto; padding: 0 9px 0 7px; border-radius: 999px; background: var(--sunk); }
.catpill .catmark { display: block; height: 22px; width: auto; }
.catword { font: 700 13px/1 var(--font-ui); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 374px) { .catword { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .catpill { padding: 0 7px; } }
@media (max-width: 359px) { .appshell .toplink { padding-left: 4px; padding-right: 4px; } }

/* CX 5e.40: the price leads, savings in green (the one place colour is used for money), the commission caption small and muted */
.plead { margin: 4px 0 10px; }
.plead .pl1 { margin: 0; font: 400 15px/21px var(--font-ui); color: var(--ink); }
.plead .pl1 b { font-size: 17px; font-weight: 800; }
.save { color: var(--trail); font-weight: 700; }
p.save { margin: 2px 0 0; font: 700 14px/20px var(--font-ui); color: var(--trail); }
p.save.big { font-size: 17px; line-height: 23px; font-weight: 800; }
.moresave { margin-top: 2px; }
.moresave summary { cursor: pointer; font: 600 13px/18px var(--font-ui); color: var(--trail); }
.moresave ul { margin: 4px 0 0; padding-left: 18px; color: var(--trail); font-size: 14px; line-height: 20px; }
.pshort { margin: 2px 0 4px; font-size: 14px; line-height: 20px; color: var(--ink); }
.actions .checked { margin: 0 0 6px; font: 500 12.5px/17px var(--font-ui); color: var(--ink-3); }
.actions .commission, .offer .commission, .abody .commission, .cmpcard .commission { margin: 6px 0 4px; font: 400 12.5px/17px var(--font-ui); color: var(--ink-3); }
.offer .storebtn + .commission { margin-top: 6px; }

/* CX 5e.41 update: real photos only; no drawing. Thumbnails without a photo are a plain box with the model name; the pick card gets a text-only header */
.nophoto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px; text-align: center; font: 600 12px/16px var(--font-ui); color: var(--ink-3); background: var(--sunk); border-radius: inherit; }
.card .art.noimg, .pick-card.v3 .art.noimg { aspect-ratio: auto; height: 52px; background: none; }

/* CX 5e.42: "What owners say", one column; counts right-aligned; red flags in calm body ink (no red, no banner) */
.ow-bottom { margin: 0 0 6px; font-size: 16px; line-height: 23px; color: var(--ink); }
.ow-heads, .ow-you, .ow-none { margin: 6px 0; color: var(--ink); font-size: 15px; line-height: 21px; }
.ow-rows { list-style: none; margin: 4px 0 10px; padding: 0; }
.ow-rows > li, .ow-flag > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 21px; color: var(--ink); }
.ow-rows > li:has(> details) { display: block; padding: 0; }
.ow-rows > li > span, .ow-flag > summary > span { display: inline-flex; gap: 6px; align-items: baseline; }
.ow-rows .ic, .ow-rows svg { width: 15px; height: 15px; flex: none; color: var(--ink-2); position: relative; top: 2px; }
.ow-rows .cnt { flex: none; color: var(--ink-2); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ow-flag > summary { cursor: pointer; list-style: none; }
.ow-flag > summary::-webkit-details-marker { display: none; }
.ow-flag > p { margin: 4px 0 8px 21px; }
.ow-experts { margin: 8px 0; }
.ow-experts > summary { cursor: pointer; font-weight: 700; color: var(--trail); }
.ow-foot { margin-top: 10px; }

/* CX 5e.41 part 4: at 320 px the bar, bubble 1 and bubble 2 with its chips fit the first screen (568 px tall) */
@media (max-width: 359px) {
  .log .bubble { font-size: 15px; line-height: 21px; padding: 8px 12px; }
  .log .chip { font-size: 14px; padding: 10px 12px; }
  .log { padding-top: 4px; }
}

/* CX 5e.40 part 0: a store sale is two facts, the sale price green ("Ride1Up sale: $1,295 · listed at $1,595") */
p.sale { margin: 2px 0 0; font: 400 15px/21px var(--font-ui); color: var(--ink-2); }
p.sale .save { font-size: 17px; font-weight: 800; }
/* CEO #rules-answer-first: the provisional top three in the first reply */
.starterlist { margin: 6px 0 6px 18px; padding: 0; }
.starterlist li { margin: 4px 0; line-height: 21px; }
.starterlist li > .linkish { font-weight: 700; }
.starterlist li > span { display: block; font-size: 14px; color: var(--ink-2); }
/* CX walk #35: an eligibility deal is a plain second line, not the green headline */
.plead p.elig { margin: 2px 0 0; font: 400 14px/20px var(--font-ui); color: var(--ink-2); }
/* dark mode: the Assuming chips used an undefined --surface-2 (light fallback under light ink), so their words vanished */
.assuming .achip { background: var(--sunk); color: var(--ink); }
/* logic 6w / CX 5e.38: the Honest Score line and the one-sentence purchase status */
.hscore { margin: 2px 0 6px; font: 400 14px/20px var(--font-ui); color: var(--ink-2); }
.hscore b { color: var(--ink); }
.purchase { margin: 4px 0 8px; font: 400 14px/20px var(--font-ui); color: var(--ink); }
/* CX 5e.61: the AI notice, a caption by the composer */
.composer:has(.ai-note) { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.ai-note { position: absolute; right: 0; bottom: calc(env(safe-area-inset-bottom)); margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); text-align: right; }
.ai-note a { color: inherit; text-decoration: underline; }
.ai-note a { display: inline-block; min-width: 44px; min-height: 26px; line-height: 26px; padding: 0 6px; text-align: center; }
.ai-note a::after { content: ''; position: absolute; inset: -18px 0 0; }
/* CEO ruling 5: one row for why and catch */
.why1 { margin: 6px 0 10px; }
/* CEO + CX today specs item 3: the pinned bar and the phone chrome */
.pinbar { display: none; }
.labelscore { margin: 4px 0 6px; font-size: 13px; line-height: 18px; color: var(--ink-3); }
.written { margin: 0 0 8px; }
@media (max-width: 767px) {
  .pinbar:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 6px var(--gutter) 4px; background: var(--paper); border-top: 1px solid var(--line); }
  .pb-left { display: flex; flex-direction: column; min-width: 0; min-height: 44px; justify-content: center; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; }
  .pb-name { font-weight: 600; font-size: 15px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-price { font-size: 14px; line-height: 18px; color: var(--ink-2, var(--ink)); }
  .pb-store { min-height: 44px; max-width: 58vw; white-space: normal; text-align: center; }
  .pb-ftc { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-3); text-align: center; }
  body.haspin .pick-card .storebtn, body.haspin .pick-card .actions .commission { display: none; }
  body.haspin .strip:not([hidden]) { display: none !important; }
  .topbar { height: 52px; }
  .pick-card.v3 .art { aspect-ratio: auto; height: 130px; }
  .pick-card.v3 .art img { padding: 6px 10px; }
  .pick-card.v3 .written, .pick-card.v3 .why1 { font-size: 16px; line-height: 23px; }
}

/* ================ UI pass 1 (ebike-ui): one type scale, full-page bike page, quiet chrome. Later rules win; earlier layers stay for desktop. ================ */
:root { --ui-h1: 600 26px/30px var(--font-display); --ui-h2: 600 22px/26px var(--font-display); --ui-h3: 600 19px/24px var(--font-display); }
html:has(body.appshell), body.appshell { overflow: clip; }
h1, h2, .sheet-head h2, .card h3, .block h3 { text-wrap: balance; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
/* a real chevron on every block "More" (the native triangle looked like a browser default) */
details.ovmore > summary, details.receipts > summary, details.ow-experts > summary, details.lawmore > summary, details.whynofit > summary, details.rgroup > summary, details.same > summary, details.more > summary, details.mbasis > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; font: 700 15px/20px var(--font-ui); color: var(--trail); }
details.ovmore > summary::after, details.receipts > summary::after, details.ow-experts > summary::after, details.lawmore > summary::after, details.whynofit > summary::after, details.rgroup > summary::after, details.same > summary::after, details.more > summary::after, details.mbasis > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s var(--ease); }
details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* chips and tiles: pressed is a tint with dark text (white on tint read at 1.2:1) */
.chip { font-weight: 600; }
.chip[aria-pressed="true"], .chip.on, .tile[aria-pressed="true"] { background: var(--trail-tint); border-color: var(--trail); color: var(--ink); font-weight: 700; }
.chip[aria-pressed="true"] .rankno { background: var(--trail); color: var(--on-trail); }
.tradeoffs .chip.on .sub, .tradeoffs .chip[aria-pressed="true"] .sub { color: var(--ink-2); }
.answers .donebar .btn[disabled], .btn.primary[disabled] { opacity: 1; background: none; border: 1.5px solid var(--line); color: var(--ink-3); }
@media (max-width: 399px) { .appshell .tile { gap: 8px; padding: 8px 10px; } .appshell .tile .ico { width: 30px; height: 30px; } }

/* buttons */
.btn { font-weight: 700; }
.btn.primary { min-height: 52px; }
.actions .twin .btn, .twin .btn { flex: 1 1 140px; }
.twin { display: flex; flex-wrap: wrap; gap: 8px; }

/* composer: the send button sits inside the input's rounded end */
.appshell .send { right: calc(var(--gutter) + 4px); }
.composer input:placeholder-shown { text-overflow: ellipsis; }
.composer input { padding-right: 56px; }

/* photos: white plate, no grey floor */
.card .art, .d-art, .alt .thumb { background: #fff; }
.d-art { position: relative; }
.photo-note { color: #66554A; background: rgba(255, 255, 255, .85); }

/* the owner's aside: the catch reads as advice, never as a warning (Ricky 10-31) */
.dpanel .catch, .pick-card.v3 .catch { margin: 12px 0; padding: 2px 0 2px 12px; border-left: 2.5px solid var(--marker); font-size: 16px; line-height: 24px; }
.catch b { font-weight: 700; }

/* verdict: a dot and words. Green only for Great and Good; amber So-so; neutral for anything not a fit or too early. */
.pick-card.v3 .fitpill, .ov-verdict { --dot: var(--ink-3); position: relative; display: block; margin: 4px 0 6px; padding: 0 0 0 17px; background: none; font: 700 15px/21px var(--font-ui); color: var(--ink-2); }
.ov-verdict b { font-weight: 700; }
.pick-card.v3 .fitpill::before, .ov-verdict::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.pick-card.v3 .fitpill.tier-great_fit, .pick-card.v3 .fitpill.tier-good_fit, .ov-verdict.tier-great_fit, .ov-verdict.tier-good_fit { --dot: var(--trail); color: var(--trail); }
.pick-card.v3 .fitpill.tier-so_so, .ov-verdict.tier-so_so { --dot: var(--sun); color: var(--sun-ink); }

@media (max-width: 767px), (max-height: 500px) {
  /* chat: full-width reading column; the avatar opens a run instead of costing 36 px on every line */
  .appshell .topbar { height: 48px; }
  .appshell .log { gap: 14px; padding: 16px 0 28px; }
  .assuming { gap: 2px 6px; }
  .assuming .achip, .assuming .achip.guess { padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-2); min-height: 0; }
  .assuming .achip:not(:last-of-type)::after { content: " ·"; }
  .assuming .al { font-weight: 600; color: var(--ink-2); }
  .heard span { padding: 0; background: none; color: var(--ink-2); font-size: 14px; }
  .row.bot { flex-wrap: wrap; padding-right: 0; gap: 4px 8px; }
  .row.bot > .avatar { width: 24px; height: 24px; margin: 6px calc(100% - 24px) 0 0; align-self: flex-start; }
  .row.bot > .spacer { display: none; }
  /* text-first answers: the avatar opens the conversation once; every later reply starts on its first word */
  .row.user ~ .row.bot > .avatar, .row.user ~ .typing > .avatar { display: none; }
  .row.bot > .bubble p + p { margin-top: 12px; }
  .row.bot > .bubble b, .row.bot > .bubble strong { font-weight: 700; }
  .row.bot > .bubble { max-width: 100%; font-size: 16px; line-height: 24px; animation-duration: .14s; }
  .row.bot > .bubble:not(.catch):not(.note) { padding: 0; border: 0; border-radius: 0; background: none; }
  .row.bot > .bubble.catch, .row.bot > .bubble.note { padding: 12px 14px; border-radius: 14px; }
  .answers, .suggest, .delta, .reading, .xsend-after { margin-left: 0; }
  /* waiting: calm dots, then one quiet line; no box */
  .typing { padding: 0 0 12px; flex-wrap: wrap; gap: 4px 8px; }
  .dots { padding: 8px 0; background: none; border: 0; }
  .dots i { width: 7px; height: 7px; background: var(--marker); animation-duration: 1.8s; }
  .reading { margin: 0 0 -8px; color: var(--ink-3); }
  /* their words go quiet so the eye lands on the answer */
  .row.user { padding-left: 12%; }
  .bubble.user { background: var(--sunk); border-color: var(--sunk); color: var(--ink); padding: 10px 14px; font-size: 15px; line-height: 22px; }

  /* pick card */
  .pick-card.v3 .art { height: clamp(130px, 25svh, 220px); border-bottom: 1px solid var(--line); }
  .pick-card.v3 .art img { padding: 4px 8px; }
  .card .body, .pick-card .body { padding: 14px 16px 12px; }
  .pick-card h3 { font: var(--ui-h2); }
  .card.pick-card { box-shadow: none; }
  .plead .pl1 { font-size: 16px; line-height: 24px; }
  .plead .pl1 b { font-size: 16px; font-weight: 700; }
  .pick-card.v3 .written, .pick-card.v3 .why1 { font-size: 16px; line-height: 24px; }
  .labelscore { font-size: 14px; line-height: 20px; }
  .why1 b { font-weight: 700; }
  .why1 b:nth-of-type(2)::before { content: ""; display: block; height: 10px; }
  .pick-card.v3 details.receipts { margin-top: 10px; }

  /* pinned bar: name quiet, price strong, one big button */
  .pinbar:not([hidden]) { padding: 8px var(--gutter) 6px; gap: 2px 12px; background: var(--surface); }
  .pb-name { font-weight: 700; font-size: 14px; line-height: 19px; color: var(--ink-2); }
  .pb-price { font-weight: 800; font-size: 17px; line-height: 22px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
  .pb-store { min-height: 48px; }
  .pb-ftc { font-size: 12.5px; line-height: 17px; }

  /* the bike page is a real page, not a sheet that jumps height per tab */
  .sheet:has(.dtabs) { top: 0; height: var(--app-h, 100dvh); max-height: none; border-radius: 0; box-shadow: none; }
  .sheet:has(.dtabs) .sheet-grab { display: none; }
  .sheet:has(.dtabs) .sheet-head { padding: 8px var(--gutter) 6px; align-items: center; }
  .sheet:has(.dtabs) .sheet-head h2 { margin: 0; font: var(--ui-h1); letter-spacing: -.01em; }
  .sheet:has(.dtabs) .sheet-body { flex: 1; min-height: 0; padding-bottom: 28px; }
  .sheet:has(.dtabs) .sheet-foot { background: var(--surface); }
  .dtabs { position: sticky; top: 0; z-index: 5; gap: 16px; margin: 0 calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); border-radius: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
  .dtabs [role=tab] { min-height: 44px; padding: 0; border-radius: 0; background: none; color: var(--ink-3); font: 700 14.5px/20px var(--font-ui); }
  .dtabs [role=tab][aria-selected=true] { background: none; color: var(--ink); box-shadow: inset 0 -2.5px 0 var(--marker); }
  .dpanel { padding-top: 0; }
  .d-art { aspect-ratio: auto; height: min(66vw, 30svh); width: auto; margin: 0 calc(-1 * var(--gutter)) 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .d-art img { padding: 8px 16px; }
  .dpanel:not(:has(.d-art)) { padding-top: 16px; }
  .dpanel > .block:first-child { margin-top: 0; }
  .ov-verdict { font-size: 16px; line-height: 23px; margin: 0 0 6px; }
  .pshort { margin: 0 0 12px; font: 700 15px/22px var(--font-ui); }
  .dpanel .why2 { list-style: none; display: grid; gap: 10px; margin: 12px 0; padding: 0; }
  .dpanel .why2 li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 16px; line-height: 24px; }
  .dpanel .why2 li > svg { width: 18px; height: 18px; margin-top: 3px; color: var(--trail); }
  .dpanel .why2 b { font-weight: 700; }
  details.ovmore { margin-top: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .dpanel .small { margin-top: 12px; }
  .block { margin-top: 24px; }
  .block h3 { font: var(--ui-h3); }

  /* Policies */
  .pdiff { margin: 0 0 4px; padding: 0; border-radius: 0; background: none; font-size: 16px; line-height: 24px; }
  .pdiff b { font-weight: 700; }
  .pconf { display: block; margin: 0 0 8px; padding: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: 14px; line-height: 20px; }
  .pconf svg { display: none; }
  .appshell .pchips { flex-wrap: nowrap; overflow-x: auto; margin: 12px calc(-1 * var(--gutter)) 12px; padding: 2px var(--gutter); scrollbar-width: none; scroll-padding: 0 var(--gutter); }
  .appshell .pchips::-webkit-scrollbar { display: none; }
  .appshell .pchips .chip { flex: none; white-space: nowrap; }
  .pcard { padding: 0; border: 0; border-radius: 0; background: none; }
  .pcard .ph { font-size: 15px; line-height: 21px; }
  .pcard .ph b { font-weight: 700; }
  .prow { padding: 14px 0; }
  .prow .pl { font: 700 13px/18px var(--font-ui); color: var(--ink-3); }
  .prow .pv { font-size: 15px; line-height: 22px; }
  .prow .pd { font-size: 13px; white-space: nowrap; }
  .prow .pdet { display: block; margin: 2px 0; }
  .prow .ev { margin-right: 8px; }
  .ev { position: relative; padding: 0; border-radius: 0; background: none; color: var(--trail); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; min-height: 0; }
  .ev svg { display: none; }
  .ev::after { content: ""; position: absolute; inset: -12px -4px; }

  /* What owners say */
  .ow-bottom { margin: 0 0 16px; font-size: 17px; line-height: 25px; }
  .ow-bottom b { font-weight: 700; }
  .ow-rows > li, .ow-flag > summary { min-height: 44px; align-items: center; padding: 8px 0; }
  /* a tap-to-explain term stays inside its sentence: the label is one block, only the count is a separate item */
  .ow-rows > li > span:not(.cnt), .ow-flag > summary > span:not(.cnt) { display: block; flex: 1; min-width: 0; }
  .ow-rows > li > span:has(> svg), .ow-flag > summary > span:has(> svg) { position: relative; padding-left: 22px; }
  .ow-rows > li > span > svg, .ow-flag > summary > span > svg { position: absolute; left: 0; top: 4px; }
  .ow-you { margin: 8px 0 16px; }
  details.ow-experts { margin-top: 8px; }

  /* Specs: a stacked list, never a table wider than the phone */
  .tablewrap { overflow: visible; }
  .evtable, .evtable tbody { display: block; }
  .evtable thead { display: none; }
  .evtable tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 0; border-top: 1px solid var(--line); }
  /* badge, source and date keep their full width and wrap as whole pieces, so they can never overlap */
  .evtable td:nth-child(n+3) { flex: 0 0 auto; max-width: 100%; }
  .evtable .srcchip { display: inline-block; white-space: nowrap; }
  .evtable th, .evtable td { display: block; padding: 0; border: 0; min-width: 0 !important; font-size: 13px; line-height: 18px; }
  .evtable tbody th { flex: 0 0 100%; font: 700 13px/18px var(--font-ui); color: var(--ink-3); }
  .evtable td:nth-child(2) { flex: 0 0 100%; font-size: 15px; line-height: 22px; color: var(--ink); }
  .evtable td:empty { display: none; }

  /* list */
  .bestrow { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 6px; align-items: baseline; min-height: 56px; padding: 12px 0; }
  .bestrow::before { font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .bestrow .nm { font: 700 16px/22px var(--font-ui); }
  .bestrow .ps { font-size: 14px; line-height: 20px; }

  .bestrow:has(.bthumb) { grid-template-columns: 22px 72px minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .bestrow::before { grid-column: 1; grid-row: 1; }
  .bestrow > * { grid-column: 2; min-width: 0; margin: 0; }
  .bestrow > .bthumb { display: block; grid-column: 2; grid-row: 1 / span 4; width: 72px; height: 54px; border-radius: 10px; overflow: hidden; background: #fff; }
  .bestrow .bthumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
  .bestrow:has(.bthumb) > :not(.bthumb) { grid-column: 3; }
  .bestrow > .small, .bestrow > .labelscore { display: block; font-size: 13.5px; line-height: 19px; color: var(--ink-2); }
  .bestrow > .labelscore { color: var(--ink-3); }
  .chips.rerank { margin: 4px 0 8px; }
  .bestlist { margin: 4px 0 12px; }
  .bestrow .nm .small { display: block; margin-top: 2px; font: 400 13.5px/19px var(--font-ui); color: var(--ink-2); }
  /* the lines by the button */
  .pick-card .actions .bl { margin: 0 0 4px; font-size: 13.5px; line-height: 19px; color: var(--ink-2); }
  /* the buy block (cards to BUILDER): one row each, bold first word */
  .buyfacts { list-style: none; display: grid; gap: 8px; margin: 12px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .buyfacts li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 15px; line-height: 21px; color: var(--ink); }
  .buyfacts li > svg { width: 16px; height: 16px; margin-top: 3px; color: var(--ink-2); }
  .buyfacts b { font-weight: 700; }
  /* the price as a number you can find (cards to BUILDER) */
  .ov-price { margin: 0 0 2px; font: 800 26px/30px var(--font-ui); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
  .plead .amt { display: block; margin-bottom: 2px; font: 800 24px/28px var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
  .plead .pl1:has(.amt), .plead .pl1:has(.amt) b:not(.amt) { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-2); }
  .pick-card .actions .checked { margin: 0 0 4px; }
  .pick-card .actions { gap: 2px; }
  .pick-card .actions .twin { margin-top: 8px; }
  /* compare */
  .note-info { margin: 0 0 16px; padding: 0; border-radius: 0; background: none; color: var(--ink-2); font-size: 14px; line-height: 20px; }
  .cmpcard { padding: 16px; border-radius: var(--r-card); background: var(--surface); }
  .cmpcard h3 { font: var(--ui-h2); margin: 0 0 8px; }
  .cmpcard .cdiff { margin: 0 0 12px; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--ink-2); }
  .cmpcard .cbikes { gap: 0; margin: 12px 0 14px; }
  .cmpcard .cbikes > li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 23px; }
  .cmpcard .btnrow { display: grid; grid-template-columns: 1fr; }
  .cmpcard .btnrow .btn { width: 100%; min-height: 48px; }
  /* no-fit */
  .zipform select, .answers select, .log select { width: 100%; height: 48px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--control-border); background: var(--surface); font-size: 16px; }
  .nofit { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nofit h2 { font: 700 17px/24px var(--font-ui); letter-spacing: 0; margin: 0 0 12px; }
  .card.closest { padding: 16px; }
  .misses li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; }
  .misses li > svg { margin-top: 3px; }
  .misses li:has(> details) > svg { margin-top: 15px; }
  details.mbasis > summary { min-height: 44px; font-weight: 700; color: var(--ink); }
  .card.closest h3 { font: var(--ui-h2); margin: 2px 0 8px; }
  .cobox { padding: 12px 14px; border-radius: 12px; background: var(--trail-tint); }
  .cobox .btnrow { grid-template-columns: 1fr; }
  /* More on the pick card: one voice, no boxes inside the box */
  .pick-card.v3 .v3line { display: block; }
  .pick-card.v3 .rbody > p, .pick-card.v3 .rbody > ul, .pick-card.v3 .rbody > div, .pick-card.v3 .rbody > details { margin: 0 0 12px; }
  .pick-card.v3 .rbody, .pick-card.v3 .rbody .v3line, .pick-card.v3 .rbody .small, .pick-card.v3 .rbody .catch { font-size: 15px; line-height: 22px; color: var(--ink); }
  .pick-card.v3 .rbody .catch { font-size: 15px; line-height: 22px; }
  .pick-card.v3 .rbody .under { font-size: 13px; line-height: 18px; color: var(--ink-3); }
  .noads .linkish { padding-left: 0; }
  .under .linkish { min-height: 44px; padding: 12px 2px; }
  .aids, .tradeoffs { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .aids { font-size: 15px; line-height: 22px; }
  .aids svg, .alsocheck svg { color: var(--ink-3); }
  .pick-card.v3 .rbody > .overline { margin: 20px 0 8px; }
  .aids, .alsocheck { gap: 12px; }
  /* after a pick the pinned store button is the one next step, so reply chips stay quiet */
  body.haspin .suggest .chip.primary { background: var(--surface); color: var(--ink); border-color: var(--control-border); }

  /* the store sheet is a page too: the answer, then store cards with the store name leading */
  .sheet:is(:has(.pricebox), :has(.bestlist), :has(.cmpcard)) { top: 0; height: var(--app-h, 100dvh); max-height: none; border-radius: 0; box-shadow: none; }
  .sheet:is(:has(.pricebox), :has(.bestlist), :has(.cmpcard)) .sheet-grab { display: none; }
  .sheet:is(:has(.pricebox), :has(.bestlist), :has(.cmpcard)) .sheet-head { padding: 8px var(--gutter) 6px; align-items: center; }
  .sheet:is(:has(.pricebox), :has(.bestlist), :has(.cmpcard)) .sheet-head h2 { margin: 0; font: var(--ui-h2); }
  .sheet:is(:has(.pricebox), :has(.bestlist), :has(.cmpcard)) .sheet-body { flex: 1; min-height: 0; padding-bottom: 28px; }
  .proof { margin: 4px 0 14px; }
  .proof .pp { margin: 0 0 6px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
  .proof .pp.lead { margin-bottom: 8px; font-size: 16px; line-height: 24px; color: var(--ink); }
  .proof .pp.lead b { font-weight: 700; }
  .offer { padding: 16px; border-radius: var(--r-card); box-shadow: none; }
  .offer + .offer { margin-top: 12px; }
  .offer-top .s { font: 700 17px/22px var(--font-ui); }
  .offer-top .pill { padding: 0; border-radius: 0; background: none; color: var(--ink-3); font: 400 13px/18px var(--font-ui); }
  .offer .o-total, .offer.v3 .o-total { margin: 6px 0 2px; font: 400 15px/22px var(--font-ui); color: var(--ink); }
  .offer .storebtn { margin-top: 8px; }

  /* other sheets */
  .sheet-head h2 { font: 600 24px/28px var(--font-display); letter-spacing: -.01em; }
}
#open-privacy { margin: -14px 0 -8px; }
#open-privacy a { display: inline-block; padding: 13px 0; margin: -13px 0; min-width: 44px; color: var(--ink-3); font-size: 13px; }   /* Builder 11-05 (UI parked): still a 44 px tap target, but it no longer makes its line 44 px tall (the gap before "days." at 375) */
.sg-cats a { white-space: nowrap; }   /* Builder 11-05: "Kids' bike" never splits across lines at 375 */
body:has(.row.user) #open-privacy { display: none; }
@media (max-width: 359px) { .dtabs { gap: 10px; } .dtabs [role=tab] { font-size: 13.5px; } .sheet:has(.dtabs) .sheet-head h2 { font-size: 22px; line-height: 26px; } }
/* landscape phones: the photo never fills the screen */
@media (max-height: 500px) and (min-width: 768px) { .appshell .sheet:has(.dtabs) { left: 0; right: 0; top: 0; bottom: 0; width: auto; max-height: none; transform: none; border-radius: 0; animation: none; } .appshell .sheet.modal:has(.dtabs) { width: auto; } }
@media (max-height: 480px) and (max-width: 950px) {
  .pick-card.v3 .art { height: 130px; }
  .d-art { aspect-ratio: auto; height: 46svh; max-height: none; }
}
.card .art:has(img[data-wait]), .d-art:has(img[data-wait]) { background: var(--sunk); }
/* near-square photos: bigger, never cropped. object-fit: cover cut wheels and bars on 3 of the 14 (contact sheet, reviews/ui/after/p3c_sheet); 1.15 keeps every bike whole */
.card .art:has(img[data-sq]), .d-art:has(img[data-sq]) { overflow: hidden; }
.card .art:has(img[data-sq]) img, .d-art:has(img[data-sq]) img { object-fit: contain; padding: 0; transform: scale(1.15); }
/* "Good fit, as long as...": still green words, an outlined dot says it depends (BIKE_FOR_YOU section 3, item 12) */
.pick-card.v3 .fitpill.verdict-cond::before, .ov-verdict.verdict-cond::before { background: none; box-shadow: inset 0 0 0 2px var(--trail); }
/* the app never booted: one calm line above the composer, clearly tappable */
#bootfail { display: block; flex: none; width: calc(100% - 2 * var(--gutter)); max-width: 608px; min-height: 48px; margin: 0 auto 8px; padding: 10px 14px; border: 1.5px solid var(--control-border); border-radius: var(--r-btn); background: var(--surface); color: var(--ink); font: 700 15px/20px var(--font-ui); text-align: center; }
/* a number you can tap for its proof stays part of the sentence: plain text, a thin solid underline (tap-to-explain terms are dotted), 44 px to tap */
.prooftap { position: relative; display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums lining-nums; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--trail); text-underline-offset: 3px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.prooftap::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.prooftap:focus-visible { outline: 2px solid var(--trail); outline-offset: 2px; border-radius: 3px; box-shadow: none; }
/* the pilot banner scrolls away after message 1 (today's spec item 3) */
body:has(.row.user) .preview-line { display: none; }

/* ================ Pick bar and facts fold (BUY_CONFIDENCE_RULING_v1): the answer is the hero; the bar holds the pick on every reply, at every width ================ */
.pinbar:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; flex: none; padding: 8px max(var(--gutter), calc((100% - 640px) / 2 + var(--gutter))) 6px; background: var(--paper); border-top: 1px solid var(--line); }
.pb-left { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; }
.pb-thumb { flex: none; width: 48px; height: 36px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.pb-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 1px; }
.pb-thumb:has(img[data-sq]) img { padding: 0; transform: scale(1.15); }
.pb-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pb-label { font: 700 12px/15px var(--font-ui); color: var(--marker); white-space: nowrap; }
.pb-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 700 14px/17px var(--font-ui); color: var(--ink); overflow: hidden; white-space: normal; overflow-wrap: anywhere; }
.pb-price { font: 700 15px/18px var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
/* the buy fact gets its own full row (BUILDER moves it out of the button); until then it stays one line */
.pb-fact { font: 400 12.5px/16px var(--font-ui); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinbar > .pb-fact { grid-column: 1 / -1; margin: 0; white-space: normal; text-align: center; text-wrap: balance; }
.pb-store { min-height: 48px; max-width: 44vw; padding: 8px 14px; font-size: 15px; line-height: 18px; text-align: center; white-space: normal; }
.pb-ftc { grid-column: 1 / -1; margin: 0; font-size: 12.5px; line-height: 16px; color: var(--ink-3); text-align: center; }
@media (min-width: 641px) { .pinbar:not([hidden]) { background: transparent; } }
@media (min-width: 768px) { .pb-store { max-width: 300px; } }
@media (max-width: 359px) { .pb-thumb { display: none; } .pb-store { max-width: 52vw; padding: 8px 12px; } }
/* landscape phones: one row, the disclosure stays beside the button */
@media (max-height: 500px) { .pinbar:not([hidden]) { grid-template-columns: minmax(0, 1fr) auto auto; padding-top: 4px; padding-bottom: 4px; } .pb-label, .pb-fact { display: none; } .pb-ftc { grid-column: 2; grid-row: 1; max-width: 170px; text-align: right; } .pb-store { grid-column: 3; grid-row: 1; min-height: 44px; } .appshell .topbar { height: 44px; } .appshell .composer { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); } .appshell .composer input { height: 48px; } .appshell .send { right: calc(var(--gutter) + 2px); } }
/* "What I've got" under their message does the strip's job, so on phones the strip gives its 44 px back to the answer at every stage */
@media (max-width: 767px) { body.appshell:has(.gotline) .strip:not([hidden]) { display: none !important; } }
/* the disclosure comes before the button (Growth's spec): the bar's top line, then the store row; same height as before */
.pinbar > .pb-ftc { grid-column: 1 / -1; order: 0; margin: 0 0 1px; font-size: 12.5px; line-height: 16px; color: var(--ink-3); text-align: right; }
.offer .commission, .offer.v3 .commission { margin: 10px 0 6px; }
@media (max-height: 500px) { .pinbar > .pb-left { grid-column: 1; grid-row: 1; } .pinbar > .pb-ftc { grid-column: 2; grid-row: 1; max-width: 170px; margin: 0; } .pinbar > .pb-store { grid-column: 3; grid-row: 1; } }
.offer .commission + .storebtn { margin-top: 0; }
.pick-card .actions .commission { margin: 6px 0 4px; }
.cmpcard .commission + .btnrow { margin-top: 0; }
/* less like a retail banner (Codex on real v232: ad-likeness 4 of 5, Ricky's complaint): smaller button, quiet label, one filled green on screen */
.pb-label { color: var(--ink-3); font-weight: 600; }
.pinbar .pb-store { min-height: 44px; padding: 6px 14px; font-size: 14px; line-height: 16px; }
.pinbar > .pb-fact { text-align: left; }
body.haspin .send { background: transparent; color: var(--trail); }
/* the bar is the one next step, so the list pill steps aside and gives its 60 px back to the answer */
body.haspin .bestpill { display: none; }
body.appshell.haspin .composer.haspill { padding-top: 8px; }
/* the keyboard hides the bar so the composer and the last line stay in view (today's spec, item 3) */
@media (hover: none) and (pointer: coarse) { body.appshell:has(.composer input:focus) .pinbar { display: none; } }

/* one closed fold under the reply: catalog facts as plain rows */
.factsfold { margin: 2px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.factsfold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; font: 700 15px/20px var(--font-ui); color: var(--trail); }
.factsfold > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s var(--ease); }
.factsfold > summary:focus-visible { box-shadow: var(--focus-ring); border-radius: 6px; }
.factsfold .ff-hide, .factsfold[open] .ff-show { display: none; }
.factsfold[open] .ff-hide { display: inline; }
.ff-rows { margin: 0; padding: 0 0 8px; }
.ff-rows > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ff-rows dt { font: 600 13.5px/22px var(--font-ui); color: var(--ink-3); }
.ff-rows dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.ff-rows dd .linkish { padding-left: 0; }
.ff-list { margin: 0; padding: 0 0 4px; border-top: 1px solid var(--line); }
.ff-list .linkish { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--trail); font-weight: 700; font-size: 15px; }
.ff-rows dd a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; }
@media (max-width: 359px) { .ff-rows > div { grid-template-columns: minmax(0, 1fr); } }

/* "What I've got" (principle 4): the small receipt under their message; one tap corrects it */
.gotline { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 8px; align-self: flex-end; max-width: 100%; min-height: 44px; margin: -10px 0 -6px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 400 13.5px/18px var(--font-ui); text-align: right; }
.gotline .gl-label { color: var(--ink-3); }
.gotline .gl-edit { color: var(--trail); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Early stage (ruling addendum, Ricky: "looks very much like an advertisement"): 1 or 2 facts get the owner's working note. It sits in the conversation and scrolls with it: a pen rule in the margin, no fill, no card, no button colour, no price block */
.worknote { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 10px; align-items: start; margin: 2px 0 0; padding: 2px 0 2px 12px; border-left: 2.5px solid var(--marker); animation: enter .18s var(--ease) both; }
.wn-photo { grid-row: 1 / span 3; display: block; width: 52px; height: 39px; margin-top: 3px; border-radius: 6px; overflow: hidden; background: #fff; }
.wn-photo img { width: 100%; height: 100%; object-fit: contain; padding: 1px; }
.wn-photo:has(img[data-sq]) img { padding: 0; transform: scale(1.15); }
.wn-line { grid-column: 2; margin: 0; font: 400 15px/22px var(--font-ui); color: var(--ink); }
.wn-line b { font-weight: 700; }
.wn-why { grid-column: 2; margin: 2px 0 0; font: 400 14px/20px var(--font-ui); color: var(--ink-2); }
.wn-link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 -8px; padding: 0; border: 0; background: none; color: var(--trail); font: 400 14px/20px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; }
.wn-link:focus-visible { outline: 2px solid var(--trail); outline-offset: 2px; border-radius: 3px; box-shadow: none; }
/* a bike they asked about that isn't the pick: quiet links right under the reply */
.askedbikes { display: flex; flex-wrap: wrap; gap: 0 16px; margin: -4px 0 0; }
.askedbikes .wn-link { margin: 0; }
@media (max-width: 359px) { .worknote { grid-template-columns: minmax(0, 1fr); } .wn-photo { display: none; } .wn-line, .wn-why, .wn-link { grid-column: 1; } }
/* on first show of the full bar and on a bike change: one quiet line in the conversation, above the fold, so the bar stays 105 px */
.bar-why { margin: 2px 0 0; font: 400 14px/20px var(--font-ui); color: var(--ink-2); }
/* the step up: at 3 facts the full bar rises in once */
.pinbar:not([hidden]) { animation: rise .28s var(--ease) both; }

/* ================ Addendum 2: first screen and "To get you a better pick" (BUY_CONFIDENCE_RULING_v1) ================ */
/* a small group label; and a one-line hint above the box when a screen needs it */
.sg-label { margin: 14px 0 6px; font: 700 13.5px/18px var(--font-ui); color: var(--ink-2); }
.askhint { flex: none; width: 100%; max-width: 640px; margin: 0 auto; padding: 6px var(--gutter) 2px; font: 400 14px/20px var(--font-ui); color: var(--ink-2); text-align: left; }
.askhint + .composer { border-top: 0; padding-top: 4px; }
/* the opening (addendum 10): the question, six buttons in a tidy grid, one plain line, a small list link */
.sg-q { margin: 12px 0 0; font: 600 20px/25px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink); }
.suggest.opening { margin-top: 2px; }
.appshell .suggest.opening .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.suggest.opening .chip { min-height: 52px; padding: 8px 4px; border-radius: 14px; font-size: 16px; font-weight: 600; text-align: center; justify-content: center; }
.sg-hint { margin: 14px 0 0; font: 400 15px/22px var(--font-ui); color: var(--ink-2); }
.sg-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--trail); font: 400 14px/20px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 359px), (max-height: 600px) { .suggest.opening .chip { min-height: 46px; font-size: 14.5px; } .sg-hint { margin-top: 10px; font-size: 14px; line-height: 20px; } }
/* the one place asking: a highlighted block that reads as the next step. Solid white answers on a tint = "answer me". "You could also ask" below stays plain text links */
.sharpen { margin: 4px 0 0; padding: 14px 14px 12px; border: 1.5px solid var(--trail); border-radius: var(--r-card); background: var(--trail-tint); animation: enter .18s var(--ease) both; }
.sh-head { margin: 0 0 10px; font: 800 16px/22px var(--font-ui); color: var(--ink); }
.sh-q { margin: 0 0 6px; font: 700 15px/21px var(--font-ui); color: var(--ink); }
.sh-q ~ .sh-q { margin-top: 12px; }
/* up to 3 answers share one row in equal widths; 4 or more wrap as ordinary chips */
.sharpen .chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.sharpen .chips:has(> :nth-child(4)) { display: flex; flex-wrap: wrap; }
.sharpen .chip { min-height: 44px; padding: 6px 4px; border: 1.5px solid var(--trail); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; line-height: 18px; text-align: center; justify-content: center; }
.sharpen .chips:has(> :nth-child(4)) .chip { padding: 6px 12px; }
.sharpen .chip:hover { background: var(--paper); }
/* a question with no short answers gets a small labelled box right there (addendum 11) */
.sh-input { width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--trail); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 16px; }
.sh-input::placeholder { color: var(--ink-3); }
.sh-input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--trail) 25%, transparent); }
.sh-far { margin: 12px 0 0; font: 700 13.5px/19px var(--font-ui); color: var(--trail-strong); }
.sh-hint { margin: 2px 0 0; font: 400 13.5px/19px var(--font-ui); color: var(--ink-2); }
.alsoask { margin: 6px 0 0; }
.alsoask .sg-label { margin: 0; font-weight: 600; color: var(--ink-3); }
.alsoask .chips { gap: 0 16px; }
.alsoask .chip { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--trail); font-weight: 500; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
/* when the block is below the first screen: one calm pointer to it above the box */
.sharpen-cue { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 21; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--trail); border-radius: 999px; background: var(--trail-tint); color: var(--ink); font: 700 14px/18px var(--font-ui); white-space: nowrap; box-shadow: var(--shadow-2); }

/* ================ Pick reply, short shape (addendum 4): the answer in one line, the bike and price in bold, a tight list, three small labels. Fits one screen with the bar ================ */
.row.bot > .bubble.rs { font-size: 15px; line-height: 22px; }
.rs p { margin: 0; }
.rs .rs-lead { font-size: 16px; line-height: 22px; }
.rs .rs-pick { margin-top: 6px; font-size: 15px; line-height: 22px; }
.rs .rs-pick strong { display: block; font: 800 18px/24px var(--font-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.rs .rs-label { margin-top: 8px; font: 700 13.5px/20px var(--font-ui); color: var(--ink-2); }
.rs .rs-why { list-style: none; margin: 1px 0 0; padding: 0; display: grid; gap: 2px; }
.rs .rs-why li { position: relative; padding-left: 14px; }
.rs .rs-why li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--trail); }
.rs .rs-facts { margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rs .rs-facts > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 8px; }
.rs .rs-facts dt { font: 700 13px/22px var(--font-ui); color: var(--ink-2); }
.rs .rs-facts dd { margin: 0; }
/* the catch, total and returns: a small label stacked over its line (CEO) */
/* reasons read first; trade-off, total and returns are quieter, each its own line with the label run in: no height added (CEO 03:32Z) */
.rs .rs-why { color: var(--ink); }
.rs .rs-fact { margin-top: 5px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.rs .rs-why + .rs-fact { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.rs .rs-fact strong { display: inline; font: 700 14px/20px var(--font-ui); color: var(--ink); }
.rs .rs-next { margin-top: 8px; }
@media (max-width: 359px) { .rs .rs-facts > div { grid-template-columns: 68px minmax(0, 1fr); } .rs .rs-pick strong { font-size: 17px; line-height: 22px; } }

/* ================ Back to chat and the pinned question box (addendum 9): every sheet says how to get back; every bike page, list, compare and store sheet takes a question ================ */
.sheet .sheet-head:has(> .backchat) { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px var(--gutter) 6px; }
.backchat { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1.5px solid var(--trail); border-radius: 999px; background: var(--trail-tint); color: var(--ink); font: 700 15px/20px var(--font-ui); }
.backchat::before { content: ""; width: 9px; height: 9px; margin-left: 3px; border-left: 2.5px solid var(--trail); border-bottom: 2.5px solid var(--trail); transform: rotate(45deg); }
.backchat:hover { background: var(--surface); }
.sheet .sheet-head:has(> .backchat) h2 { margin: 0; font: var(--ui-h2); }
.sheet .sheet-head:has(> .backchat) .iconbtn { display: none; }
.sheetask { position: relative; display: block; margin: 8px 0 0; }
.sheetask input { width: 100%; height: 48px; padding: 0 52px 0 16px; border: 1.5px solid var(--control-border); border-radius: 24px; background: var(--surface); color: var(--ink); font-size: 16px; }
.sheetask input::placeholder { color: var(--ink-3); }
.sheetask input:placeholder-shown { text-overflow: ellipsis; }
.sheetask input:focus { border-color: var(--trail); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--trail) 25%, transparent); }
.appshell .sheetask .send { position: absolute; right: 2px; top: 2px; background: transparent; color: var(--trail); }
.sheet-foot:has(.sheetask) { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
/* typing on a phone: the store row steps aside so the box and the page stay in view */
@media (hover: none) and (pointer: coarse) { .sheet-foot:has(.sheetask input:focus) > :not(.sheetask) { display: none; } .sheet-foot:has(.sheetask input:focus) .sheetask { margin-top: 0; } }
/* landscape phones: back and title share a row */
@media (max-height: 500px) { .sheet .sheet-head:has(> .backchat) { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 4px; padding-bottom: 2px; } .sheet-foot:has(.sheetask) { display: flex; gap: 8px; align-items: center; } .sheet-foot:has(.sheetask) > * { flex: 1; min-width: 0; margin: 0; } }

/* ================ Bike page leads with why it's great (addendum 12): warm headings and full-strength lists first, the price in the middle, the trade-offs visible but quieter ================ */
.bp-sec { margin: 0 0 16px; }
.bp-h { margin: 0 0 6px; font: var(--ui-h3); color: var(--ink); }
.bp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bp-list li { position: relative; padding-left: 24px; font-size: 16px; line-height: 23px; color: var(--ink); }
.bp-list li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 6px; height: 11px; border-right: 2px solid var(--trail); border-bottom: 2px solid var(--trail); transform: rotate(40deg); }
.bp-buy { margin: 0 0 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bp-buy .ov-price { margin: 0; font: 800 26px/30px var(--font-ui); font-variant-numeric: tabular-nums lining-nums; }
.bp-buy .pshort { margin: 2px 0 0; font: 400 14px/20px var(--font-ui); color: var(--ink-2); }
.bp-total { margin: 2px 0 0; font: 400 14px/20px var(--font-ui); color: var(--ink-2); }
.bp-trade .bp-h { margin-bottom: 4px; font: 700 13.5px/20px var(--font-ui); color: var(--ink-2); }
.bp-trade .bp-list { gap: 4px; }
.bp-trade .bp-list li { padding-left: 14px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.bp-trade .bp-list li::before { left: 2px; top: .55em; width: 5px; height: 5px; border: 0; border-radius: 50%; background: var(--ink-3); transform: none; }

/* v238 hooks: back always first; the cue clears the bar; nested sheets; a state answer right in the block; a visible unit label */
.sheet .sheet-head > .backchat { order: -1; }
.sheet .sheet-head > .sheet-up { order: -1; min-height: 44px; padding: 0; color: var(--trail); font: 700 14px/20px var(--font-ui); }
/* with the bar up the pick is made and the cue would sit on the answer, so it only shows at the note stage */
body.haspin .sharpen-cue { display: none; }
.sh-form { display: flex; gap: 8px; align-items: stretch; }
.sh-form .sh-input { flex: 1; min-width: 0; }
.sharpen .sh-form .chip { flex: none; padding: 6px 14px; }
.numfield:has(> label:not(.sr-only)) { display: inline-flex; flex-direction: column; gap: 4px; }
.numfield > label:not(.sr-only) { font: 600 13.5px/18px var(--font-ui); color: var(--ink-2); }

/* the list: more bikes on the first screen. "Back to chat" is at the top, so not again in the foot; the re-rank chips stay on one scrolling row */
.sheet:has(.bestlist) .sheet-foot:has(.sheetask) .btnrow [data-close] { display: none; }
.sheet:has(.bestlist) .sheet-foot:has(.sheetask) .btnrow { grid-template-columns: 1fr; margin-top: 0; }
.sheet:has(.bestlist) .sheet-foot:has(.sheetask) .btnrow .btn { min-height: 44px; }
.appshell .chips.rerank { flex-wrap: nowrap; overflow-x: auto; margin: 4px calc(-1 * var(--gutter)) 8px; padding: 2px var(--gutter); scrollbar-width: none; }
.appshell .chips.rerank::-webkit-scrollbar { display: none; }
.appshell .chips.rerank .chip { flex: none; white-space: nowrap; }

/* Ricky's photo (his yes, 11-02 10:22Z): once, in the welcome only, beside the "built on" line. Bot replies keep the bot icon. */
.edby { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.edby img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.edby p { margin: 0; font: 400 14px/19px var(--font-ui); color: var(--ink-2); }

/* a real bike photo in the pick reply, right under the first line (Ricky: "Assume we can use their photos") */
.rs-photo, .oc-photo { position: relative; height: clamp(120px, 20svh, 170px); margin: 8px 0 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.rs-photo img, .oc-photo img { width: 100%; height: 100%; object-fit: contain; padding: 4px 6px; }
.rs-photo:has(img[data-sq]) img, .oc-photo:has(img[data-sq]) img { padding: 0; transform: scale(1.15); }
.rs-photo .photo-note, .oc-photo .photo-note { right: 8px; bottom: 6px; left: auto; max-width: calc(100% - 16px); white-space: normal; text-align: right; }

/* ================ Look B (CEO 10:41Z, reviews/ui/friendly): warmer cream, softer buttons, a friendlier welcome. Dark values are untouched; text colours and the brand green stay, so contrast only gets better ================ */
:root { --paper: #FCF4E7; --surface: #FFFDF9; --sunk: #F6E8D2; --line: #EFE0C9; }
body .row.bot > .bubble:has(.sg-q) { font-size: 16px; line-height: 23px; }
body .row.bot > .bubble:has(.sg-q) p + p { margin-top: 10px; }
.hello { display: block; margin: 0 0 4px; font: 600 28px/32px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.01em; }
.sg-hint { font-size: 14px; line-height: 20px; }
:root[data-theme="light"] .chip { border-color: #D9C4A2; box-shadow: 0 2px 0 #EFDFC4; }
:root[data-theme="light"] .chip.quiet, :root[data-theme="light"] .alsoask .chip, :root[data-theme="light"] .sharpen .chip { box-shadow: none; }
:root[data-theme="light"] .sharpen .chip { border-color: var(--trail); }
.suggest.opening .chip { min-height: 50px; border-radius: 18px; font-weight: 700; font-size: 15.5px; }

/* the order card: one calm summary at the moment they're ready; the store button is the one filled thing in it */
.ordercard { margin: 2px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); animation: enter .18s var(--ease) both; }
.oc-title { margin: 0; font: var(--ui-h3); color: var(--ink); }
.oc-photo { margin: 8px 0 10px; }
.oc-name { margin: 8px 0 0; font: 800 17px/23px var(--font-ui); color: var(--ink); }
.oc-photo + .oc-name { margin-top: 0; }
.oc-line { margin: 6px 0 0; font-size: 15px; line-height: 21px; color: var(--ink-2); }
.oc-rows { margin: 10px 0 0; padding: 0; }
.oc-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.oc-rows dt { font-size: 15px; line-height: 21px; color: var(--ink-2); }
.oc-rows dd { margin: 0; font-size: 15px; line-height: 21px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.oc-rows > .oc-total dt, .oc-rows > .oc-total dd { font-weight: 800; font-size: 16px; color: var(--ink); }
.ordercard .commission { margin: 10px 0 4px; }
.oc-store { margin-top: 12px; }
.ordercard .commission + .oc-store { margin-top: 0; }
.oc-steps { margin: 12px 0 0; padding: 0 0 0 20px; font-size: 14px; line-height: 20px; color: var(--ink-2); display: grid; gap: 4px; }
.oc-steps:empty { display: none; }
.oc-btnonly { padding: 0; border: 0; background: none; }
.oc-cal input[type=date] { display: block; width: 100%; height: 48px; margin: 8px 0; padding: 0 12px; border: 1.5px solid var(--control-border); border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 16px; }
.oc-cal .oc-line { display: block; margin-top: 0; }

/* ================ Look C (Ricky 10:46Z "really like C"): drawings on the first screen, pen underline, his quote. Real bike photos stay in the pick ================ */
.hello { position: relative; display: block; width: fit-content; }
.scribble { position: absolute; left: 0; right: 6px; bottom: -7px; width: calc(100% - 6px); height: 10px; overflow: visible; filter: url(#rough); pointer-events: none; }
.ednote { margin: 12px 0 0; padding: 8px 12px 8px 14px; border-radius: 4px 16px 16px 16px; background: var(--marker-tint); transform: rotate(-.4deg); }
.ednote blockquote { margin: 0; font: 500 14.5px/20px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--ink); }
.ednote figcaption { margin-top: 3px; font: 700 12.5px/16px var(--font-ui); color: var(--ink-2); }
:root { --marker-tint: #FDEBDB; }
.suggest.opening .chip:has(.ride) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 62px; padding: 4px; font-size: 15px; }
.ride { display: block; flex: none; width: 34px; height: 25px; filter: url(#rough); }
/* the shop-floor fallback only: a bike with no photo */
.rs-photo .dbike, .oc-photo .dbike { display: block; width: 100%; height: 100%; padding: 6px; filter: url(#rough); }
/* a short phone keeps everything above the fold */
@media (max-height: 720px) {
  .hello { font-size: 26px; line-height: 30px; }
  body .row.bot > .bubble:has(.sg-q) { font-size: 15.5px; line-height: 22px; }
  body .row.bot > .bubble:has(.sg-q) p + p, .edby, .ednote { margin-top: 7px; }
  body .row.bot:has(.sg-q) > .avatar { width: 24px; height: 24px; }
  .appshell .log:has(.suggest.opening) { gap: 8px; padding: 8px 0 8px; }
  .sg-q { margin-top: 7px; font-size: 19px; line-height: 23px; }
  .suggest.opening .chips { gap: 6px; }
  .suggest.opening .chip:has(.ride) { min-height: 54px; }
  .edby img { width: 40px; height: 40px; }
  .ride { width: 30px; height: 22px; }
  .sg-hint { margin-top: 8px; }
  .sg-link { min-height: 44px; }
}

/* one store button on screen: with the bar up, the order card summarises and the bar's button does the buying */
@media (max-width: 767px) { body.haspin .ordercard .oc-store, body.haspin .ordercard .commission, body.haspin .oc-btnonly { display: none; } body.haspin .ordercard .oc-steps { margin-top: 10px; } }

/* ================ Your plan (Ricky: "step change" in next steps; design/THREE_PATHS_v1): bike, size, total, arrives, returns on every pick, one main button, two quiet paths. New classes only, off until the markup lands ================ */
.plan { margin: 2px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); animation: enter .18s var(--ease) both; }
.pl-title { margin: 0 0 6px; font: 600 19px/24px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink); }
.pl-photo { position: relative; height: 88px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.pl-photo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.pl-photo:has(img[data-sq]) img { padding: 0; transform: scale(1.15); }
.pl-photo .photo-note { right: 6px; bottom: 3px; left: auto; max-width: calc(100% - 12px); padding: 0 4px; font-size: 10.5px; line-height: 13px; white-space: normal; text-align: right; }
.pl-name { margin: 8px 0 0; font: 800 16px/22px var(--font-ui); color: var(--ink); }
.pl-total { margin: 0; font-size: 14.5px; line-height: 20px; color: var(--ink-2); }
.pl-total b { font: 800 17px/22px var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.pl-row { margin: 4px 0 0; font-size: 14px; line-height: 19px; color: var(--ink-2); }
.pl-row b { font-weight: 700; color: var(--ink); }
.pl-row.flag { font-weight: 600; color: var(--ink); }
.pl-row.flag b { color: var(--marker); }
.plan .pl-go { margin-top: 8px; }
.pl-cap { margin: 5px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-2); text-align: center; }
.pl-paths { display: flex; justify-content: center; gap: 24px; margin: 2px 0 -8px; }
.pl-paths .linkish { min-height: 44px; padding: 0 6px; color: var(--trail); font: 600 15px/20px var(--font-ui); }
/* Ricky 15:53Z: no dealer unless they ask. One line under the button: "Not yet? Send it to someone" */
.pl-paths:has(.pl-lb) { gap: 6px; align-items: center; }
.pl-lb { font-size: 15px; line-height: 20px; color: var(--ink-2); }
.pl-paths:has(.pl-lb) .linkish { padding: 0 2px; }
/* 1-2 facts: compact, photo beside the name, so the better-pick block reaches the first screen */
.plan.sofar .pl-lead { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; }
.plan.sofar .pl-photo { height: 68px; }
.plan.sofar .pl-photo .photo-note { right: 3px; bottom: 1px; font-size: 9px; line-height: 11px; }
.plan.sofar .pl-name { margin: 0; }
.plan.sofar .pl-total b { display: block; }
.plan ~ .sharpen { margin-top: 2px; }
/* Not yet: opens under the plan */
.pl-notyet { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--marker-tint); }
.pl-notyet p { margin: 0; font-size: 15px; line-height: 21px; color: var(--ink); }
.pl-notyet .linkish { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--trail); font: 700 15px/20px var(--font-ui); }
/* the bar steps aside while the plan is on screen (BUILDER sets body.planview); one store button at a time */
body.planview .pinbar { display: none !important; }
@media (max-width: 359px) { .plan.sofar .pl-lead { grid-template-columns: 92px minmax(0, 1fr); } .plan.sofar .pl-photo { height: 60px; } }

/* Ricky 14:11Z: his photo belongs to his own words, never beside "I'm a bike bot". The quote is a signed note: words, then a small face and name. The bot line above it is plain text */
.botline { position: relative; margin: 8px 0 0; padding-left: 28px; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.botline::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: url(brand/avatar.svg) center / contain no-repeat; }
/* the bot line carries the bot icon now, so the welcome needs no avatar row */
.row.bot:has(.botline) > .avatar { display: none; }
.row.bot > .bubble:has(.botline):not(.catch):not(.note) { padding-top: 6px; }
.ednote { transform: none; padding: 10px 12px 8px 14px; }
.ed-sign { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ed-sign img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ed-sign figcaption { margin: 0; }
/* variant A: photo beside the words */
.ednote.side { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 10px; align-items: start; }
.ednote.side > img { grid-row: 1 / span 2; width: 44px; height: 44px; margin-top: 2px; border-radius: 50%; object-fit: cover; }
@media (max-height: 720px) { .ednote { padding: 8px 12px 6px 14px; } .sg-hint { margin-top: 6px; } }
/* growth/HOME_AND_TAP_WORDS_v1.md: the three big taps on `/`, three across like the e-bike chips, so the saved-chats line stays above the box at 375 */
.suggest.home .chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.suggest.home .chip { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 3px; min-height: 52px; padding: 9px 6px 10px; border-radius: 14px; }
.suggest.home .chip-main { font: 600 15.5px/20px var(--font-ui); }
.suggest.home .chip-sub { font: 400 12.5px/16px var(--font-ui); color: var(--ink-3); }