:root {
  color-scheme: light;
  --bg: #f8fafc;
  --panel: #ffffff;
  --ink: #111827;
  --muted: #5b6472;
  --line: #d7dde7;
  --live: #0f7b4f;
  --stage: #9a5b00;
  --warn: #b42318;
  --accent: #1b5f9e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  min-width: 320px;
}

.layout {
  min-height: 100vh;
  --divider-width: 1px;
  --divider-hit-area: 12px;
}

.rail,
.detail {
  min-height: 100vh;
  overflow: auto;
}

.rail {
  border-right: 1px solid var(--line);
  background: #f1f5f9;
}

.rail-header,
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 1.2rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.45rem;
  line-height: 1.2;
}

h3 {
  font-size: 0.95rem;
}

p,
.muted,
.metric-label {
  color: var(--muted);
}

.summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 18px;
}

.summary sl-card::part(base),
.face-card::part(base),
.home-card::part(base),
.detail-card::part(base) {
  border-radius: 8px;
}

.summary-card {
  min-width: 0;
}

.summary-card strong {
  display: block;
  font-size: 1.1rem;
}

.tabs::part(base) {
  --track-color: var(--line);
}

.tabs::part(body) {
  padding: 0;
}

.face-list {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.face-card {
  cursor: pointer;
}

.face-card[aria-current="true"]::part(base) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.face-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.seq {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 0.8rem;
}

.face-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.status-line {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-header {
  align-items: center;
}

.home-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.home-shell {
  padding: 18px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.home-card {
  cursor: pointer;
  min-width: 0;
}

.home-card::part(base) {
  min-height: 172px;
}

.home-card:hover::part(base) {
  border-color: var(--accent);
}

.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.home-card-title {
  min-height: 2.4em;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.source-line {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.detail {
  background: var(--panel);
}

.detail-body {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.metric {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}

.metric-value {
  margin-top: 4px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.surface-json {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: #263445;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.action-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.empty {
  display: grid;
  min-height: 70vh;
  place-items: center;
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

@media (max-width: 760px) {
  .layout {
    display: block;
  }

  .rail,
  .detail {
    min-height: auto;
  }

  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .summary,
  .detail-grid,
  .home-grid {
    grid-template-columns: 1fr;
  }

  .face-list {
    grid-template-columns: 1fr;
  }
}


/* Accountable-build typed face renderers */
.renderer-line {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.header-badges,
.provenance-card .source-list,
.renderer-contract,
.lifecycle,
.lifecycle .life-step,
.trace-row,
.privacy-row,
.node-row,
.action-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.header-badges { justify-content: flex-end; }
.card-kicker {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.primary-renderer-card::part(base) {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.renderer-contract {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 10px 0 12px;
}
.renderer-contract > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}
.renderer-contract span,
.renderer-contract strong {
  display: block;
}
.source-list {
  display: grid;
  gap: 6px;
  font-size: .82rem;
  overflow-wrap: anywhere;
}
.lifecycle {
  display: grid;
  gap: 9px;
}
.life-step {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px;
  background: #fff;
}
.life-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--live);
  box-shadow: 0 0 0 4px rgba(15, 123, 79, .08);
}
.life-step.pending .life-dot { background: var(--muted); }
.life-step.gated .life-dot { background: var(--stage); box-shadow: 0 0 0 4px rgba(154, 91, 0, .10); }
.life-step span { display: block; color: var(--muted); font-size: .84rem; }
.mini-pill {
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255,255,255,.12);
  color: #fff;
}
.mini-pill span { display:block; opacity:.72; font-size:.72rem; text-transform:uppercase; }
.mini-pill strong { display:block; margin-top:3px; }
.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.kanban-col {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #f8fafc;
}
.kanban-title { font-weight: 800; text-transform: capitalize; }
.kanban-count { font-size: 2rem; font-weight: 900; color: var(--accent); }
.kanban-card-unit { margin-top: 12px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.funnel,
.prediction-lanes,
.call-queue,
.trace-list,
.privacy-stack,
.actuator-matrix,
.node-table {
  display: grid;
  gap: 10px;
}
.funnel-step,
.call-card,
.prediction-lanes > div,
.trace-row,
.privacy-row,
.matrix-cell,
.node-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.funnel-step {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
}
.funnel-step span,
.learn-node span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eaf1ff;
  color: var(--accent);
  font-weight: 900;
}
.funnel-step em { color: var(--muted); font-style: normal; }
.call-card.gated,
.matrix-cell.blocked {
  border-color: rgba(180, 35, 24, .35);
  background: #fff7f5;
}
.hud-frame {
  position: relative;
  min-height: 340px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(21, 94, 239, .28), transparent 22%),
    linear-gradient(145deg, #101828, #1d2939 54%, #0b1220);
  border: 1px solid #263445;
}
.hud-reticle {
  position: absolute;
  inset: 26%;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(21, 94, 239, .28);
}
.hud-card { position: absolute; max-width: 230px; display: grid; gap: 8px; }
.hud-card.top-left { top: 18px; left: 18px; }
.hud-card.bottom-right { right: 18px; bottom: 18px; }
.spatial-map {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #eef4ff;
}
.map-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(#d7e3f8 1px, transparent 1px), linear-gradient(90deg, #d7e3f8 1px, transparent 1px);
  background-size: 38px 38px;
}
.map-object {
  position: absolute;
  padding: 10px 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-weight: 800;
}
.object-a { left: 18%; top: 28%; }
.object-b { right: 22%; bottom: 28%; background: var(--stage); }
.map-note { position:absolute; left:18px; right:18px; bottom:18px; padding:10px; border-radius:12px; background:rgba(255,255,255,.86); color:var(--muted); }
.entity-graph,
.mesh-topology,
.flow,
.permission-flow,
.receipt-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 180px;
}
.entity-node,
.mesh-node,
.flow div,
.permission-flow div,
.receipt-node {
  min-width: 110px;
  min-height: 72px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 800;
}
.entity-node.blocked,
.permission-flow .gated { background:#fff7f5; border-color:rgba(180,35,24,.35); color:var(--warn); }
.entity-node.candidate,
.receipt-node.authoritative,
.mesh-node.core { background:#eaf1ff; color:var(--accent); }
.edge,
.mesh-link { width: 40px; height: 1px; background: var(--line); }
.alert-stream {
  min-height: 180px;
  border: 1px solid rgba(180, 35, 24, .18);
  border-radius: 18px;
  background: linear-gradient(135deg, #fff7f5, #fff);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
}
.alert-pulse { width: 54px; height:54px; border-radius:999px; background:var(--warn); box-shadow:0 0 0 18px rgba(180,35,24,.08); }
.os-launcher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 12px;
}
.app-tile {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 20px;
  display: grid;
  place-items: center;
  gap: 8px;
  background: #fff;
}
.app-tile span { width: 44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#eaf1ff; color:var(--accent); font-weight:900; }
.gauge-grid,
.health-rings,
.mixer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 12px;
}
.gauge,
.channel {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #fff;
}
.gauge-ring,
.ring {
  --pct: 60%;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) var(--pct), #e4e7ec 0);
  color: var(--ink);
  font-weight: 900;
}
.ring.big { width: 120px; height: 120px; }
.channel { position: relative; justify-content: end; }
.fader { width: 22px; height: 100px; border-radius:999px; background: linear-gradient(to top, var(--accent) var(--level), #e4e7ec 0); }
.learning-path { display:grid; gap:10px; }
.learn-node { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff; }
.node-row { display:grid; grid-template-columns: 1fr 1fr 1fr; align-items:center; }
.node-row.head { font-weight:900; color:var(--muted); background:#f8fafc; }
.typed-generic { display:grid; min-height:160px; place-items:center; text-align:center; gap:8px; }
@media (max-width: 760px) {
  .hud-frame { min-height: 260px; }
  .hud-card { position: static; margin: 12px; max-width: none; }
  .hud-reticle { inset: 34%; }
  .edge, .mesh-link { display: none; }
}


/* Reader + streamer component stack */
.component-stack,
.stream-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.component-stack > div,
.stream-head > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #f8fafc;
}
.component-stack span,
.component-stack strong,
.stream-head span,
.stream-head strong {
  display: block;
  overflow-wrap: anywhere;
}
.stream-card::part(base) {
  border-color: rgba(21, 94, 239, .22);
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}
.stream-events {
  display: grid;
  gap: 8px;
}
.stream-event {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.stream-event strong { color: var(--accent); }
.stream-event span { color: var(--muted); overflow-wrap: anywhere; }
.stream-event.pending strong { color: var(--stage); }
@media (max-width: 760px) {
  .stream-event { grid-template-columns: 1fr; }
}