/* ══════════════════════════════════════════════════════════════
   Layout — the problem list, the two-pane workspace and the roadmap.

   Practice has two places. With no problem open, /practice/<lang> is the
   whole catalogue as one table grouped by topic, with progress beside it.
   With a problem open, the page is the statement and the editor, and the
   list is a drawer over the statement (the Problems button, ⌘B or "/").
   Loaded after m3.css and before dark.css; colours are tokens, so dark.css
   restyles all of it.
   ══════════════════════════════════════════════════════════════ */

:root {
  --lv-row-h: 46px;
  --lv-radius: 0;
  --lv-display: 'Plus Jakarta Sans', var(--font-sans);
}

/* ── problem list ─────────────────────────────────────────── */
.plv {
  height: calc(100vh / var(--pz, 1) - var(--cariara-chrome, 0px) - var(--topbar-h, 56px));
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 24px;
  padding: 24px var(--m3-pad, 28px) 48px;
  background: var(--ground);
}
.plv[hidden] { display: none; }
.plv-main { min-width: 0; }

/* One toolbar strip: search, the three filter menus, what is active, the
   count, and the two actions. Never wraps into a second row on a desktop. */
.plv-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; margin-bottom: 16px;
  border: 1px solid var(--hairline); border-radius: 0;
  background: var(--surface-1);
}
.plv-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 260px; min-width: 180px; height: 36px; padding: 0 10px;
  border-radius: 0; background: var(--surface-2, var(--ground));
  color: var(--text-dimmed); cursor: text;
}
.plv-search:focus-within { background: var(--surface-1); box-shadow: 0 0 0 2px var(--accent); }
.plv-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: 400 14px var(--font-sans); color: var(--text-primary);
}
.plv-search input::-webkit-search-cancel-button { display: none; }
.plv-search kbd {
  font: 500 11px/18px var(--font-mono); padding: 0 6px; border-radius: 5px;
  border: 1px solid var(--border); color: var(--text-dimmed); background: var(--surface-1);
}

.plv-filters { display: flex; gap: 6px; flex: 0 0 auto; }
.fchip { position: relative; }
.fchip-b {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px 0 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1); cursor: pointer;
  font: 500 13px var(--font-sans); color: var(--text-secondary); white-space: nowrap;
}
.fchip-b:hover { border-color: var(--text-dimmed); color: var(--text-primary); }
.fchip-c { display: grid; place-items: center; transform: rotate(90deg); color: var(--text-dimmed); transition: transform var(--dur, 140ms); }
.fchip.is-open .fchip-c { transform: rotate(-90deg); }
.fchip.is-set .fchip-b { background: var(--accent-subtle); border-color: transparent; color: var(--accent-text); }
.fchip.is-set .fchip-l { color: var(--text-secondary); font-weight: 400; }
.fchip.is-set .fchip-l::after { content: ':'; }
.fchip-v { font-weight: 600; }

.fmenu {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0;
  min-width: 200px; padding: 6px;
  border: 1px solid var(--hairline); border-radius: 0;
  background: var(--surface-1); box-shadow: var(--shadow-lg);
  display: none;
}
.fchip.is-open .fmenu { display: block; }
.fmenu-o {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 34px; padding: 0 10px 0 6px; border: 0; border-radius: 0;
  background: transparent; cursor: pointer; text-align: left;
  font: 400 13.5px var(--font-sans); color: var(--text-primary);
}
.fmenu-o:hover { background: var(--accent-subtle); }
.fmenu-o.is-on { color: var(--accent-text); font-weight: 500; }
.fmenu-k { display: grid; place-items: center; width: 16px; color: var(--accent-text); }
.fmenu-o .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.fmenu-o .dot.d-Easy { background: var(--easy); }
.fmenu-o .dot.d-Medium { background: var(--medium); }
.fmenu-o .dot.d-Hard { background: var(--hard); }
.fmenu-t { flex: 1; }
.fmenu-n { font: 400 12px var(--font-mono); color: var(--text-dimmed); }

.plv-active { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; }
.plv-active:empty { display: none; }
.plv-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px;
  border-radius: 14px; background: var(--accent-subtle); color: var(--accent-text);
  font: 500 12.5px var(--font-sans); white-space: nowrap;
}
.plv-chip button {
  display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
.plv-chip button:hover { background: var(--accent-subtle); }
.plv-clear {
  border: 0; background: transparent; cursor: pointer; padding: 0 6px; height: 28px;
  font: 500 13px var(--font-sans); color: var(--accent-text);
}
.plv-clear:hover { text-decoration: underline; }

.plv-count {
  margin-left: auto; padding: 0 8px; white-space: nowrap;
  font: 400 13px var(--font-sans); color: var(--text-dimmed);
}
.plv-count b { font-weight: 600; color: var(--text-primary); }
.plv-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  height: 36px; min-width: 36px; padding: 0 10px; border-radius: 0;
  border: 1px solid var(--border); background: var(--surface-1); cursor: pointer;
  font: 500 13px var(--font-sans); color: var(--text-secondary);
}
.plv-act:hover { border-color: var(--text-dimmed); color: var(--text-primary); }
.plv-act.is-primary { padding: 0 14px; background: var(--accent); border-color: transparent; color: var(--m3-on-primary, #fff); }
.plv-act.is-primary:hover { filter: brightness(1.08); color: var(--m3-on-primary, #fff); }

/* A card per topic, two across on a wide pane, so a row never stretches its
   numbers a screen away from its name. */
.plv-table {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
}
.plv-table > .plv-none { grid-column: 1 / -1; }
.plv-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 64px 72px;
  align-items: center;
  column-gap: 8px;
}
.plv-num {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  font: 400 12px var(--font-mono); color: var(--text-dimmed);
}

.plv-sec {
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline); border-radius: 0;
  background: var(--surface-1); overflow: hidden;
}
/* A collapsed card is only its header, so it does not stretch to its row. */
.plv-sec.is-shut { align-self: start; }
.plv-sec-h {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 42px; padding: 0 16px 0 14px; border: 0; cursor: pointer; text-align: left;
  background: var(--surface-2, var(--surface-1)); color: var(--text-primary);
}
.plv-sec-h:hover { background: var(--surface-3, var(--surface-2)); }
.plv-chev { display: grid; place-items: center; width: 20px; color: var(--text-dimmed); transition: transform var(--dur, 140ms) var(--ease, ease); }
.plv-chev { transform: rotate(90deg); }
.plv-sec.is-shut .plv-chev { transform: none; }
.plv-sec-t { font: 600 14.5px/1.2 var(--lv-display); }
.plv-sec-n { margin-left: auto; font: 500 12px/1 var(--font-mono); color: var(--text-dimmed); }
.plv-sec-n.is-done { color: var(--success); }
.plv-meter { width: 80px; height: 4px; border-radius: 0; background: var(--hairline); overflow: hidden; }
.plv-meter i { display: block; height: 100%; background: var(--success); border-radius: 0; }
.plv-sec.is-shut .plv-rows { display: none; }

.plv-row {
  min-height: 40px; padding: 4px 14px 4px 0;
  border-top: 1px solid var(--hairline);
  color: var(--text-primary); text-decoration: none;
}
.plv-row:hover { background: var(--accent-subtle); }
.plv-row:hover .plv-title { color: var(--accent-text); }
.plv-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.plv-st { display: grid; place-items: center; color: var(--text-disabled, var(--text-dimmed)); }
.plv-row.is-done .plv-st { color: var(--success); }
.plv-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.plv-title {
  font: 500 14px/1.35 var(--font-sans);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plv-meta { flex: 0 0 auto; font: 400 12px var(--font-sans); color: var(--text-dimmed); }
.plv-flag {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font: 500 11px var(--font-sans); color: var(--accent-text);
}
.plv-diff { font: 600 12.5px var(--font-sans); text-align: right; }

.plv-none {
  padding: 48px 16px; text-align: center; color: var(--text-secondary);
  border: 1px dashed var(--border); border-radius: 0;
}
.plv-none p { margin: 0 0 12px; font-size: 14px; }

/* Side: progress, then the topics. */
.plv-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 12px; }
.plv-card {
  padding: 16px; border: 1px solid var(--hairline); border-radius: 0;
  background: var(--surface-1);
}
#plvStats { display: flex; align-items: center; gap: 16px; }
.plv-gauge {
  --pct: 0;
  position: relative; flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(var(--success) calc(var(--pct) * 1%), var(--hairline) 0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.plv-gauge::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface-1);
}
.plv-gauge b, .plv-gauge span { position: relative; }
.plv-gauge b { font: 600 24px/1 var(--lv-display); color: var(--text-primary); }
.plv-gauge span { margin-top: 3px; font: 400 12px var(--font-mono); color: var(--text-dimmed); }
.plv-tiers { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plv-tier { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 8px; }
.plv-tier > span:first-child { font: 600 12px var(--font-sans); }
.plv-tier-bar { height: 5px; border-radius: 0; background: var(--hairline); overflow: hidden; }
.plv-tier-bar i { display: block; height: 100%; border-radius: 0; }
.plv-tier-n { font: 400 12px var(--font-mono); color: var(--text-dimmed); }

.plv-card-h {
  margin: 0 0 8px; font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dimmed);
}
.plv-topics { display: flex; flex-direction: column; }
.plv-topic-b {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px; margin: 0 -8px; width: calc(100% + 16px);
  border: 0; border-radius: 0; background: transparent; cursor: pointer; text-align: left;
  font: 400 13px var(--font-sans); color: var(--text-secondary);
}
.plv-topic-b:hover { background: var(--accent-subtle); color: var(--accent-text); }
.plv-topic-b > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plv-topic-n { font: 400 12px var(--font-mono); color: var(--text-dimmed); }
.plv-topic-b.is-done .plv-topic-n { color: var(--success); }

@media (max-width: 1100px) {
  .plv-bar { flex-wrap: wrap; }
  .plv { grid-template-columns: minmax(0, 1fr); }
  .plv-side { position: static; order: -1; flex-direction: row; flex-wrap: wrap; }
  .plv-side > .plv-card { flex: 1 1 280px; }
  .plv-side > .plv-card:last-child { display: none; }
}
@media (max-width: 760px) {
  .plv { padding: 16px 12px 32px; }
  .plv-row { grid-template-columns: 36px minmax(0, 1fr) 72px; }
  .plv-num, .plv-meta { display: none; }
}

/* ── workspace: statement | editor over console ───────────── */
.layout {
  position: relative;
  --probw: clamp(360px, 44%, 920px);
  --workmin: 440px;
  grid-template-columns: minmax(0, var(--probw)) 5px minmax(var(--workmin), 1fr);
}
.layout > .pane-problem {
  border-left: 1px solid var(--m3-line, var(--hairline));
  border-radius: 0;
}

/* The list, as a drawer over the statement. */
.layout > .rail {
  position: absolute; z-index: 40;
  top: 16px; bottom: 20px; left: var(--m3-pad, 16px);
  width: min(420px, calc(100% - 2 * var(--m3-pad, 16px)));
  border: 1px solid var(--m3-line, var(--hairline)); border-radius: 0;
  box-shadow: var(--shadow-lg);
  transform: translateX(calc(-100% - 2 * var(--m3-pad, 16px)));
  visibility: hidden;
  transition: transform .2s var(--ease, ease), visibility 0s linear .2s;
}
.layout.rail-open > .rail {
  transform: none; visibility: visible;
  transition: transform .2s var(--ease, ease), visibility 0s;
}
.rail-scrim {
  position: absolute; inset: 0; z-index: 39;
  background: var(--bg-overlay); opacity: .35;
}
.rail-scrim[hidden] { display: none; }

.rail-top { display: flex; align-items: center; justify-content: space-between; }
.rail-all {
  border: 0; background: transparent; padding: 4px 0; cursor: pointer;
  font: 600 14px var(--lv-display); color: var(--accent-text);
}
.rail-all::after { content: ' \203A'; }
.rail-all:hover { text-decoration: underline; }
.rail-x {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: transparent; color: var(--text-secondary); cursor: pointer;
}
.rail-x:hover { background: var(--surface-3, var(--hairline)); color: var(--text-primary); }
/* In the drawer the names have room: no truncation to "Contains Du…". */
.rail .p-name { white-space: normal; }

.list-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 30px; width: 34px; justify-content: center; padding: 0; margin-right: 6px;
  border: 1px solid var(--border); border-radius: 0; background: var(--surface-1);
  font: 500 13px var(--font-sans); color: var(--text-primary); cursor: pointer;
}
.list-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.list-btn[aria-expanded="true"] { background: var(--accent-subtle); border-color: transparent; color: var(--accent-text); }

/* Editor over console at every width: code keeps the full column. */
.work-split { flex-direction: column !important; }
.work-split > .console {
  flex: 0 0 36%; max-width: none !important; min-width: 0 !important;
  border-left: 0 !important; border-top: 1px solid var(--border) !important;
}
.work-split > .row-grip {
  width: auto !important; height: 5px !important; flex: 0 0 5px !important; cursor: row-resize !important;
}
.work-split > .row-grip::after { inset: 2px 0 !important; }

@media (max-width: 1100px) {
  .layout > .pane-problem { border-radius: 0; }
  .layout > .rail { position: fixed; top: 8px; bottom: 8px; left: 8px; }
  .rail-scrim { position: fixed; }
}

/* ── roadmap: compact nodes, the topic in a panel over the graph ─ */
.rmv-head {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 16px 24px !important;
}
.rmv-head h1 { margin: 0 !important; font: 600 26px/1.2 var(--lv-display) !important; color: var(--text-primary) !important; }
.rmv-head .rmv-overall { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 24px; max-width: none; }
.rmv-head .rmv-meter { flex: 1; display: flex; align-items: center; gap: 12px; margin: 0; }

#rmvGraph { padding-top: 20px; padding-bottom: 32px; }
#rmvGraph .rmv-stage { gap: 12px; padding-bottom: 22px; --sec: var(--text-dimmed); --sec-text: var(--text-dimmed); }
#rmvGraph .rmv-stage-h { min-height: 18px; }
#rmvGraph .rmv-stage-n, #rmvGraph .rmv-stage-l { font-size: 11px; color: var(--text-dimmed); }
#rmvGraph .rmv-stage-rule { height: 1px; background: var(--hairline); opacity: 1; }
#rmvGraph .rmv-tier { gap: 20px; row-gap: 20px; }
#rmvGraph .rmv-node {
  flex: 0 1 240px; min-width: 200px; max-width: 270px; min-height: 72px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 16px; border-radius: 0;
  border: 1px solid var(--border); background: var(--surface-1);
  box-shadow: var(--shadow-xs);
}
#rmvGraph .rmv-node:hover:not([disabled]) { border-color: var(--accent); transform: none; }
#rmvGraph .rmv-node.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
#rmvGraph .rmv-node-r { display: flex; align-items: baseline; gap: 8px; }
#rmvGraph .rmv-label {
  flex: 1; min-width: 0; margin: 0;
  font: 600 15px/1.3 var(--font-sans); color: var(--text-primary);
}
#rmvGraph .rmv-meta { margin: 0; flex: 0 0 auto; font: 400 12.5px/1 var(--font-mono); color: var(--text-dimmed); }
#rmvGraph .rmv-node.is-done .rmv-meta { color: var(--success); }
#rmvGraph .rmv-track { margin-top: 12px; height: 5px; background: var(--hairline); }
#rmvGraph .rmv-track span { background: var(--success); }

.rmv-body { position: relative; }
.rmv-panel {
  position: absolute; z-index: 5; display: block !important;
  top: 12px; bottom: 16px; right: var(--m3-pad, 16px);
  width: min(400px, calc(100% - 2 * var(--m3-pad, 16px))) !important; flex: none !important;
  border: 1px solid var(--m3-line, var(--hairline)) !important; border-radius: 0;
  box-shadow: var(--shadow-lg);
}
.rmv-panel[hidden] { display: none !important; }

/* ── the sub-header: a secondary strip under Cariara's own tabs ──
   Pill tabs with plain icons (the underline belongs to the tabs above), and
   the language as one segmented control on the right. */
html:not(.tab-codepad):not(.tab-codeme) { --topbar-h: 52px; }
.topbar {
  gap: 12px; padding: 0 var(--m3-pad, 24px);
  background: var(--surface-1); border-bottom: 1px solid var(--hairline);
}
.topbar::after { display: none; }
#modeTabs { align-self: center; height: auto; gap: 4px; }
#modeTabs .mode-tab {
  height: 34px; padding: 0 14px; gap: 8px; border-radius: 0;
  font: 500 13.5px/1 var(--font-sans); color: var(--text-secondary); background: transparent;
}
#modeTabs .mode-tab:nth-child(n) .ico { color: var(--text-dimmed); }
#modeTabs .mode-tab:hover { background: var(--surface-2, var(--hairline)); color: var(--text-primary); }
#modeTabs .mode-tab.is-on, #modeTabs .mode-tab.is-on:hover { background: var(--accent-subtle); color: var(--accent-text); }
#modeTabs .mode-tab.is-on:nth-child(n) .ico { color: var(--accent-text); }
#modeTabs .mode-tab.is-on::after { display: none; }

.lang-switch {
  display: inline-flex; gap: 2px; padding: 3px; margin-left: 4px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1);
}
.lang-switch[hidden] { display: none; }
.lang-switch .lang-pill {
  height: 28px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent;
  font: 500 13px/1 var(--font-sans); color: var(--text-secondary); box-shadow: none;
}
.lang-switch .lang-pill:hover { background: var(--surface-2, var(--hairline)); color: var(--text-primary); }
.lang-switch .lang-pill.is-on { background: var(--accent-subtle); color: var(--accent-text); }
/* A hairline between the view tabs and the language. */
#modeTabs + .lang-switch:not([hidden]) { position: relative; margin-left: 17px; }
#modeTabs + .lang-switch:not([hidden])::before {
  content: ''; position: absolute; left: -13px; top: 6px; bottom: 6px; width: 1px; background: var(--hairline);
}

/* ── the problem's tabs ───────────────────────────────────────
   Description, Solutions and Notes: one panel shows at a time, under a
   header they share. */
#problemPane .panel { display: none; animation: none; }
#problemPane .panel.is-on { display: block; }
#problemPane #panel-statement { padding-bottom: 8px; }
#problemPane #panel-solutions, #problemPane #panel-notes { padding-bottom: 8px; }
#problemPane #panel-notes { padding-bottom: 64px; }

.docnav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.docnav::-webkit-scrollbar { display: none; }
.docnav-b {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: 30px; padding: 0 10px; border: 0; border-radius: 0;
  background: transparent; cursor: pointer;
  font: 500 13px var(--font-sans); color: var(--text-secondary); white-space: nowrap;
}
.docnav-b:hover { background: var(--surface-2, var(--hairline)); color: var(--text-primary); }
.docnav-b.is-on { background: var(--accent-subtle); color: var(--accent-text); }
.docnav-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 0;
  display: inline-grid; place-items: center;
  background: var(--hairline); font: 600 11px/1 var(--font-sans); color: var(--text-secondary);
}
.docnav-b.is-on .docnav-n { background: var(--accent); color: var(--m3-on-primary, #fff); }

.doc-sec { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.doc-h {
  display: flex; align-items: center; gap: 8px; margin: 0 24px 14px;
  font: 600 18px/1.3 var(--lv-display); color: var(--text-primary);
}
.doc-n {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 0;
  display: inline-grid; place-items: center;
  background: var(--accent-subtle); font: 600 12px/1 var(--font-sans); color: var(--accent-text);
}
.doc-sec > .empty { padding-inline: 24px; }
.doc-sec .notes-box { display: block; width: calc(100% - 48px); min-height: 140px; margin: 0 24px; }

/* Locked solutions: one compact card, not a full-screen wall. */
#problemPane .sol-gate {
  display: flex; align-items: center; gap: 14px; text-align: left;
  margin: 0 24px; padding: 14px 16px;
  border: 1px dashed var(--border); border-radius: 0;
  background: var(--surface-2, var(--ground));
}
#problemPane .sol-gate-ico { margin: 0; width: 36px; height: 36px; flex: 0 0 36px; }
.sol-gate-b { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sol-gate-b b { font: 600 14px var(--font-sans); color: var(--text-primary); }
.sol-gate-b span { font: 400 12.5px var(--font-mono); color: var(--text-dimmed); }
#problemPane .sol-gate .btn { margin: 0; }

/* The approach switcher pins under the pane head while an approach is read. */
#problemPane .sol-nav { margin-top: 0; }
#problemPane .sol-card { margin-top: 12px; }
.sol-actions [data-act="load"] { display: inline-flex; align-items: center; gap: 6px; }
.sol-actions [data-act="load"].is-on { background: var(--accent-subtle); color: var(--accent-text); border-color: transparent; }

/* An approach open in the editor: says which, and the way back. */
.sol-view {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  height: 38px; padding: 0 8px 0 14px;
  background: var(--accent-subtle); border-bottom: 1px solid var(--hairline);
  font: 400 13px var(--font-sans); color: var(--text-secondary);
}
.sol-view[hidden] { display: none; }
.sol-view-t { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: var(--accent-text); }
.sol-view-t b { font-weight: 600; white-space: nowrap; }
.sol-view-t span { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sol-view-t i { font-style: normal; font-size: 12px; color: var(--text-dimmed); white-space: nowrap; }
.sol-view-b {
  flex: 0 0 auto; height: 28px; padding: 0 12px; border-radius: 0; cursor: pointer;
  border: 1px solid var(--accent); background: var(--surface-1);
  font: 500 13px var(--font-sans); color: var(--accent-text);
}
.sol-view-b:hover { background: var(--accent); color: var(--m3-on-primary, #fff); }

/* ── Learn (the guides): plain cards, one accent, progress in the nav ── */
#viewGuides .gd-nav-i { display: flex; align-items: center; gap: 8px; }
#viewGuides .gd-nav-i > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-nav-n { font: 400 11.5px var(--font-mono); color: var(--text-dimmed); }
.gd-nav-n.is-done { color: var(--success); }

.gd-top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border: 1px solid var(--hairline); border-radius: 0;
  background: var(--surface-1);
}
.gd-top-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gd-top h1 { margin: 0; font: 600 26px/1.2 var(--lv-display); color: var(--text-primary); letter-spacing: -.01em; }
.gd-top-m { display: flex; align-items: center; gap: 12px; font: 400 13px var(--font-sans); color: var(--text-secondary); }
.gd-top-m b { color: var(--text-primary); font-weight: 600; }
.gd-top-bar { flex: 0 1 240px; height: 5px; border-radius: 0; background: var(--hairline); overflow: hidden; }
.gd-top-bar i { display: block; height: 100%; border-radius: 0; background: var(--success); }
.gd-top .btn { display: inline-flex; align-items: center; gap: 6px; }
#viewGuides .gd-head h1 { font: 600 26px/1.2 var(--lv-display); color: var(--text-primary); }

.gd-flow {
  display: grid; gap: 12px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.gd-flow > .is-wide { grid-column: 1 / -1; }
#viewGuides .gd-card,
#viewGuides .gd-card[data-tone] {
  border: 1px solid var(--hairline) !important; border-top: 1px solid var(--hairline) !important;
  border-radius: 0; background: var(--surface-1); box-shadow: none; padding: 16px 18px;
}
#viewGuides .gd-h {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 600 11.5px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dimmed);
}
.gd-n {
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 0; display: inline-grid; place-items: center;
  background: var(--hairline); font: 600 11px/1 var(--font-sans); letter-spacing: 0; color: var(--text-secondary);
}
#viewGuides .gd-card .prose { font-size: 14px; line-height: 1.65; }
#viewGuides .gd-card .prose p { margin: 0 0 8px; }
#viewGuides .gd-card .prose p:last-child { margin-bottom: 0; }
#viewGuides .gd-list { font-size: 13.5px; line-height: 1.55; }
#viewGuides .gd-list.is-cols {
  columns: auto; display: grid; column-gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
#viewGuides .gd-tier-n { color: var(--text-primary); }

#viewGuides .gd-qs { gap: 0; }
#viewGuides .gd-q {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 64px; align-items: center; gap: 8px;
  min-height: 36px; border-top: 1px solid var(--hairline);
}
#viewGuides .gd-q:first-child { border-top: 0; }
.gd-q-st { display: grid; place-items: center; color: var(--text-disabled, var(--text-dimmed)); }
.gd-q-st.is-done { color: var(--success); }
#viewGuides .gd-q-t {
  justify-self: start; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left;
  font: 500 13.5px var(--font-sans); color: var(--text-primary); text-decoration: none;
}
#viewGuides .gd-q-t:hover { color: var(--accent-text); text-decoration: none; }
.gd-kind { font: 500 11px var(--font-sans); color: var(--text-dimmed); }
.gd-kind.is-key { color: var(--accent-text); }
.gd-diff { font: 600 12px var(--font-sans); text-align: right; }

#viewGuides .gd-faq summary { color: var(--text-primary); font-weight: 500; }
#viewGuides .gd-faq { border-color: var(--hairline); }

/* Rows of cards: 12 columns, spans set per row by content weight, one
   height per row. */
.gd-rows { display: flex; flex-direction: column; gap: 12px; }
.gd-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.gd-row > .gd-card { grid-column: span var(--span, 12); min-width: 0; }
@media (max-width: 1100px) {
  .gd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-row > .gd-card { grid-column: auto; }
  .gd-row > .gd-card:only-child, .gd-row > .gd-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .gd-row { grid-template-columns: minmax(0, 1fr); } }
#viewGuides .gd-q { grid-template-columns: 22px minmax(0, 1fr) auto 60px; }
#viewGuides .gd-q-t { line-height: 1.35; padding: 6px 0; }


/* ══ Problem header and tabs (2026-09-29) ═══════════════════════
   One header row: the list, the tabs (wrapping when narrow), then Prev · n of N · Next.
   Under it, the title, a quiet line of facts, and a one-line version
   picker, shared by every tab. Google-four accents only. */
#problemPane .pane-head { gap: 10px; padding: 0 12px; height: auto; min-height: 40px; flex: 0 0 auto; align-items: flex-start; }
#problemPane .pane-head > .list-btn, #problemPane .pane-head > .prob-nav { align-self: center; }
/* The tabs wrap onto a second line when the pane is narrow: never a sideways
   scroll. Prev / Next are arrows (their names are on aria-label and title), and
   on a very narrow pane they drop under the tabs rather than squeeze them. */
#problemPane .pane-head { flex-wrap: wrap; }
#problemPane .docnav { flex: 1 1 200px; flex-wrap: wrap; overflow: visible; }
#problemPane .prob-nav { margin-left: auto; }
#problemPane .prob-nav-b span { display: none; }
.docnav { align-self: stretch; gap: 4px; }
.docnav-b {
  height: 39px; padding: 0 14px; border-radius: 0; position: relative;
  font: 600 14px var(--font-sans); color: var(--text-secondary);
}
.docnav-b:hover { background: transparent; color: var(--text-primary); }
.docnav-b.is-on { background: transparent; color: var(--g-blue-text); }
.docnav-b.is-on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 0; background: var(--g-blue-text); }
.docnav-n { background: var(--surface-2, var(--hairline)); color: var(--text-secondary); }
.docnav-b.is-on .docnav-n { background: var(--g-blue-text); color: #fff; }

.prob-nav { gap: 6px; }
.prob-nav-b {
  display: inline-flex; align-items: center; gap: 4px; width: auto; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 0; background: var(--surface-1);
  font: 600 13px var(--font-sans); color: var(--text-primary); cursor: pointer;
}
.prob-nav-b:hover:not(:disabled) { border-color: var(--g-blue-text); color: var(--g-blue-text); background: var(--surface-1); }
.prob-nav-pos { font: 500 13px/1 var(--font-sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .prob-nav-b span { display: none; } .prob-nav-b { padding: 0 10px; } }

.phd { padding: 22px 26px 18px; border-bottom: 1px solid var(--border); display: grid; gap: 10px; }
.phd-top { display: flex; align-items: flex-start; gap: 12px; }
.phd-title { flex: 1; min-width: 0; margin: 0; font: 800 clamp(24px, 2vw, 30px)/1.15 'Plus Jakarta Sans', var(--font-sans); letter-spacing: -.03em; color: var(--text-primary); }
.phd-state { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font: 600 12.5px/1 var(--font-sans); color: var(--text-dimmed); }
.phd-state.is-solved { color: var(--g-green-text); }
.phd-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font: 500 13.5px/1.4 var(--font-sans); color: var(--text-secondary); }
.phd-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dimmed); }
.phd-diff { font-weight: 700; }
.phd-diff.d-Easy { color: var(--g-green-text); }
.phd-diff.d-Medium { color: var(--g-yellow-text); }
.phd-diff.d-Hard { color: var(--g-red-text); }
.phd-due { color: var(--g-red-text); font-weight: 600; }

.phd-ver {
  margin-top: 8px; padding: 14px 16px 16px; display: grid; gap: 12px;
  border: 1px solid color-mix(in oklab, var(--g-blue) 22%, var(--border)); border-left: 2px solid var(--g-blue);
  border-radius: 0; background: color-mix(in oklab, var(--g-blue) 6%, var(--surface-1));
}
.phd-ver-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; min-width: 0; }
.phd-ver-k { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 700 16px/22px 'Plus Jakarta Sans', var(--font-sans); color: var(--text-primary); }
.phd-ver-k span {
  min-width: 24px; height: 22px; padding: 0 8px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px/1 var(--font-sans); color: #fff; background: var(--g-blue-text);
}
.phd-ver-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.phd-ver .uc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 17px; background: var(--surface-1);
  font: 600 13px/1 var(--font-sans); color: var(--text-primary); white-space: nowrap; cursor: pointer;
}
.phd-ver .uc-chip:hover { border-color: var(--g-blue-text); color: var(--g-blue-text); background: var(--surface-1); }
.phd-ver .uc-chip.is-on { background: var(--g-blue-text); border-color: var(--g-blue-text); color: #fff; }
.phd-ver .uc-chip .ico { color: var(--g-green-text); }
.phd-ver .uc-chip.is-on .ico { color: #fff; }
.phd-ver-sum { font: 500 13px/1.4 var(--font-sans); color: var(--g-blue-text); background: var(--surface-1); border: 1px solid color-mix(in oklab, var(--g-blue) 30%, var(--border)); border-radius: 0; padding: 5px 10px; }

#problemPane #panel-statement > .prose:first-child { padding-top: 18px; }
#problemPane .panel > .doc-sec:first-child { margin-top: 0; border-top: 0; }

/* ── Prepare look (cariara.com/prep/prepare and /labs): a crown header with
   the four-colour rule on a dotted band, 2px ink borders with hard offset
   shadows, tinted tiles, 800-weight display type, square corners; only
   pills and circles round. Dark values in dark.css. ── */
:root {
  --pz-ink: var(--text-primary);
  --pz-ink-2: var(--text-secondary);
  --pz-surface: var(--surface-1);
  --pz-shadow: #1f1f1f;
  --pz-dot: #dadce0;
  --pz-blue: #0077FF; --pz-red: #2B83EC; --pz-yellow: #9AD61A; --pz-green: #00866B;
  --pz-blue-t: #EEF3FE; --pz-red-t: #F2F7FF; --pz-yellow-t: #F7FDE6; --pz-green-t: #EEFBF6;
}
.plv { grid-template-rows: max-content; align-content: start; row-gap: 30px; padding-right: calc(var(--m3-pad, 28px) + 7px); }

/* Crown */
.pcr { min-height: min-content; flex-shrink: 0;
  position: relative; overflow: hidden; grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px 24px;
  padding: 34px 30px 26px; border: 1px solid var(--hairline);
  background: var(--pz-surface);
  box-shadow: none;
}
.pcr::before {
  content: ''; position: absolute; top: -64px; right: -52px; width: 170px; height: 170px; pointer-events: none; opacity: .9; transform: rotate(12deg);
  background:
    radial-gradient(circle at 72% 70%, var(--pz-green) 0 26px, transparent 27px),
    linear-gradient(var(--pz-red), var(--pz-red)) 22% 76% / 70px 16px no-repeat,
    linear-gradient(var(--pz-yellow), var(--pz-yellow)) 30% 26% / 78px 78px no-repeat;
}
.pcr-copy { position: relative; display: grid; justify-items: start; gap: 12px; }
.pcr-kicker {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--pz-surface); color: var(--pz-ink);
  font: 800 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: none;
}
.pcr-kicker svg { color: var(--text-secondary); }
.pcr h1 { margin: 0; font: 800 clamp(34px, 4.2vw, 52px)/1.02 var(--lv-display); letter-spacing: -.035em; color: var(--pz-ink); }
.pcr-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 420px; height: 52px; padding: 0 22px;
  border: 1px solid var(--hairline); background: var(--pz-blue); color: #fff; text-decoration: none;
  font: 800 15.5px/1 var(--font-sans); box-shadow: none; transition: transform .1s, box-shadow .1s;
}
.pcr-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcr-btn:hover { transform: none; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.pcr-btn:active { transform: none; box-shadow: none; }
.pcr-btn[hidden] { display: none; }
.pcr-stats { position: relative; grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pcr-card {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px 10px 12px;
  border: 1px solid var(--hairline); box-shadow: none; color: var(--pz-ink);
}
.pcr-well { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-secondary); }
.pcr-card b { font: 800 24px/1 var(--lv-display); letter-spacing: -.02em; }
.pcr-card small { font: 700 12.5px/1.2 var(--font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--pz-ink-2); }

/* Toolbar, topic cards and side cards: ink borders, hard shadows. */
.plv-bar, .plv-sec, .plv-card { border: 1px solid var(--hairline); box-shadow: none; }
.plv-bar { margin-bottom: 26px; padding: 10px; }
.plv-search { height: 40px; border: 1px solid var(--hairline); background: var(--pz-surface); }
.plv-act.is-primary { border: 1px solid var(--hairline); box-shadow: none; font-weight: 800; }
.plv-table { gap: 22px; }
.plv-sec { --lv-tone: var(--pz-blue); --lv-tint: var(--pz-blue-t); }
.plv-sec:nth-child(4n+2) { --lv-tone: var(--pz-red); --lv-tint: var(--pz-red-t); }
.plv-sec:nth-child(4n+3) { --lv-tone: var(--pz-yellow); --lv-tint: var(--pz-yellow-t); }
.plv-sec:nth-child(4n+4) { --lv-tone: var(--pz-green); --lv-tint: var(--pz-green-t); }
.plv-sec-h { height: 52px; background: var(--lv-tint); border-bottom: 1px solid var(--hairline); }
.plv-sec-h:hover { background: var(--lv-tint); filter: brightness(.97); }
.plv-sec.is-shut .plv-sec-h { border-bottom: 0; }
.plv-sec-t { display: inline-flex; align-items: center; gap: 12px; font: 800 17px/1.2 var(--lv-display); letter-spacing: -.015em; color: var(--pz-ink); }
.plv-sec-t::before { content: ''; flex: none; width: 14px; height: 14px; border: 1px solid var(--hairline); background: var(--lv-tone); box-shadow: none; transform: rotate(12deg); }
.plv-sec-n { padding: 5px 10px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--pz-surface); font: 800 12px/1 var(--font-mono); color: var(--pz-ink); }
.plv-sec-n.is-done { border-color: var(--success); color: var(--success); }
.plv-meter { height: 6px; background: var(--pz-surface); border: 1px solid var(--pz-edge); }
.plv-meter i { background: var(--lv-tone); }
.plv-row .plv-title { font-weight: 600; }
.plv-card-h { font: 800 12px/1 var(--font-mono); color: var(--pz-ink); letter-spacing: .06em; }
.plv-gauge b, .rmv-head h1, .gd-top h1, #viewGuides .gd-head h1 { font-weight: 800 !important; letter-spacing: -.025em; }
.fchip-b, .plv-act { height: 40px; border: 1px solid var(--hairline); border-radius: 0; background: var(--pz-surface); color: var(--pz-ink); font-weight: 700; }
.fchip-b:hover, .plv-act:hover { border-color: var(--pz-ink); box-shadow: none; }
.plv-act.is-primary { background: var(--pz-blue); color: #fff; }
html[data-scheme="dark"] .plv-act.is-primary { color: #10161E; }

/* Workspace and Codepad: each pane is an ink-bordered card on a hard shadow. */
.layout { padding: 16px calc(var(--m3-pad, 24px) + 6px) 20px var(--m3-pad, 24px); background: var(--ground); }
.layout > .pane, .pgv-split { border: 1px solid var(--hairline) !important; box-shadow: none; }
.pane-head, .pgv .console-head { border-bottom: 1px solid var(--hairline) !important; }
.pgv { padding: 0 calc(var(--m3-pad, 24px) + 6px) 22px var(--m3-pad, 24px); background: var(--ground); }
.pgv-split { margin-top: 4px; }
.btn-primary { border: 1px solid var(--hairline) !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 800 !important; }
.btn-primary:hover:not(:disabled) { transform: none; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15) !important; }
.btn-primary:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pz-shadow) !important; }
.btn-secondary, .pgv-tests { border: 1px solid var(--hairline) !important; border-radius: 0 !important; box-shadow: none !important; font-weight: 700; }

/* Learn, Roadmap, Practice: the chunky chips of /labs. */
#modeTabs { gap: 8px; }
#modeTabs .mode-tab { height: 38px; padding: 0 16px; border: 1px solid var(--hairline); border-radius: 999px; font: 800 14px/1 var(--lv-display); color: var(--pz-ink); }
#modeTabs .mode-tab:hover { border-color: var(--pz-ink); background: transparent; }
#modeTabs .mode-tab.is-on, #modeTabs .mode-tab.is-on:hover { border-color: var(--pz-ink); background: var(--pz-surface); color: var(--pz-ink); box-shadow: none; }
#modeTabs .mode-tab.is-on:nth-child(n) .ico { color: inherit; }

/* Gen-Z controls: chunky pills with a 2px rule; the one that is on takes
   ink, a tint and a hard offset shadow, and presses down on click. */
#langSwitch { gap: 4px; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--pz-surface); }
#langSwitch .lang-pill { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--pz-ink-2); font: 800 13px/1 var(--lv-display); }
#langSwitch .lang-pill.is-on { background: var(--pz-blue); color: #fff; }
html[data-scheme="dark"] #langSwitch .lang-pill.is-on { color: #10161E; }
#viewPlayground .lang-tab, #viewPlayground .lang-group {
  height: 36px !important; border: 1px solid var(--hairline) !important; border-radius: 999px !important;
  background: var(--pz-surface) !important; color: var(--pz-ink) !important; font: 800 13px/1 var(--lv-display) !important; box-shadow: none !important;
}
#viewPlayground .lang-tab:hover, #viewPlayground .lang-group:hover { border-color: var(--pz-ink) !important; }
#viewPlayground .lang-tab.is-on, #viewPlayground .lang-group.is-on {
  border-color: var(--pz-ink) !important; background: var(--pz-blue-t) !important; box-shadow: none !important;
}
#modeTabs .mode-tab:active, #viewPlayground .lang-tab:active { transform: translate(2px, 2px); box-shadow: none !important; }
.topbar { border-bottom: 1px solid var(--hairline) !important; }

/* ── Learn (guides) and Roadmap in the Prepare look ── */
/* Headers: a crown on a plain band. */
#viewGuides .gd-head, #viewGuides .gd-top, #viewRoadmap .rmv-head {
  position: relative; overflow: hidden; padding: 34px 30px 24px !important; margin-bottom: 26px;
  border: 1px solid var(--hairline) !important; border-radius: 0 !important; box-shadow: none;
  background: var(--pz-surface) !important;
}
#viewGuides .gd-head::before, #viewGuides .gd-top::before, #viewRoadmap .rmv-head::before {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px; margin-bottom: 12px;
  border: 1px solid var(--hairline); border-radius: 999px; box-shadow: none;
  font: 800 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pz-ink);
}
#viewGuides .gd-head::before, #viewGuides .gd-top::before { content: 'Learn'; }
#viewRoadmap .rmv-head::before { content: 'Roadmap'; position: absolute; top: 22px; left: 30px; }
#viewRoadmap .rmv-head { padding-top: 62px !important; margin: 0 calc(var(--m3-pad, 28px) + 7px) 26px var(--m3-pad, 28px) !important; }
#viewGuides .gd-head h1, #viewGuides .gd-top h1, #viewRoadmap .rmv-head h1 {
  font: 800 clamp(32px, 3.6vw, 48px)/1.04 var(--lv-display) !important; letter-spacing: -.035em !important; color: var(--pz-ink) !important;
}
#viewGuides .gd-head p { font: 500 16px/1.55 var(--font-sans); color: var(--pz-ink-2); }

/* Cards: ink rules, hard shadows, a tinted head by tone. */
#viewGuides .gd-card, #viewGuides .gd-card[data-tone] {
  border: 1px solid var(--hairline) !important; box-shadow: none !important; padding: 18px 20px !important;
}
#viewGuides .gd-flow, #viewGuides .gd-rows, #viewGuides .gd-row, #viewGuides .gd-grid { gap: 20px !important; }
#viewGuides .gd-h { font: 800 12.5px/1 var(--font-mono) !important; color: var(--pz-ink) !important; }
#viewGuides .gd-h::before { content: ''; width: 11px; height: 11px; border: 1px solid var(--hairline); background: var(--gd-tone, var(--pz-blue)); transform: rotate(12deg); }
#viewGuides .gd-card[data-tone="red"] { --gd-tone: var(--pz-red); }
#viewGuides .gd-card[data-tone="yellow"] { --gd-tone: var(--pz-yellow); }
#viewGuides .gd-card[data-tone="green"] { --gd-tone: var(--pz-green); }
#viewGuides .gd-tier { background: var(--pz-blue-t) !important; }
#viewGuides .gd-tier[data-tone="green"] { background: var(--pz-green-t) !important; }
#viewGuides .gd-tier[data-tone="yellow"] { background: var(--pz-yellow-t) !important; }
#viewGuides .gd-tier[data-tone="red"] { background: var(--pz-red-t) !important; }
#viewGuides .gd-tier-n { font: 800 40px/1 var(--lv-display) !important; letter-spacing: -.03em; }
#viewGuides .gd-tier-l { font: 800 13px/1.2 var(--font-mono) !important; text-transform: uppercase; letter-spacing: .05em; color: var(--pz-ink) !important; }
#viewGuides .gd-chip { border: 1px solid var(--hairline) !important; border-radius: 999px !important; font-weight: 700 !important; color: var(--pz-ink) !important; background: var(--pz-surface) !important; }
#viewGuides .gd-chip:hover { box-shadow: none; }
#viewGuides .gd-n { border: 1px solid var(--hairline); border-radius: 999px; background: var(--pz-surface); font: 800 11px/1 var(--font-mono); color: var(--pz-ink); }
.gd-top-bar { height: 8px; border: 1px solid var(--hairline); background: var(--pz-surface); }

/* The guides nav: section heads in mono, the open guide as a chunky chip. */
#viewGuides .gd-nav { border-right: 1px solid var(--hairline) !important; }
#viewGuides .gd-nav-h { font: 800 11.5px/1 var(--font-mono) !important; color: var(--pz-ink) !important; letter-spacing: .06em; }
#viewGuides .gd-nav-i { border: 1px solid transparent; font-weight: 600; }
#viewGuides .gd-nav-i:hover { border-color: var(--pz-ink); background: transparent; }
#viewGuides .gd-nav-i.is-on { border-color: var(--pz-ink) !important; background: var(--pz-blue-t) !important; color: var(--pz-ink) !important; font-weight: 800; box-shadow: none; }

/* Roadmap: tinted stat tiles, ink nodes on hard shadows, numbered stages. */
#viewRoadmap .rmv-tiles { gap: 14px !important; }
#viewRoadmap .rmv-tile { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border: 1px solid var(--hairline); box-shadow: none; background: var(--pz-blue-t); }
#viewRoadmap .rmv-tile:nth-child(2) { background: var(--pz-red-t); }
#viewRoadmap .rmv-tile:nth-child(3) { background: var(--pz-green-t); }
#viewRoadmap .rmv-tile b { font: 800 26px/1 var(--lv-display) !important; color: var(--pz-ink) !important; }
#viewRoadmap .rmv-tile span { font: 800 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--pz-ink-2); }
#viewRoadmap .rmv-bar { height: 10px !important; border: 1px solid var(--hairline); background: var(--pz-surface) !important; }
#viewRoadmap .rmv-node {
  border: 1px solid var(--hairline) !important; border-radius: 0 !important; background: var(--pz-surface) !important;
  box-shadow: none !important; transition: transform .12s, box-shadow .12s, background-color .12s;
}
#viewRoadmap .rmv-node:hover:not(:disabled) { transform: none; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15) !important; background: var(--pz-blue-t) !important; }
#viewRoadmap .rmv-node:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none !important; }
#viewRoadmap .rmv-node.is-part { background: var(--pz-yellow-t) !important; }
#viewRoadmap .rmv-node.is-done { background: var(--pz-green-t) !important; }
#viewRoadmap .rmv-node.is-sel { box-shadow: none !important; background: var(--pz-blue-t) !important; }
#viewRoadmap .rmv-label { font: 800 15px/1.25 var(--lv-display) !important; color: var(--pz-ink) !important; }
#viewRoadmap .rmv-meta { font: 800 12px/1 var(--font-mono) !important; color: var(--pz-ink) !important; }
#viewRoadmap .rmv-track { height: 6px !important; border: 1px solid var(--pz-edge); background: var(--pz-surface) !important; }
#viewRoadmap .rmv-track span { background: var(--pz-green) !important; }
#viewRoadmap .rmv-stage-n { display: inline-grid; place-items: center; min-width: 30px; height: 24px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--pz-surface); font: 800 11.5px/1 var(--font-mono); color: var(--pz-ink); }
#viewRoadmap .rmv-stage-l { font: 800 14px/1 var(--lv-display); color: var(--pz-ink); }
#viewRoadmap .rmv-stage-c { font: 700 12px/1 var(--font-mono); color: var(--pz-ink-2); }
#viewRoadmap .rmv-stage-rule { border-top: 1px dashed var(--hairline); background: none; height: 0; }
#viewRoadmap .rmv-panel { border: 1px solid var(--hairline) !important; box-shadow: none; }
#viewGuides .gd-top::before { position: absolute; top: 22px; left: 30px; }
#viewGuides .gd-top { padding-top: 62px !important; }
#viewGuides .gd-head, #viewGuides .gd-top { flex: none !important; height: auto !important; overflow: hidden; }
#viewGuides .gd-body { grid-auto-rows: max-content; align-content: start; }
#viewGuides .gd-head { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; }
#viewGuides .gd-head::before, #viewGuides .gd-top::before { flex: none; }

/* ── Codepad in the full Prepare look: its bar is a crown band with a kicker
   and an 800-weight title beside the language chips. ── */
.pgv > .pgv-bar {
  position: relative; height: auto !important; flex: none !important; flex-wrap: wrap; gap: 10px 14px !important;
  margin-top: 16px; padding: 24px 20px 16px !important; border: 1px solid var(--hairline) !important; box-shadow: none;
  background: var(--pz-surface) !important;
}
.pgv-crown-t { display: flex; align-items: center; gap: 12px; margin-right: 8px; }
.pgv-crown-t h1 { margin: 0; font: 800 30px/1 var(--lv-display); letter-spacing: -.03em; color: var(--pz-ink); }
.pgv > .pgv-actions { margin-top: 18px; padding: 0 !important; border: 0 !important; background: transparent !important; gap: 10px; }
.pgv-tools { gap: 8px; }
.pgv-tools .btn { height: 34px; padding: 0 14px; border: 1px solid var(--hairline) !important; border-radius: 0 !important; background: var(--pz-surface) !important; color: var(--pz-ink) !important; font-weight: 800 !important; }
.pgv-tools .btn:hover { box-shadow: none; }
.pgv-tools .btn[aria-pressed="true"] { background: var(--pz-blue-t) !important; box-shadow: none; }
#pgRun { height: 40px; padding: 0 22px; font-size: 15px; }

/* Console and result tabs everywhere in PPG: chunky chips. */
.tabbar.sm { gap: 8px; align-items: center; padding: 0 8px; }
.tabbar.sm .tab { height: 32px; padding: 0 14px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--pz-surface); color: var(--pz-ink); font: 800 13px/1 var(--lv-display); }
.tabbar.sm .tab::after { display: none !important; }
.tabbar.sm .tab:hover { border-color: var(--pz-ink); }
.tabbar.sm .tab.is-on { border-color: var(--pz-ink); background: var(--pz-blue-t); box-shadow: none; }
.console-head { min-height: 52px; }
.docnav-b { font-weight: 800 !important; }
#viewPlayground .pgv-split { width: auto !important; align-self: stretch; margin-right: 0 !important; }
#viewPlayground .pgv-actions { background: transparent !important; box-shadow: none !important; }
#viewPlayground .lang-groups { padding: 3px; border: 1px solid var(--hairline); border-radius: 999px !important; background: var(--pz-surface) !important; }
#viewPlayground .lang-groups .lang-group { border: 0 !important; }
#viewPlayground .lang-groups .lang-group.is-on { background: var(--pz-blue) !important; color: var(--pz-surface) !important; box-shadow: none !important; }
#viewPlayground .pgv-labs-btn { height: 36px; padding: 0 16px; border-radius: 999px !important; border-color: var(--hairline) !important; background: var(--pz-surface) !important; color: var(--pz-ink) !important; font-family: var(--lv-display) !important; }
#viewPlayground .pgv-labs-btn:hover { border-color: var(--pz-ink) !important; }
#viewPlayground .pgv-labs-btn.is-on { border-color: var(--pz-ink) !important; background: var(--pz-green-t) !important; box-shadow: none !important; }

/* ── Codepad: file tab, run state, empty output, status bar ──
   One 48px header height for the editor and the console, 2px ink rules
   between every region, tints only from the Google four. */
#viewPlayground .pgv-editor { display: flex; flex-direction: column; min-height: 0; }
#viewPlayground .pgv-editor > .CodeMirror { flex: 1 1 auto; height: auto !important; min-height: 0; }
.pgv-file { flex: none; display: flex; align-items: stretch; height: 48px; border-bottom: 1px solid var(--hairline); background: var(--pz-surface); }
.pgv-file-tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-right: 1px solid var(--hairline);
  background: var(--pz-blue-t); box-shadow: inset 0 4px 0 var(--pz-blue); color: var(--pz-ink); }
.pgv-file-tab svg { color: var(--text-secondary); }
.pgv-file-tab b { font: 800 13px/1 var(--font-mono); letter-spacing: .01em; }
.pgv-file-rt { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font: 700 12px/1 var(--font-sans); color: var(--pz-ink-2); }
.pgv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pz-green); box-shadow: 0 0 0 2px var(--pz-green-t); }
.pgv-dot.is-remote { background: var(--pz-blue); box-shadow: 0 0 0 2px var(--pz-blue-t); }
.pgv-file-pos { margin-left: auto; display: inline-flex; align-items: center; padding: 0 16px; border-left: 1px solid var(--hairline); font: 700 12px/1 var(--font-mono); color: var(--pz-ink-2); font-variant-numeric: tabular-nums; }
#viewPlayground .console-head { height: 48px; min-height: 48px; padding: 0 12px 0 4px; }

.pgv-state { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; margin-right: 10px;
  border: 1px solid var(--hairline); border-radius: 999px; font: 800 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pz-ink); }
.pgv-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pgv-state.is-running { background: var(--pz-blue-t); }
.pgv-state.is-running::before { background: var(--pz-blue); animation: pgv-pulse 1s ease-in-out infinite; }
.pgv-state.is-ok { background: var(--pz-green-t); } .pgv-state.is-ok::before { background: var(--pz-green); }
.pgv-state.is-err { background: var(--err-t); } .pgv-state.is-err::before { background: var(--err); }
@keyframes pgv-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .pgv-state.is-running::before { animation: none; } }
#viewPlayground .timing { font: 700 12px/1 var(--font-mono); color: var(--pz-ink-2); font-variant-numeric: tabular-nums; }

#pgout-output:empty { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
#pgout-output:empty::before { content: 'Run to see output'; font: 800 17px/1.2 var(--lv-display); color: var(--pz-ink); }
#pgout-output:empty::after { content: '⌘  ↵'; padding: 6px 12px; border: 1px solid var(--hairline); box-shadow: none;
  background: var(--pz-surface); font: 800 13px/1 var(--font-mono); color: var(--pz-ink); letter-spacing: .1em; }
#pgout-output:not(.is-on):empty { display: none !important; }

.pgv-kbd { margin-left: 4px; padding: 3px 6px; border: 1px solid currentColor; font: 700 11px/1 var(--font-mono); opacity: .75; }

.pgv-status { flex: none; display: flex; align-items: stretch; height: 30px; margin-top: 12px; border: 1px solid var(--hairline); background: var(--pz-surface);
  font: 800 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--pz-ink-2); }
.pgv-status > span { display: inline-flex; align-items: center; padding: 0 14px; border-right: 1px solid var(--hairline); }
.pgv-status > .pgv-st-lang { background: var(--pz-blue-t); border-right: 1px solid var(--hairline); color: var(--pz-ink); }
.pgv-status > .pgv-st-save { margin-left: auto; border-right: 0; border-left: 1px solid var(--hairline); background: var(--pz-yellow-t); color: var(--pz-ink); }
.pgv-status > .pgv-st-save.is-saved { background: var(--pz-green-t); }
.pgv-kbd { padding: 3px 7px; font: 700 13px/1 var(--font-sans); letter-spacing: .08em; }
#pgout-output:empty::after { font: 800 15px/1 var(--font-sans); }
#viewPlayground .pgv-tools .btn, #viewPlayground #pgRun { height: 40px; }

/* ── Crowns at 70%, as on Prepare and Labs ── */
.pcr { gap: 15px 17px; padding: 24px 21px 18px; box-shadow: none;
  background: var(--pz-surface); }
.pcr::after { height: 6px; }
.pcr::before { top: -45px; right: -36px; width: 119px; height: 119px;
  background:
    radial-gradient(circle at 72% 70%, var(--pz-green) 0 18px, transparent 19px),
    linear-gradient(var(--pz-red), var(--pz-red)) 22% 76% / 49px 11px no-repeat,
    linear-gradient(var(--pz-yellow), var(--pz-yellow)) 30% 26% / 55px 55px no-repeat; }
.pcr-copy { gap: 8px; }
.pcr-kicker { height: 20px; padding: 0 8px 0 6px; font-size: 9px; box-shadow: none; }
.pcr h1 { font-size: clamp(24px, 2.9vw, 36px); }
.pcr-btn { height: 36px; padding: 0 15px; font-size: 11px; box-shadow: none; }
.pcr-stats { gap: 10px; }
.pcr-card { min-height: 42px; padding: 7px 11px 7px 8px; gap: 8px; box-shadow: none; }
.pcr-well { width: 24px; height: 24px; }
.pcr-well svg { width: 11px; height: 11px; }
.pcr-card b { font-size: 17px; }
.pcr-card small { font-size: 9px; }
#viewGuides .gd-head, #viewGuides .gd-top, #viewRoadmap .rmv-head { padding: 24px 21px 17px !important; margin-bottom: 18px; box-shadow: none; }
#viewGuides .gd-top, #viewRoadmap .rmv-head { padding-top: 43px !important; }
#viewGuides .gd-head::after, #viewGuides .gd-top::after, #viewRoadmap .rmv-head::after { height: 6px; }
#viewGuides .gd-head::before, #viewGuides .gd-top::before, #viewRoadmap .rmv-head::before { height: 20px; padding: 0 8px; margin-bottom: 8px; font-size: 9px; box-shadow: none; }
#viewGuides .gd-top::before, #viewRoadmap .rmv-head::before { top: 15px; left: 21px; }
#viewGuides .gd-head h1, #viewGuides .gd-top h1, #viewRoadmap .rmv-head h1 { font-size: clamp(22px, 2.5vw, 34px) !important; }
#viewGuides .gd-head p { font-size: 13px; }
#viewRoadmap .rmv-tile { padding: 8px 11px; box-shadow: none; }
#viewRoadmap .rmv-tile b { font-size: 18px !important; }
#viewRoadmap .rmv-tile span { font-size: 9px; }
.pgv > .pgv-bar { padding: 17px 14px 11px !important; box-shadow: none; }
.pgv > .pgv-bar::after { height: 6px; }
.pgv-crown-t h1 { font-size: 21px; }

/* ── The Labs colour scheme: greys and one blue accent; colour otherwise only
   in the crown's four-colour rule, its stat tiles and small state dots. ── */
.plv-sec, .plv-sec:nth-child(n) { --lv-tone: var(--pz-blue) !important; --lv-tint: var(--surface-2, var(--pz-surface)) !important; }
.plv-sec-t::before { background: var(--text-dimmed) !important; }
#viewGuides .gd-card[data-tone], #viewGuides .gd-card { --gd-tone: var(--text-dimmed) !important; }
#viewGuides .gd-tier, #viewGuides .gd-tier[data-tone] { background: var(--surface-2, var(--pz-surface)) !important; }
#viewRoadmap .rmv-tile, #viewRoadmap .rmv-tile:nth-child(n) { background: var(--surface-2, var(--pz-surface)) !important; }
#viewRoadmap .rmv-node.is-part, #viewRoadmap .rmv-node.is-done { background: var(--pz-surface) !important; }
#viewRoadmap .rmv-node:hover:not(:disabled), #viewRoadmap .rmv-node.is-sel { background: var(--pz-blue-t) !important; }
#viewRoadmap .rmv-track span { background: var(--pz-blue) !important; }
.pgv-status > .pgv-st-lang, .pgv-status > .pgv-st-save, .pgv-status > .pgv-st-save.is-saved { background: var(--pz-surface) !important; }
.pgv-state.is-ok, .pgv-state.is-err, .pgv-state.is-running { background: var(--pz-surface) !important; }
.pgv-file-tab { background: var(--pz-surface) !important; }
.pgv-tools .btn[aria-pressed="true"] { background: var(--pz-blue-t) !important; }
#viewPlayground .pgv-labs-btn.is-on { background: var(--pz-blue-t) !important; box-shadow: none !important; }

/* ── Problem and Solution as two numbered steps ──
   1 · Problem: the versions as chips, then the chosen one said plainly.
   2 · Solution: the approaches as a short table (approach, time, space,
   which is recommended); the open one is marked in the accent. */
.step-n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pz-blue); color: var(--pz-surface); font: 800 12px/1 var(--font-mono); }
.phd-ver { display: grid; gap: 10px; padding: 14px 16px !important; border: 1px solid var(--hairline) !important; border-left: 2px solid var(--pz-blue) !important;
  background: var(--surface-1) !important; box-shadow: none !important; }
.phd-ver-head { display: flex; align-items: center; gap: 10px; }
.phd-ver-k { margin: 0; font: 800 16px/1.2 var(--lv-display) !important; color: var(--text-primary) !important; }
.phd-ver-count { font: 600 12.5px/1 var(--font-sans); color: var(--text-dimmed); }
.phd-ver-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.phd-ver .uc-chip { height: auto !important; min-height: 30px; max-width: 100%; padding: 5px 12px !important; white-space: normal; text-align: left; overflow-wrap: anywhere; border: 1px solid var(--hairline) !important; border-radius: 999px !important;
  background: var(--surface-1) !important; color: var(--text-primary) !important; font: 600 13px/1.3 var(--font-sans) !important; box-shadow: none !important; }
.phd-ver .uc-chip:hover { border-color: var(--text-dimmed) !important; }
.phd-ver .uc-chip.is-on { border-color: var(--pz-blue) !important; background: var(--pz-blue-t) !important; color: var(--text-primary) !important; box-shadow: inset 0 0 0 1px var(--pz-blue) !important; }
.phd-ver .uc-chip .ico { color: var(--success); }
.phd-ver-ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 10px 12px; background: var(--surface-2, var(--ground));
  border-left: 2px solid var(--text-dimmed); font: 500 14px/1.5 var(--font-sans); color: var(--text-secondary); }
.phd-ver-ask b { font: 800 14px/1.5 var(--lv-display); color: var(--text-primary); }
.phd-ver-sum { display: none !important; }

.sol-step { display: flex !important; align-items: center; gap: 10px; font: 800 16px/1.2 var(--lv-display) !important; }
.sol-step-count { font: 600 12.5px/1 var(--font-sans); color: var(--text-dimmed); }
.sol-nav { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.sol-list { display: grid; border: 1px solid var(--hairline); background: var(--surface-1); }
.sol-list-h, .sol-list .sol-pill { display: grid !important; grid-template-columns: 34px minmax(0, 1fr) 110px 90px 22px; align-items: center; gap: 10px; padding: 0 12px; }
.sol-list-h { height: 32px; background: var(--surface-2, var(--ground)); border-bottom: 1px solid var(--hairline); font: 700 12px/1 var(--font-sans); color: var(--text-secondary); }
.sol-list .sol-pill { height: auto !important; min-height: 42px; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--hairline) !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; text-align: left; color: var(--text-primary) !important; cursor: pointer; }
.sol-list .sol-list-h + .sol-pill { border-top: 0 !important; }
.sol-list .sol-pill:hover { background: var(--surface-2, var(--ground)) !important; }
.sol-list .sol-pill.is-on { background: var(--pz-blue-t) !important; box-shadow: inset 3px 0 0 var(--pz-blue) !important; }
.sol-list .sol-pill-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--hairline) !important; border-radius: 50%;
  background: var(--surface-1) !important; color: var(--text-secondary) !important; font: 700 11.5px/1 var(--font-mono); }
.sol-list .sol-pill.is-on .sol-pill-n { background: var(--pz-blue) !important; border-color: var(--pz-blue) !important; color: var(--pz-surface) !important; }
.sol-list .sol-pill-t { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 14px/1.35 var(--font-sans); white-space: normal; }
.sol-list .sol-pill-cx { font: 600 12.5px/1 var(--font-mono) !important; color: var(--text-secondary) !important; }
.sol-list .sol-pill-go { color: var(--text-dimmed); font-size: 18px; }
.sol-best { flex: none; padding: 3px 7px; border: 1px solid var(--success); font: 700 10.5px/1 var(--font-sans); font-style: normal; color: var(--success); text-transform: uppercase; letter-spacing: .04em; }

/* ── Codepad workspace (2026-10-04): a standard coding-platform layout ──
   One slim top bar (title, Labs, Platform/DevOps, language tabs); the brief
   on the left; on the right the editor with its toolbar joined on top, and
   the console below with its tabs in the order you use them and Run at the
   right end. Flat 1px borders, no offset shadows, square corners. */
#viewPlayground#viewPlayground { --cp-gap: 12px; --cp-head: 44px; font-size: 14px; }
#viewPlayground#viewPlayground .btn, #viewPlayground#viewPlayground .tab, #viewPlayground#viewPlayground .lang-tab,
#viewPlayground#viewPlayground .lang-group, #viewPlayground#viewPlayground .pgv-editor, #viewPlayground#viewPlayground .pgv-console,
#viewPlayground#viewPlayground .pgv-status, #viewPlayground#viewPlayground .pgv-tools, #viewPlayground#viewPlayground > .pgv-bar,
#viewPlayground#viewPlayground .pgv-brief { box-shadow: none !important; border-radius: 0 !important; }

/* Top bar */
#viewPlayground#viewPlayground > .pgv-bar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 14px !important; padding: 10px 14px !important; border: 1px solid var(--border) !important; background: var(--surface-1) !important; }
#viewPlayground#viewPlayground .pgv-crown-t { display: flex; align-items: center; gap: 10px; margin: 0 6px 0 0 !important; }
#viewPlayground#viewPlayground .pgv-crown-t h1 { font: 700 18px/1 var(--lv-display) !important; letter-spacing: -.01em; margin: 0; }
#viewPlayground#viewPlayground .pgv-crown-t .pcr-kicker { height: 20px; padding: 0 7px; font-size: 10px; }
#viewPlayground#viewPlayground .pgv-labs-btn { height: 30px !important; padding: 0 12px !important; font: 600 13px/1 var(--lv-display) !important; border: 1px solid var(--border) !important; background: var(--surface-2) !important; color: var(--text-primary) !important; }
#viewPlayground#viewPlayground .pgv-labs-btn.is-on { background: var(--g-blue) !important; border-color: var(--g-blue) !important; color: #fff !important; }
#viewPlayground#viewPlayground .lang-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 2px !important; align-items: center; min-width: 0; flex: 1 1 auto; scrollbar-width: none; }
#viewPlayground#viewPlayground .lang-tabs::-webkit-scrollbar { display: none; }
#viewPlayground#viewPlayground .lang-sep { width: 1px !important; height: 18px !important; margin: 0 6px; background: var(--border) !important; flex: none; }
#viewPlayground#viewPlayground .lang-groups { padding: 2px !important; gap: 2px; border: 1px solid var(--border) !important; background: var(--surface-2) !important; flex: none; }
#viewPlayground#viewPlayground .lang-tab, #viewPlayground#viewPlayground .lang-group { height: 30px !important; padding: 0 11px !important; font: 600 13px/1 var(--lv-display) !important; border: 1px solid transparent !important; background: transparent !important; color: var(--text-secondary) !important; flex: none; white-space: nowrap; }
#viewPlayground#viewPlayground .lang-groups .lang-group { height: 24px !important; }
#viewPlayground#viewPlayground .lang-tab:hover, #viewPlayground#viewPlayground .lang-group:hover { color: var(--text-primary) !important; background: var(--surface-2) !important; }
#viewPlayground#viewPlayground .lang-group.is-on { color: var(--g-blue-text) !important; background: var(--surface-1) !important; border-color: var(--g-blue) !important; }
#viewPlayground#viewPlayground .lang-tab.is-on { color: var(--g-blue-text) !important; background: transparent !important; box-shadow: inset 0 -2px 0 var(--g-blue) !important; }
#viewPlayground#viewPlayground .lang-tab.is-on svg, #viewPlayground#viewPlayground .lang-group.is-on svg { color: currentColor !important; }

/* Body: brief left, workspace right */
#viewPlayground#viewPlayground .pgv-body { gap: var(--cp-gap) !important; margin-top: var(--cp-gap) !important; }
#viewPlayground#viewPlayground .pgv-brief { border: 1px solid var(--border) !important; background: var(--surface-1) !important; }

/* Toolbar joined to the top of the editor */
#viewPlayground#viewPlayground .pgv-actions { margin: 0 !important; padding: 0 !important; gap: 0 !important; border: 1px solid var(--border) !important; border-bottom: 0 !important; background: var(--surface-2) !important; display: flex; justify-content: flex-end; }
#viewPlayground#viewPlayground .pgv-tools { display: flex; gap: 0 !important; border: 0 !important; background: transparent !important; flex-wrap: wrap; }
#viewPlayground#viewPlayground .pgv-tools .btn { height: 34px !important; padding: 0 12px !important; font: 600 12.5px/1 var(--lv-display) !important; border: 0 !important; border-left: 1px solid var(--border) !important; background: transparent !important; color: var(--text-secondary) !important; }
#viewPlayground#viewPlayground .pgv-tools .btn:hover { color: var(--text-primary) !important; background: var(--surface-3) !important; }
#viewPlayground#viewPlayground .pgv-tools .btn[aria-pressed="true"] { color: var(--g-blue-text) !important; }

/* Editor and console panels */
#viewPlayground#viewPlayground .pgv-split { gap: var(--cp-gap) !important; }
#viewPlayground#viewPlayground .pgv-editor, #viewPlayground#viewPlayground .pgv-console { border: 1px solid var(--border) !important; background: var(--surface-1) !important; }
#viewPlayground#viewPlayground .pgv-file, #viewPlayground#viewPlayground .console-head { height: var(--cp-head) !important; min-height: var(--cp-head) !important; padding: 0 10px 0 0 !important; border-bottom: 1px solid var(--border) !important; background: var(--surface-2) !important; display: flex; align-items: center; gap: 8px; }
#viewPlayground#viewPlayground .pgv-file-tab { height: 100%; padding: 0 14px !important; display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--border); background: var(--surface-1); font: 600 13px/1 var(--font-mono, monospace) !important; box-shadow: inset 0 2px 0 var(--g-blue) !important; }
#viewPlayground#viewPlayground .pgv-file-rt, #viewPlayground#viewPlayground .pgv-file-pos { font-size: 12px !important; color: var(--text-muted) !important; }
#viewPlayground#viewPlayground .pgv-file-pos { margin-left: auto; }
#viewPlayground#viewPlayground .CodeMirror, #viewPlayground#viewPlayground .CodeMirror pre { font-size: 14px !important; line-height: 1.65 !important; }
#viewPlayground#viewPlayground .CodeMirror-gutters { border-right: 1px solid var(--border) !important; background: var(--surface-1) !important; }
#viewPlayground#viewPlayground .CodeMirror-gutter.CodeMirror-linenumbers { width: 52px !important; }
#viewPlayground#viewPlayground .CodeMirror-linenumber { box-sizing: border-box !important; width: 52px !important; min-width: 0 !important; text-align: left !important; padding: 0 8px 0 16px !important; font-size: 12.5px !important; color: var(--text-muted) !important; }
#viewPlayground#viewPlayground .CodeMirror-lines { padding: 12px 14px 12px 12px !important; }

/* Console: tabs as underlined text, Run at the right end */
#viewPlayground#viewPlayground .console-head .tabbar { display: flex; gap: 0 !important; height: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; overflow-x: auto; scrollbar-width: none; min-width: 0; }
#viewPlayground#viewPlayground .console-head .tab { height: 100% !important; padding: 0 14px !important; border: 0 !important; background: transparent !important; color: var(--text-secondary) !important; font: 600 13px/1 var(--lv-display) !important; white-space: nowrap; }
#viewPlayground#viewPlayground .console-head .tab:hover { color: var(--text-primary) !important; }
#viewPlayground#viewPlayground .console-head .tab.is-on { color: var(--text-primary) !important; box-shadow: inset 0 -2px 0 var(--g-blue) !important; background: var(--surface-1) !important; }
#viewPlayground#viewPlayground .console-head .timing, #viewPlayground#viewPlayground .pgv-state { font-size: 12px !important; color: var(--text-muted) !important; white-space: nowrap; }
#viewPlayground#viewPlayground .pgv-runbar { display: flex; gap: 8px; align-items: center; flex: none; }
#viewPlayground#viewPlayground .pgv-runbar .btn { height: 32px !important; min-height: 32px !important; padding: 0 16px !important; font: 700 13px/1 var(--lv-display) !important; margin: 0 !important; transform: none !important; }
#viewPlayground#viewPlayground .pgv-runbar #pgRun { background: var(--g-blue) !important; border: 1px solid var(--g-blue) !important; color: #fff !important; gap: 8px; }
#viewPlayground#viewPlayground .pgv-runbar #pgRun:hover { filter: brightness(1.08); }
#viewPlayground#viewPlayground .pgv-runbar #pgRun .pgv-kbd { font-size: 11px !important; padding: 2px 5px !important; border: 1px solid rgba(255,255,255,.45) !important; background: transparent !important; color: #fff !important; }
#viewPlayground#viewPlayground .pgv-runbar .pgv-tests { background: transparent !important; border: 1px solid var(--g-green) !important; color: var(--g-green-text) !important; }
#viewPlayground#viewPlayground .console-body .out { padding: 12px 14px !important; }
#viewPlayground#viewPlayground #pgout-stdin { padding: 0 !important; white-space: normal !important; } /* .out is pre-wrap: the markup's indent before the textarea would render as a blank line */
#viewPlayground#viewPlayground .console-body .stdin { display: block !important; width: 100% !important; height: 100% !important; min-height: 120px; box-sizing: border-box; resize: none; padding: 12px 14px !important; border: 0 !important; background: transparent !important; }


/* Toolbar sits flush on the editor; the console keeps room for output */
#viewPlayground#viewPlayground .pgv-split { margin-top: 0 !important; }
#viewPlayground#viewPlayground .pgv-console { min-height: 200px; }
#viewPlayground#viewPlayground .pgv-tools .btn:not([hidden]) { display: inline-flex !important; align-items: center; }
#viewPlayground#viewPlayground .pgv-runbar #pgRun { height: 32px !important; padding: 0 16px !important; font: 700 13px/1 var(--lv-display) !important; }

/* Empty output: a quiet hint, not a headline */
#viewPlayground#viewPlayground #pgout-output:empty { gap: 8px; }
#viewPlayground#viewPlayground #pgout-output:empty::before { content: 'Run your code to see its output here'; font: 500 13px/1.4 var(--lv-display); color: var(--text-muted); }
#viewPlayground#viewPlayground #pgout-output:empty::after { content: '⌘ ↵ runs'; padding: 0; border: 0; box-shadow: none; background: transparent; font: 600 12px/1 var(--font-mono); color: var(--text-muted); letter-spacing: 0; }

/* The split itself draws nothing: the two panels carry the borders */
#viewPlayground#viewPlayground .pgv-split, #viewPlayground#viewPlayground .pgv-work { border: 0 !important; box-shadow: none !important; outline: 0 !important; background: transparent !important; }

/* Status bar */
#viewPlayground#viewPlayground .pgv-status { margin-top: var(--cp-gap) !important; border: 1px solid var(--border) !important; background: var(--surface-1) !important; min-height: 30px; font-size: 11.5px !important; }

/* Phones: stack, keep Run reachable in the console strip */
@media (max-width: 720px) {
  #viewPlayground#viewPlayground > .pgv-bar { padding: 10px 12px !important; }
  #viewPlayground#viewPlayground .lang-tabs { flex: 1 1 100%; order: 3; }
  #viewPlayground#viewPlayground .pgv-split { flex-direction: column !important; }
  #viewPlayground#viewPlayground .pgv-editor { flex: none !important; height: 360px; }
  #viewPlayground#viewPlayground .pgv-console { flex: none !important; height: 280px; }
  #viewPlayground#viewPlayground .pgv-tools { width: 100%; }
  #viewPlayground#viewPlayground .pgv-tools .btn { flex: 1 1 auto; justify-content: center; padding: 0 8px !important; }
  #viewPlayground#viewPlayground .console-head { height: auto !important; min-height: 0 !important; flex: none !important; flex-wrap: wrap; padding: 0 !important; }
  #viewPlayground#viewPlayground .console-head .tabbar { height: 40px; flex: 1 1 100%; }
  #viewPlayground#viewPlayground .console-head > .spacer { display: none; }
  #viewPlayground#viewPlayground .pgv-runbar { flex: 1 1 100%; padding: 8px; border-top: 1px solid var(--border); }
  #viewPlayground#viewPlayground .pgv-runbar .btn { flex: 1 1 0; justify-content: center; height: 38px !important; }
  #viewPlayground#viewPlayground .pgv-runbar #pgRun { height: 38px !important; }
  #viewPlayground#viewPlayground .pgv-console { height: auto; min-height: 260px; }
  #viewPlayground#viewPlayground .console-head .timing, #viewPlayground#viewPlayground .pgv-state { display: none; }
  #viewPlayground#viewPlayground .console-head .tab { padding: 0 10px !important; }
  #viewPlayground#viewPlayground .CodeMirror-gutter.CodeMirror-linenumbers, #viewPlayground#viewPlayground .CodeMirror-linenumber { width: 44px !important; }
  #viewPlayground#viewPlayground .CodeMirror-linenumber { padding: 0 6px 0 12px !important; }
  /* The page grows with its content: nothing is held to the screen height */
  .pgv#viewPlayground { height: auto !important; overflow: visible !important; padding: 0 12px 16px !important; }
  #viewPlayground#viewPlayground .pgv-body, #viewPlayground#viewPlayground .pgv-work, #viewPlayground#viewPlayground .pgv-split, #viewPlayground#viewPlayground .pgv-brief { flex: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
  #viewPlayground#viewPlayground .pgv-body { flex-direction: column !important; }
  #viewPlayground#viewPlayground .pgv-file-pos, #viewPlayground#viewPlayground .pgv-file-rt { display: none !important; }
  #viewPlayground#viewPlayground .pgv-status { height: auto !important; flex-wrap: wrap; }
}

/* Every row of the list view takes its content's height, at any width: the
   pane has a fixed height, and auto rows would otherwise shrink into each
   other there. */
.plv { grid-auto-rows: max-content; }

@media (max-width: 720px) {
  #modeTabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .plv { padding: 14px 14px 32px !important; row-gap: 18px; }
  .pcr { order: -2; grid-template-columns: 1fr; gap: 14px; padding: 22px 14px 16px; box-shadow: none; }
  .pcr::before { width: 84px; height: 84px; top: -36px; right: -30px; }
  .pcr h1 { font-size: 26px; }
  .pcr-btn { justify-self: stretch; max-width: none; justify-content: center; }
  .pcr-stats { justify-content: flex-start; gap: 8px; }
  .pcr-card { min-height: 38px; padding: 6px 10px 6px 6px; }
  .plv-bar { flex-wrap: wrap; padding: 8px; box-shadow: none; }
  .plv-search { flex: 1 1 100%; }
  .plv-sec, .plv-card { box-shadow: none; }
  .plv-sec-h { height: auto; min-height: 48px; padding: 8px 12px; gap: 8px; }
  .plv-sec-t { min-width: 0; font-size: 15px; }
  .plv-sec-n { flex: none; }
  .plv-meter { display: none; }
}

/* The problem editor's line numbers: left-aligned in a padded gutter, clear
   of the panel border, like Codepad's. */
#editorWrap .CodeMirror-gutter.CodeMirror-linenumbers { width: 52px !important; }
#editorWrap .CodeMirror-linenumber { box-sizing: border-box !important; width: 52px !important; min-width: 0 !important; text-align: left !important; padding: 0 8px 0 16px !important; }
@media (max-width: 720px) {
  #editorWrap .CodeMirror-gutter.CodeMirror-linenumbers, #editorWrap .CodeMirror-linenumber { width: 44px !important; }
  #editorWrap .CodeMirror-linenumber { padding: 0 6px 0 12px !important; }
}

/* ── SolveMe frames this app as one page (?tab=codeme) and draws the
   navigation itself: no top bar here. ── */
html.tab-codeme { --topbar-h: 0px; }
html.tab-codeme .topbar { display: none !important; }

/* ── Challenges: the catalogue (flat, like the rest of SolveMe) ── */
.chvv { height: calc(100vh / var(--pz, 1) - var(--cariara-chrome, 0px) - var(--topbar-h, 56px)); overflow-y: auto; background: var(--ground); }
.chvv[hidden] { display: none; }
/* ── Challenges board (Googlify, Gen-Z): today's challenge and the level
   ladder in one bento row, a toolbar (search, themes, Surprise me), then
   cards four across. Cards and tiles square with 1px hairlines; pills and
   icon wells round; Google four only for meaning (theme, level, tiers). */
.chv { padding: 20px var(--m3-pad, 24px) 40px; }
.chv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chv :is(.t-blue) { --tone: var(--g-blue); --tone-text: var(--g-blue-text); }
.chv :is(.t-red) { --tone: var(--g-red); --tone-text: var(--g-red-text); }
.chv :is(.t-yellow) { --tone: var(--g-yellow); --tone-text: var(--g-yellow-text); }
.chv :is(.t-green) { --tone: var(--g-green); --tone-text: var(--g-green-text); }
.chv-well { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone-text); }

.chv-board { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.chv-today {
  display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-left: 2px solid var(--tone);
  background: var(--surface-1); transition: box-shadow .15s;
}
.chv-today:hover { box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.chv-today-a { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 8px; color: var(--text-primary); text-decoration: none; }
.chv-today-a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.chv-today-k { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 24px; padding: 0 10px;
  border-radius: 999px; background: color-mix(in srgb, var(--g-blue) 14%, transparent); color: var(--g-blue-text);
  font: 700 12px/1 var(--lv-display, var(--font-sans)); letter-spacing: .06em; text-transform: uppercase; }
.chv-today-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chv-today-t { font: 800 22px/1.15 var(--lv-display, var(--font-sans)); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chv-today-s { font: 400 14px/1.45 var(--font-sans); color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chv-today-f { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 0 18px 14px; }
.chv-today-f .chv-surprise { margin-left: auto; height: 36px; padding: 0 14px; }
.chv-today-go { display: inline-flex; align-items: center; gap: 6px; height: 36px; text-decoration: none; padding: 0 18px; border-radius: 999px;
  background: var(--g-blue-text); color: #fff; font: 700 14px/1 var(--lv-display, var(--font-sans)); }
[data-scheme='dark'] .chv-today-go { background: var(--g-blue); color: #10161E; }

.chv-rung {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); text-align: left; cursor: pointer;
  transition: box-shadow .15s, background-color .15s;
}
.chv-rung:hover { box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.chv-rung.is-on { background: color-mix(in srgb, var(--tone) 12%, var(--surface-1)); border-color: var(--tone); }
.chv-rung:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chv-rung-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chv-rung-l { font: 700 15px/1 var(--lv-display, var(--font-sans)); color: var(--tone-text); }
.chv-rung-n { font: 500 13px/1 var(--font-sans); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.chv-rung-n b { font: 800 26px/1 var(--lv-display, var(--font-sans)); color: var(--text-primary); letter-spacing: -.02em; }
.chv-meter { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 16%, transparent); overflow: hidden; }
.chv-meter i { display: block; height: 100%; border-radius: 999px; background: var(--tone); }

.chv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.chv-search { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--text-dimmed); }
.chv-search:focus-within { border-color: var(--accent); }
.chv-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 14.5px/1 var(--font-sans); color: var(--text-primary); }
.chv-search kbd { font: 500 12px/1 var(--font-sans); padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dimmed); }
.chv-themes { display: flex; gap: 6px; flex-wrap: wrap; }
.chv-theme { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 6px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--text-primary); font: 600 13.5px/1 var(--lv-display, var(--font-sans)); cursor: pointer; }
.chv-theme[data-chal-theme='All'] { padding: 0 16px; }
.chv-theme i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal;
  background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-primary); }
.chv-theme:hover { background: var(--surface-2); }
.chv-theme.is-on { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent-text); }
.chv-theme:focus-visible, .chv-surprise:focus-visible, .chv-today-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chv-surprise { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--g-blue-text); border-radius: 999px;
  background: color-mix(in srgb, var(--g-blue) 14%, transparent); color: var(--g-blue-text); font: 700 14px/1 var(--lv-display, var(--font-sans)); cursor: pointer; }
.chv-surprise:hover { box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.chv-count { margin-left: auto; font: 400 13px/1 var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.chv-count b { font-weight: 700; color: var(--text-primary); }

.chv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 36px) / 4)), 1fr)); gap: 12px; align-items: stretch; }
.chv-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--border); border-left: 2px solid var(--tone); background: var(--surface-1);
  color: var(--text-primary); text-decoration: none; transition: box-shadow .15s;
}
.chv-card:hover { box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.chv-card:hover .chv-card-t { color: var(--accent-text); }
.chv-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chv-card.is-passed { background: color-mix(in srgb, var(--g-green) 7%, var(--surface-1)); }
.chv-card-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chv-card-t { flex: 1; min-width: 0; font: 700 16px/1.25 var(--lv-display, var(--font-sans)); letter-spacing: -.01em; }
.chv-card-s { font: 400 13.5px/1.45 var(--font-sans); color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chv-card-f { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.chv-tiers { display: flex; flex: 1; gap: 2px; height: 6px; min-width: 60px; }
.chv-tiers i { display: block; height: 100%; border-radius: 999px; background: var(--tone); }
.chv-n { font: 400 13px/1 var(--font-sans); color: var(--text-secondary); white-space: nowrap; }
.chv-n b { font-weight: 700; color: var(--text-primary); }
.chv-diff { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font: 700 12px/1 var(--font-sans); }
.chv-diff.d-Easy { background: color-mix(in srgb, var(--g-green) 16%, transparent); color: var(--g-green-text); }
.chv-diff.d-Medium { background: color-mix(in srgb, var(--g-yellow) 20%, transparent); color: var(--g-yellow-text); }
.chv-diff.d-Hard { background: color-mix(in srgb, var(--g-red) 16%, transparent); color: var(--g-red-text); }
.chv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chv-tags span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font: 500 12px/1.2 var(--font-sans); color: var(--text-secondary); }
.chv-pass { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--g-green) 16%, transparent); color: var(--g-green-text); font: 600 12.5px/1.2 var(--font-sans); }
.chv-pass em { font-style: normal; font-weight: 800; padding-left: 6px; border-left: 1px solid currentColor; }
.chv-empty { grid-column: 1 / -1; padding: 28px 14px; text-align: center; color: var(--text-secondary); }
@media (max-width: 1100px) { .chv-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chv-today { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { :is(.chv-card, .chv-today, .chv-rung) { transition: none; } }
@media (max-width: 560px) { .chv { padding: 14px 12px 28px; } .chv-board { grid-template-columns: 1fr; } .chv-count { margin-left: 0; } }

/* Load an approach from its row, and from the top of its panel: never only at
   the bottom of a long solution. */
/* One grid for the whole table (rows are subgrids), so Time and Space are as
   wide as their longest bound and every row lines up; a long bound wraps
   inside its own column instead of running into the next. */
.sol-nav { container-type: inline-size; }
.sol-list { grid-template-columns: 34px minmax(0, 1fr) auto auto auto; }
.sol-list-h, .sol-list .sol-pill { grid-column: 1 / -1; grid-template-columns: subgrid !important; column-gap: 14px; }
.sol-list .sol-pill { padding-block: 8px; }
.sol-list .sol-pill-cx { line-height: 1.35 !important; white-space: normal; overflow-wrap: anywhere; }
/* A narrow pane: no header; the number, the name and Load on one line, each
   bound labelled on its own line underneath. */
@container (max-width: 560px) {
  .sol-list { grid-template-columns: minmax(0, 1fr); }
  .sol-list-h { display: none !important; }
  .sol-list .sol-pill { grid-template-columns: 22px minmax(0, 1fr) auto !important; grid-template-areas: "n t load" "n time load" "n space load"; gap: 4px 12px; }
  .sol-list .sol-pill-cx { overflow-wrap: normal; }
  .sol-list .sol-pill-n { grid-area: n; align-self: start; }
  .sol-list .sol-pill-t { grid-area: t; flex-wrap: wrap; }
  .sol-list .sol-pill-cx:nth-child(3) { grid-area: time; }
  .sol-list .sol-pill-cx:nth-child(4) { grid-area: space; }
  .sol-list .sol-pill-cx:nth-child(3)::before { content: 'Time '; font: 600 12px/1.35 var(--font-sans); color: var(--text-dimmed); }
  .sol-list .sol-pill-cx:nth-child(4)::before { content: 'Space '; font: 600 12px/1.35 var(--font-sans); color: var(--text-dimmed); }
  .sol-list .sol-pill-load { grid-area: load; }
}
.sol-pill-load { justify-self: end; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent-text); font: 700 12.5px/1 var(--font-sans); cursor: pointer; }
.sol-pill-load:hover { background: var(--accent); color: var(--m3-on-primary, #fff); }
.sol-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.sol-head .sol-title { flex: 1 1 auto; margin: 0; }
.sol-load-top { order: 2; }
.sol-head .metrics { order: 3; flex-basis: 100%; }
/* No list filter (Top 100) any more. */
#listFilter { display: none !important; }
/* Page headers: the title alone, no kicker pill, no tall band. */
#viewGuides .gd-head::before, #viewGuides .gd-top::before, #viewRoadmap .rmv-head::before { display: none !important; }
#viewGuides .gd-head, #viewGuides .gd-top, #viewRoadmap .rmv-head { padding: 16px 20px !important; margin-bottom: 14px; }
#viewGuides .gd-top, #viewRoadmap .rmv-head { padding-top: 16px !important; }
#viewGuides .gd-head h1, #viewGuides .gd-top h1, #viewRoadmap .rmv-head h1 { font-size: 26px !important; }

/* ── Approaches as editorials, and one row per test (2026-10-06) ──
   An approach opens with where it sits (brute force → optimal), its bounds as
   chips and why you would pick it; the results list every test in order,
   failures open. Tokens only, so dark.css and codeme.css restyle them. */
.sol-head-t { flex: 1 1 260px; min-width: 0; display: grid; justify-items: start; gap: 4px; }
.sol-head .sol-head-t .sol-title { margin: 0; }
.sol-stage {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-secondary); font: 600 11.5px/1 var(--font-sans);
}
.sol-stage.is-brute { background: var(--sky-bg); color: var(--g-red-text); }
.sol-stage.is-better { background: var(--warning-bg); color: var(--g-yellow-text); }
.sol-stage.is-optimal { background: var(--success-bg); color: var(--g-green-text); }
.sol-best.is-brute { border-color: var(--g-red-text); color: var(--g-red-text); }
.sol-best.is-better { border-color: var(--g-yellow-text); color: var(--g-yellow-text); }
.sol-best:not(.is-brute):not(.is-better):not(.is-optimal) { border-color: var(--border); color: var(--text-secondary); }
.sol-cx, .sol-cx-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-cx-row { margin-bottom: 10px; }
.cx-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1);
}
.cx-chip span { font: 500 11.5px/1 var(--font-sans); color: var(--text-dimmed); }
.cx-chip b { font: 500 12.5px/1 var(--font-mono); color: var(--text-primary); }
.sol-why-line {
  display: flex; gap: 10px; margin: 0 0 16px; padding: 10px 12px;
  border-left: 2px solid var(--g-blue); background: var(--accent-subtle);
  font: 400 14px/1.55 var(--font-sans); color: var(--text-primary);
}
.sol-why-line b { flex: none; font-weight: 600; color: var(--accent-text); }
.sol-extra.is-code { padding: 0; border: 0; background: transparent; }
.sol-extra.is-code .sol-code { margin: 0; }

.tcases { display: flex; flex-direction: column; margin-top: 10px; border: 1px solid var(--border); background: var(--surface-1); }
.tcase + .tcase { border-top: 1px solid var(--hairline); }
.tcase.is-fail { box-shadow: inset 2px 0 0 var(--err); }
.tcase-h {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px;
  cursor: pointer; list-style: none; font: 500 13px/1.3 var(--font-sans); color: var(--text-primary);
}
.tcase-h::-webkit-details-marker { display: none; }
.tcase-h:hover { background: var(--surface-2); }
.tcase-h::after {
  content: ''; flex: none; width: 6px; height: 6px; margin: 0 2px 2px 4px;
  border-right: 1px solid var(--text-dimmed); border-bottom: 1px solid var(--text-dimmed);
  transform: rotate(-45deg); transition: transform .15s;
}
.tcase[open] > .tcase-h::after { transform: rotate(45deg); }
.tcase-n { flex: none; min-width: 18px; font: 500 12px/1 var(--font-mono); color: var(--text-dimmed); }
.tcase-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 7px 0; }
.tcase-name { overflow-wrap: anywhere; }
.tcase-io { font: 400 12px/1.45 var(--font-mono); color: var(--text-secondary, var(--text-dimmed)); overflow-wrap: anywhere; }
.tcase-io code { font: inherit; color: var(--text-primary); background: none; padding: 0; }
.tcase-ms { flex: none; font: 400 12px/1 var(--font-mono); color: var(--text-dimmed); }
.tcase-b { padding: 4px 12px 12px 54px; }
@media (prefers-reduced-motion: reduce) { .tcase-h::after { transition: none; } }