/* Compare uses the approved panel width, type, spacing and borders. */
.cmp-panel { display: grid; gap: 14px; min-width: 0; }
.cmp-head { display: flex; align-items: center; }
.cmp-cohorts { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.cmp-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; max-width: calc((100% - 32px) / 2); min-height: 44px; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--cmp-color) 30%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--cmp-color) 7%, var(--bg)); color: var(--cmp-color); font: inherit; font-size: .88em; cursor: pointer; white-space: nowrap; }
.cmp-chip-text { min-width:0; overflow: hidden; text-overflow: ellipsis; }
.cmp-tag { width:8px; height:8px; flex:none; border-radius:50%; background:var(--cmp-color); }
.cmp-none { border-style: dashed; background: transparent; color: var(--muted); }
.cmp-vs { color: var(--muted); font-size: 12px; flex: none; }
.cmp-section { display: grid; gap: 4px; min-width: 0; }
.cmp-gap-list { display: grid; }
.cmp-gap-row, .cmp-drift-row { display: grid; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--fg); font: inherit; font-size: .92em; text-align: left; cursor: pointer; }
.cmp-gap-row { grid-template-columns: minmax(0,1fr) 68px 40px; }
.cmp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-num { font: 12px/1.4 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.cmp-change { color: var(--cmp-color); }
.cmp-gap-track { position: relative; height: 5px; border-radius: 3px; background: var(--chip); }
.cmp-gap-track::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--muted); opacity: .6; }
.cmp-gap-fill { position: absolute; top: 0; height: 5px; border-radius: 3px; background: var(--cmp-color); }
.cmp-more { min-width: 44px; min-height: 44px; justify-self: start; border: 0; padding: 0; background: none; color: var(--accent); font: inherit; font-size: .88em; cursor: pointer; }
.cmp-note { font-size: 12px; line-height: 1.5; color: var(--muted); }
.cmp-row-detail { overflow-wrap:anywhere; display: grid; padding: 12px; background: var(--card); border-bottom: 1px solid var(--border); gap: 4px; }
.cmp-drift-row { grid-template-columns: minmax(0,1fr) 44px; }
.cmp-drift-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-drift-name i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cmp-lines { width: 100%; height: auto; display: block; overflow: visible; margin: 4px 0 8px; }
.cmp-lines text { font: 12px var(--text); }
.cmp-chart-axis { fill: var(--muted); }
.cmp-overlay { position: fixed; inset: 0; z-index: 20; background: #18171233; display: grid; place-items: center; padding: 20px; }
.cmp-editor { width: min(420px,100%); max-height: calc(100dvh - 40px); overflow: auto; display: grid; gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: 0 8px 40px #18171222; }
.cmp-editor h3 { font-size: 1.12em; }
.cmp-editor label { display: grid; gap: 4px; font-size: .88em; }
.cmp-editor select, .cmp-editor input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; }
.cmp-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-editor .d-btn { min-height: 44px; }
.cmp-warning { color: var(--oxblood); font-size: 12px; }
.d-compare .m-ticker { display: none; }
.m-zoom button.fit { font-size: 12px; }
.cmp-back { min-height: 44px; margin-bottom: -8px; }
.cmp-panel button:focus-visible, .cmp-panel input:focus-visible, .cmp-panel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cmp-panel button:hover .cmp-name { color: var(--accent); }
.m-nav [role=button] { cursor: pointer; }
.d-tabs [role=button] { position: relative; }
.d-tabs [role=button]::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.cmp-panel .d-back-topic { min-height: 44px; }
@media(max-width:699px) { .cmp-overlay { padding: 12px; align-items: end; } .cmp-editor { width: 100%; max-height: calc(100dvh - 24px); } }

/* Claim controls and paper previews share the approved tokens. */
.cl-topic { display: grid; gap: 18px; min-width: 0; }
.cl-topic-head { display: grid; gap: 6px; }
.cl-topic-head .m-sub { font-size: 14px; }
.cl-chart { padding: 12px 14px 6px; gap: 8px; }
.cl-chart .lbl { font-size: 14px; }
.cl-claims { display: grid; min-width: 0; gap: 6px; }
.cl-claim-heading { padding: 0 0 2px; }
.cl-years { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px 0; }
.cl-year, .cl-order, .cl-reshuffle, .cl-more, .cl-back, .cl-topic-link { min-height: 44px; min-width: 44px; font: inherit; font-size: 14px; cursor: pointer; }
.cl-year { flex: none; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 999px; padding: 0 6px; }
.cl-year[aria-pressed=true] { color: var(--accent); background: var(--accent-soft); border-color: var(--border); }
.cl-order-row { display: flex; align-items: center; gap: 6px; }
.cl-select { position: relative; display: inline-flex; }
.cl-select::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cl-order-row .cl-order { width: auto; margin: 0; appearance: none; padding: 0 36px 0 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg); background: var(--card); }
.cl-reshuffle { padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--accent); font-size: 24px; }
.cl-list { display: grid; }
.cl-row { border-bottom: 1px solid var(--border); min-width: 0; }
.cl-claim { display: grid; width: 100%; gap: 7px; min-height: 44px; text-align: left; font: inherit; font-size: 15px; color: var(--fg); padding: 14px 0 10px; background: transparent; border: 0; cursor: pointer; }
.cl-row-meta { display: flex; justify-content: space-between; color: var(--muted); font: 12px/1.5 var(--mono); }
.cl-row-meta > span:last-child { font: 18px/18px var(--text); color: var(--accent); }
.cl-paper-preview { border-left: 2px solid var(--accent); margin: 0 0 14px; padding: 8px 12px 0; background: var(--accent-soft); display: grid; gap: 5px; }
.cl-paper-title { font-size: 15px; line-height: 1.35; font-weight: 600; }
.cl-meta, .cl-authors { font-size: 12px; line-height: 1.5; color: var(--muted); }
.cl-meta { font-family: var(--mono); }
.cl-open { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-self: start; font-size: 14px; text-decoration: none; }
.cl-more, .cl-back { justify-self: start; border: 0; background: transparent; padding: 0; color: var(--accent); }
.cl-topic :focus-visible, .cl-map-preview :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-map-active .m-ticker { display: none; }
.m-homehead + .m-map .cl-map-preview { bottom: 10px; }
.m-sheet.cl-map-preview { padding: 10px 14px 4px; gap: 8px; touch-action: pan-y; max-height: 52%; overflow-y: auto; }
.cl-sheet-top { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.cl-sheet-topic { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
.cl-sheet-close, .cl-step { min-width: 44px; height: 44px; padding: 0; background: transparent; color: var(--accent); border: 0; font: 26px var(--text); cursor: pointer; }
.m-sheet .cl-map-text { font-size: 15px; line-height: 1.45; }
.cl-map-preview .cl-paper-preview { margin: 0; background: transparent; border: 0; border-top: 1px solid var(--border); padding: 10px 0 0; }
.cl-map-preview .cl-paper-preview .cl-paper-title { font-size: 15px; }
.cl-map-preview .cl-paper-preview .cl-authors { font-size: 12px; }
.cl-steps { display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid var(--border); }
.cl-step:disabled { color: var(--muted); opacity: .35; cursor: default; }
.desk .m-sheet.cl-map-preview { display: grid !important; width: 344px; right: auto; bottom: auto; max-height: calc(100% - 84px); }
.desk .cl-topic h2 { font-size: 1.35em; }
.cl-also { display: flex; gap: 4px 8px; align-items: center; flex-wrap: wrap; }
.cl-topic-link { border: 1px solid var(--border); background: var(--chip); color: var(--accent); border-radius: 999px; padding: 6px 12px; }
.cl-topic .d-share, .cl-paper-page .d-share, .d-circles { min-height: 44px; }


.cmp-a { --cmp-color:var(--accent); }
.cmp-b { --cmp-color:#a45e37; }
.cmp-panel section, .cl-topic section { margin:0; }
.cmp-panel p, .cl-topic p, .cl-map-preview p { margin:0; }
.cmp-panel label { font-weight:400; margin:0; }
.cmp-panel h2, .cl-topic h2 { line-height:1.15; }
.cmp-editor h3 { margin:0; }
.cmp-editor .d-actions { display:flex; flex-wrap:wrap; gap:8px; }
.cmp-editor .d-btn { border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--fg); font:13.6px var(--text); padding:0 14px; cursor:pointer; }
.cmp-editor .d-btn.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
.cl-topic .cl-chart { margin:0; }
.cl-topic .showcase-meta { font-size:12.8px; }
.cl-topic .cl-chart .trend-label { font-size:14px; }
.cl-topic .cl-chart svg { height:auto; }
.cl-topic .cl-claim-heading h4 { margin:0!important; }
.cl-map-preview { margin:0; position:absolute; z-index:5; left:8px; right:8px; bottom:10px; display:grid; padding:10px 14px 4px; gap:8px; border:1px solid var(--border); border-radius:10px; background:var(--card); box-shadow:0 6px 26px #18171218; touch-action:pan-y; max-height:52%; overflow-y:auto; }
.cl-map-preview[hidden] { display:none; }
.cl-map-preview .cl-map-text { font-size:15px; line-height:1.45; }
.cl-map-active + .map-ticker, .compare-active .map-ticker { display:none; }
@media(min-width:700px) { .showcase-map .cl-map-preview { width:344px; right:auto; bottom:auto; max-height:calc(100% - 84px); } }

#instance-view.cl-topic { gap:18px; }
.instance-app .cl-chart { gap:8px; }
.cl-topic-head { position:relative; }
.topic-share { position:absolute; right:0; top:-8px; }
/* Match the approved renderer's form metrics and native fields explicitly. */
.cmp-editor { margin:0 0 16px; }
.cmp-editor label { line-height:1.5; }
.cmp-editor select { appearance:auto; -webkit-appearance:auto; line-height:normal; }
.cmp-editor select:focus, .cmp-editor input:focus { box-shadow:none; }
.cmp-editor .d-btn { display:inline-flex; align-items:center; line-height:1.5; }

.instance-app .cl-map-preview { margin:0; }

/* Flat, claim-weighted cells. A separate row keeps controls off the cells. */
.treemap-view { position:absolute; inset:70px 10px 54px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.treemap-chart { display:block; width:100%; flex:1 1 0; min-height:0; overflow:hidden; }
.treemap-cell { cursor:pointer; outline:none; }
.treemap-cell rect { stroke:var(--bg); stroke-width:2px; }
.treemap-cell:hover rect, .treemap-cell:focus rect, .treemap-cell.selected rect { stroke:var(--fg); stroke-width:3px; }
.treemap-cell text { font-family:var(--text); font-weight:600; pointer-events:none; }
.treemap-note { flex:none; margin:0; font:12px/1.5 var(--text); color:var(--muted); }
.phone-compare-map { position:relative; height:380px; }
.phone-compare-map .showcase-map { height:100%; }
.phone-compare-map .map-ticker { display:none; }
.phone-compare-map .treemap-view { bottom:8px; }
.panel-resizer::before { content:""; position:absolute; inset:0 -14px; }
/* Deferred controls follow the approved v3 geometry and light palette. */
.instance-app { --panel-line:#e6e1d6; --search-line:#d9d3c6; --control-line:#ddd7ca; --layout-line:#e2ddd1; --layout-ink:#1d1d1b; --tab-ink:#4a4a45; --layout-thumb:#f6f3ec; }
/* The visitor's theme choice (html[data-theme]) overrides the system scheme; :where() adds no specificity. */
@media(prefers-color-scheme:dark) { :where(:root:not([data-theme=light])) .instance-app { --panel-line:var(--border); --search-line:var(--border); --control-line:var(--border); --layout-line:var(--border); --layout-ink:var(--fg); --tab-ink:var(--muted); --layout-thumb:var(--chip); } }
:where(:root[data-theme=dark]) .instance-app { --panel-line:var(--border); --search-line:var(--border); --control-line:var(--border); --layout-line:var(--border); --layout-ink:var(--fg); --tab-ink:var(--muted); --layout-thumb:var(--chip); }
.layout-tiles :focus-visible, .th-cards :focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.settings-sheet { position:fixed; inset:auto 0 calc(54px + env(safe-area-inset-bottom)); margin:0; width:100%; max-width:none; max-height:72dvh; padding:6px 16px 14px; border:0; border-radius:18px 18px 0 0; background:var(--bg); color:var(--fg); overscroll-behavior:contain; box-shadow:0 -8px 28px #0003; font:14px/1.55 var(--text); }
@media(prefers-color-scheme:light) { :where(:root:not([data-theme=dark])) :is(.settings-sheet, .settings-pop) { --accent:#2b5f75; --accent-soft:#eaf2f5; --fg:#1d1d1b; --sheet-grab:#cfc9ba; --sheet-dash:#c9c3b5; } }
:where(:root[data-theme=light]) :is(.settings-sheet, .settings-pop) { --accent:#2b5f75; --accent-soft:#eaf2f5; --fg:#1d1d1b; --sheet-grab:#cfc9ba; --sheet-dash:#c9c3b5; }
.settings-sheet::backdrop { background:#0003; }
/* The full sheet (OT-1013) is taller than 72dvh on most phones and scrolls: the handle stays at its top. */
.settings-sheet-head { height:5px; touch-action:none; position:sticky; top:-6px; z-index:3; margin:-6px -16px 0; padding:6px 16px 0; background:var(--bg); }
.settings-sheet-head::before { content:""; position:absolute; top:6px; left:calc(50% - 18px); width:36px; height:4px; background:var(--sheet-grab,var(--border)); border-radius:2px; }
.settings-sheet-head::after { content:""; position:absolute; inset:0 0 -16px; }
:is(#settings-content, .settings-pop) section { margin:0; }
:is(#settings-content, .settings-pop) h4 { font:600 12px/1.2 var(--text); color:var(--muted); margin:14px 4px 6px; text-transform:none; letter-spacing:normal; }
.layout-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.layout-tiles button { min-width:44px; min-height:44px; border:1.5px solid var(--layout-line); background:var(--card); border-radius:12px; padding:7px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; font:13px/1.55 var(--text); color:var(--tab-ink); cursor:pointer; }
.layout-tiles svg { width:100%; height:auto; border-radius:6px; background:var(--layout-thumb); }
.layout-tiles [aria-checked=true] { border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:0 0 0 3px var(--accent-soft); }
/* OT-1011 Theme cards (mock.py theme_choice, CSS_06A .cc-cards/.th-*): the layout tiles' card family. */
.th-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.th-cards button { display:flex; flex-direction:column; align-items:stretch; gap:2px; min-height:44px; padding:7px 6px 9px; border:1px solid var(--layout-line); border-radius:12px; background:var(--card); color:var(--tab-ink); font:13px var(--text); text-align:center; cursor:pointer; }
.th-cards [aria-checked=true] { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); color:var(--accent); }
.th-cards b { margin-top:6px; font-size:15px; font-weight:400; line-height:20px; }
.th-cards [aria-checked=true] b { font-weight:600; }
.th-prev { display:flex; flex-direction:column; justify-content:center; gap:5px; height:44px; padding:0 12px; border:1px solid var(--layout-line); border-radius:8px; }
.th-prev i { display:block; height:6px; border-radius:3px; }
.th-prev i:nth-child(1) { width:70%; } .th-prev i:nth-child(2) { width:90%; } .th-prev i:nth-child(3) { width:50%; }
.th-light { background:#f7f4ec; } .th-light i { background:#cfc8b8; }
.th-dark { background:#1f2326; } .th-dark i { background:#5b6166; }
.th-system { background:linear-gradient(135deg,#f7f4ec 0 50%,#1f2326 50% 100%); } .th-system i { background:#8d8f8c; }
html[data-telegram-theme] .s-theme { display:none; }
html[data-telegram-theme] .settings-pop { --fg:inherit; --accent:inherit; --accent-soft:inherit; }
/* Desktop ⋯ popover (frame 07c, mock CSS_07B): the sheet's sections, left of ⋯ and top-aligned with it. */
.settings-pop { position:absolute; right:66px; top:12px; z-index:30; width:360px; max-width:calc(100% - 82px); max-height:calc(100% - 24px); overflow:auto; box-sizing:border-box; padding:4px 16px 14px; border:1px solid var(--border); border-radius:16px; background:var(--bg); color:var(--fg); box-shadow:0 10px 30px #0002; font:14px/1.55 var(--text); }
@media(min-width:700px) { .treemap-view { top:70px; } }

/* A single annual snapshot has paper shares, without temporal controls. */
.instance-app.one-year .map-ticker { display:none; }
.instance-app.one-year .topic-list-row { grid-template-columns:12px minmax(0,1fr); }
.instance-app.one-year .topic-paper-share { grid-column:2; }
.instance-app.one-year .topic-share-card { display:flex; flex-direction:column; gap:8px; }

/* Analysis switcher list (OT-926): approved mock A, desktop frame a and phone frame p. */
.switcher-list { --sw-run-ink:#8a5a00; --sw-run-bg:#fbf0d9; position:absolute; z-index:30; left:-4px; top:calc(100% + 7px); width:440px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 76px); margin:0; padding:10px; border:1px solid var(--border); border-radius:16px; background:var(--card); color:var(--fg); box-shadow:0 18px 50px #00000029; font:16px/1.4 var(--text); }
@media(prefers-color-scheme:dark) { :where(:root:not([data-theme=light])) .switcher-list { --sw-run-ink:var(--ochre); --sw-run-bg:color-mix(in srgb, var(--ochre) 16%, var(--card)); } }
:where(:root[data-theme=dark]) .switcher-list { --sw-run-ink:var(--ochre); --sw-run-bg:color-mix(in srgb, var(--ochre) 16%, var(--card)); }
html[data-telegram-theme=light] .switcher-list { --sw-run-ink:#8a5a00; --sw-run-bg:#fbf0d9; }
html[data-telegram-theme=dark] .switcher-list { --sw-run-ink:var(--ochre); --sw-run-bg:color-mix(in srgb, var(--ochre) 16%, var(--card)); }
.switcher-list[open] { display:flex; flex-direction:column; }
.sw-grab { display:none; }
.switcher-list .sw-search { position:relative; flex:none; display:flex; align-items:center; gap:8px; height:42px; margin:0 0 6px; padding:0 14px; border:1px solid var(--border); border-radius:21px; color:var(--muted); font:400 15px/1.4 var(--text); }
.sw-search::after { content:""; position:absolute; inset:-2px 0; }
.sw-search:focus-within { border-color:var(--accent); }
.sw-glass { flex:none; font-size:13px; }
.switcher-list .sw-search input { position:relative; z-index:1; flex:1; min-width:0; min-height:0; height:100%; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--fg); font:inherit; }
.switcher-list .sw-search input::placeholder { color:var(--muted); opacity:1; }
.switcher-list .sw-search input:focus-visible { outline:none; }
.sw-search input::-webkit-search-cancel-button { display:none; }
.sw-search kbd { margin-left:auto; padding:1px 5px; border:1px solid var(--border); border-radius:4px; font:11px var(--mono); }
.sw-list { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.sw-list section { margin:0; }
.switcher-list h3 { margin:12px 8px 6px; font:600 12px/1 var(--text); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.switcher-list .sw-row { display:flex; align-items:center; gap:12px; min-height:48px; padding:7px 8px; border-radius:10px; color:var(--fg); text-decoration:none; }
.switcher-list a.sw-row:hover { background:var(--chip); }
.switcher-list .sw-row[aria-current] { background:var(--accent-soft); }
.sw-row[aria-current] b { color:var(--accent); }
.sw-row.soon { opacity:.5; }
.sw-row[hidden], .sw-list section[hidden], .sw-status[hidden], .sw-empty[hidden] { display:none; }
.sw-text { display:block; min-width:0; }
.sw-text b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sw-meta { font:12px/1.4 var(--mono); color:var(--muted); }
.sw-short { display:none; }
.sw-check { margin-left:auto; color:var(--accent); font-weight:700; }
.sw-tag { margin-left:auto; padding:2px 8px; border-radius:10px; background:var(--chip); color:var(--muted); font:11px/1.4 var(--mono); white-space:nowrap; }
.sw-tag.run { color:var(--sw-run-ink); background:var(--sw-run-bg); }
.sw-status, .sw-empty { margin:0; padding:10px 8px; color:var(--muted); font-size:14px; }
.sw-retry { min-height:44px; padding:0 4px; border:0; background:none; color:var(--accent); font:inherit; cursor:pointer; }
.switcher-list .sw-all { display:flex; align-items:center; min-height:44px; padding:0 8px; color:var(--accent); font-size:14px; text-decoration:none; }
.switcher-list .sw-new { flex:none; display:flex; align-items:center; gap:10px; min-height:44px; margin-top:8px; padding:12px 10px; border-top:1px solid var(--border); color:var(--accent); font-weight:600; text-decoration:none; }
.sw-note { margin-left:auto; font:400 12px var(--mono); color:var(--muted); }
.switcher-list :focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media(max-width:699px) {
  .switcher-list { position:fixed; inset:96px 0 0; width:100%; max-width:none; max-height:none; height:auto; padding:10px 14px calc(14px + env(safe-area-inset-bottom)); border:0; border-radius:20px 20px 0 0; box-shadow:0 -10px 40px #0000002e; }
  .switcher-list::backdrop { background:#1414142e; }
  .sw-grab { display:block; position:relative; flex:none; width:40px; height:5px; margin:2px auto 10px; border-radius:3px; background:var(--sheet-grab,#d5d1c7); touch-action:none; }
  .sw-grab::after { content:""; position:absolute; inset:-12px -60px; }
  .sw-search kbd, .sw-long, .sw-tag.role, .sw-note { display:none; }
  .sw-short { display:inline; }
}
@media(max-width:699px) and (prefers-color-scheme:dark) { :where(:root:not([data-theme=light])) .sw-grab { background:var(--border); } }
@media(max-width:699px) { :where(:root[data-theme=dark]) .sw-grab { background:var(--border); } }
html[data-telegram-theme] .sw-grab { background:var(--border); }

/* OT-924 map tools: approved demo-features mock (mock.py CSS for frames 01a, 05a, 05b, 06a). */
/* ? in the map's bottom-right corner, above the ticker (OSN OT-1007), styled like the zoom circles. */
.map-help { position:absolute; right:10px; bottom:54px; z-index:6; width:44px; height:44px; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--card); color:var(--fg); font:600 18px/1 var(--text); cursor:pointer; }
.map-help[hidden] { display:none; }
.instance-app.one-year .map-help { bottom:10px; }
/* A short desktop map (below ~366 px, a window under ~440 px tall) would put ? on ALL: it moves one column
   left, still in the bottom-right corner. Treemap hides the zoom buttons, so ? keeps the column there. */
@media(min-width:700px) and (max-height:440px) { .showcase-map:not([data-layout=treemap]) .map-help { right:64px; } }
/* Desktop Treemap: the right-hand column (⋯, the camera, ?) keeps its own lane beside the cells. */
@media(min-width:700px) { .showcase-map[data-layout=treemap] .treemap-view { right:64px; } }
.map-toolbar { position:absolute; left:16px; top:12px; z-index:11; display:flex; align-items:center; gap:8px; font:14px var(--text); }
.map-toolbar[hidden] { display:none; }
.mt-controls { display:contents; }
/* Mock-sized 40 px buttons; ::after grows the hit area to 44 px like the switcher pill. */
.mt-round { position:relative; }
.mt-round::after { content:""; position:absolute; inset:-3px; }
.mt-round { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--control-line); border-radius:999px; background:var(--card); color:var(--fg); box-shadow:0 1px 4px #0002; font:600 16px var(--text); cursor:pointer; }
.m-cam[aria-busy=true] { cursor:progress; opacity:.6; }
.m-cam[aria-disabled=true] { cursor:not-allowed; opacity:.45; box-shadow:none; }
.map-save-error { position:absolute; z-index:12; max-width:260px; margin:0; padding:8px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--oxblood); box-shadow:0 4px 14px #0002; font:13px/1.4 var(--text); }
/* Phone camera: the last button of the + − ALL stack (mock .m-zoom .m-cam). */
.m-zoom .m-cam:not([hidden]) { display:grid; place-items:center; margin-top:8px; }
.m-zoom .m-cam svg { width:20px; height:20px; }
.showcase-map[data-layout=treemap] .m-zoom .m-cam { margin-top:0; }
/* Desktop camera (frame 07e, OT-1016): under ALL with the stack's own 6 px gap. */
#desktop-map .m-zoom .m-cam { margin-top:0; }
/* Short desktop windows (OT-1016 fix 1): the camera's bottom is 260 px under the map's top and the ticker
   covers the map's last 44 px, so below a 375 px window (map under 314 px) the camera would come within
   10 px of the ticker. It moves out of the column into the free top row, left of ⋯ with a 6 px gap
   (relative to .m-zoom, which starts 56 px lower). Treemap's column (⋯ and the camera) always fits. */
@media(min-width:700px) and (max-height:374px) { #desktop-map .showcase-map:not([data-layout=treemap]) .m-zoom .m-cam { position:absolute; top:-56px; right:50px; } }
.intro-back { position:absolute; inset:0; z-index:20; background:color-mix(in srgb, var(--bg) 45%, transparent); }
.intro-card { position:absolute; z-index:21; left:50%; top:50%; transform:translate(-50%,-50%); width:440px; max-width:calc(100% - 32px); max-height:calc(100% - 32px); display:flex; flex-direction:column; overflow:hidden; padding:22px 24px 18px; border:1px solid var(--border); border-radius:18px; background:var(--card); box-shadow:0 24px 70px rgba(0,0,0,.18); color:var(--fg); font-family:var(--text); }
.card-x { position:absolute; right:14px; top:14px; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--card); color:var(--fg); cursor:pointer; }
.card-x::after { content:""; position:absolute; inset:-4px; }
.intro-eye { margin:0 0 4px; font:11.5px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.intro-card h3 { margin:0 0 12px; font:700 21.6px/1.2 var(--text); letter-spacing:-.01em; }
/* In a map shorter than the card only the steps scroll; the header and the actions stay in view. */
.intro-card > :not(ol) { flex:none; }
.intro-card ol { display:grid; gap:12px; flex:0 1 auto; min-height:0; overflow-y:auto; margin:0; padding:0; list-style:none; }
.intro-card li { display:grid; grid-template-columns:28px 1fr; gap:8px; font-size:15px; line-height:1.45; }
.intro-card .n { padding-top:3px; font:12px/1.5 var(--mono); color:var(--accent); }
.intro-card .up { color:var(--moss); font-weight:600; }
.intro-card .down { color:var(--oxblood); font-weight:600; }
.intro-act { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:18px; }
.intro-go { min-height:44px; padding:0 20px; border:0; border-radius:999px; background:var(--accent); color:var(--card); font:600 15px var(--text); cursor:pointer; }
.intro-link { display:inline-flex; align-items:center; min-height:44px; padding:0 4px; color:var(--accent); font:600 14px var(--text); text-decoration:none; white-space:nowrap; }
.intro-card:focus { outline:none; }
.intro-card :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:699px) { .card-x { right:8px; top:8px; width:44px; height:44px; } .card-x::after { content:none; } }
.sheet-intro { margin-top:10px; border-top:1px solid var(--border); }
.sheet-intro button { display:flex; align-items:center; width:100%; min-height:44px; margin-top:4px; padding:0 4px; border:0; background:none; color:var(--accent); font:600 14px/1.5 var(--text); text-align:left; cursor:pointer; }

/* OT-924 tasks 2+3 (mock.py CSS, CSS_06A, CSS_07): desktop year row, Colour cards, the unclustered switch,
   Year slider, Sources chips and the Drift legend pill. */
.mt-seg { display:inline-flex; align-items:center; gap:2px; height:40px; box-sizing:border-box; padding:3px; border:1px solid var(--control-line); border-radius:999px; background:var(--card); box-shadow:0 1px 4px #0002; }
/* 32 px pills (mock) with a 44 px hit area. */
.mt-seg button::after { content:""; position:absolute; inset:-6px -1px; }
.mt-seg button { position:relative; flex:none; height:32px; padding:0 9px; border:0; border-radius:999px; background:transparent; color:var(--fg); font:14px var(--mono); white-space:nowrap; cursor:pointer; }
.mt-seg button.in { background:var(--accent-soft); color:var(--accent); }
.mt-seg button[aria-pressed=true] { background:var(--fg); color:var(--bg); }
.mt-seg button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.cc-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cc-cards button { display:flex; flex-direction:column; align-items:stretch; gap:2px; min-height:44px; padding:7px 6px 9px; border:1px solid var(--layout-line); border-radius:12px; background:var(--card); color:var(--tab-ink); font:13px var(--text); text-align:center; cursor:pointer; }
.cc-cards [aria-checked=true] { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); color:var(--accent); }
.cc-cards b { margin-top:6px; font-size:15px; font-weight:400; line-height:20px; }
.cc-cards [aria-checked=true] b { font-weight:600; }
.cc-cards :focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.cc-prev { display:flex; align-items:center; justify-content:center; height:44px; border-radius:6px; background:var(--layout-thumb); }
.cc-prev.dots i { width:16px; height:16px; box-sizing:border-box; margin:0 -2px; border:1.5px solid var(--layout-thumb); border-radius:50%; }
.cc-prev.ramp { flex-direction:column; align-items:stretch; gap:3px; padding:0 12px; }
.cc-prev.ramp .lg-bar { height:12px; border-radius:6px; }
.cc-ends { display:flex; justify-content:space-between; font-size:12px; line-height:1.2; color:var(--muted); }
.lg-bar { display:block; background:var(--lg-grad); }
.s-noise { margin-top:4px !important; }
.s-switch { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; margin:0; padding:4px 8px; border:0; border-radius:10px; background:none; color:var(--fg); font:600 14px/1.3 var(--text); text-align:left; cursor:pointer; }
.s-switch > span:first-child { flex:1; min-width:0; }
.s-switch:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.s-track { position:relative; flex:none; width:40px; height:24px; border-radius:12px; background:var(--border); }
.s-track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--card); box-shadow:0 1px 2px #0003; }
.s-switch[aria-checked=true] .s-track { background:var(--accent); }
.s-switch[aria-checked=true] .s-track::after { left:19px; }
.ys { padding:2px 12px 4px; }
.ys-val { display:flex; justify-content:space-between; margin:0 -4px 10px; font-size:14px; color:var(--fg); }
.ys-track { position:relative; height:28px; touch-action:none; cursor:pointer; }
.ys-track::before { content:""; position:absolute; left:0; right:0; top:12px; height:4px; border-radius:2px; background:var(--border); }
.ys-fill { position:absolute; top:12px; height:4px; border-radius:2px; background:var(--accent); }
.ys-h { position:absolute; top:3px; width:22px; height:22px; box-sizing:border-box; margin-left:-11px; border:2.5px solid var(--accent); border-radius:50%; background:var(--card); }
.ys-h::after { content:""; position:absolute; inset:-11px; }
.ys-h:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.src-chips { display:flex; flex-wrap:wrap; gap:6px; }
.src-chip { position:relative; min-height:40px; padding:0 12px; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--fg); font:14px var(--text); cursor:pointer; }
.src-chip[aria-pressed=true] { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
/* 40 px chips (mock) with a 44 px hit area; the 6 px row gap keeps the areas apart. */
.src-chip::after { content:""; position:absolute; inset:-3px 0; }
.src-chip .mono { font-size:12px; color:var(--muted); }
.src-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.m-legend { position:absolute; left:50%; bottom:52px; z-index:2; transform:translateX(-50%); display:flex; align-items:center; gap:8px; width:max-content; max-width:calc(100% - 32px); box-sizing:border-box; padding:7px 14px 8px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:0 1px 4px #0001; color:var(--muted); font:12px/1.2 var(--text); white-space:nowrap; }
/* Compare tints the map by gaps, not Drift (no :has() here: a descendant :has() re-styles the map on
   every treemap label mutation). */
.m-legend[hidden], .compare-active .m-legend:not(.cm-legend) { display:none; }
.m-legend .mono { font-size:12px; }
.m-legend .lg-bar { width:120px; height:8px; border-radius:4px; }
.instance-app.one-year .m-legend { bottom:10px; }
.showcase-map.m-drift .treemap-view { bottom:98px; }
/* A narrow desktop map (under 640 px, e.g. a 1024 px window): the row would reach the right-hand column, so
   it scrolls sideways between the map's left inset and that column, with whole 44 px buttons (a scroller
   clips the ::after hit areas). */
@media(min-width:700px) { #desktop-map .showcase-map { container-type:inline-size; } }
@container (max-width:640px) {
  .mt-yrs { height:52px; max-width:calc(100cqw - 98px); overflow-x:auto; scrollbar-width:none; }
  .mt-yrs::-webkit-scrollbar { display:none; }
  .mt-yrs button { height:44px; min-width:44px; padding:0 6px; }
  .mt-yrs button::after { content:none; }
}
/* Trends (OT-924 task 5): butterfly card in the panel (frames 02, 06b) and the per-year trajectories card
   over the map (frames 08-norm-N6-scroll*, OT-1040). The mock's 14 px card margin and top:60px lost to
   `.hub section { margin-top:22px }`, so the frames show 22 px and 82 px: those are the values here. Sizes follow mock.py CSS / CSS_08; text the mock sets
   below 12 px (meta line, values, section labels, axis ticks) uses the site's 12 px floor. */
.hub .bf-card { min-width:0; margin:22px 0 16px; padding:12px 12px 8px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--fg); font-family:var(--text); }
.bf-head { display:flex; align-items:flex-start; gap:10px; }
.bf-head > div { flex:1; min-width:0; }
.bf-head h3 { margin:0 0 2px; font:600 15px/1.5 var(--text); color:var(--fg); letter-spacing:0; }
.bf-sub { margin:0; font:12.5px/1.4 var(--text); color:var(--muted); }
.bf-top { flex:none; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); white-space:nowrap; }
.bf-n { position:relative; min-width:36px; height:36px; padding:0 6px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--fg); font:14px var(--mono); cursor:pointer; }
.bf-n::after { content:""; position:absolute; inset:-5px; }
.bf-jump { position:relative; display:inline-block; margin-top:8px; padding:7px 12px; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius:999px; color:var(--accent); font:600 13px/1.4 var(--text); text-decoration:none; }
.bf-jump::after { content:""; position:absolute; inset:-7px -1px; }
.bf-jump[hidden] { display:none; }
.bf-sec { margin:12px 0 4px; font:600 12px/1 var(--text); letter-spacing:.06em; text-transform:uppercase; }
.bf-sec.up { color:var(--moss); }
.bf-sec.down { color:var(--oxblood); }
.bf-row { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; width:100%; min-height:44px; padding:3px 0; border:0; border-radius:8px; background:none; color:var(--fg); font:inherit; text-align:left; cursor:pointer; }
.bf-row::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--border); }
.bf-lab { min-width:0; padding:0 8px; display:flex; flex-direction:column; justify-content:center; }
.bf-row.up .bf-lab { text-align:right; align-items:flex-end; }
.bf-row.down .bf-lab { align-items:flex-start; }
.bf-name { font-size:13px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bf-m { font:12px/1.4 var(--mono); color:var(--muted); white-space:nowrap; }
.bf-half { display:flex; align-items:center; gap:5px; height:22px; min-width:0; }
.bf-row.down .bf-half { flex-direction:row-reverse; }
.bf-bar { flex:none; height:16px; min-width:2px; }
.bf-row.up .bf-bar { background:var(--moss); border-radius:0 3px 3px 0; }
.bf-row.down .bf-bar { background:var(--oxblood); border-radius:3px 0 0 3px; }
.bf-v { font:12px var(--mono); font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.bf-row:not(.sel) .bf-bar { opacity:.5; }
.bf-row.sel { background:var(--accent-soft); }
.bf-row.sel .bf-name { font-weight:600; }
.bf-row.sel .bf-bar { box-shadow:0 0 0 1.5px var(--fg); }
.bf-card :focus-visible, .tj-card :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hub .tj-card { margin:0; }
.tj-card { position:absolute; left:16px; top:82px; right:66px; z-index:10; max-height:calc(100% - 94px); overflow-y:auto; padding:14px 18px 8px; border:1px solid var(--border); border-radius:16px; background:var(--card); box-shadow:0 18px 50px rgba(0,0,0,.14); color:var(--fg); font-family:var(--text); }
.tj-card[hidden] { display:none; }
.tj-card:focus { outline:none; }
.hub .tj-card.tj-inline { min-width:0; position:relative; left:auto; top:auto; right:auto; max-height:none; overflow:visible; margin:0 0 16px; padding:12px 12px 6px; border-radius:12px; box-shadow:none; scroll-margin-top:12px; }
.tj-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; }
.tj-head h3 { flex:1; min-width:0; margin:6px 0 2px; font:600 16px/1.5 var(--text); color:var(--fg); letter-spacing:0; }
.tj-x { position:relative; flex:none; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--card); color:var(--fg); cursor:pointer; }
.tj-x::after { content:""; position:absolute; inset:-5px; }
.tj-plot { position:relative; min-width:0; }
.tj-chart { display:block; width:100%; height:auto; overflow:visible; }
.tj-grid { stroke:var(--border); stroke-width:1; }
.tj-tick { font:12px var(--mono); fill:var(--muted); }
.tj-end { font:600 13px var(--text); }
.tj-bar { display:flex; align-items:center; gap:14px; margin-top:8px; padding-top:6px; border-top:1px solid var(--border); }
.tj-norm { position:relative; flex:none; display:inline-flex; align-items:center; gap:10px; min-height:32px; padding:0 4px; border:0; background:none; color:var(--fg); font:500 14px var(--text); cursor:pointer; }
.tj-norm::after { content:""; position:absolute; inset:-6px 0; }
.tj-sw { position:relative; flex:none; width:40px; height:24px; border-radius:12px; background:var(--border); transition:background .15s; }
.tj-sw::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--card); box-shadow:0 1px 2px #0003; transition:left .15s; }
.tj-norm[aria-checked=true] .tj-sw { background:var(--accent); }
.tj-norm[aria-checked=true] .tj-sw::after { left:19px; }
.tj-sep { flex:none; width:1px; align-self:stretch; margin:6px 0; background:var(--border); }
/* One line of chips that scrolls sideways with no scrollbar; a 40 px fade marks each side that hides chips. */
.tj-list { --fl:0px; --fr:0px; flex:1; min-width:0; display:flex; flex-wrap:nowrap; gap:8px; padding:6px 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.tj-list::-webkit-scrollbar { display:none; }
.tj-list.fade-l { --fl:40px; }
.tj-list.fade-r { --fr:40px; }
.tj-chip { flex:none; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 4px 0 12px; border:1px solid var(--border); border-radius:999px; font-size:13px; white-space:nowrap; }
.tj-dot { flex:none; width:9px; height:9px; }
.tj-rm { position:relative; display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.tj-rm::after { content:""; position:absolute; inset:-9px; }
.tj-clear { position:relative; flex:none; padding:0; border:0; background:none; color:var(--accent); font:600 14px var(--text); white-space:nowrap; cursor:pointer; }
.tj-clear::after { content:""; position:absolute; inset:-14px -4px; }
@media(max-width:699px) { .tj-bar { gap:10px; } }
@media(prefers-reduced-motion:reduce) { .tj-sw, .tj-sw::after { transition:none; } }

/* Desktop comparison mode (OT-1048..1073; mock.py CSS_09, CSS_09B, cmp_mode_bar2, ab_panel, pairwise_main
   bare, diverging_all, scatter_main). B's colour on the map ramp and in Pairwise is the mock's --mk-b, the
   same rgb(164,94,55) map.js topicFill tints toward; A is --accent. Text the mock sets below 12 px uses the
   site's 12 px floor; 32 px controls get 44 px hit areas through ::after. */
.instance-app { --cm-b:#a45e37; }
.map-toolbar { max-width:calc(100% - 82px); flex-wrap:wrap; }
.cm-btn { position:relative; display:inline-flex; align-items:center; gap:7px; height:40px; box-sizing:border-box; padding:0 16px 0 13px; border:1px solid var(--control-line); border-radius:999px; background:var(--card); color:var(--fg); box-shadow:0 1px 4px #0002; font:500 14px var(--text); text-decoration:none; white-space:nowrap; }
.cm-btn::after { content:""; position:absolute; inset:-3px -1px; }
.cm-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.compare-active .cm-btn { display:none; }
.cm-on { display:inline-flex; align-items:center; gap:4px; height:40px; box-sizing:border-box; padding:0 4px 0 12px; border-radius:999px; background:var(--fg); color:var(--bg); box-shadow:0 2px 10px rgba(0,0,0,.12); }
.cm-ico { display:grid; place-items:center; margin-right:2px; }
.cm-on .mt-seg { height:auto; padding:0; border:0; background:transparent; box-shadow:none; }
.cm-on .mt-seg button { padding:0 12px; color:var(--bg); font:14px var(--text); }
.cm-on .mt-seg button[aria-pressed=true] { background:var(--bg); color:var(--fg); }
.cm-on .mt-seg button:focus-visible, .cm-x:focus-visible { outline:2px solid var(--bg); outline-offset:-2px; }
.cm-x { position:relative; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:rgba(127,127,127,.28); color:var(--bg); cursor:pointer; }
.cm-x::after { content:""; position:absolute; inset:-6px; }
/* Left panel in mode: no tabs and no heading (OT-1072), cards A and B (OT-1049). */
.compare-active .lp-tabs { display:none; }
.hub .ab { min-width:0; margin:0; padding:4px 0 24px; }
.ab-card { --c:var(--accent); padding:12px 14px 14px; border:1px solid var(--border); border-left:4px solid var(--c); border-radius:14px; background:var(--card); }
.ab-b { --c:var(--oxblood); }
.ab-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.ab-tag { display:inline-grid; place-items:center; align-self:center; width:24px; height:24px; border-radius:50%; background:var(--c); color:var(--card); font:700 13px var(--text); }
.ab-heading { display:flex; align-items:baseline; gap:8px; flex:1; min-width:0; }
.ab-heading .ab-name { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ab-n { flex-basis:100%; margin:-2px 0 0; color:var(--muted); font-size:12px; }
.ab-empty .ab-name { color:var(--muted); }
.hub .ab h4 { margin:12px 0 6px; color:var(--muted); font:600 12px/1.5 var(--text); letter-spacing:.02em; text-transform:none; }
.ab .ys-val { display:none; }
.ab .ab-ys { padding:0 10px; }
.ab-ys .ys-fill { background:var(--c); }
.ab-ys .ys-h { border-color:var(--c); }
.ab-ys .ys-h:focus-visible { outline-color:var(--c); }
.ab-ticks { position:relative; height:18px; color:var(--muted); font-size:12px; }
.ab-ticks span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.ab .src-chips { gap:6px; }
.ab .src-chip { min-height:32px; padding:0 11px; font-size:13px; }
.ab .src-chip::after { inset:-7px 0; }
.ab-b .src-chip[aria-pressed=true] { border-color:var(--oxblood); background:color-mix(in srgb, var(--oxblood) 10%, var(--card)); color:var(--oxblood); }
.ab-swap { position:relative; display:flex; align-items:center; gap:6px; height:32px; margin:8px auto; padding:0 12px; border:1px solid var(--border); border-radius:999px; background:var(--bg); color:var(--fg); font:500 13px var(--text); cursor:pointer; }
.ab-swap::after { content:""; position:absolute; inset:-7px 0; }
.ab :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Map in mode: the B ... A legend pill (09d); the Drift pill stays hidden. */
.instance-app:not(.compare-active) .cm-legend, .cm-pw .cm-legend { display:none; }
.cm-legend .lg-bar { background:linear-gradient(90deg, var(--accent), #cecac1 50%, var(--cm-b)); }
.cm-legend .a { color:var(--accent); font-weight:600; }
.cm-legend .b { color:var(--cm-b); font-weight:600; }
.showcase-map.cm-map .treemap-view { bottom:98px; }
.cm-empty { position:absolute; left:50%; top:50%; z-index:9; transform:translate(-50%,-50%); max-width:calc(100% - 48px); margin:0; padding:10px 16px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--muted); font:14px/1.4 var(--text); text-align:center; }
/* Pairwise main window: the bare chart over the map; zoom buttons and ? hidden, ⋯ and the camera stay. */
.cm-pw .m-zoom > button:not(.m-cam), .cm-pw .map-help { display:none; }
.cm-pw .m-zoom, .cm-pw .map-options, .cm-pw .settings-pop { z-index:12; }
.pw-main { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; box-sizing:border-box; padding:70px 80px 0 22px; overflow:hidden; background:var(--bg); color:var(--fg); font-family:var(--text); }
.pw-main.sc-main { align-items:center; padding:74px 80px 12px 22px; }
.dball { flex:1; min-height:0; display:flex; flex-direction:column; }
.db-row, .db-axis { display:grid; grid-template-columns:230px 1fr 132px; gap:14px; align-items:center; }
.db-row { min-height:31px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.db-name { overflow:hidden; font-size:13.5px; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.db-track { position:relative; height:28px; background:linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0/20% 100%; }
.db-line { position:absolute; top:13px; height:3px; border-radius:2px; }
.db-line.a { background:color-mix(in srgb, var(--accent) 40%, var(--border)); }
.db-line.b { background:color-mix(in srgb, var(--cm-b) 40%, var(--border)); }
.db-dot { position:absolute; top:8px; width:13px; height:13px; box-sizing:border-box; margin-left:-6.5px; border:2px solid var(--card); border-radius:50%; }
.db-dot.a, .dv-bar.a { background:var(--accent); }
.db-dot.b, .dv-bar.b { background:var(--cm-b); }
.db-v { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; color:var(--muted); font-size:12px; text-align:right; white-space:nowrap; }
.db-v .a { color:var(--accent); }
.db-v .b { color:var(--cm-b); }
.db-v b { font-weight:600; }
.db-axis { flex:none; height:20px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.db-ticks { position:relative; height:20px; }
.db-ticks span { position:absolute; top:2px; transform:translateX(-50%); color:var(--muted); font:12px var(--mono); white-space:nowrap; }
.db-body { --ft:0px; --fb:0px; position:relative; flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  mask-image:linear-gradient(transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent); }
.db-body.ft { --ft:48px; }
.db-body.fb { --fb:48px; }
.dv-track { background:none; }
.dv-track::before { content:""; position:absolute; left:50%; top:3px; bottom:3px; width:1px; background:var(--muted); opacity:.5; }
.dv-bar { position:absolute; top:8px; height:13px; border-radius:3px; }
.sc { display:block; width:100%; max-width:800px; height:100%; max-height:620px; min-height:0; font-family:var(--text); }
.sc-grid { stroke:var(--border); stroke-width:1; }
.sc-diag { stroke:var(--muted); stroke-width:1.2; stroke-dasharray:5 5; }
.sc-t { fill:var(--muted); font:12px var(--mono); }
.sc-ax { fill:var(--muted); font-size:12.5px; }
.sc-note { fill:var(--muted); font:italic 12px var(--text); }
.sc-dot { stroke:var(--card); stroke-width:1.2; }
.sc-dot.a, .sc-lab.a, .sc-zone.a { fill:var(--accent); }
.sc-dot.b, .sc-lab.b, .sc-zone.b { fill:var(--cm-b); }
.sc-lab { font-size:12.5px; paint-order:stroke; stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; }
.sc-zone { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
/* A resized panel or a small desktop can leave a narrow map: keep all three number columns visible. */
#desktop-map { container:comparison-map / inline-size; }
@container comparison-map (max-width:520px) {
  .pw-main, .pw-main.sc-main { padding:120px 12px 12px; }
  .db-row, .db-axis { grid-template-columns:minmax(40px,.8fr) minmax(20px,1fr) 120px; gap:8px; }
}
/* ⋯ in mode (09g): Measure and Chart preview cards in the Colour cards' style. */
.cm-cards.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cm-prev { display:block; padding:4px 4px 2px; border-radius:8px; background:var(--layout-thumb); }
.cm-prev svg { display:block; }
.cm-prev .pa { fill:var(--accent); }
.cm-prev .pb { fill:var(--oxblood); }
.cm-prev .pg { stroke:var(--border); }
.cm-prev .la { stroke:var(--accent); }
.cm-prev .lb { stroke:var(--oxblood); }