/* CineGraph: shivi page + calm request-route architecture. Accent = blue. */
body.pc-cinegraph{--pc-accent:#8fa9f5}
html[data-theme="light"] body.pc-cinegraph{--pc-accent:#2b59c3}

body.pc-cinegraph .architecture-flow{display:flex;flex-direction:column;gap:14px;font-size:14.5px;line-height:1.5;color:var(--pc-text)}
body.pc-cinegraph .flow-node{min-width:0;overflow-wrap:anywhere;background:none;border:0;box-shadow:none;padding:0}
body.pc-cinegraph .flow-node h3,body.pc-cinegraph .flow-node h4{margin:0 0 6px;font-size:15.5px;line-height:1.3;font-weight:600;letter-spacing:normal;color:var(--pc-text)}
body.pc-cinegraph .flow-node p,body.pc-cinegraph .flow-node li{margin:0 0 4px;font-size:14.5px;line-height:1.5}
body.pc-cinegraph .flow-node code{font:400 .9em/1.4 'DM Mono',ui-monospace,monospace;background:var(--pc-chip);padding:1px 4px;border-radius:4px;color:var(--pc-text)}
body.pc-cinegraph .flow-node h3 code{background:none;padding:0;font-size:.92em}

/* entry row */
body.pc-cinegraph .architecture-entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;padding-top:14px;border-top:1px solid var(--pc-line)}
body.pc-cinegraph .architecture-entry .flow-node p{color:var(--pc-muted)}

body.pc-cinegraph .architecture-flow p.flow-direction{margin:4px 0 0;font:500 11.5px/1.2 'DM Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--pc-accent)}

/* routes: three columns separated by whitespace, accent hairline on top */
body.pc-cinegraph .architecture-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
body.pc-cinegraph .flow-route{border-top:2px solid var(--pc-accent);padding-top:10px}
body.pc-cinegraph .flow-route>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;padding:0 0 6px}
body.pc-cinegraph .flow-route>summary::-webkit-details-marker{display:none}
body.pc-cinegraph .flow-route>summary h3{margin:0}
body.pc-cinegraph .flow-route>summary:focus-visible{outline:2px solid var(--pc-accent);outline-offset:3px}
body.pc-cinegraph .flow-route-toggle::before{content:'+';font:500 16px/1 'DM Mono',ui-monospace,monospace;color:var(--pc-accent)}
body.pc-cinegraph .flow-route[open] .flow-route-toggle::before{content:'\2212'}
body.pc-cinegraph .flow-route-body>ul{list-style:none;margin:0 0 10px;padding:0}
body.pc-cinegraph .flow-route-body>ul>li{margin:0;padding:7px 0;border-top:1px solid var(--pc-line)}
body.pc-cinegraph .flow-data{margin:8px 0 0;font-size:13px!important;color:var(--pc-muted)}
body.pc-cinegraph .flow-data b{display:block;font:500 11px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--pc-muted)}
body.pc-cinegraph .flow-fallback{margin:4px 0 10px;padding:2px 0 2px 12px;border-left:2px dashed var(--pc-accent)}
body.pc-cinegraph .flow-fallback h4{color:var(--pc-accent)}
body.pc-cinegraph .flow-fallback p{color:var(--pc-muted)}
body.pc-cinegraph .flow-fallback p.flow-condition{font:500 11.5px/1.4 'DM Mono',ui-monospace,monospace;letter-spacing:.03em}

/* output */
body.pc-cinegraph .flow-output{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px;padding-top:12px;border-top:1px solid var(--pc-line)}
body.pc-cinegraph .flow-output h3{margin:0}
body.pc-cinegraph .flow-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
body.pc-cinegraph .flow-chips li{margin:0;color:var(--pc-muted)}
body.pc-cinegraph .flow-chips li::before{content:'\2022';color:var(--pc-accent);margin-right:7px}

body.pc-cinegraph .pc-wide>.pc-note{margin:16px 0 0}

@media (max-width:760px){
  body.pc-cinegraph .architecture-entry,body.pc-cinegraph .architecture-routes{grid-template-columns:minmax(0,1fr);gap:20px}
}
body.pc-cinegraph .pc-wide>p.pc-note{font-size:13px;line-height:1.5;color:var(--pc-muted)}