/* ---------------------------------------------------------------------------
   Institutional reference documentation. No webfonts by design: a system
   stack renders instantly, matches the reader's OS, and cannot rot when a
   font host changes. The three sites this is built to sit beside all do the
   same thing for the same reason.

   The palette is Lamaku's own: cream ground, terracotta, warm brown ink, after
   the torch its name means. Every pair is verified rather than eyeballed.
   --------------------------------------------------------------------------- */
:root{
  --ground:#fbf7f1;
  --ground-alt:#f3ebe0;
  --ground-code:#f1e9dd;
  --ink:#33261e;
  --ink-2:#5c4636;
  --ink-3:#78614f;
  --rule:#e4d8c9;
  --rule-strong:#9c8267;   /* 3.4:1 on the ground, per WCAG 1.4.11 */
  --accent:#a9481d;          /* Lamaku terracotta. 5.4:1 on the ground. */
  --accent-hover:#8a3a16;
  --band:#a34620;            /* the header band. White on it: 6.1:1. */
  --band-ink:#f9e6d8;
  --note:#1f5e6e;
  --note-bg:#e9f1f2;
  --warn:#8a5a08;
  --warn-bg:#f7efdf;
  --stop:#9a2318;
  --stop-bg:#f9eae6;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sidebar:17rem;
  --rail:14rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#201a16;
    --ground-alt:#2a211a;
    --ground-code:#2f251c;
    --ink:#efe6da;
    --ink-2:#c3b4a3;
    --ink-3:#9c8b79;
    --rule:#3b2f26;
    --rule-strong:#82705e;   /* 3.6:1 on the dark ground */
    --accent:#f0a06a;        /* 8.1:1 on the dark ground. */
    --accent-hover:#f7be93;
    --band:#7a3617;          /* deepened, or the band glares. */
    --band-ink:#f9e6d8;
    --note:#7fc3d2;
    --note-bg:#17262a;
    --warn:#e0a95f;
    --warn-bg:#2b2114;
    --stop:#ec9e93;
    --stop-bg:#2c1b18;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-text-size-adjust:100%;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#fff;padding:.6rem 1rem;
}
.skip:focus{left:0}

a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--accent-hover)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;
}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid var(--rule);background:var(--ground);
  position:sticky;top:0;z-index:20;
}
.masthead-in{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:.7rem 1.5rem;max-width:100rem;margin:0 auto;
}
.masthead .name{font-family:var(--mono);font-size:.95rem;font-weight:600;color:var(--ink);text-decoration:none}
.mark{flex:none;align-self:center}
.mark rect{fill:var(--accent)}
/* The masthead torch: an icon, not a tile. Height leads; width follows the
   glyph's own 10:22 box. */
.mark-icon{
  /* Sized so the ring matches the wordmark's cap height and the flame
     ascends like a letter's ascender; nudged so the ring's centre sits on
     the text's optical midline (measured on the render, not assumed). */
  height:1.2rem;width:auto;flex:none;align-self:center;
  transform:translateY(-0.75px);
  fill:none;stroke:var(--accent);stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Only the flame fills — the nested group scopes it. The bare selector
   flooded the ring and shaft too, because everything sits inside .mk. */
.mark-icon .mk g path{fill:var(--accent);stroke:none}
/* Heavier than the 1.75 the interface icons use: the mark is small, sits on
   a filled ground, and thins out at 16px at the lighter weight. The flame
   inside carries vector-effect:non-scaling-stroke, so its scaled-down path
   still draws at this width and the torch reads as one line weight. */
/* The mark is responsive: the full power-torch needs about 30px to read, so
   the bands carry it, while the masthead and favicon carry the torch alone at
   a heavier stroke. Same flame, same grid, two crops. */
.mark .mk{fill:none;stroke:var(--ground);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
/* The flame is filled with its own line colour. At icon sizes the inner curl
   is sub-pixel noise as an outline; solid, it reads as a lit flame at every
   size, so the fill is universal rather than a small-size variant. */
.mark .mk g path{fill:var(--ground);stroke:none}
.band .mark .mk g path{fill:var(--band);stroke:none}
.masthead .ver{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.masthead .spacer{flex:1}
.masthead .links{display:flex;gap:1.4rem;font-size:.8125rem}
.masthead .links a{color:var(--ink-3);text-decoration:none}
.masthead .links a:hover{color:var(--accent);text-decoration:underline}
.masthead .links a:focus-visible{color:var(--accent)}

/* ---------- header band ----------
   The only surface on the site that fills with the accent. Its inner width
   matches the shell's tracks, so its left edge lands on the sidebar's. */
.band{background:var(--band);padding:0 1.5rem}
.band-in{max-width:63.5rem;margin:0 auto;padding:2.6rem 0 2.9rem;
  display:flex;gap:1.2rem;align-items:flex-start}
.band h1{color:#fff;margin:0 0 .35rem}
.band .tagline{color:var(--band-ink);margin:0;font-size:1.0625rem}
.band .mark{width:2.4rem;height:2.4rem;align-self:flex-start;margin-top:.35rem}
.band .mark rect{fill:#fff}
.band .mark .mk{stroke:var(--band)}
@media (max-width:34rem){
  .band-in{flex-direction:column;gap:.9rem;padding:2rem 0 2.2rem}
  .band .mark{width:2rem;height:2rem;margin-top:0}
}

/* The manual's band: same surface, reference proportions. Its inner width
   follows the three-column shell rather than the overview's two. */
.band.slim .band-in{max-width:84rem;padding:1.5rem 0 1.7rem}
.band.slim h1{font-size:1.5rem;margin-bottom:.15rem}
.band.slim .tagline{font-size:.9375rem}
.band.slim .mark{width:2.1rem;height:2.1rem;margin-top:.15rem}
.band .tagline a{color:#fff}

/* ---------- three-column shell ---------- */
.shell{
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,48rem) var(--rail);
  justify-content:center;
  gap:2.5rem;max-width:100rem;margin:0 auto;padding:0 1.5rem;
  align-items:start;
}
/* The overview has no rail: nine sections is a page that needs one, four is a
   page that does not. */
.shell.duo{grid-template-columns:var(--sidebar) minmax(0,44rem)}

@media (max-width:64rem){
  .shell,.shell.duo{grid-template-columns:minmax(0,1fr);gap:0}
  .sidebar,.rail{position:static;max-height:none;border:0;padding:0}
  .rail{display:none}
  .sidebar{border-bottom:1px solid var(--rule);margin-bottom:1.75rem;padding:.35rem 0 .5rem}
  .sidebar-body{padding-bottom:.5rem}
}

.sidebar,.rail{
  position:sticky;top:3.4rem;max-height:calc(100vh - 4rem);
  overflow-y:auto;padding:1.75rem 0;font-size:.875rem;
}
.sidebar summary{
  cursor:pointer;padding:.55rem 0;
  font-size:.8125rem;font-weight:600;color:var(--ink-2);
}
.sidebar summary::marker{color:var(--ink-3)}
@media (min-width:64.0625rem){.sidebar summary{display:none}}
.sidebar h2,.rail h2{
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:1.4rem 0 .5rem;font-weight:600;
}
.sidebar h2:first-child,.rail h2:first-child{margin-top:0}
.sidebar ul,.rail ul{list-style:none;margin:0;padding:0}
.sidebar li,.rail li{margin:0}
.sidebar a,.rail a{
  display:block;padding:.22rem 0;color:var(--ink-2);text-decoration:none;
  border-left:2px solid transparent;padding-left:.7rem;margin-left:-.7rem;
}
.sidebar a:hover,.rail a:hover{color:var(--accent);text-decoration:underline}
.sidebar a.here,.rail a.here{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.rail a{font-size:.8125rem;color:var(--ink-3)}

/* ---------- content ---------- */
main{padding:2.25rem 0 5rem;min-width:0;max-width:46rem}
h1{
  font-size:2.125rem;line-height:1.2;font-weight:600;letter-spacing:-.01em;
  margin:0 0 .6rem;
}
.tagline{font-size:1rem;color:var(--ink-3);margin:0 0 1.6rem}
h2{
  font-size:1.5rem;line-height:1.25;font-weight:600;letter-spacing:-.005em;
  margin:3rem 0 .5rem;padding-top:1.4rem;border-top:1px solid var(--rule);
}
h3{font-size:1.125rem;line-height:1.35;font-weight:600;margin:2rem 0 .4rem}
h4{font-size:.9375rem;font-weight:600;margin:1.4rem 0 .3rem;color:var(--ink-2)}
h3.grp{font-size:.9375rem;color:var(--ink-2);margin:1.4rem 0 .3rem}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.4rem}
li{margin-bottom:.35rem}
li>ul,li>ol{margin-top:.35rem}
strong{font-weight:600}

code{
  font-family:var(--mono);font-size:.8125em;
  background:var(--ground-code);padding:.12em .35em;border-radius:3px;
  border:1px solid var(--rule);
}
pre{
  font-family:var(--mono);font-size:.8125rem;line-height:1.6;
  background:var(--ground-code);border:1px solid var(--rule);border-radius:4px;
  padding:.9rem 1rem;overflow-x:auto;margin:0 0 1.2rem;
}
pre code{background:none;border:0;padding:0;font-size:1em}
pre .c{color:var(--ink-3)}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:0 0 1.4rem;border:1px solid var(--rule);border-radius:4px}
table{border-collapse:collapse;width:100%;font-size:.875rem}
caption{
  text-align:left;padding:.6rem .8rem;font-size:.75rem;color:var(--ink-3);
  border-bottom:1px solid var(--rule);background:var(--ground-alt);
}
th,td{text-align:left;padding:.5rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{background:var(--ground-alt);font-size:.75rem;font-weight:600;color:var(--ink-2)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td code{font-size:.78em}

/* ---------- notes ---------- */
.n{
  border:1px solid var(--rule);border-left:4px solid var(--note);
  background:var(--note-bg);padding:.8rem 1rem;border-radius:0 4px 4px 0;margin:0 0 1.3rem;
}
.n.w{border-left-color:var(--warn);background:var(--warn-bg)}
.n.s{border-left-color:var(--stop);background:var(--stop-bg)}
.n>strong:first-child{display:block;font-size:.8125rem;color:var(--note);margin-bottom:.25rem}
.n.w>strong:first-child{color:var(--warn)}
.n.s>strong:first-child{color:var(--stop)}
.n p:last-child{margin-bottom:0}
.n p{font-size:.9375rem}

/* ---------- definition-style tool list ---------- */
.tools{margin:0 0 1.4rem;font-size:.8125rem;line-height:2}
.tools code{margin-right:.25rem}

dl.fields{margin:0 0 1.4rem}
dl.fields dt{font-family:var(--mono);font-size:.8125rem;font-weight:600;margin-top:.8rem}
dl.fields dd{margin:.1rem 0 0;color:var(--ink-2);font-size:.9375rem}

.steps{counter-reset:step;list-style:none;padding:0;margin:1.2rem 0 0}
.steps>li{
  counter-increment:step;position:relative;padding-left:2.4rem;margin-bottom:1.5rem;
}
.steps>li::before{
  content:counter(step);position:absolute;left:0;top:.05rem;
  width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--ground-alt);border:1px solid var(--rule-strong);
  color:var(--ink-2);font-size:.8125rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.steps>li>strong{display:block;margin-bottom:.2rem}
.steps p{font-size:.9375rem;margin-bottom:.5rem}

footer{
  border-top:1px solid var(--rule);margin-top:3.5rem;padding-top:1.4rem;
  font-size:.8125rem;color:var(--ink-3);
}
footer p{margin:0 0 .5rem}

/* ---------- browser surfaces ----------
   Selection, caret and scrollbar ship with defaults that belong to no design
   system. They are drawn from the palette like everything else. */
::selection{background:var(--accent);color:#fff}
::-moz-selection{background:var(--accent);color:#fff}
body{caret-color:var(--accent);scrollbar-color:var(--rule-strong) var(--ground)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:var(--rule-strong);border:3px solid var(--ground);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ---------- copy button ----------
   Injected by site.js, so a reader without scripting never sees a dead
   control. The label states the action, then states what happened. */
.cw{position:relative}
.cw > pre{padding-right:5rem}
.copy{
  position:absolute;top:.5rem;right:.5rem;
  font-family:var(--mono);font-size:.6875rem;line-height:1;
  padding:.4rem .55rem;cursor:pointer;
  color:var(--ink-3);background:var(--ground);
  border:1px solid var(--rule);border-radius:3px;
  transition:color .12s,border-color .12s,background .12s;
}
.cw:hover .copy{color:var(--ink-2);border-color:var(--rule-strong)}
.copy:hover,.copy:focus-visible{color:var(--accent);border-color:var(--accent)}
.copy[data-done]{color:var(--accent);border-color:var(--accent);background:var(--ground-alt)}

/* ---------- landing ---------- */
.solo{max-width:35rem;padding:2.25rem 0 5rem;min-width:0}
.lede{font-size:1.1875rem;line-height:1.5;color:var(--ink);margin:0 0 1.5rem}
.solo h2{margin-top:3rem}
.solo > h2:first-of-type{margin-top:2rem}
.solo pre{white-space:pre-wrap;overflow-wrap:break-word}

/* One line each, no bold lead-in, no explanatory second line. The list is
   scanned in a few seconds or it is not doing its job. */
.solo > pre{margin-top:1.4rem}
.fine{font-size:.875rem;color:var(--ink-3);margin:0 0 1rem}

/* ---------- icons ----------
   Lucide v1.34.0, ISC. Path data is verbatim; stroke width is set here rather
   than on each symbol, so every icon on the site carries one weight. */
.sprite{display:none}
.ic{
  width:1.25rem;height:1.25rem;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}

/* One register line per client. The label is not a heading: it names which
   line is yours, nothing more. */
.clients{display:grid;gap:.7rem;margin:0 0 1.2rem}
.client > span{
  display:block;font-family:var(--mono);font-size:.6875rem;
  color:var(--ink-3);margin-bottom:.25rem;
}
.client pre{margin:0}
.client .fine{margin:0}

.does{list-style:none;margin:0 0 1.5rem;padding:0}
.does li{display:flex;gap:.8rem;align-items:flex-start;padding:.4rem 0}
.does .ic{color:var(--accent);margin-top:.22rem}





/* ---------- template previews ----------
   Live iframes of the generated example pages rather than screenshots, so a
   change to a template shows here the next time the examples are rebuilt.
   No transform: the page renders at the column's own width, which is a real
   render at a real text size rather than a shrunken one. */
.tpl{margin:1.2rem 0 1.4rem;display:grid;gap:1.6rem}
.tpl figure{margin:0}
.tpl .frame{
  height:17rem;overflow:hidden;background:#fff;position:relative;
  border:1px solid var(--rule);border-radius:4px;
}
.tpl .frame::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3rem;
  background:linear-gradient(to bottom,transparent,#fff);pointer-events:none;
}
.tpl iframe{width:100%;height:17rem;border:0;display:block}
.tpl figcaption{margin-top:.6rem;font-size:.8125rem;color:var(--ink-3)}
.tpl figcaption b{color:var(--ink-2);font-family:var(--mono);font-size:.9em;font-weight:600}