/*
 * Learning pages: «مسیر یادگیری من» (.lp, .jl, .jc), the public roadmaps
 * (.rm), «پیشرفت من» on the profile (.pg) and the SVG charts they share
 * (.ch-*, apps/core/templatetags/charts.py). The home page's «مسیر ساده» and
 * «نقشه‌ی راه» sections have their own small sheet: home-learning.css.
 *
 * Phones first. No inline styles anywhere (the CSP forbids them): sizes are
 * SVG attributes, colours are the variables below. Kids' pages (`--kids`) are
 * sky-blue and sunny, adults' pages (`--adults`) use the brand teal/orange.
 * learning.js adds `html.lp-animate` (motion allowed + JavaScript) before any
 * entrance animation is applied, so nothing is ever hidden without it.
 */

/* ============================================================ tokens */
.lp,
.jl,
.jc,
.rm,
.pg,
.lp-badges,
.lp-empty,
.cel {
  --lp-brand: #0b4e53;
  --lp-brand-2: #13777b;
  --lp-brand-rgb: 11 78 83;
  --lp-accent: #e5532d;
  --lp-accent-2: #ff8a5c;
  --lp-sun: #ffc23d;
  --lp-ink: #12202b;
  --lp-muted: #5d6e75;
  --lp-card: #fff;
  --lp-soft: #f2f7f7;
  --lp-line: rgb(11 78 83 / 13%);
  --lp-ok: #12a383;
  --lp-warn: #e39b12;
  --lp-bad: #e0483c;
  --lp-info: #2f7fe0;
  --lp-violet: #7c5cf0;
  --lp-radius: 1.25rem;
  --lp-shadow: 0 18px 40px -28px rgb(11 30 48 / 50%);
  --lp-hero-1: #13777b;
  --lp-hero-2: #062f33;
  --ch-track: rgb(11 78 83 / 11%);
  color: var(--lp-ink);
}

html.dark :is(.lp, .jl, .jc, .rm, .pg, .lp-badges, .lp-empty, .cel) {
  --lp-ink: #f4f7fb;
  --lp-muted: #a3acbf;
  --lp-card: #151a47;
  --lp-soft: #1b2156;
  --lp-line: rgb(255 255 255 / 11%);
  --lp-shadow: 0 18px 40px -26px rgb(0 0 0 / 70%);
  --ch-track: rgb(255 255 255 / 10%);
  --lp-brand: #7cc4c2;
}

/* kids: sky, sun and a coral plane */
.lp--kids,
.rm--kids,
.jl-card--kids,
.jc-card--kids {
  --lp-brand: #1678d2;
  --lp-brand-2: #3aa0ff;
  --lp-brand-rgb: 22 120 210;
  --lp-accent: #ff6b4a;
  --lp-accent-2: #ffa24a;
  --lp-hero-1: #3aa7ff;
  --lp-hero-2: #1b5fc4;
  --lp-soft: #eef7ff;
  --lp-radius: 1.5rem;
}

html.dark :is(.lp--kids, .rm--kids, .jl-card--kids, .jc-card--kids) {
  --lp-brand: #8cc8ff;
  --lp-soft: #172457;
}

/* ============================================================ charts (.ch-*) */
.ch-ring {
  --ring: 6rem;
  --ch-tone: var(--lp-brand-2, #13777b);
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--ring);
  aspect-ratio: 1;
}

.ch-ring--sm { --ring: 3.25rem; }
.ch-ring--md { --ring: 5rem; }
.ch-ring--lg { --ring: 7.5rem; }
.ch-ring--xl { --ring: clamp(8.5rem, 30vw, 10.5rem); }

.ch-ring svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.ch-ring__track { stroke: var(--ch-track); }
.ch-ring__value { stroke: var(--ch-tone); }

.ch-ring__center {
  position: relative;
  display: grid;
  justify-items: center;
  max-inline-size: 78%;
  line-height: 1.15;
  text-align: center;
}

.ch-ring__number {
  font-size: calc(var(--ring) * 0.24);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.ch-ring__caption {
  margin-block-start: 0.2rem;
  font-size: max(0.62rem, calc(var(--ring) * 0.085));
  font-weight: 700;
  opacity: 0.8;
}

.ch-ring--sm .ch-ring__number { font-size: 0.78rem; }
.ch-ring--sm .ch-ring__caption { display: none; }

.ch-ring--primary { --ch-tone: var(--lp-brand-2, #13777b); }
.ch-ring--accent { --ch-tone: var(--lp-accent, #e5532d); }
.ch-ring--ok { --ch-tone: var(--lp-ok, #12a383); }
.ch-ring--warn { --ch-tone: var(--lp-warn, #e39b12); }
.ch-ring--bad { --ch-tone: var(--lp-bad, #e0483c); }
.ch-ring--info { --ch-tone: var(--lp-info, #2f7fe0); }
.ch-ring--violet { --ch-tone: var(--lp-violet, #7c5cf0); }
.ch-ring--muted { --ch-tone: var(--lp-muted, #5d6e75); }

.ch-bar {
  display: block;
  inline-size: 100%;
  block-size: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
}

.ch-bar__track { fill: var(--ch-track); }
.ch-bar__value { fill: var(--ch-tone, var(--lp-brand-2)); }
.ch-bar--primary { --ch-tone: var(--lp-brand-2); }
.ch-bar--accent { --ch-tone: var(--lp-accent); }
.ch-bar--ok { --ch-tone: var(--lp-ok); }
.ch-bar--warn { --ch-tone: var(--lp-warn); }
.ch-bar--bad { --ch-tone: var(--lp-bad); }
.ch-bar--info { --ch-tone: var(--lp-info); }
.ch-bar--violet { --ch-tone: var(--lp-violet); }
.ch-bar--muted { --ch-tone: var(--lp-muted); }

.ch-donut {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 9.5rem;
  aspect-ratio: 1;
}

.ch-donut svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.ch-donut__track { stroke: var(--ch-track); }
.ch-donut__seg { stroke: var(--lp-muted); }
.ch-donut__seg--achieved,
.ch-donut__seg--present { stroke: var(--lp-ok); }
.ch-donut__seg--in_progress,
.ch-donut__seg--late { stroke: var(--lp-info); }
.ch-donut__seg--needs_practice,
.ch-donut__seg--excused { stroke: var(--lp-warn); }
.ch-donut__seg--absent { stroke: var(--lp-bad); }
.ch-donut__seg--not_started { stroke: rgb(127 140 150 / 35%); }

.ch-donut__center {
  position: relative;
  display: grid;
  justify-items: center;
  line-height: 1.2;
}

.ch-donut__number { font-size: 1.6rem; font-weight: 900; }
.ch-donut__caption { font-size: 0.75rem; color: var(--lp-muted); }

.ch-radar {
  direction: ltr; /* text-anchor start/end are computed for left-to-right coordinates */
  display: block;
  inline-size: 100%;
  max-inline-size: 22rem;
  margin-inline: auto;
  overflow: visible;
}

.ch-radar__grid { stroke: var(--lp-line); stroke-width: 1; }
.ch-radar__axis { stroke: var(--lp-line); stroke-width: 1; }

.ch-radar__shape {
  fill: rgb(124 92 240 / 22%);
  stroke: var(--lp-violet);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.ch-radar__dot { fill: var(--lp-violet); stroke: var(--lp-card); stroke-width: 2; }

.ch-radar__label {
  font-size: 12px;
  font-weight: 700;
  fill: var(--lp-ink);
}

.ch-radar__pct { font-size: 11px; font-weight: 800; fill: var(--lp-violet); }

.ch-line {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.ch-line__grid { stroke: var(--lp-line); stroke-width: 1; stroke-dasharray: 3 5; }
.ch-line__tick { font-size: 11px; fill: var(--lp-muted); }
.ch-line__stop1 { stop-color: var(--lp-info); stop-opacity: 0.32; }
.ch-line__stop2 { stop-color: var(--lp-info); stop-opacity: 0; }

.ch-line__path {
  stroke: var(--lp-info);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ch-line__dot {
  fill: var(--lp-card);
  stroke: var(--lp-info);
  stroke-width: 3;
  transition: r 0.2s;
}

.ch-line__dot:hover { r: 7; }

/* entrance animations (only once learning.js has set html.lp-animate) */
@keyframes ch-ring { from { stroke-dasharray: 0 100; } }
@keyframes ch-grow-x { from { transform: scaleX(0); } }
@keyframes ch-pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes ch-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ch-fade { from { opacity: 0; } }

html.lp-animate .ch-ring__value.ch-anim:not(.is-in),
html.lp-animate .ch-donut__seg.ch-anim:not(.is-in) { stroke-dasharray: 0 100; }
html.lp-animate .ch-ring__value.is-in,
html.lp-animate .ch-donut__seg.is-in { animation: ch-ring 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.ch-bar__value { transform-box: fill-box; transform-origin: 100% 50%; }
html.lp-animate .ch-bar__value.ch-anim:not(.is-in) { transform: scaleX(0); }
html.lp-animate .ch-bar__value.is-in { animation: ch-grow-x 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

html.lp-animate .ch-radar__shape.ch-anim:not(.is-in) { opacity: 0; }
html.lp-animate .ch-radar__shape.is-in { animation: ch-pop 0.9s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }

.ch-line__path { stroke-dasharray: 1; }
html.lp-animate .ch-line__path.ch-anim:not(.is-in) { stroke-dashoffset: 1; }
html.lp-animate .ch-line__path.is-in { animation: ch-draw 1.6s ease-out both; }
html.lp-animate .ch-line__area.ch-anim:not(.is-in) { opacity: 0; }
html.lp-animate .ch-line__area.is-in { animation: ch-fade 1.4s 0.4s ease-out both; }

html.lp-animate [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(1.25rem);
}

html.lp-animate [data-reveal] {
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================ shared bits */
.lp-chip {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.7;
  white-space: nowrap;
  color: inherit;
  background: rgb(255 255 255 / 16%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
}

.lp-chip--level {
  font-family: inherit;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--lp-accent);
  border-color: transparent;
}

.lp-chip--completed { color: #fff; background: var(--lp-ok); border-color: transparent; }
.lp-chip--paused { color: #fff; background: var(--lp-warn); border-color: transparent; }
.lp-chip--grade-ok { color: #fff; background: var(--lp-ok); border-color: transparent; }
.lp-chip--grade-warn { color: #fff; background: var(--lp-warn); border-color: transparent; }
.lp-chip--grade-bad { color: #fff; background: var(--lp-bad); border-color: transparent; }

.lp-empty {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  padding: 2.5rem 1.25rem;
  color: var(--lp-muted);
  text-align: center;
  background: var(--lp-soft);
  border: 1.5px dashed var(--lp-line);
  border-radius: var(--lp-radius);
}

.lp-empty svg { color: var(--lp-accent); }
.lp-empty p { margin: 0; line-height: 2; }
.lp-empty__title { font-size: 1.1rem; font-weight: 800; color: var(--lp-ink); }
.lp-empty-line { margin: 0.5rem 0; font-size: 0.9rem; color: var(--lp-muted); }

.lp-cloud {
  position: absolute;
  display: block;
  background: rgb(255 255 255 / 55%);
  border-radius: 999px;
  filter: blur(1px);
}

.lp-cloud::before,
.lp-cloud::after {
  position: absolute;
  content: "";
  background: inherit;
  border-radius: 50%;
}

.lp-cloud--1 { inset-block-start: 14%; inset-inline-end: 8%; inline-size: 7rem; block-size: 1.9rem; }
.lp-cloud--1::before { inset-block-start: -1rem; inset-inline-start: 1.2rem; inline-size: 2.8rem; block-size: 2.8rem; }
.lp-cloud--1::after { inset-block-start: -0.6rem; inset-inline-start: 3.4rem; inline-size: 2rem; block-size: 2rem; }
.lp-cloud--2 { inset-block-end: 12%; inset-inline-start: 6%; inline-size: 5rem; block-size: 1.4rem; opacity: 0.7; }
.lp-cloud--2::before { inset-block-start: -0.8rem; inset-inline-start: 0.9rem; inline-size: 2rem; block-size: 2rem; }
.lp-cloud--3 { inset-block-start: 48%; inset-inline-start: 38%; inline-size: 3.6rem; block-size: 1rem; opacity: 0.45; }
.lp-cloud--3::before { inset-block-start: -0.55rem; inset-inline-start: 0.7rem; inline-size: 1.4rem; block-size: 1.4rem; }

@keyframes lp-drift { from { transform: translateX(0); } to { transform: translateX(-1.5rem); } }

/* clouds only in the kids' sky; adults get a quiet grid */
.lp--adults .lp-cloud,
.rm--adults .lp-cloud { display: none; }

html.lp-animate .lp--kids .lp-cloud,
html.lp-animate .rm--kids .lp-cloud { animation: lp-drift 9s ease-in-out infinite alternate; }

/* ============================================================ «مسیر یادگیری من»: one journey (.lp) */
.lp {
  container: lp / inline-size;
  margin-block-end: 2rem;
}

.lp-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-block-end: 0.85rem;
  font-size: 0.85rem;
  color: var(--lp-muted);
}

.lp-crumbs a {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-weight: 700;
  color: var(--lp-brand);
}

.lp-hero {
  position: relative;
  display: grid;
  gap: 1.25rem;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.15rem, 4vw, 2.25rem);
  color: #fff;
  background:
    radial-gradient(60% 90% at 0% 0%, rgb(255 255 255 / 16%), transparent 60%),
    linear-gradient(135deg, var(--lp-hero-1), var(--lp-hero-2));
  border-radius: 1.75rem;
  box-shadow: 0 30px 60px -40px var(--lp-hero-2);
}

.lp--adults .lp-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 42px);
  mask-image: linear-gradient(120deg, #000, transparent 70%);
}

.lp-hero__sky { position: absolute; inset: 0; z-index: -1; }
.lp-hero__sky .lp-cloud,
.rm-hero__decor .lp-cloud { background: rgb(255 255 255 / 26%); }
.lp-hero__main { display: grid; gap: 0.55rem; min-inline-size: 0; }

.lp-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.lp-hero__title {
  margin: 0.2rem 0 0;
  font-size: clamp(1.45rem, 5vw, 2.2rem);
  font-weight: 900;
  line-height: 1.45;
  color: #fff;
  text-wrap: balance;
}

.lp-hero__book {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: end;
  opacity: 0.85;
  letter-spacing: 0.04em;
}

.lp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
}

.lp-hero__meta div { display: flex; gap: 0.35rem; }
.lp-hero__meta dt { opacity: 0.75; }
.lp-hero__meta dd { margin: 0; font-weight: 800; }

.lp-hero__now {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0.4rem 0 0;
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.9;
  background: rgb(0 0 0 / 16%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
}

.lp-hero__now svg { flex: none; margin-block-start: 0.3rem; color: var(--lp-sun); }
.lp-hero__next { opacity: 0.8; }
.lp-hero__now--done { background: rgb(18 163 131 / 35%); }

.lp-hero__ring {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
}

.lp-hero__ring .ch-ring { --ch-track: rgb(255 255 255 / 18%); --ch-tone: var(--lp-sun); color: #fff; }
.lp-hero__steps { margin: 0; font-size: 0.8rem; font-weight: 700; opacity: 0.85; }

@container lp (min-width: 620px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .lp-hero__ring { padding-inline-start: 1rem; }
}

/* key numbers */
.lp-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

@container lp (min-width: 760px) {
  .lp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
}

.lp-kpi {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-inline-size: 0;
  padding: 0.75rem;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 1.1rem;
  box-shadow: var(--lp-shadow);
}

.lp-kpi__text { display: grid; min-inline-size: 0; line-height: 1.6; }

/* narrow phones: the ring above its text */
@container lp (max-width: 440px) {
  .lp-kpi { flex-direction: column; gap: 0.4rem; padding: 0.75rem 0.5rem; text-align: center; }
  .lp-kpi__text { justify-items: center; }
}
.lp-kpi__label { font-size: 0.75rem; color: var(--lp-muted); }
.lp-kpi__value { font-size: 0.85rem; font-weight: 800; }
.lp-kpi__big { font-size: 1.15rem; font-weight: 900; color: var(--lp-accent); }

.lp-kpi--streak { background: linear-gradient(135deg, color-mix(in srgb, var(--lp-sun) 14%, var(--lp-card)), var(--lp-card)); }

.lp-kpi__icon {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 3.25rem;
  aspect-ratio: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--lp-sun), var(--lp-accent));
  border-radius: 50%;
}

/* tabs */
.lp-tabs__list {
  display: none;
}

.lp-tabs.is-tabbed .lp-tabs__list {
  position: relative;
  display: flex;
  gap: 0.35rem;
  margin-block-end: 1rem;
  padding: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  box-shadow: var(--lp-shadow);
  scroll-snap-type: x proximity;
}

.lp-tabs.is-tabbed .lp-tabs__list::-webkit-scrollbar { display: none; }

.lp-tab {
  display: inline-flex;
  flex: none;
  gap: 0.4rem;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.45rem 1rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--lp-muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 999px;
  scroll-snap-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.lp-tab:hover { color: var(--lp-brand); }

.lp-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--lp-brand-2), var(--lp-hero-2));
  box-shadow: 0 10px 20px -12px var(--lp-hero-2);
}

.lp-tab:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 2px; }

.lp-tab__count {
  min-inline-size: 1.4rem;
  padding: 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.4rem;
  text-align: center;
  background: rgb(127 140 150 / 16%);
  border-radius: 999px;
}

.lp-tab[aria-selected="true"] .lp-tab__count { background: rgb(255 255 255 / 22%); }

.lp-panel {
  margin-block-end: 1.5rem;
  outline: none;
}

.lp-panel__title {
  margin: 1.25rem 0 0.9rem;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--lp-ink);
}

.lp-tabs.is-tabbed .lp-panel__title {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lp-panel__subtitle { margin: 1.75rem 0 0.75rem; font-size: 1.05rem; font-weight: 900; color: var(--lp-ink); }

/* the road */
.lp-road {
  position: relative;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-stop {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.lp-stop::before {
  position: absolute;
  inset-block: 1.5rem -1rem;
  inset-inline-start: calc(1.5rem - 3px);
  inline-size: 6px;
  content: "";
  background: repeating-linear-gradient(to bottom, var(--lp-line) 0 10px, transparent 10px 18px);
  border-radius: 999px;
}

.lp-stop:last-child::before { display: none; }
.lp-stop--done::before { background: var(--lp-ok); }
.lp-stop--current::before { background: linear-gradient(to bottom, var(--lp-accent), var(--lp-accent) 35%, var(--lp-line) 35%, var(--lp-line) 100%); }

.lp-stop__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--lp-muted);
  background: var(--lp-card);
  border: 3px solid var(--lp-line);
  border-radius: 50%;
  box-shadow: var(--lp-shadow);
}

.lp-stop--done .lp-stop__node { color: #fff; background: var(--lp-ok); border-color: color-mix(in srgb, var(--lp-ok) 60%, #fff); }

.lp-stop--current .lp-stop__node {
  color: #fff;
  background: var(--lp-accent);
  border-color: color-mix(in srgb, var(--lp-accent) 55%, #fff);
}

.lp-stop--current .lp-stop__node::after {
  position: absolute;
  inset: -8px;
  content: "";
  border: 2px solid var(--lp-accent);
  border-radius: 50%;
  opacity: 0;
}

@keyframes lp-pulse { 0% { opacity: 0.7; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.35); } }
html.lp-animate .lp-stop--current .lp-stop__node::after { animation: lp-pulse 1.8s ease-out infinite; }

.lp-stop--next .lp-stop__node { color: #fff; background: linear-gradient(135deg, var(--lp-brand-2), var(--lp-hero-2)); border-color: transparent; }

.lp-plane { display: block; }

.lp-stop__card {
  min-inline-size: 0;
  padding: 0.95rem 1rem 0.85rem;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
}

.lp-stop--current .lp-stop__card {
  border: 2px solid var(--lp-accent);
  box-shadow: 0 22px 44px -30px var(--lp-accent);
}

.lp-stop--future .lp-stop__card { background: color-mix(in srgb, var(--lp-card) 70%, var(--lp-soft)); }

.lp-stop__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: space-between;
}

.lp-stop__code {
  display: inline-block;
  padding: 0.05rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--lp-brand);
  background: rgb(var(--lp-brand-rgb) / 10%);
  border-radius: 999px;
}

html.dark .lp-stop__code { background: rgb(255 255 255 / 9%); }

.lp-state {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--lp-muted);
}

.lp-state--done { color: var(--lp-ok); }
.lp-state--current { color: var(--lp-accent); }

.lp-stop__title {
  margin: 0.45rem 0 0.1rem;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.6;
  color: var(--lp-ink);
}

.lp-stop__range { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--lp-accent); }
.lp-stop__desc { margin: 0.35rem 0 0; font-size: 0.88rem; line-height: 1.95; color: var(--lp-muted); }

.lp-meter { display: grid; gap: 0.3rem; margin-block-start: 0.7rem; }
.lp-meter__label { font-size: 0.75rem; font-weight: 700; color: var(--lp-muted); }

.lp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-facts li {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lp-muted);
  background: var(--lp-soft);
  border-radius: 999px;
}

.lp-more { margin-block-start: 0.7rem; }

.lp-more > summary {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--lp-brand);
  list-style: none;
  cursor: pointer;
}

.lp-more > summary::-webkit-details-marker { display: none; }
.lp-more > summary svg { transition: transform 0.25s; }
.lp-more[open] > summary svg { transform: rotate(-90deg); }

.lp-stop__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0.7rem 0 0;
  padding-block-start: 0.6rem;
  font-size: 0.8rem;
  border-block-start: 1px dashed var(--lp-line);
}

.lp-stop__links a {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  font-weight: 700;
  color: var(--lp-brand);
}

.lp-next { background: linear-gradient(160deg, rgb(var(--lp-brand-rgb) / 7%), var(--lp-card) 60%); }

.lp-next__list {
  display: grid;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-next__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.1rem 0.6rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  background: var(--lp-soft);
  border-radius: 0.9rem;
}

.lp-next__item .lp-chip { grid-row: span 3; align-self: start; }
.lp-next__book { font-weight: 800; }
.lp-next__persona { font-size: 0.8rem; font-weight: 700; color: var(--lp-accent); }
.lp-next__desc { font-size: 0.8rem; color: var(--lp-muted); }

/* the road winds left and right on wide panels */
@container lp (min-width: 800px) {
  .lp-stop { grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr); gap: 1.1rem; }
  .lp-stop::before { inset-inline-start: calc(50% - 3px); }
  .lp-stop__node { grid-row: 1; grid-column: 2; justify-self: center; inline-size: 3.5rem; block-size: 3.5rem; }
  .lp-stop__card { grid-row: 1; grid-column: 1; }
  .lp-stop--even .lp-stop__card { grid-column: 3; }
  .lp-stop__card::after {
    position: absolute;
    inset-block-start: 1.6rem;
    inline-size: 1.1rem;
    block-size: 2px;
    content: "";
    background: var(--lp-line);
  }
  .lp-stop:not(.lp-stop--even) .lp-stop__card { position: relative; }
  .lp-stop:not(.lp-stop--even) .lp-stop__card::after { inset-inline-end: -1.15rem; }
  .lp-stop--even .lp-stop__card { position: relative; }
  .lp-stop--even .lp-stop__card::after { inset-inline-start: -1.15rem; }
}

/* goals */
.lp-goals {
  display: grid;
  gap: 0.35rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-goal {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0.6rem;
  font-size: 0.86rem;
  line-height: 1.9;
  background: var(--lp-soft);
  border-radius: 0.8rem;
}

.lp-goal[hidden] { display: none; }

.lp-goal__mark {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.3rem;
  color: #fff;
  border: 2px solid rgb(127 140 150 / 45%);
  border-radius: 50%;
}

.lp-goal__text { flex: 1 1 auto; min-inline-size: 0; }

.lp-goal__chip {
  flex: none;
  align-self: center;
  padding: 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.8;
  white-space: nowrap;
  color: var(--lp-muted);
  background: var(--lp-card);
  border-radius: 999px;
}

.lp-goal--achieved .lp-goal__mark { background: var(--lp-ok); border-color: var(--lp-ok); }
.lp-goal--achieved .lp-goal__chip { color: #fff; background: var(--lp-ok); }
.lp-goal--in_progress .lp-goal__mark { border-color: var(--lp-info); border-inline-end-color: transparent; }
.lp-goal--in_progress .lp-goal__chip { color: #fff; background: var(--lp-info); }
.lp-goal--needs_practice .lp-goal__mark { border-color: var(--lp-warn); }
.lp-goal--needs_practice .lp-goal__chip { color: #fff; background: var(--lp-warn); }

@container lp (max-width: 420px) {
  .lp-goal { flex-wrap: wrap; }
  .lp-goal__chip { margin-inline-start: 1.85rem; }
}

/* sessions */
.lp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-block-end: 0.75rem;
  font-size: 0.78rem;
  color: var(--lp-muted);
}

.lp-legend .lp-dot { margin-inline-start: 0.4rem; }

.lp-block {
  margin-block-end: 1rem;
  padding: 1rem;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
}

.lp-block[hidden] { display: none; }

.lp-block__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0.65rem;
}

.lp-block__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 900;
}

.lp-block__meta { font-size: 0.8rem; font-weight: 700; color: var(--lp-muted); }

.lp-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.lp-dot {
  display: inline-block;
  inline-size: 0.85rem;
  block-size: 0.85rem;
  background: transparent;
  border: 2px solid rgb(127 140 150 / 40%);
  border-radius: 50%;
}

.lp-dot--present { background: var(--lp-ok); border-color: var(--lp-ok); }
.lp-dot--absent { background: var(--lp-bad); border-color: var(--lp-bad); }
.lp-dot--held { background: var(--lp-info); border-color: var(--lp-info); }

.lp-sessions {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-session {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.6rem 0.7rem;
  background: var(--lp-soft);
  border-radius: 0.9rem;
}

.lp-session--absent { background: color-mix(in srgb, var(--lp-bad) 9%, var(--lp-soft)); }

.lp-session__num {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--lp-brand);
  background: var(--lp-card);
  border-radius: 0.65rem;
}

.lp-session__body { display: grid; gap: 0.25rem; min-inline-size: 0; }
.lp-session__top { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.lp-session__date { margin-inline-end: 0.2rem; font-size: 0.85rem; font-weight: 800; }
.lp-session__note { font-size: 0.85rem; line-height: 1.9; color: var(--lp-muted); overflow-wrap: anywhere; }

.lp-tag {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.8;
  border-radius: 999px;
}

.lp-tag--ok { color: #0b6b57; background: rgb(18 163 131 / 15%); }
.lp-tag--bad { color: #a5221a; background: rgb(224 72 60 / 14%); }
.lp-tag--info { color: #1d5bb0; background: rgb(47 127 224 / 14%); }
.lp-tag--warn { color: #8a5a00; background: rgb(227 155 18 / 18%); }
html.dark .lp-tag--ok { color: #6fe0c4; }
html.dark .lp-tag--bad { color: #ff9b91; }
html.dark .lp-tag--info { color: #9cc6ff; }
html.dark .lp-tag--warn { color: #ffd27a; }

/* goals and skills charts */
.lp-charts {
  display: grid;
  gap: 1rem;
  margin-block-end: 1rem;
}

@container lp (min-width: 680px) {
  .lp-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lp-chart {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1.1rem;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
}

.lp-chart--skills { flex-direction: column; }
.lp-chart__caption { display: grid; gap: 0.4rem; min-inline-size: 9rem; }
.lp-chart__title { font-weight: 900; }
.lp-chart__hint { font-size: 0.78rem; color: var(--lp-muted); }

.lp-keys {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  list-style: none;
}

.lp-keys li { display: flex; gap: 0.45rem; align-items: center; }
.lp-keys strong { margin-inline-start: auto; padding-inline-start: 0.75rem; }

.lp-key {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  background: var(--lp-muted);
  border-radius: 0.25rem;
}

.lp-key--achieved,
.lp-key--present { background: var(--lp-ok); }
.lp-key--in_progress,
.lp-key--late { background: var(--lp-info); }
.lp-key--needs_practice,
.lp-key--excused { background: var(--lp-warn); }
.lp-key--absent { background: var(--lp-bad); }
.lp-key--not_started { background: rgb(127 140 150 / 35%); }

.lp-skillbars {
  display: grid;
  gap: 0.75rem;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-skillbars li { display: grid; gap: 0.3rem; }
.lp-skillbars__label { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 700; }
.lp-skillbars__label strong { color: var(--lp-violet); }

.lp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-end: 0.9rem;
}

html:not(.lp-js) .lp-filter { display: none; }

.lp-filter__btn {
  min-block-size: 2.4rem;
  padding: 0.3rem 0.95rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--lp-muted);
  cursor: pointer;
  background: var(--lp-card);
  border: 1.5px solid var(--lp-line);
  border-radius: 999px;
}

.lp-filter__btn[aria-pressed="true"] { color: #fff; background: var(--lp-brand-2); border-color: var(--lp-brand-2); }

/* report cards */
.lp-reports {
  display: grid;
  gap: 1rem;
}

@container lp (min-width: 720px) {
  .lp-reports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lp-report {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.1rem;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  scroll-margin-block-start: 7rem;
}

.lp-report__head { display: flex; gap: 0.85rem; align-items: center; }
.lp-report__title { margin: 0; font-size: 1.05rem; font-weight: 900; }
.lp-report__meta { margin: 0.1rem 0 0.3rem; font-size: 0.8rem; color: var(--lp-muted); }
.lp-report__total { margin: 0; font-size: 0.9rem; color: var(--lp-muted); }
.lp-report__total strong { font-size: 1.5rem; font-weight: 900; color: var(--lp-ink); }

.lp-criteria { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.lp-criteria li { display: grid; gap: 0.3rem; }
.lp-criteria__label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; }
.lp-criteria__score { font-weight: 800; color: var(--lp-muted); }

.lp-report__goals { display: flex; gap: 0.4rem; align-items: center; margin: 0; font-size: 0.82rem; color: var(--lp-muted); }

.lp-report__comment {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 2;
  background: var(--lp-soft);
  border-inline-start: 4px solid var(--lp-accent);
  border-radius: 0.8rem;
}

.lp-report__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}

.lp-report__sign { display: inline-flex; gap: 0.3rem; align-items: center; font-weight: 800; color: var(--lp-ok); }
.lp-report__foot a { font-weight: 800; color: var(--lp-brand); }

/* badges */
.lp-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-badge {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  padding: 0.9rem 0.6rem;
  text-align: center;
  background: var(--lp-soft);
  border: 1px dashed var(--lp-line);
  border-radius: 1.1rem;
  opacity: 0.62;
}

.lp-badge.is-earned {
  background: var(--lp-card);
  border: 1px solid color-mix(in srgb, var(--lp-sun) 55%, transparent);
  box-shadow: 0 14px 30px -24px var(--lp-accent);
  opacity: 1;
}

.lp-badge__icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  aspect-ratio: 1;
  color: #fff;
  background: rgb(127 140 150 / 60%);
  border-radius: 50%;
}

.lp-badge.is-earned .lp-badge__icon { background: linear-gradient(135deg, var(--lp-sun), var(--lp-accent)); }
.lp-badge__title { font-size: 0.85rem; font-weight: 900; }
.lp-badge__text { font-size: 0.72rem; line-height: 1.8; color: var(--lp-muted); }

/* the booklet tab */
.lp-panel--booklet .jw-toolbar { margin-block-start: 0.25rem; }

/* toolbar on phones: page list on its own row, buttons wrap (never wider than the screen) */
.jw-toolbar__actions { flex-wrap: wrap; }
.jw-toolbar__pages { max-inline-size: 100%; }

@media (max-width: 640px) {
  .jw-toolbar { flex-direction: column; align-items: stretch; }
  .jw-toolbar__actions { justify-content: flex-start; }
  .jw-toolbar__actions .jw-btn { flex: 1 1 auto; justify-content: center; }
}

.jw-btn[hidden] { display: none; }

/* ============================================================ the journeys list (.jl) */
.jl {
  container: jl / inline-size;
  padding: clamp(1rem, 3vw, 2.5rem);
  margin-block-end: 2rem;
  background: var(--lp-card);
  border-radius: 1.5rem;
  box-shadow: var(--lp-shadow);
}

.jl-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-block-end: 1.25rem;
}

.jl-head__title { margin: 0; font-size: 1.6rem; font-weight: 900; color: var(--lp-ink); }
.jl-head__lead { margin: 0.3rem 0 0; font-size: 0.92rem; line-height: 2; color: var(--lp-muted); }

.jl-head__link {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--lp-brand);
  background: rgb(var(--lp-brand-rgb) / 8%);
  border-radius: 999px;
}

.jl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jl-card { min-inline-size: 0; }
.jl-card--adults { --lp-sun: #ffc23d; }

.jl-card__link {
  display: grid;
  gap: 0.75rem;
  block-size: 100%;
  padding: 1.1rem;
  color: var(--lp-ink);
  background:
    radial-gradient(80% 60% at 100% 0%, rgb(var(--lp-brand-rgb) / 9%), transparent 70%),
    var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 1.4rem;
  box-shadow: var(--lp-shadow);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.jl-card__link:hover { color: var(--lp-ink); border-color: var(--lp-accent); transform: translateY(-3px); }
.jl-card__link:focus-visible { outline: 3px solid var(--lp-accent); outline-offset: 3px; }

.jl-card__top { display: flex; gap: 0.4rem; justify-content: space-between; }
.jl-card__top .lp-chip:not(.lp-chip--level, .lp-chip--completed, .lp-chip--paused) { color: var(--lp-brand); background: rgb(var(--lp-brand-rgb) / 8%); border-color: transparent; }
.jl-card__body { display: flex; gap: 0.9rem; align-items: center; }
.jl-card__text { display: grid; gap: 0.15rem; min-inline-size: 0; }
.jl-card__title { font-size: 1.05rem; font-weight: 900; line-height: 1.6; }
.jl-card__book { font-size: 0.8rem; font-weight: 700; color: var(--lp-muted); text-align: end; }
.jl-card__persona { font-size: 0.8rem; font-weight: 800; color: var(--lp-accent); }
.jl-card__stage { display: flex; gap: 0.35rem; align-items: center; font-size: 0.82rem; line-height: 1.8; color: var(--lp-muted); }
.jl-card__stage strong { color: var(--lp-ink); }
.jl-card__stats { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.78rem; font-weight: 700; color: var(--lp-muted); }
.jl-card__stats span { display: inline-flex; gap: 0.25rem; align-items: center; }
.jl-card__cta { display: inline-flex; gap: 0.35rem; align-items: center; font-size: 0.85rem; font-weight: 900; color: var(--lp-brand); }
.jl-card__cta svg { transform: scaleX(-1); }

/* ============================================================ dashboard: «ادامه‌ی مسیر یادگیری» (.jc) */
.jc {
  margin-block-end: 1.875rem;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--lp-card);
  border-radius: 1.25rem;
  box-shadow: var(--lp-shadow);
}

.jc__head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin-block-end: 1rem; }
.jc__title { display: flex; gap: 0.5rem; align-items: center; margin: 0; font-size: 1.3rem; font-weight: 900; color: var(--lp-ink); }
.jc__link { display: inline-flex; gap: 0.35rem; align-items: center; font-size: 0.85rem; font-weight: 800; color: var(--lp-brand); }

.jc__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jc-card {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem;
  color: var(--lp-ink);
  background: var(--lp-soft);
  border: 1px solid var(--lp-line);
  border-radius: 1.1rem;
  transition: border-color 0.2s, transform 0.2s;
}

.jc-card:hover { color: var(--lp-ink); border-color: var(--lp-accent); transform: translateY(-2px); }
.jc-card__text { display: grid; flex: 1 1 auto; gap: 0.2rem; min-inline-size: 0; }
.jc-card__title { font-weight: 900; line-height: 1.6; }
.jc-card__meta,
.jc-card__stage { display: flex; gap: 0.3rem; align-items: center; font-size: 0.78rem; color: var(--lp-muted); }

/* ============================================================ «پیشرفت من» on the profile (.pg) */
.pg {
  container: pg / inline-size;
  margin-block-end: 1.875rem;
}

.pg-hero {
  position: relative;
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(70% 90% at 100% 0%, rgb(255 255 255 / 14%), transparent 60%),
    linear-gradient(135deg, var(--lp-hero-1), var(--lp-hero-2));
  border-radius: 1.75rem;
  box-shadow: 0 30px 60px -40px var(--lp-hero-2);
}

.pg-hero__glow {
  position: absolute;
  inset-block-end: -40%;
  inset-inline-start: -10%;
  z-index: -1;
  inline-size: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(255 194 61 / 32%), transparent 65%);
}

.pg-hero__ring .ch-ring { --ch-track: rgb(255 255 255 / 18%); --ch-tone: var(--lp-sun); color: #fff; }
.pg-hero__text { display: grid; gap: 0.4rem; justify-items: center; min-inline-size: 0; }

.pg-hero__eyebrow {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
  padding: 0.15rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  background: rgb(255 255 255 / 15%);
  border-radius: 999px;
}

.pg-hero__title { margin: 0; font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 900; color: #fff; }
.pg-hero__lead { margin: 0; font-size: 0.92rem; line-height: 2; opacity: 0.92; }
.pg-hero__lead a { font-weight: 800; color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 45%); text-underline-offset: 0.3em; }

.pg-ladder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  direction: ltr;
}

.pg-ladder__step {
  position: relative;
  min-inline-size: 2.6rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  background: rgb(255 255 255 / 12%);
  border-radius: 0.6rem;
}

.pg-ladder__step.is-done { background: rgb(18 163 131 / 70%); }

.pg-ladder__step.is-current {
  color: var(--lp-hero-2);
  background: var(--lp-sun);
  box-shadow: 0 0 0 3px rgb(255 194 61 / 35%);
  transform: translateY(-2px);
}

@container pg (min-width: 640px) {
  .pg-hero { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: start; }
  .pg-hero__text { justify-items: start; }
  .pg-ladder { justify-content: flex-start; }
}

.pg-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

@container pg (min-width: 760px) {
  .pg-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

.pg-kpi {
  --tone: var(--lp-brand-2);
  position: relative;
  display: grid;
  gap: 0.1rem;
  overflow: hidden;
  padding: 0.95rem;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 1.2rem;
  box-shadow: var(--lp-shadow);
}

.pg-kpi::after {
  position: absolute;
  inset-block-start: -1.5rem;
  inset-inline-end: -1.5rem;
  inline-size: 5rem;
  aspect-ratio: 1;
  content: "";
  background: color-mix(in srgb, var(--tone) 14%, transparent);
  border-radius: 50%;
}

.pg-kpi--ok { --tone: var(--lp-ok); }
.pg-kpi--info { --tone: var(--lp-info); }
.pg-kpi--violet { --tone: var(--lp-violet); }
.pg-kpi--warn { --tone: var(--lp-warn); }

.pg-kpi__icon {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  aspect-ratio: 1;
  margin-block-end: 0.4rem;
  color: #fff;
  background: var(--tone);
  border-radius: 0.85rem;
}

.pg-kpi__value { font-size: 1.6rem; font-weight: 900; line-height: 1.3; }
.pg-kpi__label { font-size: 0.85rem; font-weight: 800; }
.pg-kpi__hint { font-size: 0.72rem; line-height: 1.8; color: var(--lp-muted); }
.pg-up { font-weight: 900; color: var(--lp-ok); }
.pg-down { font-weight: 900; color: var(--lp-bad); }

.pg-grid {
  display: grid;
  gap: 1rem;
}

@container pg (min-width: 760px) {
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-card--wide { grid-column: 1 / -1; }
}

.pg-card {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  min-inline-size: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 1.4rem;
  box-shadow: var(--lp-shadow);
}

.pg-card__head { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; justify-content: space-between; }
.pg-card__title { display: flex; gap: 0.45rem; align-items: center; margin: 0; font-size: 1.05rem; font-weight: 900; color: var(--lp-ink); }
.pg-card__title svg { color: var(--lp-accent); }
.pg-card__link { font-size: 0.82rem; font-weight: 800; color: var(--lp-brand); }
.pg-card__hint { font-size: 0.8rem; font-weight: 700; color: var(--lp-muted); }

.pg-chart { inline-size: 100%; overflow: hidden; }
.pg-chart--radar { display: grid; place-items: center; }

.pg-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-facts li {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  color: var(--lp-muted);
  background: var(--lp-soft);
  border-radius: 0.85rem;
}

.pg-facts strong { font-size: 1.05rem; font-weight: 900; color: var(--lp-ink); }

.pg-donut { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: center; }
.pg-donut .lp-keys { min-inline-size: 9rem; }
.pg-donut--small .ch-donut { inline-size: 8rem; }

.pg-attend { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.pg-heat-wrap { display: grid; flex: 1 1 20rem; gap: 0.6rem; min-inline-size: 0; overflow-x: auto; }

.pg-heat {
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
}

.pg-heat__days,
.pg-heat__weeks {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-heat__days {
  grid-template-rows: repeat(7, 0.9rem);
  gap: 0.22rem;
  font-size: 0.62rem;
  line-height: 0.9rem;
  color: var(--lp-muted);
}

.pg-heat__weeks {
  grid-auto-columns: 0.9rem;
  grid-auto-flow: column;
  gap: 0.22rem;
}

.pg-heat__week { display: grid; grid-template-rows: repeat(7, 0.9rem); gap: 0.22rem; }

.pg-heat__cell {
  display: inline-block;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  background: rgb(127 140 150 / 14%);
  border-radius: 0.22rem;
}

.pg-heat__cell--present { background: var(--lp-ok); }
.pg-heat__cell--late { background: var(--lp-info); }
.pg-heat__cell--absent { background: var(--lp-bad); }
.pg-heat__cell--excused { background: var(--lp-warn); }
.pg-heat__cell--future { background: transparent; border: 1px dashed rgb(127 140 150 / 25%); }

.pg-heat__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  align-items: center;
  margin: 0;
  font-size: 0.72rem;
  color: var(--lp-muted);
}

.pg-heat__legend .pg-heat__cell { margin-inline-start: 0.35rem; }

.pg-paths { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.pg-path {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  color: var(--lp-ink);
  background: var(--lp-soft);
  border-radius: 0.95rem;
}

.pg-path:hover { color: var(--lp-ink); outline: 2px solid var(--lp-accent); }
.pg-path__text { display: grid; min-inline-size: 0; }
.pg-path__title { font-size: 0.9rem; font-weight: 800; }
.pg-path__meta { font-size: 0.75rem; color: var(--lp-muted); }

.pg-bars { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.pg-bars li { display: grid; gap: 0.3rem; }
.pg-bars__label { display: flex; gap: 0.75rem; justify-content: space-between; font-size: 0.85rem; font-weight: 700; }
.pg-bars__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pg-empty {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  padding: 1.5rem 1rem;
  font-size: 0.85rem;
  line-height: 2;
  color: var(--lp-muted);
  text-align: center;
  background: var(--lp-soft);
  border-radius: 1rem;
}

.pg-empty p { margin: 0; }
.pg-empty svg { color: var(--lp-accent); }
.pg-empty a { font-weight: 800; color: var(--lp-brand); }

/* ============================================================ public roadmaps (.rm) */
.rm-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.25rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3.25rem);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(60% 80% at 100% 0%, rgb(255 255 255 / 16%), transparent 60%),
    linear-gradient(140deg, var(--lp-hero-1), var(--lp-hero-2));
}

.rm--adults .rm-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 48px);
  mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent);
}

.rm-hero__decor { position: absolute; inset: 0; z-index: -1; }

.rm-switch {
  display: inline-flex;
  gap: 0.25rem;
  margin-block-end: 1.5rem;
  padding: 0.3rem;
  background: rgb(0 0 0 / 18%);
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.rm-switch__item {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.4rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: rgb(255 255 255 / 85%);
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s;
}

.rm-switch__item:hover { color: #fff; background: rgb(255 255 255 / 10%); }
.rm-switch__item.is-active { color: var(--lp-hero-2); background: #fff; box-shadow: 0 10px 22px -14px rgb(0 0 0 / 60%); }

.rm-hero__eyebrow { margin: 0; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.rm-hero__title { margin: 0.35rem 0 0.5rem; font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 900; line-height: 1.4; color: #fff; text-wrap: balance; }
.rm-hero__lead { max-inline-size: 40rem; margin: 0 auto; font-size: clamp(0.95rem, 2.4vw, 1.1rem); line-height: 2.1; opacity: 0.92; }

.rm-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.rm-totals li {
  display: grid;
  min-inline-size: 5.5rem;
  padding: 0.6rem 0.9rem;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
}

.rm-totals strong { font-size: 1.5rem; font-weight: 900; line-height: 1.3; }
.rm-totals span { font-size: 0.78rem; opacity: 0.85; }

.rm-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-block-start: 1.25rem;
}

.rm-jump a {
  min-inline-size: 3rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  border: 1.5px solid rgb(255 255 255 / 40%);
  border-radius: 999px;
}

.rm-jump a:hover { color: var(--lp-hero-2); background: #fff; }

.rm-body {
  position: relative;
  padding-block: clamp(2rem, 6vw, 4rem);
  background: color-mix(in srgb, var(--lp-soft) 70%, transparent);
}

html.dark .rm-body { background: transparent; }

.rm-road {
  --road: 0.9rem;
  --road-x: 1.4rem;
  position: relative;
  display: grid;
  gap: 1.75rem;
  max-inline-size: 72rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* the road itself: a dark band with a dashed centre line (kids: a dotted flight path) */
.rm-road::before {
  position: absolute;
  inset-block: 1.5rem;
  inset-inline-start: calc(var(--road-x) - var(--road) / 2);
  inline-size: var(--road);
  content: "";
  background: linear-gradient(#2f3c4a, #1f2a36);
  border-radius: 999px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-card) 70%, transparent);
}

.rm-road::after {
  position: absolute;
  inset-block: 1.5rem;
  inset-inline-start: calc(var(--road-x) - 1px);
  inline-size: 2px;
  content: "";
  background: repeating-linear-gradient(to bottom, #ffd36b 0 12px, transparent 12px 24px);
}

.rm--kids .rm-road::before {
  background: transparent;
  box-shadow: none;
}

.rm--kids .rm-road::after {
  inset-inline-start: calc(var(--road-x) - 3px);
  inline-size: 6px;
  background: radial-gradient(circle, var(--lp-brand-2) 2.6px, transparent 3px) 0 0 / 6px 16px repeat-y;
}

.rm-cap,
.rm-level {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--road-x) * 2) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.rm-cap {
  align-items: center;
  padding: 0.9rem 1rem 0.9rem 0;
}

.rm-cap__icon,
.rm-level__station {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  justify-self: center;
}

.rm-cap__icon {
  inline-size: 2.6rem;
  aspect-ratio: 1;
  color: #fff;
  background: var(--lp-accent);
  border: 4px solid var(--lp-card);
  border-radius: 50%;
  box-shadow: var(--lp-shadow);
}

.rm-cap--start .rm-cap__icon { background: var(--lp-accent); }
.rm-cap--finish .rm-cap__icon { background: var(--lp-ok); }

.rm-cap__text {
  display: grid;
  gap: 0.1rem;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--lp-muted);
  background: var(--lp-card);
  border: 1px dashed var(--lp-line);
  border-radius: 1rem;
}

.rm-cap__text strong { font-size: 0.98rem; color: var(--lp-ink); }

.rm-cap__link {
  grid-column: 2;
  justify-self: start;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  background: var(--lp-accent);
  border-radius: 999px;
}

.rm-cap__link:hover { color: #fff; filter: brightness(1.05); }

.rm-level__station {
  inline-size: 2.8rem;
  aspect-ratio: 1;
  margin-block-start: 0.6rem;
  font-size: 0.78rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--lp-brand-2), var(--lp-hero-2));
  border: 4px solid var(--lp-card);
  border-radius: 50%;
  box-shadow: 0 10px 22px -12px var(--lp-hero-2);
}

.rm-level__station span { font-size: 0.72rem; letter-spacing: -0.02em; white-space: nowrap; }

.rm--kids .rm-level__station { border-radius: 1rem; transform: rotate(-6deg); }
.rm--kids .rm-level--even .rm-level__station { background: linear-gradient(135deg, var(--lp-sun), var(--lp-accent)); transform: rotate(6deg); }

.rm-level__body {
  min-inline-size: 0;
  padding: clamp(1rem, 3vw, 1.6rem);
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 1.6rem;
  box-shadow: var(--lp-shadow);
  scroll-margin-block-start: 7rem;
}

.rm-level { scroll-margin-block-start: 7rem; }

.rm-level__head { display: grid; gap: 0.15rem; }

.rm-level__step { margin: 0; font-size: 0.75rem; font-weight: 800; color: var(--lp-accent); letter-spacing: 0.04em; }

.rm-level__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.25rem 0 0;
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--lp-ink);
}

.rm-level__code {
  padding: 0.05rem 0.75rem;
  font-size: 0.95rem;
  color: #fff;
  background: var(--lp-accent);
  border-radius: 0.6rem;
}

.rm-level__en { margin: 0; font-size: 0.85rem; color: var(--lp-muted); text-align: end; }
.rm-level__desc { margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 2; color: var(--lp-muted); }

.rm-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.rm-facts li {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--lp-brand);
  background: rgb(var(--lp-brand-rgb) / 8%);
  border-radius: 999px;
}

html.dark .rm-facts li { background: rgb(255 255 255 / 8%); }

/* adults: the CEFR benchmark, hours, pace and real-world outcomes */
.rm-hero__decor--rise {
  display: flex;
  gap: clamp(0.35rem, 1.4vw, 0.9rem);
  align-items: flex-end;
  justify-content: center;
  padding-inline: 4%;
  opacity: 0.55;
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
}

.rm-rise {
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  justify-content: center;
  max-inline-size: 7rem;
  padding-block-start: 0.4rem;
  font-size: 0.7rem;
  font-weight: 900;
  color: rgb(255 255 255 / 55%);
  background: linear-gradient(to top, rgb(255 255 255 / 4%), rgb(255 255 255 / 13%));
  border-block-start: 2px solid rgb(255 255 255 / 30%);
  border-radius: 0.6rem 0.6rem 0 0;
}

.rm-rise:nth-child(1) { block-size: 18%; }
.rm-rise:nth-child(2) { block-size: 28%; }
.rm-rise:nth-child(3) { block-size: 38%; }
.rm-rise:nth-child(4) { block-size: 48%; }
.rm-rise:nth-child(5) { block-size: 58%; }
.rm-rise:nth-child(6) { block-size: 70%; }
.rm-rise:nth-child(n + 7) { block-size: 82%; }

html.lp-animate .rm-rise { animation: rm-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: 50% 100%; }
html.lp-animate .rm-rise:nth-child(2) { animation-delay: 0.08s; }
html.lp-animate .rm-rise:nth-child(3) { animation-delay: 0.16s; }
html.lp-animate .rm-rise:nth-child(4) { animation-delay: 0.24s; }
html.lp-animate .rm-rise:nth-child(5) { animation-delay: 0.32s; }
html.lp-animate .rm-rise:nth-child(6) { animation-delay: 0.4s; }
html.lp-animate .rm-rise:nth-child(n + 7) { animation-delay: 0.48s; }

@keyframes rm-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.rm-mine {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin: -0.75rem auto 1.25rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 800;
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 999px;
}

.rm-mine a { color: #ffd27a; text-decoration: underline; text-underline-offset: 3px; }
.rm-mine--other { background: rgb(255 210 122 / 16%); border-color: rgb(255 210 122 / 45%); }

.rm-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.6rem;
  max-inline-size: 60rem;
  margin: 1.5rem auto 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.rm-pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.55rem;
  align-items: center;
  padding: 0.8rem 0.95rem;
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
}

.rm-pillar svg { grid-row: span 2; align-self: start; margin-block-start: 0.2rem; color: #ffd27a; }
.rm-pillar strong { font-size: 0.92rem; font-weight: 900; }
.rm-pillar span { font-size: 0.78rem; line-height: 1.9; opacity: 0.85; }

.rm-totals__time { background: rgb(255 210 122 / 18%) !important; border-color: rgb(255 210 122 / 40%) !important; }

.rm-pace {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  margin-block-start: 1rem;
}

.rm-pace[hidden] { display: none; }

.rm-pace__label { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.82rem; font-weight: 800; opacity: 0.9; }

.rm-pace__btn {
  padding: 0.3rem 0.85rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s;
}

.rm-pace__btn:hover { background: rgb(255 255 255 / 16%); }
.rm-pace__btn[aria-pressed="true"] { color: var(--lp-hero-2); background: #fff; border-color: #fff; }
.rm-pace__btn:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
.rm-pace__note { margin: 0.6rem auto 0; font-size: 0.74rem; opacity: 0.75; }

.rm-level__bench {
  margin-inline-start: 0.5rem;
  padding: 0.05rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--lp-brand);
  letter-spacing: 0;
  background: rgb(var(--lp-brand-rgb) / 9%);
  border: 1px solid rgb(var(--lp-brand-rgb) / 20%);
  border-radius: 999px;
}

html.dark .rm-level__bench { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 14%); }

.rm-facts__time { color: #8a5a00 !important; background: rgb(255 190 70 / 18%) !important; }
html.dark .rm-facts__time { color: #ffd27a !important; }

.rm-level__hours { display: flex; gap: 0.35rem; align-items: center; margin: 0.55rem 0 0; font-size: 0.8rem; font-weight: 700; color: var(--lp-muted); }

.rm-outcomes {
  margin-block-start: 0.8rem;
  padding: 0.75rem 0.95rem;
  background: linear-gradient(135deg, rgb(var(--lp-brand-rgb) / 7%), transparent 70%);
  border: 1px solid rgb(var(--lp-brand-rgb) / 16%);
  border-inline-start: 3px solid var(--lp-brand);
  border-radius: 0.9rem;
}

.rm-outcomes__title { display: flex; gap: 0.35rem; align-items: center; margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 900; color: var(--lp-ink); }
.rm-outcomes__title svg { color: var(--lp-brand); }

.rm-outcomes ul { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }

.rm-outcomes li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: 0.84rem;
  line-height: 1.95;
  color: var(--lp-muted);
}

.rm-outcomes li::before {
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: 0.15rem;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  content: "";
  background: var(--lp-accent);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  html.lp-animate .rm-rise { animation: none; }
}

.rm-books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  margin-block-start: 1.1rem;
}

.rm-book {
  position: relative;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1rem;
  background: var(--lp-soft);
  border: 1px solid var(--lp-line);
  border-radius: 1.25rem;
}

.rm-book.is-mine { border: 2px solid var(--lp-accent); box-shadow: 0 20px 40px -30px var(--lp-accent); }

.rm-book__mine {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  justify-self: start;
  margin: 0;
  padding: 0.15rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 900;
  color: #fff;
  background: var(--lp-accent);
  border-radius: 999px;
}

.rm-book__head { display: flex; gap: 0.85rem; align-items: center; }

.rm-book__cover {
  flex: none;
  inline-size: 4.5rem;
  block-size: 6rem;
  object-fit: cover;
  border-radius: 0.6rem;
  box-shadow: 0 10px 20px -12px rgb(0 0 0 / 50%);
}

.rm-book__cover--art {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 900;
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 30%), transparent 45%),
    linear-gradient(160deg, var(--lp-brand-2), var(--lp-hero-2));
}

.rm--kids .rm-book__cover--art { background: radial-gradient(circle at 30% 20%, rgb(255 255 255 / 35%), transparent 45%), linear-gradient(160deg, var(--lp-sun), var(--lp-accent)); }

.rm-book__titles { display: grid; gap: 0.1rem; min-inline-size: 0; }
.rm-book__title { margin: 0; font-size: 1.05rem; font-weight: 900; line-height: 1.5; color: var(--lp-ink); text-align: end; }
.rm-book__persona { display: inline-flex; gap: 0.3rem; align-items: center; margin: 0; font-size: 0.82rem; font-weight: 800; color: var(--lp-accent); }
.rm-book__meta { margin: 0; font-size: 0.76rem; color: var(--lp-muted); }
.rm-book__desc { margin: 0; font-size: 0.85rem; line-height: 2; color: var(--lp-muted); }

.rm-stages { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; counter-reset: rm; }

.rm-stage details {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 0.9rem;
  transition: border-color 0.2s;
}

.rm-stage details[open] { border-color: rgb(var(--lp-brand-rgb) / 35%); }

.rm-stage summary {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-block-size: 2.9rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.rm-stage summary::-webkit-details-marker { display: none; }

.rm-stage__num {
  display: grid;
  flex: none;
  place-items: center;
  inline-size: 1.75rem;
  aspect-ratio: 1;
  font-size: 0.78rem;
  color: var(--lp-brand);
  background: rgb(var(--lp-brand-rgb) / 10%);
  border-radius: 50%;
}

.rm-stage.is-done .rm-stage__num { color: #fff; background: var(--lp-ok); }
.rm-stage.is-here .rm-stage__num { color: #fff; background: var(--lp-accent); }
.rm-stage.is-here details { border-color: var(--lp-accent); }

.rm-stage__title { flex: 1 1 auto; min-inline-size: 0; line-height: 1.7; }
.rm-stage__code { flex: none; font-size: 0.72rem; color: var(--lp-muted); }

.rm-stage__more {
  padding: 0 0.9rem 0.85rem;
  font-size: 0.85rem;
  line-height: 2;
  color: var(--lp-muted);
}

.rm-stage__more p { margin: 0 0 0.35rem; }
.rm-stage__meta { font-size: 0.78rem; font-weight: 700; color: var(--lp-accent); }
.rm-stage__goals-title { font-weight: 800; color: var(--lp-ink); }

.rm-stage__goals {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-stage__goals li { position: relative; padding-inline-start: 1.1rem; }

.rm-stage__goals li::before {
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: 0.15rem;
  inline-size: 0.4rem;
  block-size: 0.4rem;
  content: "";
  background: var(--lp-ok);
  border-radius: 50%;
}

.rm-stage__more-goals { font-size: 0.75rem; font-style: italic; }

.rm-book__foot { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rm-book__foot:empty { display: none; }

.rm-book__btn {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  min-block-size: 2.6rem;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--lp-brand);
  background: var(--lp-card);
  border: 1.5px solid rgb(var(--lp-brand-rgb) / 25%);
  border-radius: 0.9rem;
}

.rm-book__btn--primary { color: #fff; background: var(--lp-accent); border-color: var(--lp-accent); }
.rm-book__btn:hover { transform: translateY(-1px); }
.rm-book__btn--primary:hover { color: #fff; }

/* wide screens: the road runs down the middle, levels alternate sides */
@media (min-width: 992px) {
  .rm-road { --road-x: 50%; gap: 2.5rem; }
  .rm-road::before { inset-inline-start: calc(50% - var(--road) / 2); }
  .rm-road::after { inset-inline-start: calc(50% - 1px); }
  .rm--kids .rm-road::after { inset-inline-start: calc(50% - 3px); }
  .rm-level,
  .rm-cap { grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr); }
  .rm-level__station { grid-row: 1; grid-column: 2; inline-size: 4rem; }
  .rm-level__station span { font-size: 0.85rem; }
  .rm-level__body { grid-row: 1; grid-column: 1; }
  .rm-level--even .rm-level__body { grid-column: 3; }
  .rm-cap { padding: 0; }
  .rm-cap__icon { grid-row: 1; grid-column: 2; inline-size: 3.2rem; }
  .rm-cap__text { grid-row: 1; grid-column: 1; justify-self: end; max-inline-size: 26rem; }
  .rm-cap__link { grid-row: 1; grid-column: 3; justify-self: start; }
}

/* ============================================================ motion off */
@media (prefers-reduced-motion: reduce) {
  .lp *,
  .rm *,
  .pg *,
  .jl *,
  .jc * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================ «جشن پایان مرحله» (.cel) */
.cel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  margin: 0;
  padding: 1rem;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: auto;
}

.cel:not([open]) { display: none; }
.cel::backdrop { background: rgb(8 16 28 / 62%); backdrop-filter: blur(3px); }

.cel__confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.cel__card {
  position: relative;
  inline-size: min(26rem, 100%);
  padding: 2.25rem 1.5rem 1.5rem;
  border-radius: 1.6rem;
  text-align: center;
  color: var(--lp-ink);
  background:
    radial-gradient(120% 70% at 50% 0%, rgb(var(--lp-brand-rgb) / 14%), transparent 70%),
    var(--lp-card);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 60%);
}

.cel.is-live .cel__card { animation: cel-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

.cel__medal {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 6.5rem;
  aspect-ratio: 1;
  margin: -4.75rem auto 0.75rem;
}

.cel__ray {
  position: absolute;
  inset: -0.9rem;
  border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 194 61 / 55%) 0 10deg, transparent 10deg 20deg);
  mask: radial-gradient(circle, transparent 42%, #000 43%, #000 68%, transparent 70%);
}

.cel.is-live .cel__ray { animation: cel-spin 14s linear infinite; }

.cel__badge {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  border: 0.3rem solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--lp-sun), var(--lp-accent));
  box-shadow: 0 14px 30px -12px rgb(229 83 45 / 70%);
}

.cel__badge b { font-size: 2.6rem; font-weight: 900; line-height: 1; }
.cel--final .cel__badge { background: linear-gradient(145deg, #f7d046, #c98a00); }

.cel__kicker {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--lp-accent);
  background: rgb(229 83 45 / 10%);
}

.cel__title { margin: 0 0 0.4rem; font-size: 1.35rem; font-weight: 900; line-height: 1.6; color: var(--lp-ink); }
.cel__text { margin: 0 0 1rem; line-height: 1.9; color: var(--lp-muted); }

.cel__progress {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-block-end: 0.9rem;
}

.cel__progress .ch-bar { block-size: 0.7rem; }
.cel__pct { flex: none; font-weight: 800; color: var(--lp-ok); }

.cel__next {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.9rem;
  font-size: 0.92rem;
  color: var(--lp-ink);
  background: var(--lp-soft);
}

.cel__actions { margin: 0; }

.cel__btn {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 3rem;
  border: 0;
  border-radius: 0.9rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--lp-brand-2), var(--lp-brand));
  cursor: pointer;
}

html.dark .cel__btn { background: linear-gradient(135deg, #13777b, #0b4e53); }
.cel__btn:focus-visible { outline: 3px solid var(--lp-sun); outline-offset: 3px; }

@keyframes cel-pop {
  from { opacity: 0; transform: scale(0.7) translateY(2rem); }
  to { opacity: 1; transform: none; }
}

@keyframes cel-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cel.is-live .cel__card,
  .cel.is-live .cel__ray { animation: none; }
}