/* Real-app additions on top of the prototype's design system (app.css). */
.brandmenu { position: relative; }
.brandmenu > summary { list-style: none; }
.brandmenu > summary::-webkit-details-marker { display: none; }
.brandmenu .menu a { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; }
.brandmenu .menu a:hover { background: var(--bg); }
.switch-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--mark); color: var(--on-mark); font: 800 var(--fs-md) var(--display); text-transform: uppercase; }
.topbar .brandmenu { flex: 0 1 auto; min-width: 0; }
.note-off { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--mark) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--mark) 45%, var(--line)); font-size: var(--fs-md); }
.note-off svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
/* A good-news line with a dismiss link: "You're in" after an access code (onboarding/store.html) */
.note-in { display: flex; gap: 10px; align-items: flex-start; padding: 10px 8px 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--fresh) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--fresh) 45%, var(--line)); font-size: var(--fs-md); }
.note-in > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--fresh); }
.note-in > span { flex: 1; min-width: 0; padding-top: 1px; }
.note-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -8px 0; border-radius: 8px; color: inherit; }
.note-x svg { width: 16px; height: 16px; }
.note-x:hover { background: color-mix(in srgb, var(--fresh) 18%, transparent); }
.field-error { color: var(--tired); font-size: var(--fs-sm); font-weight: 600; }
.field input[aria-invalid="true"] { border-color: var(--tired); }
label.prod { cursor: pointer; }
label.prod:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
label.prod:has(input:checked) .tick { background: var(--mark); border-color: var(--mark); color: var(--on-mark); }
label.prod .tick svg { opacity: 0; } label.prod:has(input:checked) .tick svg { opacity: 1; }
label.prod:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.cad-noimg { aspect-ratio: 4/5; display: grid; place-items: center; padding: 16px; border-radius: 10px; background: var(--tile); color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.save-f { position: absolute; top: 8px; right: 8px; margin: 0; }
.save-f .save-b { position: static; }
code { font-size: .92em; padding: 1px 5px; border-radius: 5px; background: var(--tile); }
.reject-d > summary { list-style: none; width: fit-content; }
.reject-d > summary::-webkit-details-marker { display: none; }
.reject-d[open] > summary { display: none; }
.decide form { margin: 0; }
a.cad-img { display: block; color: inherit; }
.brandmenu .menu form { margin: 0; }
.menu-btn { display: flex; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.menu-btn:hover { background: var(--bg); }
/* The review preview uses the brand's fonts and button colour, as the download pack does */
.ad.brand-type .copy b { font-family: var(--ad-head), var(--display); }
.ad.brand-type .copy span.s, .ad.brand-type .copy span.c { font-family: var(--ad-body), var(--ui); }
/* UI polish pass (15 Oct): build checklist items 8-12 plus the web interface guidelines, run over the real app */
/* Focus rings: marigold reads on the dark chrome, but the brand menu and the phone page tabs sit on light surfaces */
.side .menu :focus-visible, .mhead .menu :focus-visible, .subtabs :focus-visible { outline-color: var(--ink); }
/* Data-dense tables (verdicts, the math, sorting your ads): tighter rows and a row hover. Values stay on one line,
   so on a phone the table scrolls sideways instead of stacking "$63.89 vs $46.21" over four lines */
.tbl.dense th, .tbl.dense td { padding-block: 5px; line-height: 1.35; }
.tbl.dense td, .tbl.dense thead th { white-space: nowrap; }
.tbl.dense td small, .tbl.dense th small { white-space: normal; }
.tbl.dense tbody th { min-width: 9em; }
/* Table scrollers: contained inline size, so a wide table scrolls inside its panel instead of widening the panel
   (an open math panel made the whole page scroll sideways on a phone) */
.tscroll { overflow-x: auto; contain: inline-size; }
/* Screen-reader-only header text is absolutely positioned: the table has to be its containing block, or on a phone
   it escapes the table's sideways scroller and makes the whole page scroll sideways */
.tbl { position: relative; }
.tbl.dense thead th { vertical-align: top; }
/* The math tables are all counts and money: right-aligned so the digits line up by place */
.math-d .tbl.dense td, .math-d .tbl.dense thead th:not(:first-child) { text-align: right; }
.tbl.dense tbody tr { transition: background-color .12s ease-out; }
.tbl.dense tbody tr:hover, .tbl.dense tbody tr:focus-within { background: color-mix(in srgb, var(--ink) 4%, transparent); }
/* Inline links in running text take the ink colour, not the browser's blue */
main.work :is(p, td, li, .note-box, span:not(.vchip), small, label) > a:not([class]), .onb :is(p, td, li, span, small, label) > a:not([class]) { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color .15s ease-out; }
main.work :is(p, td, li, .note-box, span:not(.vchip), small, label) > a:not([class]):hover, .onb :is(p, td, li, span, small, label) > a:not([class]):hover { text-decoration-color: currentColor; }
a.cad-img img { transition: filter .15s ease-out; }
a.cad-img:hover img { filter: brightness(.94); }
/* Angle cards on New angles and Briefs aren't buttons here, so they don't lift or show a hand */
div.angle { cursor: auto; }
div.angle:hover { transform: none; box-shadow: none; }
/* Native selects get explicit colours (Windows dark mode); the one outside a .field matches the others */
select { background-color: var(--surface); color: var(--ink); }
form.row > select { min-height: 44px; max-width: 100%; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--field); }
/* Figures line up when they change (Archivo and Figtree both have tnum) */
dl.bmeta dd, .ut-n { font-variant-numeric: tabular-nums; }
/* Math panels: the summary reads as a control, and its verdict chip doesn't touch the title */
details.math-d > summary { cursor: pointer; }
details.math-d > summary .chip { margin-left: 8px; vertical-align: 2px; }
/* Links styled as buttons take the button's ink, like <button>s do, instead of the browser's link blue */
a.btn { color: inherit; }
/* Long bullet points (Your data, the deleted page): text wraps under itself, the dot sits on the first line */
.feat.long li { display: block; position: relative; padding-left: 16px; line-height: 1.5; }
.feat.long li::before { position: absolute; left: 0; top: .6em; }
/* Terms and privacy (legal/_doc.html): a readable document page, open without signing in */
.doc-wrap { min-height: 100%; padding: 28px 16px 64px; }
.doc { width: min(760px, 100%); margin-inline: auto; display: grid; gap: 14px; }
.doc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
a.brandmark { color: inherit; text-decoration: none; }
.doc-links { display: flex; gap: 4px; }
.doc-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; font-size: var(--fs-md); }
.doc-links a:hover { background: var(--surface); }
.doc-links a[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.doc-head { display: grid; gap: 6px; margin-top: 10px; }
.doc-head p { margin: 0; }
.doc h2 { font-size: var(--fs-lg); margin-top: 16px; }
.doc p, .doc li { margin: 0; line-height: 1.6; max-width: 72ch; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.doc :is(p, li, td) a:not([class]), .legal-links a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.doc-tbl { width: 100%; font-size: var(--fs-sm); }
.doc-tbl th, .doc-tbl td { vertical-align: top; text-align: left; line-height: 1.5; }
.doc-tbl tbody th { color: var(--ink); font-size: var(--fs-sm); }
@media (min-width: 640px) { .doc-tbl tbody th { white-space: nowrap; } }
.doc-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.legal-links { margin: 0; }
/* Terms and privacy at the foot of the brand menu */
.brandmenu .menu .menu-legal { display: flex; gap: 2px; margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.brandmenu .menu .menu-legal a { color: var(--muted); }
/* Products added by hand: the Edit link under a pick card, the stacked forms, and the photo cards with their actions */
.prod img { height: auto; }      /* the width and height attributes reserve space; aspect-ratio sets the shape */
.prod-cell { display: grid; gap: 4px; align-content: start; }
.prod-cell > a { justify-self: start; padding: 4px 2px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.prod-form { display: grid; gap: 16px; }
.prod-form .field { align-content: start; }
.drop .field { width: 100%; text-align: left; }
.products.photos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
figure.prod.photo { margin: 0; cursor: auto; }
figure.prod.photo:hover { transform: none; box-shadow: none; }
figure.prod.photo figcaption { gap: 6px; }
figure.prod.photo form { margin: 0; }
figure.prod.photo .btn { min-height: 38px; padding: 6px 12px; font-size: var(--fs-sm); }
/* The free angle check: its result page is one column, wide enough for the verdict table */
.onb-card.wide { width: min(1040px, 100%); padding: 0 0 24px; background: none; border: 0; box-shadow: none; }
.onb-card > .row:first-child > .chip { padding: 0; border: 0; background: none; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
/* The offer badge on a seasonal ad (seasonal.py): set from the offer by code, above the headline. pack/render.py
   draws the same pill (PARTS["badge"], BADGE_GAP), so what the brand approves here is what it downloads */
.ad .copy span.o { margin-bottom: 2.4cqw; padding: 1.3cqw 3cqw; border-radius: 999px; background: var(--ad-badge, #FFFFFF); color: var(--ad-badge-ink, #111111); font: 700 3.15cqw/1.15 var(--ui); text-wrap: balance; }
.ad.brand-type .copy span.o { font-family: var(--ad-body), var(--ui); }
.ad .copy span.o:empty { display: none; }
/* The Black Friday angle pack on New angles */
.offer-pack .make-row .chip { font-weight: 600; white-space: normal; }
/* The offer form: a field without help text stays at the top of its row instead of stretching to match its neighbour */
.offer-form .grid2 { align-items: start; }
/* Reports and sharing (17 Oct, parity chunk 3): change since the last export on the tiles, shading against the
   account (never the flag's colour), the Winner mark, the "still settling" note, the thresholds form, share links */
.kpis dd.kd { margin-top: 4px; font: 600 var(--fs-xs)/1.35 var(--ui); letter-spacing: 0; color: var(--muted); white-space: normal; }
:root { --shade-better: color-mix(in srgb, var(--fresh) 13%, transparent); --shade-worse: color-mix(in srgb, var(--mark) 30%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shade-better: color-mix(in srgb, var(--fresh) 14%, transparent); --shade-worse: color-mix(in srgb, var(--mark) 16%, transparent); } }
:root[data-theme="dark"] { --shade-better: color-mix(in srgb, var(--fresh) 14%, transparent); --shade-worse: color-mix(in srgb, var(--mark) 16%, transparent); }
.tbl td.sh-better { background: var(--shade-better); }
.tbl td.sh-worse { background: var(--shade-worse); }
.tbl td[title] { cursor: help; }
.tbl.dense td small.was { white-space: nowrap; }
.tbl small.moved { color: var(--ink); font-weight: 600; }
.tbl tfoot .acct > * { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 600; }
.tbl tfoot .acct th { color: var(--ink); }
.legend { line-height: 1.6; }
.legend .key { display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 2px; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--line); }
.legend .key.flag { background: color-mix(in srgb, var(--tired) 20%, var(--surface)); }
.legend .key.sh-better { background: var(--shade-better); }
.legend .key.sh-worse { background: var(--shade-worse); }
.chip.win { padding: 1px 8px; font-size: var(--fs-xs); vertical-align: 1px; color: var(--fresh); border-color: color-mix(in srgb, var(--fresh) 45%, var(--line)); }
.settle { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); }
.settle svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.settle b { color: var(--ink); }
.dt.settling summary i { background: var(--mark); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }
.dt-s { font-weight: 500; }
@media (max-width: 1199px) { .dt-s { display: none; } }
.inspire { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-size: var(--fs-md); }
.inspire svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.inspire a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.inspire a:hover { text-decoration-color: currentColor; }
.tbl.since { max-width: 640px; }
.tform { display: grid; gap: 14px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 14px 18px; }
.tgrid .field { align-content: start; }
.tgrid .field label { display: block; }
@media (min-width: 641px) { .tgrid .field label { min-height: 2.7em; } }
.tgrid .field.changed input { border-color: var(--ink); }
.tin { display: flex; align-items: center; gap: 6px; }
.tin input { flex: 1; min-width: 0; }
.tin .unit { font-weight: 600; color: var(--muted); }
.head-acts .btn { min-height: 40px; padding: 8px 14px; }
.share-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px 18px; align-items: start; }
.share-form .field label { display: block; }
.share-form .row { grid-column: 1 / -1; }
.share-url { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--field); background: var(--surface); font: 500 var(--fs-sm) var(--ui); }
.share-new { border-color: color-mix(in srgb, var(--mark) 60%, var(--line)); background: color-mix(in srgb, var(--mark) 7%, var(--surface)); }
dl.basis { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
dl.basis > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; padding: 10px 14px; }
dl.basis > div + div { border-top: 1px solid var(--line); }
dl.basis dt { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); padding-top: 2px; }
dl.basis dd { margin: 0; font-size: var(--fs-md); }
@media (max-width: 640px) { dl.basis > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.print-only { display: none; }
/* The free store scan (19 Oct): the product we'd lead with, its photo beside its facts, stacked on a phone */
.scan-product { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 20px; align-items: start; }
.scan-product-t { display: grid; gap: 8px; }
.scan-product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
@media (max-width: 560px) { .scan-product { grid-template-columns: minmax(0, 1fr); } .scan-product img { max-width: 260px; } }
.scan-angles { list-style: none; margin: 0; padding: 0; display: grid; }
.scan-angles li { display: grid; gap: 6px; padding-block: 14px; border-top: 1px solid var(--line); }
.scan-angles li:first-child { border-top: 0; padding-top: 2px; }
.scan-angles h3 { margin: 0; font-size: var(--fs-md); }
.scan-angles p { margin: 0; }
/* ...and its research report: progress steps, the brand's angle mix, competitor cards with their ads, ranked ideas */
.scan-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--muted); }
.scan-steps li.done { color: var(--ink); }
.scan-steps li.done::marker { content: "✓  "; color: var(--fresh); }
.scan-steps li.now { color: var(--ink); font-weight: 700; }
.scan-mix { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.scan-mix li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-md); }
.scan-mix .bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--line) 70%, transparent); overflow: hidden; }
.scan-mix .bar i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.scan-mix .num { font-variant-numeric: tabular-nums lining-nums; color: var(--muted); }
.scan-rivals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.scan-rivals h3, .scan-ideas h3 { margin: 0; font-size: var(--fs-md); }
.scan-rivals h3 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.scan-rivals p, .scan-ideas p { margin: 0; }
.scan-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scan-thumbs li { display: grid; gap: 4px; }
.scan-thumbs img, .scan-thumbs .nothumb { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.scan-thumbs .nothumb { display: grid; place-items: center; font-size: var(--fs-xs); color: var(--muted); }
.scan-proof { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-md); }
.scan-words { display: grid; gap: 6px; justify-items: start; justify-self: start; min-width: min(100%, 260px); padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 560px) { .scan-mix li { grid-template-columns: minmax(0, 1fr) auto; } .scan-mix .bar { grid-column: 1 / -1; grid-row: 2; } }
/* Onboarding's product picker (19 Oct first-run walkthrough): Continue and the count stay in view on a long store, and
   phones get two products a row instead of one (116 products made a 42,000px page). */
form.pick { display: grid; gap: 14px; }
.pick-bar { position: sticky; bottom: 0; z-index: 2; margin-top: 4px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.prod-cell[hidden] { display: none; }
/* A digital product (store/digital.py) is listed but can't be picked: no tick, no lift, its photo faded */
label.prod.digital { cursor: default; }
label.prod.digital:hover { transform: none; box-shadow: none; }
label.prod.digital .tick { display: none; }
label.prod.digital img { opacity: .55; filter: grayscale(.5); }
label.prod.digital .chip { justify-self: start; }
@media (max-width: 480px) {
  .onb .products:not(.photos) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .onb .prod { padding: 8px; gap: 6px; }
  .onb .prod b { font-size: var(--fs-sm); line-height: 1.25; }
  .onb .prod .tick { top: 12px; right: 12px; }
}
/* New angles: each card's way into Make ads, at the card's foot */
.angle .angle-make { align-self: end; justify-self: start; padding: 6px 0 2px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.angle .angle-make:hover { text-decoration-color: currentColor; }
/* A tick box inside a .field (Connect's "What can Claude do with it?") is a checkbox row, not a field label: without
   this, .field label's space-between pushed the words to the far edge, away from their box (19 Oct walkthrough). */
.field label.check { justify-content: flex-start; font-size: inherit; font-weight: inherit; }
.field label.check input { min-height: 0; padding: 0; }   /* the box, not a 46px text field (the digital box, 19 Oct) */
.cad .cad-kind { align-self: flex-start; margin: -4px 2px 0; }
/* The review screen's decision panel: a button with its note ("Another version" and its remakes, "Make a video") wraps
   as one unit instead of running the note's words under the button (phone width, 19 Oct walkthrough). */
.decide form:not(.actions):has(> .small) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* The picker's bar reaches past the cards' 1px selection ring, so no sliver of a ticked card shows beside Continue. */
.pick-bar { margin-inline: -6px; padding-inline: 6px; }

/* New angles, grouped by source (angles/new.html): the first six of each, the rest behind "Show all" */
.new-group { display: grid; gap: 10px; }
.new-group > .h2 { margin: 0; }
.new-jump a .muted { font-weight: 500; }
.new-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; }
.new-more > summary::-webkit-details-marker { display: none; }
.new-more > summary:hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.new-more[open] > summary { margin-bottom: 12px; }
.new-more .more-open, .new-more[open] .more-closed { display: none; }
.new-more[open] .more-open { display: inline; }
/* A making or keeping control once the brand's trial or plan has stopped (partials/macros.html `making`, 20 Oct):
   switched off, with the one message and the Plan page beside it */
.stop-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.stop-note { margin: 0; flex: 1 1 14em; min-width: 0; }
/* Ads left in the phone top bar, with a trial's days (shell.html, plans.chip; the countdown 20 Oct, ads left 22 Oct):
   beside Ask, never wider than its words. The brand's name gives way first (to an ellipsis, then below 360 px to its
   initial, still read out), so nothing scrolls sideways at 320 px */
.tchip { display: none; }
@media (max-width: 760px) {
  .tchip { display: inline-flex; align-items: center; flex: none; margin-left: auto; min-height: 32px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--chrome-line); background: var(--chrome-2); color: var(--chrome-ink); font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
  .tchip.tired { border-color: color-mix(in srgb, var(--tired) 60%, var(--chrome-line)); }
  .topbar .btn { padding-inline: 12px; }
  .topbar .switch { min-width: 0; max-width: 100%; }
  .topbar .switch > span:not(.switch-ic) { min-width: 0; overflow: hidden; }
  .topbar .switch b, .topbar .switch .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 374px) { .topbar .switch .small { display: none; } }
@media (max-width: 359px) {
  .topbar { gap: 8px; }
  .topbar .switch > span:not(.switch-ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* The Meta connect panel's comments option (20 Oct, partials/metaconnect.html), on Angles and onboarding. */
.mt-connect { display: grid; gap: 10px; }
.mt-opt { display: flex; gap: 10px; align-items: flex-start; max-width: 70ch; cursor: pointer; }
.mt-opt input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.mt-opt small { display: block; font-size: var(--fs-sm); margin-top: 2px; }
/* Asking for a pack's refund (pack_refund.html) and answering it on /admin (22 Oct) */
.refund-f { display: grid; gap: 14px; }
.refund-packs { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.refund-answer { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.refund-decline { display: grid; gap: 6px; margin-top: 8px; min-width: 14em; }
/* The research report (design pass 2, 22 Oct): the finished ad on the top idea leads, beside the idea and its evidence;
   then the ranking, the brand's own ads and its competitors, each under a hairline instead of in a box */
:is(.scan-head, .scan-lead, .scan-sec, .scan-cta, .scan-research, .scan-product) p, .onb-card.wide > p { margin: 0; }
.scan-head { display: grid; gap: 8px; }
.scan-lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.scan-lead.has-ad { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.scan-lead > .h2 { grid-column: 1 / -1; }
.scan-ad { margin: 0; display: grid; gap: 8px; }
.scan-ad img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--tile); }
.scan-top { display: grid; gap: 10px; align-content: start; min-width: 0; }
.scan-top-h, .scan-idea-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.scan-top-h h3 { margin: 0; font: 800 var(--fs-lg)/1.2 var(--display); letter-spacing: -.01em; }
.scan-idea-h h3 { margin: 0; font-size: var(--fs-md); }
.scan-idea-h .chip, .scan-top-h .chip { margin-left: auto; }
.scan-sec { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.scan-ideas { list-style: none; margin: 0; padding: 0; display: grid; }
.scan-ideas > li { display: grid; gap: 8px; padding-block: 16px; border-top: 1px solid var(--line); min-width: 0; }
.scan-ideas > li:first-child { border-top: 0; padding-top: 4px; }
.scan-rank { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tile); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 700px) { .scan-lead.has-ad { grid-template-columns: minmax(0, 1fr); } }
/* A review of the app (23 Oct, app_reviews.py). The card (partials/review_ask.html): one quiet ask beside its two
   buttons, on Home and beside the decision on the review screen; never a modal. Then the form (review.html), its
   thanks with the words as they'd be shown, and /admin's Reviews. */
.ar-ask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; }
.home .card.ar-ask { display: grid; gap: 12px 16px; }
.home .ar-ask > .row:last-child { margin-top: 0; }
.ar-ask-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--mark) 24%, var(--surface)); color: var(--ink); }
.ar-ask-ic svg { width: 22px; height: 22px; }
.ar-ask-t { display: grid; gap: 4px; min-width: 0; }
.ar-ask-t p { margin: 0; color: var(--muted); max-width: 62ch; }
.ar-ask-do { flex-wrap: nowrap; }
.ar-ask-do form { margin: 0; }
.side-panel .ar-ask { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.side-panel .ar-ask-do { grid-column: 1 / -1; }
.side-panel .ar-ask .ct { font-size: var(--fs-md); }
@media (max-width: 640px) {
  .ar-ask { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .ar-ask-do { grid-column: 1 / -1; }
  .ar-ask-do > .btn { flex: 1; }
}
.ar-form { max-width: 46rem; }
.ar-form .field textarea { min-height: 112px; }
.ar-form .check input { flex: none; }
@media (max-width: 640px) { .ar-none { margin-right: 4px; } .ar-none span { padding-inline: 12px; } .ar-star svg { width: 28px; height: 28px; } }
.ar-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .ar-who { grid-template-columns: minmax(0, 1fr); } }
.ar-stars { border: 0; margin: 0; padding: 0; min-width: 0; }
.ar-stars legend { padding: 0; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 600; }
.ar-stars-row { display: flex; align-items: center; gap: 2px; }
.ar-stars-row label { position: relative; cursor: pointer; }
.ar-stars-row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ar-none { flex: none; margin-right: 10px; white-space: nowrap; }
.ar-none span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; transition: border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out; }
.ar-none:hover span { border-color: var(--field); }
.ar-none input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ar-star { display: grid; place-items: center; flex: 0 1 44px; min-width: 34px; height: 44px; border-radius: 10px; color: var(--field); }
.ar-star svg { width: 30px; height: 30px; transition: color .15s ease-out, fill .15s ease-out, transform .2s cubic-bezier(.16, 1, .3, 1); }
.ar-star:hover svg { color: var(--ink); transform: scale(1.08); }
.ar-star input:checked + svg { fill: var(--mark); color: var(--ink); }
.ar-stars-row:has(input[value="2"]:checked) .ar-star:nth-of-type(-n+3) svg,
.ar-stars-row:has(input[value="3"]:checked) .ar-star:nth-of-type(-n+4) svg,
.ar-stars-row:has(input[value="4"]:checked) .ar-star:nth-of-type(-n+5) svg,
.ar-stars-row:has(input[value="5"]:checked) .ar-star:nth-of-type(-n+6) svg { fill: var(--mark); color: var(--ink); }
.ar-stars-row input:focus-visible + svg, .ar-stars-row input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.ar-reward b { display: block; margin-bottom: 2px; }
.ar-done p { margin: 0; max-width: 62ch; }
.ar-quote { margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); display: grid; gap: 10px; max-width: 62ch; }
.ar-quote blockquote { margin: 0; }
.ar-quote blockquote p { margin: 0; font: 600 var(--fs-lg)/1.45 var(--ui); white-space: pre-line; overflow-wrap: anywhere; }
.ar-quote blockquote p::before { content: "“"; }
.ar-quote blockquote p::after { content: "”"; }
.ar-quote figcaption { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: var(--fs-sm); color: var(--muted); }
.ar-quote figcaption b { color: var(--ink); }
.ar-rate { display: inline-flex; gap: 1px; color: var(--field); vertical-align: -2px; }
.ar-rate svg { width: 14px; height: 14px; }
.ar-rate .on { color: var(--ink); }
.ar-rate .on svg { fill: var(--mark); }
.ar-export { display: grid; gap: 10px; }
.ar-export > summary { justify-self: start; list-style: none; }
.ar-export > summary::-webkit-details-marker { display: none; }
.ar-export p { margin: 0; }
.ar-json { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--field); background: var(--bg); color: var(--ink); font: 500 var(--fs-xs)/1.5 ui-monospace, Menlo, monospace; resize: vertical; }