@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── Mode visibility ── */
html[lang="pt-BR"] [data-for="en"] { display: none; }
html[lang="en"]    [data-for="pt"] { display: none; }

/* ── Focus ── */
:focus                { outline: none; }
:focus-visible        { outline: 2px solid var(--accent); outline-offset: 2px; }

:root {
  /* ── Modernist Rio · B2 sectional palette ── */
  --bg:           #edeae3;   /* limestone ground */
  --bg-card:      #f8f6f2;   /* card — lighter than ground (modernist inverted elevation) */
  --bg-tint:      #e4ebe7;   /* soft teal panel */
  --text:         #1b2430;   /* ink navy */
  --text-muted:   #5f6570;
  --accent:       #0e5c57;   /* teal — brand lead */
  --accent-dark:  #0a4641;
  --accent-warm:  #c08a1e;   /* ochre / gold */
  --border:       #dad6cc;
  --border-light: #e4e0d7;
  --error:        #a5382a;   /* legible brick-red for error text (not the ochre accent) */
  --shadow-sm:    0 1px 4px rgba(27,36,48,0.06), 0 1px 2px rgba(27,36,48,0.04);
  --shadow-md:    0 4px 14px rgba(27,36,48,0.10), 0 2px 4px rgba(27,36,48,0.06);

  /* Section wayfinding hues — each site area owns one */
  --sec-vocab:         #c08a1e;   /* gold */
  --sec-grammar:       #0e5c57;   /* teal */
  --sec-pronun:        #cb5a46;   /* coral */
  --sec-practice:      #1f5c3a;   /* green */
  --sec-practice-dark: #17482d;

  /* Type — geometric display/UI + neutral body */
  --font-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --font-ui:      'Jost', 'Futura', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* Highlighter tints — section hues, kept light so ink text stays legible */
  --hl-vocab:          rgba(192, 138, 30, 0.28);
  --hl-vocab-active:   rgba(192, 138, 30, 0.18);
  --hl-grammar:        rgba(14, 92, 87, 0.20);
  --hl-grammar-active: rgba(14, 92, 87, 0.13);
  --hl-pronun:         rgba(203, 90, 70, 0.24);
  --hl-pronun-active:  rgba(203, 90, 70, 0.15);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { font-size: 18px; overflow-y: scroll; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.7;
  padding: 0 1.25rem 5rem;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* ── Navigation ── */

nav {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: nowrap;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}
/* Brand mark: a small azulejo-tile dot after the lowercase "oi" logotype */
.wordmark::after {
  content: "";
  width: 0.30em;
  height: 0.30em;
  margin-left: 0.16em;
  border-radius: 2px;
  background: var(--accent);
  transition: background 0.2s;
}
.wordmark:hover { color: var(--accent); }
.wordmark:hover::after { background: var(--sec-pronun); }
.wordmark--active { color: var(--text); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 1;
  min-width: 0;
}

.nav-study {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  padding: 0.28rem 0.5rem 0.46rem;   /* extra bottom room for the zigzag */
  border-radius: 3px 3px 0 0;
  white-space: nowrap;
  background-repeat: repeat-x;
  background-position: left bottom;
  transition: color 0.15s, background-color 0.15s;
}
/* Small section tile before each link — the palette is present at rest, not
   only on hover/active; it echoes the wordmark tile and the card markers. */
.nav-link::before {
  content: "";
  display: inline-block;
  width: 0.46em;
  height: 0.46em;
  margin-right: 0.4em;
  border-radius: 1.5px;
  background: var(--nav-tile, transparent);
  vertical-align: 0.04em;
}

/* One shared zigzag underline for every section — same shape, same height,
   sitting on the bottom edge. Only the colour changes: the highlighter tint
   (--nav-hl) and the zigzag stroke (--nav-zig). */
.nav-link--vocab {
  --nav-hl: var(--hl-vocab);   --nav-hl-active: var(--hl-vocab-active);   --nav-tile: var(--sec-vocab);
  --nav-zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2 L3 0 L6 2' fill='none' stroke='rgba(192,138,30,0.85)' stroke-width='1'/%3E%3C/svg%3E");
}
.nav-link--grammar {
  --nav-hl: var(--hl-grammar); --nav-hl-active: var(--hl-grammar-active); --nav-tile: var(--sec-grammar);
  --nav-zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2 L3 0 L6 2' fill='none' stroke='rgba(14,92,87,0.8)' stroke-width='1'/%3E%3C/svg%3E");
}
.nav-link--pronunciation {
  --nav-hl: var(--hl-pronun);  --nav-hl-active: var(--hl-pronun-active);  --nav-tile: var(--sec-pronun);
  --nav-zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2 L3 0 L6 2' fill='none' stroke='rgba(203,90,70,0.85)' stroke-width='1'/%3E%3C/svg%3E");
}
.nav-link:hover,
.nav-link.active:hover {
  background-color: var(--nav-hl);
  background-image: var(--nav-zig);
  color: var(--text);
}
.nav-link.active {
  background-color: var(--nav-hl-active);
  background-image: var(--nav-zig);
  color: var(--text);
  font-weight: 600;
}

/* Practice pill */
.nav-practice {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--sec-practice);
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.2s;
}
.nav-practice:hover, .nav-practice.active { background: var(--sec-practice-dark); }
.nav-practice.active {
  box-shadow: 0 0 0 2px rgba(31, 92, 58, 0.28), 0 0 14px 3px rgba(31, 92, 58, 0.13);
}

/* ══ App-shell navigation (IA overhaul) ══
   Wide screens: a top nav with 4 destinations + account avatar.
   Mobile (≤620px): the links move into a fixed bottom tab bar — the app shell. */
.topnav {
  max-width: 760px;
  margin: 0 auto 2.4rem;
  padding: 1.4rem 0 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: nowrap;
}
.topnav .wordmark { flex-shrink: 0; }
.topnav-links { display: flex; gap: 0.35rem; align-items: center; }
.topnav-link {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  padding: 0.3rem 0.55rem 0.42rem;
  border-radius: 5px 5px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  white-space: nowrap;
  transition: color 0.15s, box-shadow 0.15s;
}
.topnav-link:hover { color: var(--text); }
.topnav-link.active { color: var(--text); }
.topnav-link .tri { display: inline-flex; gap: 1.5px; }
.topnav-link .tri i { width: 0.42rem; height: 0.42rem; border-radius: 1.5px; display: block; }
.topnav-link .tile { width: 0.5rem; height: 0.5rem; border-radius: 2px; display: inline-block; }
.topnav-link--dictionary .tile { background: var(--sec-vocab); }
.topnav-link--practice   .tile { background: var(--sec-practice); }
.topnav-link[data-nav="home"].active        { box-shadow: inset 0 -2px 0 var(--text); }
.topnav-link--foundations.active             { box-shadow: inset 0 -2px 0 var(--sec-grammar); }
.topnav-link--dictionary.active              { box-shadow: inset 0 -2px 0 var(--sec-vocab); }
.topnav-link--practice.active                { box-shadow: inset 0 -2px 0 var(--sec-practice); }

.nav-account { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; }
.auth-trigger--avatar {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; padding: 0; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--sec-practice));
  color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: filter 0.15s;
}
.auth-trigger--avatar:hover { filter: brightness(1.08); }

/* Bottom tab bar — clears the base `nav {}` rules; hidden until mobile */
.bottomnav { display: none; max-width: none; margin: 0; border-bottom: none; }
.bnav-item svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bnav-item .tri { display: flex; gap: 1.6px; height: 21px; align-items: center; }
.bnav-item .tri i { width: 5px; height: 5px; border-radius: 1px; display: block; }

@media (max-width: 620px) {
  .topnav-links { display: none; }
  .topnav {
    max-width: none; margin: 0 -1.25rem 1.2rem; padding: 0.8rem 1.25rem 0.7rem;
    justify-content: space-between; gap: 0.6rem;
  }
  body { padding-bottom: 4.6rem; }
  .bottomnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 0.3rem 0.2rem calc(0.42rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(27, 36, 48, 0.05);
  }
  .bnav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.14rem;
    text-decoration: none; color: var(--text-muted);
    font-family: var(--font-ui); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.02em;
    padding: 0.2rem 0; position: relative;
  }
  .bnav-item.active { color: var(--bnav-c, var(--accent)); }
  .bnav-item[data-nav="home"].active        { --bnav-c: var(--text); }
  .bnav-item[data-nav="foundations"].active  { --bnav-c: var(--sec-vocab); }
  .bnav-item[data-nav="dictionary"].active   { --bnav-c: var(--sec-vocab); }
  .bnav-item[data-nav="practice"].active     { --bnav-c: var(--sec-practice); }
}

/* ══ IA overhaul components ══ */

/* Foundations / Practice segmented sub-nav */
.subnav {
  display: flex; gap: 0.25rem; max-width: 760px; margin: 0 auto 1.8rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 3px;
}
.subnav-item {
  flex: 1; text-align: center; font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.03em; color: var(--text-muted); text-decoration: none;
  padding: 0.42rem 0.6rem; border-radius: 999px; white-space: nowrap;
  transition: background 0.15s, color 0.15s; cursor: pointer; border: none; background: transparent;
}
.subnav-item:hover { color: var(--text); }
.subnav-item.active { color: #fff; }
.subnav-item--vocab.active   { background: var(--sec-vocab); }
.subnav-item--grammar.active { background: var(--sec-grammar); }
.subnav-item--pronun.active  { background: var(--sec-pronun); }
.subnav-item--practice.active { background: var(--sec-practice); }

/* Home — "Your level" compass */
.your-level {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.9rem 1.1rem; margin-bottom: 1.4rem;
}
.your-level-label { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.your-level-value { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--sec-grammar); line-height: 1.15; }
.your-level-check {
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700; color: var(--sec-pronun);
  background: transparent; border: 1px solid var(--sec-pronun); border-radius: 8px; padding: 0.42rem 0.75rem;
  cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.your-level-check:hover { background: var(--sec-pronun); color: #fff; }

/* Home — Today's Practice CTA */
.today-cta {
  display: block; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 14px; padding: 1.3rem 1.4rem; margin-bottom: 1.7rem; transition: filter 0.15s;
}
.today-cta:hover { filter: brightness(1.06); }
.today-cta-kicker { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.82; font-weight: 700; }
.today-cta-title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 0.25rem 0 0.35rem; line-height: 1.15; }
.today-cta-desc { font-size: 0.9rem; opacity: 0.92; margin-bottom: 0.95rem; }
.today-cta-btn { display: inline-block; background: #fff; color: var(--accent); font-family: var(--font-ui); font-weight: 700; font-size: 0.78rem; padding: 0.46rem 1rem; border-radius: 8px; }
.today-cta-kicker, .today-cta-title, .today-cta-desc { display: block; }

/* Placement quiz stub (modal) */
.placement-overlay {
  position: fixed; inset: 0; z-index: 2100; background: rgba(27, 36, 48, 0.45);
  display: none; align-items: center; justify-content: center; padding: 1.2rem;
}
.placement-overlay.open { display: flex; }
.placement-card {
  background: var(--bg-card); border-radius: 16px; padding: 1.5rem 1.6rem; max-width: 430px; width: 100%;
  box-shadow: var(--shadow-md); position: relative;
}
.placement-card h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: 0.35rem; color: var(--text); }
.placement-card > p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.1rem; }
.placement-close { position: absolute; top: 0.9rem; right: 1rem; background: none; border: none; font-size: 1.1rem; color: var(--text-muted); cursor: pointer; line-height: 1; }
.placement-levels { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.placement-level {
  text-align: left; font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.placement-level:hover { border-color: var(--accent); }
.placement-level small { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.76rem; margin-top: 0.15rem; }
.placement-soon { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin: 0; }
.placement-sub { font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: 0.2rem 0 0.55rem; }
.placement-diffs { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; }
.placement-diff { flex: 1; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.4rem; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.placement-diff:hover { border-color: var(--accent); }
.placement-diff.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Hide the mobile bottom bar during a focused practice activity (penpal / call / decks) */
body:has(#game-view:not([hidden])) .bottomnav { display: none; }

/* Mode control — centered segmented control below nav */
.mode-control {
  display: flex;
  justify-content: center;
  margin-bottom: 1.4rem;
}

.mode-segment {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.mode-btn {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.38rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.mode-btn:hover { color: var(--text); }
.mode-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ── Main content ── */

main { max-width: 760px; margin: 0 auto; }

h1 {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.8rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 2.8rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

h3 {
  font-size: 0.78rem;
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p { margin-bottom: 1rem; }
ul, ol { padding-left: 1.4rem; margin-bottom: 1rem; }
li { margin-bottom: 0.35rem; }

.subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 2.2rem;
  line-height: 1.5;
}

/* ── Home page ── */

.home-greeting {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.home-greeting + h1 { margin-bottom: 2rem; }

.daily-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.fact-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow-sm);
  min-height: 12rem;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.fact-card:hover { box-shadow: var(--shadow-md); }

.fact-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.fact-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 0;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.slang-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow-sm);
  min-height: 12rem;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.slang-card:hover { box-shadow: var(--shadow-md); }

.slang-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.slang-word-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.slang-word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 0;
  line-height: 1.3;
}

.slang-pronunciation {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.slang-pronunciation:empty { display: none; }

.slang-meaning {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.slang-example {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.84rem;
  color: var(--text);
  margin-bottom: 0.15rem;
  overflow-wrap: break-word;
}

.slang-example-en {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0;
  overflow-wrap: break-word;
}

.level-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2.5rem;
  gap: 0 1.6rem;
}

.level-badge {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  padding-right: 1.6rem;
  border-right: 1px solid var(--border);
  align-self: center;
}

.level-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.level-desc { font-size: 0.93rem; color: var(--text); margin-bottom: 0; line-height: 1.7; }

/* ── Index 2×2 grid ── */

.page-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}

.page-card {
  background: var(--sec-tint, var(--bg-card));
  border: 1px solid var(--sec-bd, var(--border));
  border-radius: 8px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 5.5rem;
}
/* Sectional colour + azulejo-tile shape — each card owns its destination's hue
   (wayfinding). Tint kept light so ink-navy body text keeps full contrast. */
.page-card--vocab    { --sec: var(--sec-vocab);    --sec-ink: #8a6408;             --sec-tint: #f8f1e1; --sec-bd: #e7d6ac; }
.page-card--grammar  { --sec: var(--sec-grammar);  --sec-ink: var(--sec-grammar);  --sec-tint: #e9f1ef; --sec-bd: #bcd6d0; }
.page-card--pronun   { --sec: var(--sec-pronun);   --sec-ink: #b0432f;             --sec-tint: #f7ece9; --sec-bd: #e7cabf; }
.page-card--practice { --sec: var(--sec-practice); --sec-ink: var(--sec-practice); --sec-tint: #e9f1ec; --sec-bd: #bcd6c4; }
.page-card:hover { border-color: var(--sec, var(--accent)); box-shadow: var(--shadow-md); }
.page-card-body { flex: 1; }
.page-card h3 {
  margin: 0 0 0.3rem; text-transform: none; font-family: var(--font-ui);
  font-size: 0.9rem; font-weight: 600; color: var(--sec-ink, var(--accent)); letter-spacing: 0;
  display: flex; align-items: center; gap: 0.42rem;
}
.page-card h3::before {
  content: ""; width: 0.62rem; height: 0.62rem; border-radius: 2.5px;
  background: var(--sec, var(--accent)); flex: none;
}
.page-card p { margin: 0; font-size: 0.82rem; font-family: var(--font-ui); color: var(--text-muted); line-height: 1.5; overflow-wrap: break-word; }
.page-card-arrow { color: var(--sec, var(--border)); font-size: 0.95rem; flex-shrink: 0; margin-top: 0.15rem; transition: color 0.2s, opacity 0.2s; opacity: 0.5; }
.page-card:hover .page-card-arrow { color: var(--sec, var(--accent)); opacity: 1; }

/* Section page header — the section tile follows you onto its own page. */
.sec-title { display: flex; align-items: center; gap: 0.5rem; }
.sec-title::before {
  content: ""; width: 0.44em; height: 0.44em; border-radius: 0.1em;
  background: var(--sec-title-hue, var(--accent)); flex: none;
}
.sec-title--vocab   { --sec-title-hue: var(--sec-vocab); }
.sec-title--grammar { --sec-title-hue: var(--sec-grammar); }
.sec-title--pronun  { --sec-title-hue: var(--sec-pronun); }
.sec-title--dict    { --sec-title-hue: var(--sec-vocab); }
.dict-intro { font-family: var(--font-body); color: var(--text-muted); max-width: 62ch; margin: 0 0 1.9rem; font-size: 0.98rem; line-height: 1.6; }

/* ── Tables ── */

table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.93rem; }

th {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 2px solid var(--border);
}

td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border-light); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td:first-child { font-weight: bold; color: var(--text); width: 38%; }

td .hint {
  display: block;
  font-size: 0.73rem;
  font-family: var(--font-ui);
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.15rem;
}

/* ── Rule / example / tip boxes ── */

.rule {
  background: var(--bg-tint);
  border-left: 3px solid var(--accent);
  padding: 0.9rem 1.2rem;
  margin: 1rem 0 1.6rem;
  border-radius: 0 5px 5px 0;
}
.rule p { margin-bottom: 0.45rem; font-size: 0.95rem; }
.rule p:last-child { margin-bottom: 0; }

.example { margin: 0.7rem 0 1.1rem 0; padding-left: 1.1rem; border-left: 2px solid var(--border); }
.example em { display: block; font-style: italic; color: var(--text); }
.example span { display: block; font-size: 0.84rem; font-family: var(--font-ui); color: var(--text-muted); }

.tip {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.8rem 1.1rem;
  font-size: 0.84rem;
  font-family: var(--font-ui);
  color: var(--text-muted);
  margin: 1.2rem 0;
  line-height: 1.6;
}
.tip strong { color: var(--text); }

/* ── Pronunciation: sound blocks ── */

.sound-block { margin-bottom: 2rem; }

.sound-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  padding: 0.15rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}

.sound-block p { margin-bottom: 0.45rem; }

.sound-words {
  font-size: 0.85rem;
  font-family: var(--font-ui);
  color: var(--text-muted);
  line-height: 1.9;
}
.sound-words strong { color: var(--text); font-family: var(--font-body); }

/* Listen button — inline, unobtrusive */
.listen-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.06rem 0.28rem;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 0.2rem;
  margin-right: 0.05rem;
  line-height: 1.5;
  transition: color 0.15s, border-color 0.15s;
}
.listen-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Collapsible sections ── */

.vocab-section,
.grammar-section,
.pronunciation-section {
  border-bottom: 1px solid var(--border);
}

.vocab-section > summary,
.grammar-section > summary,
.pronunciation-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.vocab-section > summary::-webkit-details-marker,
.grammar-section > summary::-webkit-details-marker,
.pronunciation-section > summary::-webkit-details-marker { display: none; }

/* Shared span base */
.vocab-section > summary > span,
.grammar-section > summary > span,
.pronunciation-section > summary > span {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
}

/* Vocabulary: ruled underline */
.vocab-section > summary > span {
  border-bottom: 1.5px solid rgba(175, 140, 15, 0.22);
  transition: background 0.15s, border-bottom-color 0.15s;
}
.vocab-section > summary:hover > span {
  background: var(--hl-vocab);
  border-bottom-color: rgba(175, 140, 15, 0.55);
}

/* Grammar: wavy underline */
.grammar-section > summary > span {
  text-decoration: underline wavy;
  text-decoration-color: rgba(80, 120, 190, 0.2);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: background 0.15s, text-decoration-color 0.15s;
}
.grammar-section > summary:hover > span {
  background: var(--hl-grammar);
  text-decoration-color: rgba(80, 120, 190, 0.52);
}

/* Pronunciation: SVG zigzag */
.pronunciation-section > summary > span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2 L3 0 L6 2' fill='none' stroke='rgba(200,120,80,0.2)' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-color: transparent;
  padding-bottom: 7px;
  transition: background-color 0.15s;
}
.pronunciation-section > summary:hover > span {
  background-color: var(--hl-pronun);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2 L3 0 L6 2' fill='none' stroke='rgba(200,120,80,0.62)' stroke-width='1'/%3E%3C/svg%3E");
}

/* Chevron */
.vocab-section > summary::after,
.grammar-section > summary::after,
.pronunciation-section > summary::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg) translateY(-1px);
  transition: transform 0.2s ease, border-color 0.2s;
  margin-left: 0.75rem;
  flex-shrink: 0;
}
.vocab-section > summary:hover::after,
.grammar-section > summary:hover::after,
.pronunciation-section > summary:hover::after { border-color: var(--text); }
.vocab-section[open] > summary::after,
.grammar-section[open] > summary::after,
.pronunciation-section[open] > summary::after { transform: rotate(45deg) translateY(-3px); }

.vocab-section table,
.grammar-section table,
.pronunciation-section table { margin-top: 0.4rem; }

/* ── Practice answer reveals ── */

details:not(.vocab-section):not(.grammar-section):not(.pronunciation-section):not(.verb-tool):not(.vocab-tool) { margin-top: 0.7rem; }

details:not(.vocab-section):not(.grammar-section):not(.pronunciation-section):not(.verb-tool):not(.vocab-tool) > summary {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
  list-style: none;
}
details:not(.vocab-section):not(.grammar-section):not(.pronunciation-section):not(.verb-tool):not(.vocab-tool) > summary:hover { color: var(--text); }

.answers { margin-top: 0.7rem; padding: 0.8rem 1.1rem; background: var(--bg-tint); border-radius: 5px; font-size: 0.9rem; }
.answers ol { margin-bottom: 0; }

/* ── Practice selector panel ── */

.selector-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
  margin-bottom: 0.75rem;
}

.selector-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.selector-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
}

.selector-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.pill {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  min-width: 3.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pill:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill:disabled { opacity: 0.35; cursor: default; }

.selector-count {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0;
  margin-top: 0.3rem;
}

/* ── Profile bar (global level + difficulty selector) ── */

.profile-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  padding: 0.45rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.profile-group {
  display: flex;
  gap: 0.2rem;
}

.profile-bar-sep {
  width: 1px;
  height: 1.1rem;
  background: var(--border);
  flex-shrink: 0;
  align-self: center;
}

.profile-pill {
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.profile-pill:hover  { border-color: var(--accent); color: var(--text); }
.profile-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.profile-bar-label {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-style: italic;
  color: var(--text-muted);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.level-empty {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.data-init-msg {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 2rem;
}
.data-init-msg:empty { display: none; }

/* ── Level guide trigger (injected into .profile-bar by level_guide.js) ── */

.guide-trigger {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-style: italic;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0;
  margin-left: auto;
  white-space: nowrap;
  transition: color 0.15s;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}
.guide-trigger:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ── Level guide modal ── */

.guide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.17s ease, visibility 0.17s ease;
}
.guide-overlay.is-open { opacity: 1; visibility: visible; }

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

body.guide-open { overflow: hidden; }

.guide-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  max-width: 460px;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 1.5rem 1.6rem 1.6rem;
}

.guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

/* Override global h2 rules inside modal */
.guide-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
  padding: 0;
  border: none;
}

.guide-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.guide-close-btn:hover { color: var(--text); }

.guide-section { margin-bottom: 1.1rem; }

.guide-section-label {
  font-family: var(--font-ui);
  font-size: 0.63rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

.guide-row-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.guide-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  gap: 0.1rem;
  transition: border-color 0.15s, background 0.15s;
}
.guide-row:hover:not(.guide-row--soon) {
  border-color: var(--accent);
  background: rgba(45, 106, 79, 0.05);
}
.guide-row.is-selected {
  border-color: var(--accent);
  background: rgba(45, 106, 79, 0.08);
}
.guide-row--soon {
  opacity: 0.42;
  cursor: default;
}

.guide-row-name {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.guide-row.is-selected .guide-row-name { color: var(--accent); }

.guide-row-desc {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

.guide-row-soon {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted);
  margin: 0;
}

.guide-shortcut {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--bg-tint);
  border-radius: 8px;
  text-align: center;
}

.guide-shortcut-hint {
  font-family: var(--font-ui);
  font-size: 0.77rem;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
  line-height: 1.45;
}

.guide-shortcut-btn {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.38rem 1.2rem;
  cursor: pointer;
  transition: background 0.15s;
}
.guide-shortcut-btn:hover { background: var(--accent-dark); }

/* ── Practice hub ── */

.practice-grid { display: grid; gap: 1rem; margin-top: 2rem; }

.game-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: var(--font-body);
}
.game-btn:hover:not(:disabled):not(.game-btn--unavailable) { border-color: var(--accent); box-shadow: var(--shadow-md); }
.game-btn--soon        { opacity: 0.42; cursor: default; box-shadow: none; order: 2; }
.game-btn--unavailable { opacity: 0.38; cursor: default; pointer-events: none; box-shadow: none; order: 1; }

.game-btn-title { display: block; font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.25rem; }
.game-btn-title[data-emoji]::before { content: attr(data-emoji); margin-right: 0.35rem; font-size: 0.95rem; text-transform: none; letter-spacing: 0; }
.game-btn--soon .game-btn-title { color: var(--text-muted); }
.game-btn-desc { display: block; font-size: 0.82rem; font-family: var(--font-ui); color: var(--text-muted); line-height: 1.55; }
.game-btn-count { display: block; font-family: var(--font-ui); font-size: 0.68rem; color: var(--text-muted); font-style: italic; margin-top: 0.4rem; opacity: 0.75; }
.game-btn--unavailable .game-btn-count { display: none; }

/* ── Game view ── */

.game-header { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.8rem; }
.game-header h1 { margin-bottom: 0; }

.back-btn {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
}
.back-btn:hover { color: var(--text); }

.game-instructions { font-family: var(--font-ui); font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.8rem; line-height: 1.65; }

.prompt-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.3rem;
  box-shadow: var(--shadow-sm);
}
.prompt-label { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.5rem; }
.prompt-text { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); margin-bottom: 0; line-height: 1.4; }

.answer-area { display: flex; flex-direction: column; gap: 0.85rem; }

.answer-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 5px;
  padding: 0.65rem 0.9rem;
  outline: none;
  transition: border-color 0.2s, border-left-color 0.2s, box-shadow 0.2s;
}
.answer-input:focus { border-color: var(--accent); border-left-color: var(--accent); box-shadow: 0 0 0 3px rgba(45,106,79,0.08); }
.answer-input:disabled { background: var(--bg); color: var(--text-muted); border-left-color: transparent; box-shadow: none; }

/* ── Accent keyboard ── */

.accent-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 0.28rem; }
.accent-keys-label { font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-right: 0.2rem; }

.accent-btn {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.18rem 0.4rem;
  cursor: pointer;
  color: var(--text);
  line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  transition: background 0.15s, border-color 0.15s;
}
.accent-btn:hover { background: var(--bg-tint); border-color: var(--accent); }

/* ── Game action buttons ── */

.game-actions { display: flex; gap: 0.7rem; }

.btn-primary {
  font-family: var(--font-ui);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: linear-gradient(to right, var(--accent-dark) 50%, var(--accent) 50%);
  background-size: 200% 100%;
  background-position: right center;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: background-position 0.25s ease;
}
.btn-primary:hover { background-position: left center; }

.btn-secondary {
  font-family: var(--font-ui);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--bg-card);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 5px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover { background: var(--accent); color: #fff; }

/* ── Feedback ── */

@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.feedback {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  padding: 0.65rem 1rem;
  border-radius: 5px;
  border-left: 3px solid transparent;
  animation: feedbackIn 0.2s ease both;
  line-height: 1.5;
}
.feedback--correct { background: var(--bg-tint); border-left-color: var(--accent); color: #1e4d35; }
.feedback--incorrect { background: #fdf2f0; border-left-color: var(--error); color: #7a2c1a; }
/* "So close" — a near-miss, warmer than incorrect: an amber nudge, not a red X. */
.feedback--close { background: #fdf8ec; border-left-color: #d9a441; color: #7a5a1a; }
/* "correct spelling: X" caveat inside an accepted answer — quieter than the tick. */
.feedback-caveat { font-size: 0.9em; font-weight: 400; opacity: 0.85; }

.progress-line { font-family: var(--font-ui); font-size: 0.73rem; color: var(--text-muted); text-align: right; margin-top: 0.3rem; letter-spacing: 0.04em; }

/* ── Vocabulary Recall (matching game) ── */

.match-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  margin: 1.4rem 0;
}

.match-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 0.55rem;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.4;
  min-height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
  box-shadow: var(--shadow-sm);
}
.match-card:hover:not(.matched):not(.selected):not(.wrong) { border-color: var(--accent); }
.match-card.selected {
  border-color: var(--accent);
  background: var(--bg-tint);
  box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.10);
}
.match-card.matched {
  border-color: var(--border-light);
  background: var(--bg);
  color: var(--text-muted);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
.match-card.wrong {
  border-color: var(--error);
  background: #fdf2f0;
  color: #7a2c1a;
}
.match-card--pt { font-style: italic; }

.match-progress {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0;
  margin-top: 0.2rem;
}

.match-complete {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  padding: 1.2rem 0 0.5rem;
  border-top: 1px solid var(--border);
}

.match-complete-msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 0;
  flex: 1;
}

.match-empty {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.8rem 0;
  margin-bottom: 0;
}

.pill--muted { opacity: 0.38; }

/* ── Multiple Choice ── */

.mc-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1.4rem 0 0.85rem;
}

.mc-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.4;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.mc-option:hover:not(:disabled) { border-color: var(--accent); }
.mc-option:disabled             { cursor: default; }
.mc-option--correct {
  border-color: var(--accent);
  background: var(--bg-tint);
  color: #1e4d35;
}
.mc-option--wrong {
  border-color: var(--error);
  background: #fdf2f0;
  color: #7a2c1a;
}

.mc-empty {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 1.5rem 0;
  margin-bottom: 0;
}

.mc-feedback {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  margin: 0.6rem 0 0;
  line-height: 1.5;
}
.mc-feedback--correct  { color: #1e4d35; }
.mc-feedback--incorrect { color: #7a2c1a; }

/* ── Speak Stack / Pronunciation Deck ── */

.deck-wrapper {
  position: relative;
  height: 13rem;
  max-width: 320px;
  margin: 1.5rem auto 0;
}

.deck-card {
  position: absolute;
  inset: 0;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.6rem 2rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.deck-card--active   { z-index: 3; }
.deck-card--behind-1 { z-index: 2; transform: rotate(2.5deg)  translateY(10px) scale(0.98); opacity: 0.6; }
.deck-card--behind-2 { z-index: 1; transform: rotate(-4.5deg) translateY(18px) scale(0.96); opacity: 0.3; }

@keyframes deckExit {
  to { opacity: 0; }
}
.deck-card--exit {
  z-index: 4;
  animation: deckExit 200ms ease forwards;
}

.deck-card-pt {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 0.45rem;
  line-height: 1.3;
}
.deck-card-en {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  margin-bottom: 0;
}

.deck-progress-display {
  font-family: var(--font-ui);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  text-align: center;
  margin: 1.1rem 0 1.4rem;
}

.deck-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.deck-hint-text {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin-bottom: 0.75rem;
}

.deck-mic-status {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ── Level-gated content: only the selected level's sections are shown ── */
/* Each rule hides the other level's sections so the result is replacement, not cumulative. */
body[data-profile-level="A1"] details[data-level="A2"] { display: none; }
body[data-profile-level="A2"] details[data-level="A1"] { display: none; }

/* ── Responsive ── */

@media (max-width: 520px) {
  html { font-size: 16px; }
  nav { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-top: 1rem; }
  .nav-right { flex-wrap: wrap; width: 100%; gap: 0.4rem 0.5rem; }
  .nav-study { width: 100%; flex-wrap: wrap; }
  .nav-practice {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.52rem 1rem;
    border-radius: 8px;
    font-size: 0.78rem;
  }
  table { display: block; overflow-x: auto; max-width: 100%; }
  .prompt-text { font-size: 1.1rem; }
  h1 { font-size: 1.62rem; line-height: 1.14; }
  .home-greeting { font-size: 1rem; }
  td:first-child { width: 45%; }
  .page-links { grid-template-columns: 1fr; }
  .page-card-arrow { display: none; }
  .level-card { grid-template-columns: 1fr; gap: 1rem 0; }
  .level-badge { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 1rem; font-size: 2.4rem; }
  .daily-cards { grid-template-columns: 1fr; }
  .match-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Deck completion ── */

.deck-complete {
  margin-top: 1rem;
  padding: 1.4rem 0 0.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.deck-complete-count {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0;
  line-height: 1.5;
}

/* ── Quiet activity completion ── */
/* A finished standalone activity ends calmly: the completion line stays and the
   "Return to activities" button fades in — the one permitted opacity transition,
   no celebration (see governance §3, "Endings are quiet"). */
.activity-return {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.activity-return.is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .deck-card--exit { animation: none !important; }
}

/* ── Conversation length selector (shared by penpal) ── */

.conv-length-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.conv-length-btn {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.conv-length-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.conv-length-btn--unavailable {
  opacity: 0.38;
  pointer-events: none;
}

.conv-length-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.conv-length-desc {
  display: block;
  font-size: 0.78rem;
  font-family: var(--font-ui);
  color: var(--text-muted);
}

/* ── AI Penpal — phone container ── */

.penpal-phone {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  background: var(--bg-tint);
  display: flex;
  flex-direction: column;
  height: min(640px, 80vh);
  overflow: hidden;
}

@media (max-width: 520px) {
  .penpal-phone {
    max-width: 100%;
    border-radius: 12px;
    border-color: transparent;
    box-shadow: none;
    height: min(580px, 75vh);
  }
}

/* ── Penpal contact header ── */

.penpal-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.penpal-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.penpal-contact-name {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* ── Penpal scenario instruction ── */

.penpal-scenario-line {
  margin: 0;
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  font-family: var(--font-ui);
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Penpal message thread ── */

.penpal-thread {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ── Penpal bubbles — override conv-bubble defaults inside thread ── */

.penpal-thread .conv-bubble {
  max-width: 72%;
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  position: relative;
  border: none;
}

.penpal-thread .conv-bubble--system {
  border-radius: 18px 18px 18px 4px;
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

.penpal-thread .conv-bubble--user {
  border-radius: 18px 18px 4px 18px;
}

.penpal-thread .conv-bubble--user::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -5px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* ── Penpal typing indicator ── */

.penpal-typing {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-card);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  align-self: flex-start;
  width: fit-content;
}

.penpal-typing span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: penpalDot 1.4s ease-in-out infinite;
}

.penpal-typing span:nth-child(2) { animation-delay: 0.2s; }
.penpal-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes penpalDot {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
  30%           { transform: translateY(-5px); opacity: 1;    }
}

/* ── Penpal input row ── */

.penpal-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

.penpal-input {
  flex: 1;
  resize: none;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  font-family: var(--font-ui);
  background: var(--bg-tint);
  color: var(--text);
  line-height: 1.5;
  min-height: 0;
  box-sizing: border-box;
}

.penpal-input:focus {
  border-color: var(--accent);
  outline: none;
}

.penpal-send-btn {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.penpal-send-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ── Legacy conv-input (length selector still uses it) ── */

.conv-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  resize: vertical;
  display: block;
  margin: 1rem 0;
  line-height: 1.55;
}

.conv-input:focus { border-color: var(--accent); }

/* ── Conversation bubble base (used by penpal thread) ── */

.conv-bubble {
  max-width: 75%;
  padding: 0.55rem 0.9rem;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  font-family: var(--font-ui);
  margin: 0;
}

.conv-bubble--system {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  color: var(--text);
}

.conv-bubble--user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border: none;
}

/* ── Voice Call Penpal ── */

.call-phone {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  background: var(--bg-tint);
  display: flex;
  flex-direction: column;
  height: min(600px, 80vh);
  overflow: hidden;
}

@media (max-width: 520px) {
  .call-phone {
    max-width: 100%;
    border-radius: 12px;
    border-color: transparent;
    box-shadow: none;
    height: min(540px, 75vh);
  }
}

.call-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.call-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.call-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.call-contact-name {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.call-status {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  min-height: 1.2em;
  display: block;
}

.call-scenario-line {
  margin: 0;
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  font-family: var(--font-ui);
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.call-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 0.85rem;
  background: var(--bg-tint);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.call-line {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.call-line--ai    { align-items: flex-start; }
.call-line--user  { align-items: flex-end; }
.call-line--error { align-items: center; }

.call-line-label {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.call-line--ai .call-line-label   { color: var(--accent); }
.call-line--user .call-line-label { color: var(--text-muted); }

.call-line-text {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.45;
  max-width: 88%;
}

.call-line--error {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.call-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1rem 1rem 0.75rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.call-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.25rem;
  transition: opacity 0.15s, transform 0.1s;
}

.call-btn--mic {
  background: var(--accent);
  color: #fff;
}

.call-btn--mic:disabled {
  background: var(--bg-card);
  color: var(--text-muted);
  opacity: 0.45;
  cursor: default;
  border: 1.5px solid var(--border);
}

.call-btn--mic.is-listening {
  background: var(--accent);
  opacity: 1;
  animation: callMicPulse 1.3s ease-in-out infinite;
}

@keyframes callMicPulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.1); }
}

.call-btn--end {
  background: #e03030;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: auto;
  border-radius: 30px;
  padding: 0 1.25rem;
  height: 56px;
}

.call-btn--end:hover { background: #c42828; }

.call-footer {
  display: flex;
  justify-content: center;
  padding: 0.6rem 1rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
}

/* ── Support layer (penpal + call) ── */
.support-layer {
  margin: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.support-correction {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.4rem 0.65rem;
  border-left: 2.5px solid var(--accent);
  background: var(--bg-tint);
  border-radius: 0 6px 6px 0;
}

.support-correction-label {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  margin-right: 0.3em;
}

.support-hint-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.support-hint-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1.5px solid var(--accent);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.support-hint-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.support-hint-btn:not(:disabled):hover {
  background: var(--accent);
  color: #fff;
}

.support-hints {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  flex: 1;
}

.support-hints-label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
}

.support-hint-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.support-hint-item {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--text);
  padding: 0.15rem 0;
}

/* ── How Would You Respond ─────────────────────────────────────────── */

.hwyr-scenario-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.hwyr-scenario {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  font-style: italic;
}

.hwyr-trigger {
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

.hwyr-trigger-en {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0.35rem 0 0;
  font-style: normal;
}

.hwyr-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.hwyr-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.4;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.hwyr-option:hover:not(:disabled)   { border-color: var(--accent); }
.hwyr-option:focus-visible          { outline: 2px solid var(--accent); outline-offset: 2px; }
.hwyr-option:disabled               { cursor: default; opacity: 0.45; }
.hwyr-option--chosen                { opacity: 1 !important; border-color: var(--accent); background: var(--bg-tint); }

.hwyr-debrief {
  margin-top: 0.25rem;
}

.hwyr-debrief-card {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

/* Selected card carries all visual emphasis — unselected cards stay neutral */
.hwyr-debrief-card--selected {
  background: var(--bg-tint);
  border-left-width: 3px;
}

.hwyr-debrief-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.hwyr-debrief-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text);
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

/* Quality badge is now a plain inline annotation, not a scored pill */
.hwyr-quality-badge {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}

.hwyr-debrief-gloss {
  font-family: var(--font-ui);
  font-size: 0.79rem;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
  font-style: normal;
}

.hwyr-debrief-note {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Quality colours — left border only on selected card */
.hwyr-debrief-card--selected.hwyr-debrief-card--warm,
.hwyr-debrief-card--selected.hwyr-debrief-card--direct     { border-left-color: #2d6a4f; }
.hwyr-debrief-card--selected.hwyr-debrief-card--curious    { border-left-color: #3a78c9; }
.hwyr-debrief-card--selected.hwyr-debrief-card--playful    { border-left-color: #7b52b8; }
.hwyr-debrief-card--selected.hwyr-debrief-card--acceptable { border-left-color: #5a8a5e; }
.hwyr-debrief-card--selected.hwyr-debrief-card--cold,
.hwyr-debrief-card--selected.hwyr-debrief-card--formal,
.hwyr-debrief-card--selected.hwyr-debrief-card--indirect   { border-left-color: #8a8fa0; }
.hwyr-debrief-card--selected.hwyr-debrief-card--deflecting { border-left-color: #c4623a; }

/* Quality annotation text colours — badge is inline label only, no pill */
.hwyr-quality-badge--warm,
.hwyr-quality-badge--direct     { color: #2d6a4f; }
.hwyr-quality-badge--curious    { color: #2a5a9a; }
.hwyr-quality-badge--playful    { color: #5e3a9c; }
.hwyr-quality-badge--acceptable { color: #3d6b42; }
.hwyr-quality-badge--cold,
.hwyr-quality-badge--formal,
.hwyr-quality-badge--indirect   { color: #5a6070; }

/* ── Today's Practice panel ── */

.tp-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.tp-date {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.tp-heading {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.tp-preview {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  line-height: 1.6;
}

/* ── Session indicator — quiet persistent label in game-view ── */

.session-indicator {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: -1.2rem;
  margin-bottom: 1.5rem;
}

/* ── Session transition and end panels ── */

.session-transition-msg,
.session-end-msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 1.8rem;
}

.session-end-msg { margin-bottom: 0; }

@keyframes tpFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  #session-transition, #session-end {
    animation: tpFadeIn 0.18s ease;
  }
}
.hwyr-quality-badge--deflecting          { color: #9e3d1c; }

/* ── G5: HWYR save phrase button ── */

.hwyr-save-btn {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.65;
  transition: opacity 0.12s, color 0.12s;
}
.hwyr-save-btn:hover          { opacity: 1; color: var(--accent); }
.hwyr-save-btn--saved         { color: var(--accent); text-decoration: none; cursor: default; opacity: 0.8; }
.hwyr-save-btn--saved:hover   { opacity: 0.8; color: var(--accent); }

/* ── G5: Saved Phrases — trigger button ── */

/*
 * All profile bars with the phrasebook trigger: reorder children so the label comes first,
 * "Help choosing a level" sits beside A1/A2, and "Saved phrases" stays far right.
 * Scoped via :has(.sp-trigger) — applies on every page once phrasebook.js injects the trigger.
 * Visual sequence: Practice settings [A1/A2][Help choosing a level] | [Easy/Med/Hard] [Saved phrases]
 */
/*
 * Row 1: label | level pills | sep | difficulty pills | Saved phrases (right)
 * Row 2: Help choosing a level (left, subdued support link — always on its own line)
 * A flex-break pseudo-element (order 5) forces the break before the guide-trigger.
 * Visual sequence: [Practice settings] [A1][A2] | [Easy/Med/Hard] [Saved phrases]
 *                  Help choosing a level
 */
.profile-bar:has(.sp-trigger) > .profile-bar-label         { order: 0; }
.profile-bar:has(.sp-trigger) > .profile-group--level      { order: 1; }
.profile-bar:has(.sp-trigger) > .profile-bar-sep           { order: 2; }
.profile-bar:has(.sp-trigger) > .profile-group--difficulty { order: 3; }
.profile-bar:has(.sp-trigger) > .sp-trigger                { order: 4; margin-left: auto; }
.profile-bar:has(.sp-trigger)::after                       { content: ''; order: 5; flex-basis: 100%; height: 0; }
.profile-bar:has(.sp-trigger) > .guide-trigger             { order: 6; margin-left: 0; font-size: 0.6rem; opacity: 0.7; }

.sp-trigger {
  margin-left: auto;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.sp-trigger:hover { border-color: var(--accent); color: var(--accent); }

/* ── G5: Saved Phrases — modal overlay ── */

.phrases-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.17s ease, visibility 0.17s ease;
}
.phrases-overlay--open { opacity: 1; visibility: visible; }

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

body.phrases-open { overflow: hidden; }

.phrases-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  max-width: 460px;
  width: 100%;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
}

.phrases-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem 0.9rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
}

.phrases-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
  padding: 0;
  border: none;
}

.phrases-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  flex-shrink: 0;
  transition: color 0.12s;
}
.phrases-close-btn:hover { color: var(--text); }

.phrases-body {
  overflow-y: auto;
  padding: 0.9rem 1.6rem 1.4rem;
  flex: 1;
}

.phrases-empty {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0.5rem 0 0;
}

/* ── S2E: Auth trigger + modal — mirrors the Saved Phrases pattern above ── */

.auth-trigger {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-trigger:hover { border-color: var(--accent); color: var(--accent); }

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 24, 0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.17s ease, visibility 0.17s ease;
}
.auth-overlay--open { opacity: 1; visibility: visible; }

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

body.auth-open { overflow: hidden; }

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  max-width: 400px;
  width: 100%;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
}

.auth-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem 0.9rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
}

.auth-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
  padding: 0;
  border: none;
}

.auth-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.2rem;
  flex-shrink: 0;
  transition: color 0.12s;
}
.auth-close-btn:hover { color: var(--text); }

.auth-body {
  overflow-y: auto;
  padding: 0.9rem 1.6rem 1.4rem;
  flex: 1;
}

.auth-desc {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.auth-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.auth-email-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--text);
  background: var(--bg-card);
  margin-bottom: 0.9rem;
  box-sizing: border-box;
}
.auth-email-input:focus { outline: none; border-color: var(--accent); }

.auth-error {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--error);
  margin: 0.7rem 0 0;
}

/* ── G5: Saved phrases — reusable row layout (used inside modal) ── */

.saved-phrase-list {
  display: flex;
  flex-direction: column;
}

.saved-phrase-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-light);
}
.saved-phrase-row:last-child { border-bottom: none; }

.saved-phrase-body  { flex: 1; min-width: 0; }

.saved-phrase-primary {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text);
  margin: 0 0 0.18rem;
  line-height: 1.4;
}

.saved-phrase-gloss {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.18rem;
}

.saved-phrase-context {
  font-family: var(--font-ui);
  font-size: 0.73rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin: 0;
  font-style: italic;
}

.saved-phrase-remove {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.22rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.45;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.12s, color 0.12s;
}
.saved-phrase-remove:hover { opacity: 1; color: var(--error); }

/* ── G6: Session resurfacing hint (Translate→HWYR transition only) ── */

.session-resurface-msg {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: -0.6rem;
  margin-bottom: 1.4rem;
}

/* ── Primitive Practice Paths ── */

#primitive-paths-section {
  margin-bottom: 2.4rem;
}

.pp-section-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.pp-section-subtitle {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
  line-height: 1.6;
}

.pp-back-btn {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1rem;
  display: block;
  transition: color 0.15s;
}
.pp-back-btn:hover { color: var(--text); }

/* ── Card grid ── */

.pp-grid {
  display: grid;
  gap: 0.65rem;
}

.pp-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.pp-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.pp-card--empty { opacity: 0.45; cursor: default; pointer-events: none; box-shadow: none; }

.pp-card-name {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.pp-card-desc {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 0.55rem;
}

.pp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pp-card-count {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.pp-card-action {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}

/* ── Path detail ── */

.pp-detail {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-sm);
}

.pp-detail-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.pp-detail-desc {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.pp-detail-examples {
  margin-bottom: 1.2rem;
}

.pp-detail-label {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
}

.pp-example {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border-light);
}
.pp-example:last-child { border-bottom: 1px solid var(--border-light); }

.pp-example-primary {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}

.pp-example-gloss {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.pp-save-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.6;
  transition: opacity 0.12s, color 0.12s;
}
.pp-save-btn:hover        { opacity: 1; color: var(--accent); }
.pp-save-btn--saved       { color: var(--accent); text-decoration: none; cursor: default; opacity: 0.75; }
.pp-save-btn--saved:hover { opacity: 0.75; color: var(--accent); }

.pp-detail-count {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}

.pp-hwyr-btn {
  margin-top: 0.2rem;
}

.pp-actions {
  margin-top: 1.4rem;
}

.pp-action-block {
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  margin-bottom: 0.75rem;
}

.pp-action-name {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.pp-action-count {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 0.65rem;
}

.pp-empty {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
}

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

/* ── Practice Journey selector ── */

/* Hub h1: treated as an area label rather than a dominant page heading,
   so it sits close to the journey selector below it. */
#hub h1 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.journey-nav {
  display: flex;
  flex-direction: row;   /* override mobile nav { flex-direction: column } */
  align-items: stretch;  /* override mobile nav { align-items: flex-start } */
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}

.journey-btn {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 0.5rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.journey-btn:hover { color: var(--text); }
.journey-btn--active {
  color: #fff;
  background: var(--sec-practice);
  font-weight: 600;
}

.journey-subtitle {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.journey-section {
  /* Sections are shown/hidden by PracticeJourney; no extra styling needed */
}

/* Keep journey tabs horizontal and compact on narrow screens */
@media (max-width: 420px) {
  .journey-btn {
    font-size: 0.68rem;
    padding: 0.4rem 0.3rem;
    letter-spacing: 0.02em;
  }
}

/* Mobile profile bar: hide the "Practice settings" label so level/difficulty pills
   have enough room to stay on one row. Natural flex-wrap then produces:
   Row 1: [A1][A2] | [Easy/Med/Hard]
   Row 2: Saved phrases (single compact chip, when space requires)
   Row 3: Help choosing a level (subdued) */
@media (max-width: 520px) {
  .profile-bar-label { display: none; }
  .sp-trigger {
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
    max-width: none;
    padding: 0.24rem 0.5rem;
  }
  /* Keep the "Help choosing a level" link on its own line so it never clips */
  .guide-trigger {
    white-space: normal;
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}

/* Practice mobile top: keep the controls available while reducing the stacked prelude. */
@media (max-width: 520px) {
  body > nav {
    gap: 0.45rem;
    padding-top: 0.85rem;
    padding-bottom: 0.65rem;
    margin-bottom: 0.95rem;
  }

  .nav-right {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .nav-study {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.18rem 0.45rem;
  }

  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.22rem 0.32rem;
    font-size: 0.64rem;
    letter-spacing: 0.035em;
  }

  .nav-practice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: max-content;
    min-height: 2rem;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    font-size: 0.66rem;
    letter-spacing: 0.045em;
    box-shadow: 0 0 0 1px rgba(31, 92, 58, 0.2);
  }

  .mode-control {
    width: 100%;
    min-width: 0;
    margin-bottom: 0.65rem;
  }

  .mode-segment {
    width: min(100%, 33rem);
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
  }

  .mode-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.1rem;
    padding: 0.38rem 0.45rem;
    font-size: 0.68rem;
    white-space: normal;
  }

  .profile-bar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 0.3rem 0.36rem;
    margin-bottom: 0.72rem;
    padding: 0.42rem 0.55rem;
  }

  .profile-group {
    gap: 0.16rem;
  }

  .profile-pill,
  .sp-trigger {
    min-height: 2rem;
    font-size: 0.62rem;
  }

  .profile-pill {
    padding: 0.2rem 0.46rem;
    letter-spacing: 0.045em;
  }

  .profile-bar:has(.sp-trigger) > .sp-trigger {
    margin-left: 0;
  }

  .profile-bar:has(.sp-trigger)::after {
    display: none;
  }

  .profile-bar:has(.sp-trigger) > .guide-trigger {
    margin-left: 0;
    padding: 0.18rem 0;
    font-size: 0.6rem;
    line-height: 1.2;
  }

  #hub h1 {
    font-size: 1.48rem;
    margin-bottom: 0.32rem;
  }

  .journey-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .journey-btn {
    min-width: 0;
    min-height: 2.15rem;
    padding: 0.36rem 0.4rem;
  }

  .journey-subtitle {
    margin-bottom: 0.72rem;
  }

  .tp-panel,
  .pp-detail {
    padding: 1.1rem 1.15rem;
  }
}

@media (max-width: 380px) {
  .nav-link {
    padding-inline: 0.22rem;
    font-size: 0.61rem;
  }

  .nav-practice {
    padding-inline: 0.48rem;
    font-size: 0.63rem;
  }

  .mode-btn {
    font-size: 0.64rem;
  }

  .profile-pill,
  .sp-trigger {
    font-size: 0.62rem;
  }
}

/* ── Verb Reference ── */

.verb-tool,
.vocab-tool {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 2.5rem;
  overflow: hidden;
}

.verb-tool > summary,
.vocab-tool > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.verb-tool > summary::-webkit-details-marker,
.vocab-tool > summary::-webkit-details-marker { display: none; }

.verb-tool-summary-text,
.vocab-tool-summary-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.verb-tool-title,
.vocab-tool-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.verb-tool-sub,
.vocab-tool-sub {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.verb-tool > summary::after,
.vocab-tool > summary::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg) translateY(-1px);
  transition: transform 0.2s ease, border-color 0.2s;
  margin-left: 0.75rem;
  flex-shrink: 0;
}

.verb-tool > summary:hover::after,
.vocab-tool > summary:hover::after { border-color: var(--text); }
.verb-tool[open] > summary::after,
.vocab-tool[open] > summary::after { transform: rotate(45deg) translateY(-3px); }

.verb-tool-body,
.vocab-tool-body {
  padding: 0.5rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border-light);
}

.grammar-patterns-heading {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.grammar-patterns-sub {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.verb-lookup-wrap,
.vocab-lookup-wrap {
  position: relative;
  max-width: 22rem;
  margin-bottom: 1.2rem;
}

.verb-search-input,
.vocab-search-input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.45rem 0.75rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.verb-search-input:focus,
.vocab-search-input:focus { border-color: var(--accent); }
.verb-search-input::placeholder,
.vocab-search-input::placeholder { color: var(--text-muted); }

.verb-suggestions,
.vocab-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.07);
  max-height: 13rem;
  overflow-y: auto;
}

.verb-suggestions li,
.vocab-suggestions li {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.38rem 0.75rem;
  cursor: pointer;
  transition: background 0.1s;
}
.verb-suggestions li:hover,
.vocab-suggestions li:hover { background: var(--bg); }

.vc-sug-inf,
.vl-sug-word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
}

.vc-sug-en,
.vl-sug-meaning {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verb-display,
.vocab-display {
  max-width: 42rem;
}

.vl-card {
  border-top: 1px solid var(--border-light);
  padding-top: 0.65rem;
}

.vl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.45rem;
}

.vl-word {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--text);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.4rem;
}

.vl-pron {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.vl-meaning {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-top: 0.12rem;
}

.vl-part {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.08rem 0.38rem;
  white-space: nowrap;
}

.vl-section {
  margin-top: 0.55rem;
}

.vl-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.vl-example {
  margin-bottom: 0.35rem;
}

.vl-example-main {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--text);
}

.vl-example-gloss {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.08rem;
}

.vl-related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.vl-chip {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.12rem 0.36rem;
}

.vl-missing {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-light);
  padding-top: 0.9rem;
}

.vc-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.6rem;
}

.vc-infinitive {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text);
}

.vc-english {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.vc-group {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
}

.vc-note {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.vc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vc-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.82rem;
}

.vc-table thead th {
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0.6rem;
  text-align: left;
  white-space: nowrap;
}

.vc-th-subject { min-width: 9rem; }

.vc-present-col { background: rgba(237,242,234,0.45); }

.vc-table tbody tr:nth-child(even) { background: var(--bg); }

.vc-table tbody td {
  padding: 0.38rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.vc-table .vc-subject {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  vertical-align: middle;
}

.vc-form-cell { line-height: 1; }

.vc-form {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  vertical-align: middle;
}

.vc-nearfut { color: var(--text-muted); }

.vc-gloss {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.12rem;
  white-space: nowrap;
}

.vc-listen {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0 0.2rem;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 0.25rem;
  line-height: 1.4;
  transition: color 0.15s, border-color 0.15s;
}
.vc-listen:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 520px) {
  .vc-th-subject { min-width: 5.5rem; }
  .vc-table { font-size: 0.78rem; }
  .vc-form  { font-size: 0.82rem; }
  .vc-gloss { font-size: 0.63rem; }
}

/* ── Full-site login gate (S2 gate step) ──
   An inline <head> script sets data-auth-gate="pending" on <html> before
   first paint; this rule hides page content until gate.js resolves the
   session — same hide-until-ready pattern as the DataLoader-gated #hub.
   gate.js flips the attribute to "open" once signed in. */

html[data-auth-gate="pending"] body > :not(.gate-screen) { display: none !important; }

.gate-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}
.gate-screen[hidden] { display: none; }

.gate-inner {
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.gate-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 0.5rem;
}
/* "Oi" gate logotype — constant across directions; the tile mirrors the header wordmark */
.gate-brand-block { margin: 0 0 1.3rem; }
.gate-brand-logo { margin: 0; }
.gate-brand-logo::after {
  content: "";
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  margin-left: 0.14em;
  border-radius: 3px;
  background: var(--accent);
  vertical-align: 0.08em;
}
.gate-tagline {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  margin: 0.45rem 0 0;
}

.gate-line {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1.7rem;
}

.gate-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.1rem 0 0.4rem;
  border: none;
  padding: 0;
}

.gate-desc {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.gate-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}
.gate-actions .btn-primary { min-width: 220px; }

.gate-btn-secondary {
  min-width: 220px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.gate-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.gate-text-btn {
  display: block;
  margin: 0.9rem auto 0;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gate-text-btn:hover { color: var(--accent); }

.gate-inner .auth-label { display: block; text-align: left; }
.gate-inner .auth-email-input { text-align: left; }
.gate-inner .auth-error { text-align: left; }

/* Signed-in account modal: name-first layout */
.auth-signed-in-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.15rem;
}
.auth-signed-in-email {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
}

/* Quiet "Edit name" affordance in the signed-in view */
.auth-edit-name-btn {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--accent);
  cursor: pointer;
}
.auth-edit-name-btn:hover { text-decoration: underline; }

/* Quiet link to the data & privacy page, sitting above Log out. */
.auth-privacy-link {
  display: block;
  margin: 0 0 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
}
.auth-privacy-link:hover { text-decoration: underline; }

/* Name-edit form: Save + Cancel sit side by side, content-width like the
   modal's other buttons */
.auth-edit-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

/* Gate onboarding: learning-direction cards (each self-described in its own language) */
.gate-direction-options {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

.gate-direction-card {
  display: block;
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.gate-direction-card:hover,
.gate-direction-card:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.gate-direction-primary {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.gate-direction-secondary {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Pre-login language toggle — reuses .mode-segment / .mode-btn. Centered in the
   text-centered gate; lets a PT speaker read the whole gate in Portuguese before
   authenticating. (Replaces the old hover-flip mechanic entirely.) */
.gate-lang-toggle {
  display: inline-flex;
  margin: 0 0 1.5rem;
}

/* ── Hover-to-translate (gloss.js) ── */
.gloss-word { cursor: help; border-radius: 3px; transition: background 0.12s ease; }
.gloss-word:hover,
.gloss-word--active { background: rgba(191, 148, 74, 0.18); }

.gloss-pop {
  position: absolute;
  z-index: 1200;
  max-width: min(20rem, 90vw);
  padding: 0.5rem 0.7rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e4ded3);
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text, #2b2b2b);
}
.gloss-pop__phon { color: var(--accent, #bf944a); font-style: italic; }
.gloss-pop__sep  { color: var(--muted, #9a9284); }
.gloss-pop__t    { font-weight: 500; }
.gloss-pop__word { font-weight: 600; margin-right: 0.5rem; }
.gloss-pop__btn {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--accent, #bf944a);
  border-radius: 999px;
  background: none;
  color: var(--accent, #bf944a);
  cursor: pointer;
}
.gloss-pop__btn:hover:not(:disabled) { background: rgba(191, 148, 74, 0.12); }
.gloss-pop__btn:disabled { opacity: 0.7; cursor: default; }

/* One-time homepage tip introducing the gesture */
.gloss-tip {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0.6rem 0.85rem;
  background: rgba(191, 148, 74, 0.08);
  border: 1px solid rgba(191, 148, 74, 0.25);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--text, #2b2b2b);
}
.gloss-tip__x {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--muted, #9a9284); line-height: 1;
}

/* Hear-pronunciation button in the gloss popover (the phonetics solution) */
.gloss-pop__speak {
  margin-left: 0.5rem;
  padding: 0 0.15rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.75;
  vertical-align: middle;
}
.gloss-pop__speak:hover { opacity: 1; }

/* Verb conjugation block in the vocabulary lookup */
.vl-conj-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.85rem; margin: 0.25rem 0; }
.vl-conj-tense { font-weight: 600; min-width: 3.8rem; font-size: 0.82rem; color: var(--sec-vocab); }
.vl-conj-cell { font-size: 0.92rem; }
.vl-conj-subj { color: var(--text-muted); font-size: 0.78rem; }
.vl-conj-note { font-weight: 400; font-size: 0.72rem; color: var(--text-muted); margin-left: 0.5rem; }