/* KiiWORKS Workbench — institutional palette + typography fallbacks.
 * Applied when Tailwind CDN is unreachable so the page still renders
 * legibly. When Tailwind is loaded these mostly compose with utility
 * classes rather than overriding them. */

:root {
  --kii-teal-500: #16A89E;
  --kii-teal-600: #138e85;
  --kii-teal-700: #0f6e67;
  --kii-slate-700: #2D3748;
  --kii-slate-100: #edf2f7;
  --kii-slate-50: #f7fafc;
  --kii-grey-400: #a0aec0;
  --kii-green-500: #38a169;
  --kii-amber-500: #d69e2e;
  --kii-red-500: #e53e3e;
  --kii-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --kii-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html, body {
  font-family: var(--kii-sans);
  color: var(--kii-slate-700);
  background: #ffffff;
  margin: 0;
}

/* Fallback layout when Tailwind CDN fails to load. */
.no-tw body { padding: 0; }
.no-tw .panel { padding: 24px; border: 1px solid var(--kii-slate-100); border-radius: 6px; margin: 16px; }
.no-tw .btn { background: var(--kii-teal-500); color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-family: var(--kii-sans); }
.no-tw .btn:hover { background: var(--kii-teal-600); }
.no-tw input, .no-tw textarea, .no-tw select {
  font-family: var(--kii-sans); border: 1px solid var(--kii-slate-100); border-radius: 4px; padding: 6px 10px; width: 100%; box-sizing: border-box;
}

/* Pretty-printed JSON blocks. */
pre.kii-json {
  font-family: var(--kii-mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--kii-slate-50);
  color: var(--kii-slate-700);
  border: 1px solid var(--kii-slate-100);
  border-radius: 4px;
  padding: 12px 14px;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

pre.kii-json .k { color: var(--kii-teal-700); }   /* keys */
pre.kii-json .s { color: #805ad5; }               /* strings */
pre.kii-json .n { color: #2b6cb0; }               /* numbers */
pre.kii-json .b { color: #d69e2e; font-weight: 600; }  /* booleans */
pre.kii-json .u { color: var(--kii-grey-400); }   /* null */

/* Status dot in nav. */
.kii-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--kii-grey-400); margin-right: 8px; vertical-align: middle;
  transition: background 0.2s;
}
.kii-dot.connecting { background: var(--kii-amber-500); animation: pulse 1.2s infinite; }
.kii-dot.connected { background: var(--kii-green-500); }
.kii-dot.error { background: var(--kii-red-500); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Left rail tabs. */
.kii-tab {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px; border: none; background: transparent;
  color: var(--kii-slate-700); font-family: var(--kii-sans); font-size: 14px;
  cursor: pointer; border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
}
.kii-tab:hover { background: var(--kii-slate-50); }
.kii-tab.active {
  background: var(--kii-slate-50);
  border-left-color: var(--kii-teal-500);
  color: var(--kii-teal-700);
  font-weight: 600;
}

/* Request/Response pane. */
.kii-rr-meta { font-family: var(--kii-mono); font-size: 12px; color: #4a5568; padding: 6px 10px; background: #fff; border-bottom: 1px solid var(--kii-slate-100); }
.kii-rr-meta .method { font-weight: 700; color: var(--kii-teal-700); }
.kii-rr-meta .status-2xx { color: var(--kii-green-500); font-weight: 600; }
.kii-rr-meta .status-4xx, .kii-rr-meta .status-5xx { color: var(--kii-red-500); font-weight: 600; }

/* Hierarchy diagram (vLEI). */
.kii-tree {
  font-family: var(--kii-mono); font-size: 13px;
  background: var(--kii-slate-50); padding: 16px; border-radius: 4px;
  white-space: pre; overflow-x: auto; line-height: 1.6;
  border: 1px solid var(--kii-slate-100);
}

/* Subtle field label. */
.kii-label { display:block; font-size: 12px; font-weight: 600; color: #4a5568; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }

/* Inputs (only kick in if Tailwind missing). */
.kii-input { font-family: var(--kii-sans); border: 1px solid #e2e8f0; border-radius: 4px; padding: 7px 10px; font-size: 14px; width: 100%; box-sizing: border-box; background: #fff; }
.kii-input:focus { outline: 2px solid var(--kii-teal-500); outline-offset: -1px; border-color: var(--kii-teal-500); }
textarea.kii-input { font-family: var(--kii-mono); font-size: 12.5px; min-height: 90px; }

/* Buttons (Tailwind-independent). */
.kii-btn { background: var(--kii-teal-500); color: #fff; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-family: var(--kii-sans); font-size: 14px; font-weight: 500; transition: background 0.15s; }
.kii-btn:hover:not(:disabled) { background: var(--kii-teal-600); }
.kii-btn:disabled { background: var(--kii-grey-400); cursor: not-allowed; }
.kii-btn-secondary { background: #fff; color: var(--kii-slate-700); border: 1px solid #cbd5e0; }
.kii-btn-secondary:hover:not(:disabled) { background: var(--kii-slate-50); }

/* Disconnected curtain. */
.kii-disconnected {
  text-align: center; padding: 60px 20px; color: #4a5568;
  background: var(--kii-slate-50); border: 1px dashed #cbd5e0; border-radius: 6px;
}

[x-cloak] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
 * Ops Console additions (console.html / js/console.js).
 * Appended — everything above this line is shared with the playground
 * and must not change.
 * ══════════════════════════════════════════════════════════════════ */

/* Status badges — small rounded chips colour-keyed by state family. */
.kii-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  text-transform: lowercase;
  border: 1px solid transparent;
}
.kii-chip--slate { background: var(--kii-slate-50);  color: #4a5568;             border-color: #e2e8f0; }
.kii-chip--blue  { background: #ebf8ff;              color: #2b6cb0;             border-color: #bee3f8; }
.kii-chip--green { background: #f0fff4;              color: #276749;             border-color: #c6f6d5; }
.kii-chip--amber { background: #fffff0;              color: #975a16;             border-color: #faf089; }
.kii-chip--red   { background: #fff5f5;              color: #c53030;             border-color: #fed7d7; }
.kii-chip--teal  { background: #e6fffa;              color: var(--kii-teal-700); border-color: #b2f5ea; }

/* Persona segmented control in the console header. */
.kii-seg {
  display: inline-flex;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--kii-slate-50);
}
.kii-seg button {
  border: none;
  background: transparent;
  font-family: var(--kii-sans);
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
  padding: 6px 14px;
  cursor: pointer;
  border-right: 1px solid #e2e8f0;
  transition: background 0.15s, color 0.15s;
}
.kii-seg button:last-child { border-right: none; }
.kii-seg button:hover { background: #ffffff; }
.kii-seg button.active {
  background: var(--kii-teal-500);
  color: #ffffff;
}

/* Two-column list + detail layout; stacks on mobile. */
.kii-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .kii-split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}

/* Clickable list rows in the console list pane. */
.kii-row {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--kii-slate-100);
  padding: 9px 10px;
  cursor: pointer;
  font-family: var(--kii-sans);
  font-size: 13px;
  color: var(--kii-slate-700);
  border-left: 3px solid transparent;
}
.kii-row:hover { background: var(--kii-slate-50); }
.kii-row.active {
  background: var(--kii-slate-50);
  border-left-color: var(--kii-teal-500);
}

/* Definition list for detail panes. */
.kii-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 18px;
  font-size: 13px;
}
.kii-dl dt { color: #718096; font-weight: 500; }
.kii-dl dd { margin: 0; word-break: break-word; }

/* Inline action error / success notes in the detail pane. */
.kii-action-error {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  color: #c53030;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12.5px;
  word-break: break-word;
}
.kii-action-ok {
  background: #f0fff4;
  border: 1px solid #c6f6d5;
  color: #276749;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12.5px;
}

/* Empty-state hint card ("select an item", "service unavailable"). */
.kii-empty {
  text-align: center;
  padding: 40px 20px;
  color: #718096;
  background: var(--kii-slate-50);
  border: 1px dashed #cbd5e0;
  border-radius: 6px;
  font-size: 13px;
}

/* Inline SVG glyph atop empty-state cards. */
.kii-empty-glyph {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 10px;
  opacity: 0.45;
}

/* Micro-copy hint under a form field. */
.kii-hint {
  font-size: 11.5px;
  color: #718096;
  line-height: 1.45;
  margin: 2px 0 0;
}

/* Subtle toast-style success line (replaces the raw request/method bar;
 * the raw "METHOD /path → status" only appears in Developer mode). */
.kii-toast {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: #276749;
  background: #f0fff4;
  border-left: 3px solid var(--kii-green-500);
  border-radius: 3px;
  padding: 6px 10px;
}

/* Developer-mode toggle in the header. */
.kii-devtoggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--kii-sans);
  font-size: 12px;
  color: #718096;
  padding: 2px 4px;
}
.kii-devtoggle .kii-devtoggle-track {
  display: inline-block;
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: #cbd5e0;
  position: relative;
  transition: background 0.15s;
}
.kii-devtoggle .kii-devtoggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}
.kii-devtoggle.on { color: var(--kii-teal-700); }
.kii-devtoggle.on .kii-devtoggle-track { background: var(--kii-teal-500); }
.kii-devtoggle.on .kii-devtoggle-dot { left: 14px; }

/* First-run "Start here" banner on the home grid. */
.kii-start {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #e6fffa;
  border: 1px solid #b2f5ea;
  border-radius: 6px;
  padding: 14px 16px;
}
.kii-start-x {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #718096;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
}
.kii-start-x:hover { color: var(--kii-slate-700); }

/* Guided stepper (passport journey): numbered cards that collapse to a
 * green check when done; the current step gets the teal border. */
.kii-wstep {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
}
.kii-wstep.current { border-color: var(--kii-teal-500); }
.kii-wstep.done { border-color: #c6f6d5; background: #f0fff4; }
.kii-wstep-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.kii-wstep-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--kii-slate-100);
  color: #4a5568;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.kii-wstep.current .kii-wstep-num { background: var(--kii-teal-500); color: #fff; }
.kii-wstep.done .kii-wstep-num { background: var(--kii-green-500); color: #fff; }
.kii-wstep-body { padding: 0 14px 14px 46px; }

/* Sealed / unsealed badge on passport detail. */
.kii-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.kii-seal svg { width: 12px; height: 12px; }
.kii-seal.sealed { background: #e6fffa; color: var(--kii-teal-700); border-color: #b2f5ea; }
.kii-seal.unsealed { background: var(--kii-slate-50); color: #718096; border-color: #e2e8f0; }

/* Vertical timeline for passport history. */
.kii-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
}
.kii-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: #e2e8f0;
}
.kii-tl-item { position: relative; padding: 5px 0; }
.kii-tl-icon {
  position: absolute;
  left: -30px;
  top: 7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--kii-teal-500);
  color: var(--kii-teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Horizontal LC progress tracker: done teal, current pulsing, future grey. */
.kii-steps { display: flex; }
.kii-step {
  flex: 1;
  position: relative;
  text-align: center;
  padding-top: 22px;
  min-width: 0;
}
.kii-step::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -50%;
  width: 100%;
  height: 3px;
  background: #e2e8f0;
}
/* Alpine keeps the <template> as the container's first child, so match
 * the first rendered step with :first-of-type rather than :first-child. */
.kii-step:first-of-type::before { display: none; }
.kii-step.done::before, .kii-step.current::before { background: var(--kii-teal-500); }
.kii-step-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #cbd5e0;
  box-sizing: border-box;
  z-index: 1;
}
.kii-step.done .kii-step-dot { background: var(--kii-teal-500); border-color: var(--kii-teal-500); }
.kii-step.current .kii-step-dot { border-color: var(--kii-teal-500); animation: pulse 1.2s infinite; }
.kii-step-label {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: #718096;
  padding: 0 2px;
  word-break: break-word;
}
.kii-step.done .kii-step-label { color: var(--kii-teal-700); }
.kii-step.current .kii-step-label { color: var(--kii-slate-700); font-weight: 600; }

/* Collapsible "Guide" side rail on the flagship journeys. */
.kii-guide-rail { width: 240px; flex: none; }
.kii-guide {
  background: var(--kii-slate-50);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px;
  position: sticky;
  top: 76px;
}
.kii-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #4a5568;
  line-height: 1.45;
}
.kii-guide-step .tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #cbd5e0;
  flex: none;
  margin-top: 1px;
  box-sizing: border-box;
  position: relative;
  background: #fff;
}
.kii-guide-step.done { color: #276749; }
.kii-guide-step.done .tick {
  background: var(--kii-green-500);
  border-color: var(--kii-green-500);
}
.kii-guide-step.done .tick::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* On-chain seal callout in the passport stepper. */
.kii-seal-onchain {
  border: 1px solid #16A89E;
  background: #f0fdfa;
  border-radius: 8px;
  padding: 12px 14px;
}