/* ────────────────────────────────────────────────────────────────────────
     Kevin schematic design system.

     This page is drawn in the SAME visual grammar the platform uses to
     describe itself: tools/spw1-site/architecture/STYLE_GUIDE.md defines five
     shape classes and four edge classes, each with a fixed meaning, and every
     architecture SVG on this site is generated from the live knowledge graph
     using them. Nothing here is decorative. A cyan border means "code that
     does work". A pink border means "stateful data". A dashed green border
     means "a third-party system". The page is a wiring diagram you can read.
     ──────────────────────────────────────────────────────────────────────── */
  :root {
    --cyan:   #00D9FF;   /* process — code that does work            */
    --yellow: #FFD93D;   /* actor / bus — initiates, or carries       */
    --pink:   #FF6B9D;   /* store — stateful data                     */
    --green:  #51CF66;   /* external — third-party system             */
    --red:    #FF6B6B;   /* error path                                */
    --bg:     #0a0a0f;
    --panel:  #1a1a2e;   /* process/store/external fill               */
    --busfill:#2a1a3e;   /* bus fill                                  */
    --actorfill:#0f3460; /* actor fill                                */
    --text:   #FFFFFF;
    --light:  #CCCCCC;
    --muted:  #888888;
    --mono: 'Courier New', ui-monospace, monospace;
    --sans: Arial, system-ui, sans-serif;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    background:var(--bg); color:var(--light);
    font-family:var(--sans); line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a { color:var(--cyan); }

  /* ── The bus rail. Nav is a .bus: yellow on purple, because that is what a
        topic group looks like in every diagram we publish. ── */
  .busrail {
    position:sticky; top:0; z-index:50;
    background:var(--busfill); border-bottom:2px solid var(--yellow);
  }
  .busrail .inner {
    max-width:1180px; margin:0 auto; padding:9px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .busrail .mark { display:flex; align-items:baseline; gap:9px; text-decoration:none; }
  .busrail .mark b { color:var(--yellow); font-size:1.02rem; letter-spacing:.5px; text-transform:uppercase; }
  .busrail .mark span { font-family:var(--mono); font-size:.66rem; color:var(--cyan); }
  .busrail nav { display:flex; gap:19px; flex-wrap:wrap; }
  .busrail nav a {
    color:var(--light); text-decoration:none; font-size:.78rem;
    padding-bottom:2px; border-bottom:1px solid transparent;
  }
  .busrail nav a:hover { color:var(--yellow); border-bottom-color:var(--yellow); }

  .wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
  section { padding:64px 0; }
  section + section { border-top:1px solid #16162a; }

  /* ── Type. .ns = node sub (cyan mono, a real code path). .ep = edge payload
        (yellow mono, a literal). Same classes as the SVGs. ── */
  h1 { font-size:2.55rem; line-height:1.14; color:var(--text); font-weight:800; letter-spacing:-.5px; }
  h2 { font-size:1.42rem; color:var(--cyan); font-weight:800; margin-bottom:6px; }
  h3 { font-size:.95rem; color:var(--text); font-weight:800; }
  .sub { font-family:var(--mono); font-size:.72rem; color:var(--muted); }
  .ns  { font-family:var(--mono); font-size:.73rem; color:var(--cyan); }
  .ep  { font-family:var(--mono); font-size:.73rem; color:var(--yellow); }
  .lede { font-size:1.06rem; color:var(--light); max-width:70ch; }
  .note { font-size:.83rem; color:var(--muted); max-width:74ch; }

  /* ── Shape vocabulary, ported verbatim from the SVG style guide. ── */
  .process, .store, .external, .actor {
    background:var(--panel); padding:17px 19px; border-radius:6px;
  }
  .process  { border:2px solid var(--cyan); }
  .store    { border:2px solid var(--pink); }
  .external { border:2px dashed var(--green); }
  .actor    { background:var(--actorfill); border:2px solid var(--yellow); border-radius:20px; }

  .legend {
    display:flex; gap:18px; flex-wrap:wrap;
    font-family:var(--mono); font-size:.68rem; color:var(--muted);
    padding:10px 0 0;
  }
  .legend i { display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px; border-radius:2px; }
  .legend .k-process  { border:2px solid var(--cyan); }
  .legend .k-store    { border:2px solid var(--pink); }
  .legend .k-external { border:2px dashed var(--green); }
  .legend .k-actor    { border:2px solid var(--yellow); border-radius:50%; }

  /* ── Hero ── */
  .hero { padding:76px 0 58px; }
  .hero .kicker {
    font-family:var(--mono); font-size:.72rem; color:var(--yellow);
    letter-spacing:1.6px; text-transform:uppercase; margin-bottom:15px;
  }
  .hero h1 { max-width:19ch; }
  .hero h1 em { font-style:normal; color:var(--cyan); }
  .hero .lede { margin-top:19px; }
  .cta { display:flex; gap:13px; margin-top:29px; flex-wrap:wrap; align-items:center; }
  .btn {
    display:inline-block; padding:11px 21px; border-radius:20px;
    background:var(--actorfill); border:2px solid var(--yellow);
    color:var(--text); text-decoration:none; font-size:.87rem; font-weight:700;
  }
  .btn:hover { background:#14406f; }
  .btn.ghost { background:transparent; border:2px solid #2a2a44; color:var(--light); }
  .btn.ghost:hover { border-color:var(--cyan); color:var(--cyan); }

  /* ── The request path: five nodes joined by typed edges. This is the
        product's actual dataflow, drawn in the diagram grammar. ── */
  .path { display:grid; grid-template-columns:repeat(5,1fr); gap:0; align-items:stretch; margin-top:8px; }
  .path .node { padding:15px 13px; border-radius:6px; background:var(--panel); }
  .path .node.p { border:2px solid var(--cyan); }
  .path .node.s { border:2px solid var(--pink); }
  .path .node.a { border:2px solid var(--yellow); background:var(--actorfill); border-radius:20px; }
  .path .node.x { border:2px dashed var(--green); }
  .path .node h3 { font-size:.83rem; margin-bottom:4px; }
  .path .node p  { font-size:.73rem; color:var(--muted); line-height:1.45; }
  .path .arrow {
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:1.05rem; padding:0 3px;
  }
  .path .arrow.f  { color:var(--cyan); }
  .path .arrow.fp { color:var(--pink); }

  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:19px; }
  .stack { display:flex; flex-direction:column; gap:19px; }

  pre {
    background:#0d0d18; border:1px solid #23233a; border-left:3px solid var(--yellow);
    padding:14px 16px; overflow-x:auto; border-radius:4px;
    font-family:var(--mono); font-size:.73rem; line-height:1.6; color:var(--light);
  }
  pre .k { color:var(--cyan); }
  pre .v { color:var(--yellow); }
  pre .c { color:#55556e; }

  table { width:100%; border-collapse:collapse; font-size:.82rem; }
  th, td { text-align:left; padding:9px 12px; border-bottom:1px solid #1c1c30; vertical-align:top; }
  th { color:var(--cyan); font-size:.7rem; text-transform:uppercase; letter-spacing:1.1px; font-weight:700; }
  td.mono { font-family:var(--mono); font-size:.75rem; }

  .concede { border-left:3px solid var(--red); padding-left:17px; }
  .concede li { margin-bottom:7px; font-size:.88rem; }
  ul { padding-left:19px; }
  li { margin-bottom:5px; }

  footer { padding:38px 0 56px; border-top:1px solid #16162a; }
  footer .sub { max-width:78ch; }

  @media (max-width:920px) {
    .grid2, .grid3 { grid-template-columns:1fr; }
    .path { grid-template-columns:1fr; }
    .path .arrow { transform:rotate(90deg); padding:5px 0; }
    h1 { font-size:2rem; }
  }