/* ==========================================================================
   Documentation, in the poster system.

   The first version of this file styled the docs from trimmy.css: violet
   brand, Archivo display, soft shadows, hairline borders. The landing page
   runs a different system entirely (Impact display, 3px ink borders, hard
   offset shadows, paper ground, amber and lime and mint), so the two read as
   two different products, which is what they were.

   This is the docs rebuilt on the landing page's vocabulary. It consumes the
   --poster-* tokens declared in page.css and adds no palette of its own.

   Reading is a light job, so docs sit on paper. Where the landing page shouts,
   the docs speak: the poster devices are all here, just quieter, because a
   reference page that shouts is a reference page nobody finishes.
   ========================================================================== */

@import url("/assets/poster-tokens.css");

body{
  background-color:var(--poster-paper);
  background-image:var(--poster-grid-light);
  background-size:78rem 78rem;
  color:var(--poster-ink);
  font-family:var(--poster-body);
}

/* ---- shell -------------------------------------------------------------- */
.doc-shell{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:2.5rem; align-items:start; padding-block:2.5rem 5rem;
}
@media (min-width:64rem){ .doc-shell{ grid-template-columns:15rem minmax(0,1fr); gap:3.5rem; } }
@media (min-width:92rem){ .doc-shell{ grid-template-columns:15rem minmax(0,1fr) 13rem; } }

/* ---- left rail ---------------------------------------------------------- */
.doc-nav{ font-size:.9rem; }
@media (min-width:64rem){
  .doc-nav{ position:sticky; top:5.5rem; max-height:calc(100vh - 7rem); overflow-y:auto;
            padding-inline-end:.75rem; }
}
.doc-nav__group + .doc-nav__group{ margin-top:2rem; }
.doc-nav__title{
  font-family:var(--poster-body); font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--poster-ink-muted); margin:0 0 .75rem;
}
.doc-nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.doc-nav a{
  display:block; padding:.4rem .7rem; margin-inline-start:-.7rem;
  color:var(--poster-copy-dark); text-decoration:none;
  border:2px solid transparent; border-radius:.4rem; font-weight:500;
}
.doc-nav a:hover{ color:var(--poster-ink); background:var(--poster-paper-cell); }
/* The current page gets the poster block treatment: hard border, hard shadow,
   a colour fill. It is the one loud thing in the rail, which is the point. */
.doc-nav a[aria-current="page"]{
  color:var(--poster-ink); font-weight:700;
  background:var(--poster-amber);
  border-color:var(--poster-ink);
  box-shadow:.18rem .2rem 0 var(--poster-ink);
}

.doc-nav__toggle{ display:block; }
@media (min-width:64rem){ .doc-nav__toggle{ display:none; } }
.doc-nav__toggle summary{
  cursor:pointer; padding:.7rem 1rem; list-style:none;
  border:3px solid var(--poster-ink); border-radius:.45rem;
  background:var(--poster-paper); color:var(--poster-ink);
  font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:.8rem;
  box-shadow:.28rem .32rem 0 var(--poster-ink);
}
.doc-nav__toggle summary::-webkit-details-marker{ display:none; }
.doc-nav__toggle summary::after{ content:" \25BE"; }
.doc-nav__toggle[open] summary::after{ content:" \25B4"; }
.doc-nav__toggle > div{ padding-top:1.5rem; }

/* ---- prose -------------------------------------------------------------- */
.doc-body{ min-width:0; max-width:70ch; }
.doc-body > *:first-child{ margin-top:0; }

.doc-kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--poster-ink-muted); margin:0 0 1rem;
}
/* Impact, uppercase, tight. The landing page's h1, in a size a page of prose
   can live underneath. */
.doc-body h1{
  font-family:var(--poster-display); font-weight:400;
  font-size:clamp(2.4rem,2rem + 1.9vw,3.6rem); line-height:.94;
  letter-spacing:.005em; text-transform:uppercase;
  margin:0 0 1rem; text-wrap:balance; color:var(--poster-ink);
}
.doc-lede{
  font-size:clamp(1.05rem,1rem + .3vw,1.25rem); color:var(--poster-copy-dark);
  margin:0 0 1.75rem; line-height:1.55; text-wrap:pretty; max-width:60ch;
}

.doc-body h2{
  font-family:var(--poster-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.5rem,1.35rem + .6vw,1.95rem); line-height:1.05;
  letter-spacing:.01em; margin:3rem 0 1rem; scroll-margin-top:5.5rem;
  color:var(--poster-ink);
}
/* A short rule under every h2, in the poster's own ink. Cheap, and it makes a
   long reference page scannable without introducing another colour. */
.doc-body h2::after{
  content:""; display:block; inline-size:2.5rem; block-size:3px;
  background:var(--poster-ink); margin-top:.55rem;
}
.doc-body h3{
  font-weight:700; font-size:1.05rem; line-height:1.35;
  letter-spacing:.02em; margin:2rem 0 .75rem; scroll-margin-top:5.5rem;
}
.doc-body p{ margin:0 0 1rem; line-height:1.68; color:var(--poster-copy-dark);
             text-wrap:pretty; }
.doc-body ul, .doc-body ol{ margin:0 0 1rem; padding-inline-start:1.35em;
                            color:var(--poster-copy-dark); }
.doc-body li{ margin-bottom:.5rem; line-height:1.62; }
.doc-body li > ul, .doc-body li > ol{ margin-top:.5rem; }
.doc-body strong{ font-weight:700; color:var(--poster-ink); }
.doc-body a{ color:var(--poster-violet-dark); font-weight:500;
             text-underline-offset:.18em; }
.doc-body a:hover{ color:var(--poster-ink); background:var(--poster-amber); }

.doc-body :not(pre) > code{
  font:400 .88em/1.4 var(--font-mono);
  background:var(--poster-paper-cell); color:var(--poster-ink);
  border:1px solid var(--poster-paper-deep);
  padding:.1em .36em; border-radius:.25rem; overflow-wrap:anywhere;
}
/* Code is the one place the docs go dark, the way the landing page's hero
   does. It separates what you read from what you paste. */
.doc-body pre{
  background:var(--poster-ink); color:var(--poster-paper);
  border:3px solid var(--poster-ink); border-radius:var(--poster-cell-radius);
  box-shadow:.32rem .36rem 0 var(--poster-violet);
  padding:1.25rem 1.4rem; overflow-x:auto; margin:0 0 1.75rem;
  font:400 .875rem/1.65 var(--font-mono);
}
.doc-body pre code{ background:none; border:0; padding:0; white-space:pre;
                    color:inherit; }

.doc-table{
  overflow-x:auto; margin:0 0 1.75rem;
  border:3px solid var(--poster-ink); border-radius:var(--poster-cell-radius);
  box-shadow:.32rem .36rem 0 var(--poster-ink);
  background:var(--poster-paper);
}
.doc-body table{ border-collapse:collapse; width:100%; font-size:.9rem; }
.doc-body th, .doc-body td{
  text-align:start; padding:.7rem .95rem; vertical-align:top;
  border-bottom:1px solid var(--poster-paper-deep);
}
.doc-body thead th{
  background:var(--poster-ink); color:var(--poster-paper);
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; border-bottom:0;
}
.doc-body tbody tr:last-child td{ border-bottom:0; }
.doc-body tbody tr:hover{ background:var(--poster-paper-cell); }

.doc-body blockquote{
  margin:0 0 1.75rem; padding:1rem 1.25rem;
  background:var(--poster-paper-cell);
  border:3px solid var(--poster-ink); border-radius:var(--poster-cell-radius);
  box-shadow:.32rem .36rem 0 var(--poster-mint);
  color:var(--poster-copy-dark);
}
.doc-body blockquote p:last-child{ margin-bottom:0; }
.doc-body hr{ border:0; border-top:3px solid var(--poster-ink); margin:3rem 0; }

/* ---- right rail --------------------------------------------------------- */
.doc-toc{ display:none; }
@media (min-width:92rem){ .doc-toc{ display:block; position:sticky; top:5.5rem; font-size:.85rem; } }
.doc-toc ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.doc-toc a{ color:var(--poster-ink-muted); text-decoration:none; display:block;
            line-height:1.4; border-inline-start:2px solid var(--poster-paper-deep);
            padding-inline-start:.7rem; }
.doc-toc a:hover{ color:var(--poster-ink); border-inline-start-color:var(--poster-ink); }

/* ---- notices ------------------------------------------------------------ */
.doc-testnet{
  display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap;
  background:var(--poster-amber); color:var(--poster-ink);
  border:3px solid var(--poster-ink); border-radius:var(--poster-cell-radius);
  box-shadow:.32rem .36rem 0 var(--poster-ink);
  padding:.75rem 1rem; margin:0 0 2rem; font-size:.9rem; font-weight:500;
}
.doc-testnet b{ font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

.doc-skill{
  display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap;
  background:var(--poster-paper-cell); color:var(--poster-copy-dark);
  border:2px dashed var(--poster-ink-muted); border-radius:var(--poster-cell-radius);
  padding:.75rem 1rem; margin:0 0 2rem; font-size:.85rem;
}
.doc-skill b{ color:var(--poster-ink); }
.doc-skill a{ color:var(--poster-violet-dark); font-weight:600; }

.doc-foot{
  margin-top:3.5rem; padding-top:1.75rem; border-top:3px solid var(--poster-ink);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  align-items:center; font-size:.85rem; color:var(--poster-ink-muted);
}
.doc-foot a{ color:var(--poster-violet-dark); text-decoration:none; font-weight:600; }
.doc-foot a:hover{ background:var(--poster-amber); color:var(--poster-ink); }
.doc-foot__md code{ font-family:var(--font-mono); }

/* ---- page actions ------------------------------------------------------- */
.page-actions{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:0 0 1.75rem; padding-bottom:1.5rem;
  border-bottom:1px solid var(--poster-paper-deep);
}
.page-act{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .7rem; border-radius:.4rem;
  border:2px solid var(--poster-ink); background:var(--poster-paper);
  color:var(--poster-ink); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; font-family:var(--poster-body);
  transition:transform var(--poster-fast) var(--poster-ease),
             box-shadow var(--poster-fast) var(--poster-ease),
             background-color var(--poster-fast) var(--poster-ease);
}
.page-act:hover{
  background:var(--poster-lime);
  box-shadow:.2rem .22rem 0 var(--poster-ink); transform:translate(-1px,-1px);
}
.page-act svg{ inline-size:13px; block-size:13px; fill:none; stroke:currentColor;
               stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---- figures ------------------------------------------------------------ */
.doc-fig{ position:relative; margin:0 0 1.75rem; display:grid; gap:.75rem; }
.doc-fig img{
  display:block; width:100%; height:auto; background:#FFFFFF;
  border:3px solid var(--poster-ink); border-radius:var(--poster-cell-radius);
  box-shadow:.32rem .36rem 0 var(--poster-blue);
  padding:1.25rem; cursor:zoom-in;
}
.doc-fig figcaption{
  font-size:.85rem; color:var(--poster-ink-muted); line-height:1.5;
  padding-inline-start:.15rem;
}
.doc-fig__acts{
  position:absolute; inset-block-start:.7rem; inset-inline-end:.7rem;
  display:flex; gap:.4rem; z-index:2;
  opacity:0; transition:opacity var(--poster-panel) var(--poster-ease);
}
@media (hover:none){ .doc-fig__acts{ opacity:1; } }
.doc-fig:hover .doc-fig__acts, .doc-fig:focus-within .doc-fig__acts{ opacity:1; }
.doc-fig__btn{
  display:grid; place-items:center; inline-size:32px; block-size:32px;
  border:2px solid var(--poster-ink); border-radius:.35rem;
  background:var(--poster-paper); color:var(--poster-ink);
  cursor:pointer; padding:0; text-decoration:none;
}
.doc-fig__btn:hover{ background:var(--poster-amber);
                     box-shadow:.16rem .18rem 0 var(--poster-ink); }
.doc-fig__btn svg{ inline-size:17px; block-size:17px; fill:none; stroke:currentColor;
                   stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---- the full-screen viewer -------------------------------------------- */
.figview{
  position:fixed; inset:0; z-index:200;
  background:color-mix(in srgb, var(--poster-ink) 97%, transparent);
  backdrop-filter:blur(3px);
  display:grid; grid-template-rows:auto 1fr auto;
}
.figview[hidden]{ display:none; }
.figview__bar{
  display:flex; gap:1.5rem; align-items:center; justify-content:space-between;
  padding:1rem 1.5rem; border-bottom:1px solid var(--poster-line-strong);
}
.figview__cap{ margin:0; color:var(--poster-paper); font-size:.9rem; }
.figview__acts{ display:flex; gap:.75rem; flex:none; }
.figview__btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem; border-radius:.4rem;
  border:2px solid var(--poster-paper); background:transparent;
  color:var(--poster-paper); font:700 .75rem/1 var(--poster-body);
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; text-decoration:none;
}
.figview__btn:hover{ background:var(--poster-amber); color:var(--poster-ink);
                     border-color:var(--poster-amber); }
.figview__btn svg{ inline-size:15px; block-size:15px; fill:none; stroke:currentColor;
                   stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.figview__stage{ overflow:hidden; display:grid; place-items:center;
                 cursor:grab; touch-action:none; padding:1.5rem; }
.figview__stage.is-dragging{ cursor:grabbing; }
.figview__stage img{
  max-inline-size:min(1400px,94vw); inline-size:auto;
  background:#FFFFFF; border:3px solid var(--poster-paper);
  border-radius:var(--poster-cell-radius); padding:1.75rem;
  transform-origin:center center; will-change:transform;
  user-select:none; -webkit-user-drag:none;
}
.figview__hint{
  margin:0; padding:.75rem 1.5rem 1.5rem; text-align:center;
  color:var(--poster-muted); font-size:.75rem;
  letter-spacing:.08em; text-transform:uppercase;
}

/* ---- accessibility ------------------------------------------------------ */
.skip{
  position:absolute; left:1rem; top:1rem; z-index:100; transform:translateY(-200%);
  background:var(--poster-amber); color:var(--poster-ink);
  padding:.7rem 1.2rem; border:3px solid var(--poster-ink); border-radius:.45rem;
  text-decoration:none; font-weight:700;
}
.skip:focus{ transform:translateY(0); }
:where(.doc-body, .doc-nav, .page-actions) :focus-visible{
  outline:3px solid var(--poster-violet); outline-offset:2px;
}

/* ---- chrome -------------------------------------------------------------
   The landing page's header lives in page.css alongside its poster layout, so
   the docs declare their own. Same shapes, paper ground instead of ink. */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--poster-paper) 92%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:3px solid var(--poster-ink);
}
.site-header .nav{ display:flex; align-items:center; gap:2rem; padding-block:.9rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
        color:var(--poster-ink); flex:none; }
.brand__word{ font-family:var(--poster-display); font-weight:400; font-size:1.35rem;
              text-transform:uppercase; letter-spacing:.02em; }
.nav__links{ display:none; gap:1.6rem; margin-inline-start:auto; }
.nav__links a{ color:var(--poster-copy-dark); text-decoration:none; font-size:.82rem;
               font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.nav__links a:hover{ color:var(--poster-ink); }
.nav__links a[aria-current="page"]{ color:var(--poster-ink);
  box-shadow:inset 0 -.35em 0 var(--poster-amber); }
.nav__end{ display:flex; align-items:center; gap:.75rem; margin-inline-start:auto; }
@media (min-width:64rem){ .nav__links{ display:flex; } .nav__end{ margin-inline-start:0; } }
.nav__cta{
  display:inline-flex; align-items:center; padding:.55rem 1rem;
  border:3px solid var(--poster-ink); border-radius:.45rem;
  background:var(--poster-violet); color:var(--poster-paper);
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  box-shadow:.24rem .28rem 0 var(--poster-ink);
  transition:transform var(--poster-fast) var(--poster-ease),
             box-shadow var(--poster-fast) var(--poster-ease);
}
.nav__cta:hover{ transform:translate(-1px,-1px); box-shadow:.34rem .38rem 0 var(--poster-ink); }

.site-footer{
  border-top:3px solid var(--poster-ink); background:var(--poster-paper-2);
  padding-block:2rem; margin-top:5rem;
}
.site-footer p{ margin:0; color:var(--poster-ink-muted); font-size:.85rem; }
.site-footer a{ color:var(--poster-violet-dark); text-decoration:none; font-weight:600; }
.site-footer a:hover{ background:var(--poster-amber); color:var(--poster-ink); }
.t-sm{ font-size:.85rem; }
.dim{ color:var(--poster-ink-muted); }