/* Save/Resume normally adds a shortcut to the site-wide workbench. Family
   homework owns a stricter contract: only the lesson-matched manipulative may
   appear, so the general all-tools shortcut stays out of this experience. */
#nsr-workbench { display: none !important; }

/* Enhancements: Share bar, Standard details, Time remaining, Kitchen table, Audio buttons */
.hw-hero-share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px 0;
}
.hw-share-btn {
  font-size: 0.82rem;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hw-share-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  text-decoration: none;
}
.hw-standard-details {
  margin: 6px 0 10px 0;
  font-size: 0.85rem;
}
.hw-standard-summary {
  cursor: pointer;
  color: var(--amber-light);
  font-weight: 600;
}
.hw-standard-desc {
  margin: 4px 0 0 0;
  font-size: 0.8rem;
  color: var(--teal-light);
}
.hw-tab-meta-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 12px 2px 12px;
}
.hw-time-remaining {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--amber-light);
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.btn-listen-prob {
  background: var(--teal-light);
  border: 1px solid var(--teal);
  color: var(--teal-ink);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}
.btn-listen-prob:hover {
  background: var(--teal);
  color: #ffffff;
}
.kitchen-table-card {
  margin: 20px 0;
  padding: 18px 20px;
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.kt-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--teal-ink);
  margin-bottom: 6px;
}
.kt-title {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  color: var(--navy);
}
.kt-materials {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 10px 0;
}
.kt-steps {
  margin: 0 0 10px 0;
  padding-left: 20px;
  line-height: 1.6;
}
.kt-why {
  margin: 8px 0 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
}
.cert-streak-box {
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--amber-light);
  border-radius: 8px;
  color: #78350f;
  font-size: 0.9rem;
}

@media print {
  body.print-problems-only [data-tab-panel]:not([data-tab-panel="check"]),
  body.print-problems-only .hw-hero,
  body.print-problems-only .homework-tab-chrome,
  body.print-problems-only .hw-stuck-fab,
  body.print-problems-only .workbench-drawer,
  body.print-problems-only .more-practice,
  body.print-problems-only .tab-flow-nav,
  body.print-problems-only .problem-check-row {
    display: none !important;
  }
  body.print-problems-only [data-tab-panel="check"] {
    display: block !important;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  padding-bottom: calc(var(--hw-status-height, 104px) + var(--hw-tab-height, 72px) + 16px);
}

a { color: var(--navy); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Header Styles */
header.homework-header {
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--white);
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

header.homework-header::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(31, 166, 162, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--amber);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}

.back-link:hover {
  color: var(--white);
  text-decoration: none;
}

.header-meta {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-light);
  font-weight: 800;
  margin: 0 0 6px 0;
}

header.homework-header h1 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.objectives-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.objective-row {
  margin-bottom: 8px;
  font-size: 14.5px;
}
.objective-row:last-child { margin-bottom: 0; }
.objective-badge {
  background: var(--amber);
  color: var(--navy);
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  margin-right: 6px;
  display: inline-block;
}

/* Cards & Generic Layout */
.card {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.section-title {
  font-family: var(--font-display);
  color: var(--navy);
  font-size: 20px;
  margin: 0 0 16px 0;
}

/* Family guide */
.family-guide {
  background: linear-gradient(180deg, #fffdf8 0%, var(--white) 100%);
  border-color: #ead9b8;
}

.family-guide-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.family-guide-emoji {
  font-size: 34px;
  line-height: 1;
  flex-shrink: 0;
}

.family-guide-title {
  margin-bottom: 4px;
}

.family-guide-sub {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
}

.family-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.family-panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.family-panel-heading {
  margin: 0 0 8px 0;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--navy);
}

.family-tip-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink);
}

.family-tip-list li {
  margin-bottom: 6px;
}

.family-try-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--navy);
}

.family-print-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.try-at-home {
  background: linear-gradient(180deg, var(--teal-light) 0%, var(--white) 100%);
  border-color: #b8ddd8;
}

.try-narrative {
  margin: 0 0 12px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 600;
}

.try-challenge {
  margin: 0;
  padding: 12px 14px;
  background: var(--amber-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--amber);
  font-size: 14px;
  color: var(--ink);
}

.family-problem-tip {
  margin: -8px 0 14px 0;
  padding: 10px 12px;
  background: var(--amber-light);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--hint);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.family-problem-tip .lang-es {
  color: var(--muted);
  font-size: 13px;
}

/* A left rule rather than a third teal slab: the problem card already carries a
   teal hint button and a teal step guide, and three identical fills flattened
   the hierarchy into noise. */
.family-hint-box {
  margin-bottom: 14px;
  padding: 2px 0 2px 14px;
  background: none;
  border-left: 3px solid var(--teal);
  border-radius: 0;
  font-size: 14px;
  color: var(--navy);
}

.family-hint-box p {
  margin: 0 0 6px 0;
}

.family-hint-box p:last-child {
  margin-bottom: 0;
}

/* Vocabulary Flashcards */
.vocab-family-note {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

.vocab-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 4px 0 16px 0;
  gap: 12px;
}

.vocab-filter-group {
  display: inline-flex;
  background: #edf2f7;
  padding: 3px;
  border-radius: 999px;
  gap: 3px;
  border: 1px solid #e2e8f0;
}

.vocab-filter-group .btn-filter {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #64748b);
  cursor: pointer;
  box-shadow: none;
  transition: all 0.15s ease;
}

.vocab-filter-group .btn-filter:hover {
  color: var(--navy, #12355b);
}

.vocab-filter-group .btn-filter.is-active {
  background: var(--white, #ffffff);
  color: var(--navy, #12355b);
  box-shadow: 0 1px 4px rgba(18, 53, 91, 0.12);
}

.vocab-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  width: 100%;
}

@media (max-width: 640px) {
  .vocab-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.vocab-card {
  position: relative;
  height: 410px;
  perspective: 1200px;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vocab-card:focus-visible {
  outline: 3px solid var(--teal, #1fa6a2);
  outline-offset: 4px;
  border-radius: 20px;
}

.vocab-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

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

.vocab-card-front,
.vocab-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.vocab-card-front {
  background: var(--white, #ffffff);
  color: var(--navy, #12355b);
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(18, 53, 91, 0.06);
  padding: 16px 18px;
  justify-content: space-between;
  transform: rotateY(0deg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vocab-card:hover .vocab-card-front {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(18, 53, 91, 0.1);
}

.vocab-card.is-known .vocab-card-front {
  border-color: rgba(16, 185, 129, 0.45);
}

.vocab-card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.vocab-speak-btn,
.vocab-master-toggle {
  background: rgba(18, 53, 91, 0.05);
  border: 1px solid rgba(18, 53, 91, 0.12);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy, #12355b);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.vocab-speak-btn:hover {
  background: #e6fffa;
  border-color: #1fa6a2;
  color: #0d766e;
  transform: scale(1.03);
}

.vocab-master-toggle:hover {
  background: rgba(18, 53, 91, 0.09);
  transform: scale(1.03);
}

.vocab-master-toggle.is-mastered {
  color: #b45309;
  background: #fef3c7;
  border-color: #f59e0b;
}

.vocab-thumb-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0;
  min-height: 84px;
}

.vocab-thumb {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 12px;
  background: var(--cream, #faf8f5);
  border: 1px solid #e2e8f0;
  padding: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.vocab-front-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 8px;
  overflow-y: auto;
  scrollbar-width: none;
}

.vocab-front-body .vocab-term {
  margin: 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--navy, #12355b);
  line-height: 1.25;
}

.vocab-front-body .vocab-es {
  color: #64748b;
  font-style: italic;
  font-size: 13.5px;
  margin: 3px 0 0 0;
  line-height: 1.3;
}

.vocab-front-body .vocab-visual-hint {
  font-size: 12px;
  background: #f0fdfa;
  color: #134e4a;
  border-left: 3px solid #1fa6a2;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 8px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.4;
}

.flip-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0d9488;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  margin-top: auto;
  width: 100%;
}

.flip-prompt .flip-icon {
  font-size: 14px;
}

/* Back Face */
.vocab-card-back {
  background: linear-gradient(155deg, #12355b 0%, #071a2c 100%);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(7, 26, 44, 0.25);
  padding: 16px 18px;
  justify-content: space-between;
  transform: rotateY(180deg);
}

.vocab-back-header {
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.vocab-back-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5f3fc;
  background: rgba(165, 243, 252, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}

.vocab-back-term {
  margin: 0;
  font-family: var(--font-display, "Outfit", sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.vocab-back-term-es {
  color: #94a3b8;
  font-style: italic;
  font-size: 12.5px;
  margin: 2px 0 0 0;
}

.vocab-back-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  overflow-y: auto;
  padding: 4px 0;
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.vocab-back-content::-webkit-scrollbar {
  width: 4px;
}
.vocab-back-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}

.vocab-def {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.vocab-def-es {
  font-size: 12.5px;
  color: #fef08a;
  line-height: 1.4;
  margin: 0 0 8px 0;
  font-style: italic;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.vocab-def-es .lang-tag {
  display: inline-block;
  background: rgba(254, 240, 138, 0.2);
  color: #fef08a;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  font-style: normal;
  flex-shrink: 0;
  margin-top: 1px;
}

.vocab-back-visual {
  font-size: 11.5px;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid #1fa6a2;
  padding: 6px 8px;
  border-radius: 5px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
}

.vocab-card-back-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.vocab-btn-gotit,
.vocab-btn-review {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.2;
}

.vocab-btn-gotit {
  flex: 1 1 120px;
  max-width: 145px;
  background: #10b981;
  color: #ffffff;
  border: none;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease, transform 0.1s ease;
}

.vocab-btn-gotit:hover {
  background: #059669;
  transform: translateY(-1px);
}

.vocab-btn-review {
  flex: 1 1 120px;
  max-width: 145px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, transform 0.1s ease;
}

.vocab-btn-review:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.flip-back-prompt {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 4px;
}

/* Card language polish: prevent global bilingual borders inside cards */
.vocab-card-front .lang-es,
.vocab-card-back .lang-es {
  border-left: none !important;
  padding-left: 0 !important;
}

/* Ensure high contrast on card back in all language modes */
.vocab-card-back .vocab-back-term,
.vocab-card-back .vocab-back-term .lang-en,
.vocab-card-back .vocab-back-term .lang-es {
  color: #ffffff !important;
}

.vocab-card-back .vocab-back-term-es,
.vocab-card-back .vocab-back-term-es .lang-es {
  color: #94a3b8 !important;
  margin: 2px 0 0 0;
  font-style: italic;
  font-size: 13px;
}

.vocab-card-back .vocab-def-es {
  color: #fef08a !important;
  margin: 0 0 8px 0;
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
}

.vocab-card-back-actions .btn .lang-en + .lang-es::before {
  content: " · ";
  opacity: 0.8;
}

.vocab-card-back-actions .btn .lang-es {
  color: inherit !important;
}

.flip-prompt .lang-en + .lang-es::before,
.flip-back-prompt .lang-en + .lang-es::before {
  content: " · ";
  opacity: 0.7;
}

.flip-back-prompt .lang-es {
  color: rgba(255, 255, 255, 0.7) !important;
}

.flip-prompt .lang-es {
  color: #0d9488 !important;
}

/* Bilingual subtitle pairing: show subtitle in bilingual, title-only in mono-lingual */
body.lang-mode-bilingual .vocab-term .lang-es,
body.lang-mode-bilingual .vocab-back-term .lang-es {
  display: none !important;
}

body.lang-mode-es .vocab-es,
body.lang-mode-es .vocab-back-term-es {
  display: none !important;
}

body.lang-mode-en .vocab-es,
body.lang-mode-en .vocab-back-term-es {
  display: none !important;
}

body.lang-mode-es .vocab-card:not(:has(.vocab-def-es)) .vocab-def {
  display: block !important;
}

/* Practice Problem Cards */
.problem-section {
  position: relative;
}

.problem-check-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px solid var(--teal-light);
}

.btn-check-one {
  align-self: flex-start;
  min-height: 44px;
  font-size: 14px;
}

/* Family answer key — one per problem, closed until a parent opens it. */
.hw-answer-key {
  margin-top: 12px;
  border: 1.5px dashed var(--success);
  border-radius: var(--radius-sm);
  background: var(--success-bg);
}
.hw-answer-key > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--success);
}
.hw-answer-key > summary::-webkit-details-marker { display: none; }
.hw-answer-key > summary::after {
  content: "▸";
  margin-left: auto;
  transition: transform 0.15s ease;
}
.hw-answer-key[open] > summary::after { transform: rotate(90deg); }
.hw-answer-key > summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.hw-answer-key-body {
  padding: 4px 14px 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.hw-answer-key-label {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--success);
}
.hw-answer-sheet { display: none; }
@media print {
  body.print-answer-sheet > *:not(.hw-answer-sheet) { display: none !important; }
  body.print-answer-sheet .hw-answer-sheet { display: block !important; font-size: 12pt; color: #000; }
  body.print-answer-sheet .hw-answer-sheet h2 { font-size: 16pt; margin: 0 0 6pt; }
  body.print-answer-sheet .hw-answer-sheet ol > li { margin: 0 0 8pt; break-inside: avoid; }
  body.print-answer-sheet .hw-answer-sheet ul { margin: 2pt 0 0; padding-left: 16pt; }
}

.hw-answer-key-try {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.hw-answer-key-lines {
  margin: 0;
  padding-left: 20px;
}
.hw-answer-key-lines li {
  margin: 2px 0;
  font-weight: 600;
}
.hw-answer-key-note {
  margin: 8px 0 0;
  font-size: 13.5px;
}
@media print {
  .hw-answer-key { display: none !important; }
}

.problem-check-result {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--muted);
  min-height: 0;
}

.problem-check-result:empty {
  display: none;
}

.problem-check-result.is-correct {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.problem-check-result.is-incorrect {
  background: var(--error-bg);
  border-color: var(--error);
  color: var(--error);
}

.problem-check-result.is-reviewed {
  background: #eef4fb;
  border-color: #6b8db5;
  color: #1e3a5f;
}

.problem-section.reviewed {
  border-color: #6b8db5;
}

.problem-check-result.is-hint {
  background: var(--hint-bg);
  border-color: var(--amber);
  color: var(--hint);
}

.problem-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--teal-light);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.problem-number-badge {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--navy);
  font-size: 18px;
}

.problem-type-badge {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--teal-ink);
  background: var(--teal-light);
  padding: 4px 10px;
  border-radius: 99px;
}

.problem-stem {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 18px 0;
  line-height: 1.45;
}

/* ---- Family scaffolding: step guide, visual model, show-your-work ---- */
.hw-step-guide {
  margin: 14px 0;
  border: 1.5px solid var(--teal);
  border-radius: 12px;
  background: var(--teal-light);
  overflow: hidden;
}
.hw-step-guide > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 16px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  background: rgba(31, 166, 162, 0.16);
}
.hw-step-guide > summary::-webkit-details-marker { display: none; }
.hw-step-guide > summary::after { content: " ▾"; color: var(--teal); }
.hw-step-guide[open] > summary::after { content: " ▴"; }
.hw-steps {
  margin: 0;
  padding: 12px 18px 14px 34px;
  display: grid;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--navy);
}
.hw-steps li { padding-left: 4px; }
.hw-steps strong { color: var(--navy); }

.hw-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 14px 0 4px;
}
@media (min-width: 640px) {
  .hw-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.hw-visual-caption, .hw-work-label {
  display: block;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy);
  margin-bottom: 6px;
}
.hw-visual-frame {
  border: 1.5px dashed #9bb6cf;
  border-radius: 12px;
  background: #fbfdff;
  padding: 8px;
  text-align: center;
}
.hw-visual-svg { width: 100%; height: auto; max-height: 180px; }
/* Drawable model area: students draw directly on the grid (mouse/touch/stylus). */
.hw-visual-frame.hw-drawable { position: relative; }
.hw-draw-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: crosshair; border-radius: 12px;
}
.hw-draw-clear {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  background: #ffffff; color: var(--navy);
  border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; cursor: pointer;
}
.hw-draw-clear:hover { border-color: var(--teal); }
@media print { .hw-draw-clear { display: none; } }

/* Interactive tap-to-graph widgets (number line, coordinate plane, grid) */
.hw-visual-frame.hw-interactive { position: relative; }
.hw-interactive .hw-visual-svg { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.hw-interactive .ng-hit { cursor: pointer; fill: transparent; }
.hw-interactive .ng-tick-lbl, .hw-interactive .ng-axis-lbl { font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 700; fill: var(--navy); }
.hw-interactive .ng-point { fill: var(--teal); stroke: var(--navy); stroke-width: 2; cursor: pointer; }
.hw-interactive .ng-point.is-open { fill: #ffffff; }
.hw-interactive .ng-ray { stroke: var(--teal); stroke-width: 5; stroke-linecap: round; }
.hw-interactive .ng-plot { fill: var(--teal); stroke: var(--navy); stroke-width: 1.5; cursor: pointer; }
.hw-interactive .ng-plot-lbl { font-family: "Outfit", sans-serif; font-size: 10px; font-weight: 700; fill: var(--navy); }
.hw-interactive .ng-cell { fill: transparent; cursor: pointer; }
.hw-interactive .ng-cell.is-on { fill: rgba(31,166,162,0.45); }
.hw-graph-controls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.hw-graph-controls:empty { display: none; }
.hw-graph-controls button {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  background: #ffffff; color: var(--navy);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 11px; min-height: 44px; cursor: pointer;
}
.hw-graph-controls button:hover { border-color: var(--teal); }
.hw-graph-controls button[aria-pressed="true"] { background: var(--teal-ink); color: #ffffff; border-color: var(--teal-ink); }
.hw-graph-reset {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  background: #ffffff; color: var(--navy);
  border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; cursor: pointer;
}
.hw-graph-reset:hover { border-color: var(--teal); }
.hw-graph-readout {
  margin-top: 8px; font-family: "Outfit", sans-serif; font-weight: 800;
  font-size: 14px; color: var(--navy); min-height: 18px;
}
.hw-graph-readout:empty { display: none; }
@media print { .hw-graph-reset, .hw-graph-controls { display: none; } }
.hw-work-input {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  line-height: 28px;
  background-color: #fbfdff;
  background-image: repeating-linear-gradient(#fbfdff 0, #fbfdff 27px, #d6e2ee 27px, #d6e2ee 28px);
  font-family: inherit;
}

@media print {
  .hw-step-guide { break-inside: avoid; border-color: #888; background: #fff; }
  .hw-step-guide > summary { background: #f0f0f0; }
  .hw-step-guide[open] > summary::after, .hw-step-guide > summary::after { content: ""; }
  /* The routine is collapsed on screen (it repeats on every problem). On paper
     there is nothing to click, so force the contents visible. */
  .hw-step-guide > * { display: block !important; }
  /* Flip cards print flat — otherwise only the English word reaches the paper
     and every definition prints as a blank box. */
  .vocab-card-inner { transform: none !important; }
  .vocab-card-front, .vocab-card-back {
    position: static !important;
    transform: none !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }
  .hw-workspace { break-inside: avoid; }
  .hw-work-input { min-height: 130px; border: 1px solid #888; }
  .hw-visual-frame { border-color: #888; }
}

/* Custom styled inputs, checkboxes, and select dropdowns */
.custom-input {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  outline: none;
  transition: all 0.2s ease-in-out;
}

.custom-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-light);
}

.custom-textarea {
  width: 100%;
  height: 110px;
  font-family: inherit;
  font-size: 14.5px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: all 0.2s ease-in-out;
}

.custom-textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-light);
}

.custom-select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  min-width: 150px;
}

.custom-select:focus {
  border-color: var(--teal);
}

/* Multiple Choice Custom Radios */
.mc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-option-label {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s;
  position: relative;
}

.mc-option-label:hover {
  background: var(--cream);
  border-color: var(--teal);
}

.mc-option-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.custom-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transition: all 0.15s;
}

.mc-option-label input[type="radio"]:checked ~ .custom-radio {
  border-color: var(--teal);
  background: var(--teal);
}

.mc-option-label input[type="radio"]:checked ~ .custom-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.choice-text {
  flex: 1;
}

/* Matching Rows */
.matching-pairs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.matching-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  gap: 16px;
}

.matching-term {
  font-weight: 700;
  color: var(--navy);
  flex: 1;
}

.matching-select-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Phones: a long answer option sized the select past the card (9-4 scrolled
   sideways). Stack the term over its picker and let the picker shrink. */
@media (max-width: 640px) {
  .matching-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .matching-select-container { min-width: 0; }
  .matching-select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
}

/* Drag Sort Layout */
.drag-sort-workspace {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drag-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.drag-column {
  background: var(--cream);
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
}

.drag-column-header {
  font-family: var(--font-display);
  font-weight: 800;
  text-align: center;
  color: var(--navy);
  margin-bottom: 12px;
  font-size: 14px;
  text-transform: uppercase;
}

.drag-column-slots {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
}

/* Phones sort with the "Move to…" menu, so an empty column only needs room
   for its heading and the first card; 160px of dashed space per column added
   a screen of scrolling to every sort problem. */
@media (max-width: 640px) {
  .drag-column { min-height: 0; padding: 10px; }
  .drag-column-header { margin-bottom: 6px; }
  .drag-column-slots { min-height: 44px; }
}

.drag-source-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
}

.drag-source-header {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 12px;
}

.drag-source-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 60px;
  align-items: center;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--cream);
}

.drag-card {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: grab;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
}

.drag-card:active {
  cursor: grabbing;
  transform: scale(0.98);
}

.drag-card.dragging {
  opacity: 0.55;
}

.drag-column.over,
.drag-source-pile.over {
  border-color: var(--teal);
  background: var(--teal-light);
}

/* Drag order (sequencing) */
.drag-order-workspace {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
}

.drag-order-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drag-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: grab;
  user-select: none;
}

.drag-order-row.dragging {
  opacity: 0.55;
}

.drag-order-handle {
  color: var(--muted);
  font-size: 12px;
}

.drag-order-num {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
}

.drag-order-text {
  flex: 1;
  font-weight: 600;
  font-size: 14.5px;
}

.drag-order-controls {
  display: flex;
  gap: 4px;
}

.order-move-btn {
  min-width: 0;
  padding: 4px 10px;
}

.drag-order-row.is-correct {
  border-color: var(--success);
  background: var(--success-bg);
}

.drag-order-row.is-incorrect {
  border-color: var(--error);
  background: var(--error-bg);
}

.drag-handle {
  color: var(--muted);
  font-size: 12px;
}

.mobile-cat-select {
  display: block;
  font-family: inherit;
  font-size: 16px;
  min-height: 44px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  outline: none;
}

@media (max-width: 600px) {
  /* On a phone the card is: handle, the problem, and a "Move to" picker. The
     picker sizes itself to its longest option ("Asking: How Many Groups
     (Pieces)?" = 222px), and on a flex row that squeezed the problem text into
     a 59px column reading one word per line — the question a family is meant to
     sort became unreadable. Stack them: the problem gets the full width, the
     picker gets its own line under it. */
  .drag-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
  }
  .drag-card .card-text {
    flex: 1 1 100%;
    min-width: 0;
    font-weight: 600;
  }
  .drag-card .drag-handle { flex: 0 0 auto; }
  .mobile-cat-select {
    display: block;
    flex: 1 1 100%;
    max-width: 100%;
    margin: 8px 0 0;
    /* A picker a finger can hit. It was 11px text in a 2px-padded box. */
    min-height: 40px;
    font-size: 13px;
    padding: 6px 8px;
  }
  /* A short card ("2⁵", "7 × 7") fits beside its picker. Stacking those made
     each card 137px and a six-card sort ~900px of scrolling. Long statements
     keep the stacked layout above. */
  .drag-card.drag-card--short {
    flex-wrap: nowrap;
    align-items: center;
    padding: 6px 10px;
  }
  .drag-card.drag-card--short .card-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .drag-card.drag-card--short .mobile-cat-select {
    flex: 0 0 8.5em;
    margin: 0;
  }
}

/* Fill Table */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.fill-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  /* .table-responsive has carried overflow-x since it was written, and it never
     fired: width:100% makes the table fit its container by definition, so five
     columns on a 390px phone were squeezed until "Option" set one letter per
     line down the cell and the comparison chart the lesson is built around was
     unreadable. A min-width lets the table be its own size and hands the
     overflow to the scroller that was already there. */
  min-width: 560px;
}

.fill-table th, .fill-table td {
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: left;
  font-size: 14.5px;
  /* Column headings are short labels, not prose; wrapping between their words
     is fine, breaking inside one is what produced the vertical alphabet. */
  overflow-wrap: normal;
  word-break: keep-all;
}

.fill-table th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
}

.fill-table tr:nth-child(even) td {
  background: var(--cream);
}

.fill-cell-label {
  display: none;
}

.hw-workspace-toggle {
  margin-top: 12px;
}
.hw-workspace-toggle > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  list-style: none;
}
.hw-workspace-toggle > summary::-webkit-details-marker { display: none; }
.hw-workspace-toggle[open] > summary { border-style: solid; margin-bottom: 8px; }

/* Phones: the 560px table scrolled sideways inside a 275px box, so the column
   a student fills in (Value, Answer) sat off-screen with nothing saying it was
   there (audit 2026-10-04: 60 tables on 43 pages). Under 640px every row is a
   card and every cell carries its own heading, so nothing needs scrolling. */
@media (max-width: 640px) {
  .table-responsive { overflow-x: visible; border: 0; }
  .fill-table { min-width: 0; border: 0; background: transparent; }
  .fill-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fill-table, .fill-table tbody, .fill-table tr, .fill-table td { display: block; width: 100%; box-sizing: border-box; }
  .fill-table tr { margin: 0 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; }
  .fill-table tr:nth-child(even) td { background: transparent; }
  .fill-table th, .fill-table td { border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; word-break: normal; overflow-wrap: anywhere; }
  .fill-table td:last-child { border-bottom: 0; }
  .fill-cell-label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--navy); margin-bottom: 3px; }
  .table-input { max-width: none; width: 100%; }
}

.table-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-input {
  max-width: 180px;
  padding: 6px 10px;
}

/* Error Analysis clipboard */
.clipboard-box {
  margin-top: 14px;
  margin-bottom: 18px;
  background: #f1f4f8;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.clipboard-top {
  height: 24px;
  background: var(--navy-light);
  position: relative;
}

.clipboard-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 12px;
  background: #e2e8f0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
}

.clipboard-paper {
  background: #fcfdfd;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-image: linear-gradient(#e5ecf4 1px, transparent 1px);
  background-size: 100% 28px;
  line-height: 28px;
}

.worked-step {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.worked-step.highlighted {
  background-color: var(--amber-light);
}

.step-badge {
  background: var(--navy);
  color: var(--white);
  font-size: 10.5px;
  font-family: var(--font-display);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1;
}

.step-label {
  font-weight: 700;
  color: var(--navy);
}

.step-work {
  font-family: monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.error-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cream);
  padding: 16px;
  border-radius: var(--radius-md);
  margin-top: 16px;
}

.error-select-row, .error-explain-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.error-select-row label, .error-explain-row label {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy);
}

/* Open Response Starter Sentence Cards */
.sentence-frame-card {
  background: var(--amber-light);
  border: 1px dashed var(--amber);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sentence-frame-tag {
  font-weight: 700;
  color: var(--hint);
}

/* The starter is the most useful line in the card, so it reads at the
   question's size: it was a small italic underlined button that was hard to
   read on a phone. */
.sentence-frame-text {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: var(--ink, #1f2937);
  background: var(--white);
  border: 1.5px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
}

.sentence-frame-text:hover,
.sentence-frame-text:focus-visible {
  border-color: var(--navy);
  outline: none;
}

.click-to-insert-hint {
  font-size: 13px;
  color: var(--muted);
}

.open-response-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.word-bank-container {
  margin-top: 12px;
}

.word-bank-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.word-bank-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.word-chip {
  background: var(--teal-light);
  color: var(--teal-ink);
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.word-chip:hover {
  background: var(--teal-ink);
  color: var(--white);
}

/* Feedback Marks & Explanations */
.feedback-badge {
  font-size: 16px;
  font-weight: 800;
  margin-left: 6px;
  width: 20px;
  text-align: center;
  display: inline-block;
}

.feedback-badge.success-check::after {
  content: "✓";
  color: var(--success);
}

.feedback-badge.error-cross::after {
  content: "✕";
  color: var(--error);
}

.problem-section.correct {
  border-color: var(--success);
  background-image: linear-gradient(rgba(15, 124, 74, 0.02), rgba(15, 124, 74, 0.02));
}

.problem-section.incorrect {
  border-color: var(--error);
  background-image: linear-gradient(rgba(182, 78, 47, 0.02), rgba(182, 78, 47, 0.02));
}

.explanation-box {
  margin-top: 14px;
  background: var(--success-bg);
  border: 1px solid var(--success);
  color: var(--success);
  border-left: 4px solid var(--success);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}

/* Inputs colored states */
.custom-input.is-correct, .custom-select.is-correct, .custom-textarea.is-correct {
  border-color: var(--success) !important;
  background-color: var(--success-bg) !important;
}

.custom-input.is-incorrect, .custom-select.is-incorrect, .custom-textarea.is-incorrect {
  border-color: var(--error) !important;
  background-color: var(--error-bg) !important;
}

.mc-option-label.is-correct {
  border-color: var(--success) !important;
  background-color: var(--success-bg) !important;
}

.mc-option-label.is-incorrect {
  border-color: var(--error) !important;
  background-color: var(--error-bg) !important;
}

.drag-card.is-correct {
  border-color: var(--success) !important;
  background-color: var(--success-bg) !important;
}

.drag-card.is-incorrect {
  border-color: var(--error) !important;
  background-color: var(--error-bg) !important;
}

/* Reveal box references */
.reveal-box {
  background: var(--success-bg);
  border: 1px dashed var(--success);
  color: var(--success);
  padding: 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-top: 10px;
}

/* Sticky Bottom Bar */
.bottom-status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1.5px solid var(--line);
  padding: 16px 24px;
  z-index: 1000;
  box-shadow: 0 -10px 30px rgba(18, 53, 91, 0.08);
}

.status-bar-wrapper {
  /* Must track .container's max-width (set in the polish layer) or the sticky
     bar's controls sit inset from every card above it. */
  max-width: 840px;
  padding: 0 18px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.sound-toggle-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sound-toggle-btn:hover {
  background-color: var(--teal-light);
}

.score-progress-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 150px;
}

.score-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
}

.score-text span {
  font-weight: 600;
  color: var(--muted);
}

.progress-bar-outer {
  height: 10px;
  background: var(--cream);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.progress-bar-inner {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--navy));
  border-radius: 5px;
  transition: width 0.4s ease-in-out;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.btn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14.5px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary {
  background: var(--teal-ink);
  color: var(--white);
}

.btn .lang-en,
.btn .lang-es {
  color: inherit;
}

.btn-primary:hover {
  background: var(--navy);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--line);
}

.btn-secondary:hover {
  background: var(--cream);
  border-color: var(--navy);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

@media (max-width: 550px) {
  .bottom-status-bar {
    padding: 12px;
  }
  .status-bar-wrapper {
    gap: 10px;
  }
  .action-buttons {
    width: 100%;
    justify-content: space-between;
  }
  .action-buttons button {
    flex: 1;
    min-height: 44px;
    justify-content: center;
  }
}

.parent-quick-card { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: #f4f8fc; border: 1.5px solid #c9d8ea; }
.parent-quick-title { margin: 0 0 6px; font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.parent-quick-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.done-summary:empty { display: none; }
.done-summary { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; line-height: 1.45; }
.done-summary.is-complete { background: #e8f6ef; border: 1.5px solid #1f8a5b; color: #14532d; }
.done-summary.is-partial { background: #fff7e6; border: 1.5px solid #f2c15b; color: #5b3a00; }
.done-summary .btn { margin-top: 8px; }
.homework-extras-more { margin-top: 12px; }
.homework-extras-more > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 6px 12px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); font-weight: 700; color: var(--navy); }
.homework-extras-more[open] > summary { border-style: solid; margin-bottom: 10px; }
/* The Listen button shared a flex row with the sentence and was squeezed to
   one letter per line ("L/i/s/t/e/n") on a 375px phone. */
.key-idea-banner .btn-read-aloud { flex: 0 0 auto; white-space: nowrap; }
/* Tap-to-define vocab glossary — parity with the lesson engine's .obj-term popups.
   Math words in the notes/practice prose become dotted-underline buttons that open
   a simple EN/ES definition + illustration, exactly like the lessons. */
.obj-term {
  display: inline; margin: -6px 0; padding: 6px 2px; border: 0; background: none;
  touch-action: manipulation;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-thickness: 2px; text-underline-offset: 2px;
  text-decoration-color: var(--teal, #1fa6a2);
}
.obj-term:hover, .obj-term:focus-visible {
  text-decoration-style: solid; background: var(--teal-light, #dff2ee);
  border-radius: 4px; outline: none;
}
@keyframes objFadeIn { from { opacity: 0; } to { opacity: 1; } }
.obj-popup-backdrop {
  position: fixed; inset: 0; z-index: 1200; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(15, 23, 42, 0.55); animation: objFadeIn 0.15s ease;
}
.obj-popup-backdrop[hidden] { display: none; }
.obj-popup {
  position: relative; width: min(420px, 100%); max-height: 90vh;
  overflow-y: auto; background: var(--white, #fff);
  border-radius: var(--radius-lg, 22px);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
  padding: 26px 20px 20px; text-align: center; animation: objFadeIn 0.2s ease;
}
.obj-popup-close {
  position: absolute; top: 8px; right: 10px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: var(--cream, #f7f4ec);
  color: var(--navy, #12355b); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.obj-popup-close:hover { background: var(--teal-light, #dff2ee); }
.obj-popup-term { margin: 0 0 14px; color: var(--teal-ink, #0c6f6b); text-transform: capitalize; }
.obj-popup-translation {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px;
  padding: 10px 14px; background: var(--teal-light, #dff2ee); border-radius: var(--radius-md, 14px);
}
.obj-popup-translation[hidden] { display: none; }
.obj-popup-tr-label { font-weight: 700; color: var(--teal-ink, #0c6f6b); }
.obj-popup-tr-es { font-size: 1.1rem; font-weight: 600; color: var(--navy, #12355b); }
.obj-popup-def { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--navy, #12355b); }
.obj-popup-def-es { margin: 10px 0 0; font-style: italic; color: var(--muted, #5f6f80); }
.obj-popup-def-es[hidden] { display: none; }
.obj-popup-visual { margin: 14px 0 0; }
.obj-popup-visual[hidden] { display: none; }
.obj-popup-img { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto 10px; }
.obj-popup-example { margin: 0; font-weight: 600; color: var(--navy, #12355b); }
.obj-popup-example[hidden] { display: none; }
body.obj-popup-open { overflow: hidden; }

/* Family guided notes layout */
.family-welcome {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--white);
  border: none;
  padding: 28px 24px;
}
.welcome-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.welcome-emoji { font-size: 48px; line-height: 1; }
.welcome-tag {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-light);
  font-weight: 800;
}
.welcome-title-en, .welcome-title-es {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 800;
  line-height: 1.15;
}
.welcome-title-es { color: var(--amber); font-size: clamp(22px, 4.5vw, 30px); margin-top: 2px; }
.welcome-lesson { margin: 8px 0 0; font-size: 16px; color: var(--teal-light); font-weight: 600; }
.welcome-lead { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.family-welcome .back-link { color: var(--amber); margin: 0; }
.family-welcome .back-link:hover { color: var(--white); }

.bilingual-block, .bilingual-grid { display: flex; flex-direction: column; gap: 10px; }
.bilingual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .bilingual-grid { grid-template-columns: 1fr; }
}
.bilingual-col {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.lang-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-ink);
  margin-bottom: 6px;
}
/* The "ENGLISH" / "ESPAÑOL" column header only means something when both
   columns are on screen. In single-language mode it labelled the one column
   there is, which reads as a form field rather than a paragraph. */
body:not(.lang-mode-bilingual) .lang-label { display: none; }
.lang-en { margin: 0 0 6px; }
/* Spanish is a primary language for our families: keep it fully legible, not a faded subtitle. */
.lang-es { margin: 0; color: var(--ink); font-style: normal; }
.step-badge .lang-en, .step-badge .lang-es { color: inherit; }
.lang-en + .lang-es, .worked-step .lang-es { padding-left: 10px; border-left: 3px solid var(--teal); }
.welcome-lead .lang-es { color: rgba(255, 255, 255, 0.94); border-left: 3px solid var(--amber); padding-left: 10px; display: inline-block; margin-top: 6px; }
.learning-big { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.5; }
.learning-words { margin-top: 12px; }
.learning-words-label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
}
.learning-word-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.learning-word-chips li {
  padding: 5px 9px;
  border: 1px solid #b8ddd8;
  border-radius: 999px;
  background: var(--teal-light);
  color: var(--teal-ink);
  font-size: 12px;
  font-weight: 700;
}

.guided-section { scroll-margin-top: 16px; }
.section-learn { border-left: 4px solid var(--teal); }
.section-visual { border-left: 4px solid var(--amber); }
.section-together { border-left: 4px solid #5b8def; }
.section-vocab { border-left: 4px solid var(--coral); }
.section-stuck { border-left: 4px solid #9b59b6; }
.section-quick-intro { border-left: 4px solid var(--success); }
.quick-check-time {
  background: var(--amber-light);
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 15px;
}
.section-celebrate {
  border-left: 4px solid var(--amber);
  background: linear-gradient(180deg, var(--amber-light), var(--white));
  text-align: center;
}

.concept-visual-wrap { margin: 12px 0 16px; overflow-x: auto; }
.concept-svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.concept-fallback-visual { display: flex; flex-direction: column; gap: 8px; }
.concept-fallback-step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px;
}
.step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: var(--white);
  flex-shrink: 0;
}
.step-color-1 .step-dot, .step-color-1.step-badge, .step-color-1.guided-step-num { background: #5b8def; }
.step-color-2 .step-dot, .step-color-2.step-badge, .step-color-2.guided-step-num { background: var(--success); }
.step-color-3 .step-dot, .step-color-3.step-badge, .step-color-3.guided-step-num { background: var(--amber); color: var(--navy); }
.step-color-4 .step-dot, .step-color-4.step-badge, .step-color-4.guided-step-num { background: var(--coral); }

.concept-quick-wrap {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfdff;
}
.concept-quick-title {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
}
.concept-quick-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.concept-quick-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  padding: 9px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy);
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}
.concept-quick-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -9px;
  z-index: 1;
  color: var(--teal-ink);
  font-size: 16px;
}
.concept-quick-icon { font-size: 24px; line-height: 1; margin-bottom: 5px; }
.concept-quick-step .lang-es { color: var(--muted); font-size: 11px; }

.key-idea-banner {
  background: var(--teal-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #b8ddd8;
}
.key-idea-banner p { margin: 0 0 6px; font-size: 14.5px; }
.key-idea-banner p:last-child { margin-bottom: 0; }

.guided-steps, .together-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guided-step, .together-step {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--white);
}
.guided-step { padding: 16px; }
.guided-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.guided-step-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.guided-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 12px;
  background: var(--cream);
  font-size: 22px;
}
.step-cue-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}
.step-cue-label .lang-en, .step-cue-label .lang-es { display: inline; margin: 0; }
.step-cue-label .lang-es::before { content: " / "; color: var(--muted); }
.guided-step-head .step-badge { margin: 0; }
.guided-step .step-lead { font-size: 16px; font-weight: 700; line-height: 1.45; }
.step-detail {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 9px;
}
.step-detail summary {
  cursor: pointer;
  color: var(--teal-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}
.step-detail p { margin-top: 8px; color: var(--ink); font-weight: 400; }
.step-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  padding: 3px 8px;
  border-radius: 99px;
  margin-bottom: 8px;
}
.guided-step p, .together-step p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; }
.step-hint {
  margin: 8px 0 0 !important;
  padding: 8px 10px;
  background: var(--hint-bg);
  border-radius: var(--radius-sm);
  font-size: 13px !important;
  color: var(--hint);
}

.watch-for-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.watch-for-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; background: var(--cream); border-radius: var(--radius-sm);
}
.watch-icon { font-size: 20px; flex-shrink: 0; }

@media (max-width: 560px) {
  .concept-quick-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concept-quick-step:nth-child(2)::after { display: none; }
}

@media print {
  .concept-quick-path { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step-detail > summary { display: none; }
  .step-detail[open] > summary ~ *, .step-detail > * { display: block; }
}

.try-scenario { font-size: 15px; font-weight: 600; color: var(--navy); margin: 0 0 8px; }
.try-together-note { font-size: 14px; margin: 0 0 14px; color: var(--muted); }

.stuck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
@media (max-width: 640px) { .stuck-grid { grid-template-columns: 1fr; } }
.stuck-panel {
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border: 1px solid var(--line);
}
.stuck-say { background: var(--success-bg); border-color: var(--success); }
.stuck-dont { background: var(--error-bg); border-color: var(--error); }
.stuck-heading { margin: 0 0 10px; font-family: var(--font-display); font-size: 14px; color: var(--navy); }
.stuck-panel ul { margin: 0; padding-left: 16px; }
.stuck-panel li { margin-bottom: 10px; font-size: 14px; }
.stuck-panel li p { margin: 0 0 4px; }
.stuck-footer { font-size: 14px; color: var(--muted); margin: 0; }

.celebrate-text { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.celebrate-sub { font-size: 14px; margin: 0; }

.problems-container .problem-section { border-left: 4px solid var(--teal); }
/* No ::after suffix here — badges already carry their own bilingual label
   ("Warm-up / Calentamiento 1"), so appending " / Repaso" produced
   "Warm-up / Calentamiento 1 / Repaso" on every problem. */

/* Tabbed homework layout */
.homework-tabs-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Sticky TOP chrome: tab bar + progress row */
/* ONE TAB-BAR STYLESHEET.
   There were two, ~1,200 lines apart, describing incompatible bars — the first
   a wrapping grid of five-per-row cards, the second an "Apple-grade floating
   pill" scroller that overrode ~20 properties with !important and left the
   first one's non-important flex-basis and flex-wrap:wrap standing. What a phone rendered was neither: three ragged rows, 125px tall,
   half the tabs in the muted grey the first sheet used for INACTIVE and the
   second for nothing, so five real destinations read as disabled. */
.homework-tab-chrome {
  position: sticky;
  top: 0;
  z-index: 1001;
  padding: 10px 0 0;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.homework-tab-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.homework-tab-panels { min-height: 200px; }
.tab-panel-inner[hidden] { display: none !important; }
.tab-panel-inner:not([hidden]) { display: block; }

/* Six stops fit one row at every width this page is read at, so the bar is a
   grid and never scrolls, wraps or hides a stop behind a fade. */
.homework-tab-bar {
  display: grid;
  /* Six numbered stops, then the photobooth sized to its own content — it is
     beside Done, not one more equal share of tonight's path. */
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 4px;
  padding: 0 0 8px;
}
.homework-tab-extra {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: 7px 10px 6px;
  margin-left: 6px;
  border: 1.5px dashed var(--teal);
  border-radius: var(--radius-sm);
  background: var(--teal-light);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--teal-ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* A rule between the path and the tool, so the camera does not read as stop 7. */
.homework-tab-extra::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  bottom: 10px;
  border-left: 1px solid var(--line);
}
.homework-tab-extra:hover { background: var(--white); }
.homework-tab-extra:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.homework-tab-extra.is-active {
  background: var(--teal);
  border-style: solid;
  border-color: var(--teal);
  color: var(--white);
}
.tab-extra-blurb {
  display: block;
  max-width: 132px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  opacity: .85;
}
.tab-extra-blurb .lang-en + .lang-es::before { content: none; }
.homework-tab-extra-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 8px;
  padding: 7px 10px;
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--teal-light);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
}
.homework-tab-extra-note strong { color: var(--teal-ink); }

@media (max-width: 720px) {
  /* The camera gets its own full-width row rather than a 40px sliver next to
     six stops. Still beside Done — directly under it, and out of the numbers. */
  .homework-tab-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .homework-tab-extra {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin-left: 0;
    margin-top: 4px;
  }
  .homework-tab-extra::before { display: none; }
  /* In the row layout the label is a shrinkable flex item, and at 390px it
     shrank until "Photobooth" broke mid-word ("Photobo / oth"). */
  .homework-tab-extra .tab-label { flex: none; white-space: nowrap; }
  .tab-extra-blurb { max-width: none; text-align: left; }
}
.homework-tab-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-height: 62px;
  padding: 7px 2px 6px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  /* --ink, not --muted: an inactive stop is somewhere you have not been yet,
     not somewhere you are barred from. The old grey read as disabled. */
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.homework-tab-btn:hover { background: var(--teal-light); border-color: var(--teal); }
.homework-tab-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.homework-tab-btn.is-active {
  background: var(--teal-ink);
  border-color: var(--teal-ink);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(31, 166, 162, .30);
}
.tab-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--line);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 800;
}
.homework-tab-btn.is-active .tab-step { background: rgba(255, 255, 255, .28); color: var(--white); }
/* The tick replaces the step number once a stop has been opened, in place, so
   "what have we done" costs no extra row. */
.homework-tab-btn.is-done .tab-step { background: var(--teal); color: var(--white); font-size: 0; }
.homework-tab-btn.is-done .tab-step::after { content: "✓"; font-size: 11px; }
.tab-icon { font-size: 17px; line-height: 1; }
.tab-label { display: block; text-align: center; }
.tab-es { font-size: 11px; font-weight: 600; }
.tab-min { font-size: 10px; font-weight: 600; opacity: .72; }
.tab-done { display: none; }
body.lang-mode-es .tab-en { display: none; }
body:not(.lang-mode-es) .tab-es { display: none; }

/* The hairline that used to be a whole second navigation. */
.homework-tab-track {
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.homework-tab-track-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--teal);
  transition: width .35s ease;
}

@media (max-width: 560px) {
  .homework-tab-btn { min-height: 56px; padding: 6px 1px 5px; font-size: 11px; }
  .tab-icon { font-size: 15px; }
  /* Minutes are the first thing to go: the stop number, the name and the tick
     all still fit, and the hero states the total. */
  .tab-min { display: none; }
  /* A stop's name is one word, and a sixth of a phone is narrower than the
     longest of them: "Together" broke mid-word and set "Togeth / er" under the
     handshake. The name shrinks to fit its column rather than splitting — it
     is the label the family taps, so it has to read as a word. */
  .homework-tab-btn .tab-label { white-space: nowrap; }
  .homework-tab-btn .tab-en, .homework-tab-btn .tab-es { font-size: 10px; }
}
@media (max-width: 400px) {
  .homework-tab-btn .tab-en, .homework-tab-btn .tab-es { font-size: 9.5px; }
}

.help-pop-btn {
  margin: 8px 0;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px dashed var(--teal);
  border-radius: var(--radius-sm);
  background: var(--teal-light);
  color: var(--navy);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.help-pop-btn:hover { background: #c8ebe8; }
.tab-help-row { margin-top: 12px; }
.help-topic-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.card-ish { margin-top: 16px; padding: 16px; background: var(--cream); border-radius: var(--radius-sm); border: 1px solid var(--line); }

.help-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(18,53,91,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.help-modal-overlay[hidden] { display: none !important; }
.help-modal {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  position: relative;
}
.help-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--cream); cursor: pointer; font-size: 18px;
}
.help-modal-title { margin: 0 32px 12px 0; font-family: var(--font-display); color: var(--navy); font-size: 18px; }
.help-modal-body { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
body.help-modal-open { overflow: hidden; }

/* Visual aid + sentence frame inside help popups */
.help-modal-visual {
  margin: 0 0 14px; padding: 10px; border-radius: var(--radius-sm);
  background: var(--cream); border: 1px solid var(--line); text-align: center;
}
.help-modal-visual[hidden] { display: none !important; }
.help-modal-visual svg { max-width: 100%; height: auto; }
.help-modal-frame {
  display: flex; flex-direction: column; gap: 4px;
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--teal-light); border-left: 4px solid var(--teal);
  border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5;
}
.help-modal-frame[hidden] { display: none !important; }
.help-frame-tag { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--teal-ink); }
.help-frame-es { color: var(--muted); }

/* Guided "Try together" fill-in spaces + step actions */
.together-fill { margin: 10px 0 6px; }
.together-fill-label { display: block; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.together-fill-input {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 2px dashed var(--teal); border-radius: var(--radius-sm);
  background: #fffef8; font-size: 15px; line-height: 1.5; resize: vertical;
}
.together-fill-input:focus { outline: none; border-style: solid; border-color: var(--navy); }
.together-step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Compact "Try Together" steps: tighter padding, inline action buttons, single-row input. */
.together-steps { gap: 8px; }
.together-step--compact { padding: 9px 11px; }
.together-step--compact .together-step-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.together-step--compact .step-badge { margin-bottom: 0; }
.together-step--compact .together-step-actions { margin-top: 0; }
.together-step--compact p { margin: 6px 0 0; font-size: 14px; }
.together-step--compact .together-fill { margin: 7px 0 0; }
.together-step--compact .together-fill-input { min-height: 40px; }

/* Graduated practice ladder under the guided steps. */
.together-ladder { margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--line); }
.ladder-title { font-family: var(--font-display); font-size: 16px; margin: 0 0 4px; color: var(--navy); }
.ladder-note { font-size: 13px; margin: 0 0 12px; }
.ladder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: ladder; }
.ladder-item { border: 1px solid var(--line); border-left: 4px solid #5b8def; border-radius: var(--radius-sm); padding: 9px 11px; background: var(--white); }
.ladder-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ladder-stars { color: #f5a623; font-size: 13px; letter-spacing: 1px; }
.ladder-tier { font-family: var(--font-display); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--navy); }
.ladder-q { margin: 0 0 8px; font-size: 14.5px; line-height: 1.4; }
.ladder-choices { margin: 0 0 6px; display: flex; flex-direction: column; gap: 6px; }
.ladder-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: 14.5px; line-height: 1.35; cursor: pointer; }
.ladder-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ladder-choice:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }
.ladder-choice-letter { flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; background: var(--hint-bg); color: var(--navy); }
.ladder-choice.is-correct { border-color: #1f8a5b; background: #e8f6ef; }
.ladder-choice.is-correct .ladder-choice-letter { background: #1f8a5b; color: #fff; }
.ladder-choice.is-incorrect { border-color: #c2410c; background: #fff1ea; }
.ladder-feedback { margin: 0; font-size: 13.5px; line-height: 1.4; }
.ladder-feedback:empty { display: none; }
.ladder-feedback.is-correct { color: #146c46; }
.ladder-feedback.is-incorrect { color: #9a3412; }
.ladder-input { width: 100%; box-sizing: border-box; font-family: inherit; resize: vertical; padding: 7px 10px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); font-size: 14px; }
.ladder-input:focus { outline: none; border-style: solid; border-color: var(--navy); }
/* Answer reveals are FAMILY-VISIBLE (2026-10-02): a parent checking the work
   at the kitchen table is this page's audience, so every ladder item carries
   a closed <details> they can open. They used to be display:none unless the
   device was in teacher mode, which left families with no way to check. */
.ladder-answer { display: block; margin-top: 7px; }
.ladder-answer summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.ladder-answer-text { margin: 6px 0 0; padding: 8px 10px; background: var(--hint-bg); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--ink); }

/* "More practice" accordion in the Check tab */
/* Tiered practice sections (warm-up first, then a harder challenge set) */
.practice-tier { margin: 0 0 40px; }
.practice-tier + .practice-tier { margin-top: 0; padding-top: 32px; border-top: 2px solid var(--line); }
.practice-tier-head {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  padding: 12px 16px; border-radius: var(--radius-md);
}
.practice-tier-warmup .practice-tier-head { background: var(--teal-light); }
.practice-tier-challenge .practice-tier-head { background: var(--amber-light, #fdf3dd); }
.practice-tier-badge {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff;
}
.practice-tier-badge.tier-warmup { background: var(--teal-ink); }
.practice-tier-badge.tier-challenge { background: var(--amber-strong, #d99a1c); }
.practice-tier-titles { min-width: 0; }
.practice-tier-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  color: var(--navy); font-size: clamp(1.02rem, 2.4vw, 1.2rem);
}
.practice-tier-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted, #5f6f80); }

/* Math Workbench tab */
.section-workbench .workbench-openrow { margin: 4px 0 12px; }
.workbench-frame-wrap {
  border: 2px solid var(--teal); border-radius: var(--radius-md); overflow: hidden;
  background: var(--white);
}
.workbench-frame, .arcade-frame { display: block; width: 100%; height: 72vh; min-height: 480px; border: 0; }

.more-practice {
  margin-top: 20px; border: 2px solid var(--teal); border-radius: var(--radius-md);
  background: var(--teal-light); overflow: hidden;
}
.more-practice > summary {
  cursor: pointer; list-style: none; padding: 14px 18px;
  font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: 16px;
}
.more-practice > summary::-webkit-details-marker { display: none; }
.more-practice[open] > summary { border-bottom: 1px solid var(--line); background: var(--white); }
.more-practice-note { padding: 12px 18px 0; font-size: 13px; }
.more-practice-container { padding: 8px 14px 14px; }

.external-resource-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ai-lab-cta {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 16px;
  border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff; text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.ai-lab-cta:hover { filter: brightness(1.06); text-decoration: none; }
.workbench-cta { background: linear-gradient(135deg, #5b8def, var(--teal)); }
.ai-lab-emoji { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.ai-lab-text { flex: 1 1 auto; font-size: 14px; line-height: 1.45; }
.ai-lab-text .lang-es { color: rgba(255,255,255,0.94); border-left-color: var(--amber); }
.ai-lab-arrow { font-size: 22px; font-weight: 800; flex: 0 0 auto; }
.external-resource-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--cream); text-decoration: none; color: inherit;
}
.external-resource-link:hover { border-color: var(--teal); background: var(--teal-light); text-decoration: none; }
.ext-source { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--teal-ink); }
.ext-title-en { font-weight: 700; color: var(--navy); }
.ext-title-es { font-size: 13px; color: var(--muted); }
.section-more { border-left: 4px solid #5b8def; }
.section-play { border-left: 4px solid #e67e22; }

.hw-game { padding: 8px 0; }
.hw-game-title { margin: 0 0 8px; font-family: var(--font-display); color: var(--navy); }
.hw-game-coach { font-size: 14px; margin-bottom: 12px; }
.hw-game-score { font-weight: 700; color: var(--teal); margin-bottom: 8px; }
.hw-game-question { font-size: 17px; font-weight: 700; color: var(--navy); margin: 12px 0; }
.hw-game-choices { display: flex; flex-direction: column; gap: 8px; }
.hw-game-choice-btn {
  min-height: 48px; padding: 12px 16px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white);
  font-size: 15px; font-weight: 600; cursor: pointer; text-align: left;
}
.hw-game-choice-btn.correct { border-color: var(--success); background: var(--success-bg); }
.hw-game-choice-btn.incorrect { border-color: var(--error); background: var(--error-bg); }
.hw-game-feedback { margin-top: 12px; font-weight: 700; min-height: 1.5em; }
.hw-game-feedback.success { color: var(--success); }
.hw-game-feedback.error { color: var(--error); }
.hw-game-buckets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
@media (max-width: 640px) { .hw-game-buckets { grid-template-columns: 1fr; } }
.hw-game-bucket { border: 2px dashed var(--line); border-radius: var(--radius-sm); padding: 10px; min-height: 80px; }
.hw-game-bucket-label { font-size: 12px; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.hw-game-pile { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--cream); border-radius: var(--radius-sm); margin-bottom: 12px; }
.hw-game-card {
  padding: 10px 14px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: grab; font-size: 13px; font-weight: 600;
  min-height: 44px; display: flex; align-items: center;
}
.problem-hint-row { margin: 8px 0 12px; }

/* Language mode overrides */
body.lang-mode-en .lang-es,
body.lang-mode-en .welcome-title-es,
body.lang-mode-en .tab-es,
body.lang-mode-en .vocab-es,
body.lang-mode-en .vocab-def-es,
body.lang-mode-en .ext-title-es,
body.lang-mode-en [lang="es"],
body.lang-mode-en .bilingual-col.lang-es {
  display: none !important;
}

/* A label goes with its value. The glossary popup's translation row is
   "Español:" + a <span lang="es"> holding the term, so the blanket [lang="es"]
   rule above hid the term and left the chip reading "ESPAÑOL:" with nothing
   after it on every vocabulary word in English mode. Hide the whole row. */
body.lang-mode-en .obj-popup-translation {
  display: none !important;
}

/* Same row, same reason, second way in: openPopup() sets .hidden on it for a
   term that carries no Spanish at all, and the later .obj-popup-translation
   rule declares display:inline-flex !important, which outranks a plain
   [hidden]. Without this the empty chip comes back for those terms. */
.obj-popup-translation[hidden] {
  display: none !important;
}

body.lang-mode-es .lang-en,
body.lang-mode-es .welcome-title-en,
body.lang-mode-es .tab-en,
body.lang-mode-es .vocab-def,
body.lang-mode-es .ext-title-en,
body.lang-mode-es .learning-big:not([lang="es"]),
body.lang-mode-es .learning-sub:not([lang="es"]),
body.lang-mode-es .bilingual-col.lang-en {
  display: none !important;
}

body.lang-mode-en .bilingual-grid,
body.lang-mode-es .bilingual-grid {
  grid-template-columns: 1fr !important;
}

/* Premium language selector card styles */
.lang-selector-card {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lang-selector-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--white);
}
.lang-selector-buttons {
  display: flex;
  gap: 8px;
}
.lang-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
  /* 44px min height keeps these reachable as touch targets — families use phones. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--white);
}
.lang-toggle-btn.active {
  background: var(--teal-ink);
  border-color: var(--teal);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(31, 166, 162, 0.35);
}
@media (max-width: 640px) {
  .lang-selector-card {
    flex-direction: column;
    align-items: stretch;
  }
  .lang-selector-buttons {
    flex-direction: column;
  }
  .lang-toggle-btn {
    width: 100%;
    text-align: center;
  }
}

/* Parent Sign-off container styling */
.parent-signoff-container {
  margin-top: 24px;
  padding: 24px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(18, 53, 91, 0.06);
  text-align: left;
}
.signoff-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--navy);
  font-weight: 800;
  border-bottom: 2px solid var(--teal-light);
  padding-bottom: 8px;
}
.signoff-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.signoff-field label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.checkbox-field {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}
.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--teal);
  cursor: pointer;
}
.signoff-field input[type="text"],
.signoff-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--cream);
  color: var(--ink);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.signoff-field input[type="text"]:focus,
.signoff-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--white);
}
.signoff-submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 800;
  background: var(--teal-ink);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
.signoff-submit-btn:disabled {
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}
.signoff-submit-btn:not(:disabled):hover {
  background: var(--navy);
  box-shadow: 0 4px 15px rgba(18, 53, 91, 0.15);
}

/* Certificate View */
.certificate-badge {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--teal-light);
  border: 2px solid var(--teal);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}
.cert-check {
  font-size: 40px;
  line-height: 1;
}
.cert-info {
  flex-grow: 1;
}
.cert-header {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--teal-ink);
  font-weight: 800;
}
.cert-detail {
  font-size: 17px;
  color: var(--navy);
  margin: 0 0 2px;
}
.cert-date {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.cert-note-box {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--white);
  border-left: 3px solid var(--coral);
  border-radius: var(--radius-xs);
  text-align: left;
}
.cert-note-title {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--coral);
}
.cert-note-content {
  margin: 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink);
}
.cert-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.print-cert-btn {
  background: var(--navy);
  color: var(--white);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.print-cert-btn:hover {
  background: var(--teal-ink);
}
.edit-signoff-btn {
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}
.edit-signoff-btn:hover {
  color: var(--coral);
}

/* Print Certificate specific layout */
.print-only-certificate {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media print {
  .homework-tab-chrome, .homework-tab-bar, .bottom-status-bar, .help-modal-overlay, .print-all-btn, .parent-signoff-container { display: none !important; }
  .tab-panel-inner[hidden] { display: block !important; page-break-inside: avoid; }
  /* Printing un-hides every panel, but the games are screen-only: an embedded
     arcade iframe, a memory grid, a live quiz. On paper they were blank or
     meaningless pages in the middle of the packet. The workbench is screen-only
     for the same reason and now lives inside Together, so it is hidden by its
     own class rather than by a panel id that no longer exists — "arcade" and
     "workbench" were tabs, and their selectors outlived them here. */
  [data-tab-panel="play"],
  .workbench-drawer,
  .hw-stuck-fab,
  .hw-help-drawer { display: none !important; }
  body { padding-bottom: 0; }
  /* Browsers drop background colours when printing. Several distinctions on this
     sheet are carried by fill alone — the EN/ES columns, the highlighted worked
     step, and above all the green "say this" vs red "don't say this" coaching
     panels, which print as two identical white boxes without this. */
  .bilingual-col, .worked-step, .worked-step.highlighted,
  .stuck-say, .stuck-dont, .watch-for-list, .watch-for,
  .practice-tier-head, .key-idea-banner {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .print-only-certificate.is-signed {
    display: block !important;
    margin-top: 40px;
    padding: 24px;
    border: 4px double var(--navy) !important;
    background: #ffffff !important;
    color: #000000 !important;
    text-align: center;
    page-break-inside: avoid;
  }
  .print-cert-header h2 {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--muted) !important;
    margin: 0 0 6px;
  }
  .print-cert-header h3 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--navy) !important;
    margin: 0 0 20px;
  }
  .print-cert-body p {
    font-size: 15px;
    color: var(--ink) !important;
    margin-bottom: 30px;
  }
  .print-cert-signatures {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
  }
  .print-sig-block {
    width: 40%;
    text-align: center;
  }
  .sig-line {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy) !important;
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 6px;
    margin-bottom: 6px;
    min-height: 28px;
  }
  .sig-label {
    font-size: 11px;
    color: var(--muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .print-cert-note {
    text-align: left;
    background: #f9f9f9;
    padding: 12px 16px;
    border-left: 4px solid var(--coral);
    border-radius: 4px;
  }
  .print-cert-note .note-heading {
    font-size: 12px;
    color: var(--coral) !important;
    margin: 0 0 4px;
  }
  .print-cert-note .note-body {
    font-size: 13.5px;
    font-style: italic;
    margin: 0;
  }
}

/* Gamified Tab Bar & Flow Navigation */
.tab-step-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 99px;
  background: rgba(18, 53, 91, 0.08);
  color: var(--navy);
  margin-bottom: 2px;
}
.homework-tab-btn.is-active .tab-step-badge {
  background: rgba(255, 255, 255, 0.25);
  color: var(--white);
}
.tab-badge-star {
  font-size: 11px;
  color: var(--amber);
  min-height: 12px;
  line-height: 1;
}
.tab-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tab-progress-track {
  width: 80px;
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.tab-progress-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 99px;
  transition: width 0.3s ease;
}
.tab-flow-nav {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
.flow-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 800;
  border-radius: var(--radius-md);
  background: var(--teal-ink);
  color: var(--white);
  box-shadow: 0 3px 12px rgba(12, 111, 107, 0.22);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: none;
}
.flow-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(12, 111, 107, 0.35);
}

/* Vocab Match & Master Challenge */
.vocab-game-shell {
  background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
  border: 2px solid #38bdf8;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.12);
}
.vocab-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vocab-game-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vocab-game-icon {
  font-size: 24px;
  line-height: 1;
}
.vocab-game-h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
}
.vocab-game-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.vocab-game-counter {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  background: var(--white);
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--navy);
}
.vocab-match-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .vocab-match-board {
    grid-template-columns: 1fr;
  }
}
.vocab-match-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vocab-match-chip {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(18, 53, 91, 0.04);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vocab-match-chip:hover:not(:disabled) {
  border-color: var(--teal);
  transform: translateY(-1px);
}
.vocab-match-chip.is-selected {
  border-color: var(--amber);
  background: var(--amber-light);
  box-shadow: 0 0 0 3px rgba(242, 193, 91, 0.4);
}
.vocab-match-chip.is-matched {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success);
  opacity: 0.85;
  cursor: default;
}
.vocab-match-chip.is-mismatch {
  border-color: var(--error);
  background: var(--error-bg);
  animation: chipShake 0.4s ease;
}
@keyframes chipShake {
  0%, 100% { transform: translateX(0); }
  25%, 75% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
}
.vocab-game-win {
  margin-top: 14px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  border: 1.5px solid var(--success);
}
.win-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.win-emoji { font-size: 28px; }
.win-text strong { color: var(--success); font-size: 14.5px; display: block; }
.win-text p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

/* Vocab Card Controls */
.vocab-card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}
.vocab-speak-btn, .vocab-master-toggle {
  background: rgba(18, 53, 91, 0.05);
  border: 1px solid rgba(18, 53, 91, 0.12);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy, #12355b);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}
.vocab-speak-btn:hover {
  background: #e6fffa;
  border-color: #1fa6a2;
  color: #0d766e;
  transform: scale(1.03);
}
.vocab-master-toggle:hover {
  background: rgba(18, 53, 91, 0.09);
  transform: scale(1.03);
}
.vocab-master-toggle.is-mastered {
  color: #b45309;
  background: #fef3c7;
  border-color: #f59e0b;
}
.vocab-card-back-actions {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* Skill Power-Up Challenge */
.section-powerup {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #cbd5e1;
  margin-top: 20px;
}
.powerup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.powerup-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #7c3aed;
  background: #ede9fe;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}
.powerup-question {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
}
.powerup-badge-star {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  background: var(--amber-light);
  color: #b45309;
  border: 1px solid var(--amber);
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.powerup-badge-star.is-unlocked {
  background: #ecfdf5;
  color: #047857;
  border-color: #10b981;
}
.powerup-choices-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.powerup-choice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  transition: all 0.15s ease;
}
.powerup-choice-btn:hover:not(:disabled) {
  border-color: #7c3aed;
  background: #faf5ff;
}
.powerup-letter {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.powerup-choice-btn.is-correct {
  border-color: var(--success);
  background: var(--success-bg);
}
.powerup-choice-btn.is-correct .powerup-letter {
  background: var(--success);
  color: var(--white);
}
.powerup-choice-btn.is-wrong {
  border-color: var(--error);
  background: var(--error-bg);
  animation: chipShake 0.4s ease;
}
.powerup-feedback-box {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.4;
}
.powerup-feedback-box.is-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
}
.powerup-feedback-box.is-hint {
  background: var(--hint-bg);
  color: var(--hint);
  border: 1px solid var(--amber);
}

/* Interactive Scratchpad */
.interactive-scratchpad {
  background: var(--white);
  border: 2px solid var(--teal);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 16px 0;
  box-shadow: 0 4px 16px rgba(31, 166, 162, 0.15);
}
.scratchpad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.scratchpad-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--navy);
}
.scratchpad-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.color-palette {
  display: flex;
  gap: 6px;
}
.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.color-dot.is-active {
  transform: scale(1.25);
  border-color: #000;
}
.tool-btn.is-active {
  background: var(--teal);
  color: var(--white);
}
.scratchpad-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}
.scratchpad-canvas-wrap {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #ffffff;
}
.scratchpad-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.scratchpad-inline-toggle {
  margin: 14px 0;
}
.scratchpad-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Live Streak & Goal Reached Banners */
.live-streak-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1.5px solid #fb923c;
  border-radius: 99px;
  padding: 6px 14px;
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #9a3412;
  animation: bannerPop 0.3s ease;
}
@keyframes bannerPop {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.goal-reached-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%);
  border: 2px solid #eab308;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 12px 0 16px;
  box-shadow: 0 4px 16px rgba(234, 179, 8, 0.18);
  flex-wrap: wrap;
}
.goal-icon { font-size: 30px; }
.goal-text strong { color: #854d0e; font-size: 15.5px; display: block; }
.goal-text p { margin: 2px 0 0; font-size: 12.5px; color: #713f12; }

/* Celebration & Achievements */
.high-five-banner {
  text-align: center;
  margin: 18px 0;
}
.btn-high-five {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: var(--white);
  border: none;
  border-radius: 99px;
  padding: 10px 24px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-high-five:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.45);
}
.high-five-emoji { font-size: 24px; }
.high-five-labels { display: flex; flex-direction: column; text-align: left; }
.high-five-labels strong { font-size: 15px; line-height: 1.1; }
.high-five-labels small { font-size: 11px; opacity: 0.9; font-weight: 500; }
.achievement-shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0;
}
@media (max-width: 600px) {
  .achievement-shelf { grid-template-columns: repeat(2, 1fr); }
}
.achievement-badge {
  background: var(--bg);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0.55;
  transition: all 0.3s ease;
}
.achievement-badge.is-unlocked {
  opacity: 1;
  border-style: solid;
  border-color: var(--amber);
  background: #fffbeb;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}
.achieve-icon { font-size: 22px; line-height: 1; }
.achieve-name { font-family: var(--font-display); font-size: 11px; font-weight: 800; color: var(--navy); }


/* ==========================================================================
   CLEAN, CALM, PARENT-FRIENDLY AESTHETIC SYSTEM
   ========================================================================== */

/* Tranquil, modern color scheme & typography */
:root {
  --navy: #0f172a;
  --navy-light: #1e293b;
  --teal: #0f766e;
  --teal-ink: #0d5c75;
  --teal-light: #f0fdfa;
  --amber: #f59e0b;
  --amber-light: #fffbeb;
  --cream: #fbfbfa;
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.04), 0 4px 10px -2px rgba(15, 23, 42, 0.02);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.03);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
}

.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* Elegant, welcoming header */
header.homework-header,
.family-welcome {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 32px !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.12) !important;
  margin-bottom: 24px !important;
}
.welcome-tag {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
.welcome-title-en {
  font-size: clamp(24px, 4.5vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}
.welcome-title-es {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: clamp(18px, 3.5vw, 22px) !important;
}
.welcome-lesson {
  color: #38bdf8 !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  margin-top: 6px !important;
}

/* Cards & Content Shells */
.guided-section.card,
.card-ish {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow) !important;
  padding: 28px 32px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 600px) {
  .guided-section.card, .card-ish { padding: 20px !important; }
}

.section-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-top: 0 !important;
  letter-spacing: -0.01em !important;
}

/* Big Idea & Listen Pill */
.btn-listen-concept {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 99px !important;
  padding: 5px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: all 0.15s ease !important;
}
.btn-listen-concept:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

/* Parent Coaching Accordion Drawer */
.parent-coaching-drawer {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  margin: 20px 0 !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}
.parent-coaching-drawer[open] {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 24px -2px rgba(15, 23, 42, 0.05) !important;
}
.parent-coaching-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  list-style: none !important;
  user-select: none !important;
}
.parent-coaching-summary::-webkit-details-marker { display: none !important; }
.summary-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.summary-icon { font-size: 22px !important; }
.summary-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}
.summary-text strong {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.summary-text small {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin-top: 2px !important;
}
.summary-chevron {
  font-size: 16px !important;
  color: #94a3b8 !important;
  transition: transform 0.25s ease !important;
}
.parent-coaching-drawer[open] .summary-chevron {
  transform: rotate(180deg) !important;
}
.parent-coaching-content {
  padding: 0 20px 20px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Calmer Real-World & Misconception Styling */
.real-world-spotlight {
  background: #f0fdf4 !important;
  border: 1px solid #dcfce7 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: none !important;
  margin: 12px 0 0 !important;
}
.spotlight-badge {
  color: #15803d !important;
  background: #dcfce7 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.spotlight-title {
  color: #0f172a !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
}
.spotlight-text {
  color: #334155 !important;
  font-size: 13.5px !important;
}
.misconception-card {
  background: #fffbeb !important;
  border: 1px solid #fef3c7 !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin: 0 !important;
}
.mis-trap { color: #92400e !important; }
.parent-coach-tip {
  border-top: 1px dashed #fde68a !important;
  color: #78350f !important;
}

/* Math Talk Generator Calm Styling */
.math-talk-hub {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  padding: 20px 24px !important;
  margin: 20px 0 !important;
  box-shadow: var(--shadow-sm) !important;
}
.math-talk-badge {
  color: #0f766e !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}
.math-talk-q {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
.math-talk-follow {
  color: #64748b !important;
}

/* Flow Next Button */
.flow-next-btn {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  border-radius: 99px !important;
  padding: 10px 24px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
  transition: all 0.15s ease !important;
}
.flow-next-btn:hover {
  background: #1e293b !important;
  transform: translateY(-1px);
}

/* Clean Practice Problem Cards */
.problem-card {
  background: #ffffff !important;
  border: 1px solid #e8edf2 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow) !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
}
.problem-check-btn {
  background: #0f172a !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 99px !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}
.problem-check-btn:hover {
  background: #1e293b !important;
}

/* The bottom bar belongs to the Check stop. Its comment already SAID "hidden on
   non-practice tabs" and nothing hid it: it sat on all six stops, reporting
   "Progress: 0 / 6" and offering "Check All" beside a vocabulary flashcard or a
   memory game. body[data-active-tab] is stamped by switchHomeworkTab. */
.bottom-status-bar {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05) !important;
}
body[data-active-tab]:not([data-active-tab="check"]) .bottom-status-bar {
  display: none !important;
}

/* ==========================================================================
   VOCABULARY UNDERLINE & POPUP DEFINITION SYSTEM — CLEAN & TACTILE
   ========================================================================== */
.obj-term {
  display: inline !important;
  margin: 0 !important;
  padding: 1px 5px !important;
  border: none !important;
  background: rgba(15, 118, 110, 0.08) !important;
  color: #0f766e !important;
  font-weight: 600 !important;
  border-bottom: 2px dotted #0f766e !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  vertical-align: baseline !important;
}
.obj-term:hover, .obj-term:focus-visible {
  background: #0f766e !important;
  color: #ffffff !important;
  border-bottom-style: solid !important;
  outline: none !important;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.25) !important;
}
.obj-term:active {
  transform: scale(0.97) !important;
}

.obj-popup-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: objFadeIn 0.2s ease !important;
}
.obj-popup-backdrop:not([hidden]) {
  display: flex !important;
}
.obj-popup-backdrop[hidden] {
  display: none !important;
}
.obj-popup {
  position: relative !important;
  width: min(460px, 100%) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.3) !important;
  padding: 32px 24px 24px !important;
  text-align: center !important;
  animation: objFadeIn 0.2s ease !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}
.obj-popup-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
}
.obj-popup-close:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  transform: scale(1.05) !important;
}
.obj-popup-term {
  margin: 0 0 10px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  text-transform: capitalize !important;
  letter-spacing: -0.01em !important;
}
.obj-popup-translation {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto 16px !important;
  padding: 6px 14px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 99px !important;
}
.obj-popup-tr-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #166534 !important;
}
.obj-popup-tr-es {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #14532d !important;
}
.obj-popup-def {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #334155 !important;
  text-align: left !important;
}
.obj-popup-def-es {
  margin: 0 0 16px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  font-style: italic !important;
  text-align: left !important;
  padding-top: 8px !important;
  border-top: 1px dashed #e2e8f0 !important;
}
.obj-popup-visual {
  margin: 16px 0 0 !important;
  padding: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
}
.obj-popup-img {
  display: block !important;
  max-width: 220px !important;
  max-height: 160px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 10px !important;
  border-radius: 8px !important;
}
.obj-popup-example {
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  line-height: 1.4 !important;
}

/* ============================================================
   FAMILY MISSION SHELL — hero, progress rail, tab grouping.
   One warm identity for the whole page. Replaced three stacked navs
   (dark hero → "Tonight's Path" card → 10 equal tabs, ~700px before any
   mathematics) with hero → tabs+rail. New class names only (hw-hero*,
   hw-rail*, hw-quickplan*, fam-*): the generator's polish layer re-declares
   shared selectors and loads later, so these never collide with it.
   ============================================================ */
.hw-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 20px;
  padding: 30px 32px 26px;
  border-radius: 26px;
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(31,166,162,.30) 0%, rgba(18,53,91,0) 58%),
    linear-gradient(155deg, #143a63 0%, #10294a 62%, #0d2039 100%);
  color: #f4f8fc;
  box-shadow: 0 24px 60px -34px rgba(9,25,46,.9);
  isolation: isolate;
}
/* Soft warm glow, second light source. Purely decorative. */
.hw-hero-glow {
  position: absolute;
  inset: auto -12% -55% 46%;
  height: 300px;
  background: radial-gradient(closest-side, rgba(242,193,91,.30), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}
.hw-hero-body { position: relative; }
.hw-hero-kicker {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #d7e8f6;
}
.hw-hero-kicker-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  font-size: 13px;
}
.hw-hero-kicker .lang-es { color: #bcd6ea; }
.hw-hero-kicker .lang-en + .lang-es { border-left: 0; padding-left: 0; margin-top: 0; }
.hw-hero-head { display: flex; align-items: center; gap: 18px; }
.hw-hero-emoji {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 20px;
  font-size: 34px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.hw-hero-titles { min-width: 0; }
.hw-hero .welcome-title-en {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.02;
  color: #fff;
}
.hw-hero .welcome-title-es {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #f2c15b;
}
.hw-hero-lesson {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.hw-hero-lesson-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.hw-hero-lesson-meta { font-size: 13px; font-weight: 600; color: #9fc0da; letter-spacing: .02em; }
.hw-hero-lead { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #dce9f4; max-width: 62ch; }
.hw-hero-lead .lang-es { color: #dce9f4; }
.hw-hero-lead .lang-en + .lang-es {
  border-left: 2px solid rgba(242,193,91,.55);
  padding-left: 10px;
  margin-top: 6px;
}
.hw-hero-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.hw-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 13px;
  font-weight: 700;
  color: #e7f1fa;
}
.hw-stat .lang-es { color: #e7f1fa; }
.hw-stat .lang-en + .lang-es { border-left: 0; padding-left: 0; margin-top: 0; }
.hw-hero-controls { margin-top: 20px; }
.hw-hero .lang-selector-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 0;
  background: none;
  border: 0;
}
.hw-hero .lang-selector-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9fc0da;
}
.hw-hero .lang-selector-buttons {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.12);
}
.hw-hero .lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cfe1f1;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.hw-hero .lang-toggle-btn:hover { background: rgba(255,255,255,.10); color: #fff; }
.hw-hero .lang-toggle-btn.active {
  background: #f2c15b;
  color: #123055;
  box-shadow: 0 6px 16px -8px rgba(242,193,91,.9);
}
.hw-hero .lang-toggle-btn:focus-visible { outline: 3px solid #f2c15b; outline-offset: 2px; }

/* Route choice, inside the hero */
.hw-hero .hw-quickplan {
  margin-top: 18px;
  border: 1px dashed rgba(242,193,91,.5);
  border-radius: 16px;
  background: rgba(242,193,91,.09);
}
.hw-quickplan-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  color: #f6e6c4;
}
.hw-quickplan-summary::-webkit-details-marker { display: none; }
.hw-quickplan-summary .lang-en + .lang-es { border-left: 0; padding-left: 0; margin-top: 0; }
.hw-quickplan-chevron { margin-left: auto; transition: transform .2s ease; color: #f2c15b; }
.hw-quickplan[open] .hw-quickplan-chevron { transform: rotate(180deg); }
.hw-quickplan-lead { margin: 0; padding: 0 18px 8px; font-size: 13.5px; color: #cfe1f1; }
.hw-quickplan-steps { margin: 0; padding: 0 14px 4px; font-size: 14px; color: #e4eef7; list-style: none; }
.hw-quickplan-steps li { margin-bottom: 8px; }
.hw-quickplan-steps .lang-es, .hw-quickplan-note .lang-es { color: #e4eef7; }
/* Each step is a full-width tap target: this is the control a family reaches
   for one-handed, on a phone, while standing up. */
.hw-quickplan-step {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(242,193,91,.42);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: #e4eef7;
  font: inherit;
  font-size: 14px;
}
.hw-quickplan-step:hover { background: rgba(242,193,91,.16); border-color: rgba(242,193,91,.75); }
.hw-quickplan-step:focus-visible { outline: 3px solid #f2c15b; outline-offset: 2px; }
.hw-quickplan-min {
  flex: none;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 99px;
  background: #f2c15b;
  color: #12355b;
  font-weight: 800;
  font-size: 12.5px;
  text-align: center;
}
.hw-quickplan-what { flex: 1 1 auto; }
.hw-quickplan-go { flex: none; font-size: 12.5px; font-weight: 700; color: #f2c15b; }
@media (max-width: 560px) {
  /* The destination label wraps under the task rather than squeezing it. */
  .hw-quickplan-step { flex-wrap: wrap; }
  .hw-quickplan-go { width: 100%; padding-left: 64px; }
}
.hw-quickplan-note { margin: 0; padding: 8px 18px 15px; font-size: 13.5px; color: #cfe1f1; }

/* Where the plan just sent you. Outline only — a background change on an
   arbitrary target would fight whatever that element already paints. */
.hw-quickplan-flash {
  animation: hwQuickPlanFlash 2.6s ease-out 1;
  border-radius: 12px;
}
@keyframes hwQuickPlanFlash {
  0%, 55% { box-shadow: 0 0 0 3px #f2c15b, 0 0 0 9px rgba(242,193,91,.3); }
  100% { box-shadow: 0 0 0 3px rgba(242,193,91,0), 0 0 0 9px rgba(242,193,91,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hw-quickplan-flash { animation: none; box-shadow: 0 0 0 3px #f2c15b; }
}

@media (max-width: 700px) {
  .hw-hero { padding: 24px 20px 22px; border-radius: 20px; }
  .hw-hero-emoji { width: 52px; height: 52px; font-size: 27px; border-radius: 16px; }
  .hw-hero-head { gap: 13px; }
  .hw-hero .lang-selector-buttons { width: 100%; }
  .hw-hero .lang-toggle-btn { flex: 1; justify-content: center; padding: 8px 10px; }
}

/* ── "Stuck?" — help that floats over the stop you are on ───────────────── */
.hw-stuck-fab {
  position: fixed;
  right: 14px;
  /* Clear of the sticky status bar, whose real height the runtime measures into
     --hw-status-height. The Save/Resume launcher parks above this one. */
  bottom: calc(min(var(--hw-status-height, 104px), 150px) + 70px);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(18, 53, 91, .28);
  cursor: pointer;
}
.hw-stuck-fab:hover { background: var(--navy-light); }
.hw-stuck-fab:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.hw-stuck-fab-icon { font-size: 16px; line-height: 1; }

.hw-help-drawer { position: fixed; inset: 0; z-index: 1300; }
.hw-help-drawer[hidden] { display: none; }
.hw-help-drawer-scrim { position: absolute; inset: 0; background: rgba(18, 53, 91, .42); }
.hw-help-drawer-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(18, 53, 91, .26);
}
.hw-help-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--navy);
}
.hw-help-drawer-close {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
}
.hw-help-drawer-close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.hw-help-drawer-body { overflow-y: auto; padding: 14px 16px 28px; -webkit-overflow-scrolling: touch; }
.hw-help-drawer-body .guided-section.card { margin-bottom: 16px !important; }
body.hw-drawer-open { overflow: hidden; }
@media (min-width: 760px) {
  .hw-help-drawer-sheet {
    top: 0;
    left: auto;
    width: min(460px, 92vw);
    max-height: none;
    border-radius: 20px 0 0 20px;
  }
}

/* ── Math tools, as a drawer inside Together ─────────────────────────────── */
.workbench-drawer {
  margin-top: 18px;
  border: 1.5px solid var(--teal);
  border-radius: var(--radius-md);
  background: var(--teal-light);
  overflow: hidden;
}
.workbench-drawer-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.workbench-drawer-summary::-webkit-details-marker { display: none; }
.workbench-drawer-summary:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.workbench-drawer-icon { font-size: 22px; line-height: 1; }
.workbench-drawer-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.workbench-drawer-text strong { color: var(--navy); font-family: var(--font-display); font-size: 15px; }
.workbench-drawer-text small { color: var(--muted); font-size: 12.5px; }
.workbench-drawer-chevron { color: var(--teal-ink); transition: transform .2s ease; }
.workbench-drawer[open] .workbench-drawer-chevron { transform: rotate(180deg); }
.workbench-drawer-body { padding: 4px 16px 18px; background: #fff; }

/* ── Workbench and Quick Launch Styling ── */
.workbench-quick-launch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 18px 0;
}
.wb-launch-content { display: flex; align-items: center; gap: 14px; }
.wb-launch-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.wb-launch-text strong { display: block; color: var(--navy); font-size: 14.5px; margin-bottom: 2px; }
.wb-launch-text p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.4; }
.wb-launch-btn { flex-shrink: 0; white-space: nowrap; font-weight: 700; }
@media (max-width: 600px) {
  .workbench-quick-launch { flex-direction: column; align-items: flex-start; }
}

.wb-tool-bar {
  display: flex;
  gap: 8px;
  padding: 10px 0 14px;
  border-bottom: 1.5px solid var(--line);
  overflow-x: auto;
}
.wb-tool-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #f8fafc;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.wb-tool-tab:hover { background: #e2e8f0; }
.wb-tool-tab.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.tool-presets-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
}
.tool-presets-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
}
.wb-preset-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #94a3b8;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.wb-preset-btn:hover {
  background: var(--teal-light);
  border-color: var(--teal);
  color: var(--teal-ink);
}

.fraction-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.fraction-stage-canvas {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.fraction-row {
  display: flex;
  width: 100%;
  height: 38px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.frac-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  border-right: 1px solid rgba(255,255,255,.4);
  user-select: none;
}
.frac-tile:last-child { border-right: none; }
.tile-1 { background: #1e293b; }
.tile-2 { background: #0284c7; }
.tile-3 { background: #059669; }
.tile-4 { background: #d97706; }
.tile-6 { background: #7c3aed; }
.tile-8 { background: #dc2626; }
.tile-12 { background: #db2777; }

.tape-diagram-render {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.tape-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tape-label {
  min-width: 90px;
  font-weight: 800;
  font-size: 13px;
  color: var(--navy);
}
.tape-blocks {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tape-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 38px;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border: 2px solid rgba(0,0,0,.15);
}
.tape-block-a { background: #0b8f87; }
.tape-block-b { background: #ff775f; }

.dec-grid-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.dec-grid-table th {
  padding: 8px 6px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.dec-grid-table th small {
  font-weight: 500;
  opacity: .8;
  display: block;
}
.dec-grid-table td {
  padding: 6px;
  border: 1px solid #e2e8f0;
  text-align: center;
}
.dec-grid-table .dec-pt {
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  width: 20px;
  padding: 0 4px;
}
.dg-cell {
  width: 38px;
  height: 38px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  color: var(--navy);
}
.dg-cell:focus {
  outline: 3px solid var(--teal);
  border-color: var(--teal);
}

/* ============================================================
   Family Activity Corner — hands-on activity cards on the Together tab.
   ============================================================ */
.fam-act-corner {
  margin-top: 22px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(18,53,91,.05), 0 14px 34px -22px rgba(18,53,91,.5);
}
.fam-act-head { margin-bottom: 14px; }
.fam-act-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--coral-ink);
  background: var(--coral-light);
  border-radius: 999px;
  padding: 5px 12px;
}
.fam-act-lead { margin: 10px 0 0; font-size: 14px; color: var(--ink); }
.fam-act-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfdff;
  margin-bottom: 10px;
  overflow: hidden;
}
.fam-act-card[open] { border-color: var(--teal); }
.fam-act-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.fam-act-summary::-webkit-details-marker { display: none; }
.fam-act-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--teal-light);
  font-size: 19px;
}
.fam-act-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fam-act-titles strong { font-size: 15px; color: var(--ink); }
.fam-act-titles strong .lang-es { font-weight: 600; }
/* Compact header rows: suppress the global stacked-Spanish rule inside */
.fam-act-summary .lang-en + .lang-es { border-left: 0; padding-left: 0; margin-top: 1px; }
.fam-act-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.fam-act-chevron { margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.fam-act-card[open] .fam-act-chevron { transform: rotate(180deg); }
.fam-act-body { padding: 2px 16px 14px; }
.fam-act-steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.fam-act-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.fam-act-step:last-child { border-bottom: 0; }
.fam-act-step p { margin: 0; font-size: 14px; }
.fam-act-step-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  margin-top: 2px;
}
.fam-act-talk {
  background: var(--teal-light);
  border-left: 4px solid var(--teal);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
}
.fam-act-talk strong { display: block; margin-bottom: 4px; color: var(--teal-ink); }

/* ============================================================
   Family Game Break — Memory Flip + True/False Face-Off.
   ============================================================ */
.fam-game-break {
  margin-top: 22px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(18,53,91,.05), 0 14px 34px -22px rgba(18,53,91,.5);
}
.fam-game-head { margin-bottom: 14px; }
.fam-game-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #6b21a8;
  background: #f3e8ff;
  border-radius: 999px;
  padding: 5px 12px;
}
.fam-game-lead { margin: 10px 0 0; font-size: 14px; color: var(--ink); }
.fam-game-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfdff;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.fam-game-card:last-child { margin-bottom: 0; }
.fam-game-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.fam-game-h3 { margin: 0; font-size: 16.5px; color: var(--navy); }
.fam-game-h3 .lang-es { font-weight: 600; }
.fam-game-card .lang-en + .lang-es { border-left: 0; padding-left: 0; }
.fam-game-sub { margin: 8px 0 12px; font-size: 13.5px; color: var(--muted); }

/* Memory Flip */
.fam-memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fam-mem-card {
  position: relative;
  min-height: 76px;
  border: 2px solid var(--navy-light);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  cursor: pointer;
  padding: 6px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.fam-mem-card::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.85);
  font-size: 26px;
  font-weight: 800;
  font-family: var(--font-display);
}
.fam-mem-card:hover { transform: translateY(-2px); }
.fam-mem-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.fam-mem-face {
  display: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.fam-mem-card.is-up, .fam-mem-card.is-matched {
  background: #fff;
  border-color: var(--teal);
}
.fam-mem-card.is-up::before, .fam-mem-card.is-matched::before { content: none; }
.fam-mem-card.is-up .fam-mem-face, .fam-mem-card.is-matched .fam-mem-face {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
}
.fam-mem-card.is-matched {
  background: var(--success-bg);
  border-color: var(--success);
  cursor: default;
}
.fam-memory-status { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.fam-memory-win {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--success-bg);
  border-left: 4px solid var(--success);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

/* True/False Face-Off */
.fam-tf-turn { font-size: 13px; font-weight: 800; color: var(--teal-ink); margin-bottom: 6px; }
.fam-tf-statement {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
}
.fam-tf-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.fam-tf-btn {
  flex: 1 1 140px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
}
.fam-tf-true { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.fam-tf-true:hover:not(:disabled) { background: var(--success); color: #fff; }
.fam-tf-false { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.fam-tf-false:hover:not(:disabled) { background: var(--error); color: #fff; }
.fam-tf-btn:disabled { opacity: .55; cursor: default; }
.fam-tf-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.fam-tf-feedback {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--amber-light);
  border: 1px solid #f0d9a0;
  border-radius: 12px;
}
.fam-tf-verdict { margin: 0 0 6px; font-weight: 800; font-size: 14.5px; }
.fam-tf-verdict.is-right { color: var(--success); }
.fam-tf-verdict.is-wrong { color: var(--error); }
.fam-tf-why { margin: 0 0 10px; font-size: 14px; color: var(--ink); }
.fam-tf-score { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.fam-tf-done {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--teal-light);
  border-left: 4px solid var(--teal);
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

/* Arcade picker — four games, one open at a time */
.fam-arcade-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.fam-arcade-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.fam-arcade-chip:hover { transform: translateY(-1px); border-color: var(--teal); color: var(--ink); }
.fam-arcade-chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.fam-arcade-chip.is-active {
  background: linear-gradient(135deg, #14406e, #0f2b50);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(15,43,80,.9);
}
.fam-arcade-chip-icon { font-size: 16px; }

/* Sort It! */
.fam-sort-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-height: 48px;
}
.fam-sort-card {
  padding: 11px 16px;
  min-height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fam-sort-card:hover { transform: translateY(-2px); border-color: var(--teal); }
.fam-sort-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.fam-sort-card.is-picked {
  border-color: var(--amber);
  background: var(--amber-light);
  box-shadow: 0 0 0 4px rgba(242,193,91,.28);
}
.fam-sort-card.is-placed { display: none; }
@keyframes famShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.fam-sort-card.is-wrong {
  animation: famShake .3s ease;
  border-color: var(--error);
  background: var(--error-bg);
}
.fam-sort-bins { display: flex; gap: 10px; }
.fam-sort-bin {
  flex: 1 1 0;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 12px;
  border: 2px dashed var(--teal);
  border-radius: 14px;
  background: var(--teal-light);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--teal-ink);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.fam-sort-bin:hover { background: #cdeeea; transform: translateY(-2px); }
.fam-sort-bin:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.fam-sort-bin-label { text-align: center; line-height: 1.25; }
.fam-sort-bin-count {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.fam-sort-feedback { margin: 12px 0 0; font-size: 14px; color: var(--ink); min-height: 20px; }
.fam-sort-done {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--success-bg);
  border-left: 4px solid var(--success);
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

/* Would You Rather? */
.fam-wyr-options {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.fam-wyr-option {
  flex: 1 1 0;
  min-height: 92px;
  padding: 16px 14px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.fam-wyr-option:hover { transform: translateY(-2px); border-color: var(--amber); }
.fam-wyr-option:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.fam-wyr-option.is-chosen {
  border-color: var(--amber);
  background: var(--amber-light);
  box-shadow: 0 0 0 4px rgba(242,193,91,.24);
}
.fam-wyr-or {
  align-self: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
}
.fam-wyr-reveal {
  margin-top: 14px;
  padding: 13px 15px;
  background: var(--teal-light);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
}
.fam-wyr-reveal-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-ink);
}
.fam-wyr-why { margin: 0 0 10px; font-size: 14.5px; color: var(--ink); }
.fam-wyr-progress { margin: 12px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }

@media (max-width: 560px) {
  .fam-memory-grid { grid-template-columns: repeat(2, 1fr); }
  .fam-mem-card { min-height: 64px; }
  .fam-wyr-options { flex-direction: column; }
  .fam-wyr-or { align-self: flex-start; }
  .fam-sort-bins { flex-direction: column; }
}

@media print {
  .hw-quickplan { display: none; }
  .fam-act-card { break-inside: avoid; }
  /* The interactive games are screen-only; paper families have the Activity
     Corner and the printable practice instead. */
  .fam-game-break { display: none; }
}


.ratio-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ratio-compare-recipe{min-width:0;margin:0;padding:18px;border:2px solid #173a5e;border-radius:18px;background:#eef8f4}.ratio-compare-recipe legend{padding:0 8px;font-size:20px;font-weight:800}.ratio-compare-recipe label{display:grid;gap:5px;margin:10px 0;font-size:16px;font-weight:700}.ratio-compare-recipe input{width:100%;max-width:160px;min-height:44px;padding:7px 10px;border:2px solid #173a5e;border-radius:9px;background:#fff;color:#173a5e;font:inherit;font-size:20px}.ratio-compare-recipe input:focus-visible{outline:3px solid #b45309;outline-offset:2px}.ratio-compare-result{min-height:68px;margin-top:14px;font-size:17px;line-height:1.4}.ratio-compare-bar{height:22px;margin-top:10px;border:1px solid #173a5e;border-radius:12px;background:#fff;overflow:hidden}.ratio-compare-bar span{display:block;height:100%;background:#0b8f87;transition:width .2s}.ratio-compare-recipe:nth-child(2) .ratio-compare-bar span{background:#c65d43}.ratio-compare-verdict{margin:18px 0 8px;padding:16px;border:2px solid #173a5e;border-radius:14px;background:#fff2c2;font-size:19px;font-weight:800;line-height:1.4}.ratio-compare-coach{margin:8px 0 0;font-size:17px;line-height:1.45}@media(max-width:650px){.ratio-compare-grid{grid-template-columns:1fr}}
.family-visual-lab{--lab-ink:#173a5e;--lab-teal:#0b8f87;--lab-coral:#ff775f;--lab-sun:#f6c94c;margin:26px 0;padding:clamp(18px,3vw,30px);border:3px solid var(--lab-ink);border-radius:28px;background:#fffdf5;box-shadow:8px 8px 0 var(--lab-ink);color:var(--lab-ink)}
.visual-lab-heading{display:grid;grid-template-columns:minmax(240px,.85fr) minmax(260px,1.15fr);gap:20px;align-items:end;margin-bottom:20px}.visual-lab-heading h2{margin:6px 0 0;font-size:clamp(24px,4vw,38px);line-height:1.05}.visual-lab-heading p{margin:0;padding:14px 16px;border-left:5px solid var(--lab-sun);background:#fff8d9;font-size:17px;font-weight:700;line-height:1.45}.visual-lab-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;background:var(--lab-ink);color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em}.visual-lab-kicker .lang-en,.visual-lab-kicker .lang-es{color:inherit}
.visual-lab-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(230px,.8fr);gap:18px;align-items:stretch}.visual-lab-canvas-wrap{min-width:0;padding:12px;border-radius:22px;background-color:#eef8f4;background-image:linear-gradient(#cee3dc 1px,transparent 1px),linear-gradient(90deg,#cee3dc 1px,transparent 1px);background-size:24px 24px;border:2px solid var(--lab-ink)}.visual-lab-stage{display:grid;place-items:center;min-height:280px}.visual-lab-stage svg{display:block;width:100%;max-height:320px;overflow:visible}.visual-lab-status{min-height:26px;margin:5px 8px 0;padding:7px 10px;border-radius:10px;background:#fff;font-weight:800;text-align:center}
.visual-lab-presets{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:rgba(255,255,255,.1);border-radius:14px;border:1px solid rgba(255,255,255,.2);margin-bottom:4px}
.presets-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lab-sun)}
.preset-pill-group{display:flex;flex-wrap:wrap;gap:6px}
.preset-pill-btn{padding:5px 10px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.15);color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center}
.preset-pill-btn:hover{background:var(--lab-sun);color:var(--lab-ink);border-color:var(--lab-sun);transform:translateY(-1px)}
.preset-pill-btn.is-active{background:var(--lab-coral);color:#fff;border-color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.preset-pill-btn:focus-visible{outline:3px solid var(--lab-sun);outline-offset:2px}
.visual-lab-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 6px 2px}
.legend-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:8px;background:rgba(255,255,255,.88);border:1px solid rgba(23,58,94,.18);font-size:12px;font-weight:700;color:var(--lab-ink)}
.legend-swatch{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.25)}
.legend-swatch.swatch-teal{background:var(--lab-teal)}
.legend-swatch.swatch-coral{background:var(--lab-coral)}
.legend-swatch.swatch-gold{background:var(--lab-sun)}
.visual-coach-box{margin-top:10px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.85);border:1.5px solid rgba(23,58,94,.14)}
.visual-coach-box strong{display:block;margin-bottom:3px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--lab-ink)}
.visual-coach-q{margin:0!important;font-size:13.5px!important;font-weight:700!important;line-height:1.35!important;color:#183654!important;font-style:italic}
.visual-lab-controls{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:22px;background:var(--lab-ink);color:#fff}.visual-lab-control{display:grid;gap:7px;font-weight:800}.visual-lab-control-label{display:flex;justify-content:space-between;gap:10px;align-items:center}.visual-lab-control output{min-width:38px;padding:3px 8px;border-radius:8px;background:var(--lab-sun);color:#102f4e;text-align:center;font-size:18px}.visual-lab-control input[type=range]{width:100%;min-height:28px;accent-color:var(--lab-coral);cursor:pointer}.visual-lab-control input[type=range]:focus-visible{outline:4px solid #fff;outline-offset:4px}.visual-lab-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:auto}.visual-lab-button{min-height:48px;border:2px solid #fff;border-radius:13px;background:var(--lab-coral);color:#182f48;font:inherit;font-weight:800;cursor:pointer}.visual-lab-button-quiet{background:#fff}.visual-lab-button:hover{transform:translateY(-2px)}.visual-lab-button:focus-visible{outline:4px solid var(--lab-sun);outline-offset:3px}
.visual-representation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}.visual-representation-card{position:relative;min-height:150px;padding:18px 16px 15px;border:2px solid var(--lab-ink);border-radius:18px;background:#fff}.visual-representation-card h3{margin:0 0 10px;padding-left:30px;font-size:17px}.visual-representation-card p{margin:7px 0;font-size:16px;line-height:1.4}.representation-number{position:absolute;top:12px;left:12px;display:grid;width:27px;height:27px;place-items:center;border-radius:50%;background:var(--lab-ink);color:#fff;font-weight:800}.visual-representation-model{background:#dff5ee}.visual-representation-math{background:#fff2c2}.visual-representation-words{background:#ffe4dd}.visual-representation-math [data-lab-equation]{font-size:clamp(22px,3vw,32px);font-weight:800;text-align:center}.mini-model{display:flex;flex-wrap:wrap;gap:7px;align-content:center;min-height:76px;padding:8px}.mini-dot{width:18px;height:18px;border:2px solid var(--lab-ink);border-radius:50%;background:var(--lab-teal)}.visual-representation-card details{margin-top:10px}.visual-representation-card summary{cursor:pointer;font-weight:800;text-decoration:underline}.visual-source-idea{font-size:13px!important;color:#344f69}
.lab-label{font:800 16px "Outfit",sans-serif;fill:#173a5e}.lab-small{font:700 12px "Hanken Grotesk",sans-serif;fill:#173a5e}.lab-big{font:800 24px "Outfit",sans-serif;fill:#173a5e}.lab-grid{stroke:#bcd7d0;stroke-width:1}.lab-axis{stroke:#173a5e;stroke-width:3}.lab-accent{fill:#ff775f;stroke:#173a5e;stroke-width:2}.lab-teal{fill:#0b8f87;stroke:#173a5e;stroke-width:2}.lab-sun{fill:#f6c94c;stroke:#173a5e;stroke-width:2}
.visual-lab-lang-note{margin:0 0 8px;padding:8px 12px;border-radius:12px;background:#fff7e6;border:1px solid #f2c15b;font-size:14px;font-weight:600}[data-lesson-model-host]{display:block;min-height:300px;padding:16px;border:2px solid var(--lab-ink);border-radius:22px;background-color:#eef8f4;background-image:linear-gradient(#cee3dc 1px,transparent 1px),linear-gradient(90deg,#cee3dc 1px,transparent 1px);background-size:24px 24px;overflow:auto}[data-lesson-model-host]>.interactive-visual{width:100%;margin:0!important}[data-lesson-model-host] .ftb-wrap,[data-lesson-model-host] .ftlab{max-width:760px}[data-lesson-model-host] input,[data-lesson-model-host] button{font-size:max(16px,1em)}[data-lesson-model] .visual-representation-card p{font-weight:700}
@media(max-width:760px){.family-visual-lab{border-radius:20px;box-shadow:5px 5px 0 var(--lab-ink)}.visual-lab-heading,.visual-lab-layout{grid-template-columns:1fr}.visual-lab-stage{min-height:230px}.visual-representation-grid{grid-template-columns:1fr}.visual-representation-card{min-height:120px}.visual-lab-actions{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.visual-lab-button{transition:none!important}.visual-lab-button:hover{transform:none}}
@media print{.family-visual-lab{box-shadow:none;break-inside:avoid}.visual-lab-controls,.visual-lab-actions{display:none}.visual-lab-layout{grid-template-columns:1fr}.visual-representation-grid{grid-template-columns:repeat(3,1fr)}}


/* ============================================================
   Polish layer — premium, TpT-quality finish (loads last).
   Refines shared content surfaces without changing structure.
   ============================================================ */
body { font-size: 18px; line-height: 1.65; }
.container { max-width: 960px; padding: 28px 20px 44px; }

/* On a laptop give the reading column more room — and keep the sticky bar's inner column locked to it. */
@media (min-width: 1180px) {
  .container, .status-bar-wrapper { max-width: 1080px; }
}

/* Section headings get a clear accent + stronger hierarchy */
.section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
}
.section-title::before {
  content: "";
  width: 5px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--teal), var(--navy));
  flex: 0 0 auto;
}

/* Cards: softer, layered, consistent */
.card {
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(18,53,91,.05), 0 14px 34px -22px rgba(18,53,91,.5);
}

/* Guided "worked steps" become clean carded rows with a left accent */
.worked-step {
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fbfdff;
  margin-bottom: 10px;
}
.worked-step.highlighted {
  background: var(--amber-light);
  border-color: var(--amber);
  box-shadow: 0 8px 22px -14px rgba(242,193,91,.9);
}
.step-badge {
  font-size: 11.5px;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 999px;
  align-self: center;
}
.step-label { font-size: 15px; }

/* Bilingual text: Spanish is a primary language here, so it keeps full ink
   contrast. The separation is carried structurally by a teal rule, never by
   fading the text (that read as "English written twice, Spanish as a footnote"). */
.lang-es { color: var(--ink); }
.worked-step .lang-es, .lang-en + .lang-es {
  display: block;
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--teal-light);
}

/* "Watch for this" / tip callouts: crisp, friendly */
.watch-for-list, .watch-for {
  background: var(--hint-bg);
  border: 1px solid #f0d9a0;
  border-left: 4px solid var(--amber);
  border-radius: 12px;
  padding: 14px 16px;
}

/* Vocab flip cards: a touch more depth + polish */
.vocab-card-inner, .vocab-card-front, .vocab-card-back {
  border-radius: var(--radius-md);
}
.vocab-card-front, .vocab-card-back {
  box-shadow: 0 1px 2px rgba(18,53,91,.05), 0 16px 30px -20px rgba(18,53,91,.5);
  border: 1px solid var(--line);
}

/* Family guide block: warmer, cleaner */
.family-guide {
  border-radius: var(--radius-lg);
  border: 1px solid #ead9b8;
  box-shadow: 0 1px 2px rgba(18,53,91,.04), 0 16px 36px -24px rgba(180,140,60,.6);
}

@media print {
  .worked-step { break-inside: avoid; box-shadow: none; }
  .card { box-shadow: none; }
}

/* ============================================================
   FAMILY MISSION DESIGN SYSTEM — the last layer, and the one that
   decides how the page FEELS. Everything above grew one wave at a
   time: each addition brought its own badge colour, its own card
   weight and its own heading size, so a family met a pile of parts
   rather than one designed page. This layer states the shared rules
   once — surface, rhythm, type scale, accent, motion — and the
   sections inherit them.

   It uses !important only where the "Apple-Grade Pill" block above
   already does; specificity cannot win against a bare !important, and
   splitting that block apart is a bigger, riskier edit than owning
   the handful of properties this layer overrides.
   ============================================================ */

/* --- Paper: warm, with a whisper of the classroom's graph texture --- */
body {
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(18,53,91,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,53,91,.030) 1px, transparent 1px);
  background-size: 26px 26px;
  background-attachment: fixed;
}

/* --- Control deck: the tab row and the progress rail are ONE object,
       not two floating bars stacked on each other. --- */
.homework-tab-chrome {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 30px -14px rgba(15,23,42,.22);
  overflow: hidden;
  margin-bottom: 26px !important;
}
.homework-tab-bar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
}
/* The five stops a family is asked to walk read as primary; the five
   optional surfaces read as what they are. */
.homework-tab-btn.is-bonus { opacity: .72; font-weight: 600 !important; }
.homework-tab-btn.is-bonus:hover { opacity: 1; }
.homework-tab-btn.is-bonus.is-active { opacity: 1; }
.homework-tab-btn.is-core.is-active {
  background: linear-gradient(135deg, #14406e, #0f2b50) !important;
}
.homework-tab-divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 4px 6px;
  background: var(--line);
}
.homework-tab-bonus-label {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-right: 2px;
}
.homework-tab-bonus-label .lang-es { color: var(--muted); }
.homework-tab-bonus-label .lang-en + .lang-es { border-left: 0; padding-left: 0; margin-top: 0; }
.hw-rail { background: linear-gradient(180deg, rgba(247,244,236,.5), rgba(255,255,255,0)); }

/* --- Section headings: one confident scale, an accent dot instead of
       five different coloured pills, Spanish as a full-ink partner line. --- */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--navy);
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.section-title::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(242,193,91,.22);
  align-self: center;
}

/* --- Cards: one surface, one radius, one shadow. --- */
.guided-section.card,
.card-ish,
.card {
  border-radius: 20px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 2px rgba(18,53,91,.04), 0 18px 40px -30px rgba(18,53,91,.55) !important;
}

/* --- One badge shape. Waves added a teal pill, a coral pill, a purple
       pill and an amber pill for the same job; the shape now carries the
       meaning and colour is reserved for the accent. --- */
.fam-act-badge,
.fam-game-badge,
.math-talk-badge,
.spotlight-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  color: var(--navy) !important;
  background: linear-gradient(135deg, #fdf3dc, #f7f4ec) !important;
  border: 1px solid rgba(242,193,91,.55) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}

/* --- Bilingual, two ways.
   Spanish keeps FULL ink everywhere — the separation is structural, never a
   fade (a faded Spanish read as "English written twice"). But the structure
   has to fit the container: in prose the two languages stack with a teal rule,
   while inside a chip, a tab or a rail label they must sit on ONE line with a
   visible separator, or "5 stops" and "5 paradas" run together into nonsense. */
.hw-stat .lang-es,
.hw-hero-kicker .lang-es,
.fam-act-meta .lang-es,
.hw-quickplan-summary .lang-es {
  display: inline !important;
}
.hw-stat .lang-en + .lang-es::before,
.hw-hero-kicker .lang-en + .lang-es::before,
.hw-quickplan-summary .lang-en + .lang-es::before {
  content: "·";
  margin: 0 7px;
  opacity: .6;
}
/* The same rule, stated once for every control: inside a button or a summary,
   the two languages share one line with a separator. Stacking them there
   doubled the height of every chip and filter and read as one garbled string
   ("All Todos", "Needs Review Por repasar"). Prose is unaffected — it keeps
   the stacked treatment with the teal rule. */
button .lang-en + .lang-es,
summary .lang-en + .lang-es {
  display: inline;
  border-left: 0;
  padding-left: 0;
  margin-top: 0;
}
button .lang-en + .lang-es::before,
summary .lang-en + .lang-es::before {
  content: "·";
  margin: 0 6px;
  opacity: .6;
}
/* THE SEPARATOR SEPARATES NOTHING WHEN THERE IS ONLY ONE LANGUAGE.
   .lang-en + .lang-es is an adjacent-sibling selector, and adjacency does not
   care about display, so hiding the English span in Spanish mode left the
   middot standing in front of Spanish text with nothing before it — a stray
   orange dot ahead of every heading, chip and summary on the page ("· Qué
   aprendemos hoy"). It is a separator, so it exists only in bilingual mode. */
body.lang-mode-en .lang-en + .lang-es::before,
body.lang-mode-es .lang-en + .lang-es::before {
  content: none;
}
/* Two controls read better stacked and keep it: the rail's five stops (a map,
   where the label sits under its dot) and the tab bar (which shows one
   language at a time already). */
.hw-rail-label .lang-en + .lang-es,
.tab-label .lang-en + .lang-es { display: block; }
.hw-rail-label .lang-en + .lang-es::before,
.tab-label .lang-en + .lang-es::before { content: none; }

/* On the dark hero, every Spanish line inherits the hero's light ink rather
   than the global dark --ink, which was rendering it near-invisible. */
.hw-hero .lang-es { color: inherit; }
.hw-hero .lang-en + .lang-es { border-left-color: rgba(242,193,91,.5); }

/* Section headings: English line, Spanish line beneath at full ink — a
   partner line, not a second competing title on the same row. */
.section-title { flex-wrap: wrap; row-gap: 2px; }
.section-title .lang-es {
  /* The heading is a flex row, so the partner line needs a full-width basis to
     drop beneath the English rather than sit beside it as a second title. */
  flex: 0 0 100%;
  margin-top: 1px;
  padding-left: 18px;
  border-left: 0;
  font-size: .66em;
  font-weight: 600;
  color: var(--teal-ink);
  letter-spacing: 0;
}

/* The Listen button now renders INSIDE the heading (see renderLearnTab), so it
   sits on the heading row instead of alone in a band of dead space. */
.btn-listen-concept {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  font-size: 12.5px;
}
/* The concept figure is the point of that section — frame it instead of
   letting it drift in the middle of an empty card. */
.concept-visual-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 20px;
  padding: 22px 18px;
  background: linear-gradient(180deg, #fbfdff, var(--cream));
  border: 1px solid var(--line);
  border-radius: 16px;
}
/* The figure is the point of that card — let it use the width it has instead
   of sitting small in the middle of it. */
.concept-visual-wrap > svg { width: 100%; max-width: 560px; height: auto; }

/* --- Motion: one orchestrated reveal when a family lands on a stop.
       Respects reduced-motion via the global rule already in this file. --- */
@keyframes hwRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* Gated on a class JS adds after boot. An entrance animation whose start
   state is opacity:0 hides the page's content until it runs — if the script
   never runs, a family gets a blank page, which is the one failure this site
   spends a whole gate on. No class, no animation, everything visible. */
body.hw-motion-ready [data-tab-panel]:not([hidden]) > * {
  animation: hwRise .5s cubic-bezier(.22,.9,.3,1) both;
}
body.hw-motion-ready [data-tab-panel]:not([hidden]) > *:nth-child(1) { animation-delay: .02s; }
body.hw-motion-ready [data-tab-panel]:not([hidden]) > *:nth-child(2) { animation-delay: .08s; }
body.hw-motion-ready [data-tab-panel]:not([hidden]) > *:nth-child(3) { animation-delay: .14s; }
body.hw-motion-ready [data-tab-panel]:not([hidden]) > *:nth-child(4) { animation-delay: .20s; }
body.hw-motion-ready [data-tab-panel]:not([hidden]) > *:nth-child(n+5) { animation-delay: .26s; }
body.hw-motion-ready .hw-hero { animation: hwRise .6s cubic-bezier(.22,.9,.3,1) both; }

/* --- Interactive surfaces lift on hover, so a family can tell what is
       tappable from what is text. --- */
.fam-act-card, .fam-game-card, .vocab-card, .problem-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fam-act-card:hover, .fam-game-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  body.hw-motion-ready [data-tab-panel]:not([hidden]) > *,
  body.hw-motion-ready .hw-hero { animation: none !important; }
}

/* --- The floating launchers sit ABOVE the sticky status bar.
   Save/Resume (#nsr-root) and the Math Workbench launcher (#mwb-launcher) are
   shared, runtime-injected widgets pinned to the bottom-right of every page.
   This page also has a fixed status bar there, so on a phone — where that bar
   wraps to two rows — the Save/Resume pill landed on top of the progress
   readout ("1 / 6 Completed"). They are lifted by the bar's own measured
   height (--hw-status-height, set by syncHomeworkChromeHeights) rather than a
   guessed constant, so the clearance stays right when the bar wraps.

   The body prefix is deliberate: the shared stylesheet is linked AFTER this
   block, so a bare id selector would lose the tie on source order. Scoped to
   this page only — the widgets keep their position everywhere else. --- */
body #nsr-root {
  /* Clamped on purpose. --hw-status-height is measured by script and can be
     read while the bar is mid-layout — it reported 381px for a bar that
     renders 121px, which threw the launchers up into the tab deck. The clamp
     keeps a wrong-high reading from moving them off the bottom of the page;
     150px still clears the tallest real bar (two wrapped rows). */
  bottom: calc(min(var(--hw-status-height, 104px), 150px) + 14px) !important;
}
/* THREE floating controls in one corner is two too many. The shared Math
   Workbench launcher was the third, and on a 414px phone it overlapped the
   Save/Resume pill, which was itself clipped by the screen edge. The workbench
   is no longer a stranger to this page — it opens as a drawer on the Together
   stop, where the manipulatives are actually used, and the Stuck? drawer links
   to the full version — so the floating duplicate is hidden HERE only and
   keeps its place on every other page. */
body #mwb-launcher,
body .mwb-launcher {
  display: none !important;
}

/* --- Phone: the briefing has to fit the screen a family actually holds.
   At 390px the hero ran 797px — a screen and a half of chrome before any
   mathematics — because the stat chips wrapped to three rows, the language
   control to two, and the kicker to two. Same content, tighter frame. --- */
@media (max-width: 700px) {
  .hw-hero-kicker { font-size: 10.5px; padding: 5px 11px 5px 6px; margin-bottom: 12px; gap: 6px; }
  .hw-hero-kicker-icon { width: 20px; height: 20px; font-size: 11px; }
  .hw-hero-lesson { margin-top: 14px; padding-top: 12px; }
  .hw-hero-lead { margin-top: 10px; font-size: 14px; }
  /* Bilingual doubles every chip, so THERE the row scrolls. In one language
     the three chips fit, and a chip clipped at the screen edge with no scroll
     affordance ("Bet…") is worse than a second row. */
  .hw-hero-stats { margin-top: 14px; flex-wrap: wrap; }
  body.lang-mode-bilingual .hw-hero-stats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .hw-hero-stats::-webkit-scrollbar { display: none; }
  .hw-stat { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; }
  .hw-hero-controls { margin-top: 14px; }
  .hw-hero .lang-selector-card { gap: 8px; }
  .hw-hero .lang-selector-title { flex: 0 0 100%; font-size: 10.5px; }
  /* One row of three, never a stacked column: the three modes are a choice
     between peers and reading them as a vertical list says otherwise. */
  /* flex-direction is set to column by an older mobile rule for the standalone
     selector; inside the hero the three modes stay a row. */
  .hw-hero .lang-selector-buttons {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    /* A pill outline drawn around two rows reads as a mistake. */
    border-radius: var(--radius-md);
  }
  .hw-hero .lang-toggle-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    justify-content: center;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 12px;
    white-space: nowrap;
  }
  /* "Bilingual / Bilingüe" needs ~153px and an equal third of this row is 97px,
     so it used to be hidden and the button showed two flags and nothing else —
     the DEFAULT mode, unlabelled. It gets its own row instead: every option is
     now readable, at the cost of one 44px row. (Hiding it was right when the
     selector held six languages and no arrangement helped; it holds three.) */
  .hw-hero .lang-toggle-btn[data-lang-mode="bilingual"] { flex: 1 0 100%; }
  .hw-hero .hw-quickplan { margin-top: 14px; }
  /* The opacity difference already says which tabs are optional; the divider
     and its label cost a whole extra row at this width. */
  .homework-tab-divider, .homework-tab-bonus-label { display: none; }
}

@media print {
  body { background-image: none; }
  .homework-tab-chrome, .hw-rail { display: none; }
  .hw-hero { background: #fff !important; color: #000 !important; box-shadow: none; }
  .hw-hero .welcome-title-en, .hw-hero-lesson-title { color: #000 !important; }
}

/* ── Editorial publisher-grade finish (shared: scripts/lib/editorial-print.mjs) ──
   Appended last so it overrides each generator's base CSS. Finish-only:
   serif headings + paper ground + AA-safe ink. No layout/size changes. */
:root{ --ink:#19262f; --muted:#475663; }
body{ background:#f5f0e6; color:#19262f; }
h1,h2,h3,h4,h5,h6,
header.packet h1,.section>h2,.li-title,.learnit-head,.learnit-stage-title,
.mission-title,.answer-key h2,.think-block h3,.topbar .brand{
  font-family:"Fraunces",Georgia,"Times New Roman",serif !important;
  letter-spacing:-0.01em;
}
/* A thin editorial accent rule under the document's main title. */
header.packet h1{ position:relative; }
header.packet h1::after{
  content:""; display:block; width:56px; height:2px; margin-top:8px;
  background:linear-gradient(90deg,#1fa6a2,#f2c15b); border-radius:2px;
}
@media print{ body{ background:#fff !important; } }


/* ============================================================
   BIG IDEA LAYER — loads last, after the polish layer.
   The concept explainer is the one part of this page a parent
   reads to understand the mathematics itself, often on a phone
   and often in a second language. It is deliberately sized well
   above the rest of the page: full-bleed picture, oversized
   sentence, numbered steps that can be followed without reading
   closely. Namespaced to `.big-idea` (renderLearnTab strips the
   <section> wrapper) so nothing else on the page inherits the scale.
   ============================================================ */
.big-idea { margin-top: 4px; }

/* The figure heading is language-switched, not bilingual (see conceptHeading).
   Both <text> sit at the same y, so exactly one may ever be displayed: English
   carries English AND bilingual mode; Spanish mode swaps them. */
.concept-title-es { display: none; }
body.lang-mode-es .concept-title-en { display: none; }
body.lang-mode-es .concept-title-es { display: inline; }

/* 1. One sentence, first, and big enough to read across a kitchen. */
.big-idea .key-idea-banner {
  padding: 20px 22px;
  border: 2px solid #8fcfc8;
  border-radius: var(--radius-md);
  margin: 4px 0 20px;
}
.big-idea .key-idea-banner p {
  margin: 0;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 600;
}
.big-idea .key-idea-banner .lang-en + .lang-es {
  margin-top: 12px;
  padding-left: 14px;
  border-left: 4px solid var(--teal);
}

/* 2. The picture. It used to cap at 420px (560px once the design system
   framed it) on a 1000px column — barely half the available width, with 11px
   labels inside it. Keep the frame; let the drawing use the column. The frame
   is display:flex in the design system, which makes the <svg> a flex item that
   shrinks to its intrinsic width and puts the caption beside it; block stacking
   is what this section needs. */
.big-idea .concept-visual-wrap {
  display: block;
  margin: 0 0 22px;
  padding: 20px 18px;
  overflow: visible;
}
.big-idea .concept-visual-wrap > svg,
.big-idea .concept-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}
.concept-visual-caption {
  margin: 12px 2px 0;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.concept-visual-caption .lang-es {
  display: block;
  margin-top: 8px;
  padding-left: 14px;
  border-left: 4px solid var(--teal);
  text-align: left;
}
.concept-visual-caption .lang-en { display: block; }

/* Fallback picture (a lesson with no topic drawing): the two ends of the
   worked example, side by side, so the jump from setup to answer is visible
   before a single sentence is read. */
.big-idea .concept-fallback-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
}
.big-idea .concept-fallback-step {
  display: block;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
  background: var(--white);
  border: 2px solid var(--line);
}
.big-idea .concept-fallback-step.is-end {
  background: var(--teal-light, #e9f7f4);
  border-color: var(--teal);
}
.concept-fallback-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--teal-ink);
}
.concept-fallback-label .lang-es { display: inline; margin: 0; padding: 0; border: 0; }
.concept-fallback-label .lang-es::before { content: " · "; }
.concept-fallback-text { display: block; }
.concept-fallback-text.lang-es {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 4px solid var(--teal);
}
.concept-fallback-arrow {
  align-self: center;
  font-size: 40px;
  font-weight: 800;
  color: var(--teal-ink);
}
@media (max-width: 620px) {
  .big-idea .concept-fallback-visual { grid-template-columns: 1fr; }
  .concept-fallback-arrow { transform: rotate(90deg); text-align: center; }
}

/* 3. The four-stop path. Bigger icons, a visible stop number, real tap size. */
.big-idea .concept-quick-wrap { padding: 18px 16px; margin-bottom: 22px; }
.big-idea .concept-quick-title { font-size: 18px; margin-bottom: 14px; }
.big-idea .concept-quick-path { gap: 12px; }
.big-idea .concept-quick-step {
  min-height: 118px;
  padding: 14px 8px;
  border: 2px solid var(--line);
  font-size: 16px;
  line-height: 1.25;
}
.big-idea .concept-quick-icon { font-size: 38px; margin-bottom: 8px; }
.concept-quick-num {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-ink);
  letter-spacing: 0.08em;
}
.big-idea .concept-quick-step .lang-es { font-size: 14px; color: var(--muted); }

/* 4. Guided steps. A large numeral carries the order so a parent can follow
   the sequence without reading a word of it first. Compact cards, colored
   left border + numeral per step (matching the quick-path above) so the
   sequence reads as a scannable trail rather than four tall blocks. */
.big-idea .guided-steps { gap: 10px; }
.big-idea .guided-step {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: var(--radius-md);
}
.big-idea .guided-step.step-color-1 { border-left-color: #5b8def; }
.big-idea .guided-step.step-color-2 { border-left-color: var(--success); }
.big-idea .guided-step.step-color-3 { border-left-color: var(--amber); }
.big-idea .guided-step.step-color-4 { border-left-color: var(--coral); }
.big-idea .guided-step-head { gap: 10px; margin-bottom: 6px; align-items: center; }
.guided-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  background: var(--navy);
}
.big-idea .step-cue-label { font-size: 16px; }
.big-idea .guided-step-icon {
  display: inline;
  width: auto;
  height: auto;
  flex: none;
  background: none;
  border-radius: 0;
  font-size: 19px;
  margin-right: 6px;
}
/* The big numeral already states the order, so the "Step 1 / Paso 1" pill is
   pure repetition here — it only competed with the cue label for attention. */
.big-idea .step-badge { display: none; }

/* Bilingual text inside a CHIP or a SUMMARY must stay on one line. The global
   `.lang-en + .lang-es` rule (a deliberate anti-fading treatment for prose)
   turns both languages into stacked, teal-ruled blocks, which rendered these
   as "Start" / "Empieza" on two lines with a stray vertical bar. Prose keeps
   the stacked treatment; chips get an inline separator instead. */
.big-idea .step-cue-label .lang-es,
.big-idea .step-detail summary .lang-es {
  display: inline;
  margin: 0;
  padding-left: 0;
  border-left: 0;
}
.big-idea .step-detail summary .lang-es::before {
  content: " · ";
  color: var(--muted);
}
/* A path stop is a vertical column, so its two languages stack — but without
   the teal rule, which reads as a stray bar inside a small centred card. */
.big-idea .concept-quick-step .lang-es {
  display: block;
  margin: 2px 0 0;
  padding-left: 0;
  border-left: 0;
}
.big-idea .guided-step .step-lead {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0;
}
.big-idea .guided-step .step-lead.lang-es {
  margin-top: 6px;
  padding-left: 10px;
  border-left: 3px solid var(--teal);
}
.big-idea .step-detail { margin-top: 6px; padding-top: 6px; }
.big-idea .step-detail summary { font-size: 13px; }
.big-idea .step-detail p { font-size: 14.5px; line-height: 1.45; }

/* 5. Watch-for cues read at the same weight as the steps they support. */
.big-idea .watch-for-list { padding: 18px 20px; margin-top: 20px; }
.big-idea .watch-for-list li { gap: 14px; }
.big-idea .watch-for-list p { font-size: 19px; line-height: 1.45; margin: 0; }
.big-idea .watch-for-list .lang-en + .lang-es {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 4px solid var(--teal);
}
.big-idea .watch-icon { font-size: 26px; }

/* Phones: the drawings are authored on a 640-unit canvas and scale down
   cleanly, but the surrounding type needs a small step down so a step card
   still fits a 375px viewport without a horizontal scroll. */
@media (max-width: 620px) {
  .big-idea .key-idea-banner p { font-size: 20px; }
  .big-idea .guided-step { padding: 12px 14px; }
  .big-idea .guided-step .step-lead { font-size: 16px; }
  .big-idea .concept-visual-caption { font-size: 18px; }
  /* Give the drawing back the frame's side padding — on a 375px phone that is
     the difference between a 301px and a 341px picture. */
  .big-idea .concept-visual-wrap { padding: 14px 8px; }
  .big-idea .concept-quick-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-idea .concept-quick-step:not(:last-child)::after { content: none; }
  .guided-step-num { width: 34px; height: 34px; flex: 0 0 34px; font-size: 16px; }
}

@media print {
  .big-idea .concept-svg { max-width: 620px; margin: 0 auto; }
  .big-idea .guided-step, .big-idea .concept-visual-wrap { break-inside: avoid; }
}


/* ============================================================
   ARENA LAYER — loads last, after the big-idea layer.

   The page had the right structure (one hero, six stops, one big
   picture) drawn at newsletter weight: thin type, quiet chips, flat
   buttons, a status bar that looked like a footer. A family opens this
   at 7pm on a phone, tired; it has to feel like an EVENT, not a memo.

   Modelled on the vocabulary-lab treatment Joel asked for: stadium
   lighting on the hero, one flat gold kicker instead of a pill, display
   type a size class larger and tighter, the navigation lifted OUT of the
   hero onto a white card that overlaps it, chunky pressable buttons with
   a real bottom edge, and the progress bar re-cut as a scoreboard.

   CSS only, on selectors that already exist — no markup moves, so every
   pinned structure (tab ids, stop numbers, .big-idea, the injection
   sentinels) is untouched. Site hues are kept; the reference's exact
   palette would clash with the rest of the curriculum.
   ============================================================ */

/* ── Hero: stadium lighting ──────────────────────────────────────────── */
.hw-hero {
  padding: 34px 34px 46px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% -30%, rgba(36,93,132,.55) 0, transparent 42%),
    radial-gradient(120% 140% at 88% -10%, rgba(31,166,162,.28) 0%, rgba(18,53,91,0) 58%),
    linear-gradient(145deg, #071a2c 0%, #102f4f 58%, #0d2039 100%);
  box-shadow: 0 26px 60px -32px rgba(7,26,44,.92);
}
/* The lit stands down each edge. Decorative, and the first thing that says
   "this is a place", not "this is a document". */
.hw-hero::before,
.hw-hero::after {
  content: "";
  position: absolute;
  top: 0;
  width: 118px;
  height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.055) 23px 25px);
  opacity: .75;
  pointer-events: none;
  z-index: 0;
}
.hw-hero::before { left: 0; }
.hw-hero::after { right: 0; }
.hw-hero-body { z-index: 1; }

/* The kicker was a translucent pill competing with the title for weight.
   Flat gold caps read as a label and give the title the stage. */
.hw-hero-kicker {
  padding: 0;
  gap: 7px;
  margin-bottom: 10px;
  background: none;
  border: 0;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .13em;
  color: var(--amber, #f2c15b);
}
.hw-hero-kicker .lang-es { color: var(--amber, #f2c15b); opacity: .85; }
.hw-hero-kicker-icon { background: rgba(242,193,91,.16); width: 22px; height: 22px; }

/* The polish layer caps these with !important (`.welcome-title-en`, ~line 9204),
   so a plain rule here loses on cascade order despite being more specific and
   later. Matched, not removed: that cap still governs the OTHER pages that use
   the welcome-title classes. */
.hw-hero .welcome-title-en {
  font-size: clamp(34px, 5.4vw, 56px) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  line-height: 1.02 !important;
}
.hw-hero .welcome-title-es {
  font-size: clamp(18px, 2.4vw, 24px) !important;
  font-weight: 700 !important;
}
.hw-hero-emoji { width: 72px; height: 72px; font-size: 38px; border-radius: 22px; }
.hw-hero-lesson-title { font-size: 21px; font-weight: 800; }
.hw-hero-lead { font-size: 16px; }

/* Stat chips: the number is the message, so it goes big and gold over a
   small caps label — the scoreboard reading of the same three facts. */
.hw-hero-stats { gap: 9px; }
.hw-stat {
  min-width: 112px;
  padding: 9px 13px;
  border-radius: 13px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.17);
  font-weight: 800;
  letter-spacing: .01em;
}

/* ── Navigation: lifted onto its own card, overlapping the hero ──────── */
.homework-tab-chrome {
  margin-top: -26px;
  padding: 9px 9px 7px;
  border-radius: 19px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #d9e3ea);
  box-shadow: 0 16px 38px rgba(7,26,44,.16);
  position: relative;
  z-index: 5;
}
.homework-tab-btn { border-radius: 13px; font-weight: 800; }
/* Navy, not teal: the active stop should echo the hero it hangs off. */
.homework-tab-btn.is-active,
.homework-tab-btn.is-core.is-active {
  background: #102f4f;
  border-color: #102f4f;
  color: #fff;
  box-shadow: 0 6px 15px rgba(16,47,79,.28);
}
.homework-tab-btn.is-active .tab-min { opacity: .82; }
.homework-tab-btn:hover:not(.is-active) {
  background: #eef4f8;
  border-color: #cddbe8;
}
.homework-tab-track-fill { background: linear-gradient(90deg, var(--amber, #f2c15b), #ff8e43); }

/* ── Buttons: a real bottom edge you can press ───────────────────────── */
.btn,
.flow-next-btn,
.signoff-submit-btn {
  border-radius: 12px;
  font-weight: 900;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-primary, .flow-next-btn {
  background: #102f4f;
  border-color: #102f4f;
  color: #fff;
  box-shadow: 0 4px 0 #061a2c;
}
.btn-primary:hover, .flow-next-btn:hover { background: #16406b; border-color: #16406b; }
.btn-primary:active, .flow-next-btn:active,
.btn-secondary:active, .btn-outline-primary:active,
.btn-outline-secondary:active, .btn-outline-success:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #061a2c;
}
.btn-secondary { box-shadow: 0 4px 0 #c1ced7; }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success { box-shadow: 0 3px 0 #d3dee6; }
.btn:disabled { opacity: .45; transform: none; box-shadow: none; }
/* A button that moves 2px on press must not also move on focus-visible, or
   the outline chases it. */
.btn:focus-visible { outline: 4px solid rgba(242,193,91,.85); outline-offset: 3px; }

/* ── Cards: deeper corners, softer lift ─────────────────────────────── */
.guide-card,
.problem-section.card,
.fam-game-card,
.fam-act-card,
.vocab-card-front,
.vocab-card-back {
  border-radius: 20px;
  box-shadow: 0 9px 28px rgba(7,26,44,.08);
}

/* ── Status bar re-cut as a scoreboard ──────────────────────────────── */
.bottom-status-bar {
  background: #071a2c;
  color: #fff;
  border-top: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 -10px 30px rgba(7,26,44,.28);
}
.bottom-status-bar strong,
.bottom-status-bar .status-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 900;
  color: var(--amber, #f2c15b);
}
.bottom-status-bar .btn-primary { box-shadow: 0 4px 0 #04121f; }

@media (max-width: 620px) {
  .hw-hero { padding: 24px 20px 40px; border-radius: 20px; }
  /* The stands would eat a third of a 375px hero. */
  .hw-hero::before, .hw-hero::after { width: 46px; opacity: .5; }
  .homework-tab-chrome { margin-top: -22px; padding: 7px 7px 6px; border-radius: 16px; }
  .hw-stat { min-width: 0; padding: 7px 11px; }
}

@media print {
  .hw-hero::before, .hw-hero::after { content: none; }
  .btn, .btn-primary { box-shadow: none !important; }
  .bottom-status-bar { display: none !important; }
}

/* ── Upgrades: Read-aloud, Feeling pulse, Work photo, Refrigerator Sheet ──── */
.btn-read-aloud {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--teal-light, #dff2ee);
  color: var(--teal-ink, #0c6f6b);
  border: 1px solid rgba(31, 166, 162, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.15s ease;
}
.btn-read-aloud:hover {
  background: var(--teal, #1fa6a2);
  color: #fff;
}
.btn-read-aloud.is-speaking {
  background: var(--coral, #d9795d);
  color: #fff;
  animation: pulseSpeaking 1.5s infinite;
}
@keyframes pulseSpeaking {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.feeling-options .btn-feeling {
  transition: all 0.15s ease;
}
.feeling-options .btn-feeling:hover {
  border-color: #94a3b8;
}
.feeling-options .btn-feeling.is-selected {
  border-color: #0284c7;
  background: #e0f2fe;
  color: #0369a1;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

.work-photo-preview-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.refrigerator-sheet-print-container {
  display: none;
}

@media print {
  body.print-refrigerator-sheet * {
    visibility: hidden !important;
  }
  body.print-refrigerator-sheet .refrigerator-sheet-print-container,
  body.print-refrigerator-sheet .refrigerator-sheet-print-container * {
    visibility: visible !important;
  }
  body.print-refrigerator-sheet .refrigerator-sheet-print-container {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff !important;
    color: #0f172a !important;
  }
  body.print-refrigerator-sheet .rf-sheet-page {
    border: 2px dashed #0284c7;
    border-radius: 12px;
    padding: 16px 20px;
    box-sizing: border-box;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  body.print-refrigerator-sheet .rf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
    margin-bottom: 12px;
  }
  body.print-refrigerator-sheet .rf-title-area h2 {
    font-size: 18px;
    margin: 0;
    color: #0f172a;
  }
  body.print-refrigerator-sheet .rf-title-area p {
    font-size: 13px;
    margin: 2px 0 0;
    color: #475569;
  }
  body.print-refrigerator-sheet .rf-qr-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  body.print-refrigerator-sheet .rf-qr-box svg {
    width: 68px;
    height: 68px;
  }
  body.print-refrigerator-sheet .rf-qr-label {
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    margin-top: 2px;
  }
  body.print-refrigerator-sheet .rf-big-idea-box {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
  }
  body.print-refrigerator-sheet .rf-section-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #0369a1;
    margin-bottom: 4px;
  }
  body.print-refrigerator-sheet .rf-big-idea-text {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    color: #0c4a6e;
  }
  body.print-refrigerator-sheet .rf-table-talk-box {
    background: #fdf4ff;
    border: 1px solid #f5d0fe;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
  }
  body.print-refrigerator-sheet .rf-talk-prompts {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #581c87;
  }
  body.print-refrigerator-sheet .rf-practice-section {
    margin-bottom: 12px;
  }
  body.print-refrigerator-sheet .rf-practice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
  }
  body.print-refrigerator-sheet .rf-prob-card {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    background: #ffffff;
  }
  body.print-refrigerator-sheet .rf-prob-head {
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 4px;
  }
  body.print-refrigerator-sheet .rf-prob-stem {
    font-size: 11.5px;
    line-height: 1.35;
    margin: 0 0 6px;
    color: #0f172a;
  }
  body.print-refrigerator-sheet .rf-work-box {
    height: 70px;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    background: #fafafa;
    position: relative;
  }
  body.print-refrigerator-sheet .rf-work-box-label {
    position: absolute;
    top: 3px;
    left: 6px;
    font-size: 9px;
    color: #94a3b8;
  }
  body.print-refrigerator-sheet .rf-signoff-strip {
    border-top: 2px dashed #cbd5e1;
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
  }
  body.print-refrigerator-sheet .rf-sig-lines {
    display: flex;
    gap: 16px;
  }
  body.print-refrigerator-sheet .rf-sig-line {
    border-bottom: 1px solid #0f172a;
    width: 140px;
    height: 16px;
    display: inline-block;
  }
}

/* ── Photobooth Studio with Math Work ─────────────────────────────────── */
/* An author display: declaration beats the UA stylesheet's [hidden] rule, so
   every layer in here that JS toggles with .hidden needs [hidden] to win
   outright. Without this the countdown overlay and the review buttons render
   on top of an idle viewfinder before a photo is ever taken. */
.section-photobooth [hidden] { display: none !important; }
.section-photobooth {
  padding: 24px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--line, #d7e2ed);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.photobooth-header {
  margin-bottom: 20px;
}
.photobooth-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.photobooth-sub {
  font-size: 15px;
  color: #475569;
  line-height: 1.5;
  margin-top: 6px;
}
.next-photobooth-banner {
  margin: 24px 0;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.btn-next-photobooth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  text-align: left;
}
.pb-banner-icon {
  font-size: 38px;
}
.pb-banner-labels strong {
  display: block;
  font-size: 18px;
  color: #78350f;
}
.pb-banner-labels small {
  display: block;
  font-size: 13.5px;
  color: #92400e;
  margin-top: 2px;
}
.photobooth-container {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .photobooth-container {
    grid-template-columns: 1fr;
  }
}
.pb-stage-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pb-viewfinder {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #0f172a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .card-ish is a content card: white, padded, with a bottom margin, all of it
   !important. On the viewfinder that painted a white gutter around the picture
   and — because the frame overlay is inset:0 against the padding box — hung the
   live frame 28px outside the video it is supposed to be framing. */
.pb-viewfinder.card-ish {
  background: #0f172a !important;
  padding: 0 !important;
  margin: 0 !important;
}
#pb_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Mirrored for the selfie camera only. Mirroring the rear camera turns the
   notebook page the family is photographing into backwards writing. */
#pb_video.is-mirrored { transform: scaleX(-1); }
#pb_captured_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.pb-frame-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.frame-champion {
  border: 14px solid #f59e0b;
}
.frame-champion .pb-frame-header {
  background: #f59e0b;
  color: #fff;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 14px;
}
.frame-champion .pb-frame-footer {
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
}
.frame-notebook {
  border: 14px solid #0284c7;
}
.frame-notebook .pb-frame-header {
  background: #0284c7;
  color: #fff;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 14px;
}
.frame-notebook .pb-frame-footer {
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
}
.frame-stars {
  border: 14px solid #8b5cf6;
}
.frame-stars .pb-frame-header {
  background: #8b5cf6;
  color: #fff;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 14px;
}
.frame-stars .pb-frame-footer {
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
}
.frame-polaroid {
  border: 16px solid #ffffff;
  border-bottom-width: 44px;
}
.frame-polaroid .pb-frame-header {
  background: #ffffff;
  color: #0f172a;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 14px;
}
.frame-polaroid .pb-frame-footer {
  background: #ffffff;
  color: #0f172a;
  padding: 4px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
}
.pb-stickers-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 48px 24px;
  gap: 12px;
}
.pb-sticker-stamp {
  font-size: 36px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.pb-idle-placeholder {
  position: absolute;
  inset: 0;
  background: #1e293b;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.pb-idle-icon {
  font-size: 54px;
  margin-bottom: 12px;
}
.pb-idle-sub {
  font-size: 13.5px;
  color: #94a3b8;
  max-width: 280px;
  margin-bottom: 18px;
}
.pb-countdown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  color: #ffffff;
  font-size: 96px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: pbCountPulse 1s infinite;
}
@keyframes pbCountPulse {
  0% { transform: scale(1.4); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.pb-flash-layer {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
}
.pb-flash-layer.is-active {
  animation: pbFlashAnim 0.4s ease-out;
}
@keyframes pbFlashAnim {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}
.pb-status {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}
.pb-status.is-warn {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}
.pb-status.is-ok {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #065f46;
}
.pb-controls-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pb-actions-live, .pb-actions-review {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
.pb-btn-snap {
  flex: 2;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 16px;
  background: #0f7c4a;
  border-color: #0f7c4a;
}
.pb-btn-flip, .pb-btn-upload {
  flex: 1;
  font-size: 14px;
}
.pb-btn-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.pb-btn-snap, .pb-btn-flip {
  justify-content: center;
  text-align: center;
}
/* Phone layout. The booth is used one-handed, standing over a notebook, so at
   this width the frame chrome gets out of the picture's way and every action
   becomes a full-width tap target instead of a ragged wrapped row. */
@media (max-width: 560px) {
  .pb-frame-overlay { border-width: 8px !important; }
  .frame-polaroid { border-bottom-width: 28px !important; }
  .pb-frame-header,
  .pb-frame-footer {
    gap: 10px;
    font-size: 11.5px;
    padding: 5px 10px;
  }
  .pb-frame-lesson,
  .pb-frame-date { flex-shrink: 0; }
  .pb-stickers-layer { padding: 34px 14px; }
  .pb-sticker-stamp { font-size: 28px; }
  .pb-actions-live > *,
  .pb-actions-review > * {
    flex: 1 1 100%;
    justify-content: center;
    text-align: center;
  }
  .pb-countdown-overlay { font-size: 68px; }
}
.pb-customizer {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
}
.pb-custom-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}
.pb-custom-section {
  margin-bottom: 16px;
}
.pb-custom-label {
  display: block;
  font-size: 13px;
  color: #334155;
  margin-bottom: 6px;
}
.pb-frame-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pb-frame-btn {
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.pb-frame-btn.is-selected {
  border-color: #0284c7;
  background: #e0f2fe;
  color: #0369a1;
}
.pb-stickers-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pb-sticker-chip {
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
}
.pb-sticker-chip.is-selected {
  border-color: #0284c7;
  background: #e0f2fe;
  color: #0369a1;
}
.pb-tip-box {
  display: flex;
  gap: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 14px;
}
.pb-tip-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.pb-tip-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: #1e40af;
  margin: 0;
}
.pb-print-portal { display: none; }
@media print {
  /* Only the portaled sheet prints. It is a direct child of <body>, so its
     siblings can simply be removed from the print layout. */
  body.print-photobooth-only > * { display: none !important; }
  body.print-photobooth-only .pb-print-portal { display: block !important; }
  body.print-photobooth-only .pb-print-inner {
    border: 3px solid #0f172a;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    background: #ffffff;
    color: #0f172a;
  }
  body.print-photobooth-only .pb-print-title {
    font-size: 22px;
    margin: 0 0 6px;
  }
  body.print-photobooth-only .pb-print-meta {
    font-size: 14px;
    color: #475569;
    margin: 0 0 16px;
  }
  body.print-photobooth-only .pb-print-img {
    max-width: 80%;
    max-height: 520px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
  }
  body.print-photobooth-only .pb-print-caption {
    font-size: 16px;
    font-weight: 700;
    margin: 14px 0;
  }
  body.print-photobooth-only .pb-print-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
    font-size: 12px;
    color: #64748b;
  }
}

/* ============================================================
   Family Homework 2026 — route, coach ladder, and home mission.
   One strong navigation decision, then quiet instructional support.
   ============================================================ */
html [hidden] { display: none !important; }
.hw-route-chooser {
  margin-top: 16px;
  padding: 16px;
  color: #102a43;
  background: #f8fbff;
  border: 1px solid #bfd7ee;
  border-radius: 16px;
}
.hw-route-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.hw-route-icon { font-size: 25px; line-height: 1; }
.hw-route-heading h2 { margin: 0 0 2px; font-size: 18px; color: #12355b; }
.hw-route-heading p { margin: 0; color: #486581; font-size: 13.5px; }
.hw-route-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.hw-route-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 10px 12px;
  text-align: left;
  color: #243b53;
  background: #fff;
  border: 1.5px solid #b8c9d9;
  border-radius: 12px;
  cursor: pointer;
}
.hw-route-option:hover { border-color: #1fa6a2; background: #f0fdfa; }
.hw-route-option:focus-visible,
.family-mission-picker:focus-visible,
.fam-mission-complete:focus-visible,
.coach-ladder-step > button:focus-visible,
.coach-scratchpad-btn:focus-visible {
  outline: 3px solid #f2c15b;
  outline-offset: 2px;
}
.hw-route-option.is-active {
  color: #0f4f4d;
  background: #e7f7f3;
  border-color: #138a86;
  box-shadow: inset 0 0 0 1px #138a86;
}
.hw-route-time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 48px;
  min-height: 48px;
  font: 800 22px/1 var(--font-display);
  color: #fff;
  background: #12355b;
  border-radius: 50%;
}
.hw-route-option.is-active .hw-route-time { background: #0f766e; }
.hw-route-time small { display: block; margin-top: 2px; font-size: 9px; font-weight: 700; }
.hw-route-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hw-route-copy strong { font: 800 14px/1.2 var(--font-display); }
.hw-route-copy small { color: #5d7285; font-size: 11.5px; line-height: 1.3; }
.hw-route-note { margin: 10px 2px 0; font-size: 12.5px; color: #486581; }
.hw-route-chooser.route-just-changed { box-shadow: 0 0 0 4px rgba(31,166,162,.2); }

body[data-homework-route]:not([data-homework-route="full"]) .homework-tab-extra-note {
  display: none !important;
}
.homework-tab-btn[hidden],
.homework-tab-extra[hidden],
.problem-section[hidden],
.practice-tier[hidden],
.more-practice[hidden] { display: none !important; }

/* Graduated coaching: three short nudges, each stronger than the last. */
.problem-coach-ladder {
  width: 100%;
  border: 1px solid #b9d6d3;
  border-radius: 12px;
  background: #f4fbfa;
  overflow: hidden;
}
.problem-coach-ladder > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 9px 12px;
  color: #0f5f5b;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}
.problem-coach-ladder > summary::-webkit-details-marker { display: none; }
.problem-coach-ladder > summary small { color: #557a78; font-size: 11px; font-weight: 600; }
.coach-ladder-list { margin: 0; padding: 0 12px 12px; list-style: none; }
.coach-ladder-step { border-top: 1px solid #d6e9e7; }
.coach-ladder-step > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 7px 0;
  text-align: left;
  color: #244e4b;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 750;
}
.coach-step-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #fff;
  background: #0f766e;
  border-radius: 50%;
  font-size: 12px;
}
.coach-step-help { padding: 0 0 11px 33px; color: #243b53; }
.coach-step-help p { margin: 0; font-size: 14px; line-height: 1.5; }
.coach-ladder-step.is-revealed > button { color: #0f766e; }
.coach-scratchpad-btn {
  margin-top: 8px;
  padding: 7px 10px;
  color: #12355b;
  background: #fff;
  border: 1px solid #9fb3c8;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

/* Hands-on activities become a shared mission with a visible finish. */
.fam-act-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.family-mission-picker,
.fam-mission-complete {
  min-height: 42px;
  padding: 8px 12px;
  color: #0f5f5b;
  background: #fff;
  border: 1.5px solid #138a86;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
}
.family-mission-picker { flex: 0 0 auto; }
.family-mission-status {
  margin: -4px 0 12px;
  padding: 8px 10px;
  color: #486581;
  background: #f6f9fc;
  border-radius: 8px;
  font-size: 12.5px;
}
.fam-mission-complete { margin-top: 12px; }
.fam-mission-check { margin-right: 5px; }
.fam-act-card.is-mission-picked { box-shadow: 0 0 0 3px rgba(31,166,162,.2); }
.fam-act-card.is-mission-complete { border-color: #15803d; background: #f0fdf4; }
.fam-mission-complete.is-complete { color: #fff; background: #15803d; border-color: #15803d; }
.achievement-shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .hw-route-options { grid-template-columns: 1fr; }
  .hw-route-option { min-height: 64px; }
  .fam-act-head { display: block; }
  .family-mission-picker { width: 100%; margin-top: 12px; }
  .achievement-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .hw-route-chooser.route-just-changed { box-shadow: 0 0 0 3px #1fa6a2; }
}
@media print {
  .hw-route-chooser,
  .problem-coach-ladder,
  .family-mission-picker,
  .fam-mission-complete,
  .family-mission-status { display: none !important; }
}

/* A short finish and tools that stay out of the reading column. */
.hw-tools-menu { margin: 14px 0; }
.hw-tools-menu > summary, .family-mission-alternatives > summary { cursor:pointer; min-height:44px; padding:10px 0; font-size:16px; font-weight:750; }
.hw-hero-titles h1 { margin:0; font-size:clamp(26px,5vw,44px); }
.hw-hero-titles h1 .welcome-title-es { font-size:inherit; }
.homework-message-action { margin:16px 0; }
.homework-message-action p, .homework-optional-extras > p, .family-roles { font-size:16px; line-height:1.55; }
.homework-optional-extras { margin-top:24px; border-top:1px solid #cbd5e1; }
.homework-optional-extras h3 { margin:18px 0 6px; font-size:23px; color:#12355b; }
.homework-extra-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0 22px; }
.homework-extra-actions .btn { display:flex; align-items:center; justify-content:center; min-height:54px; padding:10px; text-align:center; white-space:normal; font-size:16px; }
@media(max-width:700px) { .homework-extra-actions { grid-template-columns:1fr; } }
.hw-utility-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.hw-utility-controls .hw-stuck-fab { position:static; margin:0; box-shadow:none; min-height:44px; }
.hw-utility-controls #nsr-root { position:static !important; inset:auto !important; margin:0 !important; }
.hw-utility-controls #nsr-launcher, .hw-utility-controls #nsr-workbench { min-height:44px; font-size:14px; }
.hw-utility-controls #nsr-panel { position:fixed; top:16px; bottom:auto; right:16px; max-height:calc(100dvh - 32px); }
@media(max-width:600px) { .homework-tab-chrome { position:static; } .hw-tab-meta-row { flex-wrap:wrap; gap:8px; } .hw-hero-share-bar { gap:8px; } }
@media print { .hw-tools-menu, .hw-utility-controls, .homework-message-action, .homework-optional-extras { display:none !important; } }

/* Family plans: one explicit contract at every viewport and on paper. */
.hw-route-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hw-route-option { align-items:flex-start; min-height:48px; }
.hw-route-copy strong, .hw-route-copy small, .hw-route-note { font-size:16px; line-height:1.45; }
.hw-route-time { min-width:60px; width:60px; height:auto; border-radius:12px; white-space:nowrap; font-size:20px; padding:8px 4px; }
.hw-route-time small { font-size:12px; }
.hw-hero { padding:20px !important; }
.hw-hero-stats { display:none; }
.family-reasoning-support, .family-extra-ladder { margin:16px 0; padding:14px; border:1px solid #cbd5e1; border-radius:12px; }
.family-reasoning-support summary, .family-extra-ladder summary { min-height:44px; cursor:pointer; font-weight:700; }
body[data-homework-route="quick"] .learn-extended-block,
body:not([data-homework-route="full"]) .fam-act-corner { display:none; }
@media(max-width:700px) {
  .hw-route-options { grid-template-columns:1fr; }
  .hw-hero { padding:14px !important; }
  .hw-hero-head { margin:0; }
  .hw-hero-emoji, .hw-hero-kicker { display:none; }
  .hw-hero-titles h1 { font-size:24px; }
  .hw-hero-lesson { margin:8px 0; }
  .lang-selector-buttons { gap:6px; }
  .lang-toggle-btn { min-height:44px; }
}
@media print {
  body[data-homework-route="quick"] .practice-tier-challenge,
  body[data-homework-route="quick"] .practice-tier-warmup .problem-section:nth-child(n+3),
  body[data-homework-route="quick"] .hw-answer-sheet > ol > li:nth-child(n+3),
  body.print-problems-only .hw-answer-key,
  body.print-problems-only .feedback,
  body.print-problems-only .problem-check-result,
  body.print-problems-only .solution-explanation,
  body.print-problems-only .problem-feedback { display:none !important; }
  /* A whole card can be taller than the page left on it; avoiding a break
     there pushed slivers and empty pages into the packet. Keep the header and
     question together and let the work space flow. */
  body.print-problems-only .problem-header-row,
  body.print-problems-only .problem-stem { break-after:avoid; break-inside:avoid; }
  body.print-problems-only .problem-section::after { content:""; display:block; min-height:26mm; }
}


/* ============================================================
   MATH KEYPAD — symbol entry for answer fields
   ============================================================ */
.mathpad {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  background: var(--white, #fff);
  border-top: 2px solid var(--teal, #1fa6a2);
  box-shadow: 0 -12px 34px rgba(18, 53, 91, 0.16);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-body, system-ui, sans-serif);
}
.mathpad[hidden] { display: none; }

.mathpad-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mathpad-preview-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  background: var(--teal-light, #dff2ee);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.mathpad-preview-tag {
  flex: none;
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal-ink, #0c6f6b);
}
.mathpad-preview {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy, #12355b);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.mathpad-preview::-webkit-scrollbar { display: none; }
.mathpad-preview:empty::before {
  content: "…";
  color: var(--muted, #5f6f80);
  font-weight: 600;
}
.mathpad-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  line-height: 1.05;
  font-size: .78em;
  margin: 0 2px;
}
.mathpad-frac-den { border-top: 1.5px solid currentColor; padding-top: 1px; }

.mathpad-top-actions { display: flex; gap: 6px; flex: none; }
.mathpad-util {
  min-width: 46px;
  min-height: 42px;
  border: 1.5px solid var(--line, #d7e2ed);
  border-radius: var(--radius-sm, 8px);
  background: var(--white, #fff);
  color: var(--navy, #12355b);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.mathpad-util:hover { background: var(--cream, #f7f4ec); }
.mathpad-hide { border-color: var(--coral, #d9795d); color: var(--coral-ink, #9c4326); }

.mathpad-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mathpad-tab {
  flex: none;
  padding: 7px 12px;
  min-height: 38px;
  border: 1.5px solid var(--line, #d7e2ed);
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--muted, #5f6f80);
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.mathpad-tab.is-active {
  background: var(--navy, #12355b);
  border-color: var(--navy, #12355b);
  color: var(--white, #fff);
}

.mathpad-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 6px;
}
.mathpad-keys[hidden] { display: none; }
.mathpad-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 46px;
  padding: 4px 6px;
  border: 1.5px solid var(--line, #d7e2ed);
  border-radius: var(--radius-sm, 8px);
  background: var(--white, #fff);
  color: var(--navy, #12355b);
  cursor: pointer;
  transition: transform .08s ease, background .12s ease;
}
.mathpad-key:hover { background: var(--teal-light, #dff2ee); border-color: var(--teal, #1fa6a2); }
.mathpad-key:active { transform: scale(.94); background: var(--teal, #1fa6a2); color: var(--white, #fff); }
.mathpad-key-glyph { font-size: 19px; font-weight: 700; line-height: 1.1; }
.mathpad-key-wide { grid-column: span 2; }
.mathpad-key-hint {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted, #5f6f80);
  line-height: 1.15;
  text-align: center;
}
.mathpad-key-hint .lang-en + .lang-es::before { content: none; }

/* Left edge, not right: the right edge already stacks the Save/Resume launcher
   and the "Stuck?" button, and a third pill there covers one of them. */
.mathpad-fab {
  position: fixed;
  left: 14px;
  bottom: calc(min(var(--hw-status-height, 104px), 150px) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 46px;
  border: none;
  border-radius: 999px;
  background: var(--teal, #1fa6a2);
  color: var(--white, #fff);
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(18, 53, 91, 0.22);
  cursor: pointer;
}
.mathpad-fab[hidden] { display: none; }
.mathpad-fab-glyph { font-size: 17px; }

/* The Check stop's sticky bar, the "Stuck?" button and the Save/Resume launcher
   all own the bottom edge; the keypad is the one the caret is in, so they step
   up over it rather than sitting on its preview strip and its ⌫ / ✕ keys.
   The Save/Resume launcher styles itself from a stylesheet linked after this
   one, so the lift is stated at higher specificity rather than later. */
body.mathpad-open .bottom-status-bar { bottom: var(--mathpad-h, 0px); }
body.mathpad-open .hw-stuck-fab {
  bottom: calc(min(var(--hw-status-height, 104px), 150px) + 70px + var(--mathpad-h, 0px));
}
body.mathpad-open #nsr-root {
  bottom: calc(min(var(--hw-status-height, 104px), 150px) + 14px + var(--mathpad-h, 0px)) !important;
}
/* The end of the page is NOT reserved here: syncHomeworkChromeHeights() writes
   body.style.paddingBottom inline, which no stylesheet can outrank. The keypad
   is declared to that function instead, as one more bottom-fixed control. */

/* Which field a tapped symbol lands in, stated on the field itself — the page
   is long enough that the keypad and the answer box are rarely both in view. */
.mathpad-active-field {
  outline: 3px solid var(--teal, #1fa6a2);
  outline-offset: 1px;
}

@media (max-width: 480px) {
  .mathpad-keys { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); }
  .mathpad-preview-tag { display: none; }
}
@media print {
  .mathpad, .mathpad-fab { display: none !important; }
}

/* ============================================================
   GLOBAL HIGH-LEGIBILITY TYPOGRAPHY SCALE (All Homeworks)
   Bigger text, comfortable reading rhythm across all family devices
   ============================================================ */
body {
  font-size: 18px !important;
  line-height: 1.65 !important;
}
.problem-stem {
  font-size: 20px !important;
  line-height: 1.55 !important;
  font-weight: 700 !important;
}
.problem-number-badge {
  font-size: 20px !important;
}
.mc-option-label, .choice-text {
  font-size: 18px !important;
  line-height: 1.5 !important;
}
.learning-big {
  font-size: 20px !important;
  line-height: 1.55 !important;
}
.bilingual-col, .worked-step, .welcome-lead, .watch-for-list, .watch-for, .hw-steps {
  font-size: 17.5px !important;
  line-height: 1.6 !important;
}
.hw-step-guide > summary {
  font-size: 17px !important;
}
.step-label {
  font-size: 17.5px !important;
  line-height: 1.55 !important;
}
.custom-input, .custom-textarea {
  font-size: 18px !important;
}
.btn-primary, .btn-secondary, .btn-check-one {
  font-size: 17.5px !important;
}
.feedback-box, .explanation-box {
  font-size: 17.5px !important;
  line-height: 1.55 !important;
}
.math-talk-bubble {
  font-size: 18.5px !important;
  line-height: 1.55 !important;
}
.obj-popup-def {
  font-size: 18px !important;
  line-height: 1.6 !important;
}