/* TASK-63 preview. Load last. See docs/design/2026-09-27-visual-polish-preview.md. */

/* Game identity and Steam sentiment, separate from the analysis scope. */
.atlas-page .report-cover.is-single { align-items:start; }
.atlas-page .report-cover.is-single .cover-art img { width:300px; }
.atlas-page .report-cover.is-single .cover-copy h1 { margin:0; font-size:44px; line-height:1.1; }
.atlas-page .report-cover.is-single .cover-note { align-self:center; }
.atlas-page .cover-steam { margin:16px 0 0; }
.atlas-page .cover-steam > div { min-width:0; }
.cover-steam-rating { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:5px; }
.cover-steam-rating > span { color:var(--bone-soft); font:14px/1.4 var(--font-sans); }
.atlas-page .cover-steam-rating > strong { font-size:22px; }
.atlas-analysis-scope { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin:22px 0 12px; padding:22px 26px; background:#eae4d5; border-left:4px solid var(--gold); }
.analysis-scope-heading { display:grid; gap:5px; }
.analysis-scope-heading h2 { margin:0; color:var(--ink); font:600 23px/1.2 var(--font-sans); letter-spacing:-.02em; }
.analysis-scope-heading > span { color:var(--muted); font:14px/1.4 var(--font-sans); }
.analysis-scope-stats { display:flex; align-items:baseline; gap:30px; }
.atlas-page .analysis-scope-stats .cover-figure + .cover-figure { border-left:1px solid #cdc3ab; padding-left:30px; }
.atlas-page .analysis-scope-stats .cover-figure { display:grid; gap:5px; margin:0; padding:0; text-align:left; color:var(--ink); background:transparent; border:0; text-decoration:none; }
.analysis-scope-stats b { font:500 30px/1 var(--font-sans); font-variant-numeric:tabular-nums; }
.analysis-scope-stats span { font:14px/1.4 var(--font-sans); color:var(--muted); }
.atlas-page .analysis-scope-stats .cover-figure:hover b { text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px; }
.analysis-scope-stats .cover-figure:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }

/* An editorial comparison with a coverage checklist, rather than a prose disclosure. */
.atlas-collection-details { flex-basis:100%; width:100%; min-width:0; color:var(--ink-soft); font:14px/1.5 var(--font-sans); }
.atlas-collection-details summary { width:fit-content; cursor:pointer; color:var(--ink); font-weight:600; }
.atlas-collection-details:not([open]) .collection-sheet { display:none; }
.collection-sheet { display:grid; grid-template-columns:minmax(0,2.25fr) minmax(230px,1fr); margin-top:20px; background:#fbfaf6; border:1px solid var(--rule); border-top:3px solid var(--gold); }
.collection-comparison { padding:28px 30px; }
.collection-eyebrow { display:block; color:var(--muted); font:600 12px/1.4 var(--font-sans); letter-spacing:.07em; text-transform:uppercase; }
.collection-sheet-heading h2 { max-width:38ch; margin:7px 0 26px; font:600 22px/1.25 var(--font-sans); color:var(--ink); letter-spacing:-.015em; text-wrap:balance; }
.collection-populations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.collection-population { min-width:0; padding:0 26px 0 0; }
.collection-population:only-child { grid-column:1 / -1; }
.collection-population + .collection-population { padding:0 0 0 26px; border-left:1px solid var(--rule); }
.collection-kicker { display:flex; align-items:center; gap:8px; margin:0 0 7px; color:var(--ink); font-weight:650; }
.collection-kicker::before { content:''; width:8px; height:8px; border-radius:50%; background:#5486e0; }
.is-atlas .collection-kicker::before { border-radius:1px; background:var(--gold); }
.collection-population h3 { margin:0 0 18px; font:400 14px/1.4 var(--font-sans); color:var(--muted); }
.collection-count,.collection-rate { display:block; margin:0; padding:0; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; }
.collection-count strong { display:block; font:500 42px/1.1 var(--font-sans); letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.collection-count > span { display:block; margin-top:6px; font:14px/1.4 var(--font-sans); color:var(--muted); }
.collection-count i { font-style:normal; color:var(--ink); }
.collection-rate { margin-top:18px; font:14px/1.5 var(--font-sans); }
.collection-rate b { font-size:18px; }
.collection-count:hover strong,.collection-rate:hover b { text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:5px; }
.collection-count:focus-visible,.collection-rate:focus-visible,.collection-method:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.collection-included { padding:30px; border-left:1px solid var(--rule); background:#f2efe6; }
.collection-included ul { display:grid; gap:14px; list-style:none; margin:22px 0 26px; padding:0; }
.collection-included li { position:relative; padding-left:23px; color:var(--ink); }
.collection-included li::before { content:'✓'; position:absolute; left:0; color:#5c681e; font-weight:700; }
.collection-method { padding:0 0 4px; background:none; border:0; border-bottom:1px solid var(--gold); color:var(--ink); font:600 14px/1.4 var(--font-sans); cursor:pointer; }
.collection-notes { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:18px 30px; border-top:1px solid var(--rule); }
.collection-notes > div { display:grid; align-content:start; gap:4px; }
.collection-notes strong { color:var(--ink); font-size:13px; }
.collection-notes span { max-width:58ch; color:var(--muted); font-size:13px; line-height:1.5; }

/* Establish the example, then show the takeaway and its supporting evidence. */
.rs-example-intro { display:grid; grid-template-columns:160px minmax(0,1fr); gap:22px; align-items:center; padding:24px; border-bottom:1px solid var(--rule); background:#f7f5ef; }
.rs-example-art { display:grid; gap:6px; }
.rs-example-art img { display:block; width:100%; height:auto; border-radius:3px; }
.rs-example-label { margin:0 0 6px; color:var(--ink); font:750 17px/1.25 var(--font-sans); letter-spacing:.045em; text-transform:uppercase; }
.rs-example-name { margin:0; color:var(--ink); font:600 28px/1.2 var(--font-sans); letter-spacing:-.02em; text-wrap:balance; }
.rs-example-context { margin:8px 0 0; color:var(--ink-soft); font:14px/1.5 var(--font-sans); text-wrap:pretty; }
.rs-finding-text { display:contents; }
.rs-finding-text .rs-finding-h { font-size:clamp(26px,2.1vw,32px); line-height:1.15; font-weight:700; letter-spacing:-.025em; margin-bottom:14px; max-width:28ch; text-wrap:pretty; }
.rs-finding { display:grid; grid-template-columns:minmax(0,1fr) auto; padding-top:28px; padding-bottom:26px; gap:8px 24px; }
.rs-open { grid-column:2; grid-row:1; margin-top:2px; align-self:start; }
.rs-evidence-compare { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:0; border-top:1px solid var(--rule); padding-top:20px; }
.rs-evidence-column + .rs-evidence-column { padding-left:24px; border-left:1px solid var(--rule); }
.rs-evidence-column h4 { display:flex; align-items:center; gap:9px; margin:0 0 12px; color:var(--ink); font:600 16px/1.3 var(--font-sans); }
.rs-evidence-rate { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 10px; margin:0 0 6px; color:var(--ink); }
.rs-evidence-rate strong { font:600 36px/1 var(--font-sans); letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.rs-evidence-rate > span { font:14px/1.4 var(--font-sans); }
.rs-evidence-base { margin:0; color:var(--muted); font:13px/1.4 var(--font-sans); }
.rs-evidence-direction { display:flex; align-items:baseline; gap:7px; margin:14px 0 0; color:var(--ink); font:500 14px/1.4 var(--font-sans); }
.rs-evidence-direction > span { font-size:20px; }
.rs-evidence-points { grid-column:1 / -1; display:grid; gap:13px; list-style:none; margin:4px 0 0; padding:0; max-width:76ch; }
.rs-evidence-points li { position:relative; padding-left:18px; font:15px/1.5 var(--font-sans); color:var(--ink-soft); }
.rs-evidence-points li::before { content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; background:var(--gold); border-radius:50%; }
.rs-evidence-points strong { color:var(--ink); font-weight:650; margin-right:8px; }

/* Homepage polish retained from the first preview. */
.steam-copy h1 { max-width:790px; text-wrap:balance; }
.steam-copy > .steam-subhead { max-width:660px; }
.hero-search .hp-search-input > button[data-search-go] { background:var(--gold); color:var(--night); border-color:var(--gold); font-weight:650; }
.hero-search .hp-search-input > button[data-search-go]:hover { background:var(--gold-soft); }
.hero-search > label { font-size:15px; }
.hero-search .hero-use-cases { margin:12px 0 0; color:var(--bone-soft); font-size:14px; line-height:1.5; }
.steam-points { margin-left:0; }
.hp-panel { box-shadow:none; }
.hp-switch button,.hp-switch button + button { grid-template-columns:120px minmax(0,1fr); gap:20px; padding:18px 24px; }
.hp-switch-art { max-width:120px; }
.hp-switch-art img { box-shadow:none; }
.rs-band-head { margin-bottom:28px; }

/* Atlas inspection, charts and review text. */
.atlas-page .comparison-inspector { padding:22px; }
.atlas-page .theme-detail { gap:16px; }
.atlas-page .td-head h3 { font-size:28px; line-height:1.12; text-wrap:balance; }
.atlas-page .td-head > p { line-height:1.55; }
.theme-definition { margin-top:10px; font-size:14px; line-height:1.55; }
.theme-definition summary,.theme-quotes summary { cursor:pointer; font-weight:600; text-underline-offset:4px; }
.theme-definition summary:hover,.theme-quotes summary:hover { text-decoration:underline; }
.theme-definition p { margin:10px 0 0; }
.theme-quotes { grid-column:1 / -1; border-top:1px solid var(--rule); padding-top:16px; }
.theme-quotes > summary { font-size:15px; }
.theme-quotes .td-quotes { margin-top:14px; }
.theme-quotes:not([open]) .td-quotes { display:none; }
.atlas-page .theme-metric { border-radius:5px; box-shadow:none; }
.atlas-single .theme-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.atlas-single .theme-metric:nth-child(2) { grid-column:1 / -1; grid-row:2; }
.atlas-single .theme-metric.is-wide { grid-column:2; grid-row:1; }
.atlas-single .theme-metric .is-lang { font-size:25px; overflow-wrap:anywhere; }
.atlas-single .theme-metric { padding:12px; }
.atlas-page .td-chart { border-radius:5px; }
.atlas-page .theme-quote { border-radius:4px; }
.atlas-page .grid-line { opacity:.55; }
.atlas-page .landscape-point.selected .point-core { stroke:var(--ink); stroke-width:2; }
.atlas-page .landscape-label.selected { font-weight:700; }
.atlas-page .td-chart path[fill^="url"] { opacity:.6; }
.review > p,.review-text > p,.review-translation > p { white-space:pre-line; }

@media (min-width:701px) {
 .atlas-page .report-cover { padding-top:30px; padding-bottom:30px; min-height:0; }
 .atlas-page .report-nav button { padding-top:16px; padding-bottom:14px; }
 .atlas-page .filter-panel { margin:16px 0 12px; padding:14px 18px; gap:18px; }
 .atlas-page .filter-bar select { min-height:40px; }
 .atlas-page .scope-line { padding-bottom:16px; }
 .atlas-page .scope-line .scope-hint { padding:4px 12px 4px 4px; font-size:13px; background:transparent; border-color:var(--rule); }
 .atlas-page .hint-mark { width:22px; height:22px; font-size:12px; }
}
@media (max-width:1100px) and (min-width:801px) {
 .atlas-page .report-cover.is-single .cover-art img { width:250px; }
 .atlas-page .report-cover.is-single .cover-copy h1 { font-size:38px; }
}
@media (max-width:1000px) {
 .collection-sheet { grid-template-columns:minmax(0,1fr); }
 .collection-included { border-left:0; border-top:1px solid var(--rule); }
 .collection-included ul { grid-template-columns:1fr 1fr; margin:16px 0; }
}
@media (max-width:900px) {
 .atlas-analysis-scope { align-items:flex-start; flex-direction:column; gap:18px; }
 .analysis-scope-stats { gap:30px; }
}
@media (max-width:800px) { .atlas-page .report-cover.is-single .cover-copy h1 { font-size:36px; } }
@media (max-width:700px) {
 .atlas-analysis-scope { padding:20px 16px; margin:16px 0 10px; }
 .analysis-scope-heading h2 { font-size:21px; }
 .analysis-scope-stats { width:100%; justify-content:space-between; gap:12px; }
 .atlas-page .analysis-scope-stats .cover-figure + .cover-figure { padding-left:12px; }
 .analysis-scope-stats b { font-size:23px; }
 .analysis-scope-stats span { font-size:12px; }
 .hp-switch button,.hp-switch button + button { display:flex; padding:14px; gap:10px; }
 .hp-switch-art { max-width:110px; }
 .atlas-page .comparison-inspector { padding:18px; }
 .atlas-page .td-head h3 { font-size:26px; }
}
@media (max-width:550px) {
 .collection-comparison,.collection-included { padding:22px 18px; }
 .collection-sheet-heading h2 { font-size:21px; }
 .collection-populations { grid-template-columns:1fr; gap:22px; }
 .collection-population { padding:0; }
 .collection-population + .collection-population { padding:22px 0 0; border-left:0; border-top:1px solid var(--rule); }
 .collection-count strong { font-size:38px; }
 .collection-included ul { grid-template-columns:1fr; }
 .collection-notes { grid-template-columns:1fr; gap:18px; padding:18px; }
}
@media (max-width:380px) {
 .atlas-single .theme-metrics { grid-template-columns:1fr; }
 .atlas-single .theme-metric:nth-child(2),.atlas-single .theme-metric.is-wide { grid-column:auto; grid-row:auto; }
}
@container (max-width:620px) {
 .rs-finding { grid-template-columns:minmax(0,1fr); gap:14px; }
 .rs-open { grid-column:1; grid-row:3; justify-self:start; }
 .rs-example-intro { grid-template-columns:100px minmax(0,1fr); gap:14px; padding:18px 16px; align-items:start; }
 .rs-example-name { font-size:22px; }
 .rs-example-context { grid-column:1 / -1; }
 .rs-example-intro > div { display:contents; }
 .rs-example-art { grid-column:1; grid-row:1 / 3; }
 .rs-example-label,.rs-example-name { grid-column:2; }
 .rs-example-label { align-self:end; margin:0; font-size:15px; line-height:1.3; }
 .rs-finding-text .rs-finding-h { font-size:26px; }
 .rs-evidence-compare { gap:16px; }
 .rs-evidence-column + .rs-evidence-column { padding-left:16px; }
 .rs-evidence-rate strong { font-size:32px; }
 .rs-evidence-rate { flex-direction:column; align-items:flex-start; gap:7px; }
 .rs-evidence-rate > span { min-height:2.8em; }
 .rs-evidence-base { min-height:2.8em; }
 .rs-evidence-column h4 { font-size:14px; min-height:2.6em; align-items:baseline; }
 .rs-evidence-direction { font-size:13px; }
 .rs-evidence-points strong { display:block; margin-bottom:3px; }
}

/* ── Atlas 1.6: the Themes table and a roomier theme detail ─────────────────────────────────────── */

/* How to pin, in a line, where the Compare box was. */
.tt-howto{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:4px 0 22px;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--ink-soft)}
.tt-howto>svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tt-howto p{flex:1 1 360px;margin:0;font:14.5px/1.5 var(--font-sans)}
.tt-howto p b{color:var(--ink)}
.tt-howto label{display:flex;align-items:center;gap:10px;color:var(--muted);font:14px var(--font-sans);white-space:nowrap}
.tt-howto select{min-width:200px}

.tt-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;color:var(--muted);font:13px var(--font-sans)}
.tt-legend span{display:inline-flex;align-items:center;gap:7px}
.tt-legend i{width:10px;height:10px;border-radius:2px;background:var(--grp)}
.tt-legend .is-uncertified i{background:none;border:1.5px dashed var(--muted)}
.tt-legend span,.tt-row{--grp:var(--praise)}
.tt-legend .grp-complaint,.tt-row.grp-complaint{--grp:var(--complaint)}
.tt-legend .grp-suggestion,.tt-row.grp-suggestion{--grp:var(--suggestion)}
.tt-legend .grp-context,.tt-row.grp-context{--grp:var(--context)}

/* One grid for the head and every row: pin, theme, share (bar, %, count), recommend (strip, %). */
.theme-table{--hair:#e4dfd3;font-family:var(--font-sans)}
.tt-head,.tt-row{display:grid;grid-template-columns:40px minmax(140px,190px) minmax(0,1fr) minmax(200px,250px);column-gap:16px;align-items:center}
.tt-hshare,.tt-share{display:grid;grid-template-columns:minmax(0,1fr) 58px 64px;align-items:center}
.tt-hrec,.tt-rec{display:grid;grid-template-columns:minmax(0,1fr) 58px;column-gap:10px;align-items:center}
.tt-head{align-items:end;padding-bottom:9px;border-bottom:1px solid var(--ink)}
.tt-h,.tt-hn{color:var(--muted);font-size:12.5px;line-height:16px}
.tt-hn{grid-column:3;grid-row:2;text-align:right}
.tt-ht{grid-column:1/-1;margin-bottom:8px;color:var(--ink);font-size:13px;font-weight:600}
.tt-ticks{position:relative;grid-row:2;height:16px;color:var(--muted);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
.tt-ticks>span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}
.tt-ticks>span:first-child{transform:none}
.tt-base-label{position:absolute;bottom:0;display:flex;align-items:flex-end;height:26px;padding-left:6px;border-left:1.5px solid rgba(21,22,26,.55);color:var(--ink);font-style:normal;white-space:nowrap}
.tt-base-label.is-left{transform:translateX(-100%);padding:0 6px 0 0;border-left:0;border-right:1.5px solid rgba(21,22,26,.55)}

.tt-row{min-height:46px;border-bottom:1px solid var(--hair)}
.tt-row:hover{background:#efebe1}
.tt-row.is-selected{background:#ebe5d6}
.tt-row.is-pinned{background:color-mix(in srgb,var(--pin) 9%,#f7f5ef)}
.tt-pin{display:grid;place-items:center}
.atlas-page .theme-table .pin-toggle{width:30px;height:30px;border:1.5px solid #bfb9aa;color:var(--ink-soft);background:#fbfaf6}
.atlas-page .theme-table .tt-row:hover .pin-toggle:not(.is-pinned){border-color:var(--ink);color:var(--ink)}
.atlas-page .theme-table .pin-toggle.is-pinned{border-color:var(--pin);background:var(--pin)}
.tt-name{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 0;border:0;background:none;color:var(--ink);font:15px/1.25 var(--font-sans);text-align:left;cursor:pointer}
.tt-name:hover>span:first-of-type{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.tt-row.is-selected .tt-name{font-weight:650}
.tt-share,.tt-rec{height:46px;padding:0;border:0;background:none;color:var(--ink);text-align:right;cursor:pointer}
.tt-track{position:relative;height:100%;background:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px calc(100% / var(--steps)))}
.tt-bar{position:absolute;left:0;top:50%;height:12px;margin-top:-6px;border-radius:0 3px 3px 0;background:var(--grp)}
.tt-row.is-uncertified .tt-bar{background:color-mix(in srgb,var(--grp) 18%,transparent);border:1.5px dashed var(--grp);border-left:0}
.tt-share b,.tt-rec b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.tt-n{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.tt-strip{position:relative;height:100%}
.tt-strip::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#d6d0c1}
.tt-strip::after{content:"";position:absolute;top:0;bottom:0;left:var(--base);width:1.5px;background:rgba(21,22,26,.4)}
.tt-stem{position:absolute;top:50%;height:3px;margin-top:-1.5px;border-radius:2px}
.tt-stem.is-up{background:color-mix(in srgb,var(--praise) 45%,transparent)}
.tt-stem.is-down{background:color-mix(in srgb,var(--complaint) 45%,transparent)}
.tt-dot{position:absolute;top:50%;z-index:1;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px #fbfaf6}
.tt-phone-rec{display:none}
.tt-share:hover b,.tt-rec:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.tt-share:hover .tt-bar{filter:brightness(1.12)}
.tt-rec:hover .tt-dot{transform:scale(1.2)}
.tt-share:focus-visible,.tt-rec:focus-visible,.tt-name:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* Every review, accounted for. */
.tt-cover{margin-top:30px;padding-top:24px;border-top:1px solid var(--ink)}
.tt-cover h3{margin:0 0 4px;color:var(--ink);font:600 16px var(--font-sans)}
.tt-cover>p{margin:0 0 14px;color:var(--muted);font:13.5px var(--font-sans)}
.tt-stack{display:flex;gap:2px;height:14px}
.tt-seg{min-width:3px;padding:0;border:0;cursor:pointer}
.tt-seg:first-child{border-radius:3px 0 0 3px}
.tt-seg:last-child{border-radius:0 3px 3px 0}
.tt-seg:hover{filter:brightness(1.15)}
.tt-seg.is-themed,.tt-keys .is-themed>i{background:#2b2d33}
.tt-seg.is-up,.tt-keys .is-up>i{background:#9aa3b3}
.tt-seg.is-down,.tt-keys .is-down>i{background:var(--complaint)}
.tt-seg.is-under,.tt-keys .is-under>i{background:repeating-linear-gradient(135deg,#c2bcad 0 2px,#e9e4d8 2px 5px)}
.tt-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 24px;margin-top:14px}
.tt-keys>div{position:relative;padding-left:20px;color:var(--muted);font:13px/1.45 var(--font-sans)}
.tt-keys>div>i{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:2px}
.atlas-page .tt-key{display:block;padding:0;border:0;background:none;color:var(--ink);font:15px var(--font-sans);text-align:left;cursor:pointer}
.tt-key b{font-weight:600;font-variant-numeric:tabular-nums}
.tt-key span{color:var(--muted)}
.tt-key:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.tt-bygroup{display:block;margin-top:4px}
.atlas-page .tt-group-link{padding:0;border:0;background:none;color:var(--ink-soft);font:13px var(--font-sans);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}

/* The theme detail: a wider column, open sections divided by rules instead of stacked cards. */
@media (min-width:1151px){.atlas-single .comparison-workspace.is-themes{grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}}
@media (min-width:1500px){.atlas-single .comparison-workspace.is-themes{grid-template-columns:minmax(0,1fr) 420px}}
.atlas-page.atlas-single .comparison-inspector{padding:26px 26px 22px}
.atlas-single .theme-detail{gap:0}
.atlas-single .td-head{padding-bottom:22px}
.atlas-single .td-chips{align-items:center;margin-bottom:14px}
.atlas-single .td-head h3{margin-bottom:10px}
.atlas-single .theme-metrics{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--rule)}
.atlas-single .theme-metric,.atlas-single .theme-metric:hover{padding:18px 0 20px;border:0;border-radius:0;background:none;box-shadow:none}
.atlas-single .theme-metric.is-wide{grid-column:2;grid-row:1;padding-left:20px;border-left:1px solid var(--rule)}
.atlas-single .theme-metric:nth-child(2){grid-column:1/-1;grid-row:2;border-top:1px solid var(--rule)}
.atlas-single .theme-metric .is-lang{font-size:26px;overflow-wrap:normal}
.atlas-single .theme-detail>.td-chart,.atlas-single .theme-detail>.td-langs,.atlas-single .theme-detail>.theme-quotes,.atlas-single .theme-detail>.td-actions{margin:0;padding:20px 0;border:0;border-top:1px solid var(--rule);border-radius:0;background:none}
.atlas-single .td-chart-head{margin-bottom:8px}
.atlas-single .theme-detail>.td-actions{gap:12px}
.atlas-single .theme-detail>.chart-footnote{margin-top:4px}
.atlas-page .td-chips .pin-toggle.is-labelled{height:34px;border:1.5px solid var(--ink);font-size:14px}
.atlas-page .td-chips .pin-toggle.is-labelled:not(.is-pinned):hover{background:var(--ink);color:#fff}

/* A phone: pin and theme on one line with the recommend rate, the bar and its figures under them. */
@media (max-width:700px){
 .tt-howto label{white-space:normal;flex-wrap:wrap}
 .tt-head{display:none}
 .tt-row{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"pin name" "pin share" "pin rec";row-gap:0;padding:8px 0}
 .tt-pin{grid-area:pin;align-self:start;padding-top:6px}
 .tt-name{grid-area:name;padding:6px 0 2px}
 .tt-share{grid-area:share;height:30px;grid-template-columns:minmax(0,1fr) 54px 58px}
 .tt-rec{grid-area:rec;display:flex;align-items:baseline;gap:5px;height:auto;padding:0 0 4px;text-align:left}
 .tt-rec .tt-strip{display:none}
 .tt-rec b{font-size:13.5px;font-weight:600}
 .tt-phone-rec{display:inline;color:var(--muted);font-size:12.5px}
 .atlas-single .theme-metric.is-wide{padding-left:14px}
}
.tt-ticks>span.is-end{transform:translateX(-100%)}
.tt-legend .grp-praise,.tt-row.grp-praise{--grp:#3f86c6}
.tt-legend .grp-complaint,.tt-row.grp-complaint{--grp:#a34c25}
.atlas-page .theme-table .pin-toggle.is-pinned{color:#fff}
.atlas-page .theme-table .pin-toggle.is-pinned.pin-1{color:var(--ink)}
.tt-bygroup{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:6px}
.tt-bygroup>span{color:var(--muted)}
/* 380px and under: the detail's figures in one column again, after the two-column rules above (Codex, #93). */
@media (max-width:380px){
 .atlas-single .theme-metrics{grid-template-columns:minmax(0,1fr)}
 .atlas-single .theme-metric,.atlas-single .theme-metric.is-wide,.atlas-single .theme-metric:nth-child(2){grid-column:auto;grid-row:auto;padding-left:0;border-left:0}
 .atlas-single .theme-metric+.theme-metric{border-top:1px solid var(--rule)}
}
/* The benchmark over the recommend column opens the recommending reviews (Codex, #93). */
.atlas-page button.tt-base-label{margin:0;background:none;border-style:solid;border-color:rgba(21,22,26,.55);border-width:0 0 0 1.5px;font:12px/16px var(--font-sans);cursor:pointer}
.atlas-page button.tt-base-label.is-left{border-width:0 1.5px 0 0}
.atlas-page button.tt-base-label:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.atlas-page button.tt-base-label:focus-visible{outline:2px solid var(--gold);outline-offset:2px}