/* SB Stack admin.
   Its own look: warm paper background, flat white panels with hairline rules, square corners,
   Archivo for headings and numbers, monospace for system details, ink for the active state.
   Colour appears only as small squares beside a label; never as coloured lines or rounded pills. */
@font-face{font-family:"Archivo";src:url(/fonts/archivo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo";src:url(/fonts/archivo-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --paper:#F5F4F0; --panel:#FFFFFF; --panel-2:#FAF9F6; --ink:#121317; --ink-2:#3B3E46; --muted:#757884;
  --rule:#E3E1DA; --rule-2:#D3D0C7; --brand:#2563EB; --brand-soft:#EAF0FD;
  --up:#1F9D55; --warn:#C27A0E; --down:#D33A2C; --idle:#9A9CA5;
  --display:"Archivo",system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:5px;
}
:root[data-theme="dark"]{
  --paper:#0E0F12; --panel:#16181D; --panel-2:#1B1D23; --ink:#EDEBE6; --ink-2:#C2C0BA; --muted:#8C8E96;
  --rule:#272A31; --rule-2:#343841; --brand:#6E9BFF; --brand-soft:#1A2440; --idle:#6B6E77;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,select,input,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font:800 26px/1.15 var(--display);letter-spacing:-.025em;margin:0}
h2{font:700 15px/1.3 var(--display);margin:0;letter-spacing:-.005em}
h3,.label-mono{font:600 12.5px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);margin:0 0 10px}
code{font:12px/1.4 var(--mono);background:var(--panel-2);border:1px solid var(--rule);border-radius:3px;padding:1px 5px;word-break:break-all}
p{margin:0 0 8px}
.sub,.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.mono{font-family:var(--mono);font-size:12px}
.hidden{display:none!important}
.boot{padding:80px 20px;text-align:center;color:var(--muted);font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif}
.mt{margin-top:16px}
.right{text-align:right}
.row-gap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}

/* ── sign-in ─────────────────────────────────────────────── */
.gate-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.gate-side{background:var(--gate-panel,#121317);color:var(--gate-panel-ink,#F5F4F0);display:flex;flex-direction:column;justify-content:space-between;padding:36px 40px;background-image:linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),rgba(255,255,255,.05) 0),linear-gradient(0deg,transparent 0,transparent calc(100% - 1px),rgba(255,255,255,.05) 0);background-size:48px 48px}
.gate-brand{display:flex;align-items:center;gap:12px;font:800 18px var(--display);letter-spacing:-.02em}
.logo-mark.inv{background:var(--gate-panel-ink,#F5F4F0);color:var(--gate-panel,#121317)}
.gate-logo{max-height:34px;max-width:170px;width:auto;display:block}
.gate-tag p{font:800 34px/1.12 var(--display);letter-spacing:-.03em;max-width:15ch;margin:10px 0 0}
.gate-side .label-mono{color:var(--gate-panel-muted,rgba(245,244,240,.55))}
.gate-foot{margin:0}
.gate-note{display:block;margin-top:14px;font-size:13px;color:rgba(245,244,240,.6)}
.gate{align-self:center;justify-self:center;width:min(400px,100% - 32px);padding:32px 0}

.gate h1{font-size:30px}
.gate .sub{margin-top:8px}
.gate-form{display:grid;gap:14px;margin:26px 0 8px}
.gate-field{display:grid;gap:6px}
.gate-field label{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
.gate-field input{width:100%;padding:11px 12px;font-size:15px}
.gate-submit{width:100%;justify-content:center;padding:11px;font-size:15px}
.gate-links{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-top:12px}
.gate-msg{padding:8px 12px;font-size:13px;margin-top:14px;background:var(--panel);border:1px solid var(--rule)}
.gate-msg::before,.form-error::before{content:"";display:inline-block;width:8px;height:8px;border-radius:1px;background:var(--down);margin-right:8px;vertical-align:1px}
.gate-msg.ok{border-left-color:var(--up)}
.gate .btn[data-role]{display:grid;justify-items:start;text-align:left;gap:2px;padding:12px 14px;white-space:normal}
.qr{margin:16px 0}
.qr img{width:176px;height:176px;image-rendering:pixelated;border:1px solid var(--rule);background:#fff;padding:6px}
.secret{font:13px/1.5 var(--mono);background:var(--panel);border:1px dashed var(--rule-2);padding:10px;word-break:break-all;user-select:all}
@media (max-width:860px){.gate-page{grid-template-columns:1fr}.gate-side{display:none}}

/* ── top bar ─────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:1px solid var(--rule)}
.top-in{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 24px;height:58px}
.logo{display:flex;align-items:center;gap:11px;color:var(--ink);white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .word{font:800 16px var(--display);letter-spacing:-.02em}
.logo-mark{width:30px;height:30px;border-radius:4px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:800 12px var(--display);letter-spacing:.02em;flex:none}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink-2);padding:7px 12px;border-radius:4px;white-space:nowrap;font:700 13.5px var(--display);letter-spacing:-.005em}
.nav a:hover{color:var(--ink);background:var(--panel-2);text-decoration:none}
.nav a.on{background:var(--ink);color:var(--paper)}
.nav-dd{display:flex}
.nav-dd .caret{font-size:9px;margin-left:3px;opacity:.6}
.nav-menu{display:none;position:fixed;z-index:40;min-width:210px;background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);padding:6px;box-shadow:0 10px 30px rgba(18,19,23,.12)}
.nav-dd.open .nav-menu{display:block}
.nav-menu a{display:block;padding:8px 10px;border-radius:3px;color:var(--ink-2);font:500 13.5px system-ui,sans-serif;letter-spacing:0;background:none}
.nav-menu a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.env-pill{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;padding:4px 8px;background:var(--warn);color:#fff;border-radius:3px}
.userbtn{background:none;border:1px solid var(--rule);color:var(--ink);border-radius:4px;padding:4px 10px 4px 4px;display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}
.userbtn:hover{border-color:var(--rule-2)}
.avatar{width:24px;height:24px;border-radius:3px;background:var(--brand);display:grid;place-items:center;font:800 10.5px var(--display);color:#fff}
.menu{position:absolute;right:24px;top:58px;background:var(--panel);border:1px solid var(--rule-2);border-radius:var(--r);box-shadow:0 10px 30px rgba(18,19,23,.14);min-width:250px;padding:6px;z-index:40}
.menu .who{padding:8px 10px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.menu a,.menu button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:3px;background:none;border:0;cursor:pointer;color:var(--ink)}
.menu a:hover,.menu button:hover{background:var(--panel-2);text-decoration:none}

main{max-width:1360px;margin:0 auto;padding:30px 24px 90px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.head .sub{margin:6px 0 0}
.crumbs{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);margin-bottom:8px}

/* ── controls ────────────────────────────────────────────── */
.btn{border:1px solid var(--rule-2);background:var(--panel);padding:7px 13px;border-radius:4px;cursor:pointer;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--ink)}
.btn:hover{border-color:var(--ink);text-decoration:none}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
/* On the sign-in page the one button is the client's, in the client's colour. Scoped to the
   gate so a brand colour never restyles the whole admin. */
.is-gate .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.danger{color:var(--down)}
.btn.danger:hover{border-color:var(--down)}
.btn.ghost{border-color:transparent;background:none}
.btn.sm{padding:4px 9px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
select,input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],textarea{border:1px solid var(--rule-2);background:var(--panel);border-radius:4px;padding:8px 10px;max-width:100%;color:var(--ink)}
textarea{width:100%;min-height:96px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}

/* ── panels ──────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.card-b{padding:18px}
.card + .card{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid > .card + .card,.conn > .card + .card{margin-top:0}
.empty{padding:34px 18px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);font:700 16px var(--display);margin-bottom:6px}
.banner{display:flex;gap:12px;align-items:baseline;padding:12px 16px;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:18px;flex-wrap:wrap}
.banner.warn{background:var(--panel)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:1px solid var(--rule);border-radius:var(--r);background:var(--panel);margin-bottom:18px}
.kpis .kpi{border:0;border-radius:0;border-right:1px solid var(--rule)}
.kpis .kpi:last-child{border-right:0}
.kpi{padding:16px 18px}
.kpi .l{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
.kpi .v{font:800 30px/1.1 var(--display);letter-spacing:-.03em;margin-top:8px;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--muted);margin-top:4px}
.link-card{display:block;padding:18px;color:var(--ink);position:relative}
.link-card::after{content:"→";position:absolute;right:18px;top:16px;font:700 16px var(--display);color:var(--muted)}
.link-card:hover{text-decoration:none;border-color:var(--ink)}
.link-card:hover::after{color:var(--ink)}
.link-card b{font:700 16px var(--display);display:block;margin-bottom:6px}

/* segmented filter */
.chips{display:inline-flex;border:1px solid var(--rule-2);border-radius:4px;overflow:hidden}
.chip{border:0;border-right:1px solid var(--rule-2);background:var(--panel);padding:6px 11px;font-size:12px;cursor:pointer;font-weight:600;color:var(--ink-2)}
.chip:last-child{border-right:0}
.chip.on{background:var(--ink);color:var(--paper)}

/* tables */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse}
.t th{text-align:left;font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);padding:10px 18px;border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--panel-2)}
.t td{padding:12px 18px;border-bottom:1px solid var(--rule);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t tr:hover td{background:var(--panel-2)}
.primary-cell{font-weight:600}
.second{color:var(--muted);font-size:12px}
td.second,.t .second.mono{font-family:var(--mono);font-size:11.5px}

/* status: a coloured square and a word */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--ink-2)}
.pill i{width:8px;height:8px;border-radius:1px;background:var(--idle);flex:none}
.p-up i{background:var(--up)} .p-warn i{background:var(--warn)} .p-down i{background:var(--down)} .p-brand i{background:var(--brand)} .p-ink i{background:var(--ink)}
.sq{display:inline-block;width:9px;height:9px;border-radius:1px;margin-right:7px;vertical-align:baseline;background:var(--idle);flex:none}
.sq.up{background:var(--up)} .sq.warn{background:var(--warn)} .sq.down{background:var(--down)}

/* left sub-menu inside an area */
.set-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.subnav{display:grid;gap:1px;position:sticky;top:84px}
.subnav a{padding:8px 12px;border-radius:3px;color:var(--ink-2);font-weight:500}
.subnav a.on{background:var(--ink);color:var(--paper)}
.subnav a:hover{text-decoration:none;background:var(--panel)}
.subnav a.on:hover{background:var(--ink)}
.subnav .label{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted);padding:0 12px 8px}

/* forms */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field.full{grid-column:1/-1}
.field > label{font:600 12.5px system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
.field input,.field select,.field textarea{width:100%}
.field .help{font-size:12px;color:var(--muted)}
.form-error{color:var(--ink);font-size:13px;margin-bottom:10px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:9px 14px;font-size:13.5px;margin:0}
.kv dt{font:600 12.5px/1.9 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--muted)}
.kv dd{margin:0;min-width:0;word-wrap:break-word}
.switch{position:relative;width:34px;height:18px;flex:none;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--rule-2);border-radius:3px;cursor:pointer;transition:.15s}
.switch span:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:2px;transition:.15s}
.switch input:checked + span{background:var(--ink)}
.switch input:checked + span:before{transform:translateX(16px)}
.conn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.conn .c{border:1px solid var(--rule);border-radius:var(--r);padding:18px;display:grid;gap:12px;align-content:start;background:var(--panel)}
.conn .c > .row-gap b{font:700 15px var(--display)}
.conn .c p{margin:0}
.conn .c .btn,.keybox .btn{justify-self:start}
.keybox{border-top:1px solid var(--rule);padding-top:12px;display:grid;gap:8px}

/* modal */
.modal-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(18,19,23,.45)}
.modal{background:var(--panel);border-radius:var(--r);width:min(540px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;border:1px solid var(--rule-2);box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-b{padding:18px 20px;overflow:auto}
.modal-f{padding:12px 20px;border-top:1px solid var(--rule);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;background:var(--panel-2)}
.x{background:none;border:0;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;padding:0 4px}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:4px;opacity:0;transition:.2s;z-index:90;font-size:13px;max-width:calc(100% - 32px);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--down);color:#fff}

@media (max-width:1100px){.g3{grid-template-columns:1fr 1fr}.conn{grid-template-columns:1fr}}
@media (max-width:760px){
  .top-in{padding:0 14px;gap:12px}
  .logo .word,.userbtn .uname{display:none}
  main{padding:20px 16px 80px}
  .g2,.g3,.form,.set-wrap{grid-template-columns:1fr}
  .subnav{position:static;display:flex;overflow-x:auto}
  .subnav .label{display:none}
  .t th,.t td{padding:10px 12px}
  .hide-sm{display:none}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-bottom:8px}
  .kpis .kpi{border-right:0;border-bottom:1px solid var(--rule)}
}
/* Busy bars: a square bar sliding under anything that's waiting on AWS, so nothing ever looks frozen. */
.boot.busy::after,.gate-form:has(.gate-submit:disabled)::after{content:"";display:block;height:4px;margin:14px auto 0;max-width:220px;border-radius:1px;
  background:linear-gradient(90deg,transparent 0,var(--ink) 0) no-repeat,var(--rule);background-size:35% 100%,100% 100%;animation:busy 1.1s ease-in-out infinite}
.gate-form:has(.gate-submit:disabled)::after{max-width:none;margin-top:12px}
@keyframes busy{0%{background-position:-40% 0,0 0}100%{background-position:140% 0,0 0}}
@media (prefers-reduced-motion:reduce){.boot.busy::after,.gate-form:has(.gate-submit:disabled)::after{animation:none;background-size:100% 100%,100% 100%;opacity:.5}}

/*
 * The change log's notes, as a document (SB Ops → Change log).
 *
 * A <pre> because it IS preformatted — the server renders it as plain text so the screen,
 * the connector tool and anything pasted out of either are the same words. It wraps rather
 * than scrolling sideways: this is read, not inspected.
 */
.doc {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12.5px/1.6 var(--mono);
  color: var(--ink2);
  max-height: 60vh;
  overflow-y: auto;
}