/*
 * «چطور یاد می‌گیری»: the seven stages as a track of cards joined by a line (a row of seven from 1200 px, a row that
 * scrolls below it), each its number, icon, name and goal; the player's ways as a grid of six under it.
 */

.plr { padding-block: 0 var(--section); }
.plr-stages { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: 12px; overflow-x: auto; scrollbar-width: none; padding-block: 4px 8px; scroll-snap-type: inline mandatory; }
.plr-stages::-webkit-scrollbar { display: none; }
.plr-stages::before { content: ''; position: absolute; inset-inline: 24px; inset-block-start: 26px; border-block-start: 1px dashed var(--line-strong); }
.plr-stage { position: relative; display: grid; align-content: start; justify-items: start; gap: 8px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); scroll-snap-align: start; }
.plr-no { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: var(--text-label); font-weight: 800; }
.plr-stage:last-child .plr-no { background: var(--reward); }
.plr-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.plr-ico .i { width: 22px; height: 22px; }
.plr-stage b { font-size: var(--text-headline); line-height: var(--lh-headline); font-weight: 800; }
.plr-stage > span:not(.plr-no):not(.plr-ico) { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.plr-stage small { padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-muted); font-size: var(--text-label); font-weight: 700; }

.plr-ways { display: grid; gap: 12px; }
.plr-wt { color: var(--fg-muted); font-size: var(--text-label); font-weight: 800; }
.plr-ways ul { display: grid; gap: 12px; }
@media (min-width: 640px) { .plr-ways ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plr-ways ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plr-ways li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--radius-tile); background: var(--surface-muted); }
.plr-wico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface); color: var(--fg); }
.plr-wico .i { width: 19px; height: 19px; }
.plr-ways li > span:last-child { display: grid; gap: 2px; }
.plr-ways b { font-size: var(--text-callout); font-weight: 800; }
.plr-ways li > span:last-child > span { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
/*
 * «درباره این قطعه»: the story in a reading column at the start, the three cards of what the notes say at the end
 * from 1024 px. The time card shows its number large, marked as an estimate.
 */

.pab { padding-block: 0 var(--section); }
.pab-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .pab-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 3.4vw, 56px); } }
.pab-story { display: grid; justify-items: start; gap: 16px; max-width: 44rem; }
.pab-story > p:not(.pab-tip) { font-size: var(--text-paragraph); line-height: var(--lh-paragraph); }
/* what else the CMS's editor lets into a story (Story.tsx): a heading, lists, a quote, a picture, a «برو» card, a link */
.pab-h { margin-top: 8px; font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: 800; }
.pab-list { display: grid; gap: 8px; padding-inline-start: 1.4em; font-size: var(--text-paragraph); line-height: var(--lh-paragraph); list-style: disc; }
.pab-ol { list-style: decimal; }
.pab-list .pab-list { margin-top: 8px; }
.pab-quote { display: grid; gap: 8px; padding-inline-start: 18px; border-inline-start: 3px solid var(--accent); color: var(--fg-muted); font-size: var(--text-paragraph); line-height: var(--lh-paragraph); }
.pab-fig { display: grid; gap: 10px; width: 100%; }
.pab-fig img { width: 100%; height: auto; border-radius: var(--radius-tile); box-shadow: var(--shadow-tile); }
.pab-fig figcaption { color: var(--fg-faint); font-size: var(--text-label); line-height: var(--lh-label); text-align: center; }
.pab-a { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.pab-a:focus-visible, .pab-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pab-go { display: flex; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; border-radius: var(--radius-tile); color: var(--fg); text-decoration: none; background: var(--surface); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); }
.pab-go:active { scale: 0.99; }
.pab-go .i { flex: none; width: 22px; height: 22px; color: var(--accent-ink); }
.pab-go span { display: grid; gap: 2px; color: var(--fg-muted); font-size: var(--text-label); line-height: var(--lh-label); }
.pab-go small { color: var(--fg-faint); font-size: var(--text-caption); font-weight: 800; }
.pab-go b { color: var(--fg); font-size: var(--text-callout); font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .pab-a:hover { text-decoration-thickness: 2px; } .pab-go:hover { border-color: var(--edge-strong); } }
.pab-tip { display: flex; gap: 10px; padding: 14px 16px; border-radius: var(--radius-tile); background: var(--reward-soft); font-size: var(--text-callout); line-height: var(--lh-callout); }
.pab-tip .i { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--reward-ink); }
.pab-tip b { color: var(--reward-ink); }
.pab-side { display: grid; gap: 12px; }
.pab-card { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.pab-card small { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-muted); font-size: var(--text-label); font-weight: 800; }
.pab-card small i { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-muted); font-style: normal; font-weight: 700; }
.pab-card ul { display: grid; gap: 6px; }
.pab-card li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: 600; }
.pab-card li .i { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--success); }
.pab-card p { font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.pab-card.time b { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: 800; }