/**
 * css/components.css — Components & Phase 2 Review UI
 */
.top-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  margin: 0 auto;
  max-width: var(--app-max-width);
  height: var(--top-bar-height);
  padding-inline: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 40;
}

@media (min-width: 640px) { .top-header { max-width: 540px; } }

.brand-group { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text-primary); }
.brand-logo { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-primary), var(--accent-cyan)); color: #fff; box-shadow: var(--shadow-sm); }
.brand-title { font-size: var(--text-lg); font-weight: 800; }
.header-stats { display: flex; align-items: center; gap: var(--space-2); }

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}
.stat-pill svg { width: 18px; height: 18px; flex-shrink: 0; }
.stat-pill--streak svg { color: var(--color-warning); }
.stat-pill--xp svg { color: var(--accent-primary); }

.glass-card {
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}
.glass-card--interactive { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.glass-card--interactive:hover { box-shadow: var(--shadow-lg); }
.glass-card--interactive:active { transform: scale(0.98); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.96); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn--primary { background: var(--accent-primary); color: var(--text-on-accent); box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.45); }
.btn--primary:hover { background: var(--accent-primary-hover); }
.btn--secondary { background: var(--surface-muted); color: var(--text-primary); border-color: var(--border-subtle); }
.btn--danger { background: var(--color-danger-soft); color: var(--color-danger); border-color: rgba(220, 38, 38, 0.25); }
.btn--full { width: 100%; }

.icon-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.icon-btn:active { transform: scale(0.94); }

.bottom-nav {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  margin: 0 auto;
  max-width: var(--app-max-width);
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-inline: var(--space-2);
  background: var(--surface-card);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 40;
}
@media (min-width: 640px) { .bottom-nav { max-width: 540px; } }

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--touch-min);
  padding-block: var(--space-1);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-md);
  position: relative;
}
.nav-tab svg { width: 22px; height: 22px; transition: transform var(--dur-normal) var(--ease-spring); }
.nav-tab.is-active { color: var(--accent-primary); }
.nav-tab.is-active svg { transform: translateY(-2px) scale(1.08); }
.nav-tab.is-active::after { content: ''; width: 20px; height: 3px; border-radius: var(--radius-pill); background: var(--accent-primary); position: absolute; bottom: 4px; }

.stack-md { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; }
.badge--accent { background: var(--accent-primary-soft); color: var(--accent-primary); }
.badge--cyan { background: var(--accent-cyan-soft); color: var(--accent-cyan); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }

.setting-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.setting-item:last-child { border-bottom: none; }
.select-input { min-height: var(--touch-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--surface-elevated); color: var(--text-primary); font-family: inherit; font-size: var(--text-sm); font-weight: 600; }

.state-box { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.state-box__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--accent-primary-soft); color: var(--accent-primary); display: grid; place-items: center; }
.state-box__icon svg { width: 28px; height: 28px; }

.toast-container { position: fixed; bottom: calc(var(--bottom-nav-height) + var(--space-4)); inset-inline: var(--space-4); max-width: calc(var(--app-max-width) - var(--space-8)); margin: 0 auto; z-index: 60; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
.toast { pointer-events: auto; background: var(--surface-elevated); color: var(--text-primary); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); font-weight: 600; }

/* Phase 2 Flashcard & FSRS Review Stage */
.review-layout { display: flex; flex-direction: column; gap: var(--space-3); min-height: calc(100dvh - var(--top-bar-height) - var(--bottom-nav-height) - var(--space-8)); }
.review-header { display: flex; align-items: center; gap: var(--space-3); }
.review-progress-track { flex: 1; height: 10px; border-radius: var(--radius-pill); background: var(--surface-muted); overflow: hidden; border: 1px solid var(--border-subtle); }
.review-progress-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-cyan)); transform-origin: inline-start center; transition: transform var(--dur-normal) var(--ease-out); }

.flashcard-stage { perspective: 1200px; flex: 1; display: flex; flex-direction: column; }
.flashcard-3d { position: relative; width: 100%; flex: 1; min-height: 370px; transform-style: preserve-3d; transition: transform 380ms var(--ease-spring); cursor: grab; touch-action: pan-y; }
.flashcard-3d.is-flipped { transform: rotateY(180deg); }

.flashcard-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); overflow-y: auto; }
.flashcard-face--back { transform: rotateY(180deg); }

.flashcard-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; margin-block: auto; }
.flashcard-word { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }

.cloze-prompt-box { width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-muted); border: 1px dashed var(--border-subtle); font-size: var(--text-base); color: var(--text-secondary); }
.meaning-banner { padding: var(--space-3); border-radius: var(--radius-md); background: var(--accent-primary-soft); color: var(--text-primary); font-weight: 700; font-size: var(--text-base); }
.collocation-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.example-item { padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--accent-cyan); display: flex; flex-direction: column; gap: 2px; }
.mistake-tip { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--text-primary); font-size: var(--text-xs); }
.fsrs-meta-bar { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }

.swipe-badge { position: absolute; top: 16px; z-index: 20; padding: 6px 14px; border-radius: var(--radius-pill); font-family: var(--font-en); font-weight: 800; font-size: var(--text-xs); opacity: 0; pointer-events: none; transform: rotateY(180deg); }
.swipe-badge--good { inset-inline-start: 16px; background: var(--color-success); color: #fff; }
.swipe-badge--again { inset-inline-end: 16px; background: var(--color-danger); color: #fff; }

.fsrs-grade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.fsrs-grade-grid.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }

.grade-btn { min-height: 58px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--space-2) var(--space-1); cursor: pointer; font-family: inherit; }
.grade-btn:active { transform: scale(0.95); }
.grade-btn__label { font-size: var(--text-sm); font-weight: 800; }
.grade-btn__interval { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.grade-btn--again { border-color: rgba(220, 38, 38, 0.35); background: var(--color-danger-soft); }
.grade-btn--again .grade-btn__label { color: var(--color-danger); }
.grade-btn--hard { border-color: rgba(217, 119, 6, 0.35); background: var(--color-warning-soft); }
.grade-btn--hard .grade-btn__label { color: var(--color-warning); }
.grade-btn--good { border-color: rgba(5, 150, 105, 0.35); background: var(--color-success-soft); }
.grade-btn--good .grade-btn__label { color: var(--color-success); }
.grade-btn--easy { border-color: rgba(8, 145, 178, 0.35); background: var(--accent-cyan-soft); }
.grade-btn--easy .grade-btn__label { color: var(--accent-cyan); }

/* --- layout fixes: no wrapping in header pills / badges / nav labels --- */
.stat-pill, .badge { white-space: nowrap; }
.stat-pill { padding-inline: 10px; }
.header-stats { gap: 6px; }
.nav-tab__label { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Phase 3B (as supplied by the agent) */
.drill-options-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.drill-opt-btn { justify-content: center; text-align: center; font-weight: 700; }
.drill-opt-btn.is-correct { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.drill-opt-btn.is-wrong { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }
.reorder-dropzone { min-height: 64px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-muted); border: 2px dashed var(--border-subtle); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.reorder-pool { display: flex; flex-wrap: wrap; gap: 8px; padding-block: var(--space-2); }
.word-chip { min-height: 40px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--surface-elevated); color: var(--text-primary); font-family: var(--font-en); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.word-chip:active { transform: scale(0.94); }
.word-chip--selected { background: var(--accent-primary-soft); border-color: var(--accent-primary); color: var(--accent-primary); }
.drill-feedback { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.drill-feedback.is-hidden { display: none; }
.drill-feedback--correct { background: var(--color-success-soft); border-color: var(--color-success); }
.drill-feedback--wrong { background: var(--color-danger-soft); border-color: var(--color-danger); }
.dict-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.is-fav-active { color: var(--color-warning) !important; border-color: var(--color-warning) !important; }

/* Phase 3B layout/RTL fixes */
.select-input { min-width: 0; max-width: 100%; }
.grid-2 > *, .row-between > * { min-width: 0; }
.icon-btn { flex-shrink: 0; }
.dict-tabs .btn { white-space: nowrap; padding-inline: var(--space-2); font-size: var(--text-sm); }
/* transform-origin does not accept logical keywords (inline-start): use physical edges per direction */
[dir="rtl"] .review-progress-fill { transform-origin: right center; }
[dir="ltr"] .review-progress-fill { transform-origin: left center; }