/* ── Design tokens + shared components ─────────────────────────────────
   One type scale (rem, no compounding), one gray ramp, one accent.
   New UI uses these; migrate page-local CSS here instead of adding more. */

:root {
    --fs-xs: 0.75rem;    /* badges, pills, fine print */
    --fs-sm: 0.8125rem;  /* metadata, secondary text */
    --fs-md: 0.875rem;   /* body, table cells */
    --fs-lg: 1.0625rem;  /* section titles */

    --ink: #111827;      /* primary text */
    --ink-2: #374151;    /* headings, emphasized */
    --muted: #6b7280;    /* secondary text */
    --faint: #9ca3af;    /* separators, placeholders */
    --line: #e5e7eb;     /* borders */
    --line-soft: #f3f4f6;/* row separators, soft fills */
    --bg-soft: #f9fafb;  /* hover, panels */

    --page-width: 1400px;

    --accent: #4f46e5; --accent-soft: #e0e7ff; --accent-ink: #3730a3;
    --ok: #047857;   --ok-soft: #d1fae5;
    --warn: #b45309; --warn-soft: #fef3c7;
    --bad: #b91c1c;  --bad-soft: #fee2e2;
}

/* Status badges — use instead of bare colored text */
.badge { display: inline-block; padding: 1px 9px; border-radius: 999px;
         font-size: var(--fs-xs); font-weight: 600; line-height: 1.7; white-space: nowrap; }
.badge-ok     { background: var(--ok-soft);     color: var(--ok); }
.badge-warn   { background: var(--warn-soft);   color: var(--warn); }
.badge-bad    { background: var(--bad-soft);    color: var(--bad); }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
.badge-muted  { background: var(--line-soft);   color: var(--muted); }

/* Key=value pills (labels etc.) */
.pill { display: inline-block; background: var(--line-soft); color: var(--ink-2);
        border-radius: 4px; padding: 1px 7px; font-size: var(--fs-xs); }

/* Two-line list rows in a table shell (no header row) */
.list-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.list-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.list-table tr:last-child td { border-bottom: none; }
.list-table tr:hover td { background: var(--bg-soft); }
.list-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-table .actions { text-align: right; white-space: nowrap; width: 1%; }

.row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
             color: var(--ink); font-weight: 500; }
.row-meta  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
             margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); }
.row-meta .dot::before { content: '·'; color: var(--faint); }

.muted { color: var(--muted); font-size: var(--fs-sm); }

/* Small secondary button */
.btn-sm { font-size: var(--fs-xs); padding: 2px 10px; border-radius: 6px;
          border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; }
.btn-sm:hover { border-color: var(--accent); color: var(--accent); }

/* Small square icon button (use with iconButton() from auth.js) */
.btn-icon { display: inline-flex; align-items: center; justify-content: center;
            width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 6px;
            background: #fff; color: var(--muted); cursor: pointer;
            transition: background 0.15s, color 0.15s; }
.btn-icon:hover { background: var(--bg-soft); color: var(--accent); }

.section-h { margin: 28px 0 6px; font-size: var(--fs-sm); font-weight: 600;
             color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }