/* ══════════════════════════════════════════════════════════════
   Fewer boxes (2026-10-04). Loaded last.

   Every container used to be a dark outline with a hard offset shadow, so
   each page read as rectangles inside rectangles. Here: sections separate
   by spacing and a soft tint, not outlines; controls, chips and counts are
   pills; progress and badges are circles; page headers get a soft glow
   instead of a frame. Card corners stay square (rounded cards read as
   "trimmed"); only pills and circles are round.

   :is(…, #cm#cm) lifts every rule above the older single-id rules without
   matching anything extra (#cm is never in the page).
   ══════════════════════════════════════════════════════════════ */

:root {
  --cm-soft: 0 1px 2px rgb(15 23 42 / .06), 0 14px 34px -20px rgb(15 23 42 / .30);
  --cm-tint: color-mix(in srgb, var(--surface-2) 75%, transparent);
  --cm-line: color-mix(in srgb, var(--border) 70%, transparent);
}
html[data-scheme='dark'] {
  --cm-soft: 0 1px 2px rgb(0 0 0 / .35), 0 16px 36px -20px rgb(0 0 0 / .65);
}

/* ── Page headers: a soft glow, no frame ─────────────────────── */
html body :is(.pcr, .gd-head, .rmv-head, #cm#cm) {
  border: 0 !important;
  box-shadow: var(--cm-soft) !important;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--g-blue) 12%, transparent), transparent 55%),
    radial-gradient(80% 140% at 100% 100%, color-mix(in srgb, var(--g-green) 10%, transparent), transparent 55%),
    var(--surface-1) !important;
}
/* The corner art: three soft circles in place of blocks. */
html body :is(.pcr, .gd-head, .rmv-head, #cm#cm)::before {
  background:
    radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--g-yellow) 55%, transparent) 0 18px, transparent 19px),
    radial-gradient(circle at 90% 62%, color-mix(in srgb, var(--g-red) 40%, transparent) 0 12px, transparent 13px),
    radial-gradient(circle at 70% 72%, color-mix(in srgb, var(--g-green) 45%, transparent) 0 9px, transparent 10px) !important;
}

/* ── Counts and stat tiles: pills ─────────────────────────────── */
html body :is(.pcr-card, .rmv-tile, #cm#cm) {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
  padding-inline: 8px 16px !important;
}
html body :is(.pcr-card, .rmv-tile, #cm#cm) svg,
html body :is(.pcr-card, .rmv-tile, #cm#cm) [class*='ico'] { border-radius: 50% !important; }

/* ── Controls: pills with a light edge ────────────────────────── */
html body :is(.btn, .pcr-btn, .plv-act, .fchip-b, .plv-search, .tab, .lang-tab, .lang-group, .pgv-labs-btn, #cm#cm) {
  border-radius: 999px !important;
  box-shadow: none !important;
}
html body :is(.fchip-b, .plv-search, .plv-act:not(.is-primary), #cm#cm) { border-color: var(--border) !important; background: var(--surface-1) !important; }
html body :is(.plv-act.is-primary, #cm#cm) { border: 0 !important; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--g-blue) 70%, transparent) !important; }
html body :is(.pcr-btn, #cm#cm) { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--g-blue) 70%, transparent) !important; border: 0 !important; }

/* ── The list: no frames, spacing and hairlines ───────────────── */
html body :is(.plv-bar, #cm#cm) { border: 0 !important; box-shadow: none !important; background: transparent !important; padding-inline: 0 !important; }
html body :is(.plv-sec, #cm#cm) { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body :is(.plv-sec-h, #cm#cm) { border: 0 !important; border-bottom: 1px solid var(--cm-line) !important; background: transparent !important; padding-inline: 4px !important; }
html body :is(.plv-row, #cm#cm) { border-color: var(--cm-line) !important; }
html body :is(.plv-row, #cm#cm):hover { background: var(--cm-tint) !important; }
html body :is(.plv-sec-h, #cm#cm) [class*='prog'], html body :is(.plv-sec-h, #cm#cm) [class*='count'] { border-radius: 999px !important; }
html body :is(.plv-sec-h, #cm#cm) [class*='bar'] { border-radius: 999px !important; overflow: hidden; }

/* ── Side cards, Learn panels: a soft tint, no outline ────────── */
html body :is(.plv-card, .gd-card, .gd-phase, #cm#cm) { border: 0 !important; box-shadow: none !important; background: var(--cm-tint) !important; }

/* ── Roadmap: topics as pills on the map ──────────────────────── */
html body :is(.rmv-node, #cm#cm) {
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: var(--cm-soft) !important;
  background: var(--surface-1) !important;
  padding-inline: 20px !important;
}
html body :is(.rmv-node, #cm#cm) [class*='bar'], html body :is(.rmv-node, #cm#cm) progress { border-radius: 999px !important; overflow: hidden; }

/* ── Problem workspace: panes without hard shadows ─────────────── */
html body :is(.pane, .console, .rail, #cm#cm) { box-shadow: none !important; border-color: var(--cm-line) !important; }
html body :is(.ex-card, #cm#cm) { border: 0 !important; box-shadow: none !important; background: var(--cm-tint) !important; }

/* ── Codepad: panels by tint, controls as pills ───────────────── */
#viewPlayground#viewPlayground > .pgv-bar,
#viewPlayground#viewPlayground .pgv-brief { border-color: transparent !important; box-shadow: var(--cm-soft) !important; }
#viewPlayground#viewPlayground .pgv-editor,
#viewPlayground#viewPlayground .pgv-console,
#viewPlayground#viewPlayground .pgv-actions { border: 0 !important; background: transparent !important; justify-content: flex-end; padding-bottom: 6px !important; }
#viewPlayground#viewPlayground .pgv-tools { gap: 6px !important; }
#viewPlayground#viewPlayground .pgv-tools .btn { border: 1px solid var(--border) !important; border-radius: 999px !important; height: 30px !important; }
#viewPlayground#viewPlayground .lang-groups { border-radius: 999px !important; }
#viewPlayground#viewPlayground .lang-tab.is-on { box-shadow: none !important; background: color-mix(in srgb, var(--g-blue) 14%, transparent) !important; }
#viewPlayground#viewPlayground .console-head .tab { border-radius: 999px !important; height: 30px !important; margin-block: auto; }
#viewPlayground#viewPlayground .console-head .tab.is-on { box-shadow: none !important; background: color-mix(in srgb, var(--g-blue) 14%, transparent) !important; color: var(--g-blue-text) !important; }
#viewPlayground#viewPlayground .console-head .tabbar { gap: 4px !important; padding-left: 8px !important; align-items: center; }
#viewPlayground#viewPlayground .pgv-runbar .btn { border-radius: 999px !important; }
#viewPlayground#viewPlayground .pgv-file-tab { box-shadow: none !important; }

/* ── Progress: thin pill tracks, no outline ───────────────────── */
html body :is(.plv-meter, .rmv-bar, #cm#cm) { border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--border) 60%, transparent) !important; height: 6px !important; overflow: hidden; }
html body :is(.plv-meter, .rmv-bar, #cm#cm) > :is(i, span) { border-radius: 999px !important; }
html body :is(.plv-sec-n, #cm#cm) { border-width: 1px !important; border-color: var(--border) !important; }

/* ── Type: page titles at a standard size (the page renders at 100%) ── */
html body :is(.pcr h1, .gd-head h1, .gd-top h1, .rmv-head h1, #cm#cm) { font-size: 28px !important; line-height: 1.15 !important; }

/* ── Codepad language: one menu, not a row of chips ───────────── */
#viewPlayground#viewPlayground .lang-pick {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 34px 0 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-1); color: var(--text-primary); cursor: pointer;
}
#viewPlayground#viewPlayground .lang-pick::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg); pointer-events: none;
}
#viewPlayground#viewPlayground .lang-pick:hover { border-color: var(--g-blue); }
#viewPlayground#viewPlayground .lang-pick:focus-within { border-color: var(--g-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-blue) 22%, transparent); }
#viewPlayground#viewPlayground .lang-pick select {
  appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent;
  color: inherit; font: 600 14px/1 var(--font-sans, Inter, sans-serif); cursor: pointer; padding: 0; margin: 0;
}
#viewPlayground#viewPlayground .lang-pick select option, #viewPlayground#viewPlayground .lang-pick select optgroup { color: var(--text-primary); background: var(--surface-1); }
#viewPlayground#viewPlayground .lang-tabs { overflow: visible !important; }


/* ── Codepad status bar: a line of quiet text, no cells ───────── */
#viewPlayground#viewPlayground .pgv-status {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  gap: 18px; padding: 0 4px; color: var(--text-secondary); font-weight: 500;
  text-transform: none !important; letter-spacing: 0 !important;
}
#viewPlayground#viewPlayground .pgv-status > span {
  border: 0 !important; background: transparent !important; padding: 0 !important; color: inherit !important;
}
#viewPlayground#viewPlayground .pgv-status > .pgv-st-lang { color: var(--text-primary) !important; font-weight: 600; }
#viewPlayground#viewPlayground .pgv-status > .pgv-st-save.is-saved { color: var(--g-green-text, var(--g-green)) !important; }
#viewPlayground#viewPlayground .pgv-labs-btn { border-radius: 999px !important; height: 34px !important; padding: 0 16px !important; box-shadow: none !important; }

/* ── Codepad header: ONE row. Title, Labs, language, then the editor
   tools at the right end; no separate toolbar strip, no card. ───── */
#viewPlayground#viewPlayground > .pgv-bar {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px !important;
  min-height: 0 !important; padding: 0 0 10px !important; margin: 0 !important;
  border: 0 !important; box-shadow: none !important; background: transparent !important;
}
#viewPlayground#viewPlayground > .pgv-bar .pcr-kicker { display: none !important; }
#viewPlayground#viewPlayground > .pgv-bar h1 { font-size: 20px !important; margin: 0 6px 0 0 !important; line-height: 1 !important; }

/* ── Editor tools live in the console strip, beside Run: quiet text
   buttons, no row of their own and no chip outlines. ───────────── */
#viewPlayground#viewPlayground .console-head .pgv-tools { display: flex !important; flex-wrap: nowrap !important; gap: 2px !important; margin-right: 10px; }
#viewPlayground#viewPlayground .console-head .pgv-tools .btn {
  height: 30px !important; min-height: 30px !important; padding: 0 10px !important;
  border: 0 !important; border-radius: 999px !important; background: transparent !important;
  color: var(--text-secondary) !important; font: 600 13px/1 var(--lv-display, inherit) !important; box-shadow: none !important;
}
#viewPlayground#viewPlayground .console-head .pgv-tools .btn:hover { background: var(--cm-tint) !important; color: var(--text-primary) !important; }
#viewPlayground#viewPlayground .console-head .pgv-tools .btn[aria-pressed="true"] { color: var(--g-blue-text) !important; background: color-mix(in srgb, var(--g-blue) 12%, transparent) !important; }
#viewPlayground#viewPlayground .console-head .pgv-tools .btn svg { display: none; }
@media (max-width: 720px) {
  #viewPlayground#viewPlayground .console-head .pgv-tools { flex: 1 1 100% !important; width: auto !important; margin: 0 !important; padding: 4px 8px 0; overflow-x: auto; }
  #viewPlayground#viewPlayground .console-head .pgv-tools .btn { flex: 0 0 auto !important; }
}

/* ── Check: lint marks, the Problems tab, the status summary ─────── */
#viewPlayground .CodeMirror-lint-markers { width: 16px; }
#viewPlayground .CodeMirror-lint-marker-error, #viewPlayground .CodeMirror-lint-marker-warning,
#viewPlayground .CodeMirror-lint-marker-multiple { background: none; width: 16px; height: 16px; position: relative; }
#viewPlayground .CodeMirror-lint-marker-error::after, #viewPlayground .CodeMirror-lint-marker-warning::after,
#viewPlayground .CodeMirror-lint-marker-multiple::after { content: ''; position: absolute; left: 4px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--err, #d93025); }
#viewPlayground .CodeMirror-lint-marker-warning::after { background: var(--g-yellow, #9AD61A); }
#viewPlayground .CodeMirror-lint-mark-error { background: none; text-decoration: underline wavy color-mix(in srgb, var(--err, #d93025) 85%, transparent); text-underline-offset: 3px; }
#viewPlayground .CodeMirror-lint-mark-warning { background: none; text-decoration: underline wavy color-mix(in srgb, var(--g-yellow, #9AD61A) 90%, transparent); text-underline-offset: 3px; }
.CodeMirror-lint-tooltip { font: 500 13px/1.45 var(--font-sans, Inter, system-ui, sans-serif); padding: 8px 10px; border: 0; border-radius: 0; background: var(--surface-1, #fff); color: var(--text-primary, #202124); box-shadow: 0 8px 24px -10px rgb(15 23 42 / .45); max-width: 520px; }
.CodeMirror-lint-message { padding-left: 0; background: none !important; }
.CodeMirror-lint-message-error::before, .CodeMirror-lint-message-warning::before { content: '●'; margin-right: 6px; color: var(--err, #d93025); }
.CodeMirror-lint-message-warning::before { color: var(--g-yellow, #9AD61A); }
html[data-scheme='dark'] .CodeMirror-lint-tooltip { background: #2d333b; color: #e8eaed; }

#viewPlayground#viewPlayground .pgv-pcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--g-yellow, #9AD61A) 30%, transparent); color: var(--text-primary); font: 700 11px/1 var(--font-sans, Inter, sans-serif); }
#viewPlayground#viewPlayground .pgv-pcount.is-err { background: var(--err, #d93025); color: #fff; }
#pgout-problems { padding: 0 !important; white-space: normal !important; overflow: auto; }
.pgv-problems { list-style: none; margin: 0; padding: 4px 0; }
.pgv-problems li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 14px; cursor: pointer; font: 500 13.5px/1.45 var(--font-sans, Inter, sans-serif); color: var(--text-primary); }
.pgv-problems li:hover, .pgv-problems li:focus-visible { background: color-mix(in srgb, var(--g-blue, #0077FF) 9%, transparent); outline: 0; }
.pgv-sev { width: 8px; height: 8px; border-radius: 50%; align-self: center; background: var(--err, #d93025); }
.pgv-problems li.is-warning .pgv-sev { background: var(--g-yellow, #9AD61A); }
.pgv-problems li.is-info .pgv-sev { background: var(--text-muted, #9aa0a6); }
.pgv-problems code { font: 500 12px/1 var(--font-mono, ui-monospace, monospace); color: var(--text-secondary); }
.pgv-ploc { font: 500 12px/1 var(--font-mono, ui-monospace, monospace); color: var(--text-muted, #80868b); white-space: nowrap; }
.pgv-pnone { margin: 0; padding: 14px; font: 500 13.5px/1.4 var(--font-sans, Inter, sans-serif); color: var(--text-secondary); }
#viewPlayground#viewPlayground .pgv-status > .pgv-st-lint { margin-left: auto; }
#viewPlayground#viewPlayground .pgv-status > .pgv-st-lint + .pgv-st-save { margin-left: 0 !important; }
.pgv-st-lint b { font-weight: 600; margin-right: 8px; }
.pgv-st-lint .is-ok { color: var(--g-green-text, #00866B); }
.pgv-st-lint .is-err { color: var(--err, #d93025); }
.pgv-st-lint .is-warn { color: var(--g-yellow-text, #5E8C0A); }