/*
 * «چطور یاد می‌گیری»: the layers at the start, the frames at the end from 1024 px (stacked below). Each frame sits inside
 * the one before, a step smaller and a tone apart, its name on a tag at its head; the chosen one is ringed in the accent
 * and its tag fills; the depth dots of a row say how deep its layer is.
 */

.lly { padding-block: 0 var(--section); }
.lly-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .lly-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 3.4vw, 64px); } }
.lly-side { display: grid; gap: 24px; align-content: start; }

/* the rows: the count, the name and its line, the depth */
.lly-rows { display: grid; gap: 8px; }
.lly-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: var(--radius-tile); background: transparent; border: 1px solid transparent; color: var(--fg); text-align: start;
  transition: background-color var(--d-default) ease, border-color var(--d-default) ease, transform var(--d-press) var(--ease-out); }
.lly-row:active { transform: scale(0.985); }
.lly-row.on { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
.lly-n { display: grid; place-items: center; height: 44px; border-radius: 12px; background: var(--surface-muted); font-size: var(--text-title-2); line-height: 1; font-weight: 800; transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.lly-row.on .lly-n { background: var(--accent); color: var(--on-accent); }
.lly-rt { display: grid; gap: 2px; min-width: 0; }
.lly-rt b { font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 800; }
.lly-rt span { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.lly-depth { display: flex; gap: 3px; }
.lly-depth i { width: 5px; height: 14px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.lly-depth i.in { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.lly-row.on .lly-depth i.in { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .lly-row:not(.on):hover { background: color-mix(in srgb, var(--surface) 60%, transparent); } }

/* the frames, one inside another */
.lly-zoom { padding: clamp(10px, 1.4vw, 16px); border-radius: calc(var(--radius-card) + 6px); background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.lly-f { --pad: clamp(10px, 1.5vw, 18px); display: grid; gap: 12px; padding: var(--pad); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); cursor: pointer;
  transition: border-color var(--d-default) ease, box-shadow var(--d-default) ease, background-color var(--d-default) ease; }
.lly-f .lly-f { border-radius: calc(var(--radius-card) - 6px); background: var(--surface-muted); }
.lly-f .lly-f .lly-f { background: var(--surface); }
.lly-f .lly-f .lly-f .lly-f { background: var(--surface-muted); }
.lly-f .lly-f .lly-f .lly-f .lly-f { background: var(--surface); cursor: default; }
.lly-f.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lly-fh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lly-fh b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: 800; }
.lly-fh small { margin-inline-start: auto; flex: none; color: var(--fg-muted); font-size: var(--text-label); font-weight: 600; }
.lly-tag { flex: none; padding: 3px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg-muted); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 700; transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.lly-f.on > .lly-fh .lly-tag { background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .lly-f:not(.on):hover { border-color: var(--line-strong); } }

/* the siblings of the open one: the other courses, the chapters by number; the session's steps */
.lly-sibs { display: flex; flex-wrap: wrap; gap: 6px; }
.lly-sibs span { padding: 4px 10px; border-radius: var(--radius-pill); border: 1px dashed var(--line-strong); color: var(--fg-muted); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 600; }
.lly-sibs span.in { border-style: solid; border-color: var(--fg); color: var(--fg); }
.lly-sibs.nums span { display: grid; place-items: center; min-width: 30px; padding-inline: 0; }
.lly-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.lly-steps li { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg-muted); }
.lly-steps li.past { background: var(--success-soft); color: var(--success-ink); }
.lly-steps li.in { background: var(--accent); color: var(--on-accent); }
.lly-steps .i { width: 16px; height: 16px; }

.lly-piano { --mpiano-h: 120px; }
.lly-said { min-height: 1.6em; color: var(--fg-muted); font-size: var(--text-footnote); font-weight: 700; }
.lly-said.ok { color: var(--success-ink); }
/*
 * «هر جلسه چی داره؟»: the kinds at the start, the session's card at the end from 1024 px (stacked below). The card is
 * the app's glass: its step chip and the bar of steps at the top, every step drawn in one cell (the tallest holds the
 * height), the way back and on at the foot. A step comes in from a visible shape: a fade, a few pixels, a blur.
 */

.lss { padding-block: 0 var(--section); }
.lss-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .lss-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 3.4vw, 64px); } }
.lss-side { display: grid; gap: 24px; align-content: start; }

/* the kinds */
.lss-kinds { display: grid; gap: 6px; }
.lss-kind { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: var(--radius-tile); border: 1px solid transparent; background: transparent; color: var(--fg); text-align: start;
  transition: background-color var(--d-default) ease, border-color var(--d-default) ease, transform var(--d-press) var(--ease-out); }
.lss-kind:active { transform: scale(0.985); }
.lss-kind.on { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); }
.lss-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-muted); color: var(--fg-muted); transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.lss-ico .i { width: 22px; height: 22px; }
.lss-kind.past .lss-ico { background: var(--success-soft); color: var(--success-ink); }
.lss-kind.on .lss-ico { background: var(--accent); color: var(--on-accent); }
.lss-kt { display: grid; gap: 2px; }
.lss-kt b { font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 800; }
.lss-kt span { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
@media (hover: hover) and (pointer: fine) { .lss-kind:not(.on):hover { background: color-mix(in srgb, var(--surface) 60%, transparent); } }

/* the card */
.lss-card { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 30px); border-radius: var(--radius-card); background: var(--glass-strong); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.lss-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.lss-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 800; }
.lss-chip .i { width: 15px; height: 15px; }
.lss-of { color: var(--fg-muted); font-size: var(--text-label); font-weight: 700; }
.lss-bar { display: flex; gap: 5px; margin-inline-start: auto; }
.lss-bar i { position: relative; width: 28px; height: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 9%, transparent); overflow: hidden; }
.lss-bar i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); scale: 0 1; transform-origin: 100% 50%; transition: scale var(--d-media) var(--ease-out); }
.lss-bar i.done::after { scale: 1 1; }
.lss-bar i.now::after { scale: 0.45 1; }

.lss-bodies { display: grid; }
.lss-body { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; translate: 0 6px; filter: blur(3px); transition: opacity 260ms var(--ease-out), translate 260ms var(--ease-out), filter 260ms var(--ease-out), visibility 0s 260ms; }
.lss-body.on { visibility: visible; opacity: 1; translate: 0 0; filter: none; transition: opacity 260ms var(--ease-out), translate 260ms var(--ease-out), filter 260ms var(--ease-out), visibility 0s; }
.lss-step { display: grid; gap: 14px; align-content: start; }
.lss-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.lss-ask { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; text-wrap: balance; }
.lss-piano { padding: 10px 10px 8px; border-radius: var(--radius-tile); background: var(--surface-muted); border: 1px solid var(--line); }
.lss-staff { padding: 6px 12px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); }
.lss-staff svg { display: block; width: 100%; height: auto; }
.lss-step .lcard-img { aspect-ratio: 16 / 9; }
.lss-said { display: flex; align-items: center; gap: 8px; min-height: 1.6em; color: var(--fg-muted); font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: 700; }
.lss-said.ok { color: var(--success-ink); }
.lss-said.no { color: var(--danger-ink); }
.lss-dots { display: flex; gap: 6px; }
.lss-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background-color var(--d-default) ease, border-color var(--d-default) ease, scale var(--d-press) var(--ease-out); }
.lss-dots i.on { background: var(--success); border-color: var(--success); scale: 1.1; }
.lss-again.off, .lss-prev.off { visibility: hidden; }

/* the quiz */
.lss-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lss-opt { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); color: var(--fg); font-size: var(--text-title-3); font-weight: 800;
  transition: background-color var(--d-default) ease, border-color var(--d-default) ease, color var(--d-default) ease, opacity var(--d-default) ease, transform var(--d-press) var(--ease-out); }
.lss-opt:active:not(:disabled) { transform: scale(0.97); }
.lss-opt:disabled { opacity: 0.5; }
.lss-opt.right { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.lss-opt.wrong { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); }
.lss-opt .i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .lss-opt:not(:disabled):not(.right):not(.wrong):hover { border-color: var(--line-strong); } }
.lss-why { display: grid; gap: 6px; justify-items: start; padding: 14px 16px; border-radius: var(--radius-tile); background: var(--surface-muted); border: 1px solid transparent; opacity: 0; transition: opacity var(--d-default) var(--ease-out), border-color var(--d-default) ease; }
.lss-why.on { opacity: 1; }
.lss-why:not(.on) { visibility: hidden; }
.lss-why.on.ok { border-color: var(--success); }
.lss-why.on.no { border-color: var(--danger); }
.lss-why b { font-size: var(--text-headline); font-weight: 800; }
.lss-why.ok b { color: var(--success-ink); }
.lss-why.no b { color: var(--danger-ink); }
.lss-why span { color: var(--fg-muted); font-size: var(--text-callout); line-height: var(--lh-callout); }

.lss-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); padding-block-start: 16px; }
@media (prefers-reduced-motion: reduce) { .lss-body { translate: none; filter: none; } }
/*
 * «ستاره ها و قفل»: the stars' legend at the start, the course at the end from 1024 px. A chapter row: its number (a
 * check when done, a lock when locked), its name and state, its stars or its way in; a locked row opens the app's
 * question under it with its own height (grid rows 0fr → 1fr), a freed one's lock opens.
 */

.lst { padding-block: 0 var(--section); }
.lst-grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1024px) { .lst-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 3.4vw, 64px); } }
.lst-side { display: grid; gap: 24px; align-content: start; }

.lst-legend { display: grid; gap: 10px; }
.lst-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); }
.lst-lico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--reward-soft); color: var(--reward-ink); }
.lst-lico .i { width: 22px; height: 22px; }
.lst-lt { display: grid; gap: 4px; }
.lst-lt b { font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 800; }

.lst-stars { display: inline-flex; gap: 2px; }
.lst-stars .i { width: 18px; height: 18px; color: color-mix(in srgb, var(--fg) 16%, transparent); }
.lst-stars .i.on { color: var(--reward); }
.lst-stars .i.wait { color: color-mix(in srgb, var(--reward) 38%, transparent); animation: lst-wait 1.8s var(--ease-out) infinite; }
@keyframes lst-wait { 50% { opacity: 0.45; } }

/* the course */
.lst-course { display: grid; gap: 12px; padding: clamp(16px, 2.2vw, 26px); border-radius: var(--radius-card); background: var(--glass-strong); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.lst-head { display: flex; align-items: center; gap: 10px; padding-inline: 4px; font-size: var(--text-title-3); font-weight: 800; }
.lst-head .i { width: 22px; height: 22px; color: var(--accent); }
.lst-list { display: grid; gap: 8px; }
.lst-ch { border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); transition: border-color var(--d-default) ease, background-color var(--d-default) ease; }
.lst-ch.locked { background: color-mix(in srgb, var(--surface) 55%, transparent); border-style: dashed; }
.lst-ch.open { border-color: var(--accent); }
.lst-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: transparent; border: 0; color: var(--fg); text-align: start; cursor: default; transition: transform var(--d-press) var(--ease-out); }
.lst-ch.locked .lst-row { cursor: pointer; }
.lst-ch.locked .lst-row:active { transform: scale(0.99); }
.lst-no { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-muted); color: var(--fg-muted); font-weight: 800; transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.lst-no .i { width: 18px; height: 18px; }
.lst-ch.done .lst-no { background: var(--success-soft); color: var(--success-ink); }
.lst-ch.open .lst-no { background: var(--accent); color: var(--on-accent); }
.lst-ch.freed .lst-no .i { animation: lst-free 420ms var(--ease-out); }
@keyframes lst-free { from { scale: 0.7; rotate: -12deg; opacity: 0.4; } }
.lst-t { display: grid; gap: 1px; min-width: 0; }
.lst-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: 800; }
.lst-t small { color: var(--fg-muted); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 600; }
.lst-ch.locked .lst-t b { color: var(--fg-muted); }
.lst-state { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--fg-muted); transition: rotate var(--d-default) var(--ease-out), background-color var(--d-default) ease; }
.lst-state .i { width: 16px; height: 16px; }
.lst-ch.open .lst-state { background: var(--accent-soft); color: var(--accent-ink); }
.lst-ch.asking .lst-state { rotate: 180deg; }
@media (hover: hover) and (pointer: fine) { .lst-ch.locked:hover { border-color: var(--line-strong); } }

/* the app's question, opening with its own height */
.lst-ask { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-enter) var(--ease-out); }
.lst-ch.asking .lst-ask { grid-template-rows: 1fr; }
.lst-ask > div { display: grid; gap: 8px; min-height: 0; overflow: hidden; padding-inline: 60px 14px; }
.lst-ch.asking .lst-ask > div { padding-block-end: 14px; }
.lst-ask b { font-size: var(--text-headline); font-weight: 800; }
.lst-ask p { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.lst-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.lst-said { min-height: 1.4em; padding-inline: 4px; color: var(--success-ink); font-size: var(--text-footnote); font-weight: 700; opacity: 0; transition: opacity var(--d-default) ease; }
.lst-said.on { opacity: 1; }
@media (max-width: 519px) { .lst-ask > div { padding-inline: 14px; } }
@media (prefers-reduced-motion: reduce) { .lst-stars .i.wait, .lst-ch.freed .lst-no .i { animation: none; } }