/* ══ the mod feed ════════════════════════════════════════════════════════
 * Deliberately cooler and flatter than the rest of Orbis. Every other tab is a
 * place you play in; this one is a place you audit from, and it should not feel
 * like the game rewarding you for being here. Slate rather than amber, one
 * accent (violet, `--staff` in `tokens.css`) that appears nowhere else, and no
 * celebration anywhere.
 */
.nav-btn.staff .nav-icon { color: var(--staff); }
/* The tab's own surfaces sit a shade below the game's, which is the whole of
   how it stays "a place you audit from" rather than a place you play in. */
.staff-me, .mod-log, .mod-report, .mod-sanction, .mod-member, .mod-entry,
.staff-room { background: var(--panel); }

.staff-me { display: grid; gap: 10px; }
.staff-me .row { flex-wrap: wrap; gap: 6px; }
.chip.staff-rank { background: var(--staff-dim); border-color: rgba(167, 139, 250, .35);
  color: var(--staff); font-weight: 600; }
/* The owner reads differently from everybody else, because they are. */
.chip.staff-rank.root { background: rgba(255, 159, 67, .16);
  border-color: rgba(255, 159, 67, .42); color: var(--warn); }
.chip.perm { font-size: 11.5px; }
.chip.tiny { font-size: 10.5px; padding: 1px 5px; }

.mod-log { display: grid; gap: 8px; margin-top: 10px; }
.mod-entry { padding: 10px 12px; display: grid; gap: 4px;
  border-left: 3px solid var(--border-hi); }
/* Somebody minting value is the line you scan this list for, so it is the one
   that is colored. */
.mod-entry.grant { border-left-color: var(--staff); background: var(--staff-dim); }
.mod-entry-head { align-items: center; gap: 8px; }
.mod-actor { font-weight: 600; color: var(--text); }
.mod-what { font-size: 14px; }
.mod-reason { font-style: italic; }

/* A report waiting on somebody, and one already dealt with. Closed rows stay
   readable but stop competing for attention: the queue is a list of decisions
   still to make, with the made ones as context underneath. */
.mod-report { padding: 10px 12px; display: grid; gap: 6px; margin-top: 8px;
  border-left: 3px solid var(--warn); }
.mod-report.closed { border-left-color: var(--border-hi); opacity: .65; }
/* The reported words, quoted. Indented and set apart so it can never be
   misread as the reporter's own complaint above it. */
.mod-excerpt { margin: 0; padding: 6px 10px; border-left: 2px solid var(--border-hi);
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
/* The flag. Small and quiet everywhere it appears - it sits beside things
   people are reading, and it is not the point of any of them. */
.report-flag { padding: 2px 6px; opacity: .5; }
.report-flag:hover { opacity: 1; }

/* One account another might be the same person as. A row of chips rather than
   a table: no single one of these facts means anything, and a layout that lines
   them up in columns invites reading down one of them. */
.mod-link { flex-wrap: wrap; gap: 6px; padding: 6px 0;
  border-bottom: 1px solid var(--border); }
.chip.warn { background: rgba(251, 191, 36, .1);
  border-color: rgba(251, 191, 36, .35); color: var(--warn); }

.mod-sanction { padding: 10px 12px; display: grid; gap: 4px;
  border-left: 3px solid var(--warn); }
.mod-sanction.ban { border-left-color: var(--err); }
.chip.bad { background: rgba(255, 93, 115, .12);
  border-color: rgba(255, 93, 115, .38); color: var(--err); }

.mod-member { padding: 10px 12px; display: grid; gap: 6px; margin-top: 8px; }
.mod-member.root { border-color: rgba(255, 159, 67, .38); }
.perm-row { flex-wrap: wrap; gap: 4px; }

/* One tile per permission, lit when held. A grid rather than a list of
   checkboxes: granting is a shape you should be able to take in at a glance,
   because the mistake it invites is handing over one power too many. */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px; margin: 8px 0; }
.perm-toggle { display: flex; align-items: center; gap: 6px; text-align: left;
  padding: 8px 10px; font-size: 12.5px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--r-md); color: var(--muted); }
.perm-toggle.on { background: var(--staff-dim); border-color: rgba(167, 139, 250, .45);
  color: var(--text); }
@media (hover: hover) { .perm-toggle:hover { border-color: var(--border-hi); } }

.mod-dossier { display: grid; gap: 10px; }
/* Who the sheet is about, pinned above the rooms. It reads as a *header* and
   not as the first row of content: its own surface, a rule under it, and it
   never scrolls out from over the fields that act on it. */
.mod-subject { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1.5px solid var(--border-hi); }
.mod-subject-who { min-width: 0; flex: 1; }
.mod-subject .row { margin-left: auto; }

/* ── one power at a time ──────────────────────────────────────────────
 * Picking the power comes first and the fields follow it, so the sheet is
 * never showing a box that the button below it will ignore. These are *tiles*
 * rather than the buttons they replaced: a moderator is choosing between six
 * things here, not firing one, and a chosen tile has to stay visibly chosen
 * while the eye moves down to the fields it revealed.
 */
.power-picks { flex-wrap: wrap; gap: 6px; }
.power-pick { display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--panel); border: 1.5px solid var(--border); box-shadow: none;
  font-size: 12px; font-weight: 700; color: var(--muted); }
.power-pick .power-icon { font-size: 13px; line-height: 1; }
.power-pick.active { background: var(--staff-dim); border-color: var(--staff); color: var(--text-hi); }
/* Ban is the one that reaches the whole account and the one nothing here
   undoes, so it is the one drawn in the colour of loss - unchosen as a hint,
   chosen as a statement. */
.power-pick.grave { color: var(--err); border-color: rgba(255, 93, 115, .32); }
.power-pick.grave.active { background: var(--tint-err); border-color: var(--err-solid); color: var(--err); }
@media (hover: hover) {
  .power-pick:hover:not(.active) { border-color: var(--border-hi); color: var(--text); }
}
/* The sentence under the strip. It is doing real work - the difference between
   a kick and a mute is not something to recall under pressure - so it reads at
   full text colour rather than as the fine print it is sized like. */
.power-blurb { margin: 0; color: var(--text); }
/* The one thing this panel does, at the foot of the fields it needs. */
.power-go { width: 100%; margin-top: 4px; }
.staff-act { border-color: rgba(167, 139, 250, .4); color: var(--staff); }
.link-act.danger { color: var(--err); }
.warn-note { color: var(--warn); }
/* Being silenced should look like a state you are in, not like a tip. */
.muted-note { border-left: 3px solid var(--err); color: var(--err); margin-bottom: 8px; }

/* A permission chip is a doorway, not a label - so it has to look pressable.
   Same size and color as the read-only chips it replaced; the difference is
   the cursor, the hover, and the fact that it does something. */
button.chip.perm.act { cursor: pointer; color: var(--text); }
@media (hover: hover) {
  button.chip.perm.act:hover { border-color: var(--staff); background: var(--staff-dim); }
}
button.chip.perm.act:active { transform: translateY(1px); }

/* The back room. Reuses `.chat` wholesale - it is the same object as the inbox -
   and only marks itself as the private one. */
.staff-room { border-color: rgba(167, 139, 250, .3); }
.staff-room .chat-line.mine { background: var(--staff-dim);
  border-color: rgba(167, 139, 250, .35); }

/* ── the health room ──────────────────────────────────────────────────
   The orb supply is the headline and everything else is a fact grid under
   it. That ordering is the point: tick duration says whether the server is
   coping, and the supply says whether the economy is - which is the one
   number on this screen that no amount of hardware fixes. */
.health-supply { border-color: rgba(255, 196, 66, .3); }
.health-total { display: block; margin: 2px 0 10px; font-family: var(--font-display);
  font-size: 30px; line-height: 1; color: var(--gold); word-break: break-all; }
.health-supply .facts { margin-bottom: 8px; }
/* A warning under a fact grid, for the two things worth saying in words: a
   tick eating its budget, and a backup that failed. */
.fine.bad { color: var(--err); margin-top: 8px; }

/* ── history, one series at a time ────────────────────────────────────
   A sparkline is read *after* the number it sits under, and only ever has to
   answer "which way". So the mark is the only loud thing on it: a 2px line, a
   10% wash under it, and a hairline baseline for a line near the floor to be
   near. No gridlines, no axis, no frame - at 40px tall they would outweigh the
   data. Nothing animates, per §8.6. */
.spark { display: block; width: 100%; height: 40px; margin: 10px 0 2px; overflow: visible; }
.spark-base { stroke: var(--border-soft); stroke-width: 1; }
.spark-wash { opacity: .1; }
.spark-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* The end marker, drawn twice: the ring in the surface colour so the dot stays
   legible where it crosses the line, then the dot itself. Zero-length round
   caps rather than circles - the box scales horizontally and not vertically, so
   a circle would arrive as an ellipse. */
.spark-ring { stroke: var(--panel); stroke-width: 12; stroke-linecap: round; }
.spark-end { stroke-width: 8; stroke-linecap: round; }
/* Not yet two minutes old. Holds the height so the card does not jump when the
   first line arrives. */
.spark-empty { height: 40px; margin: 10px 0 2px; }

/* ── a breakdown ──────────────────────────────────────────────────────
   A sorted list with a share bar behind it. The bar is not decoration: it is
   the only part that shows the *shape* without reading every number.

   Named `breakdown` and not `tally`, which is what this was first called and is
   already taken: `juice.css` gives `.tally` to the numbers that flash when they
   change, as `display: inline-block`. Two rules of equal weight, and whichever
   sheet loaded last won - here it was juice, so three of these shrink-wrapped
   into inline boxes and drew on top of each other. A collision between two
   sheets is invisible in both of them, so the fix is a name nothing else
   wants. */
.breakdown { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 2px; }
.breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto;
  align-items: center; gap: 8px; font-size: 13px; }
.breakdown-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted-hi); }
.breakdown-bar { height: 6px; border-radius: var(--r-pill); background: var(--panel-3); }
.breakdown-bar::before { content: ""; display: block; height: 100%; width: var(--share);
  border-radius: var(--r-pill); background: var(--accent); }
.breakdown-n { font-family: var(--font-num); color: var(--text);
  font-variant-numeric: tabular-nums; }

/* ── the two citizen controls ─────────────────────────────────────────
   Both spend money or move the population, so both are deliberately plain: a
   field and a button, no flourish, nothing that invites a press. */
.npc-target { align-items: flex-end; gap: 8px; margin-top: 10px; }
.voices-switch { align-items: center; gap: 8px; margin-bottom: 4px; }
.voices-switch .chip.on { color: var(--ok); border-color: var(--ok-deep); }
.voices-switch .chip.off { color: var(--muted); }