/* ══════════════════════════════════════════════════════════════
   WAYMO — the last layer, for /tools/pg alone and the SolveMe frame.
   The register of cariara.com's Waymo pass (the jobs page,
   applyShowcase.css): air and quiet edges instead of boxes.
   - sheets: 16px corners, one soft hairline, a faint rest; on hover they
     lift 2px with a long soft drop and a blue-tinted edge;
   - switches (views, language, segments): round pills on a soft track,
     the current one white (no ink fills, no keycaps);
   - chips and counts: borderless soft pills; labels quiet mono;
   - the one primary action: a Waymo-blue pill;
   - progress in the Waymo ramp: blue, lime part-way, mint done; no red;
   - the roadmap: rounded topic sheets on soft blue-grey links.
   Waymo palette: blue #0077FF, sky #5AA2FF, lime #9AD61A, mint #00C896.
   Rules read  html body :is(<sel>, #wy#wy#wy#wy#wy#wy#wy)  so they settle
   plx.css (five ids) and showcase.css (six). #wy is never in the page.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
html:not(#wy) {
  --wy-blue: #0077FF;
  --wy-deep: #0062D6;
  --wy-sky: #5AA2FF;
  --wy-lime: #8CC414;
  --wy-mint: #00C896;
  --wy-ink: #1F2328;
  --wy-mute: #5B6470;
  --wy-line: #E9ECF0;
  --wy-track: #F2F4F7;
  --wy-on-track: #FFFFFF;
  --wy-sheet: #FFFFFF;
  --wy-tint: #E5F0FF;
  --wy-tint-ink: #0058C2;
  --wy-edge: #C9D6E6;
  --wy-rest: 0 1px 2px rgba(15, 23, 42, .04);
  --wy-lift: 0 18px 36px -22px rgba(13, 37, 77, .35), 0 2px 6px -2px rgba(13, 37, 77, .08);
  --wy-pill: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .04);
  --wy-ease: cubic-bezier(.165, .84, .44, 1);
  --wy-mono: 'Geist Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
html[data-scheme='dark']:not(#wy) {
  --wy-blue: #5AA2FF;
  --wy-deep: #2B83EC;
  --wy-lime: #B6E35A;
  --wy-mint: #3FD9B0;
  --wy-ink: #EEF2F6;
  --wy-mute: #9DA9B6;
  --wy-line: #3A424C;
  --wy-track: rgba(255, 255, 255, .05);
  --wy-on-track: #2A313C;
  --wy-sheet: #2D333B;
  --wy-tint: rgba(127, 178, 255, .14);
  --wy-tint-ink: #A6CBFF;
  --wy-edge: #4A5562;
  --wy-rest: 0 1px 2px rgba(0, 0, 0, .3);
  --wy-lift: 0 18px 36px -22px rgba(0, 0, 0, .8), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --wy-pill: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ── Switches: round pills on a soft track, the current one white ── */
html body :is(#modeTabs, #langSwitch, .seg, .pgv-tabs, .docnav, #wy#wy#wy#wy#wy#wy#wy) {
  border: 0 !important; border-radius: 999px !important; background: var(--wy-track) !important;
  padding: 4px !important; box-shadow: none !important; gap: 2px !important;
}
html body :is(#modeTabs .mode-tab, #langSwitch .lang-pill, .seg-b, .pgv-tab, .docnav-b, #wy#wy#wy#wy#wy#wy#wy) {
  border: 0 !important; border-radius: 999px !important; background: transparent !important;
  box-shadow: none !important; color: var(--wy-mute) !important;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease !important;
}
html body :is(#modeTabs .mode-tab, #langSwitch .lang-pill, .seg-b, .pgv-tab, .docnav-b, #wy#wy#wy#wy#wy#wy#wy):hover { color: var(--wy-ink) !important; }
html body :is(#modeTabs .mode-tab.is-on, #modeTabs .mode-tab[aria-selected='true'], #langSwitch .lang-pill.is-on,
  .seg-b.is-on, .pgv-tab.is-on, .docnav-b.is-on, #wy#wy#wy#wy#wy#wy#wy) {
  background: var(--wy-on-track) !important; color: var(--wy-ink) !important; box-shadow: var(--wy-pill) !important;
}
html body :is(#modeTabs .mode-tab.is-on svg, #modeTabs .mode-tab.is-on .ico, #wy#wy#wy#wy#wy#wy#wy) { color: var(--wy-blue) !important; }
html body :is(#modeTabs .mode-tab, .docnav-b, #wy#wy#wy#wy#wy#wy#wy)::after { display: none !important; }

/* ── Sheets: 16px, one soft hairline, a faint rest ── */
html body :is(.cat-card, .gd-map-i, .gd-card, .chv-card, .chv-rung, .chv-today, .rmv-node, .rmv-panel, .plv-sec, .plv-card,
  .rel-p, .tp-prereq, .ex-card, .fig, .gd-pad, .hintbox, .phd-ver, .sol-figure, .sol-code, .verdict, .case, .mc-case,
  .gd-tier, .gd-phase, .lab-list, .sol-gate, .pls-card, .pls-rows, .pls-stage, #viewGuides .gd-top, #wy#wy#wy#wy#wy#wy#wy) {
  border: 1px solid var(--wy-line) !important; border-radius: 16px !important;
  background-color: var(--wy-sheet) !important; box-shadow: var(--wy-rest) !important;
}
/* Workspace panes and the console: wells, a little tighter. */
html body :is(.layout > .pane, .console, .pgv-split, #wy#wy#wy#wy#wy#wy#wy) {
  border: 1px solid var(--wy-line) !important; border-radius: 12px !important; box-shadow: var(--wy-rest) !important;
}
/* The ones you open lift. */
html body :is(.cat-card, .gd-map-i, .chv-card, .chv-rung, .rmv-node, .rel-p, .tp-prereq, .plv-sec, .pls-card, #wy#wy#wy#wy#wy#wy#wy) {
  transition: transform .4s var(--wy-ease), box-shadow .4s var(--wy-ease), border-color .2s ease !important;
}
html body :is(.cat-card, .gd-map-i, .chv-card, .chv-rung, .rmv-node, .rel-p, .tp-prereq, .pls-card, #wy#wy#wy#wy#wy#wy#wy):hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--wy-blue) 30%, var(--wy-line)) !important; box-shadow: var(--wy-lift) !important;
}
html body :is(.plv-sec, #wy#wy#wy#wy#wy#wy#wy):hover { border-color: color-mix(in srgb, var(--wy-blue) 24%, var(--wy-line)) !important; box-shadow: var(--wy-lift) !important; }
/* Rounded corners carry through what the older layers draw inside a sheet. */
html body :is(.cat-card, .gd-map-i, .gd-card, .chv-card, .chv-rung, .chv-today, .rmv-node, .plv-sec, .rel-p, .tp-prereq, .ex-card,
  .gd-pad, .hintbox, .case, .mc-case, .gd-tier, .gd-phase, .verdict, .pls-card, .pls-stage, #wy#wy#wy#wy#wy#wy#wy)::before { border-radius: inherit !important; }
html body :is(.cat-card, .gd-map-i, .chv-card, .chv-today, .rmv-node, .pls-card, .pls-stage, .pls-rows, .plv-sec, #wy#wy#wy#wy#wy#wy#wy) { overflow: hidden; }
/* Quiet edges: no accent segment on top rules. */
html body :is(.gd-card.gd-wide, .rmv-panel, .sol-gate, .phd-ver, .chv-today, .pls-stage, #viewGuides .gd-top, #wy#wy#wy#wy#wy#wy#wy)::after { display: none !important; }
html body :is(.rmv-panel, .cmdk, .boot-card, #wy#wy#wy#wy#wy#wy#wy) { border: 0 !important; border-radius: 16px !important; box-shadow: var(--wy-lift), 0 0 0 1px var(--wy-line) !important; }

/* ── Chips and counts: borderless soft pills ── */
html body :is(.plv-sec-n, .gd-n, .docnav-n, .pgv-pcount, .gd-map-pads, .gd-pad-tag, .rail-group-n, .cat-n, #wy#wy#wy#wy#wy#wy#wy) {
  border: 0 !important; border-radius: 999px !important; background: var(--wy-track) !important; box-shadow: none !important;
  color: var(--wy-mute) !important;
}
html body :is(.plv-sec-n.is-done, .gd-map-n.is-done, #wy#wy#wy#wy#wy#wy#wy) { background: color-mix(in srgb, var(--wy-mint) 16%, transparent) !important; color: var(--wy-ink) !important; }
html body :is(.fchip-b, .gd-pchip, .chv-theme, .labdlg-filters button, .rel-cat, .pcr-card, #viewRoadmap .rmv-tile, .gd-chip, .chv-tags span, #wy#wy#wy#wy#wy#wy#wy) {
  border: 0 !important; border-radius: 999px !important; background: var(--wy-track) !important; box-shadow: none !important;
  color: var(--wy-ink) !important;
}
html body :is(.fchip-b, .gd-pchip, .chv-theme, .labdlg-filters button, .rel-cat, #wy#wy#wy#wy#wy#wy#wy):hover { background: color-mix(in srgb, var(--wy-blue) 8%, var(--wy-track)) !important; }
html body :is(.fchip.is-set .fchip-b, .gd-pchip.is-on, .chv-theme.is-on, .chv-theme[aria-pressed='true'],
  .labdlg-filters button.is-on, .plv-chip, #wy#wy#wy#wy#wy#wy#wy) {
  background: var(--wy-tint) !important; color: var(--wy-tint-ink) !important; border: 0 !important;
}
html body :is(.fchip.is-set .fchip-b, .chv-theme.is-on, .plv-chip, #wy#wy#wy#wy#wy#wy#wy) :is(svg, .ico, b) { color: var(--wy-tint-ink) !important; }
/* Labels: quiet mono. */
html body :is(.rmv-stage-n, .rmv-stage-c, .plv-count, .gd-map-k, #wy#wy#wy#wy#wy#wy#wy) { color: var(--wy-mute) !important; }

/* ── Search: one soft pill, a blue ring when you type ── */
html body :is(.plv-search, .chv-search, .labdlg-search, #wy#wy#wy#wy#wy#wy#wy) {
  border: 1px solid var(--wy-line) !important; border-radius: 999px !important; background: var(--wy-sheet) !important; box-shadow: var(--wy-rest) !important;
}
html body :is(.plv-search, .chv-search, #wy#wy#wy#wy#wy#wy#wy):focus-within {
  border-color: var(--wy-blue) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--wy-blue) 16%, transparent) !important;
}
html body :is(kbd, .plv-search kbd, .chv-search kbd, .rail-kbd, #wy#wy#wy#wy#wy#wy#wy) {
  border: 1px solid var(--wy-line) !important; border-radius: 6px !important; box-shadow: none !important;
  background: var(--wy-track) !important; color: var(--wy-mute) !important;
}

/* ── Buttons: pills; the primary is Waymo blue ── */
html body :is(.btn, .plv-act, .prob-nav-b, .list-btn, .sol-view-b, .pgv-labs-btn, .gd-pad-b, .gd-pad-run, .chv-surprise,
  .chv-today-go, .pcr-btn, .pls-back, .cat-x, .coach-act, #wy#wy#wy#wy#wy#wy#wy) {
  border-radius: 999px !important; box-shadow: none !important;
}
html body :is(.btn-ghost, .btn-secondary, .plv-act:not(.is-primary), .prob-nav-b, .list-btn, .gd-pad-b, .chv-surprise, .sol-view-b,
  .pls-back, .cat-x, .pgv-tools .btn-ghost, #wy#wy#wy#wy#wy#wy#wy) {
  border: 1px solid var(--wy-line) !important; background: var(--wy-sheet) !important; color: var(--wy-ink) !important;
}
html body :is(.btn-ghost, .btn-secondary, .plv-act:not(.is-primary), .prob-nav-b, .list-btn, .gd-pad-b, .chv-surprise, .sol-view-b,
  .pls-back, .cat-x, .pgv-tools .btn-ghost, #wy#wy#wy#wy#wy#wy#wy):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--wy-blue) 35%, var(--wy-line)) !important; background: var(--wy-sheet) !important;
}
html body :is(.btn-primary, .plv-act.is-primary, .gd-pad-run, .chv-today-go, .pcr-btn, #pgRun, #wy#wy#wy#wy#wy#wy#wy) {
  border: 1px solid var(--wy-deep) !important; background: var(--wy-deep) !important; color: #FFFFFF !important;
}
html body :is(.btn-primary, .plv-act.is-primary, .gd-pad-run, .chv-today-go, .pcr-btn, #pgRun, #wy#wy#wy#wy#wy#wy#wy):hover:not(:disabled) {
  background: color-mix(in srgb, var(--wy-deep) 88%, #000) !important; border-color: color-mix(in srgb, var(--wy-deep) 88%, #000) !important;
}

/* ── Progress: rounded, blue; lime part-way, mint done ── */
html body :is(.plv-meter, .gd-top-bar, .gd-map-bar, .rmv-track, .chv-meter, .rail-meter, .tier-bar, .pls-meter, #wy#wy#wy#wy#wy#wy#wy) {
  border-radius: 999px !important; background: var(--wy-track) !important; overflow: hidden; border: 0 !important;
}
html body :is(.plv-meter i, .gd-top-bar i, .gd-map-bar i, .rmv-track span, .chv-meter i, .rail-meter i, .tier-bar i, .pls-meter > i, #wy#wy#wy#wy#wy#wy#wy) {
  border-radius: 999px !important; background: var(--wy-blue) !important;
}
html body :is(.rmv-node.is-part .rmv-track span, #wy#wy#wy#wy#wy#wy#wy) { background: var(--wy-lime) !important; }
html body :is(.rmv-node.is-done .rmv-track span, .pls-prog.is-done .pls-meter > i, #wy#wy#wy#wy#wy#wy#wy) { background: var(--wy-mint) !important; }

/* ── Practice: the topic rows ── */
html body :is(.plv-sec-h, #wy#wy#wy#wy#wy#wy#wy) { border-radius: 16px !important; background: transparent !important; }
html body :is(.plv-row, .pls-row, #wy#wy#wy#wy#wy#wy#wy) { border-top: 1px solid var(--wy-line) !important; }
html body :is(.plv-row, .pls-row, #wy#wy#wy#wy#wy#wy#wy):hover { background: color-mix(in srgb, var(--wy-blue) 5%, transparent) !important; }
html body :is(.plv-sec-mark, .cat-mark, #wy#wy#wy#wy#wy#wy#wy) { border: 0 !important; border-radius: 999px !important; background: var(--wy-track) !important; color: var(--wy-ink) !important; }

/* ── Roadmap: rounded topic sheets on soft blue-grey links ── */
html body :is(#rmvGraph, #viewRoadmap, #wy#wy#wy#wy#wy#wy#wy) { --edge: var(--wy-edge); }
html body :is(.rmv-edges path, #wy#wy#wy#wy#wy#wy#wy) { stroke: var(--wy-edge) !important; stroke-width: 1.5px; }
html body :is(.rmv-stage-rule, #wy#wy#wy#wy#wy#wy#wy) { background: var(--wy-line) !important; height: 1px !important; }
html body :is(.rmv-stage-n, #wy#wy#wy#wy#wy#wy#wy) {
  border: 0 !important; border-radius: 999px !important; background: var(--wy-track) !important; box-shadow: none !important;
  font: 500 12px/1 var(--wy-mono) !important;
}
html body :is(.rmv-stage-n, #wy#wy#wy#wy#wy#wy#wy)::after { content: none !important; }
html body :is(.rmv-label, #rmvGraph .rmv-label, #wy#wy#wy#wy#wy#wy#wy) { color: var(--wy-ink) !important; }
html body :is(.rmv-meta, #wy#wy#wy#wy#wy#wy#wy) { font-family: var(--wy-mono) !important; color: var(--wy-mute) !important; }
/* States: done and part-way show in the bar and a soft edge; the open topic is a blue ring. */
html body :is(.rmv-node.is-done, #wy#wy#wy#wy#wy#wy#wy) { border-color: color-mix(in srgb, var(--wy-mint) 45%, var(--wy-line)) !important; box-shadow: var(--wy-rest) !important; }
html body :is(.rmv-node.is-part, #wy#wy#wy#wy#wy#wy#wy) { border-color: color-mix(in srgb, var(--wy-lime) 45%, var(--wy-line)) !important; box-shadow: var(--wy-rest) !important; }
html body :is(.rmv-node.is-sel, #wy#wy#wy#wy#wy#wy#wy) {
  outline: 0 !important; background-image: none !important; border-color: var(--wy-blue) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wy-blue) 14%, transparent), var(--wy-rest) !important;
}

/* ── Empty states: a soft well ── */
html body :is(.chv-empty, .plv-none, .ex-empty, .mc-empty, .pgv-pnone, .rail-none, .viz-empty, .viz-none, .cmdk-none, #wy#wy#wy#wy#wy#wy#wy) {
  border: 1px dashed var(--wy-line) !important; border-radius: 16px !important; background-image: none !important;
  background-color: var(--wy-track) !important; box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.cat-card, .gd-map-i, .chv-card, .chv-rung, .rmv-node, .rel-p, .tp-prereq, .plv-sec, .pls-card, #wy#wy#wy#wy#wy#wy#wy):hover { transform: none !important; }
}

/* ── Use cases: a highlighted strip, as in SolveMe (the way into each
   version's statement and solutions must be seen, not found) ── */
html body :is(.phd-ver, #wy#wy#wy#wy#wy#wy#wy) {
  padding: 12px 14px !important; border: 1px solid color-mix(in srgb, var(--wy-blue) 26%, var(--wy-line)) !important;
  border-radius: 16px !important; background: color-mix(in srgb, var(--wy-blue) 7%, var(--wy-sheet)) !important;
}
html body :is(.phd-ver .uc-chip, #wy#wy#wy#wy#wy#wy#wy) {
  border: 1px solid color-mix(in srgb, var(--wy-blue) 32%, var(--wy-line)) !important; border-radius: 14px !important;
  background: var(--wy-sheet) !important; color: var(--wy-ink) !important; font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important; transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease !important;
}
html body :is(.phd-ver .uc-chip, #wy#wy#wy#wy#wy#wy#wy):hover { transform: translateY(-1px); border-color: var(--wy-blue) !important; box-shadow: var(--wy-lift) !important; }
html body :is(.phd-ver .uc-chip.is-on, #wy#wy#wy#wy#wy#wy#wy) { background: #0062D6 !important; border-color: #0062D6 !important; color: #FFFFFF !important; }
html body :is(.phd-ver .uc-chip.is-on, #wy#wy#wy#wy#wy#wy#wy) :is(.ico, svg, small, span) { color: #FFFFFF !important; }