/* Math Lab Lesson Style Guide: lesson components added by mathlab-guide.js.
   Accents from the guide: teal #3DD3C4, lime #C6F432 (page backgrounds keep the site's navy). Figure cards: #0D1C20, teal #2EC4B6.
   Buttons use #app-level selectors and !important because the site styles every
   button inside #app with !important rules. */
@media screen {

  /* Make your call */
  html body .ml-call {
    display: grid; gap: 8px; margin-block: 14px 6px; padding: 14px 16px;
    border-left: 4px solid #C6F432; border-radius: 0 12px 12px 0; background: rgba(198, 244, 50, .07);
  }
  html body .ml-call-label {
    margin: 0; display: flex; align-items: center; gap: 8px;
    font: 500 11px/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: #C6F432;
  }
  html body .ml-call-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #C6F432; }
  html body .ml-call-text { margin: 0; color: #B4C9C5; font: 400 15px/1.5 "IBM Plex Sans", system-ui, sans-serif; }
  .ml-call-steps { display: grid; gap: 4px; }
  .ml-call-steps[hidden] { display: none !important; }

  /* Shared button look */
  html body #app :is(.ml-call-btn, .ml-board-btn, .ml-lab-actions button) {
    justify-self: start; width: auto; min-height: 0; padding: 9px 16px; border-radius: 9px; cursor: pointer;
    font: 600 14px/1.2 "IBM Plex Sans", system-ui, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
    border: 1.5px solid #3DD3C4 !important; background: transparent !important; color: #3DD3C4 !important; box-shadow: none !important;
  }
  html body #app :is(.ml-call-btn, .ml-lab-reset):hover { background: rgba(61, 211, 196, .1) !important; }
  html body #app .ml-board-btn { margin-top: 12px; border-color: #C6F432 !important; background: #C6F432 !important; color: #0A1517 !important; }
  html body #app .ml-lab-actions .ml-lab-new { border-color: #2EC4B6 !important; background: #2EC4B6 !important; color: #0D1C20 !important; }
  html body #app :is(.ml-call-btn, .ml-board-btn, .ml-lab button, .ml-lab input):focus-visible { outline: 3px solid #3DD3C4 !important; outline-offset: 2px; }

  /* Board mode */
  html.ml-board body { font-size: 20px; }
  html.ml-board main.ml-learning-page { max-width: min(1400px, 100%); font-size: 1.2em; }
  html.ml-board main.ml-learning-page h1 { font-size: clamp(40px, 6vw, 64px); }
  html.ml-board :is(.ml-learning-crumbs, .vp-badge, .idea-overview) { display: none; }

  /* Curve Match lab */
  .ml-lab h2 { margin-bottom: 6px; }
  .ml-lab-intro { color: #B4C9C5; max-width: 66ch; }
  .ml-lab-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start;
    margin-top: 14px; padding: 16px; border-radius: 16px; background: #0D1C20;
  }
  @media (max-width: 720px) { .ml-lab-grid { grid-template-columns: 1fr; } }
  .ml-lab-canvas { width: 100%; max-width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 10px; }
  .ml-lab-controls { display: grid; gap: 14px; min-width: 0; }
  .ml-lab-parents { display: flex; gap: 6px; flex-wrap: wrap; }
  html body #app .ml-lab-parents button {
    width: auto; min-height: 0; padding: 6px 12px; border-radius: 8px; cursor: pointer; box-shadow: none !important;
    font: italic 400 16px "STIX Two Text", "Cambria Math", serif !important; text-transform: none !important;
    border: 1px solid #2A444B !important; background: transparent !important; color: #CFE2E6 !important;
  }
  html body #app .ml-lab-parents button.on { border-color: #2EC4B6 !important; background: #2EC4B6 !important; color: #0D1C20 !important; }
  .ml-lab-slider { display: grid; gap: 4px; }
  .ml-lab-slider label { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #93AFB5; }
  .ml-lab-val { font: 500 15px "IBM Plex Mono", monospace; color: #C6F432; font-variant-numeric: tabular-nums; }
  .ml-lab-slider input { width: 100%; accent-color: #2EC4B6; }
  .ml-lab-eq {
    font: 22px "STIX Two Text", "Cambria Math", serif; color: #F0F7F8; background: #13282D;
    border-radius: 10px; padding: 10px 14px; overflow-x: auto; white-space: nowrap;
  }
  .ml-lab-desc { margin: 0; min-height: 3em; font-size: 14px; color: #93AFB5; }
  .ml-lab-status { margin: 0; font-size: 14px; padding: 8px 12px; border-radius: 8px; background: #13282D; color: #CFE2E6; }
  .ml-lab-status.win { background: #26300F; color: #C6F432; }
  .ml-lab-actions { display: flex; gap: 8px; flex-wrap: wrap; }
}
@media print {
  .ml-call, .ml-board-btn, .ml-lab { display: none !important; }
  .ml-call-steps[hidden] { display: block !important; }
}

/* SAT/PSAT calculator panel, styled after the College Board Bluebook calculator */
@media screen {
  .ml-calc {
    position: fixed; z-index: 2147483000;
    left: max(16px, env(safe-area-inset-left, 0px)); top: calc(76px + env(safe-area-inset-top, 0px));
    width: min(460px, calc(100vw - 32px)); height: min(680px, calc(100vh - 100px));
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; color: #1e1e1e; border: 1px solid #c4c4c4; border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35); font-family: "IBM Plex Sans", Arial, sans-serif;
  }
  .ml-calc[hidden] { display: none !important; }
  .ml-calc.expanded { width: min(960px, calc(100vw - 32px)); height: min(760px, calc(100vh - 100px)); }
  .ml-calc.dragging { user-select: none; }
  .ml-calc-bar {
    box-sizing: border-box; width: 100%; margin: 0; max-width: none;
    display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 12px; flex: none;
    background: #1e1e1e; color: #fff; cursor: move; touch-action: none;
  }
  .ml-calc-grip { width: 14px; height: 18px; flex: none; opacity: .7;
    background: radial-gradient(circle, #fff 1.4px, transparent 1.6px) 0 0 / 7px 6px; }
  .ml-calc-title { font: 600 15px/1 "IBM Plex Sans", Arial, sans-serif; letter-spacing: .01em; }
  .ml-calc-spacer { flex: 1; }
  html body .ml-calc-bar button {
    width: 34px; height: 34px; min-height: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
    background: transparent !important; color: #fff !important; border: 0 !important; border-radius: 6px; box-shadow: none !important;
  }
  html body .ml-calc-bar button:hover { background: rgba(255, 255, 255, .14) !important; }
  html body .ml-calc-bar button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .ml-calc-body { flex: 1; min-height: 0; background: #fff; }
  .ml-calc-body iframe { width: 100%; height: 100%; border: 0; display: block; }
  .ml-calc-foot { box-sizing: border-box; width: 100%; margin: 0; max-width: none; flex: none; padding: 6px 12px; font-size: 12px; color: #505050; background: #f3f3f3; border-top: 1px solid #ddd; }
  .ml-calc-foot a { color: #0b5cad; }
  html body #app button[data-calc].ml-calc-on { outline: 2px solid currentColor; outline-offset: 2px; }
  @media (max-width: 699px) {
    .ml-calc, .ml-calc.expanded { left: 8px !important; right: 8px; top: calc(56px + env(safe-area-inset-top, 0px)) !important; width: auto; height: calc(100vh - 72px); }
    .ml-calc-bar { cursor: default; }
    .ml-calc-grip, .ml-calc-size { display: none !important; }
  }
}
@media print { .ml-calc { display: none !important; } }

/* Light (Chalk) theme: the components above are drawn for the dark theme; these keep them readable. */
@media screen {
  html[data-ml-theme=chalk] body .ml-call { background: #f2f7e3; border-left-color: #7d9c12; }
  html[data-ml-theme=chalk] body .ml-call-label { color: #4a6000; }
  html[data-ml-theme=chalk] body .ml-call-label::before { background: #7d9c12; }
  html[data-ml-theme=chalk] body .ml-call-text { color: #3d5250; }
  html[data-ml-theme=chalk] body #app .ml-call-btn { border-color: #006b60 !important; color: #006b60 !important; }
  html[data-ml-theme=chalk] body #app .ml-call-btn:hover { background: rgba(0, 107, 96, .08) !important; }
  html[data-ml-theme=chalk] body #app .ml-board-btn { background: #152929 !important; border-color: #152929 !important; color: #fff !important; }
  html[data-ml-theme=chalk] .ml-lab-intro { color: #3d5250; }
  html[data-ml-theme=chalk] :is(.ml-call-btn, .ml-board-btn):focus-visible { outline-color: #006b60 !important; }
  /* course hero art was drawn for dark backgrounds */
  html[data-ml-theme=chalk] .ml-landing-art line { stroke: rgba(21, 41, 41, .35) !important; }
  html[data-ml-theme=chalk] .ml-landing-art path { stroke: #006b60 !important; }
  html[data-ml-theme=chalk] .ml-landing-art circle { fill: #b7d63c !important; stroke: #145b4a; stroke-width: 1.5px; }
  html[data-ml-theme=chalk] .ml-landing-art text { fill: #3d5250 !important; }
}

/* SAT/PSAT exam room: Bluebook-style 5-minute alert */
.ml-five-min{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:2147483000;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:10px 14px;border-radius:10px;background:#0f1b33;color:#fff;border:1px solid #C6F432;box-shadow:0 8px 24px rgba(0,0,0,.35);font:500 15px/1.3 system-ui,sans-serif}
.ml-five-min b{color:#C6F432}
.ml-five-min button{margin-left:6px;background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
@media print{.ml-five-min{display:none!important}}

/* Continue-where-you-left-off card: shown only in the student dashboard (Nov 2026) */
.ml-continue{display:none!important}