:root {
  --paper: #fbfaf7;
  --ground: #ebe8e0;
  --ink: #191b18;
  --muted: #66655f;
  --rule: #d8d5cd;
  --hair: #e8e5dd;
  --blue: #087aa7;
  --navy: #173c4d;
  --pale-blue: #d9ebf2;
  --sand: #f1eee6;
  --orange: #b35d2d;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  color: var(--ink);
  background: var(--ground);
  font-family: var(--serif);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--ground); }
button, input, select { font: inherit; }
button { color: inherit; }
.shell { display: flex; flex-direction: column; width: min(1240px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; background: var(--paper); border-inline: 1px solid var(--rule); }
main { flex: 1; }

/* ————— Masthead ————— */
.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; padding: 20px 40px 14px; border-bottom: 1.5px solid var(--ink); }
.brand-cluster { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.brand { padding: 0 0 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; font-family: var(--serif); font-size: 20px; font-weight: 400; letter-spacing: .02em; cursor: pointer; }
.brand:hover, .brand.active { border-bottom-color: var(--blue); color: var(--blue); }
.brand-sep { color: var(--rule); font-size: 20px; }
.country-select { max-width: 440px; border: 0; padding: 0 24px 2px 0; background: transparent; color: var(--ink); font-family: var(--serif); font-size: 20px; letter-spacing: -.005em; cursor: pointer; }
.country-select:hover { color: var(--blue); }
.run-cluster { display: flex; align-items: center; gap: 16px; }
.run-status { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--muted); text-align: right; }
.run-status.attention { color: var(--orange); }
.primary { border: 0; background: var(--blue); color: white; padding: 10px 20px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; cursor: pointer; }
.primary:hover { background: var(--navy); }
.primary[disabled] { opacity: .6; cursor: default; }
.run-button { padding: 9px 26px; }

/* ————— Navigation ————— */
.navigation { display: flex; gap: 4px; padding: 0 40px; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.navigation button { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; padding: 13px 18px 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); cursor: pointer; white-space: nowrap; }
.navigation button:hover { color: var(--ink); }
.navigation button.active { color: var(--ink); border-bottom-color: var(--blue); }
.nav-budget { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 24px; }
.nav-budget span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.nav-budget b { min-width: 52px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--navy); text-align: right; }
.nav-budget input[type="range"] { width: 150px; margin: 0; accent-color: var(--blue); }

/* ————— Page scaffold ————— */
.page { padding: 34px 40px 56px; }
.page h2 { margin: 2px 0 0; font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.page h3 { margin: 0; font-size: 16px; font-weight: 500; }
.page h4 { margin: 0; font-size: 14px; font-weight: 500; }
.lede { max-width: 860px; margin: 14px 0 0; font-size: 17px; line-height: 1.5; }
.table-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.table-heading > span { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; color: var(--muted); }
.value-link { display: inline; color: var(--ink); font-family: var(--mono); text-align: inherit; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { padding: 9px 12px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .1em; text-align: right; color: var(--muted); }
th:first-child, td:first-child { text-align: left; }
td { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: right; vertical-align: top; }

/* ————— Plain statement blocks ————— */
.why-panel { max-width: 880px; margin: 4px 0 8px; }
.why-panel h3 { font-size: 15px; }
.why-panel p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.plan-caption { max-width: 980px; margin: 14px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* ————— About ————— */
.about-doc { max-width: 780px; }
.about-doc h3 { margin: 32px 0 6px; font-size: 16.5px; }
.about-doc p { margin: 8px 0; font-size: 14.5px; line-height: 1.68; }
.about-doc ol { margin: 8px 0; padding-left: 24px; }
.about-doc li { margin: 7px 0; font-size: 14.5px; line-height: 1.6; }
.about-doc i { font-style: italic; }

/* ————— Profile ————— */
.hint { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; margin-left: 2px; border: 1px solid var(--rule); border-radius: 50%; color: var(--muted); font-family: var(--mono); font-size: 8px; font-style: normal; vertical-align: super; cursor: help; }
.hint:hover { border-color: var(--navy); color: var(--navy); }
.country-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; }
.country-field { display: flex; flex-direction: column; gap: 9px; padding: 18px 0 16px; border-bottom: 1px solid var(--hair); }
.country-field > span { min-height: 34px; font-size: 13.5px; color: var(--muted); }
.country-field .value-link { align-self: flex-start; font-size: 20px; }

/* ————— Parameters ————— */
.inventory-table input, .investment-table input { width: 90px; border: 0; padding: 6px 4px; background: transparent; color: var(--blue); font-family: var(--mono); text-align: right; }
.inventory-table input:hover, .inventory-table input:focus, .investment-table input:hover, .investment-table input:focus { background: var(--sand); outline: none; }
.investment-table th { min-width: 74px; }
.investment-table tbody th { border-bottom: 1px solid var(--hair); font-size: 9.5px; }
.investment-table input[type="number"] { width: 60px; padding: 4px; }
.investment-table input.zero { color: #b8b5ac; }
.investment-table input[type="checkbox"] { accent-color: var(--blue); }
.decision-row.schedule-row { display: block; }
.schedule-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 12px; }
.lock-toggle { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 3px 0; border: 0; background: transparent; color: var(--blue); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; cursor: pointer; }
.lock-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lock-toggle:hover { color: var(--navy); }
.lock-toggle[aria-pressed="true"] { color: var(--navy); }
.decision-row { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(260px, 1.6fr) 88px; gap: 22px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.decision-row h4 { margin: 0 0 4px; }
.decision-row > div:first-child span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; color: var(--muted); }
.decision-value p { margin: 0; color: var(--navy); font-size: 13px; line-height: 1.5; }
.decision-value input, .decision-value select { width: 100%; border: 0; padding: 6px 4px; background: transparent; color: var(--blue); font-family: var(--mono); font-size: 13px; }
.decision-value input:hover, .decision-value input:focus, .decision-value select:hover, .decision-value select:focus { background: var(--sand); outline: none; }
.decision-row .lock-toggle { justify-self: end; }
.priority-line { display: flex; align-items: baseline; gap: 28px; margin: 34px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.priority-line h3 { flex: none; }
.priority-line select { flex: 1; min-width: 0; border: 0; padding: 4px 24px 4px 0; background: transparent; color: var(--navy); font-size: 14.5px; }

/* ————— Optimisation ————— */
.verdict { max-width: 1020px; margin: 12px 0 8px !important; font-size: clamp(26px, 2.9vw, 37px) !important; line-height: 1.27; }
.verdict-support { max-width: 900px; margin: 4px 0 0; font-size: 18px; line-height: 1.45; }
.verdict-detail { max-width: 860px; margin: 8px 0 18px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.selected-plan-sentence { max-width: 900px; margin: 12px 0 0; color: var(--navy); font-size: 15px; line-height: 1.55; }
.plan-stats { display: flex; flex-wrap: wrap; margin: 22px 0 26px; border-top: 1px solid var(--hair); }
.plan-stats > div { flex: 1 1 150px; padding: 14px 26px 14px 0; }
.plan-stats > div + div { padding-left: 26px; border-left: 1px solid var(--hair); }
.plan-stats span { display: block; margin-bottom: 7px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em; color: var(--muted); }
.plan-stats .value-link { font-size: 15px; }

/* ————— Frontier ————— */
.frontier { max-width: 940px; margin-bottom: 10px; }
.frontier-y { margin-bottom: 8px; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.frontier-plot { display: flex; }
.frontier-ylabels { position: relative; width: 36px; flex: none; }
.frontier-ylabels span { position: absolute; right: 9px; transform: translateY(-50%); font-family: var(--mono); font-size: 8.5px; color: var(--muted); }
.frontier-field { position: relative; flex: 1; height: 310px; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); cursor: col-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.frontier-field svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.frontier-field .grid { stroke: var(--rule); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.frontier-line { fill: none; stroke: var(--blue); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .7; }
.frontier-line.previous { stroke: #7f8791; stroke-dasharray: 4 4; opacity: .65; }
.previous-run-label { position: absolute; right: 1%; z-index: 4; transform: translateY(-16px); color: #707984; font: 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.target-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--navy); pointer-events: none; }
.target-line span { position: absolute; top: -16px; left: 8px; font-family: var(--mono); font-size: 8px; color: var(--navy); }
.minimum-envelope-marker { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--navy); pointer-events: none; }
.minimum-envelope-marker span { position: absolute; top: 6px; left: 5px; padding: 1px 5px; background: var(--paper); font-family: var(--mono); font-size: 8.5px; color: var(--navy); white-space: nowrap; }
.beyond-shade { position: absolute; top: 0; right: 0; bottom: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(25, 27, 24, .05) 6px 7px); pointer-events: none; }
.budget-divider { position: absolute; top: 0; bottom: 0; border-left: 1.5px solid var(--navy); pointer-events: none; }
.budget-divider span { position: absolute; bottom: 8px; left: 6px; padding: 2px 6px; background: var(--paper); border: 1px solid var(--navy); font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.frontier-point { position: absolute; z-index: 2; width: 13px; height: 13px; padding: 0; transform: translate(-50%, -50%); border: 1.5px solid var(--blue); border-radius: 50%; background: var(--paper); cursor: pointer; }
.frontier-point:hover { background: var(--pale-blue); }
.frontier-point span { display: none; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 4px 8px; border: 1px solid var(--navy); background: var(--paper); text-align: center; white-space: nowrap; }
.frontier-point span b { display: block; font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--navy); }
.frontier-point span i { display: block; font-family: var(--mono); font-size: 8px; font-style: normal; color: var(--muted); }
.frontier-point:hover span, .frontier-point.selected span { display: block; }
.frontier-point.selected { width: 16px; height: 16px; border: 2px solid var(--navy); background: var(--blue); }
.frontier-axis { display: flex; justify-content: space-between; margin-left: 36px; padding-top: 6px; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.frontier-axis b { font-weight: 500; }

/* ————— Charts ————— */
.chart-figure { margin: 0; padding: 0; }
.chart-figure figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 14.5px; }
.chart-figure figcaption strong { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--blue); }
.pillar-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.line-chart { position: relative; }
.line-chart svg { display: block; width: 100%; }
.line-chart .axis { stroke: var(--ink); stroke-width: 1; }
.line-chart .grid { stroke: var(--rule); stroke-dasharray: 2 4; }
.line-chart .tick { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.line-chart .tick-mark { stroke: var(--ink); }
.line-chart .target { stroke: var(--navy); stroke-dasharray: 5 3; }
.line-chart .target-label { font-family: var(--mono); font-size: 8.5px; fill: var(--navy); }
.line-chart .series { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; }
.line-chart .dot { fill: var(--paper); stroke: var(--blue); stroke-width: 1.3; }
.line-chart .crosshair { stroke: var(--navy); stroke-width: .75; stroke-dasharray: 3 3; }
.line-chart .focus { fill: var(--blue); stroke: var(--paper); stroke-width: 1.5; }
.chart-readout { position: absolute; top: -4px; padding: 3px 8px; border: 1px solid var(--navy); background: var(--paper); font-family: var(--mono); font-size: 9.5px; color: var(--navy); opacity: 0; pointer-events: none; transition: opacity .12s; }
.chart-readout.visible { opacity: 1; }

/* ————— Projection ————— */
.projection-table table { min-width: 1040px; }
.projection-table td:not(:first-child), .projection-table th:not(:first-child) { width: 11.5%; }
.constraint { display: inline-block; max-width: 110px; color: var(--muted); font-family: var(--mono); font-size: 8.5px; line-height: 1.4; }
.purchases-row td { font-family: var(--mono); font-size: 8.5px; line-height: 1.6; color: var(--muted); }
.purchases-row td:first-child { font-family: var(--serif); font-size: 13px; color: var(--ink); }
.binding-row td { border-top: 1px solid var(--ink); }

/* ————— Comparison ————— */
.comparison-grid { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); margin-top: 28px; border-top: 1px solid var(--ink); overflow-x: auto; }
.metric-column, .comparison-column { min-width: 180px; }
.metric-column > div, .comparison-column > div { min-height: 52px; padding: 14px 15px; border-bottom: 1px solid var(--hair); }
.metric-column > div { color: var(--muted); }
.comparison-column > div { text-align: right; }
.comparison-column.selected > div { background: #eef4f6; }
.comparison-head { min-height: 66px !important; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: .09em; }
.comparison-head strong { font-size: 17px; letter-spacing: 0; color: var(--blue); }
.actuals-summary { display: grid; grid-template-columns: 1fr auto auto; gap: 40px; align-items: end; margin-top: 28px; padding: 16px 0; border-top: 1px solid var(--hair); }
.actuals-summary strong { font-family: var(--mono); color: var(--blue); }

/* ————— Footer, identity and export ————— */
.footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 40px; border-top: 1.5px solid var(--ink); }
.identity-chips { display: flex; flex-wrap: wrap; gap: 20px; }
.chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 3px 0; border: 0; background: transparent; font-family: var(--mono); font-size: 9px; color: var(--muted); cursor: copy; }
.chip b { font-weight: 600; letter-spacing: .08em; color: var(--navy); }
.chip:hover { color: var(--navy); text-decoration: underline dotted; }
.export-popover { position: relative; }
.export-popover summary { display: inline-flex; align-items: baseline; gap: 7px; padding: 3px 0; border: 0; background: transparent; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; color: var(--navy); cursor: pointer; list-style: none; user-select: none; }
.export-popover summary::-webkit-details-marker { display: none; }
.export-popover summary::after { content: "▴"; font-size: 8px; color: var(--blue); }
.export-popover[open] summary::after { content: "▾"; }
.export-popover summary:hover { text-decoration: underline dotted; }
.popover-panel { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 9; width: 264px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 0 14px 34px rgba(25, 27, 24, .16); }
.popover-panel .page { padding: 6px; }
.export-menu { display: grid; }
.export-menu > button { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 10px 12px; border: 0; background: transparent; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-align: left; cursor: pointer; }
.export-menu > button i { font-style: normal; font-size: 8.5px; color: var(--muted); }
.export-menu > button:hover { background: var(--sand); color: var(--navy); }
.export-menu > button[disabled] { opacity: .4; cursor: default; }
.export-menu > button[disabled]:hover { background: transparent; color: inherit; }
.menu-upload { position: relative; display: flex; padding: 10px 12px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--blue); cursor: pointer; }
.menu-upload:hover { background: var(--sand); }
.menu-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.export-menu .actuals-form { display: grid; gap: 10px; padding: 12px; border-top: 1px solid var(--hair); }
.actuals-form label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); }
.actuals-form input { width: 100%; padding: 8px 9px; border: 1px solid var(--rule); background: transparent; color: var(--blue); font-family: var(--mono); }
.export-menu .review-note { margin: 0; padding: 9px 12px 10px; border-top: 1px solid var(--hair); color: var(--orange); font-size: 10px; line-height: 1.45; }

/* ————— Loading ————— */
.loading, .fatal { min-height: 60vh; display: flex; justify-content: center; align-items: center; gap: 24px; padding: 40px; background: var(--paper); }
.loading h2, .fatal h2 { margin: 4px 0; font-size: 26px; font-weight: 500; }
.fatal p { color: var(--muted); }
.spinner { width: 32px; height: 32px; border: 2px solid var(--rule); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ————— Responsive ————— */
@media (max-width: 980px) {
  .shell { width: 100%; border: 0; }
  .masthead, .page, .navigation, .changed-strip, .footer { padding-inline: 22px; }
  .country-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-charts { grid-template-columns: 1fr; gap: 28px; }
  .nav-budget input[type="range"] { width: 110px; }
}

@media (max-width: 620px) {
  .masthead { flex-direction: column; align-items: stretch; gap: 12px; }
  .run-cluster { justify-content: space-between; }
  .country-select { max-width: none; width: 100%; }
  .page { padding: 26px 16px 44px; }
  .country-grid, .ltfu-grid, .about-grid { grid-template-columns: 1fr; }
  .about-grid article:last-child { grid-column: auto; }
  .decision-row { grid-template-columns: 1fr; gap: 10px; }
  .plan-stats > div + div { padding-left: 0; border-left: 0; }
  .footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .frontier-axis { margin-left: 0; }
}

@media print {
  :root { background: white; }
  body { background: white; }
  .shell { width: 100%; border: 0; }
  .navigation, .footer, .changed-strip, .run-cluster, .lineage-panel { display: none !important; }
  .masthead { padding: 14mm 12mm 6mm; border-bottom-width: 1px; }
  .page { display: none; }
  .projection-page { display: block !important; padding: 8mm 12mm; }
  .projection-table { overflow: visible; }
  .projection-table table { min-width: 0; font-size: 9px; }
  .projection-table th, .projection-table td { padding: 5px 4px; }
  .constraint-badge { font-size: 6px; }
  .pillar-charts, .chart-figure { break-inside: avoid; }
  @page { size: A4 landscape; margin: 8mm; }
}