/* ============================================================
   Adult Speaking English — deck structure.
   All visual choices come from the tokens in :root, which
   themes.css overrides per style. Edit layout here, looks there.
   ============================================================ */

:root {
  /* --- palette --- */
  --ink:      #26264D;   /* body text                       */
  --accent:   #F96167;   /* primary accent: eyebrows, rules */
  --accent2:  #2F3C7E;   /* secondary: numbers, expressions */
  --accent3:  #7A6BB5;   /* tertiary: third column, tags    */
  --gold:     #F9E795;   /* accent on dark covers           */
  --lavender: #AEB4E0;   /* muted on dark                   */
  --muted:    #6B6B85;   /* secondary text, Chinese gloss   */
  --paper:    #FFF7F2;   /* page tint (index)               */
  --slide-bg: #FFFFFF;   /* slide background                */
  --card:     #FFFFFF;
  --line:     #E6E3EE;   /* hairlines, borders              */
  --wash:     #F4F3F9;   /* tinted panel fill               */
  --slide-img: none;     /* optional slide texture overlay  */

  /* --- type --- */
  --serif: "Source Serif 4", Cambria, Georgia, "Songti SC", serif;
  --sans:  "Inter", Calibri, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --title-font:  var(--serif);
  --body-font:   var(--sans);
  --expr-font:   var(--serif);
  --title-size:  44px;
  --title-weight: 700;
  --title-track: 0;
  --title-case:  none;
  --cover-size:  76px;
  --eyebrow-track: .14em;
  --eyebrow-case:  uppercase;
  --eyebrow-size:  15px;

  /* --- shape --- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --r-num: 50%;          /* numbered badges: 50% = circle    */
  --border-w: 1px;
  --card-accent-w: 4px;  /* left bar on .card                */
  --shadow: none;
  --panel-shadow: none;
  --rule-w: 76px;
  --rule-h: 5px;

  /* --- cover --- */
  --cover-bg:
    radial-gradient(900px 620px at 88% -14%, #3A3A78 0%, transparent 62%),
    radial-gradient(680px 560px at -10% 118%, #43356B 0%, transparent 60%),
    linear-gradient(150deg, #26264D 0%, #1B1B3A 100%);
  --cover-fg: #FFFFFF;
  --cover-eyebrow: var(--gold);
  --cover-sub: var(--paper);
  --cover-meta: var(--lavender);

  /* Slide is authored at a fixed size and scaled to fit the viewport,
     so every deck lays out identically regardless of screen. */
  --slide-w: 1280px;
  --slide-h: 720px;
  --slide-pad: 54px 64px 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #14142B;
  color: var(--ink);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- stage & scaling ---------- */

#stage { position: fixed; inset: 0; display: grid; place-items: center; }

#scaler {
  width: var(--slide-w);
  height: var(--slide-h);
  position: relative;
  transform-origin: center center;
  flex: none;
}

.slide {
  position: absolute;
  inset: 0;
  width: var(--slide-w);
  height: var(--slide-h);
  background: var(--slide-bg);
  background-image: var(--slide-img);
  color: var(--ink);
  padding: var(--slide-pad);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.slide.is-active { display: flex; }

/* ---------- slide furniture ---------- */

.s-eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--eyebrow-track);
  text-transform: var(--eyebrow-case);
  color: var(--accent);
  margin-bottom: 10px;
}

.s-title {
  font-family: var(--title-font);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-track);
  text-transform: var(--title-case);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}

.s-sub { font-size: 19px; color: var(--muted); margin-top: 8px; line-height: 1.4; }

.s-body {
  flex: 1;
  min-height: 0;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  zoom: var(--fit, 1);   /* overflow safety net, set by deck.js */
}

.s-foot {
  position: absolute;
  left: 64px; right: 64px; bottom: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent2);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 6px 16px 6px 7px;
  font-size: 15px;
  font-weight: 600;
  flex: none;
}
.chip b {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-num);
  background: rgba(255,255,255,.22);
  font-size: 13px;
}

/* ---------- cover ---------- */

.slide.cover {
  background: var(--cover-bg);
  color: var(--cover-fg);
  justify-content: center;
}
.cover .s-eyebrow { color: var(--cover-eyebrow); }
.cover .s-title {
  color: var(--cover-fg);
  font-size: var(--cover-size);
  letter-spacing: -.015em;
}
.cover .s-sub { color: var(--cover-sub); font-size: 21px; max-width: 830px; margin-top: 20px; }
.cover .cover-meta {
  position: absolute; left: 64px; bottom: 56px;
  color: var(--cover-meta); font-size: 15px; letter-spacing: .04em;
}
.cover .cover-rule {
  width: var(--rule-w); height: var(--rule-h);
  background: var(--accent);
  border-radius: 3px;
  margin: 26px 0 0;
}

/* ---------- generic containers ---------- */

.card {
  background: var(--card);
  border: var(--border-w) solid var(--line);
  border-left: var(--card-accent-w) solid var(--accent2);
  border-radius: var(--r-md);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.card.is-coral { border-left-color: var(--accent); }

.panel {
  background: var(--wash);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  box-shadow: var(--panel-shadow);
}

.k-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* ---------- objectives / roadmap ---------- */

.obj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.obj-list li {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 13px;
  align-items: start;
  font-size: 17.5px;
  line-height: 1.42;
}
.obj-list li::before {
  content: counter(list-item);
  display: grid;
  place-items: center;
  width: 27px; height: 27px;
  border-radius: var(--r-num);
  background: var(--accent2);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.road { display: flex; gap: 8px; }
.road div {
  flex: 1;
  background: var(--wash);
  border-radius: var(--r-sm);
  padding: 11px 8px;
  text-align: center;
}
.road strong { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.2; }
.road span   { display: block; font-size: 12px; color: var(--accent); font-weight: 700; margin-top: 4px; }

/* ---------- vocabulary ---------- */

.vocab { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 22px; align-content: start; }
.vocab .v { background: var(--wash); border-radius: var(--r-sm); padding: 11px 16px; }
.vocab .en { font-size: 18px; font-weight: 700; color: var(--accent2); line-height: 1.25; }
.vocab .zh { font-size: 15px; color: var(--muted); margin-top: 2px; }
.vocab .ex { font-size: 14px; color: var(--ink); opacity: .72; margin-top: 5px; font-style: italic; }

/* ---------- core expressions ---------- */

.expr { display: grid; gap: 20px; align-content: start; }
.expr .e { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.expr .n {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-num);
  background: var(--accent2);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}
.expr .head {
  font-size: 29px;
  font-weight: 700;
  color: var(--accent2);
  line-height: 1.15;
  font-family: var(--expr-font);
}
.expr .zh { font-size: 15.5px; color: var(--muted); margin-top: 3px; }
.expr .ex { margin-top: 10px; display: grid; gap: 7px; }
.expr .ex div {
  background: var(--wash);
  border-radius: var(--r-sm);
  padding: 9px 15px;
  font-size: 16.5px;
  line-height: 1.35;
}
.expr .pers { margin-top: 9px; font-size: 14.5px; color: var(--accent); font-weight: 600; line-height: 1.35; }

/* ---------- listening ---------- */

.script { display: grid; gap: 9px; align-content: start; }
.script .ln { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: baseline; }
.script .sp { font-size: 14.5px; font-weight: 700; color: var(--accent); text-align: right; line-height: 1.4; }
.script .tx { font-size: 17px; line-height: 1.44; }
.script .mono { grid-template-columns: 1fr; }
.script .mono .tx { font-size: 16px; line-height: 1.55; }
.script .setting {
  font-size: 15px; font-style: italic; color: var(--muted);
  background: var(--wash); border-radius: var(--r-sm); padding: 9px 15px;
}
.script .direction { font-size: 14px; font-style: italic; color: var(--muted); text-align: center; }
.script.dense { gap: 6px; }
.script.dense .tx { font-size: 15px; line-height: 1.36; }

audio { width: 100%; height: 38px; margin-top: 4px; }

/* Authentic-input video. Sized to leave the caption visible without scrolling;
   object-fit keeps letterboxing clean for non-16:9 sources. */
.deck-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 62vh;
  margin: 6px auto 0;
  background: #000;
  border-radius: 10px;
}
.v-missing {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: min(52vh, 380px);
  margin: 6px auto 0;
  border: var(--border-w, 2px) dashed var(--muted);
  border-radius: var(--r-md, 12px);
  color: var(--muted);
  font-size: .95em;
  text-align: center;
  padding: 0 24px;
}
.v-cap {
  margin-top: 10px;
  font-size: .8em;
  line-height: 1.45;
  opacity: .75;
  text-align: center;
}

/* ---------- question columns ---------- */

.qcol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-content: start; }
.qcol section {
  background: var(--wash);
  border-radius: var(--r-lg);
  padding: 17px 19px;
  border-top: 4px solid var(--accent2);
}
.qcol section:nth-child(2) { border-top-color: var(--accent); }
.qcol section:nth-child(3) { border-top-color: var(--accent3); }
.qcol h4 {
  margin: 0 0 11px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.qcol ol { margin: 0; padding-left: 19px; display: grid; gap: 9px; }
.qcol li { font-size: 15.5px; line-height: 1.4; }

/* ---------- practice steps ---------- */

.steps { display: grid; gap: 11px; align-content: start; }
.steps .st {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  background: var(--wash);
  border-radius: var(--r-md);
  padding: 13px 18px;
  align-items: start;
}
.steps .nm { font-size: 17px; font-weight: 700; color: var(--accent2); }
.steps .ds { font-size: 15.5px; line-height: 1.4; }
.steps .it { margin: 7px 0 0; padding-left: 17px; display: grid; gap: 4px; }
.steps .it li { font-size: 14.5px; color: var(--muted); line-height: 1.35; }

/* ---------- role-play ---------- */

.roles { display: grid; gap: 13px; align-content: start; }
.roles .r { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: start; }
.tag {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--accent2);
  border-radius: var(--r-sm); padding: 6px 10px; text-align: center;
}
.tag.t-coral { background: var(--accent); }
.tag.t-plum  { background: var(--accent3); }
.roles .tx { font-size: 16.5px; line-height: 1.45; }

.lang { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 4px; }
.lang div {
  background: var(--card);
  border: var(--border-w) solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  font-size: 16px;
}

/* ---------- challenge cards ---------- */

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; align-content: start; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards .c {
  background: var(--wash);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  border-top: 5px solid var(--accent);
  box-shadow: var(--shadow);
}
.cards .c b {
  display: block; font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.cards .c p { margin: 0; font-size: 15.5px; line-height: 1.42; }

/* ---------- correction / homework ---------- */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-content: start; }
.two-col ul { margin: 0; padding-left: 19px; display: grid; gap: 9px; }
.two-col li { font-size: 16px; line-height: 1.4; }

.hw { display: grid; gap: 14px; align-content: start; }
.hw .h { display: grid; grid-template-columns: 152px 1fr; gap: 18px; align-items: start; }
.hw .tx { font-size: 16.5px; line-height: 1.45; }

.big-quote { font-family: var(--title-font); font-size: 27px; line-height: 1.42; color: var(--ink); }
.big-quote.small { font-size: 21px; line-height: 1.5; }

/* ---------- translation toggle ---------- */

body.zh-hidden .zh { visibility: hidden; }

/* ---------- confetti ---------- */

#confetti {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

/* ---------- chrome ---------- */

#progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: var(--accent);
  z-index: 40;
  transition: width .22s ease;
}

#hud {
  position: fixed; bottom: 14px; right: 16px; z-index: 40;
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #C9C6DC;
}
#hud button, #hud select, .btn {
  font: inherit; font-size: 12.5px;
  color: #E8E6F2;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  padding: 5px 11px;
  cursor: pointer;
}
#hud select { padding: 5px 8px; }
#hud select option { background: #23234A; color: #E8E6F2; }
#hud button:hover, .btn:hover { background: rgba(255,255,255,.2); }

/* ---------- notepad ----------
   Lives on the dark chrome layer with the HUD (outside the scaled stage), so it
   stays crisp and readable in every deck style. Accent colour still tracks the
   active theme. */
#notepad {
  position: fixed; right: 16px; bottom: 58px; z-index: 45;
  display: none;
  flex-direction: column;
  width: min(680px, calc(100vw - 32px));
  height: min(460px, calc(100vh - 120px));
  background: #1B1B33;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  overflow: hidden;
  resize: both;
}
#notepad.is-open { display: flex; }
.np-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; color: #E8E6F2;
}
.np-head strong { font-weight: 600; }
#np-status { margin-left: auto; font-size: 11.5px; opacity: .65; min-width: 52px; text-align: right; }
.np-head button {
  font: inherit; font-size: 11.5px;
  color: #E8E6F2;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px; padding: 3px 8px; cursor: pointer;
}
.np-head button:hover { background: rgba(255,255,255,.2); }
#np-close { padding: 3px 8px; font-size: 15px; line-height: 1; }
#np-text {
  flex: 1; width: 100%;
  border: 0; outline: 0; resize: none;
  padding: 10px 12px;
  background: transparent;
  color: #F2F1F8;
  /* Big on purpose: these notes get read off a shared screen by students,
     not just by the teacher up close. ~3x the old 14px. */
  font: 600 42px/1.3 var(--body-font, system-ui), system-ui, sans-serif;
}
#np-text::placeholder { color: rgba(242,241,248,.38); }
#np-text:focus { box-shadow: inset 0 2px 0 0 var(--accent); }
@media print { #notepad { display: none !important; } }
#hud button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
#counter { font-variant-numeric: tabular-nums; padding: 0 4px; }

/* ---------- overview grid ---------- */

#overview {
  position: fixed; inset: 0; z-index: 50;
  background: #14142B;
  padding: 30px 34px;
  overflow-y: auto;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 16px;
  align-content: start;
}
#overview.is-open { display: grid; }
.ov {
  background: #23234A;
  border: 1px solid #33335F;
  border-radius: 9px;
  padding: 13px 15px;
  cursor: pointer;
  color: #EDEBF6;
  text-align: left;
  font: inherit;
}
.ov:hover, .ov.is-current { border-color: var(--accent); background: #2C2C58; }
.ov b { display: block; font-size: 11px; color: var(--lavender); letter-spacing: .1em; margin-bottom: 5px; }
.ov span { font-size: 14.5px; line-height: 1.32; display: block; }

/* ---------- help ---------- */

#help {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10,10,26,.86);
  display: none; place-items: center;
}
#help.is-open { display: grid; }
#help div {
  background: #fff; color: #26264D;
  border-radius: 14px; padding: 30px 36px; max-width: 460px;
}
#help h3 { margin: 0 0 16px; font-family: var(--serif); font-size: 22px; }
#help dl { display: grid; grid-template-columns: 124px 1fr; gap: 9px 14px; margin: 0; font-size: 15px; }
#help dt { font-weight: 700; color: #2F3C7E; }
#help dd { margin: 0; color: #6B6B85; }

/* ---------- print / PDF export ---------- */

@media print {
  @page { size: 1280px 720px; margin: 0; }
  html, body { overflow: visible; background: #fff; height: auto; }
  #stage { position: static; display: block; }
  #scaler { transform: none !important; width: auto; height: auto; }
  #progress, #hud, #overview, #help, #confetti { display: none !important; }
  .slide {
    position: relative;
    display: flex !important;
    page-break-after: always;
    break-after: page;
  }
}