/* Shared components: pills, buttons, panels, stats, tables, confidence, palette. */
.pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-3); background: var(--panel); white-space: nowrap; }
.pill.ok   { border-color: color-mix(in srgb, var(--ok)   30%, transparent); color: var(--ok);   background: var(--ok-bg); }
.pill.warn { border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); background: var(--warn-bg); }
.pill.crit { border-color: color-mix(in srgb, var(--crit) 30%, transparent); color: var(--crit); background: var(--crit-bg); }
.pill.solid { border-color: var(--ink); color: var(--panel); background: var(--ink); }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--ink-4); }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.crit { background: var(--crit); }
.dot.idle { background: var(--ink-4); } .dot.busy { background: var(--ink); }
.dot.pulse { animation: dot-pulse 1.4s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* Indeterminate progress (ui/progress.js) — spinner + live stage hint + bar. */
@keyframes ag-spin { to { transform: rotate(360deg); } }
@keyframes ag-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.ag-progress { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-top: 8px; font-size: 13px; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ag-progress-row { display: flex; align-items: center; gap: 10px; }
.ag-spin { flex: none; width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: ag-spin .7s linear infinite; }
.ag-progress-stage { color: var(--ink-3); }
.ag-progress-bar { height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.ag-progress-bar::after { content: ''; display: block; height: 100%; width: 30%; border-radius: 2px; background: var(--accent); animation: ag-slide 1.3s ease-in-out infinite; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); color: var(--ink-2); height: 28px;
  padding: 0 10px; font-size: var(--fs); font-weight: 500; box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:hover { background: var(--hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn.primary { background: var(--ink); color: var(--panel); border-color: var(--ink); box-shadow: var(--highlight), var(--shadow-xs); }
.btn.primary:hover { background: color-mix(in srgb, var(--ink) 88%, var(--panel)); box-shadow: var(--highlight), var(--shadow-sm); }
.panel { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); margin-bottom: 12px; box-shadow: var(--shadow-card); }
.panel > h3 { padding: 8px 12px; border-bottom: 1px solid var(--line-2); font-size: var(--fs);
  font-weight: 600; color: var(--ink-2); }
.panel > .body { padding: 12px; }
.stat { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel); padding: 12px; box-shadow: var(--shadow-card); }
.stat .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.stat .val { font-size: 22px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
.stat.muted .val { color: var(--ink-4); }
.cap { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px;
  border-radius: 3px; border: 1px solid var(--line); color: var(--ink-3); }
.cap.live    { color: var(--ok);   border-color: color-mix(in srgb, var(--ok)   30%, transparent); background: var(--ok-bg); }
.cap.partial { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-bg); }
.cap.preview { color: var(--ink-3); border-color: var(--line); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs); }
.tbl th { text-align: left; color: var(--ink-3); font-weight: 500; font-size: var(--fs-sm);
  padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 6px 8px; border-bottom: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.tbl tbody tr { transition: background var(--dur-fast) var(--ease); }
.tbl tbody tr:hover td { background: var(--hover); }
.conf { display: inline-flex; align-items: center; gap: 6px; }
.conf-track { position: relative; width: 64px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.conf-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: 999px; }
.conf-fill.low { background: var(--crit); }
.conf-fill.model { background-image: repeating-linear-gradient(45deg, var(--ink), var(--ink) 2px, transparent 2px, transparent 4px); }
.conf-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-4); }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.note { color: var(--ink-3); font-size: var(--fs-sm); }
.sp { flex: 1; }
.empty { color: var(--ink-4); font-size: var(--fs); padding: 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r); }
.palette { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 18%, transparent); display: flex;
  align-items: flex-start; justify-content: center; padding-top: 14vh; z-index: 50; }
.palette .box { width: min(560px, 92vw); background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 8px; box-shadow: var(--shadow-card); overflow: hidden; }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; outline: none;
  background: transparent; transition: box-shadow var(--dur-fast) var(--ease); }
.palette input:focus { box-shadow: var(--halo); }
.palette .opt { padding: 8px 14px; display: flex; gap: 8px; align-items: center; transition: background var(--dur-fast) var(--ease); }
.palette .opt[aria-selected="true"] { background: var(--selected); }
.pipeline { display: flex; gap: 0; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; margin: 12px 0; box-shadow: var(--shadow-card); }
.plane-card { flex: 1; padding: 16px 18px; border-right: 1px solid var(--line); }
.plane-card:last-child { border-right: none; }
.plane-name { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 4px; }
.plane-desc { font-size: var(--fs-sm); color: var(--ink-3); margin: 4px 0 12px; line-height: 1.4; }
/* status badges — accessible: always text + glyph, never color-only */
.status-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500}
.status-badge.status-ok{color:var(--ok)} .status-badge.status-warn{color:var(--warn)}
.status-badge.status-crit{color:var(--crit)} .status-badge.status-info{color:var(--accent)}
.status-badge.status-pending{color:var(--ink-3)} .status-badge.status-na{color:var(--ink-4)}
/* rich empty states */
.empty-state{padding:24px;border:1px dashed var(--line);border-radius:var(--r);text-align:center}
.empty-title{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 6px}
.empty-why{font-size:12px;color:var(--ink-3);margin:0 auto 12px;max-width:420px}
.empty-ex{font-family:var(--mono);font-style:italic;font-size:11px;color:var(--ink-3);margin:0 0 12px}
.empty-actions{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.empty-doc{font-size:11px;color:var(--accent)}
/* form field helpers */
.field-helper{font-size:11px;color:var(--ink-3);margin:2px 0 6px}
label.field-label{font-size:11px;font-weight:600;display:block;margin-bottom:3px}
/* intent-first scope picker cards (keys.js / keys_intent.js) */
.intent-card{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer;margin-bottom:6px;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.intent-card:hover{background:var(--hover)}
.intent-card.selected{border-color:var(--accent);background:var(--accent-soft)} .intent-warn{margin-top:6px}