/* ============================================================
   DESIGN SYSTEM — Practice English
   Tokens globales, componentes base, header, footer, scrollbar
   ============================================================ */

/* ---- Custom Properties (Design Tokens) ---- */
:root {
  --clr-primary:         #2563EB;
  --clr-primary-dark:    #1D4ED8;
  --clr-primary-light:   #DBEAFE;
  --clr-accent:          #F59E0B;
  --clr-accent-dark:     #D97706;
  --clr-accent-light:    #FEF3C7;
  --clr-path:            #C9920A;
  --clr-path-dark:       #A57508;
  --clr-path-light:      #FDF3DC;
  --clr-check-btn:       #03595F;
  --clr-success:         #059669;
  --clr-success-light:   #D1FAE5;
  --clr-danger:          #DC2626;
  --clr-danger-light:    #FEE2E2;
  --clr-grammar:         #7C3AED;
  --clr-grammar-light:   #EDE9FE;
  --clr-bg:              #F1F3F5;
  --clr-surface:         #FAFBFC;
  --clr-surface-2:       #F3F5F7;
  --clr-border:          #DEE2E8;
  --clr-border-hover:    #C8CDD6;
  --clr-text:            #1A1D23;
  --clr-text-muted:      #5E6B7A;
  --clr-text-light:      #8595A4;
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-xl:  0 24px 48px rgba(0,0,0,0.14);
  --shadow-accent:  0 8px 24px rgba(245,158,11,0.25);
  --shadow-primary: 0 8px 24px rgba(37,99,235,0.25);
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;
  --transition:        0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --header-h: 68px;
  --max-w:    1200px;
  /* Standard page side (horizontal) padding — the ONE source of truth every page
     container uses so the spacing to the screen edges matches the home page on
     every screen. Fluid: 24px on tablet/desktop (≥480px, exactly home's value),
     scaling down to 16px on small phones so narrow screens keep usable content
     width. Change here to re-space the whole app. */
  --page-pad-x: clamp(16px, 5vw, 24px);
  --gradient-hero: linear-gradient(135deg, #EBEEF2 0%, #F1F3F5 50%, #ECEEF2 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  background: var(--gradient-hero);
  color: var(--clr-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Visually Hidden (screen-reader only) ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Skip to Main Content (Accessibility) ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--clr-primary);
  color: #fff;
  padding: 10px 24px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  z-index: 9999;
  white-space: nowrap;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ---- Focus Ring (WCAG 2.1 AA) ---- */
:focus-visible {
  outline: 3px solid var(--clr-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Header ---- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-h);
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

@media (max-width: 600px) {
  header { justify-content: flex-start; }
}

header a { display: flex; align-items: center; text-decoration: none; }

header img {
  height: 44px;
  width: auto;
  transition: transform var(--transition);
}

header img:hover { transform: scale(1.05); }

/* ── Language pair badge (injected by lang-pair.js) ── */
.lp-badge {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 6px 10px;
  text-decoration: none;
  line-height: 1;
  transition: background var(--transition), border-color var(--transition);
  cursor: pointer;
}
.lp-badge:hover {
  background: var(--clr-bg);
  border-color: var(--clr-primary);
}
.lp-badge__sep {
  font-size: 0.6rem;
  color: var(--clr-text-muted);
  margin: 0 2px;
}

/* ---- Footer ---- */
footer {
  width: 100%;
  margin-top: auto;
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%);
  color: #fff;
  padding: 18px 32px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: 16px;
}

.footer-content p { font-size: 0.85rem; opacity: 0.8; font-weight: 500; }

.github-logo {
  font-size: 22px;
  display: inline-flex;
  transition: transform var(--transition);
}

.github-logo:hover svg { opacity: 1; }
.github-logo:hover { transform: scale(1.15); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb {
  background: #BCC4CE;
  border-radius: var(--radius-full);
  border: 2px solid var(--clr-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--clr-primary); }

/* ---- Global Animations ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.08); opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200%; }
  100% { background-position:  200%; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.03); }
}
@keyframes revealUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .footer-content { flex-direction: column; text-align: center; gap: 8px; }
}

/* ---- Global Utility: Hidden ---- */
.hidden { display: none !important; }

/* ---- i18n cloak (FOUC prevention for non-Spanish-source pairs) ----
   The HTML text is hardcoded in Spanish (the original source language).
   For a pair whose source is another language (e.g. en-es), page-title.js
   adds `lang-cloak` to <html> in the <head> so no Spanish text is painted;
   nav.js removes it at end of body once every element has been translated.
   Spanish-source pairs (es-en) never get the class, so they render instantly.
   `visibility` keeps layout intact (no reflow) and lets the page background show. */
html.lang-cloak body { visibility: hidden; }

/* ---- Shared Component: Back Button ---- */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  font-family: 'Raleway', sans-serif;
  white-space: nowrap;
}
.back-btn:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
  border-color: var(--clr-primary-light);
}

/* ---- Shared Component: Streak Badge ---- */
.streak-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-accent-dark);
  background: var(--clr-accent-light);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ---- Shared Component: Session Info Bar ---- */
.session-info-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 8px;
  opacity: 0;
  animation: fadeIn 0.4s ease-out 0.05s forwards;
}

/* ---- Shared Component: Session Counter Pill ---- */
.session-counter {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ---- Shared Component: Session Progress Bar ---- */
.session-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--clr-border);
  border-radius: 2px;
  margin-top: -20px;
  margin-bottom: 24px;
  overflow: hidden;
}
.session-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--activity-clr, var(--clr-primary));
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* ---- Shared Component: Rating Area ---- */
.rating-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  animation: fadeInScale 0.35s ease-out both;
}

.rating-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.rating-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.rating-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 10px 22px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--transition-bounce), box-shadow var(--transition), filter var(--transition);
}
.rating-btn:hover  { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); }
.rating-btn:active { transform: scale(0.96); }
.rating-btn.hard  { color: var(--clr-danger);  background: var(--clr-danger-light);  border-color: var(--clr-danger); }
.rating-btn.ok    { color: var(--clr-primary); background: var(--clr-primary-light); border-color: var(--clr-primary); }
.rating-btn.easy  { color: var(--clr-success); background: var(--clr-success-light); border-color: var(--clr-success); }

.next-btn {
  padding: 12px 40px;
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--clr-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--transition-bounce), filter var(--transition);
}
.next-btn:hover  { filter: brightness(1.1); transform: translateY(-2px); }
.next-btn:active { transform: scale(0.96); }

.try-again-btn {
  padding: 10px 32px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  background: var(--clr-surface);
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.try-again-btn:hover  { border-color: var(--clr-primary); color: var(--clr-primary); }
.try-again-btn:active { transform: scale(0.96); }
.rating-hint {
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0;
}

/* ---- Shared Component: Resume Banner ---- */
.resume-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--clr-primary-light);
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  text-align: center;
}
.resume-btn {
  padding: 10px 26px;
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition-bounce), filter var(--transition);
}
.resume-btn:hover  { filter: brightness(1.1); transform: translateY(-2px); }
.resume-btn:active { transform: scale(0.97); }
.resume-hint-label {
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  opacity: 0.8;
}

/* ---- Shared Component: Post-session notification prompt ---- */
.done-notif-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-lg);
  margin-top: 4px;
  animation: fadeIn 0.3s ease-out both;
  flex-wrap: wrap;
}

.done-notif-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.done-notif-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--clr-text);
}

.done-notif-text span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-text-muted);
}

.done-notif-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.done-notif-yes,
.done-notif-no {
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.done-notif-yes {
  background: var(--clr-primary);
  color: #fff;
  border: 2px solid var(--clr-primary);
}

.done-notif-yes:hover { background: var(--clr-primary-dark); border-color: var(--clr-primary-dark); }

.done-notif-no {
  background: transparent;
  color: var(--clr-text-muted);
  border: 2px solid var(--clr-border);
}

.done-notif-no:hover { border-color: var(--clr-text-muted); color: var(--clr-text); }

.done-notif-confirmed {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--clr-success);
  padding: 4px 2px;
}

/* ---- Shared Component: Activity Mode Nav ---- */
.mode-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  box-shadow: var(--shadow-xs);
  padding: 6px 16px;
  width: 100%;
  position: sticky;
  top: var(--header-h);
  z-index: 90;
}

.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

.mode-btn:hover {
  background: rgba(37,99,235,0.08);
  color: #2563EB;
}

.mode-btn.active {
  background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.30);
}

.mode-btn.active--path {
  background: linear-gradient(135deg, var(--clr-path) 0%, var(--clr-path-dark) 100%);
  box-shadow: 0 2px 8px rgba(201,146,10,0.35);
}

.mode-btn.active--path:hover {
  background: linear-gradient(135deg, var(--clr-path-dark) 0%, var(--clr-path) 100%);
  color: #fff;
}

/* Path mode — override primary color tokens so all activity UI turns gold */
body.path-mode {
  --clr-primary:       var(--clr-path);
  --clr-primary-dark:  var(--clr-path-dark);
  --clr-primary-light: var(--clr-path-light);
}

.mode-btn[data-nav="my-learning"]:hover {
  background: rgba(201,146,10,0.10);
  color: var(--clr-path);
}

/* Neutral buttons (home, settings) — silver/gray hover & active */
.mode-btn.mode-home:hover,
.mode-btn[data-nav="settings"]:hover {
  background: rgba(94,107,122,0.10);
  color: var(--clr-text-muted);
}

.mode-btn[data-nav="settings"].active {
  background: linear-gradient(135deg, #6B7280 0%, #4B5563 100%);
  box-shadow: 0 2px 8px rgba(75,85,99,0.35);
}

.mode-btn[data-nav="settings"].active:hover {
  background: linear-gradient(135deg, #4B5563 0%, #6B7280 100%);
  color: #fff;
}

/* Separator between nav groups */
.mode-sep {
  width: 1px;
  height: 18px;
  background: var(--clr-border);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Streak badge inside the nav bar */
.mode-streak {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clr-accent-dark);
  background: var(--clr-accent-light);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-right: 6px;
}
.mode-streak:empty { display: none; }

/* Button text labels: visible by default, hidden on narrow viewports */
.btn-label { display: inline; }

@media (max-width: 640px) {
  .mode-switcher {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1px;
    padding: 5px 8px;
  }

  /* Hide home button — redundant on mobile, saves space */
  .mode-home { display: none; }

  /* Visually hide label text but keep it available to screen readers */
  .btn-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .mode-btn { padding: 5px 7px; font-size: 0.82rem; }
  .mode-sep { display: none; }
}


/* ---- Shared Component: Topic Grid (used by Cloze, Quiz, Vocabulary) ---- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  width: 100%;
  animation: fadeIn 0.5s ease-out 0.1s both;
}

.topic-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--clr-surface);
  border: 2px solid var(--clr-border);
  border-top: 3px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition-bounce), box-shadow var(--transition);
  font-family: 'Raleway', sans-serif;
}

.topic-btn:hover {
  border-color: var(--clr-primary-light);
  border-top-color: var(--clr-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.topic-btn:active { transform: scale(0.97); }

.topic-emoji { font-size: 1.8rem; line-height: 1; }
.topic-label { font-size: 0.82rem; font-weight: 700; color: var(--clr-text); }

/* ---- Shared Component: Topic Picker Header ---- */
.topic-picker-header {
  text-align: center;
  margin-bottom: 24px;
  animation: fadeIn 0.5s ease-out both;
}

.topic-picker-header h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  color: var(--clr-text);
  margin-bottom: 8px;
}

.topic-picker-header h1 span { color: var(--clr-primary); }

.topic-picker-header p {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  font-weight: 500;
  max-width: 400px;
  margin: 0 auto;
}

/* ---- Shared Component: Image Topic Cards ---- */
.img-topic-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.img-topic-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--topic-clr, var(--clr-primary));
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  font-family: 'Raleway', sans-serif;
  padding: 0;
  /* Cards are fully opaque by default. The orchestrated entrance below runs only once
     the page is revealed (.page-in, added when the cloak lifts and the grid is already
     built) — so there is never an empty grid animating in, just an ordered reveal. */
  transition: transform var(--transition), box-shadow var(--transition);
}

/* ---- Orchestrated picker reveal (title → subtitle → cards) ----
   Gated on .page-in, which page-title.js adds the instant it lifts the cloak — by then the
   whole picker (header + all cards) is already in the DOM, so this is a pure entrance
   animation with nothing missing. The header wrapper class differs per activity, so target
   by structure: #topic-picker > header-div > (h1, p), then the grid cards. Per-card delay is
   set inline (capped) in topic-grid.js. */
.page-in #topic-picker > div:first-child > h1 { animation: revealUp .5s ease both; }
.page-in #topic-picker > div:first-child > p  { animation: revealUp .5s ease .09s both; }
.page-in #topic-grid > .img-topic-card         { animation: revealUp .45s ease both; }
@media (prefers-reduced-motion: reduce) {
  .page-in #topic-picker > div:first-child > h1,
  .page-in #topic-picker > div:first-child > p,
  .page-in #topic-grid > .img-topic-card { animation: none; }
}

.img-topic-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.img-topic-card:active { transform: scale(0.97); }

/* Loading skeleton — placeholder cards fill the grid the instant the header shows,
   so the subtitle never sits alone above an empty gap while topics.json loads. They
   share the real card's box (same img-wrap 16/9 + body), so swapping in real cards
   causes no layout shift. Rendered by AppTopicGrid on DOMContentLoaded, cleared by build(). */
.img-topic-card--skeleton { cursor: default; pointer-events: none; opacity: 1; animation: none; border-left-color: var(--clr-border); }
.sk-shimmer { position: relative; overflow: hidden; background: var(--clr-border); }
.sk-shimmer::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: skShimmer 1.3s ease-in-out infinite;
}
@keyframes skShimmer { 100% { transform: translateX(100%); } }
.img-topic-card--skeleton .img-topic-card__img-wrap { background: var(--clr-border); }
.sk-line { display: block; height: 12px; border-radius: 6px; }
.sk-line + .sk-line { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .sk-shimmer::after { animation: none; } }

/* Per-topic accent colors */
.img-topic-card[data-theme="greetings"]       { --topic-clr: #2563EB; }
.img-topic-card[data-theme="emociones"]       { --topic-clr: #DB2777; }
.img-topic-card[data-theme="restaurant"]      { --topic-clr: #EA580C; }
.img-topic-card[data-theme="supermarket"]     { --topic-clr: #0891B2; }
.img-topic-card[data-theme="kitchen"]         { --topic-clr: #15803D; }
.img-topic-card[data-theme="transportation"]  { --topic-clr: #0D9488; }
.img-topic-card[data-theme="airport"]         { --topic-clr: #0369A1; }
.img-topic-card[data-theme="accommodation"]   { --topic-clr: #7C5CBF; }
.img-topic-card[data-theme="movies"]          { --topic-clr: #C0392B; }
.img-topic-card[data-theme="music"]           { --topic-clr: #0E7490; }
.img-topic-card[data-theme="theater"]         { --topic-clr: #B45309; }
.img-topic-card[data-theme="museums"]         { --topic-clr: #9333EA; }
.img-topic-card[data-theme="gym"]             { --topic-clr: #DC2626; }
.img-topic-card[data-theme="technology"]      { --topic-clr: #7C3AED; }
.img-topic-card[data-theme="accountability"]  { --topic-clr: #4338CA; }
.img-topic-card[data-theme="personal_info"]   { --topic-clr: #0D9488; }
.img-topic-card[data-theme="family"]          { --topic-clr: #E11D48; }
.img-topic-card[data-theme="daily_routine"]   { --topic-clr: #0284C7; }
.img-topic-card[data-theme="health"]          { --topic-clr: #16A34A; }
.img-topic-card[data-theme="weather"]         { --topic-clr: #0EA5E9; }
.img-topic-card[data-theme="directions"]      { --topic-clr: #CA8A04; }
.img-topic-card[data-theme="survival"]        { --topic-clr: #DB2777; }
.img-topic-card[data-theme="general"]         { --topic-clr: #64748B; }
.img-topic-card[data-theme="descripciones"]       { --topic-clr: #8B5CF6; }
.img-topic-card[data-theme="conversacion"]        { --topic-clr: #06B6D4; }
.img-topic-card[data-theme="planes"]              { --topic-clr: #10B981; }
.img-topic-card[data-theme="naturaleza_lugares"]  { --topic-clr: #65A30D; }
.img-topic-card[data-theme="tiempo_libre"]        { --topic-clr: #F43F5E; }
.img-topic-card[data-theme="economia"]            { --topic-clr: #4F46E5; }
.img-topic-card[data-theme="oficina"]             { --topic-clr: #4B5563; }
.img-topic-card[data-theme="profesiones"]         { --topic-clr: #B45309; }
.img-topic-card[data-theme="describiendo_personas"] { --topic-clr: #DB2777; }
.img-topic-card[data-theme="sitios"]              { --topic-clr: #059669; }
.img-topic-card[data-theme="vestimenta"]  { --topic-clr: #C026D3; }
.img-topic-card[data-theme="hogar"]       { --topic-clr: #D97706; }
.img-topic-card[data-theme="calendario"]  { --topic-clr: #6366F1; }
.img-topic-card[data-theme="emergencias"] { --topic-clr: #EF4444; }
.img-topic-card[data-theme="cotidianidad"]        { --topic-clr: #0284C7; }
.img-topic-card[data-theme="pensamientos_opiniones"] { --topic-clr: #7C3AED; }
.img-topic-card[data-theme="viajes"]              { --topic-clr: #0D9488; }
.img-topic-card[data-theme="animales"]            { --topic-clr: #CA8A04; }
.img-topic-card[data-theme="deportes"]            { --topic-clr: #DC2626; }
.img-topic-card[data-theme="cuerpo"]              { --topic-clr: #16A34A; }
.img-topic-card[data-theme="estudios"]            { --topic-clr: #2563EB; }
.img-topic-card[data-theme="politica"]            { --topic-clr: #B91C1C; }
.img-topic-card[data-theme="conceptos"]           { --topic-clr: #D97706; }

.img-topic-card__img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--topic-clr, var(--clr-primary));
}

.img-topic-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.img-topic-card:hover .img-topic-card__img { transform: scale(1.06); }

.img-topic-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.52) 100%);
}

.img-topic-card__body {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.img-topic-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img-topic-card__progress {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}

@media (max-width: 480px) {
  .img-topic-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ---- Phrase Browser ---- */
/* Fills the standard page container (--max-w + 24px gutters) so the
   two-column chip grid gets wide, readable columns like the topic grid. */
.pb-section {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 2rem;
  animation: pb-fade-in 0.18s ease;
}

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

/* Top bar: back button + title/count */
.pb-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 4px 14px;
}

.pb-bar-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pb-bar-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-bar-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}

/* Progress track */
.pb-track {
  height: 5px;
  background: var(--clr-border);
  border-radius: var(--radius-full);
  margin: 0 0 20px;
  overflow: hidden;
}

.pb-track-fill {
  height: 100%;
  background: var(--activity-clr, var(--clr-primary));
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

/* Chip grid — 2-column list of fixed-height rows */
.pb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 24px;
}

/* Below ~700px two columns would truncate phrases again — switch to one
   full-width column instead of showing cut-off text. */
@media (max-width: 700px) {
  .pb-grid { grid-template-columns: 1fr; }
}

.pb-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 14px;
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

.pb-chip:hover,
.pb-chip:focus-visible {
  border-color: var(--activity-clr, var(--clr-primary));
  box-shadow: var(--shadow-sm);
  outline: none;
}

.pb-chip--seen {
  border-left-width: 3px;
  border-left-color: var(--clr-success);
}

.pb-chip-num {
  font-size: 0.63rem;
  font-weight: 700;
  color: var(--clr-text-light);
  min-width: 16px;
  flex-shrink: 0;
  order: 1;
}

/* dot moved to right via order */
.pb-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-border);
  flex-shrink: 0;
  order: 4;
  margin-left: auto;
}

.pb-chip--seen .pb-chip-dot {
  background: var(--clr-success);
  border-color: var(--clr-success);
}

.pb-chip-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  order: 2;
  min-width: 0;
}

.pb-chip--seen .pb-chip-text { color: var(--clr-text-muted); }

/* subcategory badge (vocab/quiz only) — sits between text and dot */
.pb-chip-sub {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
  order: 3;
}

/* CEFR level badge inside phrase/word browser chips — always the
   rightmost element, flush to the chip edge (variant pips sit before it). */
.pb-chip-cefr {
  flex-shrink: 0;
  order: 5;
  padding: 1px 6px;
}

/* Coverage pips — one dot per form; filled = practiced. The single indicator
   per chip: one pip for single-form phrases (practiced-or-not), N pips for
   multi-form phrases (gender/region/register coverage). Replaces the old
   separate "seen" dot so there is no big-vs-small dot to explain. */
.pb-chip-cov {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-shrink: 0;
  order: 4;
  padding-left: 4px;
  /* Fixed slot for up to 3 pips so the CEFR badge column stays aligned
     across chips regardless of how many variant pips each phrase has. */
  min-width: 32px;
}
.pb-cov-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--clr-border);
  transition: background var(--transition), box-shadow var(--transition);
}
.pb-cov-pip--done {
  background: var(--clr-success);
  box-shadow: none;
}

/* ---- Reduced Motion (Accessibility) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Grammar Micro-tip Chip (Speaking, Cloze, Translation) ---- */
.grammar-chip-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.grammar-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: var(--clr-grammar-light);
  color: var(--clr-grammar);
  border: 1.5px solid var(--clr-grammar);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity var(--transition), transform var(--transition);
}

.grammar-chip:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* ---- Word-level diff highlights (shared across Cloze, Translation, Scramble) ---- */
.diff-ok  { color: var(--clr-success); background: rgba(5,150,105,0.1);  border-radius: 3px; padding: 1px 4px; margin: 0 1px; }
.diff-err { color: var(--clr-danger);  background: rgba(220,38,38,0.1);  border-radius: 3px; padding: 1px 4px; margin: 0 1px; text-decoration: line-through; }

/* ---- Unified Feedback Diff (AppFeedback — shared across all exercises) ---- */
.uf-diff-wrap { display: flex; flex-direction: column; gap: 8px; }

.uf-diff-row {
  display: flex;
  align-items: flex-start;
}

.uf-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--clr-text-muted);
  width: 130px;
  flex-shrink: 0;
  font-style: normal;
  padding-right: 10px;
  padding-top: 4px;
  border-right: 1.5px solid rgba(0,0,0,0.15);
  margin-right: 14px;
  text-align: right;
  line-height: 1.4;
}

.uf-words {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 4px;
  align-items: baseline;
  line-height: 1.8;
}

.uf-word-ok   { font-size: 0.85rem; color: var(--clr-success); background: rgba(5,150,105,0.13); border-radius: 3px; padding: 1px 5px; font-style: italic; font-weight: 600; }
.uf-word-err  { font-size: 0.85rem; color: var(--clr-danger);  background: rgba(220,38,38,0.12);  border-radius: 3px; padding: 1px 5px; font-style: italic; font-weight: 600; text-decoration: line-through; }
.uf-word-miss { font-size: 0.85rem; color: var(--clr-text-muted); font-style: italic; }

/* ---- Feedback divider + note (shared: Quiz example, Translation grammar tip) ---- */
.feedback-divider { border: none; border-top: 1px solid rgba(0,0,0,0.08); margin: 12px 0 0; }

.feedback-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 7px 10px;
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--clr-text-muted);
  line-height: 1.5;
}

.feedback-note-icon { flex-shrink: 0; font-style: normal; }
.feedback-note-text { font-style: italic; }

/* ---- Alternative chips (AppFeedback.buildAltNote — shown after correct answer) ---- */
.alt-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.alt-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 8px;   /* a touch less on the left (the badge already has its own inset) */
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--clr-text);
}

/* Vocab flashcard variant recognition strip: labelled chips (region flag / gender pill + text). */
.word-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.alt-chip-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--clr-primary);
  white-space: nowrap;
}

.alt-chip-text { font-style: italic; }

.alt-chip-text + .alt-chip-text::before {
  content: '·';
  font-style: normal;
  color: var(--clr-border);
  margin-right: 4px;
}

.alt-chip--base { border-color: var(--clr-primary); }

/* ---- Back-to-path link (shown after answer in activities) ---- */
.back-to-path-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.2s, color 0.2s;
}
.back-to-path-link:hover { opacity: 1; color: var(--clr-primary); }

/* ---- Flag stacks (AppFlags — shared/js/flags.js) ---- */
.flag-stack {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  /* width/height set inline by AppFlags.langFlags, sized to the flag cascade (1, 2 or 3+ flags). */
}

/* Real flag <img> assets need an explicit size (the files have large intrinsic sizes). */
.flag-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}

.flag-front {
  position: absolute;
  top: 5px;
  left: 7px;
  width: 22px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.25);
}

.flag-single { width: 22px; height: auto; border-radius: 2px; display: block; }

/* One layer of an overlapping flag stack (AppFlags.langFlags, any count). left/top/z-index are set
   inline per layer; the wrap (.flag-stack) is sized to the whole cascade so it centers as a unit. */
.flag-layer {
  position: absolute;
  height: 14px;              /* SAME height for every flag; width follows the flag's own aspect ratio */
  width: auto;               /* (no stretching — a square flag like Switzerland stays square) */
  border-radius: 2px;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* ---- Related Phrases (Grammar Workshop completion) ---- */
.related-phrases {
  margin-top: 20px;
  border-top: 1px solid var(--clr-border);
  padding-top: 16px;
  text-align: left;
  width: 100%;
}

.related-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.related-phrase-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.related-phrase-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clr-text);
  flex: 1;
  min-width: 0;
}

.related-practice-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: 'Raleway', sans-serif;
  color: var(--clr-primary);
  background: var(--clr-primary-light);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.related-practice-btn:hover {
  background: var(--clr-primary);
  color: #fff;
}

/* ---- Milestone Toast ---- */
.milestone-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  max-width: 340px;
  width: calc(100vw - 48px);
  background: #ffffff;
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
  pointer-events: none;
}

.milestone-toast--in {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.milestone-toast--out {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

.milestone-toast__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
}

.milestone-toast__emoji {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.milestone-toast__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.milestone-toast__body strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text);
}

.milestone-toast__body span {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
  line-height: 1.4;
}

.milestone-toast__share,
.milestone-toast__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.milestone-toast__share:hover,
.milestone-toast__close:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
}

/* ── CEFR phrase badge — used in all activities ── */
.cefr-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  user-select: none;
}
.cefr-badge--a1 { background: #dcfce7; color: #16a34a; }
.cefr-badge--a2 { background: #dbeafe; color: #2563eb; }
.cefr-badge--b1 { background: #fef3c7; color: #d97706; }
.cefr-badge--b2 { background: #ede9fe; color: #7c3aed; }
.cefr-badge--c1 { background: #cffafe; color: #0891b2; }
.cefr-badge--c2 { background: #ffe4e6; color: #be123c; }

/* Badge injected into exercise cards — floats top-right of card header */
.cefr-phrase-badge {
  position: absolute;
  top: 14px;
  right: 16px;
  pointer-events: none;
}

/* Gender-of-the-shown-variant badge (multi-gender targets) — floats
   top-left, mirroring the CEFR badge on the right */
/* Top-left flex wrap holding the adaptive variant pills (gender and/or region). */
.variant-badges {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 32px);
  pointer-events: none;
  user-select: none;
}

.gender-phrase-badge,
.region-phrase-badge,
.variant-phrase-badge {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-muted);
}

/* Variant tags carry a crisp inline-SVG icon (never an emoji) + the source-language label.
   The icon inherits the pill's muted color via currentColor and sits centered beside the text. */
.gender-phrase-badge,
.variant-phrase-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 6px;
}

.variant-ico {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  display: block;
}

/* Variant list as a BORDERED TABLE (a declension paradigm): each row is [FORM, prominent] on the left
   and [its label(s), muted + small icon] on the right, with dividers between rows. */
.variant-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--clr-surface);
  width: 100%;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}
.variant-table + .variant-table { margin-top: 12px; }
/* Connected header inside the box: POS (left) + group label (right) — belongs to the box, not floating. */
.variant-thead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
}
.variant-thead .variant-pos { color: var(--clr-text-muted); }
.variant-thead .variant-kind { margin-left: auto; }
.variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--clr-border);
}
.variant-row:last-child { border-bottom: none; }
/* Card BACK: compact reference of the forms — each form followed by the SAME icon+label tag used on
   the front, but sized to sit in the flow of the other back values (ENGLISH / EXAMPLE), so the line
   reads as part of the page, not as an oversized independent element. */
.variant-compact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.9rem; }
.variant-compact-item { display: inline-flex; align-items: center; gap: 6px; }
.variant-compact-form { font-weight: 600; color: var(--clr-text); }
.variant-compact-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}
.variant-compact-tag .variant-ico { width: 0.95em; height: 0.95em; }
.variant-compact-tag .flag-img,
.variant-compact-tag .region-globe { height: 10px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.variant-compact-sep { color: var(--clr-text-muted); opacity: 0.45; }
.variant-form {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--clr-text);
  text-align: left;
  white-space: nowrap;
  line-height: 1.1;
}
.variant-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: 0.02em;
}
.variant-meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.variant-meta-item + .variant-meta-item::before { content: "·"; margin-right: 12px; opacity: 0.5; }
.variant-meta-item .variant-ico { width: 1em; height: 1em; }
/* Region flag/globe/cluster inside a tag stays TINY (never the full-size globe map — no overflow). */
.variant-meta-item .flag-img,
.variant-meta-item .region-globe { height: 11px; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.variant-meta-item .flag-cluster { display: inline-flex; align-items: center; gap: 2px; }
.variant-meta-item .flag-cluster .flag-img { height: 10px; box-shadow: none; }

/* Region pill: SVG flag (never emoji) + region name. */
.region-phrase-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 6px;
}

/* Real national flag(s) inside the region pill — a single flag or a responsive cluster. */
.region-phrase-badge .flag-img {
  height: 11px;             /* same height for every region flag; width follows aspect (square stays square) */
  width: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.region-phrase-badge .flag-cluster {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.region-phrase-badge .flag-more {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--clr-text-muted);
}

/* Real orthographic-globe asset for contiguous macro-regions (e.g. Latinoamérica). */
.region-phrase-badge .region-globe {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
}

/* Tall cards: when a variant badge is present, reserve extra space ABOVE the phrase (so a
   long phrase never crowds the absolute badge) and a bit more BELOW the translation. Only
   applied on variant phrases, so non-variant phrases keep their normal padding. */
.phrase-card.has-variant-badge {
  padding-top: 3rem;
  padding-bottom: 3rem;   /* match the top space (above phrase == below translation) */
}

/* Compact flex cards (Scramble hint row, Dictation controls) have no room for an absolute
   top-left overlay — there the badges flow as a full-width top row instead, so they never
   cover the text and wrap responsively on narrow screens. Tall cards (Speaking/Cloze
   phrase-card) keep the absolute top-left placement, where there is space. */
.hint-card { flex-wrap: wrap; }

/* Dictation: the CEFR badge is absolute top-right on audio-controls. When there's NO variant
   row to create top space, reserve room so the CEFR badge doesn't overlap the Listen button. */
.audio-controls:not(.has-variant-badge) {
  padding-top: 2.25rem;
}

.hint-card .variant-badges,
.audio-controls .variant-badges {
  position: static;
  order: -1;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0.75rem;   /* Dictation: clear separation from the Listen button below */
}

/* Scramble's hint row is tighter — minimal gap between the tags and the hint text. */
.hint-card .variant-badges {
  margin-bottom: 0.2rem;
}