/*
 * «از کجا شروع کنم؟» (edits 17–18; in design). Edit 18: the site's frame, nothing centred — the head at the start; the
 * question card (the answers stacked as rows) and beside it «جواب های تو». One height for the card, so a question with
 * four answers or the suggestion never moves the page.
 */

.plc { padding-block: 0 var(--section); }
.plc-body { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1024px) { .plc-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; } }

/* the card: the step and its bar, the question, the answers one under another */
.plc-card { display: grid; gap: 22px; align-content: start; padding: clamp(20px, 2.6vw, 36px); 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); outline-offset: 4px; }
@media (min-width: 1024px) { .plc-card { min-height: 548px; } }
.plc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plc-step { color: var(--fg-muted); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 700; }
.plc-steps { display: flex; gap: 6px; }
.plc-steps span { position: relative; width: 36px; height: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 9%, transparent); overflow: hidden; }
.plc-steps span::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); scale: 0 1; transform-origin: 100% 50%; /* fills from the start, the right */ transition: scale var(--d-media) var(--ease-out); }
.plc-steps span.done::after { scale: 1 1; }
.plc-steps span.now:not(.done)::after { scale: 0.35 1; }

.plc-q { display: grid; gap: 18px; align-content: start; transition: opacity 320ms var(--ease-out), translate 320ms var(--ease-out), filter 320ms var(--ease-out); }
@starting-style { .plc-q { opacity: 0; translate: 0 8px; filter: blur(3px); } }
.plc-ask { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: 800; text-wrap: balance; }
.plc-opts { display: grid; gap: 10px; }
.plc-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; padding-inline-start: 12px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); color: var(--fg); text-align: start; font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 700;
  transition: border-color var(--d-default) ease, background-color var(--d-default) ease, box-shadow var(--d-default) ease, transform var(--d-press) var(--ease-out);
  animation: plc-in 360ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes plc-in { from { opacity: 0; translate: 0 6px; } }
.plc-opt:active { transform: scale(0.985); }
.plc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-muted); color: var(--fg-muted); transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.plc-ico .i { width: 20px; height: 20px; }
.plc-key { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--line); color: var(--fg-faint); font: 700 var(--text-caption) / 1 var(--font-sans); }
.plc-radio { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); border: 1.5px solid color-mix(in srgb, var(--fg) 24%, transparent); color: var(--on-accent); transition: background-color var(--d-default) ease, border-color var(--d-default) ease; }
.plc-radio .i { width: 14px; height: 14px; opacity: 0; scale: 0.6; transition: opacity var(--d-default) ease, scale var(--d-default) var(--ease-out); }
.plc-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.plc-opt.on .plc-ico { background: var(--accent); color: var(--on-accent); }
.plc-opt.on .plc-radio { background: var(--accent); border-color: var(--accent); }
.plc-opt.on .plc-radio .i { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .plc-opt:hover { border-color: color-mix(in srgb, var(--fg) 22%, transparent); box-shadow: var(--shadow-tile); }
  .plc-opt:hover .plc-ico { color: var(--fg); }
  .plc-opt:hover .plc-radio { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
  .plc-opt.on:hover { border-color: var(--accent); }
}
@media (hover: none) { .plc-key, .plc-hint { display: none; } }
.plc-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plc-back { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--fg-muted); font-size: var(--text-subhead); font-weight: 600; transition: background-color var(--d-default) ease, color var(--d-default) ease, transform var(--d-press) var(--ease-out); }
.plc-back .i { width: 16px; height: 16px; }
.plc-back:active { transform: scale(0.97); }
.plc-back:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .plc-back:not(:disabled):hover { background: var(--surface-muted); color: var(--fg); } }
.plc-hint { color: var(--fg-faint); font-size: var(--text-label); line-height: var(--lh-label); }

/* the suggestion, in the same card */
.plc-res { justify-items: start; gap: 14px; }
.plc-reco-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); }
.plc-reco-ico .i { width: 26px; height: 26px; }
.plc-course { color: var(--fg-muted); font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 700; margin-top: -8px; }
.plc-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plc-facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface-muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); font-weight: 600; }
.plc-facts .i { width: 18px; height: 18px; color: var(--fg-muted); }
.plc-goal { max-width: 36rem; padding: 14px 16px; border-inline-start: 3px solid var(--accent); border-start-end-radius: 12px; border-end-end-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 40%, transparent); font-size: var(--text-callout); line-height: var(--lh-callout); }
.plc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }

/* «جواب های تو»: one row a question, filled as it is answered; a row takes the learner back to its question */
.plc-side { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface-muted) 70%, transparent); border: 1px solid var(--line); }
@media (min-width: 1024px) { .plc-side { position: sticky; top: 112px; } }
.plc-side-title { font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 800; }
.plc-ans { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plc-row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); text-align: start; transition: border-color var(--d-default) ease, box-shadow var(--d-default) ease, transform var(--d-press) var(--ease-out); }
.plc-row:active:not(:disabled) { transform: scale(0.985); }
.plc-row:disabled { background: transparent; border-style: dashed; cursor: default; }
.plc-row.now { border-color: color-mix(in srgb, var(--fg) 40%, transparent); border-style: solid; }
.plc-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--fg-muted); font-size: var(--text-caption); font-weight: 700; transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.plc-row.set .plc-n { background: var(--accent-soft); color: var(--accent-ink); }
.plc-row-t { display: grid; min-width: 0; }
.plc-row-t small { color: var(--fg-faint); font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: 600; }
.plc-row-t b { font-size: var(--text-subhead); line-height: var(--lh-subhead); font-weight: 700; }
.plc-row:disabled b { color: var(--fg-faint); font-weight: 600; }
.plc-edit { width: 16px; height: 16px; color: var(--fg-faint); transition: opacity var(--d-default) ease, color var(--d-default) ease; }
@media (hover: hover) and (pointer: fine) {
  .plc-edit { opacity: 0; }
  .plc-row:not(:disabled):hover { border-color: color-mix(in srgb, var(--fg) 22%, transparent); box-shadow: var(--shadow-tile); }
  .plc-row:hover .plc-edit { opacity: 1; color: var(--fg-muted); }
}
.plc-note { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); text-wrap: pretty; }
.plc-note b { color: var(--fg); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .plc-opt { animation: none; } .plc-q { transition: none; } }
/* «مسیر آموزش» (edits 17–19; in design): five stations on a line beside a growing figure; the chosen level's courses on
   their pictures under it. */

.pth { padding-block: 0 var(--section); }
.pth-stats { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 6px 0 0; padding: 0; list-style: none; }
.pth-stats li { display: flex; align-items: baseline; gap: 6px; }
.pth-stats li + li { padding-inline-start: 30px; border-inline-start: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); }
.pth-stats b { font-size: var(--text-title-1); line-height: 1.2; font-weight: 800; color: var(--accent-ink); }
.pth-stats span { color: var(--fg-muted); font-size: var(--text-subhead); font-weight: 600; }

/* the top: the stations, the level's line and its piece (start) | the figure that grows level by level (end) */
.pth-top { display: grid; gap: 24px; }
@media (min-width: 1024px) { .pth-top { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px; align-items: stretch; } }
.pth-side { display: grid; gap: 22px; align-content: start; }
.pth-sum { display: grid; gap: 16px; transition: opacity var(--d-enter) var(--ease-out), translate var(--d-enter) var(--ease-out), filter var(--d-enter) var(--ease-out); }
@starting-style { .pth-sum { opacity: 0; translate: 0 8px; filter: blur(3px); } }
.pth-grow { position: relative; margin: 0; min-height: 340px; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; background: var(--night-card-bottom); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); }
@media (max-width: 1023px) { .pth-grow { aspect-ratio: 4 / 3; min-height: 0; } }
.pth-grow img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.05; filter: blur(6px); transition: opacity 600ms var(--ease-out), scale 900ms var(--ease-out), filter 600ms var(--ease-out); }
.pth-grow img.on { opacity: 1; scale: 1; filter: blur(0); }
.pth-grow::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, var(--night-shade-bottom) 100%); }
.pth-grow figcaption { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 2px; padding: 20px 22px; color: var(--white); }
.pth-grow small { color: var(--white-70); font-size: var(--text-label); font-weight: 700; }
.pth-grow b { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: 800; transition: opacity var(--d-enter) var(--ease-out), translate var(--d-enter) var(--ease-out); }
@starting-style { .pth-grow b { opacity: 0; translate: 0 6px; } }
.pth-grow span { color: var(--white-70); font-size: var(--text-footnote); line-height: var(--lh-footnote); }

/* the map: a line through five stations, filled up to the chosen one (from the start, the right) */
.pth-map { position: relative; padding: 4px 0; }
.pth-line { position: absolute; inset-inline: 10%; top: 31px; height: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--fg) 9%, transparent); overflow: hidden; }
.pth-line span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transform-origin: 100% 50%; scale: var(--at, 0) 1; transition: scale var(--d-media) var(--ease-out); }
.pth-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pth-stop { display: grid; justify-items: center; gap: 8px; width: 100%; padding: 4px 4px 8px; text-align: center; border-radius: 16px; transition: transform var(--d-press) var(--ease-out); }
.pth-stop:active { transform: scale(0.97); }
.pth-dot { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--edge-strong); color: var(--fg-muted); font-size: var(--text-title-3); font-weight: 800; box-shadow: var(--shadow-tile); transition: background-color var(--d-default) ease, color var(--d-default) ease, border-color var(--d-default) ease, box-shadow var(--d-enter) var(--ease-out), translate var(--d-default) var(--ease-out); }
.pth-stop.planned .pth-dot { border-style: dashed; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.pth-stop.past .pth-dot { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--edge-strong); }
.pth-stop.on .pth-dot { background: linear-gradient(135deg, var(--main-light-from), var(--accent-deep)); color: var(--on-accent); border-color: transparent; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-tile-hover); }
.pth-name { font-size: var(--text-subhead); line-height: var(--lh-subhead); font-weight: 700; color: var(--fg-muted); transition: color var(--d-default) ease; text-wrap: balance; }
.pth-stop.on .pth-name { color: var(--fg); }
.pth-stop small { color: var(--fg-faint); font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .pth-stop:hover .pth-dot { translate: 0 -3px; border-color: var(--accent); } .pth-stop:hover .pth-name { color: var(--fg); } }
@media (max-width: 559px) { .pth-dot { width: 46px; height: 46px; font-size: var(--text-headline); } .pth-line { top: 25px; } .pth-name { font-size: var(--text-caption); line-height: var(--lh-caption); } .pth-stop small { display: none; } }

/* the chosen level: comes in fresh (keyed) */
.pth-panel { display: grid; gap: 18px; min-width: 0; transition: opacity var(--d-enter) var(--ease-out), translate var(--d-enter) var(--ease-out), filter var(--d-enter) var(--ease-out); }
@starting-style { .pth-panel { opacity: 0; translate: 0 10px; filter: blur(3px); } }
.pth-caption { font-size: var(--text-lead); line-height: var(--lh-lead); font-weight: 600; text-wrap: balance; max-width: 48rem; }
.pth-courses { display: grid; gap: 16px; }
@media (min-width: 900px) { .pth-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* a course (edit 18): a dark card in both themes — its number large, its title, its chapters as a timeline */
/* edit 19: on its picture under a dark layer, light at the top where the number stands, dark under the chapters */
.pth-course { position: relative; display: grid; align-content: start; gap: 16px; padding: 22px; border-radius: var(--radius-card); color: var(--white); overflow: hidden; isolation: isolate;
  background: var(--night-card-bottom);
  border: 1px solid var(--white-8); box-shadow: inset 0 1px 0 var(--white-8), var(--shadow-tile);
  transition: translate var(--d-default) var(--ease-out), border-color var(--d-default) ease, box-shadow var(--d-enter) var(--ease-out), opacity var(--d-enter) var(--ease-out); transition-delay: 0s, 0s, 0s, calc(var(--i, 0) * 60ms); }
@starting-style { .pth-course { opacity: 0; } }
.pth-cimg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: scale var(--d-media) var(--ease-out); }
.pth-course::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--night-shade-top) 0%, var(--night-shade-bottom) 46%); }
.pth-no { text-shadow: 0 2px 16px var(--black-55); }
.pth-course header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pth-no { display: grid; font-size: 3.25rem; line-height: 1; font-weight: 800; color: var(--white); } /* a number: never spaced (edit 8) */
.pth-no small { margin-bottom: 6px; color: var(--white-60); font-size: var(--text-label); line-height: var(--lh-label); font-weight: 700; }
.pth-count { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--white-8); border: 1px solid var(--white-10); color: var(--white-70); font-size: var(--text-label); font-weight: 700; white-space: nowrap; }
.pth-ctitle { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--white-8); }
.pth-cico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--white-8); border: 1px solid var(--white-10); color: var(--white); flex: none; }
.pth-cico .i { width: 20px; height: 20px; }
.pth-ctitle b { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.pth-chapters { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pth-chapters li { position: relative; display: flex; align-items: center; gap: 14px; padding: 7px 0; color: var(--white-70); font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: 600; }
.pth-chapters li span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill); background: var(--night-card-bottom); border: 1.5px solid var(--white-18); color: var(--white); font-size: var(--text-subhead); font-weight: 800; flex: none; transition: background-color var(--d-default) ease, color var(--d-default) ease, border-color var(--d-default) ease; }
.pth-chapters li + li::before { content: ''; position: absolute; inset-inline-start: 15px; top: -14px; height: 28px; width: 2px; background: var(--white-12); }
@media (hover: hover) and (pointer: fine) {
  .pth-course:hover { translate: 0 -3px; border-color: var(--white-15); box-shadow: inset 0 1px 0 var(--white-10), var(--shadow-tile-hover); }
  .pth-course:hover .pth-chapters li span { border-color: var(--white-30); }
  .pth-course:hover .pth-cimg { scale: 1.05; }
  .pth-chapters li:hover { color: var(--white); }
}
.pth-planned { color: var(--fg-muted); font-size: var(--text-callout); }

/* the piece that ends the level (edit 18: neutral glass, not yellow) */
.pth-end { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--radius-card); background: var(--glass); border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); box-shadow: inset 0 1px 0 var(--white-60), var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
[data-theme='dark'] .pth-end { box-shadow: inset 0 1px 0 var(--white-8), var(--shadow-tile); }
.pth-trophy { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 6%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); flex: none; }
.pth-trophy .i { width: 22px; height: 22px; }
.pth-end small { display: block; color: var(--fg-muted); font-size: var(--text-label); font-weight: 700; }
.pth-end b { display: block; font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }

.pth-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pth-foot > span { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: var(--text-subhead); font-weight: 600; }
.pth-foot > span .i { width: 18px; height: 18px; color: var(--accent); }