.staff-root {
  --gold:#ffb347; --gold-deep:#f28c1e; --coral:#ff5e8a; --cyan:#54d8f2; --blurple:#6874ff;
  --ink:#241333; --ink-deep:#180b24; --cream:#fff4e0;
  --mut:rgba(36,19,51,.60); --mut-2:rgba(36,19,51,.40);
  --glass:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.72));
  --panel-bd:rgba(36,19,51,.10); --line:rgba(36,19,51,.10); --line-2:rgba(36,19,51,.18);
  --rad:16px; --sh:0 12px 32px rgba(18,6,28,.15);
  --font-display:"Lilita One","Nunito",sans-serif; --font-body:"Nunito",sans-serif;
  --ok:#2f8f3e; --bad:#c0392b;
}
.staff-root * {box-sizing:border-box}
.staff-root, .staff-root {margin:0}
.staff-root {
  font-family:var(--font-body); color:var(--ink); min-height:100vh;
  background:
    radial-gradient(1000px 620px at 84% -14%, rgba(255,179,71,.5), transparent 62%),
    radial-gradient(780px 520px at -6% 110%, rgba(104,116,255,.14), transparent 55%),
    linear-gradient(168deg,#fff7ea,#ffe7c4 74%);
  background-attachment:fixed;
}
.staff-root a {color:var(--gold-deep)}
.staff-root .spin {display:inline-block;width:15px;height:15px;border:2.5px solid rgba(36,19,51,.18);border-top-color:var(--gold-deep);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes sp {to{transform:rotate(360deg)}}

/* topbar */
.staff-root .topbar {
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px clamp(14px,4vw,34px);border-bottom:1px solid rgba(36,19,51,.08);
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:20;
}
.staff-root .brand {display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-size:1.15rem;letter-spacing:.4px;color:var(--ink)}
.staff-root .brand .dot {width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-deep));box-shadow:0 0 12px rgba(242,140,30,.55)}
.staff-root .brand small {font-family:var(--font-body);font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--gold-deep)}
.staff-root .tb-right {display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.staff-root .who {display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem}
.staff-root .btn {
  font-family:var(--font-body);font-weight:800;font-size:.86rem;cursor:pointer;
  border-radius:11px;padding:8px 14px;border:1px solid rgba(36,19,51,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.74));color:var(--ink);
  box-shadow:0 6px 16px rgba(18,6,28,.12);transition:.14s;white-space:nowrap;text-decoration:none;
}
.staff-root .btn:hover {background:#fff;transform:translateY(-1px);box-shadow:0 9px 20px rgba(18,6,28,.16)}
.staff-root .btn:focus-visible {outline:2px solid var(--gold-deep);outline-offset:2px}
/* background-clip: the border is made transparent here, and a border-box background would paint the
   gradient under it, leaving the rounded corners looking ragged (worst at the lightest end). */
.staff-root .btn-gold {background:var(--gold) linear-gradient(135deg,var(--gold),var(--gold-deep));color:#3a1e06;border:0;padding:9px 15px;box-shadow:0 8px 18px rgba(242,140,30,.3)}
.staff-root .btn-gold:hover {filter:brightness(1.04)}
.staff-root .btn-danger {color:#b3271a;border-color:rgba(192,57,43,.32);background:rgba(192,57,43,.07)}
.staff-root .btn-danger:hover {background:rgba(192,57,43,.14)}
.staff-root .btn[disabled] {opacity:.5;cursor:default;transform:none}
.staff-root .btn-sm {padding:5px 11px;font-size:.78rem;border-radius:9px}
.staff-root .btn-back {display:inline-flex;align-items:center;gap:6px}
.staff-root .btn-back svg {width:14px;height:14px}

.staff-root .wrap {max-width:1240px;margin:0 auto;padding:clamp(16px,3.4vw,30px)}
.staff-root h1.title {font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.3rem);margin:0 0 18px;color:var(--ink)}

/* layout grid */
.staff-root .grid {display:grid;grid-template-columns:216px 1fr;gap:22px;align-items:start}
.staff-root .pnav {
  display:flex;flex-direction:column;gap:6px;position:sticky;top:88px;
  background:var(--glass);border:1px solid var(--panel-bd);border-radius:var(--rad);padding:10px;box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.staff-root .pnav button {
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--font-body);font-weight:800;font-size:.97rem;color:var(--ink);
  border:0;background:transparent;border-radius:11px;padding:11px 13px;transition:.14s;
}
.staff-root .pnav button svg {width:19px;height:19px;flex:0 0 auto;opacity:.7}
.staff-root .pnav button:hover {background:rgba(36,19,51,.06)}
.staff-root .pnav button.active {background:linear-gradient(135deg,rgba(255,179,71,.92),rgba(242,140,30,.85));color:#3a1e06;box-shadow:0 6px 16px rgba(242,140,30,.28)}
.staff-root .pnav button.active svg {opacity:1}

.staff-root .panel {background:var(--glass);border:1px solid var(--panel-bd);border-radius:var(--rad);box-shadow:var(--sh);padding:clamp(16px,2.4vw,24px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.staff-root .sec {display:none}
.staff-root .sec.active {display:block}
.staff-root .sec h2 {font-family:var(--font-display);font-size:1.45rem;margin:0 0 3px;color:var(--ink)}
.staff-root .sec .lead {color:var(--mut);font-weight:600;margin:0 0 18px;font-size:.95rem}

/* toolbar */
.staff-root .toolbar {display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.staff-root .count {font-family:var(--font-display);font-size:.95rem;background:rgba(242,140,30,.12);color:var(--gold-deep);border:1px solid rgba(242,140,30,.3);border-radius:11px;padding:7px 13px;white-space:nowrap}
.staff-root .search {
  font-family:var(--font-body);font-weight:700;font-size:.95rem;color:var(--ink);
  background:rgba(255,255,255,.85);border:1px solid var(--line-2);border-radius:11px;
  padding:10px 14px;outline:none;flex:1;min-width:190px;max-width:360px;transition:.14s;
}
.staff-root .search::placeholder {color:var(--mut-2)}
.staff-root .search:focus {border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(242,140,30,.18)}
.staff-root .filter-select {font-family:var(--font-body);font-weight:700;font-size:.95rem;color:var(--ink);background:rgba(255,255,255,.85);border:1px solid var(--line-2);border-radius:11px;padding:10px 36px 10px 14px;outline:none;cursor:pointer;transition:.14s;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23241333" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 12px center;background-size:14px}
.staff-root .filter-select:focus {border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(242,140,30,.18)}
.staff-root .filter-select.active {border-color:rgba(192,57,43,.55);color:var(--bad);background-color:rgba(192,57,43,.06)}
/* The accounts filter, the only dropdown that sits in a toolbar rather than a form. A funnel on the left
   says what it is without the options each having to repeat the word, and the chevron picks up the gold
   the rest of the panel uses. Filtering to Banned keeps the red it always had, icons included, because
   that state is worth noticing. */
.staff-root .fsel-trigger{
  padding:10px 38px 10px 38px; background-color:#fff; box-shadow:0 1px 2px rgba(18,6,28,.05);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f28c1e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f28c1e" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat,no-repeat;
  background-position:left 13px center,right 13px center;
  background-size:15px,15px;
  transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease;
}
.staff-root .fsel-trigger:hover{ border-color:var(--gold-deep); box-shadow:0 3px 10px rgba(242,140,30,.14); }
.staff-root .fsel-trigger.active{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c0392b" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg>'),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23c0392b" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
}
.staff-root .fsel-trigger.active:hover{ border-color:rgba(192,57,43,.75); box-shadow:0 3px 10px rgba(192,57,43,.16); }

/* table */
.staff-root .tbl-scroll {overflow-x:auto;border-radius:13px;border:1px solid var(--panel-bd);background:rgba(255,255,255,.5)}
.staff-root table.tbl {width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;min-width:640px}
.staff-root .tbl th {
  font-family:var(--font-body);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.7px;
  text-align:left;padding:12px 14px;color:var(--gold-deep);background:rgba(255,244,224,.92);
  border-bottom:1px solid var(--panel-bd);white-space:nowrap;
}
.staff-root .tbl th.sortable {cursor:pointer;user-select:none}
.staff-root .tbl th.sortable:hover {background:#fbeecf}
.staff-root .tbl th .arw {opacity:.3;margin-left:5px}
.staff-root .tbl th.s-asc .arw::before {content:"\25B4";opacity:1}
.staff-root .tbl th.s-desc .arw::before {content:"\25BE";opacity:1}
.staff-root .tbl th .arw::before {content:"\25C7"}
.staff-root .tbl td {padding:11px 14px;border-top:1px solid rgba(36,19,51,.08);vertical-align:middle;font-weight:600;color:var(--ink)}
.staff-root .tbl tbody tr:first-child td {border-top:0}
.staff-root .tbl tbody tr:hover td {background:rgba(255,179,71,.12)}
.staff-root .tbl .u-name {font-weight:800;color:var(--ink)}
.staff-root .tbl .u-tags {display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.staff-root .tbl .u-mail {color:var(--mut);font-weight:600;font-size:.88rem}
.staff-root .muted {color:var(--mut)}
.staff-root .empty {text-align:center;padding:26px;color:var(--mut);font-style:italic;font-weight:600}

.staff-root .pill {display:inline-block;font-family:var(--font-body);font-weight:800;font-size:.66rem;letter-spacing:.4px;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.staff-root .role-pill {margin:2px 4px 2px 0}
.staff-root .pill-ok {background:rgba(47,143,62,.13);color:var(--ok);border-color:rgba(47,143,62,.34)}
.staff-root .pill-no {background:rgba(192,57,43,.1);color:var(--bad);border-color:rgba(192,57,43,.3)}
.staff-root .pill-cat {background:rgba(104,116,255,.13);color:#4b57e0;border-color:rgba(104,116,255,.34)}
.staff-root .pill-sys {background:rgba(242,140,30,.13);color:var(--gold-deep);border-color:rgba(242,140,30,.34)}

/* pager */
.staff-root .pager {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;flex-wrap:wrap;font-weight:700}
.staff-root .pager-info {color:var(--mut);font-size:.9rem}
.staff-root .pager-ctl {display:flex;align-items:center;gap:8px}
.staff-root .pager-page {font-family:var(--font-display);font-size:.92rem;padding:0 8px;color:var(--ink)}

/* chips (log categories) */
.staff-root .chips {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.staff-root .chip {font-family:var(--font-body);font-weight:800;font-size:.82rem;cursor:pointer;border-radius:999px;padding:6px 13px;border:1px solid var(--line-2);background:rgba(255,255,255,.7);color:var(--ink);transition:.14s;text-transform:capitalize}
.staff-root .chip:hover {background:#fff}
.staff-root .chip.active {background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#3a1e06;border-color:transparent}

/* role cards */
.staff-root .role-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.staff-root .role-card {background:rgba(255,255,255,.66);border:1px solid var(--panel-bd);border-radius:14px;padding:15px 16px;cursor:pointer;transition:.14s;position:relative}
.staff-root .role-card:hover {border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(18,6,28,.12)}
.staff-root .role-card .rc-head {display:flex;align-items:center;gap:9px;margin-bottom:8px}
.staff-root .role-card .rc-dot {width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.staff-root .role-card .rc-name {font-family:var(--font-display);font-size:1.08rem;color:var(--ink)}
.staff-root .role-card .rc-meta {color:var(--mut);font-size:.84rem;font-weight:700}
.staff-root .role-card .rc-perms {margin-top:9px;color:var(--mut);font-size:.8rem;font-weight:600;line-height:1.5}

/* modal */
.staff-root .ov {position:fixed;inset:0;background:rgba(36,19,51,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:36px 16px;z-index:50;overflow-y:auto}
.staff-root .ov.open {display:flex}
.staff-root .modal {width:min(520px,100%);background:linear-gradient(180deg,#fffdf8,#fff6e9);border:1px solid rgba(36,19,51,.12);border-radius:18px;box-shadow:0 24px 60px rgba(18,6,28,.32);padding:24px;position:relative}
.staff-root .modal h3 {font-family:var(--font-display);font-size:1.35rem;margin:0 0 4px;color:var(--ink)}
.staff-root .modal .m-sub {color:var(--mut);font-size:.86rem;font-weight:600;margin:0 0 16px;word-break:break-all}
/* Close: a quiet squircle that turns red on hover, so what it does is obvious without shouting when it is not wanted */
.staff-root .modal-x {position:absolute;top:12px;right:12px;width:34px;height:34px;cursor:pointer;
  display:grid;place-items:center;border:1px solid rgba(36,19,51,.10);border-radius:11px;
  background:rgba(255,255,255,.66);color:rgba(36,19,51,.55);
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease}
.staff-root .modal-x:hover {background:#fff;color:var(--bad);border-color:rgba(192,57,43,.32);
  box-shadow:0 3px 10px rgba(192,57,43,.16)}
.staff-root .modal-x:active {transform:scale(.94)}
.staff-root .modal-x:focus-visible {outline:2px solid var(--gold-deep);outline-offset:2px}
.staff-root .modal-x svg {width:15px;height:15px;display:block}
.staff-root .fld {margin-top:14px}
.staff-root .fld label {display:block;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--gold-deep);margin-bottom:6px}
.staff-root .fld input[type=text], .staff-root .fld input[type=email] {width:100%;font-family:var(--font-body);font-weight:700;font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;outline:none}
.staff-root .fld input:focus {border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(242,140,30,.18)}
.staff-root .fld textarea {width:100%;min-height:96px;resize:vertical;font-family:var(--font-body);font-weight:700;font-size:.95rem;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;outline:none;box-sizing:border-box}
.staff-root .fld textarea:focus {border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(242,140,30,.18)}
.staff-root .row-toggle {display:flex;align-items:center;gap:10px;margin-top:14px;font-weight:700}
.staff-root .row-toggle input {width:18px;height:18px;accent-color:var(--gold-deep)}
.staff-root .checkgrid {display:flex;flex-direction:column;gap:7px;margin-top:6px}
.staff-root .checkgrid .cg-group {font-weight:800;color:var(--gold-deep);font-size:.74rem;text-transform:uppercase;letter-spacing:.5px;margin-top:8px}
.staff-root .checkgrid label {display:flex;align-items:center;gap:9px;font-weight:700;font-size:.92rem;cursor:pointer;color:var(--ink)}
.staff-root .checkgrid input {width:17px;height:17px;accent-color:var(--gold-deep)}
.staff-root .checkgrid label.perm-row {border-radius:0 8px 8px 0}
.staff-root .checkgrid label.perm-row input:disabled + span {opacity:.5}
.staff-root .colourpick {display:flex;align-items:center;gap:10px}
.staff-root .colourpick input[type=color] {width:44px;height:38px;border:1px solid var(--line-2);border-radius:10px;background:transparent;cursor:pointer;padding:2px}
.staff-root .m-actions {display:flex;flex-direction:column;gap:10px;margin-top:22px}
.staff-root .m-actions .btn {width:100%}
.staff-root .m-actions .grow {flex:1}
.staff-root .fld input:read-only, .staff-root .fld input:disabled {opacity:.62;cursor:not-allowed;background:rgba(36,19,51,.05)}
.staff-root .m-msg {margin-top:12px;font-weight:800;font-size:.86rem;min-height:1em}
.staff-root .m-msg.err {color:var(--bad)}
.staff-root .m-msg.ok {color:var(--ok)}
.staff-root .note {color:var(--mut);font-size:.8rem;font-weight:600;margin-top:6px}

/* gate */
.staff-root .gate {max-width:460px;margin:8vh auto;text-align:center;background:var(--glass);border:1px solid var(--panel-bd);border-radius:20px;padding:44px 34px;box-shadow:var(--sh)}
.staff-root .gate .g-ic {width:66px;height:66px;margin:0 auto 18px;border-radius:50%;background:rgba(242,140,30,.12);border:1px solid rgba(242,140,30,.3);display:grid;place-items:center;font-size:1.7rem}
.staff-root .gate h2 {font-family:var(--font-display);font-size:1.5rem;margin:0 0 8px;color:var(--ink)}
.staff-root .gate p {color:var(--mut);font-weight:600;line-height:1.5;margin:0 0 22px}

/* submissions */
.staff-root .status-pill {display:inline-block;font-family:var(--font-body);font-weight:800;font-size:.66rem;letter-spacing:.4px;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.staff-root .st-1 {background:rgba(242,140,30,.14);color:#b9701a;border-color:rgba(242,140,30,.42)}
.staff-root .st-4 {background:rgba(47,143,62,.14);color:#2f8f3e;border-color:rgba(47,143,62,.42)}
.staff-root .st-5 {background:rgba(192,57,43,.12);color:#c0392b;border-color:rgba(192,57,43,.38)}
.staff-root .st-6 {background:rgba(120,116,128,.14);color:#6a6672;border-color:rgba(120,116,128,.4)}
.staff-root .st-2 {background:rgba(192,57,43,.12);color:#c0392b;border-color:rgba(192,57,43,.38)}
.staff-root .sub-answers {display:flex;flex-direction:column;margin:2px 0 0}
.staff-root .qa {padding:11px 0;border-top:1px solid var(--line)}
.staff-root .qa:first-child {border-top:0;padding-top:2px}
.staff-root .qa .q {font-weight:800;font-size:.9rem;color:var(--ink);margin:0 0 4px;line-height:1.4}
.staff-root .qa .a {font-weight:600;font-size:.94rem;color:#33223f;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.staff-root .qa .a.empty {color:var(--mut);font-style:italic;font-weight:600}
.staff-root .thread {display:flex;flex-direction:column;gap:10px;margin-top:4px}
.staff-root .cmt {background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.staff-root .cmt.staffonly {background:rgba(104,116,255,.07);border-color:rgba(104,116,255,.28)}
.staff-root .cmt-head {display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:.82rem;margin-bottom:5px}
.staff-root .cmt-who {font-weight:800;color:var(--ink)}
.staff-root .cmt-time {color:var(--mut);font-weight:600}
.staff-root .cmt-body {font-weight:600;font-size:.93rem;color:#33223f;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.staff-root .subsel, .staff-root .subta {width:100%;font-family:var(--font-body);font-weight:700;font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;outline:none}
.staff-root .subta {min-height:88px;resize:vertical;font-weight:600;line-height:1.5}
.staff-root .subsel:focus, .staff-root .subta:focus {border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(242,140,30,.18)}
.staff-root .subflags {display:flex;flex-direction:column;gap:9px;margin-top:12px}
.staff-root .subflags label {display:flex;align-items:center;gap:9px;font-weight:700;font-size:.9rem;color:var(--ink);cursor:pointer}
.staff-root .subflags input {width:17px;height:17px;flex:0 0 auto;accent-color:var(--gold-deep)}
.staff-root .subflags input:disabled + span {opacity:.5}
.staff-root .modal.wide {width:min(1180px,100%)}
/* a submission row is clickable all the way across, so it should look it */
.staff-root tr.row-open {cursor:pointer;transition:background .12s}
.staff-root tr.row-open:hover {background:rgba(242,140,30,.09)}
/* hovering the row previews the BUTTON's own hover state, rather than inventing a colour for it */
.staff-root tr.row-open:hover .btn-sm {background:#fff;transform:translateY(-1px);box-shadow:0 9px 20px rgba(18,6,28,.16)}
/* Set status: one box per status in its own colour (the colours come from the API, so they match the chips and the
   Discord embeds). Radios, not checkboxes, because a submission has exactly one status. */
.staff-root .stat-pick {display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;justify-content:center}
/* the label sits over centred boxes, so centre it too */
.staff-root #subActions .fld:first-child > label {text-align:center}
/* clear the comments thread above before the status boxes start */
.staff-root #subActions {margin-top:26px;border-top:1px solid var(--line-2);padding-top:20px}
.staff-root .stat-opt {position:relative;display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;cursor:pointer;min-width:150px;padding:13px 16px;border-radius:11px;text-align:center;
  border:1.5px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent);
  font-weight:800;font-size:.84rem;color:var(--ink);transition:background .14s,border-color .14s,box-shadow .14s}
.staff-root .stat-opt:hover {background:color-mix(in srgb,var(--c) 18%,transparent)}
.staff-root .stat-opt input {position:absolute;opacity:0;width:0;height:0}
.staff-root .stat-box {width:17px;height:17px;flex:none;margin:0 auto;border-radius:5px;border:2px solid var(--c);
  background:#fff;display:grid;place-items:center;transition:background .14s}
/* margin as well as the flex gap, so the space is there even if something overrides one of them */
.staff-root .stat-name {display:block;width:100%;text-align:center;margin-top:9px;line-height:1.2}
.staff-root .stat-box::after {content:"";width:9px;height:5px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;
  transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .12s}
.staff-root .stat-opt input:checked ~ .stat-box {background:var(--c)}
.staff-root .stat-opt input:checked ~ .stat-box::after {opacity:1}
.staff-root .stat-opt:has(input:checked) {background:color-mix(in srgb,var(--c) 22%,transparent);
  border-color:var(--c);box-shadow:0 2px 10px color-mix(in srgb,var(--c) 30%,transparent)}
.staff-root .stat-opt:has(input:focus-visible) {outline:2px solid var(--c);outline-offset:2px}

@media(max-width:760px) {
  .staff-root .grid {grid-template-columns:1fr}
  .staff-root .pnav {position:static;flex-direction:row;overflow-x:auto}
  .staff-root .pnav button {white-space:nowrap}
}
.staff-root [hidden] {display:none!important}

/* shell overrides */
.staff-root{ background:none !important; min-height:auto !important; }

/* ================= Wiki editor ================= */
.staff-root .wk-load{padding:34px;text-align:center;color:var(--mut);font-weight:700}
.staff-root .wk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.staff-root .sec-title{font-family:var(--font-display);font-size:1.35rem;margin:0;color:var(--ink)}
.staff-root .wk-head-actions{display:flex;gap:8px}
.staff-root .btn.tiny{padding:5px 9px;font-size:.78rem;border-radius:9px}
.staff-root .btn-danger{background:linear-gradient(135deg,#ff6b6b,#c0392b);color:#fff;border-color:transparent}
.staff-root .wk-reorder-bar{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--mut);font-weight:700;font-size:.86rem}
.staff-root .wk-reorder-bar select{font-family:var(--font-body);font-weight:800;font-size:.88rem;color:var(--ink);cursor:pointer;min-width:220px;padding:9px 38px 9px 13px;border:1px solid var(--line-2);border-radius:11px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2716%27%20height%3D%2716%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23f28c1e%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E") no-repeat right 13px center;background-size:16px;transition:.14s}.staff-root .wk-reorder-bar select:hover{border-color:var(--gold-deep)}.staff-root .wk-reorder-bar select:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(242,140,30,.18)}
.staff-root .wk-table{width:100%;border-collapse:collapse}
.staff-root .wk-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);padding:8px 10px;border-bottom:1px solid var(--line)}
.staff-root .wk-row{cursor:pointer;border-bottom:1px solid var(--line)}
.staff-root .wk-row:hover{background:rgba(242,140,30,.07)}
.staff-root .wk-row td{padding:10px}
.staff-root .wk-t{font-weight:800;color:var(--ink)}
.staff-root .wk-s{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:var(--mut)}
.staff-root .wk-chip{display:inline-block;font-weight:800;font-size:.72rem;padding:2px 8px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 34%,#fff)}
.staff-root .wk-order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;max-width:640px}
.staff-root .wk-order li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:9px 12px}
.staff-root .wk-order-t{font-weight:700;color:var(--ink)}
.staff-root .wk-order-btns{display:flex;gap:5px}

.staff-root .wk-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.staff-root .wk-edit-col{min-width:0}
.staff-root .wk-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.staff-root .wk-fld{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:.78rem;color:var(--mut)}
.staff-root .wk-fld input,.staff-root .wk-fld select{font-family:var(--font-body);font-weight:700;font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:9px 11px}
.staff-root .wk-fld small{font-weight:700;color:var(--mut-2);font-size:.7rem}
.staff-root .wk-realmchecks{display:flex;flex-wrap:wrap;gap:10px;font-weight:700;color:var(--ink);font-size:.86rem}
.staff-root .wk-rc{display:flex;align-items:center;gap:5px}
.staff-root .wk-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:rgba(36,19,51,.04);border:1px solid var(--line);border-radius:11px;padding:7px;margin-bottom:10px}
.staff-root .wk-tb-hint{font-size:.72rem;color:var(--mut-2);font-weight:700;margin:0 4px}
.staff-root .wk-add{font-family:var(--font-body);font-weight:700;font-size:.8rem;padding:5px 30px 5px 10px;border:1px solid var(--line-2);border-radius:9px;background:#fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23f28c1e%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209%206%206%206-6%27%2F%3E%3C%2Fsvg%3E") no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;margin-left:auto}
.staff-root .wk-blocks{display:flex;flex-direction:column;gap:9px}
.staff-root .wb-block{border:1px solid var(--line-2);border-radius:12px;background:#fff;padding:9px 10px}
.staff-root .wb-ctrls{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.staff-root .wb-type{font-size:.68rem;text-transform:uppercase;letter-spacing:.6px;font-weight:800;color:var(--mut);margin-right:auto}
.staff-root .wb-ce{min-height:1.6em;outline:none;border:1px dashed transparent;border-radius:7px;padding:5px 7px;color:var(--ink);line-height:1.55;font-size:.98rem}
.staff-root .wb-ce:focus{border-color:color-mix(in srgb,var(--gold-deep) 45%,#fff);background:rgba(255,179,71,.05)}
.staff-root .wb-ce-h{font-family:var(--font-display);font-size:1.15rem;font-weight:400}
.staff-root .wb-ce .wb-hl,.staff-root .wb-ce [style*="--wk-cmd"]{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:.9em;background:#f2f0fd;border:1px solid #e4dffb;border-radius:6px;padding:.03em .35em}
.staff-root .wb-list{display:flex;flex-direction:column;gap:5px}
.staff-root .wb-li{display:flex;align-items:flex-start;gap:7px}
.staff-root .wb-bullet{color:var(--mut);font-weight:800;padding-top:6px;min-width:16px}
.staff-root .wb-li .wb-ce{flex:1}
.staff-root .wb-hr{border:0;border-top:2px solid var(--line-2);margin:4px 0}
.staff-root .wk-preview-col{position:sticky;top:8px}
.staff-root .wk-preview-h{font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;font-weight:800;color:var(--mut);margin-bottom:6px}
.staff-root .wk-preview{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:18px 20px;max-height:70vh;overflow:auto}
.staff-root .wk-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:#fff;font-weight:800;font-size:.88rem;padding:10px 18px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.2s;z-index:100}
.staff-root .wk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:860px){.staff-root .wk-editor{grid-template-columns:1fr}.staff-root .wk-fields{grid-template-columns:1fr}.staff-root .wk-preview-col{position:static}}
.staff-root .wk-tb-sep{width:1px;height:20px;background:var(--line-2);margin:0 3px}
.staff-root .wk-fld:has(.wk-realmchecks){grid-column:1/-1}

/* ---- realm management ---- */
.staff-root .wk-lock{width:.82em;height:.82em;vertical-align:-1px;margin-right:2px;opacity:.85}
.staff-root .wk-chip.gated{padding-left:7px}
.staff-root .wk-note{color:var(--mut);font-size:.86rem;line-height:1.5;margin:0 0 14px;max-width:70ch}
.staff-root .wk-realm-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.staff-root .wk-rl-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line-2);border-radius:13px;padding:12px 14px}
.staff-root .wk-rl-ic{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center}
.staff-root .wk-rl-ic svg{width:24px;height:24px}
.staff-root .wk-rl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.staff-root .wk-rl-name{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--ink);display:flex;align-items:center;gap:2px}
.staff-root .wk-rl-slug{font-size:.78rem;color:var(--mut-2);font-family:var(--font-mono,monospace)}
.staff-root .wk-rl-roles{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.staff-root .wk-rl-pub{font-size:.76rem;font-weight:800;color:var(--good,#3a8a3a)}
.staff-root .wk-rl-none{font-size:.76rem;color:var(--mut-2);font-style:italic}
.staff-root .wk-rl-btns{flex:0 0 auto;display:flex;align-items:center;gap:6px}
.staff-root .wk-realm-form{max-width:560px}
.staff-root .wk-fld-check{flex-direction:row;align-items:center;gap:9px;grid-column:1/-1}
.staff-root .wk-fld-check input{width:17px;height:17px}
.staff-root .wk-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.staff-root .wk-icon-opt{display:grid;place-items:center;height:46px;border:1px solid var(--line-2);border-radius:11px;background:#fff;color:var(--mut);cursor:pointer;transition:.14s}
.staff-root .wk-icon-opt svg{width:23px;height:23px}
.staff-root .wk-icon-opt:hover{border-color:var(--gold-deep);color:var(--ink)}
.staff-root .wk-icon-opt.sel{border-color:var(--gold-deep);color:var(--ink);background:rgba(242,140,30,.1);box-shadow:0 0 0 2px rgba(242,140,30,.18)}
.staff-root .wk-color-row{display:flex;align-items:center;gap:11px}
.staff-root .wk-color-row input[type=color]{width:46px;height:34px;padding:0;border:1px solid var(--line-2);border-radius:9px;background:#fff;cursor:pointer}
.staff-root .wk-color-hex{font-family:var(--font-mono,monospace);font-weight:700;font-size:.9rem;color:var(--ink);text-transform:uppercase}

/* ---- Rules tab (headers + the entries under them) ---- */
.staff-root .rl-hint{color:var(--mut);font-weight:700;font-size:.85rem;line-height:1.5;margin:0 0 14px}
.staff-root .rl-secs,.staff-root .rl-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.staff-root .rl-secs li,.staff-root .rl-items li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:9px 12px}
.staff-root .rl-sec-open{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:none;border:0;padding:0;cursor:pointer;text-align:left;font-family:var(--font-body)}
.staff-root .rl-sec-t{font-weight:800;color:var(--ink);font-size:.95rem}
.staff-root .rl-sec-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.staff-root .rl-sec-sub{font-weight:700;color:var(--mut);font-size:.8rem;line-height:1.45}
.staff-root .rl-subline{margin:-6px 0 14px;color:var(--mut);font-weight:700;font-size:.85rem;line-height:1.5}
.staff-root .rl-counts{display:flex;gap:6px;flex-wrap:wrap}
.staff-root .rl-count{font-weight:800;font-size:.72rem;padding:2px 8px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 34%,#fff)}
.staff-root .rl-kind{flex:0 0 auto;width:88px;font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
.staff-root .rl-k-note .rl-kind,.staff-root .rl-k-subheading .rl-kind{color:var(--gold-deep)}
.staff-root .rl-body{flex:1;min-width:0;background:none;border:0;padding:0;cursor:pointer;text-align:left;font-family:var(--font-body);font-weight:700;font-size:.9rem;line-height:1.5;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.staff-root .rl-body:hover{color:var(--gold-deep)}
.staff-root .rl-k-subheading .rl-body{font-family:var(--font-display);font-size:.98rem}
.staff-root .rl-realms{flex:0 0 auto;display:flex;gap:5px;flex-wrap:wrap;max-width:230px}
@media (max-width:820px){
  .staff-root .rl-items li{flex-wrap:wrap}
  .staff-root .rl-body{flex:1 0 100%;order:3;-webkit-line-clamp:3}
  .staff-root .rl-realms{max-width:none}
}
.staff-root .rl-group{display:flex;align-items:center;gap:12px;margin:26px 0 10px}
.staff-root .rl-group h3{font-family:var(--font-display);font-size:1.05rem;color:var(--ink);margin:0}
.staff-root .cm-rowname{display:block;font-weight:800;color:var(--ink);font-size:.93rem}
.staff-root .cm-rownote{display:block;margin-top:2px;color:var(--mut);font-weight:600;font-size:.8rem;line-height:1.45}
.staff-root .cm-tick{font-weight:800;font-size:.72rem;padding:2px 8px;border-radius:999px;white-space:nowrap}
.staff-root .cm-tick.on{color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid color-mix(in srgb,var(--c) 34%,#fff)}
.staff-root .cm-tick.off{color:var(--mut);background:rgba(36,19,51,.05);border:1px solid var(--line-2)}
.staff-root .cm-list .rl-realms{max-width:330px}
.staff-root .rl-items li.rl-d1{margin-left:26px}
.staff-root .rl-items li.rl-d2{margin-left:52px}
.staff-root .rl-lvl{display:block;font-style:normal;font-size:.68rem;color:var(--gold-deep);letter-spacing:0;text-transform:none;margin-top:2px}

/* A dropdown whose MENU we can style. The native select keeps the state and stays in the DOM, so the
   existing code reads and writes it exactly as before; it is just never the thing you see or click. */
.staff-root .fsel {position:relative;display:inline-block}
.staff-root .fsel-native {position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:0;top:0}
.staff-root .fsel-trigger {text-align:left}
.staff-root .fsel-trigger[aria-expanded="true"] {border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(242,140,30,.18)}
.staff-root .fsel-menu {position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:100%;
  margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line-2);border-radius:13px;
  box-shadow:0 16px 38px rgba(18,6,28,.18);animation:fsel-in .13s ease}
.staff-root .fsel-menu[hidden] {display:none}
@keyframes fsel-in {from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.staff-root .fsel-menu li {display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;
  font-family:var(--font-body);font-weight:700;font-size:.92rem;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background .12s ease,color .12s ease}
.staff-root .fsel-menu li + li {margin-top:2px}
.staff-root .fsel-menu li:hover, .staff-root .fsel-menu li.cursor {background:rgba(242,140,30,.10)}
.staff-root .fsel-menu li[aria-selected="true"] {color:var(--gold-deep);background:rgba(242,140,30,.14)}
.staff-root .fsel-menu li .tick {width:15px;height:15px;flex:0 0 auto;opacity:0;color:var(--gold-deep)}
.staff-root .fsel-menu li[aria-selected="true"] .tick {opacity:1}

/* Linked in-game: a filter that is on but not alarming, unlike Banned */
.staff-root .fsel-trigger.on {border-color:var(--gold-deep);color:var(--gold-deep);background-color:rgba(242,140,30,.07)}
.staff-root .fsel-trigger.on:hover {box-shadow:0 3px 10px rgba(242,140,30,.18)}
.staff-root .tbl thead tr[hidden] {display:none}
.staff-root .u-uuid {white-space:nowrap}
/* Accounts table: the email column takes whatever width is left after the others and cuts a long address off
   with an ellipsis (the full address shows on hover), so the table fits its box instead of scrolling sideways.
   max-width:1px + a percentage width is the table-cell way of saying "shrink to the space available". */
.staff-root #acctTable td.u-mail{ max-width:1px; width:40%; min-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }