:root{
  /* The red default: red banner, white page, black text. Every page reads these
     tokens, so a theme change is a config change rather than a CSS edit. */
  --banner:#B3121B; --banner-ink:#FFFFFF;
  --bg:#FFFFFF; --panel:#F5F5F5; --plate:#EDEDED; --ink:#000000; --ink-soft:#3D3D3D;
  --ink-faint:#6E6E6E; --line:#D6D6D6; --line-hard:#A8A8A8; --signal:#B3121B;
  --signal-ink:#FFF; --patina:#1F6B4A; --oxide:#B3121B;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
:root.legacy-steel{
  --banner:#F3F4F1; --banner-ink:#141B21;
  --bg:#E6E8E4; --panel:#F3F4F1; --plate:#DADCD6; --ink:#141B21; --ink-soft:#4A565F;
  --ink-faint:#7C878F; --line:#C3C7C0; --line-hard:#9BA29A; --signal:#C67A0C;
  --signal-ink:#FFF; --patina:#2A6F60; --oxide:#A8412B;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#11171C; --panel:#1A2229; --plate:#222B33; --ink:#E8ECEA; --ink-soft:#A6B2B9;
  --ink-faint:#74838C; --line:#2E3942; --line-hard:#41505A; --signal:#E8A32C;
  --signal-ink:#14191C; --patina:#4FB79F; --oxide:#E0705A;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
[hidden]{display:none !important}
a{color:var(--signal)}
header{flex:0 0 auto;display:flex;align-items:center;gap:.7rem;
  background:var(--banner,var(--panel));color:var(--banner-ink,var(--ink));
  border-bottom:1px solid var(--line);padding:.6rem 1rem}
header .btn{color:inherit;border-color:currentColor}
header a{color:inherit}
.mark{width:15px;height:15px;border-radius:2px;background:var(--signal);flex:0 0 auto}
h1{font-size:1rem;margin:0;font-weight:600;letter-spacing:-.015em}
.spacer{flex:1 1 auto}
.btn{padding:.45rem .8rem;border-radius:5px;border:1px solid var(--line-hard);
  background:var(--bg);font-size:.85rem}
.btn.primary{background:var(--signal);color:var(--signal-ink);border-color:var(--signal);font-weight:600}
.btn.danger{color:var(--oxide);border-color:var(--oxide)}
.btn[disabled]{opacity:.45;cursor:default}
.tiny{padding:.25rem .5rem;border-radius:4px;border:1px solid var(--line);font-size:.75rem;color:var(--ink-soft)}
.tiny.danger{color:var(--oxide);border-color:var(--oxide)}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:.5rem .6rem;width:100%}
label.f{display:block;font-size:.78rem;color:var(--ink-soft);margin-bottom:.2rem}
.msg{font-size:.85rem;line-height:1.45;padding:.55rem .7rem;border-radius:5px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);margin:.6rem 0}
.msg.ok{border-color:var(--patina);color:var(--patina)}
.msg.bad{border-color:var(--oxide);color:var(--oxide)}
.msg.work{border-color:var(--signal);color:var(--ink)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1rem;margin-bottom:1rem}
.card h2{font-size:.95rem;margin:0 0 .3rem}
.hint{font-size:.83rem;color:var(--ink-soft);margin:0 0 .8rem;max-width:70ch;line-height:1.5}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;font-weight:600;color:var(--ink-soft);font-size:.74rem;padding:.4rem .5rem;
  border-bottom:1px solid var(--line-hard);white-space:nowrap;position:sticky;top:0;background:var(--panel);z-index:2}
th.sortable{cursor:pointer}
th .dir{color:var(--signal)}
td{padding:.35rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even){background:rgba(127,127,127,.05)}
.pill{display:inline-block;padding:.1rem .45rem;border-radius:99px;font-size:.7rem;
  border:1px solid var(--line-hard);color:var(--ink-soft)}
.pill.edit{border-color:var(--signal);color:var(--signal)}
.pill.admin{border-color:var(--oxide);color:var(--oxide)}
.pill.pending{border-color:var(--signal);color:var(--signal)}