/* ref-manager documentation — shared styles.
   Palette, type, and component vocabulary follow docs/figures/*.html. */
:root{
  --ground:#FAF8F3;
  --ink:#26231C;
  --muted:#7C766A;
  --line:#DDD8CC;
  --accent:#0E7C7B;
  --accent-soft:rgba(14,124,123,.10);
  --amber:#B5761F;
  --amber-soft:rgba(181,118,31,.12);
  --card:#FFFFFF;
  --term:#23211C;
  --term-ink:#E9E5DC;
  --term-muted:#9A9488;
  --term-accent:#6FC7C3;
  --term-amber:#E3A756;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1E1C18;
    --ink:#E9E5DC;
    --muted:#9A9488;
    --line:#3A362E;
    --accent:#4FB3B0;
    --accent-soft:rgba(79,179,176,.14);
    --amber:#E3A756;
    --amber-soft:rgba(227,167,86,.16);
    --card:#26231E;
    --term:#151410;
  }
}
:root[data-theme="dark"]{
  --ground:#1E1C18;
  --ink:#E9E5DC;
  --muted:#9A9488;
  --line:#3A362E;
  --accent:#4FB3B0;
  --accent-soft:rgba(79,179,176,.14);
  --amber:#E3A756;
  --amber-soft:rgba(227,167,86,.16);
  --card:#26231E;
  --term:#151410;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:15px;
  line-height:1.6;
  margin:0;
}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
code,kbd,pre,.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
p code,li code,td code,dd code,figcaption code,.note code{font-size:.84em;color:var(--ink);background:var(--accent-soft);padding:.05em .3em;border-radius:3px}
img{max-width:100%}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .inner{max-width:72rem;margin:0 auto;padding:.6rem 1.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.01em}
.brand img{width:30px;height:30px}
.brand span{font-family:"IBM Plex Mono",monospace;font-size:.95rem}
.topbar nav{display:flex;gap:.25rem;flex-wrap:wrap;margin-left:auto}
.topbar nav a{
  color:var(--muted);text-decoration:none;font-size:.85rem;
  padding:.3rem .6rem;border-radius:6px;
}
.topbar nav a:hover{color:var(--ink);background:var(--accent-soft)}
.topbar nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);font-weight:500}

/* ---------- page shell ---------- */
.shell{max-width:72rem;margin:0 auto;padding:2.5rem 1.5rem 4rem;display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
.shell.with-toc{grid-template-columns:13rem minmax(0,1fr)}
main{min-width:0;display:flex;flex-direction:column;gap:2.75rem}
.toc{position:sticky;top:4.5rem;align-self:start;max-height:calc(100vh - 6rem);overflow:auto;font-size:.8125rem}
.toc h4{font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0 0 .6rem}
.toc ol,.toc ul{list-style:none;margin:0 0 1rem;padding:0;border-left:1px solid var(--line)}
.toc li a{display:block;padding:.2rem 0 .2rem .8rem;color:var(--muted);text-decoration:none;margin-left:-1px;border-left:2px solid transparent}
.toc li a:hover{color:var(--ink);border-left-color:var(--accent)}
.toc li a code{background:none;padding:0;color:inherit;font-size:.78rem}
@media (max-width:880px){
  .shell.with-toc{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;max-height:none}
}

/* ---------- headings ---------- */
header.page p.eyebrow,.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .5rem;
}
h1{font-size:2.2rem;font-weight:600;line-height:1.15;margin:0 0 .6rem;text-wrap:balance;letter-spacing:-.015em}
header.page p.lede{color:var(--muted);max-width:46rem;margin:0;font-size:1.02rem}
h2{font-size:1.35rem;font-weight:600;margin:0 0 .9rem;letter-spacing:-.01em}
h3{font-size:1.02rem;font-weight:600;margin:1.6rem 0 .5rem}
section > p,section > ul,section > ol{max-width:48rem}
section > p{margin:.6rem 0}
.muted{color:var(--muted)}

/* ---------- figures (same as docs/figures) ---------- */
figure{margin:0}
.svg-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:1.25rem}
.svg-wrap svg{display:block;min-width:760px;max-width:100%;height:auto;color:var(--ink)}
figcaption{color:var(--muted);font-size:.875rem;margin-top:.75rem;max-width:46rem}
.legend{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.8125rem;color:var(--muted);margin-top:.75rem}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.sw{width:1.1rem;height:.7rem;border-radius:2px;display:inline-block;border:1.5px solid currentColor}
.sw.solid{border-color:var(--accent);background:var(--accent-soft)}
.sw.amber{border-color:var(--amber);background:var(--amber-soft)}
.sw.dash{border-style:dashed}
.sw.faded{opacity:.4}

/* ---------- terminal transcript ---------- */
pre.term{
  background:var(--term);color:var(--term-ink);
  border-radius:8px;padding:1rem 1.25rem;margin:.9rem 0;
  font-size:.8125rem;line-height:1.65;overflow-x:auto;
  border:1px solid color-mix(in srgb,var(--term) 70%,var(--line));
}
pre.term .p{color:var(--term-accent);user-select:none}      /* prompt glyph */
pre.term .cmd{color:#fff;font-weight:500}
pre.term .o{color:var(--term-muted)}                          /* output */
pre.term .ok{color:var(--term-accent)}
pre.term .w{color:var(--term-amber)}
pre.term .c{color:var(--term-muted);font-style:italic}       /* comment */
.term-label{font-family:"IBM Plex Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1rem 0 -.5rem}

pre.code{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:1rem 1.25rem;margin:.9rem 0;font-size:.8125rem;line-height:1.6;overflow-x:auto;color:var(--ink);
}
pre.code .c{color:var(--muted)}
pre.code .a{color:var(--accent);font-weight:500}
pre.code .m{color:var(--amber);font-weight:500}
pre.tree{
  font-size:.8125rem;line-height:1.6;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  padding:1.25rem 1.5rem;overflow-x:auto;margin:0;color:var(--ink);
}
pre.tree .c{color:var(--muted)}
pre.tree .a{color:var(--accent);font-weight:500}
pre.tree .m{color:var(--amber);font-weight:500}

/* ---------- callouts ---------- */
.note{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:6px;
  padding:.75rem 1rem;margin:1rem 0;font-size:.875rem;max-width:48rem;
}
.note.warn{border-left-color:var(--amber);background:var(--amber-soft)}
.note strong:first-child{font-weight:600}

/* ---------- command lists (as in figures) ---------- */
.cmd-groups{display:flex;flex-direction:column;gap:1.5rem}
.cmd-group h3{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--accent);
  margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);
}
.cmd-list{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.25rem;margin:0}
.cmd-list dt{font-family:"IBM Plex Mono",monospace;font-size:.8125rem;font-weight:500;color:var(--ink);white-space:nowrap;margin:0}
.cmd-list dt a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--accent)}
.cmd-list dd{margin:0;color:var(--muted);font-size:.8125rem;line-height:1.5}
@media (max-width:640px){
  .cmd-list{grid-template-columns:1fr}
  .cmd-list dt{white-space:normal}
  .cmd-list dd{margin-bottom:.4rem}
}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;margin:.9rem 0}
table.sel{border-collapse:collapse;width:100%;font-size:.8125rem;min-width:34rem}
table.sel th{
  text-align:left;font-weight:500;color:var(--accent);
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;
  padding:0 1rem .5rem 0;border-bottom:1px solid var(--line);
}
table.sel td{padding:.45rem 1rem .45rem 0;vertical-align:top;border-bottom:1px solid var(--line);color:var(--muted)}
table.sel td:first-child{font-family:"IBM Plex Mono",monospace;color:var(--ink);white-space:nowrap}
table.sel tr.base td{background:var(--accent-soft)}

/* ---------- command reference entries ---------- */
article.cmd{
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  padding:1.25rem 1.5rem 1.4rem;scroll-margin-top:4.5rem;
}
article.cmd > .cmd-head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.35rem}
article.cmd > .cmd-head h3{font-family:"IBM Plex Mono",monospace;font-size:1.05rem;font-weight:500;margin:0;color:var(--accent)}
article.cmd > p.summary{margin:.2rem 0 .8rem;color:var(--ink);max-width:48rem}
.synopsis{
  font-family:"IBM Plex Mono",monospace;font-size:.8125rem;
  background:var(--ground);border:1px solid var(--line);border-radius:6px;
  padding:.55rem .8rem;overflow-x:auto;white-space:pre;margin:.6rem 0;
}
article.cmd h4{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:1.1rem 0 .4rem;
}
article.cmd ul,article.cmd ol{margin:.3rem 0;padding-left:1.2rem;font-size:.875rem;max-width:48rem}
article.cmd li{margin:.2rem 0}
dl.args{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.1rem;margin:.3rem 0;font-size:.8125rem}
dl.args dt{font-family:"IBM Plex Mono",monospace;color:var(--ink);white-space:nowrap}
dl.args dd{margin:0;color:var(--muted)}
@media (max-width:640px){dl.args{grid-template-columns:1fr} dl.args dd{margin-bottom:.35rem}}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.tag{
  font-family:"IBM Plex Mono",monospace;font-size:.625rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;padding:.08rem .4rem;border-radius:3px;white-space:nowrap;
  color:var(--muted);border:1px solid var(--line);
}
.tag.phase{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.tag.agent{color:var(--amber);border-color:var(--amber);background:var(--amber-soft)}
.tag.ro{color:var(--muted)}
.tag.net{color:var(--ink)}
.writes{font-size:.8125rem;color:var(--muted)}
.writes code{font-size:.78rem}

/* ---------- tutorial steps ---------- */
ol.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:flex;flex-direction:column;gap:1.75rem}
ol.steps > li{counter-increment:step;position:relative;padding-left:3rem;max-width:52rem}
ol.steps > li::before{
  content:counter(step);position:absolute;left:0;top:-.1rem;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--accent);color:var(--card);
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
ol.steps > li::after{content:"";position:absolute;left:calc(1rem - 1px);top:2.2rem;bottom:-1.6rem;width:2px;background:var(--line)}
ol.steps > li:last-child::after{display:none}
ol.steps > li > h3{margin:0 0 .35rem;font-size:1.05rem}
ol.steps > li > p{margin:.35rem 0}

/* ---------- landing cards ---------- */
.hero{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.hero img{width:136px;height:136px;filter:drop-shadow(0 8px 18px rgba(14,124,123,.18))}
@media (max-width:640px){.hero{grid-template-columns:1fr}.hero img{width:96px;height:96px}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.card{
  display:flex;flex-direction:column;gap:.35rem;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  padding:1rem 1.15rem;color:var(--ink);text-decoration:none;
  transition:border-color .15s,transform .15s;
}
a.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card .k{font-family:"IBM Plex Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.card strong{font-weight:600;font-size:1rem}
.card span.d{color:var(--muted);font-size:.84rem;line-height:1.5}

/* ---------- pager ---------- */
.pager{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:1.25rem;font-size:.875rem;flex-wrap:wrap}
.pager a{text-decoration:none}
.pager small{display:block;color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
footer.site{max-width:72rem;margin:0 auto;padding:1.5rem;color:var(--muted);font-size:.78rem;border-top:1px solid var(--line)}