/* The deck screen, copied from the approved mock (T-242). */
  .d2 .num{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.04em}
  .d2 .h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
  .d2 .ring{position:relative;display:flex;align-items:center;justify-content:center;margin:6px auto 0}
  .d2 .ring svg{transform:rotate(-90deg)}
  .d2 .ring .in{position:absolute;text-align:center}
  .d2 .ring .in b{display:block;font-size:54px;line-height:1}
  .d2 .ring .in i{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8FA084;font-weight:700}
  .d2 .zero{font-size:11px;color:#8FA084}
    .d2 .ring .in b{font-size:62px}
.d2 .ptile{background:rgba(201,244,90,.09);border:1px solid rgba(201,244,90,.18);border-radius:14px;padding:11px 13px;margin-top:8px}
.d2 .ptile .prow{display:flex;align-items:center;gap:10px}
.d2 .ptile .pt{flex:1;min-width:0}
.d2 .ptile .pt b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d2 .ptile .pt i{font-style:normal;font-size:11px;color:#8FA084}
.d2 .ptile .duepill{font-size:11px;font-weight:700;color:#0A0C0B;background:#C9F45A;border-radius:999px;padding:3px 7px}
.d2 .ptile .zero{font-size:11px;color:#8FA084}
.d2 .ptile .chev{width:14px;height:14px;stroke:#8FA084;fill:none;stroke-width:2;flex:0 0 auto}
.d2 .icrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.d2 .round{display:flex;align-items:center;gap:9px}
.d2 .switch{width:42px;height:26px;border-radius:99px;background:#C9F45A;position:relative;flex:0 0 auto}
.d2 .switch i{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:99px;background:#0A0C0B}
.d2 .switch.off{background:#2B332F}
.d2 .switch.off i{right:auto;left:3px;background:#101513}
.d2 .swl{font-size:12px;color:#EDF2EE;font-weight:600;white-space:nowrap}
.d2 .swl i{display:block;font-style:normal;font-size:10.5px;color:#8FA084;font-weight:400;margin-top:1px}
/* T-299 — align with base .iconbtn (44 × 44). */
.d2 .iconbtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--hair,#2C3531);background:var(--card,#141917);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.d2 .iconbtn svg{width:20px;height:20px;stroke:var(--ink,#E7EDE9);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.d2 .addbtn2{width:44px;height:44px;border-radius:999px;background:#C9F45A;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.d2 .addbtn2 svg{width:22px;height:22px;stroke:#0A0C0B;stroke-width:2.6;fill:none;stroke-linecap:round}
.d2 .archive{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:auto;padding:16px 0 96px;
  color:#7E8C86;font-size:11px;font-weight:600;letter-spacing:.02em}
.d2 .archive svg{width:17px;height:17px;stroke:#7E8C86;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.d2 .sheetcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:304px;
  background:#161C19;border:1px solid #2A332F;border-radius:20px;padding:16px}
.d2 .sheetcard h3{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
/* the app shows it with the live bar: no 96px foot while the shell bar floats */
.d2 .archive { padding-bottom: 12px; margin-top: 18px; }

/* the sheets and the children the mock draws (T-242) */
.deck-sheets { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.deck-sheets > * { pointer-events: auto; }
.sheetback { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; }
.sheetcard { position: relative; left: auto; top: auto; transform: none; width: min(304px, 88vw); background: #141917;
  border: 1px solid #232B27; border-radius: 18px; padding: 16px; color: #EDF2EE; }
.sheetcard h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

/* ── T-295 · keyboard-aware sheet, the Decks screen only ─────────────────
 * Every sheet on this screen (wizard · Scan-into · AI sentence · Import · New
 * deck) owns a field, so the phone keyboard is up while it is being finished.
 * iOS/Android Chrome shrink only the VISUAL viewport for the keys; a
 * position:fixed sheet keeps its layout-viewport geometry, so its bottom lands
 * behind the keyboard. app.js publishes the numbers from window.visualViewport:
 *   --vv-height / --vv-offset-top   the visual viewport itself
 *   --sheet-max                     tallest card while it is only being read
 *   --sheet-max-focus               tallest card once a field is focused (keys up)
 *   --sheet-top                     where the lifted card starts, under the notch
 * The card is a flex column: title → scrolling body → fixed foot. The foot never
 * scrolls, so Close stays reachable; Create stays a real submit button, sticky at
 * the foot of the body. Scoped to .deck-sheets--decks: every other screen keeps
 * the plain dialog rules above. */
.deck-sheets--decks .sheetback {
  position: fixed; left: 0; right: 0; bottom: auto;
  top: var(--vv-offset-top, 0px);
  height: var(--vv-height, 100dvh);
  background: rgba(0,0,0,.62);
  display: flex; align-items: flex-start; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.deck-sheets--decks .sheetcard {
  position: relative; left: auto; top: auto; transform: none;
  margin-block: auto;                       /* centred while it is read */
  width: min(304px, 88vw);
  max-height: var(--sheet-max, 84vh);
  background: #141917;
  border: 1px solid #232B27; border-radius: 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #EDF2EE;
}
.deck-sheets--decks .sheetcard h3 { flex: 0 0 auto; padding: 16px 16px 0; margin: 0 0 12px;
  font-size: 15px; font-weight: 700; }
.deck-sheets--decks .sheetbody { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; padding: 0 16px 16px; }
.deck-sheets--decks .sheetfoot { flex: 0 0 auto;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hair, #1E2622); display: flex; flex-direction: column; gap: 8px; }
/* the form's one action rides the foot of the scrolling body while the fields move under it:
   Create stays a real submit button, so Enter and the keyboard's Go still create the deck */
.deck-sheets--decks .sheetbody form .btn--primary {
  position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2;
  box-shadow: 0 -12px 0 16px #141917, 0 24px 0 16px #141917;
}
/* T-324 — the new-deck wizard's second card is taller than a phone. Its three actions ride the foot of
   the scrolling body, so Back, Skip and Create deck are never drawn half-cut under the card's edge and
   never hide behind the tab bar while the questions scroll under them. */
.deck-sheets--decks .sheetbody .formactions {
  position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2;
  background: #141917; padding-top: 10px;
  box-shadow: 0 -10px 0 12px #141917, 0 10px 0 12px #141917;
}
/* a focused field WITH the keys up (html.has-keys, published from the visual viewport) means the card has
   to clear the keyboard: lift it under the notch and shorten it. Without keys — a select opens a picker,
   not a keyboard — the card stays where it was, so a tap lands on the field it started on (T-340). */
html.has-keys .deck-sheets--decks .sheetcard:focus-within {
  margin-block: 0 auto;
  margin-top: var(--sheet-top, 12px);
  max-height: var(--sheet-max-focus, 60vh);
}
.sheetopt { display: block; width: 100%; text-align: start; padding: 13px 14px; margin-bottom: 8px; border-radius: 12px;
  background: #1B211E; border: 1px solid #2A332F; color: #EDF2EE; font-size: 14px; font-weight: 600; }
.sheetclose { width: 100%; margin-top: 6px; padding: 11px; border-radius: 12px; background: transparent;
  border: 1px solid #2A332F; color: #B7C4BD; font-size: 13px; }
.d2 .kids { margin: 6px 0 2px; }
.d2 .kidrow { display: flex; align-items: center; gap: 9px; padding: 9px 2px; text-decoration: none; color: inherit;
  border-top: 1px solid #1E2622; }
.d2 .kidrow b { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d2 .kidrow i { font-style: normal; font-size: 11px; color: #8FA084; }
.d2 .kdot { width: 7px; height: 7px; border-radius: 99px; background: #2B332F; flex: 0 0 auto; }
.d2 .kdot.on { background: #C9F45A; }
.d2 .prow { cursor: pointer; }
.d2 .chev { transition: transform .18s ease; }
.d2.deck .h1 { text-align: center; margin-top: 14px; }
.d2.deck .meta { text-align: center; }
.d2 .archive { background: none; border: 0; color: #7E8C86; font: inherit; font-size: 12.5px; width: 100%; cursor: pointer; }
.tools-fold { margin: 18px 0 96px; border-top: 1px solid #1E2622; }
.tools-fold > summary { padding: 14px 2px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8FA084; }
.tools-fold__body { display: grid; gap: 12px; }

/* the page stays black behind the deck, as the mock draws it */
.d2.deck, .d2.deck .body { background: transparent; }
.d2.deck .body { padding: 10px 18px 0; }

/* children stay folded until the tile is opened */
.d2 .kids { display: none; }

/* the deck screen is edge-to-edge black, as the mock is */
body.is-deck #view, body.is-deck #view > *, .d2.deck, .d2.deck .body, .d2.deck main {
  background: transparent !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

/* the deck header is the mock's: DECK at the left, the face at the right */
.d2.deck .mark { text-transform: uppercase; letter-spacing: .16em; font-size: 15px; font-weight: 700; }
body.is-deck .appbar { display: none; }
.d2.deck .body { padding-top: 14px; }

/* the wizard's rows: a mark, a title with its line under it, a chevron */
.wizrows { display: grid; gap: 9px; }
.wizrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 12px;
  border-radius: 14px; background: #171D1A; border: 1px solid #232B27; color: #EDF2EE; }
.wizico { width: 38px; height: 38px; border-radius: 11px; background: #212925; display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; }
.wizico svg { stroke: #C9F45A; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wiztxt { flex: 1; min-width: 0; }
.wiztxt b { display: block; font-size: 14.5px; font-weight: 700; }
.wiztxt i { font-style: normal; font-size: 11.5px; color: #8FA084; }
.wizchev { color: #6E7C75; font-size: 20px; line-height: 1; }

/* the share popup: two switch rows, then the way to send it */
.shrows { display: grid; gap: 4px; }
.shrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; padding: 12px 2px;
  background: none; border: 0; border-top: 1px solid #1E2622; color: #EDF2EE; }
.shrow:first-child { border-top: 0; }
.shtxt { flex: 1; min-width: 0; }
.shtxt b { display: block; font-size: 14px; font-weight: 700; }
.shtxt i { font-style: normal; font-size: 11px; color: #8FA084; }
.shasend { margin-top: 10px; padding-top: 10px; border-top: 1px solid #1E2622; }
.shasend .kicker { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8FA084; margin-bottom: 6px; }

/* the header takes the top the appbar leaves, and the report word steps aside as it does on home */
body.is-deck #view { padding-top: 0 !important; }
body.is-deck .report-mark { display: none; }
body.is-deck .appbar { display: none; }
.d2.deck .body { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.tools-fold > summary { list-style: none; }
.tools-fold > summary::-webkit-details-marker { display: none; }

/* the deck owns the top edge: the header sits where the mock puts it */
body.is-deck #view { padding-top: 6px !important; }
.d2.deck header { padding-top: 0 !important; margin-top: 0 !important; }
.d2.deck .body { padding-top: 6px !important; }
/* the tools keep out of the mock's picture until the page is scrolled */
.tools-fold { margin-top: 34px; padding-bottom: 130px; }

/* the deck's content starts under the header, not centred in the screen */
.d2.deck main { justify-content: flex-start !important; }

/* the deck's column starts at the top: stretch, never centre */
.d2.deck { align-items: stretch !important; }

/* the play carries this deck's count in its corner */
.tabbar__fab { position: absolute; }
.tabbar__count { position: absolute; right: -2px; bottom: -2px; min-width: 19px; height: 19px; border-radius: 99px;
  background: #0A0C0B; color: #C9F45A; font-size: 10.5px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; padding: 0 4px; }
.tools-fold { margin-top: 90px; }

.shasend, .shsend { margin-top: 10px; padding-top: 10px; border-top: 1px solid #1E2622; }
.shsend > summary { list-style: none; font-size: 11.5px; color: #8FA084; cursor: pointer; }
.shsend > summary::-webkit-details-marker { display: none; }
.shsend .inline-2 { display: grid; gap: 8px; margin-top: 8px; }
.shsend .field__label { font-size: 10.5px; color: #8FA084; }
.shsend .input, .shsend .select { width: 100%; background: #0F1412; border: 1px solid #232B27; color: #EDF2EE;
  border-radius: 10px; padding: 9px 10px; font-size: 13px; }

/* ── the decks screen: the same body as a deck, one row per deck ───────── */
.d2.decks-screen main { justify-content: flex-start !important; }
.d2.decks-screen .sumline { display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 8px; font-size: 12px; color: #8FA084; }
.d2.decks-screen .sumline b { color: #C9F45A; font-size: 12px; font-weight: 700; }
.d2.decks-screen .sect { margin-top: 22px; }
.d2 .addbtn2--sm { width: 34px; height: 34px; }
.d2 .addbtn2--sm svg { width: 18px; height: 18px; }
.d2.decks-screen .sect .addbtn2 { margin-bottom: -4px; }
.d2 .tile-row { border-top: 0; padding: 11px 13px; margin-top: 8px; border-radius: 14px;
  background: rgba(201,244,90,.07); border: 1px solid rgba(201,244,90,.14); }
.d2 .tile-row .t b { font-size: 14.5px; }
.d2 .tile-row .chev { width: 15px; height: 15px; stroke: #7E8C86; fill: none; stroke-width: 2; }
.d2 .duepill--act { border: 0; font: inherit; cursor: pointer; background: #C9F45A; color: #0A0C0B; }
.d2.decks-screen .footnote { margin-top: 26px; font-size: 11.5px; color: #6E7C75; text-align: center; }
.newsdeck .kicker { margin: 14px 0 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8FA084; }
/* T-324 — the reader card's four questions own an 8 px rhythm (`.wizpick`); the wizard's 14 px kicker
   margins pushed the last question below the button row, so a learner never saw it. */
.newsdeck .wizpick .kicker { margin: 0 0 6px; }
/* T-324 — the reader card's intro is a sentence, not a headline: at body size it wrapped to four lines
   and pushed the last question under the card's action row */
.newsdeck .sheetintro { font-size: 12.5px; line-height: 1.5; margin: 0 0 8px; color: #B7C4BD; }
/* T-324 — the wizard's second card is the only sheet on this screen that fills the phone. Capped so its
   own Close button and its actions never end up behind the tab bar; the body scrolls a little instead. */
.deck-sheets--decks .sheetcard.sheetcard--wizard { max-height: calc(var(--vv-height, 100dvh) - 132px); }
/* T-324 — three actions share one row on the reader card: tighter side padding keeps «Create deck» on one line */
.newsdeck .formactions .btn { padding-inline: 8px; }
.newsdeck .formactions .btn--primary { white-space: nowrap; }
.newsdeck .field__label { font-size: 10.5px; color: #8FA084; }
.newsdeck .input, .newsdeck .select { width: 100%; background: #0F1412; border: 1px solid #232B27; color: #EDF2EE;
  border-radius: 10px; padding: 9px 10px; font-size: 13px; }
.newsdeck .btn { width: 100%; margin-top: 8px; }

/* a sheet never runs off the screen: it scrolls inside itself */
.sheetcard { max-height: 84vh; overflow-y: auto; overscroll-behavior: contain; }
.newsdeck__import { margin-top: 14px; border-top: 1px solid #1E2622; padding-top: 10px; }
.newsdeck__import > summary { list-style: none; font-size: 11.5px; color: #8FA084; cursor: pointer; }
.newsdeck__import > summary::-webkit-details-marker { display: none; }
/* a deck row gives its name the room it needs */
.d2 .tile-row { gap: 10px; }
.d2 .tile-row > svg:first-child { width: 30px; height: 30px; flex: 0 0 auto; }
.d2 .tile-row .t { flex: 1 1 auto; }

/* a deck's name takes up to two lines rather than dying at ten letters */
.d2 .tile-row .t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: clip; line-height: 1.25; }
.d2 .tile-row { align-items: center; }

.d2 .tile-row .t { text-decoration: none; color: inherit; }
.d2 .laterbtn { background: none; border: 0; color: #7E8C86; font: inherit; font-size: 12px; padding: 6px 2px; cursor: pointer; }

/* ── the decks screen in his order: the ring, the +, my decks, shared with me ── */
.d2.decks-screen .ring { margin-top: 6px; }
.d2.decks-screen main > .meta { text-align: center; margin-top: 2px; }
.addwrap { display: flex; justify-content: center; margin: 16px 0 6px; }
.d2 .addbtn2--big { width: 52px; height: 52px; }
.d2 .addbtn2--big svg { width: 26px; height: 26px; }
.d2.decks-screen .deckrow { border-top: 1px solid #1E2622; }
.d2.decks-screen .deckrow:first-child { border-top: 0; }
.d2.decks-screen .deckrow .t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.wizpick { display: grid; gap: 8px; margin-top: 4px; }
.wizpick .kicker { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8FA084; }
.wizpick .input, .wizpick .select { width: 100%; background: #0F1412; border: 1px solid #232B27; color: #EDF2EE;
  border-radius: 10px; padding: 9px 10px; font-size: 13px; }
.wizpick .btn { width: 100%; margin-top: 4px; }

/* T-323 — the AI door: the count slider and the two-button foot of its second card. */
.aiwiz { display: block; }
.airange__row { display: flex; align-items: center; gap: 10px; }
.airange__row .airange { flex: 1 1 auto; min-width: 0; accent-color: #12A594; }
.airange__end { font-size: 11px; color: #8FA084; flex: 0 0 auto; }
.airange__num { font-size: 15px; color: #EDF2EE; min-width: 28px; text-align: right; flex: 0 0 auto; }
.aiwiz__acts { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 4px; }
.aiwiz__acts .btn { margin-top: 0; }

/* a row's marks have sizes of their own — an unsized svg eats the whole row */
.d2 .deckrow .chev { width: 15px; height: 15px; stroke: #7E8C86; fill: none; stroke-width: 2; flex: 0 0 auto; }
.d2.decks-screen .deckrow .t { flex: 1 1 auto; min-width: 0; }
.d2.decks-screen .deckrow .t b { display: block; font-size: 15px; font-weight: 600; color: #EDF2EE; }
.d2.decks-screen .deckrow .t i { font-style: normal; font-size: 11.5px; color: #8FA084; }
.d2.decks-screen .deckrow .duepill, .d2.decks-screen .deckrow .zero { flex: 0 0 auto; }

/* ── T-354 — «Waiting for more text» ────────────────────────────────────────────────────────────
   A card whose own text is too short to write a question from. Amber, never alarm-red: it is a
   place to paste, not a fault, and the fold is absent when it holds nothing. */
.d2 .ptile--waiting{background:rgba(232,196,106,.07);border-color:rgba(232,196,106,.22)}
.d2 .ptile--waiting .pt b{white-space:nowrap}
/* the row is a button, so it carries its own reset: the fold's rows are not links to elsewhere,
   they open the card's own editor in place */
.d2 .kidrow--wait{background:none;border:0;border-top:1px solid rgba(232,196,106,.14);width:100%;
  padding:10px 2px;align-items:baseline;font:inherit;color:inherit;text-align:start;cursor:pointer}
.d2 .kidrow--wait b{flex:0 1 auto;max-width:38%}
.d2 .kidrow--wait .wtext{flex:1 1 auto;min-width:0;font-style:normal;font-size:11.5px;color:#A8B3A0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d2 .kidrow--wait .wlen{flex:0 0 auto;font-style:normal;font-size:11px;color:#C8A24A;
  font-variant-numeric:tabular-nums;text-align:end}