/* Calculator workbench: shared palette, native disclosures and real results. */ #calculatorTool { min-width: 0; } #calculatorTool .calculator-mobile-jump, #calculatorTool .calculator-mobile-return { display: none; } #calculatorTool .calculator-toolbar { gap: 12px; margin-bottom: 16px; } #calculatorTool .calculator-mode { padding: 3px; gap: 3px; border-radius: 7px; } #calculatorTool .calculator-mode button { min-height: 36px; padding: 7px 22px; font-size: 13px; transition: none; } #calculatorTool .calculator-mode button[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); } #calculatorTool .scenario-identity { font-size: 11px; color: var(--text-secondary); } #calculatorTool .calculator-scope-controls { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; } #calculatorTool .calculator-provider, #calculatorTool .calculator-currency { display: flex; align-items: center; gap: 8px; font-size: 12px; } #calculatorTool .calculator-scope-controls select { width: 90px; min-height: 38px; font-size: 12px; } #calculatorTool .calculator-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 16px; align-items: start; margin-bottom: 16px; } #calculatorTool .calculator-inputs { padding: 20px; } #calculatorTool .calculator-inputs .panel-header, #calculatorTool .calculator-result-panel .panel-header { border-bottom: 0; padding: 0; margin: 0 0 4px; } #calculatorTool .calculator-inputs .panel-header h2, #calculatorTool .calculator-result-panel h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.35px; } #calculatorTool #resetCalculation { padding: 5px 8px; min-height: 36px; font-size: 12px; background: transparent; border-color: transparent; } #calculatorTool #resetCalculation:hover { border-color: var(--border-subtle); background: var(--surface-hover); } #calculatorTool #calculatorInputHint { margin: 0 0 16px; font-size: 12px; } #calculatorTool .calculator-input-group { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 7px; margin: 0 0 10px; } #calculatorTool summary { list-style: none; cursor: pointer; } #calculatorTool summary::-webkit-details-marker { display: none; } #calculatorTool .calculator-input-group > summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 16px; align-items: center; column-gap: 10px; padding: 14px 12px; min-height: 66px; } #calculatorTool .calculator-step { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--border-subtle); border-radius: 15px; color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; } #calculatorTool .calculator-group-copy { display: block; min-width: 0; } #calculatorTool .calculator-group-copy strong { display: block; font-size: 13px; font-weight: 600; } #calculatorTool .calculator-group-copy small { display: block; font-size: 11px; margin-top: 3px; line-height: 1.45; } #calculatorTool .calculator-input-group[open] > summary .calculator-group-copy small { display: none; } #calculatorTool .calculator-group-progress { white-space: nowrap; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } #calculatorTool .calculator-group-progress[data-state="error"] { color: var(--negative); } #calculatorTool .calculator-group-progress[data-state="entered"] { color: var(--positive); } #calculatorTool .calculator-chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; color: var(--text-secondary); transition: transform 140ms; } #calculatorTool details[open] > summary > .calculator-chevron { transform: rotate(180deg); } #calculatorTool .calculator-input-group fieldset { border: 0; margin: 0; padding: 0 14px 16px; min-width: 0; } #calculatorTool .calculator-input-group legend.sr-only { width: 1px; padding: 0; margin: -1px; border: 0; } #calculatorTool .calculator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } #calculatorTool .calculator-field label { min-height: 37px; font-size: 13px; line-height: 1.4; margin-bottom: 5px; } #calculatorTool .calculator-field label span { font-size: 11px; color: var(--text-secondary); } #calculatorTool .calculator-field input { min-height: 43px; padding: 10px 12px; font-size: 14px; background: var(--surface); border-color: var(--border-control); border-radius: 6px; } #calculatorTool .calculator-field input[aria-invalid="true"] { border-color: var(--negative); } #calculatorTool .calculator-field small { font-size: 12px; line-height: 1.45; margin-top: 6px; } #calculatorTool .calculator-field .calculator-field-error { color: var(--negative); } #calculatorTool .calculator-input-note { margin: 15px 0 0; font-size: 11px; color: var(--text-secondary); } #calculatorTool .calculator-results { display: grid; gap: 12px; min-width: 0; } #calculatorTool .calculator-result-panel { padding: 20px; } #calculatorTool .calculator-result-subtitle { margin: 0; } #calculatorTool .calculator-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 12px 0 16px; } #calculatorTool .calculator-kpi { grid-column: span 2; border: 0; padding: 13px 12px; min-width: 0; } #calculatorTool .calculator-kpi:nth-child(odd) { border-right: 0; padding-left: 12px; } #calculatorTool .calculator-kpi:nth-child(3), #calculatorTool .calculator-kpi:nth-child(6) { padding-left: 0; } #calculatorTool .calculator-kpi:nth-child(4), #calculatorTool .calculator-kpi:nth-child(5), #calculatorTool .calculator-kpi:nth-child(7), #calculatorTool .calculator-kpi:nth-child(8) { border-left: 1px solid var(--border-subtle); } #calculatorTool .calculator-kpi > span { display: block; font-size: 12px; line-height: 1.45; color: var(--text-secondary); } #calculatorTool .calculator-kpi strong { margin: 4px 0 2px; font-size: 23px; line-height: 1.2; letter-spacing: -.45px; font-weight: 550; } #calculatorTool .calculator-kpi small { display: block; font-size: 11px; line-height: 1.4; color: var(--text-muted); } #calculatorTool .calculator-kpi-primary { grid-column: span 3; border-bottom: 1px solid var(--border-subtle); margin-bottom: 7px; padding: 0 14px 17px; } #calculatorTool .calculator-kpi-primary:first-child { padding-left: 0; border-right: 1px solid var(--border-subtle); } #calculatorTool .calculator-kpi-primary > span { font-size: 12px; } #calculatorTool .calculator-kpi-primary strong { font-size: clamp(25px, 2.4vw, 36px); letter-spacing: -.7px; margin: 9px 0 7px; } #calculatorTool .calculator-guidance { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px 14px; } #calculatorTool .calculator-guidance > strong { font-size: 13px; font-weight: 550; } #calculatorTool .calculator-guidance .panel-kicker { font-size: 11px; margin: 3px 0 0; } #calculatorTool .calculator-guidance[data-state="error"] { border-color: var(--negative); } #calculatorTool .calculator-stage-panel { padding: 14px 16px; } #calculatorTool .calculator-stage-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; } #calculatorTool #calculatorStageHint { font-size: 11px; margin: 8px 0; } #calculatorTool .calculator-stage-panel .performance-table-wrap { max-height: 192px; overflow: auto; margin: 0; border: 1px solid var(--border-subtle); border-radius: 3px; } #calculatorTool .calculator-stage-panel table { min-width: 500px; } #calculatorTool .calculator-stage-panel th, #calculatorTool .calculator-stage-panel td { padding: 6px 10px; font-size: 11px; } #calculatorTool .calculator-stage-panel thead th { background: var(--surface-raised); position: sticky; top: 0; z-index: 1; } #calculatorTool .calculator-footnote { font-size: 11px; line-height: 1.45; margin-top: 8px; } #calculatorTool .calculator-history, #calculatorTool .scenario-workspace, #calculatorTool .calculator-method { display: block; border: 1px solid var(--border-subtle); border-radius: 7px; padding: 0; margin: 0 0 10px; background: var(--surface); } #calculatorTool .calculator-history > summary, #calculatorTool .scenario-workspace > summary, #calculatorTool .calculator-method > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 14px 20px; min-height: 59px; margin: 0; border: 0; font-size: 13px; color: var(--text-primary); font-weight: 600; } #calculatorTool .calculator-history > summary > .calculator-chevron, #calculatorTool .scenario-workspace > summary > .calculator-chevron, #calculatorTool .calculator-method > summary > .calculator-chevron { margin-left: auto; } #calculatorTool .calculator-disclosure-hint { display: block; font-size: 11px; color: var(--text-secondary); margin-top: 3px; font-weight: 400; } #calculatorTool .calculator-history[data-state="stale"] > summary .calculator-disclosure-hint { color: var(--warning); } #calculatorTool .calculator-history-content, #calculatorTool .scenario-content { padding: 0 20px 18px; } #calculatorTool .calculator-history-actions { margin: 12px 0; justify-content: flex-start; } #calculatorTool .scenario-badge { border: 0; background: none; color: var(--text-secondary); padding: 0; border-radius: 0; font-size: 11px; font-weight: 400; } #calculatorTool .scenario-workspace > summary .scenario-badge { margin-left: 0; } #calculatorTool .scenario-scope { margin-bottom: 14px; } #calculatorTool .scenario-content .scenario-footnote { margin-bottom: 0; } #calculatorTool .calculator-method > :not(summary) { margin-left: 20px; margin-right: 20px; } #calculatorTool .calculator-method > p:last-child { margin-bottom: 18px; } #calculatorTool #calculatorNotes:empty { display: none; } #calculatorTool #calculatorHistoryFreshness:empty { display: none; } /* A shared proportional scale makes the scenario visible without asserting a cohort. */ #calculatorTool .calculator-flow-panel { padding: 18px 20px; min-width: 0; } #calculatorTool .calculator-flow-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; justify-content: space-between; } #calculatorTool .calculator-flow-header h2 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.3px; } #calculatorTool .calculator-flow-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--surface-raised); } #calculatorTool .calculator-flow-switch button { min-height: 34px; padding: 6px 10px; border: 1px solid transparent; border-radius: 5px; color: var(--text-secondary); background: transparent; font-size: 13px; font-weight: 500; white-space: nowrap; } #calculatorTool .calculator-flow-switch button[aria-pressed="true"] { color: var(--accent-foreground); background: var(--accent); border-color: var(--accent); } #calculatorTool .calculator-flow-switch button:hover:not([aria-pressed="true"]) { color: var(--text-primary); background: var(--surface-hover); } #calculatorTool .calculator-flow-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #calculatorTool .calculator-flow-hint, #calculatorTool .calculator-flow-note { color: var(--text-secondary); font-size: 13px; line-height: 1.55; margin: 10px 0 15px; } #calculatorTool .calculator-flow-note { margin: 13px 0 0; } #calculatorTool .calculator-flow-columns { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); } #calculatorTool .calculator-flow-list { list-style: none; margin: 0; padding: 4px 0; } #calculatorTool .calculator-flow-row { display: grid; grid-template-columns: minmax(115px, 1.1fr) minmax(55px, 1fr) minmax(64px, auto); align-items: center; gap: 14px; min-height: 37px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); } #calculatorTool .calculator-flow-row:last-child { border-bottom: 0; } #calculatorTool .calculator-flow-label { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text-primary); } #calculatorTool .calculator-flow-value { max-width: 154px; font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; line-height: 1.4; text-align: right; overflow-wrap: anywhere; } #calculatorTool .calculator-flow-track { display: block; height: 8px; position: relative; border-radius: 9px; background: var(--surface-hover); min-width: 0; } #calculatorTool .calculator-flow-bar { display: block; height: 8px; position: relative; border-radius: 9px; background: var(--accent); color: var(--accent); } #calculatorTool .calculator-flow-bar::after { content: ""; position: absolute; width: 10px; height: 10px; right: 0; top: -1px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px var(--surface); } #calculatorTool .calculator-flow-row.is-zero .calculator-flow-bar::after { width: 2px; height: 12px; top: -2px; right: auto; left: 0; border-radius: 0; } #calculatorTool .calculator-flow-row.is-unknown .calculator-flow-track { background: transparent; border: 1px dashed var(--border-control); height: 8px; } #calculatorTool .calculator-flow-row.is-unknown .calculator-flow-value { color: var(--text-muted); } #calculatorTool .calculator-signed-track::before { content: ""; position: absolute; top: -4px; left: 50%; height: 16px; width: 1px; background: var(--border-control); } #calculatorTool .calculator-signed-track .calculator-flow-bar { position: absolute; } #calculatorTool .calculator-bridge-row { grid-template-columns: minmax(120px, 1fr) minmax(70px, 1fr) minmax(80px, auto); min-height: 66px; } #calculatorTool .calculator-bridge-row.is-deduction .calculator-flow-bar { color: var(--warning); background: var(--warning); } #calculatorTool .calculator-bridge-row.is-negative .calculator-flow-bar::after { right: auto; left: 0; } #calculatorTool .calculator-bridge-row.is-total { border-top: 1px solid var(--border-control); margin-top: 8px; padding-top: 15px; } #calculatorTool .calculator-bridge-row.is-total .calculator-flow-bar { color: var(--information); background: var(--information); } #calculatorTool .calculator-bridge-row.is-total.is-negative .calculator-flow-bar { color: var(--negative); background: var(--negative); } #calculatorTool .calculator-bridge-row.is-total.is-negative .calculator-flow-value { color: var(--negative); } #calculatorTool .calculator-flow-panel [hidden] { display: none; } @media (max-width: 1150px) { #calculatorTool .calculator-layout { grid-template-columns: minmax(0, 1fr); } #calculatorTool .calculator-results { position: static; } #calculatorTool .calculator-inputs { padding: 18px; } #calculatorTool .calculator-kpi-primary strong { font-size: 34px; } #calculatorTool .calculator-mobile-jump { display: flex; width: 100%; margin-bottom: 14px; min-height: 44px; } #calculatorTool .calculator-mobile-jump .calculator-chevron { color: currentColor; } #calculatorTool .calculator-mobile-return { display: inline-flex; font-size: 12px; padding: 6px 10px; min-height: 44px; } } @media (max-width: 640px) { #calculatorTool button { min-height: 44px; } #calculatorTool .calculator-toolbar { gap: 9px; } #calculatorTool .calculator-mode { width: 100%; } #calculatorTool .calculator-mode button { flex: 1; min-height: 44px; padding: 8px 10px; } #calculatorTool .scenario-identity { width: 100%; font-size: 12px; } #calculatorTool .calculator-scope-controls { width: 100%; justify-content: space-between; gap: 12px; margin: 0; } #calculatorTool .calculator-scope-controls select { min-height: 44px; font-size: 16px; } #calculatorTool #resetCalculation { min-height: 44px; font-size: 12px; } #calculatorTool .calculator-layout { gap: 12px; } #calculatorTool .calculator-inputs, #calculatorTool .calculator-result-panel { padding: 14px; } #calculatorTool .calculator-inputs .panel-header h2, #calculatorTool .calculator-result-panel h2 { font-size: 19px; } #calculatorTool .calculator-input-group > summary { grid-template-columns: 26px minmax(0, 1fr) auto 14px; column-gap: 7px; padding: 12px 10px; } #calculatorTool .calculator-step { width: 25px; height: 25px; font-size: 11px; } #calculatorTool .calculator-group-copy strong { font-size: 13px; } #calculatorTool .calculator-group-copy small { display: none; } #calculatorTool .calculator-group-progress { font-size: 12px; } #calculatorTool .calculator-input-group fieldset { padding: 0 11px 14px; } #calculatorTool .calculator-fields { gap: 16px 12px; } #calculatorTool .calculator-field label { min-height: 44px; font-size: 13px; } #calculatorTool .calculator-field label span { font-size: 12px; } #calculatorTool .calculator-field input { font-size: 16px; padding: 8px; min-height: 44px; } #calculatorTool .calculator-field small { font-size: 12px; } #calculatorTool .calculator-input-note, #calculatorTool .calculator-guidance .panel-kicker, #calculatorTool .calculator-kpi small, #calculatorTool #calculatorStageHint, #calculatorTool .calculator-footnote, #calculatorTool .calculator-disclosure-hint, #calculatorTool .scenario-badge { font-size: 12px; } #calculatorTool .calculator-kpi { grid-column: span 3; padding: 12px 9px; border: 0 !important; } #calculatorTool .calculator-kpi:nth-child(odd) { padding-left: 0; } #calculatorTool .calculator-kpi:nth-child(even) { padding-left: 10px; border-left: 1px solid var(--border-subtle) !important; } #calculatorTool .calculator-kpi-primary { border-bottom: 1px solid var(--border-subtle) !important; padding-bottom: 16px; } #calculatorTool .calculator-kpi-primary strong { font-size: 25px; } #calculatorTool .calculator-stage-panel { padding: 13px; } #calculatorTool .calculator-stage-panel th, #calculatorTool .calculator-stage-panel td { font-size: 12px; } #calculatorTool .calculator-history > summary, #calculatorTool .scenario-workspace > summary, #calculatorTool .calculator-method > summary { padding: 13px 14px; } #calculatorTool .scenario-workspace > summary { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 4px; } #calculatorTool .scenario-workspace > summary .scenario-badge { grid-column: 1; } #calculatorTool .scenario-workspace > summary .calculator-chevron { grid-column: 2; grid-row: 1 / 3; } #calculatorTool .calculator-history-content, #calculatorTool .scenario-content { padding: 0 14px 14px; } #calculatorTool .calculator-method > :not(summary) { margin-left: 14px; margin-right: 14px; } #calculatorTool .calculator-flow-panel { padding: 14px; } #calculatorTool .calculator-flow-header h2 { font-size: 19px; } #calculatorTool .calculator-flow-switch { width: 100%; } #calculatorTool .calculator-flow-switch button { flex: 1; min-height: 44px; } #calculatorTool .calculator-flow-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 11px 0; } #calculatorTool .calculator-flow-value { grid-column: 2; grid-row: 1; max-width: 140px; } #calculatorTool .calculator-flow-track { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 4px; } #calculatorTool .calculator-flow-row.is-unknown .calculator-flow-track { margin-bottom: 4px; } #calculatorTool .calculator-bridge-row { min-height: 76px; } } @media (prefers-reduced-motion: reduce) { #calculatorTool .calculator-chevron { transition: none; } } @media print { #calculatorTool .calculator-results { position: static; } #calculatorTool .calculator-input-group, #calculatorTool .calculator-guidance { break-inside: avoid; } #calculatorTool .calculator-stage-panel .performance-table-wrap { max-height: none; overflow: visible; } #calculatorTool .calculator-stage-panel table { min-width: 0; } #calculatorTool .calculator-layout { display: block; } #calculatorTool .calculator-flow-switch { display: none; } #calculatorTool .calculator-flow-panel [hidden] { display: block !important; } #calculatorTool .calculator-flow-row { break-inside: avoid; } #calculatorTool .calculator-flow-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; } #calculatorTool #calculatorFinancialVisual { margin-top: 20px; } }