/* ── Buttons ─────────────────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: 500; line-height: 1.4;
  border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-text-inverse);
  border: 1px solid transparent;
  white-space: nowrap; cursor: pointer; user-select: none;
}
.button:hover  { background: var(--color-primary-hover); box-shadow: var(--shadow-sm); }
.button:active { background: var(--color-primary-hover); transform: translateY(1px); }
.button--secondary { background: var(--color-surface-offset); color: var(--color-text); border-color: var(--color-border); }
.button--secondary:hover { background: var(--color-surface-dynamic); }
.button--ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; }
.button--ghost:hover { background: var(--color-surface-offset); color: var(--color-text); }
.button--small { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.button--danger { background: var(--color-error); }
.button--danger:hover { background: color-mix(in oklch, var(--color-error) 85%, black); }
.button:disabled { opacity: 0.45; pointer-events: none; }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.input {
  display: block; width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 18%, transparent); outline: none; }
.input::placeholder { color: var(--color-text-faint); }
.input--small { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
select.input { cursor: pointer; }
.input-row { display: flex; gap: var(--space-2); }
.input-row .input { flex: 1; }
.field-label { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-1); }
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 1px var(--space-2);
  font-size: var(--text-xs); font-weight: 500; line-height: 1.5;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset); color: var(--color-text-muted);
  white-space: nowrap;
}
.badge--quick   { background: var(--color-primary-subtle);  color: var(--color-primary); }
.badge--exact   { background: var(--color-timeout-bg);      color: var(--color-timeout); }
.badge--full    { background: var(--color-success-bg);      color: var(--color-success); }
.badge--valid   { background: var(--color-success-bg);      color: var(--color-success); }
.badge--timeout { background: var(--color-timeout-bg);      color: var(--color-timeout); }
.badge--error   { background: var(--color-error-bg);        color: var(--color-error);   }
.badge--warning { background: var(--color-warning-bg);      color: var(--color-warning); }
.badge--unknown { background: var(--color-surface-2, #e8e8e8); color: var(--color-muted, #666); }
.badge--dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Chips ───────────────────────────────────────────────────────────── */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 2rem; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-subtle); color: var(--color-primary);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500;
}
.chip__remove { cursor: pointer; opacity: 0.6; font-size: 1.1em; line-height: 1; }
.chip__remove:hover { opacity: 1; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.table-shell { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.table-shell--tall { max-height: 72vh; overflow-y: auto; }
thead { position: sticky; top: 0; z-index: 1; background: var(--color-surface); }
th {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs); font-weight: 600; text-align: left;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap; user-select: none; cursor: pointer;
}
th:hover { color: var(--color-text); }
td {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-surface-offset); }
.empty-cell { color: var(--color-text-faint); text-align: center; padding: var(--space-8); font-style: italic; }
td.mono, .mono { font-family: var(--font-mono); font-size: var(--text-xs); }
td.num  { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: var(--text-xs); }

/* ── Cards / Panels ──────────────────────────────────────────────────── */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.panel--chart { padding: var(--space-4); position: relative; }
.panel--wide  { grid-column: span 2; }
.panel__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-4); }
.panel__header h3 { font-size: var(--text-base); font-weight: 600; }
/* Opt-in only (see charts.js's _fillWrap / extra.fillHeight) — makes a chart's canvas
   fill .panel--chart's full height instead of sizing itself purely from width. Used for
   a vertical bar chart placed next to a taller _hbarWrap'd horizontal bar in the same
   .panel-grid row, so CSS Grid's row-stretch doesn't leave it looking cramped. */
.panel--chart-fill { display: flex; flex-direction: column; }
.panel--chart-fill > .panel__header { flex-shrink: 0; }
/* min-height acts only as a floor: inside a grid-stretched pairing (the original use
   case) the row is already taller than this and flex:1 fills it as before. For a
   standalone fillHeight chart with no stretch target (e.g. compare.js's Page Faults /
   Context Switches / Peak Memory panels), the panel's own height is otherwise derived
   purely from this wrapper's content — without a floor it collapses toward 0, since
   maintainAspectRatio:false gives the canvas nothing to size itself from.
   The floor itself is responsive: a full-width desktop panel warrants a much taller
   default than a narrow mobile column does. A chart that needs something other than
   either default (e.g. a simple single-series histogram) passes an explicit
   `extra.fillHeight: <px>` instead of `true`, which lands as an inline min-height and
   overrides this rule per-element regardless of viewport. */
.chart-fill-wrap { position: relative; width: 100%; flex: 1 1 auto; min-height: 220px; }
@media (min-width: 901px) {
  /* --fill-h-desktop is set inline per-chart when a chart wants more than this default
     (see _fillWrap's `{desktop: <px>}` shape) — falls back to the plain default otherwise. */
  .chart-fill-wrap { min-height: var(--fill-h-desktop, 440px); }
}

/* ── Metric Cards ────────────────────────────────────────────────────── */
.metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.metric-card > p      { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-1); }
.metric-card > strong { display: block; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.metric-card > span   { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ── Callout ─────────────────────────────────────────────────────────── */
.callout {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-offset);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.callout--warning { border-left-color: var(--color-warning); background: var(--color-warning-bg); color: var(--color-warning); }
.callout--info    { border-left-color: var(--color-primary); background: var(--color-primary-subtle); }
.callout--success { border-left-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success); }

/* ── Detail stack ────────────────────────────────────────────────────── */
.detail-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.detail-row   { display: flex; flex-direction: column; gap: 2px; }
.detail-row dt { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.detail-row dd { font-size: var(--text-sm); word-break: break-all; }

/* ── Selection list (compare picker) ────────────────────────────────── */
.selection-list { border: 1px solid var(--color-border); border-radius: var(--radius-md); max-height: 280px; overflow-y: auto; margin-top: var(--space-2); }
.selection-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); cursor: pointer; border-bottom: 1px solid var(--color-divider); }
.selection-list__item:last-child { border-bottom: none; }
.selection-list__item:hover     { background: var(--color-surface-offset); }
.selection-list__item.is-selected { background: var(--color-primary-subtle); }
.selection-list__item input { accent-color: var(--color-primary); flex-shrink: 0; }
.selection-list__meta { flex: 1; min-width: 0; }
.selection-list__meta strong { display: block; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selection-list__meta span   { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-16) var(--space-8); color: var(--color-text-muted); }
.empty-state__icon { font-size: 2rem; margin-bottom: var(--space-4); opacity: 0.35; }
.empty-state h4 { color: var(--color-text); margin-bottom: var(--space-2); }
.empty-state p  { font-size: var(--text-sm); max-width: 40ch; }

/* ── Toast ───────────────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 999; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; }
.toast {
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); font-weight: 500; pointer-events: auto;
  animation: toast-in 200ms ease-out;
}
.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-error); }
.toast--info    { border-left: 3px solid var(--color-primary); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Skeletons ───────────────────────────────────────────────────────── */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skeleton { background: linear-gradient(90deg, var(--color-surface-offset) 25%, var(--color-surface-dynamic) 50%, var(--color-surface-offset) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); }
.skeleton-text    { height: 1em;   margin-bottom: var(--space-2); }
.skeleton-heading { height: 1.5em; width: 40%; margin-bottom: var(--space-3); }
.skeleton-rect    { height: 120px; }

/* ── Misc helpers ────────────────────────────────────────────────────── */
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); }
.muted   { font-size: var(--text-sm); color: var(--color-text-muted); }
.code    { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-surface-offset); padding: 1px var(--space-2); border-radius: var(--radius-sm); }

/* ── Info hints (chart subtitles with a title="..." explanation) ───────── */
/* Native title tooltips need hover, which touch doesn't have — tapping one would
   otherwise just select its text or open the OS callout menu. See app.js's
   initInfoHints, which shows this on tap instead (also works with click on desktop,
   alongside the native hover tooltip that still fires there). */
[title][style*="cursor:help"] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.info-tooltip {
  position: absolute; z-index: 200; max-width: 280px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  font-size: var(--text-xs); line-height: 1.5; color: var(--color-text);
}

/* ── Usage bar ───────────────────────────────────────────────────────── */
.usage-bar { height: 4px; border-radius: var(--radius-full); background: var(--color-surface-offset); overflow: hidden; margin-top: var(--space-2); }
.usage-bar__fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); width: var(--fill, 0%); transition: width 600ms ease; }
.usage-bar__fill--warn   { background: var(--color-warning); }
.usage-bar__fill--danger { background: var(--color-error); }

/* ── Pagination ──────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: var(--space-2); justify-content: center; padding-top: var(--space-4); }
.pagination__info { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 var(--space-2); }