/* TariffWolf — operator console.
   Deliberately NOT the customer console's palette. An operator holding both
   open should never have to look twice to know which one they are typing into.
   The customer consoles are cream/ink (AP) and navy/gold (RT); this is slate. */
:root{
  --bg:#11151c; --panel:#181e27; --line:#2a3340; --ink:#e7ecf3; --dim:#93a1b4;
  --accent:#e0603a; --ok:#3fa66a; --warn:#d99a2b; --bad:#d24b4b;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Libre Franklin',system-ui,-apple-system,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans)}
a{color:var(--accent)}
button{font:inherit;cursor:pointer}

.top{display:flex;align-items:center;gap:24px;padding:14px 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-family:var(--serif);font-size:20px}
.brand .tag{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:2px 6px;margin-left:8px;vertical-align:2px}
.top nav{display:flex;gap:4px;margin-left:auto}
.tab{background:none;border:1px solid transparent;color:var(--dim);padding:6px 14px;border-radius:4px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-color:var(--line);background:#20283340}
.who{margin-left:auto;color:var(--dim);font-size:13px}
.who a{margin-left:12px}

main{max-width:1100px;margin:28px auto;padding:0 24px}
.bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
h2{font-family:var(--serif);font-weight:600;font-size:22px;margin:0}
.filters{display:flex;gap:8px}
select,input,textarea{background:#0d1117;border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:8px 10px;font:inherit}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent)}
button.primary{background:var(--accent);border:none;color:#fff;padding:9px 16px;border-radius:4px;font-weight:500}
button.ghost{background:none;border:1px solid var(--line);color:var(--dim);padding:7px 12px;border-radius:4px}
button.ghost:hover{color:var(--ink);border-color:var(--dim)}
button.danger{background:none;border:1px solid var(--bad);color:var(--bad);padding:7px 12px;border-radius:4px}
button:disabled{opacity:.5;cursor:not-allowed}

.cards{display:grid;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.card.suspended{opacity:.62;border-style:dashed}
.card h3{margin:0 0 4px;font-size:17px;font-weight:600}
.card .tid{font-family:var(--mono);font-size:12px;color:var(--dim)}
.card .row{display:flex;align-items:center;gap:16px;justify-content:space-between}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pill{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:3px 9px}
.pill.on{color:var(--ok);border-color:#2c5a41}
.pill.warn{color:var(--warn);border-color:#5a4a22}
.meta{color:var(--dim);font-size:13px;margin-top:8px}
.actions{display:flex;gap:8px}

.log{background:#0d1117;border:1px solid var(--line);border-radius:6px;padding:14px;font:12.5px/1.7 var(--mono);color:#c7d2e0;overflow:auto;max-height:70vh;white-space:pre-wrap;word-break:break-word}
.log .deny{color:var(--bad)}

.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;padding:24px;z-index:20}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:24px;width:min(620px,100%);max-height:88vh;overflow:auto}
.sheet h3{font-family:var(--serif);font-size:20px;margin:0 0 16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.field input,.field select{width:100%}
.field .hint{font-size:12px;color:var(--dim);margin-top:5px}
.checks{display:flex;flex-wrap:wrap;gap:14px}
.checks label{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);text-transform:none;letter-spacing:0;margin:0}
.checks input{width:auto}
.sheet .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.forced{font-size:12px;color:var(--dim);border-left:2px solid var(--line);padding-left:10px;margin:14px 0}
.err{background:#3a1d1d;border:1px solid var(--bad);color:#ffb4b4;border-radius:4px;padding:10px 12px;margin-bottom:14px;font-size:13px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:11px 18px;z-index:30;font-size:14px}

.userrow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.userrow .n{font-weight:500}
.userrow .u{font-family:var(--mono);font-size:12px;color:var(--dim)}
.userrow.off .n{text-decoration:line-through;color:var(--dim)}

.loginpage{display:grid;place-items:center;min-height:100vh}
.loginbox{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:36px;width:min(400px,92vw)}
.loginbox h1{font-family:var(--serif);font-size:28px;margin:0}
.loginbox .sub{color:var(--accent);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:4px 0 26px}
.loginbox label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 5px}
.loginbox input{width:100%;margin-bottom:16px}
.loginbox button{width:100%;background:var(--accent);border:none;color:#fff;padding:11px;border-radius:4px;font-weight:500}
.loginbox .note{color:var(--dim);font-size:12px;margin:20px 0 0;line-height:1.6}

/* ------------------------------------------------------------------
   `[hidden]` is a USER-AGENT rule (`display:none`). Author styles beat
   the UA sheet regardless of specificity, so any `.foo{display:flex}`
   on an element carrying `hidden` silently un-hides it.

   That is why the modal was permanently on screen: `.modal` declares
   `display:grid`, and admin.js toggles `el.hidden`.

   One rule restores the attribute everywhere. Keep it last.
   ------------------------------------------------------------------ */
[hidden]{display:none !important}

/* ============================ Drop 38 additions ============================ */
/* Root cause of the "invisible statement" banners: cards used
   background:var(--accent-weak,#f4f4f8) (near-white) with light --ink text.
   Defining --accent-weak as a dark, legible tone fixes every such banner
   (footnotes / core-data) at once; amendments/rulings use .card.note below. */
:root{--accent-weak:#222b38}

.card.note{
  background:#1d242e;border:1px solid var(--line);border-left:3px solid var(--accent);
  color:var(--ink);border-radius:6px;padding:13px 16px;line-height:1.55
}
.card.note b{color:#fff}

/* legible mini tables (core-data / gateway) on the dark panel */
.mini{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.mini th,.mini td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);color:var(--ink)}
.mini th{color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:11px}
.mini td b{color:#fff}

/* search field in list toolbars */
.searchfield{min-width:240px}

/* pagination */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:16px 0 4px}
.pgbtn{background:var(--panel);border:1px solid var(--line);color:var(--dim);border-radius:5px;padding:5px 11px;min-width:34px;text-align:center;cursor:pointer;font:inherit;font-size:13px}
.pgbtn:hover{color:var(--ink);border-color:var(--dim)}
.pgbtn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pgbtn:disabled{opacity:.4;cursor:not-allowed}
.pgdots{color:var(--dim);padding:0 2px}
.pgcount{margin-left:8px;color:var(--dim);font-size:12px}

/* credits */
.cr-bal{font-family:var(--mono);font-weight:600;color:var(--ok);margin-right:6px;align-self:center}
.cr-preview{margin:8px 0 2px;font-size:13px;color:var(--dim);min-height:18px}
.cr-preview.ok{color:var(--ink)}
.cr-preview.ok b{color:#fff}
.cr-preview.bad{color:var(--bad)}