/* ══════════════════════════════════════════════════════════════
   Flat (2026-10-04). Loaded after soft.css, last.

   No shadows behind any square or rectangle: cards, tiles, chips, buttons,
   headers and banners sit flat on their fill. Keyboard focus keeps its
   ring. The Prepare skin's 2px ink outlines become a barely-there hairline
   (--pz-edge), so sections read by fill and spacing. Overlays (menus, the
   problem drawer, the roadmap panel) separate with a hairline instead of a
   drop shadow. Headers lose their glow and corner art.
   ══════════════════════════════════════════════════════════════ */
:root { --pz-edge: color-mix(in srgb, var(--text-primary) 10%, transparent); --cm-soft: none; }
html[data-scheme='dark'] { --pz-edge: color-mix(in srgb, var(--text-primary) 12%, transparent); }

html body :is(*, #cm#cm):not(:focus-visible) { box-shadow: none !important; }

html body :is(.fmenu, .layout > .rail, .rmv-panel, #cm#cm) { border: 1px solid var(--border) !important; }

html body :is(.pcr, .gd-head, .rmv-head, #cm#cm) {
  background: color-mix(in srgb, var(--text-primary) 4%, var(--surface-1)) !important;
}
html body :is(.pcr, .gd-head, .rmv-head, #cm#cm)::before,
html body :is(.pcr, .gd-head, .rmv-head, #cm#cm)::after { display: none !important; }

/* The old hover lifts nudged things up-left onto their shadow; with no
   shadow they only jitter. Hover tints instead; press squeezes. */
html body :is(.pcr-btn, .btn-primary, #modeTabs .mode-tab, #viewPlayground .lang-tab, #viewRoadmap .rmv-node, .lab-card, #cm#cm):is(:hover, :active) { transform: none !important; }
html body :is(.pcr-btn, .btn-primary):hover:not(:disabled) { filter: brightness(1.06); }
html body :is(#viewRoadmap .rmv-node, .lab-card, #cm#cm):hover:not(:disabled) { background: color-mix(in srgb, var(--g-blue) 10%, var(--surface-1)) !important; }

/* Controls and counts: soft fills, no frames until focus. */
html body :is(.plv-search, .fchip-b, #plvFold, .plv-sec-n, .rmv-node, #cm#cm) {
  border-color: transparent !important;
  background-color: color-mix(in srgb, var(--text-primary) 6%, transparent) !important;
}
html body :is(.plv-search, #cm#cm):focus-within { border-color: var(--g-blue) !important; }
/* The chosen guide: a tint and a blue title, no frame. */
html body :is(.gd-nav-i.is-on, #cm#cm) { border-color: transparent !important; background: color-mix(in srgb, var(--g-blue) 16%, transparent) !important; color: var(--g-blue-text, var(--g-blue)) !important; }
/* Section titles: a short tone bar instead of a tilted framed square. */
html body :is(.plv-sec-t, #viewGuides .gd-h, #cm#cm)::before {
  width: 18px !important; height: 5px !important; border: 0 !important; border-radius: 999px !important; transform: none !important;
}