/* Every value here comes from product/design-tokens.json via /tokens.css.
   No literal colours, spacing, radii or type sizes below. */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: var(--border-focus) solid var(--color-focus-ring);
  outline-offset: var(--space-xs);
  border-radius: var(--radius-sm);
}

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

.shell {
  display: grid;
  grid-template-columns: var(--layout-sidebar-width) 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--color-surface-sunken);
  border-right: var(--border-hairline) solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.brand {
  font-size: var(--type-headline);
  font-weight: var(--type-weight-semibold);
  letter-spacing: -0.01em;
  padding-inline: var(--space-sm);
}

.nav { display: flex; flex-direction: column; gap: var(--space-xs); }

.nav a {
  display: block;
  padding: var(--space-sm) var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-medium);
}
.nav a:hover { background: var(--color-surface-raised); text-decoration: none; }
.nav a[aria-current='page'] {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.sidebar-foot { margin-top: auto; }

.content {
  padding: var(--space-lg) var(--space-xl);
  max-width: var(--layout-content-max-width);
  width: 100%;
}

.centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}

.panel {
  width: 100%;
  max-width: var(--layout-panel-width);
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* ---- typography ----------------------------------------------------- */

h1 {
  font-size: var(--type-title);
  line-height: var(--line-height-tight);
  font-weight: var(--type-weight-semibold);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--type-headline);
  font-weight: var(--type-weight-semibold);
  margin: var(--space-lg) 0 var(--space-sm);
}
.helper {
  color: var(--color-text-secondary);
  margin: calc(var(--space-md) * -1) 0 var(--space-md);
}
.caption { font-size: var(--type-caption); color: var(--color-text-tertiary); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.02em;
}

.screen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.screen-head h1 { margin: 0; }
.head-actions { display: flex; gap: var(--space-sm); align-items: center; }

/* ---- controls ------------------------------------------------------- */

.btn {
  height: var(--layout-control-height);
  padding-inline: var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-hairline) solid transparent;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--type-weight-medium);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}
.btn:hover { background: var(--color-primary-pressed); }
.btn[disabled] { opacity: var(--opacity-disabled); cursor: default; }

.btn.secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn.secondary:hover { background: var(--color-surface-raised); }

.btn.destructive { background: var(--color-danger); color: var(--color-on-primary); }
.btn.destructive:hover { background: var(--color-danger-pressed); }

.btn.small { height: auto; padding: var(--space-xs) var(--space-sm); font-size: var(--type-label); }

.field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
.field label { font-size: var(--type-label); color: var(--color-text-secondary); }
.field input, .field select {
  height: var(--layout-control-height);
  padding-inline: var(--space-sm);
  background: var(--color-surface-sunken);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* A numeric input and the unit it is measured in, side by side. */
.field-unit { display: flex; align-items: center; gap: var(--space-sm); }
.field-unit input { flex: 1 1 auto; min-width: 0; }
.field-unit .unit { font-size: var(--type-label); color: var(--color-text-secondary); }

.inline-error {
  color: var(--color-danger);
  font-size: var(--type-label);
  margin-bottom: var(--space-md);
}

.filter-bar { display: flex; gap: var(--space-xs); margin-bottom: var(--space-md); flex-wrap: wrap; }
.filter-bar button {
  background: transparent;
  border: var(--border-hairline) solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
}
.filter-bar button[aria-pressed='true'] {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* ---- surfaces ------------------------------------------------------- */

.card {
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--layout-counter-min-width), 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.counter {
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.counter .value {
  font-size: var(--type-title);
  font-weight: var(--type-weight-semibold);
  line-height: var(--line-height-tight);
}
.counter .label { font-size: var(--type-label); color: var(--color-text-secondary); }

.list { border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--layout-row-height);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-raised);
  border-bottom: var(--border-hairline) solid var(--color-border);
  width: 100%;
  text-align: left;
  border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer;
  color: inherit;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--color-surface-sunken); text-decoration: none; }
.row.static { cursor: default; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: var(--type-weight-medium); }
.row .sub { font-size: var(--type-label); color: var(--color-text-secondary); }

.detail-rows { display: grid; gap: var(--space-sm); }
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
.detail-row:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-row dt { color: var(--color-text-secondary); font-size: var(--type-label); margin: 0; }
.detail-row dd { margin: 0; text-align: right; }

.fingerprint {
  font-family: var(--font-mono);
  font-size: var(--type-headline);
  letter-spacing: 0.08em;
  background: var(--color-surface-sunken);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
}

.code-card {
  background: var(--color-surface-sunken);
  border: var(--border-focus) solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.code-card .value {
  font-family: var(--font-mono);
  font-size: var(--type-headline);
  letter-spacing: 0.06em;
}

.badge {
  font-size: var(--type-caption);
  font-weight: var(--type-weight-medium);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.badge.connected { color: var(--status-connected); }
.badge.disconnected { color: var(--status-disconnected); }
.badge.blocked { color: var(--status-blocked); }
.badge.degraded { color: var(--status-degraded); }
.badge.verified { color: var(--status-verified); }

.dot {
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-offline);
  flex: none;
}
.dot.online { background: var(--color-success); }

.sev-info { color: var(--color-text-secondary); }
.sev-warning { color: var(--color-warning); }
.sev-error { color: var(--color-danger); }

/* ---- states --------------------------------------------------------- */

.state {
  border: var(--border-hairline) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
}
.state .btn { margin-top: var(--space-md); }

.skeleton { display: grid; gap: var(--space-sm); }
.skeleton i {
  display: block;
  height: var(--layout-row-height);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  opacity: var(--opacity-muted);
  animation: pulse var(--duration-slow) ease-in-out infinite alternate;
}
@keyframes pulse { from { opacity: 0.35; } to { opacity: var(--opacity-muted); } }

.dialog-scrim {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-scrim);
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}
.dialog {
  background: var(--color-surface-raised);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: var(--layout-dialog-width);
  width: 100%;
}
.dialog h2 { margin-top: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }

@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: var(--border-hairline) solid var(--color-border); }
  .content { padding: var(--space-md); }
}