/* Arrays & Laws Studio styles (owned by Qoder); base rules follow the Cambridge 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, input, 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 · 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, .84fr) minmax(0, 1.16fr); 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, .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; }
.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; }
.stat-pill.sentence { flex: 1 1 100%; border-radius: 10px; color: var(--ink); background: #e7f1f4; font-size: .84rem; font-weight: 800; }

.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.bad { color: #813b4b; background: #fff0f2; }
.status-box:empty { display: none; }
.teacher-note { border-left-color: #d58d16; color: #684a12; background: var(--gold-soft); }
.teacher-note[hidden] { display: none; }

.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; }

.mission-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.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.active { border: 2px solid var(--teal); background: var(--teal-soft); }
.choice-chip.done { border-color: #4e9b6d; color: #125336; background: #e6f5e9; }

.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; }

/* The counter board: a rectangular arrangement, the dashed cut, the hoop, and the handles that move them */
.model-board svg { display: block; width: 100%; max-width: 660px; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfe; touch-action: none; user-select: none; }
.frame { fill: #f7fbfd; stroke: #dbe7ee; stroke-width: 2; }
.counter { fill: #2f6f83; stroke: #1d4d5d; stroke-width: 1.5; }
.counter.turned { fill: #6f9fd8; stroke: #3f6fa8; }
/* The turn rides in on a layer of its own (X-440), so a learner sees the same counters stand the other way
   round instead of a second array appearing. The layer is paint only: it holds no .counter, takes no pointer,
   and is never read out. The settled copy underneath waits out the flight invisible. */
.turn-swing { pointer-events: none; }
.swing-counter { fill: #6f9fd8; stroke: #3f6fa8; stroke-width: 1.5; }
.turned-array.is-swinging { opacity: 0; }
.divider { stroke: var(--rose); stroke-width: 3; stroke-dasharray: 9 7; pointer-events: none; }
.hoop { fill: rgba(231, 166, 45, 0.14); stroke: #c68a15; stroke-width: 3; pointer-events: none; }
/* Pathway 2's grouping: a pair of square brackets round the two numbers worked first. The same amber as
   the hoop because it marks the same thing, drawn as two strokes with no fill. */
.bracket { fill: none; stroke: #c68a15; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.swap-arrow { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; }
.probe-ring { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 7 6; pointer-events: none; }
.num { fill: var(--ink); font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.num.asked { fill: #b0750f; }
.box { fill: #fff3d6; stroke: #d58d16; stroke-width: 3; }
.op { fill: #31586f; font-size: 27px; font-weight: 900; }
.cap { fill: var(--muted); font-size: 15px; font-weight: 700; }
/* The array's own number sentence, written from the counters under it. It is the largest text below the
   array because it, not the separate example, is what the learner's drags change. */
.sum { fill: var(--navy); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.example-tag { fill: var(--navy); font-size: 18px; font-weight: 800; }
.separator { stroke: var(--line); stroke-width: 2; stroke-dasharray: 5 7; }

/* A drag handle is a solid teal puck with a white double-headed arrow on the one axis it moves
   along: horizontal for the dashed line and the hoop, diagonal for the corner. Solid fill and the
   arrow carry the cue because a phone has no hover; the ring is a white rim inside the stroke.
   Press controls (turn, add) stay blue with their own glyph, so a press never reads as a drag. */
.grab { fill: #0b7b86; stroke: #05505a; stroke-width: 2.5; cursor: grab; filter: drop-shadow(0 1.5px 2px rgba(9, 60, 66, 0.3)); }
.grab:active { cursor: grabbing; }
.grab-arrow { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.grab-ring { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; pointer-events: none; }
.corner-handle:hover .grab, .divider-handle:hover .grab, .hoop-handle:hover .grab { fill: #096a74; }
.corner-handle:focus-visible .grab, .divider-handle:focus-visible .grab, .hoop-handle:focus-visible .grab,
.turn-handle:focus-visible .grab, .divider-add:focus-visible .grab, .hoop-add:focus-visible .grab { outline: none; stroke-width: 4; }
.corner-handle:focus-visible, .divider-handle:focus-visible, .hoop-handle:focus-visible,
.turn-handle:focus-visible, .divider-add:focus-visible, .hoop-add:focus-visible { outline: 3px solid #f0ae34; outline-offset: 3px; }
.turn-handle, .divider-add, .hoop-add { cursor: pointer; }
.turn-handle .grab, .divider-add .grab, .hoop-add .grab { fill: rgba(53, 122, 194, 0.18); stroke: var(--blue); filter: none; }
.turn-handle[aria-pressed="true"] .grab { fill: rgba(8, 127, 140, 0.42); stroke: var(--teal); }
.ghost-line { fill: rgba(53, 122, 194, 0.10); stroke: #9ab3c3; stroke-width: 2; stroke-dasharray: 5 5; pointer-events: none; }
svg[data-static] .probe-ring { stroke: var(--gold); }

@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; }
  /* In the two modes you drag in, the bench comes first on a phone: the read-out, the goal and the tutor's step
     above it rewrite themselves the moment a statement is met, and that rewrite kicks the bench down under the
     learner's finger mid-drag. Below the bench the same rewrite 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; }
  .num { font-size: 26px; }
  .op { font-size: 23px; }
}

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