/* Darint Staff Console — Program H2 Part E.

   Deliberately its own stylesheet and not a copy of the customer console's.
   Two reasons, and the second is the real one:

   1. This is a separate application; importing across the boundary would
      create the coupling the separation exists to avoid.
   2. **It should not look like the customer product.** Someone with both open
      should never be one glance away from thinking they are in the wrong one.
      The amber plane marker and the darker chrome are the difference, and they
      are load-bearing rather than decorative. */

:root {
  --bg: #0f1216;
  --panel: #161b22;
  --line: #262d36;
  --text: #e6edf3;
  --muted: #8b949e;
  /* Amber, not the product's blue: this is the operations plane. */
  --plane: #d29922;
  --danger: #f85149;
  --ok: #3fb950;
  --focus: #58a6ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--panel); color: var(--text); padding: 8px 12px;
}
.skip-link:focus { left: 8px; top: 8px; z-index: 10; }

/* A visible focus ring everywhere. An operations console is used by keyboard
   more than most, and WCAG 2.4.7 is not optional because the audience is
   internal. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.plane {
  display: inline-block;
  color: var(--plane);
  border: 1px solid var(--plane);
  border-radius: 3px;
  padding: 1px 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Sign-in ─────────────────────────────────────────────────────────────── */

.signin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.signin .card { max-width: 460px; width: 100%; }
.signin h1 { margin: 12px 0 8px; font-size: 22px; }

/* ── Chrome ──────────────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 2px solid var(--plane);
}
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
}
.topbar nav a:hover { color: var(--text); background: #1f262e; }
.topbar nav a[aria-current="page"] { color: var(--text); background: #1f262e; }
.spacer { flex: 1; }

main { padding: 24px; max-width: 1200px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 0 0 12px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
}

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.is-hidden { display: none; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.tool-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-wide { flex: 1; min-width: 240px; }
label { font-size: 13px; color: var(--muted); }
input, select {
  background: #0d1117;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 4px;
  padding: 8px 10px;
  font: inherit;
}

.btn {
  background: var(--focus);
  color: #04121f;
  border: 0;
  border-radius: 4px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); color: #1a0505; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The confirmation block is amber-edged because it is the moment before a
   change that reaches every tenant. */
.confirm {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--plane);
  border-radius: 4px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.status { margin-top: 10px; min-height: 20px; font-size: 14px; }
.status.error { color: var(--danger); }
.status.ok { color: var(--ok); }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th { color: var(--muted); font-weight: 600; font-size: 13px; }

.pager { display: flex; gap: 12px; align-items: center; margin-top: 12px; }

/* ── Tiles ───────────────────────────────────────────────────────────────── */

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tiles-spaced { margin-top: 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.tile-label { color: var(--muted); font-size: 13px; }
.tile-value { font-size: 24px; font-weight: 600; margin-top: 4px; }

/* ═══ The Staff Control Plane — Program H3 ═══════════════════════════════════

   Additive. Nothing above this line changed: the amber plane marker, the dark
   chrome and the deliberate un-likeness to the customer product are load-
   bearing (see the header of this file) and H3 does not soften them.

   What is added is what nine destinations and eight tabs need that four panels
   did not — a grouped nav, a command bar, tabs, meters, fact lists, a modal
   that demands a reason, and a danger zone that does not look like navigation.
   Dense on purpose: an operator wants information per screenful, not air. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

.mainnav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 8px 20px;
  background: #12171d;
  border-bottom: 1px solid var(--line);
}
.mainnav a {
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 14px;
}
.mainnav a:hover { color: var(--text); background: #1f262e; }
.mainnav a[aria-current="page"] {
  color: var(--text);
  background: #1f262e;
  box-shadow: inset 0 -2px 0 var(--plane);
}
/* A group label, not a link. `aria-hidden` in the markup because the grouping
   is visual: a screen reader gets one flat list of destinations, which is the
   more useful shape when every item is one word. */
.navgroup {
  color: #5c6672;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 8px 0 16px;
  border-left: 1px solid var(--line);
  margin-left: 8px;
}

/* ── The command bar ────────────────────────────────────────────────────── */

.command-bar { display: flex; gap: 6px; align-items: center; }
.command-bar input {
  min-width: 280px;
  background: #0d1117;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 10px;
  font: inherit;
}

.search-results {
  position: absolute;
  right: 20px;
  z-index: 20;
  margin-top: 4px;
  max-width: 520px;
  max-height: 70vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--plane);
  border-radius: 6px;
  padding: 14px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.search-group h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 12px 0 6px;
}
.search-group ul { list-style: none; margin: 0; padding: 0; }
.search-group li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.search-results a { color: var(--focus); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */

.tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  padding: 8px 14px;
  cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-bottom-color: var(--plane); }

/* ── Facts, tiles, pills ────────────────────────────────────────────────── */

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  margin: 0;
}
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; }

.tile-hint { color: var(--muted); font-size: 11px; margin-top: 4px; }

.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.pill.is-ok     { color: var(--ok);     border-color: var(--ok); }
.pill.is-danger { color: var(--danger); border-color: var(--danger); }
.pill.is-near   { color: var(--plane);  border-color: var(--plane); }

/* ── Meters ─────────────────────────────────────────────────────────────── */

/* Used against a limit. `is-uncapped` is a distinct state and not a full bar:
   "unlimited" and "nothing left" are opposite facts, and a progress bar that
   cannot tell them apart is worse than no bar. */
.meter { margin: 12px 0; }
.meter-head { display: flex; justify-content: space-between; font-size: 13px; }
.meter-track {
  height: 8px; background: #0d1117; border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden; margin-top: 4px;
}
.meter-fill { height: 100%; background: var(--ok); width: 0; }
.meter-fill.is-near { background: var(--plane); }
.meter-fill.is-over { background: var(--danger); }
.meter-fill.is-uncapped {
  width: 100%;
  background: repeating-linear-gradient(
    90deg, var(--line) 0 6px, transparent 6px 12px);
}
.meter-hint { font-size: 12px; margin-top: 4px; }

/* ── The chain that explains access ─────────────────────────────────────── */

.chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chain-step {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 12px; min-width: 110px;
}
.chain-value { font-size: 15px; font-weight: 600; }
.chain-arrow { color: var(--muted); }

/* ── Alerts ─────────────────────────────────────────────────────────────── */

.alert-group { margin-bottom: 16px; }
.alert-group h3 { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.alert-list { list-style: none; margin: 0; padding: 0; }
.alert-list li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.alert-list a { color: var(--focus); }

.check-row { display: flex; gap: 20px; flex-wrap: wrap; }

/* ── Sensitive actions ──────────────────────────────────────────────────── */

/* A danger zone must not look like navigation. Red edge, its own block, and
   nothing in it is one click from a destructive result — every action here
   opens the modal below and refuses to proceed without a typed reason. */
.danger-zone { border-color: var(--danger); }
.danger-zone h2 { color: var(--danger); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.modal-host {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  display: grid; place-items: center; padding: 20px;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--plane);
  border-radius: 6px;
  padding: 24px;
  max-width: 520px; width: 100%;
}
.modal h2 { margin-top: 0; }
.modal-summary { font-size: 14px; margin-bottom: 16px; }
.modal-summary p { margin: 0 0 8px; }
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px;
}

/* ── Density ────────────────────────────────────────────────────────────── */

main { max-width: 1400px; }
h3 { font-size: 13px; margin: 16px 0 8px; color: var(--muted);
     text-transform: uppercase; letter-spacing: 0.06em; }
td a { color: var(--focus); }
.tab-panel[hidden] { display: none; }

/* ── Blockchain support matrix ────────────────────────────────────────────
   One column per capability, one row per chain, read from the API's own
   catalogue. Colour carries no meaning a screen reader would miss: the cell
   text is ✓ or —, and the tick is the fact. */
.cap-yes { color: var(--ok); }
.cap-no  { color: var(--muted); }