/* ──────────────────────────────────────────────
   ULearn · Placement Test · Prototype
   Duolingo-DNA UI, ULearn green palette, Leon mascot
   ────────────────────────────────────────────── */

:root {
  /* Brand greens — sampled from ULearn leaf logo + bottom bar */
  --green:        #6FB42C;
  --green-hover:  #7BC734;
  --green-shadow: #4F8A1B;
  --green-soft:   #E8F4D8;
  --green-tint:   #F2F9E6;

  /* Feedback */
  --red:          #FF4B4B;
  --red-shadow:   #C42A2A;
  --red-soft:     #FFE0E0;

  --blue:         #1899D6;
  --blue-shadow:  #137AAB;
  --blue-soft:    #DDF4FF;

  --yellow:       #FFC800;

  /* Greys */
  --ink:          #2B2B2B;
  --ink-soft:     #4B4B4B;
  --mute:         #777777;
  --line:         #E5E5E5;
  --line-strong:  #CFCFCF;
  --bg:           #FFFFFF;
  --bg-soft:      #F7F7F7;

  /* Geometry */
  --radius:       16px;
  --radius-lg:    20px;
  --radius-pill:  999px;
  --press:        4px;       /* chunky bottom-shadow depth */

  /* Motion */
  --t-fast: 90ms;
  --t-mid:  220ms;
  --t-slow: 360ms;
  --ease:   cubic-bezier(.2,.7,.3,1);
}

/* ───────── reset / base ───────── */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
[hidden] { display: none !important; }
body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-soft);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input  { font-family: inherit; }

/* ───────── app shell (mobile-first, max 480 desktop) ───────── */
.app {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 60px rgba(0,0,0,.06);
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.screen[hidden] { display: none; }

/* ─────────────────────────────────────────
   BUTTONS — chunky bottom-shadow press effect
   ───────────────────────────────────────── */
.btn {
  --btn-bg:     var(--green);
  --btn-bg-hi:  var(--green-hover);
  --btn-shadow: var(--green-shadow);
  --btn-fg:     #FFFFFF;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  min-height: 50px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: var(--radius);
  box-shadow: 0 var(--press) 0 var(--btn-shadow);
  transform: translateY(0);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
  user-select: none;
}
.btn:hover { background: var(--btn-bg-hi); }
.btn:active,
.btn.is-pressed {
  transform: translateY(var(--press));
  box-shadow: 0 0 0 var(--btn-shadow);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  --btn-bg: var(--line);
  --btn-bg-hi: var(--line);
  --btn-shadow: var(--line-strong);
  --btn-fg: #B0B0B0;
  cursor: not-allowed;
}

.btn--primary  { /* default green */ }
.btn--ghost {
  --btn-bg: #FFFFFF;
  --btn-bg-hi: #FAFAFA;
  --btn-shadow: var(--line-strong);
  --btn-fg: var(--mute);
  border: 2px solid var(--line);
  padding: 12px 22px;
}
.btn--continue {
  --btn-bg: #FFFFFF;
  --btn-bg-hi: #FAFAFA;
  --btn-shadow: rgba(0,0,0,.12);
  --btn-fg: currentColor; /* inherits feedback color */
  padding: 12px 24px;
  min-height: 46px;
}
.btn--xl {
  width: 100%;
  min-height: 58px;
  font-size: 16px;
  letter-spacing: .06em;
  border-radius: var(--radius-lg);
}

/* ─────────────────────────────────────────
   INTRO SCREEN
   ───────────────────────────────────────── */
.screen--intro {
  background:
    radial-gradient(ellipse at 50% 0%, var(--green-tint) 0%, #FFFFFF 60%),
    #FFFFFF;
  padding: 32px 24px 28px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.intro__inner { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; }
.intro__leon {
  width: 200px;
  height: auto;
  margin-bottom: 4px;
  filter: drop-shadow(0 12px 18px rgba(95, 70, 20, .22));
}
.intro__title {
  font-size: 30px;
  font-weight: 900;
  margin: 8px 0 6px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.intro__lede {
  font-size: 16px;
  font-weight: 600;
  color: var(--mute);
  line-height: 1.45;
  margin: 0 0 22px;
}
.intro__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 28px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: var(--green-soft);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 800;
  color: var(--green-shadow);
  letter-spacing: .02em;
}
.pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
}
.pill__dot--alt { background: var(--blue); }
.intro__foot {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--mute);
}

/* ─────────────────────────────────────────
   TEST SCREEN
   ───────────────────────────────────────── */
.screen--test { background: #FFFFFF; }

/* top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 8px;
}
.topbar__close {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--line-strong);
  border-radius: 8px;
  flex-shrink: 0;
}
.topbar__close:hover { color: var(--mute); }
.progress {
  flex: 1;
  height: 14px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
.progress__fill {
  height: 100%;
  width: 0%;
  background: var(--green);
  border-radius: var(--radius-pill);
  transition: width var(--t-mid) var(--ease);
  position: relative;
}
.progress__fill::after {
  /* glossy highlight stripe */
  content: '';
  position: absolute;
  inset: 3px 6px auto 6px;
  height: 3px;
  background: rgba(255,255,255,.55);
  border-radius: var(--radius-pill);
}
.topbar__hearts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 900;
  color: var(--red);
  flex-shrink: 0;
}

/* question body */
.qbody {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 24px;
  overflow-y: auto;
}
.qbody__label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--mute);
  margin: 6px 0 14px;
}
.qbody__text {
  font-size: 22px;
  line-height: 1.32;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 22px;
  letter-spacing: -.005em;
  /* highlight blanks */
}
.qbody__text .blank {
  display: inline-block;
  min-width: 60px;
  border-bottom: 3px solid var(--line-strong);
  margin: 0 2px;
  vertical-align: baseline;
}

/* options (multichoice) */
.options { display: flex; flex-direction: column; gap: 12px; }
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-height: 60px;
  background: #FFFFFF;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: var(--radius);
  text-align: left;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.option:hover { background: var(--bg-soft); }
.option__key {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 2px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  color: var(--mute);
  flex-shrink: 0;
  transition: inherit;
}
.option__text { flex: 1; }

.option.is-selected {
  background: var(--blue-soft);
  border-color: var(--blue);
  color: var(--blue-shadow);
}
.option.is-selected .option__key {
  border-color: var(--blue);
  color: var(--blue);
  background: #FFFFFF;
}
/* after submit */
.options.is-locked .option { pointer-events: none; }
.option.is-correct {
  background: var(--green-soft);
  border-color: var(--green);
  color: var(--green-shadow);
}
.option.is-correct .option__key {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.option.is-wrong {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--red-shadow);
}
.option.is-wrong .option__key {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* short answer */
.textentry { display: flex; flex-direction: column; gap: 8px; }
.textentry input {
  appearance: none;
  width: 100%;
  padding: 18px 18px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.textentry input::placeholder { color: var(--line-strong); font-weight: 600; }
.textentry input:focus {
  border-color: var(--blue);
  background: #FFFFFF;
}
.textentry input.is-correct { border-color: var(--green); background: var(--green-soft); color: var(--green-shadow); }
.textentry input.is-wrong   { border-color: var(--red);   background: var(--red-soft);   color: var(--red-shadow); }
.textentry__hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--mute);
  letter-spacing: .04em;
  padding-left: 4px;
}

/* ─────────────────────────────────────────
   CTA BAR (idle + feedback states)
   ───────────────────────────────────────── */
.cta {
  position: relative;
  border-top: 2px solid var(--line);
  background: #FFFFFF;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  transition: background var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease);
}
.cta__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cta__row--idle {
  justify-content: space-between;
}
.cta__row--idle .btn { flex: 1; }
.cta__row--idle .btn--ghost { flex: 0 0 auto; min-width: 92px; }
.cta__row--feedback {
  display: none;
  align-items: center;
}

.cta__leon {
  width: 70px;
  height: auto;
  margin: -38px 0 -14px -6px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 8px rgba(95,70,20,.18));
  transform-origin: bottom center;
  animation: leon-pop var(--t-slow) var(--ease) both;
}
@keyframes leon-pop {
  0%   { transform: translateY(20px) scale(.6); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.cta__msg { flex: 1; min-width: 0; }
.cta__title {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 2px;
  letter-spacing: -.005em;
}
.cta__sub {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  opacity: .9;
  line-height: 1.35;
}
.cta__sub strong { font-weight: 900; }

/* state: feedback shown */
.cta[data-state="correct"],
.cta[data-state="wrong"] {
  border-top-width: 0;
}
.cta[data-state="correct"] .cta__row--idle,
.cta[data-state="wrong"]   .cta__row--idle { display: none; }
.cta[data-state="correct"] .cta__row--feedback,
.cta[data-state="wrong"]   .cta__row--feedback { display: flex; }

.cta[data-state="correct"] {
  background: var(--green-soft);
  color: var(--green-shadow);
}
.cta[data-state="wrong"] {
  background: var(--red-soft);
  color: var(--red-shadow);
}
/* continue button inherits feedback color via currentColor */
.cta[data-state="correct"] .btn--continue { color: var(--green-shadow); }
.cta[data-state="wrong"]   .btn--continue { color: var(--red-shadow); }

/* slide-in cta panel on state change */
.cta.is-flash::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: -1;
  animation: cta-rise var(--t-mid) var(--ease) both;
}
@keyframes cta-rise {
  from { transform: translateY(40%); opacity: .6; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* question entry stagger */
.qbody.is-entering .qbody__label  { animation: rise var(--t-slow) var(--ease) both; animation-delay: 0ms; }
.qbody.is-entering .qbody__text   { animation: rise var(--t-slow) var(--ease) both; animation-delay: 60ms; }
.qbody.is-entering .options .option,
.qbody.is-entering .textentry { animation: rise var(--t-slow) var(--ease) both; }
.qbody.is-entering .options .option:nth-child(1) { animation-delay: 120ms; }
.qbody.is-entering .options .option:nth-child(2) { animation-delay: 170ms; }
.qbody.is-entering .options .option:nth-child(3) { animation-delay: 220ms; }
.qbody.is-entering .options .option:nth-child(4) { animation-delay: 270ms; }
.qbody.is-entering .textentry { animation-delay: 120ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   SUMMARY SCREEN
   ───────────────────────────────────────── */
.screen--summary {
  background:
    radial-gradient(ellipse at 50% 0%, var(--green-tint) 0%, #FFFFFF 55%),
    #FFFFFF;
  padding: 24px 22px calc(28px + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  overflow-y: auto;
}
.summary__inner { width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; }
.summary__badge {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  background: #FFF7DA;
  border-radius: 50%;
  margin: 12px 0 14px;
  box-shadow: 0 6px 0 #F2D77A inset;
  animation: leon-pop 600ms var(--ease) both;
}
.summary__title {
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.summary__lede {
  font-size: 15px;
  font-weight: 600;
  color: var(--mute);
  margin: 0 0 22px;
  line-height: 1.4;
}

.summary__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin-bottom: 18px;
}
.stat {
  padding: 14px 8px;
  background: #FFFFFF;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: var(--radius);
}
.stat--green { border-color: var(--green); }
.stat--red   { border-color: var(--red);   }
.stat--blue  { border-color: var(--blue);  }
.stat__num {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 2px;
}
.stat--green .stat__num { color: var(--green-shadow); }
.stat--red   .stat__num { color: var(--red-shadow);   }
.stat--blue  .stat__num { color: var(--blue-shadow);  }
.stat__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--mute);
  text-transform: uppercase;
}

.summary__level {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--green-soft);
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.summary__level-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--green-shadow);
  text-transform: uppercase;
}
.summary__level-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--green-shadow);
  letter-spacing: -.01em;
}

.summary__leon {
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ═════════════════════════════════════════
   EMAIL GATE — overlays the summary for anon users
   ═════════════════════════════════════════ */
.screen--summary { position: relative; }

/* Blur + dim everything underneath while gate is up */
.screen--summary.is-gated .summary__inner {
  filter: blur(8px) saturate(.9);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  transform: scale(.99);
  transition: filter var(--t-mid) var(--ease),
              opacity var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}

.gate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(40, 50, 30, .35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 10;
  animation: gate-fade var(--t-slow) var(--ease) both;
}
@keyframes gate-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gate__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 78px 26px 24px;
  text-align: center;
  box-shadow: 0 18px 48px rgba(20, 30, 10, .25),
              0 4px 0 rgba(20, 30, 10, .04);
  animation: gate-pop 380ms var(--ease) both;
}
@keyframes gate-pop {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gate__leon {
  position: absolute;
  top: -68px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(95,70,20,.25));
}

.gate__title {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 8px;
  letter-spacing: -.005em;
  color: var(--ink);
}
.gate__sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
  margin: 0 0 18px;
  line-height: 1.45;
}

.gate__form { display: flex; flex-direction: column; gap: 10px; }

.gate__select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}
.gate__select:invalid { color: var(--line-strong); font-weight: 600; }
.gate__select option { color: var(--ink); font-weight: 700; }
.gate__select option[disabled] { color: var(--line-strong); }

.gate__input {
  appearance: none;
  width: 100%;
  padding: 16px 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-soft);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: var(--radius);
  outline: none;
  text-align: center;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.gate__input::placeholder { color: var(--line-strong); font-weight: 600; }
.gate__input:focus {
  border-color: var(--blue);
  background: #FFFFFF;
}
.gate__input.is-error {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red-shadow);
}

.gate__error {
  font-size: 13px;
  font-weight: 700;
  color: var(--red-shadow);
  margin: -4px 0 0;
  letter-spacing: .01em;
}

.gate__fineprint {
  margin: 14px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--line-strong);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .gate__card { max-width: 420px; padding: 92px 32px 28px; }
  .gate__leon { width: 116px; top: -82px; }
  .gate__title { font-size: 28px; }
  .gate__sub { font-size: 15px; }
}

/* ═════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ─────────────────────────────────────────
   Mobile-first scale, mirrors Bootstrap-ish:
     xs   < 480   small phones (squeeze)
     sm  ≥ 480   default phones
     md  ≥ 768   tablets / landscape phones
     lg  ≥ 960   desktop
     xl  ≥ 1280  large desktop
   ═════════════════════════════════════════ */

/* xs — small phones */
@media (max-width: 359px) {
  .qbody__text   { font-size: 19px; }
  .option        { padding: 12px 14px; min-height: 54px; font-size: 15px; }
  .intro__title  { font-size: 26px; }
  .summary__title{ font-size: 24px; }
}

/* md — tablets (≥768): card grows, more breathing room */
@media (min-width: 768px) {
  body {
    background:
      radial-gradient(ellipse at 50% -10%, var(--green-tint) 0%, transparent 60%),
      linear-gradient(180deg, #F4F8EC 0%, #EAF0DD 100%);
  }
  .app {
    max-width: 560px;
    margin: 32px auto;
    min-height: calc(100dvh - 64px);
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(40, 60, 20, .08);
  }
  .topbar     { padding: 20px 28px 12px; }
  .qbody      { padding: 24px 32px 28px; }
  .qbody__text{ font-size: 24px; }
  .option     { min-height: 64px; font-size: 17px; padding: 16px 20px; }
  .textentry input { font-size: 19px; padding: 20px; }
  .cta        { padding: 18px 24px calc(18px + env(safe-area-inset-bottom)); }
  .cta__leon  { width: 80px; margin: -44px 0 -16px -8px; }
  .cta__title { font-size: 19px; }
  .intro__inner    { max-width: 420px; }
  .intro__leon     { width: 220px; }
  .intro__title    { font-size: 34px; }
  .intro__lede     { font-size: 17px; }
  .summary__inner  { max-width: 460px; }
  .summary__title  { font-size: 32px; }
  .summary__leon   { max-width: 420px; }
}

/* lg — desktop (≥960): card hits max-comfort width, ambient brand surround */
@media (min-width: 960px) {
  body {
    background:
      radial-gradient(circle at 12% 20%, rgba(111,180,44,.10) 0%, transparent 38%),
      radial-gradient(circle at 88% 80%, rgba(24,153,214,.08) 0%, transparent 38%),
      linear-gradient(180deg, #F4F8EC 0%, #E5ECD7 100%);
  }
  .app {
    max-width: 600px;
    margin: 48px auto;
    min-height: calc(100dvh - 96px);
    border-radius: 28px;
  }
  .qbody__text { font-size: 26px; line-height: 1.3; }
  .option      { min-height: 68px; font-size: 18px; }
  .qbody       { padding: 28px 36px 32px; }
  .topbar      { padding: 22px 32px 14px; }
}

/* xl — large desktop (≥1280): a touch more polish */
@media (min-width: 1280px) {
  .app   { margin: 64px auto; min-height: calc(100dvh - 128px); }
}

/* ═════════════════════════════════════════
   EMBED MODE  (?embed=1 → strips host chrome)
   For iframe at e.g. ulearnschool.com/test
   Card fills the iframe width; inner content stays readable.
   ═════════════════════════════════════════ */
html[data-embed] body { background: transparent; }
html[data-embed] .app {
  margin: 0 auto !important;
  max-width: none !important;
  width: 100%;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* When embedded, screens shouldn't be absolute-positioned (they'd collapse height
   reporting). Stack them in flow; only one is visible at a time via [hidden]. */
html[data-embed] .app .screen { position: relative; inset: auto; }
/* Intro/summary screens otherwise centre content vertically — let the content
   flow naturally so the parent iframe can size to it. */
html[data-embed] .screen--intro,
html[data-embed] .screen--summary { justify-content: flex-start; padding-top: 32px; padding-bottom: 32px; }
/* Test screen body should grow with its content (not flex-fill a fixed parent). */
html[data-embed] .qbody { flex: 0 0 auto; overflow: visible; }
html[data-embed] .topbar__close { display: none; }

/* Keep READABLE content max-width even when the iframe is very wide.
   The frame itself stretches; the question/options column stays tight. */
@media (min-width: 768px) {
  html[data-embed] .qbody      { max-width: 640px; margin: 0 auto; width: 100%; }
  html[data-embed] .topbar     { max-width: 640px; margin: 0 auto; width: 100%; }
  html[data-embed] .cta__row   { max-width: 640px; margin: 0 auto; }
  html[data-embed] .intro__inner   { max-width: 460px; }
  html[data-embed] .summary__inner { max-width: 520px; }
}
@media (min-width: 960px) {
  html[data-embed] .qbody,
  html[data-embed] .topbar,
  html[data-embed] .cta__row { max-width: 720px; }
  html[data-embed] .qbody__text { font-size: 28px; }
  html[data-embed] .option      { min-height: 72px; font-size: 19px; }
}