/* EngPath custom styles — study interactions + legacy polish.
   Design tokens / primitives: tailwind.config.js + public/css/input.css
   Phase 1: Calm Guided Learning foundation (do not remove flip/SRS rules). */

/* === Calm CSS variables (aligned with Phase 1 tokens) === */
:root {
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  --font-display: "Be Vietnam Pro", system-ui, sans-serif;
  --brand: #0d9488;
  --brand-strong: #0f766e;
  --surface: #f7f8f8;
  --surface-raised: #ffffff;
  --surface-muted: #eef2f2;
  --ink: #0f1a1a;
  --ink-soft: #3a4a4a;
  --ink-mute: #5c6b6b;
  --border-calm: rgba(15, 26, 26, 0.10);
  --shadow-soft: 0 1px 2px rgba(15, 26, 26, 0.04), 0 4px 12px rgba(15, 26, 26, 0.04);
  --shadow-card: 0 1px 3px rgba(15, 26, 26, 0.06), 0 8px 24px rgba(13, 148, 136, 0.07);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --nav-height: 4.5rem; /* 72px — matches h-nav */
  --shell-max: 77.5rem; /* 1240px */
  --prose-max: 50rem;   /* 800px theory */
}

.dark {
  --surface: #0c1212;
  --surface-raised: #141a1a;
  --surface-muted: #1a2222;
  --ink: #e8f0f0;
  --ink-soft: #b8c6c6;
  --ink-mute: #8a9a9a;
  --border-calm: rgba(232, 240, 240, 0.10);
}

/* Soften vocab deck chrome (class name required by vocab-core.js) */
.vocab-deck {
  border: 1px solid var(--border-calm);
  border-radius: var(--radius-md);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease;
  box-shadow: var(--shadow-soft);
}

.vocab-deck:hover {
  border-color: rgba(13, 148, 136, 0.35);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* Legacy utility class names retained for existing EJS markup */
.nav-glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-calm);
}

.brutal-border {
  border: 1px solid var(--border-calm);
}

.nav-active {
  background: rgba(13, 148, 136, 0.12);
  color: var(--brand-strong);
  border-radius: var(--radius-sm);
}

.learning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.learning-grid > * {
  background: var(--surface-raised);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-calm);
}

.grammar-card {
  border: 1px solid var(--border-calm);
  border-radius: var(--radius-md);
  position: relative;
  box-shadow: var(--shadow-soft);
}

.grammar-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--brand);
}

.study-card {
  border: 1px solid var(--border-calm);
  font-family: var(--font-mono);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.level-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  border: 1px solid currentColor;
  padding: 2px 8px;
  border-radius: 8px;
}

/* Mobile bottom nav safe area */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* === 3D Flashcard flip (study modes: flip / srs / voiceFlip) ===
   BUGFIX: never apply rotateY on the outer .flipped alone — that mirrors
   the back face when it is simply display:block'd. Proper pattern:
   outer = perspective; inner = preserve-3d + rotate on flip;
   both faces = backface-visibility:hidden; back face pre-rotated 180°.
*/
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }
.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rotate-y-180 { transform: rotateY(180deg); }

/* DO NOT use a bare `.flipped { transform: rotateY(180deg) }` —
   it mirrors text on show/hide flip cards. Scoped rules only: */

.flip-card {
  perspective: 1000px;
  position: relative;
  /* outer card must NOT rotate — only .flip-card-inner does */
  transform: none !important;
}

.flip-card-inner {
  position: relative;
  display: grid;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
  /* Emphasis motion 360ms — flip is a primary interaction */
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

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

.flip-card .front,
.flip-card .back {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow-wrap: anywhere;
}

.flip-card .front {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Back is pre-rotated so after parent rotateY(180) it reads upright */
.flip-card .back {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
}

.flip-card.flipped .front {
  pointer-events: none;
}

.flip-card.flipped .back {
  pointer-events: auto;
}

/* Fallback when markup has no .flip-card-inner (legacy): show/hide only, no 3D rotate */
.flip-card:not(:has(.flip-card-inner)) .back {
  display: none;
  position: static;
  transform: none;
  -webkit-transform: none;
}
.flip-card:not(:has(.flip-card-inner)).flipped .front {
  display: none;
}
.flip-card:not(:has(.flip-card-inner)).flipped .back {
  display: flex;
}

/* === Study Modal micro-interactions (commercial juice) === */
@keyframes vocab-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
}

@keyframes vocab-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes vocab-combo-bounce {
  0% { transform: scale(0.6) translateY(6px); opacity: 0; }
  50% { transform: scale(1.15) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.animate-shake {
  animation: vocab-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.animate-pop {
  animation: vocab-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-combo-bounce {
  animation: vocab-combo-bounce 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.study-feedback-correct {
  box-shadow: 0 0 0 2px rgb(16 185 129);
}

.study-feedback-wrong {
  box-shadow: 0 0 0 2px rgb(239 68 68);
}

/* Zero-latency card stage transitions (0.2s) */
.study-area-stage {
  will-change: transform, opacity;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.study-area-stage.study-slide-out {
  transform: translateX(-28px);
  opacity: 0;
  pointer-events: none;
}

.study-area-stage.study-slide-in {
  animation: study-slide-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes study-slide-in {
  from {
    transform: translateX(28px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* HP hearts */
.study-hp-heart.is-lost {
  color: #d1d5db !important; /* gray-300 */
  transform: scale(0.9);
}

.study-hp-heart.is-cracked {
  color: #9ca3af !important;
}

/* Voice mic listening ring */
#voice-mic-icon.animate-pulse {
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
}

/* Rapid-fire timeout flash */
#study-area.study-flash-red {
  animation: study-flash-red 0.28s ease both;
  box-shadow: inset 0 0 0 3px rgba(239, 68, 68, 0.85);
}

@keyframes study-flash-red {
  0% { background-color: rgba(239, 68, 68, 0.25); }
  100% { background-color: transparent; }
}

#rapid-time-bar {
  transition: none;
  transform-origin: left center;
}

/* SRS due badge blink */
@keyframes due-badge-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.due-badge-pulse {
  animation: due-badge-blink 1.1s ease-in-out infinite;
}

.session-summary-pop {
  animation: vocab-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Additional modern polish for GeminiCard dashboard */

/* Deck cards - premium elevated feel with smooth motion */
.deck-card {
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), 
              box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.2s ease;
  will-change: transform;
}

.deck-card:hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
  border-color: rgb(199 210 254 / 0.6); /* indigo tint on hover */
}

.deck-card .action-btn {
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.deck-card .action-btn:hover {
  transform: translateY(-1px) scale(1.02);
}

.deck-card .action-btn:active {
  transform: scale(0.985);
}

/* Button motion polish (base look in input.css @layer components) */
.btn-primary {
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgb(13 148 136 / 0.25), 0 4px 6px -4px rgb(13 148 136 / 0.2);
}

.btn-primary:active {
  transform: translateY(0) scale(0.985);
}

.btn-secondary {
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-secondary:hover {
  background-color: #f0fdfa;
  transform: translateY(-1px);
}

.dark .btn-secondary:hover {
  background-color: #134e4a;
}

/* Smooth entrance animation for cards */
.deck-card {
  opacity: 0;
  transform: translateY(12px);
}

.deck-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.23, 1.0, 0.32, 1), 
              transform 0.5s cubic-bezier(0.23, 1.0, 0.32, 1);
}

/* Modern empty state */
.empty-state {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.empty-state:hover {
  border-color: #a5b4fc;
}

/* Refined form input for create deck */
.create-input {
  transition: all 0.2s ease;
}

.create-input:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

/* Feature action pills - modern and prominent */
.feature-pill {
  transition: all 0.25s cubic-bezier(0.23, 1.0, 0.32, 1);
  position: relative;
  overflow: hidden;
}

.feature-pill:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.feature-pill:active {
  transform: scale(0.985);
}

/* Loading states */
.spinner {
  border: 2px solid #e5e7eb;
  border-top-color: #0d9488;
  animation: spin 0.8s linear infinite;
  border-radius: 9999px;
}

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

/* === HIGH-END VISUAL DESIGN (redesign-existing-projects + high-end-visual-design) === */

/* Double-Bezel containers */
.double-bezel {
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(145deg, rgba(99,102,241,.15), rgba(255,255,255,.04));
}
.dark .double-bezel {
  background: linear-gradient(145deg, rgba(99,102,241,.28), rgba(255,255,255,.03));
}
.double-bezel > .inner {
  border-radius: 21px;
}

/* Premium elevation */
.premium-card {
  transition: transform .28s cubic-bezier(.23,1,.32,1), box-shadow .28s cubic-bezier(.23,1,.32,1);
  box-shadow: 0 1px 2px rgb(0 0 0 / .03), 0 10px 15px -3px rgb(0 0 0 / .05);
}
.premium-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .06), 0 8px 10px -6px rgb(0 0 0 / .05);
}

/* High-end buttons */
.btn-premium {
  transition: all .2s cubic-bezier(.23,1,.32,1);
}
.btn-premium:hover { transform: translateY(-1px); }
.btn-premium:active { transform: scale(.985); }

/* === EXTENDED HIGH-END SYSTEM (gpt-taste + redesign) === */

/* Double-Bezel containers */
.double-bezel {
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(145deg, rgba(99,102,241,.15), rgba(255,255,255,.04));
}
.dark .double-bezel {
  background: linear-gradient(145deg, rgba(99,102,241,.28), rgba(255,255,255,.03));
}
.double-bezel > .inner {
  border-radius: 21px;
}

/* Premium elevation with better shadows */
.premium-card {
  transition: transform .28s cubic-bezier(.23,1,.32,1), 
              box-shadow .28s cubic-bezier(.23,1,.32,1);
  box-shadow: 0 1px 2px rgb(0 0 0 / .03), 
              0 10px 15px -3px rgb(0 0 0 / .05);
}
.premium-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .06), 
              0 8px 10px -6px rgb(0 0 0 / .05);
}

/* Generous spacing */
.section { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 768px) { .section { padding-top: 4.5rem; padding-bottom: 4.5rem; } }

/* Refined focus — Deep Teal */
:focus-visible { outline: 2px solid #0d9488; outline-offset: 3px; }

/* Premium grain texture */
.grain::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27100%27 height=%27100%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27/%3E%3C/filter%3E%3Crect width=%27100%27 height=%27100%27 filter=%27url(%23n)%27 opacity=%270.03%27/%3E%3C/svg%27');
  mix-blend-mode: multiply; border-radius: inherit;
}

/* Subtle section header polish */
.section-title {
  letter-spacing: -0.025em;
}

/* === Grammar learning workspace (Phase 4 + 4B foundation alignment) === */
.grammar-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .grammar-workspace {
    /* Sidebar 280px · theory prose measure · shell = 1240 */
    grid-template-columns: 280px minmax(0, var(--prose-max, 50rem));
    gap: 2rem 2.5rem;
    justify-content: start;
  }
}

.grammar-sidebar {
  min-width: 0;
}

@media (min-width: 1024px) {
  .grammar-sidebar {
    position: sticky;
    top: calc(var(--nav-height, 4.5rem) + 0.75rem);
    align-self: start;
    max-height: calc(100vh - var(--nav-height, 4.5rem) - 1.5rem);
    overflow: visible;
  }
}

/* Surface from .card primitive — no duplicate chrome */
.grammar-sidebar-inner.card {
  padding: 1.25rem;
}

/* Unit rows — one interactive control per unit */
.grammar-unit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

.grammar-unit-item:hover {
  background: rgba(13, 148, 136, 0.06);
  border-color: rgba(13, 148, 136, 0.2);
}

.grammar-unit-item:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

.grammar-unit-item.is-active {
  border-color: rgba(13, 148, 136, 0.45);
  background: rgba(13, 148, 136, 0.1);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.12);
}

.dark .grammar-unit-item.is-active {
  background: rgba(13, 148, 136, 0.16);
}

.grammar-unit-index {
  flex-shrink: 0;
  font-size: 0.75rem; /* 12px min label */
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft, #3a4a4a);
  width: 1.5rem;
}

.dark .grammar-unit-index {
  color: var(--ink-soft, #b8c6c6);
}

.grammar-unit-item.is-active .grammar-unit-index {
  color: var(--brand-strong, #0f766e);
}

.dark .grammar-unit-item.is-active .grammar-unit-index {
  color: #5eead4;
}

.grammar-unit-body {
  flex: 1;
  min-width: 0;
}

.grammar-unit-title {
  display: block;
  font-size: 0.875rem; /* 14px min secondary */
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink, #0f1a1a);
}

.dark .grammar-unit-title {
  color: var(--ink, #e8f0f0);
}

.grammar-unit-item.is-active .grammar-unit-title {
  color: var(--brand-strong, #0f766e);
}

.dark .grammar-unit-item.is-active .grammar-unit-title {
  color: #5eead4;
}

.grammar-unit-chevron {
  flex-shrink: 0;
  opacity: 0.4;
  color: var(--ink-soft, #3a4a4a);
}

.grammar-unit-item.is-active .grammar-unit-chevron {
  opacity: 0.85;
  color: var(--brand, #0d9488);
}

/* Theory main — prose measure (~800px); shell is 1240px */
.grammar-main {
  max-width: var(--prose-max, 50rem);
}

.grammar-theory-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.grammar-theory-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-calm, rgba(15, 26, 26, 0.1));
}

@media (min-width: 640px) {
  .grammar-theory-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
  }
}

.dark .grammar-theory-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Theory body — body 16px, soft ink tokens */
.theory-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft, #3a4a4a);
}

.dark .theory-content {
  color: rgba(232, 240, 240, 0.88);
}

/* Nested wrapper from showTheory — collapse double padding */
.theory-content .theory-content {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.theory-content h4 {
  font-size: 1.125rem; /* ~H3 step for in-article sections */
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-calm, rgba(15, 26, 26, 0.08));
  color: var(--ink, #0f1a1a);
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.theory-content h4:first-child {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: none;
}

.dark .theory-content h4 {
  color: #e8f0f0;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.theory-content p {
  margin-bottom: 0.9rem;
}

/* Recognition signals / overview paragraphs */
.theory-content p strong:first-child {
  color: var(--ink, #0f1a1a);
}

.dark .theory-content p strong:first-child {
  color: #e8f0f0;
}

.theory-content ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.theory-content li {
  margin-bottom: 0;
  padding: 0.85rem 1rem;
  background: var(--surface-muted, #eef2f2);
  border-radius: 12px;
  border: 1px solid transparent;
  line-height: 1.55;
}

.dark .theory-content li {
  background: rgba(255, 255, 255, 0.04);
}

/* Formula tables */
.theory-content table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.75rem 0 1.25rem;
  border: 1px solid var(--border-calm, rgba(15, 26, 26, 0.12));
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-raised, #fff);
  box-shadow: var(--shadow-soft);
}

.dark .theory-content table {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

.theory-content th,
.theory-content td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-calm, rgba(15, 26, 26, 0.08));
  text-align: left;
  vertical-align: top;
}

.theory-content tr:last-child td {
  border-bottom: none;
}

.theory-content thead tr,
.theory-content th {
  background: rgba(13, 148, 136, 0.08);
  font-weight: 600;
  color: var(--ink, #0f1a1a);
  font-size: 0.8125rem;
}

.dark .theory-content thead tr,
.dark .theory-content th {
  background: rgba(13, 148, 136, 0.15);
  color: #e8f0f0;
}

/* Examples (italic in data) */
.theory-content i {
  display: inline;
  color: var(--brand-strong, #0f766e);
  font-style: italic;
  font-weight: 500;
}

.dark .theory-content i {
  color: #5eead4;
}

.theory-content strong,
.theory-content b {
  font-weight: 600;
  color: var(--ink, #0f1a1a);
}

.dark .theory-content strong,
.dark .theory-content b {
  color: #e8f0f0;
}

/* Callout boxes already in theory HTML (amber note blocks = common pitfalls) */
.theory-content .rounded-xl,
.theory-content [class*="bg-amber"] {
  border-radius: 14px !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.5rem !important;
  padding: 1rem 1.15rem !important;
  border: 1px solid rgba(217, 119, 6, 0.25);
  background: #fffbeb !important;
  box-shadow: none;
}

.dark .theory-content .rounded-xl,
.dark .theory-content [class*="bg-amber"] {
  background: rgba(120, 53, 15, 0.25) !important;
  border-color: rgba(251, 191, 36, 0.25);
}

/* Practice bar — uses .card-quiet; layout only */
.grammar-practice-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  margin-top: 1.75rem;
  border-color: rgba(13, 148, 136, 0.18);
  background: rgba(13, 148, 136, 0.06);
}

@media (min-width: 640px) {
  .grammar-practice-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.dark .grammar-practice-bar {
  background: rgba(13, 148, 136, 0.12);
  border-color: rgba(45, 212, 191, 0.18);
}

/* Builder surface from .card — no second chrome layer */
.grammar-builder.card {
  margin-top: 2rem;
}

.grammar-chip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 480px) {
  .grammar-chip-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* No max-height / overflow — 6 chips fit without nested scroll */
.grammar-chip {
  display: block;
  cursor: pointer;
  margin: 0;
}

.grammar-chip-face {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  line-height: 1.35;
  border-radius: 12px;
  border: 1px solid var(--border-calm, rgba(15, 26, 26, 0.12));
  background: var(--surface-muted, #eef2f2);
  color: var(--ink-soft, #3a4a4a);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dark .grammar-chip-face {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(232, 240, 240, 0.88);
}

.grammar-chip:hover .grammar-chip-face {
  border-color: rgba(13, 148, 136, 0.4);
}

.grammar-chip:has(input:checked) .grammar-chip-face,
.grammar-chip input:checked + .grammar-chip-face {
  border-color: rgba(13, 148, 136, 0.55);
  background: rgba(13, 148, 136, 0.12);
  color: var(--brand-strong, #0f766e);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.12);
}

.dark .grammar-chip:has(input:checked) .grammar-chip-face,
.dark .grammar-chip input:checked + .grammar-chip-face {
  color: #99f6e4;
  background: rgba(13, 148, 136, 0.2);
}

.grammar-chip input:focus-visible + .grammar-chip-face {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

/* Quiz question cards — surface from .card when present */
.grammar-q-card.card {
  box-shadow: var(--shadow-soft);
}

.grammar-q-card.is-correct {
  border-color: rgba(13, 148, 136, 0.5) !important;
}

.grammar-q-card.is-wrong {
  border-color: rgba(220, 38, 38, 0.4) !important;
}

.grammar-answer-btn {
  width: 100%;
  text-align: left;
  min-height: 2.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border-calm, rgba(15, 26, 26, 0.14));
  background: var(--surface-raised, #fff);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink, #0f1a1a);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.dark .grammar-answer-btn {
  background: var(--surface-raised, #141a1a);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink, #e8f0f0);
}

.grammar-answer-btn:hover:not(:disabled) {
  border-color: rgba(13, 148, 136, 0.45);
  background: rgba(13, 148, 136, 0.06);
}

.grammar-answer-btn.is-selected {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.12);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
  font-weight: 600;
}

.grammar-answer-btn:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
}

.grammar-answer-btn:disabled {
  opacity: 0.9;
  cursor: default;
  pointer-events: none;
}

.grammar-result-hero {
  padding: 1.5rem 1.25rem;
  border-radius: 16px;
  border: 1px solid rgba(13, 148, 136, 0.25);
  background: rgba(13, 148, 136, 0.08);
}

.dark .grammar-result-hero {
  background: rgba(13, 148, 136, 0.14);
  border-color: rgba(45, 212, 191, 0.22);
}

/* Quiz modal overlay — mobile full-screen, desktop centered (modal tokens) */
.grammar-quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  background: rgba(15, 26, 26, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.grammar-quiz-overlay.hidden {
  display: none;
}

.dark .grammar-quiz-overlay {
  background: rgba(0, 0, 0, 0.7);
}

@media (min-width: 640px) {
  .grammar-quiz-overlay {
    align-items: center;
    padding: 1rem;
  }
}

/* Compact footer CTAs inside quiz (still use btn primitives) */
.grammar-quiz-footer .btn-primary,
.grammar-quiz-footer .btn-secondary,
.grammar-quiz-dialog .btn-primary,
.grammar-quiz-dialog .btn-secondary {
  min-height: 2.5rem;
  height: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
}

/* === Phase 5: A11y + states === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  padding: 0.5rem 1rem;
  background: #0d9488;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

body.modal-open {
  overflow: hidden;
}

.offline-banner {
  position: sticky;
  bottom: 4.5rem; /* above mobile bottom nav */
  z-index: 45;
  background: #134e4a;
  color: #ecfdf5;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}
@media (min-width: 768px) {
  .offline-banner {
    bottom: 0;
  }
}
.offline-banner.hidden,
.offline-banner[hidden] {
  display: none !important;
}

/* Skeleton loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(15, 26, 26, 0.06);
  border-radius: 8px;
}
.dark .skeleton {
  background: rgba(232, 240, 240, 0.08);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.dark .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}

.skeleton-card {
  border: 1px solid var(--border-calm, rgba(15, 26, 26, 0.1));
  border-radius: 16px;
  padding: 1.25rem;
  background: var(--surface-raised, #fff);
}
.dark .skeleton-card {
  background: var(--surface-raised, #141a1a);
}

.state-message {
  border: 1px solid var(--border-calm, rgba(15, 26, 26, 0.1));
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  background: var(--surface-raised, #fff);
}
.dark .state-message {
  background: var(--surface-raised, #141a1a);
}
.state-message--error {
  border-color: rgba(220, 38, 38, 0.35);
}
.state-message--empty {
  border-style: dashed;
}
.state-message--success {
  border-color: rgba(13, 148, 136, 0.35);
  background: rgba(13, 148, 136, 0.06);
}
.dark .state-message--success {
  background: rgba(13, 148, 136, 0.12);
}
.state-message--loading {
  border-style: solid;
  border-color: rgba(13, 148, 136, 0.2);
}
.state-message--offline {
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.08);
}

/* Disabled surface for forms / actions */
.is-disabled,
[data-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

/* Modal enter (fast overlay · normal panel) — no continuous loops */
#study-modal:not(.hidden),
#quiz-modal:not(.hidden),
#add-card-modal:not(.hidden),
#ai-modal:not(.hidden),
.modal-overlay {
  animation: ep-overlay-in 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
#study-modal:not(.hidden) > div,
#quiz-modal:not(.hidden) > div,
#add-card-modal:not(.hidden) > div,
#ai-modal:not(.hidden) > div,
.modal-overlay > .modal-panel,
.grammar-quiz-dialog {
  animation: ep-panel-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ep-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ep-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Active lesson / completion micro-motion */
.level-lesson-item.is-next {
  transition: border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
              background 240ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lesson-check-pop,
.session-summary-pop {
  animation-duration: 360ms;
}

/* Correct / incorrect — not color-only (paired with icons/text in JS) */
.study-feedback-correct {
  transition: box-shadow 160ms ease, background-color 160ms ease;
}
.study-feedback-wrong {
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

/* Progress width fills use emphasis duration */
.progress-fill,
#overall-bar,
#level-progress-bar,
#study-progress-bar,
#quiz-progress-fill,
#lesson-complete-bar,
[data-level-bar] {
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Card hover motion — normal */
.card-interactive,
.vocab-deck.card,
.roadmap-card {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 240ms ease;
}

/* Bottom nav: 44px+ touch targets */
.bottom-nav a {
  min-height: 3rem;
  min-width: 3rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* Theme toggle / icon buttons */
#theme-toggle,
.deck-menu-btn,
.lesson-check,
.level-lesson-check {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* Speaker stays compact but still tappable via padding hit area */
.speaker-btn {
  min-width: 2.75rem !important;
  min-height: 2.75rem !important;
}

/* Stop continuous decorative pulse under reduced motion (due badge) */
@media (prefers-reduced-motion: reduce) {
  .due-badge-pulse,
  .animate-pulse,
  .animate-shake,
  .animate-pop,
  .animate-combo-bounce,
  .lesson-check-pop,
  .session-summary-pop,
  .study-flash-red {
    animation: none !important;
  }
  .skeleton::after {
    animation: none !important;
  }
  #study-modal:not(.hidden),
  #quiz-modal:not(.hidden),
  #add-card-modal:not(.hidden),
  #ai-modal:not(.hidden),
  .modal-overlay,
  #study-modal:not(.hidden) > div,
  #quiz-modal:not(.hidden) > div,
  #add-card-modal:not(.hidden) > div,
  #ai-modal:not(.hidden) > div,
  .modal-overlay > .modal-panel,
  .grammar-quiz-dialog {
    animation: none !important;
  }
  .flip-card-inner {
    transition-duration: 0.01ms !important;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* === Roadmap timeline (Phase 3 + Phase 8 node alignment) === */
.roadmap-timeline-wrap {
  --roadmap-rail-col: 3.25rem; /* node column width */
  --roadmap-node-size: 2.25rem;
  --roadmap-gap: 0.875rem;
  position: relative;
  padding-left: 0;
}

@media (min-width: 640px) {
  .roadmap-timeline-wrap {
    --roadmap-rail-col: 4rem;
    --roadmap-gap: 1.125rem;
  }
}

.roadmap-rail {
  position: absolute;
  /* Center of node column */
  left: calc(var(--roadmap-rail-col) / 2 - 1.5px);
  top: 1.35rem; /* align with first node center-ish */
  bottom: 1.25rem;
  width: 3px;
  z-index: 0;
  pointer-events: none;
}

.roadmap-rail-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--border-calm, rgba(15, 26, 26, 0.12));
}

.dark .roadmap-rail-track {
  background: rgba(255, 255, 255, 0.12);
}

.roadmap-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #0d9488 0%, #14b8a6 100%);
  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px rgba(13, 148, 136, 0.25);
}

.roadmap-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .roadmap-timeline {
    gap: 1.35rem;
  }
}

.roadmap-level {
  display: grid;
  grid-template-columns: var(--roadmap-rail-col) minmax(0, 1fr);
  column-gap: var(--roadmap-gap);
  align-items: start;
}

/* Node anchors to card title zone (card padding + chip row ≈ title baseline) */
.roadmap-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  /* Match .roadmap-card vertical padding so node sits by title/header */
  padding-top: 1.35rem;
  width: 100%;
}

.roadmap-node {
  position: relative;
  z-index: 1;
  width: var(--roadmap-node-size);
  height: var(--roadmap-node-size);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(13, 148, 136, 0.4);
  background: var(--surface-raised, #fff);
  color: var(--brand-strong, #0f766e);
  font-weight: 700;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-soft);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dark .roadmap-node {
  background: var(--surface-raised, #141a1a);
  color: #5eead4;
  border-color: rgba(45, 212, 191, 0.4);
}

.roadmap-node.is-done {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}

.roadmap-node.is-current {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.22), var(--shadow-card);
  transform: scale(1.06);
}

.roadmap-node.is-next {
  border-color: #0d9488;
  background: rgba(13, 148, 136, 0.12);
  color: var(--brand-strong, #0f766e);
}

.dark .roadmap-node.is-next {
  background: rgba(13, 148, 136, 0.22);
  color: #99f6e4;
}

.roadmap-node.is-upcoming {
  opacity: 0.9;
  border-color: rgba(15, 26, 26, 0.16);
  color: var(--ink-soft, #3a4a4a);
}

.dark .roadmap-node.is-upcoming {
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--ink-soft, #b8c6c6);
}

/* Status label sits under node but tight to card header — same visual group */
.roadmap-node-label {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-soft, #3a4a4a);
  text-align: center;
  max-width: var(--roadmap-rail-col);
  line-height: 1.15;
  /* Pull slightly toward card for optical grouping */
  margin-top: 0.05rem;
}

.dark .roadmap-node-label {
  color: var(--ink-soft, #b8c6c6);
}

.roadmap-level.is-current .roadmap-node-label {
  color: var(--brand-strong, #0f766e);
}

.roadmap-level.is-done .roadmap-node-label {
  color: #0d9488;
}

.dark .roadmap-level.is-done .roadmap-node-label {
  color: #5eead4;
}

.roadmap-level.is-next .roadmap-node-label {
  color: var(--brand-strong, #0f766e);
}

/* Cards — compact density; current = featured weight */
.roadmap-card {
  padding: 1.15rem 1.25rem;
  /* Align first content line with node center */
  margin: 0;
}

@media (min-width: 640px) {
  .roadmap-card {
    padding: 1.25rem 1.5rem;
  }
}

.roadmap-level.is-current .roadmap-card {
  border-color: rgba(13, 148, 136, 0.4);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.1), var(--shadow-card);
}

.roadmap-level.is-done .roadmap-card {
  opacity: 0.96;
}

.roadmap-level.is-upcoming .roadmap-card {
  background: var(--surface-muted, #eef2f2);
  border-color: transparent;
  box-shadow: none;
}

.dark .roadmap-level.is-upcoming .roadmap-card {
  background: rgba(255, 255, 255, 0.03);
}

.roadmap-level-num {
  font-size: 0.75rem;
}

/* Lesson preview rows — full width, 2-line titles */
.roadmap-lesson.is-done {
  opacity: 0.85;
}

.roadmap-lesson.is-done .line-clamp-2 {
  text-decoration: none;
}

/* === Level page ordered list (Phase 5) === */
.level-lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.level-lesson-item {
  border-radius: 16px;
  border: 1px solid var(--border-calm, rgba(15, 26, 26, 0.1));
  background: var(--surface-raised, #fff);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.dark .level-lesson-item {
  background: var(--surface-raised, #141a1a);
  border-color: rgba(255, 255, 255, 0.1);
}

.level-lesson-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.95rem 1rem;
}

@media (min-width: 640px) {
  .level-lesson-row {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
  }
}

.level-lesson-order {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft, #3a4a4a);
  min-width: 2rem;
}

.dark .level-lesson-order {
  color: var(--ink-soft, #b8c6c6);
}

.level-lesson-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  border: 1px solid var(--border-calm, rgba(15, 26, 26, 0.14));
  color: var(--ink-soft, #3a4a4a);
  background: transparent;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.level-lesson-check:hover {
  border-color: rgba(13, 148, 136, 0.45);
  color: #0f766e;
}

.level-lesson-check.is-checked {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}

.level-lesson-cta {
  min-height: 2.5rem;
  height: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Next lesson — brand soft highlight */
.level-lesson-item.is-next {
  background: rgba(13, 148, 136, 0.07);
  border-color: rgba(13, 148, 136, 0.4);
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.08), var(--shadow-soft);
}

.dark .level-lesson-item.is-next {
  background: rgba(13, 148, 136, 0.14);
  border-color: rgba(45, 212, 191, 0.35);
}

.level-lesson-item.is-next .level-lesson-order {
  color: var(--brand-strong, #0f766e);
}

.dark .level-lesson-item.is-next .level-lesson-order {
  color: #5eead4;
}

/* Completed — reduced priority */
.level-lesson-item.is-completed {
  opacity: 0.72;
  background: var(--surface-muted, #eef2f2);
  border-color: transparent;
  box-shadow: none;
}

.dark .level-lesson-item.is-completed {
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.65;
}

.level-lesson-item.is-completed .level-lesson-title {
  font-weight: 500;
  color: var(--ink-soft, #3a4a4a);
}

/* === Lesson page (Phase 5) === */
.lesson-sidebar-panel {
  padding: 1.25rem 1.35rem;
}

.lesson-check-pop {
  animation: lesson-check-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes lesson-check-pop {
  0% { transform: scale(0.85); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Sticky mobile CTA above bottom nav (h-16 = 4rem) + safe area */
.lesson-mobile-cta {
  bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .lesson-mobile-cta {
    display: none !important;
  }
}

/* Extra page padding so sticky bar never covers content */
.lesson-page {
  /* pb-24 set in markup for mobile */
}

/* === Vocabulary calm shell (Phase 6 + 8 modal surface) === */
.vocab-deck.card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.vocab-deck.card:hover {
  border-color: rgba(13, 148, 136, 0.35);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

/* Soften legacy .vocab-deck border rules when combined with .card */
.vocab-deck {
  border-radius: var(--radius-md, 16px);
}

/* Study modal: seamless chrome — one continuous surface, no ring/hairline. */
.study-modal-chrome {
  box-shadow: none;
  border: 0;
  overflow: hidden;
}

#study-area .flip-card {
  box-shadow: var(--shadow-soft);
}

#study-area .answer-btn.is-selected,
#study-area .answer-btn.study-feedback-correct {
  border-color: #0d9488 !important;
}

/* Study feedback accents → brand teal (keep class hooks) */
.study-feedback-correct {
  box-shadow: 0 0 0 2px rgb(13 148 136);
}

/* === Final direct-audit fixes: Vocabulary sheet, seamless study modal, roadmap anchors === */
.deck-panel-sheet {
  animation: ep-deck-sheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
  overscroll-behavior: contain;
}

@keyframes ep-deck-sheet-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 639px) {
  .deck-panel-sheet {
    border-left: 0;
  }
}

.vocab-deck.card {
  display: flex;
  min-height: 13.5rem;
  padding: 1.25rem;
}

.vocab-deck .deck-view-mode {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

.vocab-deck .deck-view-mode > .mt-5 {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Tailwind ring uses box-shadow, so border:0 alone cannot remove the hairline. */
.study-modal-panel {
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 28px 80px rgba(8, 18, 17, 0.28) !important;
  background-clip: border-box;
}

.dark .study-modal-panel {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55) !important;
}

/* Never leave the answer outline on the whole study canvas. */
#study-area {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none;
}

#study-area.study-feedback-correct,
#study-area.study-feedback-wrong {
  box-shadow: none !important;
}

/* Roadmap node center aligns with the level title, with a visible connector to the card. */
.roadmap-node-wrap {
  position: relative;
  padding-top: 2.1rem;
}

.roadmap-node-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(2.1rem + var(--roadmap-node-size) / 2);
  left: calc(50% + var(--roadmap-node-size) / 2);
  width: calc(var(--roadmap-gap) + (var(--roadmap-rail-col) - var(--roadmap-node-size)) / 2);
  height: 1px;
  background: rgba(13, 148, 136, 0.28);
}

.dark .roadmap-node-wrap::after {
  background: rgba(45, 212, 191, 0.25);
}

.roadmap-rail {
  top: calc(2.1rem + var(--roadmap-node-size) / 2);
}

@media (prefers-reduced-motion: reduce) {
  .deck-panel-sheet { animation: none !important; }
}

/* Mobile navigation shell v13 */
.bottom-nav {
  width: 100%;
  max-width: 100vw;
  height: calc(4rem + env(safe-area-inset-bottom, 0px));
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  contain: layout paint;
}

.bottom-nav__items {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-flow: column;
  width: 100%;
  max-width: none;
  height: 4rem;
  margin: 0;
  padding: 0 max(env(safe-area-inset-right, 0px), env(safe-area-inset-left, 0px));
}

.bottom-nav__items > a {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 4rem;
  padding: 0.35rem 0.1rem;
  overflow: hidden;
}

.bottom-nav__items > a > span {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (display-mode: standalone) and (max-width: 767px) {
  html,
  body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .bottom-nav__items {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* Vocabulary mode picker v14 */
.vocab-mode-picker {
  display: grid;
  gap: 0.9rem;
}

.vocab-mode-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-calm, #d7e0df);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.82);
}

.dark .vocab-mode-card {
  border-color: rgb(255 255 255 / 0.11);
  background: rgb(255 255 255 / 0.035);
}

.vocab-mode-card--due {
  border-color: rgb(13 148 136 / 0.42);
  background: linear-gradient(145deg, rgb(240 253 250), rgb(255 255 255));
}

.dark .vocab-mode-card--due {
  background: linear-gradient(145deg, rgb(4 47 46 / 0.62), rgb(255 255 255 / 0.035));
}

.vocab-mode-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.vocab-mode-card__heading h4 {
  margin-top: 0.12rem;
  color: var(--color-ink, #132221);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.dark .vocab-mode-card__heading h4 { color: #f1f7f6; }

.vocab-mode-kicker {
  display: block;
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dark .vocab-mode-kicker { color: #5eead4; }

.vocab-due-count {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: #0f766e;
  color: white;
  font-size: 0.8rem;
  font-weight: 800;
}

.vocab-mode-card__copy {
  margin-top: 0.45rem;
  color: #60706e;
  font-size: 0.78rem;
  line-height: 1.5;
}

.dark .vocab-mode-card__copy { color: #aab9b7; }

.vocab-mode-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.vocab-mode-primary,
.vocab-mode-secondary,
.vocab-mode-tertiary {
  min-width: 0;
  min-height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 11px;
  font-size: 0.78rem;
  font-weight: 750;
  text-align: center;
}

.vocab-mode-primary { border: 1px solid #0f766e; background: #0f766e; color: white; }
.vocab-mode-primary:hover { background: #115e59; }
.vocab-mode-secondary { border: 1px solid rgb(13 148 136 / 0.38); color: #0f766e; background: rgb(240 253 250 / 0.72); }
.dark .vocab-mode-secondary { color: #99f6e4; background: rgb(13 148 136 / 0.12); }
.vocab-mode-tertiary { grid-column: 1 / -1; min-height: 2.35rem; border: 0; color: #526260; background: transparent; }
.dark .vocab-mode-tertiary { color: #b8c5c3; }
.vocab-mode-primary small { font-size: 0.66rem; opacity: 0.78; }

.vocab-due-modes,
.vocab-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.vocab-due-modes.hidden,
.vocab-mode-grid.hidden,
.vocab-mix-config.hidden { display: none; }

.vocab-mode-option {
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.68rem;
  border: 1px solid #d7e0df;
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.dark .vocab-mode-option { border-color: rgb(255 255 255 / 0.11); background: rgb(255 255 255 / 0.045); }
.vocab-mode-option:hover { border-color: rgb(13 148 136 / 0.55); background: rgb(240 253 250 / 0.7); }
.vocab-mode-option:active { transform: translateY(1px); }

.vocab-mode-option__title {
  display: flex;
  align-items: flex-start;
  gap: 0.42rem;
  color: #17302d;
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.3;
}

.dark .vocab-mode-option__title { color: #edf7f5; }
.vocab-mode-option__title i { width: 0.9rem; margin-top: 0.1rem; color: #0f766e; text-align: center; }
.dark .vocab-mode-option__title i { color: #5eead4; }

.vocab-mode-option__hint {
  display: block;
  margin-top: 0.28rem;
  color: #6b7a78;
  font-size: 0.68rem;
  line-height: 1.35;
}

.dark .vocab-mode-option__hint { color: #9eaeac; }

.vocab-mode-tabs {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.8rem;
  padding: 0.25rem;
  overflow-x: auto;
  border-radius: 11px;
  background: #edf3f2;
  scrollbar-width: none;
}

.dark .vocab-mode-tabs { background: rgb(255 255 255 / 0.065); }
.vocab-mode-tabs::-webkit-scrollbar { display: none; }
.vocab-mode-tabs button { flex: 1 0 auto; min-height: 2.2rem; padding: 0.45rem 0.65rem; border-radius: 8px; color: #62716f; font-size: 0.72rem; font-weight: 750; white-space: nowrap; }
.vocab-mode-tabs button[aria-selected="true"] { background: white; color: #0f766e; box-shadow: 0 1px 5px rgb(15 35 32 / 0.1); }
.dark .vocab-mode-tabs button[aria-selected="true"] { background: rgb(255 255 255 / 0.11); color: #99f6e4; }

.vocab-mix-config { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid #d7e0df; }
.dark .vocab-mix-config { border-color: rgb(255 255 255 / 0.1); }
.vocab-mix-grid { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
.vocab-mix-option { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 3.4rem; padding: 0.65rem; border: 1px solid #d7e0df; border-radius: 11px; cursor: pointer; }
.dark .vocab-mix-option { border-color: rgb(255 255 255 / 0.1); }
.vocab-mix-option input { margin-top: 0.15rem; accent-color: #0f766e; }
.vocab-mix-option strong, .vocab-mix-option small { display: block; }
.vocab-mix-option strong { color: #243b38; font-size: 0.72rem; }
.dark .vocab-mix-option strong { color: #eef7f6; }
.vocab-mix-option small { margin-top: 0.18rem; color: #6c7c79; font-size: 0.66rem; }
.vocab-mix-footer { display: grid; gap: 0.65rem; margin-top: 0.75rem; }
.vocab-mix-footer p { color: #647572; font-size: 0.7rem; }

@media (min-width: 640px) {
  .vocab-mode-card { padding: 1.15rem; }
  .vocab-mode-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vocab-mode-tertiary { grid-column: auto; }
  .vocab-mode-grid, .vocab-due-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vocab-mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vocab-mix-footer { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (max-width: 639px) {
  #panel-mode-picker { margin-left: -0.25rem; margin-right: -0.25rem; }
  .deck-panel-sheet > .flex-1 { padding-left: 1rem; padding-right: 1rem; }
  .card-learning-row { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .card-learning-row .card-delete-btn { width: 2.25rem; height: 2.25rem; padding: 0; }
}

/* Account and cloud sync */
.account-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.8rem;
}

.account-trigger.is-signed-in {
  border-color: rgb(13 148 136 / 0.42);
  background: rgb(240 253 250 / 0.78);
  color: #0f766e;
}

.dark .account-trigger.is-signed-in {
  background: rgb(19 78 74 / 0.34);
  color: #99f6e4;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.account-modal[hidden] { display: none; }

.account-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgb(11 28 26 / 0.58);
  backdrop-filter: blur(5px);
}

.account-card {
  position: relative;
  width: min(100%, 28rem);
  max-height: min(90vh, 44rem);
  overflow-y: auto;
  border: 1px solid #d6e3e0;
  border-radius: 1.25rem;
  padding: 1.55rem;
  background:
    radial-gradient(circle at 90% 0%, rgb(204 251 241 / 0.65), transparent 34%),
    #fff;
  box-shadow: 0 24px 70px rgb(8 35 31 / 0.24);
}

.dark .account-card {
  border-color: rgb(255 255 255 / 0.12);
  background:
    radial-gradient(circle at 90% 0%, rgb(19 78 74 / 0.5), transparent 36%),
    #111b1a;
}

.account-card__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  border-radius: 0.7rem;
  color: #647572;
}

.account-card__close:hover { background: rgb(13 148 136 / 0.09); color: #0f766e; }
.account-card__brand { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 0.85rem; background: #0d9488; color: white; box-shadow: 0 8px 20px rgb(13 148 136 / 0.24); }
.account-card h2 { margin-top: 1rem; color: #18332f; font-size: 1.35rem; font-weight: 750; letter-spacing: -0.025em; }
.dark .account-card h2 { color: #f0fdfa; }
.account-card__intro { margin-top: 0.4rem; color: #647572; font-size: 0.84rem; line-height: 1.55; }
.dark .account-card__intro { color: #aab9b6; }

.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  margin-top: 1.2rem;
  padding: 0.25rem;
  border-radius: 0.8rem;
  background: #edf4f2;
}

.dark .account-tabs { background: rgb(255 255 255 / 0.065); }
.account-tabs button { min-height: 2.5rem; border-radius: 0.62rem; color: #62716f; font-size: 0.8rem; font-weight: 700; }
.account-tabs button[aria-selected="true"] { background: white; color: #0f766e; box-shadow: 0 2px 8px rgb(13 43 39 / 0.1); }
.dark .account-tabs button[aria-selected="true"] { background: rgb(255 255 255 / 0.11); color: #99f6e4; }

.account-form { display: grid; gap: 0.85rem; margin-top: 1rem; }
.account-form label { display: block; margin-bottom: 0.35rem; color: #405753; font-size: 0.75rem; font-weight: 700; }
.dark .account-form label { color: #c5d3d0; }
.account-form input { width: 100%; min-height: 2.85rem; border: 1px solid #cddbd8; border-radius: 0.72rem; padding: 0.68rem 0.8rem; background: rgb(255 255 255 / 0.9); color: #18332f; font-size: 0.88rem; }
.account-form input:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgb(13 148 136 / 0.13); outline: 0; }
.dark .account-form input { border-color: rgb(255 255 255 / 0.13); background: rgb(255 255 255 / 0.055); color: #ecfdf5; }

.account-primary-action,
.account-secondary-action {
  width: 100%;
  min-height: 2.85rem;
  border-radius: 0.75rem;
  font-size: 0.84rem;
  font-weight: 750;
}

.account-primary-action { margin-top: 0.15rem; background: #0d9488; color: white; box-shadow: 0 7px 18px rgb(13 148 136 / 0.2); }
.account-primary-action:hover { background: #0f766e; }
.account-secondary-action { border: 1px solid #d3dfdc; color: #536965; }
.account-secondary-action:hover { border-color: #0d9488; color: #0f766e; }
.dark .account-secondary-action { border-color: rgb(255 255 255 / 0.13); color: #c6d5d2; }

.account-signed-in { display: grid; gap: 0.9rem; margin-top: 1.15rem; }
.account-signed-in[hidden] { display: none; }
.account-user-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem; border: 1px solid #d9e4e2; border-radius: 0.85rem; background: rgb(248 252 251 / 0.78); }
.dark .account-user-row { border-color: rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.04); }
.account-avatar { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: 50%; background: #ccfbf1; color: #0f766e; }
.dark .account-avatar { background: rgb(19 78 74 / 0.55); color: #99f6e4; }
.account-user-row strong, .account-user-row small { display: block; }
.account-user-row strong { color: #25413d; font-size: 0.85rem; }
.dark .account-user-row strong { color: #ecfdf5; }
.account-user-row small { margin-top: 0.12rem; color: #74837f; font-size: 0.7rem; overflow-wrap: anywhere; }

.account-sync-box { display: flex; align-items: flex-start; gap: 0.65rem; border-radius: 0.8rem; padding: 0.8rem; background: #f0fdfa; color: #47625d; }
.dark .account-sync-box { background: rgb(19 78 74 / 0.3); color: #b8ccc8; }
.account-sync-box i { margin-top: 0.15rem; color: #0d9488; }
.account-sync-box p { font-size: 0.76rem; line-height: 1.5; }
.account-sync-box p[data-tone="warning"] { color: #a16207; }
.account-sync-box p[data-tone="success"] { color: #0f766e; }
.dark .account-sync-box p[data-tone="warning"] { color: #fde68a; }
.dark .account-sync-box p[data-tone="success"] { color: #99f6e4; }

.account-status { margin-top: 0.85rem; border-radius: 0.7rem; padding: 0.68rem 0.75rem; font-size: 0.76rem; line-height: 1.45; }
.account-status[data-tone="error"] { background: #fef2f2; color: #b91c1c; }
.account-status[data-tone="warning"] { background: #fffbeb; color: #92400e; }
.account-status[data-tone="neutral"] { background: #f0fdfa; color: #0f766e; }
.dark .account-status[data-tone="error"] { background: rgb(127 29 29 / 0.3); color: #fecaca; }
.dark .account-status[data-tone="warning"] { background: rgb(120 53 15 / 0.28); color: #fde68a; }
.dark .account-status[data-tone="neutral"] { background: rgb(19 78 74 / 0.3); color: #99f6e4; }
.account-privacy { display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 1rem; color: #7b8986; font-size: 0.67rem; line-height: 1.45; }
.account-privacy i { margin-top: 0.12rem; color: #0d9488; }
.account-modal-open { overflow: hidden; }

.account-text-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  margin-top: 0.15rem;
  padding: 0.25rem 0.4rem;
  border: 0;
  background: transparent;
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.account-text-action:hover { color: #115e59; }
.account-text-action:disabled { opacity: 0.55; cursor: not-allowed; }
.dark .account-text-action { color: #5eead4; }
.dark .account-text-action:hover { color: #99f6e4; }

.account-verify-status {
  margin: 0;
  border-radius: 0.7rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.74rem;
  line-height: 1.45;
  background: #fffbeb;
  color: #92400e;
}
.account-verify-status[data-tone="success"] { background: #ecfdf5; color: #0f766e; }
.account-verify-status[data-tone="warning"] { background: #fffbeb; color: #92400e; }
.dark .account-verify-status[data-tone="success"] { background: rgb(19 78 74 / 0.35); color: #99f6e4; }
.dark .account-verify-status[data-tone="warning"] { background: rgb(120 53 15 / 0.28); color: #fde68a; }

.account-status[data-tone="success"] { background: #ecfdf5; color: #0f766e; }
.dark .account-status[data-tone="success"] { background: rgb(19 78 74 / 0.35); color: #99f6e4; }

.account-primary-action:disabled,
.account-secondary-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .account-modal { align-items: end; padding: 0; }
  .account-card { width: 100%; max-height: 92dvh; border-radius: 1.2rem 1.2rem 0 0; padding: 1.25rem; }
  .account-trigger { padding-inline: 0.55rem; }
  .account-card h2 { font-size: 1.2rem; padding-right: 2.5rem; }
}