/* Interactive demo workbenches. Loaded only on the two demo pages; tokens come from site.css. */

:is(.model-workbench, .diagnostics-workbench) { --ok: #7bd3a0; --warn: #f0b47a; --alt: #7fa7c9; border: 1px solid var(--rule-2); border-radius: 18px; background: #0d0b08; box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.9); font-size: 0.86rem; overflow: hidden; }
.workbench-titlebar, .diagnostics-topbar { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--rule); background: #12100c; }
.window-dots { display: flex; gap: 7px; }
.window-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3327; }
.window-dots i:first-child { background: var(--accent); }
.workbench-file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.workbench-file strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workbench-file small { white-space: nowrap; color: var(--fg-3); }
.file-badge { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: #1f6b46; font: 700 0.72rem/1 var(--sans); color: #fff; }
.file-badge-report { background: #9c3a2f; }
.model-health, .diagnostics-export { display: flex; align-items: center; gap: 8px; margin-left: auto; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.12em; white-space: nowrap; color: var(--fg-3); }
:is(.model-health, .diagnostics-export, .live-chip, .diagnostics-live, .model-statusbar) i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.model-health strong, .diagnostics-export b { letter-spacing: 0.04em; color: var(--ok); }
.model-warning .model-health i { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.model-warning .model-health strong { color: var(--warn); }
.model-ribbon, .diagnostics-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.ribbon-brand { font: 700 0.74rem/1 var(--sans); letter-spacing: 0.14em; color: var(--accent-hi); }
.ribbon-brand span { font-weight: 500; color: var(--fg-3); }
.scenario-switch, .diagnostics-period { display: inline-flex; padding: 3px; border: 1px solid var(--rule-2); border-radius: 999px; }
:is(.scenario-switch, .diagnostics-period) button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 600 0.8rem/1 var(--sans); color: var(--fg-2); cursor: pointer; transition: color 0.3s, background-color 0.3s; }
:is(.scenario-switch, .diagnostics-period) button:hover { color: var(--fg); }
:is(.scenario-switch, .diagnostics-period) button.active { background: var(--gold-grad); color: var(--accent-ink); }
:is(.scenario-switch, .diagnostics-period) button.active::selection { background: rgba(23, 17, 6, 0.24); color: var(--accent-ink); }
.ribbon-action { min-height: 36px; margin-left: auto; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; background: none; font: 600 0.8rem/1 var(--sans); color: var(--fg-2); cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.ribbon-action:hover { border-color: var(--accent); color: var(--fg); }
.formula-bar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--rule); background: #0b0a07; font: 500 0.8rem/1.3 var(--mono); white-space: nowrap; overflow-x: auto; }
.formula-bar span { min-width: 34px; color: var(--accent); }
.formula-bar i { color: var(--fg-3); }
.formula-bar code { font: inherit; }
.formula-bar strong { margin-left: auto; font-weight: 600; color: var(--accent-hi); }
.model-shell, .diagnostics-shell { display: grid; grid-template-columns: 214px minmax(0, 1fr); }
.model-sheet-nav, .diagnostics-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--rule); background: #0f0d0a; }
.model-sheet-nav > span { padding: 4px 10px 10px; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.18em; color: var(--fg-3); }
:is(.model-sheet-nav, .diagnostics-nav) button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: 500 0.84rem/1.2 var(--sans); text-align: left; color: var(--fg-2); cursor: pointer; transition: color 0.25s, background-color 0.25s; }
:is(.model-sheet-nav, .diagnostics-nav) button :is(b, span) { min-width: 18px; font: 600 0.64rem/1 var(--sans); letter-spacing: 0.06em; color: var(--fg-3); }
:is(.model-sheet-nav, .diagnostics-nav) button i { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; }
:is(.model-sheet-nav, .diagnostics-nav) button:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg); }
:is(.model-sheet-nav, .diagnostics-nav) button.active { background: rgba(217, 178, 95, 0.14); color: var(--accent-hi); }
:is(.model-sheet-nav, .diagnostics-nav) button.active :is(b, span) { color: var(--accent); }
:is(.model-sheet-nav, .diagnostics-nav) button.active i { background: var(--accent); }
.model-canvas, .diagnostics-main { display: grid; align-content: start; gap: 18px; min-width: 0; padding: 22px; }
.model-canvas-head, .diagnostics-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.model-canvas-head span, .diagnostics-heading > div:first-child > span { font: 600 0.64rem/1 var(--sans); letter-spacing: 0.18em; color: var(--accent); }
:is(.model-canvas-head, .diagnostics-heading) h2 { margin-top: 8px; font: 500 clamp(1.5rem, 2.2vw, 2rem)/1.05 var(--serif); }
.diagnostics-heading p { margin-top: 6px; font-size: 0.84rem; color: var(--fg-3); }
.live-chip, .diagnostics-live { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 999px; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.14em; white-space: nowrap; color: var(--fg-2); }
.diagnostics-live { margin-left: auto; }
.model-kpi-grid, .diagnostics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
:is(.model-kpi-grid, .diagnostics-kpis) article { min-width: 0; padding: 16px; border: 1px solid var(--rule); border-radius: 12px; background: rgba(255, 255, 255, 0.015); transition: border-color 0.3s; }
:is(.model-kpi-grid, .diagnostics-kpis) span { display: block; font: 500 0.7rem/1.3 var(--sans); color: var(--fg-3); }
:is(.model-kpi-grid, .diagnostics-kpis) strong { display: block; margin-top: 10px; font: 500 clamp(1.3rem, 1.9vw, 1.8rem)/1 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap; color: var(--accent-hi); }
:is(.model-kpi-grid, .diagnostics-kpis) small { display: block; margin-top: 8px; font-size: 0.72rem; color: var(--fg-3); }
.diagnostics-kpis small.positive { color: var(--ok); }
.diagnostics-kpis article.warning { border-color: rgba(240, 180, 122, 0.5); }
.diagnostics-kpis article.warning strong { color: var(--warn); }
.model-dashboard-grid, .diagnostics-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr); gap: 12px; }
:is(.model-chart-card, .model-drivers, .model-table-card, .diagnostics-chart, .cash-release, .diagnostics-signals) { min-width: 0; padding: 18px; border: 1px solid var(--rule); border-radius: 12px; background: rgba(255, 255, 255, 0.015); }
:is(.model-chart-card, .model-drivers, .model-table-card, .diagnostics-chart, .diagnostics-signals) > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
:is(.model-chart-card, .model-drivers, .model-table-card, .diagnostics-chart, .diagnostics-signals) > header span { display: block; font: 600 0.62rem/1.3 var(--sans); letter-spacing: 0.16em; color: var(--fg-3); }
:is(.model-chart-card, .model-drivers, .model-table-card, .diagnostics-chart, .diagnostics-signals) > header :is(strong, b) { display: block; margin-top: 6px; font: 600 0.92rem/1.25 var(--sans); color: var(--fg); }
.model-table-card > header > span, .diagnostics-signals > header > small { font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0; color: var(--fg-3); }
.chart-legend, .diagnostics-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
:is(.chart-legend, .diagnostics-legend) span { display: inline-flex !important; align-items: center; gap: 6px; font: 500 0.72rem/1 var(--sans) !important; letter-spacing: 0 !important; color: var(--fg-3); }
:is(.chart-legend, .diagnostics-legend) i { width: 14px; height: 2px; background: var(--accent-hi); }
:is(.chart-legend, .diagnostics-legend) span + span i { background: var(--alt); }
.diagnostics-legend { margin-top: 10px; }
.model-main-chart, .diagnostics-chart svg { width: 100%; height: auto; }
.grid-lines line { stroke: rgba(236, 211, 152, 0.09); }
[data-model-chart-area], [data-diagnostics-area] { fill: rgba(217, 178, 95, 0.14); }
[data-model-chart-revenue], [data-diagnostics-line] { fill: none; stroke: var(--accent-hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ebitda-line, .cash-line { fill: none; stroke: var(--alt); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-years text { fill: var(--fg-3); font: 500 12px var(--sans); }
.diagnostics-chart .chart-badge { padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: 999px; letter-spacing: 0.08em; color: var(--accent); }
:is(.model-drivers, .cash-release) label { display: grid; gap: 8px; margin-top: 14px; }
:is(.model-drivers, .cash-release) label > span { display: flex; justify-content: space-between; gap: 10px; font: 500 0.8rem/1.3 var(--sans); letter-spacing: 0; color: var(--fg-2); }
:is(.model-drivers, .cash-release) output { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-hi); }
:is(.model-drivers, .cash-release) input[type="range"] { width: 100%; height: 28px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
:is(.model-drivers, .cash-release) input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(236, 211, 152, 0.22); }
:is(.model-drivers, .cash-release) input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; border: 3px solid #0d0b08; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 1px var(--accent); -webkit-appearance: none; }
:is(.model-drivers, .cash-release) input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(236, 211, 152, 0.22); }
:is(.model-drivers, .cash-release) input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #0d0b08; border-radius: 50%; background: var(--accent-hi); box-shadow: 0 0 0 1px var(--accent); }
.driver-impact, .cash-release > div { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.driver-impact span, .cash-release > div small, .cash-release > span { display: block; font: 600 0.62rem/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.driver-impact strong, .cash-release > div strong { display: block; margin-top: 8px; font: 500 1.3rem/1.12 var(--serif); font-variant-numeric: lining-nums; color: var(--accent-hi); }
.driver-impact p, .cash-release > div p { margin-top: 6px; font-size: 0.76rem; line-height: 1.5; color: var(--fg-3); }
.model-warning .driver-impact strong { color: var(--warn); }
.cash-release h3 { margin-top: 8px; font: 500 1.25rem/1.15 var(--serif); }
.model-table-scroll { overflow-x: auto; }
.model-table { width: 100%; min-width: 560px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.model-table :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: right; }
.model-table thead th { font: 600 0.66rem/1 var(--sans); letter-spacing: 0.1em; color: var(--fg-3); }
.model-table :is(thead th:first-child, tbody th) { text-align: left; }
.model-table tbody th { font-weight: 500; white-space: nowrap; color: var(--fg-2); }
.model-table td { font: 500 0.84rem/1 var(--mono); }
.model-table td button { display: block; width: calc(100% + 24px); margin: -10px -12px; padding: 10px 12px; border: 0; background: none; font: inherit; text-align: right; cursor: pointer; transition: background-color 0.2s; }
.model-table td button:hover { background: rgba(217, 178, 95, 0.1); }
.model-table td button.selected { background: rgba(217, 178, 95, 0.16); color: var(--accent-hi); outline: 1px solid var(--accent); outline-offset: -1px; }
.model-table td.pass-cell button { color: var(--ok); }
.model-table td.check-cell button { color: var(--warn); }
.model-statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 18px; border-top: 1px solid var(--rule); background: #12100c; font: 500 0.68rem/1 var(--mono); color: var(--fg-3); }
.model-statusbar span { display: inline-flex; align-items: center; gap: 7px; }
.model-statusbar b { margin-left: auto; font-weight: 500; color: var(--fg-2); }
.diagnostics-filterbar label { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--fg-3); }
.diagnostics-filterbar select { min-height: 38px; padding: 0 34px 0 14px; border: 1px solid var(--rule-2); border-radius: 999px; background: #17140f url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 stroke=%22%23d9b25f%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m5 8 5 5 5-5%22/%3E%3C/svg%3E") right 10px center / 16px no-repeat; font-size: 0.82rem; -webkit-appearance: none; appearance: none; cursor: pointer; }
.diagnostics-filterbar option { background: #17140f; color: #f0e9db; }
.health-score { --score: 76; display: flex; align-items: center; gap: 12px; }
.health-score > div { position: relative; display: grid; place-content: center; justify-items: center; flex: none; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--accent-hi) calc(var(--score) * 1%), rgba(236, 211, 152, 0.14) 0); }
.health-score > div::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #0d0b08; }
.health-score strong { position: relative; font: 500 1.5rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--accent-hi); }
.health-score small { position: relative; font-size: 0.6rem; color: var(--fg-3); }
.health-score > span { font: 600 0.6rem/1.5 var(--sans); letter-spacing: 0.16em; color: var(--fg-3); }
.diagnostics-signals article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rule); }
.diagnostics-signals article > b { font: 600 0.7rem/1 var(--sans); color: var(--accent); }
.diagnostics-signals article span { font: 600 0.6rem/1 var(--sans); letter-spacing: 0.16em; color: var(--fg-3); }
.diagnostics-signals article h3 { margin-top: 5px; font: 600 0.95rem/1.25 var(--sans); }
.diagnostics-signals article p { margin-top: 3px; font-size: 0.8rem; color: var(--fg-3); }
.diagnostics-signals article > i { padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: 999px; font: 600 0.66rem/1 var(--sans); font-style: normal; white-space: nowrap; color: var(--fg-2); }
.diagnostics-signals .signal-high > i { border-color: rgba(229, 132, 107, 0.6); color: #f0998a; }

@media (max-width: 1020px) {
  .model-shell, .diagnostics-shell { grid-template-columns: minmax(0, 1fr); }
  .model-sheet-nav, .diagnostics-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; }
  .model-sheet-nav > span { display: none; }
  :is(.model-sheet-nav, .diagnostics-nav) button { flex: none; }
  :is(.model-sheet-nav, .diagnostics-nav) button i { display: none; }
  .model-dashboard-grid, .diagnostics-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .model-kpi-grid, .diagnostics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-canvas, .diagnostics-main { padding: 16px; }
  .workbench-file small, .model-health span, .diagnostics-export { display: none; }
  .diagnostics-heading { align-items: flex-start; flex-direction: column; }
  .diagnostics-signals article { grid-template-columns: 26px minmax(0, 1fr); }
  .diagnostics-signals article > i { grid-column: 2; justify-self: start; }
  .diagnostics-live { display: none; }
}
@media (max-width: 380px) {
  :is(.scenario-switch, .diagnostics-period) button { padding: 0 11px; }
  .live-chip { display: none; }
}