/* ==========================================================================
   flow.css — operating-model node diagram + deep-dive pages.
   Page-only rules. Everything else comes from styles.css and css/vc.css.
   ========================================================================== */

/* ---- tab bar -------------------------------------------------------- */
.flow-tabs{margin-bottom:16px}
.flow-tabs .filter{font-weight:500}

.flow-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--border);
}
.flow-play{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:8px 14px;
  border-radius:0;background:var(--surface);border:1px solid var(--border-2);
  color:var(--text);font-size:13px;line-height:20px;font-weight:500;
  transition:background .18s,border-color .18s;
}
.flow-play:hover{background:#262220;border-color:var(--muted-2)}
.flow-play svg{width:12px;height:12px;flex:none;color:var(--accent)}
.flow-play .ic-pause{display:inline-flex}
.flow-play .ic-play{display:none}
.flow-play.paused .ic-pause{display:none}
.flow-play.paused .ic-play{display:inline-flex}
.flow-legend{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted-2);font-size:12px;line-height:16px;
}
.flow-legend .pip{width:6px;height:6px;border-radius:0;background:var(--accent);
  box-shadow:0 0 8px 2px rgba(255,246,149,.35);flex:none}
.flow-deep{
  margin-left:auto;color:var(--text);font-size:13px;line-height:20px;font-weight:500;
  border-bottom:1px solid var(--faint);transition:border-color .18s;
}
.flow-deep:hover{border-color:var(--text)}

/* ---- views ---------------------------------------------------------- */
.flow-view{display:none}
.flow-view.on{display:block}
.flow-view .metrics{margin-bottom:32px}

/* ---- stage ---------------------------------------------------------- */
/* Full-bleed band: cancels the section padding so the canvas gets the whole
   shell column. The stage is authored at a fixed pixel size and scaled down to
   fit the column; below the legibility floor it scrolls instead, with a fade
   and a hint so it is obvious there is more. */
.flow-band{
  position:relative;
  margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--chip);
}
.flow-band::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:80px;z-index:4;
  background:linear-gradient(90deg,rgba(20,18,16,0),var(--chip) 78%);
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.flow-band.scrolls::after{opacity:1}
.flow-band.scrolls.at-end::after{opacity:0}
.flow-hint{
  position:absolute;right:14px;bottom:12px;z-index:5;
  display:none;align-items:center;gap:6px;padding:6px 11px;border-radius:0;
  background:var(--surface);border:1px solid var(--border-2);
  color:var(--muted);font-size:11px;line-height:16px;pointer-events:none;
  transition:opacity .22s;
}
.flow-band.scrolls .flow-hint{display:inline-flex}
.flow-band.scrolls.at-end .flow-hint{opacity:0}
.flow-scroll{
  overflow:auto;padding:20px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.flow-fit{position:relative;flex:none}
.flow-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.flow-edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.flow-edges path{fill:none;stroke:rgba(250,250,249,.20);stroke-width:1;stroke-dasharray:3 4}
.flow-edges path.solid{stroke-dasharray:none;stroke:rgba(250,250,249,.12)}

/* ---- nodes ---------------------------------------------------------- */
.fnode{
  position:absolute;box-sizing:border-box;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  border:1px solid var(--border-2);border-radius:0;background:var(--card);
  text-align:left;
  transition:border-color .28s,background .28s,box-shadow .28s;
}
.fnode .fn-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.fnode .fn-label{
  font-size:14px;line-height:18px;font-weight:500;color:rgba(250,250,249,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .28s;
}
.fnode .fn-sub{
  font-family:var(--font-mono);font-size:10px;line-height:13px;letter-spacing:.03em;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-transform:uppercase;transition:color .28s;
}
.fnode.hot{
  border-color:rgba(255,246,149,.5);background:#1b201c;
  box-shadow:0 0 0 1px rgba(255,246,149,.16), 0 0 24px rgba(255,246,149,.10);
}
.fnode.hot .fn-label{color:var(--text)}
.fnode.hot .fn-sub{color:var(--accent)}
.fnode:hover,.fnode:focus{border-color:var(--muted-2);background:#211c18;z-index:20;outline:none}
.fnode:focus-visible{box-shadow:0 0 0 2px var(--muted-2)}
.fnode.term{border-radius:0;justify-content:center;padding:0 18px}
.fnode.card{align-items:flex-start;padding:16px 18px;border-radius:0}
.fnode.card .fn-txt{display:flex;flex-direction:column;gap:0;width:100%}
.fnode.card .fn-sub{order:1;color:var(--muted-2)}
.fnode.card .fn-label{order:2;white-space:normal;font-size:15px;line-height:20px;margin-top:7px}
.fnode.lane{
  background:none;border:none;border-left:2px solid var(--border-2);border-radius:0;
  padding-left:14px;align-items:center;
}
.fnode.lane .fn-label{color:var(--muted);font-size:15px}
.fnode.lane.hot{background:none;box-shadow:none;border-left-color:var(--accent)}

/* ---- popover -------------------------------------------------------- */
.fnode .pop{
  position:absolute;left:50%;top:calc(100% + 10px);width:236px;
  transform:translateX(-50%) translateY(5px);
  padding:12px 14px;border:1px solid var(--border-2);border-radius:0;
  background:#0c0a09;box-shadow:0 12px 30px rgba(0,0,0,.55);
  color:var(--muted);font-size:12px;line-height:17px;white-space:normal;
  opacity:0;visibility:hidden;pointer-events:none;z-index:30;
  transition:opacity .18s,transform .18s,visibility .18s;
}
.fnode .pop b{display:block;color:var(--text);font-weight:600;font-size:12px;
  line-height:16px;margin-bottom:5px}
.fnode:hover .pop,.fnode:focus .pop,.fnode:focus-visible .pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.fnode.pop-up .pop{top:auto;bottom:calc(100% + 10px)}
.fnode.pop-l .pop{left:0;transform:translateX(0) translateY(5px)}
.fnode.pop-l:hover .pop,.fnode.pop-l:focus .pop,.fnode.pop-l:focus-visible .pop{transform:translateX(0) translateY(0)}
.fnode.pop-r .pop{left:auto;right:0;transform:translateX(0) translateY(5px)}
.fnode.pop-r:hover .pop,.fnode.pop-r:focus .pop,.fnode.pop-r:focus-visible .pop{transform:translateX(0) translateY(0)}

/* ---- travelling dots ------------------------------------------------ */
.fdot{
  position:absolute;left:0;top:0;width:7px;height:7px;border-radius:0;
  background:#fafaf9;box-shadow:0 0 9px 2px rgba(255,246,149,.5);
  offset-rotate:0deg;offset-distance:0%;opacity:0;pointer-events:none;z-index:5;
}

/* ---- side panel ----------------------------------------------------- */
.flow-side{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;
  margin-top:32px;border:1px solid var(--border);border-radius:0;overflow:hidden;
}
.flow-side > *{padding:28px;min-width:0}
.flow-side > * + *{border-left:1px solid var(--border)}
.flow-side h3{font-size:20px;line-height:26px;font-weight:600}
.flow-side p{color:var(--muted);font-size:15px;line-height:24px;margin-top:12px;max-width:62ch}
.flow-side .kv{margin-top:20px}
.flow-side .kv .row{font-size:14px;line-height:20px}
.flow-side .side-links{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.flow-side .side-links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:var(--muted);font-size:14px;line-height:20px;
  padding-bottom:10px;border-bottom:1px solid var(--hairline);transition:color .18s;
}
.flow-side .side-links a:last-child{border-bottom:none;padding-bottom:0}
.flow-side .side-links a:hover{color:var(--text)}
.flow-side .side-links .ar{color:var(--faint)}
.flow-side .badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}

/* ---- static fallback list (reduced motion / no-diagram nav aid) ------ */
.flow-route{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;
  color:var(--muted-2);font-family:var(--font-mono);font-size:11px;line-height:16px;
}
.flow-route span:not(:last-child)::after{content:" →";color:var(--faint)}

/* ---- deep-dive page bits -------------------------------------------- */
.node-tbl td:first-child{color:var(--text);font-weight:500}
.node-tbl .mono{color:var(--muted-2)}
.node-tbl .tier{white-space:nowrap}
/* the failure-mode column is the point of these tables — mark it with a rule
   rather than colouring every cell amber */
.node-tbl td:last-child,.node-tbl th:last-child{
  border-left:1px solid rgba(250,250,249,.22);padding-left:16px;
}
.node-tbl th:last-child{color:var(--to-grey-300);opacity:.75}
.fail{color:var(--muted)}
.own{white-space:nowrap}
.layer-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.layer-head .n{font-family:var(--font-mono);font-size:12px;color:var(--faint)}
.layer-head h3{font-size:18px;line-height:24px;font-weight:600}
.tool-row{display:flex;align-items:center;gap:12px}
.tool-row .lg{
  width:34px;height:34px;border-radius:0;background:#f5f5f4;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.tool-row .lg img{width:19px;height:19px;object-fit:contain}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1100px){
  .flow-side{grid-template-columns:1fr}
  .flow-side > * + *{border-left:none;border-top:1px solid var(--border)}
}
@media (max-width:900px){
  .flow-scroll{padding:16px 20px 20px}
  .flow-deep{margin-left:0}
  .flow-hint{right:10px;bottom:10px}
}
@media (max-width:620px){
  .flow-side > *{padding:22px}
  .flow-bar{gap:12px}
}

/* ---- reduced motion: static diagram, no dots ------------------------- */
@media (prefers-reduced-motion:reduce){
  .fdot{display:none !important}
  .flow-play{display:none}
  .fnode,.fnode .fn-label,.fnode .fn-sub,.fnode .pop{transition:none}
}