/* panelkit — base components (v1.0). Requires pk-tokens.css first.
 *
 * Plain CSS, `pk-` prefix, BEM-light: .pk-btn, .pk-btn--primary, .pk-card__header.
 * Only roles (var(--pk-*)), never hex. Catalogue and markup: preview.html.
 */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--pk-font); font-size: var(--pk-text-md); line-height: var(--pk-leading);
  color: var(--pk-text); background: var(--pk-bg);
  -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
}
a { color: var(--pk-link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, .pk-mono { font-family: var(--pk-mono); font-size: 0.92em; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; color: var(--pk-text); }
h1 { font-size: var(--pk-text-xl); font-weight: 700; }
h2 { font-size: var(--pk-text-lg); font-weight: 650; }
h3 { font-size: var(--pk-text-md); font-weight: 650; }
:focus-visible { outline: none; box-shadow: var(--pk-focus); border-radius: var(--pk-radius-sm); }
.pk-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pk-muted { color: var(--pk-text-3); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Shell: top bar + sidebar + content ───────────────────────── */
.pk-shell { display: grid; grid-template-columns: var(--pk-sidebar-w) 1fr; grid-template-rows: var(--pk-topbar-h) 1fr; min-height: 100vh; }
.pk-topbar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--pk-space-4);
  padding: 0 var(--pk-space-4); background: var(--pk-chrome); color: var(--pk-chrome-text);
  border-bottom: 1px solid var(--pk-chrome-3);
}
.pk-topbar__brand { display: flex; align-items: center; gap: var(--pk-space-2); font-weight: 700; color: #fff; text-decoration: none; }
.pk-topbar__mark { width: 22px; height: 22px; border-radius: 5px; background: var(--pk-brand); }
.pk-topbar__spacer { flex: 1; }
.pk-topbar a, .pk-topbar button { color: var(--pk-chrome-text); }
.pk-sidebar { background: var(--pk-chrome); color: var(--pk-chrome-text); padding: var(--pk-space-3) 0; overflow-y: auto; scrollbar-width: none; }
.pk-sidebar__section { padding: var(--pk-space-4) var(--pk-space-4) var(--pk-space-1); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pk-chrome-muted); }
.pk-nav-link {
  display: flex; align-items: center; gap: var(--pk-space-3); padding: 7px var(--pk-space-4);
  color: var(--pk-chrome-text); border-left: 3px solid transparent; text-decoration: none;
  transition: background var(--pk-ease);
}
.pk-nav-link:hover { background: var(--pk-chrome-2); text-decoration: none; }
.pk-nav-link[aria-current="page"], .pk-nav-link.is-active { background: var(--pk-chrome-3); border-left-color: var(--pk-brand); color: #fff; }
.pk-nav-link[aria-current="page"] .pk-icon, .pk-nav-link.is-active .pk-icon { color: var(--pk-brand); }
.pk-main { padding: var(--pk-space-6); overflow-x: auto; }
.pk-main > * { max-width: var(--pk-content-max); }
@media (max-width: 900px) {
  .pk-shell { grid-template-columns: 1fr; }
  .pk-sidebar { display: none; }
  .pk-shell.is-nav-open .pk-sidebar { display: block; position: fixed; inset: var(--pk-topbar-h) auto 0 0; width: var(--pk-sidebar-w); z-index: 40; }
}

/* ── Page header: breadcrumb, title, description, actions ─────── */
.pk-breadcrumb { display: flex; gap: var(--pk-space-2); font-size: var(--pk-text-sm); color: var(--pk-text-3); margin-bottom: var(--pk-space-2); }
.pk-breadcrumb a { color: var(--pk-link); }
.pk-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--pk-space-4); margin-bottom: var(--pk-space-6); }
.pk-page-header p { margin: var(--pk-space-1) 0 0; color: var(--pk-text-2); }
.pk-actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); }

/* ── Card ─────────────────────────────────────────────────────── */
.pk-card { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-radius); box-shadow: var(--pk-shadow); margin-bottom: var(--pk-space-5); }
.pk-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--pk-space-3); padding: var(--pk-space-3) var(--pk-space-4); border-bottom: 1px solid var(--pk-border); }
.pk-card__header h2 { font-size: var(--pk-text-md); }
.pk-card__body { padding: var(--pk-space-4); }
.pk-card__footer { padding: var(--pk-space-3) var(--pk-space-4); border-top: 1px solid var(--pk-border); background: var(--pk-surface-2); border-radius: 0 0 var(--pk-radius) var(--pk-radius); }
.pk-grid { display: grid; gap: var(--pk-space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--pk-space-5); }

/* ── KPI tile: a headline number, not a chart ─────────────────── */
.pk-kpi { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-radius); padding: var(--pk-space-4); box-shadow: var(--pk-shadow); }
.pk-kpi__label { font-size: var(--pk-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pk-text-2); }
.pk-kpi__value { font-size: var(--pk-text-2xl); font-weight: 650; line-height: 1.1; margin-top: var(--pk-space-1); font-variant-numeric: tabular-nums; }
.pk-kpi__meta { font-size: var(--pk-text-sm); color: var(--pk-text-3); margin-top: var(--pk-space-1); }
a.pk-kpi { display: block; color: inherit; text-decoration: none; }
a.pk-kpi:hover { border-color: var(--pk-border-strong); }

/* ── Buttons ──────────────────────────────────────────────────── */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-2);
  height: 32px; padding: 0 var(--pk-space-3); font: inherit; font-weight: 600; font-size: var(--pk-text-sm);
  border-radius: var(--pk-radius-sm); border: 1px solid var(--pk-border-strong);
  background: var(--pk-surface); color: var(--pk-text); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--pk-ease), border-color var(--pk-ease);
}
.pk-btn:hover { background: var(--pk-surface-3); text-decoration: none; }
.pk-btn--primary { background: var(--pk-primary); border-color: var(--pk-primary); color: var(--pk-on-primary); }
.pk-btn--primary:hover { background: var(--pk-primary-hover); border-color: var(--pk-primary-hover); }
.pk-btn--danger { color: var(--pk-critical); border-color: var(--pk-critical-border); }
.pk-btn--danger:hover { background: var(--pk-critical-soft); }
.pk-btn--ghost { border-color: transparent; background: transparent; }
.pk-btn--sm { height: 26px; padding: 0 var(--pk-space-2); font-size: var(--pk-text-xs); }
.pk-btn:disabled, .pk-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.pk-btn[aria-busy="true"]::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pk-spin 0.7s linear infinite; }
@keyframes pk-spin { to { transform: rotate(360deg); } }

/* ── Forms ────────────────────────────────────────────────────── */
.pk-field { display: flex; flex-direction: column; gap: var(--pk-space-1); margin-bottom: var(--pk-space-4); }
.pk-label { font-weight: 600; font-size: var(--pk-text-sm); }
.pk-hint { font-size: var(--pk-text-xs); color: var(--pk-text-3); }
.pk-error { font-size: var(--pk-text-xs); color: var(--pk-critical); }
.pk-input, .pk-select, .pk-textarea {
  width: 100%; min-height: 32px; padding: 6px var(--pk-space-3); font: inherit;
  color: var(--pk-text); background: var(--pk-surface); border: 1px solid var(--pk-border-strong); border-radius: var(--pk-radius-sm);
}
.pk-input:focus, .pk-select:focus, .pk-textarea:focus { outline: none; border-color: var(--pk-primary); box-shadow: var(--pk-focus); }
.pk-input[aria-invalid="true"] { border-color: var(--pk-critical); }
.pk-input:disabled { background: var(--pk-surface-2); color: var(--pk-text-3); }
.pk-form-grid { display: grid; gap: 0 var(--pk-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ── Status chip: icon + label, never colour alone ────────────── */
.pk-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--pk-radius-pill);
  font-size: var(--pk-text-xs); font-weight: 600; border: 1px solid; white-space: nowrap;
}
.pk-chip::before { font-size: 10px; line-height: 1; }
.pk-chip--good     { color: var(--pk-good);     background: var(--pk-good-soft);     border-color: var(--pk-good-border); }
.pk-chip--warning  { color: var(--pk-warning);  background: var(--pk-warning-soft);  border-color: var(--pk-warning-border); }
.pk-chip--critical { color: var(--pk-critical); background: var(--pk-critical-soft); border-color: var(--pk-critical-border); }
.pk-chip--info     { color: var(--pk-info);     background: var(--pk-info-soft);     border-color: var(--pk-info-border); }
.pk-chip--neutral  { color: var(--pk-neutral);  background: var(--pk-neutral-soft);  border-color: var(--pk-neutral-border); }
.pk-chip--good::before     { content: "●"; }
.pk-chip--warning::before  { content: "▲"; }
.pk-chip--critical::before { content: "✕"; }
.pk-chip--info::before     { content: "i"; font-weight: 800; font-style: italic; }
.pk-chip--neutral::before  { content: "○"; }

/* ── Alert (flash messages) ───────────────────────────────────── */
.pk-alert { display: flex; gap: var(--pk-space-3); padding: var(--pk-space-3) var(--pk-space-4); border: 1px solid; border-left-width: 4px; border-radius: var(--pk-radius-sm); margin-bottom: var(--pk-space-4); }
.pk-alert--good     { background: var(--pk-good-soft);     border-color: var(--pk-good-border);     border-left-color: var(--pk-good); }
.pk-alert--warning  { background: var(--pk-warning-soft);  border-color: var(--pk-warning-border);  border-left-color: var(--pk-warning); }
.pk-alert--critical { background: var(--pk-critical-soft); border-color: var(--pk-critical-border); border-left-color: var(--pk-critical); }
.pk-alert--info     { background: var(--pk-info-soft);     border-color: var(--pk-info-border);     border-left-color: var(--pk-info); }
.pk-alert strong { display: block; }

/* ── Table ────────────────────────────────────────────────────── */
.pk-table-wrap { overflow-x: auto; }
.pk-table { width: 100%; border-collapse: collapse; font-size: var(--pk-text-sm); }
.pk-table th {
  text-align: left; font-weight: 600; font-size: var(--pk-text-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pk-text-2); background: var(--pk-surface-2); padding: var(--pk-space-2) var(--pk-space-4); border-bottom: 1px solid var(--pk-border);
}
.pk-table td { padding: var(--pk-space-2) var(--pk-space-4); border-bottom: 1px solid var(--pk-border); vertical-align: middle; }
.pk-table tbody tr:hover { background: var(--pk-surface-3); }
.pk-table tbody tr:last-child td { border-bottom: 0; }
.pk-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.pk-table .is-actions { text-align: right; white-space: nowrap; }
.pk-empty { padding: var(--pk-space-8) var(--pk-space-4); text-align: center; color: var(--pk-text-3); }
.pk-empty strong { display: block; color: var(--pk-text); margin-bottom: var(--pk-space-1); }

/* ── Tabs ─────────────────────────────────────────────────────── */
.pk-tabs { display: flex; gap: var(--pk-space-1); border-bottom: 1px solid var(--pk-border); margin-bottom: var(--pk-space-5); }
.pk-tab { padding: var(--pk-space-2) var(--pk-space-3); color: var(--pk-text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.pk-tab:hover { color: var(--pk-text); text-decoration: none; }
.pk-tab[aria-selected="true"] { color: var(--pk-primary); border-bottom-color: var(--pk-primary); }

/* ── Dialog (native <dialog>) ─────────────────────────────────── */
.pk-dialog { border: 1px solid var(--pk-border); border-radius: var(--pk-radius); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--pk-surface); color: var(--pk-text); box-shadow: var(--pk-shadow-lg); }
.pk-dialog::backdrop { background: var(--pk-overlay); }
.pk-dialog__header { padding: var(--pk-space-4); border-bottom: 1px solid var(--pk-border); }
.pk-dialog__body { padding: var(--pk-space-4); }
.pk-dialog__footer { display: flex; justify-content: flex-end; gap: var(--pk-space-2); padding: var(--pk-space-3) var(--pk-space-4); border-top: 1px solid var(--pk-border); background: var(--pk-surface-2); }

/* ── Code block / terminal output ─────────────────────────────── */
.pk-code { font-family: var(--pk-mono); font-size: var(--pk-text-xs); background: var(--pk-chrome); color: var(--pk-chrome-text); padding: var(--pk-space-3) var(--pk-space-4); border-radius: var(--pk-radius-sm); overflow-x: auto; white-space: pre; }

/* ── Toasts (web/ui.js toast()) ───────────────────────────────── */
.pk-toasts { position: fixed; right: var(--pk-space-5); bottom: var(--pk-space-5); z-index: 60; display: flex; flex-direction: column; gap: var(--pk-space-2); width: min(380px, calc(100vw - 40px)); }
.pk-toasts .pk-alert { margin: 0; background-color: var(--pk-surface); box-shadow: var(--pk-shadow-lg); }

/* ── Icons (sprite SVG, web/dom.js icon()) ────────────────────── */
.pk-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main:focus, main:focus-visible { outline: none; box-shadow: none; }

/* ── Key / value list (detail pages) ──────────────────────────── */
.pk-dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: var(--pk-space-2) var(--pk-space-6); margin: 0; }
.pk-dl dt { color: var(--pk-text-2); font-weight: 600; font-size: var(--pk-text-sm); }
.pk-dl dd { margin: 0; }