/* ==========================================================================
   Techniques, authentic media and podcast lists, the notebook, the pronunciation pair game.
   Loaded only by the templates that need it ({% block feature_css %}); split out of app.css, ui.css and
   kashi.css (docs/PERFORMANCE.md §7) in their original order, so the cascade is unchanged.
   ========================================================================== */

/* ---- from ui.css ---- */
/* pronunciation game ---------------------------------------------------------------- */
.pairgame { display: grid; gap: 16px; justify-items: center; text-align: center; }
.pairbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; inline-size: min(100%, 460px); }
.pairbtn { min-block-size: 72px; border-radius: var(--r-lg); border: 1.5px solid var(--hair); background: var(--card); font: 700 var(--fs-xl) var(--f-display); direction: ltr; display: grid; gap: 2px; place-items: center; }
.pairbtn small { font: 500 var(--fs-xs) var(--f-body); color: var(--ink-2); }
.pairbtn.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.pairbtn.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--card)); }
/* techniques ------------------------------------------------------------------------- */
.shadow-line { direction: ltr; text-align: left; font-size: 1.0625rem; line-height: 1.8; padding: 12px 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--hair); transition: opacity 400ms, filter 400ms; }
.shadow-line.fade { opacity: 0.35; }
.shadow-line.hidden-text { filter: blur(7px); user-select: none; }
.shadow-line .w.cur { background: color-mix(in srgb, var(--saffron) 50%, transparent); border-radius: 4px; }
.diff { direction: ltr; text-align: left; line-height: 2; }
.diff ins { background: color-mix(in srgb, var(--ok) 20%, var(--card)); text-decoration: none; border-radius: 4px; padding: 0 3px; }
.diff del { background: color-mix(in srgb, var(--bad) 18%, var(--card)); border-radius: 4px; padding: 0 3px; }
.bigtimer { font: 700 var(--fs-3xl)/1 var(--f-display); direction: ltr; }
/* ---- from kashi.css ---- */
/* ---- authentic media (films, podcasts) ---------------------------------------------------------------------- */
.media-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.mcard { display: grid; border-radius: var(--r-lg); overflow: hidden; background: var(--card); border: 1px solid var(--hair); text-decoration: none; color: var(--ink);
  transition: transform 200ms var(--ease-out), box-shadow 200ms; }
@media (hover: hover) and (pointer: fine) { .mcard:hover { transform: translateY(-2px); box-shadow: var(--e2); } }
.mcard:active { transform: scale(0.985); }
.mc-art { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; color: #fff; background: #14122b; }
.mc-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mc-art > .ic { inline-size: 36px; block-size: 36px; opacity: 0.9; stroke-width: 1.5; }
.mc-dur { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; padding: 0 6px; border-radius: var(--r-xs); background: rgb(0 0 0 / 0.65); color: #fff; font-size: var(--fs-2xs); }
.mc-lock { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tile-sun); color: var(--on-sun); }
.mc-lock .ic { inline-size: 16px; block-size: 16px; }
.mc-body { display: grid; gap: 4px; padding: 10px 12px 12px; font-size: var(--fs-sm); }
.mc-body b { line-height: 1.6; }
/* one hue per accent family (art placeholders and accent tags) */
.acc-us { background: var(--lattice-light), linear-gradient(135deg, #14122b, #2a4fb8); }
.acc-uk { background: var(--lattice-light), linear-gradient(135deg, #14122b, #8e2756); }
.acc-au, .acc-nz { background: var(--lattice-light), linear-gradient(135deg, #14122b, #07756d); }
.acc-ca { background: var(--lattice-light), linear-gradient(135deg, #14122b, #b4271f); }
.acc-ie, .acc-sc { background: var(--lattice-light), linear-gradient(135deg, #14122b, #0b7a3e); }
.acc-in, .acc-za, .acc-other { background: var(--lattice-light), linear-gradient(135deg, #14122b, #b4640a); }
.tag.acc { background: color-mix(in srgb, var(--indigo) 12%, var(--card)); color: var(--ink); }
/* the media player (.mp-*) lives in css/media-player.css */

.pick-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pick { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); border: 1.5px dashed var(--line); background: var(--paper);
  cursor: pointer; min-block-size: 64px; font-size: var(--fs-sm); }
@media (hover: hover) and (pointer: fine) { .pick:hover { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 6%, var(--card)); } }
.pick:focus-within, .pick:active { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 6%, var(--card)); }
.pick > .ic { inline-size: 24px; block-size: 24px; color: var(--indigo); flex: none; }
.pick span { display: grid; }
.pick small { color: var(--ink-2); }
.pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pick:has(input:disabled) { opacity: 0.6; }
.own-film { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); margin-block-end: 16px; text-decoration: none; font-size: var(--fs-sm);
  background: var(--card); border: 1.5px solid color-mix(in srgb, var(--saffron) 55%, var(--hair)); box-shadow: 0 var(--ledge) 0 color-mix(in srgb, var(--saffron) 40%, var(--hair)); }
.own-film b { font-size: var(--fs-md); }
.own-film > .ic:last-child { margin-inline-start: auto; }
.pod-art { display: grid; place-content: center; gap: 6px; text-align: center; padding: 12px; }
.pod-art b { font-size: var(--fs-md); line-height: 1.3; color: #fff; }
.pod-art .ic { margin-inline: auto; inline-size: 24px; block-size: 24px; opacity: 0.8; }
.ep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ep-list a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); font-size: var(--fs-sm); background: var(--card); border: 1px solid var(--hair); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ep-list a:hover { border-color: var(--indigo); } }
.ep-list a:active { border-color: var(--indigo); background: var(--paper-2); }
.ep-list b { text-align: start; }
.ep-ic { inline-size: 34px; block-size: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--indigo) 12%, var(--card)); color: var(--indigo); }
/* mistakes notebook card: same card language as the vocab flashcard, left-aligned English */
.nbcard { padding: 18px 16px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--hair);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--saffron) 22%, var(--hair)), 0 18px 40px -28px rgb(20 18 43 / 0.45); }
.nbcard .qtext { font-size: clamp(1.25rem, 1.2vw + 1rem, 1.5rem); padding: 10px 12px; border-radius: var(--r-md); background: var(--well); }
/* a card's front line by line: the question (English or Persian, each in its own direction), then its choices */
.nbcard .nbfront .ln { display: block; text-align: start; }
.nbcard .nbfront .ln.nbopt { font-size: 0.8em; font-weight: 600; margin-block-start: 4px; }
.nbcard .nbfront .ln:not(:lang(en)) { font-family: var(--f-body); }
.nbcard .gapline input { flex: 1 1 200px; }
.nbcard > .linkbtn { justify-self: start; }
.nbcard.done { justify-items: center; text-align: center; }
.nbcard.done > .ic { inline-size: 44px; block-size: 44px; padding: 10px; border-radius: 50%; background: var(--success-bg); color: var(--ok); }
#nbstage > .sheet { margin-block-end: 14px; }
/* «انگلیسی واقعی» side doors (templates/techniques/media_list.html): two feature cards, Apple-Music style. Podcasts: the
   logo's indigo-to-turquoise with a glass cover where a waveform breathes; your own film: a dark card with a saffron film
   strip. Side by side from 760px. */
.feat-row { display: grid; gap: 12px; margin-block: 4px 22px; }
@media (min-width: 760px) { .feat-row { grid-template-columns: 1fr 1fr; } }
.feat-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  min-block-size: 140px; padding: 16px; border-radius: 24px; color: #fff; text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 14px 34px -18px rgb(0 0 0 / 0.55);
  transition: transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease-std); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .feat-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(0 0 0 / 0.14), 0 22px 44px -20px rgb(0 0 0 / 0.6); } }
.feat-card:active { transform: scale(0.985); transition-duration: var(--dur-1); }
.feat-card:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.feat-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background: radial-gradient(60% 80% at 100% 0%, rgb(255 255 255 / 0.18), transparent 60%); }
.feat-pod { background: radial-gradient(130% 150% at 0% 0%, #7b7ff5 0%, #3a3fcb 46%, #0b8f86 112%); }
.feat-own { background: linear-gradient(140deg, #2b2620 0%, #17151d 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffb627 30%, transparent), 0 14px 34px -18px rgb(0 0 0 / 0.55); }
.feat-art { position: relative; display: grid; place-items: center; inline-size: 92px; aspect-ratio: 1; border-radius: 20px; overflow: hidden;
  background: rgb(255 255 255 / 0.14); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.feat-glyph { position: relative; z-index: 1; inline-size: 34px; block-size: 34px; color: #fff; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.25)); }
/* a waveform breathing behind the headphones */
.feat-wave { position: absolute; inset: 20% 12%; display: flex; align-items: center; justify-content: space-between; opacity: 0.55; }
.feat-wave i { inline-size: 5px; block-size: 100%; border-radius: 3px; background: rgb(255 255 255 / 0.7); transform: scaleY(0.4); }
html[data-motion="2"] .feat-wave i, html[data-motion="3"] .feat-wave i { animation: feat-wave 1.6s var(--ease-std) infinite alternate; }
.feat-wave i:nth-child(2) { animation-delay: -0.3s; }
.feat-wave i:nth-child(3) { animation-delay: -0.7s; }
.feat-wave i:nth-child(4) { animation-delay: -0.15s; }
.feat-wave i:nth-child(5) { animation-delay: -0.9s; }
.feat-wave i:nth-child(6) { animation-delay: -0.45s; }
.feat-wave i:nth-child(7) { animation-delay: -1.1s; }
@keyframes feat-wave { from { transform: scaleY(0.25); } to { transform: scaleY(0.95); } }
/* the learner's own film: a saffron strip with sprocket holes down both edges */
.feat-own .feat-art { background-color: #ffb627; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
  background-image: radial-gradient(circle, #17151d 2.6px, transparent 3px), radial-gradient(circle, #17151d 2.6px, transparent 3px);
  background-size: 14px 13px, 14px 13px; background-repeat: repeat-y, repeat-y; background-position: 0 3px, 100% 3px; }
.feat-own .feat-glyph { color: #1d1d1f; filter: none; }
.feat-body { display: grid; gap: 4px; min-inline-size: 0; }
.feat-kicker { display: inline-flex; gap: 5px; align-items: center; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.01em; opacity: 0.82; }
.feat-kicker .ic { inline-size: 13px; block-size: 13px; }
.feat-title { font-family: var(--f-display); font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.feat-sub { font-size: var(--fs-xs); line-height: 1.7; opacity: 0.84; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-cta { justify-self: start; display: inline-flex; gap: 4px; align-items: center; margin-block-start: 6px; padding-block: 6px; padding-inline: 12px 10px;
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; background: rgb(255 255 255 / 0.18); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25); }
.feat-own .feat-cta { background: #ffb627; color: #1d1d1f; box-shadow: none; }
.feat-cta .ic { inline-size: 14px; block-size: 14px; }
@media (max-width: 380px) { .feat-art { inline-size: 76px; border-radius: 18px; } .feat-card { gap: 12px; padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .feat-wave i { animation: none !important; } }