/* plan.css — shared 'Your Plan' + Elo skill-rating + dashboard styles.
   Extracted from explore.css so profile.html can reuse the Plan module UI.
   Keep in sync with the source block in explore.css. */

/* "For You" recommender section on Explore */
.foryou { background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color)); border-radius: 16px; padding: var(--space-5) var(--space-6); }
.fy-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--space-4); }
.fy-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border-color); text-decoration: none; color: var(--text-bright); font-weight: var(--font-semibold); font-size: var(--text-sm); }
.fy-chip:hover { border-color: var(--accent); }
.fy-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; }
.fy-chip--1 .fy-num { background: #ef4444; } .fy-chip--2 .fy-num { background: #f59e0b; } .fy-chip--3 .fy-num { background: #60a5fa; }
.fy-head { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-3); }
.fy-probs { display: grid; gap: 8px; }
.fy-prob { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s; }
.fy-prob:hover { border-color: var(--accent); }
.fy-prob__t { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy-prob__cat { flex: none; font-size: 11px; color: var(--text-muted); }
.fy-prob__diff { flex: none; font-size: 11px; font-weight: var(--font-bold); padding: 2px 9px; border-radius: 999px; text-transform: capitalize; }
.fy-d-easy { background: #dcfce7; color: #166534; } .fy-d-medium { background: #fef3c7; color: #92400e; } .fy-d-hard { background: #fee2e2; color: #991b1b; }

/* ===== Unified "Your Plan": weak spots -> lesson -> matched problems ===== */
.plan { background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color)); border-radius: 16px; padding: var(--space-5) var(--space-6); }
.plan__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.plan__context { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.plan__how { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); font-size: var(--text-xs); color: var(--text-secondary); cursor: help; }
.plan__how-ico { flex: none; display: inline-flex; color: var(--accent); }
.plan__how-ico svg { width: 13px; height: 13px; }
.plan__retake { flex: none; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--accent); text-decoration: none; white-space: nowrap; }
.plan__retake:hover { text-decoration: underline; }
.plan__retake--cta { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.plan__retake--cta:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* Role switcher — re-tune the whole plan for Trader / Researcher / Developer */
.plan__roles { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.plan__roles-label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.plan__role { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.plan__role:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)); color: var(--text-primary); }
.plan__role--on { background: var(--accent); border-color: var(--accent); color: #fff; }
.plan__role--on:hover { color: #fff; }

/* Elo skill ratings card (graded ability, not coverage) — 2-line rows:
   name + rating + band on top, a full-width progress bar underneath (so long
   topic names never fight the bar for space and never truncate awkwardly). */
.elo-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: var(--space-4); }
.elo-card__sub { font-size: var(--text-xs); color: var(--text-muted); cursor: help; white-space: nowrap; }
.elo-card__list { display: flex; flex-direction: column; gap: 4px; }
/* every skill row is a link to that topic's playlist */
.elo-row { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; padding: 8px; margin: 0 -8px; border-radius: 10px; transition: background .14s ease; }
.elo-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.elo-row__top { display: flex; align-items: center; gap: 10px; }
.elo-row__name { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* role-importance star: core-for-role topics are marked; a core topic that is ALSO
   a gap (not yet Strong) lights up amber — "this matters for your track, work on it". */
.elo-row__star { flex: none; width: 13px; height: 13px; color: #cbd5e1; }
.elo-row__star--on { color: #f59e0b; }
.elo-row__rating { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; font-size: var(--text-sm); color: var(--text-bright); }
.elo-row__rating--low { color: var(--text-muted); font-weight: 700; }
.elo-row__band { flex: none; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.elo-row__band--good { color: #15803d; background: #dcfce7; }
.elo-row__band--ok { color: #1d4ed8; background: #dbeafe; }
.elo-row__band--mid { color: #b45309; background: #fef3c7; }
.elo-row__band--bad { color: #b91c1c; background: #fee2e2; }
.elo-row__band--low { color: #64748b; background: #f1f5f9; }
.elo-row__bar { height: 5px; border-radius: 999px; background: var(--border-light); overflow: hidden; }
.elo-row__bar i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.elo-row__bar--low i { opacity: .4; }
.elo-row--focus { background: color-mix(in srgb, #f59e0b 6%, transparent); }
.elo-row--focus:hover { background: color-mix(in srgb, #f59e0b 12%, transparent); }
html[data-theme=dark] .elo-row__band--good { color: #86efac; background: rgba(34,197,94,.16); }
html[data-theme=dark] .elo-row__band--ok { color: #93c5fd; background: rgba(59,130,246,.16); }
html[data-theme=dark] .elo-row__band--mid { color: #fcd34d; background: rgba(245,158,11,.16); }
html[data-theme=dark] .elo-row__band--low { color: #94a3b8; background: rgba(148,163,184,.14); }
.elo-card--compact .elo-card__list { gap: 2px; }
.elo-card--compact .elo-row { padding: 6px 8px; }
/* "relevant only" default view: a section label + a show-all toggle */
.elo-sub { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0 2px; padding: 0 8px; }
.elo-relevant > .elo-sub:first-child { margin-top: 0; }
.elo-toggle { display: block; width: 100%; margin-top: 12px; padding: 9px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--accent); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.elo-toggle:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)); background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.elo-toggle__car { font-size: 10px; }
/* the .elo-card__list display:flex would otherwise override the [hidden] attribute */
.elo-relevant[hidden], .elo-full[hidden] { display: none; }

/* Track-switch confirmation — choosing a route is deliberate, not a one-tap toggle */
.roleconfirm-ov { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--bg-main) 68%, transparent); backdrop-filter: blur(5px); opacity: 0; transition: opacity .18s ease; }
.roleconfirm-ov.show { opacity: 1; }
.roleconfirm { width: 100%; max-width: 420px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 30px 28px 24px; text-align: center; box-shadow: 0 30px 80px -30px rgba(15,23,42,.55); transform: translateY(8px) scale(.98); transition: transform .2s cubic-bezier(.34,1.4,.5,1); }
.roleconfirm-ov.show .roleconfirm { transform: none; }
.roleconfirm__ic { font-size: 38px; line-height: 1; margin-bottom: 10px; }
.roleconfirm__title { font-size: 20px; font-weight: 800; color: var(--text-bright); margin: 0 0 8px; }
.roleconfirm__txt { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 22px; }
.roleconfirm__txt b { color: var(--text-bright); }
.roleconfirm__btns { display: flex; gap: 10px; justify-content: center; }
.roleconfirm__btn { flex: 1; max-width: 170px; padding: 12px 18px; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid transparent; }
.roleconfirm__btn--ghost { background: transparent; border-color: var(--border-color); color: var(--text-secondary); }
.roleconfirm__btn--ghost:hover { color: var(--text-bright); border-color: var(--text-muted); }
.roleconfirm__btn--go { background: linear-gradient(135deg, #4f46e5, #2563eb); color: #fff; box-shadow: 0 8px 22px -10px rgba(37,99,235,.6); }
.roleconfirm__btn--go:hover { opacity: .95; }

/* Unified top-of-profile role control (one source of truth) */
.role-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 900px; margin: 0 auto var(--space-4); padding: 10px 14px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); }
.role-bar__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); margin-right: 4px; }
.role-bar__btn { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.role-bar__btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)); color: var(--text-primary); }
.role-bar__btn--on { background: var(--accent); border-color: var(--accent); color: #fff; }
.role-bar__btn--on:hover { color: #fff; }
.role-bar__hint { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }

/* At-a-glance summary line */
.elo-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; margin: 0 auto var(--space-5); max-width: 900px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); border: 1px solid var(--border-color); font-size: var(--text-sm); color: var(--text-secondary); }
.elo-summary__who { font-weight: var(--font-bold); color: var(--text-primary); }
.elo-summary__sep { color: var(--text-muted); }
/* when merged into the stats card, render as a borderless footer divider */
.profile-card .elo-summary { max-width: none; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border: 0; border-top: 1px solid var(--border-color); background: none; border-radius: 0; }

.plan__steps { display: flex; flex-direction: column; gap: var(--space-3); }

/* Compact 3-column grid layout (winner of the layout vote) */
.plan__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.plan__gcard { min-width: 0; display: flex; flex-direction: column; gap: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: var(--space-4) var(--space-4) var(--space-3); }
.plan__gcard-head { display: flex; align-items: center; gap: 9px; }
.plan__gtopic { font-weight: var(--font-bold); font-size: var(--text-base); color: var(--text-bright); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan__gwhy { font-size: var(--text-xs); color: var(--text-muted); min-height: 30px; }
.plan__gcard > * { min-width: 0; }
.plan__gcard .plan__lesson { margin: 0; min-width: 0; }
.plan__gcard .plan__probs { min-width: 0; }
.plan__gcard .plan__prob { padding: 6px 8px; min-width: 0; max-width: 100%; }
.plan__gcard .plan__prob-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan__gcard .plan__full { margin-top: auto; align-self: flex-start; }
/* compact inline target-firms row beneath the grid */
.plan__firmline { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: var(--space-3); padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text-muted) 5%, transparent); border: 1px solid var(--border-color); font-size: var(--text-sm); color: var(--text-secondary); }
.plan__firmline-ico { display: inline-flex; color: var(--text-muted); }
.plan__firmline-ico svg { width: 15px; height: 15px; }
.plan__firmline b { color: var(--text-primary); }
.plan__firmline a { color: var(--accent); text-decoration: none; font-weight: var(--font-semibold); }
.plan__firmline a:hover { text-decoration: underline; }
.plan__firmline-sep { color: var(--text-muted); }
@media (max-width: 760px) {
  .plan__grid { grid-template-columns: 1fr; }
  .plan__gwhy { min-height: 0; }
}
.plan__step { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px; padding: var(--space-4) var(--space-4) var(--space-3); }
.plan__step--firm { border-style: dashed; }
.plan__step-head { display: flex; align-items: center; gap: 12px; }
.plan__num { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; }
.plan__num--firm { background: var(--text-muted); }
.plan__num--firm svg { width: 16px; height: 16px; }
.plan__step-titles { flex: 1; min-width: 0; }
.plan__topic { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-bright); line-height: 1.2; }
.plan__why { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.plan__full { flex: none; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--accent); text-decoration: none; white-space: nowrap; }
.plan__full:hover { text-decoration: underline; }

.plan__lesson { display: flex; align-items: center; gap: 10px; margin-top: var(--space-3); padding: 9px 12px; border-radius: 10px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); transition: border-color .15s, background .15s; }
.plan__lesson:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.plan__lesson-ico { flex: none; display: inline-flex; color: var(--accent); }
.plan__lesson-ico svg { width: 17px; height: 17px; }
.plan__lesson-txt { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-bright); }
.plan__lesson-txt b { font-weight: var(--font-bold); }
.plan__lesson-meta { flex: none; font-size: 11px; color: var(--text-muted); }

.plan__probs { display: grid; gap: 6px; margin-top: var(--space-2); }
.plan__prob { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: border-color .15s, background .15s; }
.plan__prob:hover { border-color: var(--border-color); background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
.plan__prob-ico { flex: none; display: inline-flex; color: var(--text-muted); }
.plan__prob-ico svg { width: 14px; height: 14px; }
.plan__prob-t { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan__prob-meta { flex: none; font-size: 11px; color: var(--text-muted); }

/* Solved problem: green check + muted title + "Solved" pill */
.plan__prob--done .plan__prob-ico { color: #16a34a; }
.plan__prob-check { width: 15px; height: 15px; }
.plan__prob--done .plan__prob-t { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 50%, transparent); }
.plan__prob-solved { flex: none; font-size: 11px; font-weight: var(--font-semibold); color: #15803d; background: #dcfce7; padding: 2px 8px; border-radius: 999px; }

.plan__rec { display: flex; align-items: center; gap: 12px; margin-top: var(--space-3); padding: 12px 14px; border-radius: 12px; text-decoration: none; color: inherit; background: var(--bg-card); border: 1px solid var(--border-color); transition: border-color .15s; }
.plan__rec:hover { border-color: var(--accent); }
.plan__rec-ico { flex: none; display: inline-flex; color: var(--accent); }
.plan__rec-ico svg { width: 20px; height: 20px; }
.plan__rec-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan__rec-txt strong { font-size: var(--text-sm); color: var(--text-bright); }
.plan__rec-txt span { font-size: var(--text-xs); color: var(--text-muted); }
.plan__rec-arrow { flex: none; color: var(--accent); font-size: 18px; }
/* NOTE: the canonical `.rich-card` styles now live in css/explore.css (the
   redesigned artwork card). A stale duplicate used to live here and — because
   plan.css loads AFTER explore.css on explore.html — silently overrode the
   redesign (it forced the feature banner back into a column). Removed 2026-06-02. */

/* ---- Category grid ---- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3);
}
.cat-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}
.cat-card__icon {
  flex-shrink: 0; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.cat-card__icon svg { width: 22px; height: 22px; }
.cat-card__name {
  flex: 1; min-width: 0;
  font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cat-card__count {
  font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--font-medium);
}

/* ============================================
   THE PLAYBOOK (tricks.html)
   ============================================ */
.playbook-back {
  display: inline-block;
  margin: var(--space-6) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
}
.playbook-back:hover { text-decoration: underline; }
.playbook-hero { padding: 0 0 var(--space-8); border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-8); }
.playbook-hero__eyebrow {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); font-weight: var(--font-semibold); margin-bottom: var(--space-2);
}
.playbook-hero__title {
  font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: var(--font-extrabold);
  letter-spacing: -0.02em; line-height: 1.15; color: var(--text-bright); margin-bottom: var(--space-3);
}
.playbook-hero__lead {
  font-size: var(--text-base); color: var(--text-secondary); line-height: 1.65; max-width: 720px;
}
.playbook-list { display: flex; flex-direction: column; gap: var(--space-3); }

/* Collapsed-by-default entry (native <details>) */
.playbook-entry {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.playbook-entry[open] { box-shadow: 0 6px 20px rgba(0,0,0,0.07); }
.playbook-entry__summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}
.playbook-entry__summary::-webkit-details-marker { display: none; }
.playbook-entry__summary:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.playbook-entry__num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent); color: var(--text-secondary);
  font-size: 12px; font-weight: var(--font-bold);
  display: flex; align-items: center; justify-content: center;
}
.playbook-entry__icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.playbook-entry__icon svg { width: 22px; height: 22px; }
.playbook-entry__titlewrap { flex: 1; min-width: 0; }
.playbook-entry__name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-bright); line-height: 1.25; }
.playbook-entry__blurb { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 1px; }
.playbook-entry__count {
  flex-shrink: 0; text-align: right; font-size: var(--text-base);
  font-weight: var(--font-bold); color: var(--text-bright); line-height: 1;
}
.playbook-entry__count span { display: block; font-size: 9px; font-weight: var(--font-medium); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.playbook-entry__chev { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s; font-size: 14px; }
.playbook-entry[open] .playbook-entry__chev { transform: rotate(180deg); }

.playbook-entry__body { padding: var(--space-2) var(--space-5) var(--space-5); border-top: 1px solid var(--border-color); }
.playbook-sec { margin-top: var(--space-4); }
.playbook-sec__h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-bold); color: var(--accent); margin-bottom: 5px; }
.playbook-sec__body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.playbook-try {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 10px;
  text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s;
}
.playbook-try:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.playbook-try__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-bright); }
.playbook-try__diff { flex-shrink: 0; font-size: 11px; font-weight: var(--font-bold); padding: 3px 9px; border-radius: 999px; }
.playbook-try__diff--easy { background:#dcfce7; color:#166534; }
.playbook-try__diff--medium { background:#fef3c7; color:#92400e; }
.playbook-try__diff--hard { background:#fee2e2; color:#991b1b; }
.playbook-entry__cta {
  display: inline-block; margin-top: var(--space-5);
  font-size: var(--text-sm); font-weight: var(--font-semibold);
  color: #fff; background: var(--accent);
  text-decoration: none; padding: 9px 18px; border-radius: var(--radius-md, 8px);
  transition: filter 0.15s;
}
.playbook-entry__cta:hover { filter: brightness(0.93); }
@media (max-width: 600px) {
  .playbook-entry__count { display: none; }
}

/* ---- Universal answer structure (top of playbook) ---- */
.approach { margin-bottom: var(--space-9); }
.approach__title { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-bright); }
.approach__sub { font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 var(--space-4); }
.approach__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.approach-step {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent); border-radius: 10px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.approach-step--hot { border-top-color: var(--accent); }
.approach-step__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.approach-step__num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: var(--font-bold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.approach-step--hot .approach-step__num { background: var(--accent); }
.approach-step__title { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-bright); }
.approach-step__quote { font-size: var(--text-xs); font-style: italic; color: var(--text-secondary); margin-bottom: 5px; }
.approach-step__desc { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.playbook-movehead { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--text-bright); margin-bottom: var(--space-3); }

/* ---- "View more" expander (native <details>) — matches the section "see more" link ---- */
.rich-more { margin-top: var(--space-4); text-align: center; }
.rich-more__toggle {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 500; color: var(--accent); text-decoration: none;
}
.rich-more__toggle::-webkit-details-marker { display: none; }
.rich-more__toggle:hover { text-decoration: underline; }
.rich-more__hide { display: none; }
.rich-more[open] .rich-more__show { display: none; }
.rich-more[open] .rich-more__hide { display: inline; }
.rich-more__grid { margin-top: var(--space-4); text-align: left; }

/* ---- Hero difficulty visualization ---- */
.explore-hero__diffbar {
  display: flex; height: 9px; width: 100%; max-width: 360px; margin: var(--space-5) auto 0;
  border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.explore-hero__diffbar span { display: block; height: 100%; }
.explore-hero__difflegend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4);
  margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted);
}
.explore-hero__difflegend span { display: inline-flex; align-items: center; gap: 6px; }
.explore-hero__difflegend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .playlist-grid { grid-template-columns: repeat(3, 1fr); }
  .explore-section--paths .playlist-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .playlist-grid { grid-template-columns: repeat(2, 1fr); }
  .explore-section--paths .playlist-grid { grid-template-columns: repeat(2, 1fr); }
  .explore-coming__grid { grid-template-columns: 1fr; }
  .approach__grid { grid-template-columns: repeat(2, 1fr); }
  .explore-hero { padding: var(--space-8) 0 var(--space-6); }

  .explore-cta__inner {
    flex-direction: column;
    text-align: center;
  }
  .explore-cta__text {
    flex-direction: column;
  }

  .roadmap__header {
    flex-direction: column;
    gap: var(--space-2);
  }
  .roadmap__item-label {
    display: none;
  }
}
@media (max-width: 480px) {
  .playlist-grid { grid-template-columns: 1fr; }
  .explore-section--paths .playlist-grid { grid-template-columns: 1fr; }
  .playlist-card__header { height: 90px; }

  .roadmap__item {
    flex-wrap: wrap;
    gap: 4px;
  }
  .roadmap__item-meta {
    width: 100%;
    padding-left: 34px;
  }
}

/* ===== Consolidated profile dashboard: rail + main ===== */
.pf-dash { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
/* rail is NOT sticky — the whole page scrolls as one column (no pinned side) */
.pf-dash__rail { display: flex; flex-direction: column; gap: 16px; }
.pf-dash__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 900px) { .pf-dash { grid-template-columns: 1fr; } }

/* Plan sits in a profile-card on the dashboard -> strip its own card chrome */
.pf-dash .plan, .pf-plan-card .plan { background: transparent; border: 0; border-radius: 0; padding: 0; }

/* Role bar (the one top control that re-tunes the whole dashboard) */
.pf-rolebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 18px; }
.pf-rolebar__label { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-bright); }
.pf-rolebar__hint { font-size: var(--text-xs); color: var(--text-muted); margin-left: auto; }
.pf-roleg { display: inline-flex; gap: 6px; }
.pf-roleg button { padding: 6px 15px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.pf-roleg button:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)); color: var(--text-bright); }
.pf-roleg button.pf-roleg--on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Compact rail stats (replaces the wide ring hero inside the narrow rail) */
.pf-railstats { padding: 18px 20px; }
.pf-railstats__g { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.pf-railstat b { display: block; font-size: 22px; font-weight: 800; color: var(--text-bright); line-height: 1; }
.pf-railstat span { font-size: 11.5px; color: var(--text-muted); }

/* ===== Daily Set — Duolingo-style "your 5 for today" ===== */
.daily { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--bg-card)), var(--bg-card)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-color)); border-radius: 18px; padding: var(--space-5) var(--space-6); }
/* Finished today's set: a slim "done" badge row, then the "Up next" rail beneath. */
.daily--done { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-4); }
.daily-done__row { display: flex; align-items: center; gap: var(--space-3); }
.daily-done__ic { flex: none; width: 26px; height: 26px; color: var(--accent); }
.daily-done__ic svg { width: 26px; height: 26px; }
.daily-done__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.daily-done__txt b { font-size: var(--text-sm); font-weight: 800; color: var(--text-bright); }
.daily-done__txt span { font-size: 12px; color: var(--text-secondary); }
.daily--done .daily__streak { min-width: 56px; padding: 6px 10px; }

/* ---- "Up next" recommendation rail (shown after the daily set is done) ---- */
.upnext { display: flex; flex-direction: column; gap: var(--space-3); }
.upnext__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.upnext__kicker { font-size: var(--text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.upnext__sub { font-size: 12px; color: var(--text-secondary); }
.upnext__rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--space-3); }
.upn-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: 14px;
  border: 1px solid var(--border-color); background: var(--bg-card); text-decoration: none; transition: border-color .14s, transform .14s, box-shadow .14s; }
.upn-card:hover { border-color: var(--upn-accent); transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--upn-accent) 18%, transparent); }
.upn-card--primary { grid-column: 1 / -1; background: linear-gradient(135deg, color-mix(in srgb, var(--upn-accent) 10%, var(--bg-card)), var(--bg-card)); border-color: color-mix(in srgb, var(--upn-accent) 35%, var(--border-color)); }
.upn-card__ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  color: var(--upn-accent); background: color-mix(in srgb, var(--upn-accent) 14%, transparent); }
.upn-card__ic svg { width: 20px; height: 20px; }
.upn-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upn-card__kicker { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--upn-accent); }
/* Kicker label must shrink+truncate so the count badge never wraps to a 2nd line
   on a narrow dashboard column. The badge stays whole on a single line. */
.upn-card__kicker-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upn-card__n { flex: none; margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; white-space: nowrap; color: var(--text-secondary); background: color-mix(in srgb, var(--text-secondary) 14%, transparent); }
.upn-card__title { font-size: var(--text-sm); font-weight: 800; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upn-card__why { font-size: 12px; color: var(--text-secondary); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.upn-card__go { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-muted); transition: color .14s, transform .14s; }
.upn-card__go svg { width: 18px; height: 18px; }
.upn-card:hover .upn-card__go { color: var(--upn-accent); transform: translateX(3px); }
.daily__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.daily__kicker { font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.daily__title { font-size: var(--text-xl); font-weight: var(--font-extrabold); letter-spacing: -.02em; margin: 2px 0 3px; color: var(--text-bright); }
.daily__sub { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.daily__streak { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: 8px 12px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); font-size: 18px; line-height: 1; opacity: .55; }
.daily__streak.is-on { opacity: 1; border-color: color-mix(in srgb, #f59e0b 45%, var(--border-color)); }
.daily__streak b { font-size: 20px; font-weight: 800; color: var(--text-bright); margin-top: 2px; }
.daily__streak span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

.daily__path { display: flex; align-items: center; justify-content: center; gap: 2px; margin: var(--space-5) 0 var(--space-4); flex-wrap: nowrap; }
.daily-node { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; text-decoration: none; transition: transform .15s; }
.daily-node:hover { transform: translateY(-2px); }
.daily-node__c { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.daily-node--todo .daily-node__c { background: var(--bg-main); border: 2px solid var(--border-color); color: var(--text-muted); }
.daily-node--now .daily-node__c { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); animation: dailyPulse 1.8s ease-in-out infinite; }
.daily-node--done .daily-node__c { background: #16a34a; color: #fff; }
.daily-node--done .daily-node__c svg { width: 20px; height: 20px; }
/* Attempted but not solved -> counts as "done" for the set, but amber so you can see
   it's unsolved and tap to retry. */
.daily-node--tried .daily-node__c { background: #f59e0b; color: #fff; border: 0; }
@keyframes dailyPulse { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent); } }
.daily-node__d { position: absolute; bottom: -3px; right: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg-card); }
.daily-node__d--easy { background: #22c55e; } .daily-node__d--medium { background: #f59e0b; } .daily-node__d--hard { background: #ef4444; }
.daily-line { flex: 1 1 auto; max-width: 46px; height: 4px; border-radius: 99px; background: var(--border-color); }
.daily-line--on { background: #16a34a; }
.daily-trophy { flex: none; font-size: 24px; margin-left: 4px; filter: grayscale(1); opacity: .4; }
.daily-trophy--on { filter: none; opacity: 1; }

.daily__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.daily__progress { font-size: var(--text-sm); color: var(--text-secondary); }
.daily__progress b { color: var(--text-bright); font-weight: 800; }
.daily__cta { padding: 10px 20px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: var(--font-bold); font-size: var(--text-sm); text-decoration: none; box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent); transition: transform .14s, filter .14s; }
.daily__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.daily__done { font-size: var(--text-sm); font-weight: var(--font-semibold); color: #16a34a; }
@media (max-width: 560px) { .daily-node, .daily-node__c { width: 40px; height: 40px; } .daily-line { max-width: 24px; } }

/* =====================================================================
   MOBILE FIT PASS — phones render at TRUE device width (the <head> script
   sets zoom:1 under 768px), so a 360px phone has ~360 real CSS px. Card
   chrome eats 24px main padding + 24px card padding per side. Everything
   below lives ONLY inside max-width queries: desktop (>768px) is untouched.
   Targets: the Daily Set path (5 nodes + lines + trophy), the streak badge,
   the daily header, and the plan cards — all must fit 360px with no overflow.
   ===================================================================== */
@media (max-width: 768px) {
  /* Daily + plan cards: trim horizontal padding so the inner content budget
     grows (24px -> 16px per side ~ +16px) and never let a card itself overflow. */
  .daily { padding: var(--space-4) var(--space-4); }
  .plan { padding: var(--space-4) var(--space-4); }
  .daily, .plan { max-width: 100%; }

  /* Daily header: title + streak side-by-side, but allow it to wrap if the
     title is long so the streak badge never gets pushed off-screen. */
  .daily__head { flex-wrap: wrap; gap: var(--space-3); }
  .daily__title { font-size: var(--text-lg, 1.0625rem); }
  .daily__sub { min-width: 0; }
  .daily__streak { min-width: 56px; }

  /* Plan header (title + retake CTA): let the CTA drop below the title rather
     than fight it for width on a narrow row. */
  .plan__head { flex-wrap: wrap; gap: var(--space-3); }
  .plan__head > div { min-width: 0; }
  .plan__retake { white-space: normal; }

  /* The grid is already 1-col at <=760; harden the cards against long titles. */
  .plan__gcard { min-width: 0; max-width: 100%; }
  .plan__gtopic, .plan__prob-t, .plan__lesson-txt, .plan__rec-txt strong, .plan__rec-txt span { min-width: 0; }
  .plan__full { white-space: normal; }
  .plan__lesson { flex-wrap: wrap; }
  .plan__firmline { min-width: 0; }

  /* Daily completed-state + footer rows wrap instead of overflowing. */
  .daily--done { flex-wrap: wrap; }
  .daily__foot { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  /* The 5-node path is the tightest row. Budget at 360px after main+card
     padding (16px each => inner ~ 360 - 32 - 32 = 296px), or down to ~264px
     on cards that keep wider padding. Shrink nodes to 38px and let the
     connecting lines stay flex-shrinkable (min visible width) so 5 nodes +
     trophy always fit. Nodes: 5*38=190; trophy ~26+4; gaps 11*2=22 => ~242px
     of fixed width, leaving room for the lines even at the 264px floor. */
  .daily { padding: var(--space-4) var(--space-3); }
  .daily__path { gap: 1px; margin: var(--space-4) 0 var(--space-3); }
  .daily-node, .daily-node__c { width: 38px; height: 38px; }
  .daily-node__c { font-size: 15px; }
  .daily-line { flex: 1 1 0; min-width: 0; max-width: 20px; }
  .daily-trophy { font-size: 20px; margin-left: 2px; }
  .daily-node--done .daily-node__c svg { width: 17px; height: 17px; }

  /* Streak badge: a touch narrower so the header row has more give. */
  .daily__streak { min-width: 52px; padding: 6px 9px; }

  /* Footer: CTA can wrap to its own line full-width-ish if needed. */
  .daily__foot { gap: var(--space-3); }

  /* Firm row separators / links wrap cleanly. */
  .plan__firmline { gap: 6px; }
}

/* ===== Mobile audit fixes — MEDIUM (2026-06-08 sweep): tighter rating chrome ===== */
@media (max-width: 768px) {
  .elo-summary { padding: 10px 12px; }
  .profile-card .elo-summary { padding: var(--space-3) 0 0; }
  .role-bar { padding: 10px 12px; }
  .role-bar__hint { margin-left: 0; display: block; width: 100%; margin-top: var(--space-3); font-size: var(--text-xs); }
}

/* Mobile: plan rows must never exceed the viewport. Grid/flex ancestors
   default to min-width:auto, so long titles inflated rows to 517px and the
   text ran off-screen (user phone screenshot, 2026-06-09). */
@media (max-width: 640px) {
  .plan__grid, .plan__gcard, .plan__topic, .plan__probs, .plan__prob,
  .plan__gcard > *, .plan__topic > * { min-width: 0; max-width: 100%; }
  .plan__prob-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 640px) {
  /* Full touch sizes (judge: rows 39, links 16-21, chip 34, dots 38) */
  .plan__prob { min-height: 44px; }
  .plan__full, .plan__lesson { min-height: 44px; display: flex; align-items: center; }
  .daily-node { min-width: 44px; min-height: 44px; }
  .daily__cta { min-height: 48px; display: inline-flex; align-items: center; }
}

/* Streak affordance at streak 0: a quiet motivator instead of empty space */
.daily__streak--zero {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--font-bold);
  background: color-mix(in srgb, #f97316 8%, transparent);
  border: 1px dashed color-mix(in srgb, #f97316 35%, transparent);
  border-radius: 999px; padding: 5px 11px;
}
.daily__streak--zero svg { opacity: 0.7; }
.daily__streak-hint { white-space: nowrap; }