:root,
[data-theme="calm"] {
  color-scheme: light;
  --kh-surface-canvas: oklch(0.975 0.006 225);
  --kh-surface-default: oklch(0.995 0.002 220);
  --kh-surface-raised: oklch(1 0 0);
  --kh-surface-subtle: oklch(0.955 0.009 220);
  --kh-surface-inverse: oklch(0.22 0.035 240);
  --kh-text-primary: oklch(0.22 0.035 240);
  --kh-text-secondary: oklch(0.38 0.03 235);
  --kh-text-muted: oklch(0.45 0.022 230);
  --kh-text-inverse: oklch(0.985 0.004 220);
  --kh-border-subtle: oklch(0.9 0.012 220);
  --kh-border-default: oklch(0.82 0.02 220);
  --kh-border-strong: oklch(0.72 0.03 220);
  --kh-action-primary-fg: var(--kh-text-inverse);
  --kh-action-primary-bg: oklch(0.42 0.09 205);
  --kh-action-primary-border: oklch(0.42 0.09 205);
  --kh-action-primary-hover-bg: oklch(0.35 0.085 205);
  --kh-action-secondary-fg: var(--kh-text-primary);
  --kh-action-secondary-bg: var(--kh-surface-default);
  --kh-action-secondary-border: var(--kh-border-strong);
  --kh-action-secondary-hover-bg: var(--kh-surface-subtle);
  --kh-action-destructive-fg: var(--kh-text-inverse);
  --kh-action-destructive-bg: oklch(0.46 0.15 28);
  --kh-action-destructive-border: oklch(0.46 0.15 28);
  --kh-action-destructive-hover-bg: oklch(0.39 0.145 28);
  --kh-action-disabled-opacity: 0.55;
  --kh-status-neutral-fg: var(--kh-text-secondary);
  --kh-status-neutral-bg: var(--kh-surface-subtle);
  --kh-status-neutral-border: var(--kh-border-default);
  --kh-status-info-fg: oklch(0.36 0.09 205);
  --kh-status-info-bg: oklch(0.93 0.035 205);
  --kh-status-info-border: oklch(0.66 0.07 205);
  --kh-status-success-fg: oklch(0.36 0.1 155);
  --kh-status-success-bg: oklch(0.94 0.03 155);
  --kh-status-success-border: oklch(0.62 0.09 155);
  --kh-status-warning-fg: oklch(0.4 0.1 70);
  --kh-status-warning-bg: oklch(0.95 0.04 75);
  --kh-search-match-bg: #ffe4a0;
  --kh-status-warning-border: oklch(0.68 0.1 70);
  --kh-status-danger-fg: oklch(0.43 0.16 28);
  --kh-status-danger-bg: oklch(0.95 0.03 28);
  --kh-status-danger-border: oklch(0.65 0.12 28);
  --kh-space-1: 0.25rem;
  --kh-space-2: 0.5rem;
  --kh-space-3: 0.75rem;
  --kh-space-4: 1rem;
  --kh-space-6: 1.5rem;
  --kh-space-8: 2rem;
  --kh-control-min-size: 44px;
  --kh-content-max-width: 52rem;
  --kh-radius-sm: 0.375rem;
  --kh-radius-md: 0.5rem;
  --kh-radius-lg: 0.75rem;
  --kh-shadow-raised: 0 4px 8px color-mix(in oklch, var(--kh-surface-inverse) 14%, transparent);
  --kh-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kh-font-size-sm: 0.875rem;
  --kh-font-size-base: 1rem;
  --kh-font-size-lg: 1.125rem;
  --kh-font-size-xl: 1.35rem;
  --kh-line-height-tight: 1.25;
  --kh-line-height-body: 1.6;
  --kh-focus-color: oklch(0.6 0.12 205);
  --kh-focus-width: 3px;
  --kh-focus-offset: 2px;
  --kh-motion-fast: 150ms;
  --kh-motion-normal: 200ms;
  --kh-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* Compatibility aliases for surfaces that migrate in later milestones. */
  --bg: var(--kh-surface-canvas);
  --surface: var(--kh-surface-default);
  --surface-subtle: var(--kh-surface-subtle);
  --surface-selected: var(--kh-status-info-bg);
  --ink: var(--kh-text-primary);
  --ink-secondary: var(--kh-text-secondary);
  --ink-muted: var(--kh-text-muted);
  --line: var(--kh-border-subtle);
  --line-strong: var(--kh-border-strong);
  --accent: var(--kh-action-primary-border);
  --accent-strong: var(--kh-action-primary-bg);
  --accent-soft: var(--kh-status-info-bg);
  --danger: var(--kh-status-danger-fg);
  --danger-soft: var(--kh-status-danger-bg);
  --warning: var(--kh-status-warning-fg);
  --success: var(--kh-status-success-fg);
  --focus: var(--kh-focus-color);
  --space-1: var(--kh-space-1);
  --space-2: var(--kh-space-2);
  --space-3: var(--kh-space-3);
  --space-4: var(--kh-space-4);
  --space-6: var(--kh-space-6);
  --radius-control: var(--kh-radius-sm);
  --radius-panel: var(--kh-radius-lg);
  --control-min-size: var(--kh-control-min-size);

  font-family: var(--kh-font-sans);
  font-synthesis: none;
  background: var(--kh-surface-canvas);
  color: var(--kh-text-primary);
}

* { box-sizing: border-box; }

body {
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

button,
input,
select,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button,
[role="button"] { min-height: var(--control-min-size); }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--kh-focus-width) solid var(--kh-focus-color);
  outline-offset: var(--kh-focus-offset);
}

a { color: var(--accent-strong); }

/* Shared primitives: semantic behavior stays identical across Jinja and React. */
.kh-action {
  display: inline-flex;
  min-width: var(--kh-control-min-size);
  min-height: var(--kh-control-min-size);
  align-items: center;
  justify-content: center;
  gap: var(--kh-space-2);
  padding: 0 var(--kh-space-4);
  border: 1px solid transparent;
  border-radius: var(--kh-radius-md);
  font-weight: 700;
  line-height: var(--kh-line-height-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--kh-motion-fast) var(--kh-motion-easing), border-color var(--kh-motion-fast) var(--kh-motion-easing);
}
.kh-action--primary { border-color: var(--kh-action-primary-border); background: var(--kh-action-primary-bg); color: var(--kh-action-primary-fg); }
.kh-action--primary:hover { background: var(--kh-action-primary-hover-bg); }
.kh-action--secondary { border-color: var(--kh-action-secondary-border); background: var(--kh-action-secondary-bg); color: var(--kh-action-secondary-fg); }
.kh-action--secondary:hover { background: var(--kh-action-secondary-hover-bg); }
.kh-action--quiet { border-color: transparent; background: transparent; color: var(--kh-action-secondary-fg); }
.kh-action--quiet:hover { background: var(--kh-action-secondary-hover-bg); }
.kh-action--destructive { border-color: var(--kh-action-destructive-border); background: var(--kh-action-destructive-bg); color: var(--kh-action-destructive-fg); }
.kh-action--destructive:hover { background: var(--kh-action-destructive-hover-bg); }
.kh-action:disabled,
.kh-action[aria-disabled="true"] { opacity: var(--kh-action-disabled-opacity); cursor: not-allowed; pointer-events: none; }
.kh-action[aria-busy="true"] { cursor: progress; }

.kh-status {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: var(--kh-space-1);
  padding: var(--kh-space-1) var(--kh-space-2);
  border: 1px solid var(--kh-status-neutral-border);
  border-radius: 999px;
  background: var(--kh-status-neutral-bg);
  color: var(--kh-status-neutral-fg);
  font-size: var(--kh-font-size-sm);
  font-weight: 700;
  line-height: var(--kh-line-height-tight);
}
.kh-status--neutral { border-color: var(--kh-status-neutral-border); background: var(--kh-status-neutral-bg); color: var(--kh-status-neutral-fg); }
.kh-status--info { border-color: var(--kh-status-info-border); background: var(--kh-status-info-bg); color: var(--kh-status-info-fg); }
.kh-status--success { border-color: var(--kh-status-success-border); background: var(--kh-status-success-bg); color: var(--kh-status-success-fg); }
.kh-status--warning { border-color: var(--kh-status-warning-border); background: var(--kh-status-warning-bg); color: var(--kh-status-warning-fg); }
.kh-status--danger { border-color: var(--kh-status-danger-border); background: var(--kh-status-danger-bg); color: var(--kh-status-danger-fg); }

.kh-notice {
  padding: var(--kh-space-3) var(--kh-space-4);
  border: 1px solid var(--kh-status-info-border);
  border-radius: var(--kh-radius-md);
  background: var(--kh-status-info-bg);
  color: var(--kh-status-info-fg);
}
.kh-notice--success { border-color: var(--kh-status-success-border); background: var(--kh-status-success-bg); color: var(--kh-status-success-fg); }
.kh-notice--warning { border-color: var(--kh-status-warning-border); background: var(--kh-status-warning-bg); color: var(--kh-status-warning-fg); }
.kh-notice--error { border-color: var(--kh-status-danger-border); background: var(--kh-status-danger-bg); color: var(--kh-status-danger-fg); }

.kh-field { display: grid; gap: var(--kh-space-1); }
.kh-field__label { color: var(--kh-text-primary); font-weight: 650; }
.kh-field__help { color: var(--kh-text-muted); font-size: var(--kh-font-size-sm); }
.kh-field :is(input, select, textarea) {
  width: 100%;
  min-height: var(--kh-control-min-size);
  padding: var(--kh-space-2) var(--kh-space-3);
  border: 1px solid var(--kh-border-strong);
  border-radius: var(--kh-radius-md);
  background: var(--kh-surface-default);
  color: var(--kh-text-primary);
}
.kh-field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--kh-status-danger-border); }
.kh-field textarea { min-height: 7rem; max-block-size: 24rem; resize: vertical; }

.kh-toolbar,
.kh-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kh-space-2); }
.kh-toolbar { justify-content: space-between; }

.kh-tabs {
  display: flex;
  max-width: 100%;
  align-items: center;
  gap: var(--kh-space-1);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.kh-tab {
  display: inline-flex;
  flex: none;
  min-height: var(--kh-control-min-size);
  align-items: center;
  padding: 0 var(--kh-space-3);
  border-bottom: 2px solid transparent;
  border-radius: var(--kh-radius-sm) var(--kh-radius-sm) 0 0;
  color: var(--kh-text-secondary);
  font-size: var(--kh-font-size-sm);
  font-weight: 650;
  line-height: var(--kh-line-height-tight);
  text-decoration: none;
}
.kh-tab:hover { background: var(--kh-surface-subtle); color: var(--kh-text-primary); }
.kh-tab[aria-current="page"] {
  border-bottom-color: var(--kh-action-primary-border);
  background: var(--kh-status-info-bg);
  color: var(--kh-status-info-fg);
}

.kh-choice-group { display: flex; flex-wrap: wrap; gap: var(--kh-space-2) var(--kh-space-4); }
.kh-choice {
  display: inline-flex;
  min-height: var(--kh-control-min-size);
  align-items: center;
  gap: var(--kh-space-2);
  margin: 0;
  color: var(--kh-text-primary);
  font-weight: 650;
}
.kh-choice input { width: 1.25rem; height: 1.25rem; margin: 0; }
.kh-choice-set {
  margin: var(--kh-space-4) 0;
  border: 1px solid var(--kh-border-subtle);
  border-radius: var(--kh-radius-sm);
}

.kh-table-region { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.kh-table-region:focus-visible { border-radius: var(--kh-radius-sm); }
.kh-table { width: 100%; border-collapse: collapse; font-size: var(--kh-font-size-sm); }
.kh-table :is(th, td) { padding: var(--kh-space-2) var(--kh-space-3); border-bottom: 1px solid var(--kh-border-subtle); text-align: start; }
.kh-table th { color: var(--kh-text-secondary); font-weight: 700; }
.kh-table-link {
  display: inline-flex;
  min-width: var(--kh-control-min-size);
  min-height: var(--kh-control-min-size);
  align-items: center;
}

.kh-state {
  display: grid;
  min-height: 11.25rem;
  align-content: center;
  justify-items: center;
  gap: var(--kh-space-2);
  padding: var(--kh-space-6);
  color: var(--kh-text-secondary);
  text-align: center;
}
.kh-state--loading { color: var(--kh-text-muted); }
.kh-state--empty { color: var(--kh-text-secondary); }
.kh-state--denied,
.kh-state--error { color: var(--kh-status-danger-fg); }
.kh-state--denied > span {
  display: grid;
  width: var(--kh-control-min-size);
  height: var(--kh-control-min-size);
  place-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: 800;
}
.kh-state :is(strong, h1, h2, p) { margin: 0; }
.kh-state :is(strong, h1, h2) { color: var(--kh-text-primary); }
.kh-state p { color: var(--kh-text-secondary); }

.kh-panel { background: var(--kh-surface-default); color: var(--kh-text-primary); }
.kh-section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kh-space-3); }

.kh-application-list { display: grid; gap: var(--kh-space-3); margin-top: var(--kh-space-6); }
.kh-application-link {
  display: grid;
  min-height: var(--kh-control-min-size);
  gap: var(--kh-space-1);
  padding: var(--kh-space-4);
  border: 1px solid var(--kh-border-strong);
  border-radius: var(--kh-radius-lg);
  color: var(--kh-text-primary);
  text-decoration: none;
}
.kh-application-link:hover { border-color: var(--kh-action-primary-border); background: var(--kh-status-info-bg); }
.kh-application-link span { color: var(--kh-text-secondary); font-size: var(--kh-font-size-sm); }

.capability-status-page {
  display: grid;
  max-width: 72rem;
  gap: var(--kh-space-4);
}
.capability-status-heading {
  display: grid;
  gap: var(--kh-space-1);
}
.capability-status-heading :is(h1, p),
.capability-status-section :is(h2, p),
.capability-status-row p { margin-block: 0; }
.capability-status-heading p,
.capability-status-section > header p,
.capability-status-summary { color: var(--kh-text-secondary); }
.capability-status-section { display: grid; gap: var(--kh-space-2); }
.capability-status-list { margin: 0; padding: 0; border-top: 1px solid var(--kh-border-subtle); list-style: none; }
.capability-status-list > li { border-bottom: 1px solid var(--kh-border-subtle); }
.capability-status-row {
  display: grid;
  min-height: var(--kh-control-min-size);
  gap: var(--kh-space-1);
  padding: var(--kh-space-3) var(--kh-space-2);
}
.capability-status-row--link {
  border-radius: var(--kh-radius-md);
  color: var(--kh-text-primary);
  text-decoration: none;
}
.capability-status-row--link:hover { background: var(--kh-surface-subtle); }
.capability-status-row--link:hover .capability-status-title { text-decoration: underline; }
.capability-status-title { font-size: var(--kh-font-size-lg); }
.capability-status-meta { display: flex; flex-wrap: wrap; gap: var(--kh-space-2) var(--kh-space-4); margin: 0; }
.capability-status-meta div { display: flex; gap: var(--kh-space-1); }
.capability-status-meta :is(dt, dd) { margin: 0; overflow-wrap: anywhere; }
.capability-status-meta dt { color: var(--kh-text-secondary); }
.capability-status-meta dt::after { content: "："; }
.capability-status-meta dd { font-weight: 700; }
.capability-status-next { font-weight: 700; }
.capability-status-row--link .capability-status-next { color: var(--kh-action-primary-bg); }
.capability-status-row--link .capability-status-next::after { content: " →"; }
.capability-diagnostics { border-top: 1px solid var(--kh-border-default); padding-top: var(--kh-space-3); }
.capability-diagnostics summary { display: list-item; min-height: var(--kh-control-min-size); padding: var(--kh-space-2); cursor: pointer; font-weight: 700; }
.capability-diagnostics summary:focus-visible { outline: var(--kh-focus-width) solid var(--kh-focus-color); outline-offset: var(--kh-focus-offset); }
.capability-diagnostics p { color: var(--kh-text-secondary); }
.capability-diagnostics dl { display: grid; gap: var(--kh-space-2); margin: 0; }
.capability-diagnostics dl > div { padding-block: var(--kh-space-2); border-top: 1px solid var(--kh-border-subtle); }
.capability-diagnostics :is(dt, dd) { margin: 0; overflow-wrap: anywhere; }
.capability-diagnostics dt { font-weight: 700; }
.capability-diagnostics dd { color: var(--kh-text-secondary); }

.kh-impact-action {
  display: grid;
  min-width: 0;
  gap: var(--kh-space-3);
  padding-block: var(--kh-space-4);
  border-top: 1px solid var(--kh-border-subtle);
}
.kh-impact-action p,
.kh-inline-confirmation__content p {
  max-width: 65ch;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--kh-text-secondary);
}
.kh-impact-action form,
.kh-inline-confirmation form { min-width: 0; margin: 0; }
.kh-impact-action .kh-action,
.kh-inline-confirmation .kh-action {
  min-width: 0;
  max-width: 100%;
  height: auto;
  padding-block: var(--kh-space-2);
  overflow-wrap: anywhere;
  white-space: normal;
}
.governance-impact-actions { display: grid; gap: var(--kh-space-2); max-width: 42rem; }
.kh-inline-confirmation { min-width: 0; }
.kh-inline-confirmation > summary { width: max-content; list-style: none; }
.kh-inline-confirmation > summary:focus-visible {
  outline: var(--kh-focus-width) solid var(--kh-focus-color);
  outline-offset: var(--kh-focus-offset);
}
.kh-inline-confirmation summary::marker { content: ""; }
.kh-inline-confirmation summary::-webkit-details-marker { display: none; }
.kh-inline-confirmation__content {
  display: grid;
  min-width: 0;
  gap: var(--kh-space-3);
  padding-block-start: var(--kh-space-3);
}


.app-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 76px;
  padding: calc(var(--space-3) + env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) var(--space-3) max(var(--space-4), env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.app-shell__heading { display: flex; min-width: 0; align-items: center; gap: var(--space-6); }
.app-shell__brand {
  display: grid;
  flex: none;
  min-height: var(--control-min-size);
  align-content: center;
  color: var(--ink);
  line-height: 1.2;
  text-decoration: none;
}
.app-shell__brand span { color: var(--ink-muted); font-size: 0.75rem; font-weight: 700; }
.app-shell__brand strong { font-size: 1rem; }
.app-shell__account { display: flex; flex: none; align-items: center; gap: var(--space-2); }
.app-shell__identity {
  max-width: 12rem;
  overflow: hidden;
  color: var(--ink-secondary);
  font-size: 0.875rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-form { margin: 0; }
.logout-button { font-size: 0.78rem; }

.notice {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.875rem;
  font-weight: 650;
}

.notice.ok,
.notice--success { border-color: var(--success); color: var(--success); }
.notice.err,
.notice--error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.state-panel {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: 180px;
  padding: var(--space-6);
  color: var(--ink-muted);
  text-align: center;
}

.state-panel > span { color: var(--accent); font-size: 1.4rem; }
.state-panel p { margin: 0; color: var(--ink-secondary); font-weight: 750; }
.state-panel button,
.gate-page button {
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.state-panel--error > span,
.state-panel--error p { color: var(--danger); }
.state-panel--denied > span {
  display: grid;
  width: var(--control-min-size);
  height: var(--control-min-size);
  place-content: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--danger);
  font-weight: 800;
}
.state-panel h1,
.state-panel h2,
.state-panel strong { margin: 0; color: var(--ink); }

.gate-page {
  display: grid;
  min-height: 100dvh;
  place-content: center;
  justify-items: center;
  padding: var(--space-6);
  text-align: center;
}

.page-skeleton {
  display: block;
  width: 180px;
  height: 12px;
  background: var(--surface-subtle);
  animation: shared-skeleton 1.4s ease-in-out infinite alternate;
}

@keyframes shared-skeleton { to { background: var(--line); } }

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

.page-content,
.public-frame {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.page-content.capability-status-page { max-width: 72rem; }

.public-frame { max-width: 34rem; padding-top: clamp(3rem, 12vh, 7rem); }
.jinja-page h1 { margin: 0 0 var(--space-6); font-size: 1.35rem; text-wrap: balance; }
.jinja-page h2 { margin: 2rem 0 var(--space-3); font-size: 1.05rem; text-wrap: balance; }
.jinja-page button:not(.kh-action) { padding: var(--space-2) 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); cursor: pointer; }
.jinja-page .hint { color: var(--ink-muted); font-size: 0.85rem; }
.jinja-page .button--primary {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--surface);
  font-weight: 700;
}

.button-link {
  display: inline-flex;
  min-height: var(--control-min-size);
  align-items: center;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  background: var(--accent-strong);
  color: var(--surface);
  font-weight: 700;
  text-decoration: none;
}


@media (max-width: 40rem) {
  .app-shell { align-items: stretch; flex-direction: column; gap: var(--space-2); }
  .app-shell__heading { align-items: stretch; flex-direction: column; gap: var(--space-1); }
  .app-shell__nav { margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); }
  .app-shell__account { justify-content: space-between; }
  .app-shell__identity { max-width: calc(100vw - 7rem); }
  .page-content,
  .public-frame { padding: var(--space-6) var(--space-4); }
}

@media (forced-colors: active) {
  .kh-tab[aria-current="page"] { border: 2px solid currentColor; }
  .notice,
  .kh-notice,
  .kh-status,
  .kh-application-link { border-color: currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}