/* SAINT. Black and white, Bauhaus, a visible column grid and framed cells.
   Type: Tiny5 (pixel display: heavy for headings, round for dot-matrix figures), Departure Mono (labels, data, buttons;
   set at its native 11 / 22 px), Geist Mono (reading). Colour is green and red only, and only for money and status. */
@font-face{font-family:"Departure Mono";src:url(/static/DepartureMono-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Tiny5";src:url(/static/Tiny5.woff2) format("woff2");font-weight:100 900;font-stretch:50% 200%;font-display:swap}
:root,:root[data-theme="light"]{
  color-scheme:light;
  --page:#e4e4e2;--panel:#f3f3f1;--raised:#ebebe9;--hover:#dededb;--line:#c3c3bf;--line2:#9c9c98;
  --ink:#0f0f0f;--ink2:#474745;--muted:#83837f;--up:#17924c;--down:#dc3a2e;--warn:#b57b12;--inv:#f3f3f1;--mark:url(/static/ket-mark-light.png);--acc:#e1ff17;--acc-edge:#0f0f0f;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#000;--panel:#101010;--raised:#181818;--hover:#222;--line:#2c2c2c;--line2:#4a4a4a;
    --ink:#f2f2ef;--ink2:#b3b3af;--muted:#7a7a76;--up:#36c46f;--down:#ff5544;--warn:#e3a33a;--inv:#101010;--mark:url(/static/ket-mark-dark.png);--acc:#e1ff17;--acc-edge:#e1ff17;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#000;--panel:#101010;--raised:#181818;--hover:#222;--line:#2c2c2c;--line2:#4a4a4a;
  --ink:#f2f2ef;--ink2:#b3b3af;--muted:#7a7a76;--up:#36c46f;--down:#ff5544;--warn:#e3a33a;--inv:#101010;--mark:url(/static/ket-mark-dark.png);--acc:#e1ff17;--acc-edge:#e1ff17;
}
:root{--px:"Departure Mono",ui-monospace,Menlo,monospace;--body:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Tiny5","Departure Mono",ui-monospace,monospace;--col:1180px}
*{box-sizing:border-box;border-radius:0!important}
html{background:var(--page)}
body{margin:0;color:var(--ink);font:13.5px/1.6 var(--body);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;position:relative;min-height:100vh}
/* the column grid behind every page */
/* the column grid behind every page: dashed rules on the quarters, like a layout sheet */
body::before{content:"";position:fixed;inset:0 max(0px,calc((100vw - var(--col)) / 2));z-index:-1;pointer-events:none;
  --d:repeating-linear-gradient(to bottom,var(--line2) 0 3px,transparent 3px 7px);
  background:var(--d) 0 0/1px 100% no-repeat,var(--d) 25% 0/1px 100% no-repeat,var(--d) 50% 0/1px 100% no-repeat,var(--d) 75% 0/1px 100% no-repeat,var(--d) 100% 0/1px 100% no-repeat;opacity:.7}
/* paper grain (light mode only) */
html{background-image:var(--grain,none)}
::selection{background:var(--acc);color:#0f0f0f}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{max-width:var(--col);margin:0 auto;padding:0 0 40px}
.narrow{max-width:780px}
.wrap.narrow{padding-left:16px;padding-right:16px}

/* header: one framed bar split into cells: brand | nav | tools */
.top{display:flex;align-items:stretch;min-height:56px;margin:14px 0 0;background:var(--panel);border:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;padding:0 18px 0 14px;border-right:1px solid var(--line);font:700 20px/1 var(--disp);font-stretch:125%;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.brand svg{display:none}
.logo{width:34px;height:34px;flex:none;background:var(--mark) center/contain no-repeat}
.nav{display:flex;align-items:stretch;margin-right:auto}
.nav a{display:flex;align-items:center;padding:0 18px;font:11px/1 var(--px);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--ink2);border-right:1px solid var(--line);position:relative}
.nav a:hover{color:var(--ink);background:var(--raised)}
.nav a.on{color:var(--ink)}
.nav a.on{background:var(--acc);color:#0f0f0f}
.nav a.on::before,.nav a.on::after{content:"";position:absolute;width:6px;height:6px;border:solid #0f0f0f}
.nav a.on::before{left:7px;top:calc(50% - 11px);border-width:1px 0 0 1px}.nav a.on::after{right:7px;bottom:calc(50% - 11px);border-width:0 1px 1px 0}
.tools{display:flex;align-items:center;gap:8px;padding:0 12px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--line);color:var(--ink2);font:11px/1.2 var(--px);text-transform:uppercase;white-space:nowrap}
.dot{width:7px;height:7px;background:var(--up);flex:none}.dot.idle{background:var(--warn)}.dot.off{background:var(--down)}
.dither{height:15px;margin:0;border:1px solid var(--line);border-top:0;background-color:var(--panel);background-repeat:repeat-y;image-rendering:pixelated}
@media (max-width:620px){.top{min-height:50px}.brand{font-size:16px;padding:0 12px}.nav a{padding:0 12px}.tools{width:100%;border-top:1px solid var(--line);padding:8px 12px}}

/* status strip (signed-in pages): what the bot is doing + the control that changes it */
.status{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 14px;background:var(--panel);border:1px solid var(--line);margin:0}
.status .state{font:11px/1 var(--px);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.status .meta{font:11px/1.4 var(--px);color:var(--muted)}

/* cells */
.card{background:var(--panel);border:1px solid var(--line);padding:18px 20px;position:relative}
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid>*{min-width:0;background:var(--panel)}
.grid>.card{border:0}
.card .grid{gap:24px;background:none;border:0}
.card .grid>*{background:none}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.g2,.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.g2,.g3{grid-template-columns:1fr}.card{padding:16px}}

h1{font:700 44px/1 var(--disp);font-stretch:110%;letter-spacing:.01em;text-transform:uppercase;margin:22px 0 10px}
h2{font:11px/1.3 var(--px);text-transform:uppercase;letter-spacing:.07em;margin:0 0 14px;display:flex;align-items:center;gap:8px}
h2::before{content:"";width:6px;height:6px;background:var(--ink);flex:none}
/* sub-heading inside a cell: a ruled label, one level under h2 */
h3{font:11px/1.3 var(--px);text-transform:uppercase;letter-spacing:.07em;color:var(--ink2);margin:20px 0 10px;padding-top:14px;border-top:1px dashed var(--line);display:flex;gap:8px;font-weight:400}
h3::before{content:"//";color:var(--muted)}
.card>h3:first-child,.how h3,.plain h3{border-top:0;padding-top:0}
.plain h3::before,.how h3::before{content:none}
p{margin:0 0 10px}
.sub{color:var(--ink2)}.muted{color:var(--muted)}.small{font-size:12.5px}
.k{color:var(--muted);font:11px/1.45 var(--px)}
.v{font:22px/1.25 var(--px);margin:4px 0 2px;letter-spacing:-.01em}
.up{color:var(--up)}.down{color:var(--down)}.warn{color:var(--warn)}
.tag{display:inline-block;font:11px/1 var(--px);text-transform:uppercase;border:1px solid var(--line2);padding:3px 5px;color:var(--ink2);vertical-align:1px;white-space:nowrap}
.tag.ink{background:var(--ink);color:var(--inv);border-color:var(--ink)}
.tag.acc{background:var(--acc);color:#0f0f0f;border-color:var(--acc-edge)}
.tag.up{color:var(--up);border-color:var(--up)}.tag.down{color:var(--down);border-color:var(--down)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid var(--ink);background:transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;color:var(--ink);font:11px/1.2 var(--px);text-transform:uppercase;letter-spacing:.05em}
.btn:hover{background:var(--ink);color:var(--inv)}
.btn.primary{background:var(--acc);color:#0f0f0f;border-color:var(--acc-edge)}
.btn.primary:hover{background:var(--ink);color:var(--inv);border-color:var(--ink)}
.btn.danger{color:var(--down);border-color:var(--down)}
.btn.danger:hover{background:var(--down);color:#fff}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;color:var(--ink)}
.btn.primary[disabled]:hover{background:var(--acc);color:#0f0f0f;border-color:var(--acc-edge)}
.btn.sm{padding:6px 9px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp{flex:1}

table{width:100%;border-collapse:collapse;font:11px/1.45 var(--px)}
th{color:var(--muted);font-weight:400;text-align:left;padding:7px 8px;border-bottom:1px solid var(--ink);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
td.r,th.r{text-align:right}
.tw{overflow-x:auto}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;text-align:left;font:12.5px/1.45 var(--body)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--inv);border-color:var(--ink)}
.chip .meta{font:11px/1.45 var(--px);opacity:.75}
.chip.closed{opacity:.4;cursor:not-allowed}
.seg{display:inline-flex;border:1px solid var(--ink);max-width:100%;overflow-x:auto}
.seg button{border:0;background:transparent;padding:7px 11px;cursor:pointer;font:11px/1.2 var(--px)}
.seg button+button{border-left:1px solid var(--line2)}
.seg button:hover{background:var(--hover)}
.seg button.on{background:var(--ink);color:var(--inv)}
/* on/off switches (both can be on): ticked boxes, not a pick-one segment */
.checks{display:inline-flex;gap:8px;flex-wrap:wrap}
.checks button{border:1px solid var(--line2);background:transparent;padding:6px 10px 6px 8px;cursor:pointer;font:11px/1.2 var(--px);display:inline-flex;align-items:center;gap:8px}
.checks button::before{content:"";width:10px;height:10px;border:1px solid var(--ink)}
.checks button.on{border-color:var(--ink)}
.checks button.on::before{background:var(--ink);box-shadow:inset 0 0 0 2px var(--panel)}

.field,input.field,select.field{padding:9px 11px;border:1px solid var(--line2);background:var(--page)}
select.field{font:11px/1.2 var(--px);padding:8px 10px}
.field:focus{border-color:var(--ink);outline:0}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}
.note{font-size:12.5px;color:var(--ink2);background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--ink);padding:10px 12px;margin:10px 0}
.err{color:var(--down);font-size:12.5px;min-height:1em;margin-top:8px}
.ok{color:var(--up)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(16px);opacity:0;background:var(--ink);color:var(--inv);
  padding:10px 16px;transition:.18s;pointer-events:none;max-width:90vw;z-index:9;font:11px/1.4 var(--px);text-transform:uppercase}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
code,.mono{font:11px/1.4 var(--px)}
.addr{font:11px/1.4 var(--px);word-break:break-all;color:var(--ink2)}
.banner{background:var(--panel);border:1px solid var(--ink);border-left-width:4px;padding:11px 14px;margin:0 0 12px}

/* decoration: bitmap, barcode, ASCII, dot-matrix figures */
.ascii{font:11px/1 var(--px);white-space:pre;overflow:hidden;margin:0;color:var(--ink2);user-select:none}
.barcode{height:26px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 3px,var(--ink) 3px 6px,transparent 6px 7px,var(--ink) 7px 8px,transparent 8px 11px,var(--ink) 11px 13px,transparent 13px 14px,var(--ink) 14px 15px,transparent 15px 18px)}
.dots{font-family:var(--disp);font-weight:900;font-variation-settings:"ROND" 100;letter-spacing:.04em}
.foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding:12px 14px;border:1px solid var(--line);background:var(--panel);font:11px/1.4 var(--px);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.foot .barcode{width:126px;height:18px;flex:none}
.foot a{color:var(--ink2)}
.foot .spaced{letter-spacing:.5em;color:var(--ink2)}
.empty{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:12.5px;padding:4px 0}
.empty .ascii{color:var(--line2);line-height:1.05;flex:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.labgrid>*{min-width:0}
@media (max-width:1212px){.wrap:not(.narrow){padding-left:16px;padding-right:16px}body::before{inset:0 16px}}
@media (max-width:520px){.seg button{padding:7px 9px}.form .k,.setrow .k{min-width:84px}h1{font-size:33px}}
.kpis:empty{display:none}

/* one sheet: every section after the header shares its top rule with the one above */
.wrap>:is(.dither,.status,#banner,.card,.grid,.labgrid,.acct,.foot,.hero,.facts,.how,.pass,.signin,.steps,#view_in,#view_wait)+:is(.status,#banner,.card,.grid,.labgrid,.acct,.foot,.hero,.facts,.how,.pass,.signin,#view_in){margin-top:-1px!important}
#banner .banner{margin:-1px 0 0}
#res>*+*,#out>*+*{margin-top:-1px!important}
.acct{margin:0;padding:12px 20px;background:var(--panel);border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.foot{margin-top:-1px}
/* registration marks: a crossed box on the sheet edge, as on a print proof */
.xbox{position:absolute;width:24px;height:24px;border:1px solid var(--line2);background:linear-gradient(45deg,transparent calc(50% - .5px),var(--line2) 50%,transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),var(--line2) 50%,transparent calc(50% + .5px)),var(--page);z-index:1}
@media (max-width:1240px){.xbox{display:none}}
/* pixel noise squares (generated) */
.noisebox{image-rendering:pixelated;background:var(--panel)}
.arrows{font:11px/1 var(--px);letter-spacing:-.05em;color:var(--ink)}

/* telemetry: key: value runs, as on an instrument label */
.tele{display:flex;flex-wrap:wrap;gap:6px 22px;font:11px/1.4 var(--px);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tele b{font-weight:400;color:var(--ink)}
.spaced-k{letter-spacing:.42em;text-transform:uppercase;font:11px/1 var(--px)}
.meta-col{font:11px/1.45 var(--px);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:right}
.meta-col b{font-weight:400;color:var(--ink2)}
/* dot fields: one dot per thing, with crop marks */
.dotfield{position:relative;padding:14px}
.dotfield::before,.dotfield::after{content:"+"}
.dotfield::before,.dotfield::after,.dotfield>.cm1,.dotfield>.cm2{position:absolute;font:14px/1 var(--px);color:var(--ink)}
.dotfield::before{left:-2px;top:-4px}.dotfield::after{right:-2px;top:-4px}.dotfield>.cm1{left:-2px;bottom:-4px}.dotfield>.cm2{right:-2px;bottom:-4px}
.dots-g{display:grid;gap:9px}
.dots-g i{width:7px;height:7px;border-radius:50%!important;background:var(--ink);display:block;justify-self:center}
.dots-g i.o{background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}
.dots-g i.w{background:var(--up)}.dots-g i.l{background:var(--down)}.dots-g i.e{background:var(--line2)}
.dots-g i.cap{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--acc),0 0 0 6px var(--acc-edge)}
.dots-g i.hit{background:var(--down)}
.legend-l{display:grid;gap:9px;font:11px/1.3 var(--px);text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.legend-l div{display:flex;align-items:center;gap:14px;justify-content:space-between}
.legend-l s{display:inline-block;width:26px;height:2px;background:var(--ink);text-decoration:none}
.legend-l s.l{background:var(--down)}.legend-l s.w{background:var(--up)}.legend-l s.e{background:var(--line2)}.legend-l s.a{background:var(--acc);height:4px;outline:1px solid var(--acc-edge)}
.vtext{writing-mode:vertical-rl;font:11px/1.4 var(--px);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.icons{display:flex;gap:14px;align-items:center;color:var(--ink)}
.icons svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4}
.pt{font:11px/1 var(--px);letter-spacing:.06em;text-transform:uppercase}