/* ═══════════════════════════════════════════════════════════════════════════
   TXRP — site.css · design system v6 "Daylight"
   Texas State Roleplay · public site + staff operations console

   Two themes, one geometry. Day is the default: white surfaces, near-black
   text, separators instead of boxes, and space doing the work that borders
   used to do. Night is not the same page dimmed — it is a true-black canvas
   with surfaces that genuinely lift off it.

   Everything is a token. No component below states a raw colour, which is
   what makes a single attribute on <html> flip the whole product.
═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ───────────────────────────────────────────────────────────────────────────
   DAY — the default. Grey page, white cards, hairline separators.
─────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:      #F7F7F9;
  --bg2:     #F1F1F5;
  --panel:   #FFFFFF;
  --card:    #FFFFFF;
  --raised:  #E8E8EE;
  --nav:     #ECECF0;

  --line:    rgba(0,0,0,.085);
  --line-2:  rgba(0,0,0,.16);

  --text:    #16161A;
  --muted:   rgba(22,22,26,.62);
  --dim:     rgba(22,22,26,.44);
  --fg:      #16161A;

  /* Interactive fills. Every hover, chip and well in the product uses one of
     these three, which is why nothing has to know what theme it is in. */
  --fill:    rgba(0,0,0,.045);
  --fill-2:  rgba(0,0,0,.075);
  --fill-3:  rgba(0,0,0,.11);

  --overlay: rgba(28,28,34,.42);
  --on-accent:#FFFFFF;

  /* Accents are tuned per theme: these are the versions that hold contrast
     against a white page. */
  --red:     #C8322C;
  --red-br:  #D93F38;
  --red-10:  rgba(200,50,44,.09);
  --red-25:  rgba(200,50,44,.24);
  --accent:  #C8322C;

  --gold:    #9A6F10;
  --gold-10: rgba(154,111,16,.11);
  --green:   #14804A;
  --green-10:rgba(20,128,74,.11);
  --amber:   #9C5D12;
  --amber-10:rgba(156,93,18,.11);
  --blue:    #1257A8;
  --blue-10: rgba(18,87,168,.10);

  --shadow-sm: 0 1px 2px rgba(20,20,30,.06), 0 1px 1px rgba(20,20,30,.04);
  --shadow-md: 0 4px 16px rgba(20,20,30,.09), 0 1px 3px rgba(20,20,30,.06);
  --shadow-lg: 0 24px 60px rgba(20,20,30,.16), 0 4px 14px rgba(20,20,30,.08);
  --shadow-glow: 0 4px 16px rgba(200,50,44,.24);
  --glass-shine: inset 0 1px 0 rgba(255,255,255,.7);
  --glass-bg: rgba(255,255,255,.78);

  /* Shared across both themes ------------------------------------------- */
  --f-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  --f-body:    -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --r: 12px; --r-sm: 8px; --r-lg: 16px; --r-xl: 22px;
  --maxw: 1200px;
  --rail: 264px;          /* nav expanded */
  --rail-min: 68px;       /* nav collapsed to icons */
  --topbar-h: 56px;

  --glass-blur: blur(20px) saturate(1.6);
  --glass-blur-lg: blur(30px) saturate(1.7);
  --ease: cubic-bezier(.32,.72,0,1);
  --t: 180ms cubic-bezier(.32,.72,0,1);

  /* Aliases kept so older templates that named surfaces differently still
     resolve against the same two palettes. */
  --surface: var(--card);
  --surface-2: var(--raised);
  --fg-2: var(--muted);
  --fg-3: var(--dim);
  --red-2: var(--red-br);
  --max: var(--maxw);
  --bg-2: var(--bg2);
}

/* ───────────────────────────────────────────────────────────────────────────
   NIGHT — true black canvas, surfaces that lift, accents that glow slightly.
   Declared twice so an explicit choice wins in both directions and the
   untouched "system" setting still follows the OS.
─────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:      #08090B;
    --bg2:     #0E1014;
    --panel:   #101217;
    --card:    #14161C;
    --raised:  #1D2027;
    --nav:     #0C0E12;

    --line:    rgba(255,255,255,.085);
    --line-2:  rgba(255,255,255,.17);

    --text:    #F4F5F7;
    --muted:   rgba(244,245,247,.60);
    --dim:     rgba(244,245,247,.40);
    --fg:      #F4F5F7;

    --fill:    rgba(255,255,255,.055);
    --fill-2:  rgba(255,255,255,.10);
    --fill-3:  rgba(255,255,255,.16);

    --overlay: rgba(4,5,7,.66);

    --red:     #E04B47;
    --red-br:  #FF6A64;
    --red-10:  rgba(224,75,71,.13);
    --red-25:  rgba(224,75,71,.30);
    --accent:  #FF6A64;

    --gold:    #E8B855;
    --gold-10: rgba(232,184,85,.13);
    --green:   #3ECF8E;
    --green-10:rgba(62,207,142,.14);
    --amber:   #EAA84A;
    --amber-10:rgba(234,168,74,.14);
    --blue:    #5AA2F0;
    --blue-10: rgba(90,162,240,.14);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 8px 26px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
    --shadow-lg: 0 28px 70px rgba(0,0,0,.72), 0 6px 18px rgba(0,0,0,.5);
    --shadow-glow: 0 4px 20px rgba(224,75,71,.35);
    --glass-shine: inset 0 1px 0 rgba(255,255,255,.06);
    --glass-bg: rgba(16,18,23,.72);
  }
}
:root[data-theme="dark"]{
  --bg:      #08090B;
  --bg2:     #0E1014;
  --panel:   #101217;
  --card:    #14161C;
  --raised:  #1D2027;
  --nav:     #0C0E12;

  --line:    rgba(255,255,255,.085);
  --line-2:  rgba(255,255,255,.17);

  --text:    #F4F5F7;
  --muted:   rgba(244,245,247,.60);
  --dim:     rgba(244,245,247,.40);
  --fg:      #F4F5F7;

  --fill:    rgba(255,255,255,.055);
  --fill-2:  rgba(255,255,255,.10);
  --fill-3:  rgba(255,255,255,.16);

  --overlay: rgba(4,5,7,.66);

  --red:     #E04B47;
  --red-br:  #FF6A64;
  --red-10:  rgba(224,75,71,.13);
  --red-25:  rgba(224,75,71,.30);
  --accent:  #FF6A64;

  --gold:    #E8B855;
  --gold-10: rgba(232,184,85,.13);
  --green:   #3ECF8E;
  --green-10:rgba(62,207,142,.14);
  --amber:   #EAA84A;
  --amber-10:rgba(234,168,74,.14);
  --blue:    #5AA2F0;
  --blue-10: rgba(90,162,240,.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 26px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.72), 0 6px 18px rgba(0,0,0,.5);
  --shadow-glow: 0 4px 20px rgba(224,75,71,.35);
  --glass-shine: inset 0 1px 0 rgba(255,255,255,.06);
  --glass-bg: rgba(16,18,23,.72);
}

/* ═══ BASE ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  background:var(--bg);color:var(--text);font-family:var(--f-body);
  font-size:15px;line-height:1.6;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv04','ss01';
  overflow-x:hidden;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
::selection{background:var(--red-25);color:var(--text)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--fill-3);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:padding-box;border:3px solid transparent}
::-webkit-scrollbar-track{background:transparent}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
hr{border:0;border-top:1px solid var(--line)}

.mono{font-family:var(--f-mono);font-feature-settings:normal;letter-spacing:0}
.muted{color:var(--muted)}
.strong{color:var(--text);font-weight:600}
.dim{color:var(--dim)}
.section-label,.label{
  display:block;font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPERATIONS CONSOLE — SHELL
   A fixed navigation rail that collapses to icons, a persistent utility bar
   holding search and the day/night switch, and a workspace that is mostly
   empty on purpose.
═══════════════════════════════════════════════════════════════════════════ */
.staff-wrap{display:flex;min-height:100vh;position:relative;z-index:1}

/* ── Rail ─────────────────────────────────────────────────────────────── */
.staff-side{
  width:var(--rail);flex-shrink:0;
  background:var(--nav);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  transition:width .3s var(--ease);
  scrollbar-width:thin;
}
.staff-side::-webkit-scrollbar{width:6px}
.staff-side::-webkit-scrollbar-thumb{background:transparent}
.staff-side:hover::-webkit-scrollbar-thumb{background:var(--fill-3)}

body.rail-collapsed .staff-side{width:var(--rail-min)}
/* Set by the <head> bootstrap so a collapsed rail doesn't flash open wide
   in the moment before the shell script runs. */
html.pre-rail .staff-side{width:var(--rail-min)}
html.pre-rail .staff-nav a .nav-label,
html.pre-rail .staff-brand span,
html.pre-rail .staff-user>div{opacity:0}

.staff-brand{
  display:flex;align-items:center;gap:11px;
  height:var(--topbar-h);padding:0 18px;flex-shrink:0;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;background:var(--nav);
}
.staff-brand img{width:26px;height:26px;border-radius:7px;object-fit:cover;flex-shrink:0}
.staff-brand span{
  font-family:var(--f-display);font-weight:650;font-size:15.5px;letter-spacing:-.022em;
  white-space:nowrap;overflow:hidden;transition:opacity .2s var(--ease);
}
body.rail-collapsed .staff-brand{padding:0;justify-content:center}
body.rail-collapsed .staff-brand span{opacity:0;width:0}

.staff-nav{padding:10px 10px 8px;display:flex;flex-direction:column;gap:1px;flex:1}
.staff-nav .grp{
  padding:16px 12px 6px;font-family:var(--f-mono);font-size:9.5px;font-weight:500;
  color:var(--dim);text-transform:uppercase;letter-spacing:.15em;white-space:nowrap;
  overflow:hidden;transition:opacity .2s var(--ease);
}
body.rail-collapsed .staff-nav .grp{
  opacity:0;height:1px;padding:0;margin:9px 12px;
  background:var(--line);border-radius:1px;
}
.staff-nav a{
  position:relative;display:flex;align-items:center;gap:12px;
  height:36px;padding:0 12px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:450;letter-spacing:-.008em;color:var(--muted);
  white-space:nowrap;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.staff-nav a>span:not(.tag-soon):not(.badge-pending),
.staff-nav a{min-width:0}
.staff-nav a:hover{color:var(--text);background:var(--fill)}
.staff-nav a.active{color:var(--text);background:var(--fill-2);font-weight:550}
.staff-nav a.active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent);
}
.staff-nav a svg{flex-shrink:0;width:16px;height:16px;opacity:.6;transition:opacity .16s,color .16s}
.staff-nav a:hover svg{opacity:.9}
.staff-nav a.active svg{opacity:1;color:var(--accent)}

/* Collapsed: labels fold away and the icon centres. The label re-appears as
   a tooltip so the rail stays usable at 68px. */
body.rail-collapsed .staff-nav a{justify-content:center;padding:0;gap:0}
body.rail-collapsed .staff-nav a .nav-label{opacity:0;width:0;overflow:hidden}
body.rail-collapsed .staff-nav a .tag-soon,
body.rail-collapsed .staff-nav a .badge-pending{display:none}
body.rail-collapsed .staff-nav a[data-label]:hover::after{
  content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%);z-index:400;
  background:var(--text);color:var(--bg);
  padding:6px 10px;border-radius:6px;font-size:12px;font-weight:500;
  white-space:nowrap;box-shadow:var(--shadow-md);pointer-events:none;
}
.nav-label{overflow:hidden;text-overflow:ellipsis;transition:opacity .2s var(--ease)}

.tag-soon{
  font-size:9px;padding:2px 6px;border-radius:5px;background:var(--fill-2);
  color:var(--dim);margin-left:auto;font-family:var(--f-mono);
  letter-spacing:.06em;text-transform:uppercase;flex-shrink:0;
}
.badge-pending{
  background:var(--gold-10);color:var(--gold);border:1px solid var(--gold-10);
  font-size:10px;padding:2px 7px;border-radius:5px;font-family:var(--f-mono);
  margin-left:auto;flex-shrink:0;
}
/* How many are waiting on a queue. Red so it reads as "do this", sized so
   "99+" still fits, and it survives the collapsed rail as a dot on the icon. */
.nav-count{
  margin-left:auto;flex-shrink:0;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--accent);color:#fff;
  font-family:var(--f-mono);font-size:11px;font-weight:600;line-height:20px;
  text-align:center;letter-spacing:0;
  box-shadow:0 0 0 2px var(--nav);
}
.staff-nav a.active .nav-count{box-shadow:0 0 0 2px var(--fill-2)}
body.rail-collapsed .staff-nav a .nav-count{
  position:absolute;top:5px;right:9px;min-width:8px;height:8px;padding:0;
  font-size:0;line-height:0;border-radius:50%;
}

/* A calmer rail: group labels get a hairline so the sections read as
   sections, rows are a touch tighter, the active row is tinted not boxed. */
.staff-nav .grp{padding:18px 12px 6px;position:relative}
.staff-nav .grp::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;
  background:var(--line);opacity:.7;
}
.staff-nav .grp:first-child{padding-top:8px}
.staff-nav a{height:34px;gap:11px}
.staff-nav a.active{background:color-mix(in srgb, var(--accent) 11%, transparent)}
.staff-nav a.active::before{height:16px}

/* Home — the to-do card */
.h-card-todo{margin-bottom:16px}
.h-todo li{cursor:pointer;transition:background .14s var(--ease);border-radius:var(--r-sm);margin:0 -8px;padding-left:8px;padding-right:8px}
.h-todo li:hover{background:var(--fill)}
.h-todo-n{
  flex:none;min-width:30px;height:30px;padding:0 8px;border-radius:15px;
  background:var(--accent);color:#fff;font-family:var(--f-mono);font-weight:600;
  font-size:13px;line-height:30px;text-align:center;margin-right:12px;
}
.h-todo-go{flex:none;font-size:12.5px;font-weight:550;color:var(--dim)}
.h-todo li:hover .h-todo-go{color:var(--text)}

.staff-user{
  padding:10px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;
  position:sticky;bottom:0;background:var(--nav);flex-shrink:0;
}
.staff-user img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px var(--line-2)}
.staff-user>div{min-width:0;flex:1;transition:opacity .2s var(--ease)}
.staff-user .name{font-size:12.5px;font-weight:550;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-user .role{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-user .logout{
  margin-left:auto;flex-shrink:0;width:30px;height:30px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;color:var(--dim);
  transition:color .16s,background .16s;
}
.staff-user .logout:hover{color:var(--red-br);background:var(--red-10)}
body.rail-collapsed .staff-user{justify-content:center;padding:10px 0}
body.rail-collapsed .staff-user>div,
body.rail-collapsed .staff-user .logout{display:none}

/* ── Workspace ────────────────────────────────────────────────────────── */
.staff-main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ── Utility bar — always present, not just on mobile ─────────────────── */
.staff-topbar{
  display:flex;align-items:center;gap:10px;
  height:var(--topbar-h);padding:0 20px;flex-shrink:0;
  border-bottom:1px solid var(--line);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  position:sticky;top:0;z-index:120;
}
.staff-topbar button{
  width:32px;height:32px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;color:var(--muted);
  transition:background .16s var(--ease),color .16s var(--ease);
}
.staff-topbar button:hover{background:var(--fill);color:var(--text)}
.staff-topbar button:active{background:var(--fill-2)}
.staff-topbar .topbar-title{
  font-size:13.5px;font-weight:550;letter-spacing:-.014em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-spacer{flex:1;min-width:8px}

/* The search trigger reads as a field, so it is obvious it opens something
   you type into rather than a button that does something. */
.topbar-search{
  display:flex;align-items:center;gap:9px;
  height:32px;padding:0 10px 0 11px;min-width:210px;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--fill);color:var(--dim);
  font-size:13px;cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s;
}
.topbar-search:hover{background:var(--fill-2);border-color:var(--line-2);color:var(--muted)}
.topbar-search svg{width:14px;height:14px;flex-shrink:0}
.topbar-search .kbd{
  margin-left:auto;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;
  padding:2px 6px;border-radius:5px;background:var(--fill-2);color:var(--dim);
}

/* Day/night switch — a two-position track, not a mystery icon. */
.theme-switch{
  display:flex;align-items:center;gap:2px;flex-shrink:0;
  padding:2px;border-radius:999px;background:var(--fill);border:1px solid var(--line);
}
.theme-switch button{
  width:26px!important;height:24px!important;border-radius:999px!important;
  color:var(--dim);border:none!important;
}
.theme-switch button svg{width:14px;height:14px}
.theme-switch button.on{background:var(--panel)!important;color:var(--text);box-shadow:var(--shadow-sm)}
.theme-switch button:hover:not(.on){color:var(--muted);background:transparent!important}

.staff-backdrop{
  display:none;position:fixed;inset:0;z-index:150;
  background:var(--overlay);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.staff-backdrop.open{opacity:1;visibility:visible}

/* ── Page header ──────────────────────────────────────────────────────── */
.staff-header{padding:34px 40px 22px}
.staff-header h1{
  font-family:var(--f-display);font-weight:700;font-size:31px;
  letter-spacing:-.036em;line-height:1.12;
}
.staff-header p{color:var(--muted);font-size:14.5px;margin-top:5px;letter-spacing:-.011em}
#content{padding:0 40px 72px;flex:1}

/* ═══ COMMAND PALETTE ═══════════════════════════════════════════════════
   Every page in the rail, reachable in three keystrokes. Built from the nav
   itself, so it can never offer a page the account isn't allowed to open. */
.cmdk{
  position:fixed;inset:0;z-index:9500;display:flex;justify-content:center;
  align-items:flex-start;padding:12vh 20px 20px;
  background:var(--overlay);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s;
}
.cmdk.open{opacity:1;visibility:visible}
.cmdk-box{
  width:min(560px,100%);max-height:62vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
  transform:scale(.97) translateY(-8px);transition:transform .2s var(--ease);
}
.cmdk.open .cmdk-box{transform:none}
.cmdk-input{
  display:flex;align-items:center;gap:11px;padding:15px 18px;
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.cmdk-input svg{width:17px;height:17px;color:var(--dim);flex-shrink:0}
.cmdk-input input{
  flex:1;background:none!important;border:none!important;outline:none;box-shadow:none!important;
  font-size:16px;color:var(--text);letter-spacing:-.014em;padding:0;
}
.cmdk-input input::placeholder{color:var(--dim)}
.cmdk-list{overflow-y:auto;padding:7px;flex:1}
.cmdk-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;
  font-size:13.5px;color:var(--muted);
}
.cmdk-item svg{width:15px;height:15px;opacity:.6;flex-shrink:0}
.cmdk-item .cmdk-grp{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);flex-shrink:0}
.cmdk-item[aria-selected="true"]{background:var(--fill-2);color:var(--text)}
.cmdk-item[aria-selected="true"] svg{opacity:1;color:var(--accent)}
.cmdk-empty{padding:34px 16px;text-align:center;color:var(--dim);font-size:13.5px}
.cmdk-foot{
  display:flex;align-items:center;gap:14px;padding:9px 16px;flex-shrink:0;
  border-top:1px solid var(--line);background:var(--bg2);
  font-size:11px;color:var(--dim);
}
.cmdk-foot .kbd{font-family:var(--f-mono);padding:2px 6px;border-radius:4px;background:var(--fill-2);margin-right:5px}

/* ═══ RESPONSIVE SHELL ══════════════════════════════════════════════════ */
@media(max-width:1024px){
  .staff-header{padding:26px 24px 18px}
  #content{padding:0 24px 60px}
}
@media(max-width:920px){
  .staff-backdrop{display:block}
  .staff-side{
    position:fixed;top:0;left:0;z-index:200;
    width:288px!important;max-width:86vw;
    transform:translateX(-100%);
    transition:transform .32s var(--ease);
    box-shadow:var(--shadow-lg);
  }
  .staff-side.open{transform:translateX(0)}
  body.rail-collapsed .staff-nav a{justify-content:flex-start;padding:0 12px;gap:12px}
  body.rail-collapsed .staff-nav a .nav-label,
  body.rail-collapsed .staff-brand span,
  body.rail-collapsed .staff-user>div{opacity:1;width:auto}
  body.rail-collapsed .staff-user .logout{display:flex}
  body.rail-collapsed .staff-nav .grp{opacity:1;height:auto;padding:16px 12px 6px;margin:0;background:none}
  .rail-toggle{display:none!important}
  .staff-header{padding:22px 18px 16px}
  .staff-header h1{font-size:26px}
  #content{padding:0 18px 56px}
  .staff-topbar{padding:0 14px}
  .topbar-search{min-width:0;width:32px;padding:0;justify-content:center}
  .topbar-search .kbd,.topbar-search .lbl{display:none}
}
@media(max-width:560px){
  .theme-switch{padding:1px}
  .theme-switch button{width:24px!important}
  .staff-header{padding:18px 14px 14px}
  #content{padding:0 14px 48px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONSOLE COMPONENTS
═══════════════════════════════════════════════════════════════════════════ */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;margin-bottom:16px;box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.card:hover{border-color:var(--line-2)}
.card-title{
  font-family:var(--f-display);font-weight:650;font-size:16px;
  letter-spacing:-.024em;margin-bottom:18px;color:var(--text);
}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.cols-3{grid-template-columns:1fr}}

/* KPIs read as numbers on the page, not as four more boxes. */
.kpi-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:26px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
@media(max-width:880px){.kpi-row{grid-template-columns:1fr 1fr}}
.kpi{
  padding:20px 22px;border-right:1px solid var(--line);
  transition:background .22s var(--ease);
}
.kpi:last-child{border-right:none}
.kpi:hover{background:var(--fill)}
@media(max-width:880px){
  .kpi:nth-child(2n){border-right:none}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.kpi-val{
  font-family:var(--f-display);font-size:30px;font-weight:600;
  letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;
}
.kpi-val.blue{color:var(--blue)}.kpi-val.green{color:var(--green)}.kpi-val.red{color:var(--red-br)}
.kpi-val.gold{color:var(--gold)}.kpi-val.amber{color:var(--amber)}
.kpi-label{
  font-size:10px;color:var(--dim);margin-top:8px;text-transform:uppercase;
  letter-spacing:.12em;font-family:var(--f-mono);
}

table,.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
thead tr{border-bottom:1px solid var(--line)}
th{
  text-align:left;padding:11px 14px;font-size:10px;font-weight:500;color:var(--dim);
  text-transform:uppercase;letter-spacing:.12em;font-family:var(--f-mono);white-space:nowrap;
}
td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:middle;letter-spacing:-.008em}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .15s var(--ease)}
tbody tr:hover td{background:var(--fill)}
td.mono{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:0}

.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;
  padding:3px 9px;border-radius:999px;font-family:var(--f-mono);letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;
}
.badge-approved,.badge.ok{background:var(--green-10);color:var(--green);border:1px solid var(--green-10)}
.badge-denied,.badge.bad{background:var(--red-10);color:var(--red-br);border:1px solid var(--red-25)}
.badge-open{background:var(--fill);color:var(--muted);border:1px solid var(--line)}
.badge.warn{background:var(--gold-10);color:var(--gold);border:1px solid var(--gold-10)}

.empty-state,.ap-empty,.rep-empty,.apx-empty{
  padding:56px 20px;text-align:center;color:var(--dim);font-size:13.5px;
  letter-spacing:-.008em;line-height:1.6;
}

.bar-track,.progress-track{height:5px;border-radius:99px;background:var(--fill-2);overflow:hidden}
.bar-fill,.progress-fill{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s var(--ease)}
.bar-fill.done,.progress-fill.done{background:var(--green)}

/* ═══ BUTTONS ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-size:14.5px;font-weight:600;
  letter-spacing:-.012em;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),
             transform .18s var(--ease),box-shadow .2s var(--ease),opacity .18s;
}
.btn:active{transform:scale(.975)}
.btn-primary,.btn-red{background:var(--red);color:var(--on-accent)}
.btn-primary:hover,.btn-red:hover{background:var(--red-br);box-shadow:var(--shadow-glow)}
.btn-ghost{background:var(--raised);color:var(--text);border:1px solid var(--line-2);box-shadow:0 1px 1px rgba(0,0,0,.04)}
.btn-ghost:hover{background:var(--fill-3)}
.btn-discord{background:#5865F2;color:#fff}
.btn-discord:hover{background:#6b76f5}
.btn-danger{background:var(--red-10);color:var(--red-br);border:1px solid var(--red-25)}
.btn-danger:hover{background:var(--red-25)}
.btn:disabled,.btn-sm:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none}

.btn-sm{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:8px 14px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:600;letter-spacing:-.008em;line-height:1.2;
  /* A raised surface rather than a translucent fill: on a white card the old
     4.5%-black wash was effectively invisible, so secondary actions read as
     plain text. Surface + border + hairline shadow makes them look pressable
     without shouting. */
  border:1px solid var(--line-2);background:var(--raised);color:var(--text);
  box-shadow:0 1px 1px rgba(0,0,0,.04);
  cursor:pointer;white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease),
             transform .14s var(--ease),box-shadow .16s var(--ease);
}
.btn-sm:hover{background:var(--fill-3);border-color:var(--text-3,var(--line-2))}
.btn-sm:active{transform:scale(.97)}
.btn-sm:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.btn-sm.primary{background:var(--red);border-color:transparent;color:var(--on-accent)}
.btn-sm.primary:hover{background:var(--red-br);box-shadow:var(--shadow-glow)}
.btn-sm.approve{background:var(--green-10);border-color:var(--green-10);color:var(--green)}
.btn-sm.approve:hover{background:var(--green-10);border-color:var(--green)}
.btn-sm.deny,.btn-sm.danger{background:var(--red-10);border-color:var(--red-25);color:var(--red-br)}
.btn-sm.deny:hover,.btn-sm.danger:hover{background:var(--red-25)}
.btn-sm:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ═══ FORMS ═════════════════════════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;text-align:left}
.field label{font-size:11px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-family:var(--f-mono)}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=url],input[type=date],input[type=search],textarea,select{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--bg2);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:14.5px;letter-spacing:-.01em;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  outline:none;-webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--red-10);background:var(--panel)}
input:hover:not(:focus),textarea:hover:not(:focus),select:hover:not(:focus){border-color:var(--line-2)}
input:disabled,textarea:disabled,select:disabled{opacity:.5;cursor:not-allowed}
textarea{resize:vertical;min-height:100px;line-height:1.6}
select{
  cursor:pointer;padding-right:38px;background-repeat:no-repeat;background-position:right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23888' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
option{background:var(--panel);color:var(--text)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}

/* ═══ MODAL ═════════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:9000;
  background:var(--overlay);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;
}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:28px;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);
  transform:scale(.96) translateY(8px);transition:transform .28s var(--ease);
}
.modal-overlay.open .modal{transform:scale(1) translateY(0)}
.modal h3{font-family:var(--f-display);font-weight:650;font-size:20px;letter-spacing:-.03em;margin-bottom:20px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

.pick{
  position:absolute;top:100%;left:0;right:0;z-index:30;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-sm);
  margin-top:6px;max-height:220px;overflow-y:auto;box-shadow:var(--shadow-lg);
}
.pick-row{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;font-size:13px;transition:background .12s}
.pick-row:hover{background:var(--fill)}
.pick-row img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.pick-row+.pick-row{border-top:1px solid var(--line)}

#toast{
  position:fixed;bottom:28px;left:50%;transform:translate(-50%,16px);
  background:var(--text);color:var(--bg);
  padding:12px 22px;border-radius:999px;font-size:13px;font-weight:550;letter-spacing:-.01em;
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  z-index:9999;max-width:calc(100vw - 40px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--shadow-lg);
}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.table-scroll table{min-width:520px}
@media(max-width:640px){
  .table-scroll table{font-size:12.5px}
  .table-scroll th,.table-scroll td{padding:9px 9px}
}

.media-gone{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:12px;background:var(--raised);border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}

/* ═══ STAFF GUIDE — documentation ═══════════════════════════════════════ */
.doc{max-width:1120px}
.doc-top{padding-bottom:22px;border-bottom:1px solid var(--line)}
.doc-kicker{
  font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.doc-top h1{
  font-family:var(--f-display);font-weight:700;font-size:31px;letter-spacing:-.032em;
  color:var(--text);margin:10px 0 0;
}
.doc-sub{font-size:15px;line-height:1.65;color:var(--muted);margin:12px 0 0;max-width:64ch}

/* Tab strip — an underlined rail, not pills. */
.doc-tabs{
  display:flex;gap:2px;margin-top:22px;overflow-x:auto;
  border-bottom:1px solid var(--line);scrollbar-width:none;
}
.doc-tabs::-webkit-scrollbar{display:none}
.doc-tab{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:11px 15px;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;font-size:13.5px;font-weight:550;color:var(--dim);cursor:pointer;
  white-space:nowrap;transition:color .18s var(--ease),border-color .18s var(--ease);
  -webkit-user-select:none;user-select:none;   /* clicking a tab should not select its text */
}
/* The global focus ring drew a hard red box around the whole tab. A tab is
   already marked by its underline, so it only needs a soft hint. */
.doc-tab:focus-visible{outline:none;background:var(--fill);border-radius:6px 6px 0 0}
.doc-tab:hover{color:var(--text)}
.doc-tab.active{color:var(--text);border-bottom-color:var(--red)}
.doc-tab-n{font-family:var(--f-mono);font-size:10px;color:var(--line-2);letter-spacing:.04em}
.doc-tab-edit{
  font:inherit;font-size:13.5px;font-weight:550;color:var(--text);
  background:var(--panel);border:1px solid var(--red);border-radius:5px;
  padding:2px 7px;margin:-3px 0;min-width:70px;outline:none;
  box-shadow:0 0 0 3px var(--red-10);
}
.doc-tab.active .doc-tab-n{color:var(--red)}
.doc-tab-c{
  font-family:var(--f-mono);font-size:10px;padding:1px 6px;border-radius:999px;
  background:var(--fill-2);color:var(--dim);
}
.doc-tab.active .doc-tab-c{background:var(--red-10);color:var(--red-br)}

.doc-lead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin:22px 0 6px;
}
.doc-tools{display:flex;align-items:center;gap:10px;flex:none}
.doc-add-btn{white-space:nowrap;flex:none}
.doc-blurb{font-size:14px;line-height:1.65;color:var(--muted);margin:0;max-width:58ch}
.doc-search{position:relative;flex:none;min-width:230px}
.doc-search svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;color:var(--dim);pointer-events:none;
}
.doc-search input{
  width:100%;padding:9px 12px 9px 32px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--panel);color:var(--fg);
  font-family:inherit;font-size:13px;outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.doc-search input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-10)}

.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) 216px;gap:40px;align-items:start;margin-top:26px}
.doc-main{min-width:0}

/* Sections read as chapters separated by rules, not as stacked cards. */
.doc-sec{padding:30px 0;border-bottom:1px solid var(--line);scroll-margin-top:88px}
.doc-sec:first-child{padding-top:8px}
.doc-sec:last-child{border-bottom:0}
.doc-sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.doc-sec-n{font-family:var(--f-mono);font-size:11px;font-weight:600;color:var(--red);flex:none}
.doc-sec-head h2{
  font-family:var(--f-display);font-weight:650;font-size:19px;letter-spacing:-.024em;
  color:var(--text);margin:0;flex:1;
}
.doc-sec-tools{flex:none;display:flex;gap:6px;flex-wrap:wrap}
.doc-edit{flex:none;opacity:.55;transition:opacity .18s var(--ease)}
.doc-sec:hover .doc-edit,.doc-edit:focus{opacity:1}
@media(hover:none){.doc-edit{opacity:1}}
/* Arrow buttons are icon-width; the text ones keep their natural size. */
.doc-sec-tools .doc-edit[aria-label]{min-width:34px;padding:8px 9px;font-size:13px}
.doc-tab-add{
  flex:none;margin-left:6px;align-self:center;
  color:var(--muted);font-weight:600;border-bottom-color:transparent!important;
}
.doc-tab-add:hover{color:var(--red)}

.guide-body{padding-left:26px}
.guide-body p{font-size:14.5px;line-height:1.74;color:var(--muted);margin:12px 0 0;max-width:72ch}
.guide-body strong{color:var(--text);font-weight:600}
.guide-body code{
  font-family:var(--f-mono);font-size:12.5px;background:var(--fill-2);
  padding:2px 6px;border-radius:5px;color:var(--red-br);
}
.gb-h{
  font-family:var(--f-display);font-size:13.5px;font-weight:650;letter-spacing:.005em;
  color:var(--text);margin:26px 0 0;padding-top:2px;scroll-margin-top:88px;
}
.gb-h:first-child{margin-top:14px}

.gb-ul,.gb-ol{margin:12px 0 0;padding:0;list-style:none;max-width:72ch}
.gb-ul li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.7;color:var(--muted);margin-top:7px}
.gb-ul li::before{
  content:"";position:absolute;left:3px;top:.72em;
  width:6px;height:1px;background:var(--line-2);
}
.gb-ol{counter-reset:gstep}
.gb-ol li{
  position:relative;counter-increment:gstep;padding-left:32px;
  font-size:14.5px;line-height:1.7;color:var(--muted);margin-top:11px;
}
.gb-ol li::before{
  content:counter(gstep);position:absolute;left:0;top:.08em;
  width:21px;height:21px;border-radius:6px;
  background:var(--fill-2);color:var(--text);
  font-family:var(--f-mono);font-size:10.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}

.guide-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:16px}
.guide-table th{
  padding:10px 13px;text-align:left;white-space:nowrap;
  background:var(--fill);border-bottom:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.guide-table td{padding:11px 13px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.guide-table tbody tr:last-child td{border-bottom:0}
.guide-table tbody tr:hover td{background:var(--fill)}
.guide-table td:first-child{color:var(--text);font-weight:550}
.guide-table .gb-none{color:var(--dim)}
.table-scroll:has(.guide-table){border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-top:16px}
.table-scroll:has(.guide-table) .guide-table{margin-top:0}

.guide-edited-note{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--dim);
  margin:20px 0 0 26px;
}

/* New-section composer (superuser only). */
.doc-new{
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--panel);
  padding:20px;margin-bottom:26px;
}
.doc-new-h{
  font-family:var(--f-mono);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:15px;
}
.doc-new-row{display:flex;gap:14px;flex-wrap:wrap}
.doc-new label{
  display:flex;flex-direction:column;gap:6px;flex:1;min-width:190px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.doc-new-full{width:100%;margin-top:14px}
.doc-new input,.doc-new select,.doc-new textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--raised);color:var(--fg);font-family:inherit;font-size:13.5px;
  letter-spacing:normal;text-transform:none;outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.doc-new textarea{
  min-height:220px;resize:vertical;font-family:var(--f-mono);font-size:12.5px;line-height:1.65;
}
.doc-new input:focus,.doc-new select:focus,.doc-new textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 3px var(--red-10);
}
.doc-new-actions{display:flex;gap:8px;margin-top:16px}

/* Brief highlight when a guide-update link opens a specific section. */
.doc-sec-flash{animation:docFlash 2.2s var(--ease)}
@keyframes docFlash{
  0%,18%{background:var(--red-10);box-shadow:inset 3px 0 0 var(--red)}
  100%{background:transparent;box-shadow:inset 3px 0 0 transparent}
}

/* Sticky section index. */
.doc-index{position:sticky;top:88px}
.doc-ix-t{
  font-family:var(--f-mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);padding-bottom:11px;border-bottom:1px solid var(--line);
}
.doc-ix-list{display:block;max-height:min(58vh,520px);overflow-y:auto}
.doc-ix-list a{
  display:flex;gap:9px;padding:8px 0 8px 12px;border-left:1px solid var(--line);
  font-size:12.5px;line-height:1.45;color:var(--dim);text-decoration:none;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.doc-ix-list a:hover{color:var(--text);border-left-color:var(--red)}
.doc-ix-n{font-family:var(--f-mono);font-size:10px;color:var(--line-2);flex:none}
.doc-ix-empty{display:block;padding:10px 0 0 12px;font-size:12.5px;color:var(--dim)}
.doc-ix-f{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.6;color:var(--dim);
}

@media(max-width:1080px){
  .doc-grid{grid-template-columns:1fr;gap:0}
  .doc-index{display:none}
}
@media(max-width:640px){
  .doc-top h1{font-size:25px}
  .guide-body{padding-left:0}
  .guide-edited-note{margin-left:0}
  .doc-lead{align-items:stretch}
  .doc-search{min-width:0;width:100%}
  .doc-tools{width:100%}
  .doc-edit{opacity:1}
}

/* ═══ SHARED ATOMS ══════════════════════════════════════════════════════ */
.pill,.apx-pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:500;letter-spacing:-.005em;
  background:var(--fill);border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.pill.on,.pill.active,.apx-pill.open{background:var(--red-10);border-color:var(--red-25);color:var(--red-br)}
.pill.ok{background:var(--green-10);border-color:var(--green-10);color:var(--green)}
.pill.warn{background:var(--gold-10);border-color:var(--gold-10);color:var(--gold)}
.apx-pill.closed{background:var(--fill);color:var(--muted)}

.dhub-lbl{display:block;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}

.record-card,.rep-item,.apx-card,.q-card,.submit-card,.profile-card,.maint-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:12px;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.record-card:hover,.rep-item:hover,.apx-card:hover{border-color:var(--line-2)}
.record-row,.history-row,.rule-row,.milestone-row,.rep-header,.apx-head,.info-header{
  display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;
}
.rr-meta,.apx-meta,.rep-time{font-size:12px;color:var(--dim);font-family:var(--f-mono);letter-spacing:0}
.rr-reason,.rep-msg,.apx-note{font-size:13.5px;color:var(--muted);line-height:1.65;margin-top:8px}
.rr-punishment{font-size:13px;color:var(--red-br);font-weight:550}
.rep-response{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--fill);border-left:2px solid var(--accent);font-size:13.5px;color:var(--muted);line-height:1.65}
.rep-status,.rstatus,.status{font-size:11px;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.rep-charcount,.q-hint{font-size:11.5px;color:var(--dim);margin-top:6px}
.rep-list-title,.q-label,.apf-q label{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.012em;margin-bottom:8px;display:block}

.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.status-tile{display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.status-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--fill)}
.status-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);border:1px solid var(--gold-10);background:var(--gold-10);color:var(--gold);font-size:13.5px;margin-bottom:16px}

.file-drop{
  border:1px dashed var(--line-2);border-radius:var(--r);padding:26px 20px;
  text-align:center;color:var(--dim);font-size:13.5px;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s;
}
.file-drop:hover{border-color:var(--red-25);background:var(--red-10);color:var(--muted)}
.file-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.file-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);background:var(--fill);font-size:13px;color:var(--muted)}
.file-item .remove{margin-left:auto;color:var(--dim);cursor:pointer;transition:color .16s}
.file-item .remove:hover{color:var(--red-br)}

.avatar,.avatar-placeholder{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;background:var(--raised)}
.avatar-placeholder{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--dim)}
.profile-name{font-size:17px;font-weight:650;letter-spacing:-.024em;color:var(--text)}
.profile-sub{font-size:12.5px;color:var(--dim);margin-top:2px}

.coin-banner{display:flex;align-items:center;gap:14px;padding:18px 20px;margin-bottom:16px;border-radius:var(--r-lg);border:1px solid var(--gold-10);background:var(--gold-10)}
.milestone-check{color:var(--green);flex:none}
.milestone-coins,.history-amount,.amount{font-family:var(--f-mono);font-weight:500;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:0}
.milestone-info{min-width:0;flex:1}
.link-code-box,.preview-box{font-family:var(--f-mono);font-size:13.5px;letter-spacing:.04em;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;color:var(--text);user-select:all;word-break:break-all}

.legal-wrap,.info-wrap,.rep-wrap,.apf-wrap,.apply-wrap,.guest-wrap,.maint-wrap,.wg-wrap{max-width:760px;margin:0 auto;padding:110px 22px 80px;position:relative;z-index:1}
.legal-wrap h1,.info-wrap h1{font-family:var(--f-display);font-weight:700;font-size:34px;letter-spacing:-.036em;margin-bottom:10px}
.legal-updated{font-family:var(--f-mono);font-size:11.5px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:34px}
.legal-wrap h2{font-family:var(--f-display);font-weight:650;font-size:20px;letter-spacing:-.028em;margin:34px 0 12px}
.legal-wrap p,.legal-wrap li{font-size:14.5px;line-height:1.75;color:var(--muted)}
.legal-wrap ul{margin:0 0 14px 20px}
.legal-table{width:100%;border-collapse:collapse;font-size:13px;margin:14px 0}
.legal-table th,.legal-table td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.legal-table th{background:var(--fill);color:var(--text);font-weight:600}
.lede,.apf-lede,.help,.note{font-size:15px;line-height:1.68;color:var(--muted);margin-bottom:22px}
.note{font-size:13px;color:var(--dim)}
.back-link,.apf-back{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--dim);transition:color .18s}
.back-link:hover,.apf-back:hover{color:var(--text)}

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC SITE
═══════════════════════════════════════════════════════════════════════════ */
.site-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--bg);transition:opacity .55s var(--ease),visibility .55s}
.site-loader.hidden{opacity:0;visibility:hidden}
.loader-badge{position:relative;width:72px;height:72px}
.loader-glow{position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,var(--red-10),transparent 70%);animation:loaderPulse 2.2s ease-in-out infinite}
@keyframes loaderPulse{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.loader-ring{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-badge img{width:72px;height:72px;border-radius:16px;object-fit:cover;position:relative}
.loader-word{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.024em}
.loader-text{font-family:var(--f-mono);font-size:11px;color:var(--dim);letter-spacing:.11em;text-transform:uppercase}
.loader-text .dot{animation:dotBlink 1.4s ease-in-out infinite}
.loader-text .dot:nth-child(2){animation-delay:.2s}.loader-text .dot:nth-child(3){animation-delay:.4s}
@keyframes dotBlink{0%,100%{opacity:.25}50%{opacity:1}}

.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--bg)}
.grid-bg::before,.grid-bg::after{content:"";position:absolute;border-radius:50%;animation:liquidDrift 34s ease-in-out infinite alternate;will-change:transform}
.grid-bg::before{width:52vw;height:52vw;top:-18vw;left:-12vw;background:radial-gradient(circle,var(--red-10),transparent 70%)}
.grid-bg::after{width:45vw;height:45vw;bottom:-15vw;right:-10vw;background:radial-gradient(circle,var(--blue-10),transparent 70%);animation-duration:44s;animation-delay:-6s}
@keyframes liquidDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,2vw) scale(1.05)}100%{transform:translate(-2vw,3vw) scale(.98)}}
@media(prefers-reduced-motion:reduce){.grid-bg::before,.grid-bg::after{animation:none}}

.hud-frame{position:relative}
.hud-corner{position:absolute;width:18px;height:18px;opacity:0;transition:opacity .5s var(--ease),width .35s var(--ease),height .35s var(--ease);pointer-events:none;z-index:2}
.hud-corner.tl{top:14px;left:14px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
.hud-corner.tr{top:14px;right:14px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
.hud-corner.bl{bottom:14px;left:14px;border-bottom:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
.hud-corner.br{bottom:14px;right:14px;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
.hud-frame.is-visible .hud-corner{opacity:.7}
.hud-frame:hover .hud-corner{opacity:1;width:24px;height:24px}
@media(prefers-reduced-motion:reduce){.hud-corner{transition:none}}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.tick-label{position:relative;display:inline-block;padding:0 16px}
.tick-label::before,.tick-label::after{content:"";position:absolute;top:50%;width:7px;height:7px;border:1.5px solid var(--accent);transform:translateY(-50%);opacity:.65}
.tick-label::before{left:0;border-right:none;border-bottom:none}
.tick-label::after{right:0;border-left:none;border-top:none}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:66px;
  display:flex;align-items:center;justify-content:space-between;padding:0 30px;
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line);
}
.nav::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--red-25) 35%,var(--red-25) 65%,transparent);opacity:.6}
.nav-brand{display:flex;align-items:center;gap:11px;min-width:0;flex-shrink:0}
.nav-brand img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex-shrink:0}
.nav-brand span{font-family:var(--f-display);font-weight:700;font-size:16.5px;letter-spacing:-.018em;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:2px;background:var(--fill);border:1px solid var(--line);border-radius:999px;padding:4px}
.nav-links a{padding:8px 15px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--muted);transition:color .18s var(--ease),background .18s var(--ease);white-space:nowrap}
.nav-links a:hover{color:var(--text);background:var(--fill-2)}
.nav-links .nav-div,.nav-sep{width:1px;height:16px;background:var(--line-2);margin:0 5px;flex-shrink:0}
.nav-cta{background:var(--red)!important;color:var(--on-accent)!important;font-weight:600!important;padding:8px 18px!important}
.nav-cta:hover{background:var(--red-br)!important;box-shadow:var(--shadow-glow)}
.nav-staff{display:flex;align-items:center;gap:6px;color:var(--text)!important;background:var(--fill-2)!important;border:1px solid var(--line-2)}
.nav-staff:hover{background:var(--fill-3)!important}
.nav-staff .icon{transition:transform .2s var(--ease)}
.nav-staff:hover .icon{transform:translateX(2px)}
.nav-burger,.nav-toggle{display:none;width:38px;height:38px;border-radius:var(--r-sm);flex-shrink:0;background:var(--fill);border:1px solid var(--line-2);color:var(--text);align-items:center;justify-content:center}
.nav-burger svg{transition:transform .2s var(--ease)}
.nav-burger.open svg{transform:rotate(90deg)}
.mobile-menu{
  position:fixed;top:66px;left:0;right:0;bottom:0;z-index:90;
  background:var(--panel);border-bottom:1px solid var(--line);
  display:none;flex-direction:column;gap:2px;padding:14px 20px 22px;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .34s var(--ease),opacity .28s var(--ease);
}
.mobile-menu.open{max-height:calc(100vh - 66px);opacity:1;overflow-y:auto}
.mobile-menu a{padding:13px 12px;border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line)}
.mobile-menu a:last-child,.mobile-menu a.nav-cta,.mobile-menu a.btn{border-bottom:none}
.mobile-menu a.nav-cta{background:var(--red);color:var(--on-accent);text-align:center;font-weight:600;margin-top:8px}
body.menu-open{position:fixed;overflow:hidden;width:100%}

.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:110px 40px 130px;overflow:hidden}
.hero-media,.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img,.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero-media::after,.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--bg) 30%,transparent 92%),linear-gradient(to top,var(--bg) 0%,transparent 34%)}
.hero-content{position:relative;z-index:1;max-width:680px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text);background:var(--fill);border:1px solid var(--line-2);padding:6px 14px;border-radius:999px;margin-bottom:26px}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;animation:pulseRing 2s ease-out infinite}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 var(--green-10)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-content h1{font-family:var(--f-display);font-weight:700;font-size:clamp(48px,7vw,94px);line-height:1.02;letter-spacing:-.04em;margin-bottom:22px}
.hero-content h1 em{font-style:normal;color:var(--red-br)}
.hero-content p{font-size:17px;color:var(--muted);line-height:1.62;max-width:520px;margin-bottom:36px;letter-spacing:-.013em}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-panel{position:absolute;top:50%;right:56px;transform:translateY(-50%);z-index:1;width:238px;background:var(--glass-bg);backdrop-filter:var(--glass-blur-lg);-webkit-backdrop-filter:var(--glass-blur-lg);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-lg)}
.hero-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.hero-panel-head span{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.hero-panel-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0}
.hero-panel-row .lbl{font-size:12.5px;color:var(--muted)}
.hero-panel-row .val{font-family:var(--f-mono);font-size:12.5px;font-weight:500;color:var(--text)}
.hero-panel-row .val.ok{color:var(--green)}
.ticker{position:absolute;bottom:0;left:0;right:0;z-index:2;background:var(--red);border-top:1px solid var(--line);padding:10px 0;overflow:hidden}
.ticker-track{display:flex;gap:44px;width:max-content;animation:tickerScroll 70s linear infinite}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.93);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.ticker-item b{font-weight:600}
.ticker-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.65);flex-shrink:0}

section{position:relative;z-index:1;padding:112px 40px}
/* That padding is for the public site's full-height bands. The ops pages use
   <section class="ap-section">, which was inheriting ~224px of dead space per
   block. Scoped to that class only — a blanket `.staff-wrap section` reset
   also out-specifies component padding like .h-card and flattens it. */
.staff-wrap section.ap-section{padding:0}
.wrap{max-width:var(--maxw);margin:0 auto}
.section-head,.sec-head{max-width:660px;margin:0 auto 60px}
.section-head .eyebrow,.sec-head .eyebrow{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-br);margin-bottom:16px}
.section-head h2,.sec-head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(32px,4.4vw,50px);line-height:1.06;letter-spacing:-.034em}
.section-head p,.sec-head p{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.65;max-width:560px;letter-spacing:-.013em}

.depts{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:820px){.depts{grid-template-columns:1fr}}
.dept-card{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--panel);transition:box-shadow .4s var(--ease)}
.dept-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.dept-card:hover img{transform:scale(1.04)}
.dept-card:hover{box-shadow:inset 0 0 0 1px var(--red-25)}
.dept-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,11,.94) 0%,rgba(8,9,11,.1) 58%)}
.dept-info{position:absolute;bottom:0;left:0;right:0;z-index:1;padding:26px 28px;color:#fff}
.dept-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#FF8A85;background:rgba(8,9,11,.6);border:1px solid rgba(255,138,133,.35);padding:4px 9px;border-radius:5px;display:inline-block;margin-bottom:11px}
.dept-tag.gold{color:#E8B855;border-color:rgba(232,184,85,.35)}
.dept-info h3{font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:-.028em;line-height:1.1;margin-bottom:7px}
.dept-info p{font-size:13px;color:rgba(255,255,255,.68);line-height:1.6;max-width:350px}
.dept-body{padding:26px 28px}
.dept-subhead{max-width:var(--maxw);margin:64px auto 26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.dept-subhead h3{font-family:var(--f-display);font-weight:700;font-size:28px;letter-spacing:-.03em;margin-bottom:8px}
.dept-subhead p{font-size:14.5px;color:var(--muted)}
.dept-subhead.underworld h3{color:var(--gold)}
.dept-subhead.underworld{border-color:var(--gold-10)}
.dept-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden}
.underworld-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:720px){.underworld-grid{grid-template-columns:1fr}}
.dept-logo-card{position:relative;overflow:hidden;cursor:default;background:var(--panel)}
.dept-logo-card img{width:100%;aspect-ratio:16/8;object-fit:cover;transition:transform .6s var(--ease)}
.dept-logo-card:hover img{transform:scale(1.03)}
.dept-logo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,11,.92) 0%,transparent 64%)}
.dept-logo-card .dept-info{padding:19px 20px}
.dept-logo-card .dept-info h3{font-size:18px}
.dept-logo-card.underworld .dept-tag{color:#E8B855;border-color:rgba(232,184,85,.35)}

.stats{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat{padding:38px 24px;text-align:center;border-right:1px solid var(--line);transition:background .3s var(--ease)}
.stat:hover{background:var(--fill)}
.stat:last-child{border-right:none}
.stat-num{font-family:var(--f-display);font-size:42px;font-weight:600;line-height:1;letter-spacing:-.04em;color:var(--red-br)}
.stat-label{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;margin-top:12px;font-family:var(--f-mono)}

.gallery{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:172px;gap:6px}
.gallery figure{overflow:hidden;cursor:zoom-in;position:relative;margin:0;border-radius:var(--r-sm)}
.gallery figure:first-child{grid-column:1/3;grid-row:1/3}
.gallery figure:nth-child(4){grid-column:3/5}
.gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .3s}
.gallery figure::after{content:"";position:absolute;inset:0;background:transparent;transition:.3s}
.gallery figure:hover img{transform:scale(1.04);filter:brightness(.84)}
.gallery figure:hover::after{background:var(--red-10)}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:140px}.gallery figure:first-child,.gallery figure:nth-child(4){grid-column:1/3;grid-row:auto}}

.features{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(max-width:860px){.features{grid-template-columns:1fr}}
.feature{padding:34px 30px;background:var(--card);transition:background .3s var(--ease)}
.feature:hover{background:var(--raised)}
.feature-num{font-family:var(--f-mono);font-size:10.5px;color:var(--red-br);letter-spacing:.12em;text-transform:uppercase}
.feature h3{font-family:var(--f-display);font-weight:650;font-size:21px;letter-spacing:-.028em;margin:14px 0 10px}
.feature p{font-size:14px;color:var(--muted);line-height:1.68}

.cta-band,.join-band{position:relative;max-width:var(--maxw);margin:0 auto;text-align:center;padding:80px 40px;background:var(--card);border:1px solid var(--red-25);border-radius:var(--r-xl);overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-50%;left:50%;width:620px;height:620px;transform:translateX(-50%);background:radial-gradient(circle,var(--red-10),transparent 65%);pointer-events:none}
.cta-band h2,.join-band h2{position:relative;font-family:var(--f-display);font-weight:700;font-size:clamp(32px,4.4vw,48px);letter-spacing:-.034em;margin-bottom:14px}
.cta-band p,.join-band p{position:relative;color:var(--muted);font-size:16px;margin-bottom:32px}
.join-band-inner{padding:36px 22px}
.join-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

footer{position:relative;z-index:1;padding:48px 40px;border-top:1px solid var(--line);background:var(--panel)}
.footer-row,.footer-top{max-width:var(--maxw);margin:0 auto 22px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.footer-wordgame-btn{flex-shrink:0;padding:10px 20px;font-size:13px}
.footer-brand,.foot-brand{display:flex;align-items:center;gap:10px}
.footer-brand img,.foot-brand img{width:28px;height:28px;border-radius:7px;object-fit:cover}
.footer-brand span,.foot-brand span{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:-.018em}
.footer-links,.foot-links{display:flex;gap:2px;flex-wrap:wrap}
.footer-links a,.foot-links a{font-size:13px;color:var(--muted);padding:6px 12px;border-radius:var(--r-sm);transition:color .18s,background .18s}
.footer-links a:hover,.foot-links a:hover{color:var(--text);background:var(--fill)}
.footer-copy,.footer-note,.foot-note{max-width:var(--maxw);margin:0 auto;font-size:10.5px;color:var(--dim);font-family:var(--f-mono);letter-spacing:.05em;border-top:1px solid var(--line);padding-top:20px}

.lightbox{position:fixed;inset:0;z-index:9998;background:var(--overlay);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:36px;opacity:0;visibility:hidden;transition:.3s var(--ease)}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:90vh;border-radius:var(--r);box-shadow:var(--shadow-lg)}
.lightbox-close{position:absolute;top:24px;right:24px;color:var(--muted);cursor:pointer;width:40px;height:40px;border-radius:50%;background:var(--panel);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:color .18s,background .18s}
.lightbox-close:hover{color:var(--text);background:var(--raised)}

.gate{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;position:relative;z-index:1}
.badge-icon{width:72px;height:72px;border-radius:18px;object-fit:cover;margin-bottom:26px;border:1px solid var(--line-2);box-shadow:var(--shadow-md)}
.gate h1{font-family:var(--f-display);font-weight:700;font-size:38px;letter-spacing:-.036em;margin:16px 0 12px}
.gate p{color:var(--muted);font-size:15px;max-width:420px;line-height:1.65;margin-bottom:32px}
.gate-fields{width:100%;max-width:350px}

/* The full nav needs about 1343px to lay out: 227px of brand, a 32px gap, and
   1028px of links inside 60px of padding. The burger only appeared below 760px,
   so at every width in between the last item ("Staff Portal") was clipped off
   the right edge — which is every common laptop. Two tiers fix it: tighten the
   nav so it fits down to ~1080, then switch to the burger below that. */
@media(max-width:1340px){
  .nav{padding:0 20px;gap:16px}
  .nav-brand{gap:9px}
  .nav-brand img{width:27px;height:27px}
  .nav-brand span{font-size:15px}
  .nav-links{gap:0;padding:3px}
  .nav-links a{padding:7px 10px;font-size:12.75px}
  .nav-links .nav-div,.nav-sep{margin:0 3px}
}
@media(max-width:1150px){
  .nav-brand span{font-size:14px}
  .nav-links a{padding:6px 8px;font-size:12.25px}
}
/* Below this the links genuinely cannot fit, so they move into the menu. */
@media(max-width:1150px){
  .nav{padding:0 20px}
  .nav-burger,.nav-toggle{display:flex}
  .mobile-menu{display:flex}
  .nav-links{display:none}
}
@media(max-width:760px){
  .nav{padding:0 18px}
  .hero{padding:96px 22px 120px}
  .hero-panel{display:none}
  section{padding:76px 22px}
}
@media(max-width:640px){
  .btn{width:100%}
  .hero-actions .btn,.join-actions .btn{width:auto;flex:1;min-width:150px}
  .btn-sm{padding:9px 14px;font-size:13px;min-height:38px}
  .modal{padding:22px;border-radius:var(--r);max-height:92vh}
  .modal h3{font-size:18px;margin-bottom:16px}
  .modal-actions{flex-wrap:wrap}
  .modal-actions .btn-sm{flex:1;min-width:100px;justify-content:center}
  .kpi{padding:15px 16px}
  .kpi-val{font-size:23px}
  .card{padding:18px 16px;border-radius:var(--r)}
  .gate{padding:32px 20px}
  .gate h1{font-size:29px}
  .badge-icon{width:62px;height:62px}
  .gate-fields{max-width:100%}
  .dept-body{padding:22px 18px}
  .dept-info h3{font-size:22px}
  .footer-top,.footer-row{flex-direction:column;align-items:flex-start;gap:16px}
  .footer-note,.foot-note{flex-direction:column;gap:6px}
  .join-band-inner{padding:36px 22px}
  .join-band h2{font-size:30px}
  .join-actions .btn{width:100%;flex:none}
  .sec-head h2,.section-head h2{font-size:28px}
}
@media(max-width:420px){
  .hero-content h1{font-size:40px}
  .status-inner{grid-template-columns:1fr 1fr}
  .status-cell:nth-child(odd){border-right:1px solid var(--line)}
}
@media(max-width:480px){html,body{overflow-x:hidden}.modal-overlay{padding:12px}}
@media(max-width:520px){.rep-item-top{flex-direction:column;align-items:flex-start!important;gap:8px!important}}

/* ═══ DISCORD VIEW — keeps Discord's own palette on purpose ═════════════ */
.dv-shell{display:flex;height:calc(100vh - 200px);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.dv-channels{width:232px;flex-shrink:0;background:#2b2d31;overflow-y:auto;padding:8px 0}
.dv-guild-name{padding:12px 16px;font-weight:700;font-size:15px;color:#f2f3f5;border-bottom:1px solid #1e1f22;margin-bottom:8px}
.dv-category{padding:12px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#949ba4}
.dv-channel{padding:7px 10px;margin:1px 8px;border-radius:4px;font-size:14.5px;color:#949ba4;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .1s,color .1s}
.dv-channel:hover{background:#35373c;color:#dbdee1}
.dv-channel.active{background:#3f4248;color:#fff}
.dv-main{flex:1;display:flex;flex-direction:column;background:#313338;min-width:0}
.dv-header{padding:14px 16px;font-weight:700;color:#f2f3f5;border-bottom:1px solid #1e1f22}
.dv-messages{flex:1;overflow-y:auto;padding:12px 0}
.dv-message{display:flex;gap:14px;padding:6px 16px;position:relative}
.dv-message:hover{background:#2e3035}
.dv-message:hover .dv-actions{opacity:1}
.dv-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:2px}
.dv-msg-body{flex:1;min-width:0}
.dv-msg-head{display:flex;align-items:baseline;gap:8px}
.dv-author{font-weight:600;font-size:15px;color:#f2f3f5}
.dv-bot-tag{background:#5865f2;color:#fff;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:.02em}
.dv-time{font-size:11.5px;color:#949ba4}
.dv-content{font-size:14.5px;color:#dbdee1;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.dv-reply-ref{font-size:12px;color:#949ba4;margin-bottom:2px}
.dv-attachment{margin-top:6px;font-size:13px}
.dv-attachment a{color:#00a8fc;text-decoration:none}
.dv-edited{font-size:10.5px;color:#949ba4}

/* Hover action bar — reply / react / edit / delete, Discord-style. */
.dv-actions{
  position:absolute;top:-10px;right:16px;display:flex;gap:2px;
  background:#2b2d31;border:1px solid #1e1f22;border-radius:6px;padding:2px;
  opacity:0;transition:opacity .1s;box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.dv-message:focus-within .dv-actions{opacity:1}
.dv-act{
  background:none;border:none;color:#b5bac1;cursor:pointer;
  font-size:13px;line-height:1;padding:5px 7px;border-radius:4px;transition:background .1s,color .1s;
}
.dv-act:hover{background:#404249;color:#f2f3f5}
.dv-act.danger:hover{background:#442326;color:#fa777c}

/* Reactions */
.dv-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.dv-reaction{
  display:inline-flex;align-items:center;gap:5px;
  background:#2b2d31;border:1px solid transparent;border-radius:8px;
  padding:2px 7px;font-size:13px;color:#dbdee1;cursor:pointer;transition:background .1s,border-color .1s;
}
.dv-reaction:hover{background:#37393f}
.dv-reaction.mine{background:#3b405a;border-color:#5865f2}
.dv-reaction img{width:16px;height:16px;object-fit:contain}
.dv-reaction span{font-size:11.5px;color:#b5bac1}
.dv-reaction.mine span{color:#c9cdfb}

/* Inline editor */
.dv-edit-box{margin-top:2px}
.dv-edit-input{
  width:100%;min-height:64px;resize:vertical;
  background:#383a40;border:1px solid #1e1f22;border-radius:6px;
  color:#dbdee1;font-family:var(--f-body);font-size:14.5px;line-height:1.4;padding:8px 10px;
}
.dv-edit-input:focus{outline:none;border-color:#5865f2}
.dv-edit-actions{display:flex;align-items:center;gap:8px;margin-top:6px}
.dv-edit-hint{font-size:11px;color:#949ba4}

/* Emoji picker */
.dv-emoji-pop{
  position:fixed;z-index:10000;display:flex;flex-wrap:wrap;gap:2px;width:196px;
  background:#2b2d31;border:1px solid #1e1f22;border-radius:8px;padding:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.dv-emoji-pop button{
  background:none;border:none;font-size:17px;line-height:1;cursor:pointer;
  padding:5px;border-radius:4px;transition:background .1s;
}
.dv-emoji-pop button:hover{background:#404249}
.dv-emoji-pop input{
  width:100%;margin-top:4px;background:#383a40;border:1px solid #1e1f22;border-radius:4px;
  color:#dbdee1;font-size:12.5px;padding:5px 7px;
}
.dv-emoji-pop input:focus{outline:none;border-color:#5865f2}
.dv-composer{padding:0 16px 16px}
.dv-reply-bar{display:flex;align-items:center;justify-content:space-between;background:#2b2d31;padding:6px 12px;border-radius:8px 8px 0 0;font-size:12.5px;color:#dbdee1}
.dv-reply-bar button{background:none;border:none;color:#949ba4;cursor:pointer;font-size:14px}
.dv-input-row{display:flex;gap:8px;align-items:flex-end;background:#383a40;border-radius:8px;padding:10px 12px}
.dv-input-row textarea{flex:1;background:none!important;border:none!important;color:#dbdee1;font-family:var(--f-body);font-size:14.5px;resize:none;max-height:120px;padding:2px 0}
.dv-input-row textarea:focus{outline:none;box-shadow:none!important}
.dv-send-btn{background:#5865f2;color:#fff;border:none;border-radius:4px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0}
.dv-send-btn:hover{background:#4752c4}
.dv-send-btn:disabled{opacity:.5;cursor:not-allowed}


/* ═══ LOW-END PERFORMANCE ════════════════════════════════════════════════
   backdrop-filter (blur + saturate) is re-computed every frame for whatever
   sits behind it, so on sticky headers it makes every scroll frame expensive.
   On phones and other coarse-pointer devices that cost dominates, and the
   effect is barely visible at those sizes anyway — so swap the glass for an
   opaque surface and stop the ambient drift. Desktop keeps the full effect.
════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px), (pointer:coarse){
  .nav,.staff-topbar,.hero-panel,.lightbox,.cmdk,.modal-overlay,.staff-backdrop{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .nav,.staff-topbar{background:var(--nav)!important}
  .hero-panel{background:var(--panel)!important}
  /* Two full-viewport gradient layers drifting forever is pure overhead on a
     device that is already struggling to scroll. */
  .grid-bg::before,.grid-bg::after{animation:none!important;will-change:auto}
}

/* Saves work on long lists: rows outside the viewport are not laid out or
   painted until they scroll close to it. */
.mod-list .mod-row,.doc-sec,.dv-message{content-visibility:auto}
.doc-sec{contain-intrinsic-size:auto 320px}
.dv-message{contain-intrinsic-size:auto 64px}

/* A <picture> is only a wrapper for source selection — it must not introduce
   a box, or rules written against the plain <img> (height:100%, absolute
   positioning) stop resolving against the real parent. */
picture{display:contents}

/* ═══ HOME ═══════════════════════════════════════════════════════════════
   The landing view: who you are, what time it is for the rest of the team,
   and your own record and outstanding work. Quiet by design — it is read at
   a glance, several times a day.
════════════════════════════════════════════════════════════════════════ */
/* On Home the greeting is the page heading, so the generic one is hidden.
   The status pill stays put — space-between still pushes it right against
   the now-empty title slot. */
body.page-home #pageTitle,
body.page-home #pageSub{display:none}
body.page-home .staff-header{padding-bottom:0;margin-bottom:0}

.h-hello{padding:0 0 24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.h-hello h2{
  font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3.6vw,36px);
  letter-spacing:-.032em;line-height:1.14;color:var(--text);margin:0;
}
.h-hello p{font-size:14.5px;color:var(--muted);margin:9px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.h-hello p span{
  font-size:12.5px;font-weight:550;letter-spacing:-.005em;
  color:var(--muted);background:var(--fill);border:1px solid var(--line);
  padding:3px 10px;border-radius:999px;
}

.h-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:16px;
}
.h-card-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.h-card-h h3{
  font-family:var(--f-display);font-size:14.5px;font-weight:650;letter-spacing:-.018em;
  color:var(--text);margin:0;flex:1;
}
.h-count{
  font-family:var(--f-mono);font-size:10px;color:var(--dim);
  background:var(--fill);border:1px solid var(--line);padding:2px 8px;border-radius:999px;
}

/* World clocks: the team's zones on the left, your own time on the right. */
.h-clocks-card{padding:20px 22px}
.h-clockbar{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.h-zones{display:flex;gap:26px;flex-wrap:wrap;flex:1;min-width:0}
.hz{transition:opacity .3s var(--ease)}
.hz.quiet{opacity:.4}
.hz-l{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.hz-f{font-size:14px;line-height:1}
.hz-off{font-family:var(--f-mono);font-size:9.5px;color:var(--dim);letter-spacing:.06em}
.hz-t{
  font-size:17px;font-weight:650;letter-spacing:-.016em;color:var(--text);
  margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* Your own clock — the reference point everything else is read against. */
.h-local{
  flex:none;text-align:right;padding-left:28px;border-left:1px solid var(--line);
}
.h-local-t{
  font-family:var(--f-display);font-size:clamp(30px,3.6vw,40px);font-weight:700;
  letter-spacing:-.032em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
}
.h-local-d{font-size:13px;color:var(--muted);margin-top:7px}

@media(max-width:820px){
  .h-clockbar{gap:18px}
  .h-zones{gap:18px}
  .h-local{width:100%;text-align:left;padding-left:0;padding-top:16px;
    border-left:0;border-top:1px solid var(--line)}
}

/* Equal height so the row reads as one band rather than three cards of
   different sizes with ragged bottoms. */
.h-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:stretch}
.h-grid .h-card{margin-bottom:0}

.h-list{list-style:none;margin:0;padding:0}
.h-list li{
  display:flex;align-items:baseline;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);
}
.h-list li:last-child{border-bottom:0;padding-bottom:0}
.h-li-main{flex:1;min-width:0}
.h-li-t{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
/* The case number, set like the timestamp on the right: small mono, quiet. */
.h-li-case{font-family:var(--f-mono);font-size:10.5px;font-weight:400;letter-spacing:.06em;color:var(--dim);margin-left:8px;vertical-align:1px}
.h-li-s{
  display:block;font-size:12.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.h-li-when{
  flex:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim);
}
/* Due dates are free text the assigner typed, so they are left in their own
   case and capped — uppercasing a sentence shouted, and a long one squeezed
   the task title into wrapping. */
.h-li-when.due{
  text-transform:none;letter-spacing:.02em;max-width:11ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.h-none{font-size:13px;color:var(--dim);padding:6px 0 2px}

@media(max-width:640px){
  .h-zones{gap:14px 20px}
  .hz-t{font-size:15px}
  .hz-l{font-size:12px}
}


/* A status chip that reads as a label, not a system readout — the mono
   uppercase wide-tracked treatment made every one of these look machine
   generated. */
.status-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:999px;
  font-size:12.5px;font-weight:550;letter-spacing:-.005em;
  color:var(--green);background:var(--green-10);
  border:1px solid rgba(53,194,126,.22);
}


/* Segmented control — used to pick who an assignment targets. */
.seg{display:inline-flex;gap:2px;padding:3px;background:var(--fill);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.seg button{
  flex:1;padding:7px 14px;border:0;border-radius:5px;background:none;
  font:inherit;font-size:12.5px;font-weight:550;color:var(--muted);cursor:pointer;
  white-space:nowrap;transition:background .16s var(--ease),color .16s var(--ease);
}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg button:focus-visible{outline:2px solid var(--red);outline-offset:1px}


/* The browser's own [hidden] rule is display:none, which any component rule
   that sets its own display (.field is display:flex, for one) silently beats.
   That made `el.hidden = true` do nothing in several places. */
[hidden]{display:none!important}


/* ═══ PERMISSIONS ════════════════════════════════════════════════════════ */
.perm-row{
  display:flex;align-items:flex-start;gap:24px;padding:15px 0;
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.perm-row:last-child{border-bottom:0;padding-bottom:0}
.perm-meta{flex:1;min-width:220px}
.perm-label{font-size:13.5px;font-weight:600;color:var(--text)}
.perm-help{font-size:12.5px;line-height:1.55;color:var(--muted);margin-top:3px;max-width:62ch}
.perm-roles{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:230px}
.perm-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.perm-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 6px 4px 10px;border-radius:999px;
  background:var(--fill);border:1px solid var(--line-2);
  font-size:12.5px;color:var(--text);
}
.perm-chip button{
  border:0;background:none;color:var(--dim);cursor:pointer;
  font-size:15px;line-height:1;padding:0 2px;border-radius:50%;
}
.perm-chip button:hover{color:var(--red-br)}
.perm-none{font-size:12.5px;color:var(--dim)}
.perm-add{
  width:100%;max-width:230px;padding:7px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--raised);color:var(--text);
  font-family:inherit;font-size:12.5px;cursor:pointer;
}
.perm-add:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-10)}
@media(max-width:720px){
  .perm-roles{align-items:stretch;min-width:0;width:100%}
  .perm-chips{justify-content:flex-start}
  .perm-add{max-width:none}
}


/* ═══ VIEW AS RANK ═══════════════════════════════════════════════════════ */
.preview-bar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;
  justify-content:center;gap:14px;flex-wrap:wrap;padding:9px 18px;
  background:var(--gold-10);border-bottom:1px solid rgba(226,181,88,.3);
  font-size:13px;color:var(--gold);
}
.preview-bar b{font-weight:650}
.preview-bar button{
  border:1px solid rgba(226,181,88,.4);background:none;color:var(--gold);
  font:inherit;font-size:12.5px;font-weight:600;padding:4px 12px;
  border-radius:999px;cursor:pointer;
}
.preview-bar button:hover{background:rgba(226,181,88,.14)}

.viewas-list{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow-y:auto}
.viewas-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;border:1px solid transparent;border-radius:var(--r-sm);
  background:none;font:inherit;font-size:13.5px;color:var(--text);
  cursor:pointer;text-align:left;transition:background .14s var(--ease);
}
.viewas-row:hover{background:var(--fill)}
.viewas-row.on{background:var(--red-10);border-color:var(--red-25);color:var(--red-br)}
.viewas-row span:last-child{font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}

/* ═══ GUIDE READ RECEIPTS ════════════════════════════════════════════════ */
.doc-read{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:22px 0 0 26px;padding-top:16px;border-top:1px solid var(--line);
}
.doc-read-btn.done{
  background:var(--green-10);border-color:rgba(53,194,126,.3);color:var(--green);
}
.doc-read-meta{font-size:12px;color:var(--dim)}
.doc-read-who{margin-left:auto}
.doc-readers{display:flex;flex-direction:column;max-height:46vh;overflow-y:auto}
.doc-reader{
  display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:13px;
}
.doc-reader:last-child{border-bottom:0}
.doc-reader span:last-child{font-family:var(--f-mono);font-size:10.5px;color:var(--dim)}
@media(max-width:640px){.doc-read{margin-left:0}}


/* Tab visibility picker, sat with the other tab tools. */
.doc-vis{
  display:inline-flex;align-items:center;gap:8px;min-height:34px;
  padding:0 10px 0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--raised);box-shadow:0 1px 1px rgba(0,0,0,.04);
}
.doc-vis>span{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;
}
.doc-vis select{
  border:0;background:none;color:var(--text);font:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer;outline:none;padding:6px 0;
}


/* ═══ AD QUEUE ═══════════════════════════════════════════════════════════ */
.adq-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.adq-slot{background:var(--panel);padding:14px 16px}
.adq-slot-d{font-size:16px;font-weight:650;letter-spacing:-.015em;color:var(--text)}
.adq-slot-l{font-size:12.5px;color:var(--muted);margin-top:3px}
.adq-slot-g{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-top:4px}

.adq-count{font-family:var(--f-mono);font-size:10px;color:var(--dim);
  background:var(--fill);border:1px solid var(--line);padding:2px 8px;border-radius:999px}

.adq-list{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.adq-row{display:flex;align-items:center;gap:16px;padding:13px 16px;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.adq-row:last-child{border-bottom:0}
.adq-row:hover{background:var(--fill)}
/* An ad whose day has arrived is the only thing here that needs attention. */
.adq-row.overdue{box-shadow:inset 3px 0 0 var(--gold)}
.adq-date{flex:none;width:104px}
.adq-day{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.adq-rel{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);margin-top:2px}
.adq-row.overdue .adq-rel{color:var(--gold)}
.adq-main{flex:1;min-width:180px}
.adq-title{font-size:13.5px;font-weight:600;color:var(--text)}
.adq-title span{font-weight:400;color:var(--muted)}
.adq-sub{font-size:12px;color:var(--dim);margin-top:3px}
.adq-view{flex:none}
.adq-actions{display:flex;gap:6px;flex:none;flex-wrap:wrap}
@media(max-width:720px){
  .adq-date{width:100%}
  .adq-row{gap:8px}
}

/* Site Users (superuser) */
.su-chip{display:inline-block;font-size:11px;padding:2px 7px;border:1px solid var(--line);border-radius:3px;margin:0 4px 4px 0;color:var(--muted)}
.su-chip b{color:var(--text);font-weight:600}
.su-badge{display:inline-block;font-size:10px;letter-spacing:.12em;padding:2px 6px;border:1px solid rgba(179,38,46,.7);color:#f0a3a8;border-radius:3px;vertical-align:middle;margin-left:4px}
tr.su-banned td{background:rgba(179,38,46,.06)}

/* Site Updates (Adin) */
.su-rel{border:1px solid var(--line);padding:16px 18px;margin-bottom:12px}
.su-rel.is-live{border-color:rgba(62,168,114,.4);background:rgba(62,168,114,.04)}
.su-rel.is-canary{border-color:rgba(226,181,88,.45);background:rgba(226,181,88,.04)}
.su-badge-live{font-size:10px;letter-spacing:.12em;padding:2px 6px;border:1px solid rgba(62,168,114,.6);color:var(--green);border-radius:3px}
.su-badge-canary{font-size:10px;letter-spacing:.12em;padding:2px 6px;border:1px solid rgba(226,181,88,.6);color:var(--gold);border-radius:3px}

/* ── Appeals: attachments and the on-hold conversation ────────────────────
   Shared by the appeal pages and the dashboard's review views. */
.apf-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:16px 0 8px}
.apf-grid{display:flex;flex-wrap:wrap;gap:8px}
.apf{display:flex;align-items:center;justify-content:center;width:112px;height:84px;border-radius:var(--r-sm);background:var(--raised);border:1px solid var(--line-2);overflow:hidden;text-decoration:none;color:var(--text)}
.apf img{width:100%;height:100%;object-fit:cover;display:block}
.apf-video{flex-direction:column;gap:6px;padding:8px}
.apf-play{width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--text)}
.apf-name{font-size:11px;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apf-missing{font-size:11.5px;color:var(--dim)}
.apt{display:flex;flex-direction:column;gap:10px;margin:4px 0}
.apt-m{max-width:88%;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;align-self:flex-start}
.apt-m.mine{align-self:flex-end}
.apt-m.from-reviewer{border-left:3px solid var(--gold)}
.apt-who{font-size:12px;font-weight:600;color:var(--muted);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.apt-role{font-weight:500;color:var(--dim)}
.apt-when{font-weight:400;color:var(--dim);font-size:11px}
.apt-text{font-size:13.5px;white-space:pre-wrap;word-break:break-word;margin-top:4px;line-height:1.5}
.apt-m .apf-grid{margin-top:8px}
.apt-turn{font-size:12.5px;color:var(--muted);margin:12px 0 4px}
.apr{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.apr-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.apr-text{width:100%;box-sizing:border-box}
.apr-files{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.apr-hint{font-size:11.5px;color:var(--dim)}
.apr-list{flex-basis:100%;display:flex;flex-direction:column;gap:4px}
.apr-file{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;background:var(--raised);border-radius:var(--r-sm);padding:6px 10px}
.apr-remove{background:none;border:0;color:var(--red-br);font:inherit;font-size:12px;cursor:pointer}
.apr-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.apr-note{font-size:12px;color:var(--dim);margin-right:auto}
.apl-thread{margin-top:14px;padding-top:4px;border-top:1px solid var(--line)}