/* Generated by scripts/site/build.mjs from docs-inline.css + site.css — edit those, not this file. */
/* Styles the old single docs page carried inline, kept for the fragments' tables, chains and figures. */
/* Documentation-specific styles */
      .docs-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1em 0 1.5em 0;
        font-size: 0.92em;
      }
      .docs-table th,
      .docs-table td {
        text-align: left;
        padding: 0.6em 1em;
        border-bottom: 1px solid var(--base-alt);
      }
      .docs-table th {
        font-weight: 600;
        color: var(--additional);
        white-space: nowrap;
      }
      .docs-table tr:last-child td {
        border-bottom: none;
      }
      .docs-node-name {
        font-weight: 600;
        color: var(--bright);
      }
      .docs-type {
        font-family: monospace;
        font-size: 0.88em;
        color: var(--additional);
        background: var(--base-alt);
        padding: 0.15em 0.5em;
        border-radius: 4px;
        white-space: nowrap;
      }
      .docs-chain-flow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5em;
        margin: 1em 0;
        font-size: 0.95em;
        font-weight: 500;
        color: var(--bright);
      }
      .docs-chain-flow .chain-arrow {
        color: var(--additional);
        font-size: 1.1em;
      }
      .docs-chain-flow .chain-node {
        background: var(--base-alt);
        padding: 0.3em 0.8em;
        border-radius: 6px;
      }
      .docs-section-intro {
        margin-bottom: 1.5em;
        line-height: 1.7;
      }
      .docs-section-intro p {
        margin-bottom: 0.8em;
      }
      .mxd-accordion__content .docs-table {
        margin-top: 0.5em;
      }
      .docs-category-count {
        font-size: 0.85em;
        color: var(--muted);
        font-weight: 400;
      }
      .docs-workflow-desc {
        line-height: 1.7;
        margin-top: 0.5em;
      }
      .docs-workflow-desc p {
        margin-bottom: 0.8em;
      }
      /* Screenshot placeholder — author drops an image at the indicated
         path and can optionally replace the placeholder with an <img>. */
      .docs-fig {
        display: block;
        margin: 1.2em 0 1.8em;
        padding: 1.4em 1.2em;
        background: var(--base-alt);
        border: 1px dashed var(--additional);
        border-radius: 8px;
        font-size: 0.88em;
        line-height: 1.55;
        color: var(--muted);
      }
      .docs-fig .docs-fig__num {
        display: inline-block;
        padding: 0.1em 0.6em;
        margin-right: 0.6em;
        background: var(--additional);
        color: var(--base);
        font-weight: 600;
        border-radius: 4px;
        letter-spacing: 0.04em;
      }
      .docs-fig .docs-fig__caption {
        display: block;
        margin-top: 0.6em;
        color: var(--bright);
        font-weight: 500;
      }
      .docs-fig .docs-fig__path {
        font-family: monospace;
        font-size: 0.9em;
        color: var(--additional);
        background: var(--base);
        padding: 0.1em 0.5em;
        border-radius: 3px;
      }
      .docs-fig img {
        display: block;
        width: 100%;
        border-radius: 6px;
        margin-bottom: 0.6em;
      }

/* ---------------------------------------------------------------------------
   Styles for the generated pages (docs, examples, legal) on top of the
   template's main.css. Built into public/css/docs.css by scripts/site/build.mjs
   together with docs-inline.css (the former inline styles of docs.html) and
   the .gf- rules the landing page defines for its example cards.
   --------------------------------------------------------------------------- */

.docs-body { font-size: 1.7rem; line-height: 1.65; color: var(--t-medium); }
.docs-body > *:first-child { margin-top: 0; }
.docs-body h2 { font: normal var(--fw-medium) clamp(2.4rem, 2.6vw, 3.2rem)/1.2 var(--_font-accent); letter-spacing: -0.02rem; color: var(--t-bright); margin: 4.8rem 0 1.4rem; scroll-margin-top: 10rem; }
.docs-body h2:first-child { margin-top: 0; }
.docs-body h3 { font: normal var(--fw-medium) 2.1rem/1.3 var(--_font-accent); color: var(--t-bright); margin: 3rem 0 1rem; }
.docs-body h4 { font-size: 1.7rem; font-weight: var(--fw-medium); color: var(--t-bright); margin: 2.4rem 0 .8rem; }
.docs-body p, .docs-body .mxd-accordion__text { margin: 0 0 1.4rem; }
.docs-body ul, .docs-body ol { margin: 0 0 1.6rem 2.2rem; }
.docs-body li { margin: 0 0 .5rem; }
.docs-body a { color: var(--t-bright); text-decoration: underline; text-decoration-color: var(--gf-line, currentColor); text-underline-offset: .2em; }
.docs-body a:hover { text-decoration-color: currentColor; }
.docs-body code { font-size: .9em; padding: .1em .4em; border-radius: .4em; background: var(--base-tint); }
.docs-body .docs-table { margin: 1.2rem 0 2.4rem; }
.docs-body .docs-chain-flow { margin: 1.2rem 0; }
.docs-body .docs-workflow-desc { margin-top: 1.6rem; }
.docs-body img { max-width: 100%; height: auto; border-radius: 1.2rem; }
.docs-body strong { color: var(--t-bright); font-weight: var(--fw-medium); }

.docs-lead { font-size: 2rem; line-height: 1.55; color: var(--t-bright); margin: 0 0 3.2rem; }
.docs-intro { font-size: 1.8rem; line-height: 1.6; color: var(--t-medium); margin: 0 0 3.2rem; max-width: 80rem; }

.docs-crumbs { font-size: 1.4rem; color: var(--t-muted); margin: 0 0 1.6rem; }
.docs-crumbs a { color: inherit; }
.docs-crumbs span { margin: 0 .5em; }

.docs-side { position: sticky; top: 9rem; padding-right: 2rem; }
.docs-side p { font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); margin: 0 0 1rem; }
.docs-side a { display: block; font-size: 1.45rem; line-height: 1.4; color: var(--t-medium); padding: .35rem 0; }
.docs-side a:hover, .docs-side a.is-current { color: var(--t-bright); }
@media (max-width: 1199px) { .docs-side { position: static; margin-bottom: 3rem; } }

.docs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 1.6rem; margin: 0 0 4rem; }
.docs-card { display: block; padding: 2rem 2.2rem 2.2rem; border-radius: 1.8rem; background: var(--base-tint); border: 1px solid var(--gf-line); color: inherit; text-decoration: none; transition: transform .25s ease, border-color .25s ease; }
.docs-card:hover { transform: translateY(-2px); border-color: var(--t-muted); }
.docs-card h3 { font: normal var(--fw-medium) 1.9rem/1.3 var(--_font-accent); color: var(--t-bright); margin: 0 0 .6rem; }
.docs-card p { font-size: 1.45rem; line-height: 1.5; color: var(--t-medium); margin: 0; }
.docs-card .docs-card__meta { display: block; font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); margin-bottom: .8rem; }

.docs-section-title { font: normal var(--fw-medium) 2.4rem/1.2 var(--_font-accent); color: var(--t-bright); margin: 4.8rem 0 .6rem; }
.docs-section-title:first-child { margin-top: 0; }
.docs-section-blurb { font-size: 1.6rem; color: var(--t-muted); margin: 0 0 2rem; }

.docs-pager { display: flex; justify-content: space-between; gap: 2rem; margin-top: 6rem; padding-top: 2.4rem; border-top: 1px solid var(--gf-line); font-size: 1.5rem; }
.docs-pager a { color: var(--t-medium); max-width: 46%; }
.docs-pager a:hover { color: var(--t-bright); }
.docs-pager small { display: block; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); margin-bottom: .3rem; }
.docs-pager .next { text-align: right; margin-left: auto; }

.docs-cta { margin: 4.8rem 0 0; padding: 3.2rem; border-radius: 2.4rem; background: var(--base-tint); border: 1px solid var(--gf-line); }
.docs-cta p { font-size: 1.9rem; line-height: 1.5; color: var(--t-bright); margin: 0 0 1.8rem; }
.docs-cta .btn + .btn { margin-left: 1rem; }
.docs-cta small { display: block; margin-top: 1.4rem; font-size: 1.4rem; color: var(--t-muted); }

/* Example study pages */
.study-figure { margin: 0 0 3.2rem; }
.study-figure .gf-piece__paper { height: auto; min-height: 22rem; }
.study-figure figcaption { font-size: 1.4rem; color: var(--t-muted); margin-top: 1rem; }
.study-shot { margin: 0 0 3.2rem; }
.study-shot img { width: 100%; border-radius: 1.6rem; border: 1px solid var(--gf-line); }
.study-facts { display: flex; flex-wrap: wrap; gap: .8rem 2.4rem; font-size: 1.45rem; color: var(--t-muted); margin: 0 0 2.4rem; }
.study-facts strong { color: var(--t-bright); font-weight: var(--fw-medium); }
.study-nodes { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 3.2rem; padding: 0; list-style: none; }
.study-nodes li a, .study-nodes li span { display: inline-block; font-size: 1.4rem; padding: .5rem 1.2rem; border-radius: 10rem; border: 1px solid var(--gf-line); color: var(--t-medium); text-decoration: none; }
.study-nodes li a:hover { color: var(--t-bright); border-color: var(--t-muted); }

/* Example index cards reuse the landing's .gf-piece; keep them readable on their own page */
.gf-piece a.gf-piece__link { color: inherit; text-decoration: none; }
.gf-piece a.gf-piece__link:hover .gf-h3 { text-decoration: underline; text-underline-offset: .15em; }
.gf-piece__paper--empty { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--t-muted); }

/* ---- Example cards, as the landing page styles them (kept in step by hand) ---- */
:root { --gf-paper: #FAF7F6; --gf-line: rgba(255, 255, 255, 0.14); }
@media (prefers-color-scheme: light) { :root { --gf-paper: #FFFFFF; --gf-line: rgba(22, 22, 22, 0.14); } }
[color-scheme=dark] { --gf-paper: #FAF7F6; --gf-line: rgba(255, 255, 255, 0.14); }
[color-scheme=light] { --gf-paper: #FFFFFF; --gf-line: rgba(22, 22, 22, 0.14); }
.gf-pad { padding: 0 1.5rem; }
.gf-eyebrow { font-size: 1.4rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 1.2rem; }
.gf-h3 { font: normal var(--fw-medium) 2.6rem/1.2 var(--_font-accent); letter-spacing: -0.02rem; color: var(--t-bright); margin: 0 0 1rem; }
.gf-pieces { display: grid; grid-template-columns: 1fr; gap: 3rem; margin: 0 0 4rem; }
@media (min-width: 768px) { .gf-pieces { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1400px) { .gf-pieces { grid-template-columns: 1fr 1fr 1fr; } }
.gf-piece { display: flex; flex-direction: column; margin: 0; padding: 1.2rem 1.2rem 2.8rem; border-radius: 2.4rem; background: var(--base-tint); border: 1px solid var(--gf-line); }
.gf-piece__paper { display: flex; align-items: center; justify-content: center; height: 24rem; padding: 2rem 2.4rem; border-radius: 1.4rem; background: var(--gf-paper); }
.gf-piece__paper img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gf-piece figcaption { padding: 2.4rem 1.8rem 0; }
.gf-piece figcaption p { font-size: 1.6rem; line-height: 1.5; color: var(--t-medium); }
.gf-more { margin-top: 4rem; font-size: 1.7rem; line-height: 1.6; color: var(--t-medium); max-width: 90rem; }
.gf-more em { font-style: normal; color: var(--t-bright); }