/* EnglishGate B2 shared learning surface v1
   One visual language for Live lessons + Northstar workbook.
   Content types remain distinct; hierarchy, spacing, borders and accents stay coherent. */
:root{
  --b2-learn-ink:#0f172a;
  --b2-learn-text:#334155;
  --b2-learn-muted:#64748b;
  --b2-learn-blue:#2563eb;
  --b2-learn-blue-soft:#eff6ff;
  --b2-learn-blue-line:#bfdbfe;
  --b2-learn-surface:#ffffff;
  --b2-learn-soft:#f8fafc;
  --b2-learn-line:#dbe4ee;
  --b2-learn-success:#16a34a;
  --b2-learn-radius:14px;
  --b2-learn-gap:16px;
}

/* ---------- LIVE LESSON: shared hierarchy ---------- */
.eg-stage-content,
.classroom-stage-content{
  color:var(--b2-learn-text);
}

.eg-stage-content .b2-learning-label,
.classroom-stage-content .b2-learning-label{
  display:flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  margin:24px 0 10px;
  padding:7px 10px;
  border:1px solid var(--b2-learn-blue-line);
  border-radius:9px;
  background:var(--b2-learn-blue-soft);
  color:#1d4ed8;
  font-size:.76rem;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.065em;
  text-transform:uppercase;
}

.eg-stage-content .b2-learning-label.is-mission,
.classroom-stage-content .b2-learning-label.is-mission{
  width:100%;
  padding:13px 15px;
  border-left:4px solid var(--b2-learn-blue);
  background:#f8fbff;
  color:var(--b2-learn-ink);
  font-size:.98rem;
  letter-spacing:.025em;
}

.eg-stage-content .b2-learning-label.is-pronunciation,
.eg-stage-content .b2-learning-label.is-mediation,
.classroom-stage-content .b2-learning-label.is-pronunciation,
.classroom-stage-content .b2-learning-label.is-mediation{
  border-color:var(--b2-learn-line);
  background:var(--b2-learn-soft);
  color:#475569;
}

.eg-stage-content .b2-learning-callout-copy,
.classroom-stage-content .b2-learning-callout-copy{
  max-width:75ch;
  margin:0 0 18px!important;
  padding:14px 16px;
  border:1px solid var(--b2-learn-line);
  border-radius:var(--b2-learn-radius);
  background:var(--b2-learn-surface);
  color:var(--b2-learn-text);
  line-height:1.65;
}

.eg-stage-content .live-book-section,
.eg-stage-content .live-book-subhead:not(.b2-learning-label),
.classroom-stage-content .live-book-section,
.classroom-stage-content .live-book-subhead:not(.b2-learning-label){
  border-color:var(--b2-learn-blue-line);
  color:var(--b2-learn-ink);
}

.eg-stage-content .live-book-subhead:not(.b2-learning-label),
.classroom-stage-content .live-book-subhead:not(.b2-learning-label){
  padding:9px 11px;
  border:1px solid var(--b2-learn-line);
  border-left:3px solid var(--b2-learn-blue);
  border-radius:9px;
  background:var(--b2-learn-soft);
  text-transform:none;
  letter-spacing:.015em;
  font-weight:800;
}

/* Prompts should feel like one family, not alternating unrelated pastel cards. */
.eg-stage-content .live-prompt-grid .live-prompt-row,
.eg-stage-content .live-prompt-grid .live-prompt-row:nth-child(3n+1),
.eg-stage-content .live-prompt-grid .live-prompt-row:nth-child(3n+2),
.eg-stage-content .live-prompt-grid .live-prompt-row:nth-child(3n+3),
.classroom-stage-content .live-prompt-grid .live-prompt-row,
.classroom-stage-content .live-prompt-grid .live-prompt-row:nth-child(3n+1),
.classroom-stage-content .live-prompt-grid .live-prompt-row:nth-child(3n+2),
.classroom-stage-content .live-prompt-grid .live-prompt-row:nth-child(3n+3){
  border:1px solid var(--b2-learn-line);
  border-radius:var(--b2-learn-radius);
  background:var(--b2-learn-surface);
  box-shadow:none;
}

.eg-stage-content .live-prompt-row>span,
.classroom-stage-content .live-prompt-row>span{
  border:1px solid #c7d7fe;
  background:#eef4ff;
  color:#1d4ed8;
}

.eg-stage-content .live-book-bullet,
.classroom-stage-content .live-book-bullet{
  border:1px solid #e3eaf2;
  border-radius:11px;
  background:var(--b2-learn-soft);
}
.eg-stage-content .live-book-bullet:before,
.classroom-stage-content .live-book-bullet:before{color:var(--b2-learn-blue)}

.eg-stage-content .live-vocab-row,
.classroom-stage-content .live-vocab-row,
.eg-stage-content .live-check-row,
.classroom-stage-content .live-check-row{
  border-color:var(--b2-learn-line);
  border-radius:var(--b2-learn-radius);
  background:var(--b2-learn-surface);
  box-shadow:none;
}

.eg-stage-content .live-reading-paragraph,
.classroom-stage-content .live-reading-paragraph{
  max-width:75ch;
  padding:18px 20px;
  border:1px solid var(--b2-learn-line);
  border-radius:var(--b2-learn-radius);
  background:var(--b2-learn-soft);
  color:#25364d;
  line-height:1.75;
}

/* ---------- LANGUAGE FOCUS / GRAMMAR ---------- */
.grammar-live-lesson,
.grammar-book-format{
  --grammar-blue:var(--b2-learn-blue);
  color:var(--b2-learn-text);
}
.grammar-book-section,
.grammar-reading-card,
.grammar-read-question,
.grammar-remember,
.grammar-live-question,
.grammar-fix-item,
.grammar-challenge,
.grammar-confidence{
  border-color:var(--b2-learn-line)!important;
  border-radius:var(--b2-learn-radius)!important;
  box-shadow:none!important;
}
.grammar-book-section,
.grammar-reading-card,
.grammar-read-question,
.grammar-live-question,
.grammar-fix-item,
.grammar-challenge,
.grammar-confidence{background:var(--b2-learn-surface)!important}
.grammar-remember{background:var(--b2-learn-soft)!important}
.grammar-book-number{
  background:var(--b2-learn-blue-soft)!important;
  color:#1d4ed8!important;
}
.grammar-live-option{
  border-color:var(--b2-learn-line)!important;
  border-radius:11px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.grammar-live-option:hover{border-color:#93b4fd!important;background:#f8fbff!important}

/* ---------- WORKBOOK: same visual tokens ---------- */
.b2-microflow .micro-stage{
  border-color:var(--b2-learn-line)!important;
  border-radius:16px!important;
  background:var(--b2-learn-surface)!important;
  box-shadow:none!important;
}
.b2-northstar-flow .northstar-reading,
.b2-microflow .micro-scene,
.b2-microflow .live-audio-player,
.b2-microflow .micro-help,
.b2-northstar-flow .northstar-model,
.b2-northstar-flow .northstar-help,
.b2-microflow .micro-input{
  border-color:var(--b2-learn-line)!important;
  border-radius:var(--b2-learn-radius)!important;
  box-shadow:none!important;
}
.b2-northstar-flow .northstar-reading,
.b2-microflow .micro-help,
.b2-northstar-flow .northstar-model,
.b2-northstar-flow .northstar-help,
.b2-microflow .micro-input{
  background:var(--b2-learn-soft)!important;
}
.b2-microflow .micro-choices button{
  border-color:var(--b2-learn-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.b2-microflow .micro-choices button:hover{
  border-color:#93b4fd!important;
  background:#f8fbff!important;
}
.b2-microflow .micro-choices button.is-selected{
  border-color:#7890df!important;
  background:#f2f5ff!important;
}
.b2-microflow .micro-input textarea,
.b2-microflow .micro-input input{
  border-color:#cbd5e1!important;
  border-radius:11px!important;
  background:#fff!important;
}
.b2-microflow .micro-feedback{
  border-radius:11px!important;
  box-shadow:none!important;
}

/* The phase label is the same hierarchy device used by Live lesson learning labels. */
.b2-microflow .micro-stage::before{
  padding:6px 9px;
  border:1px solid var(--b2-learn-blue-line);
  border-radius:8px;
  background:var(--b2-learn-blue-soft);
  color:#1d4ed8!important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:760px){
  .eg-stage-content .b2-learning-label,
  .classroom-stage-content .b2-learning-label{margin-top:16px;font-size:.68rem}
  .eg-stage-content .b2-learning-label.is-mission,
  .classroom-stage-content .b2-learning-label.is-mission{padding:11px 12px;font-size:.88rem}
  .eg-stage-content .b2-learning-callout-copy,
  .classroom-stage-content .b2-learning-callout-copy{padding:12px 13px;margin-bottom:13px!important}
  .eg-stage-content .live-reading-paragraph,
  .classroom-stage-content .live-reading-paragraph{padding:14px 15px}
}
@media(prefers-reduced-motion:reduce){
  .eg-stage-content *,
  .classroom-stage-content *,
  .b2-microflow *{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}
}


/* =========================================================
   B2 THEME COHERENCE v2
   Canonical semantic palette:
   blue = learning/action; slate = structure; green = success;
   red = error; amber = review. No skill-specific decorative hues.
   ========================================================= */
:root{
  --b2-learn-blue:#2563eb;
  --b2-learn-blue-dark:#1d4ed8;
  --b2-learn-blue-soft:#eff6ff;
  --b2-learn-blue-line:#bfdbfe;
  --b2-learn-ink:#0f172a;
  --b2-learn-text:#334155;
  --b2-learn-muted:#64748b;
  --b2-learn-surface:#ffffff;
  --b2-learn-soft:#f8fafc;
  --b2-learn-line:#e2e8f0;
  --b2-learn-line-strong:#cbd5e1;
  --b2-learn-success:#16a34a;
  --b2-learn-success-soft:#f0fdf4;
  --b2-learn-error:#dc2626;
  --b2-learn-error-soft:#fef2f2;
  --b2-learn-review:#d97706;
  --b2-learn-review-soft:#fffbeb;
}

/* Map legacy design variables to the B2 palette only. */
.student-live-book,
.teacher-live-book,
.admin-live-book,
.classroom-player,
body.b2-premium-workbook-mode{
  --navy:var(--b2-learn-blue);
  --navy-2:var(--b2-learn-blue-dark);
  --teal:var(--b2-learn-blue);
  --teal-soft:var(--b2-learn-blue-soft);
  --pink:var(--b2-learn-blue);
  --gold:var(--b2-learn-review);
  --purple:var(--b2-learn-blue);
  --green:var(--b2-learn-success);
  --text:var(--b2-learn-text);
  --muted:var(--b2-learn-muted);
  --border:var(--b2-learn-line);
  --bg:var(--b2-learn-soft);
  --card:var(--b2-learn-surface);

  --eg-blue:var(--b2-learn-blue);
  --eg-blue-2:var(--b2-learn-blue-dark);
  --eg-blue-soft:var(--b2-learn-blue-soft);
  --eg-red:var(--b2-learn-error);
  --eg-red-soft:var(--b2-learn-error-soft);
  --eg-ink:var(--b2-learn-ink);
  --eg-ink-2:var(--b2-learn-text);
  --eg-border:var(--b2-learn-line);
  --eg-muted:var(--b2-learn-muted);

  --eg-vocab-primary:var(--b2-learn-blue);
  --eg-vocab-accent:var(--b2-learn-blue);
  --eg-vocab-text:var(--b2-learn-ink);
  --eg-vocab-muted:var(--b2-learn-muted);
  --eg-vocab-border:var(--b2-learn-line);
  --eg-vocab-bg:var(--b2-learn-soft);

  --eg-g-primary:var(--b2-learn-blue);
  --eg-g-text:var(--b2-learn-ink);
  --eg-g-muted:var(--b2-learn-muted);
  --eg-g-border:var(--b2-learn-line);

  --eg-read-primary:var(--b2-learn-blue);
  --eg-read-text:var(--b2-learn-ink);
  --eg-read-muted:var(--b2-learn-muted);
  --eg-read-border:var(--b2-learn-line);

  --eg-li-primary:var(--b2-learn-blue);
  --eg-li-primary-dark:var(--b2-learn-blue-dark);
  --eg-li-text:var(--b2-learn-ink);
  --eg-li-muted:var(--b2-learn-muted);
  --eg-li-border:var(--b2-learn-line);
}

/* B2 lesson shell: remove red/pink decorative theme leakage. */
.app.student-mode .student-live-book .eg-lesson-header,
.teacher-live-book .eg-lesson-header,
.admin-live-book .eg-lesson-header{
  background:linear-gradient(180deg,#fff 0%,var(--b2-learn-soft) 100%)!important;
}
.app.student-mode .student-live-book .eg-stage.is-current,
.teacher-live-book .eg-stage.is-current,
.admin-live-book .eg-stage.is-current,
.teacher-presentation-stage.is-current{
  border-color:var(--b2-learn-blue-line)!important;
  background:var(--b2-learn-blue-soft)!important;
  color:var(--b2-learn-blue-dark)!important;
  box-shadow:none!important;
}
.app.student-mode .student-live-book .eg-goal,
.teacher-live-book .eg-goal,
.admin-live-book .eg-goal{
  border-left-color:var(--b2-learn-blue)!important;
  background:var(--b2-learn-soft)!important;
  color:var(--b2-learn-text)!important;
}
.student-live-book .live-book-bullet:before,
.teacher-live-book .live-book-bullet:before,
.admin-live-book .live-book-bullet:before,
.classroom-player .live-book-bullet:before{
  color:var(--b2-learn-blue)!important;
}

/* Neutralize the legacy green Grammar Lesson theme. */
.eg-stage.grammar-lesson-stage,
.teacher-presentation-stage.grammar-lesson-stage{
  border-color:var(--b2-learn-line)!important;
  background:#fff!important;
}
.eg-stage.grammar-lesson-stage:hover,
.teacher-presentation-stage.grammar-lesson-stage:hover{
  border-color:var(--b2-learn-blue-line)!important;
  background:#f8fbff!important;
}
.eg-stage.grammar-lesson-stage.is-current,
.teacher-presentation-stage.grammar-lesson-stage.is-current{
  border-color:var(--b2-learn-blue-line)!important;
  background:var(--b2-learn-blue-soft)!important;
  box-shadow:none!important;
}
.eg-stage.grammar-lesson-stage>span:first-child{
  background:var(--b2-learn-blue-soft)!important;
  color:var(--b2-learn-blue-dark)!important;
}
.grammar-book-hero{
  border-color:var(--b2-learn-blue-line)!important;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)!important;
}
.grammar-live-kicker{
  background:var(--b2-learn-blue-soft)!important;
  color:var(--b2-learn-blue-dark)!important;
}
.grammar-book-hero h2,
.grammar-book-hero h3,
.grammar-book-section h3,
.grammar-book-section h4{color:var(--b2-learn-ink)!important}
.grammar-book-hero p,
.grammar-book-section p,
.grammar-confidence label,
.grammar-about-fields label{color:var(--b2-learn-text)!important}
.grammar-book-hero p{border-top-color:var(--b2-learn-line)!important}
.grammar-notice-examples strong{
  border-left-color:var(--b2-learn-blue)!important;
  background:var(--b2-learn-blue-soft)!important;
  color:var(--b2-learn-text)!important;
}
.grammar-remember>span,
.grammar-challenge>b{color:var(--b2-learn-blue-dark)!important}
.grammar-remember th{
  background:var(--b2-learn-soft)!important;
  color:var(--b2-learn-text)!important;
}
.grammar-remember th,
.grammar-remember td{border-color:var(--b2-learn-line)!important}
.grammar-live-option>span{
  background:var(--b2-learn-soft)!important;
  color:var(--b2-learn-muted)!important;
}
.grammar-live-option:hover:not(:disabled){
  border-color:var(--b2-learn-blue-line)!important;
  background:#f8fbff!important;
}
.grammar-live-option.is-correct{
  border-color:#86efac!important;
  background:var(--b2-learn-success-soft)!important;
  color:#166534!important;
}
.grammar-live-option.is-correct>span{
  background:var(--b2-learn-success)!important;
  color:#fff!important;
}
.grammar-live-option.is-wrong{
  border-color:#fecaca!important;
  background:var(--b2-learn-error-soft)!important;
  color:#991b1b!important;
}
.grammar-live-option.is-wrong>span{
  background:var(--b2-learn-error)!important;
  color:#fff!important;
}
.is-good,.grammar-live-feedback.is-good{color:#166534!important}
.is-bad,.grammar-live-feedback.is-bad{color:#991b1b!important}
.grammar-fix-item>b{color:#991b1b!important}
.grammar-fix-item input,
.grammar-about-fields input,
.grammar-challenge textarea{
  border-color:var(--b2-learn-line-strong)!important;
  color:var(--b2-learn-text)!important;
}
.grammar-challenge{
  border-color:var(--b2-learn-blue-line)!important;
  background:#f8fbff!important;
}
.grammar-quick-check{
  border-color:var(--b2-learn-line)!important;
  background:#fff!important;
}

/* Remove the purple vocabulary identity inside B2 workbook. */
body.b2-premium-workbook-mode .eg-vocabulary-page .eg-skill-kicker,
body.b2-premium-workbook-mode .eg-vocab-reference .eg-panel-heading small,
body.b2-premium-workbook-mode .eg-vocabulary-page .eg-task-panel-head small,
body.b2-premium-workbook-mode .eg-vocabulary-page .vocab-core-card .question-stage span,
body.b2-premium-workbook-mode .eg-vocabulary-page .guided-question .question-stage span,
body.b2-premium-workbook-mode .vocab-question-meta span:first-child{
  color:var(--b2-learn-blue-dark)!important;
}
body.b2-premium-workbook-mode .eg-vocabulary-page .eg-question-count,
body.b2-premium-workbook-mode .eg-vocab-reference-card>span:first-child{
  border-color:var(--b2-learn-blue-line)!important;
  background:var(--b2-learn-blue-soft)!important;
  color:var(--b2-learn-blue-dark)!important;
}
body.b2-premium-workbook-mode .eg-vocabulary-page .eg-tip-card{
  border-color:var(--b2-learn-blue-line)!important;
  background:#f8fbff!important;
  color:var(--b2-learn-text)!important;
}
body.b2-premium-workbook-mode .eg-vocabulary-page .mcq-picker label:hover,
body.b2-premium-workbook-mode .eg-vocabulary-page .mcq-option:hover,
body.b2-premium-workbook-mode .eg-vocabulary-page label:has(input[type="radio"]):hover,
body.b2-premium-workbook-mode .eg-vocabulary-page label:has(input[type="checkbox"]):hover{
  border-color:var(--b2-learn-blue-line)!important;
  background:#f8fbff!important;
}
body.b2-premium-workbook-mode .eg-vocabulary-page .mcq-picker label:has(input:checked),
body.b2-premium-workbook-mode .eg-vocabulary-page .mcq-option:has(input:checked),
body.b2-premium-workbook-mode .eg-vocabulary-page label:has(input[type="radio"]:checked),
body.b2-premium-workbook-mode .eg-vocabulary-page label:has(input[type="checkbox"]:checked){
  border-color:#93c5fd!important;
  background:var(--b2-learn-blue-soft)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}
body.b2-premium-workbook-mode .eg-vocabulary-page .core-exact-entry button{
  border-color:var(--b2-learn-blue-line)!important;
  color:var(--b2-learn-blue-dark)!important;
}
body.b2-premium-workbook-mode .vocab-progress-track>span{
  background:var(--b2-learn-blue)!important;
}

/* Northstar workbook: one accent across all learning stages. */
body.b2-premium-workbook-mode .b2-microflow{
  --eg-blue:var(--b2-learn-blue);
  --eg-blue-soft:var(--b2-learn-blue-soft);
  --eg-ink:var(--b2-learn-ink);
  --eg-text:var(--b2-learn-text);
  --eg-muted:var(--b2-learn-muted);
  --eg-line:var(--b2-learn-line);
  --eg-line-strong:var(--b2-learn-line-strong);
  --eg-soft:var(--b2-learn-soft);
}
body.b2-premium-workbook-mode .b2-microflow .micro-stage::before{
  border-color:var(--b2-learn-blue-line)!important;
  background:var(--b2-learn-blue-soft)!important;
  color:var(--b2-learn-blue-dark)!important;
}
body.b2-premium-workbook-mode .b2-microflow .primary-btn,
body.b2-premium-workbook-mode .b2-microflow .micro-action button{
  background:var(--b2-learn-blue)!important;
  color:#fff!important;
}
body.b2-premium-workbook-mode .b2-microflow button.is-selected>span{
  border-color:var(--b2-learn-blue)!important;
  background:var(--b2-learn-blue)!important;
  color:#fff!important;
}
body.b2-premium-workbook-mode .b2-microflow textarea:focus,
body.b2-premium-workbook-mode .b2-microflow input:focus{
  border-color:#93c5fd!important;
  outline-color:rgba(37,99,235,.12)!important;
}

/* Semantic colors are reserved for state, not decoration. */
.student-live-book .feedback.good,
.teacher-live-book .feedback.good,
.admin-live-book .feedback.good,
body.b2-premium-workbook-mode .feedback.good,
body.b2-premium-workbook-mode .is-good{
  color:#166534!important;
}
.student-live-book .feedback.bad,
.teacher-live-book .feedback.bad,
.admin-live-book .feedback.bad,
body.b2-premium-workbook-mode .feedback.bad,
body.b2-premium-workbook-mode .is-bad{
  color:#991b1b!important;
}