:root { color-scheme: light; font-family: Arial, sans-serif; line-height: 1.6; color: #262626; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; border-top: 8px solid #012169; }
header, main, footer { width: min(100% - 3rem, 72rem); margin-inline: auto; }
header { padding-block: 3rem 2rem; }
h1, h2, h3 { color: #012169; overflow-wrap: anywhere; }
h1 { font: 400 clamp(2.4rem, 6vw, 4.8rem)/1.08 Georgia, serif; margin: .75rem 0 1.5rem; letter-spacing: -.025em; }
h2 { font: 400 1.8rem/1.2 Georgia, serif; margin: 0; }
h3 { margin: 2rem 0 .5rem; font-size: 1.15rem; }
p { max-width: 75ch; }
.eyebrow { color: #012169; font-size: .8rem; font-weight: bold; letter-spacing: .12em; }
.intro { max-width: 50ch; font-size: 1.2rem; }
section, aside { border-top: 1px solid #666; padding-block: 2rem; }
.section-title { display: flex; align-items: baseline; gap: 1rem; }
.section-title h2 { min-width: 0; }
.step { font: .85rem ui-monospace, monospace; color: #666; }
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-block: 1.5rem; }
label { display: block; font-weight: bold; font-size: .9rem; margin-bottom: .4rem; }
input { display: block; min-width: 0; width: 100%; border: 1px solid #666; background: #fff; border-radius: 0; padding: .7rem; font: 1rem Arial, sans-serif; color: #262626; }
input[aria-invalid="true"] { border: 2px solid #C84E00; }
.error { display: block; color: #9a3900; font-size: .85rem; margin-top: .3rem; }
.error:empty { display: none; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }
button { font: bold 1rem Arial, sans-serif; padding: .85rem 1.2rem; border: 2px solid #012169; background: #012169; color: white; cursor: pointer; }
button:hover { background: #00539B; border-color: #00539B; }
.secondary { background: white; color: #012169; }
.secondary:hover { background: #E2E6ED; border-color: #012169; }
:focus-visible { outline: 3px solid #012169; outline-offset: 3px; box-shadow: 0 0 0 3px white; }
#status { color: #012169; font-size: .9rem; margin-bottom: 0; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #666; border: 1px solid #666; }
.metrics div { padding: 1.25rem; background: #F3F2F1; }
dt { font-size: .85rem; color: #262626; }
dd { font: 400 2.5rem/1.3 Georgia, serif; color: #012169; margin: .5rem 0 0; }
.table-help { color: #666; font-size: .85rem; }
.table-scroll { overflow-x: auto; border: 1px solid #666; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; white-space: nowrap; }
th, td { text-align: right; padding: .65rem 1rem; border-bottom: 1px solid #E5E5E5; }
th { background: #012169; color: #fff; font-size: .85rem; }
th:first-child, td:first-child { text-align: left; }
.shortage { background: #FCF7E5; }
.shortage td:nth-child(5) { font-weight: bold; }
aside p { font-size: .95rem; }
footer { padding-block: 1rem 3rem; color: #666; font-size: .85rem; }
a { color: #012169; text-underline-offset: .2em; }
a:hover { color: #00539B; }
[hidden] { display: none; }
@media (max-width: 850px) { .fields, .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 450px) { header, main, footer { width: calc(100% - 2rem); } header { padding-top: 2rem; } .fields { grid-template-columns: 1fr; } .metrics div { padding: .85rem; } dd { font-size: 2rem; } }
#timeline { max-width:50rem; font:.875rem Arial,sans-serif; } #timeline svg { width:100%; height:16em; display:block; font:inherit; } #comparison { overflow-x:auto; } details { margin:1.5rem 0; } summary { cursor:pointer; padding:.5rem 0; } details label { display:block; margin:.8rem 0; } button:disabled { background:#E5E5E5; color:#666; border-color:#666; cursor:default; } [hidden] { display:none; } #restore-run { max-width:100%; } #ledger td:last-child { min-width:16rem; white-space:normal; }
