/* Customer reading layer. Load last, after app/energy/value/report styles.
   Page-only selectors keep the independently rendered PDF styles unchanged.
   This file never hides inputs, financial caveats, or changes data geometry. */

:root {
  --customer-ink: #eef5f4;
  --customer-muted: #c0d0d4;
  --customer-line: rgba(205, 226, 231, .25);
  --customer-glass: rgba(34, 42, 49, .22);
  --customer-blue: #b9dcec;
  --customer-green: #b3e5c6;
  --customer-gold: #ecd5a7;
  --customer-focus: #d7efff;
}

/* One clear project heading, one state, then the five-module work surface. */
.workspace, .masthead, .mobile-actions, #appDialog { font-size: 17px; line-height: 1.65; }
.workspace { width: min(1280px, calc(100% - 48px)); }
.masthead { min-height: 88px; height: auto; padding-block: 17px; gap: 24px; }
.brand-text { font-size: 20px; letter-spacing: 1px; }
.brand-text small { font-size: 14px; letter-spacing: .4px; }
.save-status, .version-label { font-size: 14px; color: var(--customer-muted); }
.product-switch button { font-size: 17px; min-height: 48px; padding: 10px 21px; }
.workbench-title { align-items: flex-start; gap: 24px; padding: 28px 0 24px; }
.workbench-title > div:first-child, .project-identity { min-width: 0; }
.workbench-title h1, .project-identity h1 {
  font-size: clamp(28px, 3.1vw, 40px); line-height: 1.4;
  letter-spacing: -.5px; font-weight: 650; overflow-wrap: anywhere;
}
.title-context { flex-wrap: wrap; gap: 10px; font-size: 16px; margin-bottom: 10px; }
#projectSubtitle { font-size: 17px; line-height: 1.7; color: var(--customer-muted); margin-top: 10px; max-width: 64ch; }
.title-actions { flex-shrink: 0; flex-wrap: wrap; padding-top: 7px; gap: 10px; }
.project-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.project-identity > h1 { flex-basis: 100%; }
.project-status, .preview-badge {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 5px 12px; min-height: 34px; border-radius: 5px;
  border: 1px solid rgba(236, 213, 167, .6); background: rgba(112, 87, 43, .24);
  color: #f4dfb8; font-size: 16px; line-height: 1.5; font-weight: 650;
}
.project-status[data-state="actual"], .project-status.is-actual {
  color: #c8efd6; border-color: rgba(179, 229, 198, .52); background: rgba(56, 103, 78, .25);
}
.preview-banner, .demo-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; margin: 0 0 22px; border: 1px solid rgba(236, 213, 167, .44);
  border-left: 3px solid var(--customer-gold); border-radius: 6px;
  background: linear-gradient(110deg, rgba(103, 81, 47, .3), rgba(31, 44, 49, .8));
  color: #e3dfd2; font-size: 16px; line-height: 1.7;
}
.preview-banner > div, .preview-banner > span, .demo-notice > span { min-width: 0; }
.preview-banner strong, .demo-notice b { color: #f5e2bb; font-size: 17px; font-weight: 650; }
.preview-banner p { color: #d9d9cf; margin-top: 5px; font-size: 16px; max-width: 68ch; }
.preview-banner .preview-badge { margin-right: 10px; }
.preview-banner button, .demo-notice button { min-height: 48px; font-size: 16px; line-height: 1.5; white-space: normal; }
.preview-banner .preview-action, .demo-notice button { color: #f1dfbb; flex-shrink: 0; max-width: none; }
.storage-notice { font-size: 16px; line-height: 1.7; }

/* Five colour identities stay distinct; type carries navigation, not tiny codes. */
.calculator-shell { border-color: var(--customer-line); background-color: rgba(23, 35, 41, .42); }
.module-nav { gap: 8px; padding: 10px; }
.module-nav button { font-size: 17px; min-height: 62px; padding: 13px 10px; gap: 9px; }
.module-nav button span { font-size: 14px; margin: 0; }
.module-nav button.active { box-shadow: inset 0 1px rgba(241, 255, 255, .1), 0 0 15px rgba(var(--tab-rgb), .13); }
.overview-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); background-color: rgba(28, 42, 48, .58); }
.overview-strip > div, .overview-strip > div:first-child, .overview-strip > div:last-child { padding: 24px; }
.overview-strip span { font-size: 16px; line-height: 1.6; color: #d4e3e5; }
.overview-strip strong { font-size: clamp(34px, 3.1vw, 44px); line-height: 1.35; margin: 10px 0; letter-spacing: -.6px; }
.overview-strip strong small { font-size: 17px; margin-left: 6px; color: #c5dcd0; }
.overview-strip > div > small { font-size: 16px; line-height: 1.65; color: #bfcfd1; }
.project-context-strip { flex-wrap: wrap; gap: 12px 24px; padding: 14px 26px; font-size: 16px; }
.cooperation-period { gap: 10px; }
.cooperation-period strong, .cooperation-period strong small, .cooperation-mode { font-size: 16px; }
.cooperation-mode { padding: 5px 11px; }
.context-tip { font-size: 16px; }
.module-panel { padding: 30px; }
.section-intro { margin-bottom: 28px; gap: 20px; }
.section-intro h2 { font-size: 28px; line-height: 1.45; font-weight: 650; }
.section-intro p { font-size: 17px; line-height: 1.75; max-width: 64ch; color: var(--customer-muted); margin-top: 8px; }
.section-intro .section-kicker { font-size: 14px; }
.section-intro .button { font-size: 16px; min-height: 48px; }
.term-badge { font-size: 16px; padding: 5px 10px; white-space: normal; }

/* Form rows are readable before focus, including units and validation. */
.configuration-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }
.form-section { margin-bottom: 24px; border-radius: 8px; background-color: var(--customer-glass); }
.form-section-header { padding: 20px 24px; gap: 16px; }
.form-section-header h3 { font-size: 20px; line-height: 1.5; }
.form-section-header small { color: var(--customer-muted); font-size: 15px; line-height: 1.65; text-align: right; }
.section-index { font-size: 16px; margin-right: 10px; }
.form-section-body { padding: 25px 24px 28px; }
.form-grid, .form-grid.two { gap: 26px 20px; }
.field { gap: 9px; }
.field-label, .rule-row .field-label, .replacement-row .field-label {
  min-height: 26px; font-size: 16px; line-height: 1.6; color: #e4eeee; flex-wrap: wrap; gap: 4px 8px;
}
.field-label .optional { font-size: 14px; color: #bacace; }
.field-control { min-height: 54px; border-color: rgba(205, 226, 231, .36); border-radius: 6px; background: rgba(9, 22, 29, .7); }
.field-control input, .field-control select, .field textarea { font-size: 18px; line-height: 1.6; min-height: 54px; padding: 11px 14px; }
.field-control input::placeholder { font-size: 16px; color: #9eb4be; opacity: 1; }
.field-control .unit, .rule-row .field-control .unit, .replacement-row .field-control .unit { font-size: 16px; color: #c1d4da; padding-right: 13px; }
.field-control:focus-within { border-color: var(--customer-blue); box-shadow: 0 0 0 3px rgba(185, 220, 236, .17); }
.field textarea { min-height: 112px; border-color: rgba(205, 226, 231, .36); }
.field-help, .field-error, .form-tip, .model-notes { font-size: 16px; line-height: 1.7; }
.field-help, .form-tip, .model-notes { color: var(--customer-muted); }
.field-error { color: #ffc1b8; }
.field.invalid .field-control { border-color: #f0a095; }
.mode-switch { padding: 6px; gap: 8px; }
.mode-switch button { min-height: 52px; font-size: 17px; line-height: 1.5; padding: 12px; }
.toggle-row { min-height: 48px; font-size: 17px; gap: 12px; line-height: 1.6; }
.toggle-row input { width: 21px; height: 21px; flex-shrink: 0; }
.subsection { padding-top: 25px; margin-top: 28px; }
.subsection-title, .cycle-header { font-size: 18px; line-height: 1.6; gap: 16px; margin-bottom: 18px; }
.subsection-title small { font-size: 16px; }
.small-button, .form-end .button { min-height: 48px; font-size: 16px; padding: 10px 14px; }
.rule-row, .replacement-row { gap: 14px; margin-bottom: 18px; align-items: end; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) 48px; }
.remove-row { width: 48px; min-width: 48px; height: 54px; min-height: 48px; font-size: 24px; color: #ffc1b8; }
.aside-card { padding: 22px; background-color: rgba(36, 51, 58, .67); }
.aside-card .aside-title, .aside-row, .aside-note, .aside-note strong { font-size: 16px; line-height: 1.7; }
.aside-card h3 { font-size: 22px; }
.aside-row { display: block; padding: 14px 0; }
.aside-row strong { display: block; text-align: left; font-size: 18px; margin-top: 5px; }
.validation-summary { font-size: 16px; line-height: 1.8; padding: 18px; }

/* Optional explanations have one consistent disclosure, not a wall of notes. */
.tool-details, .calculation-details, .module-details, .value-assumptions {
  margin: 24px 0 0; padding: 0; border: 0; border-top: 1px solid var(--customer-line); background: transparent;
}
.tool-details > summary, .calculation-details > summary, .module-details > summary, .value-assumptions > summary {
  min-height: 52px; padding: 12px 0; cursor: pointer; font-size: 16px; line-height: 1.6;
  color: #d0e1e7; font-weight: 550;
}
.tool-details > summary:focus-visible, .calculation-details > summary:focus-visible,
.module-details > summary:focus-visible, .value-assumptions > summary:focus-visible { outline: 3px solid var(--customer-focus); outline-offset: 4px; border-radius: 3px; }
.tool-details[open], .calculation-details[open], .module-details[open], .value-assumptions[open] { padding-bottom: 8px; }
.tool-details p, .calculation-details p, .module-details p { font-size: 16px; line-height: 1.8; color: var(--customer-muted); max-width: 72ch; }
.tool-details > div, .calculation-details > div, .module-details > div { margin-top: 10px; }

/* Results: a clear number, its unit, then one explanation. */
.result-grid { gap: 24px; }
.result-panel { padding: 26px; border-radius: 8px; background-color: rgba(28, 42, 48, .48); }
.panel-heading { margin-bottom: 24px; gap: 20px; flex-wrap: wrap; }
.panel-heading h3 { font-size: 22px; line-height: 1.5; }
.panel-heading p, .panel-heading > span { font-size: 16px; line-height: 1.7; color: var(--customer-muted); white-space: normal; }
.metric-grid { margin-bottom: 28px; border-radius: 8px; }
.metric { display: block; padding: 24px; }
.metric span, .metric p { font-size: 16px; line-height: 1.7; }
.metric span { color: #d8e5e6; }
.metric p { color: var(--customer-muted); margin-top: 7px; }
.metric strong { font-size: clamp(32px, 3vw, 42px); font-weight: 650; line-height: 1.4; margin: 9px 0; text-align: left; }
.metric strong small { font-size: 17px; }
.year-selector { gap: 18px; min-height: 70px; padding: 14px 20px; margin-bottom: 24px; }
.year-selector label, .year-selector output { font-size: 17px; line-height: 1.6; }
.year-selector output { min-width: 74px; font-weight: 650; }
.year-selector input { min-height: 44px; }
.selected-year-metrics { margin-bottom: 26px; }
.selected-year-metrics > div { padding: 22px; }
.selected-year-metrics span { font-size: 16px; line-height: 1.6; }
.selected-year-metrics strong { font-size: 32px; line-height: 1.4; margin-top: 9px; }
.selected-year-metrics strong small { font-size: 16px; }
.chart-legend, .chart-wrap .chart-legend, .chart-caption { font-size: 16px; line-height: 1.75; color: #c9dbe0; }
.chart-wrap .chart-legend { gap: 12px 24px; }
.chart-caption { margin-top: 18px; }
.data-pair { font-size: 17px; line-height: 1.7; padding: 16px 0; flex-wrap: wrap; }
.data-pair strong { margin-left: auto; }
.table-topline { margin-top: 32px; gap: 12px; }
.table-topline h3 { font-size: 21px; }
.table-topline span, .table-scroll-hint { font-size: 16px; line-height: 1.7; }
.detail-table, .detail-table th, .detail-table td { font-size: 16px; line-height: 1.65; }
.detail-table th, .detail-table td { padding: 15px 18px; }
.detail-table-wrap { max-height: 680px; scroll-padding: 16px; }
.source-note, .note-list, .warning-note, .no-carbon p { font-size: 16px; line-height: 1.8; color: var(--customer-muted); }
.warning-note { padding: 18px 20px; color: var(--customer-gold); }
.no-carbon h3 { font-size: 22px; }

/* Commercial story: comparison first, benefit second; no three narrow columns. */
.business-reference { padding: 22px 24px; gap: 24px; }
.business-reference span { font-size: 16px; line-height: 1.6; }
.business-reference strong { font-size: 28px; line-height: 1.5; }
.value-section-label { margin-bottom: 22px; }
.value-section-label h3 { font-size: 24px; }
.value-section-label p { font-size: 16px; line-height: 1.75; max-width: 48ch; }
.business-stage { grid-template-columns: minmax(0, 1.45fr) minmax(310px, .9fr); gap: 24px; align-items: stretch; }
.business-dials { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.value-dial-card { padding: 22px 20px; }
.value-dial-card header h3 { font-size: 20px; line-height: 1.5; }
.value-dial-card header p { font-size: 16px; line-height: 1.65; min-height: 0; margin-top: 6px; }
.value-dial-visual { max-width: 260px; margin: 18px auto; }
.value-dial-readout { inset: 27% 18%; }
.value-dial-readout strong { font-size: 32px; }
.value-dial-readout strong.is-long { font-size: 24px; }
.value-dial-readout span { font-size: 16px; }
.value-dial-caption, .value-dial-ratio { display: block; font-size: 16px; line-height: 1.65; }
.value-dial-caption strong, .value-dial-ratio b { display: block; text-align: left; font-size: 20px; margin-top: 4px; }
.value-dial-ratio { margin-top: 12px; }
.value-scale-note { font-size: 16px; line-height: 1.7; margin-top: 14px; }
.business-metrics { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; gap: 18px; }
.business-metric { display: block; padding: 24px; text-align: left; }
.business-metric > span { font-size: 18px; line-height: 1.6; }
.business-metric > strong { font-size: 36px; line-height: 1.4; margin: 13px 0 10px; text-align: left; }
.business-metric > small { font-size: 16px; line-height: 1.75; }
.business-metric strong small { font-size: 18px; }
.value-bridge { grid-column: 2; grid-row: 1; padding: 26px; }
.value-bridge-title { margin-bottom: 25px; }
.value-bridge-title h3 { font-size: 22px; }
.value-bridge-title p, .value-bridge-row > span, .value-bridge > .value-scale-note { font-size: 16px; line-height: 1.75; }
.value-bridge-row > strong { font-size: 32px; line-height: 1.45; margin: 12px 0 18px; }
.value-bridge-track { height: 24px; }
.value-bridge-connector { height: 68px; margin-block: 20px; }
.business-footnote { gap: 20px; padding-block: 20px 26px; }
.business-footnote > span, .business-footnote p { font-size: 16px; line-height: 1.75; }
.business-footnote strong { font-size: 23px; }
.business-period-summary { padding: 18px 22px; }

/* The carbon conversion remains a data figure; stronger text, quiet surroundings. */
.carbon-core-readout > span, .carbon-core-readout > em, .carbon-core-readout > small { font-size: 16px; line-height: 1.6; }
.carbon-core-readout > small { max-width: 220px; }
.carbon-core-readout > strong { font-size: clamp(34px, 3.1vw, 46px); line-height: 1.35; }
.carbon-energy-legend li, .carbon-energy-legend strong, .carbon-energy-legend small { font-size: 16px; line-height: 1.65; }
.carbon-energy-legend li { padding-block: 12px; }
.carbon-outcome { grid-template-columns: 90px minmax(0, 1fr); padding: 25px; gap: 12px 22px; }
.carbon-outcome-copy h3 { font-size: 20px; }
.carbon-outcome-copy > strong { font-size: 38px; line-height: 1.4; }
.carbon-outcome-copy > span, .carbon-outcome-copy p, .carbon-stage-note { font-size: 16px; line-height: 1.75; }
.carbon-outcome-copy p { margin-top: 8px; }
.carbon-outcome-bar { margin-top: 16px; }

/* Six financing parameters and four annual balances use full-width, readable cells. */
.investment-mode-banner { grid-template-columns: minmax(210px, .8fr) minmax(0, 1.3fr) auto; gap: 24px; padding-block: 8px 24px; margin-bottom: 26px; }
.investment-mode-identity { font-size: 24px; line-height: 1.5; }
.investment-mode-identity span, .investment-mode-identity small, .investment-mode-banner > p { font-size: 16px; line-height: 1.75; }
.investment-mode-banner > .button, .investment-mode-banner > button { font-size: 16px; min-height: 48px; }
.investment-parameters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 28px; }
.investment-parameters > div { padding: 23px; }
.investment-parameters > div > span, .investment-parameters > div > small { font-size: 16px; line-height: 1.75; }
.investment-parameters > div > strong { font-size: 34px; line-height: 1.4; margin: 10px 0; }
.investment-parameters > div > strong small { font-size: 16px; }
.investment-year-account { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 28px; }
.investment-year-account > .year-account-heading { padding: 18px 22px; flex-wrap: wrap; gap: 8px 20px; }
.year-account-heading h3 { font-size: 21px; }
.year-account-heading p { font-size: 16px; line-height: 1.75; }
.investment-year-account > div:not(.year-account-heading) { padding: 22px; }
.investment-year-account > div:not(.year-account-heading) > span,
.investment-year-account > div:not(.year-account-heading) > small { font-size: 16px; line-height: 1.75; }
.investment-year-account > div:not(.year-account-heading) > strong { font-size: 32px; line-height: 1.4; margin: 10px 0; }
.investment-year-account > div:not(.year-account-heading) > strong small { font-size: 16px; }

/* Existing data-bound motion gains a visible light, not an unrelated animation. */
.workspace .energy-ring-light, .workspace .energy-track-light { filter: drop-shadow(0 0 7px rgba(169, 255, 217, .72)); }
.workspace .value-profit-orbit { filter: drop-shadow(0 0 4px var(--dial-tone)); }
.workspace .value-core-orbit { filter: drop-shadow(0 0 4px rgba(203, 241, 225, .6)); }
.workspace .value-bridge-fill { opacity: .93; }
.workspace .energy-track-flow { opacity: .38; }
.workspace-footer { font-size: 16px; line-height: 1.7; gap: 24px; padding: 24px 0 30px; }
.workspace-footer button { font-size: 16px; min-height: 48px; }
.workspace-footer > div { gap: 8px 24px; flex-wrap: wrap; }
.empty-state p, .boot-message { font-size: 17px; line-height: 1.8; }
.toast { font-size: 16px; line-height: 1.65; }

/* Dialogs: touch-sized choices, explicit selection and a reliable primary action. */
#appDialog { width: min(760px, calc(100vw - 32px)); background: rgba(32, 40, 48, .60); border-color: rgba(205, 226, 231, .38); }
.dialog-header { padding: 26px 30px; }
.dialog-header h2 { font-size: 28px; line-height: 1.45; }
.dialog-header p { font-size: 16px; line-height: 1.65; margin-bottom: 5px; }
.dialog-body { padding: 26px 30px 30px; }
.dialog-body > p, .export-summary, .export-modules, .export-done p, .progress-label, .help-text p { font-size: 16px; line-height: 1.75; }
.help-text h3 { font-size: 21px; }
.export-options { gap: 18px; margin-bottom: 26px; }
.export-option { min-height: 150px; padding: 22px; }
.export-option input { width: 22px; height: 22px; right: 18px; top: 18px; }
.export-option strong { font-size: 20px; line-height: 1.5; }
.export-option small { font-size: 16px; line-height: 1.7; }
.export-option:has(input:checked) { border-color: #b9dcec; background: rgba(118, 167, 190, .13); box-shadow: inset 0 0 0 1px rgba(185, 220, 236, .45); }
.export-option:has(input:focus-visible) { outline: 3px solid var(--customer-focus); outline-offset: 3px; }
.export-module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 22px; }
.dialog-body fieldset:has(.export-module-grid) { border: 0; padding: 0; margin: 0; min-width: 0; }
.dialog-body fieldset:has(.export-module-grid) > legend { font-size: 20px; line-height: 1.6; font-weight: 600; padding: 0; }
.export-module-option {
  display: flex; align-items: center; gap: 12px; min-height: 60px; min-width: 0;
  padding: 14px 16px; border: 1px solid var(--customer-line); border-radius: 6px;
  background: rgba(202, 225, 233, .04); color: #d7e6e9; cursor: pointer;
  font-size: 17px; line-height: 1.6;
}
.export-module-option input { width: 22px; height: 22px; margin: 0; flex: 0 0 22px; accent-color: #b8e7cf; }
.export-module-option > span { min-width: 0; }
.export-module-option strong { font-size: 17px; font-weight: 600; }
.export-module-option small { display: block; font-size: 16px; line-height: 1.6; color: var(--customer-muted); }
.export-module-option:has(input:checked), .export-module-option[data-selected="true"] { color: #edfaf4; border-color: rgba(184, 231, 207, .7); background: rgba(94, 147, 120, .16); }
.export-module-option:has(input:focus-visible) { outline: 3px solid var(--customer-focus); outline-offset: 3px; }
.export-module-option:has(input:disabled) { cursor: default; color: #b6c4c8; border-style: dashed; }
.export-done { padding: 24px 0 14px; }
.export-done > strong { font-size: 32px; line-height: 1.45; margin-bottom: 12px; }
.file-actions { gap: 14px; margin-top: 26px; }
.project-record strong { font-size: 18px; line-height: 1.6; }
.project-record small { font-size: 16px; line-height: 1.65; }
.project-record .record-actions { flex-wrap: wrap; }
.workspace .button, .masthead .button, .mobile-actions .button, #appDialog .button { min-height: 48px; padding: 11px 18px; font-size: 16px; line-height: 1.5; }
.workspace .button:focus-visible, .masthead .button:focus-visible, .mobile-actions .button:focus-visible,
#appDialog .button:focus-visible, #appDialog .icon-button:focus-visible { outline: 3px solid var(--customer-focus); outline-offset: 4px; }
#appDialog .icon-button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
/* Deliberately outrank .button:hover and .button.quiet:hover, including success
   anchors. Never inherit a dark hover background with the dark primary text. */
:is(.workspace, .masthead, .mobile-actions, #appDialog) .button.export-primary {
  color: #112b24; background: #c6ead9; border-color: #d8f1e4;
  box-shadow: 0 3px 16px rgba(130, 211, 177, .1); font-weight: 700;
}
:is(.workspace, .masthead, .mobile-actions, #appDialog) .button.export-primary:not(:disabled):hover {
  color: #112b24; background: #e1f6ea; border-color: #f1fff7;
}
:is(.workspace, .masthead, .mobile-actions, #appDialog) .button.export-primary:not(:disabled):active {
  color: #112b24; background: #b5dec8; border-color: #c6ead9; box-shadow: inset 0 2px 4px rgba(17, 43, 36, .14);
}
:is(.workspace, .masthead, .mobile-actions, #appDialog) .button.export-primary:focus-visible {
  color: #112b24; outline: 3px solid var(--customer-focus); outline-offset: 4px;
}
:is(.workspace, .masthead, .mobile-actions, #appDialog) .button.export-primary:disabled {
  opacity: 1; color: #304a40; background: #a8c6b8; border-color: #b5cebf; box-shadow: none;
}
:is(.workspace, .masthead, .mobile-actions, #appDialog) .button.export-primary > span { color: inherit; }

@media (max-width: 1180px) {
  .masthead { flex-wrap: wrap; gap: 16px; }
  .configuration-layout { grid-template-columns: 1fr; }
  .input-aside { position: static; }
  .input-aside .aside-card { margin-top: 0; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { border-bottom: 1px solid var(--customer-line); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; }
  .selected-year-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selected-year-metrics > div:nth-child(2n) { border-right: 0; }
  .selected-year-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--customer-line); }
  .business-stage { grid-template-columns: 1fr; }
  .business-dials { grid-column: 1; grid-row: auto; }
  .business-metrics { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .value-bridge { grid-column: 1; grid-row: auto; }
  .value-dial-visual { max-width: 280px; }
  .investment-parameters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .investment-year-account { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .investment-year-account > div:not(.year-account-heading):nth-child(3) { border-right: 0; }
  .investment-year-account > div:not(.year-account-heading):nth-child(-n+3) { border-bottom: 1px solid rgba(var(--mode-rgb), .2); }
  .investment-mode-banner { grid-template-columns: 1fr auto; gap: 12px 24px; }
  .investment-mode-banner > .investment-mode-identity { grid-column: 1; grid-row: 1; }
  .investment-mode-banner > p { grid-column: 1; grid-row: 2; }
  .investment-mode-banner > .button, .investment-mode-banner > button { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 1100px) {
  .carbon-stage { grid-template-columns: 1fr; gap: 0; padding-top: 12px; }
  .carbon-core { display: block; }
  .carbon-core-visual { grid-column: auto; grid-row: auto; max-width: 390px; width: 100%; margin-inline: auto; }
  .carbon-energy-legend { grid-column: auto; grid-row: auto; max-width: 510px; width: 100%; margin: 14px auto 0; }
  .carbon-connectors { display: block; grid-column: auto; grid-row: auto; width: 100%; height: 58px; transform: none; margin: 8px 0 0; }
  .carbon-connectors > svg.carbon-connectors-desktop, .carbon-connector-point, .value-core-outlet { display: none; }
  .carbon-connectors > svg.carbon-connectors-mobile { display: block; }
  .carbon-outcomes { grid-column: auto; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; gap: 20px; }
  .carbon-outcome { grid-template-columns: 74px minmax(0, 1fr); padding: 22px; gap: 12px 16px; }
  .carbon-outcome-copy > strong { font-size: 34px; }
}

@media (max-width: 900px) {
  .masthead { padding: 18px 22px 0; }
  .product-switch { order: 3; width: 100%; }
  .product-switch button { flex: 1; }
  .workbench-title { display: block; padding: 24px 0; }
  .title-actions { margin-top: 18px; padding: 0; }
  .module-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .module-nav button { grid-column: span 2; min-height: 58px; }
  .module-nav button:nth-child(n+4) { grid-column: span 3; }
  .overview-strip { grid-template-columns: 1fr; }
  .overview-strip > div, .overview-strip > div:first-child, .overview-strip > div:nth-child(2), .overview-strip > div:nth-child(3), .overview-strip > div:last-child {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4px 18px;
    align-items: center; padding: 18px 24px; text-align: left;
    border-right: 0; border-bottom: 1px solid var(--customer-line);
  }
  .overview-strip > div:last-child { border-bottom: 0; }
  .overview-strip strong { grid-column: 2; grid-row: 1 / 3; text-align: right; font-size: 36px; margin: 0; }
  .overview-strip > div > small { grid-column: 1; font-size: 16px; }
  .project-context-strip { padding: 15px 24px; }
  .module-panel { padding: 26px 24px; }
  .business-reference { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-reference button { grid-column: 1 / -1; justify-self: start; }
  .value-section-label, .business-footnote { display: block; }
  .value-section-label p, .business-footnote p { max-width: none; margin-top: 9px; }
  .preview-banner, .demo-notice { align-items: flex-start; flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .rule-row, .replacement-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 14px 12px; padding: 18px 0; border-bottom: 1px solid var(--customer-line); }
  .rule-row > .field:nth-child(3), .replacement-row > .field:nth-child(3) { grid-column: 1 / 3; }
  .rule-row > .remove-row, .replacement-row > .remove-row { grid-column: 3; grid-row: 1 / 3; align-self: end; }
  .rule-row .field-control input, .replacement-row .field-control input { padding: 11px 10px; }
  .rule-row .field-control .unit, .replacement-row .field-control .unit { padding-right: 10px; }
}

@media (max-width: 640px) {
  .workspace { width: calc(100% - 24px); }
  .masthead { padding: 16px 16px 0; gap: 14px; }
  .brand img { width: 77px; }
  .brand-text { font-size: 19px; padding-left: 12px; }
  .brand-text small { font-size: 14px; }
  .header-actions { margin-left: auto; }
  .workbench-title { padding: 22px 4px; }
  .workbench-title h1 { font-size: 28px; line-height: 1.5; }
  .title-context, #projectSubtitle { font-size: 16px; }
  .version-label { font-size: 14px; }
  .title-actions { gap: 12px; }
  .preview-banner, .demo-notice { padding: 17px 16px; font-size: 16px; }
  .preview-banner .preview-badge { margin: 0 0 9px; }
  .preview-banner button, .demo-notice button { width: 100%; max-width: none; min-height: 48px; text-align: left; }
  .module-nav { padding: 9px; gap: 8px; }
  .module-nav button { font-size: 16px; min-height: 72px; padding: 10px 5px; flex-direction: column; gap: 2px; line-height: 1.6; }
  .module-nav button span { font-size: 14px; }
  .overview-strip > div, .overview-strip > div:first-child, .overview-strip > div:nth-child(2), .overview-strip > div:nth-child(3), .overview-strip > div:last-child { padding: 18px 16px; gap: 6px 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .overview-strip strong { font-size: 32px; line-height: 1.45; }
  .overview-strip strong small { display: block; font-size: 16px; margin: 2px 0 0; }
  .overview-strip span, .overview-strip > div > small { font-size: 16px; line-height: 1.6; }
  .project-context-strip { gap: 12px 16px; padding: 15px 16px; font-size: 16px; }
  .cooperation-period strong, .cooperation-period strong small, .cooperation-mode { font-size: 16px; }
  .module-panel { padding: 26px 16px; }
  .section-intro { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 24px; }
  .section-intro h2 { font-size: 26px; }
  .section-intro p { font-size: 16px; line-height: 1.75; max-width: none; }
  .section-intro .button { font-size: 16px; }
  .form-section-header { align-items: flex-start; flex-direction: column; padding: 19px 18px; gap: 6px; }
  .form-section-header small { font-size: 16px; text-align: left; max-width: none; }
  .form-section-body { padding: 24px 17px; }
  .form-grid, .form-grid.two { grid-template-columns: 1fr; gap: 24px; }
  .field.span2 { grid-column: 1 / -1; }
  .field-label .optional { font-size: 16px; }
  .mode-switch { flex-wrap: wrap; }
  .mode-switch button { flex-basis: 140px; font-size: 17px; }
  .subsection-title, .cycle-header { flex-wrap: wrap; }
  .result-panel { padding: 23px 18px; }
  .panel-heading h3 { font-size: 21px; }
  .metric-grid, .selected-year-metrics { grid-template-columns: 1fr; }
  .metric { padding: 22px; border-right: 0; border-bottom: 1px solid var(--customer-line); }
  .metric:last-child { border-bottom: 0; }
  .metric strong { font-size: 36px; }
  .selected-year-metrics > div { padding: 20px; border-right: 0; border-bottom: 1px solid var(--customer-line); }
  .selected-year-metrics > div:last-child { border-bottom: 0; }
  .selected-year-metrics strong { font-size: 32px; }
  .year-selector { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 15px 17px; }
  .year-selector label { font-size: 16px; }
  .year-selector output { grid-column: 2; grid-row: 1; font-size: 18px; }
  .year-selector input { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .chart-legend, .chart-wrap .chart-legend, .chart-caption { font-size: 16px; }
  .table-topline { align-items: flex-start; flex-direction: column; }
  .detail-table th, .detail-table td { font-size: 16px; padding: 15px 16px; }
  .business-reference { grid-template-columns: 1fr; padding: 21px; gap: 20px; }
  .business-reference strong { font-size: 28px; }
  .business-stage { display: grid; grid-template-columns: 1fr; gap: 22px; }
  .business-dials { grid-template-columns: 1fr; gap: 20px; }
  .value-dial-card { padding: 24px 22px; }
  .value-dial-card header h3 { font-size: 21px; }
  .value-dial-visual { max-width: 280px; margin: 17px auto; }
  .value-dial-readout strong { font-size: 36px; }
  .value-dial-readout strong.is-long { font-size: 26px; }
  .value-dial-caption strong, .value-dial-ratio b { font-size: 23px; }
  .business-metrics { grid-template-columns: 1fr; gap: 18px; }
  .business-metric { display: block; text-align: left; padding: 24px 22px; }
  .business-metric > span { font-size: 18px; }
  .business-metric > strong { font-size: 34px; text-align: left; margin: 12px 0; }
  .business-metric > small { font-size: 16px; }
  .value-bridge { padding: 25px 22px; }
  .value-bridge-row > strong { font-size: 32px; }
  .carbon-core-visual { max-width: 340px; }
  .carbon-core-readout > strong { font-size: 36px; }
  .carbon-energy-legend li { grid-template-columns: 7px minmax(60px, 1fr) minmax(0, 1.6fr); gap: 8px; }
  .carbon-outcomes { grid-template-columns: 1fr; gap: 20px; }
  .carbon-outcome { grid-template-columns: 76px minmax(0, 1fr); padding: 23px 18px; gap: 10px 16px; }
  .carbon-outcome-copy > strong { font-size: 36px; }
  .investment-mode-banner { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; padding-bottom: 23px; }
  .investment-mode-identity { font-size: 24px; }
  .investment-parameters { grid-template-columns: 1fr; gap: 16px; }
  .investment-parameters > div { padding: 23px; }
  .investment-parameters > div > strong { font-size: 36px; }
  .investment-year-account { grid-template-columns: 1fr; }
  .investment-year-account > .year-account-heading { display: block; padding: 20px; }
  .investment-year-account > div:not(.year-account-heading) { padding: 22px; border-right: 0; border-bottom: 1px solid rgba(var(--mode-rgb), .2); }
  .investment-year-account > div:last-child { border-bottom: 0; }
  .investment-year-account > div:not(.year-account-heading) > strong { font-size: 34px; }
  .workspace-footer { margin-bottom: 100px; font-size: 16px; padding: 22px 3px 28px; }
  .workspace-footer button { font-size: 16px; }
  .mobile-actions { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); gap: 12px; }
  .mobile-actions .button { min-height: 52px; font-size: 17px; }
  #appDialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  .dialog-header { padding: 23px 20px; gap: 12px; }
  .dialog-header h2 { font-size: 26px; }
  .dialog-body { padding: 23px 20px 26px; }
  .export-options { grid-template-columns: 1fr; gap: 14px; }
  .export-option { min-height: 120px; padding: 21px; }
  .export-module-grid { grid-template-columns: 1fr; gap: 12px; }
  .export-module-option { min-height: 62px; font-size: 17px; }
  .file-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .file-actions .button { width: 100%; }
  .dialog-actions { gap: 12px; }
  .project-record .record-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .workspace .energy-ring-light, .workspace .energy-track-light,
  .workspace .value-profit-orbit, .workspace .value-core-orbit { filter: none; }
}
body.motion-reduced .workspace .energy-ring-light, body.motion-reduced .workspace .energy-track-light,
body.motion-reduced .workspace .value-profit-orbit, body.motion-reduced .workspace .value-core-orbit { filter: none; }

/* Customer copy pass: remove duplicate cards/paragraphs at the renderer level.
   These styles support the short reference bar and necessary exceptional states. */
.business-reference.business-reference--compact {
  grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 0 0 20px;
  border: 0; border-bottom: 1px solid var(--customer-line); border-radius: 0;
  background: transparent; box-shadow: none; backdrop-filter: none;
}
.business-reference--compact > div { display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; }
.business-reference--compact span { margin: 0; }
.business-reference--compact strong { font-size: 26px; }
.business-reference--compact > .button { grid-column: auto; justify-self: end; }
.business-metric.growth > strong { color: var(--customer-gold); }
.business-metric > strong:last-child { margin-bottom: 0; }
.value-dial-card header + .value-dial-visual { margin-top: 12px; }
.value-state-note, .carbon-state-note, .business-alerts { font-size: 16px; line-height: 1.75; }
.value-state-note { margin-top: 15px; color: var(--customer-muted); }
.business-alerts { border-left: 3px solid var(--customer-gold); padding: 10px 16px; margin-top: 22px; color: #f0dcb7; }
.business-alerts p + p { margin-top: 7px; }
.carbon-state-note { margin-top: 22px; color: var(--customer-gold); }
.value-state-note.is-negative, .carbon-state-note.is-negative { color: #ffc1b8; }
.business-details, .carbon-details { margin-top: 24px; }
.business-details p + p { margin-top: 12px; }
@media (max-width: 640px) {
  .business-reference.business-reference--compact { grid-template-columns: 1fr; gap: 16px; }
  .business-reference--compact > .button { justify-self: start; }
  .business-reference--compact strong { font-size: 28px; }
}

/* One smoke-glass material across the title, all five modules and export.
   Only stable backdrop filters are used. Motion changes opacity/transform;
   neither the broad blur nor data text moves continuously. */
:root {
  --customer-frost-edge: rgba(221, 235, 244, .32);
  --customer-frost-high: rgba(245, 250, 255, .17);
  --customer-frost-reflection: linear-gradient(132deg, rgba(230, 243, 255, .085), rgba(230, 243, 255, .018) 43%, rgba(10, 17, 25, .04));
  --customer-frost-shadow: inset 0 1px 0 rgba(246, 251, 255, .12), inset 0 -1px 0 rgba(215, 231, 245, .035), 0 9px 28px rgba(3, 10, 18, .08);
}
.ambient {
  background-image: linear-gradient(180deg, rgba(8, 15, 24, .47), rgba(8, 15, 24, .60) 62%, rgba(8, 15, 24, .70)), url("../images/industrial-energy-campus-v1.png");
}
.masthead {
  background: var(--customer-frost-reflection), rgba(29, 36, 44, .42);
  border-bottom-color: var(--customer-frost-edge);
  box-shadow: inset 0 -1px rgba(235, 245, 255, .04);
  backdrop-filter: blur(22px) saturate(95%);
  -webkit-backdrop-filter: blur(22px) saturate(95%);
}
.workspace .workbench-title {
  padding: 25px 26px; margin: 20px 0;
  border: 1px solid var(--customer-frost-edge); border-radius: 9px;
  background: var(--customer-frost-reflection), rgba(30, 38, 47, .32);
  box-shadow: var(--customer-frost-shadow);
  backdrop-filter: blur(18px) saturate(92%);
  -webkit-backdrop-filter: blur(18px) saturate(92%);
}
.workspace .calculator-shell {
  background: var(--customer-frost-reflection), rgba(25, 33, 42, .30);
  border-color: var(--customer-frost-edge); border-radius: 9px;
  box-shadow: inset 0 1px rgba(243, 249, 255, .13), 0 18px 50px rgba(2, 9, 17, .12);
  backdrop-filter: blur(18px) saturate(92%);
  -webkit-backdrop-filter: blur(18px) saturate(92%);
}
.workspace .module-nav {
  background: linear-gradient(180deg, rgba(223, 239, 253, .055), transparent), rgba(30, 39, 48, .86);
  border-color: rgba(220, 235, 245, .24); border-radius: 8px 8px 0 0;
  box-shadow: inset 0 1px rgba(244, 250, 255, .10);
  backdrop-filter: blur(26px) saturate(94%);
  -webkit-backdrop-filter: blur(26px) saturate(94%);
}
.workspace .module-nav button {
  background: linear-gradient(140deg, rgba(var(--tab-rgb), .07), rgba(239, 248, 255, .025)), rgba(36, 45, 53, .18);
  border-color: rgba(var(--tab-rgb), .40);
  box-shadow: inset 0 1px rgba(241, 249, 255, .075);
}
.workspace .module-nav button.active {
  background: linear-gradient(140deg, rgba(var(--tab-rgb), .12), rgba(239, 248, 255, .04)), rgba(48, 57, 66, .22);
  border-color: rgba(var(--tab-rgb), .78);
  box-shadow: inset 0 1px rgba(244, 251, 255, .18), 0 0 16px rgba(var(--tab-rgb), .09);
}
.workspace .module-nav button:hover { background-color: rgba(79, 94, 108, .28); border-color: var(--tab-accent); }
.workspace .overview-strip {
  background: linear-gradient(180deg, rgba(229, 243, 255, .055), transparent), rgba(29, 38, 47, .13);
  border-color: rgba(219, 234, 246, .20); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.workspace .overview-strip > div { background: transparent; }
.workspace .project-context-strip { background: rgba(26, 35, 44, .12); border-color: rgba(219, 234, 246, .18); }
.workspace .project-overview { border-bottom: 1px solid rgba(219, 234, 246, .22); }
.workspace .project-overview > summary {
  min-height: 52px; padding: 13px 26px; color: #d4e6ee;
  font-size: 16px; font-weight: 550; line-height: 1.65; cursor: pointer;
  background: linear-gradient(100deg, rgba(225, 242, 255, .05), transparent), rgba(30, 40, 51, .12);
  transition: background-color 170ms ease, color 170ms ease;
}
.workspace .project-overview > summary::marker { color: #b4d8e9; }
.workspace .project-overview > summary:hover { color: #f0f8fc; background-color: rgba(97, 121, 144, .12); }
.workspace .project-overview > summary:focus-visible { outline: 3px solid var(--customer-focus); outline-offset: -4px; }
.workspace .project-overview[open] > summary { border-bottom: 1px solid rgba(220, 236, 246, .16); }
.workspace .project-overview .overview-strip { border-bottom: 0; }
.workspace .module-panel, .workspace .module-panel[data-module="5"] { background: linear-gradient(150deg, rgba(223, 237, 250, .018), rgba(18, 27, 37, .035)); }
.workspace .module-panel :is(.form-section, .result-panel, .aside-card, .metric-grid, .selected-year-metrics,
  .value-dial-card, .business-metric, .value-bridge, .carbon-outcome, .investment-year-account,
  .detail-table-wrap, .business-period-summary) {
  background: var(--customer-frost-reflection), var(--customer-glass);
  border-color: var(--customer-frost-edge);
  box-shadow: var(--customer-frost-shadow);
  backdrop-filter: blur(9px) saturate(92%);
  -webkit-backdrop-filter: blur(9px) saturate(92%);
}
.workspace .module-panel .investment-parameters > div,
body[data-mode="self"] .workspace .module-panel .investment-parameters > div {
  background: var(--customer-frost-reflection), rgba(35, 43, 52, .21);
  border-color: rgba(var(--mode-rgb), .34);
  box-shadow: var(--customer-frost-shadow);
  backdrop-filter: blur(9px) saturate(92%);
  -webkit-backdrop-filter: blur(9px) saturate(92%);
}
.workspace .module-panel .metric,
.workspace .module-panel .selected-year-metrics > div,
.workspace .module-panel .investment-year-account > div:not(.year-account-heading) { background: transparent; }
.workspace .form-section-header, .workspace .investment-year-account > .year-account-heading {
  background: linear-gradient(110deg, rgba(233, 244, 254, .035), transparent);
  border-bottom-color: rgba(218, 235, 248, .20);
}
.workspace .module-panel .year-selector {
  background: linear-gradient(120deg, rgba(224, 242, 255, .045), transparent), rgba(35, 45, 55, .16);
  border-color: rgba(212, 232, 245, .26); box-shadow: inset 0 1px rgba(240, 249, 255, .06);
  backdrop-filter: blur(8px) saturate(92%); -webkit-backdrop-filter: blur(8px) saturate(92%);
}
.workspace .result-panel > .chart-wrap {
  background: linear-gradient(160deg, rgba(225, 243, 255, .022), transparent 75%);
  border-radius: 5px; box-shadow: inset 0 1px rgba(238, 249, 255, .035);
}
.workspace .field-control, .workspace .field textarea, #appDialog .field-control {
  background: linear-gradient(180deg, rgba(226, 241, 255, .015), transparent), rgba(15, 24, 34, .32);
  border-color: rgba(217, 235, 247, .31); box-shadow: inset 0 1px 3px rgba(3, 10, 17, .10);
}
.workspace .field-control:focus-within, #appDialog .field-control:focus-within {
  background: rgba(32, 46, 61, .4); border-color: #badbea;
  box-shadow: 0 0 0 3px rgba(175, 215, 238, .12), inset 0 1px rgba(238, 249, 255, .05);
}
.workspace .field.invalid .field-control { border-color: #f0a095; }
.workspace .mode-switch, .masthead .product-switch {
  background: rgba(26, 36, 46, .22); border-color: rgba(220, 235, 247, .23);
  box-shadow: inset 0 1px rgba(239, 248, 255, .05);
}
.workspace .mode-switch button.active, .masthead .product-switch .selected {
  background: linear-gradient(125deg, rgba(229, 245, 255, .09), rgba(229, 245, 255, .025)), rgba(59, 75, 92, .24);
  box-shadow: inset 0 1px rgba(243, 250, 255, .14); border-color: rgba(202, 228, 246, .38);
}
.workspace .detail-table th {
  background: rgba(41, 50, 61, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.workspace .detail-table tfoot td { background: rgba(56, 70, 85, .48); }
.workspace .preview-banner, .workspace .demo-notice {
  background: linear-gradient(105deg, rgba(221, 195, 143, .075), rgba(226, 241, 255, .015)), rgba(35, 40, 47, .25);
  border-color: rgba(236, 213, 167, .40); box-shadow: inset 0 1px rgba(255, 245, 219, .07);
  backdrop-filter: blur(14px) saturate(90%); -webkit-backdrop-filter: blur(14px) saturate(90%);
}
.workspace .project-status, .workspace .preview-badge { background-color: rgba(94, 78, 48, .13); }
.workspace .project-status[data-state="actual"], .workspace .project-status.is-actual { background-color: rgba(70, 100, 84, .13); }
.workspace .value-dial-inner { fill: rgba(25, 35, 47, .17); }
.workspace .value-core-base { fill: rgba(28, 40, 50, .22) !important; }
.workspace .value-core-inner { fill: rgba(24, 35, 47, .16); }
.mobile-actions {
  background: linear-gradient(180deg, rgba(229, 242, 255, .035), transparent), rgba(28, 38, 49, .66);
  border-top-color: var(--customer-frost-edge); box-shadow: inset 0 1px rgba(240, 249, 255, .08);
  backdrop-filter: blur(22px) saturate(95%); -webkit-backdrop-filter: blur(22px) saturate(95%);
}

/* Export overlays keep the work behind them visible, with a stationary frost. */
#appDialog {
  color: #f0f5f7;
  background: linear-gradient(130deg, rgba(235, 246, 255, .12), rgba(235, 246, 255, .025) 42%, rgba(10, 18, 28, .025)), rgba(32, 40, 48, .60);
  border-color: rgba(230, 242, 251, .48);
  box-shadow: inset 0 1px rgba(250, 253, 255, .30), inset 0 -1px rgba(223, 239, 252, .07), 0 22px 75px rgba(1, 8, 16, .28);
  backdrop-filter: blur(28px) saturate(88%); -webkit-backdrop-filter: blur(28px) saturate(88%);
}
#appDialog::backdrop { background: rgba(5, 12, 20, .22); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#appDialog[open] { animation: customer-glass-enter 260ms cubic-bezier(.2, .75, .25, 1) both; }
#appDialog[open]::backdrop { animation: customer-glass-backdrop 240ms ease-out both; }
#appDialog .dialog-shell, #appDialog .dialog-body { background: transparent; }
#appDialog .dialog-header {
  background: linear-gradient(100deg, rgba(233, 246, 255, .035), transparent);
  border-bottom-color: rgba(226, 240, 250, .24);
}
#appDialog .export-option, #appDialog .export-module-option {
  position: relative; isolation: isolate;
  background: linear-gradient(130deg, rgba(240, 249, 255, .065), transparent 65%), rgba(46, 57, 69, .16);
  border-color: rgba(219, 236, 249, .29);
  box-shadow: inset 0 1px rgba(246, 251, 255, .10), 0 5px 18px rgba(3, 10, 18, .05);
  transition: background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}
#appDialog .export-option:has(input:checked), #appDialog .export-module-option:has(input:checked),
#appDialog .export-module-option[data-selected="true"] {
  background: linear-gradient(130deg, rgba(188, 219, 240, .11), rgba(223, 240, 252, .025)), rgba(63, 81, 98, .21);
  border-color: rgba(196, 229, 248, .74);
  box-shadow: inset 0 1px rgba(246, 252, 255, .22), inset 0 0 0 1px rgba(193, 225, 245, .08), 0 0 18px rgba(171, 216, 243, .055);
}
#appDialog .export-option::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(211, 239, 255, .72);
  box-shadow: inset 0 1px rgba(246, 252, 255, .13), 0 0 14px rgba(180, 225, 252, .10);
  opacity: 0;
}
#appDialog .export-option:has(input:checked)::after { animation: customer-glass-selection 4.2s ease-in-out infinite; }
#appDialog .export-option:has(input:checked) input, #appDialog .export-module-option input { accent-color: #c0e0ee; }
#appDialog .export-module-option:has(input:disabled) { background: rgba(40, 50, 61, .16); border-style: dashed; box-shadow: none; }
#appDialog .report-thumb {
  position: relative; border-color: rgba(210, 234, 251, .45);
  background: linear-gradient(140deg, rgba(215, 239, 255, .16), transparent 50%), rgba(27, 42, 55, .55);
  box-shadow: inset 0 1px rgba(245, 252, 255, .18), 0 6px 14px rgba(2, 10, 18, .13);
}
#appDialog .report-thumb.light {
  background: linear-gradient(140deg, rgba(255, 255, 255, .94), rgba(224, 233, 238, .85));
  border-color: rgba(245, 250, 255, .86); box-shadow: inset 0 1px #fff, 0 6px 14px rgba(2, 10, 18, .10);
}
#appDialog .export-done { border-radius: 8px; }
#appDialog .button, #appDialog .icon-button {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
#appDialog .button.quiet, #appDialog .icon-button {
  background: linear-gradient(130deg, rgba(234, 246, 255, .045), transparent), rgba(45, 60, 75, .18);
  border-color: rgba(219, 236, 250, .34); box-shadow: inset 0 1px rgba(244, 251, 255, .07);
}
#appDialog .button:active:not(:disabled), #appDialog .icon-button:active:not(:disabled) { transform: translateY(1px); }
#appDialog .button:disabled, #appDialog .icon-button:disabled { transform: none; }
@media (hover: hover) {
  #appDialog .button:hover:not(:disabled), #appDialog .icon-button:hover:not(:disabled) { transform: translateY(-1px); }
  #appDialog .button.quiet:hover, #appDialog .icon-button:hover {
    background-color: rgba(106, 135, 160, .24); border-color: rgba(218, 239, 255, .66);
  }
  #appDialog .export-option:hover, #appDialog .export-module-option:not(:has(input:disabled)):hover {
    border-color: rgba(215, 239, 255, .72); background-color: rgba(91, 116, 139, .23);
    box-shadow: inset 0 1px rgba(247, 252, 255, .18), 0 7px 18px rgba(2, 10, 18, .08);
  }
}
#appDialog .button:active:not(:disabled), #appDialog .icon-button:active:not(:disabled) { transform: translateY(1px); }
/* The high-specificity pale-primary rules earlier remain authoritative in all
   states, including success-page download anchors and a possible quiet class. */
#appDialog .button.export-primary.quiet { color: #112b24; background: #c6ead9; border-color: #d8f1e4; }
#appDialog .button.export-primary.quiet:not(:disabled):hover { color: #112b24; background: #e1f6ea; border-color: #f1fff7; }
#appDialog .button.export-primary.quiet:not(:disabled):active { color: #112b24; background: #b5dec8; border-color: #c6ead9; }
#appDialog .button.export-primary.quiet:disabled { color: #304a40; background: #a8c6b8; border-color: #b5cebf; }
@keyframes customer-glass-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes customer-glass-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes customer-glass-selection { 0%, 100% { opacity: .22; } 50% { opacity: .55; } }
body:is(.paused, .motion-paused, .report-exporting) #appDialog,
body:is(.paused, .motion-paused, .report-exporting) #appDialog::backdrop { animation: none !important; opacity: 1; transform: none; }
body:is(.paused, .motion-paused, .report-exporting) #appDialog .export-option::after { animation-play-state: paused !important; }
body.motion-reduced #appDialog, body.motion-reduced #appDialog::backdrop,
body.motion-reduced #appDialog .export-option::after { animation: none !important; }
body.motion-reduced #appDialog .export-option:has(input:checked)::after { opacity: .32; }
body:is(.motion-reduced, .paused, .motion-paused, .report-exporting) #appDialog .button,
body:is(.motion-reduced, .paused, .motion-paused, .report-exporting) #appDialog .icon-button,
body:is(.motion-reduced, .paused, .motion-paused, .report-exporting) #appDialog .export-option,
body:is(.motion-reduced, .paused, .motion-paused, .report-exporting) #appDialog .export-module-option { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  #appDialog, #appDialog::backdrop, #appDialog .export-option::after { animation: none !important; }
  #appDialog .export-option:has(input:checked)::after { opacity: .32; }
  #appDialog .button, #appDialog .icon-button, #appDialog .export-option, #appDialog .export-module-option { transition: none !important; transform: none !important; }
}
@media (max-width: 640px) {
  .workspace .workbench-title { padding: 22px 20px; margin: 16px 0; }
  .workspace .project-overview > summary { padding: 13px 17px; }
  #appDialog { backdrop-filter: blur(22px) saturate(90%); -webkit-backdrop-filter: blur(22px) saturate(90%); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead, .workspace .workbench-title, .workspace .calculator-shell { background-color: rgba(29, 38, 48, .88); }
  #appDialog { background-color: rgba(32, 42, 53, .94); }
}

/* Keep only the modal scroll surface active while choosing or saving a report. */
html:has(#appDialog[open]) { overflow: hidden; }
#appDialog { overscroll-behavior: contain; }

.module-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.workspace .button.module-export { color: #c9e8f4; background: rgba(126, 175, 198, .10); border-color: rgba(187, 220, 238, .35); }
.workspace .button.module-export:hover { background: rgba(126, 175, 198, .20); border-color: rgba(207, 234, 247, .65); }
.export-detail-toggle { display: flex; align-items: center; gap: 12px; padding: 16px 18px; margin: 18px 0; font-size: 17px; border: 1px solid rgba(205, 226, 231, .27); border-radius: 9px; background: rgba(162, 187, 201, .06); cursor: pointer; }
.export-detail-toggle input { width: 22px; height: 22px; accent-color: #c0e0ee; flex-shrink: 0; }
.export-detail-toggle:focus-within { outline: 3px solid var(--customer-focus); outline-offset: 3px; }
@media (max-width: 760px) {
  .section-intro { align-items: flex-start; }
  .module-actions { flex-wrap: wrap; width: 100%; }
  .module-actions .button { flex: 1; padding-inline: 12px; }
  .module-actions .button.module-export { flex-basis: 52%; }
}

/* Background actions stay hidden while the modal owns the interaction. */
body:has(#appDialog[open]) .mobile-actions { visibility: hidden; }