/* The Plus showcase (billing/showcase.py): the «پلاس» chip on locked items in lists, the preview sheet
   (static/js/preview-sheet.js), the progress teasers, the money-back box and the /pricing/inside/ + /free/ pages.
   Loaded on every page (base.html) because the chip and the sheet appear in many lists. Tokens only (app.css), so light
   and dark follow the theme; logical properties only (RTL). */

/* ---- the «پلاس» chip -------------------------------------------------------------------------------------------- */
.plus-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 7px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.7; white-space: nowrap; vertical-align: middle;
  color: #6a4300; background: color-mix(in srgb, var(--saffron) 34%, var(--card)); }
.plus-chip .ic { inline-size: 12px; block-size: 12px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plus-chip { color: var(--saffron); background: color-mix(in srgb, var(--saffron) 16%, var(--card)); }
}
:root[data-theme="dark"] .plus-chip { color: var(--saffron); background: color-mix(in srgb, var(--saffron) 16%, var(--card)); }

/* ---- the preview sheet: a modal <dialog>, a bottom sheet on phones and a centred card from 720px ---------------- */
dialog.pv-sheet { position: fixed; inset: auto 0 0; margin: 0 auto; padding: 0; border: 0; color: var(--ink);
  inline-size: min(100%, 560px); max-block-size: calc(100dvh - var(--safe-t) - 24px); overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--card); box-shadow: var(--e3); }
dialog.pv-sheet[open] { display: flex; flex-direction: column; }
dialog.pv-sheet::backdrop { background: var(--scrim); }
.pv-sheet .pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 0 8px; }
.pv-sheet .pv-grab { inline-size: 36px; block-size: 5px; border-radius: 3px; background: var(--hair); margin-inline: auto; }
.pv-sheet .pv-close { inline-size: 44px; block-size: 44px; display: inline-grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; font-size: 1.25rem; }
.pv-sheet .pv-close:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pv-sheet .pv-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(20px + var(--safe-b)); }
.pv-loading { padding: 32px 0; text-align: center; color: var(--ink-2); }
@media (min-width: 720px) {
  dialog.pv-sheet { inset: 0; margin: auto; block-size: fit-content; border-radius: var(--r-xl); box-shadow: var(--e2); }
  .pv-sheet .pv-grab { visibility: hidden; }
  .pv-sheet .pv-body { padding-block-end: 22px; }
}
html[data-motion]:not([data-motion="0"]) dialog.pv-sheet[open] { animation: pv-rise var(--dur-3) var(--spring); }
html[data-motion]:not([data-motion="0"]) dialog.pv-sheet[open]::backdrop { animation: pv-fade var(--dur-2) var(--ease-std); }
@media (min-width: 720px) { html[data-motion]:not([data-motion="0"]) dialog.pv-sheet[open] { animation: pv-pop var(--dur-2) var(--ease-out); } }
@media (prefers-reduced-motion: reduce) {
  html[data-motion] dialog.pv-sheet[open] { animation: pv-fade var(--dur-2) ease !important; }
}
@keyframes pv-rise { from { transform: translateY(100%); } }
@keyframes pv-pop { from { opacity: 0; transform: scale(0.96); } }
@keyframes pv-fade { from { opacity: 0; } }

/* the preview itself (also on billing/preview.html) */
.pv { display: grid; gap: 12px; }
.pv-head { display: grid; gap: 6px; }
.pv-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pv-title { font-size: var(--fs-lg); line-height: var(--lh-title); }
.pv-sum { color: var(--ink-2); }
.pv-box { padding: 14px 16px; border-radius: var(--r-md); background: var(--paper-2); display: grid; gap: 6px; }
.pv-box h3 { font-size: var(--fs-md); }
.pv-kicker { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2); }
.pv-q { font-family: var(--f-body); }
.pv-q .pv-ctx { font-size: var(--fs-sm); color: var(--ink-2); font-style: italic; }
.pv-q .pv-ins { font-size: var(--fs-sm); color: var(--ink-2); }
.pv-opts { margin: 0; padding-inline-start: 20px; display: grid; gap: 2px; }
.pv-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-words li { display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--r-md); background: var(--paper-2); }
.pv-rest { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--ink); }
.pv-rest .ic { flex: none; color: #8a5a00; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-actions .btn { flex: 1 1 200px; }
.pv-foot { margin: 0; }
.pv-page { padding: 20px; }

/* ---- progress teasers (lesson end, dashboard, test result) ------------------------------------------------------- */
.plus-teaser { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--saffron) 12%, var(--card)); text-align: start; }
.plus-teaser > .ic { flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 2px; color: #8a5a00; }
.plus-teaser p { margin: 0; }
.plus-teaser .row { margin-block-start: 8px; gap: 8px; }
.plus-teaser .bar { margin-block: 6px 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plus-teaser > .ic, :root:not([data-theme="light"]) .pv-rest .ic { color: var(--saffron); } }
:root[data-theme="dark"] .plus-teaser > .ic, :root[data-theme="dark"] .pv-rest .ic { color: var(--saffron); }

/* ---- money-back box (receipt) ------------------------------------------------------------------------------------ */
.mb-box { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-md); background: var(--paper-2); text-align: start; }
.mb-box textarea { inline-size: 100%; font-size: 16px; }
.mb-box details summary { cursor: pointer; font-weight: 600; }

/* ---- /pricing/inside/ and /free/ ------------------------------------------------------------------------------- */
.sc { display: grid; gap: 28px; max-inline-size: 1040px; }
.sc-hero { display: grid; gap: 12px; padding-block: 8px 4px; }
.sc-kicker { font-size: var(--fs-sm); font-weight: 700; color: var(--indigo); }
.sc-hero h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-title); }
.sc-lead { font-size: var(--fs-md); color: var(--ink); max-inline-size: 60ch; }
.sc-entry, .sc-have, .sc-guarantee { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.sc-entry { padding: 10px 14px; border-radius: var(--r-md); background: var(--tint); }
.sc-entry .ic, .sc-have .ic, .sc-guarantee .ic { flex: none; margin-block-start: 4px; }
.sc-guarantee { font-size: var(--fs-sm); color: var(--ink-2); }
.sc-price { margin: 0; }
.sc-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-tabs { justify-self: start; }
.sc-tabs a { gap: 6px; }
.sc-tabs .ic { inline-size: 16px; block-size: 16px; }

.sc-strip { display: grid; gap: 8px; }
.sc-strip-h { margin: 0; font-weight: 600; color: var(--ink-2); font-size: var(--fs-sm); }
.sc-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.sc-strip a { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1);
  text-decoration: none; color: var(--ink); min-block-size: 44px; }
.sc-strip b { font-family: var(--f-display); font-size: var(--fs-xl); line-height: 1.2; }
.sc-strip span { font-size: var(--fs-sm); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .sc-strip a:hover { box-shadow: var(--e2); } }

.sc-area { display: grid; gap: 12px; scroll-margin-block-start: calc(var(--header-h) + 12px); }
.sc-area-head { display: grid; gap: 6px; }
.sc-area h2 { display: flex; gap: 8px; align-items: center; font-size: var(--fs-lg); }
.sc-desc { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); max-inline-size: 70ch; }
.sc-mini { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.sc-mini > div { display: flex; gap: 6px; align-items: baseline; padding: 4px 12px; border-radius: 999px; font-size: var(--fs-sm); background: var(--paper-2); }
.sc-mini .plus { background: color-mix(in srgb, var(--saffron) 18%, var(--card)); }
.sc-mini dt { font-weight: 700; }
.sc-mini dd { margin: 0; }

.sc-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sc-tile { display: grid; gap: 6px; align-content: start; block-size: 100%; padding: 12px 14px; border-radius: var(--r-md); background: var(--card);
  box-shadow: var(--e1); color: var(--ink); text-decoration: none; min-block-size: 96px; }
a.sc-tile { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-std); }
a.sc-tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { a.sc-tile:hover { box-shadow: var(--e2); } }
.sc-tile-top { display: flex; gap: 6px; align-items: center; }
.sc-tile-title { font-weight: 600; line-height: 1.55; }
.sc-tile-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-xs); color: var(--ink-2); }
.sc-try { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; margin: 0; font-size: var(--fs-sm); }
.sc-try > span { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sc-try .ic { inline-size: 14px; block-size: 14px; }
.sc-all { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; min-block-size: 44px; }
.sc-kids-cta { margin: 0; }
.sc-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--card); border-radius: var(--r-md); overflow: hidden; }
.sc-table th, .sc-table td { padding: 10px 14px; text-align: start; border-block-end: 1px solid var(--sep); }
.sc-table td { font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-table thead th { color: var(--ink-2); font-weight: 600; }
.sc-final { display: grid; gap: 10px; padding: 20px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); }
.sc-final h2 { font-size: var(--fs-lg); }
.sc-final p { margin: 0; }

.sc-free-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sc-free-card { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--e1); }
.sc-free-card h3 { display: flex; gap: 8px; align-items: center; font-size: var(--fs-md); }
.sc-free-n { margin: 0; font-weight: 700; color: var(--teal); }
.sc-free-card .sc-try { justify-content: flex-start; margin-block-start: auto; }
.sc-free-card .sc-try a { min-block-size: 44px; display: inline-flex; align-items: center; }

/* the chip on a media card's artwork (templates/techniques/media_list.html) */
.mc-lock.mc-plus { inline-size: auto; block-size: auto; border-radius: 999px; background: none; padding: 0; }

/* a preview inside a paywall / locked intro (learn/paywall.html, test and clip pages): no second title */
.pv-inline { text-align: start; margin-block: 12px; }
.pv-inline .pv-head .pv-title, .pv-inline .pv-head > p { display: none; }
.pv-inline.no-sum .pv-sum { display: none; }

/* pricing page: the contextual line of a paywall entry point and the links to /pricing/inside/ */
.pr-entry { margin-block: 4px; text-align: start; }
.pr-inside-link { margin: 0; font-size: var(--fs-sm); }
.pr-inside-link a, .pr-inside { display: inline-flex; gap: 4px; align-items: center; font-weight: 600; min-block-size: 44px; }
.pr-inside { font-size: var(--fs-sm); }
.pr-inside .ic, .pr-inside-link .ic { inline-size: 14px; block-size: 14px; }
.mb-box > p:first-child { display: flex; gap: 6px; align-items: center; margin: 0; }