:root {
  color-scheme: light;
  font: 16px/1.5 'Inter', system-ui, sans-serif;
  color: #172d3d;
  background: #eff3f6;
  --border: #c6d2dc;
  --navy: #112c41;
  --teal: #006553;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.shell { width: min(100% - 2rem, 1120px); margin-inline: auto; }
header { color: #fff; background: var(--navy); }
.brand { display: flex; align-items: center; gap: .9rem; padding-block: 1.25rem; }
.brand strong { display: block; font-size: 1.3rem; }
.brand div span { color: #d6e3eb; font-size: .875rem; }
.brand-mark { border-radius: .65rem; background: #b9f3dd; color: #083e35; padding: .25rem .65rem; font-weight: bold; }
nav { display: flex; gap: .25rem; }
nav a { color: #fff; text-decoration: none; padding: .65rem 1rem; border-bottom: 4px solid transparent; }
nav a[aria-current] { border-color: #8de4c4; background: #244359; font-weight: 700; }
main { padding-bottom: 3rem; }
h1 { margin: .5rem 0 0; line-height: 1.15; font-size: clamp(1.7rem, 4vw, 2.45rem); }
.subtitle { margin: .5rem 0 1.4rem; color: #435d70; }
.workspace { display: grid; grid-template-columns: minmax(235px, 1fr) minmax(0, 2.35fr); gap: 1rem; align-items: start; }
.panel, #metrics > div { background: #fff; padding: 1.25rem; border: 1px solid var(--border); border-radius: .8rem; min-width: 0; }
h2, h3, h4 { margin: 0 0 .55rem; line-height: 1.25; }
h2 { font-size: 1.3rem; }
#queue { padding: 0; margin: 0; list-style: none; }
#queue li + li { margin-top: .5rem; }
#queue button { display: block; width: 100%; color: var(--navy); background: #f4f7fa; text-align: left; border-color: var(--border); }
#queue button[aria-pressed="true"] { background: #dcf5eb; border-color: var(--teal); }
#queue span { display: block; color: #344e60; font-size: .85rem; font-weight: 500; }
.eyebrow { color: var(--teal); font-weight: 700; margin: 0 0 .4rem; }
.actions { margin-top: 1.4rem; padding-top: 1.15rem; border-top: 1px solid var(--border); }
.action { background: #f7f9fb; border: 1px solid var(--border); border-radius: .6rem; margin-bottom: .85rem; padding: .9rem; overflow-wrap: anywhere; }
.action p { margin: .25rem 0 .65rem; }
.state { color: var(--teal); font-weight: 700; }
label { display: block; font-weight: 650; margin-bottom: .65rem; }
input, textarea, select { display: block; width: 100%; padding: .45rem .6rem; margin-top: .25rem; border: 1px solid #7d94a5; border-radius: .4rem; color: inherit; background: #fff; font: inherit; min-height: 2.65rem; }
textarea { resize: vertical; }
button { border: 1px solid transparent; border-radius: .45rem; background: var(--teal); color: #fff; padding: .55rem .85rem; min-height: 2.65rem; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { filter: brightness(.93); }
.controls { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; }
.controls label { margin-bottom: 0; min-width: min(100%, 10rem); }
[data-form="plan"] > .controls { margin-bottom: .65rem; }
:focus-visible { outline: 3px solid #0869b3; outline-offset: 3px; }
header :focus-visible { outline-color: #a9dcff; }
#feedback, #error { margin: .6rem 0; font-weight: 650; }
#feedback { color: #005345; }
#error { color: #a3202a; }
#metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
dd { margin: .25rem 0 0; font-size: 2rem; font-weight: 750; }
.skip { position: absolute; top: 0; left: .5rem; background: #fff; color: #112c41; padding: .5rem; transform: translateY(-150%); z-index: 1; }
.skip:focus { transform: translateY(0); }
@media (max-width: 700px) { .workspace { grid-template-columns: 1fr; } }

.product-header { background: #06261e; }
.product-logo { display: block; width: clamp(8.5rem, 27vw, 11.5rem); height: auto; }
.product-header .brand { padding-block: .85rem; }