/* tdar admin (A20) — colors/spacing transcribed verbatim from
   "Tdar Test Center.dc.html" (T2 console art, still under its drawn name). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0c0803;
  font-family: Archivo, system-ui, sans-serif;
  color: #FBF7F1;
}

.hidden { display: none !important; }

/* --- Sign-in gate --------------------------------------------------- */

#signin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 24px;
}

#signin .logo-ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 5px solid #D9573B; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
#signin .logo-ring div {
  width: 9px; height: 9px; border-radius: 50%; background: #D9A448;
}
#signin h1 {
  font: 800 30px/1.1 "Schibsted Grotesk", sans-serif;
  letter-spacing: -0.03em; margin: 0;
}
#signin p { color: rgba(251,247,241,.6); font-size: 14px; max-width: 46ch; margin: 0; }
#signin button, .btn {
  height: 40px; padding: 0 20px; border-radius: 999px; border: none;
  background: #D9A448; color: #221812;
  font: 700 13px/1 "Schibsted Grotesk", sans-serif; cursor: pointer;
}
#signin .error { color: #E8836B; font-size: 13px; max-width: 46ch; }

/* --- Console shell ---------------------------------------------------- */

#console {
  width: calc(100% - 32px);
  margin: 16px auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  background: #171009;
  box-sizing: border-box;
}

.topbar {
  height: 52px; display: flex; align-items: center; gap: 12px;
  padding: 0 18px; border-bottom: 1px solid rgba(251,247,241,.08);
  box-sizing: border-box;
}
.topbar .logo-ring {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3.5px solid #D9573B; box-sizing: border-box; flex: none;
}
.topbar .name {
  font: 800 13px/1 "Schibsted Grotesk", sans-serif; color: #FBF7F1;
}
.badge {
  height: 22px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 9px; border-radius: 6px;
  font: 600 9.5px/1 ui-monospace, monospace; letter-spacing: .06em;
  white-space: nowrap;
}
.badge-project { background: rgba(217,164,72,.12); color: #D9A448; }
.badge-clock { background: rgba(217,164,72,.18); color: #EFB95C; cursor: default; }
.badge-clock .dot { width: 5px; height: 5px; border-radius: 50%; background: #EFB95C; }
.badge-tester { background: rgba(93,168,110,.16); color: #7FC08F; letter-spacing: .1em; }
.topbar .email { font: 500 11px/1 Archivo, sans-serif; color: rgba(251,247,241,.5); }
.spacer { flex: 1; }
.topbar .signout {
  background: none; border: none; color: rgba(251,247,241,.4);
  font: 500 10.5px/1 Archivo, sans-serif; cursor: pointer; text-decoration: underline;
}

.panes { display: flex; align-items: stretch; height: calc(100vh - 52px - 32px); }

/* --- Cast rail ------------------------------------------------------- */

.cast {
  width: 238px; flex: none; border-right: 1px solid rgba(251,247,241,.08);
  display: flex; flex-direction: column; padding: 14px 12px; gap: 12px;
  box-sizing: border-box; overflow-y: auto; min-height: 0;
}
.rail-label {
  font: 600 9px/1 ui-monospace, monospace; color: rgba(251,247,241,.4);
  letter-spacing: .18em; padding: 0 4px;
}
.phone-lookup {
  height: 32px; border-radius: 10px; background: rgba(251,247,241,.06);
  display: flex; align-items: center; gap: 7px; padding: 0 11px; box-sizing: border-box;
}
.phone-lookup .ico { font: 600 10px/1 ui-monospace, monospace; color: rgba(251,247,241,.35); }
.phone-lookup input {
  flex: 1; background: none; border: none; outline: none;
  font: 500 11px/1 ui-monospace, monospace; color: #FBF7F1;
}
.phone-lookup input::placeholder { color: rgba(251,247,241,.35); }
#phone-lookup-error { font-size: 10.5px; margin: -4px 0 0; }

.target-card {
  background: #241A11; border: 1px solid rgba(217,164,72,.25);
  border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.target-card .empty { font: 500 11px/1.5 Archivo, sans-serif; color: rgba(251,247,241,.4); }
.target-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.target-chip {
  height: 22px; display: inline-flex; align-items: center; padding: 0 9px;
  border-radius: 999px; border: 1px solid rgba(251,247,241,.15); background: none;
  font: 600 9px/1 Archivo, sans-serif; color: rgba(251,247,241,.5); cursor: pointer;
}
.target-chip.active { border-color: rgba(217,164,72,.35); color: #EFB95C; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #3A2A1B;
  display: flex; align-items: center; justify-content: center;
  font: 800 12px/1 "Schibsted Grotesk", sans-serif; color: #D9A448; flex: none;
}
.target-card .row { display: flex; align-items: center; gap: 9px; }
.target-card .who { display: flex; flex-direction: column; gap: 2px; }
.target-card .name { font: 700 12.5px/1 "Schibsted Grotesk", sans-serif; color: #FBF7F1; }
.target-card .sub { font: 500 9.5px/1 Archivo, sans-serif; color: rgba(251,247,241,.45); }
.push-health {
  display: flex; align-items: center; gap: 6px; background: rgba(93,168,110,.1);
  border-radius: 8px; padding: 6px 8px;
}
.push-health.stale { background: rgba(232,131,107,.1); }
.push-health.unknown { background: rgba(251,247,241,.06); }
.push-health .dot { width: 5px; height: 5px; border-radius: 50%; background: #7FC08F; flex: none; }
.push-health.stale .dot { background: #E8836B; }
.push-health.unknown .dot { background: rgba(251,247,241,.3); }
.push-health span.label {
  font: 600 9px/1.3 ui-monospace, monospace; color: #7FC08F;
}
.push-health.flare-active {
  background: rgba(217,164,72,.16); color: #EFB95C;
  font: 600 9px/1.3 ui-monospace, monospace;
}
.push-health.stale span.label { color: #E8836B; }
.push-health.unknown span.label { color: rgba(251,247,241,.45); }

.puppet-row {
  display: flex; align-items: center; gap: 9px; border-radius: 12px;
  padding: 9px 10px; cursor: pointer; border: 1px solid transparent; background: none;
  width: 100%; text-align: left; font: inherit; color: inherit;
}
.puppet-row .avatar { width: 28px; height: 28px; font-size: 11px; background: #2C2115; color: rgba(251,247,241,.5); }
.puppet-row .pname { font: 600 12px/1 Archivo, sans-serif; color: rgba(251,247,241,.75); flex: 1; }
.puppet-row .tag { font: 600 8px/1 ui-monospace, monospace; color: rgba(251,247,241,.3); letter-spacing: .08em; }
.puppet-row.active {
  background: rgba(217,164,72,.14); border-color: rgba(217,164,72,.45);
}
.puppet-row.active .avatar { background: #4A3320; color: #EFB95C; }
.puppet-row.active .pname { font-weight: 700; color: #FBF7F1; }
.puppet-row.active .tag { color: #D9A448; }
.puppet-row:disabled { opacity: .5; cursor: default; }
.more-seeds {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: 500 10.5px/1 Archivo, sans-serif; color: rgba(251,247,241,.35); padding: 6px 10px;
  cursor: pointer;
}
.more-seeds:hover { color: rgba(251,247,241,.6); }

/* --- Stage ------------------------------------------------------------ */

.stage {
  flex: 1; display: flex; flex-direction: column; padding: 16px 18px; gap: 14px;
  box-sizing: border-box; min-width: 0; min-height: 0; overflow-y: auto;
}
.stage .empty {
  margin: auto; color: rgba(251,247,241,.4); font-size: 13px; text-align: center;
}
.stage-header { display: flex; align-items: center; gap: 12px; }
.stage-header .who { display: flex; flex-direction: column; gap: 3px; }
.stage-header .title { font: 800 16px/1 "Schibsted Grotesk", sans-serif; color: #FBF7F1; }
.stage-header .sub { font: 500 10.5px/1 Archivo, sans-serif; color: rgba(251,247,241,.45); }
.pill-outline {
  height: 26px; display: inline-flex; align-items: center; padding: 0 11px;
  border-radius: 999px; border: 1px solid rgba(251,247,241,.2);
  font: 600 10.5px/1 Archivo, sans-serif; color: rgba(251,247,241,.6);
  background: none; cursor: pointer;
}
.pill-outline.danger { border-color: rgba(184,66,38,.5); color: #E8836B; }

.state-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  background: #241A11; border-radius: 12px; padding: 10px 14px;
}
.state-strip .label {
  font: 600 8.5px/1 ui-monospace, monospace; color: rgba(251,247,241,.35);
  letter-spacing: .14em; margin-right: 12px;
}
.state-strip .step {
  font: 600 9.5px/1 ui-monospace, monospace; color: rgba(251,247,241,.35);
}
.state-strip .step.current {
  height: 20px; display: inline-flex; align-items: center; padding: 0 8px;
  border-radius: 6px; background: rgba(217,164,72,.18); font-weight: 700; color: #EFB95C;
}
.state-strip .arrow { font: 600 9.5px/1 ui-monospace, monospace; color: rgba(251,247,241,.2); margin: 0 8px; }
.state-strip .live { margin-left: auto; font: 500 9.5px/1 Archivo, sans-serif; color: rgba(251,247,241,.35); }

.verb-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.verb {
  border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column;
  gap: 4px; text-align: left; cursor: pointer; border: 1px solid transparent;
  background: #3A2A1B; border-color: rgba(217,164,72,.35); font: inherit; color: inherit;
}
.verb .vtitle { font: 700 12px/1 Archivo, sans-serif; color: #FBF7F1; }
.verb .vsub { font: 500 9.5px/1.4 Archivo, sans-serif; color: rgba(251,247,241,.5); }
.verb:disabled { background: #2C2115; border-color: transparent; opacity: .45; cursor: default; }
.verb.danger { background: #2C2115; border-color: rgba(184,66,38,.5); }
.verb.danger .vtitle { color: #E8836B; }

/* The week's question, both directions. Same register as the chat panel: it is
   a stage panel, not an instrument. */
.week-panel {
  background: #241A11; border-radius: 14px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.week-panel .label {
  font: 600 8.5px/1 ui-monospace, monospace; color: rgba(251,247,241,.35);
  letter-spacing: .14em;
}
.week-body { display: flex; flex-direction: column; gap: 9px; }
.qtabs { display: flex; align-items: center; gap: 5px; }
.qtab {
  height: 22px; display: inline-flex; align-items: center; padding: 0 9px;
  border-radius: 7px; border: 1px solid rgba(251,247,241,.14);
  font: 700 9.5px/1 ui-monospace, monospace; color: rgba(251,247,241,.45);
  background: none; cursor: pointer;
}
.qtab.done { border-color: transparent; background: rgba(217,164,72,.14); color: #EFB95C; }
.qtab.on { border-color: rgba(232,131,107,.75); color: #FBF7F1; }
.qtab.on.done { color: #EFB95C; }
.qweek {
  margin-left: auto; font: 500 9.5px/1 Archivo, sans-serif;
  color: rgba(251,247,241,.35);
}
.qtext { font: 700 13.5px/1.35 "Schibsted Grotesk", sans-serif; color: #FBF7F1; }
.qopts { display: flex; gap: 6px; flex-wrap: wrap; }
.qopt {
  min-height: 28px; display: inline-flex; align-items: center; padding: 5px 11px;
  border-radius: 999px; border: 1px solid rgba(251,247,241,.15);
  font: 500 11px/1.3 Archivo, sans-serif; color: rgba(251,247,241,.7);
  background: none; cursor: pointer; text-align: left;
}
.qopt.on { border-color: transparent; background: #3A2A1B; color: #FBF7F1; font-weight: 700; }
.qopt:disabled { opacity: .4; cursor: default; }
.qverbs { display: flex; gap: 8px; align-items: center; }
.qsend, .qask {
  height: 32px; display: inline-flex; align-items: center; padding: 0 14px;
  border-radius: 999px; border: none; cursor: pointer;
  font: 700 11.5px/1 "Schibsted Grotesk", sans-serif;
}
.qsend { background: #B84226; color: #FBF7F1; }
.qask { background: #D9A448; color: #221812; }
.qsend:disabled, .qask:disabled {
  background: rgba(251,247,241,.07); color: rgba(251,247,241,.35); cursor: default;
}
.qwhy { font: 500 10px/1.45 Archivo, sans-serif; color: rgba(251,247,241,.4); }
.qduets { display: flex; flex-direction: column; gap: 6px; }
.qduet {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 9px; background: rgba(251,247,241,.04);
  border-left: 2px solid rgba(251,247,241,.15);
}
.qduet.revealed { border-left-color: #EFB95C; }
.qduet .qn {
  font: 700 9.5px/1 ui-monospace, monospace; color: rgba(251,247,241,.5);
  flex: none; width: 20px;
}
.qduet .who { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.qduet .cid { font: 600 11px/1.3 Archivo, sans-serif; color: rgba(251,247,241,.8); }
.qduet .bits { font: 500 10px/1.35 Archivo, sans-serif; color: rgba(251,247,241,.55); }
.qduet .band {
  font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .1em;
  color: rgba(251,247,241,.35); flex: none;
}
.qduet.revealed .band { color: #EFB95C; }

.chat-panel {
  flex: 1; background: #241A11; border-radius: 14px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 9px; min-height: 160px;
}
.chat-panel .label { font: 600 8.5px/1 ui-monospace, monospace; color: rgba(251,247,241,.35); letter-spacing: .14em; }
.chat-log { display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; }
.bubble { max-width: 70%; padding: 8px 11px; font: 500 11.5px/1.4 Archivo, sans-serif; }
.bubble.mine {
  align-self: flex-end; background: #3A2A1B; border-radius: 12px 12px 3px 12px; color: #FBF7F1;
}
.bubble.theirs {
  align-self: flex-start; background: rgba(251,247,241,.06); border-radius: 12px 12px 12px 3px; color: rgba(251,247,241,.8);
}
.quick-replies { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-reply {
  height: 24px; display: inline-flex; align-items: center; padding: 0 10px;
  border-radius: 999px; border: 1px solid rgba(251,247,241,.15);
  font: 500 10px/1 Archivo, sans-serif; color: rgba(251,247,241,.6);
  background: none; cursor: pointer;
}
.composer { display: flex; gap: 8px; align-items: center; }
.composer input {
  flex: 1; height: 34px; border-radius: 999px; background: rgba(251,247,241,.06);
  border: none; padding: 0 13px; font: 500 11px/1 Archivo, sans-serif; color: #FBF7F1;
}
.composer input::placeholder { color: rgba(251,247,241,.35); }
.composer .send {
  height: 34px; display: inline-flex; align-items: center; padding: 0 15px;
  border-radius: 999px; background: #D9A448; border: none; cursor: pointer;
  font: 700 11.5px/1 "Schibsted Grotesk", sans-serif; color: #221812;
}

/* --- Instrument rail --------------------------------------------------- */

.instruments {
  width: 308px; flex: none; border-left: 1px solid rgba(251,247,241,.08);
  display: flex; flex-direction: column; padding: 14px; gap: 12px;
  box-sizing: border-box; overflow-y: auto; min-height: 0;
}
.eventlog { display: flex; flex-direction: column; gap: 5px; flex: 1; min-height: 80px; overflow-y: auto; }
.clock-presets, #gateway { flex-shrink: 0; }
.event-row { display: flex; gap: 7px; border-radius: 8px; padding: 7px 9px; }
.event-row .ts { font: 600 8.5px/1.5 ui-monospace, monospace; color: rgba(251,247,241,.35); flex: none; }
.event-row .msg { font: 500 9.5px/1.5 ui-monospace, monospace; color: rgba(251,247,241,.6); word-break: break-word; }
.event-row.push { background: rgba(93,168,110,.08); }
.event-row.push .msg { color: #7FC08F; }
.event-row.verb { background: rgba(251,247,241,.04); }
.event-row.intent { background: rgba(239,185,92,.08); }
.event-row.intent .msg { color: #EFB95C; }
.event-row.err { background: rgba(232,131,107,.08); }
.event-row.err .msg { color: #E8836B; }

.clock-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.preset {
  height: 26px; display: inline-flex; align-items: center; padding: 0 10px;
  border-radius: 8px; background: #2C2115; border: none;
  font: 600 10px/1 Archivo, sans-serif; color: #FBF7F1; cursor: pointer;
}
.preset.active { background: rgba(217,164,72,.2); border: 1px solid rgba(217,164,72,.4); color: #EFB95C; }
.preset.outline { background: none; border: 1px solid rgba(251,247,241,.15); color: rgba(251,247,241,.5); }
.preset:disabled { opacity: .4; cursor: default; }

.gateway-card {
  background: #241A11; border-radius: 12px; padding: 11px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.gateway-card .row { display: flex; align-items: center; gap: 8px; }
.gateway-card .iid { font: 600 10px/1 ui-monospace, monospace; color: #FBF7F1; flex: 1; }
.gateway-card .state { font: 700 8.5px/1 ui-monospace, monospace; color: #EFB95C; }
.behaviour-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.bchip {
  height: 22px; display: inline-flex; align-items: center; padding: 0 8px;
  border-radius: 6px; border: 1px solid rgba(251,247,241,.12); background: none;
  font: 600 9px/1 ui-monospace, monospace; color: rgba(251,247,241,.5); cursor: pointer;
}
.bchip.confirm_after_3s.active { background: rgba(93,168,110,.14); border-color: transparent; color: #7FC08F; }
.bchip.never_answer.active { background: rgba(239,185,92,.16); border-color: rgba(239,185,92,.4); color: #EFB95C; }
.bchip.decline.active,
.bchip.duplicate_callback.active,
.bchip.wrong_amount.active { background: rgba(232,131,107,.14); border-color: rgba(232,131,107,.4); color: #E8836B; }
.fire-callback {
  height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #D9A448; border: none; cursor: pointer;
  font: 700 10.5px/1 "Schibsted Grotesk", sans-serif; color: #221812;
}
.gateway-empty { font: 500 10.5px/1.5 Archivo, sans-serif; color: rgba(251,247,241,.35); }

/* --- Boards ------------------------------------------------------------
   The four dashboards (app ledger [137]) and the pairs board (V6). Same
   palette as the console; no new colors. Green means a charter target met,
   amber means short of it, and a rate with nothing to divide is grey. */

.viewswitch { display: flex; gap: 2px; background: rgba(251,247,241,.06); border-radius: 8px; padding: 2px; }
.viewswitch button {
  height: 22px; padding: 0 11px; border-radius: 6px; border: none; background: none;
  font: 600 10px/1 Archivo, sans-serif; color: rgba(251,247,241,.45); cursor: pointer;
}
.viewswitch button.active { background: rgba(217,164,72,.18); color: #EFB95C; }

.boards {
  height: calc(100vh - 52px - 32px); overflow-y: auto;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 11px;
  box-sizing: border-box;
}
.board-head { display: flex; align-items: baseline; gap: 12px; }
.board-built { font: 500 10px/1 ui-monospace, monospace; color: rgba(251,247,241,.35); }

/* --- Selfie review (ADR-0002) ------------------------------------------
   Same palette, no new colors: green is the grant, coral the refusal, the
   same pair the verb grid already uses. The empty half of every row is the
   selfie, and its dashed border is the point — it is a slot with nothing in
   it, not a face that failed to load. */

.review-note {
  font: 500 10.5px/1.6 Archivo, sans-serif; color: rgba(251,247,241,.5);
  background: rgba(251,247,241,.04); border-radius: 10px; padding: 9px 11px;
  margin: 0; max-width: 92ch;
}
.review-note b { color: rgba(251,247,241,.8); }
.review-result { font: 600 10px/1 ui-monospace, monospace; color: #7FC08F; }

.selfie-queue { display: flex; flex-direction: column; gap: 9px; padding-bottom: 8px; }
.srow {
  display: flex; flex-direction: column; gap: 10px;
  background: #241A11; border-radius: 14px; padding: 12px 14px;
}
.srow .swho { display: flex; align-items: baseline; gap: 10px; }
.srow .sname { font: 700 13px/1 "Schibsted Grotesk", sans-serif; color: #FBF7F1; }
.srow .suid {
  font: 600 10px/1 ui-monospace, monospace; color: rgba(251,247,241,.4); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srow .swaited {
  font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .12em; color: #EFB95C;
}

.sfaces { display: grid; grid-template-columns: 220px 1fr; gap: 10px; align-items: start; }
.sslot {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  background: rgba(251,247,241,.04); border-radius: 12px; padding: 9px 10px;
}
.sslot.selfie {
  background: none; border: 1px dashed rgba(251,247,241,.18); min-height: 132px;
}
/* Same 88x132 as a card photo, so the two sit at one scale and the reviewer
   compares faces rather than sizes. */
.sselfie img {
  width: 88px; height: 132px; object-fit: cover; border-radius: 8px;
  background: #2C2115;
}
.slabel {
  font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .14em;
  color: rgba(251,247,241,.35);
}
.sphotos { display: flex; gap: 6px; flex-wrap: wrap; }
.sphotos img {
  width: 88px; height: 132px; object-fit: cover; border-radius: 8px; background: #2C2115;
}
.sempty { font: 500 10.5px/1.5 Archivo, sans-serif; color: rgba(251,247,241,.35); }

.sverdicts { display: flex; align-items: center; gap: 8px; }
.sverdict {
  height: 30px; padding: 0 13px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 11.5px/1 Archivo, sans-serif;
}
.sverdict.yes { background: rgba(93,168,110,.16); border: 1px solid rgba(93,168,110,.45); color: #7FC08F; }
.sverdict.no { background: rgba(184,66,38,.14); border: 1px solid rgba(184,66,38,.5); color: #E8836B; }
.sverdict:disabled { opacity: .4; cursor: default; }
.sverdict .vraw {
  font: 600 8.5px/1 ui-monospace, monospace; letter-spacing: .08em; opacity: .6;
}
.serror { font: 500 10.5px/1.45 Archivo, sans-serif; color: #E8836B; }

/* --- Report queue ([515]/#223) -----------------------------------------
   The selfie board's row, minus the picture: a report has no artifact to
   look at, only words. Same palette, no new colors -- the reason is amber
   because it is the one thing on the row a reviewer is here to read. */

.report-queue { display: flex; flex-direction: column; gap: 9px; padding-bottom: 8px; }
.rrow {
  display: flex; flex-direction: column; gap: 7px;
  background: #241A11; border-radius: 14px; padding: 12px 14px;
}
.rwho { display: flex; align-items: baseline; gap: 9px; }
.rwho .rname { font: 700 13px/1 "Schibsted Grotesk", sans-serif; color: #FBF7F1; }
.rwho .rarrow {
  font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .14em;
  color: rgba(251,247,241,.35);
}
.rids { display: flex; gap: 9px; }
.rids .ruid {
  font: 600 10px/1 ui-monospace, monospace; color: rgba(251,247,241,.4);
  flex: 1 1 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rwhy { display: flex; align-items: baseline; gap: 10px; }
.rwhy .rreason {
  font: 600 11.5px/1.4 Archivo, sans-serif; color: #EFB95C; flex: 1;
}
.rwhy .rfiled {
  font: 700 8.5px/1 ui-monospace, monospace; letter-spacing: .12em;
  color: rgba(251,247,241,.4);
}
.ract { display: flex; align-items: center; gap: 8px; }
.rhandled {
  height: 30px; padding: 0 13px; border-radius: 8px; cursor: pointer;
  font: 700 11.5px/1 Archivo, sans-serif;
  background: rgba(93,168,110,.16); border: 1px solid rgba(93,168,110,.45);
  color: #7FC08F;
}
.rhandled:disabled { opacity: .4; cursor: default; }
.rerror { font: 500 10.5px/1.45 Archivo, sans-serif; color: #E8836B; }