/* CitePack Decision Map — production polish (preview, 2026-10-15).
 * Colour: every mark takes its colour from palette.css, one meaning per hue.
 * Alignment: text runs in full lines across the space it has; nothing shown, no order and no interaction changes. */

:root { --shadow: 0 1px 2px rgba(17, 19, 24, .04), 0 3px 12px rgba(17, 19, 24, .045); --r: 14px; }
.banner { background: var(--banner-bg); color: var(--banner-ink); border-bottom-color: var(--banner-line); }

/* ---------- colour: tiles (Overview grid, Question pages, pop-ups) ---------- */
.t-first, .t-you, .t-both { background: var(--first-solid); color: #fff; box-shadow: none; font-weight: 700; }
.t-off, .t-cited { background: var(--off); color: var(--off-ink); font-weight: 600; }
.t-read { background: var(--b-50); color: var(--read-ink); font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--b-300); }
.t-low { background: var(--low); color: var(--low-ink); }
.t-kind, .t-cnamed { background: var(--kind); color: var(--kind-ink); }
.t-unc, .t-not, .t-unclear { background: var(--not); color: var(--not-ink); font-weight: 600; }
.t-another, .t-cfirst { background: var(--another); color: var(--another-ink); font-weight: 600; }
.t-unused { background: var(--n-100); color: var(--n-600); box-shadow: inset 0 0 0 1px var(--n-150); }
.t-none, .t-cnot { background: var(--hatch), var(--none); color: var(--none-ink); box-shadow: inset 0 0 0 1px var(--none-line); }
.t-nr, .t-hidden { background: var(--dots), var(--none); color: var(--none-ink); box-shadow: inset 0 0 0 1px var(--none-line); }

/* legend swatches: the same fill as the tile they name, edged in its mark colour */
.sw-offered, .sw-you, .sw-both { background: var(--first-solid); border: 1px solid var(--first-solid); }
.sw-not_offered, .sw-unclear { background: var(--not); border: 1px solid var(--o-200); }
.sw-no_product { background: var(--hatch-mk), var(--card); border: 1px solid var(--n-300); }
.sw-not_read { background: var(--dots-mk), var(--card); border: 1px solid var(--n-300); }
.sw-another, .sw-name { background: var(--another); border: 1px solid var(--g-400); }
.sw-kind { background: var(--kind); border: 1px solid var(--n-300); }
.sw-cited { background: var(--off); border: 1px solid var(--b-300); }
.sw-read { background: var(--b-50); border: 1.5px solid var(--b-300); }

/* ---------- colour: the answer strip — every answer at full strength ---------- */
.strip .st-q, .strip:not(.all) .st-q, .st-q:hover { opacity: 1; }
.st-c { border-radius: 2px; }
.st-c.t-first { background: var(--mk-first); box-shadow: none; }
.st-c.t-off { background: var(--mk-top); }
.st-c.t-low { background: var(--n-400); }
.st-c.t-unc, .st-c.t-not { background: var(--mk-exc); }
.st-c.t-none { background: var(--hatch-mk), var(--card); box-shadow: inset 0 0 0 1px var(--n-400); }
.st-c.t-nr { background: var(--dots-mk), var(--card); box-shadow: inset 0 0 0 1px var(--n-300); }
/* the small answer dots beside each repeat take the strip's mark colours */
.bd-dot.t-first, .bd-dot.t-you { background: var(--mk-first); box-shadow: none; }
.bd-dot.t-off { background: var(--mk-top); }
.bd-dot.t-low, .bd-dot.t-kind { background: var(--n-400); }
.bd-dot.t-unc, .bd-dot.t-not { background: var(--mk-exc); }
.bd-dot.t-another { background: var(--mk-rival); }
.bd-dot.t-none { background: var(--hatch-mk), var(--card); box-shadow: inset 0 0 0 1px var(--n-400); }
.bd-dot.t-nr { background: var(--dots-mk), var(--card); box-shadow: inset 0 0 0 1px var(--n-300); }
/* this question's answers: ringed, never by fading the others */
.strip:not(.all) .st-q.on { border-radius: 4px; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--ink); }

/* ---------- colour: words AI wrote about you, names in an answer's order ---------- */
.mk-you, .mk-you.mk-first, .mk-at.mk-you { background: var(--b-100); color: var(--b-900); box-shadow: inset 0 -2px 0 var(--b-600); border-radius: 2px; }
.mk-first { background: var(--g-100); color: var(--g-900); box-shadow: inset 0 -2px 0 var(--g-400); }
.lb.g-you { background: var(--b-100); color: var(--b-900); box-shadow: inset 0 -2px 0 var(--b-600); }
.lb.g-first { background: var(--g-100); color: var(--g-900); box-shadow: inset 0 -2px 0 var(--g-400); }
.bc.fst { background: var(--another); border-color: var(--g-400); color: var(--another-ink); }
.bc.me, .bc.me.fst { background: var(--first-solid); border-color: var(--first-solid); color: #fff; }
.bc.me .youtag { background: #fff; color: var(--first-solid); }
.qhead.on { background: var(--first-bg); color: var(--first-ink); box-shadow: inset 0 0 0 1.5px var(--b-300); }
.qhead.on .qh-t span { color: var(--ink2); }

/* exception chip: coral, the exception colour */
.r-x { background: var(--o-200); color: var(--o-800); }
/* Who gets picked: You in the same deep blue as a first place */
.cf-you { background: var(--first-solid); }
/* Evidence & Trust: the open question is a pale selection, not a fill */
.tr-aq.open .tr-qh { background: var(--first-bg); box-shadow: inset 0 0 0 1.5px var(--b-300); }
/* the repeat buttons keep a button fill; white means nothing to read */
.tr-rc { background: var(--n-100); }
.tr-rc.on { background: var(--off); }
.tr-rc.off { background: transparent; }
/* nothing to show: stone stripes when the answer named no product, stone dots when it was not read */
.bd-blank { box-shadow: inset 0 0 0 1px var(--none-line); background: var(--hatch), var(--none); color: var(--none-ink); }
.bd-blank.bd-nr { background: var(--dots), var(--none); }
.oc-no_product { background: var(--hatch), var(--none); color: var(--none-ink); box-shadow: inset 0 0 0 1px var(--none-line); }
.oc-not_read, .oc-nr { background: var(--dots), var(--none); color: var(--none-ink); box-shadow: inset 0 0 0 1px var(--none-line); }

/* ---------- the filter: one clear control, what it does said beside it and inside it ---------- */
.fmenu summary { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--b-50); border: 1px solid var(--b-200); color: var(--b-800); font-size: 13px; font-weight: 600; }
.fmenu summary::after { content: none; }
.fmenu summary:hover, .fmenu[open] summary { background: var(--b-100); border-color: var(--b-300); color: var(--b-900); }
.fm-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.fm-chev { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.fmenu[open] .fm-chev { transform: rotate(180deg); }
.fm-hint { font-size: 12.5px; color: var(--muted); }
.fm-pop { padding: 8px; }
.fm-top { padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.fm-t { margin: 0 0 3px; font-size: 14px; font-weight: 650; color: var(--ink); }
.fm-s { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }

/* ---------- the answer strip: each group named under it, the key with its counts ---------- */
.st-qs { display: flex; gap: 10px; margin-top: 4px; }
.st-ql { flex: 1; min-width: 0; padding-top: 4px; border-top: 1.5px solid var(--line2); text-align: center; font-size: 11px; font-weight: 550; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ql.on { border-top-color: var(--ink); color: var(--ink); }
.ql-s { display: none; }
.st-key { gap: 6px; margin-top: 10px; }
.st-key .sk-l { margin-right: 4px; }
.st-key .sk { gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); color: var(--ink2); }
.st-key .sk b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-key .st-c { width: 14px; height: 10px; border-radius: 2px; }

/* ---------- Who gets picked: the names beside you, side by side ---------- */
.cf-sum { padding-bottom: 16px; }
.cf-sumh h2 { margin: 0 0 4px; font: 600 18px/1.3 var(--sans); }
.cf-sumh p { margin: 0 0 14px; font-size: 13.5px; color: var(--ink2); }
.cf-st { display: grid; grid-template-columns: minmax(150px, 1fr) 104px 104px minmax(190px, 1.3fr) minmax(150px, .9fr) minmax(280px, 1.9fr); }
.cf-sum4 .cf-st { grid-template-columns: minmax(150px, 1fr) 104px 104px minmax(190px, 1.3fr) minmax(300px, 2.3fr); }
.cf-sh, .cf-sr { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.cf-sh { align-items: end; border-bottom: 1px solid var(--line); }
.cf-sh > span { padding: 0 12px 9px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cf-sr { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .12s; }
.cf-sr > * { padding: 0 12px; min-width: 0; }
a.cf-sr:hover { background: var(--b-50); }
.cf-sr.on { background: var(--b-50); box-shadow: inset 3px 0 0 var(--first-solid); }
.cf-sme { background: var(--raised); }
.cf-sn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cf-sn b { font-size: 15px; font-weight: 650; }
.cf-sn small { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.cf-sme .cf-sn small { flex-basis: auto; }
.cf-slg { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.cf-slg svg { width: 15px; height: 15px; }
.cf-sc { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cf-sr > .cf-sc:nth-child(2), .cf-sr > .cf-sc:nth-child(3) { white-space: nowrap; }
.cf-split.cf-ss { height: 7px; }
.cf-sct { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink2); }
.cf-stn { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-se { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 5px; border-radius: 999px; background: var(--o-50); border: 1px solid var(--o-100); font-size: 12px; color: var(--o-800); }
.cf-se .elogo { width: 13px; height: 13px; }
.cf-sx { color: var(--muted); font-size: 13px; }
.cf-swc { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-sw { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 7px; border-radius: 6px; white-space: nowrap; background: var(--g-50); border: 1px solid var(--g-100); font-size: 12.5px; color: var(--g-900); }
.cf-sme .cf-sw { background: var(--b-50); border-color: var(--b-100); color: var(--b-900); }
.cf-sw em { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--muted); }
.cf-scap { margin: 12px 0 0; font-size: 12.5px; }

/* bars */
.nbar { background: var(--n-150); }
.nm .nbar i { background: var(--mk-rival); }
.nm:has(.kindtag) .nbar i { background: var(--n-400); }
.nm.me .nbar i, .nm.me.on .nbar i { background: var(--first); }
.differs { background: var(--g-100); color: var(--g-800); }
.qs::before { opacity: 1; }
.qs:nth-child(1)::before { background: var(--b-700); }
.qs:nth-child(2)::before { background: var(--b-500); }
.qs:nth-child(3)::before { background: var(--b-300); }
.qs:nth-child(4)::before { background: var(--n-300); }

/* ---------- alignment: full lines (wide screens) ---------- */
@media (min-width: 761px) {
  .frame { grid-template-columns: 264px minmax(0, 1fr); }
  .nav { padding: 20px 12px 20px 10px; }
  .qnav small { font-size: 12.5px; line-height: 1.45; }
  .main { padding: 0 36px 72px; }

  /* Overview: the headline and what AI says each run the full width */
  .herorow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero { padding: 20px 0 8px; }
  .hero h1 { max-width: none; }
  .counted, .meta { max-width: none; }
  .herorow .says { margin: 14px 0 24px; padding: 20px 26px 22px; }
  .sfig { gap: 8px; margin-top: 10px; }
  .sfig li { font-size: 15px; line-height: 1.5; }

  /* the answer grid: a wider question column, "Question N" and its words on one run */
  /* the app sets the columns inline; while no engine is folded, the question column gets the room */
  .grid:not(.focused) { grid-template-columns: minmax(270px, 1.6fr) repeat(4, minmax(0, 1fr)) !important; }
  .qh-t { display: block; font-size: 13px; line-height: 1.42; color: var(--ink2); }
  .qh-t b, .qh-t span { display: inline; }
  .qh-t b { margin-right: 5px; font-size: 13px; color: var(--ink); }
  .qh-t span { font-size: 13px; line-height: 1.42; }
  .qh-t span { margin: 0; }

  /* Listed first: name, its tag and its kind on one line */
  .nm { grid-template-columns: minmax(0, 1.8fr) minmax(80px, 1fr) 170px; }
  .nbn { flex-wrap: nowrap; white-space: nowrap; }

  /* Question pages and other page heads */
  .qhero h1 { max-width: none; }
  .stand { max-width: none; }
  .cf .cfhero h1 { max-width: none; }
  .hero.cfhero { padding-bottom: 24px; }


  /* What we couldn't see: the label stays beside its list */
  .unseen { flex-wrap: nowrap; align-items: baseline; }
  .unseen > span { flex: 1; min-width: 0; text-wrap: pretty; }

  /* What AI says: a page chip stays on one line */
  .sy-pr { grid-template-columns: minmax(0, 1.15fr) minmax(170px, 1fr) minmax(80px, 1fr) 118px; }
  .sy-pt { white-space: nowrap; }
  /* Your pages in the answers: the statements box wide enough for its title on one line */
  .sy-pgh { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
  /* the names line and its look-alike link run as one line, at one size */
  .syhero .sy-ns { display: inline-flex; margin-right: 10px; }
  .syhero .sy-lkp { font-size: 14px; color: var(--ink2); }
}

/* ---------- phone: the strip key wraps instead of being cut ---------- */
@media (max-width: 760px) {
  .st-key { flex-wrap: wrap; overflow: visible; gap: 4px 12px; }
  /* the colour switch stays one row */
  .segs { flex-wrap: nowrap; }
  .segs .seg { padding: 4px 8px; white-space: nowrap; }
  .segs .segl { padding-left: 6px; padding-right: 4px; }
  /* AI engines: each bar runs the width of its card */
  .cbar { max-width: none; }
  /* Who gets picked: each name takes a full line of the card */
  .cf-chips, .cf-zb .cf-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cf-chip, .cf-chip.cf-m, .cf-chip.cf-l { min-width: 0; }
  .cf-stage { grid-template-columns: minmax(0, 1fr); }
  .cf-zone { min-width: 0; }
  /* the filter hint is said inside the pop-up on a phone; strip groups named Q1…Q5 */
  .fm-hint { display: none; }
  .st-qs { gap: 5px; }
  .ql-l { display: none; } .ql-s { display: inline; }
  /* Who gets picked: each name a card, every figure labelled */
  .cf-st, .cf-sum4 .cf-st { display: block; }
  .cf-sh { display: none; }
  .cf-sr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 0; padding: 14px 0; }
  .cf-sr > * { padding: 0 4px; }
  .cf-sn, .cf-sc:nth-child(4), .cf-swc, .cf-sc:has(.cf-stn), .cf-sc:has(.cf-sx):nth-child(5) { grid-column: 1 / -1; }
  .cf-sc::before { content: attr(data-l); display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .cf-swc::before { flex-basis: 100%; margin-bottom: 0; }
  .cf-sme > .cf-sc:has(> .cf-sx) { display: none; }
  /* Evidence & Trust: no record is open until one is tapped */
  .tr-br:not(.has-ra) .tr-rc.on { background: var(--n-100); }
}

/* ── Who gets picked, nothing picked: you and every other name (r22) ───────────────────── */
.cf-all { --oth: var(--n-500); }
.cf-fl2 { display: grid; gap: 2px; }
.cf-fr { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 118px; align-items: center; gap: 14px; padding: 13px 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14px; }
a.cf-fr:hover { background: var(--raised); }
a.cf-fr .cf-fn::after { content: "→"; margin-left: 6px; color: var(--muted); opacity: 0; transition: opacity .12s; }
a.cf-fr:hover .cf-fn::after { opacity: 1; }
/* a name is never cut short: a long one wraps at its spaces onto a second line (truth check P1) */
.cf-fn { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
.cf-fb { height: 12px; border-radius: 6px; background: var(--n-100); overflow: hidden; }
.cf-fb i { display: block; height: 100%; border-radius: 6px; background: var(--oth); }
.cf-fr.y .cf-fb i { background: var(--first); }
.cf-fr.y { background: var(--b-50); }
.cf-fr.n .cf-fb i { background: var(--hatch), var(--none); box-shadow: inset 0 0 0 1px var(--none-line); }
.cf-fr.n .cf-fn { color: var(--ink2); }
.cf-fr > b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-share { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; }
.cf-share i.y { background: var(--first); } .cf-share i.o { background: var(--oth); }
.cf-shk { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0; font-size: 13.5px; color: var(--ink2); }
.cf-shk b { color: var(--ink); font-size: 15px; }
.cf-shk .y b { color: var(--first); }
.cf-note2 { margin: 12px 0 18px; font-size: 14px; }
.cf-all .cf-qr.o .cf-qc { background: color-mix(in srgb, var(--oth) var(--a), var(--card)); }
.cf-all .cf-qc b { font-size: 12.5px; }
.cf-mt.o .cf-dots i.on { background: var(--oth); }
.cf-wot { background: var(--n-50); border: 1px solid var(--line); }
.cf-w em.cf-eo, .cf-key em.cf-eo { background: var(--n-200); color: var(--n-900); font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
@media (max-width: 720px) {
  .cf-fr { grid-template-columns: minmax(0, 1fr) 96px; gap: 6px 10px; }
  .cf-fr .cf-fb { grid-column: 1 / -1; grid-row: 2; }
  .cf-fr > b { grid-row: 1; grid-column: 2; font-size: 13px; }
}
.cf-all .cf-sp, .cf-all .cf-mt { grid-template-columns: 112px minmax(0, 1fr) 104px; }
.cf-all .cf-qh, .cf-all .cf-qr { grid-template-columns: 112px repeat(4, minmax(0, 1fr)); }
.cf-all .cf-vfull .cf-part { border-top: 0; margin-top: 0; }
.cf-all .cf-vfull + .cf-vgrid { border-top: 1px solid var(--line); margin-top: 14px; }
@media (min-width: 721px) {
  .cf-all .cf-vgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cf-all .cf-fr { grid-template-columns: 220px minmax(0, 1fr) 130px; padding: 9px 12px; margin: 0 -12px; }
}
@media (max-width: 720px) {
  /* five tabs, the longest "Listed first": all fit at 390 without a scroll */
  .cf-all .cf-tabs { gap: 3px; }
  .cf-all .cf-tab { padding: 7px 6px; }
}
@media (max-width: 720px) { .cf-all .cf-vfull + .cf-vgrid { border-top: 0; margin-top: 0; } }

/* Example round, 2026-10-16 (Sheen): the buying questions straight under the Overview, then the pages across every
   answer; Listed first as two lists side by side. */
.nsep { height: 1px; background: var(--line); margin: 14px 12px 8px; }
@media (min-width: 761px) {
  .nlist.two { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--r), auto); grid-auto-flow: column; column-gap: 40px; }
  .nlist.two .nm { grid-template-columns: minmax(0, 2.4fr) minmax(48px, 1fr) 140px; }
  .nlist.two .nbn { flex-wrap: wrap; white-space: normal; row-gap: 4px; min-width: 0; }
  .nlist.two .nbn .namechip { white-space: normal; overflow-wrap: anywhere; }
}

/* names at 1 folded under Listed first (Sheen 2026-10-16: beside the leaders they read as noise) */
.names .nonce { margin-top: 10px; }
.names .nonce summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--b-800); }
.names .nonce summary::-webkit-details-marker { display: none; }
.names .nonce summary::before { content: '+'; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--b-300); font-size: 12px; line-height: 1; }
.names .nonce[open] summary::before { content: '−'; }
.names .nonce summary:hover { color: var(--b-900); text-decoration: underline; text-underline-offset: 3px; }
.names .nonce .nlist { margin-top: 10px; }

/* one product written two ways sits in one row, its spellings in a small line under the name (Sheen 2026-10-16) */
.nbn:has(.written), .nlist.two .nbn:has(.written) { flex-wrap: wrap; white-space: normal; row-gap: 2px; }
.nbn .written { flex-basis: 100%; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--n-600); }
/* Order grid: a name whose longest word would not fit the cell is set a size smaller, so it never breaks inside a word */
.bc.lw { font-size: 10px; letter-spacing: -.01em; }
/* a name listed first is shown whole, never cut to "…"; a kind of tool carries its tag after the name */
.cf-fn { white-space: normal; text-overflow: clip; line-height: 1.3; overflow-wrap: break-word; }
.cf-fn .cf-kt { display: inline-block; margin-left: 6px; font-size: 10.5px; vertical-align: 1px; }
/* a card naming several answers wraps its source text beside the engine logo, never under it */
.cf-pksrc { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.cf-pksrc .elogo { flex: none; margin-top: 2px; }
.cf-go { white-space: nowrap; }

/* step 7 item 11 (6b): no label on the example map under the 12px label size (type scale: label 12). A name the
   Order grid sets smaller so it never breaks inside a word (.bc.lw) keeps that rule. */
small:not(.lw *) { font-size: max(12px, .833em) !important; }
.youtag, .kindtag, .differs, .tile > span, .tr-bn, .tr dt, dl dt, .bc:not(.lw), .bd-ax, .cf-qh > span, .ec-oc .oc, .estand,
.ex-lab, .fm-h, .lgg h3, .hwt, .qaxis > span, .rt .rr, .scols .sx, .k2, li > span.on, .tr-you, .cf-key em, .cf-w em,
.ei .sr, .ei i, .ms-cat, .ql-l, .ql-s, .t-only, .ngroup, .sk, .sk-l, .sk b, .acf b, .acf small, span.ok, .lb.g-n,
.sy-chip .flag, .k small, .lgk small, h3 > small, dl dt, li > span.on, .ex-strip .ex-lab, .tr div > dt, .sy-body .k2, .sy-mp .k2, .sy-lkw .k2,
.cf-key em.cf-eo, .cf-w em.cf-eo, span.acf > b, .nbn small.youtag, .bc:not(.lw) small.youtag, .sy-fr span.ok { font-size: 12px !important; }
/* step 7 item 3: a site name in Sites behind its answers never breaks inside a word. On a phone its count drops under
   it so the name has the whole line; the rank number keeps the 12px label floor (item 11). */
.tops li::before { font-size: 12px; }
.tops li span { overflow-wrap: break-word; }
@media (max-width: 520px) { .tops li { grid-template-columns: 14px minmax(0, 1fr); row-gap: 0; } .tops li b { grid-column: 2; } }