/* How it works tab */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{appearance:none;border:0;background:transparent;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.replay{appearance:none;margin-left:8px;border:1px solid var(--accent);background:#fff;color:var(--accent-d);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.replay:hover:not(:disabled){background:var(--accent-l)}
.replay:disabled{opacity:.45;cursor:default}
.replay.tourbtn{background:var(--accent);color:#fff}
.replay.tourbtn:hover{background:var(--accent-d)}
.section-head .seg{margin-left:auto}
.flow-card{padding:12px 12px 6px}
.flow-card svg{display:block;width:100%;height:auto}
.col-h{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--muted)}

/* nodes */
.node{cursor:pointer;transition:opacity .2s}
.node rect{fill:#fff;stroke:#c9d3dd;stroke-width:1.5;transition:stroke .2s,stroke-width .2s,fill .2s,filter .2s}
.node:hover rect{filter:drop-shadow(0 4px 10px rgba(15,27,45,.14))}
.node:focus{outline:none}
.node:focus-visible rect{stroke:var(--accent);stroke-width:3}
.node.mock rect{stroke-dasharray:6 5;fill:#fbfcfd}
.node.agent rect{fill:var(--ink);stroke:var(--ink)}
.node.hot rect,.node.lit rect{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:none;fill:#f2f9fb}
.node.agent.hot rect,.node.agent.lit rect{fill:#0d2a3c;stroke:#38b2d6;stroke-width:3}
.node.agent.hot rect{animation:agentglow 1.6s ease-in-out infinite}
.node.stop rect{stroke:var(--warn);stroke-width:2.5;stroke-dasharray:none;fill:#fffaf0}
.node.agent.stop rect{fill:var(--ink);stroke:#f0a43a;stroke-width:3}
.node.sel rect{stroke:var(--accent);stroke-width:3.5;stroke-dasharray:none;fill:#e9f5f9}
.node.agent.sel rect{fill:#0d2a3c;stroke:#38b2d6;stroke-width:3.5}
@keyframes agentglow{0%,100%{filter:drop-shadow(0 0 0 rgba(56,178,214,0))}50%{filter:drop-shadow(0 0 10px rgba(56,178,214,.55))}}

/* edges */
.edge{fill:none;stroke:#b6c2ce;stroke-width:2;marker-end:url(#ah);transition:opacity .2s}
.edge.dashed{stroke-dasharray:4 4;marker-end:none}
#e_person{marker-start:url(#ah)}
.edge.hot,.edge.lit{stroke:var(--accent);stroke-width:3;stroke-dasharray:9 7;animation:flowdash .7s linear infinite;marker-end:url(#ahHot)}
#e_person.hot,#e_person.lit{marker-start:url(#ahHot)}
.edge.stop,.edge.lit.litstop{stroke:var(--warn);stroke-width:3;stroke-dasharray:9 7;animation:flowdash .7s linear infinite;marker-end:url(#ahStop)}
#e_person.lit.litstop{marker-start:url(#ahStop)}
@keyframes flowdash{to{stroke-dashoffset:-16}}
.hit{fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke;cursor:pointer}
.dot{fill:var(--accent);pointer-events:none;filter:drop-shadow(0 0 3px rgba(14,110,140,.6))}
.dot.stop{fill:var(--warn);filter:drop-shadow(0 0 3px rgba(161,92,0,.5))}

/* step numbers */
.enum{cursor:pointer;transition:opacity .2s}
.enum:focus{outline:none}
.enum circle{fill:#fff;stroke:#b6c2ce;stroke-width:1.5;transition:fill .15s,stroke .15s}
.enum text{font-size:12px;font-weight:700;fill:var(--ink-2);text-anchor:middle;pointer-events:none}
.enum:hover circle,.enum:focus-visible circle{stroke:var(--accent);stroke-width:2.5}
.enum.hot circle,.enum.lit circle,.enum.on circle{fill:var(--accent);stroke:var(--accent)}.enum.hot text,.enum.lit text,.enum.on text{fill:#fff}
.enum.stop circle{fill:var(--warn);stroke:var(--warn)}.enum.stop text{fill:#fff}

/* hover focus: dim everything not on the hovered path */
svg.focusing .node:not(.lit),svg.focusing .enum:not(.lit){opacity:.32}
svg.focusing .edge:not(.lit){opacity:.16}
svg.focusing .dot{visibility:hidden}

/* intro: boxes rise in, arrows draw */
.intro .node{animation:popin .5s cubic-bezier(.2,.7,.3,1) backwards}
.intro .edge:not(.hot):not(.stop):not(.dashed):not(.lit){stroke-dasharray:420;stroke-dashoffset:420;animation:draw .8s ease .45s forwards}
.intro .enum{animation:fadein .4s ease .9s backwards}
@keyframes popin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* box contents */
.fo{box-sizing:border-box;height:100%;padding:11px 13px;font-family:var(--font);position:relative;overflow:hidden}
.fo-t{font-weight:700;font-size:15px;color:var(--ink);line-height:1.25;padding-right:44px}
.fo-s{font-size:12.5px;color:var(--muted);margin-top:2px}
.fo-l{font-size:12px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.fo-tag{position:absolute;top:9px;right:10px;font-size:10.5px;font-weight:700;color:var(--accent-d);background:var(--accent-l);border-radius:999px;padding:1px 7px}
.fo-mock{position:absolute;bottom:8px;right:10px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a97a5}
.agent-fo{padding:16px 18px;color:#e6edf3}
.agent-fo .fo-t{color:#fff;font-size:17px}
.agent-fo .fo-s{color:#9fb4c8}
.ag-h{margin-top:14px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7cc4dc}
.ag-p{font-size:12.5px;line-height:1.45;margin-top:3px;color:#dbe5ee}
.ag-pipe .stg{border-bottom:1px dotted rgba(219,229,238,.45);cursor:help;transition:color .15s,border-color .15s}
.ag-pipe .stg:hover{color:#fff;border-bottom-color:#7cc4dc}
.ag-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.ag-chips span{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.1);color:#eef4f8;cursor:pointer;transition:background .15s,color .15s;outline:none}
.ag-chips span:hover,.ag-chips span:focus-visible{background:rgba(240,164,58,.28);color:#fff}
.ag-chips span.on{background:#f0a43a;color:#1d1405}
.ag-stop{margin-top:12px;font-size:12px;font-weight:700;color:#ffc46b;animation:fadein .3s ease both}

/* inspector under the diagram */
.insp-wrap{border-top:1px solid var(--line-2)}
.insp-wrap.anim>*{animation:inspin .28s ease both}
@keyframes inspin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.flow-latest{padding:10px 6px 8px;font-size:13px;color:var(--ink-2);display:flex;gap:14px;align-items:baseline;justify-content:space-between}
.flow-latest .hint{font-size:12px;color:var(--muted);white-space:nowrap}
.insp{padding:12px 8px 10px}
.insp-head{display:flex;align-items:center;gap:10px;min-height:26px}
.insp-head h3{margin:0;font-size:15px;color:var(--ink);font-weight:700}
.insp-kicker{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-d);background:var(--accent-l);border-radius:999px;padding:2px 8px;white-space:nowrap}
.insp-kicker.warn{color:var(--warn);background:var(--warn-l)}
.insp-kicker.mock{color:#5b6878;background:#eef1f4}
.insp-x{appearance:none;margin-left:auto;border:0;background:transparent;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px}
.insp-x:hover{background:var(--line-2);color:var(--ink)}
.insp-cols{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:20px;margin-top:10px}
.insp h4{margin:0 0 4px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.insp p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.insp .insp-stat{font-weight:650;color:var(--ink)}
.insp ul{margin:4px 0 0;padding-left:16px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.insp li{margin:2px 0}
.insp-actions{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.insp-actions .muted{font-size:12px}
.ibtn{appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:7px;padding:5px 11px;font-size:12.5px;font-weight:600;cursor:pointer}
.ibtn:hover{background:var(--accent-d)}
.ibtn.ghost{background:#fff;color:var(--accent-d)}
.ibtn.ghost:hover{background:var(--accent-l)}
.ibtn:disabled{opacity:.4;cursor:default}
.tour-text{margin-top:8px!important;font-size:14px!important;line-height:1.55!important;color:var(--ink)!important;max-width:880px}

/* tour controls */
.tour-ctl{margin-left:auto;display:flex;gap:4px;align-items:center}
.tour-ctl button{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:7px;min-width:30px;height:28px;font-size:15px;font-weight:600;cursor:pointer;padding:0 8px}
.tour-ctl button.wide{font-size:12.5px;min-width:64px}
.tour-ctl button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-d)}
.tour-ctl button:disabled{opacity:.4;cursor:default}
.tour-ctl .insp-x{border:0;margin-left:2px}
.tour-dots{display:flex;gap:6px;margin-top:12px}
.tour-dots button{appearance:none;border:0;padding:0;width:22px;height:6px;border-radius:3px;background:var(--line);cursor:pointer;transition:background .2s}
.tour-dots button.done{background:#9fcad8}
.tour-dots button.on{background:var(--accent)}
.tour-bar{height:3px;border-radius:2px;background:var(--line-2);margin-top:10px;overflow:hidden}
.tour-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;animation-name:tourbar;animation-timing-function:linear;animation-fill-mode:both}
@keyframes tourbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* tooltip */
.flow-tip{position:fixed;z-index:60;left:0;top:0;max-width:270px;background:var(--ink);color:#e6edf3;font-family:var(--font);font-size:12.5px;line-height:1.45;padding:8px 11px;border-radius:8px;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .12s,transform .12s;box-shadow:0 8px 24px rgba(15,27,45,.25)}
.flow-tip.on{opacity:1;transform:none}
.flow-tip b{display:block;color:#fff;margin-bottom:2px}
.flow-tip i{display:block;margin-top:4px;font-style:normal;color:#7cc4dc;font-size:11.5px}

/* cards under the diagram */
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pad{padding:14px 18px}
.pad h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.flow-steps,.flow-notes{margin:0;padding-left:20px;font-size:13px;color:var(--ink-2)}
.flow-steps li,.flow-notes li{margin:6px 0;line-height:1.45}
.flow-steps li{cursor:pointer;border-radius:6px;padding:2px 6px;margin-left:-6px;transition:background .15s;outline:none}
.flow-steps li:hover,.flow-steps li:focus-visible{background:var(--accent-l)}
.flow-steps li.on{background:var(--accent-l);box-shadow:inset 3px 0 0 var(--accent)}
#feed li[data-act]{transition:background .15s}
body:has(.flow-card) #feed li[data-act]{cursor:pointer}
body:has(.flow-card) #feed li[data-act]:hover{background:var(--accent-l)}
@media (max-width:900px){.flow-grid{grid-template-columns:1fr}.insp-cols{grid-template-columns:1fr;gap:10px}.flow-latest{flex-direction:column;gap:4px}}
@media (prefers-reduced-motion:reduce){.edge.hot,.edge.stop,.edge.lit,.node.agent.hot rect{animation:none}.dot{display:none}.intro .node,.intro .edge,.intro .enum,.insp-wrap.anim>*{animation:none!important}}