/* RouteSeam platform admin console.
   Implements design-system templates/platform-admin/*.dc.html.

   Everything here is namespaced `.rsa-*` (RouteSeam Admin) and consumes the
   canonical tokens from routeseam_tokens.css — no hand-typed hex values.
   The console is denser than the customer app (13px base, 20px pills,
   31px nav rows), which is the one place the design system sanctions
   "utility over polish, density over beauty". */

/* ─────────────────────────────── shell ─────────────────────────────── */

.rsa {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: var(--rm-font-sans);
  font-size: 14px;
  line-height: 22px;
}

.rsa-side {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-right: 1px solid var(--rm-border);
  background: var(--rm-bg);
}

.rsa-side__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 17px 16px 15px;
  color: inherit;
  text-decoration: none;
}

.rsa-brand__mark {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
}

.rsa-auth__brand .rsa-brand__mark {
  width: 26px;
  height: 26px;
}

.rsa-brand__name {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rsa-brand__badge {
  padding: 2px 6px;
  border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius-pill);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rm-text-secondary);
}

.rsa-side__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  padding: 6px 10px 16px;
  overflow-y: auto;
}

.rsa-navgroup {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rsa-navgroup--foot { margin-top: auto; }

.rsa-navgroup__label {
  padding: 0 10px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--rm-text-tertiary);
}

.rsa-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 31px;
  padding: 0 10px;
  border-radius: var(--rm-radius-control);
  background: transparent;
  color: var(--rm-text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--rm-slow) var(--rm-ease), color var(--rm-slow) var(--rm-ease);
}

.rsa-nav:hover {
  background: var(--rm-bg-hover);
  color: var(--rm-text);
}

/* Current section reads as selected, not as an accent — mint stays reserved
   for success. The design uses the hover surface plus white text. */
.rsa-nav--current,
.rsa-nav--current:hover {
  background: var(--rm-bg-hover);
  color: var(--rm-text);
}

.rsa-nav__count {
  min-width: 18px;
  margin-left: auto;
  padding: 0 5px;
  border: 1px solid var(--rm-amber-subtle-border);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-amber-subtle-bg);
  font-family: var(--rm-font-mono);
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  color: var(--rm-amber);
}

.rsa-nav--quiet {
  height: 28px;
  font-size: 13px;
  font-weight: 400;
  color: var(--rm-text-tertiary);
}

.rsa-nav--quiet:hover {
  background: transparent;
  color: var(--rm-text-secondary);
}

.rsa-side__foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-top: 1px solid var(--rm-border);
}

.rsa-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rsa-who__email {
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rsa-who__out {
  width: max-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rm-text-tertiary);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.rsa-who__out:hover { color: var(--rm-red); }

/* `button_to` log-out form must not disturb the footer row. */
.rsa-side__foot form { display: block; margin: 0; }

.rsa-main { min-width: 0; }

.rsa-top {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 57px;
  padding: 0 var(--rm-page-pad);
  border-bottom: 1px solid var(--rm-border);
  background: rgb(0 0 0 / 88%);
  backdrop-filter: blur(10px);
}

.rsa-top__search {
  position: relative;
  flex: 1;
  max-width: 520px;
  margin: 0;
}

.rsa-top__input {
  width: 100%;
  height: 34px;
  padding: 0 46px 0 12px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-control);
  background: var(--rm-bg-elevated);
  color: var(--rm-text);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color var(--rm-slow) var(--rm-ease);
}

.rsa-top__input:hover { border-color: var(--rm-border-hover); }
.rsa-top__input:focus { border-color: var(--rm-border-strong); outline: none; }
.rsa-top__input:focus-visible { outline: 2px solid var(--rm-mint); outline-offset: 2px; }

.rsa-top__kbd {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--rm-border-hover);
  border-radius: 4px;
  font-family: var(--rm-font-mono);
  font-size: 11px;
  color: var(--rm-text-tertiary);
}

.rsa-top__edge {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-bg-raised);
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--rm-slow) var(--rm-ease);
}

.rsa-top__edge:hover { border-color: var(--rm-border-strong); }

.rsa-top__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-mint);
}

.rsa-top__dot--pending { background: var(--rm-amber); }
.rsa-top__dot--suspended { background: var(--rm-gray); }

.rsa-top__clock {
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-tertiary);
  white-space: nowrap;
}

.rsa-body { padding: 28px var(--rm-page-pad) 56px; }

/* ─────────────────────────────── flash ─────────────────────────────── */

.rsa-flash {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px var(--rm-page-pad) -8px;
  padding: 11px 14px;
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  background: var(--rm-bg-raised);
  animation: rsa-in 160ms var(--rm-ease) both;
}

.rsa-flash--ok {
  border-color: var(--rm-mint-subtle-border);
  background: var(--rm-mint-subtle-bg);
}

.rsa-flash--err {
  border-color: var(--rm-red-subtle-border);
  background: var(--rm-red-subtle-bg);
}

.rsa-flash__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--rm-radius-pill);
}

.rsa-flash--ok .rsa-flash__dot { background: var(--rm-mint); }
.rsa-flash--err .rsa-flash__dot { background: var(--rm-red); }

.rsa-flash__text {
  font-size: 13.5px;
  color: var(--rm-text);
}

.rsa-flash__close {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rm-text-tertiary);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.rsa-flash__close:hover { color: var(--rm-text-secondary); }

@keyframes rsa-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ──────────────────────────── page furniture ───────────────────────── */

.rsa-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rsa-page--tight { gap: 18px; }

.rsa-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.rsa-head--top { align-items: flex-start; }

.rsa-head__titles { min-width: 0; }

.rsa-h1 {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Hostnames are technical artifacts even when they are the page title. */
.rsa-h1--mono {
  font-family: var(--rm-font-mono);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.rsa-lede {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--rm-text-secondary);
}

.rsa-head__meta {
  margin-left: auto;
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-tertiary);
  white-space: nowrap;
}

.rsa-head__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.rsa-idline {
  margin: 11px 0 0;
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-tertiary);
  overflow-wrap: anywhere;
}

.rsa-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12.5px;
  color: var(--rm-text-tertiary);
}

.rsa-crumbs a {
  color: var(--rm-text-tertiary);
  text-decoration: none;
}

.rsa-crumbs a:hover { color: var(--rm-text-secondary); }
.rsa-crumbs__here { color: var(--rm-text-secondary); }
.rsa-crumbs__here--mono { font-family: var(--rm-font-mono); font-size: 12px; }

.rsa-titleblock {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rsa-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.rsa-tags__note {
  font-size: 12.5px;
  color: var(--rm-text-secondary);
}

/* ───────────────────────────── containers ──────────────────────────── */

.rsa-card {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-card);
  background: var(--rm-bg-raised);
}

.rsa-card--pad { padding: 16px 20px 18px; }
.rsa-card--clip { overflow: hidden; }
.rsa-card--warn { border-color: var(--rm-amber-subtle-border); }
.rsa-card--danger { border-color: var(--rm-red-subtle-border); }

.rsa-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--rm-border);
}

.rsa-card__title {
  margin: 0;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.rsa-card__head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.rsa-card__lede {
  margin: 0;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--rm-text-secondary);
}

.rsa-card__title--danger { color: var(--rm-red); }

.rsa-card__count,
.rsa-card__aside {
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-tertiary);
}

.rsa-card__aside { margin-left: auto; }

.rsa-card__link {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--rm-mint);
  text-decoration: none;
}

.rsa-card__link:hover { color: var(--rm-mint-hover); }

.rsa-card__body { padding: 16px 20px 18px; }
.rsa-card__body > .rsa-kpi__lead { margin: 0; }

.rsa-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.rsa-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.rsa-grid-2 > * { min-width: 0; }

.rsa-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Detail screens: main column plus a fixed operator rail. */
.rsa-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 424px;
  gap: 16px;
  align-items: start;
}

.rsa-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.rsa-subhead {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--rm-text-tertiary);
}

.rsa-rule {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rm-border);
}

@media (max-width: 1240px) {
  .rsa-split { grid-template-columns: minmax(0, 1fr); }
  .rsa-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────────────────────────── stat cards ──────────────────────────── */

.rsa-kpi {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-card);
  background: var(--rm-bg-raised);
  padding: 17px 20px 16px;
}

.rsa-kpi--warn { border-color: var(--rm-amber-subtle-border); }

.rsa-kpi__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--rm-text-tertiary);
}

.rsa-kpi__lead {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 11px 0 14px;
}

.rsa-kpi__value {
  font-size: 27px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  color: inherit;
}

.rsa-kpi__value--warn { color: var(--rm-amber); }
a.rsa-kpi__value--warn:hover { color: #e5bb62; }

.rsa-kpi__unit {
  font-size: 12.5px;
  color: var(--rm-text-secondary);
}

.rsa-kpi__rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12.5px;
}

.rsa-kpi__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rsa-kpi__k { color: var(--rm-text-secondary); }

.rsa-kpi__v {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}

a.rsa-kpi__v { color: var(--rm-mint); }
a.rsa-kpi__v:hover { color: var(--rm-mint-hover); }

.rsa-kpi__v--warn { color: var(--rm-amber); }
.rsa-kpi__v--bad { color: var(--rm-red); font-weight: 600; }
a.rsa-kpi__v--bad:hover { color: #f06d71; }
.rsa-kpi__v--mono { font-family: var(--rm-font-mono); font-size: 12px; font-weight: 400; }

/* Sparkline: pure CSS bars, no chart library on an internal page. */
.rsa-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
}

.rsa-spark__bar {
  width: 4px;
  border-radius: 1px;
  background: rgb(62 207 142 / 26%);
}

.rsa-spark__bar--mid { background: rgb(62 207 142 / 40%); }
.rsa-spark__bar--now { background: var(--rm-mint); }

/* ─────────────────────────────── tables ────────────────────────────── */

.rsa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rsa-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rm-border);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-align: left;
  color: var(--rm-text-tertiary);
  white-space: nowrap;
}

.rsa-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--rm-bg-hover);
  vertical-align: middle;
}

/* Row labels are <th scope="row">; they must read as body cells, not column headers. */
.rsa-table tbody th {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--rm-text);
  white-space: nowrap;
  border-bottom: 1px solid var(--rm-bg-hover);
}

.rsa-table tbody tr:last-child td,
.rsa-table tbody tr:last-child th { border-bottom: 0; }

.rsa-table th:first-child,
.rsa-table td:first-child { padding-left: 20px; }

.rsa-table th:last-child,
.rsa-table td:last-child { padding-right: 20px; }

.rsa-table__num {
  width: 1%;
  text-align: right;
  font-family: var(--rm-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rsa-table__r { text-align: right; }

.rsa-table tbody th.rsa-table__wrap { white-space: normal; }

.rsa-table__wrap {
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.rsa-table__stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rsa-card__body .rsa-defs { margin-top: 0; }
.rsa-card__body .rsa-hint { margin-top: 12px; }

.rsa-table tbody tr.rsa-rowlink {
  cursor: pointer;
  transition: background var(--rm-slow) var(--rm-ease);
}

.rsa-table tbody tr.rsa-rowlink:hover { background: var(--rm-bg-hover); }

.rsa-cellstack {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rsa-cellstack__sub,
.rsa-subtext {
  display: block;
  font-family: var(--rm-font-mono);
  font-size: 11px;
  color: var(--rm-text-tertiary);
}

.rsa-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1px solid var(--rm-border-hover);
  border-radius: var(--rm-radius-control);
  background: var(--rm-bg-elevated);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--rm-text-secondary);
}

.rsa-avatar--round {
  width: 40px;
  height: 40px;
  border-radius: var(--rm-radius-pill);
  font-size: 13px;
}

.rsa-avatar--sm {
  width: 26px;
  height: 26px;
  border-radius: var(--rm-radius-pill);
}

/* Grid-shaped row lists. Each usage sets --cols inline, which keeps the
   column template next to the data it describes instead of spawning a
   modifier class per screen. */
.rsa-rows { display: flex; flex-direction: column; }

.rsa-rows__head,
.rsa-rows__row {
  display: grid;
  grid-template-columns: var(--cols, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  padding: 10px 20px;
}

.rsa-rows__head {
  border-bottom: 1px solid var(--rm-border);
  padding: 9px 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--rm-text-tertiary);
}

.rsa-rows__row {
  border-bottom: 1px solid var(--rm-bg-hover);
  font-size: 12.5px;
  color: var(--rm-text);
  text-decoration: none;
}

.rsa-rows__row:last-child { border-bottom: 0; }

a.rsa-rows__row,
.rsa-rows__row--hover {
  transition: background var(--rm-slow) var(--rm-ease);
}

a.rsa-rows__row:hover,
.rsa-rows__row--hover:hover { background: var(--rm-bg-hover); }

.rsa-rows__row--live { background: rgb(62 207 142 / 4%); }

.rsa-tfoot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-top: 1px solid var(--rm-border);
}

.rsa-tfoot__count {
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-tertiary);
}

.rsa-tfoot__nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* ────────────────────────────── log rows ───────────────────────────── */

.rsa-log { display: flex; flex-direction: column; }

.rsa-log__row {
  display: grid;
  grid-template-columns: var(--cols, 158px minmax(0, 1fr));
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rm-bg-hover);
  font-size: 12.5px;
}

.rsa-log__row:last-child { border-bottom: 0; }

.rsa-log__time {
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-tertiary);
  white-space: nowrap;
}

.rsa-log__who {
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-secondary);
}

.rsa-log__what { overflow-wrap: anywhere; }

.rsa-log__meta {
  display: block;
  font-family: var(--rm-font-mono);
  font-size: 11px;
  color: var(--rm-text-tertiary);
  overflow-wrap: anywhere;
}

/* ─────────────────────────────── pills ─────────────────────────────── */

.rsa-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--rm-border-hover);
  border-radius: var(--rm-radius-pill);
  background: var(--rm-bg-elevated);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--rm-text-secondary);
}

.rsa-pill--lg { height: 21px; }

.rsa-pill__dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--rm-radius-pill);
  background: currentcolor;
}

/* The only looping animation in the console (design-system motion spec). */
.rsa-pill__dot--pulse { animation: rsa-dot 1.6s ease-in-out infinite; }

@keyframes rsa-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

.rsa-pill--active {
  border-color: var(--rm-mint-subtle-border);
  background: var(--rm-mint-subtle-bg);
  color: var(--rm-mint);
}

.rsa-pill--pending {
  border-color: var(--rm-amber-subtle-border);
  background: var(--rm-amber-subtle-bg);
  color: var(--rm-amber);
}

.rsa-pill--failed {
  border-color: var(--rm-red-subtle-border);
  background: var(--rm-red-subtle-bg);
  color: var(--rm-red);
}

.rsa-pill--suspended {
  border-color: var(--rm-border-hover);
  background: var(--rm-bg-elevated);
  color: var(--rm-text-secondary);
}

.rsa-pill--info {
  border-color: rgb(62 191 207 / 30%);
  background: rgb(62 191 207 / 8%);
  color: #3ebfcf;
}

.rsa-pill--count {
  height: 28px;
  padding: 0 11px;
  gap: 7px;
  font-size: 12.5px;
}

.rsa-pill__sub {
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-secondary);
}

/* ────────────────────────────── buttons ────────────────────────────── */

.rsa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-control);
  background: var(--rm-bg-raised);
  color: var(--rm-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--rm-slow) var(--rm-ease), border-color var(--rm-slow) var(--rm-ease);
}

.rsa-btn:hover {
  background: var(--rm-bg-hover);
  border-color: var(--rm-border-strong);
}

.rsa-btn--primary {
  border: 0;
  background: var(--rm-mint);
  color: var(--rm-on-accent);
  font-weight: 600;
  padding: 0 13px;
  transition: background var(--rm-fast) var(--rm-ease);
}

.rsa-btn--primary:hover { background: var(--rm-mint-hover); }

.rsa-btn--danger {
  border-color: var(--rm-red-subtle-border);
  background: var(--rm-red-subtle-bg);
  color: var(--rm-red);
  font-weight: 600;
  padding: 0 13px;
}

.rsa-btn--danger:hover {
  background: rgb(229 72 77 / 16%);
  border-color: var(--rm-red-subtle-border);
}

.rsa-btn--sm {
  height: 28px;
  padding: 0 11px;
  font-size: 12.5px;
}

.rsa-btn--pillish {
  height: 28px;
  padding: 0 11px;
  border-radius: var(--rm-radius-pill);
  font-size: 12px;
}

.rsa-btn--on {
  border-color: var(--rm-mint-subtle-border);
  background: var(--rm-mint-subtle-bg);
  color: var(--rm-mint);
}

.rsa-btn--on:hover {
  background: rgb(62 207 142 / 16%);
  border-color: var(--rm-mint-subtle-border);
}

.rsa-btn--off {
  border-color: var(--rm-border-hover);
  background: var(--rm-bg-elevated);
  color: var(--rm-text-secondary);
}

.rsa-btn--off:hover {
  background: var(--rm-bg-elevated);
  border-color: var(--rm-border-strong);
  color: var(--rm-text);
}

.rsa-btn[disabled],
.rsa-btn--muted {
  color: var(--rm-text-tertiary);
  cursor: not-allowed;
}

.rsa-btn[disabled]:hover,
.rsa-btn--muted:hover {
  background: var(--rm-bg-raised);
  border-color: var(--rm-border);
}

/* `button_to` wraps each button in its own form; these rows keep that
   invisible so the buttons sit where the design puts them. */
.rsa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rsa-actions form { display: inline-flex; margin: 0; }

.rsa-actions--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.rsa-actions--stack form { display: block; }

.rsa-actions--stack .rsa-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.rsa-actions--stack .rsa-btn--primary,
.rsa-actions--stack .rsa-btn--danger { justify-content: flex-start; }

/* ─────────────────────────────── forms ────────────────────────────── */

.rsa-input,
.rsa-select,
.rsa-textarea {
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-control);
  background: var(--rm-bg-elevated);
  color: var(--rm-text);
  font-family: inherit;
  font-size: 13px;
  transition: border-color var(--rm-slow) var(--rm-ease);
}

.rsa-input:hover,
.rsa-select:hover,
.rsa-textarea:hover { border-color: var(--rm-border-hover); }

.rsa-input:focus,
.rsa-select:focus,
.rsa-textarea:focus { border-color: var(--rm-border-strong); outline: none; }

.rsa-input:focus-visible,
.rsa-select:focus-visible,
.rsa-textarea:focus-visible { outline: 2px solid var(--rm-mint); outline-offset: 2px; }

.rsa-input--mono { font-family: var(--rm-font-mono); font-size: 12.5px; }
.rsa-input--w { width: 268px; }
.rsa-input--wsm { width: 220px; }
.rsa-input--tall { height: 34px; font-size: 13.5px; }

.rsa-select { padding: 0 9px; color: var(--rm-text-secondary); cursor: pointer; }
.rsa-select--value { color: var(--rm-text); }

.rsa-textarea {
  height: auto;
  padding: 9px 11px;
  line-height: 20px;
  resize: vertical;
}

.rsa-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rsa-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rm-text-secondary);
}

.rsa-hint {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--rm-text-tertiary);
}

.rsa-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.rsa-filters__spacer { margin-left: auto; }

.rsa-inline-form {
  display: flex;
  gap: 8px;
  margin: 0;
}

/* ──────────────────────── definition / key-value ───────────────────── */

.rsa-defs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
  font-size: 12.5px;
}

.rsa-def {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.rsa-def__k { color: var(--rm-text-secondary); }

.rsa-def__v {
  text-align: right;
  overflow-wrap: anywhere;
}

.rsa-def__v--mono { font-family: var(--rm-font-mono); font-size: 12px; }

.rsa-kv {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  font-size: 12.5px;
}

.rsa-kv__k { color: var(--rm-text-tertiary); }
.rsa-kv__v { overflow-wrap: anywhere; }

.rsa-kvlist {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 13px;
}

.rsa-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  font-size: 12.5px;
}

.rsa-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rsa-fact__k {
  font-size: 11.5px;
  color: var(--rm-text-tertiary);
}

.rsa-fact__v { font-family: var(--rm-font-mono); }

/* ──────────────────────── progress and usage ───────────────────────── */

.rsa-progress {
  display: block;
  height: 6px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-border);
  overflow: hidden;
}

.rsa-progress__fill {
  display: block;
  height: 100%;
  background: var(--rm-mint);
}

.rsa-progress__fill--warn { background: var(--rm-amber); }
.rsa-progress__fill--over { background: var(--rm-red); }
.rsa-progress__fill--idle { background: var(--rm-gray); }

.rsa-usage {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rsa-usage .rsa-progress {
  width: 80px;
  height: 4px;
  flex: none;
}

.rsa-usage__caption {
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-secondary);
  white-space: nowrap;
}

.rsa-usage__caption--over { color: var(--rm-red); }
.rsa-usage__caption--idle { color: var(--rm-text-tertiary); }

.rsa-bigusage {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}

.rsa-bigusage__value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.rsa-bigusage__unit {
  font-size: 12.5px;
  color: var(--rm-text-secondary);
}

/* ─────────────────────────── notes / banners ───────────────────────── */

.rsa-note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  background: var(--rm-bg-raised);
}

.rsa-note--warn {
  border-color: var(--rm-amber-subtle-border);
  background: var(--rm-amber-subtle-bg);
}

.rsa-note--danger {
  border-color: var(--rm-red-subtle-border);
  background: var(--rm-red-subtle-bg);
}

.rsa-note__dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-text-secondary);
}

.rsa-note--warn .rsa-note__dot { background: var(--rm-amber); }
.rsa-note--danger .rsa-note__dot { background: var(--rm-red); }

.rsa-note__body {
  font-size: 13px;
  line-height: 20px;
  color: var(--rm-text);
}

.rsa-note__meta {
  display: block;
  margin-top: 3px;
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-secondary);
}

.rsa-note--inset {
  margin-top: 12px;
  padding: 11px 12px;
  font-size: 12.5px;
}

.rsa-note--inset .rsa-note__body { font-size: 12.5px; line-height: 19px; }

.rsa-quote {
  margin: 14px 0 0;
  padding: 12px 13px;
  border: 1px solid var(--rm-border);
  border-radius: 8px;
  background: var(--rm-bg);
  font-size: 12.5px;
  line-height: 20px;
  color: var(--rm-text-secondary);
  text-wrap: pretty;
  white-space: pre-wrap;
}

/* Danger strip: one destructive action with its consequence spelled out. */
.rsa-danger {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--rm-red-subtle-border);
  border-radius: var(--rm-radius-card);
  background: var(--rm-bg-raised);
}

.rsa-danger__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--rm-red);
}

.rsa-danger__body {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--rm-text-secondary);
}

.rsa-danger__action { margin-left: auto; }
.rsa-danger__action form { margin: 0; }

.rsa-zone__lede {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--rm-text-secondary);
}

/* ───────────────────────── flag rows (features) ────────────────────── */

.rsa-flag {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
}

.rsa-flag + .rsa-flag {
  padding-top: 14px;
  border-top: 1px solid var(--rm-border);
}

.rsa-flag__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.rsa-flag__name {
  font-family: var(--rm-font-mono);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--rm-text-secondary);
}

.rsa-flag__desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--rm-text-secondary);
}

.rsa-flag__action { margin-left: auto; }
.rsa-flag__action form { margin: 0; }

/* ───────────────────────── edge sync hero ──────────────────────────── */

.rsa-hero {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-card);
  background: var(--rm-bg-raised);
  padding: 30px 32px 28px;
}

.rsa-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
}

.rsa-hero__word {
  display: block;
  font-size: 76px;
  line-height: 78px;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.rsa-hero__word--ok { color: var(--rm-mint); }
.rsa-hero__word--warn { color: var(--rm-amber); }

.rsa-hero__word--down {
  font-size: 60px;
  line-height: 66px;
  color: var(--rm-red);
}

.rsa-hero__line {
  margin: 10px 0 0;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--rm-text-secondary);
  text-wrap: pretty;
}

.rsa-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 34px;
  margin-left: auto;
}

.rsa-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rsa-hero__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--rm-text-tertiary);
}

.rsa-hero__value {
  font-family: var(--rm-font-mono);
  font-size: 17px;
  font-weight: 500;
}

.rsa-hero__value--ok { color: var(--rm-mint); }
.rsa-hero__value--warn { color: var(--rm-amber); }
.rsa-hero__value--bad { color: var(--rm-red); }

.rsa-pops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 13px;
  font-family: var(--rm-font-mono);
  font-size: 12px;
}

.rsa-pop {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rsa-pop__dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--rm-radius-pill);
  background: var(--rm-mint);
}

.rsa-pop__dot--warn { background: var(--rm-amber); }
.rsa-pop__dot--bad { background: var(--rm-red); }

.rsa-popnote {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--rm-border);
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  line-height: 18px;
  color: var(--rm-text-tertiary);
}

/* ───────────────────────── empty and code ──────────────────────────── */

.rsa-empty {
  padding: 30px 20px 34px;
  text-align: center;
}

.rsa-empty--bare { padding: 22px 20px; text-align: left; }

.rsa-empty__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.rsa-empty__body {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--rm-text-secondary);
}

.rsa-code {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--rm-radius-card);
  background: var(--rm-bg);
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  line-height: 18px;
  color: var(--rm-text-secondary);
  overflow: auto;
  max-height: 460px;
}

/* ─────────────────────────── confirm dialog ────────────────────────── */

.rsa-dialog {
  width: 100%;
  max-width: 452px;
  padding: 22px 22px 18px;
  border: 1px solid var(--rm-border-hover);
  border-radius: var(--rm-radius-card);
  background: var(--rm-bg-elevated);
  color: var(--rm-text);
  font-family: var(--rm-font-sans);
}

.rsa-dialog::backdrop { background: rgb(0 0 0 / 72%); }

.rsa-dialog[open] { animation: rsa-dialog 160ms var(--rm-ease) both; }

@keyframes rsa-dialog {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

.rsa-dialog__title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rsa-dialog__body {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--rm-text-secondary);
  text-wrap: pretty;
}

.rsa-dialog__audit {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-control);
  background: var(--rm-bg-raised);
  font-size: 12.5px;
  line-height: 19px;
  color: var(--rm-text-tertiary);
}

.rsa-dialog__audit code {
  font-family: var(--rm-font-mono);
  color: var(--rm-text-secondary);
}

.rsa-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* ───────────────────────────── utilities ───────────────────────────── */

.rsa-mono { font-family: var(--rm-font-mono); font-size: 12px; }
.rsa-mono--sm { font-family: var(--rm-font-mono); font-size: 11.5px; }
.rsa-muted { color: var(--rm-text-secondary); }
.rsa-dim { color: var(--rm-text-tertiary); }
.rsa-ok { color: var(--rm-mint); }
.rsa-warn { color: var(--rm-amber); }
.rsa-bad { color: var(--rm-red); }
.rsa-strong { font-weight: 600; }
.rsa-break { overflow-wrap: anywhere; }

.rsa-link { color: var(--rm-mint); text-decoration: none; }
.rsa-link:hover { color: var(--rm-mint-hover); }

.rsa-link--plain { color: var(--rm-text); text-decoration: none; }
.rsa-link--plain:hover { text-decoration: underline; }

.rsa-errors {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--rm-red-subtle-border);
  border-radius: 8px;
  background: var(--rm-red-subtle-bg);
  font-size: 13px;
}

.rsa-errors ul { margin: 6px 0 0; padding-left: 18px; color: var(--rm-text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .rsa-pill__dot--pulse { animation: none; }
  .rsa-flash,
  .rsa-dialog[open] { animation: none; }
}

/* ──────────────────────── auth screens (no shell) ───────────────────────
   Design: templates/platform-admin/AdminSignIn.dc.html and AdminTotp.dc.html.
   Rendered under `layout "auth"`, so this section carries its own page
   frame instead of inheriting `.rsa`. */

.rsa-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 100vh;
  padding: 48px 24px;
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: var(--rm-font-sans);
  font-size: 14px;
  line-height: 22px;
}

.rsa-auth__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.rsa-auth__card {
  width: 100%;
  max-width: 408px;
  padding: 26px 26px 22px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-card);
  background: var(--rm-bg-raised);
}

.rsa-auth__card--wide {
  max-width: 640px;
  padding: 26px;
}

.rsa-auth__enroll {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 22px;
}

.rsa-auth__qr {
  margin: 0;
}

.rsa-auth__qr-pad {
  padding: 12px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-card);
  background: #fff;
}

.rsa-auth__qr-pad svg {
  display: block;
  width: 100%;
  height: auto;
}

.rsa-auth__qr-caption {
  margin: 8px 0 0;
  color: var(--rm-text-tertiary);
  font-size: 11.5px;
  line-height: 16px;
  text-align: center;
}

.rsa-auth__enroll-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

@media (max-width: 640px) {
  .rsa-auth__enroll {
    grid-template-columns: 1fr;
  }

  .rsa-auth__qr {
    max-width: 196px;
  }
}

.rsa-auth__title {
  margin: 0;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.rsa-auth__lede {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--rm-text-secondary);
}

.rsa-auth__flash { margin-top: 18px; }

.rsa-auth__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.rsa-auth__form--nested { margin-top: 0; }

.rsa-auth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rsa-auth__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rm-text-secondary);
}

.rsa-auth__input {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-control);
  background: var(--rm-bg-elevated);
  color: var(--rm-text);
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--rm-slow) var(--rm-ease), box-shadow var(--rm-slow) var(--rm-ease);
}

.rsa-auth__input:hover { border-color: var(--rm-border-hover); }

.rsa-auth__input:focus {
  border-color: var(--rm-mint);
  box-shadow: 0 0 0 3px rgb(62 207 142 / 14%);
}

.rsa-auth__input::placeholder { color: var(--rm-text-tertiary); }

.rsa-auth__input--mono {
  font-family: var(--rm-font-mono);
  font-size: 13px;
}

.rsa-auth__input--otp {
  width: 180px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--rm-font-mono);
  font-size: 18px;
  letter-spacing: 0.34em;
}

.rsa-auth__submit {
  width: 100%;
  height: 36px;
  margin-top: 2px;
  border: 0;
  border-radius: var(--rm-radius-control);
  background: var(--rm-mint);
  color: var(--rm-on-accent);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--rm-fast) var(--rm-ease);
}

.rsa-auth__submit:hover { background: var(--rm-mint-hover); }

.rsa-auth__fine {
  margin: 16px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--rm-border);
  font-size: 12.5px;
  line-height: 19px;
  color: var(--rm-text-tertiary);
}

.rsa-auth__fine a { color: var(--rm-mint); text-decoration: none; }
.rsa-auth__fine a:hover { color: var(--rm-mint-hover); }

.rsa-auth__meta {
  margin: 0;
  font-family: var(--rm-font-mono);
  font-size: 11.5px;
  color: var(--rm-text-tertiary);
}

/* secret + provisioning URI rows on the enrolment screen */

.rsa-auth__secret {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 4px 4px 11px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-control);
  background: var(--rm-bg-elevated);
}

.rsa-auth__secret-value {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--rm-font-mono);
  font-size: 12.5px;
  color: var(--rm-text);
  overflow-wrap: anywhere;
}

.rsa-auth__secret-value--wrap {
  font-size: 11.5px;
  line-height: 18px;
  color: var(--rm-text-secondary);
}

.rsa-auth__copy {
  flex: none;
  align-self: flex-start;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--rm-border-hover);
  border-radius: 5px;
  background: var(--rm-bg-raised);
  color: var(--rm-text-secondary);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color var(--rm-slow) var(--rm-ease), border-color var(--rm-slow) var(--rm-ease);
}

.rsa-auth__copy:hover {
  color: var(--rm-text);
  border-color: var(--rm-border-strong);
}

.rsa-auth__copy.rm-copy--copied {
  color: var(--rm-mint);
  border-color: var(--rm-mint-subtle-border);
}

.rsa-auth__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
}