/* Tikrar — one stylesheet. Mobile-first, calm, RTL.
 * Palette: ink #0B1B2B · teal #12A594 · mist #F5F8FA · line #E4EBF1
 *          muted #5B7286 · amber #F0A500 · coral #E4572E
 */

:root {
  --ink: #0B1B2B;
  --teal: #12A594;
  --teal-dark: #0E897B;
  --mist: #F5F8FA;
  --line: #E4EBF1;
  --muted: #5B7286;
  --amber: #F0A500;
  --coral: #E4572E;

  --card: #FFFFFF;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(11, 27, 43, .06), 0 6px 20px rgba(11, 27, 43, .06);
  --shadow-lg: 0 10px 40px rgba(11, 27, 43, .16);
  --tap: 44px;
  --font: system-ui, "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --tabbar-h: 64px;
  --appbar-h: 58px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  /* The frame is ONE full-height flex column: the app bar, the banner and the tab bar are real
     flow boxes glued to the screen edges, so nothing rides WebKit's sliding visual viewport.
     Only #view scrolls. */
  display: flex;
  flex-direction: column;
  height: 100%;                  /* fallback where dvh is unknown (html carries height: 100%) */
  min-height: 100%;              /* ICB-bounded floor: can only fill the shell up to the layout viewport,
                                    never grow it past the visible area or hide the flex:none tab bar */
  height: 100dvh;
  overflow: hidden;
  position: relative;            /* containing block for the .waiting / .modal scrims */
}

/* Installed web apps only: the large viewport (100lvh) IS the full screen and is never
   larger than it, so the shell reaches the real bottom edge. Scoped to standalone so a
   browser tab — where lvh can exceed the visible area as the URL bar hides — is untouched.
   One unit, no arithmetic, comparing nothing: it cannot overshoot. */
@media (display-mode: standalone) {
  body { min-height: 100lvh; }
}

a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.3; margin: 0 0 .4em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .8em; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

/* ── App bar ──────────────────────────────────────────────────────────── */
.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: calc(var(--appbar-h) + env(safe-area-inset-top));   /* 58px of content + the top inset */
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  flex: none;
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand__mark img { display: block; border-radius: 8px; }
.brand__name { font-weight: 700; font-size: 1.18rem; letter-spacing: .3px; }
/* The app version beside the wordmark: 0.72rem against the name's 1.18rem, so it reads as a footnote to
   the name, not a second title. Baseline-aligned and nowrap so it can never wrap the name or grow the
   58px bar. Colour #8FA3B3 on the ink #0B1B2B bar = 6.68:1 contrast (AA for normal text). */
.brand__ver {
  align-self: baseline;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  color: #8FA3B3;
}
.brand__ver[hidden] { display: none; }
.appbar__end { display: flex; align-items: center; gap: 8px; min-width: 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
}
.chip--offpeak { background: rgba(18, 165, 148, .18); color: #7FE6DA; }
.chip--peak { background: rgba(240, 165, 0, .18); color: #FFD27A; }
.chip--done { background: rgba(18, 165, 148, .14); color: var(--teal-dark); }
.chip--due { background: rgba(228, 87, 46, .14); color: var(--coral); }
.chip--muted { background: rgba(91, 114, 134, .14); color: var(--muted); }

/* The name IS the account link (an <a href="#/me">) — 44px tall so it is a real tap target. */
.usermenu__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 10px 4px 4px;
  background: rgba(255, 255, 255, .08);
  border: 0; border-radius: 999px; color: #fff; cursor: pointer;
  font: inherit; font-size: .9rem;
  min-width: 0;   /* the pill may shrink so the name truncates instead of overflowing the header */
}
.usermenu__btn:hover { text-decoration: none; background: rgba(255, 255, 255, .14); }
.usermenu__avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--teal); color: #fff; font-weight: 700;
}
/* Earned streak freezes beside the name — display only, never a control. The count is the signal (tabular
   digits so it never jitters); the emoji is decoration and the full meaning lives on the insights screen. */
.usermenu__freeze {
  display: inline-flex; align-items: center; gap: 2px;
  flex: 0 0 auto;   /* the badge keeps its box; a long name shrinks and truncates instead (T-071) */
  font-size: .9rem; font-variant-numeric: tabular-nums; opacity: .95;
}
.usermenu__freeze[hidden] { display: none; }
/* A fixed-height appbar carries ONE line of the learner's name, never two: never wrap — truncate with
   an ellipsis when there is genuinely no room. min-width:0 lets this flex item shrink below its
   content size (wrapping was the old failure); max-width stops a very long name from ever pushing
   the pill off the screen edge. */
.usermenu__name {
  min-width: 0; max-width: 128px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Layout ───────────────────────────────────────────────────────────── */
.view {
  width: 100%;          /* definite width: an auto-margin flex item is not stretched by the column
                           container, so #view used to size to max-content and overflow the screen. */
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px;
  /* the ONE scrolling region: it takes the space between the bars and owns the scroll */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* In a session the scroller hands its padding to .review-body, so the session footer is flush.
   The flex column is scoped HERE, not on .view, so every other screen keeps its plain block flow.
   A review session must stay flex: a single-question card is SHORTER than the screen, so
   .review-body { flex: 1 1 auto } is what pushes the pinned .session-footer down to the real bottom
   edge; without it the ratings would float mid-screen with dead space under them — the exact
   "where do I tap" fail this ticket exists to kill. */
.view.is-session { padding: 0; display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .view { max-width: 880px; padding-top: 26px; }
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 0 14px;
  box-shadow: var(--shadow);
}
.page-title { margin: 2px 0 14px; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stack > * + * { margin-top: 10px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background .12s ease, transform .06s ease;
}
.btn:hover { background: var(--mist); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn--primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); }
.btn--block { width: 100%; }
.btn--lg { min-height: 56px; font-size: 1.08rem; border-radius: 14px; }
.btn--danger { color: var(--coral); border-color: rgba(228, 87, 46, .4); }
.btn--danger:hover { background: rgba(228, 87, 46, .08); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--sm { min-height: 38px; padding: 0 12px; font-size: .88rem; border-radius: 9px; }

/* The bottom of the account screen: a hairline separator and one neutral, full-width Sign out.
   Signing out is deliberately NOT a tap away from the daily loop (it used to live in a menu on
   the bar). No red here — red is reserved for the one irreversible action. */
.account-footer { margin: 32px 0 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.account-footer .btn { min-height: 48px; }

/* The account switch-off (D-25) — the one irreversible action, so it wears the reserved red and sits last.
   The red sentence is the only thing said about what happens: nothing about decks. */
.switch-off { margin: 18px 0 8px; }
.switch-off .btn { min-height: 48px; }
.switch-off__warn { margin: 10px 2px 0; text-align: center; color: var(--coral); font-size: .88rem; line-height: 1.4; }

/* ── Forms ────────────────────────────────────────────────────────────── */
.field { display: block; margin: 0 0 12px; }
.field__label { display: block; margin: 0 0 6px; font-size: .92rem; font-weight: 600; color: var(--ink); }
.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(18, 165, 148, .18); }
.inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inline-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 420px) { .inline-3 { grid-template-columns: 1fr; } }

/* ── Stats / tiles ────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; }
.tile__num { font-size: 1.7rem; font-weight: 700; color: var(--teal-dark); line-height: 1.1; }
.tile__num--amber { color: var(--amber); }
.tile__lbl { font-size: .82rem; color: var(--muted); margin-top: 4px; }

/* ── Deck list ────────────────────────────────────────────────────────── */
.deck {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  color: inherit; box-shadow: var(--shadow);
}
.deck:hover { text-decoration: none; border-color: var(--teal); }
.deck__swatch { width: 12px; align-self: stretch; border-radius: 999px; background: var(--teal); flex: none; }
.deck__main { flex: 1 1 auto; min-width: 0; }
.deck__name { font-weight: 700; display: block; }
.deck__sub { font-size: .84rem; color: var(--muted); }
.deck__meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Audience ("who is this deck for?") ───────────────────────────────── */
.chip--level { background: rgba(18, 165, 148, .14); color: var(--teal-dark); }
.audience-card h2 { margin-top: 0; }
.audience-current { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; }
.hint { font-size: .82rem; color: var(--muted); margin: 6px 0 0; }

/* ── Review ───────────────────────────────────────────────────────────── */
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 10px 0 16px; }
.progress__bar { height: 100%; background: var(--teal); width: 0; transition: width .25s ease; }

.qcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.qcard__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.qcard__deck { font-weight: 700; }
.qcard__type { font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(18, 165, 148, .14); color: var(--teal-dark); }
.qcard__path { font-size: .82rem; color: var(--muted); }
.qcard__prompt { font-size: 1.18rem; line-height: 1.75; white-space: pre-wrap; word-wrap: break-word; }
.qcard__choices { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.qcard__choices li { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); }
/* MCQ options are the answer surface: real one-shot buttons, green when correct / red when wrong. */
.qcard__choices--interactive li { padding: 0; border: 0; background: transparent; }
.choice {
  display: block; width: 100%; text-align: start; font: inherit; color: var(--ink);
  padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--mist); cursor: pointer;
}
.choice:hover { border-color: var(--teal); }
.choice[disabled] { cursor: default; }
.choice--correct { border-color: #1f9d55; background: rgba(31, 157, 85, .14); color: #14713d; }
.choice--wrong { border-color: var(--coral); background: rgba(228, 87, 46, .14); color: #a8331a; }
.choice--correct:hover, .choice--wrong:hover { border-color: inherit; }

.answer { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.answer__label { font-size: .8rem; font-weight: 700; color: var(--teal-dark); letter-spacing: .5px; margin-bottom: 4px; }
.answer__body { white-space: pre-wrap; word-wrap: break-word; }
.citations { margin: 12px 0 0; padding: 10px 12px; border-inline-start: 3px solid var(--amber); background: rgba(240, 165, 0, .07); border-radius: 8px; }
.citations__label { font-size: .78rem; font-weight: 700; color: #9a6b00; }
.citations q { display: block; margin-top: 4px; font-style: italic; }

/* ── Merged answer card: answer + explanation + memory hook + quoted sources, one block ── */
.merged { margin-top: 14px; display: grid; gap: 12px; }
.merged__label { font-size: .8rem; font-weight: 700; color: var(--teal-dark); letter-spacing: .5px; margin-bottom: 4px; }
.merged__label--hook { display: flex; align-items: center; gap: 6px; color: #9a6b00; }
.merged__hook-icon { font-size: 1rem; line-height: 1; }
.merged__answer { font-weight: 600; white-space: pre-wrap; word-wrap: break-word; }
.merged__body { white-space: pre-wrap; word-wrap: break-word; }
.merged__explanation { }
.merged__mnemonic { padding: 8px 12px; border-inline-start: 3px solid var(--amber);
  background: rgba(240, 165, 0, .10); border-radius: 8px; }
.merged .citations { margin-top: 0; }

/* Four equal columns at EVERY width — the four buttons are the scheduler's ONLY input, so a
   wrapped 2×2 row (a vertical mis-tap moving the interval ±2) is not allowed. The row never
   breaks; below ~420px the four TARGETS only slim the interval label, never themselves:
   min-height stays 62px, comfortably over the 44 CSS px a thumb needs (WCAG 2.2 SC 2.5.8 floor 24). */
.ratings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.rate {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; min-height: 62px; padding: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); font: inherit; cursor: pointer;
}
.rate:hover { border-color: var(--teal); background: var(--mist); }
.rate[disabled] { opacity: .5; cursor: progress; }
.rate__name { font-weight: 700; }
.rate__int { font-size: .78rem; color: var(--muted); }
.rate--again { border-inline-start: 4px solid var(--coral); }
.rate--hard { border-inline-start: 4px solid var(--amber); }
.rate--good { border-inline-start: 4px solid var(--teal); }
.rate--easy { border-inline-start: 4px solid var(--teal-dark); }
@media (max-width: 420px) {
  .ratings { gap: 4px; }
  .rate { padding: 6px 2px; }
  .rate__int { font-size: .68rem; }   /* the label step shrinks — the target height never does */
}

/* ── Blurred "secret text" reveal (answer / explanation) ───────────────────
   Cosmetic obfuscation on the learner's own device: the text is already in the
   payload, it is blurred until tapped. The blur IS the retrieval cue, so it stays;
   the dot texture that used to sit over it is gone (decoration, not a cue). The
   masked surface carries a faint brand tint and a teal border so it reads as a live
   "tap to reveal", never as plain disabled grey text. */
.reveal { margin-top: 14px; }
.reveal__btn {
  position: relative; display: block; width: 100%; text-align: start; font: inherit;
  color: inherit; cursor: pointer; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist);
}
.reveal__btn:hover { border-color: var(--teal); }
.reveal.is-revealed .reveal__btn { background: var(--card); border-color: var(--teal); }
/* Masked: a live, tappable surface — faint teal wash, teal border, no dot texture. */
.reveal:not(.is-revealed) .reveal__btn { background: rgba(18, 165, 148, .06); border-color: rgba(18, 165, 148, .35); }
.reveal:not(.is-revealed) .reveal__btn:hover { border-color: var(--teal); }
.reveal__label { display: block; font-size: .8rem; font-weight: 700; color: var(--teal-dark);
  letter-spacing: .5px; margin-bottom: 4px; }
.reveal__content { display: block; white-space: pre-wrap; word-wrap: break-word;
  transition: filter .18s ease, opacity .18s ease; }
.reveal:not(.is-revealed) .reveal__content { filter: blur(6px); opacity: .55; user-select: none; pointer-events: none; }
.reveal__hint { display: inline-block; margin-top: 8px; font-size: .78rem; font-weight: 700;
  color: var(--teal-dark); letter-spacing: .3px; }
.reveal__hide {
  margin-top: 6px; padding: 3px 10px; font: inherit; font-size: .78rem; font-weight: 600;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
}
.reveal__hide:hover { color: var(--ink); border-color: var(--teal); }

/* ── Multi-blank cloze: one tappable chip per blank, each revealed on its own tap ── */
.blank-tools { margin-top: 10px; }
.blank {
  display: inline-block; vertical-align: baseline; margin: 0 2px; padding: 2px 10px;
  font: inherit; line-height: 1.3; cursor: pointer; border-radius: 8px;
  border: 1px solid var(--teal); background: rgba(18, 165, 148, .12); color: var(--teal-dark);
}
.blank:hover { background: rgba(18, 165, 148, .22); }
.blank__mask { letter-spacing: 2px; font-weight: 700; }
.blank.is-revealed { background: rgba(31, 157, 85, .14); border-style: solid; border-color: #1f9d55; color: #14713d; }
.blank__answer { font-weight: 600; }

/* ── True/False answer buttons — two, coloured on choice; never the rating row ── */
.tf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.tf__btn {
  min-height: 48px; padding: 10px 12px; font: inherit; font-weight: 700; cursor: pointer;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
}
.tf__btn:hover { border-color: var(--teal); }
.tf__btn--correct { border-color: #1f9d55; background: rgba(31, 157, 85, .14); color: #14713d; }
.tf__btn--wrong { border-color: var(--coral); background: rgba(228, 87, 46, .14); color: #a8331a; }
.tf__btn--correct:hover, .tf__btn--wrong:hover { border-color: inherit; }
.tf__verdict { margin: 8px 0 0; font-weight: 700; }
.tf__verdict--ok { color: #14713d; }
.tf__verdict--no { color: var(--coral); }

@media (prefers-reduced-motion: reduce) {
  .reveal__content { transition: none; }
  .psources__body { animation: none; }
  .spinner { animation-duration: 2s; }
}

/* ── Waiting frame ─────────────────────────────────────────────────────────
   The one visible state for a request that may have to WRITE a question: a spinner plus a
   single plain-language line, on screen from the first frame. It floats over the current
   screen so a cancel or a failure leaves the learner where they were (no jump). */
.waiting {
  position: absolute; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(245, 248, 250, .72);
}
.waiting__card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 24px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.spinner {
  width: 28px; height: 28px; border-radius: 999px;
  border: 3px solid var(--line); border-top-color: var(--teal);
  animation: spin .8s linear infinite;
}
.waiting__line { margin: 0; color: var(--ink); font-weight: 600; }
/* The one way out of the frame: a plain, calm secondary action (44px target via .btn), no colour. */
.waiting__cancel { margin-top: 4px; }
.empty > .spinner { margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty { text-align: center; padding: 40px 18px; color: var(--muted); }
.empty h2 { color: var(--ink); }

/* ── Tree / topics ────────────────────────────────────────────────────── */
.topic { margin: 0 0 6px; }
.topic__name { font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
.topic__name::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); flex: none; }
.concept {
  display: flex; align-items: flex-start; gap: 10px; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--card);
}
.concept__title { font-weight: 600; flex: 1 1 auto; min-width: 0; word-wrap: break-word; }
.concept__stats { font-size: .8rem; color: var(--muted); }
.concept__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.concept__actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.conf-bar { height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; width: 72px; margin-top: 5px; }
.conf-bar--wide { width: 100%; margin-top: 6px; }
.conf-bar__fill { height: 100%; background: var(--teal); }

details.formbox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin-bottom: 12px; overflow: hidden; }
details.formbox > summary { padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
details.formbox > summary::-webkit-details-marker { display: none; }
details.formbox > summary::after { content: "＋"; color: var(--teal); font-weight: 700; }
details.formbox[open] > summary::after { content: "−"; }
details.formbox > .formbox__body { padding: 0 16px 16px; }

/* Bank item */
.item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; background: var(--mist); }
.item--flagged { border-color: var(--coral); background: rgba(228, 87, 46, .05); }
.item__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: .8rem; }
.item__q { font-weight: 600; }
.item__a { color: var(--teal-dark); }
.item__flag { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* ── Toasts & banner ──────────────────────────────────────────────────── */
.toasts {
  position: fixed; inset-inline: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 80; pointer-events: none; padding: 0 14px;
}
.toast {
  pointer-events: auto;
  max-width: 460px; width: 100%;
  padding: 12px 14px; border-radius: 12px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
  font-size: .92rem; animation: toast-in .18s ease;
}
.toast--error { background: var(--coral); }
.toast--ok { background: var(--teal-dark); }
.toast button { background: none; border: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.banner {
  position: sticky; top: 0; z-index: 30;
  padding: 10px 16px; background: rgba(228, 87, 46, .12); color: #8f3016;
  border-bottom: 1px solid rgba(228, 87, 46, .3); font-size: .9rem; text-align: center;
}

/* ── Bottom tabs ──────────────────────────────────────────────────────── */
.tabbar {
  z-index: 45;
  display: grid; grid-template-columns: repeat(4, 1fr);      /* Home · Review · Decks · Stats */
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);                /* the bottom inset, applied once */
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  flex: none;                                               /* the bar is glued to the real bottom */
  overflow: visible;                                        /* the raised Review CTA is not clipped */
}
.tabbar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); font-size: .72rem; min-height: var(--tap);
}
.tabbar__item:hover { text-decoration: none; }
.tabbar__item.is-active { color: var(--teal-dark); font-weight: 700; }
.tabbar__icon { display: grid; place-items: center; line-height: 0; }
.tabbar__icon svg { display: block; width: 22px; height: 22px; }
.tabbar__label { line-height: 1.1; }

/* Labels for older readers and for an unknown age; below 45 the class is dropped and only the
   icons remain — see shouldShowLabels() / LABELS_RECOGNITION_GATE in app.js. Icons grow a little
   once the words are gone so an unlabelled bar still feels deliberate. */
.tabbar:not(.is-labeled) .tabbar__label { display: none; }
.tabbar:not(.is-labeled) .tabbar__icon svg { width: 26px; height: 26px; }

/* Review is the one raised, filled main action: a 56×56 teal disc with a 28px icon, lifted so the
   disc reads as standing out of the bar while its own label still sits inside the bar. */
.tabbar__item--cta .tabbar__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--teal); color: #fff;
  margin-top: -10px;
  box-shadow: 0 4px 12px rgba(18, 165, 148, .35);
}
.tabbar__item--cta .tabbar__icon svg { width: 28px; height: 28px; }
.tabbar__item--cta.is-active { color: var(--teal-dark); }
.tabbar__item--cta .tabbar__label { font-weight: 700; }

/* ── In-session footer ──────────────────────────────────────────────────
   Inside a review session the tab bar steps aside and this bar owns the bottom edge: the one exit
   (End session, on the muted strip) above the four ratings — the scheduler's ONLY input — with the
   bottom inset applied here. It is the last box of the scroller and sticks to its bottom edge, so
   the four targets are never a scroll away. */
.review-body { flex: 1 1 auto; padding: 16px 14px; }
.session-footer {
  position: sticky; bottom: 0; z-index: 35; flex: none;
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.session-footer__exit {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);                /* 44px — the exit is a real target, never a text link */
  background: var(--mist); border-bottom: 1px solid var(--line);
}
.session-footer .ratings { margin: 8px 14px 12px; }
/* The footer stands taller than the tab bar it replaces, so a toast must clear it (the stack is a
   fixed overlay offset by the bar's height and would otherwise cover the exit and the ratings). */
.view.is-session ~ .toasts { margin-bottom: 64px; }

/* Login / centered auth */
.auth { max-width: 420px; margin: 6vh auto 0; }
.auth .brand--big { text-align: center; margin-bottom: 18px; }
.auth .brand--big img { border-radius: 18px; }
.auth__title { font-size: 1.4rem; text-align: center; }
.form-error {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(228, 87, 46, .1); color: #8f3016;
  border: 1px solid rgba(228, 87, 46, .3);
  font-size: .9rem; text-align: start;
}

/* Utilities */
.hidden, [hidden] { display: none !important; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.js-json { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-word; background: var(--mist); border: 1px solid var(--line); border-radius: 8px; padding: 10px; max-height: 260px; overflow: auto; direction: ltr; text-align: left; }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { text-align: start; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 600; }

@media (min-width: 760px) {
  /* A genuinely floating bar — not a card glued to the bottom edge (rounded on top only, with grey
     strips down its sides and under it). Every corner is rounded, there is NO top border, one soft
     shadow, and the bar sits in the flow with a real gutter on all four sides: 12px at minimum,
     capped at 620px and centred. The bottom gutter carries the safe-area inset as a MARGIN on the
     element, so the bar floats above the home indicator instead of padding it away inside itself.
     Nothing is position:fixed, nothing covers the content, and there is no motion. */
  .tabbar {
    width: calc(100% - 24px);
    max-width: 620px;
    margin-inline: auto;
    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    padding-bottom: 0;
    height: var(--tabbar-h);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(11, 27, 43, .14);
  }
}

/* ── Item content: own language + direction inside the English LTR shell ── */
.qcard__prompt, .qcard__choices li, .answer__body, .citations q,
.item__q, .item__a, .deck__name { text-align: start; }

/* ── Question-type chips (multi-select) ───────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipchip {
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
  font: inherit; font-size: .86rem; cursor: pointer;
}
.chipchip:hover { border-color: var(--teal); }
.chipchip.is-on { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }

/* ── Confirm dialog ───────────────────────────────────────────────────── */
.modal {
  position: absolute; inset: 0; z-index: 100; padding: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 27, 43, .5);
}
.modal__card { width: 100%; max-width: 420px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px; }
.modal__msg { margin: 0 0 16px; }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Stats: tiles, heatmap, bars, per-deck, type mix ──────────────────── */
.home-heat { margin: 4px 0 10px; }
.home-heat h3 { font-size: .95rem; margin: 0; }
.tiles--5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .tiles--5 { grid-template-columns: repeat(5, 1fr); } }

.heatmap { display: grid; grid-template-columns: auto repeat(7, 1fr); gap: 3px; align-items: center; }
.heatmap__rowlbl { font-size: .72rem; color: var(--muted); white-space: nowrap; padding-inline-end: 4px; }
.heatmap__wd { font-size: .68rem; color: var(--muted); text-align: center; }
.heat { height: 15px; border-radius: 3px; background: var(--line); }
.heat--empty { background: transparent; }
.heat--0 { background: var(--line); }
.heat--1 { background: rgba(18, 165, 148, .25); }
.heat--2 { background: rgba(18, 165, 148, .45); }
.heat--3 { background: rgba(18, 165, 148, .70); }
.heat--4 { background: var(--teal-dark); }
.heatmap__legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.heatmap__legend .heat { width: 15px; }

.bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bar__fill { height: 100%; background: var(--teal); border-radius: 999px; }

.statdeck { padding: 12px 0; border-bottom: 1px solid var(--line); }
.statdeck:last-child { border-bottom: 0; }
.statdeck__head { display: flex; align-items: center; gap: 10px; }
.statdeck__head .deck__swatch { align-self: auto; height: 18px; width: 10px; }
.statdeck__name { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.statdeck__nums { font-size: .84rem; color: var(--muted); margin-top: 4px; }

.typerow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label count" "bar bar"; gap: 3px 8px; margin-bottom: 10px; }
.typerow__label { grid-area: label; font-size: .88rem; }
.typerow__count { grid-area: count; font-size: .82rem; color: var(--muted); }
.typerow__bar { grid-area: bar; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.typerow__fill { display: block; height: 100%; background: var(--teal); border-radius: 999px; }

/* ── Topic hierarchy (tree + controls) ────────────────────────────────── */
.topic-tree { display: flex; flex-direction: column; gap: 6px; }
.topic-node__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.topic-node__name { font-weight: 600; }
.topic-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; margin-inline-start: 8px; }
.concept-groups .topic__name { margin-top: 14px; }

/* ── Bulk concept editor (line-based) ─────────────────────────────────── */
.ed-help { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.ed-help__body { margin-top: 8px; }
.ed-help__body ul { margin: 6px 0 0; padding-inline-start: 18px; }
.ed-help__body li { margin-bottom: 4px; }
.ed-newlang-field { max-width: 280px; margin-bottom: 10px; }
.ed-lines { width: 100%; min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .82rem; line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.ed-count { margin: 8px 0; }
.ed-errors { background: rgba(230, 90, 90, .06); border: 1px solid var(--coral); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.ed-error { color: var(--coral); font-size: .8rem; margin: 2px 0; }
.ed-toolbar { margin-bottom: 10px; }
.scan-control { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.dropzone { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; }
.dropzone.is-over { border-color: var(--teal); background: rgba(18, 165, 148, .06); }

.ed-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 12px; background: var(--ink); color: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); }
.ed-bar__text { font-weight: 700; }
.ed-bar__actions { display: flex; gap: 8px; }


/* ══════════════════════════════════════════════════════════════════════════
 * PRIMER — the interactive teaching card for a brand-new concept.
 * ══════════════════════════════════════════════════════════════════════════ */
.primer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 16px; }
.primer__head { display: grid; gap: 4px; }
.primer__title { font-size: 1.35rem; margin: 0; }
.primer__crumb { font-size: .82rem; color: var(--muted); }
.primer__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.primer__lead { font-size: 1.12rem; line-height: 1.6; font-weight: 600; margin: 0; padding: 12px 14px;
  background: var(--mist); border-inline-start: 4px solid var(--teal); border-radius: 10px; }
.primer__block-title { font-size: .8rem; font-weight: 700; color: var(--teal-dark); letter-spacing: .6px;
  text-transform: uppercase; margin: 0 0 8px; }

/* Mechanism: numbered, connected step chips (tap to expand). */
.psteps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 8px; }
.psteps::before { content: ""; position: absolute; inset-inline-start: 17px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.pstep { position: relative; }
.pstep__head { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: start;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.pstep__num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--teal); color: #fff; font-size: .82rem; font-weight: 700; z-index: 1; }
.pstep__text { font-weight: 600; }
.psteps > .pstep:not(:last-child)::after { content: ""; }

/* Scale bar with a marked value and an optional value2 band. */
.pscale { display: grid; gap: 6px; }
.pscale__label { font-weight: 600; }
.pscale__bar { position: relative; height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pscale__band { position: absolute; top: 0; bottom: 0; background: rgba(18, 165, 148, .30); }
.pscale__mark { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-inline-start: -2px; border-radius: 2px;
  background: var(--teal-dark); box-shadow: 0 0 0 2px #fff; }
.pscale__ends { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.pscale__value { font-weight: 700; color: var(--teal-dark); }
.pscale__value-range { font-weight: 600; }

/* Trap = a distinct caution block. */
.primer__trap { padding: 12px 14px; border-inline-start: 4px solid var(--coral); background: rgba(228, 87, 46, .07); border-radius: 10px; }
.primer__trap-label { font-size: .78rem; font-weight: 700; color: var(--coral); letter-spacing: .4px; margin-bottom: 4px; }
.primer__trap-body { font-weight: 500; }
.primer__where { font-size: .9rem; color: var(--muted); margin: 0; }

/* Source quote — collapsed by default. */
.primer__quote { border: 1px solid var(--line); border-radius: 10px; background: var(--mist); padding: 10px 12px; }
.primer__quote-summary { font-size: .82rem; font-weight: 700; color: var(--amber); cursor: pointer; list-style: none; }
.primer__quote-summary::-webkit-details-marker { display: none; }
.primer__quote-summary::after { content: " ▾"; }
.primer__quote[open] .primer__quote-summary::after { content: " ▴"; }
.primer__quote-body { margin: 8px 0 0; padding-inline-start: 10px; border-inline-start: 3px solid var(--amber); }
.primer__quote-body q { font-style: italic; }
.primer__quote-url { display: block; margin-top: 6px; font-size: .8rem; word-break: break-all; }

.primer--empty { gap: 10px; }

/* The compact, skippable pre-question strip for a brand-new concept. */
.prestrip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 8px 10px; border: 1px dashed var(--teal); border-radius: var(--radius-sm);
  background: rgba(18, 165, 148, .06); }
.prestrip__show { flex: 1 1 auto; text-align: start; font: inherit; font-weight: 600; color: var(--teal-dark);
  cursor: pointer; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; }
.prestrip__show:hover { background: rgba(18, 165, 148, .13); }
.prestrip__skip { flex: none; font: inherit; font-size: .84rem; color: var(--muted); cursor: pointer;
  padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; }
.prestrip__skip:hover { color: var(--ink); background: rgba(11, 27, 43, .05); }

/* ── The collapsed "Primer & sources" panel under every question ───────────── */
.psources { margin: 14px 0 0; }
.psources__head { display: block; }
.psources__toggle { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
  font: inherit; font-weight: 600; color: var(--teal-dark); cursor: pointer; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); }
.psources__toggle:hover { border-color: var(--teal); background: rgba(18, 165, 148, .09); }
.psources__icon { flex: none; font-size: 1rem; line-height: 1; }
.psources__label { flex: none; }
.psources__state { flex: 1 1 auto; text-align: end; font-weight: 500; font-size: .84rem; color: var(--muted); }
.psources__body { display: grid; gap: 12px; margin-top: 10px; animation: psources-in .16s ease; }
@keyframes psources-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.psources__actions { display: grid; }
.psources__error { margin: 0; }
.psources .primer { box-shadow: none; }

.citations__item { margin-top: 6px; }
.citations__url { display: block; margin-top: 3px; font-size: .8rem; word-break: break-all; dir: ltr; }

/* ══════════════════════════════════════════════════════════════════════════
 * Account toggle (a real switch) + sub-tabs
 * ══════════════════════════════════════════════════════════════════════════ */
.priming-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 4px; }
.priming-row__label { font-weight: 600; }
.switch { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 1px solid var(--line);
  border-radius: 999px; background: var(--line); cursor: pointer; transition: background .15s ease; }
.switch__knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow); transition: inset-inline-start .15s ease; }
.switch.is-on { background: var(--teal); border-color: var(--teal); }
.switch.is-on .switch__knob { inset-inline-start: 25px; }
.switch[disabled] { opacity: .6; cursor: progress; }

.subtabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--mist); border: 1px solid var(--line);
  border-radius: 999px; margin: 0 0 14px; }
.subtab { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
  padding: 7px 16px; border-radius: 999px; }
.subtab.is-active { background: var(--card); color: var(--teal-dark); box-shadow: var(--shadow); }

/* ══════════════════════════════════════════════════════════════════════════
 * INSIGHTS — hour bars, weekday strip, concept lists, topics, gaps, latency.
 * ══════════════════════════════════════════════════════════════════════════ */
.tiles--6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .tiles--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tiles--6 { grid-template-columns: repeat(6, 1fr); } }

.ihours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 150px; margin-top: 6px; }
.ihour__col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ihour { display: flex; align-items: flex-end; width: 100%; height: 120px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ihour__bar { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--teal); }
.ihour--empty .ihour__bar { background: var(--line); }
.ihour__x { font-size: .55rem; color: var(--muted); }
.ihour__tip { position: absolute; z-index: 5; bottom: 100%; inset-inline-start: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: .72rem; background: var(--ink); color: #fff; padding: 4px 8px; border-radius: 8px; }

.iweek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.iweek__day { text-align: center; padding: 10px 4px; background: var(--mist); border-radius: 10px; }
.iweek__name { font-size: .76rem; font-weight: 700; color: var(--muted); }
.iweek__acc { font-size: 1.05rem; font-weight: 700; color: var(--teal-dark); }
.iweek__n { margin-top: 2px; }

.iconcepts { display: grid; gap: 8px; }
.iconcept { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); }
.iconcept__title { font-weight: 600; flex: 1 1 auto; min-width: 0; word-break: break-word; }
.iconcept__meta { font-size: .82rem; color: var(--muted); }

.itable-wrap { overflow-x: auto; }

.igaps { display: grid; gap: 10px; }
.igaps__streaks { display: flex; gap: 6px; flex-wrap: wrap; }
.igaps__list { display: grid; gap: 8px; }
/* The chain's current state, said once: at risk / freeze used / reset. The words carry the meaning;
   colour only reinforces it. */
.igaps__state { margin: 0; font-size: .9rem; font-weight: 600; }
.igaps__state--risk { color: var(--amber); }
.igap { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--mist); }
.igap__range { font-weight: 600; }
.igap__meta { margin-top: 2px; }

.ilat { display: grid; gap: 8px; }
.ilat__head { display: flex; gap: 6px; flex-wrap: wrap; }
.ilat__row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.ilat__label { font-weight: 600; }
.ilat__val { color: var(--teal-dark); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
 * DUPLICATES panel on the deck page
 * ══════════════════════════════════════════════════════════════════════════ */
.dupes { display: grid; gap: 12px; margin-top: 10px; }
.dupes__msg { margin: 8px 0 0; }
.dupe { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--mist); }
.dupe__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dupe__score { font-weight: 700; color: var(--teal-dark); }
.dupe__reason { margin: 6px 0; }
.dupe__grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 10px 0; }
@media (min-width: 560px) { .dupe__grid { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.dupe__side { padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.dupe__title { font-weight: 600; }
.dupe__topic { }
.dupe__actions { display: flex; justify-content: flex-end; }

/* ══════════════════════════════════════════════════════════════════════════
 * SHARE & IMPORT + onboarding wizard
 * ══════════════════════════════════════════════════════════════════════════ */
.deck-line { position: relative; }
.deck-line__actions { display: flex; justify-content: flex-end; gap: 8px; margin: -6px 0 12px; }
.deck__export { }

.import-box { display: grid; gap: 10px; }
.import-status { margin: 0; }
.import-warnings { display: grid; gap: 4px; }
.import-warn { margin: 0; color: var(--amber); }

.wizard { display: grid; gap: 14px; }
.wizard-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .wizard-grid { grid-template-columns: 1fr 1fr; } }
.wizard-card { display: grid; gap: 8px; align-content: start; padding: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.wizard-card__title { margin: 0; }
.wizard-card__desc { margin: 0; }
.wizard-file { margin-top: 4px; }