/* The admin pages' own styles, on top of Basecoat and tokens.css (DESIGN.md). */
html { overflow-x: clip; scroll-padding-block: var(--space-xl); }
body { margin: 0; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); font: var(--text-base)/1.5 var(--font-sans); }
body, input, textarea { caret-color: var(--color-ink); }
::selection { background: var(--color-ink); color: var(--color-paper); }
* { scrollbar-color: var(--color-control-border) var(--color-surface); scrollbar-width: thin; }
.sr-only { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 1px; block-size: 1px; padding: 0; margin-block: -1px; margin-inline: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
a { text-underline-offset: .2em; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.skip-link { position: fixed; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); z-index: 100; padding: var(--space-sm) var(--space-lg); background: var(--color-ink); color: var(--color-paper); translate: 0 -200%; }
.skip-link:focus { translate: 0; }
.admin-app { min-block-size: 100svh; }
.admin-sidebar { display: none; }
.admin-workspace { min-inline-size: 0; }
.brand { display: flex; align-items: center; gap: var(--space-md); font-weight: 650; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); }
.brand svg { inline-size: 1rem; block-size: 1rem; }
.brand small { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; letter-spacing: normal; }
.admin-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.admin-nav a { display: flex; align-items: center; gap: var(--space-md); min-block-size: 2.25rem; padding-inline: var(--space-md); border-radius: var(--radius-control); font-size: var(--text-sm); }
.admin-nav a[aria-current="page"] { background: var(--color-info-bg); color: var(--color-info); font-weight: 600; }
.icon { inline-size: 1rem; block-size: 1rem; flex: none; }
.admin-topbar { border-block-end: var(--rule-width) solid var(--color-rule); padding: var(--space-md) var(--space-page); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); min-block-size: 3.5rem; }
.topbar-context, .topbar-account { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.topbar-account form { margin: 0; }
.topbar-account > span { display: none; }
.mobile-navigation { flex-basis: 100%; }
.mobile-navigation summary { inline-size: fit-content; display: flex; gap: var(--space-sm); align-items: center; padding-block: var(--space-sm); cursor: pointer; font-weight: 500; }
.mobile-navigation summary::marker { content: ""; }
.mobile-navigation summary::-webkit-details-marker { display: none; }
.mobile-navigation .admin-nav { padding-block-end: var(--space-lg); }
.page-content { max-inline-size: 100rem; margin-inline: auto; padding: var(--space-2xl) var(--space-page) var(--space-3xl); }
.page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); margin-block-end: var(--space-xl); }
h1 { margin: 0; font-size: var(--text-title); line-height: 1.3; font-weight: 650; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: var(--text-base); font-weight: 600; }
:is(h1, h2, h3) { min-inline-size: 0; overflow-wrap: anywhere; }
.page-description { color: var(--color-muted); max-inline-size: 72ch; margin-block-start: var(--space-sm); }
.muted, .field-help { color: var(--color-muted); }
.text-link { color: var(--color-info); text-decoration: underline; font-weight: 500; }
/* Basecoat's button rules use --color-muted as a ground, e.g., for the outline hover. tokens.css gives that name to the Muted text color, so buttons get Basecoat's meaning back. */
.btn { --color-muted: var(--muted); }
.btn { font-family: var(--font-sans); font-size: var(--text-sm); gap: var(--space-sm); min-block-size: 2.25rem; border-radius: var(--radius-control); transition: none; }
.btn:active:not(:disabled) { opacity: .75; }
.btn, .admin-nav a, summary { touch-action: manipulation; -webkit-tap-highlight-color: var(--color-tap); }
.btn:not([data-variant]):active:not(:disabled) { background: var(--color-action-hover); color: var(--color-paper); }
.btn[data-variant="outline"]:active:not(:disabled), .btn[data-variant="ghost"]:active:not(:disabled) { background: var(--color-info-bg); color: var(--color-info); }
.btn[data-variant="destructive"]:active:not(:disabled) { background: var(--color-danger); opacity: .8; }
.admin-nav a:active { background: var(--color-info-bg); color: var(--color-info); }
summary:active { color: var(--color-info); }
.btn:disabled { opacity: .6; }
.btn[data-variant="outline"] { border-color: var(--color-control-border); }
.badge { display: inline-flex; align-items: center; gap: var(--space-xs); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-pill); padding: .125rem .5rem; font-size: var(--text-xs); line-height: 1.5; font-weight: 500; white-space: nowrap; background: var(--color-paper); color: var(--color-ink); }
.badge:is([data-state="active"], [data-state="provisioned"]) { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.badge:is([data-state="suspended"], [data-state="waiting"], [data-state="testing"]) { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.badge:is([data-state="started"], [data-state="certified"]) { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info); }
.badge:is([data-state="revoked"], [data-state="blocked"]) { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.notice { --notice-ink: var(--color-info); --notice-bg: var(--color-info-bg); --notice-border: var(--color-info-border); display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: start; gap: var(--space-md); padding: var(--space-lg); margin-block-end: var(--space-xl); border: var(--rule-width) solid var(--notice-border); border-radius: var(--radius-control); background: var(--notice-bg); color: var(--notice-ink); }
.notice[data-tone="success"] { --notice-ink: var(--color-success); --notice-bg: var(--color-success-bg); --notice-border: var(--color-success-border); }
.notice[data-tone="warning"] { --notice-ink: var(--color-warning); --notice-bg: var(--color-warning-bg); --notice-border: var(--color-warning-border); }
.notice[data-tone="danger"] { --notice-ink: var(--color-danger); --notice-bg: var(--color-danger-bg); --notice-border: var(--color-danger-border); }
.notice > .icon { margin-block-start: .125rem; }
.notice p { margin: 0; color: inherit; }
.danger-action { color: var(--color-danger); }
.btn.danger-action:active:not(:disabled) { background: var(--color-danger-bg); color: var(--color-danger); opacity: 1; }
.btn[data-variant="destructive"] { background: var(--color-danger); color: var(--color-paper); }
.section { padding-block: var(--space-xl); border-block-start: var(--rule-width) solid var(--color-rule); }
.section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-block-end: var(--space-lg); }
.section-heading a { font-size: var(--text-sm); }
.section-note { margin-block: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); max-inline-size: 72ch; }
.section .table-scroll + .notice { margin-block-start: var(--space-xl); }
.table-scroll { overflow: auto; max-inline-size: 100%; border-block: var(--rule-width) solid var(--color-rule); container-type: inline-size; }
.table { text-align: start; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.table th { color: var(--color-muted); background: var(--color-surface); font-size: var(--text-xs); padding: var(--space-md) var(--space-lg); }
.table td { padding: var(--space-sm) var(--space-lg); border-block-start: var(--rule-width) solid var(--color-rule); }
.table th:first-child, .table td:first-child { padding-inline-start: var(--space-md); }
.table th:last-child, .table td:last-child { padding-inline-end: var(--space-md); }
.identifier { font: var(--text-xs)/1.5 var(--font-mono); }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); }
.row-actions .btn { block-size: 1.875rem; min-block-size: 1.875rem; padding-inline: var(--space-sm); }
.record-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-lg) var(--space-xl); }
.record-fields dt { color: var(--color-muted); font-size: var(--text-xs); margin-block-end: var(--space-xs); }
.record-fields dd { font-size: var(--text-sm); overflow-wrap: anywhere; }
/* A table cell of stacked text wraps; identifiers and times in it stay whole. */
.table td.wrap { white-space: normal; }
.table td.wrap :is(time, .identifier) { white-space: nowrap; }
/* A row's details are a row of their own across the table, which shows while the <details> in the row above is open.
   Its fields keep the width of the visible part of a table that scrolls sideways, and stay in view. */
.table .detail-row { display: none; }
.table tr:has(details[open]) + .detail-row { display: table-row; }
.table :is(tr:has(details[open]), .detail-row) { background: var(--color-surface); }
.table .detail-row td { white-space: normal; border-block-start: 0; padding-block: var(--space-md) var(--space-xl); }
.table .detail-row .record-fields { position: sticky; inset-inline-start: var(--space-md); max-inline-size: calc(100cqi - 2 * var(--space-md)); }
.table .detail-row .record-fields > :has(.json-preview) { grid-column: 1 / -1; }
.table .detail-row .json-preview { white-space: pre-wrap; overflow-wrap: anywhere; }
.json-preview { max-block-size: 28rem; overflow: auto; font: var(--text-xs)/1.65 var(--font-mono); padding: var(--space-lg); background: var(--color-paper); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-control); }
summary { cursor: pointer; font-weight: 500; }
.disclosure-summary { display: flex; align-items: center; gap: var(--space-sm); }
.disclosure-summary::marker { content: ""; }
.disclosure-summary::-webkit-details-marker { display: none; }
.disclosure-summary .icon { inline-size: .875rem; block-size: .875rem; }
details[open] > .disclosure-summary .icon { rotate: 90deg; }
.empty-state { padding-block: var(--space-3xl); max-inline-size: 70ch; }
.empty-state p { color: var(--color-muted); margin-block: var(--space-sm) var(--space-lg); }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block-start: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
.pagination div { display: flex; gap: var(--space-sm); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); margin-block-end: var(--space-lg); }
.command-page { max-inline-size: 68rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-xl) var(--space-lg); }
.form-field { display: grid; align-content: start; gap: var(--space-sm); min-inline-size: 0; border: 0; padding: 0; margin: 0; }
/* A field under other fields of its form keeps the distance of a field grid's rows. */
form > :not([type="hidden"]) + .form-field { margin-block-start: var(--space-xl); }
.form-field label, .form-field legend { font-size: var(--text-sm); font-weight: 500; padding: 0; }
.form-field label:has(> [type="checkbox"]) { display: flex; align-items: center; gap: var(--space-sm); font-weight: 400; }
.input, .textarea, .select { font-family: var(--font-sans); font-size: var(--text-sm); min-inline-size: 0; inline-size: 100%; border-color: var(--color-control-border); border-radius: var(--radius-control); }
.input[type="checkbox"] { inline-size: 1rem; flex: none; }
.input::placeholder, .textarea::placeholder { color: var(--color-muted); opacity: 1; }
.field-help, .field-error { font-size: var(--text-xs); max-inline-size: 65ch; }
.field-error { color: var(--color-danger); }
.form-section { border-block-start: var(--rule-width) solid var(--color-rule); padding-block-start: var(--space-xl); margin-block-start: var(--space-xl); }
.form-section:first-of-type { margin-block-start: 0; }
.form-section h2 { margin-block-end: var(--space-lg); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-block-start: var(--space-xl); padding-block-start: var(--space-xl); border-block-start: var(--rule-width) solid var(--color-rule); }
.error-page { max-inline-size: 70ch; }
.login-shell { min-block-size: 100svh; padding: var(--space-xl); display: grid; place-items: center; background: var(--color-surface); }
.login-content { inline-size: min(100%, 26rem); }
.login-content .brand { margin-block-end: var(--space-3xl); }
.login-content h1 { margin-block-end: var(--space-md); }
.login-content > p { color: var(--color-muted); max-inline-size: 65ch; }
.login-content .notice { margin-block: var(--space-xl); }
.login-content > form { margin-block: var(--space-xl); }
.login-content .btn { inline-size: 100%; }
.login-content footer { margin-block-start: var(--space-2xl); padding-block-start: var(--space-lg); border-block-start: var(--rule-width) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) {
  .admin-nav a:hover, .btn[data-variant="ghost"]:hover { background: var(--color-hover); }
  .admin-nav a[aria-current="page"]:hover { background: var(--color-info-bg); }
  .btn:not([data-variant]):hover { background: var(--color-action-hover); }
  .btn.danger-action:hover { background: var(--color-danger-bg); color: var(--color-danger); }
  .text-link:hover, .back-link:hover { color: var(--color-ink); text-decoration-thickness: 2px; }
  .table tbody > tr:hover { background: var(--color-surface); }
}
@media (min-width: 48rem) {
  .admin-app { display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
  .admin-sidebar { position: sticky; inset-block-start: 0; display: flex; flex-direction: column; block-size: 100svh; overflow: auto; background: var(--color-surface); padding: var(--space-xl) var(--space-md); border-inline-end: var(--rule-width) solid var(--color-rule); }
  .admin-sidebar > .brand { padding-inline: var(--space-md); margin-block-end: var(--space-xl); }
  .mobile-navigation { display: none; }
  .topbar-account > span { display: inline; }
}
@media (max-width: 47.999rem), (pointer: coarse) {
  .btn, .admin-nav a, .mobile-navigation > summary { min-block-size: 2.75rem; }
  .row-actions .btn { block-size: 2.75rem; min-block-size: 2.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out); }
  .btn:active:not(:disabled) { scale: .98; transition-duration: var(--dur-press); }
  .disclosure-summary .icon { transition: rotate var(--dur-fast) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :is(.input, .textarea, .select, .table tr, .badge) { transition: none; }
}