:root {
  --blue: #149bd7;
  --ink: #102131;
  --line: #d8e2ea;
  --muted: #5c6b78;
  --wash: #edf5f9;
  --paper: #ffffff;
  --success: #167348;
  --success-soft: #eef8f2;
  --warning: #a92b38;
  --warning-soft: #fff4f2;
  --touch: 48px;
  --radius: 8px;
}

* { box-sizing: border-box; }
html,
body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--wash); font-family: Arial, Helvetica, sans-serif; }
button,
input { font: inherit; }
button { min-height: var(--touch); }

.app { min-height: 100vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.topbar { display: grid; grid-template-columns: minmax(190px, 1fr) auto; align-items: center; gap: 16px; padding: 12px 18px; color: #fff; background: #071018; }
.brand { min-width: 0; display: flex; align-items: center; gap: 14px; }
.brand-logo { display: inline-flex; border-radius: 6px; }
.brand-logo:focus-visible { outline: 4px solid rgba(20, 155, 215, .35); outline-offset: 3px; }
.brand img { width: 142px; height: auto; display: block; object-fit: contain; }
.brand h1 { margin: 0; font-size: clamp(1.35rem, 2vw, 2.05rem); line-height: 1.05; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.icon-button,
.home-button { min-width: var(--touch); min-height: var(--touch); display: inline-grid; place-items: center; padding: 0 14px; border: 2px solid #263d51; border-radius: var(--radius); color: #fff; background: #122436; font-weight: 800; text-decoration: none; cursor: pointer; }
.icon-button { width: var(--touch); padding: 0; }
.icon-button:hover,
.icon-button:focus-visible,
.home-button:hover,
.home-button:focus-visible { border-color: #8fd8f3; color: #06111a; background: var(--blue); }
.icon { width: 24px; height: 24px; display: block; pointer-events: none; }

.toolbar { min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--paper); overflow: visible; }
.toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-group.questions { margin-left: auto; }
.toolbar button,
.toolbar summary { min-height: var(--touch); display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid #b9c9d5; border-radius: var(--radius); color: var(--ink); background: var(--paper); font-weight: 800; cursor: pointer; }
.toolbar button:hover:not(:disabled),
.toolbar button:focus-visible,
.toolbar summary:hover,
.toolbar summary:focus-visible { border-color: var(--blue); background: #eef8fc; outline: 3px solid rgba(20, 155, 215, .18); outline-offset: 1px; }
.toolbar button.primary { border-color: var(--blue); color: #fff; background: var(--blue); }
.toolbar button.primary:hover,
.toolbar button.primary:focus-visible { color: #fff; background: #0f8ec6; }
.toolbar button:disabled { cursor: not-allowed; opacity: .48; }
.toolbar details { position: relative; }
.toolbar summary { list-style: none; }
.toolbar summary::-webkit-details-marker { display: none; }
.toolbar details[open] summary { border-color: var(--blue); background: #eef8fc; }
.menu-panel { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(310px, calc(100vw - 28px)); padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 14px 32px rgba(7, 16, 24, .18); }
.oo-mode-group { display: flex; align-items: center; gap: 8px; }
.oo-mode-group button.is-active { border-color: var(--blue); color: #fff; background: var(--blue); }
.toolbar button[data-action="bidmas"].is-active { border-color: #7d43b5; color: #fff; background: #7d43b5; }
.oo-questions-menu fieldset { display: grid; gap: 5px; margin: 0 0 10px; padding: 0; border: 0; }
.oo-questions-menu legend { margin-bottom: 4px; font-weight: 900; }
.oo-questions-menu label { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-weight: 750; }
.oo-questions-menu label:hover { background: #eef8fc; }
.oo-questions-menu input { width: 22px; height: 22px; margin: 0; accent-color: var(--blue); }
.oo-questions-menu .menu-panel button { width: 100%; }

.workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); padding: 12px; }
.model-panel { min-width: 0; min-height: 420px; display: grid; place-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.model-host { width: 100%; height: 100%; min-height: inherit; }

.oo-tool { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; padding: 14px; color: var(--ink); }
.oo-tool.is-decision { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.oo-stage-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.oo-stage-heading h2 { margin: 0; font-size: clamp(1.08rem, 1.7vw, 1.45rem); }
.oo-eyebrow { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

.oo-expression-grid { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.oo-expression-grid.is-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oo-tool.is-decision .oo-expression-grid { align-items: stretch; }
.oo-expression-card { min-width: 0; padding: 10px 14px 13px; border: 1px solid var(--line); border-left: 5px solid #c4d1da; border-radius: var(--radius); background: var(--paper); }
.oo-tool.is-decision .oo-expression-card { display: grid; align-content: center; }
.oo-expression-card.is-active { border-left-color: var(--blue); background: #f6fbfe; }
.oo-expression-card.is-complete { border-left-color: var(--success); background: var(--success-soft); }
.oo-expression-sequence { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.oo-expression-stage-trail { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; gap: 12px; color: var(--muted); font-size: clamp(2.4rem, 5.2vw, 4.6rem); font-weight: 850; line-height: 1.15; white-space: nowrap; }
.oo-stage-trail-arrow { color: #7d43b5; font-size: 1em; }
.oo-expression { min-width: 0; min-height: 84px; display: flex; align-items: center; justify-content: center; overflow-x: auto; overflow-y: hidden; padding: 3px; font-size: clamp(2.4rem, 5.2vw, 4.6rem); font-weight: 850; line-height: 1.15; white-space: nowrap; }
.oo-expression-sequence.is-compact-flow .oo-expression-stage-trail,
.oo-expression-sequence.is-compact-flow .oo-expression { font-size: clamp(2rem, 4vw, 3.6rem); }
.oo-expression-sequence.is-dense-flow .oo-expression-stage-trail,
.oo-expression-sequence.is-dense-flow .oo-expression { font-size: clamp(1.6rem, 3.2vw, 3rem); }
.oo-expression:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.oo-operation-node,
.oo-operand { display: inline-flex; align-items: center; }
.oo-operation-node { border-radius: var(--radius); }
.oo-operation-node.is-selected { outline: 3px solid var(--blue); outline-offset: 3px; background: #eef8fc; }
.oo-operation-node.is-correct { outline-color: var(--success); background: var(--success-soft); }
.oo-operation-node.is-tier-hint:not(.is-selected) { outline: 2px dashed var(--blue); outline-offset: 3px; }
.oo-bracket { color: var(--ink); font-weight: 950; }
.oo-operator { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; margin: 0 2px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--radius); color: inherit; background: transparent; font: inherit; line-height: 1; cursor: pointer; }
.oo-operator:hover,
.oo-operator:focus-visible { border-color: var(--blue); background: #eef8fc; outline: 3px solid transparent; }
.oo-power-operator { min-width: 32px; padding: 0 4px; align-self: flex-start; font-size: .72em; }
.oo-power-operator sup { line-height: 1; }

.oo-working-grid { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 12px; }
.oo-working-grid.is-feedback-only { grid-template-columns: minmax(0, 1fr); }
.oo-model-column,
.oo-response-panel { min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #f7fbfd; }
.oo-model-column { display: grid; grid-template-columns: minmax(0, 1fr); align-content: stretch; padding: 10px; overflow: hidden; }
.oo-model-column:empty { display: none; }
.oo-working-grid.is-feedback-only .oo-response-panel { align-content: start; padding: 0; border: 0; background: transparent; }
.oo-model-panel { min-width: 0; min-height: 0; }
.oo-model-panel h2,
.oo-compare-summary h2 { margin: 0 0 6px; font-size: 1rem; }
.oo-registered-model { min-height: 235px; display: grid; place-items: stretch; }
.oo-registered-model > .question-visual { width: 100%; height: 100%; margin: 0; }
.oo-registered-model .diagram-visual { width: 100%; max-height: 41vh; }
.oo-response-panel { display: grid; align-content: center; gap: 12px; padding: 14px; }
.oo-value-response { display: grid; gap: 5px; font-weight: 850; }
.oo-value-response input { width: min(100%, 190px); min-height: 58px; padding: 6px 12px; border: 2px solid var(--blue); border-radius: var(--radius); color: var(--ink); background: var(--paper); font-size: 1.8rem; font-weight: 900; text-align: center; }
.oo-feedback { min-height: 48px; display: grid; align-content: center; gap: 5px; padding: 10px 12px; border-left: 4px solid #c4d1da; border-radius: var(--radius); background: #f4f7f9; }
.oo-feedback strong { font-size: 1rem; }
.oo-feedback span { line-height: 1.35; }
.oo-feedback.is-correct { color: var(--success); border-left-color: var(--success); background: var(--success-soft); }
.oo-feedback.is-incorrect { color: var(--warning); border-left-color: var(--warning); background: var(--warning-soft); }
.oo-feedback-action { font-weight: 800; }
.oo-bidmas-guide { display: grid; gap: 9px; padding: 11px 12px; border: 2px solid #7d43b5; border-radius: var(--radius); background: #faf7fe; }
.oo-bidmas-heading h3,
.oo-bidmas-warning { margin: 0; }
.oo-bidmas-heading h3 { font-size: 1.05rem; }
.oo-bidmas-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.oo-bidmas-tiers li { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #d9c8e9; border-radius: 7px; background: #fff; }
.oo-bidmas-tiers li > strong { min-width: 2.1em; color: #6d369f; font-size: 1.2rem; text-align: center; }
.oo-bidmas-tiers span { min-width: 0; display: grid; gap: 2px; }
.oo-bidmas-tiers b,
.oo-bidmas-tiers small { line-height: 1.15; }
.oo-bidmas-tiers small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.oo-bidmas-warning { color: #56317c; font-size: .88rem; }
.oo-compare-summary { padding: 10px 14px; border-left: 4px solid var(--success); border-radius: var(--radius); background: var(--success-soft); }
.oo-compare-summary p,
.oo-exhausted { margin: 0; }
.oo-exhausted { padding: 10px; border-radius: var(--radius); background: #fff8df; font-weight: 800; }
.oo-live-region { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.instructions-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: var(--radius); color: var(--ink); box-shadow: 0 24px 64px rgba(7, 16, 24, .35); }
.instructions-dialog::backdrop { background: rgba(7, 16, 24, .58); }
.instructions-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; color: #fff; background: #071018; }
.instructions-header h2 { margin: 0; }
.instructions-body { padding: 18px; line-height: 1.55; overflow: auto; }

@media (min-width: 1080px) and (min-height: 700px) {
  html,
  body { height: 100%; overflow: hidden; }
  .app { height: 100vh; min-height: 0; }
  .model-panel,
  .model-host { min-height: 0; }
}

@media (max-width: 980px) {
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-group.questions { margin-left: 0; }
}

@media (min-width: 861px) {
  .oo-expression-grid.is-compare .oo-expression-stage-trail,
  .oo-expression-grid.is-compare .oo-expression { font-size: clamp(2.6rem, 4.6vw, 4.4rem); }
  .oo-expression-grid.is-compare .oo-expression-sequence.is-compact-flow .oo-expression-stage-trail,
  .oo-expression-grid.is-compare .oo-expression-sequence.is-compact-flow .oo-expression { font-size: clamp(1.8rem, 3.2vw, 3rem); }
  .oo-expression-grid.is-compare .oo-expression-sequence.is-dense-flow .oo-expression-stage-trail,
  .oo-expression-grid.is-compare .oo-expression-sequence.is-dense-flow .oo-expression { font-size: clamp(1.45rem, 2.4vw, 2.4rem); }
}

@media (max-width: 860px), (max-height: 680px) {
  .topbar { grid-template-columns: 1fr; }
  .top-actions { justify-content: flex-start; flex-wrap: wrap; }
  .workspace { display: block; }
  .model-panel { min-height: 0; overflow: visible; }
  .model-host { height: auto; min-height: 0; }
  .oo-tool,
  .oo-tool.is-decision { height: auto; display: block; }
  .oo-stage-heading,
  .oo-expression-grid,
  .oo-working-grid,
  .oo-compare-summary { margin-bottom: 12px; }
  .oo-expression-grid.is-compare,
  .oo-working-grid { grid-template-columns: minmax(0, 1fr); }
  .oo-expression-stage-trail,
  .oo-expression { font-size: clamp(1.45rem, 7vw, 2.3rem); }
  .oo-expression-sequence { justify-content: flex-start; gap: 8px; }
  .oo-registered-model { min-height: 250px; }
  .oo-bidmas-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .toolbar-group { width: 100%; }
  .toolbar-group > button,
  .toolbar-group > details { flex: 1 1 135px; }
  .toolbar summary { justify-content: center; }
  .oo-mode-group { width: 100%; }
  .oo-mode-group button { flex: 1; padding-inline: 6px; }
  .oo-tool { padding: 10px; }
  .oo-stage-heading { align-items: start; flex-direction: column; gap: 3px; }
  .oo-expression-card { padding-inline: 8px; }
  .oo-bidmas-tiers { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  @page { size: A4 landscape; margin: 9mm; }
  html,
  body { width: 297mm; height: auto; min-height: 0; overflow: visible; background: #fff !important; }
  .topbar,
  .oo-toolbar,
  .oo-live-region,
  .oo-exhausted,
  dialog { display: none !important; }
  .app { min-height: 0; display: block; }
  .workspace { display: block; padding: 0; }
  .model-panel { min-height: 0; overflow: visible; border: 0; }
  .model-host { height: auto; min-height: 0; }
  .oo-tool,
  .oo-tool.is-decision { height: auto; display: grid; grid-template-rows: auto auto auto auto; gap: 5mm; padding: 0; overflow: visible; }
  .oo-expression-grid.is-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oo-expression { min-height: 18mm; overflow: visible; font-size: 24pt; }
  .oo-operator { min-width: 10mm; min-height: 10mm; }
  .oo-working-grid { grid-template-columns: minmax(0, 1.5fr) minmax(65mm, .7fr); gap: 4mm; }
  .oo-model-column,
  .oo-response-panel { break-inside: avoid; }
  .oo-registered-model { min-height: 70mm; }
  .oo-registered-model .diagram-visual { max-height: 72mm; }
  .oo-feedback { font-size: 10pt; }
}