/* Second Brain architecture explorer - styles scoped to .architecture-page
 * (set as body's class by build-diagram.mjs via renderPage's bodyClass) so
 * the explorer's ids/classes never collide with the shared shell's own
 * generic elements. #main is the shared shell's landmark; the explorer's own
 * three-pane grid is #panes for exactly that reason.
 *
 * Palette and type: no local :root, no bare *, html, body or bare heading
 * rules - those already come from assets/experience.css (Sora headings, DM
 * Sans text, white/cool-neutral surfaces, the one orange accent). The block
 * below only maps the explorer's own long-standing internal variable names
 * onto those real tokens, so the several hundred var(--x) references below
 * did not need a one-by-one rewrite, and never introduces a second brand hue.
 */
.architecture-noscript{margin:0;padding:14px 22px;background:var(--surface-muted);
  border-bottom:1px solid var(--line);color:var(--muted);font-size:14px}
/* The noscript list below that banner carries the same per-structure prose the
 * interactive panel renders, as static markup, so a reader with JavaScript off
 * (and a search engine) sees every description the payload holds. It borrows
 * the shared shell's content measure and the page's own mapped tokens, so it
 * reads as ordinary site prose rather than part of the app-shaped layout. */
.architecture-noscript-list{margin:0 auto;padding:28px 0 40px;
  width:min(1248px,calc(100% - 96px))}
.architecture-noscript-entry{margin-bottom:24px}
.architecture-noscript-entry:last-child{margin-bottom:0}
.architecture-noscript-list dt{font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:-.01em;color:var(--text-strong);margin-bottom:7px}
.architecture-noscript-list dd{margin:0 0 11px;font-size:16px;line-height:1.6;
  color:var(--text-primary)}
.architecture-noscript-entry dd:last-child{margin-bottom:0}
.architecture-page{
  --accent-hover:#a63508; /* the site's own real button-hover shade */
  --accent-soft:var(--orange-soft);
  --brand-orange:var(--accent);
  --text-strong:var(--ink); --text-primary:var(--ink); --text-secondary:var(--muted);
  --text-disabled:color-mix(in srgb, var(--muted) 55%, white);
  --surface-page:var(--paper); --surface-warm:var(--surface-muted);
  --surface-card:var(--paper); --surface-tag:var(--surface-muted);
  --border-light:var(--line);
  --border-card:color-mix(in srgb, var(--ink) 8%, transparent);
  --border-input:color-mix(in srgb, var(--ink) 14%, transparent);
  --edge:var(--ink);
  --display:'Sora','DM Sans',sans-serif;
  --sans:'DM Sans',sans-serif;
  --serif:'DM Sans',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --radius-sm:8px; --radius-md:var(--radius); --radius-pill:999px;
  --shadow-md:0 1px 2px rgba(32,33,36,.06), 0 4px 14px rgba(32,33,36,.07);
  --shadow-lg:0 2px 6px rgba(32,33,36,.08), 0 14px 34px rgba(32,33,36,.14);
  overflow-x:hidden;
}
/* 100vh, with the site footer below it - you scroll past the explorer to
   reach the rest of the site, the same as any app-shaped page. */
/* minmax(0,1fr), not the implicit auto column: an auto-sized grid column is
   free to grow past its container, and grid items default to min-width:auto,
   so one wide descendant drags the whole page sideways. Pinning both is what
   keeps the layout inside the viewport at every width. */
/* min(), not calc() alone: 100vh keeps this pane full-height on an ordinary
   window, but a full-page capture that resizes the viewport to match the
   document's own scroll height turns "100vh" into a moving target: a
   taller viewport makes the pane taller, which makes the document taller,
   which asks for a taller viewport again. The 760px ceiling is where the
   pane settles instead, matching the shared shell's own app-pane sizing. */
#app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);
  height:min(calc(100vh - 94px), 760px);max-width:100vw;overflow:hidden}
#topbar,#panes{min-width:0}

/* ── top bar ── */
#topbar{display:flex;align-items:stretch;background:var(--surface-page);
  border-bottom:1px solid var(--border-light);overflow:hidden}
#repo{padding:11px 22px;display:flex;align-items:center;white-space:nowrap;
  flex:0 0 auto;border-right:1px solid var(--border-light)}
#repo b{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.02em}
#repo span:last-child{font-family:var(--serif);font-size:14px;color:var(--text-secondary);
  overflow:hidden;text-overflow:ellipsis}
/* The stats scroll; the controls never do. Nine figures plus four buttons do
   not fit at every width, and the buttons are the part you cannot lose. */
#stats{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
#stats::-webkit-scrollbar{display:none}
.stat{padding:9px 16px;min-width:0;flex:0 0 auto}
.stat .k{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--text-secondary);text-transform:uppercase}
.stat .v{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;
  color:var(--text-strong);margin-top:2px;white-space:nowrap}
#controls{margin-left:auto;display:flex;align-items:center;gap:8px;padding:0 16px;
  flex:0 0 auto;min-width:0}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;
  font-weight:500;padding:9px 15px;border-radius:var(--radius-md);cursor:pointer;
  background:var(--surface-page);border:1px solid var(--border-input);color:var(--text-primary);
  transition:transform 120ms ease,background 160ms ease,color 160ms ease,border-color 160ms ease}
.btn:hover{background:var(--surface-warm);color:var(--text-strong);transform:translateY(-1px)}
#btn-flow{background:var(--accent);border-color:var(--accent);color:#fff}
#btn-flow:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}

#panes{display:grid;grid-template-columns:238px 1fr 452px;min-height:0}
/* Grid children default to min-width:auto, so a wide child (the SVG, a long
   unbroken line of prose) pushes its track past the viewport and the whole
   page scrolls sideways. */
#side,#stage,#panel{min-width:0}
body{overflow-x:hidden}

/* ── sidebar ── */
#side{background:var(--surface-warm);border-right:1px solid var(--border-light);
  overflow-y:auto;padding:6px 12px 30px}
.side-heading{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--text-disabled);text-transform:uppercase;padding:20px 4px 2px}
.side-group{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--accent);padding:12px 4px 6px}
.side-item{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:4px;
  background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-sm);
  cursor:pointer;padding:7px 11px;text-align:left;font-family:var(--sans);font-size:12.5px;
  color:var(--text-primary);transition:background 140ms ease,border-color 140ms ease,transform 140ms ease}
.side-item:hover{background:var(--surface-page);border-color:var(--border-input);transform:translateX(2px)}
.side-item.sel{background:var(--accent-soft);border-color:var(--accent);color:var(--text-strong)}
.side-key{flex:0 0 18px;font-family:var(--mono);font-size:10px;color:var(--text-disabled);
  text-transform:uppercase}
.side-item.sel .side-key{color:var(--accent)}
.side-label{flex:1;line-height:1.3}
.side-count{flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--text-disabled)}

/* ── the dark drawing ── */
#stage{position:relative;overflow:hidden;background:var(--surface-warm)}
#svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#svg.drag{cursor:grabbing}
#zoom{position:absolute;top:14px;right:16px;display:flex;flex-direction:column;gap:6px}
#zoom button{width:28px;height:26px;font-family:var(--sans);font-size:14px;line-height:1;
  background:var(--surface-page);border:1px solid var(--border-input);
  border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);
  box-shadow:var(--shadow-md)}
#zoom button:hover{color:var(--accent);border-color:var(--accent)}
#hint{position:absolute;left:0;right:0;bottom:0;padding:12px 20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--text-disabled);
  background:linear-gradient(transparent,var(--surface-warm) 60%);pointer-events:none}
#readout{position:absolute;left:20px;top:16px;max-width:56%;font-family:var(--sans);font-size:13px;
  color:var(--text-primary);background:var(--surface-page);border:1px solid var(--border-card);
  border-radius:var(--radius-md);padding:10px 14px;display:none;box-shadow:var(--shadow-lg)}
#readout b{font-family:var(--display);font-weight:600;color:var(--accent)}
#breadcrumb{position:absolute;left:20px;top:16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--text-secondary);display:none;text-transform:uppercase}
#breadcrumb button{font-family:var(--mono);font-size:10.5px;background:none;border:none;
  color:var(--accent);cursor:pointer;padding:0;text-decoration:underline;text-transform:uppercase}

.grid{stroke:var(--border-light);stroke-width:.7;fill:none}
.face-top{fill:var(--surface-page);stroke:var(--edge);stroke-width:1;stroke-linejoin:round}
.face-left{fill:var(--surface-tag);stroke:var(--edge);stroke-width:1;stroke-linejoin:round}
.face-right{fill:var(--surface-muted);stroke:var(--edge);stroke-width:1;stroke-linejoin:round}
.hatch-left{fill:url(#hatchA);stroke:none;pointer-events:none}
.hatch-right{fill:url(#hatchB);stroke:none;pointer-events:none}
.node{cursor:pointer}
.node .key{font-family:var(--mono);font-size:9px;fill:var(--text-disabled);text-anchor:middle;
  text-transform:uppercase;letter-spacing:.06em;pointer-events:none;user-select:none}
.node.tuned .face-top{fill:var(--accent-soft);stroke:var(--accent)}
.node.tuned .face-left,.node.tuned .face-right{stroke:var(--accent)}
.node.tuned .key{fill:var(--accent)}
.node .inside-dot{fill:var(--text-strong);stroke:var(--surface-page);stroke-width:1.2}
.node.slab .face-top{fill:var(--surface-muted)}
.node:hover .face-top{fill:var(--accent-soft)}
.node:hover .face-left,.node:hover .face-right,.node:hover .face-top{stroke:var(--brand-orange)}
.node.sel .face-top{fill:var(--accent-soft)}
.node.sel .face-top,.node.sel .face-left,.node.sel .face-right{stroke:var(--brand-orange);stroke-width:1.9}
.node.dim{opacity:.3}
.node:focus{outline:none}
.node:focus-visible{outline:2.5px solid var(--brand-orange);outline-offset:3px}
.node:focus-visible .face-top,.node:focus-visible .face-left,.node:focus-visible .face-right{
  stroke:var(--brand-orange);stroke-width:1.9}
.yard-plate{fill:none;stroke:#c9c5c1;stroke-width:1.1;stroke-dasharray:5 4}
.yard:hover .yard-plate{stroke:var(--brand-orange)}
.yard.sel .yard-plate{stroke:var(--brand-orange);stroke-width:1.8}
.yard:focus-visible .yard-plate{stroke:var(--brand-orange);stroke-width:1.8}
.yard-label{font-family:var(--mono);font-size:9px;fill:var(--text-disabled);text-anchor:middle;
  letter-spacing:.06em}

.flow,.flow-halo{fill:none;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.flow-halo{stroke:var(--surface-warm);stroke-width:6.5;opacity:.95}
.flow-write,.flow-read{stroke:var(--text-primary);stroke-width:1.7}
.flow-read{stroke-dasharray:9 4}
.flow-feed{stroke:#c9c5c1;stroke-width:1;stroke-dasharray:4 4}
.flow-clock{stroke:#c9c5c1;stroke-width:1;stroke-dasharray:1 4}
.flow.hot{stroke:var(--brand-orange);stroke-width:2.2}
.flow.faded{opacity:.18}
#pulse{fill:var(--brand-orange);stroke:var(--surface-warm);stroke-width:1.4;display:none}
#steplabel{font-family:var(--mono);font-size:10px;fill:var(--accent);
  letter-spacing:.05em;display:none}
#labellayer .name{font-family:var(--display);font-weight:600;font-size:11px;fill:var(--text-strong);
  text-anchor:middle;letter-spacing:.02em;paint-order:stroke;stroke:var(--surface-warm);
  stroke-width:5;pointer-events:none;user-select:none}

/* Two views, and they have to be told apart at a glance. The loop is graphite
   lines over a solid map; coupling pushes the map back and lays an orange web
   over it. Same drawing, obviously different question. */
#couplinglayer{display:none}
#svg.coupling #couplinglayer{display:inline}
#svg.coupling #flowlayer,#svg.coupling #underflow{display:none}
#svg.coupling .node{opacity:.4}
#svg.coupling .node.sel{opacity:1}
#svg.coupling #labellayer{opacity:.45}
#svg.coupling .grid{stroke:#f0ece8}

.coup-line{stroke:var(--brand-orange);fill:none;stroke-linecap:round;
  opacity:.45;pointer-events:none}
.coup.strong .coup-line{opacity:.9}
.coup-n{display:none;font-family:var(--mono);font-size:10px;fill:var(--accent);
  text-anchor:middle;paint-order:stroke;stroke:var(--surface-warm);stroke-width:4;
  pointer-events:none}
.coup.strong .coup-n{display:block}
.coup.faded .coup-line{opacity:.08}
.coup.faded .coup-n{display:none}
.coup.hot .coup-line{stroke:var(--accent);opacity:1}
.coup.hot .coup-n{display:block;fill:var(--accent)}
.provenance{margin-top:26px;padding:13px 15px;background:var(--surface-warm);
  border:1px solid var(--border-card);border-radius:var(--radius-md);
  font-size:12.5px;line-height:1.55;color:var(--text-secondary)}
.provenance b{font-family:var(--display);font-weight:600;color:var(--text-primary)}
.provenance .sha{font-family:var(--mono);font-size:11.5px;color:var(--text-primary)}
.provenance.stale{background:var(--accent-soft);border-color:var(--accent)}
.sub-link{stroke:var(--text-primary);stroke-width:1.4;fill:none}
.sub-tick{stroke:var(--border-light);stroke-width:1;fill:none}
.sub-label{font-family:var(--display);font-weight:600;font-size:13px;fill:var(--text-strong);
  letter-spacing:-.01em}
.sub-note{font-family:var(--sans);font-size:12px;fill:var(--text-secondary)}
.sub-index{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--accent);letter-spacing:.04em}

/* ── small screens ───────────────────────────────────────────────────────────
   The three-pane layout stops working somewhere around 1000px. Rather than
   refuse to render, the page becomes a document: the map keeps its
   interactivity at full width and reduced height, the tree turns into a
   horizontal scroller above it, and the prose stacks underneath where it can
   simply be read. Most traffic to a marketing site is on a phone. */
@media (max-width: 1000px){
  #app{height:auto;overflow:visible}
  /* Same ceiling as the desktop pane, and for the same reason: a bare vh row
     height keeps growing if a full-page capture resizes the viewport to the
     document's own scroll height, since a taller viewport makes this row
     taller too. min() gives the row a fixed stopping point. */
  #panes{grid-template-columns:1fr;grid-template-rows:auto min(62vh, 520px) auto}
  /* overflow:hidden is a desktop concern (it clips the stats row). Once the
     bar wraps to three rows, the same rule crops whichever row lands last. */
  #topbar{flex-wrap:wrap;position:sticky;top:0;z-index:20;overflow:visible}
  #repo{width:100%;min-width:0;border-right:none;
    border-bottom:1px solid var(--border-light);padding:10px 16px}
  .stat{padding:7px 14px}
  #stats{width:100%;order:2}
  /* align-items:center plus room to spare, not padding that happens to equal
     the content height. These rows scroll horizontally, and a flex item flush
     against a scroll container gets clipped by a pixel of rounding - which is
     what sliced the bottom off "Run the loop" on a 440px screen. */
  #controls{width:100%;order:3;padding:11px 14px 13px;gap:8px;overflow-x:auto;
    align-items:center;min-height:0;min-width:0;border-top:1px solid var(--border-light);
    scroll-padding-inline:14px}
  .btn{flex:0 0 auto;padding:10px 16px}

  /* the tree becomes one scrollable row of chips */
  #side{display:flex;align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;
    padding:13px 14px;border-right:none;border-bottom:1px solid var(--border-light);
    -webkit-overflow-scrolling:touch;scroll-padding-inline:14px}
  .side-heading{display:none}
  /* Group labels ride along in the scroller as separators, so they need real
     space either side or they read as part of the chip that follows. */
  .side-group{flex:0 0 auto;align-self:center;padding:0 4px 0 14px;margin:0;
    white-space:nowrap;line-height:1}
  .side-group:first-of-type{padding-left:0}
  /* A chip is not a table row. The 18px key column and 10px gap exist so keys
     line up down the desktop list; inside a pill they push the label 44px off
     the left edge while it sits 16px off the right, which reads as the text
     crowding the end of the chip. Let the key size to its own glyph, and give
     the right side more room than the left to pay for it -- a pill's rounded
     cap eats perceived clearance that a square edge would not. */
  .side-item{width:auto;flex:0 0 auto;margin-bottom:0;white-space:nowrap;
    border-radius:var(--radius-pill);padding:9px 20px 9px 16px;gap:8px;
    line-height:1.2}
  .side-key{flex:0 0 auto}
  .side-label{flex:0 0 auto}
  .side-item:hover{transform:none}
  .side-count{display:none}

  #stage{min-height:0}
  #hint{font-size:9px;letter-spacing:.04em;padding:10px 14px}
  #zoom{top:10px;right:10px}

  #panel{border-left:none;border-top:1px solid var(--border-light);
    grid-template-rows:auto auto}
  #panelbody{overflow:visible;padding:20px 20px 44px}
  #tabs{padding:14px 20px 0}
  #panelbody h1{font-size:27px}
}
@media (max-width: 560px){
  #panes{grid-template-rows:auto min(52vh, 420px) auto}
  .stat{padding:6px 11px}
  .stat .v{font-size:15px}
  .stat .k{font-size:10px}
  #panelbody p,#panelbody li{font-size:14.5px}
}

/* ── panel ── */
#panel{border-left:1px solid var(--border-light);background:var(--surface-page);
  display:grid;grid-template-rows:auto 1fr;min-height:0}
#tabs{display:flex;gap:8px;padding:14px 26px 0}
.tab{font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 15px;
  border-radius:var(--radius-pill);background:var(--surface-warm);
  border:1px solid var(--border-card);cursor:pointer;color:var(--text-secondary);
  transition:background 140ms ease,color 140ms ease,border-color 140ms ease}
.tab:hover{background:var(--surface-muted);color:var(--text-strong)}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
#panelbody{overflow-y:auto;padding:22px 26px 48px}
.pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;
  font-weight:500;color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--border-light);padding:5px 5px 5px 13px;border-radius:var(--radius-pill);
  margin-bottom:20px}
.pill .tag{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--text-secondary);
  background:var(--surface-page);border:1px solid var(--border-light);
  padding:3px 9px;border-radius:var(--radius-pill)}
#panelbody h1{font-family:var(--display);font-weight:600;font-size:32px;line-height:1.1;
  letter-spacing:-.02em;color:var(--text-strong);margin:0 0 12px}
#panelbody .sub{font-family:var(--serif);font-size:17px;line-height:1.55;
  color:var(--text-secondary);margin:0 0 26px}
#panelbody .rule{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--accent);margin:28px 0 12px}
#panelbody p{margin:0 0 15px;font-size:15px;line-height:1.62;color:var(--text-primary)}
#panelbody mark{background:none;color:var(--accent);font-family:var(--display);font-weight:600}
#panelbody code{font-family:var(--mono);background:var(--surface-muted);
  border-radius:5px;padding:1px 5px;font-size:13px}
#panelbody ul{margin:0;padding:0;list-style:none}
#panelbody li{position:relative;padding-left:18px;margin-bottom:13px;font-size:15px;
  line-height:1.6;color:var(--text-primary)}
#panelbody li:before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.chip{font-family:var(--mono);font-size:11px;border:1px solid var(--border-card);
  border-radius:var(--radius-pill);padding:4px 11px;color:var(--text-secondary);
  background:var(--surface-tag)}
.chip.tuned{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.enter{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;
  font-weight:500;background:var(--surface-page);border:1px solid var(--border-input);
  color:var(--text-primary);padding:10px 16px;border-radius:var(--radius-md);cursor:pointer;
  margin-bottom:22px;box-shadow:var(--shadow-md);
  transition:transform 120ms ease,border-color 160ms ease,color 160ms ease}
.enter:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}