/* ══════════════════════════════════════════════════════════════
   "Calm Grid" — shared by home.html, practice.html and
   package-lessons.html. A fixed light palette straight from the
   Claude Design mockup (project "English learning app home screen",
   file "English App Home.dc.html", variants 1a, 4a and 5b), not the
   app's usual dark/light theme tokens — these pages intentionally
   don't follow the theme toggle. One layout at every viewport width
   (no mobile/desktop breakpoint split), matching the mockup's single
   phone-content column, just centered on wider screens.
   ══════════════════════════════════════════════════════════════ */

:root {
  --cg-bg: #FBF7F0;
  --cg-ink: #2E2A26;
  --cg-ink-dim: rgba(46, 42, 38, 0.52);
  --cg-ink-faint: rgba(46, 42, 38, 0.5);
  --cg-border: rgba(46, 42, 38, 0.09);
  --cg-accent: #C2571F;
  --cg-teal: #2F8F8A;
  --cg-accent-2: #2F8F8A;
  --cg-accent-2-tint: #EAF4F2;
  --cg-surface: #F3ECE1;
  --cg-track: rgba(46, 42, 38, 0.09);
  --cg-font-heading: 'Nunito', system-ui, sans-serif;
  --cg-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.cg-body {
  background: var(--cg-bg);
  color: var(--cg-ink);
  font-family: var(--cg-font-body);
}

.cg-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

/* ─── LOADING SKELETON (Claude Design mockup #7a "Skeleton sweep") ──
   A full-viewport overlay shown from first paint and removed in one
   shot by landing.js once every part of the page's data has loaded —
   see initLandingPage(). The placeholders follow the Home layout
   (full-bleed cover with its controls and streak pill, a shelf, the
   topic index) at the same sizes, so nothing jumps when the real page
   appears underneath. */
@keyframes om-sweep   { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes om-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.cg-skel-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--cg-bg);
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.cg-skel-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
  animation: om-sweep 1.8s ease-in-out infinite;
  pointer-events: none;
}

.cg-skel-col {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  /* Bottom padding mirrors .cg-tabbar-spacer's height so skeleton
     content doesn't scroll in underneath the now-visible, higher
     z-index bottom tab bar (see .cg-tabbar). */
  padding: 0 0 78px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-sizing: border-box;
  overflow: hidden;
}

.cg-skel-block {
  border-radius: 999px;
  background: var(--cg-track);
  flex-shrink: 0;
}

.cg-skel-brand {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  animation: om-breathe 2.6s ease-in-out infinite;
}
.cg-skel-brand-dot {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--cg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg-skel-brand-dot span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  transform: translateX(-1.5px);
}
.cg-skel-brand-word {
  font-family: var(--cg-font-heading);
  font-size: 19px;
  font-weight: 800;
  color: var(--cg-accent);
  letter-spacing: 0.01em;
}

.cg-skel-cover {
  position: relative;
  height: 420px;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #efe4d3 0%, #e8dac5 55%, #ddc9ae 100%);
}
/* A soft light that drifts across the cover while it loads. */
.cg-skel-cover::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  animation: om-drift 3.2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes om-drift { 0% { transform: translate(-22%, -8%); } 100% { transform: translate(22%, 8%); } }
.cg-skel-cover-controls {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
  display: flex;
  gap: 8px;
}
.cg-skel-glass {
  display: block;
  height: 36px;
  border-radius: 999px;
  background: rgba(46, 42, 38, .14);
}
.cg-skel-cover-badge {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
}
.cg-skel-cover-text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cg-skel-on-cover { background: rgba(46, 42, 38, .13); }
.cg-skel-cover-btn { margin-top: 6px; background: rgba(255, 255, 255, .75); }
@media (prefers-reduced-motion: reduce) {
  .cg-skel-sweep, .cg-skel-cover::after, .cg-skel-brand, .cg-skel-breathe { animation: none; }
}
.cg-skel-pad {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
.cg-skel-shelf {
  display: flex;
  gap: 12px;
  overflow: hidden;
}
.cg-skel-shelf-card {
  flex: none;
  width: 138px;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background: var(--cg-track);
}
.cg-skel-index {
  display: flex;
  flex-direction: column;
}
.cg-skel-index-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid rgba(46, 42, 38, .1);
}
.cg-skel-breathe {
  animation: om-breathe 1.6s ease-in-out infinite;
}

/* ─── PRACTICE LEVEL PICKER ────────────────────────────────── */
.cg-level-picker {
  position: relative;
}

.cg-level-pill {
  gap: 6px;
  padding: 0 12px 0 14px;
  font-family: var(--cg-font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.cg-level-pill svg {
  flex-shrink: 0;
}

.cg-level-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  width: 176px;
  background: #fff;
  border: 1px solid var(--cg-border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 10px 30px rgba(46, 42, 38, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* The [hidden] attribute and the .cg-level-menu class have equal CSS
   specificity, and this rule's own display:flex loads after the UA
   stylesheet's [hidden]{display:none} — so without this override,
   toggling the `hidden` property wouldn't actually hide the menu. */
.cg-level-menu[hidden] {
  display: none;
}

.cg-level-menu-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--cg-ink-faint);
  padding: 4px 10px 6px;
  display: block;
}

.cg-level-option {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 9px 12px;
  font-family: var(--cg-font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cg-ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.cg-level-option:hover {
  background: rgba(194, 87, 31, 0.08);
}
.cg-level-option.active {
  background: rgba(194, 87, 31, 0.14);
  color: var(--cg-accent);
}
/* Hint-style label — the colored code chip is the primary identifier
   now, this is just a smaller, dimmer clarification next to it. */
.cg-level-option-name {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--cg-ink-dim);
}
.cg-level-option.active .cg-level-option-name {
  color: var(--cg-accent);
}
.cg-level-option-code {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cg-track);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--cg-ink-dim);
}
/* Same 4-color tonal ramp as .pl-level-pill.lvl-a1..b2 (package-lessons)
   and .prof-lesson-badge.lvl-a1..b2 (profile) — its own rule since this
   chip is sized differently from those. Left level-colored regardless
   of .active (it's a meaningful identity now, not a generic tint) —
   the row's own background + the name turning accent-colored above
   already signal selection. */
.cg-level-option-code.lvl-a1 { background: #f0fae1; color: #56633f; }
.cg-level-option-code.lvl-a2 { background: #e1eecc; color: #3d472b; }
.cg-level-option-code.lvl-b1 { background: #fff2eb; color: #8c491a; }
.cg-level-option-code.lvl-b2 { background: #ffe1d0; color: #643312; }
.cg-level-option-code.lvl-c1 { background: #e6eef7; color: #2f4a66; }
.cg-level-option-code.lvl-c2 { background: #ece6f5; color: #4a3a66; }

/* "See all" link — used by profile.html's Recent lessons card. */
.cg-pkg-see-all {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cg-accent);
  text-decoration: none;
}
.cg-pkg-see-all:hover { text-decoration: underline; }

/* ─── HOME (canvas "Home · signed in", design M5) ─────────────
   Full-bleed "Today's pick" cover with frosted controls, shelves of
   lessons, a numbered topic index, and the pinned streak badge. */
.cg-home {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-bottom: 8px;
  box-sizing: border-box;
}
.cg-home-pad { padding: 0 16px; }
.cg-home-pad[hidden], .cg-shelf[hidden] { display: none; }

.cg-cover {
  position: relative;
  height: 420px;
  background: #2e2a26;
  /* not overflow:hidden — the level menu (7 levels + "Find my level")
     hangs below the cover; the art layer does the clipping instead. */
}
.cg-cover-art {
  position: absolute;
  inset: 0;
  color: #fff;
  overflow: hidden;
}
.cg-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cg-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 27, 24, .45) 0%, rgba(30, 27, 24, 0) 28%, rgba(30, 27, 24, 0) 45%, rgba(30, 27, 24, .9) 100%);
}
.cg-cover-text {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cg-cover.empty .cg-cover-text { display: none; }
.cg-cover-kicker {
  font-size: 11px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}
.cg-cover-title {
  margin: 6px 0 14px;
  color: #fff;
  font-family: var(--cg-font-heading);
  font-size: 32px;
  line-height: 34px;
  font-weight: 900;
  text-wrap: pretty;
}
.cg-cover-btn-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--cg-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.cg-cover-btn-play:hover { background: #f3ece1; }
.cg-cover-btn-play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Frosted controls on the cover's top-left (settings + practice level). */
.cg-cover-controls {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cg-glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 27, 24, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
}
.cg-glass-btn:hover { background: rgba(30, 27, 24, .62); }
/* The level pill is a frosted button with text: give it side padding
   (.cg-glass-btn's padding:0 is for the round icon buttons). */
.cg-glass-btn.cg-level-pill { padding: 0 12px 0 14px; }
.cg-glass-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Shelves */
.cg-shelf { display: flex; flex-direction: column; gap: 12px; }
.cg-shelf-title {
  margin: 0;
  padding: 0 16px;
  font-family: var(--cg-font-heading);
  font-size: 19px;
  line-height: 28px;
  font-weight: 800;
  color: var(--cg-ink);
}
.cg-shelf-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 16px 2px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px; /* snap cards to the padded edge, not the screen edge */
  scrollbar-width: none;
}
.cg-shelf-row::-webkit-scrollbar { display: none; }
.cg-shelf-card {
  flex: none;
  display: flex;
  flex-direction: column;
  color: var(--cg-ink);
  text-decoration: none;
  scroll-snap-align: start;
}
.cg-shelf-card.portrait { width: 138px; }
.cg-shelf-card.landscape { width: 220px; }
.cg-shelf-img-wrap {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #ebddc5;
}
.cg-shelf-card.portrait .cg-shelf-img-wrap { aspect-ratio: 3 / 4; }
.cg-shelf-card.landscape .cg-shelf-img-wrap { aspect-ratio: 16 / 10; }
.cg-shelf-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-shelf-status {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--cg-ink);
}
.cg-shelf-status.done { color: var(--cg-teal); }
.cg-shelf-card.locked .cg-shelf-img { filter: saturate(.55) brightness(.92); opacity: .75; }
.cg-shelf-card.locked .cg-shelf-card-title { color: var(--cg-ink-dim); }
.cg-shelf-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(30, 27, 24, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.cg-shelf-card-title {
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
}
.cg-shelf-card-meta {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cg-ink-dim);
}
.cg-shelf-card:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 3px; border-radius: 16px; }

/* Topic index */
.cg-tindex { display: flex; flex-direction: column; gap: 4px; }
.cg-tindex-list { padding: 0 16px; }
.cg-tindex-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-top: 1px solid rgba(46, 42, 38, .1);
  background: none;
  color: var(--cg-ink);
  text-align: left;
  cursor: pointer;
}
.cg-tindex-num { width: 22px; flex: none; font-size: 12px; font-weight: 800; color: var(--cg-ink-dim); }
.cg-tindex-name { flex: 1; font-family: var(--cg-font-heading); font-size: 21px; font-weight: 800; }
.cg-tindex-count { font-size: 12px; font-weight: 600; color: var(--cg-ink-dim); }
.cg-tindex-row:hover .cg-tindex-name { color: var(--cg-accent); }
.cg-tindex-row:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }

/* Streak badge: frosted pill pinned top-right (same look as the cover's
   controls). Three faces share the pill; landing.js sets data-face and
   the pill's width from the active face's content. */
.cg-streak-badge {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: max(14px, calc((100vw - 480px) / 2 + 14px));
  z-index: 60;
  height: 32px;
  width: 84px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 27, 24, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  overflow: hidden;
  cursor: pointer;
  transition: width .5s cubic-bezier(.3, 1.2, .5, 1), height .3s ease;
}
.cg-streak-badge[hidden] { display: none; }
.cg-streak-badge[data-face="week"] { height: 38px; }
.cg-streak-badge:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cg-sb-face {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: max-content; /* measured by landing.js to size the pill */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.cg-streak-badge:not([data-face]) .cg-sb-face[data-face-name="days"],
.cg-streak-badge[data-face="days"] .cg-sb-face[data-face-name="days"],
.cg-streak-badge[data-face="week"] .cg-sb-face[data-face-name="week"],
.cg-streak-badge[data-face="level"] .cg-sb-face[data-face-name="level"] { opacity: 1; }
.cg-sb-face[data-face-name="days"] { gap: 5px; }
.cg-sb-face .svg-icon-flame { width: 14px; height: 14px; }
.cg-sb-days, .cg-sb-level { font-size: 12.5px; font-weight: 800; }
.cg-sb-xp { font-size: 11px; font-weight: 700; opacity: .85; }
.cg-sb-bar { width: 40px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.cg-sb-bar i { display: block; height: 100%; border-radius: 99px; background: #f0a43a; }
.cg-sb-week { display: inline-flex; gap: 4px; }
.cg-sb-day { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cg-sb-day b { font-size: 8px; font-weight: 800; line-height: 9px; opacity: .8; }
.cg-sb-dot { width: 12px; height: 12px; border-radius: 99px; box-sizing: border-box; background: rgba(245, 234, 216, .25); }
.cg-sb-dot.completed { background: #f0a43a; }
.cg-sb-dot.shielded { background: #7fd1cb; }
.cg-sb-dot.today-progress { background: transparent; border: 1.5px dashed #f0a43a; }

/* Streak details card (tap the badge). */
.cg-streak-pop {
  position: fixed;
  top: calc(54px + env(safe-area-inset-top, 0px));
  right: max(14px, calc((100vw - 480px) / 2 + 14px));
  z-index: 61;
  width: 220px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .97);
  color: var(--cg-ink);
  box-shadow: 0 4px 14px rgba(46, 42, 38, .18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cg-streak-pop[hidden] { display: none; }
.cg-sp-head { display: flex; align-items: center; justify-content: space-between; }
.cg-sp-title { font-size: 13px; font-weight: 800; }
.cg-sp-best { font-size: 11px; font-weight: 600; color: var(--cg-ink-dim); }
.cg-sp-week { display: flex; justify-content: space-between; }
.cg-sp-day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cg-sp-day b { font-size: 9.5px; font-weight: 700; color: var(--cg-ink-dim); }
.cg-sp-dot {
  width: 20px;
  height: 20px;
  border-radius: 99px;
  box-sizing: border-box;
  background: rgba(46, 42, 38, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cg-sp-dot.completed { background: var(--cg-accent); }
.cg-sp-dot.shielded { background: var(--cg-teal); }
.cg-sp-dot.today-progress { background: transparent; border: 2px dashed rgba(46, 42, 38, .3); }
.cg-sp-dot .svg-icon-shield { width: 11px; height: 11px; }
.cg-sp-row { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; }
.cg-sp-val { color: var(--cg-ink-dim); }
.cg-sp-bar { height: 5px; border-radius: 99px; background: var(--cg-track); overflow: hidden; }
.cg-sp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--cg-teal); }
.cg-sp-bar i.level { background: #f0a43a; }

@media (prefers-reduced-motion: reduce) {
  .cg-streak-badge, .cg-sb-face { transition: none; }
}

/* ─── BOTTOM TAB BAR ───────────────────────────────────────── */
.cg-tabbar-spacer {
  height: 70px;
}

.cg-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Matches .cg-container's own 480px reading-column cap — without
     this the tabs (justify-content:space-around) spread edge-to-edge
     on a wide desktop viewport instead of staying under the narrow
     centered content above them. The auto side margins center it
     within left:0/right:0 even though max-width constrains its width. */
  max-width: 480px;
  margin: 0 auto;
  /* Above .cg-skel-overlay (z-index:500) so the bottom nav stays visible
     and usable through the loading skeleton instead of being covered by
     it — the overlay only needs to hide the page content above it. */
  z-index: 510;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  border-top: 1px solid var(--cg-border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}

.cg-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cg-ink-faint);
  text-decoration: none;
  font-family: var(--cg-font-body);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
}

.cg-tab[aria-current="page"] {
  color: var(--cg-accent);
}

.cg-tab:hover {
  color: var(--cg-ink);
}
.cg-tab[aria-current="page"]:hover {
  color: var(--cg-accent);
}

/* .cg-tab is always an <a>, never a real <button>/<input> — :disabled
   never actually matches, so the guest-locked state (Path/Cards,
   toggled in updateAuthUI()) uses a real .disabled class instead. Kept
   both selectors together since they're the same visual state. */
.cg-tab:disabled,
.cg-tab.disabled {
  color: var(--cg-ink-faint);
  opacity: 0.45;
  cursor: not-allowed;
}
.cg-tab:disabled:hover,
.cg-tab.disabled:hover {
  color: var(--cg-ink-faint);
}

/* Path tab "new feature" dot (header.js's updatePathTabHint(), cleared for
   good once a hop is opened) — same visual spec as path.css's .pt-mic-dot,
   just placed here since this stylesheet (unlike path.css) is shared by
   every page that has a tab bar, path.html included. */
.cg-tab-icon { position: relative; display: inline-flex; }
.cg-tab-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e5372f;
  box-shadow: 0 0 0 2px #fff; /* .cg-tabbar is always white, unlike path.css's themed surface */
  animation: cg-tab-dot-blink 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cg-tab-dot-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .cg-tab-dot { animation: none; }
}

/* Cards tab's due-count badge (mockup 39d/deck-overviews.html's own bottom-bar
   badge, same spot/shape as .cg-tab-dot but a number instead of a dot). */
.cg-tab-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-accent-700, #8c491a);
  border: 2px solid #fff; /* .cg-tabbar is always white, same reasoning as .cg-tab-dot */
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 10px var(--cg-font-body);
  color: #fff;
  pointer-events: none;
}
.cg-tab-badge[hidden] {
  display: none;
}

/* ─── PRACTICE PAGE: CONTINUE LIST ──────────────────────────── */
.cg-continue-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cg-continue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--cg-border);
  border-radius: 16px;
  padding: 10px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cg-continue-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 42, 38, 0.07);
}

.cg-continue-thumb-wrap {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--cg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cg-continue-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cg-continue-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cg-continue-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cg-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cg-continue-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cg-continue-chip {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cg-ink-dim);
  background: var(--cg-track);
  padding: 3px 8px;
  border-radius: 999px;
}

.cg-continue-arrow {
  flex-shrink: 0;
  color: var(--cg-ink-faint);
}

/* ─── PACKAGE LESSONS PAGE (5b) ──────────────────────────────── */
.pl-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 14px;
  box-sizing: border-box;
}

.pl-back-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cg-border);
  color: var(--cg-ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pl-back-btn:hover {
  background: var(--cg-surface);
  color: var(--cg-ink);
}

.pl-thumb {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--cg-surface);
}

.pl-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pl-title {
  margin: 0;
  font-family: var(--cg-font-heading);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--cg-ink);
}

.pl-subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--cg-ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pl-search-outer {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 10px;
  box-sizing: border-box;
}

.pl-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cg-border);
  box-sizing: border-box;
}

.pl-search-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--cg-ink-faint);
}

.pl-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--cg-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cg-ink);
}
.pl-search-input::placeholder {
  color: var(--cg-ink-faint);
  font-weight: 500;
}
/* Hide the native WebKit "clear" (x) control on type=search — .pl-search-clear replaces it. */
.pl-search-input::-webkit-search-cancel-button {
  display: none;
}

.pl-search-clear {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: var(--cg-surface);
  color: var(--cg-ink-dim);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
/* Not `display:flex` unconditionally — that would beat the browser's
   default `[hidden] { display: none }` rule the same way a prior bug on
   this page did (.pl-lesson-list). Only the visible state opts into flex. */
.pl-search-clear:not([hidden]) {
  display: flex;
}
.pl-search-clear:hover {
  background: var(--cg-accent-2-tint);
  color: var(--cg-ink);
}

.pl-body {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 5px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

.pl-empty {
  margin: 24px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--cg-ink-faint);
}

.pl-level-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pl-group-header {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 4px 4px 9px;
}

.pl-level-pill {
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--cg-font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
/* Two brand hues (sage for A-levels, terracotta for B), each in two
   weights — a lighter shade for the first sub-level, a richer one for
   the second — straight from the design mockup's own tonal ramp
   (organic.css --color-accent-2-100/200/700/800 and
   --color-accent-100/200/700/800), so all four level tags are visibly
   distinct colors rather than two repeated hues. Deliberately literal
   values here rather than the site's shared --cg-teal/--cg-accent
   variables, which stay untouched everywhere else (buttons, links,
   progress fills, the "done" status coin). */
.pl-level-pill.lvl-a1 {
  background: #f0fae1;
  color: #56633f;
}
.pl-level-pill.lvl-a2 {
  background: #e1eecc;
  color: #3d472b;
}
.pl-level-pill.lvl-b1 {
  background: #fff2eb;
  color: #8c491a;
}
.pl-level-pill.lvl-b2 {
  background: #ffe1d0;
  color: #643312;
}
.pl-level-pill.lvl-c1 {
  background: #e6eef7;
  color: #2f4a66;
}
.pl-level-pill.lvl-c2 {
  background: #ece6f5;
  color: #4a3a66;
}

.pl-group-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--cg-ink-dim);
}

.pl-group-divider {
  flex: 1;
  height: 1px;
  background: var(--cg-border);
}

/* Border-drawn chevron (matches the mockup) rather than an SVG polyline —
   points down when collapsed (rotate(45deg)), flips to point up when open
   via a further +180°, same relationship the old SVG's rotate(180deg)
   already encoded. */
.pl-group-caret {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2.75px solid var(--cg-ink-dim);
  border-bottom: 2.75px solid var(--cg-ink-dim);
  margin-bottom: 3px;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.pl-group-caret.open {
  transform: rotate(225deg);
}

.pl-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* The unconditional `display: flex` above otherwise beats the browser's
   default `[hidden] { display: none }` UA rule (author styles win over UA
   styles regardless of matching specificity), so toggleGroup()'s
   `list.hidden = true` never actually collapsed anything visually. */
.pl-lesson-list[hidden] {
  display: none;
}

.pl-lesson-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--cg-border);
  cursor: pointer;
  transition: background 0.15s ease;
}
.pl-lesson-row:hover {
  background: var(--cg-surface);
}
/* Guest lock state (mockup 5b) — row stays tappable (opens the lock
   notice), just visually dimmed to read as unavailable. */
.pl-lesson-row.locked {
  opacity: 0.45;
}

.pl-lock-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cg-track);
  color: var(--cg-ink-dim);
}

.pl-status-coin {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--cg-border);
  position: relative;
}
.pl-status-coin.working {
  background: var(--cg-surface);
  border-color: var(--cg-accent);
}
.pl-status-coin.done {
  background: var(--cg-teal);
  border-color: var(--cg-teal);
}
.pl-coin-check {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.pl-coin-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--cg-accent);
}

.pl-lesson-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cg-ink);
}

.pl-word-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--cg-border);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--cg-ink-dim);
}

.pl-lesson-duration {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--cg-ink-faint);
}

/* Status "mark as" popover — same structural shape as lesson-loader.js's
   .dot-reset-tip/.dot-option (viewport-edge repositioning in JS), own
   class names so it doesn't collide with styles.css's versions (this
   page loads styles.css too). */
.pl-status-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 168px;
  background: #fff;
  border: 1px solid var(--cg-border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(46, 42, 38, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pl-status-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 8px 10px;
  font-family: var(--cg-font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cg-ink);
  cursor: pointer;
  text-align: left;
}
.pl-status-option:hover {
  background: var(--cg-surface);
}
.pl-status-option.active {
  background: rgba(194, 87, 31, 0.1);
}

.pl-status-option-dot {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 2px solid var(--cg-border);
}
.pl-status-option-dot.working {
  background: var(--cg-surface);
  border-color: var(--cg-accent);
}
.pl-status-option-dot.done {
  background: var(--cg-teal);
  border-color: var(--cg-teal);
}

/* ─── Android app popup (Android browsers only, see landing.js) ─── */
.cg-aa-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(30, 27, 24, .5);
  animation: cg-aa-fade .25s ease both;
}
.cg-aa-backdrop[hidden] { display: none; }
.cg-aa-card {
  position: relative; width: 100%; max-width: 310px;
  padding: 34px 24px 26px; border-radius: 28px;
  background: #111; color: #fff; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 20px 50px rgba(30, 27, 24, .3);
  animation: cg-aa-pop .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.cg-aa-close {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); cursor: pointer;
}
.cg-aa-logo { display: block; }
.cg-aa-title { margin-top: 14px; font: 600 24px Roboto, Arial, sans-serif; }
.cg-aa-install {
  margin-top: 22px; width: 100%; display: block; padding: 14px;
  border-radius: 999px; background: #fff; color: #000;
  text-decoration: none; font: 700 16px Roboto, Arial, sans-serif;
}
.cg-aa-install:focus-visible, .cg-aa-close:focus-visible { outline: 3px solid #34A853; outline-offset: 3px; }
@keyframes cg-aa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-aa-pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cg-aa-backdrop, .cg-aa-card { animation: none; } }

/* ─── Package lessons · bento wall (canvas "Bento: big + two stacked · dot")
   Edge-to-edge photo tiles, 2px hairline gaps, square corners. Rows
   alternate a tall big+stack row and a short pair row (see
   PL_BENTO_PATTERN in package-lessons.js). Status uses the lesson page's
   own dot colours (○ grey / ● yellow / ● green — css/player.css). */
.pl-bento-page {
  --pl-dot-working: #d29922;
  --pl-dot-done: #3fb950;
}
.pl-bento-head { padding-bottom: 10px; }
.pl-bento-page .pl-body {
  max-width: 480px;
  padding: 0 0 24px;
  gap: 0;
}
.pl-bento { display: flex; flex-direction: column; gap: 2px; }
/* Loading state (canvas "loading 6"): a faded ghost of the wall with the
   waveform loader centred over it. */
.pl-loading { position: relative; }
.pl-ghost-wall { opacity: .35; }
.pl-ghost-tile { flex: 1 1 0; min-width: 0; background: #e6ddcd; }
.pl-bento-row > .pl-ghost-tile.big { flex: 1.7 1 0; }
.pl-loading-center { position: absolute; left: 0; right: 0; top: 230px; }
.pl-loading-center .waveform-bar { width: 5px; background: var(--cg-accent, #c2571f); }
.pl-loading-center .waveform-status-text { font-size: 14px; font-weight: 800; color: var(--cg-ink, #2e2a26); }
.pl-icon-btn:disabled { opacity: .45; cursor: default; }
.pl-bento-row { display: flex; gap: 2px; height: 180px; }
.pl-bento-row.tall { height: 300px; }
.pl-bento-row > .pl-tile { flex: 1 1 0; }
.pl-bento-row > .pl-tile.big { flex: 1.7 1 0; }
.pl-bento-stack { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-bento-stack > .pl-tile { flex: 1 1 0; }
.pl-tile { position: relative; min-width: 0; min-height: 0; }
.pl-tile:has(.pl-status-tip) { z-index: 5; }
.pl-lesson-row.pl-tile-link,
.pl-lesson-row.pl-tile-link:hover {
  position: absolute;
  inset: 0;
  display: block;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--cg-surface);
  opacity: 1;
  cursor: pointer;
}
.pl-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .8));
}
.pl-tile-level { position: absolute; top: 9px; left: 9px; padding: 3px 8px; font-size: 11px; }
.pl-lesson-title.pl-tile-title {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 11px;
  color: #fff;
  font: 900 14px/1.15 var(--cg-font-heading);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
}
.pl-tile.big .pl-tile-title { font-size: 16px; }
/* Beats the old list coin's .pl-status-coin.working/.done fill + ring
   (same element class, kept for the shared status popover wiring). */
.pl-status-coin.pl-tile-dot,
.pl-status-coin.pl-tile-dot.working,
.pl-status-coin.pl-tile-dot.done {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.pl-tile-dot::before {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, .25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.pl-tile-dot.working::before { background: var(--pl-dot-working); }
.pl-tile-dot.done::before { background: var(--pl-dot-done); }
.pl-tile-dot .pl-status-tip { top: 34px; left: auto; right: 0; }
.pl-tile-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, .9);
}
.pl-tile.locked .pl-tile-img { filter: grayscale(.6) brightness(.85); }
.pl-bento-page .pl-status-option-dot.working { background: var(--pl-dot-working); border-color: var(--pl-dot-working); }
.pl-bento-page .pl-status-option-dot.done { background: var(--pl-dot-done); border-color: var(--pl-dot-done); }
.pl-bento-page .pl-empty { padding: 24px 16px; }

/* ─── Package lessons · header search + checklist filter ─────────
   Search opens in place of the title (suggestions drop below it); the
   funnel opens a checklist of levels + progress; chosen filters stay as
   removable chips above the wall. */
.pl-bento-head { position: relative; z-index: 30; }
.pl-bento-head .pl-titles { flex: 1; min-width: 0; }
.pl-icon-btn {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--cg-border);
  background: #fff;
  color: var(--cg-ink-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pl-icon-btn:hover { background: var(--cg-surface); color: var(--cg-ink); }
.pl-icon-btn.on { background: var(--cg-ink); border-color: var(--cg-ink); color: #fff; }
.pl-icon-btn[hidden], .pl-hsearch[hidden], .pl-hsearch-cancel[hidden] { display: none; }
.pl-filter-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--cg-accent);
  color: #fff;
  font: 800 11px/18px var(--cg-font-body);
  text-align: center;
}
.pl-filter-badge[hidden] { display: none; }
.pl-hsearch {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(46, 42, 38, .12);
  color: var(--cg-ink-dim);
}
.pl-hsearch-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: 600 15px var(--cg-font-body);
  color: var(--cg-ink);
}
.pl-hsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pl-hsearch-clear {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--cg-surface);
  color: var(--cg-ink);
  font: 800 16px system-ui;
  cursor: pointer;
}
.pl-hsearch-clear[hidden] { display: none; }
.pl-hsearch-cancel {
  flex: none;
  border: 0;
  background: none;
  padding: 0 2px;
  font: 800 13.5px var(--cg-font-body);
  color: var(--cg-accent);
  cursor: pointer;
}
.pl-suggest, .pl-filter-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% - 4px);
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(46, 42, 38, .22);
  box-sizing: border-box;
}
.pl-suggest[hidden], .pl-filter-menu[hidden] { display: none; }
.pl-suggest { left: 16px; right: 80px; }
.pl-suggest-item, .pl-filter-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--cg-font-body);
}
.pl-suggest-item:hover, .pl-filter-row:hover { background: var(--cg-surface); }
.pl-suggest-icon { color: var(--cg-ink-dim); }
.pl-suggest-text { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--cg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-suggest-kind { font-size: 11px; font-weight: 700; color: var(--cg-ink-dim); }
.pl-filter-menu { right: 16px; width: 250px; max-height: 70vh; overflow-y: auto; padding: 8px; }
.pl-filter-label { padding: 6px 10px 4px; font: 800 11.5px var(--cg-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--cg-ink-dim); }
.pl-filter-row .pl-level-pill { padding: 2px 7px; font-size: 10.5px; }
.pl-filter-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--cg-ink); }
.pl-filter-count { font-size: 11.5px; font-weight: 700; color: var(--cg-ink-dim); }
.pl-check {
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 2px solid rgba(46, 42, 38, .25);
  background: #fff;
  color: #fff;
  font: 900 11px/16px system-ui;
  text-align: center;
}
.pl-check.on { background: var(--cg-accent); border-color: var(--cg-accent); }
.pl-filter-dot { flex: none; width: 11px; height: 11px; box-sizing: border-box; border-radius: 999px; border: 2px solid #768390; }
.pl-filter-dot.working { background: var(--pl-dot-working); border-color: var(--pl-dot-working); }
.pl-filter-dot.done { background: var(--pl-dot-done); border-color: var(--pl-dot-done); }
.pl-filter-sep { height: 1px; margin: 6px 4px; background: var(--cg-border); }
.pl-filter-foot { display: flex; gap: 6px; margin-top: 6px; }
.pl-filter-foot button { flex: 1; padding: 10px; border: 0; border-radius: 10px; font: 800 12.5px var(--cg-font-body); cursor: pointer; }
.pl-filter-clear { background: var(--cg-surface); color: var(--cg-ink); }
.pl-filter-done { background: var(--cg-ink); color: #fff; }
.pl-active-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 10px;
  box-sizing: border-box;
  scrollbar-width: none;
}
.pl-active-row[hidden] { display: none; }
.pl-active-chip {
  flex: none;
  padding: 6px 10px 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--cg-ink);
  color: #fff;
  font: 800 12px var(--cg-font-body);
  cursor: pointer;
  white-space: nowrap;
}
.pl-active-clear { flex: none; border: 0; background: none; font: 800 12px var(--cg-font-body); color: var(--cg-accent); cursor: pointer; }
.pl-no-match { text-align: center; }
.pl-no-match p { margin: 0 0 12px; font-weight: 700; }
.pl-clear-filters { padding: 9px 16px; border: 0; border-radius: 999px; background: var(--cg-ink); color: #fff; font: 800 13px var(--cg-font-body); cursor: pointer; }
.pl-bento-head .pl-titles[hidden] { display: none; }