/* kelam.sh — shared chrome for every page except the landing page.
   The landing page (index.html) stays self-contained because its canvas artwork and the
   CI-guarded KBird geometry block live inline there. Everything else — /start, /concepts,
   /builder, /mcp, /skill, /examples, /reference, /cli, /docs, /privacy — loads this file
   so the docs read as one system.

   Palette is the SAME one packages/web/src/index.css ships (warm-paper light, ink dark),
   so kelam.sh and app.kelam.sh look like the same product. Keep them in sync. */

*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --bar-h: 3.6rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0b0d; --fg: #e8ecf2; --fg-muted: #8b93a1; --fg-dim: #565e6b;
  --divider: rgba(255,255,255,0.12); --surface: #141619; --surface2: #1c2027;
  --border: rgba(255,255,255,0.08);
  --accent: #4d9fff; --accent2: #7dd3fc; --accent-fg: #04121f;
  --accent-tint: rgba(77,159,255,0.14);
  --ok: #34d399; --warn: #fbbf24;
  --shadow-pop: 0 10px 30px rgba(0,0,0,0.28);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #efeae0; --fg: #0f0c0a; --fg-muted: #5a544c; --fg-dim: #a8a29e;
  --divider: #e2dbcc; --surface: #f7f3ea; --surface2: #e7e1d3;
  --border: #dcd4c2;
  --accent: #2563eb; --accent2: #0ea5e9; --accent-fg: #fff;
  --accent-tint: rgba(37,99,235,0.1);
  --ok: #0f9d68; --warn: #b45309;
  --shadow-pop: 0 8px 24px rgba(15,12,9,0.1);
}

html { font-size: 18px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg); font-family: var(--serif);
  line-height: 1.65; transition: background .3s, color .3s;
}
a { color: inherit; text-decoration: none; }
code, pre, .mono { font-family: var(--mono); }
::selection { background: var(--accent-tint); }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--divider);
}
.bar-in {
  max-width: 1180px; margin: 0 auto; height: var(--bar-h);
  padding: 0 1.4rem; display: flex; align-items: center; gap: 1.15rem;
}
.brand-lockup { display: flex; align-items: center; gap: .5rem; margin-right: auto; }
.brand-bird { width: 34px; height: 17px; display: block; color: var(--fg); flex: none; }
.brand { font-family: var(--sans); font-size: .95rem; font-weight: 500; }
.brand .tld { color: var(--fg-muted); font-weight: 400; }
.bar a.nav {
  font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg-muted); transition: color .2s; white-space: nowrap;
}
.bar a.nav:hover, .bar a.nav[aria-current="page"] { color: var(--fg); }
.bar a.signin {
  color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  padding: .42rem .95rem; transition: box-shadow .25s;
}
.bar a.signin:hover { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.theme-toggle {
  background: none; border: none; cursor: pointer; color: var(--fg-muted);
  display: flex; align-items: center; padding: .2rem; transition: color .2s;
}
.theme-toggle:hover { color: var(--fg); }
.theme-toggle svg { width: 15px; height: 15px; }
.icon-sun, .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="light"] .icon-moon { display: block; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--divider); border-radius: 8px;
  color: var(--fg-muted); cursor: pointer; padding: .32rem .55rem;
  font-family: var(--sans); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase;
}

/* ── docs shell: sidebar + article ───────────────────────────────────────── */
.shell {
  max-width: 1180px; margin: 0 auto; padding: 0 1.4rem 4rem;
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem;
}
.side {
  position: sticky; top: calc(var(--bar-h) + 1.4rem); align-self: start;
  padding-top: 2.4rem; max-height: calc(100vh - var(--bar-h) - 2rem); overflow-y: auto;
}
.side-group { margin-bottom: 1.5rem; }
.side-group h4 {
  font-family: var(--sans); font-size: .58rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: .55rem;
}
.side a {
  display: block; font-family: var(--sans); font-size: .78rem; color: var(--fg-muted);
  padding: .26rem 0 .26rem .7rem; border-left: 1px solid var(--divider); transition: color .18s, border-color .18s;
}
.side a:hover { color: var(--fg); border-color: var(--fg-dim); }
.side a[aria-current="page"] {
  color: var(--accent); border-left-color: var(--accent);
}

article { min-width: 0; padding-top: 2.4rem; }

/* ── article typography ──────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .55rem;
}
h1 {
  font-family: var(--serif); font-size: clamp(1.9rem, 4.6vw, 2.5rem); font-weight: 400;
  line-height: 1.2; letter-spacing: -.015em; text-wrap: balance;
}
h1 em, h2 em { font-style: italic; color: var(--fg-muted); }
.lede { font-size: 1.02rem; color: var(--fg-muted); margin-top: .9rem; max-width: 40em; }
h2 {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 400; letter-spacing: -.01em;
  margin: 2.8rem 0 .5rem; scroll-margin-top: calc(var(--bar-h) + 1rem);
}
h3 {
  font-family: var(--sans); font-size: .88rem; font-weight: 500; letter-spacing: -.005em;
  margin: 1.7rem 0 .4rem; scroll-margin-top: calc(var(--bar-h) + 1rem);
}
h4 { font-family: var(--sans); font-size: .78rem; font-weight: 500; margin: 1.2rem 0 .3rem; }
p { font-size: .97rem; color: var(--fg-muted); margin: .7rem 0; }
/* Kept to simple :not() arguments — a complex one (e.g. `:not(.side a)`) invalidates the
   whole selector on older engines and silently drops the rule. The sidebar isn't inside
   <article> anyway. */
article a:not(.btn):not(.card) {
  color: var(--fg); border-bottom: 1px solid var(--divider); transition: border-color .2s;
}
article a:not(.btn):not(.card):hover { border-color: var(--accent); }
strong, b { color: var(--fg); font-weight: 500; }
ul, ol { margin: .7rem 0 1rem 1.15rem; color: var(--fg-muted); font-size: .97rem; }
li { margin: .34rem 0; }
li::marker { color: var(--fg-dim); }
p code, li code, td code, h3 code, summary code {
  font-size: .8em; color: var(--fg); background: var(--surface);
  border: 1px solid var(--border); border-radius: 5px; padding: .06em .34em;
}
hr { border: none; border-top: 1px solid var(--divider); margin: 2.4rem 0; }

/* ── code blocks ─────────────────────────────────────────────────────────── */
pre {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.1rem; overflow-x: auto;
  font-family: var(--mono); font-size: .78rem; line-height: 1.75; color: var(--fg);
  margin: .85rem 0 1.1rem;
}
pre .c { color: var(--fg-dim); }        /* comment */
pre .k { color: var(--accent); }        /* keyword / prompt / command */
pre .s { color: var(--accent2); }       /* string */
pre .o { color: var(--ok); }            /* output */
.copy {
  position: absolute; top: .5rem; right: .5rem; font-family: var(--sans);
  background: var(--bg); border: 1px solid var(--border); color: var(--fg-muted);
  border-radius: 7px; padding: .22rem .5rem; font-size: .58rem; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .18s, color .2s, border-color .2s;
}
pre:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--fg); border-color: var(--accent); }

/* a one-line command with an always-visible copy affordance */
.cmd {
  display: flex; align-items: center; gap: .8rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem; margin: .9rem 0;
}
.cmd .dollar { color: var(--accent); user-select: none; font-family: var(--mono); font-size: .88rem; }
.cmd code { font-size: .82rem; color: var(--fg); overflow-x: auto; white-space: nowrap; flex: 1; }
.cmd .copy { position: static; opacity: 1; }

/* A long chained command wraps rather than hiding behind a scrollbar — in a setup
   step the whole point is seeing what you're about to run. */
.cmd.wrap { align-items: flex-start; }
.cmd.wrap code { white-space: pre-wrap; word-break: break-word; overflow-x: visible; }

/* ── cards ───────────────────────────────────────────────────────────────── */
/* 14rem, not 15: three cards must fit the article column at the 1180px shell width
   (15rem lands exactly on the boundary and rounds down to two).
   min(<track>, 100%) is load-bearing: a bare minmax() floor cannot shrink below itself, so
   on a 320px phone the 19rem `.cards.two` track pushed the page 6px wider than the viewport. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .9rem; margin: 1.2rem 0 1.4rem; }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.05rem 1.15rem; transition: border-color .2s, transform .2s, box-shadow .2s;
}
a.card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.card-k {
  font-family: var(--sans); font-size: .58rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; display: block;
}
.card h3 { margin: 0 0 .3rem; font-size: .95rem; font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.card p { margin: 0; font-size: .87rem; line-height: 1.55; }
.card .go { display: inline-block; margin-top: .6rem; font-family: var(--sans); font-size: .66rem; color: var(--accent); letter-spacing: .04em; }

/* ── the setup switcher ──────────────────────────────────────────────────
   Three integration surfaces, but you are only ever one of them — so this is
   a segmented control over one focused panel, not three competing cards. */
.tabs { margin: 1.4rem 0 1.6rem; }
.tablist {
  display: inline-flex; gap: .2rem; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 999px; padding: .25rem; max-width: 100%;
  overflow-x: auto; scrollbar-width: none;
}
.tablist::-webkit-scrollbar { display: none; }
.tab {
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .01em;
  color: var(--fg-muted); background: none; border: none; border-radius: 999px;
  padding: .52rem 1.05rem; cursor: pointer; white-space: nowrap;
  transition: color .18s, background .18s;
}
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { background: var(--bg); color: var(--fg); box-shadow: var(--shadow-pop); }
.panel { display: none; padding-top: 1.2rem; }
.panel[data-open] { display: block; }
.panel > .lede-sm { font-size: .93rem; color: var(--fg-muted); margin: 0 0 1rem; max-width: 42em; }

/* numbered setup steps inside a panel */
.setup { list-style: none; margin: 0; padding: 0; }
.setup > li { display: flex; gap: .9rem; padding: 0 0 1.05rem; }
.setup > li:last-child { padding-bottom: .2rem; }
.setup .n {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-top: .05rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--accent);
  font-family: var(--sans); font-size: .66rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.setup .t { font-family: var(--sans); font-size: .87rem; font-weight: 500; color: var(--fg); margin: .12rem 0 .45rem; }
.setup .body { min-width: 0; flex: 1; }
.setup .body p { margin: .4rem 0 0; font-size: .87rem; }
.setup .cmd { margin: 0; }

/* ── copyable prompts — the "try it" unit ────────────────────────────────
   The ask is the hero of the card and the whole card is the copy target;
   hunting a small button is worse UX than clicking the thing you're reading. */
.prompts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: .8rem; margin: 1.2rem 0 1.4rem; }
.prompt {
  /* flex column so the footer sits on the bottom edge: grid stretches every card to the
     tallest in its row, and a footer that hugs the text leaves a hole under the short ones. */
  display: flex; flex-direction: column; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: .95rem 1.05rem .8rem; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.prompt:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.prompt:active { transform: translateY(0); }
.prompt-body {
  font-family: var(--serif); font-size: 1rem; line-height: 1.5; color: var(--fg); margin: 0;
  text-wrap: pretty; flex: 1;
}
.prompt-foot {
  display: flex; align-items: baseline; gap: .8rem; margin-top: .7rem;
  padding-top: .55rem; border-top: 1px solid var(--divider);
}
.prompt-where {
  font-family: var(--sans); font-size: .55rem; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--fg-dim);
}
.prompt-copy {
  margin-left: auto; font-family: var(--sans); font-size: .58rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fg-dim); transition: color .18s;
}
.prompt:hover .prompt-copy { color: var(--accent); }
.prompt.copied .prompt-copy { color: var(--ok); }
.prompt.copied { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }

/* ── notes ───────────────────────────────────────────────────────────────── */
.note {
  background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--accent2);
  border-radius: 10px; padding: .9rem 1.05rem; margin: 1.1rem 0;
}
.note p { margin: 0; font-size: .9rem; }
.note p + p { margin-top: .5rem; }
.note.warn { border-left-color: var(--warn); }

/* ── tables ──────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; margin: .9rem 0 1.2rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
  text-align: left; font-family: var(--sans); font-size: .58rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim);
  padding: .4rem .6rem .4rem 0; border-bottom: 1px solid var(--divider); white-space: nowrap;
}
td {
  border-top: 1px solid var(--divider); padding: .7rem .6rem .7rem 0;
  vertical-align: top; color: var(--fg-muted); line-height: 1.5;
}
td:first-child { color: var(--fg); font-family: var(--mono); font-size: .78rem; white-space: nowrap; width: 1%; padding-right: 1.2rem; }
td:first-child.wrap { white-space: normal; width: auto; }

/* ── steps ───────────────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step; position: relative; padding: 0 0 1.6rem 2.4rem;
  border-left: 1px solid var(--divider); margin-left: .8rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: .4rem; }
.steps > li::before {
  content: counter(step); position: absolute; left: -.82rem; top: -.1rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bg);
  border: 1px solid var(--border); color: var(--accent);
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.steps > li > h3 { margin-top: 0; }
.steps > li > p:first-of-type { margin-top: .1rem; }

/* ── pills / tags ────────────────────────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 1rem; }
.pill {
  font-family: var(--sans); font-size: .62rem; letter-spacing: .04em; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: .28rem .66rem; white-space: nowrap;
}
.pill b { color: var(--fg); font-weight: 500; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 999px; padding: .78rem 1.5rem;
  display: inline-block; transition: box-shadow .25s, border-color .25s, filter .25s, color .25s;
}
.btn.p { background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); }
.btn.p:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 45%, transparent); filter: brightness(1.07); }
/* `background: none` matters: on a <button> the UA default is a grey pill. */
.btn.q { background: none; color: var(--fg-muted); border: 1px solid var(--divider); }
.btn.q:hover { border-color: var(--fg-muted); color: var(--fg); }
.btnrow { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin: 1.4rem 0; }

/* ── details / FAQ ───────────────────────────────────────────────────────── */
details {
  border-bottom: 1px solid var(--divider); padding: .8rem 0;
}
summary {
  cursor: pointer; font-family: var(--sans); font-size: .88rem; color: var(--fg);
  list-style: none; display: flex; align-items: baseline; gap: .6rem;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: '+'; color: var(--accent); font-family: var(--mono); flex: none; }
details[open] summary::before { content: '−'; }
details > *:not(summary) { margin-left: 1.25rem; }

/* ── next / prev ─────────────────────────────────────────────────────────── */
.nextprev {
  display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 3rem;
  border-top: 1px solid var(--divider); padding-top: 1.4rem;
}
.nextprev a {
  flex: 1 1 12rem; border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1rem;
  transition: border-color .2s;
}
.nextprev a:hover { border-color: var(--accent); }
.nextprev span {
  display: block; font-family: var(--sans); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: .25rem;
}
.nextprev b { font-family: var(--serif); font-weight: 400; font-size: 1rem; color: var(--fg); }

/* ── footer ──────────────────────────────────────────────────────────────── */
footer {
  max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.4rem 2.4rem;
  border-top: 1px solid var(--divider); font-family: var(--sans); font-size: .66rem;
  letter-spacing: .04em; color: var(--fg-muted); opacity: .75;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
footer a:hover { color: var(--fg); }
.footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  html { font-size: 16px; }
  .shell { grid-template-columns: 1fr; gap: 0; }
  .nav-toggle { display: block; }
  /* The Menu button replaces three nav links, so tighten the row to pay for it — at the
     original 1.15rem gap the bar overflowed the viewport by a few px on a 390px phone. */
  .bar-in { gap: .8rem; }
  .bar a.nav.hide-sm { display: none; }
  .side {
    position: static; max-height: none; overflow: visible; padding-top: 1.4rem;
    display: none; border-bottom: 1px solid var(--divider); padding-bottom: 1rem;
  }
  .side.open { display: block; }
  article { padding-top: 1.8rem; }
}
@media (max-width: 560px) {
  /* Phone width: Menu opens the whole doc nav, so the standalone Docs link is redundant
     and the row fits without it. */
  .bar-in { gap: .6rem; padding: 0 1rem; }
  .bar a.nav:not(.signin) { display: none; }
  .bar a.signin { padding: .4rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}