/* Runnev — user cabinet (lk.runnev.dev). Loaded after base.css + docs.css.
   Everything is expressed in the base design tokens, so light/dark themes and
   the mobile breakpoints are inherited without extra media queries. */

.inline-form { display: inline; margin: 0; }

/* ---------------------------------------------------------------- dash-bar */

.dash-bar {
  border-bottom: 1px solid var(--line);
  background: var(--bg-sunk);
}
.dash-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding-block: 0.55rem;
  font-size: var(--step--1);
  color: var(--fg-muted);
}
.dash-crumb { color: var(--fg); }
.dash-dot { color: var(--fg-faint); }
.dash-stat { display: inline-flex; align-items: center; gap: 0.35rem; }
.dash-stat b { color: var(--fg); font-weight: 600; }
.dash-slash { color: var(--fg-faint); }

/* ------------------------------------------------------------------ meters */

.meter {
  display: inline-block;
  width: 4.5rem;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  vertical-align: middle;
}
.meter-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.meter-lg { width: 100%; height: 9px; margin-top: 0.4rem; }

/* -------------------------------------------------------------- flash note */

.note.ok {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--ok) 12%, var(--bg-raised));
}

/* -------------------------------------------------------------------- auth */

.auth-card { max-width: 27rem; }
.auth-brand { font-size: var(--step-2); margin-bottom: var(--sp-5); }
.auth-title { font-size: var(--step-2); margin-bottom: var(--sp-4); }
.auth-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.auth-switch { margin: 0; font-size: var(--step--1); color: var(--fg-muted); }
.auth-legal { margin-top: var(--sp-4); }

/* ------------------------------------------------------------------- forms */

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field-label { font-size: var(--step--1); color: var(--fg-muted); }
.input, .select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
  font: inherit;
  font-size: var(--step-0);
  width: 100%;
}
.input:focus, .select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field-narrow { max-width: 12rem; }
.field-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.field-row .field { flex: 1 1 10rem; }

.create-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end;
  margin-top: var(--sp-4);
}
.create-form .field { flex: 0 1 auto; min-width: 8rem; }
.create-form .field:first-of-type { flex: 1 1 12rem; }
.create-submit { flex: 0 0 auto; }

.stack-form { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 28rem; align-items: flex-start; }
.stack-form .field, .stack-form .field-row { width: 100%; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------- page head */

.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.page-head h1, .page-head h2 { margin: 0; }
.detail-head { align-items: center; }
.detail-id { font-size: var(--step--1); color: var(--fg-muted); }

/* ------------------------------------------------------------------ tables */

.stream-table { width: 100%; }
.stream-table td, .stream-table th { vertical-align: middle; }
.stream-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mono, .mono-id { font-family: var(--font-mono); }
.mono-id { font-size: var(--step--1); color: var(--fg-muted); }
.stream-link { font-weight: 550; }
.row-action { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------- badges + */

.badge-json { color: var(--accent); border-color: var(--accent-line); background: var(--accent-bg); }
.badge-raw  { color: var(--fg-muted); }
.badge-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line-strong)); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.badge-test { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
.badge-off  { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line-strong)); background: var(--danger-bg); }

/* ------------------------------------------------------------- empty state */

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  text-align: center;
  background: var(--bg-sunk);
}
.empty-title { font-weight: 600; margin-bottom: var(--sp-1); }

/* -------------------------------------------------------------- stat strip */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-4);
}
.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.stat-k { font-size: var(--step--1); color: var(--fg-muted); }
.stat-v { font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-wide { grid-column: 1 / -1; }

.detail-window { margin-top: var(--sp-4); }
.detail-window h3 { margin-bottom: var(--sp-2); }

/* --------------------------------------------------------------- refresh + */

.refresh-controls { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  font-size: var(--step--1);
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg-muted);
  text-decoration: none;
  background: var(--bg-raised);
}
.chip:hover { color: var(--fg); border-color: var(--accent-line); }

.snippet-h { font-size: var(--step-0); margin-top: var(--sp-5); margin-bottom: var(--sp-2); color: var(--fg-muted); }

.endpoint-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.endpoint-list li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.endpoint-list code { font-size: var(--step--1); }
.endpoint-desc { font-size: var(--step--1); }

/* -------------------------------------------------------------- danger box */

.danger-zone {
  margin-top: var(--sp-6);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line-strong));
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--danger) 5%, transparent);
}
.danger-zone h3 { margin: 0 0 var(--sp-1); color: var(--danger); }
.btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

/* ---------------------------------------------------------------- settings */

.kv { margin: 0; }
.kv-row { display: flex; gap: var(--sp-3); padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.kv-row dt { flex: 0 0 9rem; color: var(--fg-muted); font-size: var(--step--1); margin: 0; }
.kv-row dd { margin: 0; }

/* ---------------------------------------------------------------- utility */

.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }