/* Trig Rules Studio styles (owned by Kimi); 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, input, select { font: inherit; }
button, select { touch-action: manipulation; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #f0ae34; outline-offset: 2px; }

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 370px) auto;
  align-items: center;
  gap: 20px;
  padding: 14px clamp(16px, 4vw, 54px);
  color: var(--white);
  background: var(--navy);
}
.topbar .cambridge-tools { grid-column: 3; grid-row: 1; }
.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); gap: 4px; }
.path-picker label { color: #c6dce9; font-size: .76rem; font-weight: 750; }
.path-picker select { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid #8baec2; border-radius: 11px; color: var(--ink); background: white; }
.objective-code { color: #b8d3e2; font-size: .74rem; }

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; }
.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; }
.lede { margin: 0 0 11px; color: var(--muted); line-height: 1.42; }
.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; }
.field { display: grid; gap: 5px; margin: 10px 0; }
.field label, .field-label { color: var(--ink); font-weight: 800; font-size: .85rem; }
.value-line { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.value-line output { font-weight: 900; font-variant-numeric: tabular-nums; }
.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.gold { border-color: #d58d16; color: #39280a; background: #f5c55f; }
.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-pill { padding: 5px 8px; border-radius: 999px; color: #31586f; background: #edf3f7; font-size: .75rem; font-weight: 750; }

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

.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; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #e5edf2; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width .2s ease; }
.number-input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #aabfcd; border-radius: 10px; color: var(--ink); background: white; }
.choice-chip { min-height: 44px; 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); }
.solver { margin-top: 9px; padding: 9px; border: 1px dashed #98b5c6; border-radius: 11px; background: #f7fafc; }
.solver-step { margin: 0; min-height: 1.4em; color: #375d73; }

/* Trig Rules Studio: the shared triangle bench (Kimi). */
.tg-board { display: grid; gap: 10px; justify-items: center; padding: 14px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfe; }
.tg-triangle { width: min(100%, 360px); height: auto; }
.tg-triangle .side { stroke: #16344d; stroke-width: 2.5; fill: none; }
.tg-triangle .side.unknown { stroke-dasharray: 6 4; stroke: #8f2c43; }
.tg-triangle text { font-size: 12px; font-weight: 800; fill: #16344d; }
.tg-triangle .vertex-label { font-size: 13px; fill: #0b6b8f; }
.tg-triangle .given { fill: #135a36; }
.tg-triangle .unknown-label { fill: #8f2c43; }
.tg-triangle .angle-arc { stroke: #c79a3b; stroke-width: 1.5; fill: none; }
.tg-rule-cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tg-rule-card { min-height: 44px; padding: 8px 12px; border: 2px solid #9ab3c3; border-radius: 11px; background: white; font-weight: 800; font-size: .9rem; cursor: pointer; }
.tg-rule-card[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); }
.tg-rule-card.lit { border-color: #d58d16; background: var(--gold-soft); }
.tg-rule-card:disabled { cursor: default; opacity: .75; }
.tg-substitution { width: 100%; padding: 9px 11px; border: 1px dashed #98b5c6; border-radius: 10px; background: #f7fafc; font-size: .92rem; line-height: 1.5; }
.tg-trig-values { display: flex; flex-wrap: wrap; gap: 5px 12px; justify-content: center; font-size: .84rem; color: #31586f; }
.tg-trig-values b { font-variant-numeric: tabular-nums; }

.cr-bridge { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 8px; width: 100%; }
.cr-card { display: flex; align-items: center; justify-content: center; min-width: 110px; min-height: 56px; padding: 10px 14px; border: 2px solid #16344d; border-radius: 12px; background: white; font-weight: 850; font-size: 1rem; text-align: center; font-variant-numeric: tabular-nums; }
.cr-card.cr-to { border-style: dashed; border-color: #8f2c43; color: #8f2c43; }
.cr-rate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 10px; border-radius: 10px; background: var(--gold-soft); color: #12334d; font-weight: 800; font-size: .84rem; text-align: center; }
.cr-commission { font-size: .74rem; font-weight: 750; color: #8f2c43; }

.model-readout { display: grid; gap: 4px; margin-top: 8px; font-size: .86rem; }
.model-readout .row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.model-readout .tag { padding: 2px 7px; border-radius: 999px; font-weight: 850; font-size: .78rem; }
.model-readout .tag.run { color: #075d68; background: var(--teal-soft); }
.model-readout .tag.rise { color: #8f2c43; background: #fdeef1; }
.model-readout .tag.grad { color: #12334d; background: var(--gold-soft); }

.mission-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.stepper-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.stepper-row { display: flex; align-items: center; gap: 6px; }
.stepper-row output { min-width: 3.2em; text-align: center; font-weight: 900; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.stepper-row .button { min-width: 44px; }
.point-status { margin: 6px 0 0; padding-left: 18px; font-size: .84rem; line-height: 1.45; }
.point-status .ok { color: #125336; font-weight: 800; }
.point-status .no { color: #813b4b; font-weight: 800; }

@media (max-width: 760px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 12px 14px 10px; }
  .topbar .brand-block { grid-column: 1; grid-row: 1; }
  .topbar .cambridge-tools { grid-column: 2; grid-row: 1; align-self: start; margin-top: 2px; }
  .path-picker { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .path-picker label { grid-row: 1; }
  .path-picker select { grid-column: 2; grid-row: 1; min-height: 39px; font-size: .87rem; }
  .objective-code { grid-column: 2; grid-row: 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; }
  .practice-options { gap: 6px; }
  .model-readout { font-size: .8rem; }
  .tg-rule-card { font-size: .84rem; }
  .cr-bridge { gap: 6px; }
  .cr-card { min-width: 96px; min-height: 50px; font-size: .9rem; padding: 8px 10px; }
}

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

/* polygon angle board */
.pg-board { display: grid; gap: 8px; justify-items: center; width: 100%; }
.pg-svg { max-width: 240px; width: 100%; height: auto; }
.pg-svg .edge { stroke: #16344d; stroke-width: 2.5; fill: #eaf4f7; }
.pg-svg .angle-arc { stroke: #c79a3b; stroke-width: 1.6; fill: none; }
.pg-svg .ext-arc { stroke: #8f2c43; stroke-width: 1.6; fill: none; stroke-dasharray: 4 3; }
.pg-svg text { font-size: 12px; font-weight: 800; fill: #16344d; }
.pg-svg .given { fill: #135a36; }
.pg-svg .unknown-label { fill: #8f2c43; }

/* Construction board (Triangle Construction Studio, Kimi) */
.cn-board { display: grid; gap: 8px; justify-items: center; width: 100%; }
.cn-svg { max-width: 280px; width: 100%; height: auto; }
.cn-svg .base { stroke: #16344d; stroke-width: 3; stroke-linecap: round; }
.cn-svg .side-line { stroke: #135a36; stroke-width: 2.4; stroke-linecap: round; }
.cn-svg .compass-arc { stroke: #c79a3b; stroke-width: 1.8; fill: none; stroke-dasharray: 6 4; }
.cn-svg .compass-arc-b { stroke: #2c6e8f; }
.cn-svg .cross { stroke: #8f2c43; stroke-width: 2.4; stroke-linecap: round; }
.cn-svg .vertex-dot { fill: #16344d; }
.cn-svg .cross-dot { fill: #8f2c43; }
.cn-svg text { font-size: 12px; font-weight: 800; fill: #16344d; }
.cn-svg .radius-label-a { fill: #9a7323; }
.cn-svg .radius-label-b { fill: #2c6e8f; }
.cn-svg .miss-note { fill: #8f2c43; font-weight: 800; }

/* Calculus & Functions Studio: curve board and machine board */
.cf-board { display: grid; gap: 10px; }
.cf-svg { width: 100%; max-width: 320px; background: #f6f9fc; border: 1px solid #d7e2ec; border-radius: 10px; }
.cf-svg .axis { stroke: #8aa2b8; stroke-width: 1.2; }
.cf-svg .curve { fill: none; stroke: #14508c; stroke-width: 2.4; }
.cf-svg .tangent { stroke: #d9930d; stroke-width: 2; stroke-dasharray: 5 4; }
.cf-svg .point-dot { fill: #d9930d; stroke: #102c46; stroke-width: 1; }
.cf-svg text { font-size: 11px; fill: #33475b; }
.cf-svg .machine-box { fill: #eaf2fa; stroke: #14508c; stroke-width: 1.6; rx: 8; }
.cf-svg .machine-arrow { stroke: #8aa2b8; stroke-width: 1.6; marker-end: none; }