/* Margin Lesson Quiz — scoped to .mlq-root so nothing touches the rest of the site. */

.mlq-root{
  font-family:'Schibsted Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#242424;
  line-height:1.4;
  text-align:left;
  -webkit-text-size-adjust:100%;
}
.mlq-root *,
.mlq-root *::before,
.mlq-root *::after{box-sizing:border-box;}
.mlq-root p,
.mlq-root legend,
.mlq-root label{margin:0;padding:0;}
.mlq-root p,
.mlq-root legend,
.mlq-root label,
.mlq-root span,
.mlq-root strong{color:inherit;}

/* Card ------------------------------------------------------------------- */
.mlq-card{
  max-width:760px;
  border:1.5px dashed #242424;
  background:transparent;
  padding:24px 28px;
}

.mlq-root .mlq-eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#A84400 !important;
}

.mlq-fieldset{margin:12px 0 0;padding:0;border:0;min-width:0;}
.mlq-root .mlq-legend{
  padding:0;
  color:#242424 !important;
  font-weight:700;
  font-size:21px;
  line-height:1.3;
}

/* Options ---------------------------------------------------------------- */
.mlq-options{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
}
.mlq-root .mlq-opt{
  display:flex;
  gap:10px;
  align-items:center;
  min-height:52px;
  padding:0 14px;
  border:1.5px solid #D8D3C6 !important;
  background:#FFFFFF !important;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:17px;
  cursor:pointer;
  transition:border-color .12s,background-color .12s;
}
.mlq-root .mlq-opt:hover{border-color:#242424 !important;}
.mlq-root .mlq-opt.is-selected{border-color:#242424 !important;background:#EFEBE1 !important;}
/* Correct answer highlight after checking — wins over .is-selected. */
.mlq-root .mlq-opt.is-correct{border-color:#FF6A00 !important;background:#FFF1E6 !important;}
.mlq-root .mlq-radio{
  width:18px;height:18px;margin:0;flex:0 0 auto;
  accent-color:#FF6A00;cursor:pointer;
}
.mlq-opt-label{font:inherit;}

/* Controls --------------------------------------------------------------- */
.mlq-controls{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.mlq-root .mlq-check{
  height:48px;
  padding:0 20px;
  border:1.5px solid #242424;
  background:#242424 !important;
  color:#F7F5EF !important;
  font:inherit;
  font-weight:700;
  font-size:15px;
  line-height:normal;
  border-radius:0 !important;
  cursor:pointer;
  transition:background-color .12s,color .12s,opacity .12s;
}
.mlq-root .mlq-check:hover:not(:disabled){background:#FF6A00 !important;color:#242424 !important;}
.mlq-root .mlq-check:disabled{opacity:.45;cursor:default;}
.mlq-root .mlq-hint{font-size:14px;color:#5C5852;}

/* Feedback --------------------------------------------------------------- */
.mlq-feedback{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid #D8D3C6;
  font-size:16px;
  line-height:1.55;
}
.mlq-feedback[hidden]{display:none !important;}
.mlq-root .mlq-verdict{color:#242424 !important;font-weight:800;font-size:18px;}
.mlq-root .mlq-explanation,.mlq-root .mlq-explanation p{color:#242424 !important;margin-top:6px;}

/* Focus ring (matches the Margin design). */
.mlq-root a:focus-visible,
.mlq-root button:focus-visible,
.mlq-root input:focus-visible{outline:3px solid #FF6A00;outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  .mlq-root *{transition:none !important;}
}