/* Dialed · Gear: the catalogue board (gear.html) and the product page (gear.html?p=<id>).
   Loaded after site.css. Page-specific layout only; every color is a system token. */

/* ---------------------------------------------------------------- Catalogue board */
.gear-tools .chips { flex: 1 1 auto; overscroll-behavior-x: contain; }
/* two rows: the category chips; then the grade chips with the brand and search boxes at the right (the boxes keep a width, never a whole line) */
.gear-tools .gear-grades { order: 1; }
.gear-tools .tools-r { order: 2; display: flex; gap: var(--s3); flex: 0 1 26rem; min-width: 0; margin-left: auto; }
.gear-tools .tools-r .field { flex: 1 1 10rem; }
.gear-tools .field .err { animation: m-fade var(--dur-1) ease-out both; }
.idx-msg { margin-bottom: var(--s4); font-size: var(--t-1); }
.count { margin-bottom: var(--s3); color: var(--fg-2); }

/* ---------------------------------------------------------------- Result header: the count line, with the view beside it */
[data-page="gear"] .idx-res { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s4); }
[data-page="gear"] .idx-res-c { flex: 1 1 22rem; min-width: 0; }
[data-page="gear"] .idx-res-c .count { margin-bottom: var(--s1); }
[data-page="gear"] .idx-res-c .count-note { margin: 0; }
[data-page="gear"] .idx-res-ctl { display: flex; align-items: center; gap: var(--s3); flex: none; padding-bottom: 2px; }
[data-page="gear"] .idx-ctl-l { margin: 0; }
[data-page="gear"] .idx-res.no-view .idx-res-ctl { display: none; }

/* ---------------------------------------------------------------- The card grid: the catalogue read as a catalogue
   One card is one model: what it is graded at today, what it costs now against its list price, where that price is,
   the shape of the price we have tracked, and what is left in your size. The whole card is the link to the model. */
.gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--s4); }
.gcards li + li { margin-top: 0; }
.gcard { position: relative; display: flex; flex-direction: column; gap: var(--s3); min-width: 0; padding: var(--s5); background: var(--panel); border: 1px solid var(--panel-rule); border-radius: var(--radius); transition: background-color var(--dur-1) ease-out, border-color var(--dur-1) ease-out; }
.gcard.is-quiet { background: var(--bg); }   /* ungraded: still a card, but it recedes instead of shouting a dashed ring */
.gc-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 1.6em; font-size: var(--t-1); }
.gc-g { display: inline-flex; align-items: center; gap: 8px; flex: none; font-weight: 700; color: var(--fg); white-space: nowrap; }
.gc-g .glyph { font-size: 1.05rem; }
.gc-g.none { font-weight: 600; color: var(--fg-3); }
.gc-st { flex: 0 1 auto; min-width: 3.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; text-decoration: none; color: var(--fg-3); }
.gc-n { font-size: var(--t1); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.gc-n a { color: var(--fg); text-decoration: none; }
.gc-c { font-size: var(--t-1); color: var(--fg-2); }
.gc-ca { color: inherit; text-decoration: none; }
/* the model link's box is the card; the brand, the category and the store sit above it and keep their own addresses */
.gc-n .gc-m::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.gc-b, .gc-ca, .gc-st { position: relative; z-index: 1; }
.gcard:has(.gc-m:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.gcard:has(.gc-m:focus-visible) .gc-m:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .gcard:hover { border-color: var(--line); }
  .gcard:hover .gc-m { text-decoration: underline; text-decoration-thickness: 2px; }
  .gc-b:hover, .gc-ca:hover, .gc-st:hover { text-decoration: underline; }
}
.gcard:active { background: var(--bg-2); }   /* a card answers a press where hover is gated off */
/* the money: the figure first, the list price struck beside it, the stock word on its tab */
.gc-p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-top: var(--s3); border-top: 1px solid var(--rule); }
.gc-p .fig { font-size: var(--t4); }
.gc-was { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--t-1); color: var(--fg-2); }
.gc-was s { color: var(--fg-3); }
.gc-was b { color: var(--fg); font-weight: 700; }
.gc-p .tab { margin-left: auto; align-self: center; }
.gc-p.none .fig { font-size: var(--t2); color: var(--fg-3); }
.gc-p.none .gc-was { color: var(--fg-3); }
/* the price line: the tracked span and nothing wider, with the tracked low as a dashed rule */
.gc-spark { display: block; margin-top: calc(-1 * var(--s2)); }
.gc-spark svg { display: block; width: 100%; height: 30px; }
.gc-spark .sl { fill: none; stroke: var(--figure); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.gc-spark .sa { fill: var(--figure); opacity: .12; stroke: none; }
.gc-spark .sq { fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.gc-span { font-size: var(--t-1); color: var(--fg-3); }
.gc-sz { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: var(--t-1); color: var(--fg-2); }
.gc-sz.none { color: var(--fg-3); }
.gc-sz .mine { padding: 1px 6px; background: var(--tint); color: var(--on-tint); font-weight: 800; border-radius: var(--radius); }
.gcard.is-gone .gc-n a { color: var(--fg-2); }
.gcard.is-gone .gc-p .fig { color: var(--fg-3); }

/* the grading pass holds the grid's shape with static bars, so no card is painted and then moved */
.gcard.is-skel .skel { background: color-mix(in srgb, var(--fg) 9%, var(--panel)); }
.gcard.is-skel .sk-g { width: 7.5rem; height: 1rem; }
.gcard.is-skel .sk-st { width: 4.5rem; height: 1rem; margin-left: auto; }
.gcard.is-skel .sk-n { width: 72%; height: 1.4rem; }
.gcard.is-skel .sk-c { width: 44%; height: .9rem; }
.gcard.is-skel .sk-fig { width: 6rem; height: 2rem; }
.gcard.is-skel .sk-spark { width: 100%; height: 30px; margin-top: calc(-1 * var(--s2)); }
.gcard.is-skel .sk-span { width: 82%; height: .9rem; }
.gcard.is-skel .sk-sz { width: 58%; height: .9rem; margin-top: auto; }
/* a real table laid out as the board's grid; the roles in the markup keep its semantics where the display change would drop them */
.cat-board { display: block; min-width: 0; font-size: inherit; position: relative; z-index: 0; }
.cat-board thead, .cat-board tbody { display: block; }
.cat-board tbody { border-top: 2px solid var(--fg); }
.cat-board tr { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.6fr) minmax(0, 1.1fr) 6.5rem minmax(0, 1.7fr) 6rem; gap: var(--s4); align-items: center; }
.cat-board th, .cat-board td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.crow-h { padding: 0 0 8px; }
.crow-h th { font-size: var(--t-2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); line-height: 1.2; }
.crow { position: relative; padding: 10px 0; min-height: 56px; border-bottom: 1px solid var(--rule); }
.crow::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--s3)); border-radius: var(--radius); z-index: -1; transition: background-color var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { .crow:hover::before { background: var(--bg-2); } }
.cat-board .crow-n a { color: var(--fg); font-weight: 700; text-decoration: none; }
/* the model link is the row's target (its ::after covers the row); the brand and the category links sit above it and lead to the filtered deals board */
.crow-n .crow-m::after { content: ""; position: absolute; inset: 0; }
.crow-n .crow-b, .crow-ca { position: relative; z-index: 1; }
.crow-ca { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crow:hover .crow-n .crow-m { text-decoration: underline; text-decoration-thickness: 2px; } .crow-n .crow-b:hover, .crow-ca:hover { text-decoration: underline; } }
.crow:has(.crow-m:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.crow:has(.crow-m:focus-visible) .crow-m:focus-visible { outline: none; }
.cat-board .crow-n small { display: none; color: var(--fg-3); font-size: var(--t-1); font-weight: 400; margin-top: 2px; }
.cat-board .crow-n small a { font-weight: 600; color: var(--fg-2); }   /* the category link in the phone's meta line keeps the line's weight */
.cat-board .sm-s { display: none; }
.cat-board .crow-c, .cat-board .crow-s { font-size: var(--t-1); color: var(--fg-2); overflow-wrap: anywhere; }
.cat-board .crow-p, .cat-board .crow-t { text-align: right; }
.crow-p .fig { font-size: var(--t2); }
.cat-board .crow-g { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-1); font-weight: 700; color: var(--fg); }
.crow-g .glyph { font-size: 1.1rem; }
.cat-board .crow-g small { display: inline; color: var(--fg-3); font-weight: 600; font-size: var(--t-1); margin: 0; }
.cat-board .crow-g.none { color: var(--fg-3); }
.crow .crow-t { display: flex; justify-content: flex-end; }
.more-row { display: flex; justify-content: center; padding: var(--s5) 0 0; }
.idx-empty { margin-top: var(--s4); }
.empty h2 { font-size: var(--t1); }

/* ---------------------------------------------------------------- Product page */
.crumbs { list-style: none; margin: 0; padding: var(--s5) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); font-size: var(--t-1); font-weight: 600; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s3); margin: 0; min-width: 0; }
.crumbs li + li { margin-top: 0; }
.crumbs li + li::before { content: ""; width: 1px; height: 1em; background: var(--line); flex: none; }
.crumbs a { color: var(--fg-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--fg); text-decoration: underline; } }
.crumbs [aria-current] { color: var(--fg-3); }
.pp-head { padding: var(--s4) 0 var(--s4); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4) var(--s6); }
.pp-head h1 { font-size: var(--t6); max-width: 20ch; }
.pp-meta { margin-top: var(--s3); color: var(--fg-2); }
.pp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); }
.pp > .span, .pp > .vt { grid-column: 1 / -1; }
.pp .panel { padding: var(--s6); }
/* every section opens on the board's own 2px ink rule, and stands clear of the one before it */
.pp .panel-h { margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 2px solid var(--fg); }
.pp .panel-h h2 { font-size: var(--t2); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.pp-aside { display: grid; grid-template-rows: auto 1fr; gap: var(--s5); min-width: 0; }
.pp > .panel { align-self: start; }   /* a panel ends where its content ends; a long store table never stretches an empty one beside it */
.pp #offers .table { min-width: 26rem; }

/* the verdict tile: this page's head. The grade and its one line open it over the 2px rule; the price is the loudest
   thing under that rule, with the store, the landed figure and the two actions beneath it; the editor reads at the right. */
.vt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5) var(--s7); padding: var(--s6); border: 1px solid var(--rule); border-radius: var(--radius); }
.vt-lede { grid-column: 1 / -1; padding-bottom: var(--s4); border-bottom: 2px solid var(--fg); }
.vt-read, .vt-price { min-width: 0; }
.vt-read { align-self: start; align-content: start; }
.vt-grade { display: flex; align-items: center; gap: var(--s3); font-size: var(--t3); font-weight: 800; font-family: var(--font-semi); font-stretch: 100%; text-transform: uppercase; letter-spacing: .01em; line-height: 1; color: var(--fg); }
.vt-grade .glyph { font-size: 1em; }
.vt-why { margin-top: var(--s2); font-size: var(--t-1); color: var(--fg-3); }
.vt-two { font-size: var(--t2); font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--fg); max-width: 44ch; text-wrap: pretty; }
.vt-by { margin-top: var(--s3); font-size: var(--t-1); color: var(--fg-3); }
.vt-lock { display: flex; gap: 8px; align-items: flex-start; margin-top: var(--s3); font-size: var(--t-1); color: var(--fg-2); }
.vt-lock .glyph { margin-top: .2em; }
/* the board's clock on a tile: the sweep in amber, the numerals in ink (amber text never sits on white) */
.vt-clock { margin-top: var(--s5); gap: var(--s5); text-align: left; flex-wrap: wrap; }
.vt-clock dt { color: var(--fg-3); }
.vt-clock dd { font-size: var(--t2); color: var(--fg); }
.vt-clock .sun dd { align-self: flex-start; padding: 7px 10px; background: var(--amber); color: var(--on-amber); border-radius: var(--radius); }
.vt-price { display: grid; gap: var(--s3); align-content: start; }
.vt-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.vt-fig .fig { font-size: var(--t7); }
.vt-fig .tab { margin-left: auto; align-self: center; }
.vt-was { display: inline-flex; align-items: baseline; gap: 10px; font-size: var(--t1); color: var(--fg-2); }
.vt-was s { color: var(--fg-3); }
.vt-was b { color: var(--fg); }
.vt-low { font-size: var(--t-1); color: var(--fg-3); }
.vt-store { font-size: var(--t-1); color: var(--fg-2); }
.vt-store b { color: var(--fg); font-weight: 700; }
.vt-landed { font-size: var(--t-1); color: var(--fg-2); }
.vt-landed b { color: var(--fg); }
.vt-landed small { display: block; color: var(--fg-3); margin-top: 2px; }
.vt-ship { font-size: var(--t-1); padding: var(--s3) var(--s4); }
.vt-acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s1); }
.vt .live { margin: 0; }
.vt-disc { font-size: var(--t-2); color: var(--fg-3); }
.vt-price.is-gone .fig { color: var(--fg-3); }

/* sizes */
.szs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.szs li + li { margin-top: 0; }
.sz { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 4.75rem; min-height: 48px; padding: 6px 14px; border: 1.5px solid var(--line); border-radius: var(--radius); font-weight: 800; font-family: var(--font-narrow); font-stretch: 100%; font-variant-numeric: tabular-nums; font-size: var(--t1); line-height: 1; color: var(--figure); }
.sz small { display: block; font-size: var(--t-2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-semi); font-stretch: 100%; margin-top: 4px; color: inherit; }
.sz.out { color: var(--fg-3); border-style: dashed; text-decoration: line-through; text-decoration-thickness: 2px; }
.sz.mine { background: var(--tint); border-color: var(--on-tint); color: var(--on-tint); }
.sz.mine.out { background: transparent; border-color: var(--line); color: var(--fg-3); }

/* stores: the row the page quotes is on the tint so the table scans; the gone and the no-ship rows stay quiet */
.pp .table tr.no-ship td, .pp .table tr.no-ship td.num { color: var(--fg-3); }
.pp #offers tr.is-best td { background: var(--tint); color: var(--tint-fg); }
.pp #offers tr.is-best td small { color: var(--tint-fg); }
.pp #offers tr.is-best td.num, .pp #offers tr.is-best td.num.best { color: var(--on-tint); font-weight: 800; }
/* the scroll region fades at its right edge while there is more table that way */
.scroll-wrap { position: relative; }
.scroll-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px; background: linear-gradient(to right, transparent, var(--panel)); pointer-events: none; opacity: 0; transition: opacity var(--dur-1) ease-out; }
.scroll-wrap.can-scroll:not(.at-end)::after { opacity: 1; }

/* fit notes */
.fns { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.fns li + li { margin-top: 0; }
.fn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0; font-size: var(--t-1); color: var(--fg-2); }
.fn b { font-size: var(--t1); font-weight: 800; font-family: var(--font-narrow); font-stretch: 100%; font-variant-numeric: tabular-nums; color: var(--figure); }

/* related */
.rel { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.rel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0; }
.rel li + li { margin-top: 0; }
.rel-n { min-width: 0; }
.rel-n a { color: var(--fg); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .rel-n a:hover { text-decoration: underline; } }
.rel-n small { display: block; color: var(--fg-3); font-size: var(--t-1); margin-top: 2px; }
.rel-g { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-1); font-weight: 700; color: var(--fg); white-space: nowrap; }
.rel-g.none { color: var(--fg-3); font-weight: 500; }
.rel-none { font-size: var(--t-1); color: var(--fg-3); padding-top: var(--s3); }

/* consensus */
.pc h3 { font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s2); line-height: 1.3; }
.cons-gate { margin-top: var(--s4); font-size: var(--t-1); }
.src b { color: var(--fg-2); }

/* ---------------------------------------------------------------- Breakpoints */
@media (max-width: 900px) {
  .pp { grid-template-columns: minmax(0, 1fr); }
  .vt { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .pp-head h1 { font-size: var(--t5); max-width: 24ch; }
  .pp-aside { grid-template-rows: auto; }
}
@media (max-width: 820px) {
  .cat-board tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 6rem minmax(0, 1.6fr) 6rem; gap: var(--s3); }
  .cat-board .crow-c { display: none; }
  .cat-board .crow-n small { display: block; }
  .crumbs { padding-top: var(--s4); }
}
@media (max-width: 560px) {
  /* the first viewport: one-sentence lede, the chips as one row that scrolls sideways under an edge fade, then the board */
  .lede-more { display: none; }
  .gear-tools .chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); padding-right: calc(var(--gutter) + var(--s6)); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, var(--fg) calc(100% - var(--s6)), transparent); mask-image: linear-gradient(to right, var(--fg) calc(100% - var(--s6)), transparent); }
  .gear-tools .chips::-webkit-scrollbar { display: none; }
  .gear-tools .chips .chip { flex: none; }
  .cat-board thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .cat-board tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "g t"; gap: 6px var(--s3); }
  .crow { padding: 12px 0; }
  .cat-board .crow-n { grid-area: n; }
  .cat-board .sm-s { display: inline; }
  .cat-board .crow-s { display: none; }
  .cat-board .crow-p { grid-area: p; align-self: start; }
  .crow-p .fig { font-size: var(--t1); }
  .cat-board .crow-g { grid-area: g; }
  .cat-board .crow-t { grid-area: t; }
  .gear-tools .tools-r { flex-direction: column; flex: 1 1 100%; margin-left: 0; }
  .gear-tools .tools-r .field { flex: 0 0 auto; }
  /* one card to a line; the view segment sits under the count line, not squeezed beside it */
  .gcards { grid-template-columns: minmax(0, 1fr); }
  .gcard { padding: var(--s4); }
  [data-page="gear"] .idx-res { gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
  [data-page="gear"] .idx-res-ctl { flex: 1 1 100%; padding-bottom: 0; }
  .sz { min-width: 4rem; padding-inline: 10px; }
  .vt-two { font-size: var(--t1); font-weight: 400; letter-spacing: 0; line-height: 1.45; }
  .vt { padding: var(--s4) var(--gutter) var(--s5); margin-inline: calc(-1 * var(--gutter)); border-inline: 0; border-radius: 0; }
  .vt-grade { font-size: var(--t2); }
  .vt-fig .fig { font-size: var(--t5); }
  .vt-clock { margin-top: var(--s4); }
  .th-long { display: none; }
  .pp #offers .table th, .pp #offers .table td { padding-inline: 8px; }
  .pp .panel { padding: var(--s4); }
  .pp .panel-h h2 { font-size: var(--t1); }
}
@media (pointer: coarse) {
  .crumbs a { min-height: 44px; }
  .crow-n .crow-b, .crow-ca { padding: 6px 0; margin: -6px 0; }   /* the brand and category links grow their touch target; the row does not move */
  .gc-b, .gc-ca, .gc-st { display: inline-block; padding: 10px 0; margin: -10px 0; }   /* 44px on the card's own links; the card does not move */
  .gc-h { min-height: 44px; }
}

/* ---------------------------------------------------------------- motion (2 Nov 2026) */
/* the watch control: an outline diamond that fills when pressed; both words share one grid cell so the button keeps its width */
.watch .glyph { color: inherit; font-size: 1em; }
.watch .w-lbls { display: inline-grid; text-align: left; }
.watch .w-lbls > span { grid-area: 1 / 1; transition: opacity var(--dur-1) var(--ease-out); }
.watch[aria-pressed="false"] .w-on, .watch[aria-pressed="true"] .w-off { opacity: 0; }
.count .res-n { font-variant-numeric: tabular-nums lining-nums; }
@media (prefers-reduced-motion: reduce) {
  .watch .w-lbls > span { transition: none; }
  .gcard { transition: none; }
}

/* ---------------------------------------------------------------- finish (2 Nov 2026) */
.crow:active::before { background: var(--bg-2); }   /* a row answers a press where hover is gated off (touch) */
.pp .panel[id] { scroll-margin-top: var(--s5); }   /* "#stores" from the verdict lands with its heading clear of the edge */

/* ===== list continuity (2 Nov 2026): the product view settles in once its content is in place (--dur-2); without script it is simply there ===== */
#gear-product { transition: opacity var(--dur-2) ease-out, transform var(--dur-2) var(--ease-out); }
#gear-product.in { opacity: 0; transform: translateY(6px); transition: none; }
@media (prefers-reduced-motion: reduce) { #gear-product, #gear-product.in { transition: none; transform: none; opacity: 1; } }

/* ===== launch (2 Nov 2026) ===== */
/* until the whole board is graded the Today column is provisional: muted by opacity, back to full over --dur-2 once aria-busy drops */
.cat-board .crow-g { transition: opacity var(--dur-2) ease-out; }
.cat-board[aria-busy="true"] .crow-g { opacity: .5; }
/* an ungraded row: the dashed ring alone on a desk (its name is for screen readers); on a phone the ring would sit alone on its line, so the name is printed beside it */
.cat-board .crow-g small.na-l { display: none; }
@media (max-width: 560px) { .cat-board .crow-g.none small.na-l { display: inline; font-size: var(--t-2); color: var(--fg-3); } }
.count-note { margin: calc(-1 * var(--s2)) 0 var(--s3); }   /* the simulated-board line, under the count line */
.vt-disc span { display: block; }   /* the store line and the simulated-board line, one under the other */
@media (prefers-reduced-motion: reduce) { .cat-board .crow-g { transition: none; } }