/* Bounds & Estimation Studio styles (owned by Qoder); base rules follow the 0580 pilot family. */
:root {
  color-scheme: light;
  --navy: #102c46;
  --ink: #16344d;
  --muted: #567086;
  --teal: #087f8c;
  --teal-soft: #e4f4f4;
  --gold: #e7a62d;
  --gold-soft: #fff4d8;
  --rose: #ca5570;
  --blue: #357ac2;
  --line: #cbdbe5;
  --paper: #f2f7fa;
  --white: #fff;
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-size: 16px; }
button, select { font: inherit; }
button, select { touch-action: manipulation; }
button:focus-visible, select:focus-visible { outline: 3px solid #f0ae34; outline-offset: 2px; }

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 470px);
  align-items: center;
  gap: 20px;
  padding: 14px clamp(16px, 4vw, 54px);
  color: var(--white);
  background: var(--navy);
}
.brand-block h1 { margin: 1px 0 2px; font-size: clamp(1.45rem, 2.8vw, 2.1rem); line-height: 1.12; }
.eyebrow { margin: 0 0 5px; color: #71d5d8; font-size: .69rem; font-weight: 900; letter-spacing: .12em; }
.intro { margin: 0; color: #d6e7f1; font-size: .93rem; }
.path-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: end; }
.path-picker label { grid-area: 1 / 1; color: #c6dce9; font-size: .76rem; font-weight: 750; }
.path-picker select { grid-area: 2 / 1; width: 100%; min-height: 42px; min-width: 190px; padding: 8px 12px; border: 1px solid #8baec2; border-radius: 11px; color: var(--ink); background: white; }
.objective-code { grid-area: 3 / 1 / 4 / 3; color: #b8d3e2; font-size: .74rem; }
/* Claude's shared header tools (Read aloud · Voice · full screen) mount here: on the pathway row, right of the select. */
.header-tools { display: flex; justify-content: flex-end; grid-area: 2 / 2; align-self: center; }

main { width: min(1400px, 100%); margin: 0 auto; padding: 12px clamp(12px, 3.2vw, 44px) 16px; }
.mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
.mode-tab { display: grid; min-height: 52px; align-content: center; justify-items: start; gap: 0; padding: 7px 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: white; text-align: left; cursor: pointer; }
.mode-tab span { font-weight: 900; font-size: 1.05rem; }
.mode-tab small { color: var(--muted); font-size: .72rem; }
.mode-tab.is-active { border: 2px solid var(--teal); background: var(--teal-soft); box-shadow: inset 0 -4px 0 var(--teal); }

.workspace { display: grid; grid-template-columns: minmax(310px, .86fr) minmax(0, 1.14fr); gap: 10px; align-items: start; }
.workspace[hidden] { display: none; }
.task-panel, .model-panel { min-width: 0; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: 0 5px 18px #17354b0a; }
.task-panel { padding: 15px; }
.model-panel { padding: 14px; }
.model-heading { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 8px; }
.model-heading h2 { margin: 0; font-size: 1.15rem; }
.mode-badge { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; color: #075d68; background: var(--teal-soft); font-size: .74rem; font-weight: 800; }
.model-board { display: grid; gap: 10px; }
.model-note, .status-note, .teacher-note { margin: 9px 0 0; padding: 8px 10px; border-left: 4px solid var(--teal); border-radius: 0 9px 9px 0; color: #365c73; background: #edf7f7; font-size: .82rem; line-height: 1.4; }
.evidence-note { margin: 9px 4px 0; color: #668093; font-size: .73rem; text-align: center; }

h2, h3, p { overflow-wrap: anywhere; }
.task-title { margin: 0 0 5px; font-size: 1.2rem; }
.value-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 10px; }
.value-line .task-title { margin: 0; }
.lede { margin: 0 0 11px; color: var(--ink); line-height: 1.45; }
.task-panel .lede { font-size: 1.02rem; }
.goal { margin: 0 0 11px; padding: 9px 11px; border: 1px solid #f0cf7b; border-radius: 12px; background: var(--gold-soft); line-height: 1.4; }
.goal strong { color: #684a12; }
.button-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 10px; }
.button { min-height: 42px; padding: 8px 13px; border: 1px solid #9ab3c3; border-radius: 11px; color: var(--ink); background: white; font-weight: 800; cursor: pointer; }
.button.primary { border-color: var(--teal); color: white; background: var(--teal); }
.button.positive { border-color: #5aa882; color: #135936; background: #e1f4e8; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.small-copy { color: var(--muted); font-size: .77rem; line-height: 1.4; }
/* Fine adjust: the last 0.05 cm, for the band ends a finger cannot land on a narrow screen. */
.fine-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; }
.fine-pair { display: flex; gap: 6px; align-items: center; }
.fine-who { color: var(--muted); font-size: .76rem; font-weight: 750; }
.fine-btn { width: 44px; min-height: 44px; border: 1px solid #9ab3c3; border-radius: 11px; color: var(--ink); background: white; font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; }
.fine-btn:hover { border-color: var(--teal); color: var(--teal); }
.stat-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stat-pill { padding: 5px 8px; border-radius: 999px; color: #31586f; background: #edf3f7; font-size: .78rem; font-weight: 750; }
.stat-pill b { font-variant-numeric: tabular-nums; }

.status-box { margin-top: 9px; padding: 8px 10px; border-radius: 10px; background: #eff5f8; color: #31586f; font-size: .8rem; line-height: 1.4; }
.status-box.good { color: #125336; background: #e5f5e9; }
.status-box.try { color: #715012; background: #fff5dd; }
.status-box:empty { display: none; }
.teacher-note { border-left-color: #d58d16; color: #684a12; background: var(--gold-soft); }
.teacher-note[hidden] { display: none; }

/* Chip rows: the object picker in Explore, the probe test values, the mission picker */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip-row .row-label { flex: 1 0 100%; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.choice-chip { min-height: 42px; padding: 8px 13px; border: 1px solid #aabfcd; border-radius: 10px; color: var(--ink); background: white; font-weight: 800; cursor: pointer; }
.choice-chip[aria-pressed="true"] { border: 2px solid var(--teal); background: var(--teal-soft); }
.choice-chip.done { border-color: #4e9b6d; color: #125336; background: #e6f5e9; }

.progress-track { height: 8px; margin: 8px 0 10px; overflow: hidden; border-radius: 999px; background: #e5edf2; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width .2s ease; }
.practice-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
.practice-option { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fbfdfe; font-weight: 750; text-align: left; cursor: pointer; }
.practice-option[aria-pressed="true"] { border: 2px solid var(--teal); background: var(--teal-soft); }
.practice-option.correct { border-color: #4e9b6d; background: #e6f5e9; }
.practice-option.incorrect { border-color: #d17783; background: #fff0f2; }
.practice-option:disabled { cursor: default; }

.solver { margin-top: 9px; padding: 9px; border: 1px dashed #98b5c6; border-radius: 11px; background: #f7fafc; }
.solver .button { min-height: 36px; padding: 6px 12px; font-size: .85rem; }
.solver-step { margin: 8px 0 0; min-height: 1.4em; color: #375d73; line-height: 1.45; }
.solver-demo { margin-top: 8px; }
.solver-demo .button { min-height: 44px; }

/* The measuring bench */
.model-board svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfe; touch-action: none; user-select: none; }
.axis-line { stroke: #7f97a8; stroke-width: 2; }
.axis-tick { stroke: #9ab3c3; stroke-width: 2; }
.axis-label { fill: #4c6a7f; font-size: 13px; font-weight: 700; }
.axis-label.big { font-size: 19px; font-weight: 900; fill: var(--ink); }

/* the object sitting on the bench */
.obj-fill { fill: #dceaf2; stroke: none; }
.obj-line { fill: none; stroke: #7f97a8; stroke-width: 2; }
.obj-grain { stroke: #b9cfdc; stroke-width: 2; stroke-linecap: round; }
.obj-dot { fill: #52708a; }
.obj-wire { stroke: #7f97a8; stroke-width: 5; stroke-linecap: round; }
.obj-label { fill: var(--ink); font-size: 15px; font-weight: 850; }
.obj-note { fill: #4c6a7f; font-size: 13px; font-weight: 700; }
/* Names the thing being measured. The halo keeps it legible where the wire curve runs behind it. */
.obj-name { fill: #6d8496; font-size: 12px; font-weight: 800; pointer-events: none;
  paint-order: stroke; stroke: #fbfdfe; stroke-width: 4px; stroke-linejoin: round; }

/* the accuracy dial: four settings, finest on the left */
.dial-label { fill: #4c6a7f; font-size: 12px; font-weight: 700; pointer-events: none; }
.dial-label.active { fill: #075d68; font-size: 13px; font-weight: 900; }
.dial-note { fill: #6d8496; font-size: 11px; font-weight: 700; pointer-events: none; }

/* the band of values that read the same way */
.band-fill { fill: rgba(231, 166, 45, 0.34); stroke: #d58d16; stroke-width: 2; }
.band-ghost { fill: rgba(231, 166, 45, 0.18); stroke: #e7a62d; stroke-width: 1.5; stroke-dasharray: 6 4; }
.end-tick { stroke: var(--teal); stroke-width: 3; stroke-linecap: round; }
.end-label { fill: #075d68; font-size: 14px; font-weight: 900; }
.reading-mark { fill: var(--rose); stroke: #a13a53; stroke-width: 2.5; }
.reading-label { fill: #a13a53; font-size: 14px; font-weight: 900; }
.probe-mark line { stroke-width: 3; stroke-dasharray: 7 5; }
.probe-mark.inside line { stroke: var(--teal); }
.probe-mark.outside line { stroke: #98a9b6; }
/* a question board marks the tested value without judging it */
.probe-mark.question line { stroke: var(--blue); }
.probe-mark.question .probe-label { fill: #1f5a91; }
.probe-label { font-size: 13px; font-weight: 900; }
.probe-mark.inside .probe-label { fill: #075d68; }
.probe-mark.outside .probe-label { fill: #6d8496; }
.combine-op { fill: var(--ink); font-size: 15px; font-weight: 850; }

/* drag handles: one gesture, no buttons */
.handle { cursor: grab; }
.handle:focus-visible { outline: none; }
.handle-body { fill: white; stroke: var(--teal); stroke-width: 3; }
.handle:focus-visible .handle-body { fill: var(--gold-soft); stroke: #d58d16; stroke-width: 4; }
.handle.dragging .handle-body, .handle-body:active { fill: var(--teal-soft); stroke: #066370; }
.handle-text { fill: #075d68; font-size: 12px; font-weight: 900; pointer-events: none; }
svg[data-static] .handle { cursor: default; }

@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr; gap: 9px; padding: 12px 14px 10px; }
  .path-picker { grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
  .path-picker label { grid-area: 1 / 1; }
  .path-picker select { grid-area: 1 / 2; min-height: 39px; min-width: 0; font-size: .87rem; }
  .header-tools { grid-area: 2 / 2; }
  .objective-code { grid-area: 3 / 2; }
  main { padding: 9px 9px 14px; }
  .mode-tabs { gap: 6px; margin-bottom: 8px; }
  .mode-tab { min-height: 48px; padding: 6px 8px; }
  .mode-tab span { font-size: .95rem; }
  .mode-tab small { font-size: .64rem; line-height: 1.15; }
  .workspace { grid-template-columns: 1fr; gap: 8px; }
  .task-panel, .model-panel { padding: 11px; border-radius: 14px; }
  .task-panel { order: 1; }
  .model-panel { order: 2; }
  /* The two modes you drag in: on a phone the bench has to come first. Its own read-out, the goal and the
     tutor's step all rewrite themselves the moment a statement is met — the very instant the bench is praised
     — and while that text sits above the bench, the rewrite kicks the bench down under the learner's finger
     and leaves the success ring behind. The same rewrite below the bench cannot move it. */
  #mode-explore .model-panel, #mode-challenge .model-panel { order: 0; }
  #mode-explore .task-panel, #mode-challenge .task-panel { order: 1; }
  .practice-options { gap: 6px; }
  .axis-label { font-size: 15px; }
  .end-label, .reading-label, .handle-text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}