:root {
--bg: #020617;
--bg-elevated: #0b1120;
--bg-card: #020617;
--accent: #38bdf8;
--accent-soft: rgba(56, 189, 248, 0.14);
--text-main: #e5e7eb;
--text-muted: #9ca3af;
--border-soft: #1f2937;
--danger: #f97373;
--radius-lg: 0.875rem;
--shadow-soft: 0 13px 27px rgba(15, 23, 42, 0.6);
--shadow-subtle: 0 7px 20px rgba(15, 23, 42, 0.4);
--scrollbar-thumb: rgba(148, 163, 184, 0.5);
--scrollbar-track: rgba(15, 23, 42, 0.5);
}

* {
  box-sizing: border-box;
}

html {
height: 100%;
font-size: clamp(12px, 1vw + 9px, 16px);
transform: scale(0.8);
transform-origin: top left;
width: 125%;
height: 125%;
}

body {
height: 100%;
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: radial-gradient(circle at top, #1e293b 0, #020617 45%, #020617 100%);
color: var(--text-main);
display: flex;
flex-direction: column;
font-size: 1rem;
overflow-y: hidden;
overflow-x: hidden;
}

body.modal-open {
overflow: hidden;
}

::-webkit-scrollbar {
width: 0.675em;
height: 0.675em;
}

::-webkit-scrollbar-track {
background: var(--scrollbar-track);
border-radius: 0.54em;
}

::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 0.54em;
}

::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.7);
}

::-webkit-scrollbar-corner {
background: var(--bg-elevated);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

main.container {
flex: 1 1 auto;
display: flex;
flex-direction: row;
gap: 0.81em;
padding: 0.81em 0.99em 0.675em;
min-height: 0;
}

.left-column {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 0.81em;
min-width: 0;
min-height: 0;
}

.output-panel {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 0.81em;
min-width: 0;
min-height: 0;
overflow: hidden;
}

.output-panel .card {
min-width: 0;
flex: 1 1 0;
display: flex;
flex-direction: column;
min-height: 0;
}

header.header-card {
border-radius: var(--radius-lg);
padding: 0.99em 1.08em 0.81em;
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 0;
overflow: visible;
}

@media (min-width: 810px) and (min-height: 810px) {
header.header-card {
flex: 0 0 36vh;
max-height: 36vh;
overflow-y: auto;
}
}

header h1 {
margin: 0 0 0.315em;
font-size: 1.08em;
letter-spacing: 0.036em;
text-transform: uppercase;
color: #cbd5f5;
display: flex;
align-items: center;
gap: 0.675em;
flex-wrap: wrap;
}

header h1 span.badge {
font-size: 0.81em;
text-transform: uppercase;
letter-spacing: 0.108em;
padding: 0.27em 0.81em;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.5);
color: var(--text-muted);
white-space: nowrap;
}

header p {
margin: 0;
font-size: 0.945em;
color: var(--text-muted);
max-width: 41.4em;
}

.section-intro {
margin-bottom: 0.405em;
font-size: 0.9em;
color: var(--text-muted);
}

.caption {
margin-top: 0.36em;
font-size: 0.855em;
color: var(--text-muted);
}

.header-cheatsheet {
margin-top: 0.405em;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.215em;
row-gap: 0.54em;
font-size: 0.855em;
}

.header-cheatsheet p {
margin: 0;
line-height: 1.4;
}

.header-cheatsheet code {
font-size: 0.855em;
}

@media (max-width: 810px) {
.header-cheatsheet {
grid-template-columns: 1fr;
}
}

.controls-panel {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
overflow: hidden;
height: 100%;
}

.controls-row {
display: flex;
flex-direction: row;
gap: 0.81em;
flex: 1;
min-height: 0;
height: 100%;
}

.controls-row .card {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}

.controls-row .card--scenario {
flex: 2 1 0;
}

.controls-row .card--params {
flex: 1 1 0;
}

.card {
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.97), #020617 60%);
border-radius: var(--radius-lg);
border: 1px solid rgba(15, 23, 42, 0.95);
box-shadow: var(--shadow-soft);
padding: 0.855em 0.99em 0.855em;
position: relative;
overflow: hidden;
}

.card h2 {
margin: 0 0 0.405em;
font-size: 1.08em;
letter-spacing: 0.036em;
text-transform: uppercase;
color: #cbd5f5;
}

.card-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.54em;
cursor: pointer;
}

.card-title-label {
flex: 1;
}

.card-title-expand {
font-size: 0.855em;
opacity: 0.6;
padding: 0.09em 0.405em;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.5);
}

.card-title:hover .card-title-expand {
opacity: 0.9;
border-color: rgba(148, 163, 184, 0.9);
}

.card--expanded .card-title-expand {
display: none;
}

.card-main {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding-right: 0.27em;
}

.card-footer {
flex: 0 0 auto;
margin-top: 0.54em;
}

.card--scenario .card-main {
display: flex;
flex-direction: column;
gap: 0.405em;
}

.scenario-row {
display: flex;
flex-direction: column;
gap: 0.315em;
}

.scenario-row label {
font-size: 0.945em;
color: var(--text-main);
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.54em;
flex-wrap: wrap;
}

.scenario-row label span.tagline {
font-size: 0.81em;
text-transform: uppercase;
letter-spacing: 0.081em;
color: var(--text-muted);
}

.scenario-row select {
flex: 1;
padding: 0.54em 0.99em;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: rgba(15, 23, 42, 0.96);
color: var(--text-main);
font-size: 0.9em;
}

.scenario-row input[type="text"],
.scenario-row textarea {
flex: 1;
padding: 0.54em 0.99em;
border-radius: 0.75rem;
border: 1px solid var(--border-soft);
background: rgba(15, 23, 42, 0.96);
color: var(--text-main);
font-size: 0.9em;
outline: none;
}

.scenario-row input[type="text"]:focus,
.scenario-row textarea:focus {
border-color: rgba(56, 189, 248, 0.85);
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.4);
}

.scenario-description {
font-size: 0.9em;
color: var(--text-muted);
}

.table-wrapper {
margin-top: 0.315em;
border-radius: 10.8px;
border: 1px solid rgba(31, 41, 55, 0.9);
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.96), #020617 60%);
overflow: auto;
min-height: 9em;
max-height: 50vh;
}

table {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
}

thead {
position: sticky;
top: 0;
background: #020617;
z-index: 1;
}

th,
td {
padding: 0.405em 0.54em;
border-bottom: 1px solid rgba(15, 23, 42, 0.9);
text-align: left;
white-space: nowrap;
}

th {
font-weight: 500;
color: #9ca3af;
background: linear-gradient(to right, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.98));
position: sticky;
top: 0;
}

tbody tr:nth-child(even) {
background-color: rgba(15, 23, 42, 0.55);
}

tbody tr:hover {
background-color: rgba(15, 23, 42, 0.9);
}

td input[type="number"],
td input[type="text"] {
width: 100%;
padding: 0.315em 0.405em;
border-radius: 5.4px;
border: 1px solid rgba(31, 41, 55, 0.9);
background: rgba(15, 23, 42, 0.96);
color: var(--text-main);
font-size: 0.855em;
}

.input-disabled,
td input[disabled] {
opacity: 0.5;
background: rgba(15, 23, 42, 0.7);
color: var(--text-muted);
cursor: not-allowed;
}

.input-error {
border-color: var(--danger) !important;
box-shadow: 0 0 0 0.9px rgba(248, 113, 113, 0.7);
}

.hint {
margin-top: 0.36em;
font-size: 0.855em;
color: var(--text-muted);
}

.table-actions {
display: flex;
justify-content: flex-end;
gap: 0.54em;
flex-wrap: wrap;
position: relative;
align-items: center;
}

.more-events-toggle {
white-space: nowrap;
}

.more-events-container {
display: flex;
flex-wrap: wrap;
gap: 0.35em;
order: -1;
}

.more-events-group {
position: relative;
}

.more-events-panel {
position: absolute;
bottom: calc(100% + 0.5em);
left: 0;
min-width: 14rem;
max-width: min(24rem, 90vw);
padding: 0.6em 0.7em 0.7em;
border-radius: 0.8rem;
border: 1px solid rgba(148, 163, 184, 0.9);
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), #020617 70%);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
display: none;
z-index: 25;
}

.more-events-panel.open {
display: block;
}

.more-events-title {
font-size: 0.83em;
color: var(--text-muted);
margin-bottom: 0.25em;
}

.more-events-title strong {
color: var(--text-main);
font-size: 0.9em;
}

.more-events-caption {
margin-top: 0.1em;
}

.more-events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr));
gap: 0.35em;
margin-top: 0.35em;
}

.more-event-button {
width: 100%;
padding: 0.32em 0.75em;
font-size: 0.83em;
justify-content: flex-start;
box-shadow: none;
min-height: 0;
}

.more-event-button--degrade {
border-color: rgba(248, 113, 113, 0.8);
}

.more-event-button--resilience {
border-color: rgba(34, 197, 94, 0.8);
}

.more-event-button--reconstitute {
border-color: rgba(168, 85, 247, 0.9);
}

.more-event-button--vulnerability {
border-color: rgba(234, 179, 8, 0.9);
}

@media (max-width: 720px) {
.more-events-panel {
left: auto;
right: 0;
}
}

button {
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.45);
background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), rgba(15, 23, 42, 0.96));
color: #e5e7eb;
padding: 0.54em 1.08em;
font-size: 0.945em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.36em;
box-shadow: var(--shadow-subtle);
transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
min-height: 2.43em;
}

button:hover {
background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.24), rgba(15, 23, 42, 0.96));
transform: translateY(-0.9px);
box-shadow: 0 12.6px 25.2px rgba(15, 23, 42, 0.8);
}

button.secondary {
background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.14), rgba(15, 23, 42, 0.96));
border-color: rgba(75, 85, 99, 0.7);
}

button.secondary:hover {
background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.22), rgba(15, 23, 42, 0.96));
}

button.danger {
background: radial-gradient(circle at top left, rgba(248, 113, 113, 0.16), rgba(15, 23, 42, 0.96));
border-color: rgba(248, 113, 113, 0.7);
}

button.danger:hover {
background: radial-gradient(circle at top left, rgba(248, 113, 113, 0.26), rgba(15, 23, 42, 0.96));
}

button.icon-only {
padding: 0.27em 0.675em;
font-size: 0.855em;
border-radius: 999px;
min-height: 0;
}

button:disabled {
opacity: 0.45;
cursor: default;
box-shadow: none;
}

.card--params .card-main {
display: flex;
flex-direction: column;
gap: 0.54em;
padding-right: 1.08em;
}

.form-group {
margin-bottom: 0.135em;
display: flex;
flex-direction: column;
gap: 0.315em;
}

.form-label-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.945em;
color: var(--text-main);
}

.form-label-row span.value-label {
font-weight: 600;
color: #e5e7eb;
font-size: 0.945em;
}

input[type="range"] {
width: 100%;
accent-color: var(--accent);
height: 0.405em;
}

.slider-help {
font-size: 0.81em;
color: var(--text-muted);
}

.slider-meta {
margin-left: 0.25em;
font-style: italic;
color: var(--text-muted);
white-space: nowrap;
}

.checkbox-group {
display: flex;
flex-direction: column;
gap: 0.405em;
margin-top: 0.315em;
margin-bottom: 0.315em;
font-size: 0.9em;
color: var(--text-muted);
}

.checkbox-group label {
display: flex;
align-items: center;
gap: 0.495em;
}

.checkbox-group input[type="checkbox"] {
transform: scale(1.08);
}

.buttons-row {
display: flex;
gap: 0.675em;
flex-wrap: wrap;
}

.chart-container {
position: relative;
flex: 1;
width: 100%;
height: 100%;
min-height: 260px;
}

.summary-card {
border: 1px solid rgba(56, 189, 248, 0.55);
box-shadow: 0 18px 45px rgba(8, 47, 73, 0.7);
background: radial-gradient(circle at top left, rgba(8, 47, 73, 0.9), #020617 60%);
}

.summary-card .card-main {
display: flex;
flex-direction: column;
gap: 0.54em;
}

.summary-text {
max-height: none;
overflow: visible;
padding-right: 0.27em;
}

.summary-text p {
margin: 0.27em 0;
font-size: 0.9em;
line-height: 1.45;
}

.summary-text strong {
color: #e5e7eb;
}

.metrics-grid {
margin-top: 0.54em;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
gap: 0.405em;
overflow: visible;
padding-right: 0.27em;
}

.metric-card {
border-radius: 9px;
border: 1px solid rgba(30, 64, 175, 0.85);
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.97), #020617 60%);
padding: 0.54em 0.675em 0.54em;
font-size: 0.855em;
}

.metric-label {
font-size: 0.765em;
color: var(--text-muted);
}

.metric-value {
font-size: 0.945em;
font-weight: 600;
margin: 0.162em 0;
}

.metric-expl {
font-size: 0.756em;
color: #9ca3af;
}

footer {
padding: 0.405em 0.99em 0.54em;
font-size: 0.81em;
color: var(--text-muted);
text-align: right;
border-top: 1px solid rgba(15, 23, 42, 0.95);
background: rgba(2, 6, 23, 0.96);
flex-shrink: 0;
}

.pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.162em 0.54em;
border-radius: 999px;
font-size: 0.756em;
letter-spacing: 0.054em;
text-transform: uppercase;
border: 1px solid rgba(148, 163, 184, 0.55);
cursor: pointer;
user-select: none;
}

.pill-degrade {
background: rgba(248, 113, 113, 0.18);
border-color: rgba(248, 113, 113, 0.75);
color: #fecaca;
}

.pill-resilience {
background: rgba(34, 197, 94, 0.16);
border-color: rgba(34, 197, 94, 0.7);
color: #bbf7d0;
}

.pill-vulnerability {
background: rgba(234, 179, 8, 0.22);
border-color: rgba(234, 179, 8, 0.85);
color: #facc15;
}

.pill-reconstitute {
background: rgba(168, 85, 247, 0.24);
border-color: rgba(168, 85, 247, 0.8);
color: #e9d5ff;
}

.card-overlay,
#cardOverlay {
position: fixed;
inset: 0;
background: radial-gradient(circle at top, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.96));
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease;
z-index: 40;
}

.card-overlay.active,
#cardOverlay.active {
opacity: 1;
visibility: visible;
}

.card--expanded,
.card.expanded,
.card.is-expanded,
.card.card-expanded {
position: fixed !important;
z-index: 50;
box-shadow: 0 21.6px 54px rgba(15, 23, 42, 0.9);
transition: transform 0.18s ease;
display: flex;
flex-direction: column;
font-size: 1.35rem;
padding: 1.08em 1.35em 1.08em;
}

.card--expanded-horizontal,
.card.expanded-horizontal,
.card.is-expanded-horizontal {
top: 6vh;
bottom: 6vh;
left: 2vw;
right: 2vw;
}

.card--expanded-vertical,
.card.expanded-vertical,
.card.is-expanded-vertical {
top: 0;
bottom: 0;
left: 10vw;
right: 10vw;
}

.card--params.card--expanded-vertical,
.card--params.expanded-vertical {
left: 20vw;
right: 20vw;
}

.card--expanded-header,
header.header-card.expanded-header {
top: 5vh;
bottom: 4vh;
left: 10vw;
right: 10vw;
max-height: none;
}

@media (max-width: 810px) {
.card--expanded-horizontal,
.card--expanded-vertical,
.card--expanded-header,
.card.expanded-horizontal,
.card.expanded-vertical,
header.header-card.expanded-header {
top: 4vh;
bottom: 4vh;
left: 2vw;
right: 2vw;
max-height: none;
}

.card--expanded-vertical,
.card.expanded-vertical {
left: 2vw;
right: 2vw;
}

.card--params.card--expanded-vertical,
.card--params.expanded-vertical {
left: 2vw;
right: 2vw;
}
}

.card--expanded .card-main,
.card.expanded .card-main {
padding-right: 0.81em;
overflow-y: auto;
}

.card[data-expand-mode="horizontal"].card--expanded .card-main,
.card[data-expand-mode="horizontal"].expanded .card-main {
display: flex;
flex-direction: column;
overflow-y: hidden;
padding-right: 0;
}

.card[data-expand-mode="horizontal"].card--expanded .chart-container,
.card[data-expand-mode="horizontal"].expanded .chart-container {
flex: 1 1 auto;
min-height: 0;
}

header.header-card.card--expanded,
header.header-card.expanded {
flex: none !important;
height: auto !important;
max-height: 70vh !important;
overflow-y: auto !important;
}

.card--expanded .table-wrapper,
.card.expanded .table-wrapper {
max-height: 55vh;
}

.card-close-button {
display: none;
position: absolute;
top: 0.54em;
right: 0.675em;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.6);
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), #020617 70%);
color: #e5e7eb;
font-size: 0.81em;
padding: 0.225em 0.54em;
cursor: pointer;
z-index: 60;
}

.card--expanded .card-close-button,
.card.expanded .card-close-button {
display: inline-flex;
}

.card-close-button:hover {
background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.26), #020617 70%);
}

.hover-preview,
#hoverPreview {
position: fixed;
z-index: 60;
padding: 0.99em 1.08em 0.99em;
border-radius: 10.8px;
background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), #020617 70%);
border: 1px solid rgba(148, 163, 184, 0.9);
color: var(--text-main);
font-size: 0.945em;
max-width: min(72vw, 540px);
pointer-events: none;
box-shadow: 0 18px 40.5px rgba(15, 23, 42, 0.95);
opacity: 0;
transform: translateY(5.4px);
transition: opacity 0.08s ease, transform 0.08s ease;
white-space: normal;
line-height: 1.45;
}

.hover-preview--visible,
#hoverPreview.hover-preview--visible {
opacity: 1;
transform: translateY(0);
}

@media (max-width: 1080px) {
header h1 {
font-size: 1em;
}

.card h2 {
font-size: 1em;
}

.section-intro,
.caption {
font-size: 0.855em;
}

button {
font-size: 0.9em;
}
}

@media (max-width: 810px) {
html {
font-size: clamp(12px, 2.16vw + 7.92px, 14.4px);
}

body {
overflow-y: auto;
}

main.container {
flex-direction: column;
height: auto;
gap: 0.675em;
padding: 0.675em 0.81em 0.54em;
}

.left-column,
.output-panel {
max-height: none;
min-height: auto;
}

.controls-panel {
max-height: none;
overflow: visible;
}

.controls-row {
flex-direction: column;
gap: 0.675em;
height: auto;
}

header.header-card {
flex: 0 0 auto;
max-height: none;
overflow: visible;
padding: 0.81em 0.99em 0.72em;
}

.output-panel {
overflow: visible;
}

.output-panel .card {
flex: 0 0 auto;
min-height: 0;
}

.chart-container {
height: 100%;
}

header h1 {
font-size: 0.945em;
}

.card h2 {
font-size: 0.945em;
}

.summary-text p {
font-size: 0.855em;
}
}

@media (max-height: 720px) {
body {
overflow-y: auto;
}

main.container {
flex-direction: column;
height: auto;
}

.left-column,
.output-panel {
max-height: none;
min-height: auto;
}

.controls-panel {
max-height: none;
overflow: visible;
}

.output-panel {
overflow: visible;
}

.output-panel .card {
flex: 0 0 auto;
min-height: 0;
}

.chart-container {
height: 100%;
}
}

@media (max-width: 720px), (max-height: 585px) {
html {
font-size: clamp(10.8px, 1.62vw + 6.48px, 12.96px);
}

.card {
padding: 0.675em 0.81em 0.675em;
}

header h1 {
font-size: 0.855em;
}

.card h2 {
font-size: 0.855em;
}

.section-intro,
.caption,
.hint,
.slider-help {
font-size: 0.81em;
}

button {
padding: 0.405em 0.81em;
font-size: 0.81em;
min-height: 2.16em;
}

.metrics-grid {
grid-template-columns: repeat(auto-fit, minmax(9.72em, 1fr));
}

.table-wrapper {
max-height: 45vh;
}
}

.scenario-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 60;
}

.scenario-modal--open,
.scenario-modal.open,
.scenario-modal.is-open,
.scenario-modal[aria-hidden="false"] {
display: flex;
}

.scenario-modal-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(
circle at top,
rgba(15, 23, 42, 0.92),
rgba(2, 6, 23, 0.98)
);
backdrop-filter: blur(6px);
}

.scenario-modal-dialog {
position: relative;
z-index: 61;
width: min(32rem, 94vw);
max-height: 90vh;
display: flex;
flex-direction: column;
gap: 0.6em;
padding: 1.05em 1.25em 1em;
border-radius: 1rem;
border: 1px solid rgba(56, 189, 248, 0.75);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.95);
background: radial-gradient(
circle at top left,
rgba(15, 23, 42, 0.98),
#020617 70%
);
overflow: hidden;
}

.scenario-modal-dialog::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.25), transparent 55%);
opacity: 0.65;
pointer-events: none;
mix-blend-mode: screen;
}

.scenario-modal-dialog > * {
position: relative;
z-index: 1;
}

.scenario-modal--open .scenario-modal-dialog,
.scenario-modal.open .scenario-modal-dialog,
.scenario-modal.is-open .scenario-modal-dialog,
.scenario-modal[aria-hidden="false"] .scenario-modal-dialog {
animation: scenarioModalIn 0.2s ease-out;
}

@keyframes scenarioModalIn {
from {
transform: translateY(14px) scale(0.97);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}

.scenario-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em;
margin-bottom: 0.25em;
padding-bottom: 0.35em;
border-bottom: 1px solid rgba(15, 23, 42, 0.95);
}

.scenario-modal-header h3 {
margin: 0;
font-size: 1em;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #cbd5f5;
}

.scenario-modal-close {
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: radial-gradient(
circle at top left,
rgba(15, 23, 42, 0.98),
#020617 70%
);
padding: 0.2em 0.55em;
font-size: 0.8em;
min-height: 0;
box-shadow: none;
}

.scenario-modal-close:hover {
background: radial-gradient(
circle at top left,
rgba(148, 163, 184, 0.24),
#020617 70%
);
}

.scenario-modal-body {
flex: 1 1 auto;
overflow-y: auto;
padding-right: 0.1em;
display: flex;
flex-direction: column;
gap: 0.5em;
}

.scenario-modal-footer {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
gap: 0.5em;
margin-top: 0.4em;
}

.print-report-header {
display: none;
}

@media (min-width: 811px) {
.card--expanded-header,
header.header-card.expanded-header {
top: 6vh;
bottom: 6vh;
left: 20vw;
right: 20vw;
}

.card--expanded-vertical,
.card.expanded-vertical,
.card.is-expanded-vertical {
top: 6vh;
bottom: 6vh;
left: 22vw;
right: 22vw;
}

.card--params.card--expanded-vertical,
.card--params.expanded-vertical {
left: 25vw;
right: 25vw;
}
}

@page {
margin: 1cm;
}

@media print {
  :root {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --text-main: #000000;
    --text-muted: #444444;
    --border-soft: #cccccc;
  }

  html,
  body {
    height: auto !important;
    margin: 0;
    padding: 0;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
    overflow: visible !important;
    font-size: 12pt; /* Standard print font size for readability */
  }

  * {
    box-shadow: none !important;
    background-image: none !important;
  }

  body.modal-open {
    overflow: visible !important;
  }

  #cardOverlay,
  .card-overlay,
  #hoverPreview,
  .hover-preview {
    display: none !important;
  }

  main.container {
    display: block;
    flex-direction: column;
    height: auto;
    min-height: auto;
    gap: 1rem; /* Increased gap for better spacing */
    padding: 0 1rem; /* Added horizontal padding for margins */
    width: 100%;
    max-width: 210mm; /* Standard A4 width minus margins */
    margin: 0 auto; /* Center the content */
  }

  [data-print-only="true"] {
    display: block !important;
  }

  .print-report-header {
    display: block !important;
    width: 100%;
    margin: 0 0 1.5rem; /* Increased bottom margin */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #cccccc;
  }

  .print-report-title {
    margin: 0 0 0.3rem;
    font-size: 1.5rem; /* Slightly larger for emphasis */
    font-weight: 700;
  }

  .print-report-subtitle {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: #333333;
  }

  .print-report-meta {
    margin: 0.15rem 0;
    font-size: 0.9rem;
  }

  .print-report-meta-em {
    font-weight: 600;
  }

  .print-report-grid {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal columns for balance */
    gap: 1rem; /* Increased gap */
    page-break-inside: avoid;
    break-inside: avoid-page;
  }

  .print-report-heading {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
  }

  .print-params-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
  }

  .print-params-table th,
  .print-params-table td {
    border-bottom: 1px solid #e5e5e5;
    padding: 0.15rem 0.2rem;
    text-align: left;
  }

  .print-params-table th {
    font-weight: 600;
    white-space: nowrap;
  }

  .print-params-table td {
    word-break: break-word;
  }

  .left-column,
  .output-panel,
  .controls-panel {
    display: block;
    width: 100%;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .controls-row {
    display: block;
  }

  .controls-row .card,
  .output-panel .card,
  .left-column > .card,
  .summary-card {
    width: 100% !important;
    flex: none !important;
    margin-bottom: 2rem; /* Increased spacing to prevent overlap */
    page-break-inside: avoid;
    break-inside: avoid-page;
    page-break-before: auto;
    break-before: auto;
  }

  header.header-card {
    flex: 0 0 auto !important;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    page-break-inside: avoid;
    break-inside: avoid-page;
  }

  .card {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
    page-break-inside: avoid;
    break-inside: avoid-page;
    page-break-before: auto;
    break-before: auto;
    margin-bottom: 2rem; /* Consistent spacing */
    padding: 1rem; /* Adjusted padding for better distribution */
  }

  .card.card--scenario {
    page-break-inside: auto;
    break-inside: auto;
  }

  .card-main {
    overflow: visible !important;
    padding-right: 0 !important;
  }

  .output-panel {
    overflow: visible !important;
  }

  .table-wrapper {
    max-height: none !important;
    overflow: visible !important;
    page-break-inside: avoid;
    break-inside: avoid-page;
  }

  thead,
  th {
    position: static !important;
  }

  th,
  td {
    white-space: normal !important;
  }

  td input[type="number"],
  td input[type="text"] {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    color: #000000 !important;
  }

  td input[type="number"]::-webkit-outer-spin-button,
  td input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .pill {
    border-color: #666666 !important;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0.05rem 0.25rem;
  }

  .chart-container {
    height: 350px !important; /* Adjusted height for better fit */
    width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid-page;
    margin: 1rem 0; /* Added margins for spacing */
  }

  canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important; /* Ensure canvas fills container */
  }

  .card--expanded,
  .card--expanded-horizontal,
  .card--expanded-vertical,
  .card--expanded-header,
  .card.expanded,
  .card.expanded-horizontal,
  .card.expanded-vertical,
  header.header-card.expanded-header {
    position: static !important;
    inset: auto !important;
    max-height: none !important;
    transform: none !important;
  }

  button,
  input[type="range"],
  .card-close-button {
    display: none !important;
  }

  footer {
    display: none !important;
  }

  .card[data-print-exclude="true"] {
    display: none !important;
  }

  #scenarioModal,
  .scenario-modal {
    display: none !important;
  }

  .summary-card {
    page-break-inside: avoid;
    break-inside: avoid-page;
    page-break-before: auto;
    break-before: auto;
  }

  .metrics-grid {
    page-break-inside: avoid;
    break-inside: avoid-page;
  }
}