/* 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; }

/* Algebra Manipulation Studio board (Kimi) */
.am-given-line { margin: 0 0 8px; font-weight: 900; font-size: 1.15rem; color: var(--ink); text-align: center; }
.am-givens { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 10px; }
.am-factor-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
.am-term { display: inline-block; min-width: 34px; padding: 6px 8px; border: 1px solid #9ab3c3; border-radius: 9px; background: #f2f8fb; font-weight: 850; text-align: center; font-variant-numeric: tabular-nums; }
.am-term.factor { border-color: #d58d16; background: var(--gold-soft); }
.am-term.result { border-color: #4e9b6d; background: #e6f5e9; font-size: 1.05rem; }
.am-bracket { font-weight: 900; color: #51697a; font-size: 1.15rem; }
.am-square { font-weight: 900; color: #51697a; }
.am-times { font-weight: 900; color: #8aa2b1; }
.am-grid { display: grid; gap: 5px; justify-content: center; margin: 8px 0; }
.am-grid.am-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.am-cell { padding: 6px 8px; border: 1px dashed #b7c9d4; border-radius: 8px; background: #fbfdfe; font-weight: 750; font-size: .85rem; text-align: center; font-variant-numeric: tabular-nums; }
.am-cell.head { border: 1px solid #9ab3c3; background: #eef4f8; font-weight: 850; }
.am-cell.am-corner { color: #8aa2b1; }
.am-cell.pending { color: #7d95a5; }
.am-arrow { font-weight: 900; color: #8aa2b1; align-self: center; }
.am-result-line { margin-top: 6px; text-align: center; font-weight: 750; color: #375d73; }

/* Changing the subject: the equation's two sides sit on the bench, and the inversion steps
   are listed underneath. */
.am-eq { row-gap: 8px; }
.am-eq-side { display: inline-flex; }
.am-term.side { border-color: #14508c; background: #e8f1fa; color: #10395f; }
.am-eq-sign { font-weight: 900; font-size: 1.25rem; color: #51697a; padding: 0 2px; }
.am-subject { flex-basis: 100%; text-align: center; font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; color: #8a5a00; }
.am-op-steps { display: grid; gap: 6px; margin: 8px 0; padding-left: 1.5rem; text-align: left; }
.am-op { font-weight: 750; color: #33475b; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.am-op::marker { color: #8aa2b1; font-weight: 850; }

/* Rational expressions: the whole numerator over the whole denominator, then the parts side by
   side with the shared bracket struck through, then the authored steps and the result. */
.am-givens.am-ratio { display: grid; justify-items: center; gap: 4px; }
.am-ratio-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.am-ratio-bar { width: min(100%, 260px); height: 2px; border-radius: 2px; background: var(--ink); }
.am-term.ratio-whole { max-width: 100%; overflow-wrap: anywhere; font-size: .95rem; }
.am-ratio-work { display: grid; justify-items: center; gap: 6px; margin: 8px 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfe; }
.am-term.ratio-part { min-width: 30px; font-size: .9rem; }
.am-term.matched { border-color: #8f2c43; color: #8f2c43; background: #f9ecef; text-decoration: line-through; }
.am-givens.am-system { display: grid; justify-items: center; gap: 5px; }
.am-term.system-eq { max-width: 100%; overflow-wrap: anywhere; font-size: .95rem; }
.am-system-work { display: grid; justify-items: center; gap: 7px; margin: 8px 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfe; }
.am-system-work .am-factor-row { max-width: 100%; }
.am-system-work .am-term { max-width: 100%; overflow-wrap: anywhere; font-size: .88rem; }

/* Animated like-term collection (lookang, 2026-10-22): cards glow family by family,
   then gather with the coefficient arithmetic written out. */
@keyframes amcIn { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes amcGlow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px currentColor; } }
.am-collect { display: grid; gap: 10px; justify-content: center; margin: 8px 0; }
.am-collect .amc-raw .am-term { animation: amcIn .45s both, amcGlow 1.1s .9s; }
.amc-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 8px 10px; border-radius: 12px; animation: amcIn .5s both; }
.amc-group .am-term { animation: none; }
.amc-title { font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; opacity: .75; margin-right: 2px; }
.amc-calc { font-weight: 800; font-variant-numeric: tabular-nums; animation: amcIn .4s both; }
.amc-group .am-arrow, .amc-group .am-term.result { animation: amcIn .4s both; }
.amc-final { display: flex; align-items: center; gap: 8px; justify-content: center; animation: amcIn .5s both; }
.am-term.fam-0 { border-color: #14508c; color: #14508c; background: #e8f1fa; }
.am-term.fam-1 { border-color: #135a36; color: #135a36; background: #e6f5e9; }
.am-term.fam-2 { border-color: #8f2c43; color: #8f2c43; background: #f9ecef; }
.amc-group.fam-0 { background: #eef4fb; border: 1px dashed #14508c; color: #14508c; }
.amc-group.fam-1 { background: #ecf7ef; border: 1px dashed #135a36; color: #135a36; }
.amc-group.fam-2 { background: #f9f0f2; border: 1px dashed #8f2c43; color: #8f2c43; }
@media (prefers-reduced-motion: reduce) { .am-collect *, .amc-final { animation: none !important; } }
.am-scan { display: grid; gap: .65rem; padding: .9rem; border: 1px solid #bbd4e2; border-radius: .8rem; background: #f4f9fc; }
.am-scan .am-factor-row { justify-content: flex-start; flex-wrap: wrap; gap: .45rem; }
.am-scan-term { cursor: pointer; min-height: 44px; background: #fff; border: 2px solid #87aabc; font: inherit; font-weight: 800; }
.am-scan-term.selected { background: #d5edf9; border-color: #1473ab; box-shadow: 0 0 0 2px #a7d8ef; }
.am-scan-term:focus-visible { outline: 3px solid #b56d00; outline-offset: 2px; }
.am-scan-term:disabled { opacity: 1; cursor: default; }
.am-scan-instruction, .am-scan-feedback { margin: 0; }
.am-scan-input { width: 6rem; min-height: 44px; padding: .4rem; border: 1px solid #87aabc; border-radius: .4rem; font: inherit; }
.am-scan-result { border-left: 4px solid #12856a; background: #e4f4eb; padding: .55rem; border-radius: .35rem; overflow-wrap: anywhere; }
.am-scan-feedback:empty { display: none; }

/* Single-bracket distribution: a movable outside factor reveals one product per term. */
.am-expand-givens { gap: 8px; }
.am-expand-source { cursor: grab; touch-action: none; user-select: none; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.am-expand-source.is-selected { outline: 3px solid #e7a62d; outline-offset: 2px; transform: translateY(-2px); box-shadow: 0 5px 12px #8b590033; }
.am-expand-source.is-dragging { opacity: .35; cursor: grabbing; }
.am-expand-targets { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.am-expand-term { min-height: 44px; cursor: pointer; background: #fff; border: 2px dashed #8ca8ba; touch-action: manipulation; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.am-expand-term:hover, .am-expand-term:focus-visible { border-color: var(--teal); background: var(--teal-soft); }
.am-expand-term.is-done { border-style: solid; border-color: #44835c; background: #e6f5e9; }
.am-expand-term.is-drop-target { transform: scale(1.06); border-color: #a86500; background: #fff1c4; box-shadow: 0 0 0 4px #f4c55c88; }
.am-expand-work { display: grid; gap: 8px; margin: 8px 0; padding: 10px; border: 1px solid #bbd4e2; border-radius: 12px; background: #f4f9fc; }
.am-expand-instruction, .am-expand-feedback { margin: 0; }
.am-expand-products { display: grid; gap: 7px; }
.am-expand-product { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border: 1px solid #95c6ad; border-radius: 9px; background: #e8f5ec; font-weight: 800; text-align: center; animation: amExpandReveal .55s cubic-bezier(.2,.75,.25,1) both; }
.am-expand-pending { border-style: dashed; border-color: #bdcbd4; background: #fbfdfe; color: #8197a5; font-weight: 600; }
.am-expand-final { display: grid; gap: 4px; justify-items: center; padding: 9px; border-radius: 9px; color: #14508c; background: #e8f1fa; text-align: center; animation: amExpandReveal .55s both; }
.am-expand-final b { font-size: 1.08rem; }
.am-expand-ghost { position: fixed; z-index: 99999; width: max-content; max-width: 130px; padding: 7px 10px; border: 2px solid #d58d16; border-radius: 10px; color: #795000; background: #fff2ce; box-shadow: 0 8px 22px #102c4640; font-weight: 900; pointer-events: none; }
@keyframes amExpandReveal { from { opacity: 0; transform: translateY(9px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .am-expand-source, .am-expand-term { transition: none; } .am-expand-product, .am-expand-final { animation: none; } }