/* ══════════════════════════════════════════════════════════════
   MATERIAL 3 — PPG as capra's Playground tabs (Problems, Codepad).
   Loaded after app.css and kept in its own file, so sync.sh can lay
   upstream changes over app.css without touching this layer. Same
   tokens as apps/web/src/components/prep/playground/pg-m3.css.
   Google-four palette and greys only; hues never blend.
   Every view runs the full width of the page, inside a small side gutter.
   ══════════════════════════════════════════════════════════════ */
:root {
  --m3-ink: #1F1F1F;
  --m3-ink-2: #444746;
  --m3-ink-3: #5E5E5E;
  --m3-line: #E1E3E1;
  --m3-line-2: #C4C7C5;
  --m3-surface: #F0F4F9;
  --m3-surface-2: #F8FAFD;
  --m3-primary: #0077FF;
  --m3-primary-hover: #1765CC;
  --m3-primary-ink: #0062D6;
  --m3-tonal: #D4E0FC;
  --m3-on-tonal: #1F1F1F;
  --m3-shadow-1: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --m3-shadow-2: 0 1px 3px rgba(60,64,67,.15), 0 8px 24px -6px rgba(60,64,67,.2);
  --m3-focus: 0 0 0 3px rgba(0, 119, 255,.4);
  --m3-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --m3-col: 100000px;  /* no column cap: full page width */
  --m3-pad: clamp(24px, 2.6vw, 32px);
  /* The content edge of the centred column, for full-bleed bars. */
  --m3-edge: max(var(--m3-pad), calc((100% - var(--m3-col)) / 2 + var(--m3-pad)));

  /* app.css tokens, re-pointed */
  --font-sans: 'Inter', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --g-ink: var(--m3-ink);
  --title: var(--m3-ink);
  --text-primary: var(--m3-ink);
  --text-secondary: var(--m3-ink-2);
  --text-muted: var(--m3-ink-3);
  --text-dimmed: var(--m3-ink-3);
  --surface-2: var(--m3-surface-2);
  --surface-3: var(--m3-surface);
  --bg-elevated: var(--m3-surface-2);
  --panel: var(--m3-surface);
  --panel-blue: var(--m3-surface);
  --border: var(--m3-line);
  --hairline: var(--m3-line);
  --control: var(--m3-line-2);
  --border-hover: var(--m3-line-2);
  --accent: var(--m3-primary);
  --accent-hover: var(--m3-primary-hover);
  --accent-pressed: var(--m3-primary-hover);
  --accent-text: var(--m3-primary-ink);
  --accent-subtle: var(--m3-tonal);
  --shadow-focus: var(--m3-focus);
  --radius-card: 0;
  --radius-card-sm: 0;
}

body { font-family: var(--font-sans); color: var(--m3-ink); }
:focus-visible { box-shadow: var(--m3-focus); outline: none; }

/* ── headings: Plus Jakarta Sans, sentence case ── */
.prob-title, .rmv-head h1, .landing h1 {
  font-family: var(--m3-display); font-weight: 600; letter-spacing: -.02em; color: var(--m3-ink);
}
.rmv-head h1 { font-size: 28px; line-height: 36px; }
.labdlg-head h2, .sol-title, .landing-point h3, .lab-card-title {
  font-family: var(--m3-display); font-weight: 600; letter-spacing: -.01em; color: var(--m3-ink);
}

/* Labels that were uppercase, letter-spaced mono read as sentence case. */
.rail-group, .prob-state, .block-h, .metric span, .metric.is-best, .case-tier, .case-out span,
.passed-h, .extra-h, .when-to-use span, .landing-resume-label, .rmv-tile span, .rmv-stage-l, .cmdk-b, .fig-arrow, .tl-sep, .fig-becomes,
.pc-diff th, .lab-tag, .ex-sec > span, .ex-line, .lab-io > span, .kv dt, .lab-diff,
.lab-tier-chip, .tp-diff, .pg-tab .soon {
  text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-sans) !important;
}

.block-h { font: 600 16px/22px var(--m3-display) !important; color: var(--m3-ink); }
.block-h::before { display: none; }
.rail-group { font-size: 13px; font-weight: 600; color: var(--m3-ink-2); }
.rail-group::before { border-radius: 0; }

/* ── the sub-header: M3 primary tabs, content on the column edge ── */
.topbar {
  padding-inline: var(--m3-edge); gap: 16px;
  background: #FFFFFF; border-bottom: 1px solid var(--m3-line);
}
.mode-tab {
  position: relative; padding: 0 16px; border-radius: 0;
  font: 500 14px/20px var(--font-sans); color: var(--m3-ink-2);
  transition: background .2s, color .2s;
}
.mode-tab:hover { background: var(--m3-surface-2); color: var(--m3-ink); }
.mode-tab.is-on, .mode-tab.is-on:hover { color: var(--m3-primary-ink); background: transparent; }
.mode-tab.is-on::after {
  left: 12px; right: 12px; height: 3px; border-radius: 0; background: var(--m3-primary);
}
.mode-tab.is-on .ico { color: var(--m3-primary); }

/* ── buttons: M3 pills ── */
.btn {
  height: 40px; padding: 0 24px; border-radius: 0;
  font: 500 14px/20px var(--font-sans);
  border: 1px solid var(--m3-line-2); background: transparent; color: var(--m3-primary-ink);
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.btn:hover { background: rgba(11,87,208,.08); border-color: var(--m3-line-2); box-shadow: none; }
.btn-sm { height: 32px; padding: 0 16px; border-radius: 0; font-size: 13px; }
.btn-icon { width: 40px; padding: 0; border-radius: 50%; }
.btn-primary, .btn-primary:hover {
  background: var(--m3-primary); border-color: transparent; color: #FFFFFF; box-shadow: var(--m3-shadow-1);
}
.btn-primary:hover { background: var(--m3-primary-hover); }
.btn-secondary { background: var(--m3-tonal); border-color: transparent; color: var(--m3-on-tonal); }
.btn-secondary:hover { background: #C2D7F8; border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--m3-primary-ink); }
.btn-ghost:hover { background: rgba(11,87,208,.08); border-color: transparent; }
.btn-danger, .btn-danger:hover { background: #D93025; border-color: transparent; color: #FFFFFF; }
.btn:disabled, .btn:disabled:hover {
  background: rgba(31,31,31,.08); border-color: transparent; color: rgba(31,31,31,.38); box-shadow: none;
}
#pgExplain.is-on { background: var(--m3-tonal); color: var(--m3-on-tonal); }
.landing-actions .btn { height: 48px; padding: 0 32px; border-radius: 0; font-size: 15px; }

/* ── chips: pill, tonal when selected ── */
.seg-b, .seg-quiet .seg-b, .lang-pill, .lang-tab, .lang-group, .lab-filter, .uc-chip,
.landing-resume-list button {
  height: 32px; padding: 0 14px; border-radius: 16px;
  border: 1px solid var(--m3-line-2); background: #FFFFFF; color: var(--m3-ink-2);
  font: 500 13px/1 var(--font-sans);
  transition: background .2s, color .2s, border-color .2s;
}
.seg-b { padding: 0 8px; }
.seg-b:hover, .lang-pill:hover, .lang-tab:hover, .lang-group:hover, .lab-filter:hover, .uc-chip:hover {
  background: var(--m3-surface); color: var(--m3-ink);
}
.seg-b.is-on, .lang-pill.is-on, .lang-tab.is-on, .lang-group.is-on, .lab-filter.is-on, .uc-chip.is-on {
  background: var(--m3-tonal); color: var(--m3-on-tonal); border-color: transparent;
}
.uc-chip.is-on .ico, .lang-tab.is-on .ico { color: var(--m3-on-tonal); }
.uc-bar { background: var(--m3-surface); border-radius: 0; }
.uc-count { background: var(--m3-primary); }

/* ── badges: tonal pills, no hairline ── */
.badge, .prob-state, .lab-diff, .lab-tier-chip, .cmdk-b {
  height: 24px; display: inline-flex; align-items: center;
  padding: 0 10px; border-radius: 12px; border: 0 !important;
  font: 500 12px/1 var(--font-sans);
}
.badge { background: var(--m3-surface); color: var(--m3-ink-2); }
.badge.d-Easy, .badge.freq, .prob-state.is-solved { background: #CCF4E9; color: #00866B; }
.badge.d-Medium { background: #E8FCAC; color: #5E8C0A; }
.badge.d-Hard, .badge.due, .prob-state.is-solved.is-due { background: #DCE9FF; color: #2B83EC; }
.badge.src, .badge.b75 { background: var(--m3-tonal); color: var(--m3-on-tonal); }
.prob-state { background: var(--m3-surface); color: var(--m3-ink-2); }

/* ── inputs: pill fields ── */
.search, .labdlg-search {
  height: 40px; border-radius: 0; border: 1px solid var(--m3-line-2); background: var(--m3-surface-2);
}
.search:focus, .labdlg-search:focus, .notes-box:focus, .inputdlg-box:focus{
  border-color: var(--m3-primary); box-shadow: 0 0 0 1px var(--m3-primary); background: #FFFFFF;
}

.notes-box, .inputdlg-box { border-radius: 0; }

/* ── cards: tonal surfaces, 24px, lift on hover; no coloured seams ── */
.landing-stat, .landing-point, .lab-card, .tp-prereq,
.rmv-node, .fig {
  background: var(--m3-surface); border: 1px solid transparent !important;
  border-radius: 0; box-shadow: none;
  transition: background .2s, box-shadow .2s, transform .2s cubic-bezier(.2,0,0,1);
}

.landing-point:hover, .lab-card:hover, .rmv-node:hover:not([disabled]) {
  background: #FFFFFF; box-shadow: var(--m3-shadow-2); transform: translateY(-2px);
}
.lab-card.is-on { background: var(--m3-surface-2); border: 1px solid var(--m3-primary) !important; }
.ex-card, .sol-card, .sol-extra, .case, .verdict, .hintbox, .lab-list, .passed-strip {
  border-radius: 0; border-color: var(--m3-line);
}
.ex-card, .sol-card { border-top: 1px solid var(--m3-line); background: #FFFFFF; }
.rmv-head, .landing-band { background: var(--m3-surface); border-radius: 0; }
.landing-band::after { display: none; }
.landing-mark { border-radius: 0; border: 0; }

/* ── rail: M3 navigation drawer items ── */
.rail { background: #FFFFFF; border-right: 1px solid var(--m3-line); }
.rail-list { padding: 4px 12px 16px; }
.p-item { border-radius: 999px; padding: 8px 14px; }
.p-item:hover { background: var(--m3-surface); }
.p-item.is-on, .p-item.is-on:hover { background: var(--m3-tonal); box-shadow: none; }
.p-item.is-on .p-name { color: var(--m3-on-tonal); font-weight: 600; }

/* ── pane tabs: M3 secondary tabs ── */
.tab { border-bottom: 2px solid transparent; color: var(--m3-ink-2); font-weight: 500; }
.tab:hover { background: var(--m3-surface-2); color: var(--m3-ink); }
.tab.is-on { color: var(--m3-primary-ink); border-bottom-color: var(--m3-primary); }

/* ── code ── */
.CodeMirror, .CodeMirror pre, .cm-hl, .prose pre, .prose code, .out, pre.out {
  font-family: var(--font-mono);
}
.prose pre, .cm-hl, .case-out pre, .trace, .lab-io pre, .ex-trace {
  background: var(--m3-surface-2); border-color: var(--m3-line); border-radius: 0;
}

/* ══ the centred column ══════════════════════════════════════ */

/* Today */

/* Roadmap: the head band and the graph share the column. */
.rmv-head {
  width: auto; max-width: calc(var(--m3-col) - 2 * var(--m3-pad));
  margin: 24px auto 0; margin-inline: max(var(--m3-pad), calc((100% - var(--m3-col)) / 2 + var(--m3-pad)));
  padding: 24px 28px;
}
.rmv-body { width: 100%; max-width: var(--m3-col); margin: 0 auto; padding-inline: var(--m3-pad); }
.rmv-graph { padding: 24px 0 40px; }

/* Practice: the rail, the problem and the editor as one card in the column. */
.layout {
  width: 100%; max-width: var(--m3-col); margin: 0 auto;
  padding: 16px var(--m3-pad) 20px;
}
.layout > .rail { border: 1px solid var(--m3-line); border-radius: 0; }
.layout > .pane-problem { border-block: 1px solid var(--m3-line); }
.layout > .pane-work { border: 1px solid var(--m3-line); border-left: 0; border-radius: 0; }
.layout.rail-hidden > .pane-problem { border-left: 1px solid var(--m3-line); border-radius: 0; }

/* Codepad: bar, actions and the editor + output card all in the column;
   the editor takes the column's full width. */
.pgv { padding-bottom: 20px; }
.pgv > .pgv-bar, .pgv > .pgv-actions, .pgv > .pgv-split {
  width: 100%; max-width: var(--m3-col); margin-inline: auto;
  padding-inline: var(--m3-pad);
}
.pgv > .pgv-bar { padding-top: 12px; border-bottom: 0; background: transparent; }
.pgv > .pgv-actions { border-bottom: 0; background: transparent; }
.pgv > .pgv-split { padding-inline: 0; }
.pgv-split {
  width: calc(100% - 2 * var(--m3-pad)) !important;
  max-width: calc(var(--m3-col) - 2 * var(--m3-pad)) !important;
  border: 1px solid var(--m3-line); border-radius: 0; overflow: hidden; background: #FFFFFF;
}
.pgv-console { background: var(--m3-surface-2); }

/* ── motion ── */
@media (prefers-reduced-motion: reduce) {
   .landing-point, .lab-card, .rmv-node, .btn, .mode-tab { transition: none !important; }
   .landing-point:hover, .lab-card:hover, .rmv-node:hover:not([disabled]) { transform: none; }
}

/* ── Codepad bar: one chip system ─────────────────────────────
   Labs, the Platform/DevOps switch and the languages used to take their
   looks from four layers (app.css chips, its Gen-Z block, this file's
   pills and btn-secondary), so Labs read as selected when it wasn't and
   the chosen language and group looked unrelated. Scoped by id so it
   outranks all of them. One state per control:
   - Labs: an outline chip, solid blue only while a lab is open.
   - Platform / DevOps: a two-option switch in a grey track.
   - Languages: outline chips, the chosen one tonal with a blue edge. */
#viewPlayground .pgv-labs-btn,
#viewPlayground .lang-tab,
#viewPlayground .lang-group {
  height: 36px; min-height: 36px; padding: 0 16px; border-radius: 0;
  font: 600 13px/1 var(--font-sans); letter-spacing: 0;
  box-shadow: none; transform: none;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
#viewPlayground .pgv-labs-btn,
#viewPlayground .lang-tab {
  border: 1px solid var(--m3-line-2); background: #FFFFFF; color: var(--m3-ink-2);
}
#viewPlayground .pgv-labs-btn:hover,
#viewPlayground .lang-tab:hover { background: var(--m3-surface); color: var(--m3-ink); border-color: var(--m3-line-2); }
#viewPlayground .pgv-labs-btn.is-on,
#viewPlayground .pgv-labs-btn.is-on:hover { background: var(--m3-primary); border-color: var(--m3-primary); color: #FFFFFF; }
#viewPlayground .lang-tab { gap: 6px; padding: 0 14px; }
#viewPlayground .lang-tab.is-on,
#viewPlayground .lang-tab.is-on:hover { background: var(--m3-tonal); border-color: var(--m3-primary); color: var(--m3-on-tonal); }
#viewPlayground .lang-tab:active,
#viewPlayground .pgv-labs-btn:active { transform: none; box-shadow: none; }

#viewPlayground .lang-groups {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 0; background: var(--m3-surface); border: 1px solid var(--m3-line);
}
#viewPlayground .lang-group {
  height: 30px; min-height: 30px; padding: 0 14px; border-radius: 0;
  border: 0; background: transparent; color: var(--m3-ink-2);
}
#viewPlayground .lang-group:hover { background: rgba(31, 31, 31, .06); color: var(--m3-ink); }
#viewPlayground .lang-group.is-on,
#viewPlayground .lang-group.is-on:hover { background: #FFFFFF; color: var(--m3-primary-ink); box-shadow: var(--m3-shadow-1); }
#viewPlayground .pgv-labs-btn:focus-visible,
#viewPlayground .lang-tab:focus-visible,
#viewPlayground .lang-group:focus-visible { outline: none; box-shadow: var(--m3-focus); }
#viewPlayground .lang-sep { margin: 6px 4px; }

html[data-scheme='dark'] #viewPlayground .pgv-labs-btn,
html[data-scheme='dark'] #viewPlayground .lang-tab { background: #2D333B; }
html[data-scheme='dark'] #viewPlayground .pgv-labs-btn:hover,
html[data-scheme='dark'] #viewPlayground .lang-tab:hover { background: var(--m3-surface); }
html[data-scheme='dark'] #viewPlayground .pgv-labs-btn.is-on { background: var(--m3-primary); color: #10161E; }
html[data-scheme='dark'] #viewPlayground .lang-tab.is-on { background: var(--m3-tonal); color: var(--m3-on-tonal); }
html[data-scheme='dark'] #viewPlayground .lang-groups { background: #22272E; }
html[data-scheme='dark'] #viewPlayground .lang-group:hover { background: rgba(255, 255, 255, .06); }
html[data-scheme='dark'] #viewPlayground .lang-group.is-on { background: #373E47; color: var(--m3-primary-ink); }