/*
 * Cica Tanoda – tanulóotthon (app.css)
 *
 * Előfeltétel: brand/cica-tokens.css + brand/cica-alap.css (ebben a sorrendben).
 * Minden szín és méret token (--ct-*); a világos téma rögzített (<html data-theme="light">).
 * Táblagép-első: mobilon alsó fülsor, 768 px felett ikonsáv, 1200 px felett oldalsáv.
 */
/* Misu egyszeri mozdulatai (integet, ugrik, bólint …): a márkacsomag közös fájlja, nem szerkesztjük. */
@import url("brand/cica-misu-mozgas.css");

/* ---------------------------------------------------------------- alap */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ct-color-bg); scroll-padding-top: 88px; }
body.ct { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { max-width: 100%; }
:where(.ct) :where(h1) { font-size: var(--ct-text-4xl); }
:where(.ct) [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
h1[tabindex="-1"]:focus, .lesson-root:focus, .flash__back:focus, .state__title:focus { outline: none; }

/* Misu módja (misu.js állítja: <html data-misu="beszedes|csendes">): a beszédes elemek csendes módban eltűnnek,
 * a csak-csendes elemek (például az egyszerű bevezető sor) beszédes módban. Váltáskor nincs újrarajzolás. */
html[data-misu="csendes"] .misu-chatty,
html:not([data-misu="csendes"]) .misu-quiet { display: none !important; }

.ico { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; }
.ico svg { width: 100%; height: 100%; }
.ct-btn .ico, .ct-badge .ico { width: 20px; height: 20px; }
.ct-badge .ico { width: 16px; height: 16px; }
.ct-btn { white-space: nowrap; }
.ct-btn--quiet { --_fg: var(--ct-color-link); }

.muted { color: var(--ct-color-text-muted); }
.stack { display: grid; gap: var(--ct-space-4); }
.btn-wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-3); }
.btn-row--center { justify-content: center; }
.btn-row--end { justify-content: flex-end; }
.section-title {
  margin: var(--ct-space-5) 0 var(--ct-space-3);
  font-family: var(--ct-font-display); font-size: var(--ct-text-xl); font-weight: var(--ct-weight-bold);
}
.card-title { margin: 0; font-family: var(--ct-font-display); font-size: var(--ct-text-xl); line-height: var(--ct-leading-tight); }
.count-pill {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 var(--ct-space-2);
  border-radius: var(--ct-radius-pill); background: var(--ct-color-primary); color: var(--ct-color-on-primary);
  font-size: var(--ct-text-sm); font-weight: var(--ct-weight-bold); font-variant-numeric: tabular-nums;
}
.count-pill--soft { background: var(--ct-color-surface-soft); color: var(--ct-color-text); }
.score { font-weight: var(--ct-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- keret
 * A fejléc (logó, a szerep menüje, nyelv, fiók) és telefonon az alsó fülsor a közös héj: /t/shell.js + /t/shell.css.
 * Itt csak a tartalom helye marad. A --bar-h / --tabbar-h értékét más modulok (Misu-gomb, stúdió) is olvassák. */
.shell { --bar-h: 56px; --tabbar-h: 64px; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.shell__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
.main {
  min-width: 0;
  padding: var(--ct-space-5) max(var(--ct-gutter), env(safe-area-inset-right)) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--ct-space-6)) max(var(--ct-gutter), env(safe-area-inset-left));
  container-type: inline-size;
}
.main:focus { outline: none; }
/* Belépéskor, profilválasztáskor és fókuszmódban nincs alsó fülsor. */
.shell--bare .main, .shell--focus .main { padding-bottom: var(--ct-space-7); }

@media (min-width: 768px) {
  .shell { --bar-h: 64px; }
  .main { padding: var(--ct-space-6) var(--ct-space-6) var(--ct-space-7); }
}
@media (min-width: 1200px) {
  .main { padding: var(--ct-space-6) var(--ct-space-7) var(--ct-space-8); }
}

/* „Misu: beszédes / csendes” – a fiókmenüben (a héj fiókmenüjébe az app.js adja) */
.menu__misu {
  display: grid; gap: var(--ct-space-2);
  margin-top: var(--ct-space-1); padding: var(--ct-space-3) var(--ct-space-3) var(--ct-space-2);
  border-top: var(--ct-border-width) solid var(--ct-color-line);
}
.menu__misu-head { display: flex; align-items: center; gap: var(--ct-space-2); margin: 0; font-weight: var(--ct-weight-semibold); }
.menu__misu-face { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; }
.menu__misu-face .ct-misu { height: 36px; max-width: 36px; object-fit: contain; }
.menu__seg {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: var(--ct-radius-md); background: var(--ct-color-surface-sunken);
}
.menu__seg-btn {
  min-height: var(--ct-touch-min); padding: 0 var(--ct-space-2);
  border: 0; border-radius: var(--ct-radius-sm); background: none; cursor: pointer;
  color: var(--ct-color-text-muted); font-weight: var(--ct-weight-semibold);
}
.menu__seg-btn:hover { color: var(--ct-color-text); }
.menu__seg-btn[aria-pressed="true"] { background: var(--ct-color-surface); color: var(--ct-color-primary); box-shadow: var(--ct-shadow-sm); }
.menu__misu-hint { margin: 0; font-size: var(--ct-text-xs); color: var(--ct-color-text-muted); line-height: 1.4; }

/* ---------------------------------------------------------------- oldal */
.page { width: 100%; max-width: 1120px; margin-inline: auto; }
.page--narrow { max-width: 760px; }
.page--book { max-width: 920px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ct-space-4); margin-bottom: var(--ct-space-5); }
.page-head h1 { margin: 0; }
.page-head__lead { margin: var(--ct-space-2) 0 0; }
.page-head__extra { display: flex; flex-wrap: wrap; gap: var(--ct-space-3); }

.card-head { display: flex; align-items: center; gap: var(--ct-space-3); margin-bottom: var(--ct-space-4); }
.card-head__text { flex: 1; min-width: 0; }
.card-head__text .ct-eyebrow { margin: 0 0 2px; }
.card-head__icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: var(--ct-radius-md); background: var(--ct-color-surface-soft); color: var(--ct-color-primary);
}
.ct-card { padding: var(--ct-space-5); }

/* ---------------------------------------------------------------- állapotok */
.state { padding: var(--ct-space-7) var(--ct-space-4); }
.state .ct-misu { margin-bottom: var(--ct-space-2); }
.state__title { margin: 0; font-family: var(--ct-font-display); font-size: var(--ct-text-3xl); line-height: var(--ct-leading-tight); text-wrap: balance; }
h1.state__title { font-size: var(--ct-text-3xl); }
.state__text { margin: 0 auto; max-width: 48ch; }
.state .btn-row { margin-top: var(--ct-space-3); }

.note { align-items: flex-start; margin-bottom: var(--ct-space-4); }
.note__icon { color: var(--_tone); margin-top: 2px; }
.note__body { flex: 1; min-width: 0; }
.note__actions { flex: none; }

.field-error {
  display: flex; align-items: flex-start; gap: var(--ct-space-2);
  margin: 0; padding: var(--ct-space-2) var(--ct-space-3);
  border-radius: var(--ct-radius-sm); background: var(--ct-color-error-soft); color: var(--ct-color-error);
  font-size: var(--ct-text-sm); font-weight: var(--ct-weight-semibold);
}

.loading-slow { display: flex; align-items: center; justify-content: center; gap: var(--ct-space-3); margin-top: var(--ct-space-5); color: var(--ct-color-text-muted); }
.loading-slow p { margin: 0; font-weight: var(--ct-weight-semibold); }

/* csontváz (statikus: ismétlődő animáció nincs) */
.boot, .sk-wrap { display: grid; gap: var(--ct-space-4); width: 100%; max-width: 1120px; margin-inline: auto; }
.sk-wrap--narrow { max-width: 760px; }
.sk { display: block; border-radius: var(--ct-radius-lg); background: var(--ct-color-surface-sunken); opacity: 0.8; }
.sk--hero { height: 168px; border-radius: var(--ct-radius-xl); }
.sk--title { height: 44px; width: min(60%, 360px); border-radius: var(--ct-radius-sm); }
.sk--card { height: 180px; }
.sk--tall { height: 320px; }
.sk--tile { height: 220px; border-radius: var(--ct-radius-xl); }
.sk--flash { height: 280px; border-radius: var(--ct-radius-xl); }
.sk--row { height: 64px; border-radius: var(--ct-radius-md); }
.sk-grid, .sk-tiles { display: grid; gap: var(--ct-space-4); }
.boot-noscript { padding: var(--ct-space-5); text-align: center; }

/* értesítés (toast) */
.toasts {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: var(--ct-z-toast);
  bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + var(--ct-space-4));
  display: grid; gap: var(--ct-space-2); width: min(100% - 2 * var(--ct-gutter), 440px);
  pointer-events: none;
}
.toast {
  padding: var(--ct-space-3) var(--ct-space-4);
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-text); color: var(--ct-color-text-inverse);
  box-shadow: var(--ct-shadow-md); font-weight: var(--ct-weight-semibold);
  pointer-events: auto;
  animation: toast-in var(--ct-duration-slow) var(--ct-ease-out) both;
}
.toast--success { background: var(--ct-color-success); }
.toast--error { background: var(--ct-color-error); }
.toast--out { opacity: 0; transform: translateY(6px); transition: opacity var(--ct-duration-slow), transform var(--ct-duration-slow); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) { .toasts { bottom: var(--ct-space-5); } }

/* párbeszédablak */
.dialog {
  width: min(100% - 2 * var(--ct-gutter), 460px); padding: 0;
  border: 0; border-radius: var(--ct-radius-xl);
  background: var(--ct-color-surface); color: var(--ct-color-text); box-shadow: var(--ct-shadow-lg);
}
.dialog::backdrop { background: var(--ct-color-overlay); }
.dialog__inner { padding: var(--ct-space-5); }
.dialog__title { margin: 0 0 var(--ct-space-2); font-family: var(--ct-font-display); font-size: var(--ct-text-2xl); }
.dialog__body { margin: 0 0 var(--ct-space-5); color: var(--ct-color-text-muted); }

/* avatar */
.avatar {
  --c: var(--ct-navy-600); --s: 40px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: color-mix(in srgb, var(--c) 84%, var(--ct-navy-950));
  color: var(--ct-color-text-inverse);
  font-size: calc(var(--s) * 0.42); font-weight: var(--ct-weight-bold); line-height: 1;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.22);
  user-select: none;
}

/* ---------------------------------------------------------------- belépés */
.login { display: grid; gap: var(--ct-space-5); max-width: 1040px; margin: 0 auto; }
.login__hero { display: grid; justify-items: center; gap: var(--ct-space-3); text-align: center; }
.login__misu { height: 150px; }
.login__intro h1 { margin: 0 0 var(--ct-space-2); font-size: var(--ct-text-3xl); }
.login__intro .ct-lead { margin: 0 auto; }
.login__main, .login__forms { display: grid; gap: var(--ct-space-4); align-content: start; }
.login-card { display: grid; gap: var(--ct-space-4); }
.login-card .muted { margin: 0; }
.login-card__head { display: flex; align-items: center; gap: var(--ct-space-3); }
.login-card__head .ct-eyebrow { margin: 0; }
.login-card__icon {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px;
  border-radius: var(--ct-radius-md); background: var(--ct-color-accent-soft); color: var(--ct-color-accent-text);
}
.code-input, .otp-input { text-align: center; font-family: var(--ct-font-mono); font-weight: var(--ct-weight-bold); min-height: 60px; }
.code-input { font-size: var(--ct-text-2xl); letter-spacing: 0.12em; }
.otp-input { font-size: var(--ct-text-3xl); letter-spacing: 0.4em; padding-left: 0.4em; }
.login__aside { margin: 0; text-align: center; color: var(--ct-color-text-muted); }
.check {
  display: flex; align-items: flex-start; gap: var(--ct-space-3);
  min-height: var(--ct-touch-min); padding: var(--ct-space-3) var(--ct-space-4);
  border-radius: var(--ct-radius-md); background: var(--ct-color-surface-soft); cursor: pointer;
}
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ct-color-primary); flex: none; }
.check b { display: block; }
.check small { display: block; color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); }

@container (min-width: 820px) {
  .login { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--ct-space-7); align-items: start; padding-top: var(--ct-space-5); }
  .login__hero { position: sticky; top: calc(var(--bar-h) + var(--ct-space-6)); }
  .login__misu { height: var(--ct-misu-lg); }
  .login__intro h1 { font-size: var(--ct-text-4xl); }
}

/* „Ki tanul most?” */
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--ct-space-3); }
.who-grid--lg { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--ct-space-4); }
.who-tile {
  position: relative; display: grid; justify-items: center; align-content: center; gap: var(--ct-space-1);
  min-height: 150px; padding: var(--ct-space-4) var(--ct-space-3);
  border: var(--ct-border-width) solid var(--ct-color-line); border-radius: var(--ct-radius-lg);
  background: var(--ct-color-surface); text-align: center; cursor: pointer;
  transition: border-color var(--ct-duration-base) var(--ct-ease-standard), box-shadow var(--ct-duration-base) var(--ct-ease-standard), transform var(--ct-duration-fast) var(--ct-ease-standard);
}
.who-tile:hover { border-color: var(--ct-color-line-strong); box-shadow: var(--ct-shadow-sm); transform: translateY(-1px); }
.who-tile:active { transform: translateY(1px); }
.who-tile[aria-current] { border-color: var(--ct-color-primary); box-shadow: inset 0 0 0 1px var(--ct-color-primary); }
.who-tile[disabled] { opacity: 0.7; cursor: progress; }
.who-tile .avatar { margin-bottom: var(--ct-space-2); }
.who-tile__name { font-size: var(--ct-text-lg); line-height: 1.25; }
.who-tile small { color: var(--ct-color-text-muted); font-size: var(--ct-text-xs); word-break: break-all; }
.who-tile__badge { margin-top: var(--ct-space-1); }

.chooser__head { display: flex; align-items: flex-end; gap: var(--ct-space-4); margin-bottom: var(--ct-space-5); }
.chooser__head h1 { margin: 0 0 var(--ct-space-1); }
.chooser__head .ct-lead { margin: 0; }
.chooser__head .ct-misu { height: 104px; }
.chooser__others { margin-top: var(--ct-space-5); }
.chooser__actions { margin-top: var(--ct-space-6); }
.choice-grid { display: grid; gap: var(--ct-space-4); }
.choice-card { display: grid; gap: var(--ct-space-3); align-content: start; }
.choice-card .muted { margin: 0; }
.choice-card__icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--ct-radius-md); background: var(--ct-color-primary-soft); color: var(--ct-color-primary);
}
@container (min-width: 620px) {
  .choice-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .chooser__head .ct-misu { height: var(--ct-misu-md); }
}

/* ---------------------------------------------------------------- Ma */
.today { display: grid; gap: var(--ct-space-5); }
.hero {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end;
  gap: var(--ct-space-3) var(--ct-space-4);
  padding: var(--ct-space-5) var(--ct-space-5) 0 var(--ct-space-4);
  border-radius: var(--ct-radius-xl);
  border: var(--ct-border-width) solid color-mix(in srgb, var(--ct-color-ornament) 40%, transparent);
  background:
    radial-gradient(120% 140% at 0% 100%, var(--ct-color-accent-soft) 0%, transparent 60%),
    linear-gradient(160deg, var(--ct-color-bubble) 0%, var(--ct-color-bg) 100%);
  overflow: hidden;
}
.hero__misu { height: 112px; margin-bottom: -6px; }
.hero__text { padding-bottom: var(--ct-space-5); min-width: 0; }
.hero__date { margin: 0 0 var(--ct-space-1); font-size: var(--ct-text-sm); font-weight: var(--ct-weight-semibold); color: var(--ct-color-accent-text); }
.hero__date::first-letter { text-transform: uppercase; }
.hero__title { margin: 0 0 var(--ct-space-3); font-size: var(--ct-text-4xl); overflow-wrap: anywhere; }
.hero__bubble { margin: 0; background: var(--ct-color-surface); box-shadow: var(--ct-shadow-xs); font-size: var(--ct-text-lg); max-width: 46ch; text-wrap: pretty; }
.hero__bubble b { font-weight: var(--ct-weight-bold); }
.hero__line { margin: 0; font-size: var(--ct-text-lg); color: var(--ct-color-text-muted); }
.hero:not(:has(> .hero__misu:not([hidden]))) { grid-template-columns: minmax(0, 1fr); padding-left: var(--ct-space-5); }
/* Napszakok: ugyanaz a papírszínű alap, csak a fény színe változik (reggel arany, délután meleg, este hűvös kék). */
.hero--afternoon {
  background:
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--ct-color-accent-soft) 70%, transparent) 0%, transparent 58%),
    linear-gradient(160deg, var(--ct-color-surface) 0%, var(--ct-color-bubble) 100%);
}
.hero--evening {
  border-color: color-mix(in srgb, var(--ct-color-primary) 18%, transparent);
  background:
    radial-gradient(120% 140% at 0% 100%, var(--ct-color-primary-soft) 0%, transparent 62%),
    linear-gradient(160deg, var(--ct-color-info-soft) 0%, var(--ct-color-bg) 100%);
}

@container (max-width: 480px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: var(--ct-space-5) var(--ct-space-3) 0 var(--ct-space-4); column-gap: var(--ct-space-2); }
  .hero__misu { grid-column: 2; grid-row: 1 / span 2; align-self: end; height: 96px; }
  .hero__text { grid-column: 1; grid-row: 1 / span 2; padding-bottom: var(--ct-space-4); }
  .hero__title { font-size: var(--ct-text-3xl); }
  .hero__bubble { font-size: var(--ct-text-md); }
  .hero__bubble::before { left: auto; right: -8px; }
}
.side-card__link { margin-left: calc(-1 * var(--ct-space-4)); }
@container (min-width: 720px) {
  .hero { padding-left: var(--ct-space-6); gap: var(--ct-space-5); }
  .hero__misu { height: 150px; }
}

.today__grid { display: grid; gap: var(--ct-space-5); align-items: start; }
.today__side { display: grid; gap: var(--ct-space-4); }
@container (min-width: 800px) {
  .today__grid { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
}
@container (min-width: 560px) and (max-width: 799px) {
  .today__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today__side > :first-child { grid-column: 1 / -1; }
}

.plan-card { padding: var(--ct-space-5) var(--ct-space-4); border-top: 4px solid var(--ct-color-accent); }
.plan-card .card-head { padding: 0 var(--ct-space-1); }
.plan-card .card-title { font-size: var(--ct-text-3xl); }
.plan { list-style: none; margin: 0; padding: 0; display: grid; }
.plan-item {
  position: relative; display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas: "node body" ". action";
  gap: var(--ct-space-2) var(--ct-space-4);
  padding: var(--ct-space-3);
  border-radius: var(--ct-radius-lg);
}
.plan-item:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--ct-space-3) + 23px); top: calc(var(--ct-space-3) + 52px); bottom: calc(-1 * var(--ct-space-3) + 4px);
  width: 2px; background: repeating-linear-gradient(to bottom, var(--ct-color-line-strong) 0 4px, transparent 4px 9px);
  opacity: 0.6;
}
.plan-item--next { background: var(--ct-color-accent-soft); }
.plan-item__node {
  grid-area: node; position: relative; z-index: 1;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ct-color-surface); color: var(--ct-color-primary);
  border: 2px solid var(--ct-color-primary-soft);
}
.plan-item--next .plan-item__node { background: var(--ct-color-primary); color: var(--ct-color-on-primary); border-color: var(--ct-color-primary); }
.plan-item__body { grid-area: body; min-width: 0; align-self: center; }
.plan-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2); margin: 0 0 2px; font-size: var(--ct-text-sm); color: var(--ct-color-text-muted); font-weight: var(--ct-weight-semibold); }
.plan-item__next {
  display: inline-flex; padding: 1px var(--ct-space-2); border-radius: var(--ct-radius-pill);
  background: var(--ct-color-accent); color: var(--ct-color-on-accent); font-size: var(--ct-text-xs); font-weight: var(--ct-weight-bold);
}
.plan-item__title { margin: 0; font-family: var(--ct-font-display); font-size: var(--ct-text-xl); line-height: var(--ct-leading-snug); }
.plan-item__why { margin: var(--ct-space-1) 0 0; color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); }
.plan-item__action { grid-area: action; }
.plan-item__action .ct-btn { min-width: 128px; }
@container (min-width: 600px) {
  .plan-item { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "node body action"; align-items: center; }
}

.quiet-empty { display: grid; justify-items: start; gap: var(--ct-space-3); padding: var(--ct-space-3) var(--ct-space-1) var(--ct-space-1); }
.quiet-empty p { margin: 0; color: var(--ct-color-text-muted); }
.quiet-empty b { color: var(--ct-color-text); }
.quiet-empty__icon { width: 40px; height: 40px; color: var(--ct-color-ornament); }

.side-card { padding: var(--ct-space-4) var(--ct-space-5) var(--ct-space-5); }
.side-card .card-head { margin-bottom: var(--ct-space-3); }
.side-card__empty { margin: 0 0 var(--ct-space-2); }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ct-space-1); }
.row-link {
  display: flex; align-items: center; gap: var(--ct-space-3);
  width: 100%; min-height: 60px; padding: var(--ct-space-2) var(--ct-space-2);
  border: 0; border-radius: var(--ct-radius-md); background: none;
  color: var(--ct-color-text); text-align: left; text-decoration: none; cursor: pointer;
}
a.row-link:hover, button.row-link:hover { background: var(--ct-color-surface-soft); color: var(--ct-color-text); }
.row-link--static { cursor: default; }
.row-link__icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: var(--ct-radius-md); background: var(--ct-color-primary-soft); color: var(--ct-color-primary);
}
.row-link__icon .ico { width: 22px; height: 22px; }
.row-link__icon--coral { background: var(--ct-app-feladatgyar-soft); color: var(--ct-app-feladatgyar); }
.row-link__body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.row-link__body b { line-height: 1.3; overflow-wrap: anywhere; }
.row-link__body small { color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); }
.row-link__body small.is-soon { color: var(--ct-color-accent-text); font-weight: var(--ct-weight-semibold); }
.row-link__body small.is-late { color: var(--ct-color-warning); font-weight: var(--ct-weight-bold); }
.row-link__note { font-style: italic; }
.row-link__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2); margin-top: var(--ct-space-1); }
.row-link__tags:empty { display: none; }
.row-link__tags .score { font-size: var(--ct-text-sm); }
.row-link__chev { width: 20px; height: 20px; color: var(--ct-color-text-subtle); }

.review-card__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ct-space-3); }
.review-card__count { display: flex; align-items: baseline; gap: var(--ct-space-2); margin: 0; font-weight: var(--ct-weight-semibold); }
.big-num { font-family: var(--ct-font-display); font-size: var(--ct-text-4xl); font-weight: var(--ct-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ct-color-primary); }

/* ---------------------------------------------------------------- Ismétlés */
.review-page { display: grid; gap: var(--ct-space-3); }
.review-top { display: flex; align-items: center; }
.review-title { margin: 0; font-size: var(--ct-text-3xl); }
.review { display: grid; gap: var(--ct-space-4); }
.review-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ct-space-3); }
.review-progress__count { font-weight: var(--ct-weight-bold); font-variant-numeric: tabular-nums; color: var(--ct-color-text-muted); }
.flash {
  position: relative; display: grid; align-content: center; gap: var(--ct-space-2);
  min-height: 260px; padding: var(--ct-space-7) var(--ct-space-5) var(--ct-space-6);
  border: var(--ct-border-width) solid var(--ct-color-line); border-radius: var(--ct-radius-xl);
  background: linear-gradient(180deg, var(--ct-color-surface) 0%, var(--ct-color-surface) 70%, color-mix(in srgb, var(--ct-color-bubble) 60%, var(--ct-color-surface)) 100%);
  box-shadow: var(--ct-shadow-sm), 0 10px 0 -4px var(--ct-color-surface-sunken), 0 10px 0 -3px var(--ct-color-line);
  text-align: center;
  animation: flash-in var(--ct-duration-slow) var(--ct-ease-out) both;
}
.flash::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 8px;
  border-radius: var(--ct-radius-xl) var(--ct-radius-xl) 0 0; background: var(--ct-color-accent);
}
.flash__label { margin: 0; font-size: var(--ct-text-sm); font-weight: var(--ct-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ct-color-accent-text); }
.flash__text { margin: 0 auto; max-width: 34ch; font-family: var(--ct-font-display); font-size: var(--ct-text-3xl); font-weight: var(--ct-weight-bold); line-height: var(--ct-leading-snug); overflow-wrap: anywhere; }
.flash__back { display: grid; gap: var(--ct-space-2); margin-top: var(--ct-space-4); padding-top: var(--ct-space-4); border-top: 2px dashed var(--ct-color-line); animation: flash-in var(--ct-duration-slow) var(--ct-ease-out) both; }
.flash__text--back { font-family: var(--ct-font-body); font-size: var(--ct-text-xl); font-weight: var(--ct-weight-semibold); }
@keyframes flash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.review-controls { display: grid; gap: var(--ct-space-3); }
.review-hint { margin: 0; text-align: center; }
.review-ask { margin: 0; text-align: center; font-family: var(--ct-font-display); font-size: var(--ct-text-xl); font-weight: var(--ct-weight-bold); }
.rate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ct-space-3); }
@container (min-width: 600px) { .rate { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rate__btn {
  --_tone: var(--ct-color-line-strong);
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: 76px; padding: var(--ct-space-3) var(--ct-space-2) var(--ct-space-2);
  border: var(--ct-border-width) solid var(--ct-color-line-strong); border-top: 5px solid var(--_tone);
  border-radius: var(--ct-radius-md); background: var(--ct-color-surface); cursor: pointer;
  transition: background var(--ct-duration-base) var(--ct-ease-standard), transform var(--ct-duration-fast) var(--ct-ease-standard);
}
.rate__btn b { font-size: var(--ct-text-lg); }
.rate__btn small { font-size: var(--ct-text-xs); color: var(--ct-color-text-muted); }
.rate__btn::after {
  content: attr(data-key); position: absolute; top: 6px; left: 8px;
  font-size: var(--ct-text-xs); font-weight: var(--ct-weight-bold); color: var(--ct-color-text-subtle);
}
.rate__btn:hover { background: var(--ct-color-surface-soft); }
.rate__btn:active { transform: translateY(1px); }
.rate__btn[disabled] { opacity: 0.6; cursor: progress; }
.rate__btn--again { --_tone: var(--ct-color-warning); }
.rate__btn--hard { --_tone: var(--ct-color-accent); }
.rate__btn--good { --_tone: var(--ct-color-success); }
.rate__btn--easy { --_tone: var(--ct-color-info); }
.review-note { display: flex; align-items: center; justify-content: center; gap: var(--ct-space-2); margin: 0; color: var(--ct-color-success); font-weight: var(--ct-weight-semibold); }
.review-note .ico { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- Tanulás: évfolyam és csempék */
.grade-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2); }
.grade-picker__label { font-size: var(--ct-text-sm); font-weight: var(--ct-weight-semibold); color: var(--ct-color-text-muted); margin-right: var(--ct-space-1); }
.grade-picker__list { display: flex; flex-wrap: wrap; gap: var(--ct-space-2); margin: 0; padding: 0; list-style: none; }
.grade-chip {
  display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 var(--ct-space-3);
  border: var(--ct-border-width) solid var(--ct-color-line-strong); border-radius: var(--ct-radius-pill);
  background: var(--ct-color-surface); color: var(--ct-color-text);
  font-weight: var(--ct-weight-bold); font-variant-numeric: tabular-nums; text-decoration: none;
}
.grade-chip:hover { background: var(--ct-color-surface-soft); color: var(--ct-color-text); }
.grade-chip[aria-current] { background: var(--ct-color-primary); border-color: var(--ct-color-primary); color: var(--ct-color-on-primary); }
/* Tanulás: „Tantárgyak | Nyelvek” váltó és a nyelvi csoportok */
.part-switch { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ct-space-1); padding: var(--ct-space-1); border-radius: var(--ct-radius-md); background: var(--ct-color-surface-sunken); }
.part-switch__opt {
  border: 0; background: none; font: inherit; cursor: pointer;
  display: grid; place-items: center; min-height: 44px; padding: 0 var(--ct-space-4); border-radius: var(--ct-radius-sm);
  font-weight: var(--ct-weight-semibold); color: var(--ct-color-text-muted); text-decoration: none; white-space: nowrap;
}
.part-switch__opt:hover { color: var(--ct-color-text); }
.part-switch__opt[aria-current], .part-switch__opt[aria-pressed="true"] { background: var(--ct-color-surface); color: var(--ct-color-primary); box-shadow: var(--ct-shadow-sm); }
.part-switch__opt:focus-visible { outline: var(--ct-focus-width) solid var(--ct-color-focus); outline-offset: 2px; }
.lang-groups { display: grid; gap: var(--ct-space-5); }
.lang-group__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ct-space-3); margin-bottom: var(--ct-space-4); }
.lang-group__title { margin: 0; font-size: var(--ct-text-xl); }
.lang-group__sub { margin: var(--ct-space-1) 0 0; color: var(--ct-color-text-muted); }

.tiles { display: grid; gap: var(--ct-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin: 0; padding: 0; list-style: none; }
.tiles__item { display: flex; }
.tile {
  --tile: var(--ct-color-primary);
  --tile-ink: color-mix(in srgb, var(--tile) 62%, var(--ct-navy-950));
  flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: var(--ct-space-3);
  padding: var(--ct-space-5);
  border: var(--ct-border-width) solid var(--ct-color-line); border-top: 6px solid var(--tile);
  border-radius: var(--ct-radius-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tile) 7%, var(--ct-color-surface)) 0%, var(--ct-color-surface) 46%);
  color: var(--ct-color-text); text-decoration: none;
  transition: box-shadow var(--ct-duration-base) var(--ct-ease-standard), transform var(--ct-duration-base) var(--ct-ease-standard);
}
.tile:hover { color: var(--ct-color-text); box-shadow: var(--ct-shadow-md); transform: translateY(-2px); }
.tile:active { transform: translateY(0); }
.tile__top { display: flex; align-items: flex-start; justify-content: space-between; min-height: 56px; }
/* Tárgyhoz öltözött Misu a csempe jobb felső sarkában; a csempe magasságát alig növeli. */
.tile__misu { height: 84px; margin: -10px -6px -18px 0; }
.tile__icon {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px;
  background: color-mix(in srgb, var(--tile, var(--ct-color-primary)) 15%, var(--ct-color-surface));
  color: var(--tile-ink, var(--ct-color-primary));
}
.tile__icon .ico { width: 30px; height: 30px; }
.glyph-letter { font-family: var(--ct-font-display); font-size: var(--ct-text-2xl); font-weight: var(--ct-weight-bold); }
.tile__grade { font-family: var(--ct-font-display); font-size: var(--ct-text-3xl); font-weight: var(--ct-weight-bold); line-height: 1; color: color-mix(in srgb, var(--tile) 30%, var(--ct-color-line)); }
.tile__body { display: grid; align-content: start; gap: var(--ct-space-1); }
.tile__kicker { margin: 0; font-size: var(--ct-text-xs); font-weight: var(--ct-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tile-ink, var(--ct-color-text-muted)); }
.tile__title { font-family: var(--ct-font-display); font-size: var(--ct-text-2xl); font-weight: var(--ct-weight-bold); line-height: var(--ct-leading-tight); }
.tile__desc { color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile__foot { display: grid; gap: var(--ct-space-2); }
.tile .ct-progress > span { background: var(--tile-ink); }
.tile__stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ct-space-2); font-size: var(--ct-text-sm); font-weight: var(--ct-weight-semibold); font-variant-numeric: tabular-nums; }
.tile__note { color: var(--ct-color-text-muted); font-weight: var(--ct-weight-regular); }
.tile__go {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--ct-space-2);
  min-height: var(--ct-touch-min); margin-top: var(--ct-space-1); padding: 0 var(--ct-space-3) 0 var(--ct-space-4);
  border-radius: var(--ct-radius-sm); background: var(--ct-color-primary); color: var(--ct-color-on-primary);
  font-weight: var(--ct-weight-semibold);
}
.tile__go .ico { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- Tanösvény (könyv) */
.path-head {
  --tile: var(--ct-color-primary);
  --tile-ink: color-mix(in srgb, var(--tile) 62%, var(--ct-navy-950));
  position: relative; display: grid; gap: var(--ct-space-4);
  padding: var(--ct-space-5) var(--ct-space-5) var(--ct-space-5);
  margin-bottom: var(--ct-space-4);
  border: var(--ct-border-width) solid var(--ct-color-line); border-radius: var(--ct-radius-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tile) 10%, var(--ct-color-surface)) 0%, var(--ct-color-surface) 62%);
  overflow: hidden;
}
.path-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--tile); }
.path-head__back { justify-self: start; margin: 0 0 calc(-1 * var(--ct-space-2)) calc(-1 * var(--ct-space-3)); }
.path-head__main { display: flex; align-items: flex-start; gap: var(--ct-space-4); }
.path-head__icon { width: 64px; height: 64px; border-radius: 18px; }
.path-head__icon .ico { width: 34px; height: 34px; }
.path-head__text { min-width: 0; }
.path-head__title { margin: var(--ct-space-1) 0 var(--ct-space-2); }
.path-head__desc { margin: 0; color: var(--ct-color-text-muted); }
.path-head__progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ct-space-3); }
.path-head__progress .ct-progress { height: 12px; }
.path-head__progress .ct-progress > span { background: var(--tile-ink); }
.path-head__count { font-weight: var(--ct-weight-bold); font-variant-numeric: tabular-nums; }
.path-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-3) var(--ct-space-4); }
.path-cta .ct-btn { min-height: 56px; padding: 0 var(--ct-space-6); font-size: var(--ct-text-lg); }
.path-cta__next { display: grid; min-width: 0; }
.path-cta__next small { color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); }
.path-cta__next b { font-family: var(--ct-font-display); font-size: var(--ct-text-lg); line-height: 1.3; }
.path-head .note { margin: 0; }
/* Tantárgyi Misu a fejléc jobb alsó sarkában áll; hely csak akkor kell neki, ha a képe betöltődött. */
.path-head__misu { position: absolute; right: var(--ct-space-5); bottom: 0; height: 150px; pointer-events: none; }
html:not([data-misu="csendes"]) .path-head:has(> .path-head__misu[data-ready]) { padding-right: 172px; }
.path-done { display: flex; align-items: flex-end; gap: var(--ct-space-3); }
.path-done .note { flex: 1; min-width: 0; }
.path-done__misu { height: 88px; margin-bottom: -4px; }
@container (max-width: 560px) {
  /* Telefonon a fejléc amúgy is magas: a tantárgyi Misu ott a csempén és a leckében kísér, itt nem. */
  .path-head__misu { display: none; }
  html:not([data-misu="csendes"]) .path-head:has(> .path-head__misu[data-ready]) { padding-right: var(--ct-space-4); }
}
.path-note {
  display: flex; align-items: flex-start; gap: var(--ct-space-2);
  margin: 0 0 var(--ct-space-4); padding: var(--ct-space-3) var(--ct-space-4);
  border-radius: var(--ct-radius-md); background: var(--ct-color-info-soft);
  color: var(--ct-color-text); font-size: var(--ct-text-sm);
}
.path-note .ico { color: var(--ct-color-info); width: 20px; height: 20px; margin-top: 1px; }

/* Tanösvény mint térkép: a fejezetkártyák állomásai (számkörök) egy pontozott ösvényen sorakoznak. */
.chapters { --station-x: calc(var(--ct-space-4) + 24px); display: grid; gap: var(--ct-space-5); }
.chapter {
  position: relative;
  border: var(--ct-border-width) solid var(--ct-color-line); border-radius: var(--ct-radius-lg);
  background: var(--ct-color-surface);
}
.chapter + .chapter::before {
  content: ""; position: absolute; left: calc(var(--station-x) - 2px); bottom: 100%;
  height: calc(var(--ct-space-5) + 2px); border-left: 4px dotted var(--ct-color-ornament);
}
.chapter--done + .chapter::before { border-left-style: solid; border-left-width: 3px; border-color: var(--ct-color-success); opacity: 0.7; }
.chapter--current { border-color: color-mix(in srgb, var(--ct-color-ornament) 70%, transparent); box-shadow: var(--ct-shadow-xs); }
.chapter__h { margin: 0; font: inherit; }
.chapter__toggle {
  display: flex; align-items: center; gap: var(--ct-space-4);
  width: 100%; min-height: 76px; padding: var(--ct-space-3) var(--ct-space-4);
  border: 0; border-radius: var(--ct-radius-lg); background: none; text-align: left; cursor: pointer;
}
.chapter__toggle:hover { background: color-mix(in srgb, var(--ct-color-surface-soft) 60%, transparent); }
.chapter__num {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ct-color-accent-soft); color: var(--ct-color-accent-text);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ct-color-ornament) 60%, transparent);
  font-family: var(--ct-font-display); font-size: var(--ct-text-xl); font-weight: var(--ct-weight-bold);
  font-variant-numeric: tabular-nums;
}
.chapter__num { position: relative; }
.chapter__num .ico { width: 24px; height: 24px; }
/* Itt tart a tanuló: kiemelt állomás aranygyűrűvel. */
.chapter__num--here {
  background: var(--ct-color-primary); color: var(--ct-color-on-primary);
  box-shadow: 0 0 0 4px var(--ct-color-surface), 0 0 0 7px var(--ct-color-accent);
}
/* Kész fejezet: zászló. Ha megvan Misu csúcs-póza (misu-csucs), ő áll az állomáson a zászlóval. */
.chapter__num--done { background: var(--ct-color-success-soft); color: var(--ct-color-success); box-shadow: inset 0 0 0 2px var(--ct-color-success); }
.chapter__peak { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); height: 64px; max-width: none; pointer-events: none; }
.chapter__num--done:has(.chapter__peak[data-ready]) { background: transparent; box-shadow: none; }
.chapter__num--done:has(.chapter__peak[data-ready]) .chapter__flag { visibility: hidden; }
.chapter__heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.chapter__title { font-family: var(--ct-font-display); font-size: var(--ct-text-xl); font-weight: var(--ct-weight-bold); line-height: 1.25; }
.chapter__meta { font-size: var(--ct-text-sm); color: var(--ct-color-text-muted); font-weight: var(--ct-weight-regular); }
.chapter__done { flex: none; }
.chapter__chev { color: var(--ct-color-text-muted); transition: transform var(--ct-duration-base) var(--ct-ease-standard); }
.chapter__toggle[aria-expanded="true"] .chapter__chev { transform: rotate(180deg); }
.chapter__body { padding: 0 var(--ct-space-4) var(--ct-space-4); }
.chapter__summary { margin: 0 0 var(--ct-space-3); padding-left: calc(48px + var(--ct-space-4)); color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); }

.toc { list-style: none; margin: 0; padding: var(--ct-space-1) 0 0; border-top: 1px dashed var(--ct-color-line); }
.toc__link {
  display: flex; align-items: center; gap: var(--ct-space-3);
  min-height: 56px; padding: var(--ct-space-2);
  border-radius: var(--ct-radius-sm); color: var(--ct-color-text); text-decoration: none;
}
a.toc__link:hover { background: var(--ct-color-surface-soft); color: var(--ct-color-text); }
.toc__n { flex: none; min-width: 2.2ch; color: var(--ct-color-text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.toc__title { flex: 0 1 auto; min-width: 0; font-weight: var(--ct-weight-semibold); line-height: 1.35; }
.toc__dots { flex: 1 1 16px; min-width: 16px; align-self: center; margin-top: 6px; border-bottom: 2px dotted var(--ct-color-line); }
.toc__meta { flex: none; display: flex; align-items: center; }
.toc__min { display: inline-flex; align-items: center; gap: var(--ct-space-1); color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); white-space: nowrap; }
.toc__min .ico { width: 16px; height: 16px; }
.toc__chev, .toc__chev-space { flex: none; width: 20px; height: 20px; color: var(--ct-color-text-subtle); }
.toc__row--hamarosan .toc__title { color: var(--ct-color-text-muted); font-weight: var(--ct-weight-regular); }
.st {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--ct-color-line-strong); background: var(--ct-color-surface); color: var(--ct-color-text-inverse);
}
.st .ico { width: 16px; height: 16px; }
.st--kesz { background: var(--ct-color-success); border-color: var(--ct-color-success); }
.st--folyamatban { border-color: var(--ct-color-accent-text); background: conic-gradient(var(--ct-color-accent) 0 50%, var(--ct-color-surface) 0); }
.st--hamarosan { border-style: dashed; border-color: var(--ct-color-line-strong); background: var(--ct-color-surface); }

/* A leckesor is ösvény: a pontokat függőleges út köti össze; a megtett szakasz zöld. */
.toc--trail { --st-x: calc(var(--ct-space-2) + 13px); }
.toc--trail .toc__row { position: relative; }
.toc--trail .toc__row::before {
  content: ""; position: absolute; left: calc(var(--st-x) - 1.5px); top: 0; bottom: 0;
  border-left: 3px dotted var(--ct-color-line-strong); opacity: 0.55; pointer-events: none;
}
.toc--trail .toc__row:first-child::before { top: 50%; }
.toc--trail .toc__row:last-child::before { bottom: 50%; }
.toc--trail .toc__row:only-child::before { display: none; }
.toc--trail .toc__row--kesz::before { border-left-style: solid; border-color: var(--ct-color-success); opacity: 0.8; }
.toc--trail .toc__link { position: relative; }
.toc--trail .st { position: relative; z-index: 1; }
/* Itt tart a tanuló: kiemelt sor, és Misu ott áll az ösvényen, a pont helyén. */
.toc__row--here > .toc__link { background: var(--ct-color-accent-soft); min-height: 64px; }
.toc__row--here .st { border-color: var(--ct-color-accent-text); box-shadow: 0 0 0 4px var(--ct-color-accent-soft), 0 0 0 6px var(--ct-color-accent); }
.toc__here { white-space: nowrap; background: var(--ct-color-accent); color: var(--ct-color-on-accent); }
.toc__walker {
  position: absolute; z-index: 2; left: calc(var(--st-x) - 26px); bottom: calc(50% - 16px);
  height: 64px; pointer-events: none;
}
html:not([data-misu="csendes"]) .toc__row--here:has(> .toc__walker[data-ready]) .st { visibility: hidden; }
@container (max-width: 520px) {
  .toc__link {
    display: grid; grid-template-columns: 26px auto minmax(0, 1fr) 20px;
    grid-template-areas: "st n title chev" ". . meta chev"; column-gap: var(--ct-space-2); row-gap: var(--ct-space-1);
  }
  .toc__link > .st { grid-area: st; }
  .toc__n { grid-area: n; }
  .toc__title { grid-area: title; }
  .toc__meta { grid-area: meta; }
  .toc__meta:empty { display: none; }
  .toc__chev, .toc__chev-space { grid-area: chev; align-self: center; }
  .toc__dots { display: none; }
  .chapter__toggle { gap: var(--ct-space-3); padding: var(--ct-space-3); }
  .chapters { --station-x: calc(var(--ct-space-3) + 24px); }
  .chapter__body { padding: 0 var(--ct-space-3) var(--ct-space-3); }
  .chapter__summary { padding-left: 0; }
  .chapter__done { display: none; }
  .path-head { padding: var(--ct-space-4); }
  .path-head__main { flex-direction: column; gap: var(--ct-space-3); }
  .path-head__icon { width: 52px; height: 52px; }
}

.test-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-3);
  margin-top: var(--ct-space-3); padding: var(--ct-space-3) var(--ct-space-4);
  border-radius: var(--ct-radius-md);
  border: var(--ct-border-width) solid color-mix(in srgb, var(--ct-color-accent) 50%, transparent);
  background: var(--ct-color-accent-soft);
}
.beta-row { margin: 0 0 var(--ct-space-3); }
.test-row__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ct-color-accent); color: var(--ct-color-on-accent); flex: none; }
.test-row__icon .ico { width: 22px; height: 22px; }
.test-row__body { flex: 1 1 200px; min-width: 0; display: grid; }
.test-row__body small { color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); }
.path-source { margin: var(--ct-space-5) 0 0; font-size: var(--ct-text-sm); color: var(--ct-color-text-muted); text-align: center; max-width: none; }

/* ---------------------------------------------------------------- Lecke */
.lesson-host { max-width: var(--ct-container-wide); margin-inline: auto; }
.shell--focus .main:has(.lesson-host) { padding-top: var(--ct-space-3); }
.lesson-root { min-height: 50vh; }
.lesson-loading { display: grid; justify-items: center; gap: var(--ct-space-2); padding: var(--ct-space-8) var(--ct-space-4); color: var(--ct-color-text-muted); }
.lesson-loading p { margin: 0; font-weight: var(--ct-weight-semibold); }

/* ---------------------------------------------------------------- Gyakorlás, Óráim */
.two-col { display: grid; gap: var(--ct-space-4); align-items: start; }
@container (min-width: 820px) { .two-col { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.practice-hero {
  gap: var(--ct-space-2);
  background: linear-gradient(160deg, var(--ct-app-feladatgyar-soft) 0%, var(--ct-color-surface) 55%);
}
.practice-hero__title { margin: 0; font-family: var(--ct-font-display); font-size: var(--ct-text-3xl); }
.practice-hero__text { margin: 0 0 var(--ct-space-3); color: var(--ct-color-text-muted); }
.practice-own { margin-top: var(--ct-space-4); }
.side-stack { display: grid; gap: var(--ct-space-4); min-width: 0; }
.mistakes-card > .ct-btn { margin-top: var(--ct-space-1); }

/* Hibáim */
.mistakes-page { display: grid; gap: var(--ct-space-4); }
.mistakes-page .page-head { margin-bottom: 0; }
.mistakes-head { display: grid; gap: var(--ct-space-3); }

/* Misu mondja: oldalbevezető buborék (a nagyítós Misu a hibafüzetben) */
.page-say { align-items: flex-end; }
.page-say__misu { height: 76px; margin-bottom: -4px; }
.page-say__bubble { margin: 0; max-width: 52ch; background: var(--ct-color-surface); box-shadow: var(--ct-shadow-xs); text-wrap: pretty; }
.page-say__plain { margin: 0; }
.mistakes { display: grid; gap: var(--ct-space-4); }
.mistake-card { display: grid; gap: var(--ct-space-4); border-top: 4px solid var(--ct-color-accent); }
.mistake-card__head { display: grid; gap: 2px; padding-bottom: var(--ct-space-3); border-bottom: 1px dashed var(--ct-color-line); }
.mistake-card__title { margin: 0; font-family: var(--ct-font-body); font-size: var(--ct-text-sm); font-weight: var(--ct-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ct-color-accent-text); }
.mistake-card__title:focus { outline: none; }
.mistake-card__source { margin: 0; font-family: var(--ct-font-display); font-size: var(--ct-text-lg); font-weight: var(--ct-weight-bold); line-height: 1.3; }
.mistake-item { min-height: 120px; }
.mistake-msg:empty { display: none; }
.mistake-msg .note { margin: 0; }
.mistake-card__actions .ct-btn { min-width: 160px; }

.lessons-soon {
  display: grid; justify-items: center; gap: var(--ct-space-4); text-align: center;
  padding: var(--ct-space-6) var(--ct-space-5);
  background: linear-gradient(170deg, var(--ct-app-orafoglalo-soft) 0%, var(--ct-color-surface) 60%);
}
.lessons-soon__text { display: grid; justify-items: center; gap: var(--ct-space-2); }
.lessons-soon__text .card-title { font-size: var(--ct-text-2xl); }
.lessons-soon__text p { margin: 0; }
.lessons-soon__text .btn-row { margin-top: var(--ct-space-2); }
@container (min-width: 620px) {
  .lessons-soon { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; }
  .lessons-soon__text { justify-items: start; }
  .lessons-soon__misu { height: 160px; }
}

/* ---------------------------------------------------------------- Haladás */
.scale { margin: 0 0 var(--ct-space-5); padding: var(--ct-space-4) var(--ct-space-5); border-radius: var(--ct-radius-lg); background: var(--ct-color-surface-soft); }
.scale__caption { margin-bottom: var(--ct-space-3); font-size: var(--ct-text-sm); font-weight: var(--ct-weight-semibold); color: var(--ct-color-text-muted); }
.scale__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ct-space-3) var(--ct-space-4); margin: 0; padding: 0; list-style: none; }
@container (min-width: 760px) { .scale__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.scale__step { display: grid; gap: var(--ct-space-1); align-content: start; }
.scale__label { font-size: var(--ct-text-xs); font-weight: var(--ct-weight-semibold); line-height: 1.3; }

.meter { --fill: var(--ct-navy-500); display: inline-grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 100px; flex: none; }
.meter__seg { height: 10px; border-radius: 3px; background: var(--ct-color-surface-sunken); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-color-line-strong) 35%, transparent); }
.meter__seg.is-on { background: var(--fill); box-shadow: none; }
.meter--m1 { --fill: var(--ct-navy-200); }
.meter--m2 { --fill: color-mix(in srgb, var(--ct-navy-500) 55%, var(--ct-white)); }
.meter--m3 { --fill: var(--ct-navy-500); }
.meter--m4 { --fill: var(--ct-navy-800); }
.meter--m5 { --fill: var(--ct-color-accent); }

.subjects { display: grid; gap: var(--ct-space-4); }
.subject { display: grid; gap: var(--ct-space-3); }
.subject__head { display: flex; align-items: flex-start; gap: var(--ct-space-4); }
.subject__icon { --tile: var(--ct-color-primary); width: 48px; height: 48px; border-radius: 14px; }
.subject__icon .ico { width: 26px; height: 26px; }
.subject__head .card-title { font-size: var(--ct-text-2xl); }
.subject__paths { list-style: none; margin: var(--ct-space-1) 0 0; padding: 0; font-size: var(--ct-text-sm); }
.subject__summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-2) var(--ct-space-3);
  padding: var(--ct-space-3) var(--ct-space-4); border-radius: var(--ct-radius-md); background: var(--ct-color-bubble);
}
.subject__total { margin: 0; font-weight: var(--ct-weight-bold); }
.subject__stats, .mistake-stats { display: flex; flex-wrap: wrap; gap: var(--ct-space-2); margin: 0; padding: 0; list-style: none; }
.stat {
  display: inline-flex; align-items: center; gap: var(--ct-space-2);
  min-height: 30px; padding: 2px var(--ct-space-3); border-radius: var(--ct-radius-pill);
  background: var(--ct-color-surface); border: var(--ct-border-width) solid var(--ct-color-line);
  font-size: var(--ct-text-sm); font-weight: var(--ct-weight-semibold);
}
.stat::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ct-color-surface-sunken); box-shadow: inset 0 0 0 1px var(--ct-color-line-strong); }
.stat--goes::before, .stat--resolved::before { background: var(--ct-navy-500); box-shadow: none; }
.stat--practising::before, .stat--due::before { background: var(--ct-navy-200); box-shadow: none; }
.stat--later::before { background: var(--ct-color-accent); box-shadow: none; }
.kc-group + .kc-group { margin-top: var(--ct-space-1); }
.kc-group__h { margin: 0; font: inherit; }
.kc-group__toggle {
  display: flex; align-items: center; gap: var(--ct-space-2);
  width: 100%; min-height: 48px; padding: 0 var(--ct-space-2);
  border: 0; border-radius: var(--ct-radius-sm); background: none; cursor: pointer;
  font-weight: var(--ct-weight-bold); text-align: left;
}
.kc-group__toggle:hover { background: var(--ct-color-surface-soft); }
.kc-group__chev { margin-left: auto; color: var(--ct-color-text-muted); transition: transform var(--ct-duration-base) var(--ct-ease-standard); }
.kc-group__toggle[aria-expanded="true"] .kc-group__chev { transform: rotate(180deg); }
.kc-list { list-style: none; margin: 0; padding: 0 0 var(--ct-space-2); }
.kc {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "title title" "meter label";
  align-items: center; gap: var(--ct-space-1) var(--ct-space-3);
  padding: var(--ct-space-3) var(--ct-space-2);
  border-top: var(--ct-border-width) solid var(--ct-color-line);
}
.kc__title { grid-area: title; font-weight: var(--ct-weight-semibold); line-height: 1.35; }
.kc .meter { grid-area: meter; }
.kc__label { grid-area: label; font-size: var(--ct-text-sm); color: var(--ct-color-text); line-height: 1.3; }
.scale__step .meter { width: 100%; max-width: 100px; }
.kc__label--m0 { color: var(--ct-color-text-muted); }
.kc__label--m5 { color: var(--ct-color-accent-text); font-weight: var(--ct-weight-bold); }
@container (min-width: 640px) {
  .kc { grid-template-columns: minmax(0, 1fr) 100px 200px; grid-template-areas: "title meter label"; }
}

/* ---------------------------------------------------------------- Tanár */
.search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-3); margin-bottom: var(--ct-space-3); position: relative; }
.search__icon { position: absolute; left: var(--ct-space-3); top: 12px; color: var(--ct-color-text-muted); pointer-events: none; }
.search__input { flex: 1 1 220px; padding-left: 44px; }
.search .ct-hint { margin: 0; }
.students { list-style: none; margin: 0; padding: 0; }
.students li + li { border-top: var(--ct-border-width) solid var(--ct-color-line); }
.student-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ct-space-3);
  min-height: 68px; padding: var(--ct-space-2); border-radius: var(--ct-radius-md);
  color: var(--ct-color-text); text-decoration: none;
}
.student-row:hover { background: var(--ct-color-surface-soft); color: var(--ct-color-text); }
.student-row__main { display: grid; min-width: 0; }
.student-row__main small { color: var(--ct-color-text-muted); font-size: var(--ct-text-sm); }
.student-row__stat { display: grid; justify-items: center; line-height: 1.1; }
.student-row__stat b { font-family: var(--ct-font-display); font-size: var(--ct-text-xl); font-variant-numeric: tabular-nums; }
.student-row__stat small { font-size: var(--ct-text-xs); color: var(--ct-color-text-muted); }
.student-row__weak { display: none; }
@container (min-width: 760px) {
  .student-row { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; }
  .student-row__weak { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-space-1); }
}
.reports { margin-top: var(--ct-space-4); }
.report { padding: var(--ct-space-3) var(--ct-space-2); border-top: var(--ct-border-width) solid var(--ct-color-line); }
.report__text { margin: 0 0 var(--ct-space-1); }

.student-head { display: flex; align-items: center; gap: var(--ct-space-4); margin: var(--ct-space-3) 0 var(--ct-space-5); }
.student-head h1 { margin: 0; }
.student-head p { margin: var(--ct-space-1) 0 0; }
.student-grid { display: grid; gap: var(--ct-space-5); align-items: start; }
.student-grid__main, .student-grid__side { display: grid; gap: var(--ct-space-4); min-width: 0; }
.student-grid__main > .section-title { margin: 0; }
.student-grid__side { order: -1; }
@container (min-width: 900px) {
  .student-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
  .student-grid__side { order: 0; }
}
.subject--compact { padding: var(--ct-space-4); }
.subject--compact .subject__head .card-title { font-size: var(--ct-text-xl); }
.picker { display: grid; gap: var(--ct-space-3); }
.picker__grid { display: grid; gap: var(--ct-space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.picker .ct-hint:empty { display: none; }
select.ct-input { appearance: auto; padding-right: var(--ct-space-3); }
select.ct-input:disabled { opacity: 0.6; }
.segmented { margin: 0; padding: 0; border: 0; min-width: 0; }
.segmented legend { padding: 0; margin-bottom: var(--ct-space-2); }
.segmented__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ct-space-1); padding: var(--ct-space-1); border-radius: var(--ct-radius-md); background: var(--ct-color-surface-sunken); }
.segmented__opt { position: relative; display: block; }
.segmented__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__opt span {
  display: grid; place-items: center; min-height: 44px; padding: 0 var(--ct-space-2);
  border-radius: var(--ct-radius-sm); font-weight: var(--ct-weight-semibold); text-align: center; line-height: 1.2;
}
.segmented__opt input:checked + span { background: var(--ct-color-surface); color: var(--ct-color-primary); box-shadow: var(--ct-shadow-sm); }
.segmented__opt input:focus-visible + span { outline: var(--ct-focus-width) solid var(--ct-color-focus); outline-offset: 2px; }
.orai-card { background: linear-gradient(170deg, var(--ct-color-accent-soft) 0%, var(--ct-color-surface) 55%); }
.orai-card > .muted { margin: 0 0 var(--ct-space-3); }
.orai-card .ct-hint { margin: var(--ct-space-2) 0 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--ct-space-3); align-items: baseline;
  padding: var(--ct-space-2) 0; border-top: var(--ct-border-width) solid var(--ct-color-line);
  font-size: var(--ct-text-sm);
}
.timeline__when { color: var(--ct-color-text-muted); font-variant-numeric: tabular-nums; }
.timeline__score { font-weight: var(--ct-weight-bold); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- mozgás és nagyítás */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  .tile:hover, .who-tile:hover { transform: none; }
}
@media (forced-colors: active) {
  .grade-chip[aria-current], .segmented__opt input:checked + span { outline: 2px solid CanvasText; }
  .meter__seg.is-on { background: CanvasText; }
}

/* ---------------------------------------------------------------- Edzés (adaptív Feladatgyár-lap) */
.training-card { display: flex; gap: var(--ct-space-4); align-items: center; margin-bottom: var(--ct-space-5); }
.training-card__misu { flex: none; }
.training-card__body { flex: 1; min-width: 0; }
.training-card__body .card-title { margin: 2px 0 6px; }
.training-card .btn-row { margin-top: var(--ct-space-3); flex-wrap: wrap; }
@media (max-width: 599.98px) { .training-card { flex-direction: column; align-items: flex-start; } }