/* Ascailia Network portal: Republic Orders Dossier.
   Fonts are self-hosted (SIL OFL): Big Shoulders Display/Stencil, Courier Prime, Public Sans. */

@font-face { font-family: "Big Shoulders"; src: url("/static/fonts/big-shoulders-display.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Big Shoulders Stencil"; src: url("/static/fonts/big-shoulders-stencil.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/static/fonts/courier-prime-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/static/fonts/courier-prime-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/static/fonts/public-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/static/fonts/public-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* order stock */
  --ground: #111214;
  --sheet: #18191b;
  --sheet-2: #202124;
  --well: #0c0d0e;
  --rule: #313236;
  --rule-strong: #4a4b50;
  /* ink */
  --ink: #ece8df;
  --ink-2: #b4afa5;
  --ink-3: #8f8a81;
  /* marks */
  --red: #c62828;
  --red-deep: #a11f1f;
  --red-ink: #f07167;
  --red-wash: #2a1414;
  --brass: #c9a15f;
  --field: #8fbf8f;
  --steel: #9fb4c8;

  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --stencil: "Big Shoulders Stencil", "Big Shoulders", sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --sans: "Public Sans", system-ui, sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  /* springs sampled from real spring physics (Apple-style bounce/duration): lift = bounce .3 over .42 s, settles in ~.66 s;
     pop = bounce .15 over .3 s, settles in ~.39 s. Use them with those transition lengths. */
  --spring: linear(0, 0.0525, 0.1765, 0.3321, 0.4919, 0.6388, 0.7635, 0.8626, 0.9365, 0.9877, 1.0202, 1.0381, 1.0453, 1.0453, 1.0409,
    1.0343, 1.0269, 1.0198, 1.0135, 1.0084, 1.0044, 1.0016, 0.9997, 0.9986, 0.998, 0.9979, 0.998, 0.9983, 1);
  --spring-pop: linear(0, 0.0357, 0.1212, 0.2314, 0.3495, 0.4645, 0.5701, 0.6629, 0.7419, 0.8071, 0.8597, 0.901, 0.9328, 0.9567, 0.9741,
    0.9864, 0.9949, 1.0004, 1.0037, 1.0055, 1.0062, 1.0062, 1.0058, 1.0052, 1.0045, 1.0038, 1.0031, 1.0024, 1);

  /* legacy names still used inline by board, documents and admin templates */
  --bg: var(--ground);
  --bg-dark: var(--well);
  --sidebar: #141517;
  --surface: #1c1d20;
  --surface-hover: #26272b;
  --accent: var(--red);
  --accent-hover: var(--red-deep);
  --danger: #e5534b;
  --success: var(--field);
  --text: var(--ink);
  --text-muted: var(--ink-2);
  --text-link: var(--brass);
  --border: var(--rule);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Sized to the screen: the whole sheet is in rem, so the root scales it from 16px (laptop) to ~19px (1080p+). */
html { font-size: clamp(16px, .42vw + 10.5px, 19px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--ground); color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  min-height: 100vh; display: flex; flex-direction: column;
  caret-color: var(--red-ink);
}
::selection { background: var(--red); color: #fff; }
* { scrollbar-color: var(--rule-strong) transparent; scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
a { color: var(--brass); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.1875rem; }
a:hover { color: var(--ink); }
img { display: block; max-width: 100%; }
/* left: 0 keeps it at its container's edge: left where it sits, one inside a sideways-scrolling table
   escaped the scroller and made the page wider (Safari lets you pinch out to it). */
.sr-only { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.icon { width: 1.125rem; height: 1.125rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }

/* ── type ─────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 5vw, 3.25rem); margin-bottom: 0.75rem; }
h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
h3 { font-size: 1.1875rem; font-weight: 700; }
p { max-width: 68ch; }
.muted { color: var(--ink-2); font-size: 0.9375rem; }
.mono { font-family: var(--mono); }
.lede { color: var(--ink-2); font-size: 1.0625rem; margin-bottom: 2.25rem; }

/* ── masthead + classification band ───────────────────── */
.classbar {
  background: var(--red-wash); border-bottom: 1px solid #4a1d1d;
  font: 700 0.8125rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-align: center; padding: 0.4375rem 1rem;
}
.classbar b { color: var(--red-ink); font-weight: 700; }
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 2rem; border-bottom: 1px solid var(--rule); background: var(--ground);
}
.wordmark { display: flex; align-items: baseline; gap: 0.75rem; color: var(--ink); text-decoration: none; }
.wordmark:hover { color: var(--ink); }
.wordmark-name { font: 800 1.5rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.wordmark-sub { font: 400 0.8125rem/1 var(--mono); color: var(--ink-3); }
.operator { display: flex; align-items: center; gap: 0.75rem; font: 400 0.875rem/1 var(--mono); color: var(--ink-2); min-width: 0; }
.operator-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.operator img { width: 1.875rem; height: 1.875rem; border-radius: 50%; }
.operator a.operator-me, .operator a.operator-link { border: 0; padding: 0.25rem 0.375rem; }
.operator a.operator-me { gap: 0.625rem; color: var(--ink); }
.operator a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink-2); text-decoration: none; padding: 0.375rem 0.5rem; border: 1px solid var(--rule); }
.operator a:hover { color: var(--ink); border-color: var(--rule-strong); }
.signout { display: contents; }
.signout button { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink-2); background: none; font: inherit;
  padding: 0.375rem 0.5rem; border: 1px solid var(--rule); cursor: pointer; }
.signout button:hover { color: var(--ink); border-color: var(--rule-strong); }
.inline-form { display: inline; }

/* ── shell ────────────────────────────────────────────── */
.layout { display: flex; flex: 1; min-height: 0; }
.main { flex: 1; min-width: 0; padding: 2.5rem clamp(1rem, 3vw, 3.5rem) 4rem; max-width: 86rem; }
.sidebar {
  width: 15.5rem; flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--rule);
  padding: 1.5rem 0.75rem; display: flex; flex-direction: column; gap: 2px;
}
.sidebar-header { padding: 0 0.75rem 1rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--rule); }
.sidebar-unit { font: 800 1.25rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); overflow-wrap: anywhere; }
.sidebar-clearance { margin-top: 0.625rem; }
.nav-item {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.75rem;
  color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500; border: 1px solid transparent;
}
.nav-item:hover { color: var(--ink); background: var(--sheet-2); }
.nav-item.active { color: var(--ink); background: var(--sheet-2); border-color: var(--rule); }
.nav-item.active .icon { color: var(--red-ink); }
.nav-item.locked { color: var(--ink-3); cursor: not-allowed; }
.nav-item.locked:hover { background: none; color: var(--ink-3); }
.nav-spacer { flex: 1; min-height: 1rem; }
.nav-list { display: flex; flex-direction: column; gap: 2px; flex: 1; }

/* ── stamps, clearance, redaction ─────────────────────── */
.stamp {
  display: inline-block; font: 800 0.9375rem/1 var(--stencil); letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-ink); border: 2px solid currentColor; padding: 0.375rem 0.625rem 0.3125rem; transform: rotate(-3deg);
}
.stamp.press { animation: press .55s var(--ease-out) both; }
@keyframes press { from { transform: rotate(-3deg) scale(1.14); } to { transform: rotate(-3deg) scale(1); } }
.clearance { display: inline-flex; align-items: center; gap: 0.5rem; font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.clearance .level { color: var(--c, var(--ink)); border: 1px solid currentColor; padding: 0.25rem 0.4375rem; }
.lvl-commander { --c: var(--red-ink); }
.lvl-admin { --c: var(--brass); }
.lvl-upload { --c: var(--field); }
.lvl-view { --c: var(--steel); }
.redact + .redact { margin-left: .45em; }
.redact { display: inline-block; height: .95em; background: #000; vertical-align: -.1em; box-shadow: 0 0 0 1px #000; }

/* ── the index: rows of files ─────────────────────────── */
.index { list-style: none; border-top: 1px solid var(--rule); }
.index > li { border-bottom: 1px solid var(--rule); }
.index-row {
  display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 1.25rem;
  padding: 1.125rem 1rem; color: var(--ink); text-decoration: none;
  transition: background-color .2s var(--ease-out);
}
a.index-row:hover { background: var(--sheet); color: var(--ink); }
a.index-row:hover .index-go .icon { transform: translateX(0.25rem); }
.index-title { font: 800 1.5rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.index-meta { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); margin-top: 0.375rem; }
.index-desc { color: var(--ink-2); font-size: 0.9375rem; margin-top: 0.25rem; }
.index-go { display: inline-flex; align-items: center; gap: 0.5rem; font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.index-go .icon { transition: transform .25s var(--ease-out); }
.index-row.locked { color: var(--ink-3); }
.index-row.locked .index-go { color: var(--ink-3); }
.index-num { font: 700 0.9375rem/1 var(--mono); color: var(--brass); text-align: center; }

.emblem { width: 3.5rem; height: 3.5rem; object-fit: cover; border: 1px solid var(--rule-strong); background: var(--well); }
.emblem-typed { display: grid; place-items: center; font: 700 0.8125rem/1 var(--mono); letter-spacing: .06em; color: var(--ink-2); }

.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); margin-bottom: 1.25rem; }
.crumbs a { color: var(--ink-2); }
.crumbs span[aria-hidden] { color: var(--rule-strong); }

.unit-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 0.75rem; }
.unit-head h1 { margin-bottom: 0; }
.unit-kicker { margin: 0 0 0.375rem; font: 700 0.8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.unit-kicker a { color: var(--ink-3); text-decoration: none; }
.unit-kicker a:hover { color: var(--brass); }
.unit-head .emblem { width: 4rem; height: 4rem; }

.notice { border: 1px solid var(--rule); background: var(--sheet); padding: 1.75rem; }
.notice h2 { margin-bottom: 0.625rem; }
.notice p + p { margin-top: 0.5rem; }

/* ── the dossier sheet (sign-in, dispatches) ──────────── */
.sheet-page { flex: 1; display: grid; place-items: center; padding: 3rem 1rem; }
.dossier { position: relative; width: 100%; max-width: 35rem; background: var(--sheet); border: 1px solid var(--rule); padding: 2.75rem 2.75rem 2rem; box-shadow: 0 1.5rem 3rem -1.5rem rgba(0,0,0,.7); }
.dossier .stamp { position: absolute; top: 1.75rem; right: 1.75rem; }
.dossier-title { font: 800 clamp(2.5rem, 9vw, 3.5rem)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.dossier-sub { font: 400 0.9375rem/1 var(--mono); color: var(--ink-3); margin: 0.625rem 0 1.75rem; }
.clauses { list-style: none; border-top: 1px solid var(--rule); margin-bottom: 1.75rem; }
.clauses li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 0.5rem; padding: 0.875rem 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; color: var(--ink-2); }
.clauses li b { font: 700 0.875rem/1.55 var(--mono); color: var(--brass); white-space: nowrap; }
.dossier-foot { margin-top: 1.25rem; font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); letter-spacing: .04em; text-align: center; }
.page-head { margin-bottom: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 0.75rem; }
.page-head .stamp { margin: 0.375rem 0 0.875rem; }
.stamp[class*="lvl-"] { color: var(--c); }
.dispatch-code { font: 700 0.8125rem/1 var(--mono); letter-spacing: .14em; color: var(--red-ink); margin-bottom: 0.875rem; text-transform: uppercase; }

/* ── controls ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1.125rem; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  font: 700 0.8125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--sheet-2); color: var(--ink); }
.btn-danger { background: transparent; color: var(--danger); border-color: currentColor; }
.btn-danger:hover { background: var(--red-wash); color: var(--red-ink); }
.btn-seal { width: 100%; padding: 0.9375rem 1.25rem; font-size: 0.875rem; }
.btn-seal .icon { width: 1.375rem; height: 1.375rem; fill: currentColor; stroke: none; }

input, select, textarea {
  background: var(--well); border: 1px solid var(--rule-strong); border-radius: 2px;
  color: var(--ink); padding: 0.5625rem 0.75rem; font: 400 0.9375rem/1.4 var(--sans); width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brass); outline-offset: 0; border-color: var(--brass); }
.form-group { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
label { font: 700 0.8125rem/1.3 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }

.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; padding: 1rem; }
.badge { display: inline-block; padding: 0.1875rem 0.4375rem; border: 1px solid currentColor; font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.badge-commander { color: var(--red-ink); }
.badge-admin { color: var(--brass); }
.badge-upload { color: var(--field); }
.badge-view { color: var(--steel); }
.permission-pill { font: 700 0.8125rem/1 var(--mono); padding: 0.1875rem 0.375rem; text-transform: uppercase; border: 1px solid currentColor; }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; padding: 0.5rem 0.75rem; font: 700 0.8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); }
td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--rule); font-size: 0.875rem; }

.flash { padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; border: 1px solid var(--rule-strong); }
.flash-error { background: var(--red-wash); border-color: var(--red); color: var(--ink); }

/* ── abilities ────────────────────────────────────────── */
.ability { display: grid; grid-template-columns: 1fr minmax(15rem, 20rem); gap: 1rem 2rem; align-items: start; padding: 1.25rem 1rem; }
.ability h2 { margin: 0; }
.grants { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.grant { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid var(--rule-strong); padding: 0.1875rem 0.25rem 0.1875rem 0.625rem; font: 400 0.8125rem/1.3 var(--mono); color: var(--ink); }
.grant form { display: contents; }
.grant-x { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 1.125rem; line-height: 1; padding: 0 0.375rem; }
.grant-x:hover { color: var(--red-ink); }
.grant-none { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.grant-add { display: flex; gap: 0.5rem; }
.grant-add select { min-width: 0; }
.admin-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; }
@media (max-width: 760px) { .ability { grid-template-columns: 1fr; padding: 16px 4px; } }

/* ── phone ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .masthead { padding: 0.625rem 1rem; }
  .wordmark-sub, .operator-name { display: none; }
  .operator { gap: 0.25rem; }
  .operator .signout-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .layout { flex-direction: column; }
  .nav-item { padding: 0.6875rem 0.75rem; }
  .main { padding: 1.5rem 1rem 3rem; }
  .index-row { grid-template-columns: 2.75rem 1fr; gap: 0.875rem; padding: 1rem 0.25rem; }
  .index-row .emblem, .index-num { width: 2.75rem; height: 2.75rem; }
  .index-num { display: grid; place-items: center; }
  .index-go { grid-column: 2; }
  .index-title { font-size: 1.3125rem; }
  .unit-head .emblem { width: 3.25rem; height: 3.25rem; }
  .dossier { padding: 2.25rem 1.25rem 1.5rem; }
  .dossier .stamp { position: static; margin-bottom: 1.25rem; }
  .clauses li { grid-template-columns: 3rem 1fr; }
}

/* ── Discord-style profile card ───────────────────────── */
.pcard {
  --pc-bg: color-mix(in srgb, var(--pc-accent) 14%, #17181b);
  position: relative; background: var(--pc-bg); border-radius: 0.5rem; overflow: hidden;
  box-shadow: 0 1rem 2.5rem -1.25rem rgba(0,0,0,.8); color: var(--ink);
}
.pcard-banner { height: 7.5rem; background: var(--pc-accent) center / cover no-repeat; }
.pcard-compact .pcard-banner { height: 5.25rem; }
.pcard-head { display: flex; align-items: flex-end; gap: 0.75rem; padding: 0 1rem; margin-top: -3rem; }
.pcard-compact .pcard-head { margin-top: -2.5rem; }
.pcard-avatar { position: relative; width: 6rem; height: 6rem; flex-shrink: 0; }
.pcard-compact .pcard-avatar { width: 5rem; height: 5rem; }
.pcard-avatar-img { width: 100%; height: 100%; border-radius: 50%; border: 0.375rem solid var(--pc-bg); background: var(--pc-bg); }
.pcard-deco { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; pointer-events: none; }
.pcard .presence { position: absolute; right: 2px; bottom: 0.25rem; width: 1.625rem; height: 1.625rem; border: 0.3125rem solid var(--pc-bg); }
.pcard-status {
  flex: 1; min-width: 0; margin-bottom: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  background: rgba(255,255,255,.07); font-size: 0.875rem; color: var(--ink); overflow-wrap: anywhere;
}
.pcard-status-emoji { margin-right: 0.375rem; }
.pcard-body { padding: 0.625rem 1rem 1.125rem; }
.pcard-name { font: 700 1.375rem/1.2 var(--sans); text-transform: none; letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.pcard-name a { color: inherit; text-decoration: none; }
.pcard-name a:hover { text-decoration: underline; }
.pcard-handle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--ink-2); margin-top: 2px; }
.srv-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 1px 0.375rem; border-radius: 0.25rem; background: rgba(255,255,255,.09); font: 700 0.75rem/1.5 var(--sans); color: var(--ink); }
.pcard-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }
.pcard-badges li { font: 600 0.6875rem/1 var(--sans); padding: 0.3125rem 0.5rem; border-radius: 0.25rem; background: rgba(255,255,255,.07); color: var(--ink-2); }
.pcard-section { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,.08); }
.pcard-section h3 { font: 700 0.75rem/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 0.5rem; color: var(--ink); }
.pcard-about { font-size: 0.875rem; white-space: pre-line; color: var(--ink-2); overflow-wrap: anywhere; }
.pcard-dates { display: flex; flex-wrap: wrap; gap: 0.375rem 1.125rem; font-size: 0.8125rem; color: var(--ink-2); }
.pcard-dates b { color: var(--ink-3); font-weight: 600; margin-right: 0.25rem; }

/* presence: shape as well as colour, like Discord */
.presence { position: relative; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--pr); }
.presence-online { --pr: #23a55a; }
.presence-idle { --pr: #f0b232; }
.presence-dnd { --pr: #f23f43; }
.presence-invisible { --pr: transparent; box-shadow: inset 0 0 0 0.1875rem #80848e; }
.presence-idle::after { content: ""; position: absolute; width: 60%; height: 60%; top: 0; left: 0; border-radius: 50%; background: var(--pc-bg, var(--sheet)); }
.presence-dnd::after { content: ""; position: absolute; left: 22%; right: 22%; top: 42%; height: 16%; border-radius: 2px; background: var(--pc-bg, var(--sheet)); }

/* ── hub ──────────────────────────────────────────────── */
.hub { display: grid; grid-template-columns: minmax(16.25rem, 20rem) 1fr; gap: 2.5rem; align-items: start; }
.hub-me { position: sticky; top: 1.5rem; display: grid; gap: 0.875rem; }
.hub-me-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.hub-me-actions .btn { padding: 0.5625rem 0.625rem; }
.hub-search { display: grid; gap: 0.375rem; }
.hub-search-row { display: flex; gap: 0.5rem; }
.unit { margin-bottom: 2.25rem; }
.unit-title { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.875rem; }
.unit-title .emblem { width: 2.5rem; height: 2.5rem; }
.unit-title h2 { margin: 0; }
form.index-row { margin: 0; }
.main:has(.hub), .main:has(.profile-page) { max-width: 77.5rem; }

/* ── profile page ─────────────────────────────────────── */
.profile-page { display: grid; grid-template-columns: minmax(17.5rem, 22.5rem) 1fr; gap: 2.5rem; align-items: start; }
.profile-side { position: sticky; top: 1.5rem; display: grid; gap: 0.75rem; }
.profile-note { font-size: 0.8125rem; }
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.75rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .hq-tab-row a { padding: 0.75rem 1rem; color: var(--ink-2); text-decoration: none; font: 800 1.0625rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover, .hq-tab-row a:hover { color: var(--ink); }
.tabs a[aria-current="page"], .hq-tab-row a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.tab-title { margin-bottom: 0.875rem; }
.record { border: 1px solid var(--rule); background: var(--sheet); padding: 1.375rem; margin-bottom: 1.25rem; }
.record-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.125rem; }
.record-head .emblem { width: 2.75rem; height: 2.75rem; }
.record-head h2 { margin: 0; flex: 1; }
.record-count { font: 700 0.8125rem/1 var(--mono); color: var(--brass); }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: 1rem 1.5rem; }
.record-grid dt { font: 700 0.8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-bottom: 0.25rem; }
.record-grid dd { font-size: 1rem; color: var(--ink); }
.record-sub { font-size: 1.0625rem; margin: 1.375rem 0 0.625rem; }
.roblox { display: inline-flex; align-items: center; gap: 0.5rem; }
.roblox img { border-radius: 50%; background: var(--well); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { border: 1px solid var(--rule-strong); padding: 0.3125rem 0.625rem; font: 400 0.8125rem/1.3 var(--mono); }

.medals { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); gap: 0.75rem; }
.medal {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.875rem 0.625rem; text-align: center; background: var(--sheet-2); border: 1px solid var(--rule);
  box-shadow: inset 0 0.1875rem 0 var(--mc);
}
.medal-art { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; font-size: 1.75rem; line-height: 1;
  background: color-mix(in srgb, var(--mc) 18%, transparent); object-fit: contain; }
.medal-name { font-weight: 700; font-size: 0.875rem; line-height: 1.25; }
.medal-cat { font: 700 0.8125rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.medal-held { font: 400 0.8125rem/1 var(--mono); color: var(--ink-3); }

/* ── edit profile ─────────────────────────────────────── */
.edit-form { display: grid; gap: 0.375rem; max-width: 40rem; }
.presence-pick { border: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.125rem; }
.presence-pick legend { font: 700 0.8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 0.5rem; }
.presence-opt { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 0.75rem; border: 1px solid var(--rule-strong); cursor: pointer; font: 500 0.875rem/1 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.presence-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.presence-opt:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.presence-opt:has(input:checked) { border-color: var(--brass); background: var(--sheet-2); }
.presence-opt .presence { --pc-bg: var(--ground); }
.presence-opt:has(input:checked) .presence { --pc-bg: var(--sheet-2); }
.edit-row { display: grid; grid-template-columns: 6rem 1fr; gap: 0.75rem; }
.count { float: right; font-weight: 400; color: var(--ink-3); }
.edit-actions { display: flex; gap: 0.625rem; margin-top: 0.5rem; }

/* ── members ──────────────────────────────────────────── */
.members-search { max-width: 32.5rem; margin: 0.5rem 0 0.625rem; }
.members-hint { margin-bottom: 0.875rem; }
.member-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); gap: 0.625rem; }
.member-row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  background: linear-gradient(90deg, var(--sheet) 45%, rgba(24,25,27,.55)), var(--plate, none) right center / cover no-repeat, var(--sheet);
}
.member-row:hover { border-color: var(--rule-strong); color: var(--ink); }
.member-av { position: relative; width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
.member-av img { width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.member-av .presence { position: absolute; right: -2px; bottom: -2px; width: 1rem; height: 1rem; border: 0.1875rem solid var(--sheet); --pc-bg: var(--sheet); }
.member-names { display: grid; min-width: 0; }
.member-names b { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-names small { font-size: 0.8125rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .hub, .profile-page { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  form.index-row > .btn { grid-column: 2; justify-self: start; }
  .hub-me, .profile-side { position: static; }
  .edit-row { grid-template-columns: 4.5rem 1fr; }
}

/* ── network administration ───────────────────────────── */
.readout { font: 400 0.875rem/1.5 var(--mono); color: var(--ink-2); margin-bottom: 1.75rem; }
.admin-block { margin-top: 2.5rem; }
.admin-block h2 { margin-bottom: 0.375rem; }
.admin-help { margin-bottom: 1rem; }
.admin-item > summary { list-style: none; cursor: pointer; }
.admin-item > summary::-webkit-details-marker { display: none; }
.admin-item > summary:hover { background: var(--sheet); }
.admin-item[open] > summary { background: var(--sheet); }
.admin-item[open] > summary .index-go { color: var(--ink); }
.admin-form { padding: 1.25rem 1rem 1.5rem 5.75rem; background: var(--sheet); border-top: 1px dashed var(--rule); display: grid; gap: 0.75rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 0.625rem; font: 400 0.9375rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; accent-color: var(--red); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.tag-off { color: var(--red-ink); font-weight: 700; }
.bot-state { font: 700 0.8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0.375rem 0.5rem; border: 1px solid currentColor; white-space: nowrap; }
.bot-online { color: var(--field); }
.bot-offline { color: var(--red-ink); }
.bot-degraded { color: var(--brass); }
.bot-default { color: var(--ink-3); }
@media (max-width: 760px) {
  .admin-form { padding: 1rem 0.25rem 1.25rem; }
  .form-grid { grid-template-columns: 1fr; }
  summary.index-row .bot-state { grid-column: 2; justify-self: start; }
}

/* ── command inbox ────────────────────────────────────── */
.plan-count { display: inline-block; min-width: 1.6em; padding: 2px 0.375rem; margin-left: 0.375rem; vertical-align: .2em;
  font: 700 0.8125rem/1.2 var(--mono); text-align: center; color: var(--ink); background: var(--red-wash); border: 1px solid #4a1d1d; }
.inbox { margin: 0.5rem 0 2.5rem; }
.inbox h2 { margin-bottom: 0.875rem; }
.inbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 0.875rem; }
.inbox .flash { overflow-wrap: anywhere; }
.inbox-queue { border: 1px solid var(--rule); background: var(--sheet); padding: 1rem 1.125rem; }
.inbox-queue h3 { margin-bottom: 0.625rem; }
.inbox-queue ul { list-style: none; }
.inbox-queue li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--rule); }
.inbox-queue li b { display: block; font-size: 0.9375rem; }
.inbox-queue li span { display: block; font-size: 0.8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.inbox-side { display: grid; justify-items: end; align-content: start; gap: 0.25rem; flex-shrink: 0; font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.inbox-side a { font-size: 0.8125rem; }

/* ── setup preview ────────────────────────────────────── */
.plan-block { margin: 2rem 0; }
.plan-block h2 { margin-bottom: 0.75rem; }
.plan-block table { max-width: 51.25rem; }
.plan-cat { border: 1px solid var(--rule); background: var(--sheet); padding: 1rem 1.125rem; margin-bottom: 0.75rem; max-width: 51.25rem; }
.plan-cat h3 { margin-bottom: 0.25rem; }
.plan-docs { list-style: none; margin-top: 0.625rem; display: grid; gap: 0.375rem; }
.plan-docs li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.plan-docs .icon { color: var(--ink-3); }
.role-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.75rem; max-width: 51.25rem; }
.role-tools-grid select { display: block; margin: 0.5rem 0 0.75rem; }
.role-group { margin-bottom: 0.75rem; max-width: 56rem; }
.role-group summary { cursor: pointer; padding: 0.5rem 0; }
.role-group td select { max-width: 15rem; }
.role-group td input[type=number] { width: 7rem; }
.role-risky td:first-child { box-shadow: inset 0.1875rem 0 0 var(--brass); }
.plan-apply { display: flex; gap: 0.625rem; margin-top: 1.5rem; position: sticky; bottom: 0; padding: 1rem 0; background: var(--ground); border-top: 1px solid var(--rule); }

/* ── website activity ─────────────────────────────────── */
.activity { list-style: none; border-top: 1px solid var(--rule); max-width: 56.25rem; }
.activity li { display: grid; grid-template-columns: 11.875rem 1fr; gap: 1rem; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--rule); }
.activity time { font: 400 0.8125rem/1.5 var(--mono); color: var(--ink-3); }

/* ── documents ────────────────────────────────────────── */
.setup-progress { font: 400 0.9375rem/1.4 var(--mono); color: var(--ink-2); margin-bottom: 0.75rem; }
.setup-progress b { color: var(--brass); }
.head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-search { max-width: 30rem; margin-bottom: 1.5rem; }
.doc-section { margin-bottom: 2.25rem; }
.doc-section > h2 { display: flex; align-items: baseline; gap: 0.625rem; padding-bottom: 0.5rem; }
.doc-section > h2 .index-num { font: 700 0.9375rem/1 var(--mono); color: var(--brass); }
.doc-back { font: 400 0.875rem/1.4 var(--mono); color: var(--ink-3); margin-bottom: 0.875rem; }
.doc-title { font-size: 1.25rem; }
/* manage mode: the tools sit under their row, so every row stays one tap target when not managing */
.doc-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; padding: 0 0.75rem 1rem 3.625rem; }
.doc-tools form { margin: 0; }
.doc-tools .btn { padding: 0.4375rem 0.75rem; }
.doc-rename { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 26rem; }
.doc-rename input { flex: 1 1 16rem; min-width: 0; }
.doc-name-mode { flex-basis: 100%; font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); }
.notice-action { margin-top: 1rem; }
@media (max-width: 760px) {
  .activity li { grid-template-columns: 1fr; gap: 0.25rem; }
  .doc-tools { padding-left: 0.75rem; }
}

/* ── personnel: shared bits ───────────────────────────── */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.standing { display: inline-block; font: 700 0.8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0.25rem 0.375rem; border: 1px solid currentColor; }
.st-met { color: var(--field); }
.st-failed { color: var(--brass); }
.st-at_removal { color: var(--red-ink); background: var(--red-wash); }
.st-exempt { color: var(--steel); }
.st-untracked { color: var(--ink-3); }
.st-recruit { color: var(--brass); }
.index-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }
.recruit-checklist { margin-top: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.service-recruit { margin-top: 1rem; }
.standing-why { display: block; margin-top: 0.25rem; font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.flag-chips li { font-size: 0.8125rem; padding: 0.1875rem 0.5rem; }
.q-strikes { display: block; margin-top: 0.25rem; font: 700 0.8125rem/1.3 var(--mono); color: var(--red-ink); }

/* roster */
.standing-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.25rem 0 1.125rem; }
.standing-tabs a { padding: 0.4375rem 0.75rem; border: 1px solid var(--rule-strong); color: var(--ink-2); text-decoration: none; font-size: 0.875rem; }
.standing-tabs a b { font: 700 0.8125rem/1 var(--mono); color: var(--ink); margin-left: 0.25rem; }
.standing-tabs a:hover { color: var(--ink); }
.standing-tabs a[aria-current="true"] { border-color: var(--brass); color: var(--ink); background: var(--sheet-2); }
.roster-filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0.75rem; align-items: end; margin-bottom: 1.125rem; max-width: 61.25rem; }
.roster-filters .form-group { margin: 0; }
.roster td { vertical-align: top; padding: 0.75rem; }
.roster tbody tr:hover { background: var(--sheet); }
.roster-who { display: flex; align-items: center; gap: 0.625rem; color: var(--ink); text-decoration: none; }
.roster-who img { border-radius: 50%; }
.roster-who span { display: grid; }
.roster-who b { font-size: 0.9375rem; }
.roster-who small { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.roster-who:hover b { text-decoration: underline; }
.mini-progress { display: flex; gap: 0.25rem; margin-top: 0.375rem; max-width: 10rem; }
.mini-progress span { flex: 1; height: 0.3125rem; background: var(--rule); }
.mini-progress i, .bar i { display: block; height: 100%; background: var(--brass); }
.mini-progress .ok i, .bars .ok .bar i { background: var(--field); }

/* member file */
.file-head { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.file-avatar { border-radius: 50%; border: 1px solid var(--rule-strong); }
.file-id h1 { margin-bottom: 0.375rem; }
.file-id .chips { margin-top: 0.625rem; }
.file-links { display: flex; gap: 0.5rem; }
.file-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.file-card { border: 1px solid var(--rule); background: var(--sheet); padding: 1.125rem 1.25rem; min-width: 0; }
.file-card.span-2 { grid-column: 1 / -1; }
.file-card h2 { font-size: 1.3125rem; margin-bottom: 0.625rem; }
.file-h3 { font-size: 1rem; margin: 0.875rem 0 0.375rem; }
.file-sub { font-size: 0.875rem; color: var(--ink-2); margin: 0.375rem 0 0.625rem; }
.bars { list-style: none; display: grid; gap: 0.625rem; max-width: 45rem; }
.bars li { display: grid; grid-template-columns: 8.125rem 1fr 6.875rem; gap: 0.75rem; align-items: center; }
.bar-label { font-size: 0.875rem; }
.bar { height: 0.625rem; background: var(--rule); }
.bar-num { font: 400 0.8125rem/1 var(--mono); text-align: right; color: var(--ink-2); }
.stat-table th[scope="row"] { text-transform: none; letter-spacing: 0; font: 400 0.875rem/1.3 var(--sans); color: var(--ink-2); }
.stat-table td, .stat-table th { padding: 0.375rem 0.5rem; }
.entries { list-style: none; display: grid; gap: 0; }
.entries li { padding: 0.5625rem 0; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.entries li:first-child { border-top: 0; }
.entries li p { margin-top: 0.1875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.entries .inactive { opacity: .6; }
.entries .cert { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; }
.entries .cert form { margin: 0; }
.entries .cert .btn { padding: 0.3125rem 0.625rem; }
.inline-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.checklist { list-style: none; display: grid; gap: 0.375rem; }
.checklist li { font-size: 0.875rem; padding-left: 1.5rem; position: relative; color: var(--ink-2); }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 0.25rem; width: 0.75rem; height: 0.75rem; border: 1px solid var(--rule-strong); }
.checklist li.ok { color: var(--ink); }
.checklist li.ok::before { background: var(--field); border-color: var(--field); }

@media (max-width: 960px) {
  .file-grid { grid-template-columns: 1fr; }
  .roster-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .roster thead { display: none; }  /* each cell carries its label instead (data-label) */
  .roster, .roster tbody, .roster tr, .roster td { display: block; }
  .roster tr { border: 1px solid var(--rule); background: var(--sheet); margin-bottom: 0.625rem; padding: 0.375rem 0; }
  .roster td { border: 0; padding: 0.375rem 0.875rem; display: grid; grid-template-columns: 6rem 1fr; gap: 0.625rem; text-align: left; }
  .roster td::before { content: attr(data-label); font: 700 0.8125rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
  .roster td > * { grid-column: 2; justify-self: start; }
  .roster td > .mini-progress { width: 100%; }
  .roster td[data-label="Member"] { grid-template-columns: 1fr; }
  .roster td[data-label="Member"] > * { grid-column: 1; }
  .roster td[data-label="Member"]::before { display: none; }
  /* phone cards show only what's filled in; the row's own action sits in the card's top corner */
  .roster td.is-empty { display: none; }
  .roster tr { position: relative; }
  .roster td.row-action { position: absolute; top: 0.375rem; right: 0.25rem; display: block; }
  .roster td.row-action::before { display: none; }
  .roster td.row-action .adjust-form { position: absolute; right: 0; z-index: 3; }
  .roster td[data-label="Member"] { padding-right: 5rem; }
  .file-head { grid-template-columns: auto 1fr; }
  .file-links { grid-column: 1 / -1; }
  .bars li { grid-template-columns: 1fr; gap: 0.25rem; }
  .bar-num { text-align: left; }
}

/* ── quota & inactivity ───────────────────────────────── */
.status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.375rem; padding: 0.75rem 1rem; margin: 0.375rem 0 1.5rem;
  border: 1px solid var(--rule); background: var(--sheet); font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-2); }
.state { font: 700 0.8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0.375rem 0.5rem; border: 1px solid currentColor; }
.state-on { color: var(--field); }
.state-warn { color: var(--brass); }
.state-off { color: var(--red-ink); background: var(--red-wash); }
.panel { margin: 0 0 1.75rem; }
.panel > h2 { margin-bottom: 0.75rem; }
.preview-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.75rem; border: 1px solid var(--rule); background: var(--sheet); }
.preview-cols > div { padding: 0.875rem 1rem; }
.preview-cols > div + div { border-left: 1px dashed var(--rule); }
.preview-cols h3 { font-size: 1.0625rem; margin: 0 0 0.5rem; }
.preview-cols h3 + p + h3 { margin-top: 0.875rem; }
.control-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 0.75rem; }
.control { display: grid; gap: 0.625rem; align-content: start; border: 1px solid var(--rule); background: var(--sheet); padding: 1rem; margin: 0; }
.control h3 { font-size: 1.125rem; }
.control p { font-size: 0.875rem; }
.control .btn { justify-self: start; }
.control-danger { border-color: #4a1d1d; }
.confirm-row { display: flex; gap: 0.5rem; }
.confirm-row input { max-width: 8.125rem; font-family: var(--mono); letter-spacing: .08em; }
.queue { list-style: none; border-top: 1px solid var(--rule); }
.queue li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.875rem 0.25rem; border-bottom: 1px solid var(--rule); }
.queue li > div { min-width: 0; }
.queue li p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.queue li .standing { margin-left: 0.375rem; }
.queue-actions { display: flex; gap: 0.5rem; flex-shrink: 0; margin: 0; }
/* triage: tick alerts, act on all of them from one bar that stays in reach while scrolling */
.triage-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem;
  padding: 0.75rem 0.875rem; margin-bottom: 0.75rem; background: var(--sheet); border: 1px solid var(--rule-strong); }
.triage-count { font: 700 0.8125rem/1 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; margin-right: auto; }
.triage-bar .btn:disabled { opacity: .45; cursor: not-allowed; }
.queue .pick { width: 1.25rem; height: 1.25rem; flex-shrink: 0; accent-color: var(--red); margin: 0.125rem 0.625rem 0 0; }
.prog-line { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; color: var(--ink-2); max-width: 15rem; }
.prog-line b { font: 700 0.8125rem/1.5 var(--mono); color: var(--brass); }
.prog-line.ok b { color: var(--field); }
.adjust > summary { list-style: none; cursor: pointer; padding: 0.375rem 0.625rem; }
.adjust > summary::-webkit-details-marker { display: none; }
.adjust-form { display: grid; gap: 0.375rem; margin-top: 0.5rem; padding: 0.75rem; border: 1px solid var(--rule-strong); background: var(--sheet-2); min-width: 15rem; }
.allowance { font-size: 0.9375rem; margin-bottom: 0.875rem; }
.notice-form { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 0.875rem; max-width: 47.5rem; align-items: start; }
.notice-form .span-2 { grid-column: 2; }
.notice-form > div:last-child { grid-column: 1 / -1; }
.correct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.875rem; }
.correct { border: 1px solid var(--rule); padding: 0.875rem; margin: 0; display: grid; align-content: start; }
.correct .btn { justify-self: start; }
@media (max-width: 960px) { .preview-cols { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .queue li { flex-direction: column; align-items: flex-start; }
  .notice-form { grid-template-columns: 1fr; }
  .notice-form .span-2 { grid-column: 1; grid-row: auto; }
}

/* ── discipline & internal security ───────────────────── */
.strike-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.25rem 1.5rem; max-width: 61.25rem; align-items: start; }
.strike-form > .form-group, .strike-form .severity { grid-column: 1; }
.strike-form .strike-preview { grid-column: 2; grid-row: 1 / span 3; }
.strike-form > div:last-child { grid-column: 1 / -1; }
.severity { border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.severity legend { font: 700 0.8125rem/1.3 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 0.375rem; }
.sev { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.625rem 0.75rem; border: 1px solid var(--rule); border-left: 0.25rem solid var(--sev); background: var(--sheet);
  cursor: pointer; text-transform: none; letter-spacing: 0; font: 400 0.875rem/1.35 var(--sans); color: var(--ink); }
.sev input { width: auto; flex: none; margin-top: 0.1875rem; accent-color: var(--red); }
.sev span { display: grid; gap: 2px; }
.sev small { color: var(--ink-3); font-size: 0.8125rem; }
.sev:has(input:checked) { background: var(--sheet-2); border-color: var(--sev); }
.sev-low { --sev: var(--steel); }
.sev-medium { --sev: var(--brass); }
.sev-major { --sev: var(--red-ink); }
.sev-indoc { --sev: var(--red); }
.strike-preview { border: 1px dashed var(--rule-strong); padding: 0.875rem 1rem; min-height: 7.5rem; }
.preview-title { font-size: 0.9375rem; margin-bottom: 0.5rem; }
.effects { list-style: none; display: grid; gap: 0.375rem; }
.effects li { padding-left: 1rem; position: relative; font-size: 0.875rem; color: var(--ink-2); }
.effects li::before { content: "§"; position: absolute; left: 0; color: var(--brass); font-family: var(--mono); }
.effects li.warn { color: var(--red-ink); }
.end-indoc { align-items: center; }
.filter-chip { font-size: 0.875rem; margin: -0.25rem 0 1rem; color: var(--ink-2); }
.filter-chip a { margin-left: 0.5rem; }
.ledger { list-style: none; display: grid; gap: 0.625rem; }
.case { border: 1px solid var(--rule); border-left: 0.25rem solid var(--sev); background: var(--sheet); padding: 0.75rem 1rem; }
.case-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.875rem; }
.case-no { font: 700 0.8125rem/1 var(--mono); color: var(--ink-3); }
.case-type { font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sev); }
.case-who { font-weight: 700; color: var(--ink); }
.case-when { margin-left: auto; font: 400 0.8125rem/1 var(--mono); color: var(--ink-3); }
.case-reason { margin: 0.5rem 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.case-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-size: 0.8125rem; color: var(--ink-3); }
.case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; }
.case-actions form { margin: 0; }
.case.is-pardoned { opacity: .62; }
.case.is-pardoned .case-reason { text-decoration: line-through; text-decoration-color: var(--rule-strong); }
.stamp-sm { font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--field); border: 1px solid currentColor; padding: 0.1875rem 0.3125rem; transform: rotate(-2deg); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.linkish:hover { color: var(--ink); }
.linkish.danger { color: var(--danger); }
/* native <dialog> styled as a sheet */
.sheet-dialog { background: var(--sheet); color: var(--ink); border: 1px solid var(--rule-strong); border-top: 2px solid var(--red); padding: 1.5rem; width: min(32rem, calc(100vw - 2rem)); margin: auto; }  /* the global reset zeroes margins, which un-centres dialogs */
.sheet-dialog::backdrop { background: rgba(0,0,0,.7); }
.palette { width: min(40rem, calc(100vw - 2rem)); margin: 12vh auto auto; padding: 0.75rem; }
.palette input { width: 100%; font-size: 1.0625rem; }
.palette-list { list-style: none; margin-top: 0.5rem; }
.palette-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.625rem 0.75rem; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.palette-list [aria-selected="true"] a, .palette-list a:hover { background: var(--sheet-2); border-left-color: var(--brass); }
.palette-list small { font: 700 0.8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.palette-hint { margin-top: 0.5rem; font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.palette-btn { background: none; font: inherit; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border: 1px solid var(--rule); }
.palette-btn:hover { color: var(--ink); border-color: var(--rule-strong); }
.palette-btn kbd { font: 700 0.8125rem/1 var(--mono); color: var(--ink-3); border: 1px solid var(--rule-strong); padding: 0.125rem 0.3125rem; }
@media (max-width: 760px) { .palette-btn { display: none; } }  /* phones have the Sections menu */
.sheet-dialog h2 { margin-bottom: 1.25rem; }
.sheet-dialog .check { margin: 0.25rem 0 1.25rem; }
.modal-actions { display: flex; gap: 0.625rem; }
.purge > summary { padding: 0; }
.purge[open] .adjust-form { position: absolute; z-index: 5; right: 1rem; }
.purge { position: static; }
.case { position: relative; }
.file-links { margin-top: 0.75rem; font-size: 0.875rem; }
.ra-sheet { border: 1px solid var(--red); background: var(--red-wash); padding: 1rem 1.125rem; margin-bottom: 1.75rem; }
.ra-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.625rem; }
.ra-sheet pre { font: 400 0.875rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sheet); border: 1px solid var(--rule); padding: 0.75rem 0.875rem; margin-bottom: 0.5rem; }
.history { margin-top: 0.75rem; }
.history > summary { cursor: pointer; font: 700 0.8125rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 0.375rem 0; }
.discharge-actions input { width: 15rem; }
.add-entry { margin-bottom: 1.125rem; }
.add-entry > summary { list-style: none; cursor: pointer; display: inline-block; }
.add-entry > summary::-webkit-details-marker { display: none; }
.bl-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); gap: 0 1rem; margin-top: 0.875rem; padding: 1rem; border: 1px solid var(--rule-strong); background: var(--sheet); max-width: 61.25rem; }
.bl-form .span-all { grid-column: 1 / -1; }
.bl-form .check { margin-bottom: 0.875rem; }
.bl-filters { grid-template-columns: 2fr 1fr auto; }
.cell-sub { display: block; margin-top: 0.1875rem; font: 400 0.8125rem/1.35 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.roster tr.inactive { opacity: .6; }
.purge-form { max-width: 32.5rem; }
.inbox-open { display: inline-block; margin-top: 0.625rem; font-size: 0.875rem; }
.inbox-backlog { margin-top: 0.625rem; font-size: 0.875rem; color: var(--ink-2); }
.wire-times { font: 700 0.8125rem/1 var(--mono); color: var(--brass); white-space: nowrap; }
@media (max-width: 960px) {
  .strike-form { grid-template-columns: 1fr; }
  .strike-form .strike-preview { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {
  .severity { grid-template-columns: 1fr; }
  .case-when { margin-left: 0; }
  .discharge-actions { flex-wrap: wrap; }
  .discharge-actions input { width: 100%; }
  .bl-filters { grid-template-columns: 1fr; }
  .purge[open] .adjust-form { position: static; }
}

/* ── logs ─────────────────────────────────────────────── */
.edit { --sev: var(--rule-strong); }
.edit.is-flagged { --sev: var(--brass); }
.edit.is-reviewed { --sev: var(--rule-strong); opacity: .7; }
.flag { font: 700 0.8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0.25rem 0.375rem; color: var(--brass); border: 1px solid currentColor; }
.flag-big_jump, .flag-row_removed, .flag-own_row { color: var(--red-ink); background: var(--red-wash); }
.edit-line { margin-top: 0.5rem; font-size: 0.9375rem; }
.edit-values { margin: 0.375rem 0 0.5rem; font: 400 0.9375rem/1.4 var(--mono); overflow-wrap: anywhere; }
.edit-values del { color: var(--ink-3); }
.edit-values ins { text-decoration: none; color: var(--ink); font-weight: 700; }
.audit-filters { grid-template-columns: 1fr 1fr 2fr auto; }
.log-note { margin: -0.375rem 0 1rem; font-size: 0.875rem; }
.log-list { list-style: none; border-top: 1px solid var(--rule); }
.log-row { display: grid; grid-template-columns: 8.125rem 9.375rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.625rem 0.25rem; border-bottom: 1px solid var(--rule); font-size: 0.875rem; }
.log-row time { font: 400 0.8125rem/1.5 var(--mono); color: var(--ink-3); }
.log-kind { font: 700 0.8125rem/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.kind-message_delete .log-kind, .kind-ban .log-kind, .kind-kick .log-kind, .kind-role_remove .log-kind { color: var(--red-ink); }
.kind-timeout .log-kind, .kind-permissions .log-kind, .kind-message_edit .log-kind { color: var(--brass); }
.kind-role_add .log-kind, .kind-timeout_removed .log-kind { color: var(--field); }
.log-body { min-width: 0; }
.log-body a { color: var(--ink); font-weight: 700; }
.log-body details { margin-top: 0.25rem; }
.log-body summary { cursor: pointer; color: var(--ink-2); overflow-wrap: anywhere; }
.log-detail { margin-top: 0.375rem; padding: 0.625rem 0.75rem; border-left: 2px solid var(--rule-strong); background: var(--sheet); display: grid; gap: 0.375rem; overflow-wrap: anywhere; list-style: none; }
.log-sub { color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.pager { display: flex; gap: 1.125rem; margin-top: 1rem; font-size: 0.9375rem; }
@media (max-width: 760px) {
  .audit-filters { grid-template-columns: 1fr; }
  .log-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ── organisation (added on top of the Dossier look) ──── */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--brass); color: var(--ground); padding: 0.5rem 0.875rem; font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 1rem; }
.nav-group { font: 700 0.8125rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 1rem 0.75rem 0.375rem; }
.page-head p { color: var(--ink-2); max-width: 62ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.page-head .unit-head { margin-bottom: 0.75rem; }

/* division overview: the member's own service card */
.service-card { border: 1px solid var(--rule); background: var(--sheet); padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; max-width: 60rem; }
.readouts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-bottom: 1rem; }
.readouts div { display: grid; gap: 0.25rem; }
.readouts dt { font: 700 0.8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.readouts dd { font-size: 1rem; color: var(--ink); }
.service-card .bars { margin-top: 0.25rem; }
.service-foot { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--rule); font-size: 0.875rem; }

/* hub: whether a division is open to you */
.division-state { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); margin-top: 0.375rem; }
.division-state::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; background: var(--c, var(--ink-3)); }
.division-state.is-in { --c: var(--field); }
.division-state.is-waiting { --c: var(--brass); }

/* empty queue */
.all-clear { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--rule); background: var(--sheet); padding: 0.875rem 1.125rem; max-width: 46rem; color: var(--ink-2); }
.all-clear .icon { color: var(--field); }

/* tool drawers: rare and dangerous actions, closed by default */
.tools { border: 1px solid var(--rule); background: var(--sheet); margin: 1rem 0 2.5rem; }
.tools > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.125rem; }
.tools > summary::-webkit-details-marker { display: none; }
.tools > summary:hover { background: var(--sheet-2); }
.tools > summary .icon { color: var(--brass); }
.tools > summary b { font: 800 1.1875rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.tools > summary span { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); }
.tools > summary::after { content: "Open"; margin-left: auto; font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tools[open] > summary::after { content: "Close"; }
.tools[open] > summary { border-bottom: 1px dashed var(--rule); }
.tools-body { padding: 1rem 1.125rem 1.25rem; }
.file-tools { grid-column: 1 / -1; margin: 0; }
.tools .control, .tools .correct { background: var(--well); }

/* discipline: the strike form opens from a button */
.issue { margin-bottom: 2rem; }
.issue > summary { list-style: none; display: inline-flex; cursor: pointer; }
.issue > summary::-webkit-details-marker { display: none; }
.issue[open] > summary { display: none; }
.issue-body { border: 1px solid var(--rule); background: var(--sheet); padding: 1.25rem 1.5rem; }
.issue-body h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.issue-body h2 .linkish { font: 400 0.875rem/1 var(--sans); text-transform: none; }

/* admin: guided setup */
.setup-steps { list-style: none; counter-reset: step; border-top: 1px solid var(--rule); margin-bottom: 2.5rem; max-width: 60rem; }
.setup-steps li { counter-increment: step; display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1.25rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--rule); }
.setup-steps li::before { content: "§ " counter(step); font: 700 0.9375rem/1 var(--mono); color: var(--brass); text-align: center; }
.setup-steps li.done::before { content: "✓"; color: var(--field); font-size: 1.125rem; }
.setup-steps li b { font: 800 1.25rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.setup-steps li p { color: var(--ink-2); font-size: 0.9375rem; margin-top: 0.25rem; }
.settings-table { max-width: 52rem; margin-bottom: 1.25rem; }
.add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; max-width: 52rem; border: 1px solid var(--rule); background: var(--sheet); padding: 1rem 1.125rem; }
.add-row .form-group { margin: 0; flex: 1; min-width: 12rem; }
.add-row .form-group.narrow { flex: 0 0 6rem; min-width: 0; }
.role-dot { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--rc); margin-right: 0.5rem; }
.access-group { font: 800 1.125rem/1 var(--display); text-transform: uppercase; margin: 1.5rem 0 0.5rem; }
.access-list { list-style: none; border-top: 1px solid var(--rule); max-width: 64rem; }
.access-row { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) auto; gap: 0.75rem 1.25rem; align-items: center; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--rule); }
.access-name { display: flex; align-items: center; gap: 0.5rem; }
.access-name .icon { color: var(--ink-3); }
.access-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 960px) {
  .preview-cols { grid-template-columns: 1fr; }
  .preview-cols > div + div { border-left: 0; border-top: 1px dashed var(--rule); }
}
@media (max-width: 760px) {
  .setup-steps li { grid-template-columns: 2.5rem 1fr; }
  .setup-steps li > :last-child { grid-column: 2; justify-self: start; }
  .access-row { grid-template-columns: 1fr; }
  .service-card { padding: 1rem; }
}

/* ── details: texture and motion, all inside the Dossier world ──────────── */
:root { interpolate-size: allow-keywords; }

/* paper grain over the whole file; static, sits above everything but never catches the mouse */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .9 0 0 0 0 .86 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* stamps are inked, not printed: speckled gaps where the ink didn't take */
.stamp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 2.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E");
  -webkit-mask-size: 8.75rem; mask-size: 8.75rem;
}
/* a heavier press: the stamp lands, overshoots its shadow, settles */
@keyframes press {
  0% { transform: rotate(-7deg) scale(1.35); }
  55% { transform: rotate(-2deg) scale(.95); }
  100% { transform: rotate(-3deg) scale(1); }
}
.stamp.press { animation: press .6s .3s var(--ease-out) backwards; }

/* the class bar's dot is a live light */
.classbar b { display: inline-block; animation: live 2.8s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; } }

/* the member's file sits in a folder: a tab on top, the unit emblem as a watermark */
.service-card { position: relative; margin-top: 2.25rem; }
.service-card::before {
  content: attr(data-tab); position: absolute; left: -1px; bottom: 100%; padding: 0.4375rem 1rem 0.375rem;
  background: var(--sheet); border: 1px solid var(--rule); border-bottom: 0;
  font: 700 0.8125rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass);
  clip-path: polygon(0 0, calc(100% - 0.625rem) 0, 100% 100%, 0 100%);
}
.service-card::after {
  content: ""; position: absolute; right: 1.25rem; bottom: 1rem; width: 9rem; height: 9rem; pointer-events: none;
  background: var(--wm, none) center / contain no-repeat; filter: grayscale(1) contrast(1.2); opacity: .07;
}
.service-card > * { position: relative; z-index: 1; }

/* quota bars fill in on arrival */
/* no delay and no held first frame: a page caught before the animation runs (a background tab) still shows the real width */
.bar i { transform-origin: left; animation: fill .8s var(--ease-out); }
@keyframes fill { from { transform: scaleX(.04); } }

/* the unit emblem is scanned once, like the bot checking your roles */
.scan { position: relative; display: inline-block; overflow: hidden; flex-shrink: 0; }
.scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(240, 113, 103, .55) 85%, rgba(255, 190, 180, .9));
  box-shadow: 0 1px 0 rgba(255, 200, 190, .9); animation: scan 1.1s var(--ease-out) both; pointer-events: none;
}
@keyframes scan { from { transform: translateY(-100%); } 70% { opacity: 1; } to { transform: translateY(340%); opacity: 0; } }

/* flash messages come off the teletype, left to right */
.flash { animation: teletype .7s var(--ease-out) both; }
@keyframes teletype { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* redaction bars flicker when you reach for something you're not cleared for */
.redact { background: linear-gradient(90deg, #000 0 46%, #2a2b2e 46% 49%, #000 49% 100%) 0 0 / 220% 100%; }
.index-row.locked:hover .redact { animation: decrypt .9s steps(5) infinite; }
@keyframes decrypt { to { background-position: -220% 0; } }

/* buttons press like a key */
.btn { transition: background-color .15s, border-color .15s, color .15s, transform .08s; }
.btn:active { transform: translateY(1px); }

/* list rows: a brass rule slides in from the margin on hover */
a.index-row { box-shadow: inset 0 0 0 var(--brass); transition: background-color .2s var(--ease-out), box-shadow .25s var(--ease-out); }
a.index-row:hover { box-shadow: inset 3px 0 0 var(--brass); }

/* drawers fold open instead of snapping */
.tools::details-content, .history::details-content {
  block-size: 0; overflow: hidden; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
}
.tools[open]::details-content, .history[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .classbar b, .stamp.press, .bar i, .scan::after, .flash, .redact { animation: none !important; }
  .scan::after { display: none; }
}

/* ── alive and friendly ────────────────────────────────────────────────── */

/* the server's own banner as letterhead, fading into the page */
.letterhead { height: clamp(7rem, 14vw, 12rem); margin: -2.5rem calc(-1 * clamp(1rem, 3vw, 3.5rem)) 1.5rem; position: relative;
  background: var(--lh) center 35% / cover no-repeat; border-bottom: 1px solid var(--rule); }
.letterhead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,18,20,.1) 0%, rgba(17,18,20,.55) 65%, var(--ground) 100%); }

/* faces next to names */
.face { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex-shrink: 0; background: var(--well); }
.who-line { display: flex; gap: 0.625rem; align-items: flex-start; min-width: 0; }
.who-line .face { margin-top: 0.125rem; }
[data-card] { cursor: help; text-decoration: underline dotted rgba(236,232,223,.35); text-underline-offset: 0.2em; }

/* hover card: a small file slip */
.mcard-pop { position: absolute; z-index: 60; width: 17rem; background: var(--sheet-2); border: 1px solid var(--rule-strong);
  box-shadow: 0 1rem 2rem -0.75rem rgba(0,0,0,.8); animation: slip-in .18s var(--ease-out) both; }
.mcard { padding: 0.875rem 1rem; }
.mcard-head { display: flex; gap: 0.75rem; align-items: center; }
.mcard-head img { width: 3rem; height: 3rem; border-radius: 50%; }
.mcard-head b { display: block; font: 800 1.125rem/1.1 var(--display); text-transform: uppercase; }
.mcard-role { margin: 0.5rem 0 0; }
.mcard-head span { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); }
.mcard-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; padding-top: 0.625rem; border-top: 1px dashed var(--rule); }
.mcard-facts dt { font: 700 0.8125rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mcard-facts dd { font-size: 0.875rem; }
.mcard-links { display: flex; gap: 1rem; margin-top: 0.625rem; font-size: 0.875rem; }
.mcard-links:empty { display: none; }
@keyframes slip-in { from { opacity: 0; transform: translateY(-4px); } }

/* live counts in the sidebar */
.nav-item .nav-count { margin-left: auto; min-width: 1.5em; padding: 0.125rem 0.375rem; font: 700 0.8125rem/1.2 var(--mono); text-align: center;
  color: #fff; background: var(--red); }
.nav-count.bump { animation: bump .5s var(--ease-out); }
.operator-link .nav-count { margin-left: 0.375rem; padding: 0.0625rem 0.375rem; font: 700 0.75rem/1.2 var(--mono); color: #fff; background: var(--red); }
@keyframes bump { 40% { transform: scale(1.35); } }
.nav-quiet { color: var(--ink-3); font-size: 0.875rem; }

/* countdown to the weekly reset */
.countdown { font: 700 0.9375rem/1.3 var(--mono); color: var(--ink); }
.countdown.soon { color: var(--brass); }
.countdown.imminent { color: var(--red-ink); animation: live 2.2s ease-in-out infinite; }

/* celebrations: a green stamp on your file, a shine on new honours */
.stamp-met { position: absolute; right: 1.5rem; top: -1.4rem; z-index: 2; background: var(--ground); color: var(--field); font-size: 1.0625rem; transform: rotate(-6deg); }
.stamp-met.fresh { animation: press-met .7s .6s var(--ease-out) backwards; }
@keyframes press-met { 0% { transform: rotate(-12deg) scale(1.8); } 60% { transform: rotate(-4deg) scale(.94); } 100% { transform: rotate(-6deg) scale(1); } }
.honours { list-style: none; display: grid; gap: 0.5rem; margin: 1rem 0 0; padding-top: 0.875rem; border-top: 1px dashed var(--rule); }
.honours li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; position: relative; overflow: hidden; }
.honour-mark { font: 700 0.8125rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); border: 1px solid currentColor; padding: 0.25rem 0.375rem; }
.honours b { font-weight: 600; }
.celebrate-row.fresh::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(201,161,95,.35) 50%, transparent 70%); animation: shine 1.4s .8s var(--ease-out) both; }
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* empty inbox: a CLEAR stamp */
.stamp-sm-clear { color: var(--field); font-size: 0.8125rem; padding: 0.25rem 0.5rem; flex-shrink: 0; }

/* the wire: a teletype of good news */
.wire { margin: 0 0 2.5rem; max-width: 60rem; }
.wire-list { list-style: none; border-top: 1px solid var(--rule); }
.wire-list li { display: grid; grid-template-columns: 7.5rem auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.625rem 0.25rem; border-bottom: 1px dashed var(--rule); }
.wire-list p { max-width: none; }
.wire-list time { font: 400 0.8125rem/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.wire-mark { font: 700 0.8125rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wire-promotion .wire-mark, .wire-medal .wire-mark, .wire-top .wire-mark { color: var(--brass); }
.wire-joined .wire-mark, .wire-cert .wire-mark, .wire-accepted .wire-mark { color: var(--field); }
.wire-event .wire-mark { color: var(--steel); }

/* toast slips */
.toast-tray { position: fixed; right: 1rem; bottom: 1rem; z-index: 70; display: grid; gap: 0.625rem; width: min(26rem, calc(100vw - 2rem)); }
.toast-tray .toast { position: relative; margin: 0; padding: 0.875rem 2.5rem 0.875rem 1rem; background: var(--sheet-2); border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--field); box-shadow: 0 1rem 2rem -0.75rem rgba(0,0,0,.8); font-size: 0.9375rem; animation: toast-in .45s var(--ease-out) both; }
.toast-tray .toast.flash-error { border-left-color: var(--red); background: #241617; }
.toast-tray .toast.leaving { animation: toast-out .45s ease-in both; }
.toast-x { position: absolute; right: 0.5rem; top: 0.5rem; width: 1.75rem; height: 1.75rem; background: none; border: 0; color: var(--ink-3); font-size: 1.25rem; cursor: pointer; }
.toast-x:hover { color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateX(1.5rem) rotate(1deg); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(1.5rem); } }

/* the welcome tour: a spotlight and an orders slip */
.tour-veil { position: fixed; inset: 0; z-index: 80; }
.tour-veil.dark { background: rgba(8,8,9,.72); }
.tour-ring { position: fixed; z-index: 81; box-shadow: 0 0 0 9999px rgba(8,8,9,.72); outline: 2px solid var(--brass); outline-offset: 2px; pointer-events: none;
  transition: left .3s var(--ease-out), top .3s var(--ease-out), width .3s var(--ease-out), height .3s var(--ease-out); }
.tour-slip { position: fixed; z-index: 82; width: min(24rem, calc(100vw - 1.5rem)); background: var(--sheet); border: 1px solid var(--rule-strong);
  box-shadow: 0 1.5rem 3rem -1rem rgba(0,0,0,.85); padding: 1.25rem 1.375rem 1rem; animation: slip-in .25s var(--ease-out) both; }
.tour-slip.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); animation: none; }
.tour-slip:focus { outline: none; }
.tour-count { font: 700 0.8125rem/1 var(--mono); color: var(--brass); letter-spacing: .08em; margin-bottom: 0.625rem; }
.tour-slip h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.tour-text { color: var(--ink-2); }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1.125rem; }
.tour-actions span { display: flex; gap: 0.5rem; }

@media (max-width: 760px) {
  .wire-list li { grid-template-columns: auto minmax(0, 1fr); }
  .wire-mark { grid-column: 1 / -1; }
  .wire-list time { grid-column: 2; }
  .stamp-met { position: static; display: inline-block; margin-bottom: 0.75rem; }
  .letterhead { margin: -1.5rem -1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-met.fresh, .celebrate-row.fresh::after, .countdown.imminent, .nav-count.bump, .toast-tray .toast, .mcard-pop, .tour-slip { animation: none !important; }
  .tour-ring { transition: none; }
}

.case-head .face, .log-body .face, .edit-line .face, .queue .face { width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; margin-right: 0.25rem; }

.main { overflow-x: clip; }
/* Nothing may widen the page: Safari on iPhone lets you pinch out to the widest thing on it,
   even content other browsers clip, which leaves the page small in a sea of black. */
html { overflow-x: hidden; }
body { overflow-x: clip; max-width: 100%; }
@media (max-width: 760px) {
  .layout, .layout > * { min-width: 0; max-width: 100%; }
  .tabs { max-width: 100%; }
}
@media (max-width: 760px) { .page-head .stamp { font-size: 0.75rem; } }

/* ── recruitment ───────────────────────────────────────────────────────── */
.panel-note { margin: -0.25rem 0 1rem; }
.review-actions { flex-direction: column; align-items: flex-end; }
.review-actions form { margin: 0; }
.deny-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.deny-row select { width: auto; max-width: 17rem; }
.days-input { width: 5rem; }
.form-text { font: 400 0.8125rem/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2);
  background: var(--well); border: 1px solid var(--rule); padding: 0.75rem 0.875rem; margin-top: 0.375rem; max-width: 60ch; }

/* a background check reads like a file sheet */
.check-sheet { border: 1px solid var(--rule); background: var(--sheet); padding: 1.125rem 1.25rem; margin-bottom: 1rem; max-width: 64rem; }
.check-sheet > header { justify-content: space-between; margin-bottom: 0.75rem; }
.check-link { margin-left: auto; font-size: 0.875rem; white-space: nowrap; }
.check-desc { color: var(--ink-2); margin-bottom: 0.75rem; white-space: pre-line; }
.check-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.875rem 1.5rem; padding: 0.875rem 0; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); }
.check-fields dt { font: 700 0.8125rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.25rem; }
.check-fields dd { font-size: 0.9375rem; white-space: pre-line; overflow-wrap: anywhere; }
.check-graph { max-width: 34rem; width: 100%; margin-top: 0.875rem; border: 1px solid var(--rule); }
.check-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.check-actions form { margin: 0; }

/* recruits and their checklists */
.recruit-list { list-style: none; border-top: 1px solid var(--rule); }
.recruit { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr) auto; gap: 0.75rem 1.5rem; align-items: center; padding: 0.875rem 0.25rem; border-bottom: 1px solid var(--rule); }
.checks { list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.checks li { font: 700 0.8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0.3125rem 0.4375rem;
  border: 1px dashed var(--rule-strong); color: var(--ink-3); }
.checks li.ok { border-style: solid; border-color: var(--field); color: var(--field); }
.checks li.ok::before { content: "✓ "; }
.mark-form { border: 1px solid var(--rule); background: var(--sheet); padding: 1rem 1.125rem; max-width: 56rem; }
.mark-form .form-group { max-width: 22rem; }
.pick-list { border: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.pick-list legend { font: 700 0.8125rem/1.3 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 0.5rem; }
.pick { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; border: 1px solid var(--rule-strong); cursor: pointer;
  font: 400 0.9375rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.pick:has(input:checked) { border-color: var(--brass); background: var(--sheet-2); }
.pick input { width: 1rem; height: 1rem; accent-color: var(--red); }
.inline-control { max-width: 34rem; }

/* ── events ────────────────────────────────────────────────────────────── */
.event-form { display: grid; gap: 1.5rem; max-width: 64rem; margin-bottom: 2.5rem; }
.event-form legend, .event-leads label { font: 800 1.125rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin-bottom: 0.625rem; }
.event-types { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.event-leads { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.attend { border: 1px solid var(--rule); background: var(--sheet); padding: 1rem 1.125rem; }
.attend input[type=search] { max-width: 22rem; margin-bottom: 0.75rem; }
.attend-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.375rem; max-height: 26rem; overflow-y: auto; }
.attend-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.625rem; margin-bottom: 0.75rem; }
.attend-tools input[type=search] { margin-bottom: 0; }
.paste-names > summary { list-style: none; }
.paste-names > summary::-webkit-details-marker { display: none; }
.paste-body { display: grid; gap: 0.5rem; margin-top: 0.5rem; max-width: 28rem; }
.event-submit { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
  padding: 0.875rem 1rem; background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 2px solid var(--red); }
.event-submit [data-summary] { margin-right: auto; font: 700 0.875rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 760px) {
  /* phones: the page scrolls, not a box inside it; one name per row so names never wrap three times */
  .attend-list { grid-template-columns: 1fr; max-height: none; overflow: visible; }
  .attend { padding: 0.875rem; }
}
.attend-list li { display: flex; align-items: stretch; }
.attend-list .pick { flex: 1; min-width: 0; }
.attend-list .pick span { display: grid; min-width: 0; }
.attend-list .pick small { font: 400 0.8125rem/1.2 var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star { display: grid; place-items: center; width: 2.25rem; border: 1px solid var(--rule-strong); border-left: 0; cursor: pointer; color: var(--ink-3); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star:has(input:checked) { color: var(--brass); background: var(--sheet-2); }
.star:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: -2px; }
.star.bonus-extra { width: 2.5rem; font: 700 0.8125rem/1 var(--mono); }
.star[hidden] { display: none; }
.sev small + small { margin-top: 0.125rem; color: var(--brass); }
.cohosts .cohost-list { list-style: none; margin: 0.375rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.375rem; max-height: 11rem; overflow-y: auto; }
.cohosts .cohost-list .pick { width: 100%; }
.cohosts .cohost-list .pick span { display: grid; min-width: 0; }
.cohosts .cohost-list .pick small { font: 400 0.75rem/1.2 var(--mono); color: var(--ink-3); }
.override-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0 1rem; align-items: end; }
.override-grid .check { grid-column: 1 / -1; margin-bottom: 0.875rem; }
.event-submit .btn { padding: 0.875rem 1.5rem; }

@media (max-width: 760px) {
  .review-actions { align-items: flex-start; }
  .recruit { grid-template-columns: 1fr; }
  .event-leads { grid-template-columns: 1fr; }
  .check-actions { flex-direction: column; }
}

/* ── settings, chain of command, document access ───────────────────────── */
.setting-list { list-style: none; border-top: 1px solid var(--rule); max-width: 64rem; }
.setting-row { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.4fr) 7rem; gap: 0.5rem 1.25rem; align-items: center; padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--rule); scroll-margin-top: 5rem; }
.setting-row:target { background: var(--sheet-2); }
.setting-name { display: grid; gap: 0.125rem; }
.setting-name span { font-size: 0.8125rem; color: var(--ink-3); }
.setting-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.setting-control select { flex: 1; min-width: 12rem; }
.setting-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; font-size: 0.8125rem; }
.save-bar { position: sticky; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.625rem;
  max-width: 64rem; margin-top: 1rem; padding: 0.875rem 1rem; background: var(--sheet); border: 1px solid var(--rule-strong); border-top: 2px solid var(--red); }
.save-bar [data-dirty-count] { margin-right: auto; font: 700 0.875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
form.inline { display: inline; margin: 0; }
.role-drawer { flex: 1; min-width: 12rem; }
.role-drawer summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; cursor: pointer; }
.role-drawer summary::-webkit-details-marker { display: none; }
.role-drawer[open] summary .linkish { visibility: hidden; }
.pick-filter { max-width: 18rem; margin: 0.625rem 0 0.5rem; }
.role-picks { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.25rem; max-height: 15rem; overflow-y: auto;
  border: 1px solid var(--rule); background: var(--well); padding: 0.375rem; }
.role-picks .pick { width: 100%; padding: 0.25rem 0.5rem; gap: 0.375rem; font-size: 0.875rem; }
.role-picks .role-dot { margin-right: 0; flex: none; }
.field-label { font: 700 0.8125rem/1.3 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }

/* tiers read like entries in a file index; open one to edit it */
.tier-list { list-style: none; border-top: 1px solid var(--rule); max-width: 64rem; }
.tier-list > li { border-bottom: 1px solid var(--rule); }
.tier > summary { list-style: none; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.875rem 0.25rem; cursor: pointer; }
.tier > summary::-webkit-details-marker { display: none; }
.tier > summary:hover { background: var(--sheet); }
.tier[open] > summary { background: var(--sheet-2); }
.tier-label { display: grid; gap: 0.125rem; min-width: 0; }
.tier-label .muted { font-size: 0.8125rem; }
.tier-docs { font: 400 0.8125rem/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.stamp-read { color: var(--steel); justify-self: start; }
.stamp-edit { color: var(--red-ink); justify-self: start; }
.doc-names { list-style: none; display: grid; gap: 0.375rem; padding: 0.875rem 0.25rem 0 4.5rem; }
.doc-names li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.tier-form { border: 1px solid var(--rule); background: var(--sheet); padding: 1rem 1.125rem; margin: 1rem 0.25rem 0.5rem 4.5rem; display: grid; gap: 1rem; }
.tier-form textarea { font-family: var(--mono); font-size: 0.8125rem; }
.tier-form .form-group { margin: 0; }
.tier-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: end; }
.tier-access { margin: 0; }
.tier-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tier-roles .muted { font-size: 0.8125rem; }
.tier-remove { margin: 0 0.25rem 1rem 4.5rem; }
.tier-new { max-width: 64rem; margin-top: 1rem; }
.tier-new > summary { grid-template-columns: auto 1fr; gap: 0.5rem; border: 1px dashed var(--rule-strong); padding: 0.75rem 1rem; }
.tier-new .tier-form { margin-left: 0; }

/* chain of command: an order of battle, one section per unit */
.coc { display: grid; gap: 1.75rem; max-width: 64rem; margin-top: 1.75rem; }
.tag-hand { font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.coc-section h2 { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
.coc-list { list-style: none; border-top: 2px solid var(--ink); }
.coc-row { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) auto; gap: 0.5rem 1.25rem; align-items: center; padding: 0.625rem 0.25rem; border-bottom: 1px solid var(--rule); }
.coc-post { font: 700 0.8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.coc-holders { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; min-width: 0; }
.coc-holder { display: inline-flex; align-items: center; gap: 0.5rem; }
.coc-row.vacant .coc-post { color: var(--ink-3); }
.stamp-vacant { color: var(--ink-3); }
.stamp-acting { color: var(--brass); }
.coc-edit { justify-self: end; }
.coc-edit[open] { grid-column: 1 / -1; justify-self: stretch; }
.coc-edit summary { list-style: none; font-size: 0.875rem; }
.coc-edit summary::-webkit-details-marker { display: none; }
.coc-edit-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid var(--rule); background: var(--sheet); }
.coc-edit-body select { max-width: 20rem; }

@media (max-width: 760px) {
  .setting-row, .coc-row { grid-template-columns: 1fr; }
  .setting-meta { flex-direction: row; justify-content: flex-start; }
  .tier-top, .tier-roles { grid-template-columns: 1fr; }
  .tier > summary { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .tier-docs { display: none; }
  .doc-names, .tier-form, .tier-remove { margin-left: 0; padding-left: 0.25rem; }
  .coc-edit { justify-self: start; }
}

/* ── Loading skeletons: placeholder shapes while a panel is on its way ─────── */
.skel { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--sheet-2) 25%, var(--rule) 45%, var(--sheet-2) 65%); background-size: 300% 100%; animation: skel-sheen 1.3s ease-in-out infinite; }
.skel-title { height: 1.75rem; width: 60%; margin-bottom: 1.25rem; }
.skel-line { height: .875rem; width: 100%; margin-bottom: .625rem; }
.skel-line.short { width: 45%; }
.skel-block { height: 7.5rem; width: 100%; margin: 1.25rem 0; }
.skeleton-drawer { padding: 1.5rem; }
.mcard-skel { display: flex; gap: .75rem; align-items: center; padding: .875rem; }
.mcard-skel > span:last-child { flex: 1; }
.mcard-skel .skel-line { margin-bottom: .5rem; }
.skel-avatar { width: 3rem; height: 3rem; border-radius: 50%; flex: none; }
@keyframes skel-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* htmx panels that are re-fetching fade slightly instead of jumping */
.htmx-request.inbox, .htmx-request > .inbox { opacity: .75; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ── Legal pages, site footer, your-data controls ─────────────────────────── */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.125rem; margin: 2.25rem 0 .75rem; letter-spacing: .04em; }
.legal p, .legal li, .legal address { color: var(--ink-2); line-height: 1.65; margin-bottom: .875rem; font-style: normal; }
.legal ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal li { margin-bottom: .375rem; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: .15em; }
.legal-updated { margin-top: 2.5rem; font: 400 .8125rem/1.4 var(--mono); color: var(--ink-3) !important; }
.site-foot { border-top: 1px solid var(--rule); padding: 1.25rem clamp(1rem, 3vw, 3.5rem) 1.75rem; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: .5rem 1.5rem; font: 400 .8125rem/1.5 var(--mono); color: var(--ink-3); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-foot a { color: var(--ink-2); }
.site-foot p { max-width: none; }
.layout:has(.sidebar) ~ .site-foot { display: none; }      /* the sidebar carries these links at its foot */
.nav-legal { margin-top: 0.75rem; padding: 0.875rem 0.75rem 0; border-top: 1px solid var(--rule); font: 400 .75rem/1.5 var(--mono); color: var(--ink-3); }
.nav-legal nav { display: flex; flex-wrap: wrap; gap: .125rem .875rem; margin-bottom: .375rem; }
.nav-legal a { color: var(--ink-2); }
.nav-legal a:hover { color: var(--ink); }
.nav-legal p { margin: 0; }
.consent-note { margin-top: 1.25rem; font-size: .8125rem; color: var(--ink-3); }
.consent-note a { color: var(--ink-2); text-decoration: underline; }
.your-data { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.your-data h2 { font-size: 1.25rem; margin-bottom: .75rem; }
.your-data p { color: var(--ink-2); margin-bottom: 1rem; }
.danger-zone { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--red-deep); background: var(--red-wash); }
.danger-zone h3 { font-size: 1rem; margin-bottom: .5rem; color: var(--red-ink); }

/* ── Bot settings > Quota & points ───────────────────────────────────────────
   Every quota part keeps one colour everywhere (legend, column heads, inputs). */
.qm-c-points         { --qc: var(--brass); }
.qm-c-company_points { --qc: var(--steel); }
.qm-c-ingame_minutes { --qc: var(--field); }
.qm-c-tryouts        { --qc: var(--red-ink); }
.qm-c-hosted         { --qc: #c4a5e8; }
.qm-intro p { color: var(--ink-2); margin-bottom: 1rem; }
.qm-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .75rem 1rem; margin: 0 0 2.25rem;
  background: var(--sheet); border: 1px solid var(--rule); font: 400 .8125rem/1.4 var(--mono); color: var(--ink-2); }
.qm-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.qm-legend-note { color: var(--ink-3); }
.qm-legend-note:first-of-type { margin-left: auto; }
.qm-dot { width: .625rem; height: .625rem; border-radius: 50%; background: var(--qc, var(--ink-3)); flex: none; display: inline-block; }
.qm-swatch { width: .875rem; height: .875rem; border-left: 3px solid var(--brass); background: color-mix(in srgb, var(--brass) 14%, transparent); display: inline-block; }
.qm-section { display: flex; align-items: baseline; gap: .75rem; font-size: 1.5rem; margin: 2.5rem 0 .5rem; scroll-margin-top: 5rem; }
.qm-num { font: 700 .9375rem/1 var(--mono); color: var(--brass); letter-spacing: .04em; }
.qm-panel { background: var(--sheet); border: 1px solid var(--rule); margin: 0 0 1.25rem; scroll-margin-top: 5rem; }
.qm-panel:target { border-color: var(--brass); }
.qm-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem .875rem; border-bottom: 1px dashed var(--rule-strong);
  cursor: pointer; list-style: none; user-select: none; }
.qm-head::-webkit-details-marker { display: none; }
.qm-head:hover { background: var(--sheet-2); }
.qm-head:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.qm-panel:not([open]) > .qm-head { border-bottom: 0; }
.qm-chevron { width: .5rem; height: .5rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: .125rem; }
.qm-panel[open] > .qm-head .qm-chevron { transform: rotate(45deg); }
.qm-head:hover .qm-chevron { border-color: var(--ink); }
.qm-head .qm-dirty { margin-right: 0; }
.qm-toolbar { display: flex; gap: .5rem; justify-content: flex-end; margin: -1.25rem 0 2rem; }
.qm-head h3 { font-size: 1.25rem; }
.qm-changed { font: 700 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass);
  border: 1px solid currentColor; padding: .25rem .4rem; transform: rotate(-2deg); }
.qm-reach { margin-left: auto; font: 400 .8125rem/1 var(--mono); color: var(--ink-3); }
.qm-scroll { overflow-x: auto; position: relative; }  /* holds anything positioned inside it */
.qm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.qm-table th, .qm-table td { padding: .625rem .75rem; text-align: center; vertical-align: top; }
.qm-table thead th { font: 700 .75rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
  border-bottom: 2px solid var(--qc, var(--rule-strong)); white-space: nowrap; }
.qm-table thead th .qm-dot { margin-right: .4rem; vertical-align: .05rem; }
.qm-table thead th small { display: block; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.qm-table tbody tr + tr { border-top: 1px dashed var(--rule); }
.qm-table tbody tr.qm-officer:first-of-type, .qm-table tbody tr:first-child + tr.qm-officer { border-top: 1px solid var(--rule-strong); }
.qm-who { text-align: left !important; min-width: 11rem; position: sticky; left: 0; z-index: 1; background: var(--sheet); }
.qm-scroll { scrollbar-color: var(--rule-strong) transparent; }
.qm-table tbody .qm-who { font: 600 .9375rem/1.3 var(--sans); color: var(--ink); text-transform: none; letter-spacing: normal; }
.qm-who small { display: block; font: 400 .75rem/1.4 var(--mono); color: var(--ink-3); margin-top: .15rem; }
.qm-cell input { width: 5.5rem; text-align: center; font: 700 1rem/1 var(--mono); padding: .5rem .25rem; background: var(--well);
  border: 1px solid var(--rule); border-bottom: 2px solid color-mix(in srgb, var(--qc, var(--rule-strong)) 55%, transparent); color: var(--ink); }
.qm-cell input:focus { outline: 2px solid var(--qc, var(--brass)); outline-offset: 1px; }
.qm-cell input.is-zero { color: var(--ink-3); font-weight: 400; }
.qm-cell.is-custom input { background: color-mix(in srgb, var(--brass) 12%, var(--well)); border-left: 3px solid var(--brass); }
.qm-cell.is-dirty input, .qm-rule.is-dirty input { outline: 2px dashed var(--brass); outline-offset: 2px; }
.qm-was { display: block; margin-top: .3rem; font: 400 .6875rem/1 var(--mono); color: var(--brass); white-space: nowrap; }
.qm-tags { display: flex; gap: .3rem; margin-top: .3rem; }
.qm-tags span { font: 700 .625rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel);
  border: 1px solid color-mix(in srgb, var(--steel) 50%, transparent); padding: .2rem .35rem; }
.qm-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: .875rem 1.25rem; border-top: 1px dashed var(--rule-strong);
  background: var(--sheet-2); }
.qm-dirty { margin-right: auto; font: 700 .8125rem/1 var(--mono); color: var(--brass); }
.qm-dirty::before { content: "● "; animation: qm-pulse 1.6s ease-in-out infinite; }
@keyframes qm-pulse { 50% { opacity: .35; } }
.qm-rules { list-style: none; }
.qm-rule { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 6rem; gap: .5rem 1.5rem; align-items: center; padding: .875rem 1.25rem; }
.qm-rule + .qm-rule { border-top: 1px dashed var(--rule); }
.qm-rule-name { font: 400 .9375rem/1.4 var(--sans); text-transform: none; letter-spacing: normal; color: var(--ink); margin: 0; }
.qm-rule-name b { display: block; font-weight: 600; }
.qm-rule-name span { display: block; font-size: .8125rem; color: var(--ink-3); margin-top: .125rem; }
.qm-rule input[type=number] { width: 100%; text-align: center; font: 700 1rem/1 var(--mono); padding: .5rem; background: var(--well); border: 1px solid var(--rule); color: var(--ink); }
.qm-rule.is-custom input[type=number] { border-left: 3px solid var(--brass); background: color-mix(in srgb, var(--brass) 12%, var(--well)); }
.qm-rule .qm-was { margin: 0; }
.qm-switch { position: relative; display: inline-flex; width: 3rem; height: 1.625rem; justify-self: center; }
.qm-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.qm-switch span { position: absolute; inset: 0; background: var(--well); border: 1px solid var(--rule-strong); border-radius: 1rem; transition: background .15s; }
.qm-switch span::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--ink-3); transition: transform .15s, background .15s; }
.qm-switch input:checked + span { background: color-mix(in srgb, var(--field) 30%, var(--well)); border-color: var(--field); }
.qm-switch input:checked + span::after { transform: translateX(1.375rem); background: var(--field); }
.qm-switch input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.qm-rule.is-dirty .qm-switch span { outline: 2px dashed var(--brass); outline-offset: 2px; }
@media (max-width: 760px) {
  .qm-rule { grid-template-columns: 1fr 6rem; }
  .qm-rule .qm-was { grid-column: 1 / -1; }
  .qm-legend-note:first-of-type { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .qm-dirty::before { animation: none; } .qm-switch span, .qm-switch span::after, .qm-chevron { transition: none; } }
/* ── applications, feedback, exams ─────────────────────────────────────── */
.num-input { width: 6rem; }
.hot { color: var(--red-ink); }
.plan-count.count-hot { background: var(--red); color: #fff; border-color: var(--red); }
.form-kind { font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 0.3125rem 0.4375rem; border: 1px solid currentColor; white-space: nowrap; justify-self: start; }
.kind-application { color: var(--brass); }
.kind-feedback { color: var(--steel); }
.kind-exam { color: var(--red-ink); }
.stamp-sm.st-submitted, .stamp-sm.fs-scheduled { color: var(--brass); }
.stamp-sm.st-accepted, .stamp-sm.st-passed, .stamp-sm.fs-open { color: var(--field); }
.stamp-sm.st-denied, .stamp-sm.st-failed { color: var(--red-ink); }
.stamp-sm.st-received, .stamp-sm.fs-draft { color: var(--steel); }
.stamp-sm.fs-closed { color: var(--ink-3); }

/* the open-forms index reads like the § index on the overview */
.form-index, .sent-list, .unit-forms, .resp-list { list-style: none; border-top: 1px solid var(--rule); max-width: 64rem; }
.form-index > li, .sent-list > li, .unit-forms > li, .resp-list > li { border-bottom: 1px solid var(--rule); }
.form-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.5rem 1.25rem; align-items: start; padding: 1rem 0.5rem; color: var(--ink); text-decoration: none; }
a.form-row:hover { background: var(--sheet); }
.form-row.locked { opacity: .72; }
.form-body { display: grid; gap: 0.25rem; min-width: 0; }
.form-blurb { color: var(--ink-2); font-size: 0.9375rem; margin-top: 0.25rem; }
.form-why { display: flex; align-items: center; gap: 0.375rem; font: 400 0.8125rem/1.4 var(--mono); color: var(--red-ink); margin-top: 0.25rem; }
.form-when { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); white-space: nowrap; text-align: right; }
.sent-row, .unit-form, .resp-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto auto; gap: 0.5rem 1.25rem; align-items: center; padding: 0.875rem 0.5rem; color: var(--ink); text-decoration: none; }
.resp-row { grid-template-columns: 1.75rem minmax(0, 1fr) auto auto; }
.sent-row:hover, .unit-form:hover, .resp-row:hover { background: var(--sheet); }
.sent-title { display: grid; gap: 0.125rem; min-width: 0; }
.sent-title .muted { font-size: 0.8125rem; }
.sent-score { font: 700 0.875rem/1 var(--mono); color: var(--ink-2); }
.manage-new { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.unit-block { margin: 1.75rem 0; max-width: 64rem; }
.unit-block h2 { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.5rem; }
.unit-forms { border-top: 2px solid var(--ink); }
.face-anon { display: inline-grid; place-items: center; font: 700 0.875rem/1 var(--mono); color: var(--ink-3); border: 1px dashed var(--rule-strong); }

/* a form is an order sheet */
.paper-sheet { border: 1px solid var(--rule); background: var(--sheet); padding: 1.5rem 1.75rem 1.75rem; max-width: 48rem; margin-bottom: 1.5rem; position: relative; }
.sheet-head { display: flex; justify-content: space-between; gap: 1rem; font: 700 0.8125rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px dashed var(--rule-strong); padding-bottom: 0.625rem; margin-bottom: 1.25rem; }
.sheet-title { font: 800 clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.sheet-desc { color: var(--ink-2); white-space: pre-line; margin-top: 0.75rem; max-width: 62ch; }
.sheet-meta { list-style: none; display: grid; gap: 0.375rem; margin: 1rem 0 0.5rem; font: 400 0.8125rem/1.5 var(--mono); color: var(--ink-3); }
.anon-note { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--steel); }
.sheet-why { display: flex; gap: 0.625rem; align-items: flex-start; border: 1px solid var(--red-deep); background: var(--red-wash); color: var(--red-ink); padding: 0.75rem 1rem; margin: 1rem 0; }
.sheet-form { margin-top: 1.25rem; }
.sheet-form[inert] { opacity: .55; }
.q-section { border-top: 2px solid var(--ink); margin: 2rem 0 1rem; padding-top: 0.75rem; }
.q-section h2 { font-size: 1.375rem; }
.q-section p { color: var(--ink-2); margin-top: 0.25rem; }
.q { border: 0; border-bottom: 1px solid var(--rule); padding: 1.125rem 0; margin: 0; min-width: 0; }
.q legend { float: left; width: 100%; font-weight: 600; font-size: 1.0625rem; padding: 0; margin-bottom: 0.625rem; }
.q legend + * { clear: both; }
.q-num { font: 700 0.9375rem/1 var(--mono); color: var(--brass); margin-right: 0.25rem; }
.q-req { color: var(--red-ink); }
.q-help { color: var(--ink-3); font-size: 0.875rem; margin: -0.25rem 0 0.625rem; }
.q input[type=text], .q textarea, .q select { max-width: 40rem; }
.date-input { max-width: 12rem; }
.opts { display: grid; gap: 0.375rem; }
.opts-row { display: flex; gap: 0.5rem; }
.opt { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border: 1px solid var(--rule); cursor: pointer; max-width: 40rem; text-transform: none; letter-spacing: 0; font: 400 0.9375rem/1.35 var(--sans); color: var(--ink); }
.opt:has(input:checked) { border-color: var(--brass); background: var(--sheet-2); }
.opt input { width: 1.0625rem; height: 1.0625rem; accent-color: var(--red); flex: none; }
.scale { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.scale-end { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.scale-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.scale-dot { position: relative; cursor: pointer; }
.scale-dot input { position: absolute; opacity: 0; }
.scale-dot span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--rule-strong); font: 700 0.9375rem/1 var(--mono); color: var(--ink-2); }
.scale-dot input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.scale-dot input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.sheet-submit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.sheet-submit .muted { font-size: 0.8125rem; }
.sheet-result { display: grid; justify-items: start; gap: 0.75rem; border-top: 2px solid var(--ink); margin-top: 1.25rem; padding-top: 1.25rem; }
.paper-stamp-inline { font-size: 1.375rem; padding: 0.5rem 0.875rem; }
.result-score { font: 700 1rem/1.3 var(--mono); color: var(--ink-2); }
.result-links { font-size: 0.9375rem; }
.stamp-approved { color: var(--field); }
.stamp-denied { color: var(--red-ink); }
.stamp-received { color: var(--steel); }

/* the builder: the sheet on the left, its settings on the right */
.publish-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; border: 1px solid var(--rule); background: var(--sheet); padding: 0.875rem 1rem; margin-bottom: 1.25rem; max-width: 86rem; }
.publish-bar form { margin: 0; }
.publish-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.publish-form .form-group { margin: 0; }
.publish-form .muted { flex-basis: 100%; font-size: 0.8125rem; }
.publish-now { font: 400 0.875rem/1.4 var(--mono); color: var(--ink-2); align-self: center; }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.builder-sheet { max-width: none; }
.title-input { font: 800 1.75rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em; background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong); padding: 0.25rem 0; width: 100%; color: var(--ink); }
.desc-input { margin-top: 0.75rem; background: transparent; }
.builder-note { font-size: 0.8125rem; margin-top: 0.75rem; }
.q-cards { list-style: none; display: grid; gap: 0.75rem; margin: 1.25rem 0; }
.q-empty { border: 1px dashed var(--rule-strong); padding: 1.25rem; color: var(--ink-3); text-align: center; }
.q-card { border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); background: var(--ground); padding: 0.875rem 1rem; display: grid; gap: 0.5rem; }
.q-card:focus-within { border-left-color: var(--brass); }
.q-card-section { border-left-color: var(--ink); background: var(--sheet-2); }
.q-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.q-card .q-num { min-width: 1.5rem; }
.q-type { width: auto; min-width: 10rem; }
.q-tools { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.q-required { font-size: 0.8125rem; margin-right: 0.5rem; }
.q-btn { width: 2rem; height: 2rem; display: grid; place-items: center; background: none; border: 1px solid var(--rule); color: var(--ink-2); cursor: pointer; font-size: 1rem; }
.q-btn:hover:not(:disabled) { border-color: var(--rule-strong); color: var(--ink); }
.q-btn:disabled { opacity: .35; cursor: default; }
.q-del:hover:not(:disabled) { color: var(--red-ink); border-color: var(--red-deep); }
.q-title { font-weight: 600; font-size: 1.0625rem; }
.q-helptext { font-size: 0.875rem; }
.opt-list { list-style: none; display: grid; gap: 0.375rem; }
.opt-edit { display: flex; align-items: center; gap: 0.5rem; }
.opt-edit input:not([type]) { flex: 1; }
.opt-mark { width: 1rem; height: 1rem; border: 1px solid var(--rule-strong); flex: none; }
.opt-mark-choice { border-radius: 50%; }
.opt-mark-dropdown { border: 0; }
.opt-mark-dropdown::before { content: "▸"; color: var(--ink-3); font-size: 0.75rem; }
.opt-key { width: 1.0625rem; height: 1.0625rem; accent-color: var(--field); flex: none; }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; font-size: 0.875rem; color: var(--ink-3); }
.q-row input:not(.num-input) { flex: 1; min-width: 10rem; }
.q-row select { width: auto; }
.q-score { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.25rem; border-top: 1px dashed var(--rule); padding-top: 0.625rem; font-size: 0.875rem; color: var(--ink-2); }
.q-score select { width: auto; }
.key-list { display: grid; gap: 0.25rem; flex: 1; min-width: 14rem; }
.add-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; border: 1px dashed var(--rule-strong); padding: 0.75rem; }
.add-label { font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 0.375rem; }
.add-btn { background: none; border: 1px solid var(--rule); color: var(--ink); padding: 0.4375rem 0.625rem; font: 400 0.875rem/1 var(--sans); cursor: pointer; }
.add-btn:hover { border-color: var(--brass); background: var(--sheet-2); }
.builder-side { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.side-box { border: 1px solid var(--rule); background: var(--sheet); padding: 1rem 1.125rem; display: grid; gap: 0.75rem; }
.side-box h2 { font-size: 1.125rem; }
.side-box .form-group { margin: 0; }
.side-box .muted { font-size: 0.8125rem; }
.side-fact { font-size: 0.9375rem; }
.side-check { font-size: 0.9375rem; }
.side-drawer { border-top: 1px solid var(--rule); padding-top: 0.625rem; display: grid; gap: 0.625rem; }
.side-drawer[open] { gap: 0.75rem; }
.side-drawer summary { cursor: pointer; font: 700 0.8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.side-drawer .role-picks { grid-template-columns: 1fr; max-height: 12rem; }
.save-box { display: flex; align-items: center; gap: 0.75rem; }
.save-box .btn { flex: 1; padding: 0.875rem; }

/* responses and summary */
.resp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 1rem; max-width: 64rem; }
.resp-filter a:not(.btn) { font: 700 0.8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 0.5rem 0.625rem; border: 1px solid var(--rule); color: var(--ink-2); text-decoration: none; }
.resp-filter a[aria-current] { border-color: var(--brass); color: var(--ink); background: var(--sheet-2); }
.resp-export { margin-left: auto; }
.summary-list { list-style: none; display: grid; gap: 1.5rem; max-width: 56rem; }
.summary-q { border-top: 1px solid var(--rule); padding-top: 1rem; }
.summary-q h3 { font-size: 1.0625rem; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 600; }
.summary-q > .muted { font-size: 0.8125rem; margin: 0.25rem 0 0.75rem; }
.summary-texts { list-style: none; display: grid; gap: 0.375rem; max-height: 20rem; overflow-y: auto; }
.summary-texts li { border-left: 2px solid var(--rule-strong); padding: 0.25rem 0.75rem; color: var(--ink-2); font-size: 0.9375rem; white-space: pre-line; }

/* reviewing one response */
.review { display: grid; grid-template-columns: minmax(0, 48rem) minmax(16rem, 22rem); gap: 1.5rem; align-items: start; }
.review-single { grid-template-columns: minmax(0, 48rem); }
.review-side { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.review-who { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.review-who > div { flex: 1; min-width: 0; }
.face-lg { width: 3rem; height: 3rem; }
.answer-sheet { list-style: none; counter-reset: q; }
.answer-sheet li { border-top: 1px solid var(--rule); padding: 0.875rem 0; counter-increment: q; }
.q-label { font-weight: 600; }
.q-label::before { content: counter(q) ". "; font: 700 0.9375rem/1 var(--mono); color: var(--brass); }
.q-answer { color: var(--ink-2); white-space: pre-line; margin-top: 0.375rem; padding-left: 1.5rem; overflow-wrap: anywhere; }
.file-facts { display: grid; gap: 0.5rem; }
.file-facts div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--rule); padding-bottom: 0.375rem; font-size: 0.9375rem; }
.file-facts dt { color: var(--ink-3); }
.history-mini { list-style: none; display: grid; gap: 0.375rem; font-size: 0.875rem; }
.history-mini li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.notes { list-style: none; display: grid; gap: 0.625rem; }
.notes li { border-left: 2px solid var(--brass); padding: 0.125rem 0 0.125rem 0.75rem; }
.notes p { white-space: pre-line; font-size: 0.9375rem; }
.notes small { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.note-form { display: grid; gap: 0.5rem; justify-items: start; margin: 0; }

/* the decision: a signed slip, stamped by hand */
.decision-paper { position: relative; max-width: 40rem; border: 1px solid var(--rule-strong); outline: 1px solid var(--rule); outline-offset: 4px;
  background: var(--sheet-2); padding: 1.25rem 1.5rem 1.5rem; margin: 0.75rem 5px 2rem; display: grid; gap: 1rem; }
.decision-paper > header { display: flex; justify-content: space-between; font: 700 0.8125rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px dashed var(--rule-strong); padding-bottom: 0.625rem; }
.decision-word { font: 800 1.5rem/1.1 var(--display); text-transform: uppercase; }
.decision-reason { white-space: pre-line; color: var(--ink); max-width: 30rem; }
.decision-pick { border: 0; padding: 0; margin: 0; display: flex; gap: 0.5rem; }
.decision-pick label { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border: 1px solid var(--rule-strong); cursor: pointer; font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.decision-pick input { accent-color: var(--red); }
.pick-approve:has(input:checked) { border-color: var(--field); color: var(--field); }
.pick-deny:has(input:checked) { border-color: var(--red-ink); color: var(--red-ink); }
.sign-block { max-width: 18rem; margin-top: 0.75rem; }
.sign-line { border-bottom: 1px solid var(--ink-2); padding: 0 0.25rem 0.125rem; min-height: 2.5rem; display: flex; align-items: flex-end; }
.signature { font: italic 400 1.5rem/1.1 var(--mono); color: var(--ink); transform: rotate(-2deg); transform-origin: left bottom; }
.sign-block small { display: block; font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); margin-top: 0.25rem; }
.paper-stamp { position: absolute; font-size: 1.5rem; padding: 0.5rem 0.875rem; transform: translate(-50%, -50%) rotate(var(--r, -6deg)); pointer-events: none; }
.pending .decision-word { color: var(--brass); }
.exam-result { min-height: 9rem; }
.stamp-tool { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 0.375rem; cursor: grab; touch-action: none; user-select: none; z-index: 2; }
.stamp-tool:focus-visible { outline: 2px dashed var(--brass); outline-offset: 6px; }
.stamp-tool.lifted { cursor: grabbing; }
.stamp-tool.lifted .paper-stamp-tool { transform: rotate(var(--r, -6deg)) scale(1.12); filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
.paper-stamp-tool { font-size: 1.5rem; padding: 0.5rem 0.875rem; transform: rotate(var(--r, -6deg)); transition: transform .15s var(--ease-out), filter .15s; }
.stamp-idle { color: var(--ink-3); border-style: dashed; }
.press-btn { font: 800 0.8125rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; background: var(--red); color: #fff; border: 0; padding: 0.4375rem 0.75rem; cursor: pointer; box-shadow: 0 3px 0 var(--red-deep); }
.press-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-deep); }
.stamp-tool.pressing .press-btn { visibility: hidden; }
.stamp-tool.pressing .paper-stamp-tool { animation: stamp-down .6s var(--ease-out) both; }
@keyframes stamp-down {
  0% { transform: rotate(var(--r, -6deg)) scale(1.5); opacity: .4; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .6)); }
  60% { transform: rotate(var(--r, -6deg)) scale(.94); opacity: 1; filter: none; }
  100% { transform: rotate(var(--r, -6deg)) scale(1); }
}
.stamp-hint { font-size: 0.8125rem; max-width: 26rem; }
.decision-paper[data-stamp-paper] { padding-bottom: 5.5rem; }

@media (max-width: 1100px) {
  .builder { grid-template-columns: 1fr; }
  .builder-side { position: static; }
  .review { grid-template-columns: 1fr; }
  .review-side { position: static; }
}
@media (max-width: 760px) {
  .form-row, .sent-row, .unit-form { grid-template-columns: 1fr; }
  .form-when { text-align: left; }
  .resp-row { grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
  .resp-row .sent-score { display: none; }
  .paper-sheet { padding: 1.125rem 1rem 1.25rem; }
  .q-tools { margin-left: 0; }
  .decision-paper { padding: 1rem 1rem 5.5rem; }
}
@media (prefers-reduced-motion: reduce) { .stamp-tool.pressing .paper-stamp-tool { animation: none; } }

/* Applications: the bot operator's test mode */
.test-mode { display: flex; align-items: center; gap: .875rem; padding: .75rem 1rem; margin: 0 0 1.5rem; max-width: none;
  border: 1px dashed var(--steel); background: color-mix(in srgb, var(--steel) 8%, transparent); color: var(--ink-2); font-size: .9375rem; }
.test-stamp { color: var(--steel); border-color: var(--steel); flex: none; }
.test-tag { font: 700 .625rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel);
  border: 1px solid color-mix(in srgb, var(--steel) 55%, transparent); padding: .2rem .35rem; vertical-align: .2rem; margin-left: .35rem; }
.test-switch { flex: none; }
.test-switch button { display: flex; align-items: center; gap: .75rem; background: var(--sheet); border: 1px solid var(--rule-strong);
  padding: .625rem .875rem; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.test-switch button:hover { border-color: var(--steel); }
.test-switch button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.test-switch-track { position: relative; width: 2.75rem; height: 1.5rem; border-radius: 1rem; background: var(--well); border: 1px solid var(--rule-strong); flex: none; }
.test-switch-track::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ink-3); transition: transform .15s; }
.test-switch [aria-checked="true"] .test-switch-track { background: color-mix(in srgb, var(--steel) 30%, var(--well)); border-color: var(--steel); }
.test-switch [aria-checked="true"] .test-switch-track::after { transform: translateX(1.25rem); background: var(--steel); }
.test-switch-text b { display: block; font: 700 .8125rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.test-switch-text small { display: block; font-size: .8125rem; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .test-switch-track::after { transition: none; } }

/* ── Admin › Who sees what: role categories × tabs ─────────────────────────── */
.vis-g-you     { --qc: var(--steel); }
.vis-g-command { --qc: var(--brass); }
.vis-g-files   { --qc: var(--field); }
.vis-start { position: relative; max-width: 46rem; background: var(--sheet); border: 1px solid var(--rule); padding: 2rem 2rem 1.75rem; }
.vis-start h3 { font-size: 1.75rem; margin-bottom: .5rem; }
.vis-start > p { color: var(--ink-2); margin-bottom: 1rem; }
.vis-stamp { position: absolute; right: 1.5rem; top: 1.25rem; color: var(--ink-3); font-size: .875rem; transform: rotate(-4deg); }
.vis-how { list-style: none; counter-reset: how; margin: 0 0 1.5rem; display: grid; gap: .625rem; }
.vis-how li { counter-increment: how; display: grid; grid-template-columns: 2rem 1fr; color: var(--ink-2); }
.vis-how li::before { content: counter(how, decimal-leading-zero); font: 700 .875rem/1.6 var(--mono); color: var(--brass); }
.vis-how b { color: var(--ink); }
.vis-start form { margin-bottom: .5rem; }

.vis-preview { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; }
.vis-preview label { font: 700 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.vis-preview select { max-width: 16rem; }
.vis-as { border-left: 3px solid var(--brass); background: var(--sheet); padding: 1rem 1.25rem; margin: 0 0 2rem; scroll-margin-top: 5rem; }
.vis-as p { margin: 0 0 .625rem; }
.vis-as .muted { margin: .625rem 0 0; font-size: .8125rem; }
.vis-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; }
.vis-chips li { font: 700 .75rem/1 var(--mono); letter-spacing: .04em; padding: .375rem .625rem; border: 1px solid var(--rule); }
.vis-chips li.on { color: var(--ink); border-color: var(--qc, var(--ink-3)); background: color-mix(in srgb, var(--qc, var(--ink-3)) 14%, transparent); }
.vis-chips li.off { color: var(--ink-3); text-decoration: line-through; opacity: .6; }

.vis-sheet { padding: 0; }
.vis-table th, .vis-table td { vertical-align: middle; }
.vis-table thead .vis-g { color: var(--qc); border-bottom: 2px solid var(--qc); padding-bottom: .5rem; }
.vis-table thead tr.vis-groups th { border-bottom-width: 2px; }
.vis-table .vis-g + .vis-g, .vis-table td.vis-g-command:first-of-type { border-left: 0; }
.vis-table th, .vis-table td { padding: .5rem .3rem; }
.vis-col { min-width: 3.5rem; max-width: 5.5rem; white-space: normal !important; }
.vis-col small { display: block; margin-top: .25rem; font-size: .625rem; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.vis-col.is-off .vis-colbtn { opacity: .55; }
.vis-colbtn { all: unset; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: .375rem; padding: .25rem .375rem; color: var(--ink-2);
  font: 600 .75rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; border-radius: 2px; white-space: normal; text-align: center; }
.vis-colbtn svg { width: 1.125rem; height: 1.125rem; color: var(--qc); }
.vis-colbtn:hover { color: var(--ink); background: var(--sheet-2); }
.vis-colbtn:focus-visible { outline: 2px solid var(--qc); outline-offset: 1px; }
.vis-table tbody tr:hover > * { background: color-mix(in srgb, var(--sheet-2) 70%, transparent); }
.vis-table tbody tr:hover > .qm-who { background: var(--sheet-2); }
.vis-table tbody tr:target > .qm-who { box-shadow: inset 3px 0 0 var(--brass); }
.vis-table .qm-who { min-width: 10rem; padding-left: .875rem; }
.vis-name { color: var(--ink); text-decoration: none; }
.vis-name:hover { color: var(--brass); text-decoration: underline; }
.vis-rowbtn { all: unset; cursor: pointer; margin-top: .375rem; font: 400 .6875rem/1 var(--mono); color: var(--ink-3); border-bottom: 1px dashed currentColor; }
.vis-rowbtn:hover, .vis-rowbtn:focus-visible { color: var(--brass); }
.vis-fixed .qm-who { color: var(--ink-2) !important; font-style: italic; }
.vis-cell { width: auto; }

/* the tick: a stamped square in the tab group's colour */
.vis-tick { position: relative; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; cursor: pointer; }
.vis-tick input { appearance: none; -webkit-appearance: none; margin: 0; width: 1.75rem; height: 1.75rem; cursor: pointer;
  border: 1.5px solid var(--rule-strong); background: var(--well); border-radius: 2px; transition: background .15s, border-color .15s, transform .15s var(--ease-out); }
.vis-tick input:hover { border-color: var(--qc); }
.vis-tick input:focus-visible { outline: 2px solid var(--qc); outline-offset: 2px; }
.vis-tick input:checked { background: color-mix(in srgb, var(--qc) 22%, var(--well)); border-color: var(--qc); transform: rotate(-3deg); }
.vis-tick::after { content: ""; position: absolute; width: .5rem; height: .9rem; border: solid var(--qc); border-width: 0 3px 3px 0;
  transform: translateY(-.1rem) rotate(45deg) scale(0); transition: transform .18s var(--ease-out); pointer-events: none; }
.vis-tick:has(input:checked)::after { transform: translateY(-.1rem) rotate(45deg) scale(1); }
.vis-tick.is-locked { cursor: default; border: 1.5px dashed color-mix(in srgb, var(--qc) 45%, transparent); border-radius: 2px; }
.vis-tick.is-locked::after { transform: translateY(-.1rem) rotate(45deg) scale(.85); opacity: .45; }
.vis-cell.is-dirty .vis-tick input { outline: 2px dashed var(--brass); outline-offset: 3px; }

.vis-who { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; min-width: 0; font-size: .8125rem; color: var(--ink-2); }
.vis-role { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.vis-more { font: 700 .75rem/1 var(--mono); color: var(--ink-3); }
.vis-warn { font: 700 .6875rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink); }
.vis-edit { padding: 1.25rem 1.25rem 0; }
.vis-edit .qm-actions { margin: 1rem -1.25rem 0; }
.vis-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1rem; }
.vis-fields .form-group { margin: 0; min-width: 16rem; }
.vis-everyone { display: flex !important; flex: 0 1 26rem; gap: .75rem; align-items: flex-start; cursor: pointer; margin: 0; padding: .625rem .875rem;
  border: 1px solid var(--rule); background: var(--well); font: 400 .9375rem/1.4 var(--sans) !important; text-transform: none !important; letter-spacing: normal !important; color: var(--ink) !important; }
.vis-everyone:has(input:checked) { border-color: var(--field); }
.vis-everyone input { width: auto; flex: none; }
.vis-everyone input { margin-top: .2rem; }
.vis-everyone b { display: block; font-weight: 600; }
.vis-everyone small { display: block; color: var(--ink-3); font-size: .8125rem; font-family: var(--sans); text-transform: none; letter-spacing: normal; }
.vis-roles { border: 0; padding: 0; margin: 0; }
.vis-roles legend { font: 700 .75rem/1.3 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }
.vis-edit:has(.vis-everyone input:checked) .vis-roles { opacity: .45; }
.vis-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-top: 1px dashed var(--rule); }
.vis-tools form:last-child { margin-left: auto; }
.vis-new .qm-head h3 { display: inline-flex; align-items: center; gap: .5rem; }
.vis-off { margin: 2.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.vis-off p { margin: 0; max-width: 40rem; font-size: .875rem; }
@media (max-width: 760px) {
  .vis-start { padding: 1.5rem 1rem; }
  .vis-stamp { position: static; display: inline-block; margin-bottom: .75rem; }
  .vis-table .qm-who { min-width: 9rem; }
  .vis-tools form:last-child { margin-left: 0; }
}
.ability-note { margin: .375rem 0 .5rem; font-size: .8125rem; color: var(--brass); }
.abilities .is-managed .grants, .abilities .is-managed .grant-add { opacity: .45; }

/* ── Personal profiles: name style, theme, banner, decoration, nameplate, effect ─────────── */
/* Name fonts are only downloaded when someone's name actually uses them. */
@font-face { font-family: "Name Bangers"; src: url("/static/fonts/name-bangers.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Name BioRhyme"; src: url("/static/fonts/name-biorhyme.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Name Cherry Bomb"; src: url("/static/fonts/name-cherry-bomb-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Name Chicle"; src: url("/static/fonts/name-chicle.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Name MuseoModerno"; src: url("/static/fonts/name-museomoderno.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Name Pixelify"; src: url("/static/fonts/name-pixelify-sans.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Name Zilla Slab"; src: url("/static/fonts/name-zilla-slab.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Name Orbitron"; src: url("/static/fonts/name-orbitron.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Name Gothic"; src: url("/static/fonts/name-unifrakturmaguntia.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Name Creepster"; src: url("/static/fonts/name-creepster.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Name Space Mono"; src: url("/static/fonts/name-space-mono.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Name Righteous"; src: url("/static/fonts/name-righteous.woff2") format("woff2"); font-display: swap; }

.nm:not(.nm-font-default), .ped-font-sample { text-transform: none; letter-spacing: normal; }
.nm-font-default    { font-family: inherit; }
.nm-font-bangers    { font-family: "Name Bangers", var(--sans); font-weight: 400; letter-spacing: .03em; }
.nm-font-biorhyme   { font-family: "Name BioRhyme", var(--sans); font-weight: 700; }
.nm-font-cherry     { font-family: "Name Cherry Bomb", var(--sans); font-weight: 400; }
.nm-font-chicle     { font-family: "Name Chicle", var(--sans); font-weight: 400; }
.nm-font-museo      { font-family: "Name MuseoModerno", var(--sans); font-weight: 700; }
.nm-font-pixel      { font-family: "Name Pixelify", var(--sans); font-weight: 600; }
.nm-font-zilla      { font-family: "Name Zilla Slab", var(--sans); font-weight: 700; }
.nm-font-orbitron   { font-family: "Name Orbitron", var(--sans); font-weight: 800; }
.nm-font-gothic     { font-family: "Name Gothic", var(--sans); font-weight: 400; }
.nm-font-creepster  { font-family: "Name Creepster", var(--sans); font-weight: 400; letter-spacing: .03em; }
.nm-font-spacemono  { font-family: "Name Space Mono", var(--mono); font-weight: 700; }
.nm-font-righteous  { font-family: "Name Righteous", var(--sans); font-weight: 400; }
.nm-font-stencil    { font-family: var(--stencil); font-weight: 800; }
.nm-font-shoulders  { font-family: var(--display); font-weight: 800; }
.nm-font-typewriter { font-family: var(--mono); font-weight: 700; }

.nm-fx-solid    { color: var(--n1); }
.nm-fx-gradient, .nm-fx-shimmer { background: linear-gradient(90deg, var(--n1), var(--n2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.nm-fx-shimmer  { background-image: linear-gradient(90deg, var(--n1) 0%, var(--n2) 25%, var(--n1) 50%, var(--n2) 75%, var(--n1) 100%);
  background-size: 200% 100%; animation: nm-shimmer 3.2s linear infinite; }
.nm-fx-neon     { color: color-mix(in srgb, var(--n1) 40%, #fff); text-shadow: 0 0 .08em #fff, 0 0 .25em var(--n1), 0 0 .6em var(--n1), 0 0 1.1em var(--n2); }
.nm-fx-toon     { color: var(--n1); -webkit-text-stroke: .07em #0b0b0c; paint-order: stroke fill; text-shadow: .08em .09em 0 var(--n2); }
.nm-fx-pop      { color: var(--n1); text-shadow: .045em .045em 0 var(--n2), .09em .09em 0 color-mix(in srgb, var(--n2) 55%, #000); }
.nm-fx-glow     { color: var(--n1); animation: nm-glow 2.6s ease-in-out infinite; }
@keyframes nm-shimmer { to { background-position: -200% 0; } }
@keyframes nm-glow { 0%, 100% { text-shadow: 0 0 .15em color-mix(in srgb, var(--n2) 60%, transparent); } 50% { text-shadow: 0 0 .5em var(--n2), 0 0 1em color-mix(in srgb, var(--n2) 50%, transparent); } }

/* theme: the card in two colours, the text on a dark inner panel like Discord's */
.pcard-themed { --pc-bg: var(--pc-p); background: linear-gradient(180deg, var(--pc-p), var(--pc-a)); }
.pcard-themed .pcard-body { background: rgba(8, 8, 10, .42); margin: .25rem .75rem .75rem; border-radius: .5rem; padding: .75rem .875rem 1rem; }
.pcard-themed .pcard-status { background: rgba(8, 8, 10, .42); }
.pcard [hidden], .member-row [hidden] { display: none !important; }

/* banners */
.pcard-banner, .ped-thumb { background-color: var(--pc-accent, var(--sheet-2)); background-position: center; background-size: cover; background-repeat: no-repeat; }
.pb-image { background-color: var(--sheet-2); }
.pb-color { background: var(--b1); }
.pb-gradient { background: linear-gradient(135deg, var(--b1), var(--b2)); }
.pb-starfield {
  background: radial-gradient(1.2px 1.2px at 12px 18px, #fff 50%, transparent 55%), radial-gradient(1px 1px at 58px 64px, #d8e7ff 50%, transparent 55%),
    radial-gradient(1.6px 1.6px at 104px 30px, #fff 50%, transparent 55%), radial-gradient(1px 1px at 140px 92px, #fff 50%, transparent 55%),
    radial-gradient(1px 1px at 30px 96px, #ffe8c4 50%, transparent 55%),
    radial-gradient(ellipse at 75% 130%, color-mix(in srgb, var(--b1) 45%, transparent), transparent 60%), #06070c;
  background-size: 160px 110px, 160px 110px, 160px 110px, 160px 110px, 160px 110px, 100% 100%, auto;
}
.pb-hyperspace {
  background: radial-gradient(circle at 50% 50%, #fff 0, color-mix(in srgb, var(--b1) 60%, #cfe8ff) 4%, transparent 22%),
    repeating-conic-gradient(from 3deg at 50% 50%, transparent 0 3deg, rgba(210, 232, 255, .6) 3deg 3.5deg, transparent 3.5deg 7deg),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--b2) 35%, #0a1630), #03060d 75%);
}
.pb-nebula {
  background: radial-gradient(ellipse at 25% 40%, color-mix(in srgb, var(--b1) 70%, transparent), transparent 55%),
    radial-gradient(ellipse at 78% 62%, color-mix(in srgb, var(--b2) 65%, transparent), transparent 55%),
    radial-gradient(1px 1px at 30px 20px, #fff 50%, transparent 55%), radial-gradient(1px 1px at 90px 70px, #fff 50%, transparent 55%), #0a0714;
  background-size: 100% 100%, 100% 100%, 120px 90px, 120px 90px, auto;
}
.pb-twin-suns {
  background: radial-gradient(circle at 68% 52%, #fff7dd 0 5%, #ffcf6b 6.5%, transparent 13%),
    radial-gradient(circle at 80% 38%, #ffeec4 0 3.5%, #ffb347 5%, transparent 10%),
    linear-gradient(176deg, transparent 0 68%, #b3612f 68.5%, #7a3f22 100%),
    linear-gradient(180deg, #f7b267 0%, #f08a4b 60%, #d9663a 100%);
}
.pb-republic {
  background: radial-gradient(circle at 82% 50%, transparent 0 17%, #d9b36b 17.5% 20%, transparent 20.5% 25%, #d9b36b 25.5% 26.5%, transparent 27%),
    linear-gradient(90deg, transparent 0 14%, #efe8da 14% 16%, transparent 16% 19%, #efe8da 19% 20%, transparent 20%),
    linear-gradient(135deg, #b52020, #5c0c0c);
}
.pb-coruscant {
  background: linear-gradient(to top, #07070d 0 12%, transparent 12%),
    repeating-linear-gradient(90deg, #0c0c16 0 18px, transparent 18px 26px, #12121f 26px 34px, transparent 34px 52px) bottom / 100% 58% no-repeat,
    repeating-linear-gradient(90deg, #171727 0 10px, transparent 10px 40px) bottom / 100% 80% no-repeat,
    linear-gradient(180deg, #1a1033 0%, #6b2f5f 55%, #f08a4b 100%);
}
.pb-hazard { background: repeating-linear-gradient(-45deg, #f2c230 0 18px, #151515 18px 36px); }
.pb-camo {
  background: radial-gradient(circle at 20% 30%, #5b6650 0 18%, transparent 19%), radial-gradient(circle at 62% 72%, #343d2f 0 22%, transparent 23%),
    radial-gradient(circle at 82% 22%, #7c8a6a 0 14%, transparent 15%), radial-gradient(circle at 38% 82%, #262c22 0 16%, transparent 17%), #4b5543;
  background-size: 130px 90px, 130px 90px, 130px 90px, 130px 90px, auto;
}

/* decorations drawn by the portal: a ring cut out of a painted disc */
.pdeco { position: absolute; inset: -10%; border-radius: 50%; pointer-events: none; z-index: 1;
  --ring: radial-gradient(farthest-side, transparent calc(100% - 11%), #000 calc(100% - 10.5%));
  -webkit-mask: var(--ring); mask: var(--ring); }
.pd-none { display: none; }
.pd-brass { background: conic-gradient(from 20deg, #f3d9a4, #8a6a32 25%, #f3d9a4 50%, #9c7a3e 75%, #f3d9a4); filter: drop-shadow(0 0 .15rem rgba(0,0,0,.6)); }
.pd-halo { inset: -8%; background: conic-gradient(#fff3c4, #ffd36e, #fff3c4, #ffc94a, #fff3c4); filter: drop-shadow(0 0 .4rem #ffd98a);
  --ring: radial-gradient(farthest-side, transparent calc(100% - 6%), #000 calc(100% - 5.5%)); }
.pd-hyperspace { background: repeating-conic-gradient(#9fd8ff 0 7deg, transparent 7deg 16deg), radial-gradient(#1b3b66, #0a1630);
  animation: pd-spin 7s linear infinite; }
.pd-plasma { background: conic-gradient(#5ec8ff, #b388ff, #5ec8ff); animation: pd-pulse 2.2s ease-in-out infinite; }
.pd-holo { background: conic-gradient(#ff7ad9, #ffd166, #7af0a0, #5ec8ff, #b388ff, #ff7ad9); animation: pd-spin 5s linear infinite; opacity: .92; }
.pd-ember { background: conic-gradient(#ff6a00, #ffcc00, #ff3d00, #ffae00, #ff6a00); animation: pd-flicker 1.6s steps(6) infinite, pd-spin 12s linear infinite; }
.pd-frost { background: repeating-conic-gradient(#f2fbff 0 5deg, #9fd8ff 5deg 10deg); filter: drop-shadow(0 0 .3rem #cdefff); }
.pd-orbit { -webkit-mask: none; mask: none; inset: -14%; animation: pd-spin 6s linear infinite; }
.pd-orbit::before, .pd-orbit::after { content: ""; position: absolute; width: 18%; height: 18%; border-radius: 50%; }
.pd-orbit::before { top: 0; left: 41%; background: radial-gradient(circle at 35% 35%, #fff7dd, #ffb347 60%, #b3612f); box-shadow: 0 0 .5rem #ffb347; }
.pd-orbit::after { bottom: 4%; left: 44%; width: 13%; height: 13%; background: radial-gradient(circle at 35% 35%, #fff, #ffcf6b 60%, #d9663a); box-shadow: 0 0 .4rem #ffcf6b; }
@keyframes pd-spin { to { transform: rotate(1turn); } }
@keyframes pd-pulse { 0%, 100% { filter: drop-shadow(0 0 .15rem #5ec8ff); opacity: .85; } 50% { filter: drop-shadow(0 0 .6rem #b388ff); opacity: 1; } }
@keyframes pd-flicker { 0%, 100% { filter: brightness(1) drop-shadow(0 0 .3rem #ff6a00); } 50% { filter: brightness(1.35) drop-shadow(0 0 .55rem #ffae00); } }
.member-av .pcard-deco { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; border-radius: 0; pointer-events: none; }

/* nameplates: a picture behind the right half of a member row */
.plate-brass      { --plate: linear-gradient(100deg, #3a2c12, #c9a15f 60%, #f3d9a4); }
.plate-crimson    { --plate: linear-gradient(100deg, #2a0b0b, #b31d1d 60%, #ff6b6b); }
.plate-aurora     { --plate: linear-gradient(100deg, #0b2a2a, #1fd1a5 45%, #7a5cff 80%, #ff7ad9); }
.plate-nebula     { --plate: radial-gradient(ellipse at 82% 50%, #b388ff 0, #5ec8ff 28%, #2b1a52 55%, #140a24 75%); }
.plate-carbon     { --plate: repeating-linear-gradient(45deg, #1b1c1f 0 4px, #2c2e33 4px 8px); }
.plate-hyperspace { --plate: repeating-linear-gradient(90deg, #07101c 0 14px, #9fd3ff 14px 15px, #07101c 15px 30px); }
.plate-sunset     { --plate: linear-gradient(100deg, #1a1033, #6b2f5f 50%, #f08a4b 85%, #ffd166); }

/* profile effects: drawn over the whole card, never catching clicks */
.pcard > *:not(.pfx) { position: relative; z-index: 1; }
.pfx { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pfx-none { display: none; }
.pfx-sparkles, .pfx-sparkles::after { background: radial-gradient(2px 2px at 20% 30%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 70% 18%, #ffe9a8, transparent 70%),
  radial-gradient(2.5px 2.5px at 42% 72%, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 86% 58%, #cfe3ff, transparent 70%);
  background-size: 170px 150px; animation: pfx-twinkle 2.8s ease-in-out infinite alternate; }
.pfx-sparkles::after { content: ""; position: absolute; inset: 0; background-position: 60px 45px; animation-delay: -1.4s; }
.pfx-snow { background: radial-gradient(2px 2px at 20px 30px, #fff, transparent 70%), radial-gradient(3px 3px at 80px 90px, rgba(255,255,255,.85), transparent 70%),
  radial-gradient(1.5px 1.5px at 130px 20px, #fff, transparent 70%);
  background-size: 150px 120px, 190px 170px, 110px 100px; animation: pfx-snow 9s linear infinite; }
.pfx-stars { background: radial-gradient(1px 1px at 20px 30px, #fff, transparent 70%), radial-gradient(1.5px 1.5px at 90px 80px, #d8e7ff, transparent 70%),
  radial-gradient(1px 1px at 150px 40px, #fff, transparent 70%);
  background-size: 180px 120px, 220px 150px, 160px 110px; animation: pfx-drift 40s linear infinite; opacity: .85; }
.pfx-embers { background: radial-gradient(2px 2px at 30px 40px, #ffb347, transparent 70%), radial-gradient(1.5px 1.5px at 100px 90px, #ff6a00, transparent 70%),
  radial-gradient(2.5px 2.5px at 150px 20px, #ffd166, transparent 70%), linear-gradient(to top, rgba(255, 106, 0, .16), transparent 35%);
  background-size: 170px 130px, 140px 150px, 200px 170px, 100% 100%; animation: pfx-rise 7s linear infinite; }
.pfx-rain { background: repeating-linear-gradient(100deg, transparent 0 26px, rgba(170, 200, 255, .32) 26px 27px);
  background-size: 100% 90px; animation: pfx-rain .7s linear infinite; }
.pfx-confetti { background: radial-gradient(3px 2px at 20px 30px, #ff7ad9, transparent 80%), radial-gradient(2px 3px at 70px 60px, #ffd166, transparent 80%),
  radial-gradient(3px 3px at 120px 20px, #5ec8ff, transparent 80%), radial-gradient(2px 2px at 160px 90px, #7af0a0, transparent 80%);
  background-size: 180px 130px, 150px 120px, 200px 160px, 170px 140px; animation: pfx-confetti 6s linear infinite; }
@keyframes pfx-twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes pfx-snow { to { background-position: 30px 120px, -40px 170px, 10px 100px; } }
@keyframes pfx-drift { to { background-position: -180px 0, -220px 10px, -160px -8px; } }
@keyframes pfx-rise { to { background-position: 10px -130px, -15px -150px, 20px -170px, 0 0; } }
@keyframes pfx-rain { to { background-position: -16px 90px; } }
@keyframes pfx-confetti { to { background-position: 20px 130px, -20px 120px, 30px 160px, -10px 140px; } }
@media (prefers-reduced-motion: reduce) {
  .nm-fx-shimmer, .nm-fx-glow, .pdeco, .pfx, .pfx::after { animation: none !important; }
}
/* off screen (portal.js fxOffscreen): these repaint every frame while they run, so they wait until seen */
.fx-off, .fx-off::before, .fx-off::after { animation-play-state: paused !important; }

/* ── the profile editor ── */
.ped-label { font: 700 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: .25rem; }
.ped-row .member-row { pointer-events: none; }
.ped-jump { display: flex; gap: .375rem; overflow-x: auto; margin: 0 0 1.25rem; padding-bottom: .25rem; }
.ped-jump a { flex: none; font: 700 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--rule); padding: .5rem .75rem; }
.ped-jump a:hover { color: var(--ink); border-color: var(--brass); }
.ped-form { display: grid; gap: 0; }
.ped-panel { scroll-margin-top: 1rem; }
.ped-body { padding: 1.25rem; }
.ped-set { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.ped-set:last-child { margin-bottom: 0; }
.ped-set legend { font: 700 .75rem/1.3 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .625rem; }
.ped-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: .5rem; }
.ped-fonts { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.ped-banners { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); margin-bottom: 1rem; }
.ped-plates { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.ped-tile { position: relative; display: grid; gap: .4375rem; align-content: start; padding: .5rem; border: 1px solid var(--rule); background: var(--well);
  cursor: pointer; text-align: center; transition: border-color .15s, background .15s, transform .15s var(--ease-out); }
.ped-tile:hover { border-color: var(--rule-strong); }
.ped-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ped-tile:has(input:checked) { border-color: var(--brass); background: var(--sheet-2); box-shadow: inset 0 0 0 1px var(--brass); }
.ped-tile:has(input:checked)::after { content: "✓"; position: absolute; top: -.5rem; right: -.5rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--brass); color: #16120a; font: 700 .75rem/1 var(--sans); z-index: 3; }
.ped-tile:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.ped-tile small { font: 700 .625rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ped-tile small em { display: block; font-style: normal; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-top: .125rem; }
.ped-tile.is-off { opacity: .45; pointer-events: none; }
.ped-font-sample { font-size: 1.1875rem; line-height: 1.5; color: var(--n1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-fx-sample { font-size: 1.875rem; line-height: 1.3; font-weight: 700; }
.ped-colours { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-bottom: .75rem; }
.ped-colour { display: inline-flex !important; align-items: center; gap: .5rem; cursor: pointer; font: 700 .75rem/1 var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.ped-colour input { width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--rule-strong); background: none; cursor: pointer; border-radius: 50%; overflow: hidden; }
.ped-colour input::-webkit-color-swatch-wrapper { padding: 0; }
.ped-colour input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ped-colour input::-moz-color-swatch { border: 0; border-radius: 50%; }
.ped-swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.ped-swatch { width: 1.875rem; height: 1.875rem; border-radius: 50%; border: 2px solid var(--rule-strong); cursor: pointer; background: linear-gradient(135deg, var(--s1) 50%, var(--s2) 50%); transition: transform .15s var(--ease-out); }
.ped-swatch:hover, .ped-swatch:focus-visible { transform: scale(1.12); border-color: var(--ink); }
.ped-hint { font-size: .8125rem; color: var(--ink-3); margin: .25rem 0 0; }
.ped-thumb { display: grid; place-items: center; height: 3.25rem; border-radius: .25rem; }
.ped-thumb em { font: 400 .6875rem/1 var(--mono); font-style: normal; color: var(--ink-3); }
.ped-upload { display: grid; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--rule); }
.ped-upload > label { font: 700 .75rem/1.3 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }
.ped-upload > label small { display: block; font: 400 .8125rem/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink-3); margin-top: .25rem; }
.ped-av { position: relative; width: 3.5rem; height: 3.5rem; margin: .625rem auto .375rem; }
.ped-av > img:first-child { width: 100%; height: 100%; border-radius: 50%; display: block; }
.ped-av .pcard-deco { inset: -12%; width: 124%; height: 124%; }
.ped-plate { height: 2.75rem; padding: 0 !important; pointer-events: none; }
.ped-fxbox { position: relative; display: block; height: 4.25rem; border-radius: .25rem; overflow: hidden; background: linear-gradient(180deg, #1d2a3a, #101114); }
.ped-switch, .ped-check { display: flex !important; gap: .625rem; align-items: flex-start; cursor: pointer; margin: 0 0 .875rem; font: 400 .9375rem/1.4 var(--sans) !important;
  text-transform: none !important; letter-spacing: normal !important; color: var(--ink) !important; }
.ped-switch input, .ped-check input { width: auto; margin-top: .2rem; flex: none; }
.ped-switch small { display: block; color: var(--ink-3); font-size: .8125rem; }
.ped-check { margin-bottom: .5rem; }
.ped-save { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem;
  padding: .875rem 0; margin-top: 1rem; background: linear-gradient(to top, var(--ground) 70%, transparent); }
.ped-save .muted { margin-right: auto; font-size: .8125rem; }
@media (max-width: 760px) {
  .ped-body { padding: 1rem .75rem; }
  .ped-tiles { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
  .ped-save .muted { display: none; }
}
.pcard .presence, .member-av .presence { z-index: 2; }
.profile-main, .profile-side, .ped-form, .ped-panel { min-width: 0; }

/* ── Bot settings › event types ── */
.qm-events .ev-name { min-width: 13rem; }
.ev-label input { width: 100%; min-width: 10rem; font: 600 .9375rem/1.2 var(--sans); padding: .45rem .55rem; background: var(--well); border: 1px solid var(--rule); color: var(--ink); }
.ev-label input:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.ev-name small { margin-top: .3rem; }
.ev-box.is-dirty input[type=text], .ev-box.is-dirty label { outline: 2px dashed var(--brass); outline-offset: 2px; }
.ev-flags { text-align: left !important; white-space: nowrap; }
.ev-flag { display: block; }
.ev-flag label { display: inline-flex !important; align-items: center; gap: .4rem; margin: 0 0 .3rem; cursor: pointer;
  font: 400 .8125rem/1.3 var(--sans) !important; text-transform: none !important; letter-spacing: normal !important; color: var(--ink-2) !important; }
.ev-flag input, .ev-check input { width: auto; }
.ev-retire { vertical-align: middle !important; }
.ev-legend { font-size: .8125rem; padding: .5rem 1.25rem 0; margin: 0; }
.ev-new { padding: 1.25rem; border-top: 1px dashed var(--rule-strong); }
.ev-new h4, .ev-retired h4 { font: 700 .75rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 .75rem; }
.ev-new-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: .75rem; }
.ev-new-row .form-group { margin: 0; }
.ev-new-name { flex: 1 1 14rem; }
.ev-new-pts { width: 6.5rem; }
.ev-new-pts input { text-align: center; font: 700 1rem/1 var(--mono); }
.ev-check { display: inline-flex !important; align-items: center; gap: .45rem; cursor: pointer; margin: 0; font: 400 .875rem/1.3 var(--sans) !important;
  text-transform: none !important; letter-spacing: normal !important; color: var(--ink) !important; }
.ev-new-row .btn { margin-left: auto; }
.ev-retired { padding: 1rem 1.25rem 1.25rem; border-top: 1px dashed var(--rule-strong); }
.ev-retired ul { list-style: none; display: grid; gap: .5rem; }
.ev-retired li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .75rem; border: 1px solid var(--rule); background: var(--well); }
.ev-retired li b { color: var(--ink-2); }
@media (max-width: 760px) { .ev-new-row .btn { margin-left: 0; } }

/* ── Settings: one place, a grouped menu with search, pages beside it ── */
.set-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.25rem; align-items: start; }
.set-menu { position: sticky; top: 1.25rem; display: grid; gap: .875rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; padding-right: .25rem; }
.set-menu [hidden], .set-main [hidden] { display: none !important; }
.set-title { display: inline-flex; align-items: center; gap: .5rem; font: 800 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); text-decoration: none; }
.set-title:hover { color: var(--brass); }
.set-search { position: relative; }
.set-search input { width: 100%; padding-right: 3.75rem; }
.set-kbd { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font: 700 .625rem/1 var(--mono); color: var(--ink-3);
  border: 1px solid var(--rule-strong); padding: .2rem .3rem; pointer-events: none; }
.set-results { list-style: none; display: grid; gap: .25rem; }
.set-results a { display: grid; gap: .1rem; padding: .5rem .625rem; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); text-decoration: none; }
.set-results a:hover, .set-results a:focus-visible { border-color: var(--brass); }
.set-results b { font-size: .875rem; font-weight: 600; }
.set-results small { font: 400 .6875rem/1.3 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.set-none { font-size: .8125rem; color: var(--ink-3); padding: .25rem; }
.set-groups { display: grid; gap: 1rem; }
.set-group p { font: 700 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .375rem .625rem; }
.set-group ul { list-style: none; display: grid; gap: 1px; }
.set-group a { display: block; padding: .45rem .625rem; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: .9375rem; }
.set-group a:hover { color: var(--ink); background: var(--sheet); }
.set-group a[aria-current="page"] { color: var(--ink); background: var(--sheet-2); border-left-color: var(--brass); font-weight: 600; }
.set-main { min-width: 0; }
.set-main > h1 { margin-bottom: .5rem; }
/* Access levels (settings/access.html): an overview table, then one card per level */
.lv-notice { max-width: 64rem; margin-bottom: 1.5rem; }
.lv-overview-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; }
.lv-overview { width: 100%; max-width: 64rem; }
.lv-overview td { width: auto; vertical-align: top; }
.lv-overview th a { color: var(--ink); }
.lv-who .grant { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 0.375rem 0.25rem 0; }
.lv-card { border: 1px solid var(--rule); background: var(--sheet); margin-bottom: 0.75rem; max-width: 64rem; scroll-margin-top: 5rem; }
.lv-card > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; padding: 0.875rem 1.125rem; }
.lv-card > summary::-webkit-details-marker { display: none; }
.lv-card > summary:hover { background: var(--sheet-2); }
.lv-card > summary b { font: 800 1.1875rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.lv-card > summary::after { content: "Edit"; margin-left: auto; font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lv-card[open] > summary::after { content: "Close"; }
.lv-card[open] > summary { border-bottom: 1px dashed var(--rule); }
.lv-card[data-new] > summary .icon { color: var(--brass); }
.lv-sum { font: 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.lv-body { padding: 1rem 1.125rem 1.25rem; display: grid; gap: 1rem; }
.lv-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 6rem; gap: 0 1rem; }
.lv-help { margin: 0; font-size: 0.875rem; }
.lv-set { border: 1px solid var(--rule); padding: 0.75rem 1rem 1rem; margin: 0; min-width: 0; }
.lv-set legend { padding: 0 0.375rem; font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
/* the bot key's server picker: grouped by unit, one server a row, its box first (same names tell apart by unit and ID) */
.bk-group { margin: 0.75rem 0 0.25rem; font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.bk-group:first-of-type { margin-top: 0.25rem; }
.bk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.bk-server { display: flex; align-items: flex-start; }
.bk-id { font: 400 0.75rem/1 var(--mono); color: var(--ink-2); margin-left: 0.25rem; }
.lv-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem 1.5rem; }
.lv-group-name { margin: 0 0 0.375rem; font: 700 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.lv-tabs .check, .lv-can .check { display: flex; align-items: flex-start; margin: 0.375rem 0; }
.lv-tabs .check small, .lv-can .check small { display: block; color: var(--ink-3); font-size: 0.8125rem; }
.lv-can { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.25rem 1.5rem; }
.lv-drop { color: var(--red-ink); }
.lv-keep { margin: 1rem 0; }
@media (max-width: 760px) { .lv-overview th:nth-child(3), .lv-overview td:nth-child(3) { display: none; } .lv-fields { grid-template-columns: 1fr 1fr; } .lv-fields .form-group:first-child { grid-column: 1 / -1; } }

.set-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem; }
.set-toolbar .pick-filter { margin: 0; }
.set-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.set-card { background: var(--sheet); border: 1px solid var(--rule); padding: 1rem 1.125rem; }
.set-card h2 { display: flex; align-items: baseline; gap: .5rem; font-size: 1.25rem; margin-bottom: .625rem; }
.set-card ul { list-style: none; display: grid; gap: .125rem; }
.set-card a { display: grid; gap: .1rem; padding: .5rem .5rem; margin: 0 -.5rem; color: var(--ink); text-decoration: none; }
.set-card a:hover { background: var(--sheet-2); }
.set-card a b { font-weight: 600; font-size: .9375rem; }
.set-card a span { font-size: .8125rem; color: var(--ink-3); }
.set-tools { margin-top: 2rem; }
.set-tools h2 { font-size: 1.125rem; margin-bottom: .25rem; }
.set-tools ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.set-tools a { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--rule); padding: .45rem .7rem; font-size: .875rem; color: var(--ink-2); text-decoration: none; }
.set-tools a:hover { border-color: var(--brass); color: var(--ink); }
.set-tools svg { width: 1rem; height: 1rem; }
.lvl-select { max-width: 16rem; }
.setting-row.is-managed .setting-name b { color: var(--ink-2); }
.setting-name .ability-note { margin: .25rem 0 0; }
.cat-table input[type=text] { width: 100%; min-width: 9rem; }
.cat-table .num-input { width: 5rem; }
.cat-new td { border-top: 1px dashed var(--rule-strong); }
.danger-check { color: var(--red-ink); white-space: nowrap; }
@media (max-width: 960px) {
  .set-shell { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .set-menu { position: static; max-height: none; overflow: visible; padding: 0; }
  /* phones and tablets: the groups become one scrolling row of chips */
  .set-groups { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
  .set-group { display: flex; align-items: center; gap: .25rem; flex: none; }
  .set-group p { margin: 0 .25rem 0 0; }
  .set-group ul { display: flex; gap: .25rem; }
  .set-group a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; font-size: .875rem; }
  .set-group a[aria-current="page"] { border-bottom-color: var(--brass); }
}

/* Page to page: keep the current page on screen until the next one is ready and cross-fade quickly,
   instead of a blank flash (Chrome, Edge, Safari 18.2+; other browsers just navigate). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── markdown editor (boards, What's new) ─────────────── */
.md-editor { margin-top: 0.25rem; }
.md-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 0.3125rem; background: var(--sheet-2); border: 1px solid var(--rule-strong); border-bottom: 0; }
.md-tools > button { min-width: 2rem; height: 2rem; background: none; border: 1px solid transparent; color: var(--ink-2); cursor: pointer; font: 700 0.9375rem/1 var(--sans);
  display: inline-flex; align-items: center; justify-content: center; }
.md-tools > button:hover { color: var(--ink); border-color: var(--rule-strong); }
.md-tools .icon { width: 1rem; height: 1rem; }
.md-tabs { margin-left: auto; display: inline-flex; }
.md-tabs button { background: none; border: 1px solid transparent; color: var(--ink-3); cursor: pointer; padding: 0.375rem 0.625rem; font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.md-tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--rule-strong); background: var(--sheet); }
.md-editor textarea { width: 100%; min-height: 10rem; resize: vertical; font: 400 0.9375rem/1.6 var(--sans); }
.md-preview { min-height: 10rem; padding: 0.75rem 0.875rem; background: var(--well); border: 1px solid var(--rule-strong); }
.md-editor .modal-actions { margin-top: 0.625rem; }
.md-body { font-size: 0.9375rem; line-height: 1.65; overflow-wrap: anywhere; }
.md-body > * + * { margin-top: 0.625rem; }
.md-body h1, .md-body h2, .md-body h3 { margin-top: 1.25rem; margin-bottom: 0.25rem; }
.md-body h1 { font-size: 1.625rem; }
.md-body h2 { font-size: 1.3125rem; }
.md-body h3 { font-size: 1.125rem; }
.md-body > :first-child { margin-top: 0; }
.md-body ul, .md-body ol { padding-left: 1.25rem; }
.md-body li + li { margin-top: 0.1875rem; }
.md-body hr { border: 0; border-top: 1px dashed var(--rule-strong); margin: 1rem 0; }
.md-body blockquote { border-left: 2px solid var(--rule-strong); padding-left: 0.875rem; color: var(--ink-2); }
.md-body code { background: var(--well); border: 1px solid var(--rule); padding: 0.0625rem 0.3125rem; font: 400 0.875rem/1.4 var(--mono); }
.md-body pre { background: var(--well); border: 1px solid var(--rule); padding: 0.75rem; overflow-x: auto; }
.md-body pre code { background: none; border: 0; padding: 0; }
.md-body img { max-width: 100%; height: auto; }
.md-body table { border-collapse: collapse; width: 100%; }
.md-body th, .md-body td { border: 1px solid var(--rule); padding: 0.375rem 0.625rem; font-size: 0.875rem; text-align: left; }
.md-body th { background: var(--sheet-2); }

/* ── What's new ─────────────────────────────────────── */
.hub-news { grid-column: 2; min-width: 0; border-top: 2px solid var(--red); padding-top: 1rem; }
.hub-news-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.hub-news-head h2 { font-size: 1.5rem; }
.news-count { font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #fff; background: var(--red); padding: 0.25rem 0.4375rem; }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li + li { border-top: 1px solid var(--rule); }
.news-item { display: grid; gap: 0.3125rem; padding: 0.875rem 0.25rem; color: var(--ink); text-decoration: none; }
.news-item:hover .news-title, .news-row:hover .news-row-title { color: var(--red-ink); }
.news-item-top, .news-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }
.news-title { font-size: 1rem; line-height: 1.35; }
.news-summary { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.news-date { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.news-tag { font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; border: 1px solid currentColor; padding: 0.1875rem 0.375rem; color: var(--field); }
.news-tag.news-planned, .news-tag.news-maintenance { color: var(--brass); }
.news-tag.news-outage, .news-tag.news-warning { color: var(--red-ink); }
.news-tag.news-notice { color: var(--steel); }
.news-tag.is-resolved { color: var(--field); }
.news-new, .news-pin { font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 0.1875rem 0.375rem; }
.news-new { color: #fff; background: var(--red); }
.news-pin { color: var(--ink-2); background: var(--sheet-2); }
.news-all { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem; font: 700 0.8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); text-decoration: none; }
.news-all:hover { color: var(--ink); }
.news-all .icon { width: 1rem; height: 1rem; }
.news-empty { padding: 0.5rem 0.25rem; }
.news-alert { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--red); background: var(--red-wash); color: var(--ink); text-decoration: none; }
.news-alert.is-maintenance { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, var(--sheet)); }
.news-alert-word { font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--red-ink); }
.news-alert.is-maintenance .news-alert-word { color: var(--brass); }
.news-alert-when { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-2); }
.news-index .news-row { display: grid; gap: 0.375rem; padding: 1.125rem 0.25rem; color: var(--ink); text-decoration: none; }
.news-row-title { font: 800 1.375rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.news-pages { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.news-article { max-width: 46rem; }
.news-article-head h1 { margin: 0.5rem 0 0.75rem; }
.news-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); }
.news-window { display: grid; gap: 0.25rem; margin: 1.25rem 0; padding: 0.875rem 1rem; border-left: 3px solid var(--brass); background: var(--sheet); }
.news-window.is-live { border-left-color: var(--red); }
.news-window-label, .news-timeline-status { font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--brass); }
.news-timeline { margin: 1.5rem 0; }
.news-timeline h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.news-timeline ol { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 1px solid var(--rule-strong); }
.news-timeline li { position: relative; padding: 0.5rem 0 0.75rem; }
.news-timeline li::before { content: ""; position: absolute; left: -1.3125rem; top: 0.75rem; width: 0.5625rem; height: 0.5625rem; background: var(--red); }
.news-timeline li.is-resolved::before { background: var(--field); }
.news-timeline li.is-resolved .news-timeline-status { color: var(--field); }
.news-timeline li p { margin: 0.25rem 0 0; }
.news-body { margin-top: 1.5rem; font-size: 1.0625rem; }
.news-back { margin-top: 2.5rem; }
.news-back a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--ink-2); }
.news-new-kinds { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1.5rem; }
.news-form { max-width: 52rem; margin-bottom: 2rem; }
.news-form .when-maintenance { display: none; }
.news-form:has(select[name=kind] option[value=maintenance]:checked) .when-maintenance,
.news-form:has(input[name=kind][value=maintenance]) .when-maintenance { display: grid; }
@supports not selector(:has(*)) { .news-form .when-maintenance { display: grid; } }
.news-status { max-width: 52rem; }
.news-timeline-list, .news-discord { margin: 1rem 0 0; padding-left: 1.25rem; }
.news-timeline-list li, .news-discord li { margin: 0.25rem 0; }
@media (min-width: 80rem) {
  .main:has(.hub-news) { max-width: 92rem; }
  .hub:has(.hub-news) { grid-template-columns: minmax(16.25rem, 19rem) minmax(0, 1fr) minmax(18rem, 23rem); }
  .hub-news { grid-column: 3; grid-row: 1; border-top: 0; padding-top: 0; border-left: 1px solid var(--rule); padding-left: 1.75rem; }
}
@media (max-width: 760px) {
  .hub-news { grid-column: auto; }
  .news-list li:nth-child(n+4) { display: none; }
}

/* the site-wide notice under the class bar (outage red, maintenance brass) */
.site-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.875rem; padding: 0.5625rem clamp(1rem, 3vw, 3.5rem);
  background: var(--red-wash); border-bottom: 1px solid var(--red); font-size: 0.9375rem; }
.site-alert.is-maintenance { background: color-mix(in srgb, var(--brass) 14%, var(--ground)); border-bottom-color: var(--brass); }
.site-alert-word { font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--red-ink); }
.site-alert.is-maintenance .site-alert-word { color: var(--brass); }
.site-alert-text { flex: 1; min-width: 12rem; }
.site-alert-when { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-2); white-space: nowrap; }
.site-alert-more { font: 700 0.8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.site-alert-close { display: inline-grid; place-items: center; width: 2rem; height: 2rem; background: none; border: 1px solid transparent; color: var(--ink-2); cursor: pointer; }
.site-alert-close:hover { color: var(--ink); border-color: var(--rule-strong); }
.site-alert-close .icon { width: 1rem; height: 1rem; }

.news-video { display: block; width: 100%; max-height: 70vh; margin: 1.25rem 0; background: #000; border: 1px solid var(--rule); }
.news-video-sm { max-width: 32rem; margin: 0.25rem 0 0.5rem; }
.news-has-video { font: 700 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); border: 1px solid var(--rule-strong); padding: 0.125rem 0.3125rem; vertical-align: middle; }

/* Settings > Quotas, section 3: the Instructor Department's reset and limit */
.qm-id-rules { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1rem; }
.qm-id-rules .form-group { margin: 0; }
.qm-time { display: inline-flex; align-items: center; gap: 0.375rem; }
.qm-time input[type=number] { width: 4.5rem; }

/* the page runs under a notch (viewport-fit=cover): keep its sides clear at every width (a phone on its side is wider than 760px) */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* ── phones: a fixed bar on top (up one level), a tab bar under the thumb, the sidebar as a drawer ──
   docs/plans/mobile.md. Desktop never shows any of it. */
.phone-bar, .tabbar, .drawer-scrim, .nav-network, .drawer-x { display: none; }
@media (max-width: 760px) {
  :root { --phonebar-h: 3.25rem; --tabbar-h: 3.875rem; --tabbar-safe: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  /* typing: the keyboard needs the room, so the tab bar steps aside (Android would float it above the keys) */
  body:has(:is(input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range], [type=color], [type=file]), textarea, [contenteditable="true"]):focus) {
    --tabbar-h: 0px; --tabbar-safe: 0px;
  }
  body:has(:is(input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range], [type=color], [type=file]), textarea, [contenteditable="true"]):focus) .tabbar { display: none; }
  html { scroll-padding-top: calc(var(--phonebar-h) + 0.75rem); }
  body:has(.tabbar) { padding-bottom: var(--tabbar-safe); }
  .classbar { font-size: 0.6875rem; letter-spacing: .08em; padding: 0.3125rem 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .masthead:has(.operator) { display: none; }   /* its links live in the tab bar and the drawer */

  .phone-bar {
    display: flex; align-items: center; gap: 0.75rem; position: sticky; top: 0; z-index: 40;
    height: var(--phonebar-h); padding: 0 1rem 0 0.5rem; background: var(--ground); border-bottom: 1px solid var(--rule);
  }
  .phone-up { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.5rem 0 0.25rem;
    color: var(--ink); text-decoration: none; font: 600 1rem/1 var(--sans); flex-shrink: 0; max-width: 55%; }
  .phone-up span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phone-up .icon { width: 1.375rem; height: 1.375rem; color: var(--red-ink); }
  .phone-up:active { color: var(--brass); }
  .phone-where { padding-left: 0.5rem; font: 800 1.125rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phone-title { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
    font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink-2); opacity: 0; transition: opacity .15s; }
  .phone-title.shown { opacity: 1; }

  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: var(--tabbar-safe); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--sidebar); border-top: 1px solid var(--rule-strong);
  }
  body:has(.sidebar) .tabbar-global { display: none; }   /* a division page shows its own bar */
  .tabbar-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3125rem; min-width: 0;
    color: var(--ink-3); background: none; border: 0; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    font: 700 min(0.75rem, 3.1vw)/1 var(--mono); letter-spacing: .02em; text-transform: uppercase;   /* fits "Inactivity" at 360px */
  }
  .tabbar-item span:not(.nav-count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.125rem; }
  .tabbar-item .icon { width: 1.375rem; height: 1.375rem; }
  .tabbar-item:active { background: var(--sheet-2); }
  .tabbar-item[aria-current="page"] { color: var(--ink); }
  .tabbar-item[aria-current="page"] .icon { color: var(--red-ink); }
  .tabbar-item[aria-current="page"]::before { content: ''; position: absolute; top: -1px; left: 28%; right: 28%; height: 2px; background: var(--red); }
  .tabbar .nav-count { position: absolute; top: 0.375rem; left: calc(50% + 0.375rem); min-width: 1.25rem; padding: 0.125rem 0.3125rem;
    font: 700 0.6875rem/1.1 var(--mono); text-align: center; color: #fff; background: var(--red); }

  /* the division's sections: the sidebar slides in from the left over a scrim */
  .layout > .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(20rem, 86vw); max-width: none;
    padding: calc(1.25rem + env(safe-area-inset-top)) 0.75rem calc(1rem + env(safe-area-inset-bottom)) calc(0.75rem + env(safe-area-inset-left));
    overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--rule-strong);
    transform: translateX(-100%); visibility: hidden; transition: transform .24s var(--ease-out), visibility 0s .24s;
  }
  .layout > .sidebar.open { transform: none; visibility: visible; transition: transform .24s var(--ease-out); box-shadow: 1.5rem 0 3rem -1rem rgba(0,0,0,.7); }
  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8,8,9,.66); opacity: 0; pointer-events: none; transition: opacity .24s; }
  .sidebar.open + .drawer-scrim { opacity: 1; pointer-events: auto; }
  .nav-network { display: block; }
  .sidebar-header { position: relative; padding-right: 3.5rem; }
  .drawer-x { display: inline-flex; position: absolute; top: -0.5rem; right: 0.25rem; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--rule); color: var(--ink-2); cursor: pointer; }
  .drawer-x:active { background: var(--sheet-2); color: var(--ink); }
  .nav-network form { margin: 0; }
  .nav-signout { width: 100%; background: none; font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; text-align: left; }

  /* the phone bar's arrow is the way up: the pages' own back links would say it twice */
  body .viewer-back, body .ed-back, body .board-back { display: none; }   /* body: page CSS loads after this file */
  /* whatever sticks to the top or bottom makes room for the bars */
  .tabs { position: sticky; top: var(--phonebar-h); z-index: 30; background: var(--ground); }
  .tabs.board-tabs { position: static; }            /* on a board the column strip is the one that sticks */
  .main .col-tabs { top: var(--phonebar-h); }
  .triage-bar { top: var(--phonebar-h); }
  .save-bar, .event-submit, .plan-apply, .ped-save { bottom: var(--tabbar-safe); }
  .toast-tray { bottom: calc(1rem + var(--tabbar-safe)); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .layout > .sidebar, .layout > .sidebar.open, .drawer-scrim, .phone-title, #main, .card-drawer { transition: none; }
}
/* your own profile on a phone: sign out (and the owner's network page) live here, the masthead is gone */
.profile-phone { display: none; }
@media (max-width: 760px) {
  .profile-phone { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .profile-phone form { margin: 0; }
}

/* ── phones: what follows a finger during a swipe (gestures.js), and the slide to the page a swipe opens ── */
@media (max-width: 760px) {
  .layout > .sidebar.drag { visibility: visible; transition: none; }
  .drawer-scrim.drag { transition: none; pointer-events: none; }
  .card-drawer.drag, #main.drag { transition: none; }
  #main { transition: transform .2s var(--ease-out); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  /* named only while a swipe's transition runs: a name makes .main a stacking context, and the card sheet lives in it */
  html:active-view-transition-type(swipe-left, swipe-right) .main { view-transition-name: page; }
  html:active-view-transition-type(swipe-left)::view-transition-old(page) { animation: .22s var(--ease-out) both vt-out-left; }
  html:active-view-transition-type(swipe-left)::view-transition-new(page) { animation: .22s var(--ease-out) both vt-in-right; }
  html:active-view-transition-type(swipe-right)::view-transition-old(page) { animation: .22s var(--ease-out) both vt-out-right; }
  html:active-view-transition-type(swipe-right)::view-transition-new(page) { animation: .22s var(--ease-out) both vt-in-left; }
}
@keyframes vt-out-left { to { transform: translateX(-30%); opacity: 0; } }
@keyframes vt-out-right { to { transform: translateX(30%); opacity: 0; } }
@keyframes vt-in-right { from { transform: translateX(30%); opacity: 0; } }
@keyframes vt-in-left { from { transform: translateX(-30%); opacity: 0; } }

/* a tab strip that scrolls: a fade at the side where more tabs hide (gestures.js sets fade-l / fade-r);
   an overlay that sticks to the strip's edge, so the strip's own background stays solid over the page */
.tabs::before, .tabs::after { content: ''; position: sticky; z-index: 1; flex: 0 0 2rem; pointer-events: none; opacity: 0; transition: opacity .15s; }
.tabs::before { left: 0; margin-right: -2rem; background: linear-gradient(to right, var(--tabs-bg, var(--ground)), transparent); }
.tabs::after { right: 0; margin-left: -2rem; background: linear-gradient(to left, var(--tabs-bg, var(--ground)), transparent); }
.tabs.fade-l::before, .tabs.fade-r::after { opacity: 1; }
.board-tabs { --tabs-bg: var(--sheet); }

/* ── What's new: who a post is for, whose news, the owner's edit buttons (docs/plans/news.md) ── */
.news-aud { font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 0.1875rem 0.375rem;
  color: var(--steel); border: 1px dashed currentColor; }
.news-aud.is-all { color: var(--ink-3); }
.news-sched { font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--brass); }
.news-reads { font: 400 0.8125rem/1 var(--mono); color: var(--ink-3); }
.news-tab-count { font: 700 0.75rem/1 var(--mono); color: #fff; background: var(--red); padding: 0.125rem 0.3125rem; margin-left: 0.25rem; }
.news-li { display: flex; align-items: flex-start; gap: 0.75rem; }
.news-li .news-row { flex: 1; min-width: 0; }
.news-edit { flex-shrink: 0; margin-top: 1rem; }
.news-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: -0.5rem 0 1.25rem; }
.news-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.news-chip { font: 700 0.8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); text-decoration: none;
  padding: 0.5rem 0.625rem; border: 1px solid var(--rule-strong); }
.news-chip:hover { color: var(--ink); }
.news-chip[aria-current="true"] { color: var(--ink); border-color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.news-viewas { display: flex; align-items: center; gap: 0.5rem; font: 400 0.875rem/1 var(--mono); color: var(--ink-2); }
.news-owner-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.news-aud-field, .news-when { border: 1px solid var(--rule); padding: 0.875rem 1rem 1rem; margin: 1rem 0; }
.news-aud-field legend, .news-when legend { font: 700 0.8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: 0 0.375rem; }
.news-aud-tree { display: grid; gap: 0.625rem; margin: 0.5rem 0 0.25rem 1.5rem; }
.news-aud-tree ul { list-style: none; margin: 0.25rem 0 0 1.5rem; display: grid; gap: 0.125rem; }
.news-aud-field:has(input[value="everyone"]:checked) .news-aud-tree { opacity: .45; pointer-events: none; }
.news-when-later { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.news-when:has(input[value="now"]:checked) input[type=datetime-local] { opacity: .45; }
.division-news { margin: 0 0 2rem; }
.division-news h2 { margin-bottom: 0.75rem; }
@media (max-width: 760px) {
  .news-li { flex-direction: column; gap: 0; }
  .news-edit { margin: -0.5rem 0 0.75rem 0.25rem; }
  .news-viewas select { max-width: 100%; }
}

/* ── unit pages: windows you look into (docs/plans/network.md, phase 1) ── */
/* datapad screens: dark glass over the sheet, scanlines, brass brackets; one neutral look for every window */
.screens { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; max-width: 76rem; margin-bottom: 3rem; }
.screen { grid-column: span 2; position: relative; display: flex; flex-direction: column; min-height: 18rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 38%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #1b1d20, #121315 70%);
  border: 1px solid var(--rule);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(0,0,0,.4);
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out); }
.screen::before, .screen::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; pointer-events: none;
  border: 2px solid var(--brass); opacity: .8; }
.screen::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.screen::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
.screen:hover { border-color: color-mix(in oklab, var(--ink-3) 60%, var(--rule)); transform: translateY(-2px); }
.screen-wide { grid-column: 1 / -1; min-height: 0; }
.screen-tall { grid-column: span 3; min-height: 26rem; }
.screen-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.125rem; border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, rgba(255,255,255,.045), transparent 70%); }
.screen-bar h2 { margin: 0; font: 800 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.screen-meta { margin-left: auto; font: 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.screen-light { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brass); animation: screen-pulse 3.2s ease-in-out infinite; }
.screen-light.is-fault { background: var(--red-ink); animation-duration: .9s; }
@keyframes screen-pulse { 50% { opacity: .45; } }
.screen-body { flex: 1; padding: 1.125rem; min-height: 0; overflow: hidden; }
.screen-fade { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.screen-foot a { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.125rem; border-top: 1px solid var(--rule);
  font: 700 0.8125rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--brass); text-decoration: none; }
.screen-foot a:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.screen-empty { color: var(--ink-2); max-width: 32rem; }
.screen-label { margin: 1.25rem 0 0.25rem; font: 700 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }

/* the divisions: tiles with the server's banner behind glass */
.screen-divisions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.screen-division { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; grid-template-rows: 1fr auto auto; column-gap: 0.875rem; min-height: 9rem; padding: 1rem;
  border: 1px solid var(--rule); color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(12,13,14,.35), rgba(12,13,14,.92) 70%), var(--banner, linear-gradient(135deg, #202124, #141517)) center / cover; }
.screen-division::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s var(--ease-out);
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%); }
.screen-division:hover::after, .screen-division:focus-visible::after { opacity: 1; }
.screen-division:hover { border-color: var(--brass); }
.screen-division.is-mine { border-color: color-mix(in oklab, var(--field) 45%, var(--rule)); }
.screen-division-emblem { grid-row: 1 / 3; align-self: end; }
.screen-division-emblem .emblem { width: 3.5rem; height: 3.5rem; }
.screen-division-name { align-self: end; font: 800 1.375rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.screen-division-meta { font: 0.75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.screen-division-go { grid-column: 1 / -1; margin-top: 0.75rem; font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--brass); }

/* news: the latest one in full, the rest as lines with their summary */
.screen-lead { display: block; padding: 0 0 1rem; margin-bottom: 0.5rem; border-bottom: 1px dashed var(--rule); color: var(--ink); text-decoration: none; }
.screen-lead-top { display: flex; align-items: center; gap: 0.5rem; font: 0.75rem/1 var(--mono); color: var(--ink-3); }
.screen-lead-title { display: block; margin: 0.625rem 0 0.375rem; font: 800 1.625rem/1.05 var(--display); text-transform: uppercase; }
.screen-lead-text { color: var(--ink-2); }
.screen-lead:hover .screen-lead-title { color: var(--brass); }
.screen-lines { list-style: none; margin: 0; padding: 0; }
.screen-lines li { border-bottom: 1px dashed var(--rule); }
.screen-lines li > a, .screen-lines li:not(:has(a)) { display: grid; grid-template-columns: auto 1fr; column-gap: 0.625rem; row-gap: 0.125rem; padding: 0.625rem 0; color: var(--ink); text-decoration: none; }
.screen-lines b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-lines li span:last-child:not(.news-tag) { grid-column: 2; color: var(--ink-3); font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-lines a:hover b { color: var(--brass); }

/* the blacklist: a bar per list, unit-wide ones lit */
.screen-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.screen-bars li { display: grid; grid-template-columns: 6.5rem 1fr 2rem; align-items: center; gap: 0.625rem; font: 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.screen-bars li.is-unit { color: var(--ink); }
.screen-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-bar-track { height: 0.5rem; background: rgba(255,255,255,.05); border: 1px solid var(--rule); }
.screen-bar-track span { display: block; height: 100%; width: var(--w); background: color-mix(in oklab, var(--ink-3) 60%, transparent); }
.screen-bars li.is-unit .screen-bar-track span { background: var(--red-ink); }
.screen-bar-n { text-align: right; color: var(--ink); }

/* administration: big numbers */
.screen-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; }
.screen-stats dt { font: 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.screen-stats dd { margin: 0.375rem 0 0; font: 800 2.25rem/1 var(--display); color: var(--ink); }
.screen-stats dd.small { font-size: 1.125rem; line-height: 1.2; }

@media (max-width: 1100px) { .screen, .screen-tall { grid-column: span 3; } }
@media (max-width: 760px) {
  .screens { grid-template-columns: 1fr; gap: 1.25rem; }
  .screen, .screen-tall, .screen-wide { grid-column: 1 / -1; min-height: 0; }
  .screen-tall .screen-body { max-height: 22rem; }
}
@media (prefers-reduced-motion: reduce) { .screen, .screen-division::after { transition: none; } .screen:hover { transform: none; } .screen-light { animation: none; } }
.bl-search { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; max-width: 60rem; margin-bottom: 1.25rem; }
.bl-search input { flex: 1 1 16rem; }
.bl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 18rem); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.bl-col { border: 1px solid var(--rule); background: var(--sheet); align-self: start; }
.bl-cards { list-style: none; margin: 0; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.625rem; max-height: 70vh; overflow-y: auto; }
.bl-card { border: 1px solid var(--rule); background: var(--bg); padding: 0.75rem; }
.bl-name { display: block; font: 800 1.0625rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.bl-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.625rem; margin: 0.5rem 0 0; font: 0.75rem/1.5 var(--mono); }
.bl-meta dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.bl-meta dd { margin: 0; overflow-wrap: anywhere; }
.bl-reasons { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; color: var(--ink-2); }
.bl-labels { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.5rem 0 0; }
.bl-open { display: inline-block; margin-top: 0.5rem; font: 700 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--brass); }
@media (max-width: 760px) { .bl-board { grid-auto-flow: row; grid-auto-columns: auto; } .bl-cards { max-height: none; } }
/* the officers' own quota on the unit screen */
.screen-quota + .screen-quota { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed var(--rule); }
.screen-quota-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 0; }
.screen-quota-head a { font: 800 1.375rem/1 var(--display); text-transform: uppercase; color: var(--ink); text-decoration: none; }
.screen-quota-head a:hover { color: var(--brass); }
.screen-quota-rank { margin: 0.25rem 0 0.75rem; font: 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.screen-meter { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 0.625rem; margin: 0.5rem 0; font: 0.75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.screen-meter-track { height: 0.5rem; background: rgba(255,255,255,.05); border: 1px solid var(--rule); }
.screen-meter-track span { display: block; height: 100%; width: var(--w); background: var(--brass); }
.screen-meter.is-done .screen-meter-track span { background: var(--field); }
.screen-meter-n { color: var(--ink); white-space: nowrap; }
.screen-quota-foot { margin: 0.75rem 0 0; font: 0.75rem/1.4 var(--mono); color: var(--ink-3); }
.tier-table { width: 100%; max-width: 40rem; border-collapse: collapse; margin-bottom: 1rem; }
.tier-table th, .tier-table td { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--rule); text-align: left; }
.tier-table thead th { font: 700 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.tier-table td { width: 6rem; }
.tier-table tbody th { font-weight: 600; }
.screen-quota-big { font: 800 2.75rem/1 var(--display); color: var(--ink); }
.screen-quota-big small { font: 700 0.9375rem/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }

/* unit overview: text, laws and link screens, and the editor under them (?edit=1) */
.ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ov-head .lede { margin-bottom: 1.5rem; }
.ov-head > .btn { margin-bottom: 1.5rem; }
.ev-log .event-submit { position: static; }
.screen-text { color: var(--ink); line-height: 1.55; overflow: auto; }
.screen-text > :first-child { margin-top: 0; }
.screen-text ul, .screen-text ol { padding-left: 1.25rem; }
.screen-laws li > a { grid-template-columns: auto 1fr; align-items: center; }
.screen-laws .icon { color: var(--red-ink); }
.screen-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.625rem; }
.screen-tiles a { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; padding: 0.875rem; min-height: 5.5rem;
  border: 1px solid var(--rule); background: rgba(255,255,255,.02); color: var(--ink); text-decoration: none; font-weight: 700; }
.screen-tiles a:hover { border-color: var(--brass); color: var(--brass); }
.screen-tiles .icon { color: var(--brass); }
.ov-blocks { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--rule); max-width: 60rem; }
.ov-block { border-bottom: 1px solid var(--rule); padding: 0.75rem 0; }
.ov-block-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.875rem; }
.ov-block-head .index-meta { display: block; }
.ov-moves { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.ov-moves .btn:disabled { opacity: .45; cursor: not-allowed; }
.ov-edit { margin: 0.75rem 0 0; }
.ov-items { font-family: var(--mono); font-size: 0.875rem; }
@media (max-width: 760px) { .ov-block-head { grid-template-columns: auto 1fr; } .ov-moves { grid-column: 1 / -1; } }

.un-meta { margin-bottom: 1.5rem; }

.check-divs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin-top: 1rem; }

/* officer events (unit pages) */
.ev-list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--rule); max-width: 60rem; }
.ev { padding: 1rem 0.25rem; border-bottom: 1px solid var(--rule); }
.ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin: 0 0 0.5rem; font: 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.ev-mine { margin-left: auto; color: var(--field); font-weight: 700; }
.ev-people { display: flex; flex-wrap: wrap; gap: 0.375rem 1.75rem; margin: 0; }
.ev-who { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; }
.ev-role { font: 700 0.6875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.ev-who b { font-size: 1.0625rem; }
.ev-unlinked { color: var(--ink-3); font-size: 0.875rem; }
.ev-xp { font: 700 0.8125rem/1 var(--mono); color: var(--brass); }
.ev-notes { margin: 0.5rem 0 0; color: var(--ink-2); white-space: pre-line; }
.ev-void { margin: 0.5rem 0 0; font: 0.8125rem/1.4 var(--mono); color: var(--red-ink); }
.ev.is-void .ev-people, .ev.is-void .ev-head, .ev.is-void .ev-notes { opacity: .5; }
.ev.is-void .ev-xp { text-decoration: line-through; }
.ev-tools { margin: 0.75rem 0 0; }
.ev-tools .confirm-row input { max-width: none; flex: 1; font-family: var(--sans); letter-spacing: 0; }
.ev-link { display: grid; grid-template-columns: auto 1fr minmax(10rem, 14rem) auto; align-items: center; gap: 0.75rem; padding: 0.75rem 0; }
.ev-kinds-wrap { overflow-x: auto; }
.ev-kinds { max-width: 52rem; }
.ev-kinds td { width: auto; }
.ev-kinds input:not([type="checkbox"]) { width: 100%; min-width: 5rem; }
.ev-kinds input[readonly] { color: var(--ink-3); font-family: var(--mono); }
.ev-key { border: 1px solid var(--field); background: var(--sheet); padding: 1rem 1.125rem; margin-bottom: 1rem; max-width: 46rem; display: grid; gap: 0.625rem; justify-items: start; }
.ev-key p { margin: 0; }
.ev-key code { font: 0.9375rem/1.4 var(--mono); word-break: break-all; color: var(--ink); }
.ev-code { font: 0.8125rem/1.5 var(--mono); background: var(--well); border: 1px solid var(--rule); padding: 0.875rem 1rem; overflow-x: auto; white-space: pre; margin: 0 0 0.75rem; }
.ev-api code { font-family: var(--mono); font-size: 0.8125rem; word-break: break-word; }
.ev-officers { max-width: 52rem; }
.ev-officers td { width: auto; }
.ev-officers .screen-meter { grid-template-columns: minmax(6rem, 1fr) auto; margin: 0; min-width: 12rem; }
@media (max-width: 760px) { .ev-officers .screen-meter { min-width: 0; grid-template-columns: auto; } .ev-officers .screen-meter-track { display: none; } .ev-link { grid-template-columns: auto 1fr; } .ev-link input[name="user_id"] { grid-column: 1 / -1; } .ev-mine { margin-left: 0; } }
/* officer events: the portal's own log form, with the Roblox lookup under each name */
.ev-log { max-width: 64rem; }
.ev-log .event-form { margin-bottom: 0; }
.ev-found { min-height: 1.25rem; margin: 0.375rem 0 0; font: 0.8125rem/1.4 var(--mono); color: var(--ink-3); }
.ev-found.is-ok { color: var(--field); }
.ev-found.is-bad { color: var(--red-ink); }
.ev-me { margin: 0; padding: 0.625rem 0.875rem; border: 1px solid var(--rule); color: var(--ink-2); }
.ev-me b { color: var(--ink); }
@media (max-width: 760px) { .ev-log .event-leads { grid-template-columns: 1fr; } }
.roles-synced { font: 0.8125rem/1.4 var(--mono); margin: -0.5rem 0 1.5rem; }
.roles-synced.is-stale { color: var(--red-ink); }
/* the network bot's look on one server */
.bot-look { max-width: 48rem; }
.bot-look-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.bot-look-avatar { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 0.5rem; border: 1px solid var(--rule); }
.bot-look-banner { width: 100%; max-height: 8rem; object-fit: cover; display: block; margin-bottom: 0.5rem; border: 1px solid var(--rule); }
.bot-look-images fieldset > label { display: block; margin: 0.625rem 0 0.375rem; }
.bot-look-images fieldset > .check { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; }
.bot-look-images input[type=file] { max-width: 100%; }
/* the unit's personnel list */
.people-search { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 48rem; margin: 0 0 0.75rem; }
.people-search input[type=search] { flex: 1 1 16rem; }
.people-table td { vertical-align: top; }
.people-table .news-tag { text-decoration: none; margin: 0 0.25rem 0.25rem 0; display: inline-block; }
.pager { display: flex; gap: 0.5rem; margin: 1rem 0 2rem; }
.people-search input[type=search], .people-search select { width: auto; margin: 0; }
.people-search select { flex: 0 1 14rem; }
.people-search .btn { flex: 0 0 auto; }
.cmp-table { max-width: 48rem; }
.cmp-table td { font-variant-numeric: tabular-nums; }
/* Settings → Features */
.feat-list { max-width: 64rem; }
.feat-switch { margin: 0 0 0.75rem; font-weight: 700; }
/* Settings → Ranks & groups */
.st-table { max-width: 64rem; }
.st-table select, .st-table input:not([type=checkbox]) { width: 100%; }
.q-table input[type=number] { width: 5rem; }
.q-ungraded { display: flex; align-items: center; gap: 0.5rem; margin: 0.375rem 0; }

/* Channel posts (settings) */
.cp-form { gap: 1.25rem; }
.cp-post { border: 1px solid var(--rule); padding: 1rem; display: grid; gap: 0.75rem; min-width: 0; }
.cp-post legend { font-weight: 600; padding: 0 0.4rem; }
.cp-post label { display: grid; gap: 0.3rem; min-width: 0; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.cp-body { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9rem; line-height: 1.5; width: 100%; }
.cp-drop { display: flex !important; align-items: center; gap: 0.5rem; color: var(--muted, inherit); }

/* communities (the landing page) and a unit's public page: who runs it and how big it is */
.unit-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.run-by { display: inline-flex; align-items: center; gap: 0.5rem; }
.run-by img { width: 1.25rem; height: 1.25rem; border: 1px solid var(--rule); object-fit: cover; }
.screen-stats .run-by img { width: 1.5rem; height: 1.5rem; }
.unit-public { border: 1px solid var(--rule); background: var(--sheet); padding: 1.75rem; max-width: 47.5rem; }
.unit-public .screen-stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.unit-join { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin-top: 1.5rem; }
.joined-next { margin-bottom: 1.25rem; border-color: var(--field); }

/* the unit calendar (docs/plans/game.md step 4) */
.cal-day { font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 1.5rem 0 0.5rem; }
.cal-entry .index-row { grid-template-columns: 4.5rem 1fr; border-left: 3px solid var(--kind, var(--rule)); }
.cal-time { display: grid; gap: 0.2rem; font: 700 1.125rem/1 var(--mono); color: var(--ink); }
.cal-time small { font: 400 0.6875rem/1 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.cal-main { min-width: 0; }
.cal-desc { color: var(--ink-2); font-size: 0.9375rem; margin-top: 0.5rem; white-space: pre-line; }
.cal-rsvp { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.cal-n { font: 700 0.75rem/1 var(--mono); opacity: .8; margin-left: .35rem; }
.cal-tools { justify-content: flex-start; margin-top: 0.75rem; }
.cal-entry.st-live .index-row { background: var(--sheet); }
.cal-entry.st-suggested .index-title { color: var(--ink-2); }
.cal-rules select { min-width: 9rem; }
.unit-next { margin: 1rem 0 0; color: var(--ink-2); }

/* the Starter Package request on unit settings (docs/plans/game.md step 6) */
.starter { margin-top: 1.5rem; }
.starter .notice { margin: 0.75rem 0; }
.starter-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0 1rem; }
.starter-cards img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }

/* the Game Connect developer guide (docs/plans/game.md step 7) */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.doc-list { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.doc-list li { max-width: 72ch; }
.gc-calls td:first-child { white-space: nowrap; }
.gc-calls code { font-size: 0.8125rem; }

/* ── the unit calendar as a calendar: month and week grids (unit/calendar.html, js/calendar.js) ── */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.cal-nav { display: flex; align-items: center; gap: 0.5rem; }
.cal-step { min-width: 2.75rem; justify-content: center; font-size: 1.375rem; line-height: 1; }
.cal-title { font: 800 2rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 0 0.5rem; }
.cal-views { display: flex; border: 1px solid var(--rule-strong); margin-left: auto; }
.cal-views a { padding: 0.65rem 1rem; font: 700 0.875rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); text-decoration: none; }
.cal-views a + a { border-left: 1px solid var(--rule-strong); }
.cal-views a:hover { color: var(--ink); background: var(--sheet-2); }
.cal-views a[aria-current="page"] { color: var(--ink); background: var(--sheet-2); box-shadow: inset 0 -2px var(--red); }
.cal-new svg { width: 1.1em; height: 1.1em; }

.k-big_event { --kind: var(--brass); }
.k-game_update { --kind: var(--steel); }
.k-news { --kind: var(--field); }

.cal-sheet { background: var(--sheet); border: 1px solid var(--rule); border-top: 2px solid var(--red); }
.cal-noscript { padding: 1.25rem; }
.cal-dows, .cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 0.7rem 0.75rem; font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.cal-cell { min-height: 8rem; min-width: 0; padding: 0.4rem 0.45rem 0.55rem; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.3rem; cursor: pointer; transition: background .12s; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-cell:hover { background: var(--sheet-2); }
.cal-cell:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.cal-cell.out { background: var(--well); }
.cal-cell.out .cal-date { color: var(--ink-3); }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--brass); }
.cal-date { align-self: flex-start; min-width: 2rem; padding: 0.3rem 0.4rem; text-align: center; font: 700 1rem/1 var(--mono); color: var(--ink-2); }
.cal-cell.today .cal-date { background: var(--red); color: var(--ink); }
.cal-chips { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.cal-chip { display: flex; align-items: baseline; gap: 0.4rem; width: 100%; min-width: 0; padding: 0.25rem 0.45rem; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--kind) 14%, var(--sheet-2)); border: 0; border-left: 3px solid var(--kind); color: var(--ink); font: 400 0.875rem/1.25 var(--sans); }
.cal-chip b { flex: none; font: 700 0.75rem/1 var(--mono); color: var(--ink-2); }
.cal-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip:hover, .cal-chip:focus-visible { background: color-mix(in srgb, var(--kind) 28%, var(--sheet-2)); outline: none; }
.cal-chip.st-suggested, .cal-block.st-suggested { background: transparent; outline: 1px dashed var(--rule-strong); outline-offset: -1px; color: var(--ink-2); }
.cal-chip.st-past, .cal-block.st-past { opacity: .5; }
.cal-chip.st-live, .cal-block.st-live { box-shadow: inset 0 0 0 1px var(--red-ink); }
.cal-more { padding: 0.1rem 0.45rem; font: 700 0.75rem/1.2 var(--mono); color: var(--brass); }

.cal-dayview { margin-top: 1.25rem; background: var(--sheet); border: 1px solid var(--rule); padding: 1rem 1.25rem 1.25rem; }
.cal-dayhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.cal-dayhead h3 { font: 800 1.375rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.cal-daylist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.cal-dayitem { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; width: 100%; text-align: left; cursor: pointer;
  padding: 0.75rem 1rem; background: var(--sheet-2); border: 0; border-left: 3px solid var(--kind); color: var(--ink); }
.cal-dayitem:hover, .cal-dayitem:focus-visible { background: color-mix(in srgb, var(--kind) 14%, var(--sheet-2)); outline: none; }
.cal-dayclock { font: 700 0.9375rem/1.3 var(--mono); color: var(--ink-2); }
.cal-daymain { display: grid; gap: 0.2rem; min-width: 0; }
.cal-daymain b { font-size: 1.0625rem; font-weight: 600; }
.cal-daymain small { font: 400 0.8125rem/1.2 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 0.85rem; font-size: 0.875rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); }
.cal-legend span::before { content: ""; width: 0.8rem; height: 0.8rem; background: var(--kind); }

/* week */
.cal-weekwrap { overflow-x: auto; }
.cal-weekhead, .cal-weekbody { display: grid; grid-template-columns: 4.25rem repeat(7, minmax(7rem, 1fr)); min-width: 56rem; }
.cal-weekhead { border-bottom: 1px solid var(--rule); }
.cal-weekday { padding: 0.6rem 0.5rem; display: grid; gap: 0.2rem; justify-items: center; border-left: 1px solid var(--rule); }
.cal-weekday small { font: 700 0.75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cal-weekday b { font: 800 1.5rem/1 var(--display); color: var(--ink-2); padding: 0.15rem 0.4rem; }
.cal-weekday.today b { background: var(--red); color: var(--ink); }
.cal-weekbody { height: min(46rem, 75vh); overflow-y: auto; position: relative; }
.cal-hours { display: grid; grid-template-rows: repeat(24, var(--hr)); }
.cal-hours span { font: 400 0.75rem/1 var(--mono); color: var(--ink-3); text-align: right; padding-right: 0.5rem; transform: translateY(-0.4rem); }
.cal-col { position: relative; height: calc(var(--hr) * 24); border-left: 1px solid var(--rule);
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px var(--hr)); }
.cal-col.today { background-color: color-mix(in srgb, var(--red) 5%, transparent); }
.cal-block { position: absolute; left: calc(var(--lane) * 100% / var(--lanes) + 2px); width: calc(100% / var(--lanes) - 4px);
  display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; padding: 0.3rem 0.45rem; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--kind) 22%, var(--sheet-2)); border: 0; border-left: 3px solid var(--kind); color: var(--ink); font: 600 0.875rem/1.2 var(--sans); }
.cal-block b { font: 700 0.75rem/1 var(--mono); color: var(--ink-2); }
.cal-block:hover, .cal-block:focus-visible { background: color-mix(in srgb, var(--kind) 34%, var(--sheet-2)); outline: none; z-index: 2; }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red-ink); z-index: 3; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red-ink); }

/* the entry and the form, in dialogs */
.cal-dialog { width: min(36rem, calc(100vw - 2rem)); position: relative; }
.cal-form-dialog { width: min(48rem, calc(100vw - 2rem)); position: relative; }
.cal-close { position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: 0; color: var(--ink-3); font-size: 1.75rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; }
.cal-close:hover { color: var(--ink); }
.cal-kicker { font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kind, var(--brass)); margin-bottom: 0.4rem; }
.cal-entry-title { font: 800 1.875rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 2rem 0.5rem 0; }
.cal-entry .cal-entry-title { font-size: 1.375rem; }
.cal-when { font: 700 1rem/1.4 var(--mono); color: var(--ink); margin-bottom: 0.75rem; }
.cal-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 0.5rem; }
.cal-facts dt { font: 700 0.75rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cal-facts dd { margin: 0; color: var(--ink-2); }

@media (max-width: 760px) {
  .cal-title { font-size: 1.5rem; margin-left: 0.25rem; }
  .cal-views { margin-left: 0; }
  .cal-cell { min-height: 4rem; padding: 0.3rem; }
  .cal-dow { padding: 0.55rem 0.3rem; text-align: center; font-size: 0.6875rem; letter-spacing: .04em; }
  .cal-date { align-self: center; font-size: 0.9375rem; }
  .cal-chips { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.2rem; }
  .cal-chip { width: 0.55rem; height: 0.55rem; padding: 0; border: 0; border-radius: 50%; background: var(--kind); pointer-events: none; }
  .cal-chip > * { display: none; }
  .cal-more { display: none; }
  .cal-dayitem { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* ── the setup guide (partials/setup_guide.html, services/setup_guide.py) ── */
.guide { display: grid; gap: 1.25rem; }
.guide-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem;
  background: var(--sheet); border: 1px solid var(--rule); border-top: 2px solid var(--red); }
.guide-top-l { flex: 1 1 18rem; min-width: 0; display: grid; gap: 0.45rem; }
.guide-top form { margin: 0; }
.guide-eyebrow { font: 700 0.8125rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin: 0; }
.guide-meter { height: 0.5rem; max-width: 28rem; background: var(--well); border: 1px solid var(--rule); }
.guide-meter span { display: block; height: 100%; background: var(--field); transition: width .4s var(--ease-out); }
.guide-count { margin: 0; font: 400 0.9375rem/1.2 var(--mono); color: var(--ink-2); }
.guide-count b { color: var(--ink); }

.guide-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.guide-rail { position: sticky; top: 1rem; display: grid; gap: 0.35rem; padding: 0.75rem; background: var(--sheet); border: 1px solid var(--rule); }
.guide-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.guide-rail a { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.6rem; color: var(--ink-2); text-decoration: none;
  border-left: 3px solid transparent; font-size: 1rem; }
.guide-rail a:hover { background: var(--sheet-2); color: var(--ink); }
.guide-rail a:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.guide-rail .is-current > a, .guide-rail .guide-rail-cap.is-current { background: var(--sheet-2); color: var(--ink); border-left-color: var(--red); }
.guide-rail .guide-rail-cap { font: 700 0.8125rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.guide-n { flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 1px solid var(--rule-strong);
  font: 700 0.875rem/1 var(--mono); color: var(--ink-2); }
.guide-n svg { width: 1rem; height: 1rem; }
.guide-rail .is-done .guide-n { background: color-mix(in srgb, var(--field) 18%, transparent); border-color: var(--field); color: var(--field); }
.guide-rail .is-current .guide-n { border-color: var(--red); color: var(--ink); }
.guide-rail-label { display: grid; gap: 0.1rem; min-width: 0; }
.guide-rail-label small { font: 400 0.75rem/1 var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }

.guide-main { min-width: 0; padding: 1.5rem 1.75rem 1.25rem; background: var(--sheet); border: 1px solid var(--rule); }
.guide-stepno { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0 0 0.5rem;
  font: 700 0.8125rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.guide-ok { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--field); }
.guide-ok svg { width: 0.9rem; height: 0.9rem; }
.guide-main h1 { font: 800 2.25rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 0.75rem; text-wrap: balance; }
.guide-lead { max-width: 64ch; margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.55; color: var(--ink); }
.guide-cols { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.5rem; align-items: start; }
.guide-work { min-width: 0; display: grid; gap: 1rem; align-content: start; }
.guide-aside { position: sticky; top: 1rem; display: grid; gap: 1rem; font-size: 0.9375rem; }
.guide-aside h2 { font: 700 0.8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.5rem; }
.guide-aside ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; color: var(--ink-2); }
.guide-example { padding: 0.75rem 0.9rem; background: var(--sheet-2); border-left: 3px solid var(--brass); }
.guide-example p { margin: 0; color: var(--ink-2); }

.guide-part { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0; font: 800 1.25rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.guide-part span { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; background: var(--red); color: var(--ink); font: 700 0.875rem/1 var(--mono); }
.guide-part small { font: 400 0.75rem/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); }
.guide-form { padding: 1rem 1.1rem; background: var(--sheet-2); border: 1px solid var(--rule); }
.guide-switch { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem; padding: 0.75rem 0.9rem; background: var(--sheet); border: 1px solid var(--rule-strong); }
.guide-switch span { display: grid; gap: 0.2rem; }
.guide-switch b { font-size: 1.0625rem; }
.guide-switch small { color: var(--ink-3); }
.guide-label { margin: 0 0 0.4rem; font-weight: 600; }
.guide-table input:not([type="checkbox"]), .guide-table select { width: 100%; min-width: 7rem; }
.guide-table td > input + input { margin-top: 0.35rem; }
.guide-drop { white-space: nowrap; font-size: 0.875rem; color: var(--ink-3); }
.guide-card { display: grid; gap: 0.75rem; justify-items: start; padding: 1rem 1.1rem; background: var(--sheet-2); border: 1px solid var(--rule-strong); }
.guide-card p { margin: 0; }
.guide-warn { border-left: 3px solid var(--red-ink); }
.guide-more { margin: 0; padding-top: 0.75rem; border-top: 1px dashed var(--rule-strong); font-size: 0.9375rem; color: var(--ink-3); }
.guide-list { margin: 0; padding-left: 1.2rem; }
.guide-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.guide-foot form { margin: 0; }

.guide-plan { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; counter-reset: gp; }
.guide-plan li { counter-increment: gp; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: baseline;
  padding: 0.7rem 0.9rem; background: var(--sheet-2); border-left: 3px solid var(--rule-strong); }
.guide-plan li::before { content: counter(gp); grid-row: span 2; font: 700 1rem/1 var(--mono); color: var(--ink-3); }
.guide-plan li b { font-size: 1.0625rem; }
.guide-plan li span { grid-column: 2; font-size: 0.9375rem; color: var(--ink-2); }
.guide-plan li a { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.guide-plan li.is-done { border-left-color: var(--field); }
.guide-plan li.is-done::before { content: "\2713"; color: var(--field); }
.guide-plan li.is-skipped { border-left-color: var(--brass); }
.guide-h2 { margin: 1.5rem 0 0.75rem; font: 800 1.375rem/1 var(--display); text-transform: uppercase; }
.guide-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.guide-extra { display: grid; gap: 0.35rem; padding: 0.85rem 1rem; background: var(--sheet-2); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.guide-extra:hover, .guide-extra:focus-visible { border-color: var(--brass); outline: none; }
.guide-extra b { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.guide-extra span { font-size: 0.875rem; color: var(--ink-2); }

/* the guide's card on Settings home and the unit settings */
.guide-home { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem;
  padding: 1.1rem 1.25rem; background: var(--sheet); border: 1px solid var(--rule); border-left: 3px solid var(--red); }
.guide-home.is-complete { border-left-color: var(--field); }
.guide-home > div { flex: 1 1 18rem; min-width: 0; display: grid; gap: 0.4rem; }
.guide-home h2 { margin: 0; font: 800 1.5rem/1.05 var(--display); text-transform: uppercase; }
.guide-home p { margin: 0; }

@media (max-width: 960px) {
  .guide-cols { grid-template-columns: minmax(0, 1fr); }
  .guide-aside { position: static; }
}
@media (max-width: 760px) {
  .guide-body { grid-template-columns: minmax(0, 1fr); }
  .guide-rail { position: static; display: flex; overflow-x: auto; gap: 0.25rem; padding: 0.5rem; }
  .guide-rail ol { display: flex; gap: 0.25rem; }
  .guide-rail a { flex-direction: column; gap: 0.3rem; padding: 0.45rem 0.5rem; white-space: nowrap; font-size: 0.8125rem;
    border-left: 0; border-bottom: 3px solid transparent; }
  .guide-rail .is-current > a { border-bottom-color: var(--red); }
  .guide-rail .guide-rail-cap { display: none; }
  .guide-main { padding: 1.1rem 1rem; }
  .guide-main h1 { font-size: 1.75rem; }
  .guide-plan li { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .guide-plan li a { grid-column: 2; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .guide-meter span { transition: none; } }

/* ── Badges and role chips (app/services/badges.py, role_chips.py; partials/badges.html) ──
   A role chip is a Discord-style pill: tinted, a coloured dot, normal case. A badge is a 22 px picture with a tooltip.
   Legendary art animates inside its own SVG (and stops for prefers-reduced-motion there). */
.rchips { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0.375rem; }
.rchip { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.25rem 0.6875rem 0.25rem 0.5625rem; border-radius: 999px; vertical-align: middle;
  font: 600 0.8125rem/1.25 var(--sans); color: var(--ink); white-space: nowrap; max-width: 100%;
  background: color-mix(in srgb, var(--rk, var(--ink-2)) 13%, var(--sheet-2)); border: 1px solid color-mix(in srgb, var(--rk, var(--ink-2)) 45%, transparent); }
.rchip::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--rk, var(--ink-2)); flex: none; }
.rchip.rchip-unit { background: var(--sheet-2); border-color: var(--rule-strong); color: var(--ink-2); }
.rchip.rk-owner { --rk: #f2c55c; }
.rchip.rk-owner::before { box-shadow: 0 0 0 0.15625rem color-mix(in srgb, #f2c55c 35%, transparent); }
.rchip.rk-staff { --rk: var(--red-ink); }
.rchip.rk-head { --rk: var(--brass); }
.rchip.rk-senior, .rchip.rk-unitstaff { --rk: var(--steel); }
.rchip.rk-moderator { --rk: var(--field); }
.rchip.rk-junior { --rk: #b9a3d6; }
.rchip.rk-trial { --rk: var(--ink-2); }
/* custom chip effects (role_chips.CHIP_FX; the owner picks one per custom chip). CSS only; they move only without reduced
   motion, keep the text >= 4.5:1 on the pill in every frame, and drop out in forced colours. */
.rchip[class*="rchip-fx-"] { position: relative; overflow: hidden; isolation: isolate; }
.rchip[class*="rchip-fx-"]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* tracking (the Rewind bundle): a play mark for the dot, VCR scanlines, a split edge on the type, and now and then the
   tracking line rolls down through the pill */
.rchip.rchip-fx-tracking { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); text-shadow: -1px 0 rgba(255, 80, 165, .4), 1px 0 rgba(80, 225, 255, .4); }
.rchip.rchip-fx-tracking::before { width: .5rem; height: .625rem; border-radius: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.rchip.rchip-fx-tracking::after { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px); }
@media (prefers-reduced-motion: no-preference) {
  .rchip.rchip-fx-tracking::after {
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--rk) 34%, transparent) 50%, transparent 58%) 0 85% / 100% 300% no-repeat;
    animation: rchip-tracking 2.4s steps(16) infinite; }
  @keyframes rchip-tracking { 0%, 64% { background-position: 0 0, 0 85%; } 100% { background-position: 0 0, 0 15%; } }
}
@media (forced-colors: active) { .rchip[class*="rchip-fx-"]::after { display: none; } .rchip[class*="rchip-fx-"] { text-shadow: none; } }
.member-names .rchip { justify-self: start; margin-top: 0.1875rem; font-size: 0.75rem; padding-block: 0.125rem; }

.bdg { position: relative; display: inline-flex; width: 1.375rem; height: 1.375rem; flex: none; border-radius: 0.25rem; --rc: var(--ink-3); }
.bdg-rare { --rc: var(--steel); }
.bdg-epic { --rc: #b9a3d6; }
.bdg-legendary { --rc: #f2c55c; }
.bdg img { width: 100%; height: 100%; display: block; }
.bdg-legendary img { filter: drop-shadow(0 0 0.25rem rgba(242, 197, 92, .55)); }
.bdg-tip { position: absolute; left: 50%; bottom: calc(100% + 0.5rem); transform: translateX(-50%); z-index: 40; display: none; flex-direction: column; gap: 0.125rem;
  width: max-content; max-width: 14rem; padding: 0.5rem 0.625rem; background: var(--well); border: 1px solid var(--rule-strong); border-left: 3px solid var(--rc);
  font: 400 0.8125rem/1.35 var(--sans); color: var(--ink-2); text-align: left; white-space: normal; pointer-events: none; }
.bdg-tip b { font: 700 0.875rem/1.2 var(--sans); color: var(--ink); }
.bdg-tip i { font: 700 0.6875rem/1.2 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--rc); }
.bdg .bdg-tip { display: none !important; }   /* the source for the floating bubble below; never shown in place */
.bdg:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.bdg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; width: max-content; max-width: 100%; }
.bdg-row.bdg-mini { background: none; padding: 0; justify-content: center; width: auto; margin-top: 0.25rem; }
.bdg-more { font: 700 0.75rem/1 var(--sans); color: var(--ink-2); background: var(--sheet-2); border: 0; border-radius: 0.3125rem; padding: 0.3125rem 0.4375rem; cursor: pointer; }
.bdg-more:hover, .bdg-more:focus-visible { color: var(--ink); }
.bdg-rest { display: contents; }
.bdg-rest[hidden] { display: none; }
.bdg-groups h3 { margin: 1.5rem 0 0.625rem; font-size: 1.0625rem; }
.bdg-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.625rem; margin: 0; padding: 0; }
.bdg-card { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.125rem 0.75rem; align-items: start; padding: 0.75rem; border: 1px solid var(--rule); border-left: 3px solid var(--rc, var(--ink-3)); background: var(--well); }
.bdg-card img { grid-row: span 3; width: 2.75rem; height: 2.75rem; }
.bdg-card b { font: 700 0.9375rem/1.2 var(--sans); color: var(--ink); }
.bdg-card i { font: 700 0.6875rem/1.2 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--rc, var(--ink-3)); }
.bdg-card p { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.bdg-card.is-locked { border-left-color: var(--rule); }
.bdg-card.is-locked img { filter: grayscale(1) opacity(.3); }
.bdg-card.is-locked b, .bdg-card.is-locked p { color: var(--ink-3); }
.bdg-card.is-locked i { color: var(--ink-3); }
.bdg-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; }
.bdg-slots .form-group { margin: 0; }
.bdg-given { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.bdg-given li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.fm-who .rchip { font-size: 0.75rem; white-space: normal; text-align: center; }
.profile-main .tab-title ~ .tab-title { margin-top: 1.75rem; }
.bdg-all { margin-top: 0.5rem; }

/* the portal badge row on the profile card, under the name like Discord */
.pcard-portal-badges { margin: .45rem 0 .2rem; }
.pcard-portal-badges .bdg-row { flex-wrap: wrap; }

/* tooltips at the row's edges open inward, so they never leave the card; the "+N" / "Less" chip always sits last */
.bdg-row > .bdg:nth-child(-n+2) .bdg-tip, .bdg-rest > .bdg:first-child .bdg-tip { left: 0; transform: none; }
.bdg-row > .bdg:nth-last-child(-n+3) .bdg-tip, .bdg-rest > .bdg:nth-last-child(-n+2) .bdg-tip { left: auto; right: 0; transform: none; }
.bdg-tip { max-width: min(16rem, 80vw); }

/* staff edit mode on the Badges tab: a staff badge card is one big toggle (give / take back) */
.bdg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.bdg-card.is-toggle { position: relative; cursor: pointer; border-style: dashed; }
.bdg-card.is-toggle:hover, .bdg-card.is-toggle:focus-within { border-color: var(--brass); background: var(--sheet-2); }
.bdg-toggle-form { position: absolute; inset: 0; margin: 0; }
.bdg-toggle { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; cursor: pointer; }
.bdg-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* the badge bubble: lives on <body>, so no card can clip it; placed by portal.js above the badge, inside the viewport */
.bdg-pop { position: fixed; z-index: 1000; left: 0; top: 0; width: max-content; max-width: min(15rem, calc(100vw - 1rem));
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.125rem 0.625rem; align-items: center;
  padding: 0.625rem 0.75rem 0.6875rem; border-radius: 0.75rem; background: #111214; color: #dbdee1;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); pointer-events: none;
  opacity: 0; transform: translateY(0.25rem) scale(.96); transform-origin: var(--ax, 50%) 100%;
  transition: opacity .1s var(--ease-out), transform .1s var(--ease-out); }
/* in: a short spring out of the badge (from the arrow); out: a quick fade. Once one is open, the next opens instantly */
.bdg-pop.is-on { opacity: 1; transform: none; transition: opacity .15s var(--ease-out), transform .39s var(--spring-pop); }
.bdg-pop.is-below { transform-origin: var(--ax, 50%) 0; }
.bdg-pop.is-below:not(.is-on) { transform: translateY(-0.25rem) scale(.96); }
.bdg-pop.is-instant { transition: none; }
.bdg-pop img { grid-row: span 2; width: 2.25rem; height: 2.25rem; }
.bdg-pop b { font: 600 0.9375rem/1.2 var(--sans); color: #f2f3f5; }
.bdg-pop .bp-rar { font: 500 0.75rem/1.2 var(--sans); color: var(--rc, #b5bac1); }
.bdg-pop p { grid-column: 1 / -1; margin: 0.375rem 0 0; font: 400 0.8125rem/1.4 var(--sans); color: #b5bac1; }
.bdg-pop::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -0.3125rem; width: 0.625rem; height: 0.625rem;
  background: #111214; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 2px 0; }
.bdg-pop.is-below::after { bottom: auto; top: -0.3125rem; }
.bdg-pop.r-rare { --rc: #7cb7ff; } .bdg-pop.r-epic { --rc: #c9a7ff; } .bdg-pop.r-legendary { --rc: #f5cf6b; }

/* badge hover: the badge lifts on a spring (more for rarer ones) over a soft shadow; epic glows in its colour, legendary gets a
   pulsing aura. Everything is transform/opacity on the badge itself, so its neighbours never move; glow and aura bleed .5rem,
   inside the profile card's 1rem padding. The art's own move is in badge-fx.css, particles fly on .bdg-fx (portal.js). */
.bdg { isolation: isolate; }
.bdg-art { display: block; width: 100%; height: 100%;
  transition: translate .2s var(--ease-out), scale .2s var(--ease-out), transform .2s var(--ease-out); }
.bdg::before, .bdg::after { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .2s var(--ease-out), scale .2s var(--ease-out); }
.bdg::after { left: 12%; right: 12%; bottom: -0.25rem; height: 0.3125rem; border-radius: 50%; scale: .6;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.bdg::before { inset: -0.5rem; border-radius: 50%; scale: .8;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 60%, transparent), transparent); }
.bdg.is-hot::after, .bdg-epic.is-hot::before, .bdg-legendary.is-hot::before { opacity: 1; scale: 1;
  transition: opacity .2s var(--ease-out), scale .66s var(--spring); }
.bdg-epic.is-hot::before { opacity: .7; }
.bdg-legendary.is-hot::before { animation: bdg-aura 1.6s var(--ease-in-out) .4s infinite alternate; }
@keyframes bdg-aura { to { scale: 1.2; opacity: .6; } }
@media (hover: hover) and (pointer: fine) {
  .bdg.is-hot .bdg-art { translate: 0 -0.125rem; scale: 1.12;
    transition: translate .66s var(--spring), scale .66s var(--spring), transform .16s var(--ease-out); }
  .bdg-rare.is-hot .bdg-art { scale: 1.14; }
  .bdg-epic.is-hot .bdg-art { scale: 1.16; }
  .bdg-legendary.is-hot .bdg-art { translate: 0 -0.1875rem; scale: 1.2; }
}
/* a tap on a phone: the same move, a smaller lift, no aura loop (and no tilt or particles: portal.js) */
@media (hover: none), (pointer: coarse) {
  .bdg.is-hot .bdg-art { translate: 0 -0.0625rem; scale: 1.06; transition: translate .66s var(--spring), scale .66s var(--spring); }
  .bdg-legendary.is-hot::before { animation: none; }
}
.bdg-fx { position: fixed; inset: 0; z-index: 999; pointer-events: none; overflow: hidden; contain: strict; }
.bdg-fx i { position: absolute; left: 0; top: 0; border-radius: 50%; background: currentColor; }
.bdg-fx .p-sq { border-radius: 1px; }
.bdg-fx .p-rect { border-radius: 1px; aspect-ratio: 5 / 3; height: auto !important; }
.bdg-fx .p-line { border-radius: 1px; }
.bdg-fx .p-star { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.bdg-fx .p-heart { border-radius: 0; clip-path: polygon(50% 95%, 8% 52%, 2% 30%, 12% 10%, 30% 5%, 50% 22%, 70% 5%, 88% 10%, 98% 30%, 92% 52%); }
.bdg-fx .p-petal { border-radius: 0 100%; }
.bdg-fx .p-ring { background: none; border: 0.09375rem solid currentColor; }
@media (prefers-reduced-motion: reduce) {
  .bdg-pop, .bdg-pop.is-on { transform: none; transition: opacity .15s ease; }
  .bdg-pop.is-instant { transition: none; }
  .bdg-art, .bdg.is-hot .bdg-art { translate: none; scale: none; transform: none !important; transition: none; }
  .bdg::before, .bdg::after, .bdg.is-hot::after, .bdg-epic.is-hot::before, .bdg-legendary.is-hot::before { scale: none; animation: none;
    transition: opacity .2s ease; }
}

/* ── Profile cosmetics (app/services/cosmetics.py, static/cosmetics/) ──────────────────────
   The stage wraps the card so frames, decorations and entrances can bleed past its rounded, clipped edge. */
.pcard-stage { position: relative; }
.pcard-stage[data-cos-autoplay]:not([data-cos-live]) .pcard { opacity: 0; animation: cos-failsafe 0.01s 2.5s forwards; }
@keyframes cos-failsafe { to { opacity: 1; } }
.cos-banner { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cos-banner canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cos-deco { position: absolute; width: 216px; height: 216px; transform-origin: 50% 50%; pointer-events: none; z-index: 3; }
.cos-deco canvas { display: block; width: 216px; height: 216px; }
.cos-deco-row { left: 50%; top: 50%; width: 180%; height: 180%; transform: translate(-50%, -50%); z-index: 1; }
.cos-deco-row canvas { width: 100%; height: 100%; }
.fx-layer { position: absolute; pointer-events: none; z-index: 5; }
.burst-fx { position: absolute; pointer-events: none; width: calc(100% + 160px); height: calc(100% + 160px); z-index: 6; }
.holo-fx { position: absolute; inset: 0; pointer-events: none; border-radius: 0.5rem; z-index: 6; }
.holo-fx .hb { position: absolute; left: -2%; right: -2%; height: 2px; margin-top: -1px; background: #dff8ff; box-shadow: 0 0 6px 2px rgba(120,220,255,.9), 0 0 22px 6px rgba(60,170,255,.55); }
.holo-fx .hs { position: absolute; inset: 0; border-radius: 0.5rem; background: repeating-linear-gradient(to bottom, rgba(140,230,255,.13) 0 1px, transparent 1px 3px); mix-blend-mode: screen; }
.holo-fx .hw { position: absolute; left: 0; right: 0; height: 12%; background: linear-gradient(to bottom, transparent, rgba(170,240,255,.28) 60%, rgba(230,252,255,.55) 92%, transparent); mix-blend-mode: screen; }
.member-names .bdg-row.bdg-mini, .member-row .bdg-row.bdg-mini { justify-content: flex-start; margin-top: 0.25rem; }

/* the picker in the profile editor: a shop shelf, the stills are the product (static/cosmetics/thumbs) */
.cos-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--rule); margin-bottom: 1rem; }
.cos-tab { font: 600 0.9375rem/1 var(--sans); color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.625rem 0.875rem; margin-bottom: -1px; cursor: pointer;
  transition: color .15s, border-color .15s, transform .16s cubic-bezier(.23, 1, .32, 1); }
.cos-tab:hover { color: var(--ink); }
.cos-tab[aria-selected="true"] { color: var(--brass); border-bottom-color: var(--brass); }
.cos-tab:active { transform: scale(.97); }
.cos-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.cos-panel[hidden] { display: none; }
.cos-grid { display: grid; gap: 1rem 0.875rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.25rem; }
@media (min-width: 40rem) {
  .cos-grid-card { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); }
  .cos-grid-banner { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
  .cos-grid-deco { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}
.cos-tile { position: relative; display: grid; align-content: start; gap: 0.5rem; min-width: 0; cursor: pointer; transition: transform .16s cubic-bezier(.23, 1, .32, 1); }
.cos-tile:active { transform: scale(.98); }
.cos-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cos-thumb { position: relative; display: block; overflow: hidden; border-radius: 0.5rem; border: 1px solid var(--rule);
  background: radial-gradient(120% 100% at 50% 0, #1d1e21, var(--well)); transition: border-color .15s, box-shadow .15s; }
.cos-k-card .cos-thumb { aspect-ratio: 348 / 276; }
.cos-k-banner .cos-thumb { aspect-ratio: 5 / 2; }
.cos-k-deco .cos-thumb { aspect-ratio: 1; }
.cos-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cos-k-card .cos-thumb img { transform: scale(1.172); }   /* trims the still's empty bleed so the card fills the tile */
@media (hover: hover) and (pointer: fine) { .cos-tile:hover .cos-thumb { border-color: var(--rule-strong); } }
/* chosen: a brass ring set off from the tile by a gap, and a check; the name turns brass too */
.cos-tile:has(input:checked) .cos-thumb { border-color: var(--brass); box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--brass); }
.cos-tile:has(input:focus-visible) .cos-thumb { outline: 2px solid var(--ink); outline-offset: 7px; }
.cos-check { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brass);
  box-shadow: 0 0 0 2px var(--sheet), 0 0.25rem 0.75rem rgba(0, 0, 0, .5); opacity: 0; transform: scale(.8); transition: opacity .15s, transform .18s cubic-bezier(.23, 1, .32, 1); }
.cos-check::after { content: ""; position: absolute; left: 50%; top: 46%; width: 0.375rem; height: 0.6875rem; border: solid #17140d; border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
.cos-tile:has(input:checked) .cos-check { opacity: 1; transform: none; }
.cos-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.5rem; min-width: 0; }
.cos-label b { font: 700 1.0625rem/1.15 var(--display); letter-spacing: .03em; overflow-wrap: anywhere; transition: color .15s; }
.cos-tile:has(input:checked) .cos-label b { color: var(--brass); }
.cos-tag { font: 600 0.75rem/1 var(--sans); font-style: normal; color: var(--brass); border: 1px solid color-mix(in srgb, var(--brass) 50%, transparent); border-radius: 0.1875rem; padding: 0.1875rem 0.375rem; white-space: nowrap; }
/* an empty slot: hatched, with a barred circle */
.cos-none .cos-thumb { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 0.4rem, rgba(255, 255, 255, .04) 0.4rem 0.45rem), var(--sheet-2); }
.cos-none .cos-thumb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.75rem; height: 1.75rem; transform: translate(-50%, -50%); border: 1.5px solid var(--ink-3); border-radius: 50%;
  background: linear-gradient(45deg, transparent calc(50% - 0.75px), var(--ink-3) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
.cos-k-banner.cos-none .cos-thumb { aspect-ratio: 5 / 2; }
/* what is picked, said once under the grid instead of in every tile */
.cos-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.75rem; margin: 1rem 0 0; padding: 0.75rem 0.875rem; min-height: 3.5rem; background: var(--sheet-2); border-left: 2px solid var(--brass); }
.cos-detail b { font: 700 1.125rem/1.2 var(--display); letter-spacing: .03em; }
.cos-detail span { color: var(--ink-2); font-size: 0.875rem; line-height: 1.4; }
.cos-play { margin-top: 0.875rem; }
/* the live piece a hovered tile swaps to: the same sample card as the still, scaled by portal.js to the tile */
.cos-live { position: absolute; left: 0; top: 0; width: 408px; height: 324px; transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .15s ease;
  background: radial-gradient(120% 100% at 50% 0, #1d1e21, var(--well)); }
.cos-live.is-on { opacity: 1; }
.cos-live .pcard-stage { position: absolute; left: 64px; top: 64px; width: 280px; margin: 0 !important; }
.cos-live .pcard { height: 196px; --pc-accent: #5a4d36; }
.cos-live .pcard-banner { height: 84px; background: linear-gradient(135deg, #4b4234, #2a2822); }
.cos-live-banner .pcard-banner { height: 112px; }
.cos-live-banner .pcard-head, .cos-live-banner .pcard-body { display: none; }
.cos-live-banner .pcard { border-radius: 0; }
.cos-live .pcard-body { padding-top: 0.5rem; }
.cos-live .pcard-name { font-size: 1.125rem; }
.cos-sk { display: grid; gap: 0.375rem; margin-top: 0.625rem; }
.cos-sk i { height: 0.5rem; width: 85%; border-radius: 0.25rem; background: rgba(255, 255, 255, .08); }
.cos-sk i + i { width: 55%; }
.cos-live-deco { width: 216px; height: 216px; }
.cos-live-deco .pcard-stage { left: 0; top: 0; width: 216px; height: 216px; }
.cos-live-deco .pcard-avatar { position: absolute; left: 48px; top: 48px; width: 120px; height: 120px; --pc-bg: #18191b; }
@media (forced-colors: active) { .cos-tile:has(input:checked) .cos-thumb { outline: 3px solid Highlight; } .cos-check { forced-color-adjust: none; background: Highlight; } }
@media (prefers-reduced-motion: reduce) { .cos-tab, .cos-tile, .cos-thumb, .cos-check, .cos-live, .cos-label b { transition: none; } }
/* forum author column: the decoration wraps the face (no layout change for members without one) */
.fm-who-av { position: relative; display: block; flex-shrink: 0; border-radius: 50%; }
.fm-xop .fm-who-av { margin-top: -2.75rem; }
.fm-xop .fm-who-av .fm-who-face { margin-top: 0; }
@media (max-width: 40rem) { .fm-who-av, .fm-xop .fm-who-av { grid-row: span 2; margin: 0; } }
.pcard-stage[data-cos-frame] { margin: 1.25rem 0 1.75rem; }
.pcard-banner { position: relative; overflow: hidden; }

/* ── Staff HQ (/hq, routers/hq.py): its own sidebar (a tab strip on phones), Home's docket, Team's department sheets ── */
.operator a.operator-hq { color: var(--ink); }
.operator a.operator-hq::before { content: ""; width: 0.4375rem; height: 0.4375rem; background: var(--red); }

.hq-side { width: 14.5rem; flex-shrink: 0; background: var(--sidebar); border-right: 1px solid var(--rule); padding: 1.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.hq-side-head { padding: 0 0.75rem 1.125rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--rule); }
.hq-side-mark { display: flex; align-items: center; gap: 0.5rem; font: 800 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.hq-side-mark::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--red); }
.hq-side-me { display: block; margin-top: 0.5rem; font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); }
.hq-side-group { display: flex; flex-direction: column; gap: 2px; }
.hq-side-group.is-top { padding-top: 0.75rem; }
.hq-side-label { font: 700 0.75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 1.25rem 0.75rem 0.5rem; }
.hq-side-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; color: var(--ink-2);
  text-decoration: none; font-size: 0.9375rem; font-weight: 500; border-left: 2px solid transparent; }
a.hq-side-item:hover { color: var(--ink); background: var(--sheet-2); }
.hq-side-item[aria-current="page"] { color: var(--ink); background: var(--sheet-2); border-left-color: var(--red); }
.hq-side-item.is-soon { color: var(--ink-3); cursor: default; }
.hq-side-item small { font: 700 0.6875rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--rule-strong); padding: 0.1875rem 0.3125rem; }

/* the page head: kicker, title, a readout, the member's stamp; a double rule like an order sheet's */
.hq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-bottom: 1.375rem; margin-bottom: 2rem; border-bottom: 3px double var(--rule-strong); }
.hq-head h1 { margin: 0; font-size: clamp(2.5rem, 5vw, 3.75rem); }
.hq-kicker { font: 700 0.8125rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.75rem; }
.hq-kicker b { color: var(--red-ink); }
.hq-readout { margin-top: 0.75rem; font: 400 0.9375rem/1 var(--mono); color: var(--ink-2); }
.hq-readout b { color: var(--rule-strong); font-weight: 400; margin: 0 0.25rem; }
.hq-readout .is-red { color: var(--red-ink); font-weight: 700; }
.hq-stamp { font-size: 1.25rem; padding: 0.5rem 0.875rem 0.4375rem; margin: 0 0.5rem 0.375rem 0; }
.stamp.is-brass { color: var(--brass); }
.stamp.is-field { color: var(--field); }

/* Home: the docket on the left, the staff log beside it */
.hq-home { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem; align-items: start; }
.hq-docket { list-style: none; border: 1px solid var(--rule); background: var(--sheet); }
.hq-job { display: grid; grid-template-columns: 2.25rem 4.25rem minmax(0, 1fr) auto; gap: 0 1.25rem; align-items: start; padding: 1.5rem 1.5rem 1.5rem 1.25rem; }
.hq-job + .hq-job { border-top: 1px dashed var(--rule-strong); }
.hq-job-no { font: 700 0.875rem/1 var(--mono); color: var(--brass); padding-top: 0.75rem; }
.hq-job-count { font: 800 3.5rem/.85 var(--display); color: var(--ink); text-decoration: none; text-align: right; font-variant-numeric: tabular-nums; }
.hq-job-count:hover { color: var(--brass); }
.hq-job h3 { font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem 0.875rem; flex-wrap: wrap; }
.hq-job h3 a { color: var(--ink); text-decoration: none; }
.hq-job h3 a:hover { color: var(--brass); }
.hq-job-line { margin-top: 0.375rem; color: var(--ink-2); font-size: 0.9375rem; }
.hq-job-dept { font: 700 0.75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule-strong); padding: 0.3125rem 0.5rem; margin-top: 0.375rem; white-space: nowrap; }
.hq-job.is-urgent { background: linear-gradient(90deg, var(--red-wash), transparent 55%); box-shadow: inset 4px 0 0 var(--red); }
.hq-job.is-urgent .hq-job-count { color: var(--red-ink); }
.hq-urgent { color: var(--red-ink); font-size: 0.75rem; }
.hq-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); margin-top: 1rem; border: 1px solid var(--rule); border-width: 1px 0 0 1px; background: var(--well); }
.hq-parts > div { padding: 0.5rem 1rem 0.5625rem; border-right: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); }
.hq-parts dt { font: 700 0.75rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hq-parts dt a { color: inherit; text-decoration: none; }
.hq-parts dt a:hover { color: var(--brass); }
.hq-parts dd { font: 800 1.625rem/1.1 var(--display); color: var(--ink); }
.hq-parts .is-red dt, .hq-parts .is-red dd { color: var(--red-ink); }
.hq-rows { list-style: none; margin-top: 0.875rem; border-top: 1px solid var(--rule); }
.hq-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; flex-wrap: wrap; padding: 0.5625rem 0; border-bottom: 1px solid var(--rule); }
.hq-rows a { color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.hq-rows a:hover { color: var(--brass); }
.hq-rows span { font: 400 0.8125rem/1.5 var(--mono); color: var(--ink-3); }
.hq-rows .is-late span { color: var(--red-ink); }
.hq-clear { border: 1px dashed var(--rule-strong); padding: 3.5rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.125rem; text-align: center; }
.hq-clear .stamp { font-size: 1.375rem; }
.hq-clear p { font-size: 1.0625rem; color: var(--ink-2); }
.hq-aside { background: var(--sheet); border: 1px solid var(--rule); border-top: 2px solid var(--red); padding: 1.25rem 1.25rem 1rem; position: sticky; top: 1.5rem; }
.hq-aside-title { font-size: 1.125rem; letter-spacing: .04em; margin-bottom: 0.5rem; }
.hq-log { list-style: none; }
.hq-log li { padding: 0.6875rem 0; border-top: 1px dashed var(--rule); }
.hq-log time { font: 400 0.75rem/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.hq-log p { font-size: 0.875rem; color: var(--ink-2); margin-top: 0.3125rem; }
.hq-log b { color: var(--ink); font-weight: 600; }
.hq-copy { width: 100%; font-family: var(--mono); }
.hq-none { color: var(--ink-3); font-size: 0.9375rem; padding: 0.75rem 0; }
.hq-aside-more { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }

/* Team: the owner on top, then one sheet per department */
.hq-owner { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.25rem 2rem 1.25rem 1.5rem;
  background: var(--sheet); border: 1px solid var(--rule); border-left: 4px solid var(--red); margin-bottom: 2rem; }
.hq-owner img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; background: var(--well); }
.hq-owner .hq-person-name { font: 800 1.875rem/1 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.hq-dept { position: relative; margin-bottom: 1.75rem; background: var(--sheet); border: 1px solid var(--rule); scroll-margin-top: 1.5rem; }
.hq-dept:target { border-color: var(--brass); }
.hq-dept-head { display: flex; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; padding: 1.125rem 9.5rem 1rem 1.5rem; border-bottom: 1px solid var(--rule); }
.hq-dept-no { font: 700 0.875rem/1 var(--mono); color: var(--brass); }
.hq-dept-head h2 { font-size: 1.875rem; margin: 0; }
.hq-dept-count { display: flex; flex-wrap: wrap; gap: 0.75rem; font: 400 0.8125rem/1 var(--mono); color: var(--ink-3); }
.hq-dept-count span + span::before { content: "/"; margin-right: 0.75rem; color: var(--rule-strong); }
.hq-appoint > summary { position: absolute; top: 0.875rem; right: 1.25rem; list-style: none; }
.hq-appoint > summary::-webkit-details-marker { display: none; }
.hq-appoint[open] > summary { color: var(--brass); border-color: var(--brass); background: var(--sheet-2); }
.hq-appoint-form { padding: 0.25rem 1.5rem 1.5rem; background: var(--well); border-bottom: 1px dashed var(--rule-strong); }
.hq-appoint-form > input[type="search"], .hq-appoint-form .fm-pick, .hq-appoint-form .fm-fallback { max-width: 36rem; }
.hq-appoint-form > input[type="search"] { font-size: 1.0625rem; }
.hq-levels { border: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 1.25rem; }
.hq-levels legend { float: left; width: 100%; }
.hq-levels label { position: relative; cursor: pointer; }
.hq-levels input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hq-levels span { display: inline-block; padding: 0.5625rem 1.125rem; border: 1px solid var(--rule-strong); color: var(--ink-2); }
.hq-levels label:hover span { color: var(--ink); }
.hq-levels input:checked + span { border-color: var(--brass); color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, transparent); }
.hq-levels input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.hq-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; max-width: none; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--well) 50%, var(--sheet)); }
.hq-ladder-k { font: 700 0.75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-right: 0.375rem; }
.hq-ladder .fm-rank { font-size: 0.75rem; }
.hq-ladder .fm-rank b { color: var(--ink); margin-left: 0.25rem; }
.hq-ladder a { margin-left: auto; font: 700 0.8125rem/1 var(--mono); }
.hq-people { list-style: none; }
.hq-person { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 11rem 6.5rem; align-items: center; gap: 0.5rem 1.25rem; padding: 0.875rem 1.5rem 0.875rem 1.3125rem; border-left: 3px solid var(--lv); }
.hq-person + .hq-person { border-top: 1px solid var(--rule); }
.lv-head { --lv: var(--brass); }
.lv-staff { --lv: var(--steel); }
.lv-trial { --lv: var(--rule-strong); }
.hq-person img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--well); }
.hq-person-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hq-person-name { font: 700 1.125rem/1.2 var(--sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.hq-person-name:hover { color: var(--brass); }
.hq-person-meta { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink-3); }
.hq-lv { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lv); margin-right: 0.375rem; }
.lv-trial .hq-lv { color: var(--ink-2); }
.hq-trial { display: flex; flex-direction: column; gap: 0.4375rem; font: 400 0.8125rem/1 var(--mono); color: var(--ink-2); }
.hq-tally { display: flex; gap: 2px; }
.hq-tally i { flex: 1; height: 0.375rem; background: var(--rule); }
.hq-tally i.on { background: var(--field); }
.hq-trial.is-late { color: var(--red-ink); }
.hq-trial.is-late .hq-tally i.on { background: var(--red-ink); }
.hq-acts { position: relative; justify-self: end; }
.hq-acts > summary { list-style: none; cursor: pointer; font: 700 0.75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule-strong); padding: 0.5625rem 0.875rem; }
.hq-acts > summary::-webkit-details-marker { display: none; }
.hq-acts > summary:hover, .hq-acts[open] > summary { color: var(--ink); background: var(--sheet-2); }
.hq-acts-menu { position: absolute; right: 0; top: calc(100% + 0.375rem); z-index: 5; min-width: 14rem; padding: 0.375rem 0;
  background: var(--sheet-2); border: 1px solid var(--rule-strong); border-top: 2px solid var(--brass); box-shadow: 0 1rem 2rem -0.75rem rgba(0,0,0,.8); }
.hq-acts-menu form { margin: 0; }
.hq-acts-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); font: 500 0.9375rem/1.2 var(--sans); padding: 0.6875rem 1rem; cursor: pointer; }
.hq-acts-menu button:hover { background: var(--sheet); }
.hq-acts-menu .is-danger { color: var(--red-ink); border-top: 1px dashed var(--rule-strong); }
.hq-dept > .hq-none { padding: 1rem 1.5rem; }

@media (max-width: 760px) {
  .layout:has(> .hq-side) { flex-direction: column; }
  .hq-side { width: auto; flex-direction: row; overflow-x: auto; padding: 0 0.5rem; gap: 0; border-right: 0; border-bottom: 1px solid var(--rule);
    position: sticky; top: var(--phonebar-h); z-index: 30; scrollbar-width: none; }
  .hq-side-head, .hq-side-label, .hq-side-item.is-soon { display: none; }
  .hq-side-group, .hq-side-group.is-top { flex-direction: row; gap: 0; padding: 0; }
  .hq-side-item { white-space: nowrap; padding: 0.875rem 0.875rem 0.75rem; border-left: 0; border-bottom: 2px solid transparent; }
  .hq-side-item[aria-current="page"] { background: none; border-bottom-color: var(--red); }
  .hq-head { margin-bottom: 1.5rem; }
  .hq-stamp { font-size: 1rem; }
  .hq-home { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .hq-aside { position: static; }
  .hq-job { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 1.125rem 1rem; }
  .hq-job-no { display: none; }
  .hq-job-count { font-size: 2.75rem; text-align: left; }
  .hq-job-dept { grid-column: 2; justify-self: start; }
  .hq-job h3 { font-size: 1.25rem; }
  .hq-parts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hq-parts > div { padding: 0.5rem 0.75rem; }
  .hq-owner { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; padding: 1rem; }
  .hq-owner img { width: 3rem; height: 3rem; }
  .hq-owner .hq-person-name { font-size: 1.375rem; }
  .hq-dept-head { padding: 1rem 8.5rem 0.875rem 1rem; }
  .hq-dept-head h2 { font-size: 1.5rem; }
  .hq-appoint > summary { right: 0.875rem; }
  .hq-appoint-form, .hq-ladder { padding-left: 1rem; padding-right: 1rem; }
  .hq-ladder a { margin-left: 0; }
  .hq-person { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 0.5rem 0.875rem; padding: 0.875rem 1rem 0.875rem 0.8125rem; }
  .hq-person img { width: 2.75rem; height: 2.75rem; }
  .hq-person > span:empty { display: none; }
  .hq-trial { grid-column: 2 / -1; grid-row: 2; }
  .hq-acts { grid-column: 3; grid-row: 1; }
  .hq-dept > .hq-none { padding: 1rem; }
}

/* Staff HQ, Network / Departments / Desk: the same sheets as Team, with plain lines, forms and a feed inside them */
.hq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0.5rem 0.375rem 0; }
.hq-dept-act { position: absolute; top: 0.875rem; right: 1.25rem; }
.hq-dept-more { margin-left: auto; font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.hq-dept-count .is-red { color: var(--red-ink); font-weight: 700; }
.hq-dept-body { padding: 1rem 1.5rem 1.5rem; }
.hq-dept-body .hq-job-line { margin: 0; }
.hq-lines { list-style: none; }
.hq-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1.25rem; padding: 0.875rem 1.5rem; margin: 0; }
.hq-line + .hq-line, .hq-lines > li + li { border-top: 1px solid var(--rule); }
.hq-lines > li > .hq-line + .hq-line { border-top: 0; }
.hq-line.has-lead { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.hq-line .emblem { width: 3rem; height: 3rem; }
.hq-line-title .stamp-sm { margin-left: 0.5rem; vertical-align: middle; }
.hq-line.is-off .hq-line-name, .hq-line.is-off .hq-line-title { color: var(--ink-3); }
.hq-line-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.hq-line-name, .hq-line-title { font: 700 1.125rem/1.2 var(--sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.hq-line-name:hover { color: var(--brass); }
.hq-line-meta { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.hq-line-meta .is-red { color: var(--red-ink); font-weight: 700; }
.hq-line-no { font: 700 0.875rem/1 var(--mono); color: var(--brass); min-width: 1.5rem; }
.hq-line-go { font: 700 0.75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule-strong); padding: 0.5625rem 0.875rem; text-decoration: none; justify-self: end; }
.hq-line-go:hover { color: var(--ink); background: var(--sheet-2); }
.hq-links .hq-line { grid-template-columns: minmax(0, 1fr) auto; }
.hq-flag { grid-template-columns: auto minmax(0, 1fr) 10rem auto; }
.hq-key { grid-template-columns: auto minmax(0, 1fr) auto; }
.hq-keynote { margin: 0; padding: 0.875rem 1.5rem; background: var(--well); border-bottom: 1px dashed var(--rule-strong); font-size: 0.9375rem; }
.hq-keynote code { display: block; margin-top: 0.5rem; overflow-wrap: anywhere; }
.hq-keymake { position: static; }
.hq-keymake > summary { position: static; display: inline-flex; margin: 1rem 1.5rem; }
.hq-form { padding: 1.25rem 1.5rem 1.5rem; max-width: 52rem; }
.hq-danger { padding: 1rem 1.5rem 1.5rem; }
.hq-danger > summary { list-style: none; display: inline-flex; color: var(--red-ink); border-color: var(--red-ink); }
.hq-danger > summary::-webkit-details-marker { display: none; }
.hq-danger form { margin-top: 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.hq-danger p { margin: 0; color: var(--ink-2); }
.hq-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; flex-basis: 100%; margin-top: 0.125rem; }
.hq-quick form { margin: 0; }
.hq-quick button { background: none; border: 1px solid var(--rule-strong); color: var(--ink-2); font: 700 0.75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 0.5rem 0.75rem; cursor: pointer; }
.hq-quick button:hover { color: var(--ink); background: var(--sheet-2); }
.hq-quick .is-danger { color: var(--red-ink); }
.hq-reports { list-style: none; }
.hq-report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: 0.75rem 1.5rem; align-items: start; padding: 1.125rem 1.5rem; }
.hq-report + .hq-report { border-top: 1px dashed var(--rule-strong); }
.hq-report.is-urgent { background: linear-gradient(90deg, var(--red-wash), transparent 55%); box-shadow: inset 4px 0 0 var(--red); }
.hq-report-why { margin: 0.25rem 0 0; color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.hq-open { display: flex; gap: 0.5rem; margin: 0; }
.hq-open input { flex: 1; min-width: 0; }
.hq-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1.5rem; }
.hq-filter select, .hq-filter input[type="search"] { width: auto; min-width: 14rem; }
.hq-filter-clear { font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hq-feed { list-style: none; }
.hq-feed li { display: grid; grid-template-columns: 11rem 7rem minmax(0, 1fr); gap: 0.25rem 1.25rem; align-items: baseline; padding: 0.75rem 1.5rem; }
.hq-feed li + li { border-top: 1px dashed var(--rule); }
.hq-feed time { font: 400 0.8125rem/1.4 var(--mono); color: var(--ink-3); }
.hq-feed-dept { font: 700 0.75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.hq-feed p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); overflow-wrap: anywhere; }
.hq-feed b { color: var(--ink); font-weight: 600; }
.hq-pager { display: flex; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--rule); font: 700 0.8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 760px) {
  .hq-dept-act { right: 0.875rem; }
  .hq-line { padding: 0.875rem 1rem; gap: 0.5rem 0.875rem; }
  .hq-line.has-lead { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hq-line .bot-state { grid-column: 2; justify-self: start; grid-row: 2; }
  .hq-line-go { grid-column: 3; grid-row: 1; }
  .hq-links .hq-line { grid-template-columns: minmax(0, 1fr) auto; }
  .hq-flag { grid-template-columns: minmax(0, 1fr) auto; }
  .hq-flag .hq-line-no { display: none; }
  .hq-flag .hq-line-main { grid-column: 1 / -1; }
  .hq-key { grid-template-columns: minmax(0, 1fr) auto; }
  .hq-key .hq-line-no { display: none; }
  .hq-report { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .hq-form, .hq-danger, .hq-dept-body { padding-left: 1rem; padding-right: 1rem; }
  .hq-feed li { grid-template-columns: minmax(0, 1fr); padding: 0.75rem 1rem; }
  .hq-pager, .hq-keynote { padding-left: 1rem; padding-right: 1rem; }
  .hq-keymake > summary { margin: 1rem; }
  .hq-actions { margin-right: 0; }
}