/* Kin Kai component system.
   Generated from docs/design/kin-kai-design-direction.html, the direction Mesh
   approved on 29 July 2026. Edit the sheet and rerun tools/build_design_bundle.py,
   do not diverge this file by hand. Source of the tokens is the locked Kin brand
   at projects/kin-partners-setup/assets/BRAND.md. */

/* --- shell --- */
.kk-shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); background: var(--carbon); min-height: 100vh; }
.kk-rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 20px;
  padding: 20px 14px 16px;
  border-right: 1px solid var(--line);
  background: rgba(16, 19, 9, 0.94);
  min-width: 0; overflow-y: auto;
}
.kk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kk-mark { display: flex; align-items: center; gap: 3px; height: 26px; flex: 0 0 auto; }
.kk-mark i {
  display: block; width: 4px; border-radius: 2px;
  background: var(--olive-lift); transform-origin: center;
  box-shadow: 0 0 10px rgba(155, 176, 104, 0.35);
}
/* The voiceprint speaks. Same keyframe, same per bar stagger as kinpartners.io,
   taking the middle seven of the site's nine bars so the rhythm matches the domain. */
@keyframes kk-vwave { 0%, 100% { transform: scaleY(0.42); } 50% { transform: scaleY(1); } }
.kk-mark--live i {
  animation: kk-vwave var(--d, 1.2s) ease-in-out var(--dl, 0s) infinite;
}
/* In the rail the mark rests as the true symmetric voiceprint, and speaks on load,
   on hover and on keyboard focus. Constant motion in the corner of a working desk
   is fatiguing, and a paused animation would freeze the logo mid shape. */
.kk-brand:hover .kk-mark--rest i,
.kk-brand:focus-within .kk-mark--rest i,
.is-greeting .kk-mark--rest i {
  animation: kk-vwave var(--d, 1.2s) ease-in-out var(--dl, 0s) infinite;
}
.kk-mark--lg { height: 44px; gap: 5px; }
.kk-mark--lg i { width: 7px; border-radius: 3.5px; box-shadow: 0 0 16px rgba(155, 176, 104, 0.45); }
@media (prefers-reduced-motion: reduce) {
  .kk-mark--live i, .kk-mark--rest i { animation: none; transform: none; }
}

.kk-railfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.kk-railfoot .kk-route { font-size: 10px; letter-spacing: 0.12em; }
.kk-brand-copy { display: grid; min-width: 0; }
.kk-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 0.85; letter-spacing: -0.03em; color: var(--sand); }
.kk-byline { margin-top: 5px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kk-workspace {
  display: grid; gap: 3px; padding: 11px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--olive);
  border-radius: 10px; background: var(--fill-faint); min-width: 0;
}
.kk-workspace span, .kk-workspace small { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.kk-workspace strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kk-navgroup { display: grid; gap: 1px; }
.kk-navlabel { padding: 0 10px 6px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(142, 146, 128, 0.7); }
.kk-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 8px;
  border-left: 3px solid transparent;
  color: var(--sage); font-size: 13px; font-weight: 500;
  min-width: 0;
}
.kk-nav-item i { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: rgba(238, 232, 219, 0.26); flex: 0 0 auto; }
.kk-nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-nav-item:hover { color: var(--sand); background: rgba(255, 255, 255, 0.03); }
.kk-nav-item.is-active { background: rgba(155, 176, 104, 0.10); border-left-color: var(--olive-lift); color: var(--sand); }

.kk-opstate { margin-top: auto; display: grid; gap: 8px; }
.kk-opcard { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill-faint); }
.kk-opcard-top { display: flex; align-items: center; gap: 7px; }
.kk-live { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px rgba(196, 238, 79, 0.75); flex: 0 0 auto; }
.kk-opcard strong { font-size: 12px; font-weight: 600; }
.kk-opcard small { font-size: 11px; color: var(--sage); line-height: 1.4; }

.kk-main { min-width: 0; padding: var(--pad); display: grid; gap: 18px; align-content: start; }

/* --- page head --- */
.kk-page-head { display: grid; gap: 10px; }
.kk-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kk-route { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--sage); }
.kk-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--sand); }
.kk-sub { margin: 5px 0 0; font-size: 13px; color: var(--sage); max-width: 74ch; }
.kk-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --- panels --- */
.kk-panel { background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); min-width: 0; }
.kk-panel.is-decision { border-left: 3px solid var(--olive); border-color: var(--glow); border-left-color: var(--olive); }
.kk-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kk-kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.kk-panel-title { margin: 3px 0 0; font-size: 16px; font-weight: 600; color: var(--sand); }
.kk-panel-body { padding: 17px; display: grid; gap: 14px; }
.kk-panel-foot { padding: 13px 17px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.kk-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.kk-tile { display: grid; gap: 5px; padding: 15px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-panel); min-width: 0; }
.kk-tile span { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.kk-tile b { font-family: var(--font-mono); font-weight: 400; font-size: 26px; line-height: 1; color: var(--sand); font-variant-numeric: tabular-nums; }
/* A tile whose value is a phrase, not a figure, must not borrow the numeric display size. */
.kk-tile b.is-text { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.25; }
.kk-tile small { font-size: 11px; color: var(--sage); }

.kk-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 15px; align-items: start; }
.kk-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kk-stack { display: grid; gap: 15px; align-content: start; min-width: 0; }

/* --- status pills, one vocabulary --- */
.kk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.kk-pill.is-disabled { border-color: rgba(142, 146, 128, 0.35); color: var(--sage); }
.kk-pill.is-requested { border-color: rgba(238, 232, 219, 0.25); color: rgba(238, 232, 219, 0.72); }
.kk-pill.is-pending { border-color: rgba(216, 189, 120, 0.42); color: var(--amber); }
.kk-pill.is-approved { border-color: rgba(155, 176, 104, 0.48); color: var(--olive-lift); }
.kk-pill.is-enabled { border-color: rgba(155, 176, 104, 0.48); background: rgba(155, 176, 104, 0.16); color: var(--olive-lift); }
.kk-pill.is-unhealthy { border-color: rgba(216, 189, 120, 0.48); background: rgba(216, 189, 120, 0.16); color: var(--amber); }
.kk-pill.is-revoked { border-color: rgba(230, 154, 136, 0.42); color: var(--clay); }
.kk-pill.is-revoked s { text-decoration-thickness: 1px; }
.kk-pill.is-draft { border-color: rgba(142, 146, 128, 0.35); color: var(--sage); }
.kk-pill.is-review { border-color: rgba(216, 189, 120, 0.42); color: var(--amber); }
.kk-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 6px rgba(196, 238, 79, 0.8); }

/* --- buttons --- */
.kk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: var(--r-ctl);
  border: 1px solid transparent; background: none; color: var(--sand);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kk-btn--primary { background: var(--olive-lift); color: var(--carbon); }
.kk-btn--primary:hover { background: #a8bd76; }
.kk-btn--secondary { border-color: var(--line-strong); }
.kk-btn--secondary:hover { border-color: rgba(155, 176, 104, 0.5); }
.kk-btn--quiet { color: var(--sage); padding: 0 6px; }
.kk-btn--quiet:hover { color: var(--sand); }
.kk-btn--danger { border-color: rgba(230, 154, 136, 0.45); color: var(--clay); }
.kk-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.kk-btn:disabled, .kk-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.kk-btn:focus-visible, .kk-input:focus-visible, .kk-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(196, 238, 79, 0.35); }
.kk-gated { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kk-reason { font-size: 12px; color: var(--sage); max-width: 52ch; line-height: 1.45; }
.kk-iconbtn {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 7px; border: 1px solid var(--line-strong);
  background: none; color: var(--sage); cursor: pointer; font-size: 13px; line-height: 1;
}
.kk-iconbtn:hover { color: var(--clay); border-color: rgba(230, 154, 136, 0.45); }

.kk-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(16, 19, 9, 0.3); border-top-color: var(--carbon);
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) { .kk-spinner { animation: kk-spin 0.7s linear infinite; } }
@keyframes kk-spin { to { transform: rotate(360deg); } }

/* --- tables --- */
.kk-tablewrap { overflow-x: auto; }
.kk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kk-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 9px 12px; text-align: left; background: var(--raised);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.kk-table td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.kk-table tbody tr:hover { background: var(--hover); }
.kk-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* Row actions stay pinned to the right edge of the scroll container, so a wide
   table can never push the one control that matters out of sight. */
.kk-table .actions {
  position: sticky; right: 0; z-index: 2;
  width: 92px; text-align: right; white-space: nowrap;
  background: var(--ink);
  box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.75);
}
.kk-table th.actions { z-index: 3; background: var(--raised); }
.kk-table tbody tr:hover .actions { background: #1B2118; }
.kk-cell { display: grid; gap: 1px; min-width: 0; }
.kk-cell strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-cell span { font-size: 11px; color: var(--sage); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); }
.kk-muted { color: var(--sage); }
.kk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.kk-fit { display: inline-flex; align-items: center; gap: 8px; }
.kk-fit .bar { width: 48px; height: 4px; border-radius: 2px; background: rgba(238, 232, 219, 0.10); overflow: hidden; flex: 0 0 auto; }
.kk-fit .bar i { display: block; height: 100%; background: var(--olive-lift); }
.kk-fit .bar.is-low i { background: var(--sage); }
.kk-fit b { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; font-size: 12px; }

/* --- meters --- */
.kk-meter { display: grid; gap: 6px; }
.kk-meter-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.kk-meter-track { height: 6px; border-radius: 3px; background: rgba(238, 232, 219, 0.08); overflow: hidden; }
.kk-meter-track i { display: block; height: 100%; background: var(--olive-lift); border-radius: 3px; }
.kk-meter.is-warn .kk-meter-track i { background: var(--amber); }
.kk-meter.is-over .kk-meter-track i { background: var(--clay); }
.kk-meter small { font-size: 11px; color: var(--sage); }

/* --- gates --- */
.kk-gates { display: grid; }
.kk-gate { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.kk-gate:last-child { border-bottom: 0; }
.kk-gate .mark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; flex: 0 0 auto; margin-top: 1px; }
.kk-gate.pass .mark { background: rgba(155, 176, 104, 0.16); color: var(--olive-lift); }
.kk-gate.fail .mark { background: rgba(216, 189, 120, 0.16); color: var(--amber); }
.kk-gate-copy { display: grid; gap: 2px; min-width: 0; }
.kk-gate-copy strong { font-size: 13px; font-weight: 500; }
.kk-gate-copy small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); }

/* --- forms --- */
.kk-form { display: grid; gap: 14px; }
.kk-field { display: grid; gap: 6px; min-width: 0; }
.kk-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.kk-input, .kk-select, .kk-textarea {
  width: 100%; height: 36px; padding: 0 12px;
  border-radius: var(--r-ctl); border: 1px solid var(--line-strong);
  background: var(--fill-faint); color: var(--sand); font-size: 13px;
}
.kk-textarea { height: auto; min-height: 74px; padding: 9px 12px; resize: vertical; font-family: var(--font-body); }
.kk-input::placeholder, .kk-textarea::placeholder { color: rgba(142, 146, 128, 0.7); }
.kk-input:focus, .kk-select:focus, .kk-textarea:focus { outline: none; border-color: var(--olive-lift); box-shadow: 0 0 0 2px rgba(196, 238, 79, 0.35); }
.kk-field.is-invalid .kk-input, .kk-field.is-invalid .kk-select { border-color: var(--clay); }
.kk-error { font-size: 12px; color: var(--clay); }
.kk-hint { font-size: 12px; color: var(--sage); }
.kk-field.is-disabled { opacity: 0.5; }
.kk-suffix { display: flex; align-items: center; gap: 8px; }
.kk-suffix .kk-input { max-width: 110px; }
.kk-suffix span { font-family: var(--font-mono); font-size: 12px; color: var(--sage); }
.kk-checkline { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; }
.kk-checkline input { margin-top: 3px; accent-color: var(--olive-lift); }

.kk-defs { display: grid; gap: 0; }
.kk-def { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.kk-def:last-child { border-bottom: 0; }
.kk-def dt { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.kk-def dd { margin: 0; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.kk-def dd small { display: block; margin-top: 2px; font-size: 11px; color: var(--sage); }
.kk-mono { font-family: var(--font-mono); font-size: 12px; }

/* --- states --- */
.kk-empty { display: grid; gap: 6px; justify-items: start; padding: 26px 4px; }
.kk-empty strong { font-size: 14px; font-weight: 600; }
.kk-empty span { font-size: 13px; color: var(--sage); }
.kk-empty .kk-btn { margin-top: 6px; }

.kk-skel-rows { display: grid; gap: 10px; padding: 6px 0; }
.kk-skel { height: 12px; border-radius: 6px; background: rgba(238, 232, 219, 0.06); }
@media (prefers-reduced-motion: no-preference) { .kk-skel { animation: kk-pulse 1.4s ease-in-out infinite; } }
@keyframes kk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.kk-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-radius: 10px; font-size: 13px; flex-wrap: wrap; }
.kk-banner--error { border: 1px solid rgba(230, 154, 136, 0.30); background: rgba(230, 154, 136, 0.10); color: var(--clay); }
.kk-banner--warn { border: 1px solid rgba(216, 189, 120, 0.30); background: rgba(216, 189, 120, 0.10); color: var(--amber); }
.kk-banner--info { border: 1px solid var(--glow); background: rgba(155, 176, 104, 0.08); color: var(--olive-lift); }

.kk-toast { display: inline-flex; align-items: center; gap: 12px; padding: 11px 15px; background: var(--ink); border: 1px solid var(--line-strong); border-left: 3px solid var(--olive); border-radius: 10px; box-shadow: var(--lift); font-size: 13px; }
.kk-toast .kk-kicker { color: var(--olive-lift); }

/* --- drawer --- */
.kk-drawer { width: 100%; max-width: 420px; background: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-panel); box-shadow: var(--lift); display: grid; }
.kk-drawer-head { padding: 15px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kk-drawer-body { padding: 17px; display: grid; gap: 14px; }
.kk-drawer-foot { padding: 13px 17px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }