/* Agent Library — Terminal DS application styles */
html, body { margin:0; padding:0; background: var(--bg-page); color: var(--text-primary);
  font-family: "Haffer", ui-sans-serif, system-ui, sans-serif; font-weight:430; line-height:1.4; }
* { box-sizing: border-box; }
a { color: var(--text-link); text-decoration: none; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* header */
.site-header { position: sticky; top:0; z-index:40; background: rgba(247,249,251,.86);
  backdrop-filter: blur(12px); border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:10px; cursor:pointer; }
.brand-mark { width:30px; height:30px; border-radius:8px; background: var(--ink-900); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:15px; }
.brand-name { font-weight:570; font-size:17px; letter-spacing:.005em; }
.header-nav { display:flex; gap:22px; }
.header-nav a { color: var(--text-secondary); font-size:15px; font-weight:500; }
.header-nav a.active, .header-nav a:hover { color: var(--ink-900); }

/* hero */
.hero { background: var(--ink-800); color:#fff; padding:72px 0 64px; }
.eyebrow { text-transform:uppercase; letter-spacing:.04em; font-weight:570; font-size:12.5px; }
.hero .eyebrow { color: var(--green-300); }
.hero h1 { font-weight:570; font-size: clamp(34px, 4.6vw, 58px); line-height:1.1; letter-spacing:.005em;
  margin:14px 0 16px; max-width:880px; }
.hero p.lead { color: rgba(255,255,255,.78); font-size:18px; max-width:760px; margin:0 0 30px; }
.hero-stats { display:flex; gap:12px; flex-wrap:wrap; }
.chip { background:#fff; color: var(--ink-900); border-radius:999px; padding:10px 20px;
  box-shadow: 0 10px 24px rgba(22,24,29,.16); font-size:14px; display:inline-flex; gap:8px; align-items:center; }
.chip strong { font-weight:570; }

/* filter bar */
.filterbar { padding:26px 0 6px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tabs { display:inline-flex; background: var(--neutral-100); border-radius:999px; padding:4px; flex-wrap:wrap; }
.tabs button { border:0; background:transparent; border-radius:999px; padding:8px 16px; cursor:pointer;
  font: inherit; font-size:13.5px; font-weight:500; color: var(--text-secondary);
  transition: all .12s cubic-bezier(.22,1,.36,1); }
.tabs button.active { background:#fff; color: var(--ink-900); box-shadow:0 2px 8px rgba(22,24,29,.10); }
.searchbox { margin-left:auto; }
.searchbox input { border:1.5px solid var(--border-strong); border-radius:12px; padding:9px 14px; font:inherit;
  font-size:14px; width:240px; background:#fff; color:var(--ink-900); outline:none; }
.searchbox input:focus { border-color: var(--ink-800); box-shadow:0 0 0 3px rgba(85,126,146,.18); }

/* grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:18px; padding:22px 0 72px; }
.case-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px;
  cursor:pointer; transition: all .12s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; gap:10px; }
.case-card:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(22,24,29,.12); }
.card-top { display:flex; align-items:center; gap:8px; }
.tag { border-radius:999px; padding:3px 11px; font-size:11.5px; font-weight:570; letter-spacing:.03em;
  text-transform:uppercase; }
.tag.cat-ops { background:var(--green-100); color:var(--green-700); }
.tag.cat-gtm { background:var(--yellow-100); color:var(--warning-700); }
.tag.cat-copilot { background:var(--blue-100); color:var(--blue-700); }
.tag.cat-factory { background:#E7EDF1; color:var(--ink-800); }
.tag.cat-meta { background:#EAF4F4; color:var(--teal-700); }
.tag.cat-knowledge { background:var(--neutral-100); color:var(--neutral-600); }
.tag.status { background:transparent; border:1px solid var(--border-strong); color:var(--text-muted); }
.case-card h3 { margin:2px 0 0; font-size:20px; font-weight:570; letter-spacing:.005em; }
.case-card .repo { font-size:12.5px; color: var(--text-muted); }
.case-card p.tease { margin:0; color:var(--text-secondary); font-size:14.5px; }
.card-foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid var(--neutral-100); }
.card-foot .n { font-size:12.5px; color:var(--text-muted); }
.card-foot .view { color:var(--green-600); font-weight:570; font-size:14px; }

/* detail page */
.detail-hero { background: var(--ink-800); color:#fff; padding:52px 0 44px; }
.crumb { color:rgba(255,255,255,.6); font-size:13.5px; margin-bottom:16px; display:inline-block; cursor:pointer; }
.crumb:hover { color:#fff; }
.detail-hero h1 { font-weight:570; font-size:clamp(30px,3.6vw,46px); margin:10px 0 12px; line-height:1.12; letter-spacing:.005em; }
.detail-hero p.lead { color:rgba(255,255,255,.78); font-size:17px; max-width:820px; margin:0 0 22px; }
.pillrow { display:flex; gap:8px; flex-wrap:wrap; }
.pill { border:1px solid rgba(255,255,255,.28); color:rgba(255,255,255,.85); border-radius:999px;
  padding:5px 14px; font-size:12.5px; }
.pill.solid { background:#fff; color:var(--ink-900); border-color:#fff; font-weight:570; }

.statband { background: var(--ink-900); color:#fff; }
.statband .container { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px; padding:24px 28px; }
.stat b { display:block; font-size:26px; font-weight:570; letter-spacing:.005em; color:var(--green-300); }
.stat span { font-size:12.5px; color:rgba(255,255,255,.66); }

.section { padding:52px 0; }
.section.alt { background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section h2 { font-weight:570; font-size:clamp(24px,2.6vw,34px); letter-spacing:.005em; margin:6px 0 18px; }
.section .eyebrow { color: var(--green-600); }
.two-col { display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; }
@media (max-width: 900px){ .two-col{ grid-template-columns:1fr; } }
.prose p { color:var(--text-secondary); font-size:16px; line-height:1.55; margin:0 0 14px; }
.prose strong { color:var(--ink-900); font-weight:570; }

.impact-list { display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
.impact-list li { background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px 18px;
  font-size:15px; color:var(--text-secondary); display:flex; gap:12px; }
.section.alt .impact-list li { background: var(--neutral-50); }
.impact-list li::before { content:"▸"; color:var(--green-600); font-weight:700; }
.impact-list li strong { color: var(--ink-900); font-weight:570; }

/* agents table */
.agent-table { width:100%; border-collapse:separate; border-spacing:0; background:#fff;
  border:1px solid var(--border); border-radius:16px; overflow:hidden; font-size:14.5px; }
.agent-table th { text-align:left; padding:12px 16px; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-muted); background:var(--neutral-50); font-weight:570;
  border-bottom:1px solid var(--border); }
.agent-table td { padding:12px 16px; border-bottom:1px solid var(--neutral-100); color:var(--text-secondary); vertical-align:top; }
.agent-table tr:last-child td { border-bottom:0; }
.agent-table td:first-child { font-weight:570; color:var(--ink-900); white-space:nowrap; }
.harness-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.harness-list li { font-size:14.5px; color:var(--text-secondary); padding-left:22px; position:relative; }
.harness-list li::before { content:""; position:absolute; left:0; top:7px; width:10px; height:10px;
  border-radius:3px; background: var(--teal-400); }
.harness-list li strong { color:var(--ink-900); font-weight:570; }

/* flow canvas */
.flow-wrap { position:relative; background: var(--ink-900); border-radius:36px; overflow:hidden;
  height:640px; cursor:grab; box-shadow: 0 24px 60px rgba(22,24,29,.18); }
.flow-wrap.dragging { cursor:grabbing; }
.flow-canvas { position:absolute; transform-origin:0 0; }
.flow-canvas svg { position:absolute; top:0; left:0; pointer-events:none; }
.flow-lane-label { position:absolute; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45); font-weight:570; }
.flow-node { position:absolute; width:220px; background:#2F444D; border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:12px 14px; cursor:pointer; user-select:none;
  transition: box-shadow .15s, transform .15s; }
.flow-node:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.flow-node.active { box-shadow:0 0 0 2px var(--green-500); }
.flow-node .ntag { font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  padding:2px 8px; border-radius:999px; display:inline-block; margin-bottom:6px; }
.flow-node h4 { margin:0 0 4px; font-size:13px; color:#fff; font-weight:570; }
.flow-node p { margin:0; font-size:11px; color:rgba(255,255,255,.62); line-height:1.45; }
.t-src   { background:rgba(139,191,208,.16); color:#A0CFDA; }
.t-agent { background:rgba(255,255,255,.10); color:#CBD6DC; }
.t-llm   { background:rgba(152,185,107,.2); color:#BDD796; }
.t-gate  { background:rgba(249,198,108,.18); color:#F9C66C; }
.t-store { background:rgba(126,184,185,.18); color:#A9D2D3; }
.t-out   { background:rgba(236,178,63,.16); color:#FBDF8F; }
.flow-legend { display:flex; gap:16px; flex-wrap:wrap; margin:0 0 14px; font-size:12.5px; color:var(--text-muted); }
.flow-legend span { display:inline-flex; align-items:center; gap:6px; }
.flow-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.flow-detail { background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px 20px;
  margin-top:16px; min-height:74px; }
.flow-detail h4 { margin:0 0 6px; font-size:16px; font-weight:570; }
.flow-detail p { margin:0; font-size:14.5px; color:var(--text-secondary); }
.flow-hint { font-size:12.5px; color:var(--text-muted); margin-top:10px; }

/* about page */
.about-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; padding:8px 0 40px; }
.about-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px 22px; }
.about-card h3 { margin:0 0 8px; font-size:17px; font-weight:570; }
.about-card p { margin:0; font-size:14.5px; color:var(--text-secondary); }

/* prev/next */
.pn { display:flex; justify-content:space-between; gap:14px; padding:0 0 64px; }
.pn a { flex:1; background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px 18px;
  color:var(--ink-900); transition: all .12s; }
.pn a:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(22,24,29,.10); }
.pn a span { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin-bottom:4px; }
.pn a b { font-weight:570; }
.pn a.next { text-align:right; }

/* footer */
.site-footer { background: var(--ink-900); color:#fff; padding:44px 0; }
.footer-inner { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer-title { font-weight:570; font-size:17px; margin-bottom:8px; }
.site-footer p { color:rgba(255,255,255,.66); font-size:14px; max-width:460px; margin:0; }
.footer-meta { display:flex; flex-direction:column; gap:6px; font-size:13px; color:rgba(255,255,255,.55); text-align:right; }
@media (max-width:700px){ .footer-meta{ text-align:left; } }

/* ---------- detail tabs ---------- */
.detail-tabs{display:flex;gap:8px;margin:28px auto 0;padding-top:8px}
.detail-tabs button{font:inherit;font-weight:600;font-size:15px;padding:10px 22px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}
.detail-tabs button.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.detail-tabs button:not(.active):not(:disabled):hover{border-color:var(--ink-800);color:var(--text-primary)}
.detail-tabs button:disabled{opacity:.45;cursor:default}

/* ---------- under the hood ---------- */
.layer-stack{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.layer{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px 22px}
.layer .layer-n{flex:0 0 44px;height:44px;border-radius:12px;background:var(--ink-900);color:var(--green-300,#B9D19A);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.layer h4{margin:2px 0 4px;font-size:16px}
.layer p{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.55}

.det-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.det-list li{background:#fff;border:1px solid var(--border);border-left:4px solid var(--blue-500);border-radius:12px;padding:13px 16px;font-size:14.5px;line-height:1.55;color:var(--text-secondary)}
.det-list.nondet li{border-left-color:var(--green-600)}

.decision-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.decision{background:var(--ink-900);border-radius:16px;padding:18px 22px}
.decision h4{margin:0 0 6px;color:#fff;font-size:15.5px}
.decision p{margin:0;color:rgba(247,249,251,.75);font-size:14px;line-height:1.55}

/* ---------- pipeline stage cards ---------- */
.section-sub{color:var(--text-secondary);font-size:15px;max-width:640px;margin:6px 0 0}
.stage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:22px}
.stage-card{position:relative;background:var(--ink-900);border-radius:16px;padding:20px 18px 48px;cursor:pointer;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.stage-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stage-color)}
.stage-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,32,41,.25)}
.stage-card .stage-no{color:var(--stage-color);font-size:10.5px;letter-spacing:.16em;font-weight:800;text-transform:uppercase}
.stage-card h3{margin:10px 0 8px;color:#fff;font-size:18px;letter-spacing:-.02em}
.stage-card p{margin:0 0 12px;color:rgba(247,249,251,.65);font-size:12.5px;line-height:1.5}
.stage-card .stage-meta{display:flex;flex-wrap:wrap;gap:5px}
.stage-card .stage-meta .ntag{font-size:9.5px}
.stage-card .stage-cta{position:absolute;left:18px;bottom:15px;color:var(--stage-color);font-size:12px;font-weight:700}
.flow-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:26px 0 12px}
.flow-close{color:var(--text-secondary);font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid var(--border);border-radius:999px;padding:7px 14px;background:#fff}
.flow-close:hover{color:var(--text-primary);border-color:var(--ink-800)}
.flow-section[hidden]{display:none}

/* ---------- task loops ---------- */
.loop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:22px}
.loop-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px 20px;position:relative}
.loop-card::before{content:"⟳";position:absolute;right:16px;top:14px;color:var(--green-600);font-size:17px;font-weight:700}
.loop-head{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;padding-right:26px}
.loop-head h4{margin:0;font-size:15.5px}
.loop-cadence{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);background:rgba(112,156,176,.14);border-radius:999px;padding:3px 9px}
.loop-card p{margin:0;color:var(--text-secondary);font-size:13.5px;line-height:1.55}