:root {
  color-scheme: light;
  --ink: #172536;
  --muted: #526174;
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --line: #d9e1eb;
  --control: #758498;
  --primary: #1e40af;
  --primary-hover: #173383;
  --soft: #edf2fc;
  --success: #155e37;
  --success-bg: #e6f5eb;
  --warning: #73450b;
  --warning-bg: #fff3d6;
  --danger: #9f2222;
  --danger-bg: #fff0ef;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
a { color: var(--primary); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, select, summary, input[type=checkbox] { cursor: pointer; }
button, input, select, textarea { max-width: 100%; }
input:not([type=hidden]):not([type=checkbox]), select, textarea { min-height: 2.75rem; border: 1px solid var(--control); border-radius: .45rem; background: var(--surface); color: var(--ink); padding: .55rem .7rem; min-width: 0; }
input[type=checkbox] { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); vertical-align: middle; margin: .5rem .35rem .5rem 0; }
button, .button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.75rem; border: 1px solid var(--primary); border-radius: .45rem; background: var(--primary); color: #fff; padding: .55rem 1rem; font-weight: 650; text-decoration: none; touch-action: manipulation; }
button:hover, .button:hover { background: var(--primary-hover); }
button:active, .button:active { background: #102560; }
button:disabled, input:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.skip-link { position: absolute; top: .5rem; left: 1rem; z-index: 2; transform: translateY(-200%); padding: .7rem 1rem; background: var(--surface); }
.skip-link:focus { transform: none; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .7rem max(1rem, calc((100% - 72rem) / 2)); background: #172536; }
nav a, nav button.link { color: #e7edf8; min-height: 2.75rem; display: inline-flex; align-items: center; padding: .5rem .8rem; border-radius: .4rem; text-decoration: none; font-weight: 550; }
nav a:hover, nav button.link:hover { background: #2b3e56; }
nav a[aria-current=page] { background: #e7edf8; color: #172536; }
nav :focus-visible { outline-color: #fff; }
nav form { margin-left: auto; }
nav a.brand { gap: .5rem; font-weight: 700; letter-spacing: .01em; color: #fff; margin-right: .5rem; }
nav a.brand:hover { background: transparent; }
nav a.brand img { border-radius: .3rem; }
.login-logo { display: block; height: 28px; width: auto; margin: .5rem 0 .25rem; }
.tagline { margin: 0 0 1rem; color: var(--muted, #5b6676); }
form.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; cursor: pointer; font: inherit; }
main { width: 100%; max-width: 75rem; margin: 0 auto; padding: 1.5rem; min-width: 0; }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); margin: .25rem 0 1.25rem; letter-spacing: -.035em; }
h2 { font-size: 1.3rem; margin: 2rem 0 .8rem; letter-spacing: -.015em; }
h3 { font-size: 1.15rem; margin: 0 0 1rem; }
p { margin: .65rem 0 1rem; }
small, .muted { color: var(--muted); font-size: .9rem; }
strong, td, .metric-value { font-variant-numeric: tabular-nums; }
.status { padding: .8rem max(1rem, calc((100% - 72rem) / 2)); background: var(--surface); border-bottom: 1px solid var(--line); font-size: .9rem; }
.credits { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.banner { padding: .7rem 1rem; font-weight: 600; }
.banner.demo { background: #55218a; color: #fff; text-align: center; font-size: .9rem; }
.banner.warn { background: var(--warning-bg); color: var(--warning); border-left: 3px solid #b47416; margin: .7rem 0 0; }
.badge { display: inline-block; max-width: 100%; padding: .2rem .5rem; border-radius: .3rem; font-size: .8rem; line-height: 1.4; font-weight: 600; background: #e9eef5; color: #34465e; vertical-align: middle; }
.badge.verify { background: var(--danger-bg); color: var(--danger); margin-top: .65rem; padding: .45rem .65rem; }
.badge.flag, .badge.best { background: var(--success-bg); color: var(--success); }
.badge.warn, .badge.unc { background: var(--warning-bg); color: var(--warning); }
.error, .ok, .warnbox { padding: .9rem 1rem; margin: 1rem 0; border: 1px solid; border-radius: .45rem; }
.error { background: var(--danger-bg); border-color: #e2aaa4; color: var(--danger); }
.ok { background: var(--success-bg); border-color: #9acbad; color: var(--success); }
.warnbox { background: var(--warning-bg); border-color: #dabb78; color: var(--warning); }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; margin: .7rem 0 1.5rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--surface); }
table { width: 100%; border-collapse: collapse; margin: 0; background: var(--surface); }
th, td { border-bottom: 1px solid var(--line); padding: .8rem 1rem; text-align: left; font-size: .92rem; vertical-align: top; }
th { background: #f0f4f9; font-weight: 650; color: #34465e; }
tr:last-child > td, tr:last-child > th { border-bottom: 0; }
tr:hover > td { background: #f9fbfe; }
td small { display: inline-block; }
.summary-table th { width: 30%; min-width: 10rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; max-width: 28rem; }
.stack label { display: flex; flex-direction: column; gap: .4rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin: .8rem 0; }
.row > label, #events > label { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 10rem; min-width: 0; }
.row > label:has(input[type=checkbox]) { display: block; }
#events { display: contents; }
#pick-form, #line-form { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); }
#fetched:empty { display: none; }
#fetched > h2 { margin-top: 1.5rem; }
.step-label { display: block; font-size: .8rem; font-weight: 700; color: var(--primary); margin-bottom: .35rem; letter-spacing: .04em; text-transform: uppercase; }
.analysis { margin: 1.25rem 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric { border: 1px solid var(--line); border-radius: .5rem; background: var(--canvas); padding: 1rem; }
.metric p { margin: 0; }
.metric-value { display: block; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.25; letter-spacing: -.035em; margin: .4rem 0; }
.analysis > form { margin-top: 1.25rem; }
details { margin: 1rem 0; }
summary { min-height: 2.75rem; padding: .6rem 0; color: var(--primary); font-weight: 600; }
fieldset { min-width: 0; border: 1px solid var(--line); border-radius: .6rem; margin: 1.5rem 0; padding: 1rem 1.25rem 1.25rem; background: var(--surface); }
legend { font-weight: 650; padding: 0 .5rem; }
code { background: #e9eef5; color: #34465e; border-radius: .2rem; padding: .1rem .25rem; overflow-wrap: anywhere; }
.empty-state { padding: 1rem 1.25rem; border: 1px dashed #b5c1d2; border-radius: .5rem; color: var(--muted); }
.request-status { display: none; color: inherit; margin: .5rem 0 0; }
.htmx-request .request-status, .htmx-request.request-status { display: block; }
.htmx-request button { cursor: progress; }
.select-pick { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 40rem) {
  main { padding: 1.25rem 1rem; }
  nav { padding: .6rem; gap: .25rem; }
  nav a, nav button.link { padding: .5rem .65rem; font-size: .9rem; }
  nav form { margin-left: 0; }
  .row { flex-direction: column; align-items: stretch; }
  .row > label, #events > label { flex: auto; width: 100%; }
  .row > button, #events > button { width: 100%; }
  #pick-form, #line-form, .analysis, fieldset { padding: 1rem; }
  .metric-grid { grid-template-columns: 1fr; gap: .65rem; }
  .metric { padding: .85rem; }
  .summary-table, .summary-table tbody, .summary-table tr, .summary-table th, .summary-table td { display: block; width: 100%; min-width: 0; }
  .summary-table th { border-bottom: 0; padding-bottom: .3rem; }
  .summary-table td { padding-top: .4rem; }
  .data-table { min-width: 38rem; }
  .table-hint { display: block; color: var(--muted); font-size: .85rem; margin-bottom: -.3rem; }
}
@media (min-width: 40.01rem) { .table-hint { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  button, a, input, select { transition: background-color 120ms ease, border-color 120ms ease; }
}