:root { color-scheme: light; font-family: system-ui, sans-serif; color: #192b35; background: #f4f7f7; line-height: 1.55; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 850px; margin: auto; padding: 2rem 1rem; }
h1 { font-size: clamp(1.9rem, 6vw, 3rem); line-height: 1.15; letter-spacing: -.04em; margin: .5rem 0 1rem; }
h2 { font-size: 1.2rem; }
.eyebrow { color: #285962; font-size: .75rem; font-weight: 750; letter-spacing: .12em; }
#status { border-left: 5px solid #a05d00; padding: 1rem; background: #fff4d9; font-weight: 650; }
#status[data-state="observed"] { border-color: #07634c; background: #e1f5ee; }
#status[data-state="error"] { border-color: #a51d31; background: #ffedf0; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.metrics p { background: white; border: 1px solid #cfdbde; border-radius: .6rem; padding: 1rem; }
.metrics strong { display: block; font-size: clamp(1.5rem, 6vw, 2.5rem); color: #075e68; font-variant-numeric: tabular-nums; }
.control { padding: 1rem; background: white; border: 1px solid #cfdbde; border-radius: .6rem; }
label { display: block; font-weight: 700; }
input[type="range"] { width: 100%; min-height: 48px; accent-color: #075e68; cursor: pointer; }
input:focus-visible { outline: 3px solid #7247ac; outline-offset: 4px; }
#slider-help, footer { color: #425861; font-size: .9rem; }
ol { padding-left: 1.6rem; }
li { margin: 1.3rem 0; padding-left: .4rem; }
.address { font: .85rem ui-monospace, monospace; overflow-wrap: anywhere; user-select: all; }
.bar { height: .65rem; width: 100%; background: #d9e6e8; border-radius: 1rem; overflow: hidden; }
.bar span { display: block; height: 100%; background: #087482; }
.value { margin: .3rem 0; font-variant-numeric: tabular-nums; }
.evidence { border-top: 1px solid #bdccce; margin-top: 2rem; padding-top: .75rem; }
dt { font-weight: 700; margin-top: 1rem; }
dd { margin: .15rem 0; overflow-wrap: anywhere; }
footer { border-top: 1px solid #bdccce; margin-top: 2rem; }
[hidden] { display: none !important; }
@media (max-width: 460px) { .metrics { grid-template-columns: 1fr; gap: 0; } .metrics p { margin: .4rem 0; } }
@media (prefers-reduced-motion: no-preference) { .bar span { transition: width .12s; } }

.periods { display: flex; flex-wrap: wrap; gap: .5rem; }
button { font: inherit; font-weight: 700; padding: .65rem .9rem; border: 1px solid #075e68; border-radius: .35rem; color: #075e68; background: white; cursor: pointer; }
button[aria-pressed="true"] { background: #075e68; color: white; }
button:focus-visible { outline: 3px solid #7247ac; outline-offset: 3px; }
button:disabled { opacity: .6; cursor: wait; }

/* Production navigation and readable static documentation. */
nav{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;max-width:72rem;margin:0 auto;padding:1rem;color:#004e57}nav a{font-size:.92rem}nav .brand{font-weight:800;text-decoration:none;margin-right:.5rem}.skip{position:absolute;left:-10000px}.skip:focus{left:1rem;top:1rem;background:white;padding:.6rem;z-index:2}.preview{max-width:70rem;margin:.2rem auto;background:#fff3cb;border-left:4px solid #946300;padding:.8rem 1rem;font-size:.9rem}.chain-summary,.mono{overflow-wrap:anywhere;word-break:break-word}.chain-summary{font-size:.88rem;color:#44565d}.flow ol{list-style:none;counter-reset:stage;display:grid;gap:1rem;padding:0}.flow li{padding:1rem;border:1px solid #bfd5d7;border-left:4px solid #00707d;border-radius:.4rem;background:white}.flow li strong,.flow li span{display:block}.flow li span{margin-top:.4rem}.flow li:not(:last-child)::after{content:'↓';display:block;margin-top:.7rem;color:#00707d;font-weight:bold}.flow{margin:1.5rem 0}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#eef3f4;padding:1rem;border-radius:.4rem}code{overflow-wrap:anywhere}.license{font-size:.85rem}main>p,main>ul,main>ol{line-height:1.65}footer .mono{font-size:.8rem}h2{margin-top:1.8rem}@media(max-width:450px){nav{gap:.5rem;padding:.8rem 1rem}.preview{margin:.2rem 1rem}nav a{font-size:.83rem}}

a{color:#075e68;text-underline-offset:.16em}a:focus-visible{outline:3px solid #7247ac;outline-offset:3px}nav{max-width:850px}

/* Clear reading order, compact controls and native progressive disclosure. */
.lead { font-size: 1.05rem; color: #244750; }
.reading-note, .field-help, .csv-action p, .artifact-list small { color: #425861; font-size: .9rem; }
.field-help { display: block; margin-top: .25rem; }
nav a[aria-current="page"] { font-weight: 750; text-decoration-thickness: .16em; }
.on-this-page { padding: .75rem 0; margin: 1rem 0; gap: .6rem 1rem; border-top: 1px solid #cfdbde; border-bottom: 1px solid #cfdbde; }
.summary-facts { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: .8rem 1rem; }
.summary-facts dt, .summary-facts dd { margin: 0; }
details { margin: 1rem 0; border: 1px solid #bdccce; border-radius: .4rem; padding: .8rem 1rem; background: white; }
summary { cursor: pointer; font-weight: 700; min-height: 2rem; }
summary:focus-visible { outline: 3px solid #7247ac; outline-offset: 3px; }
details[open] > summary { padding-bottom: .5rem; border-bottom: 1px solid #cfdbde; }
.csv-action { margin: 1rem 0; padding: 1rem; border: 1px solid #bdccce; border-radius: .4rem; background: white; }
#csv-download { display: inline-block; padding: .4rem 0; font-weight: 700; }
.csv-action p { margin: .4rem 0; }
.example, blockquote { margin: 1rem 0; padding: .3rem 1rem; background: #e7f0f1; border-left: 4px solid #087482; }
.example h3 { margin-top: .7rem; }
.formula { padding: .8rem 1rem; background: #eef3f4; border-radius: .4rem; font-variant-numeric: tabular-nums; }
.steps li { margin: .7rem 0; }
.validation-levels h3 { font-size: 1rem; }
.artifact-list { list-style: none; padding: 0; }
.artifact-list li { padding: .8rem 0; border-bottom: 1px solid #cfdbde; margin: 0; }
.artifact-list span, .artifact-list small { display: block; margin-top: .25rem; }
.artifact-list code { overflow-wrap: anywhere; word-break: break-word; }
.glossary dt { scroll-margin-top: 1rem; }
@media(max-width: 560px) { .summary-facts { display: block; } .summary-facts dt { margin-top: 1rem; } .summary-facts dd { margin-top: .2rem; } }

@media(max-width:560px) { main { padding-top: 1rem; } h1 { font-size: 1.75rem; } header p { margin: .8rem 0; } #status { padding: .8rem; } }

.product-name{font-size:1.4rem;font-weight:600;margin:.25rem 0}.report-name{color:#425861;margin:.3rem 0 1rem}

.snapshot-line { display: block; }