/* Arrowmech Admin Panel (the Operations Console) — the Arrowmech product design system (UX
 * Wave 1) for the private staff console. The values below are the token
 * authority's (packages/ui/src/tokens.ts) under the same --am-* names the
 * customer web uses; test/unit/design-tokens.spec.ts proves they cannot drift.
 * Served under `style-src 'self'`: no inline style anywhere, every rule lives
 * here. Documentation: docs/product/design-system.md. */

:root {
  /* color */
  --am-brand: #c12026;
  --am-brand-strong: #a11b20;
  --am-brand-soft: #fcecec;
  --am-bg: #f5f6f8;
  --am-surface: #ffffff;
  --am-surface-sunken: #eef0f3;
  --am-fg: #191d23;
  --am-fg-muted: #5b6472;
  --am-fg-faint: #8a93a2;
  --am-fg-on-brand: #ffffff;
  --am-border: #d9dde3;
  --am-border-strong: #b7bec9;
  --am-accent: #1d4ed8;
  --am-accent-soft: #e8eefc;
  --am-focus: #1d4ed8;
  --am-shell-bg: #151a22;
  --am-shell-raised: #1e2530;
  --am-shell-active: #2a3240;
  --am-shell-border: #2a3240;
  --am-shell-fg: #f2f4f7;
  --am-shell-fg-muted: #a7b0be;
  --am-shell-focus: #8ab4ff;
  --am-ok-fg: #116329;
  --am-ok-bg: #e7f6ec;
  --am-ok-border: #9fd8b0;
  --am-warn-fg: #7a4d05;
  --am-warn-bg: #fcf3dc;
  --am-warn-border: #e5c878;
  --am-danger-fg: #a11b20;
  --am-danger-bg: #fcecec;
  --am-danger-border: #eba7a9;
  --am-neutral-fg: #454e5c;
  --am-neutral-bg: #eef0f3;
  --am-neutral-border: #c9cfd8;
  --am-info-fg: #1d4ed8;
  --am-info-bg: #e8eefc;
  --am-info-border: #a9bef2;

  /* scales */
  --am-space-2xs: 2px;
  --am-space-xs: 4px;
  --am-space-sm: 8px;
  --am-space-md: 12px;
  --am-space-lg: 16px;
  --am-space-xl: 24px;
  --am-space-2xl: 32px;
  --am-space-3xl: 48px;
  --am-radius-sm: 6px;
  --am-radius-md: 10px;
  --am-radius-lg: 14px;
  --am-radius-pill: 9999px;
  --am-shadow-low: 0 1px 2px rgba(15, 20, 30, 0.06), 0 1px 1px rgba(15, 20, 30, 0.04);
  --am-shadow-overlay: 0 16px 40px rgba(15, 20, 30, 0.22);
  --am-motion-fast: 120ms;
  --am-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --am-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --am-text-xs: 0.75rem;
  --am-text-sm: 0.8125rem;
  --am-text-md: 0.9375rem;
  --am-text-lg: 1.0625rem;
  --am-text-xl: 1.375rem;
  --am-text-2xl: 1.75rem;

  /* layout + density */
  --am-sidebar-w: 248px;
  --am-topbar-h: 56px;
  --am-content-max: 1360px;
  --am-row-comfortable: 12px;
  --am-row-compact: 8px;

  font-family: var(--am-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--am-fg);
  background: var(--am-bg);
  -webkit-text-size-adjust: 100%;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  /* biome-ignore lint/complexity/noImportantStyles: `hidden` must beat every component display rule */
  display: none !important;
}
body {
  margin: 0;
  min-height: 100vh;
}
h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0;
}
p {
  margin: 0;
}
a {
  color: var(--am-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
:focus-visible {
  outline: 2px solid var(--am-focus);
  outline-offset: 2px;
  border-radius: var(--am-radius-sm);
}
.mono {
  font-family: var(--am-font-mono);
  font-size: 0.92em;
}
.num {
  font-variant-numeric: tabular-nums;
}
.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;
}
.skip-link {
  position: absolute;
  left: var(--am-space-sm);
  top: -48px;
  background: var(--am-surface);
  padding: var(--am-space-sm) var(--am-space-md);
  border-radius: var(--am-radius-sm);
  z-index: 60;
}
.skip-link:focus-visible {
  top: var(--am-space-sm);
}

/* ---------- shell ----------
 * Signed in: a charcoal sidebar (brand, "private console" marker, sectioned
 * navigation, account) beside the content column. Below 1024px the sidebar
 * is a top bar and the Menu button reveals navigation and account. */
.shell {
  min-height: 100vh;
}
body.signed-in .shell {
  display: grid;
  grid-template-columns: var(--am-sidebar-w) minmax(0, 1fr);
  background: linear-gradient(to right, var(--am-shell-bg) var(--am-sidebar-w), transparent 0);
}
.sidebar {
  background: var(--am-shell-bg);
  color: var(--am-shell-fg);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--am-shell-border);
  z-index: 30;
}
.sidebar :focus-visible {
  outline-color: var(--am-shell-focus);
}
.sidebar-head {
  display: flex;
  align-items: center;
  gap: var(--am-space-md);
  min-height: var(--am-topbar-h);
  padding: var(--am-space-lg) var(--am-space-lg) var(--am-space-sm);
}
.sidebar-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--am-space-sm);
  color: inherit;
  white-space: nowrap;
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: var(--am-radius-sm);
  background: var(--am-brand);
  color: var(--am-fg-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--am-text-md);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name {
  font-weight: 700;
  font-size: var(--am-text-lg);
}
.brand-product {
  font-size: var(--am-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--am-shell-fg-muted);
}
.env-tag {
  margin: 0 var(--am-space-lg) var(--am-space-sm);
  padding: var(--am-space-xs) var(--am-space-sm);
  border: 1px solid var(--am-shell-border);
  border-radius: var(--am-radius-sm);
  font-size: var(--am-text-xs);
  color: var(--am-shell-fg-muted);
}
nav {
  display: flex;
  flex-direction: column;
  gap: var(--am-space-2xs);
  padding: var(--am-space-xs) var(--am-space-md);
  flex: 1;
  overflow-y: auto;
}
.nav-section {
  font-size: var(--am-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--am-shell-fg-muted);
  padding: var(--am-space-md) var(--am-space-md) var(--am-space-xs);
}
nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: var(--am-space-sm) var(--am-space-md);
  border-radius: var(--am-radius-sm);
  color: var(--am-shell-fg-muted);
  font-weight: 500;
}
nav a:hover {
  background: var(--am-shell-raised);
  color: var(--am-shell-fg);
  text-decoration: none;
}
nav a.active {
  background: var(--am-shell-active);
  color: var(--am-shell-fg);
  font-weight: 600;
}
nav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--am-brand);
}
.account {
  border-top: 1px solid var(--am-shell-border);
  padding: var(--am-space-md) var(--am-space-lg) var(--am-space-lg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--am-space-sm) var(--am-space-md);
  align-items: center;
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--am-radius-pill);
  background: var(--am-shell-active);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--am-text-sm);
}
.who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.who-name {
  font-weight: 600;
  font-size: var(--am-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.who-role {
  font-size: var(--am-text-xs);
  color: var(--am-shell-fg-muted);
}
.account button {
  grid-column: 1 / -1;
}
/* A sign-out the server did not confirm: said beside the button, in full. */
#signout-error {
  grid-column: 1 / -1;
}
#signout-error:empty {
  display: none;
}
#signout-error .notice {
  margin: 0;
  font-size: var(--am-text-sm);
}
#signout-error .notice button {
  margin-top: var(--am-space-sm);
  width: 100%;
}
button.shell-btn {
  width: 100%;
  background: transparent;
  color: var(--am-shell-fg);
  border-color: var(--am-shell-border);
}
button.shell-btn:not(:disabled):hover {
  background: var(--am-shell-raised);
}
.nav-toggle {
  display: none;
}
button.nav-toggle {
  width: auto;
}
main {
  min-width: 0;
  width: 100%;
  max-width: var(--am-content-max);
  padding: var(--am-space-2xl) var(--am-space-2xl) var(--am-space-3xl);
}
main:focus {
  outline: 2px solid transparent;
}
body:not(.signed-in) main {
  max-width: none;
  padding: 0;
}
@media (max-width: 1023px) {
  body.signed-in .shell {
    display: block;
    background: none;
  }
  .sidebar {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--am-shell-border);
  }
  .sidebar-head {
    padding: var(--am-space-sm) var(--am-space-lg);
  }
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .sidebar-body {
    display: none;
  }
  .shell.nav-open .sidebar-body {
    display: flex;
    border-top: 1px solid var(--am-shell-border);
    padding-top: var(--am-space-sm);
  }
  main {
    padding: var(--am-space-xl) var(--am-space-xl) var(--am-space-3xl);
  }
}
@media (max-width: 767px) {
  main {
    padding: var(--am-space-lg) var(--am-space-lg) var(--am-space-2xl);
  }
}

/* ---------- page header ---------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--am-space-md) var(--am-space-xl);
  margin-bottom: var(--am-space-lg);
}
.page-heading {
  min-width: 0;
}
.crumbs {
  font-size: var(--am-text-sm);
  color: var(--am-fg-muted);
  margin-bottom: var(--am-space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-space-xs);
}
.crumbs a + a::before,
.crumbs a + span::before {
  content: "/";
  margin-right: var(--am-space-xs);
  color: var(--am-fg-faint);
}
h1 {
  font-size: var(--am-text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
h1.mono {
  font-size: var(--am-text-xl);
  letter-spacing: 0;
}
h2 {
  font-size: var(--am-text-lg);
  font-weight: 600;
  margin: var(--am-space-xl) 0 var(--am-space-md);
}
.sub {
  color: var(--am-fg-muted);
  margin-top: var(--am-space-xs);
  max-width: 80ch;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-space-sm);
}
.context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-space-sm) var(--am-space-md);
  margin-bottom: var(--am-space-lg);
}
@media (max-width: 767px) {
  h1 {
    font-size: var(--am-text-xl);
  }
}

/* ---------- surfaces ---------- */
.panel {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-md);
  box-shadow: var(--am-shadow-low);
  padding: var(--am-space-lg) var(--am-space-xl);
  margin-bottom: var(--am-space-lg);
}
.panel-flush {
  padding: 0;
  overflow: hidden;
}
.panel-body {
  padding: var(--am-space-lg) var(--am-space-xl);
}
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-space-sm) var(--am-space-md);
  padding: var(--am-space-md) var(--am-space-xl);
  border-bottom: 1px solid var(--am-border);
}
.panel-head h2,
.panel > h2:first-child {
  margin: 0;
  font-size: var(--am-text-md);
}
.panel > h2:first-child {
  margin-bottom: var(--am-space-md);
}
.panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--am-space-sm);
  padding: var(--am-space-sm) var(--am-space-xl);
  border-top: 1px solid var(--am-border);
  background: var(--am-surface-sunken);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--am-space-md);
}
.field {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-md);
  padding: var(--am-space-md) var(--am-space-lg);
  min-width: 0;
}
.field h3 {
  font-size: var(--am-text-sm);
  font-weight: 600;
  margin: 0 0 var(--am-space-sm);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--am-space-sm);
}
.field[data-tone="bad"] {
  border-color: var(--am-danger-border);
}
.field[data-tone="warn"] {
  border-color: var(--am-warn-border);
}
.field .note {
  color: var(--am-fg-muted);
  font-size: var(--am-text-sm);
  margin-top: var(--am-space-xs);
  overflow-wrap: anywhere;
}
.field ul {
  margin: 0;
  padding-left: var(--am-space-lg);
}
@media (max-width: 767px) {
  .panel {
    padding: var(--am-space-md) var(--am-space-lg);
  }
  .panel-flush {
    padding: 0;
  }
  .panel-head,
  .panel-body,
  .panel-foot {
    padding-left: var(--am-space-lg);
    padding-right: var(--am-space-lg);
  }
}

/* ---------- stat tiles (facts from the response on screen) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--am-space-md);
  margin-bottom: var(--am-space-lg);
}
.stat {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-md);
  padding: var(--am-space-md) var(--am-space-lg);
  min-width: 0;
}
.stat-label {
  font-size: var(--am-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--am-fg-muted);
}
.stat-value {
  font-size: var(--am-text-lg);
  font-weight: 700;
  margin-top: var(--am-space-xs);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat-note {
  font-size: var(--am-text-xs);
  color: var(--am-fg-muted);
  margin-top: var(--am-space-2xs);
}

/* ---------- forms ---------- */
label {
  display: block;
  font-weight: 600;
  font-size: var(--am-text-sm);
  margin: 0 0 var(--am-space-xs);
}
input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  padding: var(--am-space-sm) var(--am-space-md);
  border: 1px solid var(--am-border-strong);
  border-radius: var(--am-radius-sm);
  font: inherit;
  color: var(--am-fg);
  background: var(--am-surface);
}
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--am-focus);
  outline-offset: 1px;
  border-color: var(--am-focus);
}
input[aria-invalid="true"] {
  border-color: var(--am-danger-fg);
}
.hint {
  color: var(--am-fg-muted);
  font-size: var(--am-text-xs);
  margin-top: var(--am-space-xs);
}
.form-field {
  margin-bottom: var(--am-space-md);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--am-space-md) var(--am-space-lg);
  align-items: end;
}
.form-grid .span-all {
  grid-column: 1 / -1;
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-space-sm);
  margin-top: var(--am-space-md);
}
.reason-field {
  border-left: 3px solid var(--am-brand);
  padding-left: var(--am-space-md);
}
.narrow {
  max-width: 460px;
}
.row {
  display: flex;
  gap: var(--am-space-sm);
  align-items: end;
  flex-wrap: wrap;
}
.row > * {
  flex: 0 0 auto;
}
.row .grow {
  flex: 1 1 240px;
}
.between {
  justify-content: space-between;
}
.end {
  justify-content: flex-end;
}
.mt {
  margin-top: var(--am-space-md);
}
.block {
  display: block;
}

/* ---------- buttons ---------- */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--am-space-xs);
  font: inherit;
  font-weight: 600;
  font-size: var(--am-text-sm);
  min-height: 36px;
  padding: var(--am-space-xs) var(--am-space-md);
  border-radius: var(--am-radius-sm);
  border: 1px solid var(--am-border-strong);
  background: var(--am-surface);
  color: var(--am-fg);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--am-motion-fast);
}
button:not(:disabled):hover,
.button:hover {
  background: var(--am-surface-sunken);
  text-decoration: none;
}
button.primary {
  background: var(--am-brand);
  border-color: var(--am-brand);
  color: var(--am-fg-on-brand);
}
button.primary:not(:disabled):hover {
  background: var(--am-brand-strong);
}
button.danger {
  color: var(--am-danger-fg);
  border-color: var(--am-danger-border);
}
button.danger:not(:disabled):hover {
  background: var(--am-danger-bg);
}
button.small,
.button.small {
  min-height: 30px;
  font-size: var(--am-text-xs);
  padding: var(--am-space-2xs) var(--am-space-sm);
}
button.link {
  border: 0;
  background: none;
  color: var(--am-accent);
  text-decoration: underline;
  padding: 0;
  min-height: 0;
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.actions {
  display: flex;
  gap: var(--am-space-xs);
  flex-wrap: wrap;
}
/* Row actions wrap inside their cell rather than being clipped. */
td .actions {
  min-width: 180px;
}
.nowrap {
  white-space: nowrap;
}

/* ---------- status ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--am-space-xs);
  padding: 1px var(--am-space-sm);
  border-radius: var(--am-radius-pill);
  border: 1px solid;
  font-size: var(--am-text-xs);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.5;
}
/* A shape per tone so status never depends on colour alone; the words carry
   the meaning, the shape repeats it. Generated content stays out of the text. */
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
.badge.ok {
  color: var(--am-ok-fg);
  background: var(--am-ok-bg);
  border-color: var(--am-ok-border);
}
.badge.warn {
  color: var(--am-warn-fg);
  background: var(--am-warn-bg);
  border-color: var(--am-warn-border);
}
.badge.warn::before {
  border-radius: 1px;
  transform: rotate(45deg);
}
.badge.bad {
  color: var(--am-danger-fg);
  background: var(--am-danger-bg);
  border-color: var(--am-danger-border);
}
.badge.bad::before {
  border-radius: 1px;
}
.badge.muted {
  color: var(--am-neutral-fg);
  background: var(--am-neutral-bg);
  border-color: var(--am-neutral-border);
  border-style: dashed;
}
.badge.muted::before {
  background: transparent;
  border: 1.5px solid currentColor;
}
.badge.info {
  color: var(--am-info-fg);
  background: var(--am-info-bg);
  border-color: var(--am-info-border);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--am-space-sm);
  border-radius: var(--am-radius-pill);
  background: var(--am-surface-sunken);
  border: 1px solid var(--am-border);
  font-size: var(--am-text-xs);
  color: var(--am-fg);
  margin: 1px var(--am-space-xs) 1px 0;
}
a.chip:hover {
  background: var(--am-accent-soft);
  text-decoration: none;
}
.tag-you {
  font-size: var(--am-text-xs);
  color: var(--am-fg-muted);
  font-weight: 500;
}

/* Filter toggles that narrow a list (customer status). */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-space-sm);
  margin-bottom: var(--am-space-md);
}
button.chip-toggle {
  border-radius: var(--am-radius-pill);
  min-height: 32px;
  font-size: var(--am-text-sm);
}
button.chip-toggle[aria-pressed="true"] {
  background: var(--am-fg);
  border-color: var(--am-fg);
  color: var(--am-surface);
}
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--am-space-sm);
}

/* ---------- notices ---------- */
.notice {
  padding: var(--am-space-sm) var(--am-space-md);
  border-radius: var(--am-radius-sm);
  margin: 0 0 var(--am-space-md);
  border: 1px solid;
  border-left-width: 4px;
  font-size: var(--am-text-sm);
  overflow-wrap: anywhere;
}
.notice.info {
  color: var(--am-info-fg);
  background: var(--am-info-bg);
  border-color: var(--am-info-border);
  border-left-color: var(--am-info-fg);
}
.notice.warn {
  color: var(--am-warn-fg);
  background: var(--am-warn-bg);
  border-color: var(--am-warn-border);
  border-left-color: var(--am-warn-fg);
}
.notice.bad {
  color: var(--am-danger-fg);
  background: var(--am-danger-bg);
  border-color: var(--am-danger-border);
  border-left-color: var(--am-danger-fg);
}
.notice.ok {
  color: var(--am-ok-fg);
  background: var(--am-ok-bg);
  border-color: var(--am-ok-border);
  border-left-color: var(--am-ok-fg);
}
.notice a {
  color: inherit;
  text-decoration: underline;
}
/* The global-access label sits on every investigation page. */
.scope-banner {
  display: flex;
  align-items: center;
  gap: var(--am-space-sm);
}

/* ---------- states ---------- */
.state {
  color: var(--am-fg-muted);
  padding: var(--am-space-xl) 0;
  display: flex;
  align-items: center;
  gap: var(--am-space-sm);
}
.state.loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .state.loading::before {
    animation: none;
  }
  * {
    transition-duration: 0s;
  }
}
.empty {
  text-align: center;
  padding: var(--am-space-3xl) var(--am-space-xl);
  color: var(--am-fg-muted);
}
.empty-title {
  font-size: var(--am-text-lg);
  font-weight: 600;
  color: var(--am-fg);
  margin-bottom: var(--am-space-xs);
}
.denied {
  text-align: left;
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-md);
  background: var(--am-surface);
  padding: var(--am-space-xl);
  max-width: 640px;
}
.denied .empty-title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--am-space-sm);
  border-radius: 2px;
  background: var(--am-danger-fg);
}
.err {
  color: var(--am-danger-fg);
  font-size: var(--am-text-sm);
  font-weight: 500;
  margin-top: var(--am-space-sm);
}
.err:empty {
  display: none;
}
.meta {
  color: var(--am-fg-muted);
  font-size: var(--am-text-xs);
}

/* ---------- tables ---------- */
.table-wrap {
  position: relative;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-md);
  overflow: auto;
  max-height: 72vh;
}
@media (max-width: 767px) {
  .table-wrap {
    max-height: none;
  }
}
.panel .table-wrap,
.field .table-wrap {
  border: 0;
  border-radius: 0;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--am-text-sm);
  font-variant-numeric: tabular-nums;
}
caption {
  text-align: left;
}
th,
td {
  text-align: left;
  padding: var(--am-row-compact) var(--am-space-md);
  border-bottom: 1px solid var(--am-border);
  vertical-align: top;
}
th {
  font-size: var(--am-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--am-fg-muted);
  background: var(--am-surface-sunken);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: #f9fafb;
}
td.num,
th.num {
  text-align: right;
}
td.mono {
  white-space: nowrap;
}
tr[data-tone="bad"] td:first-child {
  box-shadow: inset 3px 0 0 var(--am-danger-fg);
}
tr[data-tone="warn"] td:first-child {
  box-shadow: inset 3px 0 0 var(--am-warn-fg);
}
.cell-title {
  font-weight: 600;
}
.cell-sub {
  display: block;
  margin-top: var(--am-space-2xs);
}

/* ---------- tables as cards (< 1024px) ----------
 * Field use on a phone or tablet: every row becomes a card. The first cell
 * (the row's identity) heads it, the key cells chosen per table
 * (data-card-key: status, value, actions) follow, then every other cell.
 * Each value keeps its column name (data-label), so nothing is hidden in a
 * sideways scroll and nothing is dropped. */
@media (max-width: 1023px) {
  .table-wrap {
    overflow: visible;
    max-height: none;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .panel .table-wrap {
    padding: var(--am-space-md);
    background: var(--am-bg);
  }
  table.cards thead {
    display: none;
  }
  table.cards,
  table.cards tbody {
    display: block;
  }
  table.cards tr {
    display: flex;
    flex-direction: column;
    gap: var(--am-space-2xs);
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-radius-md);
    padding: var(--am-space-md) var(--am-space-lg);
    margin-bottom: var(--am-space-md);
  }
  table.cards tr:last-child {
    margin-bottom: 0;
  }
  table.cards tbody tr:hover {
    background: var(--am-surface);
  }
  table.cards tr[data-tone="bad"] {
    border-left: 4px solid var(--am-danger-fg);
  }
  table.cards tr[data-tone="warn"] {
    border-left: 4px solid var(--am-warn-fg);
  }
  table.cards tr[data-tone] td:first-child {
    box-shadow: none;
  }
  table.cards td {
    order: 3;
    display: grid;
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
    gap: var(--am-space-md);
    align-items: start;
    padding: 3px 0;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  table.cards td::before {
    content: attr(data-label);
    font-family: var(--am-font);
    color: var(--am-fg-muted);
    font-size: var(--am-text-xs);
    font-weight: 600;
    padding-top: 2px;
  }
  table.cards td > * {
    grid-column: 2;
    min-width: 0;
    justify-self: start;
  }
  table.cards td:empty {
    display: none;
  }
  table.cards td.card-title {
    order: 0;
    display: block;
    font-size: var(--am-text-md);
    padding-bottom: var(--am-space-sm);
    margin-bottom: var(--am-space-xs);
    border-bottom: 1px solid var(--am-border);
  }
  table.cards td.card-title::before {
    display: block;
    margin-bottom: var(--am-space-2xs);
  }
  table.cards td.card-key {
    order: 1;
  }
  table.cards td .actions {
    min-width: 0;
    padding-top: var(--am-space-xs);
  }
  table.cards button.small,
  table.cards .button.small {
    min-height: 36px;
    padding: var(--am-space-xs) var(--am-space-md);
  }
  .field table.cards tr {
    padding: var(--am-space-sm) var(--am-space-md);
  }
}

/* ---------- definition lists ---------- */
dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--am-space-xs) var(--am-space-md);
  font-size: var(--am-text-sm);
}
dt {
  color: var(--am-fg-muted);
}
dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.provenance {
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: var(--am-space-sm) var(--am-space-lg);
}
@media (max-width: 1023px) {
  .provenance {
    grid-template-columns: max-content minmax(0, 1fr);
  }
}
@media (max-width: 479px) {
  dl,
  .provenance {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  dd {
    margin-bottom: var(--am-space-sm);
  }
}

/* ---------- audit timeline ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline-day {
  font-size: var(--am-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--am-fg-muted);
  background: var(--am-surface-sunken);
  padding: var(--am-space-xs) var(--am-space-xl);
  border-bottom: 1px solid var(--am-border);
  position: sticky;
  top: 0;
}
.event {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--am-space-xs) var(--am-space-lg);
  padding: var(--am-space-md) var(--am-space-xl);
  border-bottom: 1px solid var(--am-border);
}
.event[data-tone="bad"] {
  box-shadow: inset 3px 0 0 var(--am-danger-fg);
}
.event[data-tone="warn"] {
  box-shadow: inset 3px 0 0 var(--am-warn-fg);
}
.event-time {
  font-variant-numeric: tabular-nums;
  color: var(--am-fg-muted);
  font-size: var(--am-text-sm);
}
.event-seq {
  display: block;
  font-size: var(--am-text-xs);
  color: var(--am-fg-faint);
}
.event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--am-space-xs) var(--am-space-sm);
}
.event-type {
  font-family: var(--am-font-mono);
  font-weight: 600;
  font-size: var(--am-text-sm);
}
.event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--am-space-2xs) var(--am-space-lg);
  margin-top: var(--am-space-xs);
  font-size: var(--am-text-sm);
  color: var(--am-fg-muted);
}
.event-facts b {
  font-weight: 600;
  color: var(--am-fg);
}
details {
  margin-top: var(--am-space-xs);
}
summary {
  cursor: pointer;
  font-size: var(--am-text-xs);
  font-weight: 600;
  color: var(--am-accent);
}
pre {
  margin: var(--am-space-xs) 0 0;
  padding: var(--am-space-sm) var(--am-space-md);
  background: var(--am-surface-sunken);
  border-radius: var(--am-radius-sm);
  font-family: var(--am-font-mono);
  font-size: var(--am-text-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow: auto;
}
@media (max-width: 767px) {
  .event {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--am-space-md) var(--am-space-lg);
  }
  .timeline-day {
    padding: var(--am-space-xs) var(--am-space-lg);
  }
}

/* ---------- dialogs ---------- */
dialog {
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius-lg);
  box-shadow: var(--am-shadow-overlay);
  padding: var(--am-space-xl);
  width: min(520px, calc(100vw - 32px));
  color: var(--am-fg);
}
dialog h2 {
  margin: 0 0 var(--am-space-md);
  font-size: var(--am-text-xl);
}
dialog::backdrop {
  background: rgba(15, 20, 30, 0.5);
}

/* ---------- sign-in ---------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 5fr) 7fr;
  background: var(--am-surface);
}
.auth-brand {
  background: var(--am-shell-bg);
  color: var(--am-shell-fg);
  border-top: 4px solid var(--am-brand);
  padding: var(--am-space-3xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--am-space-2xl);
}
.auth-headline {
  font-size: var(--am-text-2xl);
  font-weight: 700;
  max-width: 18ch;
}
.auth-lede {
  color: var(--am-shell-fg-muted);
  margin-top: var(--am-space-md);
  max-width: 44ch;
}
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--am-space-2xl) var(--am-space-lg);
}
.login {
  width: 100%;
  max-width: 380px;
}
.login h1 {
  font-size: var(--am-text-xl);
}
.login .sub {
  margin-bottom: var(--am-space-xl);
}
.login button.primary {
  width: 100%;
  min-height: 44px;
}
@media (max-width: 1023px) {
  .auth {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .auth-brand {
    padding: var(--am-space-lg) var(--am-space-xl);
  }
  .auth-copy {
    display: none;
  }
}