/* ==========================================================================
   Samia Learn — only what the Learn pages need beyond samia.css
   Phone frame, storyboard strip, template thumbnails, claim log, sample note.
   ========================================================================== */

/* Template thumbnails: a 9:16 drawn frame at the top of a tile */
.template-thumb { width: 100%; max-width: 132px; aspect-ratio: 9 / 16; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); flex: none; }
.template-thumb svg { width: 100%; height: 100%; }
.tile .template-thumb { margin-bottom: 6px; }

/* Phone: a 9:16 frame with an ink border and a hard shadow */
.phone { width: 100%; max-width: 340px; aspect-ratio: 9 / 16; margin-inline: auto; border: 3px solid var(--ink); border-radius: 22px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-lg); position: relative; }
.phone svg { width: 100%; height: 100%; }
.phone .caption { position: absolute; left: 14px; top: 14px; margin: 0; }
.phone-note { font-size: var(--fs-small); color: var(--muted); text-align: center; margin-top: var(--s2); }

/* Storyboard: six 9:16 panels in a row; a horizontal strip on phones */
.storyboard { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: var(--s3); }
.storyboard figure { margin: 0; min-width: 0; }
.storyboard .frame { aspect-ratio: 9 / 16; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); }
.storyboard .frame svg { width: 100%; height: 100%; }
.storyboard figcaption { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-align: center; margin-top: 10px; line-height: 1.2; }
@media (max-width: 640px) {
  .storyboard { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 4px var(--s2) 0; scrollbar-width: thin; }
  .storyboard figure { flex: 0 0 104px; scroll-snap-align: start; }
}

/* Script: the narration, with source superscripts */
.script { font-size: 1.12rem; line-height: 1.7; max-width: 36em; }
.script sup { font-size: .68em; line-height: 0; font-weight: 700; }
.script sup a { color: var(--red); }
.script-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s2); }

/* Claim log: results, and stacked rows on phones */
.claims .ok { color: var(--green); font-weight: 700; white-space: nowrap; }
.claims .approx { color: var(--blue); font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
  table.claims thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.claims, table.claims tbody, table.claims tr, table.claims td { display: block; width: 100%; }
  table.claims tr { border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper-2); padding: 12px 14px; margin-bottom: 12px; box-shadow: 3px 3px 0 var(--ink); }
  table.claims td { border: 0; padding: 6px 0; }
  table.claims td::before { content: attr(data-label); display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
}

/* Sources and credits */
.sources { margin: 0; padding-left: 1.5em; display: grid; gap: 10px; font-size: var(--fs-small); }
.sources li { padding-left: 4px; scroll-margin-top: 92px; }
.sources li:target { background: var(--lemon); outline: 2px solid var(--sun); }
.credits { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: var(--fs-small); }
.credits dt { font-weight: 700; color: var(--ink); }
.credits dd { margin: 0; color: var(--muted); }

/* Sample note: a lemon strip under the header on sample pages */
.sample-note { background: var(--lemon); border-bottom: var(--bw) solid var(--ink); padding-block: 10px; font-size: var(--fs-small); color: var(--ink); }
.sample-note .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sample-note .pill { flex: none; }
.sample-note p { margin: 0; }

/* Centred button rows (the subscribe band on lesson pages) */
.actions.center { justify-content: center; }