/* =====================================================================
   ATWOOD — DESIGN SYSTEM
   Single source of truth for tokens + components. Linked by every page.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  /* color — surfaces */
  --ink-900:#0c0e12;       /* page background */
  --ink-800:#12151b;       /* raised surface */
  --ink-700:#1a1e26;       /* card */
  --ink-600:#252b35;       /* border / hairline */
  --ink-500:#39414d;       /* muted border */

  /* color — text */
  --text-hi:#f4f1ea;       /* warm off-white */
  --text-mid:#b9bdc6;
  --text-lo:#7d8390;

  /* color — accent */
  --accent:#c8a86a;        /* warm gold — premium, institutional */
  --accent-soft:#e3cfa0;
  --accent-glow:rgba(200,168,106,.16);
  --cool:#7fb3c4;          /* secondary cool accent for diagrams */
  --danger:#d98b7a;        /* risk / negative */

  /* radius */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  /* space scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* type */
  --font-sans:'Inter',system-ui,sans-serif;
  --font-serif:'Fraunces',Georgia,serif;

  --maxw:1160px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--ink-900);
  color:var(--text-mid);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-5)}
section{position:relative}
a{color:inherit;text-decoration:none}
h1,h2,h3{color:var(--text-hi);font-weight:500;line-height:1.1;letter-spacing:-.02em}
.serif{font-family:var(--font-serif)}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.muted{color:var(--text-lo)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:500;font-size:15px;border-radius:var(--r-pill);
  padding:12px 22px;transition:all .25s var(--ease);cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:#1a1408}
.btn-primary:hover{background:var(--accent-soft);transform:translateY(-1px)}
.btn-ghost{border-color:var(--ink-500);color:var(--text-hi)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-soft)}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(12,14,18,.72);
  border-bottom:1px solid var(--ink-600);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--font-serif);font-size:24px;color:var(--text-hi);font-weight:600;letter-spacing:-.02em}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:var(--s-6);font-size:14.5px;color:var(--text-mid)}
.nav-links a:hover{color:var(--text-hi)}
.nav-links a.active{color:var(--accent)}
@media(max-width:820px){.nav-links{display:none}}

/* ---------- HERO ---------- */
.hero{padding:var(--s-10) 0 var(--s-9);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 70% 0%, var(--accent-glow), transparent 70%),
    radial-gradient(40% 40% at 10% 30%, rgba(127,179,196,.08), transparent 70%);
}
.hero h1{font-size:clamp(40px,6vw,72px);max-width:15ch}
.hero .lede{font-size:clamp(17px,2.2vw,21px);max-width:56ch;margin-top:var(--s-5);color:var(--text-mid)}
.hero-cta{display:flex;gap:var(--s-3);margin-top:var(--s-7);flex-wrap:wrap}
.hero-tag,.crumb{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink-600);
  border-radius:var(--r-pill);padding:6px 14px 6px 8px;font-size:13px;color:var(--text-mid);margin-bottom:var(--s-6)}
.crumb{padding:6px 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}

/* trust strip */
.trust{border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600);padding:var(--s-6) 0;margin-top:var(--s-9)}
.trust p{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-lo);text-align:center;margin-bottom:var(--s-5)}
.trust-logos{display:flex;justify-content:center;gap:clamp(24px,6vw,72px);flex-wrap:wrap;align-items:center}
.trust-logos span{font-family:var(--font-serif);font-size:22px;color:var(--text-mid);opacity:.7;font-weight:500}

/* ---------- SECTION SHELL ---------- */
.section{padding:var(--s-10) 0}
.section-head{max-width:62ch;margin-bottom:var(--s-8)}
.section-head h2{font-size:clamp(28px,4vw,46px);margin-top:var(--s-3)}
.section-head p{margin-top:var(--s-4);font-size:17px}

/* ---------- CARDS / PILLARS / SERVICES ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
@media(max-width:880px){.pillars,.services,.two{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg,var(--ink-700),var(--ink-800));
  border:1px solid var(--ink-600);border-radius:var(--r-lg);
  padding:var(--s-6);transition:all .3s var(--ease);
}
.card:hover{border-color:var(--ink-500);transform:translateY(-3px)}
.card .num{font-family:var(--font-serif);font-size:14px;color:var(--accent);letter-spacing:.1em}
.card .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card h3{font-size:22px;margin:var(--s-4) 0 var(--s-2)}
.card .role{font-size:13px;color:var(--text-lo);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s-4)}
.card p{font-size:15px}
.card ul{list-style:none;margin-top:var(--s-4);display:grid;gap:10px}
.card li{font-size:14.5px;color:var(--text-mid);padding-left:22px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--accent);opacity:.8}
.card .when{margin-top:var(--s-5);font-size:13px;color:var(--text-lo);border-top:1px solid var(--ink-600);padding-top:var(--s-4)}
.card .when b{color:var(--text-mid);font-weight:500}

/* ---------- FLOW DIAGRAM ---------- */
.flow{background:var(--ink-800);border-top:1px solid var(--ink-600);border-bottom:1px solid var(--ink-600)}
.flow-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:var(--s-4);margin-top:var(--s-7)}
@media(max-width:880px){.flow-grid{grid-template-columns:1fr;gap:var(--s-3)}.flow-arrow{transform:rotate(90deg)}}
.flow-node{
  background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-md);
  padding:var(--s-5);text-align:center;
}
.flow-node.center{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow),0 24px 60px -30px var(--accent-glow)}
.flow-node h4{color:var(--text-hi);font-size:17px;margin-bottom:6px}
.flow-node small{color:var(--text-lo);font-size:13px;display:block}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:22px}
.flow-caption{text-align:center;margin-top:var(--s-6);color:var(--text-mid);font-size:15px}
.flow-caption b{color:var(--text-hi);font-weight:500}

/* ---------- QUAD (4-up small cards) ---------- */
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
@media(max-width:880px){.quad{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.quad{grid-template-columns:1fr}}
.quad .card{padding:var(--s-5)}
.quad .icon,.qcard .icon{width:40px;height:40px;border-radius:10px;background:var(--accent-glow);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;margin-bottom:var(--s-4)}
.quad h4{color:var(--text-hi);font-size:17px;margin-bottom:6px}
.quad p{font-size:14px;color:var(--text-mid)}
.qcard{background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-md);padding:var(--s-5)}
.qcard h4{color:var(--text-hi);font-size:16px;margin-bottom:5px}
.qcard p{font-size:13.5px}

/* ---------- GOVERNANCE / RISK ---------- */
.sec{background:var(--ink-800);border-top:1px solid var(--ink-600)}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
@media(max-width:880px){.sec-grid{grid-template-columns:1fr}}
.risklist{display:grid;gap:var(--s-3)}
.risk{display:flex;gap:var(--s-4);align-items:flex-start;background:var(--ink-700);border:1px solid var(--ink-600);
  border-radius:var(--r-md);padding:var(--s-4) var(--s-5)}
.risk .x{color:var(--danger);font-weight:600;flex-shrink:0;margin-top:1px}
.risk .check{color:var(--accent);font-weight:600;flex-shrink:0;margin-top:1px}
.risk b{color:var(--text-hi);font-weight:500}
.risk span{font-size:14.5px}

/* ---------- MOBILE APP SHOWCASE ---------- */
.app-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-8);align-items:center}
@media(max-width:880px){.app-grid{grid-template-columns:1fr}}
.phone{
  width:280px;margin:0 auto;border-radius:36px;background:var(--ink-700);
  border:1px solid var(--ink-500);padding:14px;box-shadow:0 40px 80px -40px #000;
}
.phone-screen{background:linear-gradient(180deg,#15191f,#0e1116);border-radius:26px;padding:20px 16px;min-height:480px}
.phone-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.phone-top .logo{font-size:18px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);opacity:.85}
.bubble{background:var(--ink-700);border:1px solid var(--ink-600);border-radius:14px;padding:12px 14px;font-size:13px;margin-bottom:10px;color:var(--text-mid)}
.bubble.me{background:var(--accent-glow);border-color:transparent;color:var(--accent-soft);margin-left:36px}
.bubble small{display:block;color:var(--text-lo);font-size:11px;margin-bottom:4px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:11px;border:1px solid var(--ink-500);border-radius:var(--r-pill);padding:5px 11px;color:var(--text-mid)}
.feat{display:grid;gap:var(--s-5)}
.feat-item h4{color:var(--text-hi);font-size:18px;margin-bottom:4px}
.feat-item p{font-size:14.5px}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-7)}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--ink-600);border-radius:var(--r-md);padding:var(--s-5);background:var(--ink-800)}
.step .n{font-family:var(--font-serif);font-size:32px;color:var(--accent);line-height:1}
.step h4{color:var(--text-hi);margin:var(--s-3) 0 6px;font-size:18px}
.step p{font-size:14px}

/* ---------- AGENT LOOP DIAGRAM ---------- */
.loop-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center}
@media(max-width:880px){.loop-grid{grid-template-columns:1fr}}
.loop-svg{width:100%;max-width:460px;margin:0 auto;display:block}
.stage{display:grid;gap:var(--s-3)}
.stage-row{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-4) var(--s-5);background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-md)}
.stage-row .k{font-family:var(--font-serif);color:var(--accent);font-size:15px;width:1.5em;flex-shrink:0}
.stage-row b{color:var(--text-hi);font-weight:500}
.stage-row span{font-size:14.5px}

/* Interactive Agent Loop (agents.html) */
.loop-node{transition:transform .3s ease,filter .3s ease;outline:none}
.loop-node circle{transition:stroke .3s ease,fill .3s ease,stroke-width .3s ease}
.loop-node:hover,.loop-node.active{transform:scale(1.03);filter:drop-shadow(0 0 6px var(--accent-glow))}
.loop-node:hover circle,.loop-node.active circle{stroke:var(--accent);fill:var(--ink-600);stroke-width:2px}
.loop-node.central-core:hover circle,.loop-node.central-core.active circle{stroke:var(--accent-soft);fill:var(--ink-700);filter:drop-shadow(0 0 10px var(--accent-glow))}
.stage-row{transition:all .3s var(--ease);cursor:pointer}
.stage-row:hover,.stage-row.active{border-color:var(--accent);background:var(--ink-600);transform:translateX(6px)}

/* ---------- TIMELINE ---------- */
.timeline{display:grid;gap:var(--s-3);margin-top:var(--s-7)}
.tl{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:start;background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--r-md);padding:var(--s-5)}
.tl .b{width:34px;height:34px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:15px;flex-shrink:0}
.tl h4{color:var(--text-hi);font-size:16px;margin-bottom:3px}
.tl p{font-size:14px}
.tl .gtag{font-size:11px;color:var(--text-lo);margin-top:8px;display:inline-block;border:1px solid var(--ink-500);border-radius:var(--r-pill);padding:3px 10px}

/* ---------- CTA ---------- */
.cta{text-align:center;padding:var(--s-10) 0}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(50% 70% at 50% 0%,var(--accent-glow),transparent 70%)}
.cta h2{font-size:clamp(32px,5vw,54px);max-width:18ch;margin:0 auto}
.cta p{max-width:48ch;margin:var(--s-5) auto 0;font-size:17px}
.cta .hero-cta,.cta-row{display:flex;gap:var(--s-3);justify-content:center;margin-top:var(--s-7);flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--ink-600);padding:var(--s-7) 0;margin-top:var(--s-8)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.foot-inner small{color:var(--text-lo);font-size:13px}
.tagline{color:var(--text-mid);font-family:var(--font-serif);font-style:italic}

/* =====================================================================
   MCP INTEGRATION DIAGRAM
   ===================================================================== */
.mcp-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-6);
  align-items: center;
  margin-top: var(--s-7);
}

@media (max-width: 880px) {
  .mcp-container {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.mcp-visual-panel {
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: center;
}

#mcp-svg {
  width: 100%;
  height: auto;
  max-width: 540px;
}

.mcp-node circle {
  transition: fill 0.3s var(--ease), stroke 0.3s var(--ease), stroke-width 0.3s var(--ease), filter 0.3s var(--ease);
}

.mcp-node.platform:hover circle,
.mcp-node.platform.active circle {
  stroke: var(--accent);
  fill: var(--ink-600);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.mcp-node.platform.active circle {
  stroke-width: 2.5px;
}

.mcp-node text {
  pointer-events: none;
  user-select: none;
}

/* Connection Paths styling */
.mcp-lines path {
  transition: stroke 0.3s var(--ease), stroke-width 0.3s var(--ease), stroke-dasharray 0.3s var(--ease);
}

.mcp-lines path.active {
  stroke: var(--accent);
  stroke-width: 2.5px;
  stroke-dasharray: 6 4;
  animation: mcpFlowDash 3s linear infinite;
}

@keyframes mcpFlowDash {
  to {
    stroke-dashoffset: -20;
  }
}

/* Details Panel & Cards */
.mcp-details-panel {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mcp-detail-card {
  display: none;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
  animation: mcpFadeIn 0.35s var(--ease) forwards;
}

.mcp-detail-card.active {
  display: block;
}

.mcp-detail-card h4 {
  color: var(--text-hi);
  font-size: 20px;
  margin-bottom: var(--s-2);
}

/* Status Indicator styling */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.status-indicator.connected {
  color: var(--accent-soft);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-lo);
  position: relative;
}

.pulse-dot.green {
  background: #52b788;
  box-shadow: 0 0 8px rgba(82, 183, 136, 0.6);
}

.pulse-dot.green::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #52b788;
  opacity: 0;
  animation: mcpPulse 2s infinite;
}

@keyframes mcpPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Tool List Details */
.tool-list {
  list-style: none;
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-2);
}

.tool-list li {
  font-size: 13.5px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-sans);
}

.tool-list code {
  color: var(--text-hi);
  font-family: monospace;
  font-size: 12.5px;
}

.tool-list .tag {
  font-size: 10px;
  color: var(--cool);
  border: 1px solid rgba(127,179,196,0.3);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.tool-list .tag.audit {
  color: var(--accent);
  border-color: var(--accent-glow);
}

.tool-list .tag.approval {
  color: var(--danger);
  border-color: rgba(217,139,122,0.3);
}

.tool-list .tag.draft {
  color: #a8dadc;
  border-color: rgba(168,218,220,0.3);
}

/* Accessibility Focus States */
.mcp-node.platform:focus-visible {
  outline: none;
}
.mcp-node.platform:focus-visible circle {
  stroke: var(--accent-soft);
  stroke-width: 3px;
  filter: drop-shadow(0 0 10px var(--accent));
}

@keyframes mcpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   INTERACTIVE 6-STEP QUERY FLOW (R2)
   ===================================================================== */
.query-flow-container {
  margin-top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.query-flow-timeline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  padding: var(--s-4) 0;
  gap: var(--s-2);
}

@media (max-width: 880px) {
  .query-flow-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }
  
  .query-flow-timeline .timeline-line-connector {
    width: 2px !important;
    height: var(--s-5) !important;
    left: 20px !important;
    top: auto !important;
    margin: -8px 0 !important;
  }
}

.timeline-line-connector {
  flex-grow: 1;
  height: 2px;
  background: var(--ink-600);
  position: relative;
  transition: background 0.3s var(--ease);
}

.timeline-line-connector.active {
  background: var(--accent);
}

.flow-step-node {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  z-index: 2;
  transition: transform 0.25s var(--ease);
  width: 100px;
}

@media (max-width: 880px) {
  .flow-step-node {
    flex-direction: row;
    width: 100%;
    align-items: center;
    gap: var(--s-4);
  }
}

.flow-step-node:hover {
  transform: translateY(-2px);
}

@media (max-width: 880px) {
  .flow-step-node:hover {
    transform: translateX(4px);
  }
}

.step-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink-800);
  border: 1.5px solid var(--ink-600);
  color: var(--text-lo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s var(--ease);
}

.flow-step-node.active .step-circle {
  background: var(--ink-700);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.flow-step-node.completed .step-circle {
  background: var(--accent-glow);
  border-color: var(--accent-soft);
  color: var(--accent-soft);
}

.step-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-lo);
  text-align: center;
  transition: color 0.3s var(--ease);
}

.flow-step-node.active .step-title {
  color: var(--text-hi);
  font-weight: 600;
}

.flow-step-node.completed .step-title {
  color: var(--text-mid);
}

.query-flow-display {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-6);
  min-height: 360px;
  align-items: stretch;
}

@media (max-width: 880px) {
  .query-flow-display {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.terminal-panel {
  background: #07080a;
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  font-family: monospace;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.terminal-header {
  background: var(--ink-800);
  border-bottom: 1px solid var(--ink-600);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.terminal-title {
  color: var(--text-lo);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.terminal-body {
  padding: var(--s-4);
  flex-grow: 1;
  color: #a2a8b5;
  line-height: 1.6;
  overflow-y: auto;
}

.terminal-line {
  margin-bottom: 6px;
  white-space: pre-wrap;
}

.terminal-line .t-timestamp {
  color: var(--text-lo);
  margin-right: 8px;
}

.terminal-line .t-tag {
  color: var(--accent);
  margin-right: 8px;
  font-weight: bold;
}

.terminal-line .t-tag.system {
  color: var(--cool);
}

.terminal-line .t-tag.success {
  color: #52b788;
}

.terminal-line .t-tag.warning {
  color: var(--danger);
}

.details-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flow-detail-card {
  display: none;
  background: var(--ink-700);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
  animation: flowFadeIn 0.35s var(--ease) forwards;
}

.flow-detail-card.active {
  display: block;
}

.flow-detail-card h3 {
  font-size: 22px;
  margin: var(--s-2) 0 var(--s-3);
  color: var(--text-hi);
}

.detail-eyebrow {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.flow-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: var(--s-4);
  background: var(--ink-800);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-600);
}

.flow-status .pulse-dot.danger {
  background: var(--danger);
  box-shadow: 0 0 8px rgba(217, 139, 122, 0.6);
}

.flow-status .pulse-dot.danger::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--danger);
  opacity: 0;
  animation: mcpPulse 2s infinite;
}

.flow-checklist {
  list-style: none;
  margin-top: var(--s-4);
  display: grid;
  gap: 10px;
}

.flow-checklist li {
  font-size: 14px;
  color: var(--text-mid);
  padding-left: 24px;
  position: relative;
}

.flow-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

@keyframes flowFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   CAPABILITIES CARDS ENHANCEMENTS
   ===================================================================== */
/* Flagship highlight for Managed Company AI */
#card-managed-ai {
  border-color: var(--accent-soft);
  position: relative;
  box-shadow: 0 10px 30px -15px var(--accent-glow);
}
#card-managed-ai::before {
  content: "FLAGSHIP";
  position: absolute;
  top: -12px;
  right: var(--s-5);
  background: var(--accent);
  color: var(--ink-900);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.08em;
}
#card-managed-ai:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 40px -12px var(--accent-glow);
}

/* Capabilities Cards Hover Glows */
#card-nunc-server:hover,
#card-managed-ai:hover,
#card-app-dev:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px -10px var(--accent-glow);
}