/* Discovery Studio layer: semantic tokens, workspace-first layout, compact chrome on working stages.
   Loaded after lab.css and lab-dimension.css. Colour carries one mathematical meaning each, and never alone:
   every use below is paired with a label, shape or position. */
:root {
  --studio-quantity-a: #0b6b73;      /* first quantity (teal): diagram, table column, equation term */
  --studio-quantity-b: #a24a2c;      /* second quantity (coral) */
  --studio-active: #1d4ea0;          /* what the student is manipulating (sapphire) */
  --studio-predict: #6a4a9c;         /* predictions (violet, used only in this layer) */
  --studio-correct: #17674a;         /* a relationship that holds */
  --studio-misconception: #9b3b1f;   /* a relationship that does not hold */
  --studio-hint: #7a5200;            /* supports (amber ink) */
  --studio-surface: #fff;
  --studio-edge: #c9d6e0;
  --studio-ink: #17344b;
  --studio-radius: 14px;
}
:root[data-theme="dark"] {
  --studio-quantity-a: #6fd3d8; --studio-quantity-b: #f0a58a; --studio-active: #9bbcff; --studio-predict: #c8b3f2;
  --studio-correct: #7fd9b0; --studio-misconception: #f4a98e; --studio-hint: #f0cd75;
  --studio-surface: #14212c; --studio-edge: #3a5266; --studio-ink: #e8f1f8;
}

/* Working stages: the mathematics is the centrepiece, so the page chrome above it gets out of the way. */
.page-shell[data-stage="investigate"] .crumbs,
.page-shell[data-stage="practice"] .crumbs,
.page-shell[data-stage="create"] .crumbs,
.page-shell[data-stage="games"] .crumbs { display: none; }
.page-shell[data-stage="investigate"] .lab-header,
.page-shell[data-stage="practice"] .lab-header,
.page-shell[data-stage="create"] .lab-header,
.page-shell[data-stage="games"] .lab-header { padding: 8px 16px; gap: 12px; min-height: 0; }
.page-shell[data-stage="investigate"] .lab-emblem,
.page-shell[data-stage="practice"] .lab-emblem,
.page-shell[data-stage="create"] .lab-emblem,
.page-shell[data-stage="games"] .lab-emblem,
.page-shell[data-stage="investigate"] .mission-lead,
.page-shell[data-stage="practice"] .mission-lead,
.page-shell[data-stage="create"] .mission-lead,
.page-shell[data-stage="games"] .mission-lead,
.page-shell[data-stage="investigate"] .lesson-chips,
.page-shell[data-stage="practice"] .lesson-chips,
.page-shell[data-stage="create"] .lesson-chips,
.page-shell[data-stage="games"] .lesson-chips { display: none; }
.page-shell[data-stage="investigate"] .lab-header h1,
.page-shell[data-stage="practice"] .lab-header h1,
.page-shell[data-stage="create"] .lab-header h1,
.page-shell[data-stage="games"] .lab-header h1 { font-size: 1.15rem; margin: 0; }
.page-shell[data-stage="investigate"] .lesson-label,
.page-shell[data-stage="practice"] .lesson-label,
.page-shell[data-stage="create"] .lesson-label,
.page-shell[data-stage="games"] .lesson-label { margin: 0; font-size: .8rem; }
.page-shell[data-stage="investigate"] #level-detail,
.page-shell[data-stage="practice"] #level-detail,
.page-shell[data-stage="create"] #level-detail,
.page-shell[data-stage="games"] #level-detail { display: none; }
.page-shell[data-stage="investigate"] .toolbar,
.page-shell[data-stage="practice"] .toolbar,
.page-shell[data-stage="create"] .toolbar,
.page-shell[data-stage="games"] .toolbar { padding: 6px 12px; gap: 8px; }
.page-shell[data-stage="investigate"] .micro-hud,
.page-shell[data-stage="practice"] .micro-hud,
.page-shell[data-stage="create"] .micro-hud,
.page-shell[data-stage="games"] .micro-hud { padding: 4px 12px; }
.page-shell[data-stage="investigate"] .hud-actions,
.page-shell[data-stage="practice"] .hud-actions,
.page-shell[data-stage="create"] .hud-actions,
.page-shell[data-stage="games"] .hud-actions,
.page-shell[data-stage="investigate"] .hud-session-summary,
.page-shell[data-stage="practice"] .hud-session-summary,
.page-shell[data-stage="create"] .hud-session-summary,
.page-shell[data-stage="games"] .hud-session-summary { display: none; }

/* One slim control row: level, save tools; progress lives in the tab marks and the Mission tab. */
.page-shell[data-stage="investigate"] .micro-hud,
.page-shell[data-stage="practice"] .micro-hud,
.page-shell[data-stage="create"] .micro-hud,
.page-shell[data-stage="games"] .micro-hud { display: none; }
.page-shell[data-stage="investigate"] .toolbar,
.page-shell[data-stage="practice"] .toolbar,
.page-shell[data-stage="create"] .toolbar,
.page-shell[data-stage="games"] .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 6px 12px; }
.page-shell[data-stage="investigate"] .toolbar label,
.page-shell[data-stage="practice"] .toolbar label,
.page-shell[data-stage="create"] .toolbar label,
.page-shell[data-stage="games"] .toolbar label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; }
.page-shell[data-stage="investigate"] .toolbar select,
.page-shell[data-stage="practice"] .toolbar select,
.page-shell[data-stage="create"] .toolbar select,
.page-shell[data-stage="games"] .toolbar select { min-height: 44px; width: auto; }
.page-shell[data-stage="investigate"] .save-tools,
.page-shell[data-stage="practice"] .save-tools,
.page-shell[data-stage="create"] .save-tools,
.page-shell[data-stage="games"] .save-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.page-shell[data-stage="investigate"] .save-tools button,
.page-shell[data-stage="practice"] .save-tools button,
.page-shell[data-stage="create"] .save-tools button,
.page-shell[data-stage="games"] .save-tools button { min-height: 44px; padding: 4px 12px; white-space: nowrap; }
.page-shell[data-stage="investigate"] #save-status,
.page-shell[data-stage="practice"] #save-status,
.page-shell[data-stage="create"] #save-status,
.page-shell[data-stage="games"] #save-status { display: none; }
.page-shell[data-stage="investigate"] .tabs button,
.page-shell[data-stage="practice"] .tabs button,
.page-shell[data-stage="create"] .tabs button,
.page-shell[data-stage="games"] .tabs button { min-height: 48px; padding-block: 6px; }

/* Investigate: the question, then the model next to Predict and the target. */
.studio-ask { margin: 0 0 12px; }
.studio-eyebrow { margin: 0 0 2px; font-size: .85rem; font-weight: 700; color: var(--studio-active); letter-spacing: .01em; }
.studio-question { margin: 0 0 4px; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.25; }
.studio-try { margin: 0; font-size: 1rem; color: var(--studio-ink); }
.studio-grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(250px, 1fr); gap: 16px; align-items: start; }
.studio-stage, .studio-side > section { background: var(--studio-surface); border: 1px solid var(--studio-edge); border-radius: var(--studio-radius); padding: 12px; }
.studio-side { display: grid; gap: 12px; }
.studio-side > section { margin: 0; }
.studio-side .predict-bar { border-left: 6px solid var(--studio-predict); }
.studio-side .model-challenge { border-left: 6px solid var(--studio-active); }
.studio-side h3 { margin: 0 0 4px; font-size: 1.05rem; }
.studio-side .predict-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.studio-side .predict-choices button { min-height: 44px; padding: 6px 8px; font-size: .95rem; }
.studio-stage .model-workspace { margin: 0; }
.studio-stage .model-picture { min-height: 280px; }
.studio-ask { max-width: none; }
.studio-how { margin: 12px 0; background: var(--studio-surface); border: 1px solid var(--studio-edge); border-radius: var(--studio-radius); padding: 8px 14px; }
.studio-how summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.studio-how .method-strip { margin-top: 8px; }
@media (max-width: 900px) {
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-side { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .studio * { animation: none !important; transition: none !important; } }

/* Touch targets: everything the lab itself draws is at least 44px; checkboxes get a 44px label around a 24px box. */
#lab-root button, #lab-root summary, #lab-root select, #lab-root .lesson-chip { min-height: 44px; }
#lab-root button { min-width: 44px; }
#lab-root .check-item { align-items: center; min-height: 44px; margin: 4px 0; }
#lab-root input[type="checkbox"], #lab-root input[type="radio"] { width: 24px; height: 24px; flex: none; }

/* Phones: the picture and its controls come first; the guidance is one short line under the question. */
@media (max-width: 600px) {
  .page-shell[data-stage="investigate"] .studio-eyebrow { display: none; }
  .page-shell[data-stage="investigate"] .studio-question { font-size: 1.1rem; margin-bottom: 2px; }
  .page-shell[data-stage="investigate"] .studio-try { font-size: .92rem; }
  .page-shell[data-stage="investigate"] .studio-ask { margin-bottom: 8px; }
  .page-shell[data-stage="investigate"] .studio-stage { padding: 6px; }
  .page-shell[data-stage="investigate"] .studio-stage .model-picture { min-height: 170px; padding: 4px; }
  .page-shell[data-stage="investigate"] .tabs { gap: 4px; padding: 4px; }
  .page-shell[data-stage="investigate"] .tabs button { padding: 4px 6px; min-height: 44px; }
  .page-shell[data-stage="investigate"] .tab-step { display: none; }
  .page-shell[data-stage="investigate"] .save-tools { margin-inline-start: 0; width: 100%; }
  .page-shell[data-stage="investigate"] .save-tools button { flex: 1; padding-inline: 6px; }
}

/* At phone width, keep non-data controls beside the picture so the first
   manipulation is reachable without scrolling past a full-height diagram. */
@media (max-width: 600px) {
  .page-shell[data-stage="investigate"] .studio-stage .model-workspace:not([data-kind="data"]) {
    grid-template-columns: minmax(0, 1.2fr) minmax(132px, .8fr);
    align-items: stretch;
  }
  .page-shell[data-stage="investigate"] .studio-stage .model-workspace:not([data-kind="data"]) .model-picture {
    min-width: 0;
    min-height: 150px;
  }
  .page-shell[data-stage="investigate"] .studio-stage .model-workspace:not([data-kind="data"]) .model-controls {
    display: block;
    min-width: 0;
    padding: 6px;
  }
  .page-shell[data-stage="investigate"] .studio-stage .model-workspace:not([data-kind="data"]) .model-controls label {
    display: block;
    margin: 0 0 6px;
    font-size: .82rem;
    line-height: 1.2;
  }
  .page-shell[data-stage="investigate"] .studio-stage .model-workspace:not([data-kind="data"]) .model-controls input,
  .page-shell[data-stage="investigate"] .studio-stage .model-workspace:not([data-kind="data"]) .model-controls select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 6px;
  }
}

/* Wrap Lab's full investigation question needs less vertical space on a Chromebook. */
@media (min-width: 601px) {
  #lab-root[data-lab="wrap-lab"] .studio-question { font-size: 1.25rem; line-height: 1.2; }
  #lab-root[data-lab="wrap-lab"] .studio-stage .model-picture {
    align-self: start;
    height: 190px;
    min-height: 190px;
  }
  #lab-root[data-lab="wrap-lab"] .studio-stage .model-controls { padding-top: 0; }
}
@media (max-width: 600px) {
  html[data-lab-stage="investigate"] .ewlr-fab {
    right: auto;
    left: max(8px, env(safe-area-inset-left));
  }
}

/* Phones on a working stage: the course navigation keeps its links but drops its brand block, so the model starts higher. */
@media (max-width: 600px) {
  html[data-lab-stage="investigate"] .ewl-course-brand,
  html[data-lab-stage="practice"] .ewl-course-brand,
  html[data-lab-stage="create"] .ewl-course-brand,
  html[data-lab-stage="games"] .ewl-course-brand { display: none; }
  html[data-lab-stage="investigate"] .ewl-course-nav__inner,
  html[data-lab-stage="practice"] .ewl-course-nav__inner,
  html[data-lab-stage="create"] .ewl-course-nav__inner,
  html[data-lab-stage="games"] .ewl-course-nav__inner { padding: 2px 8px; gap: 0; }
}
@media (max-width: 600px) {
  .page-shell[data-stage="investigate"] .model-controls .direct-hint { grid-column: 1 / -1; margin: 0; font-size: .85rem; }
  .page-shell[data-stage="investigate"] .model-controls { padding: 8px; gap: 8px; }
}

/* Data labs: the dot plot and its values sit side by side on wide screens so the first value is on the first screen. */
@media (min-width: 901px) {
  .studio-stage .model-workspace[data-kind="data"] { grid-template-columns: minmax(0, 1.6fr) minmax(230px, 1fr); }
  .studio-stage .model-workspace[data-kind="data"] .model-picture { align-items: start; place-items: start center; }
  .studio-stage .model-workspace[data-kind="data"] .model-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px; }
  .studio-stage .model-workspace[data-kind="data"] .model-controls .direct-hint { grid-column: 1 / -1; }
}

/* Representation Bridge: four synchronized panels under the model. A quantity keeps its colour AND its column name. */
.bridge-card { margin: 12px 0 0; padding: 12px; border: 1px solid var(--studio-edge); border-radius: var(--studio-radius); background: var(--studio-surface); }
.bridge-card h3 { margin: 0 0 2px; font-size: 1.1rem; }
.bridge-card h4 { margin: 0 0 6px; font-size: .98rem; }
.bridge-lede { margin: 0 0 8px; font-size: .92rem; }
.bridge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bridge-panel { padding: 8px 10px; border: 1px solid var(--studio-edge); border-radius: 10px; min-width: 0; }
.bridge-scroll { overflow-x: auto; }
.bridge-panel table, .bridge-compare, .rec-compare table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.bridge-panel th, .bridge-panel td, .bridge-compare th, .bridge-compare td, .rec-compare th, .rec-compare td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--studio-edge); }
.bq-a { border-top: 4px solid var(--studio-quantity-a); }
.bq-b { border-top: 4px solid var(--studio-quantity-b); }
td.bq-a, td.bq-b, th[scope="row"].bq-a, th[scope="row"].bq-b { border-top: 0; border-left: 4px solid var(--studio-quantity-a); }
td.bq-b { border-left-color: var(--studio-quantity-b); }
.bridge-eq { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.bridge-note { margin: 4px 0 0; font-size: .92rem; }
.bridge-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 700; border: 2px solid currentColor; }
[data-holds="true"] .bridge-badge, .bridge-verdict[data-ok="true"] .bridge-badge { color: var(--studio-correct); }
[data-holds="false"] .bridge-badge, .bridge-verdict[data-ok="false"] .bridge-badge { color: var(--studio-misconception); }
.bridge-test { margin-top: 10px; }
.bridge-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bridge-idea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bridge-idea label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 260px; }
.bridge-idea input[type="number"] { width: 5.5em; min-height: 44px; font-size: 1.05rem; }
.bridge-stage { margin-top: 8px; padding: 8px 10px; border-radius: 10px; outline-offset: 2px; }
.bridge-stage:not(:empty) { border: 2px solid var(--studio-predict); }
.bridge-choices, .bridge-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bridge-miscon { padding: 6px 10px; border-left: 6px solid var(--studio-misconception); background: color-mix(in srgb, var(--studio-misconception) 8%, transparent); }
.bridge-error { color: var(--studio-misconception); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) { .bridge-grid { grid-template-columns: minmax(0, 1fr); } }

/* Experiment Recorder */
.recorder .rec-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rec-item { padding: 8px 10px; border: 1px solid var(--studio-edge); border-radius: 10px; }
.rec-item p { margin: 2px 0; }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rec-badge { font-weight: 700; font-size: .9rem; }
.rec-badge[data-ok="true"] { color: var(--studio-correct); }
.rec-badge[data-ok="false"] { color: var(--studio-misconception); }
.rec-pick { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.rec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rec-compare { margin-top: 10px; padding: 8px 10px; border: 2px solid var(--studio-active); border-radius: 10px; }
@media print { .bridge-test, .recorder .rec-actions, .rec-pick { display: none; } }

.bridge-key { margin: 2px 0; font-size: 1.25rem; text-align: start; }
.learn-stage .arc-stage { margin: 18px 0 8px; color: var(--studio-ink); font-weight: 750; }
.learn-stage .arc-predict { padding: 12px; border: 1px solid var(--studio-edge); border-left: 5px solid var(--studio-predict); border-radius: var(--studio-radius); background: var(--studio-surface); }
.learn-stage [data-arc-visual][hidden] { display: none; }
.learn-stage [data-arc-notation][hidden] { display: none; }