/* ============================================================================
   WARM EDITORIAL THEME — Public Command Center
   Cream/ivory palette, editorial serif headers, calm premium feel.
   ============================================================================ */

:root {
  --bg:          #f3ece1;
  --bg-alt:      #ede5d8;
  --panel:       #faf6ef;
  --panel-hi:    #f5efe4;
  --hairline:    rgba(74,63,53,.12);
  --hairline-md: rgba(74,63,53,.18);
  --ink:         #4a3f35;
  --text:        #5b4f43;
  --text-mut:    #9c8168;
  --text-faint:  #bcac97;

  /* accent palette */
  --clay:        #c1785f;
  --clay-deep:   #a5624b;
  --sage:        #7d8a6f;
  --sage-deep:   #66735a;
  --gold:        #d9a441;
  --rose:        #c58a82;
  --alert:       #b0553f;

  /* glow fills */
  --g-clay:      rgba(193,120,96,.14);
  --g-sage:      rgba(125,138,111,.14);
  --g-gold:      rgba(217,164,65,.14);

  /* state colors */
  --state-running:  #7d8a6f;
  --state-idle:     #bcac97;
  --state-alert:    #b0553f;
  --state-paused:   #d9a441;

  --radius-card: 16px;
  --radius-sm:   10px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

body {
  background:
    radial-gradient(ellipse at 20% 0%,   rgba(212,160,116,.18), transparent 50%),
    radial-gradient(ellipse at 85% 90%,  rgba(193,120,96,.12),  transparent 50%),
    var(--bg);
}

/* ---- typography ---- */
.serif { font-family: Georgia, 'Times New Roman', serif; }

/* ---- layout shell ---- */
.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---- section label ---- */
.section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 14px;
}

/* ---- card ---- */
.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 24px -8px rgba(74,63,53,.09);
  overflow: hidden;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(193,120,96,.22), transparent);
}

/* ---- pill ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid var(--hairline-md);
  background: var(--panel-hi);
  color: var(--text-mut);
}

/* ---- live pulse ---- */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clay);
  display: inline-block;
  flex-shrink: 0;
  animation: pulse-ring 2s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(193,120,96,.55); }
  60%  { box-shadow: 0 0 0 7px rgba(193,120,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(193,120,96,0); }
}

/* ---- hero ---- */
.hero {
  padding: 32px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(26px, 5vw, 40px);
  font-weight: normal;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.hero-subtitle {
  font-size: 15px;
  color: var(--text-mut);
  max-width: 520px;
}
.hero-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.hero-status-text {
  font-size: 13px;
  color: var(--text-mut);
}
#hero-state-text {
  color: var(--clay);
  font-weight: 500;
}

/* ---- numbers panel ---- */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
}
.num-cell {
  background: var(--panel);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.num-cell:first-child { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.num-cell:last-child  { border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.num-value {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 6vw, 52px);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.02em;
}
.num-label {
  font-size: 11.5px;
  color: var(--text-mut);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
}
.num-window {
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ---- node graph ---- */
.node-graph-wrap {
  padding: 32px 20px 28px;
}
.node-svg-container {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
.node-svg-container svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- function node elements ---- */
.fn-node-group { cursor: default; }
.fn-node-bg {
  fill: var(--panel);
  stroke: var(--hairline-md);
  stroke-width: 1.5;
  rx: 12;
}
.fn-node-bg.running {
  stroke: rgba(125,138,111,.45);
}
.fn-node-bg.idle {
  stroke: rgba(188,172,151,.4);
}
.fn-node-bg.alert {
  stroke: rgba(176,85,63,.5);
}
.fn-node-label {
  fill: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}
.fn-node-state {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: middle;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.fn-node-state.running { fill: var(--sage); }
.fn-node-state.idle    { fill: var(--text-faint); }
.fn-node-state.alert   { fill: var(--alert); }

.fn-hub-bg {
  fill: rgba(193,120,96,.10);
  stroke: rgba(193,120,96,.35);
  stroke-width: 1.5;
}
.fn-hub-label {
  fill: var(--clay-deep);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: middle;
  letter-spacing: .05em;
}
.fn-hub-sub {
  fill: var(--clay);
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: middle;
  text-transform: uppercase;
  letter-spacing: .18em;
}
.fn-connector {
  stroke: rgba(125,138,111,.28);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 4 4;
}
.fn-connector.active {
  stroke: rgba(125,138,111,.45);
  stroke-dasharray: none;
}

/* pulse animation on running nodes */
@keyframes node-glow {
  0%   { opacity: .55; }
  50%  { opacity: 1; }
  100% { opacity: .55; }
}
.fn-status-dot {
  animation: node-glow 2.4s ease-in-out infinite;
}
.fn-status-dot.running { fill: var(--sage); }
.fn-status-dot.idle    { fill: var(--text-faint); animation: none; }
.fn-status-dot.alert   { fill: var(--alert); animation: node-glow 1s ease-in-out infinite; }

.system-state-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-mut);
}
#fn-state-label { color: var(--clay); font-weight: 500; }

/* ---- roadmap ---- */
.roadmap-body { padding: 24px 24px 28px; }
.roadmap-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.progress-track {
  height: 5px;
  background: var(--hairline-md);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 24px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--clay), var(--gold));
  border-radius: 99px;
  transition: width .6s ease;
}
.progress-label {
  font-size: 11.5px;
  color: var(--text-mut);
  margin-bottom: 8px;
}
.stages-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 32px;
}
.stage-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.stage-row:last-child { border-bottom: none; }
.stage-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.stage-num.complete { background: var(--sage); color: #fff; }
.stage-num.done     { background: var(--sage); color: #fff; }
.stage-num.here     { background: var(--clay); color: #fff; }
.stage-num.next     { background: transparent; border: 1.5px solid var(--clay); color: var(--clay); }
.stage-num.future   { background: transparent; border: 1.5px solid var(--hairline-md); color: var(--text-faint); }

.stage-content { display: flex; flex-direction: column; gap: 2px; }
.stage-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
.stage-name.complete, .stage-name.done { color: var(--text-mut); text-decoration: line-through; text-decoration-color: var(--hairline-md); }
.stage-name.here   { color: var(--clay-deep); }
.stage-name.next   { color: var(--ink); }
.stage-name.future { color: var(--text-faint); }

.stage-detail {
  font-size: 12px;
  line-height: 1.5;
}
.stage-detail.complete, .stage-detail.done { color: var(--text-faint); }
.stage-detail.here   { color: var(--text-mut); }
.stage-detail.next   { color: var(--text-mut); }
.stage-detail.future { color: var(--text-faint); }

.here-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(193,120,96,.12);
  color: var(--clay-deep);
  border: 1px solid rgba(193,120,96,.25);
  margin-left: 8px;
  vertical-align: middle;
}

/* roadmap two-column on wide */
.roadmap-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 600px) {
  .roadmap-cols { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: 1fr; }
  .num-cell:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .num-cell:last-child  { border-radius: 0 0 var(--radius-card) var(--radius-card); }
}

/* ---- live feed ---- */
.feed-body { padding: 20px 24px 24px; }
.feed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.feed-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  transition: background .3s;
}
.feed-item:last-child { border-bottom: none; }
.feed-item.highlight { background: rgba(193,120,96,.06); border-radius: 6px; padding-left: 8px; padding-right: 8px; }
.feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay);
  margin-top: 6px;
  flex-shrink: 0;
  opacity: .6;
}
.feed-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.feed-ts {
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
  margin-top: 3px;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
}

/* ---- reconnecting state ---- */
.reconnect-msg {
  text-align: center;
  padding: 24px;
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: .08em;
}

/* ---- footer ---- */
.footer {
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .06em;
  padding-top: 8px;
}

/* ---- error state in card ---- */
.error-state {
  padding: 32px 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

/* ============================================================
   SYSTEM CAPABILITIES (trust panel)
   ============================================================ */
.cap-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cap-summary {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  color: #4a3f35;
}
.cap-checked {
  font-size: 11px;
  color: #a99a86;
  letter-spacing: .04em;
}
.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.cap-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(122, 132, 96, .06);
  border: 1px solid rgba(122, 132, 96, .16);
  border-radius: 10px;
}
.cap-check {
  color: #6f7d4e;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  flex-shrink: 0;
}
.cap-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.cap-label { font-size: 13.5px; font-weight: 600; color: #3f382f; }
.cap-blurb { font-size: 11.5px; color: #8c8071; line-height: 1.35; }
.cap-status {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f7d4e;
  align-self: center;
  flex-shrink: 0;
}
.cap-surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.surf-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #4a3f35;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f4efe6;
  border: 1px solid rgba(74, 63, 53, .10);
}
.surf-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #b9ad99;
}
.surf-pill.live .surf-dot {
  background: #6f9d54;
  box-shadow: 0 0 0 3px rgba(111, 157, 84, .18);
}
.surf-pill.offline { color: #a99a86; }
.cap-activity-title {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a99a86;
  margin: 20px 0 8px;
}
.cap-activity { display: flex; flex-direction: column; gap: 6px; }
.cap-act-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #6a5f52;
}
.cap-act-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #c9a24b;
  flex-shrink: 0;
}
.cap-act-text { flex: 1; }
.cap-act-ts { font-size: 11px; color: #b3a591; flex-shrink: 0; }
@media (max-width: 600px) {
  .cap-grid { grid-template-columns: 1fr; }
}