/* app.css - the dashboard's own layer over the kinpaku tokens. No hand-typed oklch values and no
   raw font sizes: everything reads a token, per the Impeccable "Tokens vs Classes" rule. The
   system is mostly flat (Hairline First Rule); depth is a 1px rule and a surface shift, not shadow.

   Accessibility is load-bearing, not decorative: :focus-visible is a real gold outline with offset,
   prefers-reduced-motion removes every transition, and the light/dark split is driven by the token
   file so this sheet never branches on theme itself. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--ks-font-body);
  font-size: var(--ks-type-body-size);
  line-height: var(--ks-type-body-line);
  -webkit-font-smoothing: antialiased;
}

body {
  max-width: 1180px;
  margin-inline: auto;
  padding: var(--ks-s-md) var(--ks-s-md) var(--ks-s-2xl);
}

h1, h2, h3 { color: var(--text-strong); margin: 0 0 var(--ks-s-xs); }
h3 { font-family: var(--ks-font-body); font-size: var(--ks-type-title-size); font-weight: 600; }
p { margin: 0 0 var(--ks-s-sm); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
code, pre, .mono { font-family: var(--ks-font-mono); }

.eyebrow {
  font-family: var(--ks-font-mono);
  font-size: var(--ks-type-eyebrow-size);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: var(--ks-s-xs) var(--ks-s-sm); border-radius: var(--ks-r-sm); z-index: 20;
}
.skip-link:focus { left: var(--ks-s-xs); top: var(--ks-s-xs); }

/* ---- focus + motion ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--ks-r-xs);
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Theme adaptation. The token file owns the colour values for each scheme; this block only carries
   the material differences that are not pure colour. On a light ground the flat borders read faint,
   so panels lean a touch harder on the rule; on dark the system stays borderless-first per the
   Hairline First Rule. */
@media (prefers-color-scheme: light) {
  .status-strip, .approval-card, .config-field, .outcome-tile { border-color: var(--rule); }
  .code-block { background: var(--inset-bg); }
}

/* ---- status strip ---- */
.status-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ks-s-sm) var(--ks-s-lg);
  align-items: start;
  padding: var(--ks-s-md);
  margin-bottom: var(--ks-s-md);
  background: var(--panel-bg);
  border: 1px solid var(--rule);
  border-radius: var(--ks-r-md);
}
.status-identity { display: flex; align-items: center; gap: var(--ks-s-xs); }
.brand-mark {
  width: 26px; height: 26px; display: inline-block;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 62%, 62% 62%, 62% 0);
}
.brand-word {
  font-family: var(--ks-font-wordmark);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-strong); font-weight: 600;
}
.status-mode { grid-column: 2; }
.status-description { color: var(--text-muted); margin: var(--ks-s-xs) 0 0; max-width: 62ch; }
.status-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--ks-s-md); margin: 0; }
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact-term { font-family: var(--ks-font-mono); font-size: var(--ks-type-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.fact-value { color: var(--text); margin: 0; }

.mode-pill {
  display: inline-block; padding: 4px 14px; border-radius: var(--ks-r-xs);
  font-family: var(--ks-font-mono); letter-spacing: 0.14em; font-weight: 600;
  border: 1px solid var(--rule-strong);
}
.mode-live { color: var(--accent-2); border-color: var(--accent-2); }
.mode-shadow { color: var(--accent); border-color: var(--rule-strong); }
.mode-killed { color: var(--danger); border-color: var(--danger); background: color-mix(in oklab, var(--danger) 12%, transparent); }
.mode-unknown { color: var(--text-muted); }

.mode-control { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--ks-s-xs); flex-wrap: wrap; }

/* ---- kill region ---- */
.kill {
  grid-column: 1 / -1;
  padding: var(--ks-s-sm);
  border: 1px solid var(--danger);
  border-radius: var(--ks-r-sm);
  background: color-mix(in oklab, var(--danger) 7%, var(--inset-bg));
}
.kill-heading { color: var(--danger); }
.kill-copy { color: var(--text); margin: 0 0 var(--ks-s-xs); max-width: 68ch; }
.kill-copy-strong { color: var(--text-strong); font-weight: 600; }
.kill-copy-muted { color: var(--text-muted); }
.kill-terminal { border-width: 2px; }
.kill-confirm { display: flex; flex-direction: column; gap: var(--ks-s-xs); margin-top: var(--ks-s-xs); }
.kill-actions { display: flex; gap: var(--ks-s-xs); }
.kill-unknown { border-color: var(--rule); background: var(--inset-bg); }
.kill-unknown .kill-heading { color: var(--text-muted); }

/* ---- tabs ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: var(--ks-s-md); }
.tab {
  padding: var(--ks-s-xs) var(--ks-s-sm);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ks-ease), border-color 160ms var(--ks-ease);
}
.tab:hover { color: var(--text-strong); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- buttons ---- */
.btn {
  font-family: var(--ks-font-body); font-size: 0.95rem; font-weight: 600;
  min-height: 40px; padding: 0 20px; border-radius: var(--ks-r-xs);
  border: 1px solid transparent; cursor: pointer;
  transition: background 160ms var(--ks-ease), border-color 160ms var(--ks-ease), transform 120ms var(--ks-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }
.btn-sm { min-height: 32px; padding: 0 14px; font-size: 0.85rem; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--ks-kinpaku-pale); }
.btn-secondary { background: transparent; color: var(--accent); border-color: var(--rule-strong); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); }
.btn-quiet { background: var(--field-bg); color: var(--text); border-color: var(--rule); }
.btn-ghost { background: transparent; color: var(--accent); border-color: transparent; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: color-mix(in oklab, var(--danger) 14%, transparent); }
.btn-mode.is-current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- panels + states ---- */
.view-host { display: block; }
.panel-state {
  padding: var(--ks-s-lg); border: 1px dashed var(--rule); border-radius: var(--ks-r-md);
  background: var(--inset-bg); text-align: left;
}
.panel-unavailable { border-color: var(--danger); border-style: solid; }
.panel-state-title { color: var(--text-strong); font-weight: 600; }
.panel-state-body { color: var(--text-muted); margin: 0 0 var(--ks-s-xs); max-width: 70ch; }
.panel-state-meta { color: var(--text-faint); font-size: var(--ks-type-mono-size); letter-spacing: 0.06em; }

.banner { padding: var(--ks-s-xs) var(--ks-s-sm); border-radius: var(--ks-r-sm); margin-bottom: var(--ks-s-sm); }
.banner-killed { border: 1px solid var(--danger); color: var(--danger); }
.banner-warn { border: 1px solid var(--rule-strong); color: var(--text-strong); background: var(--inset-bg); }
.banner-info { border: 1px solid var(--accent); color: var(--text-strong); background: var(--inset-bg); }

/* ---- sign in ----
   The passkey gate. Deliberately narrow and centred so it never reads as a partially loaded
   dashboard: "you are not signed in" and "the dashboard is still loading" must not look alike.
   Both themes come from the token file, so nothing here branches on light or dark. */
.signin {
  max-width: 46rem;
  margin: var(--ks-s-xl) auto;
  padding: var(--ks-s-md);
  border: 1px solid var(--rule);
  border-radius: var(--ks-r-sm);
  background: var(--panel-bg);
}
.signin-heading { font-size: var(--ks-type-title-size); margin-bottom: var(--ks-s-sm); }
.signin-copy { color: var(--text); max-width: 60ch; }
.signin-copy-muted { color: var(--text-muted); font-size: 0.9rem; }
.btn-signin { min-height: 48px; padding: 0 var(--ks-s-md); font-size: 1rem; }
/* A blocked gate is a dead end by design, so it is toned as a refusal rather than as a prompt. */
.signin-blocked { border-left: 3px solid var(--danger); }
.signin-checking { border-style: dashed; }
.signin-enroll { margin-top: var(--ks-s-md); padding-top: var(--ks-s-sm); border-top: 1px solid var(--rule); }
.signin-enroll .field { margin: var(--ks-s-xs) 0; }
.signin-enroll .field-input { width: 100%; font-family: var(--ks-font-mono); font-size: 0.85rem; }

/* ---- session bar ---- */
.session-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-s-sm);
  padding: var(--ks-s-xs) 0; margin-bottom: var(--ks-s-xs); border-bottom: 1px solid var(--rule);
}
.session-sub { color: var(--text-strong); font-weight: 600; }
.session-fresh { color: var(--text-muted); font-size: 0.85rem; }
.session-bar .btn { margin-left: auto; }
/* A stale session is stated, not hidden: it is the reason a kill will be refused. */
.session-bar[data-session-fresh="false"] .session-fresh { color: var(--danger); }

/* ---- kill re-authentication ---- */
.kill-reauth { border-color: var(--danger); }
.kill-reauth .btn { margin-right: var(--ks-s-xs); }

/* ---- tags + badges ---- */
.tag {
  display: inline-block; padding: 2px 10px; border-radius: var(--ks-r-xs);
  font-family: var(--ks-font-mono); font-size: var(--ks-type-mono-size); letter-spacing: 0.08em;
  border: 1px solid var(--rule);
}
.tag-neutral { color: var(--text-muted); }
.tag-detected { color: var(--accent); border-color: var(--rule-strong); }
.decision-DENY { color: var(--danger); border-color: var(--danger); }
.decision-REQUIRE_APPROVAL { color: var(--accent); border-color: var(--rule-strong); }
.decision-ALLOW { color: var(--accent-2); border-color: var(--accent-2); }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--ks-s-xs); margin-bottom: var(--ks-s-xs); }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; border: 1px solid var(--rule);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge-gold { color: var(--accent); border-color: var(--rule-strong); }
.badge-warn { color: var(--danger); border-color: var(--danger); }
.badge-shadow { color: var(--text-muted); }
.outcome-live, .badge.outcome-live { color: var(--accent-2); }
.outcome-gold { color: var(--accent); }
.outcome-killed { color: var(--danger); }
.outcome-warn { color: var(--danger); }
.outcome-neutral { color: var(--text-muted); }

/* ---- outcome tiles ---- */
.outcome-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ks-s-xs); margin-bottom: var(--ks-s-md); }
.outcome-tile { padding: var(--ks-s-sm); border: 1px solid var(--rule); border-radius: var(--ks-r-sm); background: var(--panel-bg); }
.outcome-count { display: block; font-size: 1.8rem; font-weight: 600; color: var(--text-strong); line-height: 1.1; }
.outcome-label { display: block; font-size: var(--ks-type-mono-size); letter-spacing: 0.1em; color: var(--text-muted); margin-top: 4px; }

/* ---- audit table ---- */
.audit-table, .metrics-table { width: 100%; border-collapse: collapse; }
.audit-table th, .metrics-table th { text-align: left; padding: var(--ks-s-xs); color: var(--text-muted); font-size: var(--ks-type-mono-size); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--rule); }
.audit-table td, .metrics-table td { padding: var(--ks-s-xs); border-bottom: 1px solid var(--rule); vertical-align: top; }
.audit-row:hover { background: var(--inset-bg); }
.num { text-align: right; }
.audit-pager { margin-top: var(--ks-s-sm); }

/* ---- filter bar + fields ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--ks-s-sm); align-items: flex-end; margin-bottom: var(--ks-s-md); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.field-input {
  background: var(--field-bg); color: var(--text-strong);
  border: 1px solid var(--rule); border-radius: var(--ks-r-sm); padding: 10px 12px; min-height: 40px;
  font-family: var(--ks-font-body); font-size: 0.95rem;
}
.field-input:focus-visible { border-color: var(--accent); }
.field-help { font-size: 0.82rem; color: var(--text-faint); margin: 0; }
.field-error { font-size: 0.85rem; color: var(--danger); margin: 4px 0 0; }

/* ---- reasons, code, provenance ---- */
.reason-list { margin: var(--ks-s-xs) 0; padding-left: var(--ks-s-sm); color: var(--text); }
.reason-list li { margin-bottom: 4px; }
.provenance { color: var(--text-faint); font-size: var(--ks-type-mono-size); }
.code-block {
  background: var(--inset-bg); border: 1px solid var(--rule); border-radius: var(--ks-r-sm);
  padding: var(--ks-s-sm); overflow-x: auto; color: var(--text); font-size: 0.82rem; line-height: 1.5; margin: var(--ks-s-xs) 0;
}
.warn-text { color: var(--danger); }
details > summary { cursor: pointer; color: var(--accent); }
details[open] > summary { margin-bottom: var(--ks-s-xs); }

/* ---- approvals ---- */
.approval-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ks-s-sm); }
.approval-card { padding: var(--ks-s-sm); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--ks-r-sm); background: var(--panel-bg); }
.approval-card[data-state="approved"] { border-left-color: var(--accent-2); }
.approval-card[data-state="denied"] { border-left-color: var(--danger); }
.approval-head { display: flex; align-items: center; gap: var(--ks-s-sm); margin-bottom: var(--ks-s-xs); flex-wrap: wrap; }
.approval-age { color: var(--text-muted); font-size: 0.85rem; margin-left: auto; }
.approval-actions { display: flex; gap: var(--ks-s-xs); margin-top: var(--ks-s-xs); }
.approval-confirm { margin-top: var(--ks-s-xs); padding: var(--ks-s-sm); border: 1px solid var(--rule-strong); border-radius: var(--ks-r-sm); background: var(--inset-bg); }
.approval-confirm-copy { color: var(--text); }
.approval-resolved { color: var(--text-muted); font-family: var(--ks-font-mono); font-size: 0.82rem; }

/* ---- config ---- */
.config-fields { display: flex; flex-direction: column; gap: var(--ks-s-md); }
.config-field { padding: var(--ks-s-sm); border: 1px solid var(--rule); border-radius: var(--ks-r-sm); background: var(--panel-bg); }
.config-field-head { display: flex; align-items: center; gap: var(--ks-s-xs); flex-wrap: wrap; margin-bottom: var(--ks-s-xs); }
.config-key { color: var(--text-faint); font-size: var(--ks-type-mono-size); }
.config-field-actions { display: flex; gap: var(--ks-s-xs); margin-top: var(--ks-s-xs); }
.history-list { margin: 0; padding-left: var(--ks-s-md); color: var(--text); }
.history-entry { margin-bottom: 6px; }
.history-value { color: var(--text-strong); margin-right: var(--ks-s-xs); }
.history-meta { color: var(--text-muted); font-size: 0.85rem; }

/* ---- metrics ---- */
.metrics-facts { display: flex; flex-wrap: wrap; gap: var(--ks-s-md); margin: 0 0 var(--ks-s-md); }
.metrics-day { margin-bottom: var(--ks-s-xs); }

.foot { margin-top: var(--ks-s-xl); padding-top: var(--ks-s-sm); border-top: 1px solid var(--rule); }
.foot .mono { color: var(--text-faint); font-size: var(--ks-type-mono-size); letter-spacing: 0.06em; }

@media (max-width: 640px) {
  body { padding: var(--ks-s-sm) var(--ks-s-sm) var(--ks-s-2xl); }
  .status-strip { grid-template-columns: 1fr; }
  .status-mode { grid-column: 1; }
  .audit-table { display: block; overflow-x: auto; }
}