/* Our own learner notes under a podcast episode (templates/techniques/_episode_notes.html, _episode_note_card.html).
   Editorial and quiet: one surface for the whole section, hairline dividers, type before decoration. Words and expressions are
   rows that open on tap (a native <details>); the timed map is a slim rail; the quiz uses small radio-like choices. Colour only
   for the level chip and for what is happening now (the current section, the word being said, right / wrong).
   Site tokens only (app.css :root), so light/dark and RTL follow the rest of the site. Every color-mix() has a plain fallback
   before it (old Android WebViews keep the first declaration). Motion: colour only, 120 ms, none with reduced motion. */

.pn { display: grid; gap: 24px; padding: 20px 16px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); min-inline-size: 0; }
.pn p { margin: 0; }
.pn .ic { flex: none; }

/* ---- header ---- */
.pn-head { display: grid; gap: 6px; }
.pn-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-title); }
.pn-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; color: var(--ink-2); font-size: var(--fs-sm); }
.pn-meta .lvl { margin-inline-end: 4px; }
.pn-meta > span:not(.lvl) + span::before { content: "·"; margin-inline: 7px; color: var(--line); }
.pn-meta > .lvl + span { margin-inline-start: 6px; }
.pn-lead, .pn-guest { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85; max-inline-size: 60ch; }
.pn-guest a { color: var(--indigo); font-weight: 600; }

/* ---- layout: one column on a phone (the map before the words), two on a wide screen ---- */
.pn-cols { display: grid; gap: 28px; min-inline-size: 0; }
.pn-main, .pn-side { display: contents; }
.pn-sum { order: 1; } .pn-map { order: 2; } .pn-words { order: 3; } .pn-exprs { order: 4; } .pn-quiz { order: 5; }
@media (min-width: 1000px) {
  .pn { padding: 28px 32px; }
  .pn-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .pn-main, .pn-side { display: grid; gap: 28px; align-content: start; min-inline-size: 0; }
}
.pn-part { display: grid; gap: 8px; align-content: start; min-inline-size: 0; }
.pn-h { display: flex; gap: 6px; align-items: baseline; margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: var(--lh-title); }
.pn-count { color: var(--ink-2); font-weight: 500; font-size: var(--fs-xs); }
.pn-hint { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.8; }
.pn-summary { font-size: var(--fs-sm); line-height: 1.95; color: var(--ink); max-inline-size: 62ch; }

/* ---- words and expressions: rows that open ---- */
.pn-list { list-style: none; margin: 0; padding: 0; border-block-start: 0.5px solid var(--sep); }
.pn-row { position: relative; border-block-end: 0.5px solid var(--sep); }
.pn-sum-row { display: grid; gap: 1px; min-block-size: 56px; padding: 9px 0; padding-inline-end: 28px; align-content: center; cursor: pointer;
  list-style: none; border-radius: var(--r-xs); -webkit-tap-highlight-color: transparent; }
.pn-sum-row::-webkit-details-marker { display: none; }
.pn-sum-row::after { content: ""; position: absolute; inset-inline-end: 6px; inset-block-start: 26px; inline-size: 7px; block-size: 7px;
  border: solid var(--line); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.pn-d[open] > .pn-sum-row::after { transform: translateY(3px) rotate(-135deg); }
.pn-line { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; min-inline-size: 0; }
.pn-en { font-family: var(--f-display); font-size: var(--fs-md); font-weight: 600; line-height: 1.45; unicode-bidi: isolate; overflow-wrap: anywhere; }
.pn-pos { font-size: var(--fs-xs); color: var(--ink-2); }
.pn-fa { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; }
@media (hover: hover) { .pn-sum-row:hover .pn-en { color: var(--indigo); } }
/* an expression: a thin teal accent and a teal label, nothing louder */
.pn-row.is-expr .pn-sum-row, .pn-row.is-expr .pn-more { padding-inline-start: 12px; }
.pn-row.is-expr::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 14px; inline-size: 2px; border-radius: 2px; background: var(--teal); }
.pn-row.is-expr .pn-pos { color: var(--teal); }
/* the word being said right now */
.pn-row.pn-now .pn-en { color: var(--indigo); }
.pn-row.pn-now::after { content: ""; position: absolute; inset-inline-start: -10px; inset-block: 14px; inline-size: 3px; border-radius: 3px; background: var(--indigo); }

.pn-more { display: grid; gap: 10px; padding: 2px 0 14px; }
.pn-ex { font-family: var(--f-display); font-size: var(--fs-base); line-height: 1.65; color: var(--ink); text-align: start; overflow-wrap: anywhere;
  padding-inline-start: 12px; border-inline-start: 2px solid var(--hair); }
.pn-ex mark { color: inherit; font-weight: 700; padding-inline: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 62%, #ffe2a0 62%);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--saffron) 45%, transparent) 62%); }
.pn-note { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85; }
.pn-acts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.pn-acts .play-btn { position: relative; min-block-size: 34px; min-inline-size: 34px; padding: 0; border: 1px solid var(--hair); border-radius: 50%;
  background: transparent; color: var(--ink-2); }
.pn-acts .play-btn::before { content: ""; position: absolute; inset: -5px; }  /* a 44px target around the 34px circle */
.pn-acts .play-btn .ic { inline-size: 16px; block-size: 16px; }
.pn-acts .play-btn.playing { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.pn-save { margin: 0; }
.pn-save.htmx-request .pn-link { opacity: 0.5; pointer-events: none; }
/* the HTMX answer of techniques:mine replaces the form: «ذخیره شد» / «از قبل در دفترت هست» */
.pn-acts > .tag { background: none; padding: 0; color: var(--ok); font-size: var(--fs-sm); }
.pn-acts > .tag.ok::before { content: "✓"; font-weight: 800; }
.pn-acts > .tag.no { color: var(--bad); }

/* the small controls: a time stamp that seeks, a text button */
.pn-t { display: inline-flex; gap: 6px; align-items: center; min-block-size: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--hair);
  font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--indigo); background: transparent; }
button.pn-t { position: relative; cursor: pointer; font-family: inherit; }
button.pn-t::before { content: ""; position: absolute; inset: -8px -2px; }  /* 44px tall target */
.pn-link { display: inline-flex; gap: 4px; align-items: center; min-block-size: 44px; padding: 0 2px; border: 0; background: none; color: var(--indigo);
  font: 600 var(--fs-sm)/1.4 var(--f-body); cursor: pointer; border-radius: var(--r-xs); }
.pn-link .ic { inline-size: 15px; block-size: 15px; }
@media (hover: hover) { button.pn-t:hover { border-color: var(--indigo); } .pn-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ---- the timed map: a slim rail ---- */
.pt-note { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.8; }
.pt-sync { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: center; padding: 8px 12px; border-radius: var(--r-sm); background: var(--paper-2);
  font-size: var(--fs-sm); line-height: 1.8; }
.pt-sync[hidden] { display: none; }
.pt-sync p { flex: 1 1 100%; color: var(--ink-2); padding-block-start: 2px; }
.pt-sync-hint { color: var(--ink-2); font-size: var(--fs-xs); }
.pt-sync.is-synced .pt-sync-hint { color: var(--ok); font-weight: 600; }
.pt-list { position: relative; list-style: none; margin: 0; padding: 0; }
.pt-list::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 3px; inline-size: 1px; background: var(--hair); }
.pt { position: relative; padding: 6px 0; padding-inline-start: 20px; line-height: 1.8; font-size: var(--fs-sm); }
.pt::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 18px; inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); box-sizing: border-box; }
.pt:has(.pt-seek) { padding-block: 0; }
.pt:has(.pt-seek)::before { inset-block-start: 18px; }
.pt-seek { display: block; inline-size: 100%; min-block-size: 44px; padding: 6px 0; margin: 0; border: 0; border-radius: var(--r-xs); background: none;
  color: inherit; font: inherit; line-height: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pt-time { margin-inline-end: 8px; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pt-fa { color: var(--ink); }
@media (hover: hover) { .pt-seek:hover .pt-fa { color: var(--indigo); } }
.pt.past::before { border-color: var(--indigo); }
.pt.on::before { background: var(--indigo); border-color: var(--indigo); }
.pt.on .pt-time { color: var(--indigo); }
.pt.on .pt-fa { font-weight: 600; }

/* ---- quiz ---- */
.pq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pq { display: grid; gap: 8px; min-inline-size: 0; }
.pq-q { display: flex; gap: 6px; align-items: baseline; font-family: var(--f-display); font-size: var(--fs-base); font-weight: 600; line-height: 1.55; }
.pq-q [dir="ltr"] { flex: 1 1 auto; text-align: start; min-inline-size: 0; overflow-wrap: anywhere; }
.pq-n { flex: none; color: var(--ink-2); font-size: var(--fs-sm); }
.pq-opts { display: grid; gap: 6px; }
.pq-opt { display: flex; gap: 10px; align-items: center; inline-size: 100%; min-block-size: 44px; padding: 8px 12px; margin: 0; border: 1px solid var(--hair);
  border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 400 var(--fs-sm)/1.5 var(--f-display); text-align: start; cursor: pointer; }
.pq-opt::before { content: ""; flex: none; display: inline-grid; place-items: center; inline-size: 16px; block-size: 16px; border-radius: 50%;
  border: 1.5px solid var(--line); box-sizing: border-box; font-size: 10px; font-weight: 800; line-height: 1; }
@media (hover: hover) { .pq-opt:hover:not([disabled]) { border-color: var(--line); } }
.pq-opt[disabled] { cursor: default; }
.pq-c { flex: 1 1 auto; min-inline-size: 0; }
.pq-opt.right { border-inline-start: 3px solid var(--ok); }
.pq-opt.right::before { content: "✓"; border-color: var(--ok); background: var(--ok); color: var(--card); }
.pq-opt.wrong { border-inline-start: 3px solid var(--bad); }
.pq-opt.wrong::before { content: "✕"; border-color: var(--bad); background: var(--bad); color: var(--card); }
.pq.pq-done .pq-opt:not(.right):not(.wrong) { opacity: 0.5; }
html:not(.js) .pq-opt { cursor: default; pointer-events: none; }
.pq-foot { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; }
.pq-fb { font-size: var(--fs-sm); font-weight: 600; }
.pq-fb:empty { display: none; }
.pq-fb.ok { color: var(--ok); } .pq-fb.no { color: var(--bad); }
.pq-fb:focus { outline: none; }
.pq-t { border: 0; padding: 0 2px; min-block-size: 36px; color: var(--indigo); font-weight: 600; }
.pq-t [dir="ltr"] { color: var(--ink-2); font-weight: 500; }
.pq-ans summary { display: inline-flex; gap: 6px; align-items: center; min-block-size: 44px; color: var(--ink-2); font-size: var(--fs-sm); cursor: pointer;
  list-style: none; border-radius: var(--r-xs); }
.pq-ans summary::-webkit-details-marker { display: none; }
.pq-ans summary::after { content: ""; inline-size: 6px; block-size: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.pq-ans[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.pq-ans { text-align: start; }
.pq-ans p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.9; }
.pq-ans p b { color: var(--ink); }

.pn-credit { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.85; padding-block-start: 12px; border-block-start: 0.5px solid var(--sep); }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="0"]) .pn-en, html:not([data-motion="0"]) .pt::before, html:not([data-motion="0"]) .pt-fa,
  html:not([data-motion="0"]) .pq-opt, html:not([data-motion="0"]) .pn-sum-row::after {
    transition: color var(--dur-1) var(--ease-std), background-color var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std),
      opacity var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
  }
}
@media (prefers-contrast: more) { .pn-list, .pn-row, .pn-credit { border-color: var(--line); } .pq-opt, .pn-t { border-color: var(--line); } }