/* Bletchley register: vellum surface, mono throughout, brass as the only accent. */
:root{
  --ground:#FCF8EE; --raised:#F6F0E2; --slate:#DDD4C2; --steel:#B9AE98;
  --ink:#17160F; --ink-dim:#4A4638; --ink-faint:#857D69;
  --brass:#6C5D00; --brass-mid:#8A6E14; --brass-lt:#C9A227; --brass-wash:rgba(201,162,39,.10);
  --warn:#9A4E0E; --signal:rgba(108,93,0,.22);
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --track-label:.19em; --track-mark:.30em;
  --r:3px; --ease:cubic-bezier(.4,0,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#06080C; --raised:#0E131B; --slate:#18202C; --steel:#33404F;
  --ink:#EDE8DC; --ink-dim:#9AA3AE; --ink-faint:#5B6673;
  --brass:#C9A227; --brass-mid:#C9A227; --brass-lt:#E3C55E; --brass-wash:rgba(201,162,39,.10);
  --warn:#E8A33D; --signal:rgba(201,162,39,.16); color-scheme:dark;
}}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:15px/1.7 var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--brass-wash)}

/* signal field */
.signal{position:fixed;inset:0 0 auto 0;height:260px;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(#000 20%,transparent);mask-image:linear-gradient(#000 20%,transparent)}
.signal path{fill:none;stroke:var(--signal);stroke-width:1;vector-effect:non-scaling-stroke}
.signal g{animation:drift 36s linear infinite}
.signal g:nth-child(2n){animation-duration:24s;animation-direction:reverse}
@keyframes drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.signal g{animation:none}}

/* bar */
.bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:16px 24px;background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--slate)}
.mark{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:var(--track-mark);text-transform:uppercase;color:var(--ink)}
.mark svg{width:22px;height:22px}
.bar .host{font-size:11px;color:var(--ink-faint);letter-spacing:.04em}

.wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:88px 24px 80px}

.label{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--brass);margin:0 0 28px}
.label b{font-weight:400;color:var(--ink-faint)}
.label::after{content:"";width:64px;height:1px;background:var(--brass-mid);opacity:.5}

h1{font:400 clamp(28px,5.4vw,40px)/1.18 var(--mono);letter-spacing:-.03em;margin:0 0 24px;text-wrap:balance}
.lede{margin:0;color:var(--ink-dim);max-width:56ch}
.lede em{font-style:normal;color:var(--brass)}

/* step meter */
.meter{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;list-style:none;padding:0;margin:64px 0 0}
.meter li{font-size:10px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint);padding-top:12px;
  border-top:1px solid var(--slate);transition:color var(--slow,.42s) var(--ease),border-color .42s var(--ease)}
.meter li span{color:var(--steel);margin-right:8px}
.meter li.on{color:var(--ink);border-top-color:var(--brass-mid)}
.meter li.on span,.meter li.done span{color:var(--brass)}
.meter li.done{border-top-color:var(--brass-mid);opacity:.6}

/* instrument panel */
form{position:relative;margin-top:28px;padding:44px 40px 36px;background:var(--raised);border:1px solid var(--slate);border-radius:var(--r)}
form::before,form::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--brass-mid);pointer-events:none}
form::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
form::after{bottom:-6px;right:-6px;border-left:0;border-top:0}
.step{position:relative}
.ghost{position:absolute;right:-12px;top:-34px;font-size:150px;line-height:1;letter-spacing:-.06em;color:var(--ink);opacity:.035;pointer-events:none;user-select:none}
.step-title{font-size:20px;font-weight:400;letter-spacing:-.02em;margin:0 0 30px;max-width:30ch}

.field{display:block;margin:0 0 28px;border:0;padding:0;min-width:0}
.field>span,legend{display:block;font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px;padding:0}
.field>span [data-return],legend [data-return]{color:var(--brass)}
.field small{display:block;color:var(--ink-faint);font-size:13px;line-height:1.6;margin:-4px 0 10px}
.field i{font-style:normal;color:var(--ink-faint);letter-spacing:.06em;text-transform:none}
input,textarea{width:100%;font:14px/1.6 var(--mono);color:var(--ink);background:var(--ground);border:1px solid var(--slate);border-radius:var(--r);padding:12px 14px;
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:.75}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--brass-mid);box-shadow:0 0 0 3px var(--brass-wash)}
input[type=datetime-local]{max-width:300px}
.invalid{border-color:var(--warn)}
.count{display:block;font-style:normal;font-size:11px;letter-spacing:.08em;color:var(--ink-faint);text-align:right;margin-top:6px;font-variant-numeric:tabular-nums}

/* classification */
.choice{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;border:1px solid var(--slate);border-radius:var(--r);padding:16px 18px;margin-bottom:8px;cursor:pointer;background:var(--ground);
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.choice:hover{border-color:var(--steel)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .code{font-size:11px;letter-spacing:var(--track-label);color:var(--ink-faint);padding-top:3px;border-right:1px solid var(--slate);height:100%}
.choice b{display:block;font-weight:400;color:var(--ink);font-size:14px;margin-bottom:2px}
.choice .txt{color:var(--ink-faint);font-size:13px;line-height:1.6}
.choice:has(input:checked){border-color:var(--brass-mid);background:var(--brass-wash)}
.choice:has(input:checked) .code{color:var(--brass)}
.choice:has(input:focus-visible){box-shadow:0 0 0 3px var(--brass-wash)}

.aside{border-left:1px solid var(--brass-mid);padding:4px 0 4px 18px;margin:4px 0 28px;font-size:13px;color:var(--ink-dim)}
.aside p{margin:0}

.row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.confirm{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:var(--ink-dim);margin:4px 0 30px;cursor:pointer}
.confirm input{width:14px;height:14px;margin-top:4px;accent-color:var(--brass-mid);flex:none}

.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:24px;border-top:1px solid var(--slate)}
.btn{font:400 11px var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ground);background:var(--ink);border:1px solid var(--ink);border-radius:var(--r);padding:14px 22px;cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease)}
.btn:hover{background:var(--brass);border-color:var(--brass)}
.btn::after{content:"  →"}
.btn.ghost{background:transparent;color:var(--ink-dim);border-color:var(--slate)}
.btn.ghost::after{content:none}
.btn.ghost::before{content:"←  "}
.btn.ghost:hover{color:var(--ink);border-color:var(--steel);background:transparent}
.btn:disabled{opacity:.6;cursor:wait}
.err{color:var(--warn);margin:18px 0 0;font-size:13px}
.err::before{content:"— "}
.hp{position:absolute;left:-9999px}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;font-size:11px;letter-spacing:.08em;color:var(--ink-faint)}
.foot [data-return]{color:var(--brass)}

/* received */
.receipt{margin-top:56px;border-top:1px solid var(--slate)}
.receipt div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--slate);font-size:12px;letter-spacing:.08em}
.receipt dt{color:var(--ink-faint);text-transform:uppercase;letter-spacing:var(--track-label);font-size:11px}
.receipt dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

@media (max-width:600px){
  .wrap{padding:56px 16px 64px}
  .bar{padding:14px 16px}
  .bar .host{display:none}
  form{padding:32px 20px 24px}
  .row{grid-template-columns:1fr}
  .ghost{font-size:110px;right:-4px;top:-26px}
  .meter li{font-size:9px;letter-spacing:.12em}
  .choice{grid-template-columns:34px 1fr;gap:12px;padding:14px}
}