/* ==========================================================================
   Bonjour & Beyond — the teaching console. Loaded on lesson pages only.

   Two views of the same markup. Reading view is what phase 1 and 2 built: one
   long page. Deck view shows a single `##` section at a time, at a type size
   that survives being compressed into a Meet screen share.

   Nothing here is required to read a lesson — without JavaScript every step is
   visible and this file only styles a scroll anchor.
   ========================================================================== */

/* --- steps: plain sections while reading ---------------------------------- */
.step{scroll-margin-top:84px}
.step > :first-child{margin-top:0}

/* --- deck view ------------------------------------------------------------ */
/* Bigger than class mode, and bigger still when both are on: a shared tab is
   scaled down by the far end, so what looks oversized here reads correctly
   there. Both live at the same specificity as class mode, and this file loads
   after site.css, so the pairing below is what settles it. */
:root[data-view="deck"]{--scale:1.5;--measure:58ch}
:root[data-view="deck"][data-class-mode="1"]{--scale:1.85;--measure:52ch}

:root[data-view="deck"] .step{display:none}
:root[data-view="deck"] .step[data-current]{display:block;animation:step-in .28s ease-out}
@keyframes step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Chrome that is noise during a class. The lesson title and breadcrumb stay —
   students joining late need to know where they are. */
:root[data-view="deck"] .pager,
:root[data-view="deck"] .lesson-cta,
:root[data-view="deck"] .reveal-all,
:root[data-view="deck"] .site-nav,
:root[data-view="deck"] .topbar-cta,
:root[data-view="deck"] .foot{display:none}

:root[data-view="deck"] .page-summary{display:none}
:root[data-view="deck"] main.reading{padding-bottom:132px;min-height:72vh}

/* The lesson title stays as context for anyone who joins late, but shrinks —
   at deck type sizes a full-size h1 would own half the screen. */
:root[data-view="deck"] .page-title{font-size:1.12em;margin-bottom:.7em;color:var(--muted)}

/* --- deck bar ------------------------------------------------------------- */
/* Bottom right, not centred: a step longer than the screen still scrolls
   under this bar, and the right margin is the one place where it covers
   whitespace instead of the text column or a wide table. */
.deck-bar{display:none}
:root[data-view="deck"] .deck-bar{
  display:flex;align-items:center;gap:12px;
  position:fixed;right:22px;bottom:22px;z-index:60;
  max-width:calc(100vw - 44px);
  padding:7px 7px 7px 13px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);
}
.deck-count{font-weight:900;color:var(--muted);font-size:.92rem;white-space:nowrap}
.deck-now{color:var(--navy);font-size:1.14rem}
.deck-of{margin-left:2px}
.deck-title{
  font-weight:800;color:var(--ink);font-size:.94rem;
  max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.deck-btn{
  flex:none;width:40px;height:40px;border-radius:999px;cursor:pointer;
  border:0;background:var(--navy-soft);color:var(--navy);
  font-size:15px;line-height:1;transition:background .15s,transform .15s;
}
.deck-btn:hover{background:var(--gold-soft);color:var(--gold);transform:scale(1.06)}
.deck-btn:active{transform:scale(.94)}

/* --- step list in the rail ------------------------------------------------ */
/* Selectors carry `.rail` because site.css styles `.rail li a` at a higher
   specificity than a bare `.step-list a` — without it the links fall back to
   display:block and the step numbers collide with their titles. */
.step-list{list-style:none;margin:0;padding:0;counter-reset:step}
.step-list li{counter-increment:step}
.rail .step-list a{
  display:flex;align-items:baseline;
  padding:5px 9px;border-radius:8px;color:var(--muted);
  text-decoration:none;font-weight:700;line-height:1.35;
}
.rail .step-list a::before{
  content:counter(step);flex:none;min-width:1.5em;margin-right:9px;
  font-size:.78em;font-weight:900;color:var(--gold);text-align:right;
}
.rail .step-list a:hover{background:var(--navy-soft);color:var(--ink)}
.rail .step-list a[aria-current]{background:var(--gold-soft);color:var(--ink)}

/* --- scratchpad ----------------------------------------------------------- */
/* Docked along the bottom, not down the side. Lesson content is mostly
   vocabulary and conjugation tables, so horizontal space is the scarce thing
   here — a side panel narrow enough to leave room would be too narrow to
   type in, and one wide enough to type in clips the third column off every
   table. What gets written here is a few short lines, so height is enough. */
:root{--pad-h:min(34vh,300px)}
.pad{
  position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--pad-h);
  display:flex;flex-direction:column;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:var(--shadow-2);
}
.pad[hidden]{display:none}
/* Sit beside the lesson list rather than over it, while it is on screen. */
@media (min-width:901px){
  .pad{left:var(--rail-w)}
  :root[data-rail="off"] .pad{left:0}
}
.pad-head{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:12px 12px 12px 16px;border-bottom:1px solid var(--line);
}
.pad-name{
  font-weight:900;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-right:auto;
}
.pad-saved{font-size:.72rem;font-weight:800;color:var(--gold)}
.pad-btn{
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
  font:inherit;font-size:.76rem;font-weight:800;cursor:pointer;
  padding:.32em .7em;border-radius:999px;transition:color .15s,border-color .15s;
}
.pad-btn:hover{color:var(--navy);border-color:var(--navy)}
.pad-text{
  flex:1 1 auto;width:100%;resize:none;border:0;outline:0;
  padding:18px 16px;background:transparent;color:var(--ink);
  font-family:'Nunito',ui-sans-serif,system-ui,sans-serif;
  font-size:calc(1.06rem * var(--scale));line-height:1.55;font-weight:600;
}
.pad-text::placeholder{color:var(--muted);opacity:.7;font-weight:600}

/* Give the lesson back the space the pad took, so nothing hides behind it. */
:root[data-pad="open"] main.reading{padding-bottom:calc(var(--pad-h) + 96px)}
:root[data-pad="open"] .deck-bar{bottom:calc(var(--pad-h) + 18px)}

/* --- narrow --------------------------------------------------------------- */
@media (max-width:900px){
  :root{--pad-h:min(46vh,340px)}
  :root[data-view="deck"]{--scale:1.18;--measure:none}
  :root[data-view="deck"][data-class-mode="1"]{--scale:1.4}
  .deck-title{display:none}
}

@media (prefers-reduced-motion:reduce){
  :root[data-view="deck"] .step[data-current]{animation:none}
  .deck-btn{transition:none}
  .deck-btn:hover,.deck-btn:active{transform:none}
}

/* Deck view is a screen thing; print the whole lesson. */
@media print{
  :root[data-view="deck"] .step{display:block}
  .deck-bar,.pad{display:none !important}
}