/* ══════════════════════════════════════════════════════════════
   WAYMO × GEN-Z — Practice (#viewList), the last layer.
   waymo.css keeps its calm sheets; this turns the volume up on the
   problem list alone, still in the Waymo palette:
   - the title: heavy display type in a blue → sky → mint sweep, on a
     faint aurora wash at the top of the page;
   - the numbers: chunky tinted pills, each in its own Waymo tone;
   - the one action: a fat blue pill with a soft glow; it presses in;
   - topic sheets: 20px, a tone-filled squircle mark that tilts on hover,
     a thick blue → mint meter, a springy lift;
   - difficulty: Easy mint, Medium lime, Hard ink (still no red);
   - the side card: a thick swept ring, round tier bars.
   Waymo palette: blue #0077FF, sky #5AA2FF, lime #9AD61A, mint #00C896.
   Rules read  html body :is(<sel>, #wg#wg#wg#wg#wg#wg#wg#wg)  so they settle
   waymo.css (seven ids). #wg is never in the page.
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
html:not(#wg) {
  --wg-blue: var(--wy-blue, #0077FF);
  --wg-deep: var(--wy-deep, #0062D6);
  --wg-sky: var(--wy-sky, #5AA2FF);
  --wg-lime: #9AD61A;
  --wg-lime-ink: #4F7A00;
  --wg-mint: var(--wy-mint, #00C896);
  --wg-mint-ink: #00795E;
  --wg-ink: var(--wy-ink, #1F2328);
  --wg-sweep: linear-gradient(100deg, #0062D6 0%, #0077FF 38%, #5AA2FF 66%, #00C896 100%);
  --wg-meter: linear-gradient(90deg, #0077FF 0%, #5AA2FF 55%, #00C896 100%);
  --wg-glow: 0 10px 24px -10px rgba(0, 119, 255, .65), 0 2px 0 0 #0050B0;
  --wg-spring: cubic-bezier(.34, 1.56, .64, 1);
  --wg-display: 'Plus Jakarta Sans', 'Instrument Sans', var(--font-sans);
}
html[data-scheme='dark']:not(#wg) {
  --wg-lime: #B6E35A;
  --wg-lime-ink: #B6E35A;
  --wg-mint-ink: #3FD9B0;
  --wg-sweep: linear-gradient(100deg, #7FB2FF 0%, #5AA2FF 45%, #3FD9B0 100%);
  --wg-glow: 0 10px 24px -10px rgba(90, 162, 255, .55), 0 2px 0 0 #1A5FB8;
}
/* Each topic tone, as one colour (--wt) and its wash (--wtt). */
html body :is(#viewList .tone-blue, #wg#wg#wg#wg#wg#wg#wg#wg) { --wt: var(--wg-blue); --wtt: color-mix(in srgb, var(--wg-blue) 12%, transparent); }
html body :is(#viewList .tone-red, #wg#wg#wg#wg#wg#wg#wg#wg) { --wt: var(--wg-sky); --wtt: color-mix(in srgb, var(--wg-sky) 14%, transparent); }
html body :is(#viewList .tone-yellow, #wg#wg#wg#wg#wg#wg#wg#wg) { --wt: var(--wg-lime); --wtt: color-mix(in srgb, var(--wg-lime) 18%, transparent); }
html body :is(#viewList .tone-green, #wg#wg#wg#wg#wg#wg#wg#wg) { --wt: var(--wg-mint); --wtt: color-mix(in srgb, var(--wg-mint) 14%, transparent); }

/* ── The page: a faint aurora at the top ── */
html body :is(#viewList, #wg#wg#wg#wg#wg#wg#wg#wg) {
  background-image:
    radial-gradient(900px 320px at 8% -80px, color-mix(in srgb, var(--wg-blue) 10%, transparent), transparent 70%),
    radial-gradient(700px 300px at 70% -120px, color-mix(in srgb, var(--wg-mint) 9%, transparent), transparent 70%),
    radial-gradient(520px 260px at 100% 0, color-mix(in srgb, var(--wg-lime) 7%, transparent), transparent 70%) !important;
  background-repeat: no-repeat !important;
}

/* ── The crown: a heavy swept title ── */
html body :is(#plvCrown h1, #wg#wg#wg#wg#wg#wg#wg#wg) {
  font: 800 clamp(40px, 5vw, 60px)/1 var(--wg-display) !important; letter-spacing: -.045em !important;
  background: var(--wg-sweep) !important; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent;
  padding-bottom: .08em; /* keeps descenders inside the clipped paint */
}

/* The numbers: one tone each, chunky pills. */
html body :is(#plvCrownStats .pcr-card, #wg#wg#wg#wg#wg#wg#wg#wg) {
  --wt: var(--wg-blue);
  height: 44px !important; padding: 0 16px 0 6px !important; gap: 8px !important;
  border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
  background: color-mix(in srgb, var(--wt) 11%, var(--wy-sheet, #fff)) !important;
  transition: transform .35s var(--wg-spring) !important;
}
html body :is(#plvCrownStats .pcr-card:nth-child(2), #wg#wg#wg#wg#wg#wg#wg#wg) { --wt: var(--wg-sky); }
html body :is(#plvCrownStats .pcr-card:nth-child(3), #wg#wg#wg#wg#wg#wg#wg#wg) { --wt: var(--wg-mint); }
html body :is(#plvCrownStats .pcr-card:nth-child(4), #wg#wg#wg#wg#wg#wg#wg#wg) { --wt: var(--wg-lime); }
html body :is(#plvCrownStats .pcr-card:hover, #wg#wg#wg#wg#wg#wg#wg#wg) { transform: translateY(-2px) rotate(-1.5deg); }
html body :is(#plvCrownStats .pcr-well, #wg#wg#wg#wg#wg#wg#wg#wg) {
  width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 50% !important;
  background: var(--wt) !important; color: #FFFFFF !important; box-shadow: none !important;
}
html body :is(#plvCrownStats .pcr-well svg, #wg#wg#wg#wg#wg#wg#wg#wg) { color: #FFFFFF !important; }
html body :is(#plvCrownStats .pcr-card b, #wg#wg#wg#wg#wg#wg#wg#wg) {
  font: 800 19px/1 var(--wg-display) !important; letter-spacing: -.02em !important; color: var(--wg-ink) !important;
  font-variant-numeric: tabular-nums;
}
html body :is(#plvCrownStats .pcr-card small, #wg#wg#wg#wg#wg#wg#wg#wg) { font: 600 13px/1 var(--font-sans) !important; color: var(--wy-mute) !important; }

/* The one action: a fat blue pill that glows and presses in. */
html body :is(#plvNext.pcr-btn, #wg#wg#wg#wg#wg#wg#wg#wg) {
  height: 52px !important; padding: 0 22px 0 26px !important; gap: 10px !important;
  border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(180deg, #1A86FF 0%, var(--wg-deep) 100%) !important; color: #FFFFFF !important;
  font: 800 16px/1 var(--wg-display) !important; letter-spacing: -.01em !important;
  box-shadow: var(--wg-glow) !important;
  transition: transform .3s var(--wg-spring), box-shadow .2s ease, filter .2s ease !important;
}
html body :is(#plvNext.pcr-btn, #wg#wg#wg#wg#wg#wg#wg#wg):hover { transform: translateY(-2px); filter: brightness(1.06); }
html body :is(#plvNext.pcr-btn, #wg#wg#wg#wg#wg#wg#wg#wg):active { transform: translateY(2px); box-shadow: 0 4px 10px -6px rgba(0, 119, 255, .6), 0 0 0 0 #0050B0 !important; }
html body :is(#plvNext.pcr-btn svg, #wg#wg#wg#wg#wg#wg#wg#wg) {
  width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(255, 255, 255, .22);
  transition: transform .3s var(--wg-spring);
}
html body :is(#plvNext.pcr-btn, #wg#wg#wg#wg#wg#wg#wg#wg):hover svg { transform: translateX(3px); }
html body :is(#plvNext.pcr-btn, #wg#wg#wg#wg#wg#wg#wg#wg):focus-visible {
  outline: none !important; box-shadow: var(--wg-glow), 0 0 0 4px color-mix(in srgb, var(--wg-blue) 30%, transparent) !important;
}

/* ── The bar: a tall search pill and chunky filter chips ── */
html body :is(#viewList .plv-search, #wg#wg#wg#wg#wg#wg#wg#wg) { min-height: 50px !important; border-width: 1.5px !important; }
html body :is(#viewList .plv-search input, #wg#wg#wg#wg#wg#wg#wg#wg) { font: 500 15px/1 var(--font-sans) !important; }
html body :is(#viewList .fchip-b, #viewList .plv-act, #wg#wg#wg#wg#wg#wg#wg#wg) {
  min-height: 40px !important; padding-inline: 16px !important; font: 700 14px/1 var(--wg-display) !important;
  transition: transform .3s var(--wg-spring), background .2s ease !important;
}
html body :is(#viewList .fchip-b, #viewList .plv-act, #wg#wg#wg#wg#wg#wg#wg#wg):hover { transform: translateY(-1px); }
html body :is(#viewList .fchip-b, #viewList .plv-act, #wg#wg#wg#wg#wg#wg#wg#wg):active { transform: translateY(1px) scale(.98); }

/* ── Topic sheets ── */
html body :is(#viewList .plv-sec, #wg#wg#wg#wg#wg#wg#wg#wg) {
  border-radius: 20px !important; border-width: 1.5px !important;
  transition: transform .4s var(--wg-spring), box-shadow .4s var(--wy-ease), border-color .2s ease !important;
}
html body :is(#viewList .plv-sec.is-shut, #wg#wg#wg#wg#wg#wg#wg#wg):hover {
  transform: translateY(-3px) !important; border-color: color-mix(in srgb, var(--wt, var(--wg-blue)) 45%, var(--wy-line)) !important;
}
html body :is(#viewList .plv-sec:not(.is-shut), #wg#wg#wg#wg#wg#wg#wg#wg) {
  border-color: color-mix(in srgb, var(--wt, var(--wg-blue)) 50%, var(--wy-line)) !important;
  box-shadow: 0 0 0 4px var(--wtt, transparent), var(--wy-rest) !important;
}
html body :is(#viewList .plv-sec-h, #wg#wg#wg#wg#wg#wg#wg#wg) { min-height: 64px !important; gap: 12px !important; }
html body :is(#viewList .plv-sec-mark, #wg#wg#wg#wg#wg#wg#wg#wg) {
  width: 38px !important; height: 38px !important; flex: 0 0 38px !important;
  border-radius: 12px !important; background: var(--wt, var(--wg-blue)) !important; color: #FFFFFF !important;
  font: 800 13px/1 var(--wg-display) !important; letter-spacing: -.02em !important;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14) !important;
  transition: transform .4s var(--wg-spring) !important;
}
html body :is(#viewList .tone-yellow .plv-sec-mark, #wg#wg#wg#wg#wg#wg#wg#wg) { color: #1F2A05 !important; }
html body :is(#viewList .plv-sec-h:hover .plv-sec-mark, #wg#wg#wg#wg#wg#wg#wg#wg) { transform: rotate(-8deg) scale(1.06); }
html body :is(#viewList .plv-sec-t, #wg#wg#wg#wg#wg#wg#wg#wg) {
  font: 800 18px/1.2 var(--wg-display) !important; letter-spacing: -.02em !important; color: var(--wg-ink) !important;
}
html body :is(#viewList .plv-sec-sub, #wg#wg#wg#wg#wg#wg#wg#wg) { color: var(--wy-mute) !important; font-weight: 500 !important; }
html body :is(#viewList .plv-sec-n, #wg#wg#wg#wg#wg#wg#wg#wg) {
  padding: 5px 10px !important; background: var(--wtt, var(--wy-track)) !important; color: var(--wg-ink) !important;
  font: 700 12px/1 var(--wy-mono) !important;
}
html body :is(#viewList .plv-sec .plv-meter, #wg#wg#wg#wg#wg#wg#wg#wg) { height: 8px !important; }
html body :is(#viewList .plv-meter i, #wg#wg#wg#wg#wg#wg#wg#wg) { background: var(--wg-meter) !important; }
html body :is(#viewList .plv-chev, #wg#wg#wg#wg#wg#wg#wg#wg) { transition: transform .35s var(--wg-spring) !important; }

/* Rows: rounded, tinted in the topic's tone on hover. */
html body :is(#viewList .plv-row, #wg#wg#wg#wg#wg#wg#wg#wg) {
  margin: 0 8px !important; border-top: 0 !important; border-radius: 12px !important;
  transition: background .15s ease, transform .25s var(--wg-spring) !important;
}
html body :is(#viewList .plv-row + .plv-row, #wg#wg#wg#wg#wg#wg#wg#wg) { box-shadow: inset 0 1px 0 var(--wy-line) !important; }
html body :is(#viewList .plv-row, #wg#wg#wg#wg#wg#wg#wg#wg):hover { background: var(--wtt, var(--wy-track)) !important; box-shadow: none !important; transform: translateX(3px); }
html body :is(#viewList .plv-row:hover + .plv-row, #wg#wg#wg#wg#wg#wg#wg#wg) { box-shadow: none !important; }
html body :is(#viewList .plv-title, #wg#wg#wg#wg#wg#wg#wg#wg) { font-weight: 700 !important; color: var(--wg-ink) !important; }
html body :is(#viewList .plv-tag, #wg#wg#wg#wg#wg#wg#wg#wg) {
  border: 0 !important; border-radius: 999px !important; padding: 3px 9px !important;
  background: var(--wy-track) !important; color: var(--wy-mute) !important; font-weight: 600 !important;
}

/* Difficulty: Easy mint, Medium lime, Hard ink. */
html body :is(#viewList .plv-diff, #wg#wg#wg#wg#wg#wg#wg#wg) {
  padding: 5px 11px !important; border: 0 !important; border-radius: 999px !important;
  font: 800 12px/1 var(--wg-display) !important; letter-spacing: .01em !important;
}
html body :is(#viewList .plv-diff.d-Easy, #wg#wg#wg#wg#wg#wg#wg#wg) { background: color-mix(in srgb, var(--wg-mint) 16%, transparent) !important; color: var(--wg-mint-ink) !important; }
html body :is(#viewList .plv-diff.d-Medium, #wg#wg#wg#wg#wg#wg#wg#wg) { background: color-mix(in srgb, var(--wg-lime) 22%, transparent) !important; color: var(--wg-lime-ink) !important; }
html body :is(#viewList .plv-diff.d-Hard, #wg#wg#wg#wg#wg#wg#wg#wg) { background: var(--wg-ink) !important; color: var(--wy-sheet, #fff) !important; }
/* Solved: a mint tick. */
html body :is(#viewList .plv-row.is-done .plv-st, #viewList .plv-st.is-done, #wg#wg#wg#wg#wg#wg#wg#wg) { color: var(--wg-mint) !important; }

/* ── The side: a thick swept ring, round tier bars, pill topics ── */
html body :is(#viewList .plv-side .plv-card, #wg#wg#wg#wg#wg#wg#wg#wg) { border-radius: 20px !important; border-width: 1.5px !important; }
html body :is(#viewList .plv-gauge, #wg#wg#wg#wg#wg#wg#wg#wg) {
  background: conic-gradient(from -90deg, var(--wg-blue) 0, var(--wg-mint) calc(var(--pct) * 1%), var(--wy-track) 0) !important;
}
html body :is(#viewList .plv-gauge, #wg#wg#wg#wg#wg#wg#wg#wg)::before { inset: 10px !important; background: var(--wy-sheet, #fff) !important; }
html body :is(#viewList .plv-gauge b, #wg#wg#wg#wg#wg#wg#wg#wg) { font: 800 28px/1 var(--wg-display) !important; letter-spacing: -.03em !important; }
html body :is(#viewList .plv-tier > span:first-child, #wg#wg#wg#wg#wg#wg#wg#wg) { font: 700 13px/1 var(--wg-display) !important; color: var(--wg-ink) !important; }
html body :is(#viewList .plv-tier-bar, #wg#wg#wg#wg#wg#wg#wg#wg) { height: 8px !important; border-radius: 999px !important; background: var(--wy-track) !important; }
html body :is(#viewList .plv-tier-bar i, #wg#wg#wg#wg#wg#wg#wg#wg) { border-radius: 999px !important; }
html body :is(#viewList .plv-tier-bar .d-Easy-bg, #wg#wg#wg#wg#wg#wg#wg#wg) { background: var(--wg-mint) !important; }
html body :is(#viewList .plv-tier-bar .d-Medium-bg, #wg#wg#wg#wg#wg#wg#wg#wg) { background: var(--wg-lime) !important; }
html body :is(#viewList .plv-tier-bar .d-Hard-bg, #wg#wg#wg#wg#wg#wg#wg#wg) { background: var(--wg-blue) !important; }
html body :is(#viewList .plv-card-h, #wg#wg#wg#wg#wg#wg#wg#wg) { font: 800 15px/1 var(--wg-display) !important; letter-spacing: -.01em !important; color: var(--wg-ink) !important; }
html body :is(#viewList .plv-topic-b, #wg#wg#wg#wg#wg#wg#wg#wg) {
  border-radius: 12px !important; font-weight: 600 !important;
  transition: background .15s ease, transform .25s var(--wg-spring) !important;
}
html body :is(#viewList .plv-topic-b, #wg#wg#wg#wg#wg#wg#wg#wg):hover { background: color-mix(in srgb, var(--wg-blue) 8%, transparent) !important; transform: translateX(3px); }
html body :is(#viewList .plv-topic-b.is-done .plv-topic-n, #wg#wg#wg#wg#wg#wg#wg#wg) {
  padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--wg-mint) 16%, transparent); color: var(--wg-mint-ink) !important;
}

/* ── Focus: one blue ring everywhere on the page ── */
html body :is(#viewList :is(.plv-sec-h, .plv-row, .fchip-b, .plv-act, .plv-topic-b):focus-visible, #wg#wg#wg#wg#wg#wg#wg#wg) {
  outline: none !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wg-blue) 35%, transparent) !important;
}

@media (max-width: 760px) {
  html body :is(#plvCrownStats .pcr-card, #wg#wg#wg#wg#wg#wg#wg#wg) { height: 38px !important; padding-right: 12px !important; }
  html body :is(#plvNext.pcr-btn, #wg#wg#wg#wg#wg#wg#wg#wg) { height: 46px !important; font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body :is(#viewList *, #wg#wg#wg#wg#wg#wg#wg#wg) { transition: none !important; }
  html body :is(#viewList *, #wg#wg#wg#wg#wg#wg#wg#wg):hover { transform: none !important; }
}