/* Bridgecore site — one stylesheet for every page (recipes/pages.py writes the HTML).
   Light, calm, readable first. System fonts only: no outside requests, nothing to wait for.
   The one bold thing is the plan builder on the front page; everything else stays quiet. */
:root{
  --bg:#f4f6f9;--paper:#ffffff;--ink:#152033;--muted:#5b6578;--line:#dde3ec;--soft:#eaf0f8;
  --blue:#1d5fd1;--blue-ink:#ffffff;--blue-soft:#e3ecfb;
  --ok:#15803d;--ok-bg:#e7f6ec;--undo:#b45309;--undo-bg:#fbf0dc;--stop:#b91c1c;--stop-bg:#fde8e8;
  --wire:#7f97bd;--shadow:0 1px 2px rgba(21,32,51,.06),0 8px 24px -12px rgba(21,32,51,.18);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1521;--paper:#171f2e;--ink:#e8edf5;--muted:#9aa6ba;--line:#2a3447;--soft:#1f2a3d;
  --blue:#6ea0ff;--blue-ink:#0b1220;--blue-soft:#1b2a47;
  --ok:#4ade80;--ok-bg:#12301f;--undo:#fbbf24;--undo-bg:#3a2a0d;--stop:#f87171;--stop-bg:#3d1515;
  --wire:#3f506d;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--soft);padding:.08em .35em;border-radius:5px}
pre{overflow:auto;max-height:22rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.9rem;font-size:.82rem;line-height:1.5}
h1{font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.12;letter-spacing:-.02em;margin:.2rem 0 .8rem;font-weight:750}
h2{font-size:1.35rem;line-height:1.3;margin:2.4rem 0 .7rem;letter-spacing:-.01em}
h3{font-size:1.05rem;margin:1.4rem 0 .4rem}
p{margin:.5rem 0}
.lead{font-size:1.15rem;color:var(--muted);max-width:38em}
.note{font-size:.95rem;color:var(--muted)}
ol,ul{padding-left:1.3rem}li{margin:.4rem 0}
table{width:100%;border-collapse:collapse;font-size:.97rem}
th,td{text-align:left;vertical-align:top;padding:.55rem .6rem;border-bottom:1px solid var(--line)}th{font-weight:600;color:var(--muted)}

/* shell */
.top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;max-width:64rem;margin:0 auto;padding:1rem 1rem 0}
.top .brand{display:flex;align-items:center;gap:.55rem;font-weight:700;text-decoration:none;color:var(--ink);font-size:1.05rem;margin-right:auto}
.top .brand img{width:30px;height:30px;border-radius:8px}
.top nav{display:flex;gap:1.1rem;overflow-x:auto;white-space:nowrap;max-width:100%;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{color:var(--muted);text-decoration:none;font-size:.97rem;padding:.35rem 0}
.top nav a:hover{color:var(--ink)}
@media (max-width:640px){.top{row-gap:.3rem}.top .brand{flex-basis:100%}}
main{max-width:44rem;margin:0 auto;padding:1.5rem 1rem 4rem}
main.wide{max-width:64rem}
footer{margin-top:3.5rem;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding-top:1.1rem}
footer a{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--blue);color:var(--blue-ink);border:0;border-radius:10px;padding:.75rem 1.15rem;font:inherit;font-weight:650;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.06)}.btn:disabled{opacity:.6;cursor:wait}
.btn.quiet{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.chip{display:inline-block;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:.3rem .8rem;font:inherit;font-size:.92rem;color:var(--ink);cursor:pointer;text-decoration:none}
.chip:hover{border-color:var(--blue);color:var(--blue)}

/* front page: the plan builder */
.hero{max-width:64rem;margin:0 auto;padding:1.6rem 1rem 0}
.hero h1{max-width:16em}
.ask{display:flex;gap:.6rem;margin:1.4rem 0 .7rem;flex-wrap:wrap}
.ask input{flex:1 1 20rem;font:inherit;font-size:1.12rem;padding:.9rem 1rem;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);min-width:0}
.ask input:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 4px var(--blue-soft)}
.examples{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:.95rem}
.plan{position:relative;margin:1.3rem 0 0;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.3rem 1.2rem 1.1rem;min-height:12rem}
.plan .status{color:var(--muted);font-size:.95rem;min-height:1.5rem;margin:0 0 .6rem}
.plan .status.err{color:var(--stop)}
.flow{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.4rem 2.2rem;align-items:start}
.flow svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.flow svg path{fill:none;stroke:var(--wire);stroke-width:2.5;stroke-linecap:round}
.node{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:.85rem .95rem .9rem;opacity:0;transform:translateY(8px) scale(.98)}
.node.in{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.node.gap{border-style:dashed}
.node .when{font-size:.78rem;color:var(--muted);margin:0 0 .15rem}
.node .app{font-weight:700;font-size:1.08rem;line-height:1.25;margin:0}
.node .said{color:var(--muted);font-size:.93rem;margin:.25rem 0 .55rem}
.tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;border-radius:999px;padding:.18rem .62rem;opacity:0;transform:translateY(4px)}
.tag.in{opacity:1;transform:none;transition:opacity .3s ease .05s,transform .3s ease .05s}
.tag::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.tag.ok{color:var(--ok);background:var(--ok-bg)}.tag.undo{color:var(--undo);background:var(--undo-bg)}.tag.stop{color:var(--stop);background:var(--stop-bg)}
.tag.gate{color:var(--blue);background:var(--blue-soft);margin-left:.3rem}.tag.gate::before{display:none}
.tag.gap{color:var(--muted);background:var(--soft)}.tag.gap::before{display:none}
.node .fix{font-size:.86rem;color:var(--muted);margin:.5rem 0 0}
.stamp{margin:1.1rem 0 0;font-size:.92rem;color:var(--muted);opacity:0}
.stamp.in{opacity:1;transition:opacity .4s ease}
.stamp b{color:var(--ok);font-weight:650}
.after{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:1.1rem 0 0;opacity:0}
.after.in{opacity:1;transition:opacity .4s ease}
.after .steps{color:var(--muted);font-size:.93rem;margin:0}
.after .steps b{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.node,.tag,.stamp,.after{transition:none!important}.flow svg path{stroke-dasharray:none!important;stroke-dashoffset:0!important}}

/* front page: the rest */
.truths{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem 2rem;margin:.6rem 0 0}
.truths h3{margin:.2rem 0 .3rem}
.truths p{margin:0;color:var(--muted);font-size:.97rem}
.numbers{display:flex;gap:1.6rem 2.6rem;flex-wrap:wrap;margin:1.2rem 0 0;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.numbers div{font-size:.93rem;color:var(--muted)}
.numbers b{display:block;font-size:1.45rem;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.recipes{margin-top:.4rem}
#q{width:100%;font:inherit;font-size:1.05rem;padding:.8rem .9rem;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);margin:.4rem 0 .6rem}
#q:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 4px var(--blue-soft)}
#none{display:none;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.8rem}
.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.95rem 1rem;text-decoration:none;color:inherit}
.card b{color:var(--ink);display:block;margin-bottom:.15rem}
.card:hover{border-color:var(--blue)}
.card span{color:var(--muted);font-size:.95rem}
.box{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin:.9rem 0}
.box b{color:var(--ink)}
.copy{display:inline-flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.copy code{font-size:.95rem;padding:.35rem .6rem}

/* recipe pages */
.kicker{color:var(--muted);font-size:.9rem;margin:1.2rem 0 .2rem}
.kind{display:inline-block;min-width:3.4rem;font-size:.8rem;font-weight:700;color:var(--blue)}
.tool{color:var(--muted);font-size:.92rem}
.label{font-size:.78rem;text-decoration:none;border-radius:999px;padding:.08rem .55rem;margin-left:.3rem;white-space:nowrap;font-weight:600}
.label.read-only{color:var(--ok);background:var(--ok-bg)}.label.reversible{color:var(--undo);background:var(--undo-bg)}.label.irreversible{color:var(--stop);background:var(--stop-bg)}
.get{display:inline-block;background:var(--blue);color:var(--blue-ink);padding:.7rem 1.1rem;border-radius:10px;text-decoration:none;font-weight:650}
details{margin-top:1rem}summary{cursor:pointer;color:var(--muted)}
.log li{margin:.7rem 0;font-size:.95rem}
.how{list-style:none;padding:0;color:var(--muted)}.how li{margin:.3rem 0}