/* EnglishGate B2 Premium Learning UI v3
   Taste direction: 7 / 3 / 4
   Jev decision contract: source | decision | compose | repair
   Mature, editorial, adult-professional learning workspace. */

body.b2-premium-workbook-mode{
  margin:0;
  background:#f3f5f8;
  color:#17233a;
  overflow-x:hidden;
}
body.b2-premium-workbook-mode .app{
  min-height:100svh;
  background:#f3f5f8!important;
}
body.b2-premium-workbook-mode .sidebar,
body.b2-premium-workbook-mode .topbar,
body.b2-premium-workbook-mode .bottom-nav{
  display:none!important;
}
body.b2-premium-workbook-mode .main,
body.b2-premium-workbook-mode .app.student-mode .main{
  margin-left:0!important;
  min-height:100svh;
  background:#f3f5f8!important;
}
body.b2-premium-workbook-mode .content,
body.b2-premium-workbook-mode .app.student-mode .content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:18px clamp(16px,3vw,42px) 64px!important;
}

.b2-microflow{
  --eg-ink:#10203a;
  --eg-text:#263a57;
  --eg-muted:#6f7e92;
  --eg-line:#d9e0e8;
  --eg-line-strong:#c6d0dc;
  --eg-surface:#ffffff;
  --eg-soft:#f7f9fb;
  --eg-blue:#3157d5;
  --eg-blue-soft:#eef2ff;
  --eg-green:#176b4d;
  --eg-green-soft:#eff8f3;
  --eg-warn:#8b5d17;
  --eg-warn-soft:#fff8ea;
  width:min(1180px,100%);
  max-width:1180px;
  min-height:calc(100svh - 36px);
  margin:0 auto;
  padding:0;
  color:var(--eg-text);
  font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.b2-microflow *,
.b2-microflow *::before,
.b2-microflow *::after{box-sizing:border-box}

/* Compact lesson toolbar */
.b2-microflow .micro-top{
  position:sticky;
  top:10px;
  z-index:30;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:56px;
  margin:0 0 18px;
  padding:7px 9px;
  border:1px solid var(--eg-line);
  border-radius:14px;
  background:#fff;
}
.b2-microflow .micro-top .ghost-btn{
  min-height:40px;
  padding:9px 12px;
  border:1px solid var(--eg-line);
  border-radius:9px;
  background:#fff;
  color:#334760;
  font-weight:720;
  box-shadow:none;
  transition:border-color .14s ease,background .14s ease;
}
.b2-microflow .micro-top .ghost-btn:hover{
  border-color:#aebbc9;
  background:#f8fafc;
}
.b2-microflow .micro-title{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:3px 10px;
  min-width:0;
  text-align:left;
}
.b2-microflow .micro-title small{
  grid-column:1;
  color:var(--eg-muted);
  font-size:.68rem;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.b2-microflow .micro-title strong{
  grid-column:2;
  overflow:hidden;
  color:var(--eg-ink);
  font-size:1rem;
  font-weight:760;
  letter-spacing:-.015em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.b2-microflow .micro-preview{
  padding:5px 8px;
  border:0;
  border-radius:7px;
  background:#f3f5f7;
  color:#7c8898;
  font-size:.66rem;
  font-weight:720;
}

/* Quiet journey rail */
.b2-microflow .micro-framework{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:5px;
  max-width:720px;
  margin:0 auto 7px;
}
.b2-microflow .micro-framework span{
  display:grid;
  place-items:center;
  min-height:29px;
  padding:5px 4px;
  border:1px solid #e1e6ed;
  border-radius:8px;
  background:#f9fafb;
  color:#9aa5b4;
  font-size:.64rem;
  font-weight:780;
  letter-spacing:.03em;
}
.b2-microflow .micro-framework span.is-current{
  border-color:#9fb0ec;
  background:var(--eg-blue-soft);
  color:#294db9;
}
.b2-microflow .micro-framework span.is-done{
  border-color:#d3dae4;
  background:#fff;
  color:#59687b;
}
.b2-microflow .micro-progress-meta{
  display:flex;
  justify-content:space-between;
  max-width:720px;
  margin:10px auto 6px;
  color:#7b8797;
  font-size:.67rem;
  font-weight:700;
}
.b2-microflow .micro-progress-meta span:first-child{
  color:#3c57a9;
  letter-spacing:.06em;
}
.b2-microflow .micro-progress{
  max-width:720px;
  height:3px;
  margin:0 auto 24px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e7ee;
}
.b2-microflow .micro-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--eg-blue);
  transition:width .2s ease;
}

/* Shared learning canvas */
.b2-microflow .micro-stage{
  position:relative;
  display:grid;
  gap:17px;
  max-width:820px;
  min-height:500px;
  margin:0 auto;
  padding:30px 32px 34px;
  border:1px solid var(--eg-line);
  border-radius:18px;
  background:#fff;
  box-shadow:none;
}
.b2-microflow .micro-stage::before{
  display:block;
  width:max-content;
  color:#7a8797;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.b2-microflow[data-phase="see"] .micro-stage::before{content:"SEE · Understand the situation"}
.b2-microflow[data-phase="choose"] .micro-stage::before{content:"CHOOSE · Notice what works"}
.b2-microflow[data-phase="change"] .micro-stage::before{content:"CHANGE · Make it yours"}
.b2-microflow[data-phase="use"] .micro-stage::before{content:"USE · Communicate independently"}
.b2-microflow[data-phase="fix"] .micro-stage::before{content:"FIX · Improve only what needs it"}

.b2-microflow .micro-prompt{padding:0}
.b2-microflow .micro-prompt h1{
  max-width:20ch;
  margin:0;
  color:var(--eg-ink);
  font-size:clamp(1.55rem,2.7vw,2.25rem);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:760;
  text-wrap:balance;
}
.b2-microflow .micro-prompt p{
  max-width:60ch;
  margin:9px 0 0;
  color:#68788c;
  font-size:.96rem;
  line-height:1.6;
}
.b2-microflow .micro-question-count{
  width:max-content;
  padding:4px 7px;
  border-radius:6px;
  background:#f3f5f7;
  color:#718096;
  font-size:.66rem;
  font-weight:740;
  font-variant-numeric:tabular-nums;
}

/* Source content */
.b2-northstar-flow .northstar-reading{
  display:grid;
  gap:12px;
  max-height:56vh;
  overflow:auto;
  padding:22px 24px;
  border:1px solid var(--eg-line);
  border-radius:12px;
  background:#f8fafc;
  scrollbar-width:thin;
}
.b2-northstar-flow .northstar-reading>span{
  color:#405aa9;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.09em;
}
.b2-northstar-flow .northstar-reading p{
  margin:0;
  color:#2c405b;
  font-size:1rem;
  line-height:1.76;
}
.b2-microflow .micro-scene{
  display:grid;
  gap:10px;
  padding:0;
}
.b2-microflow .micro-turn{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.b2-microflow .micro-turn.is-you{flex-direction:row-reverse}
.b2-microflow .micro-turn>div{
  max-width:min(640px,88%);
  padding:13px 15px;
  border:1px solid var(--eg-line);
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}
.b2-microflow .micro-turn.is-you>div{
  border-color:#bcc9ed;
  background:#f4f6ff;
}
.b2-microflow .micro-avatar{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#edf1f5;
  color:#4d6078;
  font-weight:800;
}
.b2-microflow .is-you .micro-avatar{
  background:#3558c8;
  color:#fff;
}
.b2-microflow .micro-turn small{
  display:block;
  margin-bottom:3px;
  color:#77869a;
  font-size:.64rem;
  font-weight:790;
  letter-spacing:.06em;
}
.b2-microflow .micro-turn p{
  margin:0;
  color:#2a3f5a;
  font-size:.97rem;
  line-height:1.55;
}

/* Answer choices */
.b2-microflow .micro-choices,
.b2-microflow .micro-strategies{
  display:grid;
  gap:9px;
}
.b2-microflow .micro-choice,
.b2-microflow .micro-strategies button{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:12px;
  width:100%;
  min-height:66px;
  padding:10px 14px 10px 10px;
  border:1px solid var(--eg-line);
  border-radius:11px;
  background:#fff;
  color:var(--eg-text);
  text-align:left;
  cursor:pointer;
  box-shadow:none;
  transition:border-color .14s ease,background .14s ease;
}
.b2-microflow .micro-choice:hover,
.b2-microflow .micro-strategies button:hover{
  border-color:#9dacd6;
  background:#fbfcff;
}
.b2-microflow .micro-choice>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #dde3ea;
  border-radius:8px;
  background:#f6f7f9;
  color:#5d6c7e;
  font-size:.75rem;
  font-weight:820;
}
.b2-microflow .micro-choice strong{
  color:#263a55;
  font-size:.96rem;
  line-height:1.4;
  font-weight:630;
}
.b2-microflow button.is-selected{
  border-color:#7890df;
  background:#f2f5ff;
}
.b2-microflow button.is-selected>span{
  border-color:var(--eg-blue);
  background:var(--eg-blue);
  color:#fff;
}

/* Response workspace */
.b2-microflow .micro-input{
  display:grid;
  gap:8px;
}
.b2-microflow .micro-input textarea,
.b2-microflow .micro-input input{
  width:100%;
  min-height:132px;
  padding:16px 17px;
  border:1px solid #cbd4df;
  border-radius:11px;
  background:#fff;
  color:#172b48;
  font:inherit;
  font-size:1rem;
  line-height:1.6;
  box-shadow:none;
  resize:vertical;
}
.b2-microflow .micro-input textarea:focus,
.b2-microflow .micro-input input:focus{
  border-color:#7189d9;
  outline:3px solid rgba(49,87,213,.1);
}
.b2-microflow .micro-counter{
  justify-self:end;
  color:#7b8796;
  font-size:.72rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.b2-microflow .micro-help,
.b2-northstar-flow .northstar-model,
.b2-northstar-flow .northstar-help{
  border:1px solid #dfe4ea;
  border-radius:10px;
  background:#f8fafc;
  box-shadow:none;
}
.b2-microflow .micro-help{
  display:grid;
  gap:5px;
  padding:12px 14px;
}
.b2-microflow .micro-help strong,
.b2-northstar-flow .northstar-model small{
  color:#68778a;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.07em;
}
.b2-northstar-flow .northstar-model{
  display:grid;
  gap:6px;
  padding:14px 15px;
}
.b2-northstar-flow .northstar-model strong,
.b2-northstar-flow .northstar-final-preview{
  color:#263b57;
  line-height:1.62;
}
.b2-northstar-flow .northstar-help summary{
  padding:11px 13px;
  color:#3557bd;
  font-size:.82rem;
  font-weight:740;
}

/* Audio */
.b2-microflow .live-audio-player{
  overflow:hidden;
  border:1px solid var(--eg-line)!important;
  border-radius:12px!important;
  background:#f8fafc!important;
  box-shadow:none!important;
}
.b2-microflow .live-audio-heading{
  padding:14px 16px!important;
  border-bottom:1px solid #e3e8ee!important;
  background:#fff!important;
}
.b2-microflow .audio-player-main{padding:15px 16px!important}
.b2-microflow .play-btn{
  background:#3157d5!important;
  box-shadow:none!important;
}
.b2-microflow .live-audio-transcript{
  border-top:1px solid #e3e8ee!important;
  background:#fff!important;
}

/* Actions and feedback */
.b2-microflow .micro-action{
  display:flex;
  justify-content:flex-end;
}
.b2-microflow .micro-action .primary-btn,
.b2-microflow .micro-feedback .primary-btn,
.b2-microflow .micro-finish-actions .primary-btn{
  min-height:47px;
  min-width:128px;
  padding:11px 17px;
  border:0;
  border-radius:9px;
  background:#10213e!important;
  color:#fff!important;
  font-weight:740;
  box-shadow:none!important;
  transition:background .14s ease;
}
.b2-microflow .micro-action .primary-btn:hover,
.b2-microflow .micro-feedback .primary-btn:hover,
.b2-microflow .micro-finish-actions .primary-btn:hover{
  background:#294db9!important;
}
.b2-microflow .primary-btn:disabled{
  background:#c7ced8!important;
  color:#f8fafc!important;
  cursor:not-allowed;
}
.b2-microflow .micro-feedback{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 14px;
  align-items:center;
  padding:14px 15px 14px 17px;
  border:1px solid;
  border-radius:10px;
  box-shadow:none;
}
.b2-microflow .micro-feedback::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 3px 3px 0;
}
.b2-microflow .micro-feedback p{
  grid-column:1;
  margin:0;
  color:#506176;
  line-height:1.45;
}
.b2-microflow .micro-feedback button{
  grid-column:2;
  grid-row:1 / span 2;
  margin:0;
}
.b2-microflow .micro-feedback.is-good{
  border-color:#cae3d6;
  background:var(--eg-green-soft);
}
.b2-microflow .micro-feedback.is-good::before{background:var(--eg-green)}
.b2-microflow .micro-feedback.is-hint{
  border-color:#ead5ab;
  background:var(--eg-warn-soft);
}
.b2-microflow .micro-feedback.is-hint::before{background:#b47b21}

/* Distinct Jev-directed stage structures */
@media(min-width:900px){
  .b2-microflow[data-ui-mode="source"] .micro-stage{
    max-width:1160px;
    min-height:585px;
    grid-template-columns:minmax(0,1.16fr) minmax(360px,.84fr);
    grid-template-rows:auto auto 1fr;
    gap:15px 32px;
    align-items:start;
  }
  .b2-microflow[data-ui-mode="source"] .micro-stage::before{
    grid-column:1 / -1;
    grid-row:1;
  }
  .b2-microflow[data-ui-mode="source"] .northstar-reading,
  .b2-microflow[data-ui-mode="source"] .micro-scene,
  .b2-microflow[data-ui-mode="source"] .live-audio-player{
    grid-column:1;
    grid-row:2 / span 7;
    position:sticky;
    top:92px;
    align-self:start;
    max-height:calc(100svh - 136px);
  }
  .b2-microflow[data-ui-mode="source"] .micro-question-count,
  .b2-microflow[data-ui-mode="source"] .micro-prompt,
  .b2-microflow[data-ui-mode="source"] .micro-choices,
  .b2-microflow[data-ui-mode="source"] #northstarFeedback,
  .b2-microflow[data-ui-mode="source"] #microFeedbackSlot{
    grid-column:2;
  }

  .b2-microflow[data-ui-mode="decision"] .micro-stage{
    max-width:760px;
    min-height:520px;
    align-content:start;
    padding:34px 42px 38px;
  }
  .b2-microflow[data-ui-mode="decision"] .micro-prompt h1{
    max-width:16ch;
    font-size:clamp(1.8rem,3vw,2.4rem);
  }

  .b2-microflow[data-ui-mode="compose"] .micro-stage{
    max-width:1100px;
    min-height:600px;
    grid-template-columns:minmax(290px,.76fr) minmax(480px,1.24fr);
    grid-template-rows:auto auto auto 1fr auto;
    gap:14px 38px;
    align-items:start;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-stage::before{
    grid-column:1 / -1;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-scene,
  .b2-microflow[data-ui-mode="compose"] .micro-prompt,
  .b2-microflow[data-ui-mode="compose"] .micro-help,
  .b2-microflow[data-ui-mode="compose"] .northstar-model,
  .b2-microflow[data-ui-mode="compose"] .northstar-help{
    grid-column:1;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-input,
  .b2-microflow[data-ui-mode="compose"] .micro-action,
  .b2-microflow[data-ui-mode="compose"] #northstarFeedback,
  .b2-microflow[data-ui-mode="compose"] #microFeedbackSlot{
    grid-column:2;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-input{
    grid-row:2 / span 3;
    min-height:300px;
    padding:18px;
    border:1px solid #dce2ea;
    border-radius:12px;
    background:#f7f9fb;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-input textarea{
    min-height:220px;
    background:#fff;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-input input{
    min-height:56px;
    background:#fff;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-action{
    grid-row:5;
  }

  .b2-microflow[data-ui-mode="repair"] .micro-stage{
    max-width:1040px;
    min-height:560px;
    grid-template-columns:minmax(310px,.9fr) minmax(420px,1.1fr);
    grid-template-rows:auto auto 1fr auto;
    gap:15px 36px;
    align-items:start;
  }
  .b2-microflow[data-ui-mode="repair"] .micro-stage::before{
    grid-column:1 / -1;
  }
  .b2-microflow[data-ui-mode="repair"] .northstar-model,
  .b2-microflow[data-ui-mode="repair"] .micro-help,
  .b2-microflow[data-ui-mode="repair"] .northstar-final-preview{
    grid-column:1;
  }
  .b2-microflow[data-ui-mode="repair"] .micro-prompt,
  .b2-microflow[data-ui-mode="repair"] .micro-input,
  .b2-microflow[data-ui-mode="repair"] .micro-action,
  .b2-microflow[data-ui-mode="repair"] #northstarFeedback,
  .b2-microflow[data-ui-mode="repair"] #microFeedbackSlot{
    grid-column:2;
  }
  .b2-microflow[data-ui-mode="repair"] .micro-input textarea{
    min-height:185px;
  }
}

/* Completion */
.b2-microflow .micro-complete{
  display:grid;
  justify-items:start;
  gap:13px;
  max-width:760px;
  margin:0 auto;
  padding:24px 4px;
  border:0;
  border-radius:0;
  background:transparent;
  text-align:left;
  box-shadow:none;
}
.b2-microflow .micro-complete-mark{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:10px;
  background:var(--eg-green-soft);
  color:var(--eg-green);
  font-size:1.25rem;
  font-weight:900;
}
.b2-microflow .micro-complete h1{
  max-width:21ch;
  margin:0;
  color:var(--eg-ink);
  font-size:clamp(1.8rem,4vw,2.55rem);
  line-height:1.07;
  letter-spacing:-.035em;
}
.b2-microflow .micro-complete>p{
  max-width:60ch;
  margin:0;
  color:#66778c;
  line-height:1.6;
}
.b2-microflow .micro-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  width:100%;
  max-width:640px;
  gap:0;
  border-top:1px solid var(--eg-line);
  border-bottom:1px solid var(--eg-line);
}
.b2-microflow .micro-summary div{
  display:grid;
  gap:3px;
  padding:17px 18px;
  border:0;
  border-right:1px solid var(--eg-line);
  border-radius:0;
  background:transparent;
}
.b2-microflow .micro-summary div:last-child{border-right:0}
.b2-microflow .micro-summary strong{
  color:var(--eg-ink);
  font-size:1.4rem;
  font-variant-numeric:tabular-nums;
}
.b2-microflow .micro-summary span{
  color:#748195;
  font-size:.73rem;
}
.b2-microflow .micro-finish-actions{
  display:flex;
  justify-content:flex-start;
  gap:9px;
}

/* Mobile */
@media(max-width:899px){
  body.b2-premium-workbook-mode .content,
  body.b2-premium-workbook-mode .app.student-mode .content{
    padding:0 0 34px!important;
  }
  .b2-microflow{
    width:100%;
    min-height:100svh;
  }
  .b2-microflow .micro-top{
    top:0;
    min-height:55px;
    margin:0;
    padding:7px 10px;
    border-width:0 0 1px;
    border-radius:0;
  }
  .b2-microflow .micro-title{
    grid-template-columns:1fr;
    gap:1px;
  }
  .b2-microflow .micro-title small,
  .b2-microflow .micro-title strong{grid-column:1}
  .b2-microflow .micro-preview{display:none}
  .b2-microflow .micro-framework,
  .b2-microflow .micro-progress-meta,
  .b2-microflow .micro-progress{
    margin-left:14px;
    margin-right:14px;
  }
  .b2-microflow .micro-framework{margin-top:11px}
  .b2-microflow .micro-stage{
    min-height:calc(100svh - 168px);
    margin:0;
    padding:21px 16px 28px;
    border-width:1px 0 0;
    border-radius:0;
  }
  .b2-microflow .micro-stage::before{
    font-size:.58rem;
  }
  .b2-northstar-flow .northstar-reading{
    max-height:none;
    overflow:visible;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-input{
    padding:13px;
    border:1px solid #dde3ea;
    border-radius:11px;
    background:#f7f9fb;
  }
  .b2-microflow[data-ui-mode="compose"] .micro-input textarea{
    min-height:180px;
  }
  .b2-microflow .micro-choice,
  .b2-microflow .micro-strategies button{
    min-height:60px;
  }
  .b2-microflow .micro-action{
    position:sticky;
    bottom:0;
    z-index:8;
    margin:2px -16px -28px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    border-top:1px solid #e0e5eb;
    background:#fff;
  }
  .b2-microflow .micro-action .primary-btn{
    width:100%;
    min-height:50px;
  }
  .b2-microflow .micro-feedback{
    grid-template-columns:1fr;
  }
  .b2-microflow .micro-feedback p,
  .b2-microflow .micro-feedback button{
    grid-column:1;
    grid-row:auto;
  }
  .b2-microflow .micro-feedback button{width:100%}
  .b2-microflow .micro-summary{
    grid-template-columns:1fr;
  }
  .b2-microflow .micro-summary div{
    border-right:0;
    border-bottom:1px solid var(--eg-line);
  }
  .b2-microflow .micro-summary div:last-child{border-bottom:0}
  .b2-microflow .micro-finish-actions{
    width:100%;
    flex-direction:column;
  }
  .b2-microflow .micro-finish-actions button{width:100%}
}
@media(max-width:520px){
  .b2-microflow .micro-framework{gap:3px}
  .b2-microflow .micro-framework span{
    min-height:27px;
    padding:4px 1px;
    font-size:.54rem;
    letter-spacing:0;
  }
  .b2-microflow .micro-progress-meta{font-size:.62rem}
  .b2-microflow .micro-prompt h1{
    font-size:clamp(1.4rem,7vw,1.8rem);
  }
}

/* Accessibility */
.b2-microflow button:focus-visible,
.b2-microflow textarea:focus-visible,
.b2-microflow input:focus-visible,
.b2-microflow summary:focus-visible{
  outline:3px solid rgba(49,87,213,.17);
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  .b2-microflow *,
  .b2-microflow *::before,
  .b2-microflow *::after{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}