/* ============================================================
   ElliniCards — design tokens
   ============================================================ */

:root {
  color-scheme: light dark;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Palatino's Greek was cut by Hermann Zapf — it sets Greek beautifully and
     ships on Apple systems, so no webfont round-trip. */
  --font-greek: Palatino, "Palatino Linotype", "Iowan Old Style", "Book Antiqua", Georgia, serif;

  --bg: #f5f4f0;
  --surface: #ffffff;
  --surface-2: #faf8f4;
  --surface-3: #f0eee8;

  --ink: #1b1a18;
  --ink-2: #55524c;
  --ink-3: #8b877f;

  --line: #e5e1d9;
  --line-2: #d5d0c5;

  --accent: #14507d;
  --accent-hover: #0f3f63;
  --accent-soft: #e9f0f6;
  --accent-line: #bcd2e4;

  --ok: #2c6a4c;
  --ok-soft: #e8f1ec;
  --ok-line: #b6d4c3;

  --warn: #85601a;
  --warn-soft: #f7efdd;
  --warn-line: #e0cda1;

  --bad: #98392f;
  --bad-soft: #f9eae7;
  --bad-line: #e5c0b8;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(28, 25, 20, 0.05);
  --shadow-md: 0 1px 2px rgba(28, 25, 20, 0.04), 0 4px 12px rgba(28, 25, 20, 0.06);
  --shadow-lg: 0 2px 4px rgba(28, 25, 20, 0.05), 0 12px 32px rgba(28, 25, 20, 0.10);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131311;
    --surface: #1d1c1a;
    --surface-2: #232220;
    --surface-3: #2b2926;

    --ink: #f1eee8;
    --ink-2: #b2ada3;
    --ink-3: #837e75;

    --line: #322f2b;
    --line-2: #423e39;

    --accent: #82b6de;
    --accent-hover: #9cc7e9;
    --accent-soft: #1a2833;
    --accent-line: #2f4759;

    --ok: #83c39d;
    --ok-soft: #17241d;
    --ok-line: #2c4436;

    --warn: #d8b56d;
    --warn-soft: #262016;
    --warn-line: #453a24;

    --bad: #dd9186;
    --bad-soft: #291b19;
    --bad-line: #4a302b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

/* Class-level display rules outrank the hidden attribute — make hidden win. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: calc(24px + var(--safe-b));
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   Top bar
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  padding: calc(10px + var(--safe-t)) 16px 10px;
}

.topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "brand streak account"
    "tabs  tabs   tabs";
  align-items: center;
  gap: 10px;
}

.brand { grid-area: brand; }
.tabs { grid-area: tabs; }
.streak-badge { grid-area: streak; }
.account-btn { grid-area: account; }

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Held off the page entirely: it exists to define the symbol the three logo
   instances reference, not to be seen. */
.brand-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/*
 * The logo, at two sizes.
 *
 * `currentColor` inside the symbol paints the word "Ελληνι", which sits on the
 * page background and so has to follow the theme; the color comes from here.
 * The two cards keep their own colors, because a white card and a blue card
 * are the drawing rather than the theme.
 */
.brand-logo {
  display: block;
  height: 67px;
  width: 210px;
  color: var(--ink);
  flex: none;
}

/* The top bar carries the name and nothing else.
   The mark was here too, at 26px — two overlapping rotated cards with letters
   in them, which is mush at that size. On a phone it was also the only thing
   left once the name gave way to the tab strip, so the app's own header said
   nothing about which app it was. The name is the part that has to survive;
   it shrinks rather than disappearing. */
.brand-name {
  font-family: var(--font-greek);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.brand-name-tail { color: var(--accent); }

@media (max-width: 420px) {
  .brand-name { font-size: 1.05rem; }
}

@media (max-width: 340px) {
  .brand-name { font-size: 0.95rem; }
}

/* Decorative, and on a phone it was taking the room the streak now needs —
   the wordmark alone says what the app is. */
@media (max-width: 519px) {
}

/* A streak is a fact about the account and the day, not about the session in
   front of you, so it lives in the chrome beside the avatar. It used to sit
   inside the session bar, which left it orphaned in an empty row whenever
   there was no session to draw. */
.streak-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  white-space: nowrap;
}

/* Account lives in the header rather than the tab strip: it is about who you
   are, not where you are in the app, and it needs to be reachable from
   anywhere — signing out, your password, and invite codes all live behind it. */
.account-btn {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.account-btn:hover {
  border-color: var(--accent-line);
  color: var(--ink);
}

.account-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.account-initials { line-height: 1; }

/* Segmented control — auto-columns so hidden tabs don't leave gaps */
.tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  background: var(--surface-3);
  border-radius: 10px;
  padding: 3px;
}

.tab-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.83rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.tab-btn:hover { color: var(--ink); }

.tab-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 700px) {
  /* Underlines sized to the label read as tabs; a full 1fr column under a
     five-letter word reads as an accident. Phones keep equal columns, where
     the width is doing tap-target work. */
  .mode-tabs { flex-wrap: nowrap; gap: 0 6px; }
  .study-mode-btn,
  .deck-tab-btn { flex: 0 1 auto; padding-inline: 16px; }

  .topbar-inner {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "brand tabs streak account";
    gap: 16px;
  }
  .tabs { grid-auto-columns: auto; justify-self: end; }
  .tab-btn { padding: 7px 18px; }
}

/* ============================================================
   Layout
   ============================================================ */

#app {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 16px 0;
}

.view { display: none; }
.view.active { display: block; animation: fade-in 0.22s ease; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   Form controls (shared)
   ============================================================ */

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input::placeholder, textarea::placeholder { color: var(--ink-3); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

select {
  appearance: none;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

textarea { resize: vertical; line-height: 1.5; }

/* ============================================================
   Study controls
   ============================================================ */

.study-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}

.control-group { flex: 1 1 150px; min-width: 0; }

.control-group select {
  font-size: 0.85rem;
  font-weight: 550;
  padding: 8px 30px 8px 11px;
  border-radius: 999px;
  background-color: var(--surface);
}

/* Toggle switch */
/* Two named states rather than a switch for one of them. It sat in the filter
   row looking like a filter, when it decides what the app is for: today's
   scheduled queue, or open practice across the deck. */
.scope-switch {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  gap: 3px;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}

.scope-btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 13px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.scope-btn:hover { color: var(--ink-2); }

.scope-btn.is-on {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.scope-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.summary-actions .btn-primary,
.summary-actions .btn-secondary { flex: 1 1 150px; }


/* ============================================================
   Daily goal & streak
   ============================================================ */

.streak-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-bottom: 12px;
}

.streak-goal { flex: 1; min-width: 0; }

.streak-goal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

/* The label carries the exercise's share of the session, so it varies in
   length. It may never wrap: a second line grows the strip and shifts the card
   under the reader's thumb. It gives way to the count instead. */
.streak-goal-head .streak-goal-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.streak-goal-head .streak-goal-count { flex: none; }

.streak-goal-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.streak-goal-count {
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.streak-track {
  height: 5px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.streak-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.35s ease, background 0.2s;
}
.streak-fill.is-met { background: var(--ok); }

.streak-num {
  font-family: var(--font-greek);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}

.streak-label {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Milestones & activity (Stats) */

.milestone {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
}

.milestone-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.milestone-now { font-size: 0.92rem; font-weight: 650; color: var(--ink); }
.milestone-next { font-size: 0.74rem; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.milestone-track {
  height: 5px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.milestone-fill { height: 100%; background: var(--accent); border-radius: 999px; }

.milestone-note { margin: 9px 0 0; font-size: 0.8rem; color: var(--ink-2); }

.activity-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 56px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
}

.activity-day { flex: 1; height: 100%; display: flex; align-items: flex-end; }

.activity-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.8;
  min-height: 3px;
}

.activity-bar.is-empty { background: var(--line-2); opacity: 1; }

.pack-scene { width: 100%; margin-top: 8px; font-size: 0.82rem; }

/* ============================================================
   Practice mode selector
   ============================================================ */

/* Second-level navigation. The top-level tabs are a filled segmented control;
   these are deliberately lighter — an underline on a bare row — so the two
   levels read as a hierarchy rather than as two competing tab strips. */
/* Seven exercises do not fit one phone-width row. They wrap onto a second
   line rather than scrolling sideways: a scrolling strip hides drills the
   learner has never seen, and dragging it rubber-bands the whole page. */
.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.study-mode-btn,
.deck-tab-btn {
  flex: 1 1 auto;
  padding-inline: 10px;
}

/* Eight exercises wrap as an even 4 + 4 rather than six then a stranded two.
   Scoped to phone widths: the wide-screen block lives earlier in this file, so
   an unscoped rule here would override it. */
@media (max-width: 699px) {
  #view-study .study-mode-btn { flex: 1 1 22%; }
}

/* The deck's three sections always fit one row. */
#view-deck .mode-tabs { flex-wrap: nowrap; }

.study-mode-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 6px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.study-mode-btn:hover { color: var(--ink-2); }

/* Adaptive is not one drill among eight — it is the app choosing for you, and
   the one most people should leave on. It gets a filled chip so it reads as a
   different kind of control from the manual drills beside it, and stays tinted
   rather than gray when something else is selected. */
#modetab-adaptive {
  color: var(--accent);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

#modetab-adaptive::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
}

#modetab-adaptive.active {
  background: var(--accent-soft);
  color: var(--accent);
}

#modetab-adaptive:hover { color: var(--accent-hover); }

.study-mode-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ============================================================
   Deck meter
   ============================================================ */

.deck-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  /* Anchors the "why this exercise" panel, which hangs below without
     displacing anything. */
  position: relative;
}

.deck-meter-track {
  flex: 1;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.deck-meter-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.deck-count {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Why the adaptive picker chose this exercise — quiet, one line, above the
   card, so the reason is available without becoming the point. */
/* Rides in the progress row rather than claiming a line of its own — an extra
   row above the card cost about 30px of card height on every screen. */
/* Why this exercise, for this card, right now.
   It used to live in a title attribute — written, and on a phone unreachable,
   because there is no hover. It is absolutely positioned so opening it cannot
   move the card or the grading buttons underneath. */
.why-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 6;
  padding: 10px 13px;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.study-badge:hover { background: var(--surface-3); }
.study-badge[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .study-badge[aria-expanded="true"] { color: #10222e; }
}

.study-badge {
  flex: none;
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.feedback-why {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--ink-3);
  font-style: italic;
}

.undo-btn {
  flex: none;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
}

.undo-btn:hover { background: var(--surface-3); color: var(--ink); }

.leech-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
}

.leech-text {
  margin: 0 0 10px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.leech-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.parked-dot {
  margin-left: 7px;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: 2px;
}

/* ============================================================
   Study plan
   ============================================================ */

.plan-now {
  grid-column: 1 / -1;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: 16px 18px;
}

.plan-now.is-clear {
  background: var(--ok-soft);
  border-color: var(--ok-line);
}

.plan-headline {
  margin: 0 0 5px;
  font-family: var(--font-greek);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
}

.plan-now.is-clear .plan-headline { color: var(--ok); }

.plan-detail {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.forecast-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 76px;
  padding: 0 2px;
}

.forecast-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  height: 100%;
  min-width: 0;
}

.forecast-bar {
  width: 100%;
  background: var(--accent-line);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}

.forecast-day.is-today .forecast-bar { background: var(--accent); }

.forecast-tick {
  font-size: 0.62rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.forecast-note {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 0.8rem;
  color: var(--ink-3);
}

.history-row {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 12px 14px;
  margin: -6px 0 8px;
}

.history-head {
  margin: 0 0 8px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
}

.history-empty { margin: 0; font-size: 0.83rem; color: var(--ink-3); }

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.82rem;
  padding-left: 9px;
  border-left: 2px solid var(--line-2);
}

.history-item.is-correct { border-left-color: var(--ok); }
.history-item.is-hard    { border-left-color: var(--warn); }
.history-item.is-wrong   { border-left-color: var(--bad); }

.history-when {
  flex: none;
  width: 54px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.history-what { color: var(--ink-2); }

/* ============================================================
   Kept readings and transcripts
   ============================================================ */

.archive {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.archive-title {
  margin: 0 0 12px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 600;
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archive-item {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.archive-item:hover { border-color: var(--accent-line); background: var(--surface-2); }

.archive-item-title {
  font-family: var(--font-greek);
  font-size: 1rem;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.archive-item-meta {
  flex: none;
  font-size: 0.76rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.debrief-mined {
  margin: 12px 0 0;
  font-size: 0.83rem;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}

/* ============================================================
   End of session
   ============================================================ */

.session-summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 22px;
  text-align: center;
}

.summary-title {
  margin: 0 0 20px;
  font-family: var(--font-greek);
  font-size: 1.3rem;
  font-weight: 600;
}

.summary-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.summary-figure { display: flex; flex-direction: column; gap: 2px; }

.summary-num {
  font-family: var(--font-greek);
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.summary-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

.summary-subtitle {
  margin: 0 0 8px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  font-weight: 600;
}

.summary-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 0 0 18px;
}

.summary-words span {
  font-family: var(--font-greek);
  font-size: 0.95rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
}

.summary-next {
  margin: 0 0 16px;
  font-size: 0.86rem;
  color: var(--ink-2);
}

#summary-again { width: 100%; max-width: 260px; }

/* ============================================================
   Flashcard
   ============================================================ */

.flashcard {
  perspective: 1400px;
  /* Sized off the viewport rather than a fixed band, so the grading buttons
     stay above the fold on a short phone instead of needing a scroll after
     every flip. The subtracted constant is the chrome stacked above it. */
  height: clamp(240px, calc(100vh - 520px), 370px);
  height: clamp(240px, calc(100svh - 520px), 370px);
  cursor: pointer;
  margin-bottom: 18px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.2, 0.85, 0.25, 1);
  transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }

.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 28px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.flashcard:active .flashcard-face { box-shadow: var(--shadow-sm); }

.flashcard-back {
  transform: rotateY(180deg);
  background: var(--surface-2);
}

.card-category {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}

.card-main {
  font-family: var(--font-greek);
  font-size: clamp(1.75rem, 6.5vw, 2.35rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.005em;
  color: var(--ink);
  max-width: 100%;
  overflow-wrap: break-word;
}

.card-sub {
  margin-top: 10px;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}

.card-notes {
  margin-top: 14px;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 42ch;
}

.card-notes:empty { display: none; }

.card-example {
  margin-top: 18px;
  border-left: 2px solid var(--accent-line);
  padding: 2px 0 2px 12px;
  text-align: left;
  max-width: 40ch;
}

.card-example .ex-gr {
  font-family: var(--font-greek);
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}

.card-example .ex-en {
  margin-top: 3px;
  font-size: 0.82rem;
  color: var(--ink-3);
}

/* The card asked by ear. Sized to sit where the word would have been, so the
   card does not change height when the prompt changes medium. */
.card-listen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.listen-play {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s;
}
.listen-play:hover { background: var(--surface-3); }
.listen-play:active { transform: scale(0.94); }
.listen-play svg { width: 26px; height: 26px; }

.listen-hint {
  font-size: 0.82rem;
  color: var(--ink-3);
}

.listen-reveal {
  appearance: none;
  border: 0;
  background: none;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.listen-reveal:hover { color: var(--ink-2); }

.flip-hint {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .flashcard-inner { transition: none; }
  .view.active { animation: none; }
}

/* ============================================================
   Speak button
   ============================================================ */

.speak-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 50%;
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.speak-btn svg { width: 16px; height: 16px; }
.speak-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

.flashcard-front .speak-btn { position: absolute; top: 13px; right: 14px; }
body.no-speech .speak-btn { display: none; }

/* The counterpart to hiding every speaker button: say so once, where the
   silence is, rather than leaving a language app looking like it forgot audio. */
.speech-note {
  display: none;
  margin: 0 0 14px;
  padding: 9px 12px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-2);
}

body.no-speech .speech-note { display: block; }

.keyboard-note { margin-top: 6px; }

/*
 * A single ratio against a limit, which is a meter — not a ring. A ring showing
 * one number against its cap is a two-slice pie: it costs more space than a bar
 * and still needs the number written beside it before anyone can read it.
 *
 * The fill grows as the month is spent and takes the severity with it. The
 * track is the neutral surface step rather than a tint of the fill's own hue,
 * which is what the Account card and the session strip already do — and what
 * survives dark mode, where a soft tint of the accent sits so close to the
 * card behind it that the bar disappears.
 */
.quota { display: block; margin: -6px 0 16px; }

.quota-text {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.quota-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.quota-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.quota.is-low .quota-fill { background: var(--warn); }
.quota.is-low .quota-text { color: var(--warn); }
.quota.is-out .quota-fill { background: var(--bad); }
.quota.is-out .quota-text { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  .quota-fill { transition: none; }
}

/* ============================================================
   Drill panels (type / gap-fill / gender)
   ============================================================ */

.drill-gap {
  display: inline-block;
  min-width: 2.4em;
  border-bottom: 2px solid var(--accent-line);
  color: var(--accent);
  text-align: center;
}

.drill-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: 26px 22px 22px;
  margin-bottom: 18px;
  text-align: center;
}

.drill-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.drill-prompt {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 20px;
  color: var(--ink);
}

.drill-hint {
  font-size: 0.85rem;
  color: var(--ink-3);
  margin: 0 0 16px;
}

.drill-input {
  font-family: var(--font-greek);
  font-size: 1.25rem !important;
  text-align: center;
  padding: 12px 14px !important;
  margin-bottom: 12px;
}

/* An answered drill disables its input, and a browser greys a disabled field
   out — which made your own answer look like the placeholder rather than like
   the thing you just wrote. It stays readable. */
.drill-input:disabled,
#type-input:disabled,
#cloze-input:disabled {
  -webkit-text-fill-color: var(--ink-2);
  color: var(--ink-2);
  opacity: 1;
}

/* What you actually wrote, above what it should have been. "Almost" is not
   much use on its own when the attempt it refers to is off the top of the
   panel. */
.feedback-given {
  margin: 0 0 2px;
  font-size: 0.84rem;
  color: var(--ink-3);
}
.feedback-given b {
  font-family: var(--font-greek);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
}

.drill-panel .btn-primary { width: 100%; }

.drill-foot {
  margin: 12px 0 0;
  font-size: 0.72rem;
  color: var(--ink-3);
}

.cloze-sentence {
  font-family: var(--font-greek);
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 0 0 8px;
  color: var(--ink);
}

.cloze-blank {
  display: inline-block;
  min-width: 68px;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
  text-align: center;
}

.cloze-en {
  font-size: 0.88rem;
  color: var(--ink-3);
  margin: 0 0 14px;
}

.gender-word {
  font-family: var(--font-greek);
  font-size: 2.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.gender-translit {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-3);
  margin: 6px 0 22px;
}

.gender-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.gender-options:has(.gender-btn:nth-child(4)) {
  grid-template-columns: repeat(2, 1fr);
}

.gender-btn {
  font-family: var(--font-greek);
  font-size: 1.5rem;
  font-weight: 600;
  padding: 16px 8px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}

.gender-btn:active { transform: scale(0.97); }
.gender-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.gender-btn.is-answer { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.gender-btn.is-chosen-wrong { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.gender-btn:disabled { cursor: default; }

/* ============================================================
   Answer feedback
   ============================================================ */

.answer-feedback {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 18px;
  margin-bottom: 18px;
  text-align: left;
}

.answer-feedback.is-correct { border-left-color: var(--ok); background: var(--ok-soft); }
.answer-feedback.is-close { border-left-color: var(--warn); background: var(--warn-soft); }
.answer-feedback.is-wrong { border-left-color: var(--bad); background: var(--bad-soft); }

.feedback-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.feedback-verdict {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.is-correct .feedback-verdict { color: var(--ok); }
.is-close .feedback-verdict { color: var(--warn); }
.is-wrong .feedback-verdict { color: var(--bad); }

.feedback-answer {
  font-family: var(--font-greek);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.feedback-note {
  margin: 8px 0 0;
  font-size: 0.87rem;
  color: var(--ink-2);
}

.feedback-detail {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.5;
}

.answer-feedback .card-example { margin-top: 12px; }

.feedback-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.feedback-actions .btn-primary { flex: 1; }

/* ============================================================
   Review actions
   ============================================================ */

.review-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.review-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--r-md);
  padding: 13px 8px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
  border: 1px solid;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.review-btn svg { width: 19px; height: 19px; }
.review-btn:active { transform: scale(0.975); }

.review-btn.wrong { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.review-btn.hard { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.review-btn.correct { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }

.kbd-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  font-size: 0.73rem;
  color: var(--ink-3);
}

.kbd-hint kbd {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 650;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink-2);
}

@media (max-width: 560px) {
  .kbd-hint { display: none; }
}

/* ============================================================
   Empty states
   ============================================================ */

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--ink-3);
}

.empty-state svg {
  width: 34px;
  height: 34px;
  color: var(--accent);
  opacity: 0.55;
  margin-bottom: 14px;
}

.empty-title {
  font-family: var(--font-greek);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 6px;
}

.empty-sub { margin: 0; font-size: 0.9rem; max-width: 34ch; margin-inline: auto; }

/* ============================================================
   Reading
   ============================================================ */

.read-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.read-controls input { flex: 1 1 200px; border-radius: 999px; padding-left: 15px; }
.read-controls .btn-primary { flex: 0 0 auto; }

.llm-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.story-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 24px 22px;
}

.story-title {
  font-family: var(--font-greek);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--ink);
}

.story-text {
  font-family: var(--font-greek);
  font-size: 1.16rem;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
}

.story-word {
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.12s, color 0.12s;
}
.story-word:hover { background: var(--accent-soft); }
.story-word.is-active { background: var(--accent); color: var(--surface); }

@media (prefers-color-scheme: dark) {
  .story-word.is-active { color: #10222e; }
}

.story-tap-hint {
  margin: 14px 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.gloss-bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
}

.gloss-body {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* Only earns its place on the pinned bar, where the reader needs the page back. */
.gloss-close {
  display: none;
  flex: none;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 1.3rem;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}

.gloss-close:hover { color: var(--ink); }

/*
 * On a phone the meaning goes to the bottom edge instead of the bottom of the
 * story. Tapping a word near the top of a long reading used to put its
 * translation a scroll away — the reader lost their place to learn one word,
 * which is the opposite of what looking a word up is for.
 */
@media (max-width: 720px) {
  .gloss-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    border-width: 1px 0 0;
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(28, 25, 20, 0.16);
  }

  .gloss-close { display: block; }

  /* So the last lines of a story are still reachable under the bar. */
  body.gloss-open .story-card { padding-bottom: 84px; }
}

.gloss-gr { font-family: var(--font-greek); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.gloss-en { font-size: 0.88rem; color: var(--ink-2); }
.gloss-tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
}

.story-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.story-actions .btn-secondary { flex: 1; }

.story-translation {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-left: 2px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.story-glossary { margin-top: 22px; }

.glossary-title, .debrief-subtitle {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

.glossary-list { display: flex; flex-direction: column; gap: 1px; }

.glossary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.glossary-row:last-child { border-bottom: none; }

.glossary-word { min-width: 0; }
.glossary-gr { display: block; font-family: var(--font-greek); font-size: 1.02rem; font-weight: 600; }
.glossary-en { display: block; font-size: 0.83rem; color: var(--ink-3); }

.glossary-have {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ok);
  flex-shrink: 0;
}

.btn-mini {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  cursor: pointer;
}
.btn-mini:hover { background: var(--accent); color: #fff; }
.btn-mini:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   Conversation
   ============================================================ */

.scenario-list { display: grid; gap: 10px; }

@media (min-width: 640px) {
  .scenario-list { grid-template-columns: repeat(2, 1fr); }
}

.scenario-card {
  display: block;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, transform 0.1s;
}
.scenario-card:hover { border-color: var(--accent-line); }
.scenario-card:active { transform: scale(0.995); }

.scenario-gr {
  display: block;
  font-family: var(--font-greek);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
}
.scenario-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-3);
  margin-top: 2px;
}
.scenario-desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 8px;
}

.chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.chat-title {
  font-family: var(--font-greek);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}
.chat-desc { margin: 3px 0 0; font-size: 0.82rem; color: var(--ink-3); max-width: 46ch; }
.chat-head .btn-secondary { flex-shrink: 0; padding: 8px 14px; font-size: 0.82rem; }

.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 10px;
}

.chat-row { display: flex; flex-direction: column; max-width: 85%; }
.chat-row.is-them { align-self: flex-start; align-items: flex-start; }
.chat-row.is-user { align-self: flex-end; align-items: flex-end; }

.chat-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-greek);
  font-size: 1.05rem;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

.is-user .chat-bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.is-them .chat-bubble { border-bottom-left-radius: 5px; }

@media (prefers-color-scheme: dark) {
  .is-user .chat-bubble { color: #10222e; }
}

.bubble-speak {
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-shrink: 0;
}
.bubble-speak svg { width: 15px; height: 15px; }
.bubble-speak:hover { color: var(--accent); }

.chat-translate {
  border: none;
  background: none;
  color: var(--ink-3);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 4px 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-en { margin: 2px 0 0; font-size: 0.83rem; color: var(--ink-2); }

.chat-recast {
  margin: 5px 0 0;
  font-size: 0.78rem;
  color: var(--warn);
  font-family: var(--font-greek);
  text-align: right;
}

.chat-bubble.typing { gap: 4px; padding: 14px; }
.chat-bubble.typing span {
  width: 5px; height: 5px;
  background: var(--ink-3);
  border-radius: 50%;
  animation: blink 1.2s infinite ease-in-out;
}
.chat-bubble.typing span:nth-child(2) { animation-delay: 0.18s; }
.chat-bubble.typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

.chat-form { display: flex; gap: 8px; margin-bottom: 10px; }
.chat-form input { font-family: var(--font-greek); font-size: 1.05rem; border-radius: 999px; padding-left: 16px; }

.chat-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-send svg { width: 19px; height: 19px; }

@media (prefers-color-scheme: dark) {
  .chat-send { color: #10222e; }
}

.chat-end { width: 100%; }

.debrief-panel {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.debrief-title {
  font-family: var(--font-greek);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 8px;
}

.debrief-summary { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
.debrief-clean { font-size: 0.88rem; color: var(--ok); margin: 0; }

.correction {
  border-left: 2px solid var(--warn-line);
  padding-left: 12px;
  margin-bottom: 14px;
}
.correction-was {
  margin: 0;
  font-family: var(--font-greek);
  font-size: 0.98rem;
  color: var(--ink-3);
  text-decoration: line-through;
}
.correction-is {
  margin: 2px 0 0;
  font-family: var(--font-greek);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.correction-note { margin: 4px 0 0; font-size: 0.82rem; color: var(--ink-2); }

.suggested-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.suggested-card:last-child { border-bottom: none; }
.suggested-gr { display: block; font-family: var(--font-greek); font-size: 1.02rem; font-weight: 600; }
.suggested-en { display: block; font-size: 0.83rem; color: var(--ink-3); }

#debrief-cards { margin-top: 18px; }

/* ============================================================
   Expansion packs
   ============================================================ */

.section-intro {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
}

.deck-tab-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 9px 6px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.deck-tab-btn:hover { color: var(--ink-2); }

.deck-tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.packs-list {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .packs-list { grid-template-columns: repeat(2, 1fr); }
}

.pack-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.pack-card.is-installed { background: var(--surface-2); }

.pack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pack-title {
  font-family: var(--font-greek);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
}

.pack-subtitle {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-3);
}

.new-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: 0.83rem;
  font-weight: 650;
}

.new-dot {
  display: inline-block;
  margin-left: 8px;
  vertical-align: 2px;
  font-family: var(--font-ui);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 1px 6px;
}

.pack-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pack-badge.is-new-badge {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok-line);
}

.pack-card.is-new { border-color: var(--accent-line); }

.pack-added {
  margin: -6px 0 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-3);
}

.pack-badge {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 3px 9px;
}

.pack-desc {
  margin: 0 0 16px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
  flex: 1;
}

.pack-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pack-meter-track {
  flex: 1;
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.pack-meter-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.pack-count {
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.pack-actions .btn-primary { width: 100%; }

.pack-status {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: var(--r-sm);
  padding: 10px;
}

/* ============================================================
   Browse
   ============================================================ */

.browse-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.browse-controls input { flex: 1 1 210px; border-radius: 999px; padding-left: 15px; }
.browse-controls select { flex: 0 1 170px; border-radius: 999px; font-size: 0.85rem; }

.browse-meta {
  margin: 0 0 12px 2px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.browse-list {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.browse-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}

.browse-item:last-child { border-bottom: none; }
.browse-item:hover { background: var(--surface-2); }

.browse-item-main { min-width: 0; flex: 1; }

.browse-item-gr {
  font-family: var(--font-greek);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browse-item-en {
  font-size: 0.85rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browse-item-meta {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-3);
  border-radius: 4px;
  padding: 3px 7px;
}

@media (max-width: 359px) {
  .browse-item-meta { display: none; }
}

.browse-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line); }
.icon-btn.danger:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }

.empty-list {
  text-align: center;
  color: var(--ink-3);
  padding: 44px 20px;
  font-size: 0.9rem;
}

/* ============================================================
   Card form
   ============================================================ */

.card-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.card-form h2 {
  margin: 0 0 20px;
  font-family: var(--font-greek);
  font-size: 1.3rem;
  font-weight: 600;
}

.form-row { margin-bottom: 15px; }

.form-row > label,
.form-row label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.two-col > div, .three-col > div { margin: 0; }

@media (max-width: 560px) {
  .two-col, .three-col { grid-template-columns: 1fr; gap: 14px; }
}

.extra-fields {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 14px 14px 1px;
  margin-bottom: 15px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.btn-primary, .btn-secondary {
  border-radius: var(--r-sm);
  padding: 11px 20px;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  flex: 1;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

@media (prefers-color-scheme: dark) {
  .btn-primary { color: #10222e; }
}

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.btn-secondary:hover { background: var(--surface-3); color: var(--ink); }

/* A destructive action should not look like the ones beside it, and should
   not be the first thing a thumb lands on either. */
.btn-danger {
  border-radius: var(--r-sm);
  padding: 11px 20px;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  background: var(--bad);
  border: 1px solid var(--bad);
  color: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 85%, #000); }

@media (prefers-color-scheme: dark) {
  .btn-danger { color: #1c1210; }
}

.btn-small {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.form-message {
  font-size: 0.85rem;
  margin: 12px 0 0;
  min-height: 1.2em;
  color: var(--ok);
}
.form-message.error { color: var(--bad); }
.form-message:empty { min-height: 0; margin: 0; }

/* ============================================================
   Stats
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 560px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 14px;
}

.stat-num {
  font-family: var(--font-greek);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-card.is-due .stat-num { color: var(--accent); }

.stat-label {
  margin-top: 7px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stats-section-title {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 0 -2px 2px;
}

.category-bar-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
}

.category-bar-name {
  flex: 0 0 104px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--ink-2);
}

.category-bar-track {
  flex: 1;
  height: 5px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.category-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  opacity: 0.85;
}

.category-bar-fill.is-warn { background: var(--warn); }

.category-bar-count {
  flex: 0 0 auto;
  min-width: 24px;
  text-align: right;
  color: var(--ink-3);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Key gate
   ============================================================ */

/* ============================================================
   Auth gate
   ============================================================ */

.auth-gate {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + var(--safe-b));
  overflow-y: auto;
}

.auth-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  width: 100%;
  max-width: 380px;
  margin: auto;
}

.auth-brand {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}

.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--surface-3);
  border-radius: var(--r-md);
  padding: 4px;
  margin-bottom: 22px;
}

.auth-switch-btn {
  border: none;
  background: none;
  border-radius: var(--r-sm);
  padding: 9px 8px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.auth-switch-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.auth-form { display: block; }

.auth-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.auth-label + input { margin-bottom: 14px; }

.auth-optional {
  color: var(--ink-3);
  font-weight: 400;
}

.auth-hint {
  margin: -8px 0 16px;
  font-size: 0.76rem;
  color: var(--ink-3);
}

.auth-form .btn-primary {
  width: 100%;
  margin-top: 4px;
}

#signup-code { text-transform: uppercase; letter-spacing: 0.06em; }

#auth-error { margin-top: 14px; }

/* ============================================================
   Account panel
   ============================================================ */

.account-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.account-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-card:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.account-name { font-weight: 600; }

.account-email {
  font-size: 0.83rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.account-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.account-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  font-weight: 600;
}

.account-usage-count {
  font-size: 0.83rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.account-usage-track {
  height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.account-usage-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.account-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--ink-3);
  line-height: 1.5;
}

.invite-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.invite-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.invite-open {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: 999px;
  padding: 2px 9px;
}

.invite-used {
  font-size: 0.78rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.password-form { margin-top: 14px; }
.password-form .btn-secondary { width: 100%; }
.password-form .auth-label { margin-top: 2px; }

.account-download {
  display: block;
  width: 100%;
  margin-top: 14px;
  text-align: center;
  text-decoration: none;
}

/* Set apart from the cards above it, so the delete button is not something a
   thumb finds by accident on the way down the page. */
.account-danger {
  border-color: var(--bad-line);
}
.account-danger .account-section-title { color: var(--bad); }
.account-danger #delete-start { width: 100%; margin-top: 14px; }
.account-danger .password-form { margin-top: 14px; }

.delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.delete-actions .btn-danger,
.delete-actions .btn-secondary { flex: 1 1 140px; width: auto; }

.people-filter {
  margin-top: 14px;
  font-size: 0.88rem;
}

.people-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.people-more {
  width: 100%;
  margin-top: 10px;
}

/*
 * Name and action on one line, the identifying detail under them.
 *
 * As a wrapping flex row the button dropped to a line of its own the moment
 * the email was long enough, which on a phone was always — and a list of
 * three-line rows is the thing that made this panel unreadable.
 */
.person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name action"
    "meta meta"
    "temp temp";
  align-items: center;
  gap: 2px 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.person-row .person-name { grid-area: name; }
.person-row .person-meta { grid-area: meta; }
.person-row .person-temp { grid-area: temp; }
.person-row .person-actions,
.person-row .person-you { grid-area: action; }
.person-row .person-confirm { grid-area: temp; }

.person-actions { display: flex; gap: 6px; align-items: center; }

/* A row mid-confirmation stops looking like the eleven rows around it. */
.person-row.is-asking {
  border-color: var(--bad-line);
  background: var(--bad-soft);
}

.person-confirm { margin-top: 8px; }

.person-confirm-note {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.person-confirm-note b {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.person-confirm .confirm-email {
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.person-confirm-actions { display: flex; gap: 8px; }
.person-confirm-actions .btn-danger,
.person-confirm-actions .btn-secondary { flex: 1 1 auto; }
.person-confirm-actions .btn-danger[disabled] { opacity: 0.5; cursor: not-allowed; }

/* The button is an emergency hatch, not the point of the row, and at full size
   it was the widest thing on every line. */
.person-row .reset-pw,
.person-row .remove-user {
  flex: none;
  padding: 5px 9px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.person-row .remove-user { color: var(--bad); border-color: var(--bad-line); }
.person-row .remove-user:hover { background: var(--bad-soft); }

.person-name { font-weight: 600; font-size: 0.9rem; }

.person-tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 600;
  vertical-align: 1px;
}

.person-meta {
  font-size: 0.76rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.person-you {
  font-size: 0.76rem;
  color: var(--ink-3);
}

.person-temp {
  margin: 8px 0 0;
  padding: 9px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-sm);
  overflow-wrap: anywhere;
}

.build-stamp {
  margin: 4px 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.invite-empty {
  font-size: 0.83rem;
  color: var(--ink-3);
  padding: 4px 0;
}

/* ============================================================
   Short viewports — keep the review loop above the fold
   ============================================================
   On a 667px-tall phone the streak strip, mode tabs, controls and meter
   stack to ~360px, which pushed the grading buttons off screen and made
   every single card a scroll. Tighten the chrome and let the card give up
   height so flip-and-grade stays in one thumb's reach.
   ============================================================ */

@media (max-height: 740px) {
  #app { padding-top: 12px; }

  .streak-strip { padding: 8px 12px; margin-bottom: 8px; }
  .mode-tabs { margin-bottom: 8px; }
  .study-controls { margin-bottom: 10px; gap: 6px; }
  .deck-meter { margin-bottom: 8px; }

  .flashcard {
    height: clamp(150px, calc(100vh - 452px), 300px);
    height: clamp(150px, calc(100svh - 452px), 300px);
    margin-bottom: 10px;
  }

  .review-actions button { padding-block: 10px; }
}

@media (max-height: 640px) {
  .streak-strip { display: none; }
  .flashcard {
    height: clamp(110px, calc(100vh - 400px), 240px);
    height: clamp(110px, calc(100svh - 400px), 240px);
  }
}

/* ============================================================
   First-run orientation
   ============================================================ */

.orientation {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px calc(24px + var(--safe-b));
  overflow-y: auto;
}

.orient-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px 24px;
  width: 100%;
  max-width: 430px;
  margin: auto;
}

.orient-eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-greek);
  font-size: 1rem;
  color: var(--ink-3);
}

.orient-title {
  margin: 0 0 20px;
  font-family: var(--font-greek);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}

.orient-list {
  margin: 0 0 22px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.orient-list li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.orient-list b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

.orient-pace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.orient-pace input { width: 84px; flex: none; }

.orient-hint {
  margin: 8px 0 20px;
  font-size: 0.76rem;
  color: var(--ink-3);
}

#orient-start { width: 100%; }

.pace-form { margin-top: 14px; }
.pace-form input { margin-bottom: 12px; }
.pace-form .btn-secondary { width: 100%; }

.feedback-form { margin-top: 14px; }
.feedback-form select { margin-bottom: 14px; }
.feedback-form .btn-secondary { width: 100%; }
.feedback-form #feedback-count { margin: 6px 0 14px; }
.feedback-form #feedback-count:empty { margin: 0 0 14px; }

/* ============================================================
   Toast
   ============================================================ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-b));
  transform: translateX(-50%) translateY(14px);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 300;
  max-width: 88vw;
  text-align: center;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------- Working offline */

/* Under the header rather than over the deck: what it says changes what you
   should expect of the app, but never what you can do with it. */
.offline-bar {
  position: sticky;
  top: 0;
  z-index: 19;
  padding: 7px 16px;
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
  color: var(--warn);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

/* ------------------------------------------------- Getting back in (Ζ΄) */

/* A text button that reads as a link. Used for the three places the gate and
   the account page offer a way out of the main path: forgetting a password,
   going back, and reading what the app keeps. */
.auth-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.auth-link:hover { color: var(--accent-strong, var(--accent)); }
.auth-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.auth-form .auth-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
}

.auth-blurb {
  margin: 0 0 18px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.auth-foot {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
}

/* The gate's one non-error message: "if that address has an account…". It has
   to be legible as reassurance, not as a failure. */
#auth-notice:not(:empty) {
  margin-top: 12px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}

.privacy-box { max-width: 520px; }

.privacy-list {
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.privacy-list dt {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}

.privacy-list dd {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ------------------------------------------------------- Invites (Ζ΄) */

.invite-form {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}

.invite-form .auth-label { margin-bottom: 0; }
.invite-form input,
.invite-form select { margin-bottom: 0; width: 100%; }
.invite-form .btn-small { grid-column: 1 / -1; margin-top: 4px; }

/* A code that cannot be given to anyone should not read like one that can. */
.invite-row.is-spent { opacity: 0.6; }

.invite-who {
  flex-basis: 100%;
  font-size: 0.74rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* -------------------------------------------- What you can do (Θ΄) */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A weakness, and the way to do something about it.
   Its own grid rather than the flex row the other lists use: the action has to
   sit on the same line as the figure, or every row is three times the height of
   the ones above it and the list stops being scannable. */
.slip-row {
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(64px, 1.1fr) minmax(40px, 1.4fr) 26px auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
}

button.slip-row { appearance: none; cursor: pointer; }
button.slip-row:hover { border-color: var(--accent-line); background: var(--accent-soft); }
button.slip-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.slip-name { color: var(--ink-2); overflow-wrap: anywhere; }

.slip-track {
  display: block;
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.slip-fill { display: block; height: 100%; background: var(--warn); border-radius: 999px; }

.slip-count {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.slip-go {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  white-space: nowrap;
}

/* The headline pair: what you know against what you can say. */
.gap-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.gap-half {
  background: var(--surface);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gap-num {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.gap-pct { font-size: 1rem; font-weight: 500; margin-left: 1px; }

.gap-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
}

.gap-sub { font-size: 0.72rem; color: var(--ink-3); line-height: 1.4; }

.model-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.model-group { grid-column: 1 / -1; }

.model-group-name {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin: 12px 0 6px;
}

/* Name, bar, percentage, count — the count is there so a percentage from four
   answers can be read as the thin evidence it is. */
.model-row {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) minmax(60px, 2fr) 38px 30px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.8rem;
}

.model-row-name { color: var(--ink-2); overflow-wrap: anywhere; }

.model-row-track {
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.model-row-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

/* Too few answers to mean anything: shown, because hiding it would hide that
   the exercise has been tried at all, but not colored like a result. */
.model-row-fill.is-thin { background: var(--line-2); }

.model-row-value {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.model-row-n {
  text-align: right;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

/* Retention by box, and accuracy by week: same column shape, so the page has
   one idiom for "a value per bucket" rather than two. */
.box-row,
.trend-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 4px;
}

.box-col,
.trend-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.box-bar-area,
.trend-bar-area {
  width: 100%;
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
}

.box-bar,
.trend-bar {
  width: 100%;
  max-width: 34px;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}

.box-bar.is-thin { background: var(--line-2); }
.trend-bar.is-empty { background: var(--line-2); }

.box-bar-value,
.trend-value {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.box-tick,
.trend-tick {
  font-size: 0.7rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.box-n,
.trend-n {
  font-size: 0.65rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 400px) {
  .trend-tick { font-size: 0.6rem; }
  .model-row { grid-template-columns: minmax(72px, 1fr) minmax(40px, 1.4fr) 34px 26px; gap: 7px; }
}

/* ------------------------------------------ The first ten minutes (Η΄) */

/* Two columns where there is room, one where there is not. The pitch reads
   first on a phone, because someone who does not know what this is has no
   reason to look at a password box. */
.auth-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  margin: auto;
  align-items: center;
}

/*
 * On a phone the pitch and the sign-in box are one column, and the order that
 * reads well is not the order the markup is in: four supporting points between
 * the headline and the box mean a returning user scrolls past the whole sales
 * pitch to reach a password field, every time.
 *
 * So the column is dealt out rather than stacked. The headline and the lede
 * come first — a stranger is still told what this is before being asked for a
 * password, which is the whole reason the copy exists — then the box, then the
 * detail for anyone still reading. display: contents lifts the landing
 * column's children into the same grid so the box can sit among them; on a
 * wide screen it goes back to being a column of its own beside the box.
 */
.landing { display: contents; }

/* The 22px below the wordmark is for the box it normally sits in; out here the
   grid's own gap does that job, and the pair reads as a masthead without it. */
.landing .auth-brand { order: 0; margin-bottom: 0; }
.landing-head { order: 1; }
.landing-lede { order: 2; }
.auth-box { order: 3; margin: 6px 0; }
.landing-points { order: 4; }

/* With the headline first, the wordmark belongs above it rather than inside
   the box halfway down — otherwise the page opens with a claim about a product
   whose name has not been said yet. The box's own copy stands down on a phone
   so the name is not on screen twice. */
.auth-brand-compact { display: none; }

.landing-head {
  margin: 0;
  font-family: var(--font-greek);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.landing-lede {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.landing-lede em { font-style: italic; color: var(--ink); }

.landing-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-points li {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
  padding-left: 14px;
  border-left: 2px solid var(--accent-line);
}

.landing-points b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 1px; }

@media (min-width: 860px) {
  .auth-layout {
    grid-template-columns: minmax(0, 1.05fr) 380px;
    gap: 56px;
    max-width: 900px;
  }
  /* Two columns again, so the pitch is one block beside the box and the
     dealt-out order above has nothing left to do. */
  .landing { display: flex; flex-direction: column; gap: 16px; }
  .landing .auth-brand { margin-bottom: 6px; }
  .landing-head,
  .landing-lede,
  .landing-points,
  .auth-box { order: 0; }
  .auth-box { margin: 0; }
  .landing-head { font-size: 1.9rem; }
}

/* -------------------------------------------------- Orientation steps */

.orient-step { display: flex; flex-direction: column; }

.orient-blurb {
  margin: 0 0 18px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.orient-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.orient-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.orient-choice:hover { border-color: var(--line-2); }

/* The whole row is the target, not the 20px circle inside it. */
.orient-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.orient-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.orient-choice input { margin: 2px 0 0; flex: none; accent-color: var(--accent); }

.orient-choice-body { display: flex; flex-direction: column; gap: 2px; }
.orient-choice-name { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.orient-choice-note { font-size: 0.78rem; line-height: 1.45; color: var(--ink-2); }

.orient-step .auth-link { margin-top: 10px; text-align: center; width: 100%; display: block; }

.orient-progress { margin: 18px 0 0; text-align: center; }

#orient-dots { display: inline-flex; gap: 6px; }

.orient-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-2);
}

.orient-dot.is-here { background: var(--accent); }

/* -------------------------------------------------------- How it works */

.how-box { max-width: 560px; }

.how-list {
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.how-list dt {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.how-list dd {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.58;
  color: var(--ink-2);
}

.how-list i { font-family: var(--font-greek); font-style: normal; font-weight: 600; color: var(--ink); }

/* ------------------------------------------------ The whole instance (Ι΄) */

.instance-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: 14px 0 12px;
}

.instance-tile {
  background: var(--surface-2);
  padding: 12px 13px 11px;
}

.instance-num {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.instance-label {
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.instance-sub {
  margin: 18px 0 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* A miss rate is not a quantity to admire, so it does not wear the accent. */
.model-row-fill.is-miss { background: var(--warn); }

.hard-greek { font-family: var(--font-greek); font-weight: 600; color: var(--ink); }
.hard-en { color: var(--ink-3); font-size: 0.74rem; }

#instance-body .model-row { grid-template-columns: minmax(96px, 1.3fr) minmax(40px, 1fr) 42px 30px; }

@media (min-width: 560px) {
  .instance-tiles { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------ Read-aloud (Η΄) */

/* The word is the whole exercise here, so it gets the size a flip's front
   would give it rather than a drill prompt's. */
.drill-prompt-greek {
  font-family: var(--font-greek);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

@media (max-width: 400px) {
  .drill-prompt-greek { font-size: 1.7rem; }
}

/* ============================================================
   The box diagram
   ============================================================ */

.boxviz {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 14px 14px;
  margin: 0 0 18px;
}

.boxviz-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 14px;
}

.boxviz-greek {
  font-family: var(--font-greek);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
}

.boxviz-en { font-size: 0.85rem; color: var(--ink-3); }

/* Three across on a phone, six on anything wider — the rail reads as a route
   either way, and six tiles at 360px would be six illegible ones. */
.boxviz-rail {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

@media (min-width: 560px) {
  .boxviz-rail { grid-template-columns: repeat(6, 1fr); }
}

.boxviz-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.boxviz-box.is-past {
  background: var(--surface-3);
  border-color: var(--line);
}

.boxviz-box.is-here {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.boxviz-num {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.boxviz-box.is-here .boxviz-num { color: var(--accent); }

.boxviz-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}

.boxviz-wait { font-size: 0.68rem; color: var(--ink-3); }

@keyframes boxviz-land {
  0% { transform: scale(1); }
  35% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

.boxviz-box.just-moved { animation: boxviz-land 0.32s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .boxviz-box.just-moved { animation: none; }
}

.boxviz-meaning {
  margin: 0 0 14px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-2);
  min-height: 2.4em;
}

.boxviz-ask { margin-bottom: 10px; }

.boxviz-ask-label {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.boxviz-grades { display: flex; gap: 6px; }

.boxviz-grade {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px 4px;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
}

.boxviz-grade:hover { border-color: var(--ink-3); }
.boxviz-grade:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.boxviz-grade.is-wrong { border-color: var(--bad-line); }
.boxviz-grade.is-wrong:hover { background: var(--bad-soft); }
.boxviz-grade.is-hard { border-color: var(--warn-line); }
.boxviz-grade.is-hard:hover { background: var(--warn-soft); }
.boxviz-grade.is-correct { border-color: var(--ok-line); }
.boxviz-grade.is-correct:hover { background: var(--ok-soft); }

.boxviz-grade-label { font-size: 0.85rem; font-weight: 600; }
.boxviz-grade-hint { font-size: 0.68rem; color: var(--ink-3); }

.boxviz-outcome {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-2);
  min-height: 1.3em;
}

.boxviz-outcome.is-up { color: var(--ok); }
.boxviz-outcome.is-down { color: var(--bad); }

.how-lede {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}