/* ============================================================
   Nest documentation stylesheet
   ------------------------------------------------------------
   Brand palette taken from frontend/libs/tailwind-preset and
   apps/home/src/scss/core/_variables.scss. Editorial / archival
   aesthetic: cream paper, dark-teal ink, warm orange accent.
   ============================================================ */

/* --- Brand tokens (RGB triplets, mirroring the Tailwind preset) --- */
:root {
  --nest-secondary:        68 96 111;     /* #44606F */
  --nest-secondary-light:  88 115 130;    /* #587382 */
  --nest-tertiary:         255 251 243;   /* #FFFBF3 — page paper */
  --nest-tertiary-dark:    252 241 211;   /* #FCF1D3 — warm cream */
  --nest-active:           190 111 60;    /* #BE6F3C — accent */
  --nest-active-light:     205 139 96;    /* #CD8B60 */
  --nest-black:            52 51 50;      /* #343332 */
  --nest-white:            255 255 255;
  --nest-icon:             178 216 223;   /* #B2D8DF */

  --nest-error:            202 78 78;
  --nest-warning:          191 65 54;
  --nest-warning-light:    202 79 68;

  --nest-action-done:      95 121 56;     /* olive */
  --nest-action-pending:   240 173 78;    /* amber */
  --nest-action-waiting:   92 147 195;    /* blue */
  --nest-action-inactive:  196 191 196;
  --nest-action-required:  202 78 78;

  /* Semantic aliases used throughout this stylesheet */
  --paper:        rgb(var(--nest-tertiary));
  --paper-warm:   rgb(var(--nest-tertiary-dark));
  --ink:          rgb(var(--nest-black));
  --ink-soft:     rgb(var(--nest-black) / 0.7);
  --ink-muted:    rgb(var(--nest-black) / 0.55);
  --ink-faint:    rgb(var(--nest-black) / 0.32);
  --hairline:     rgb(var(--nest-secondary) / 0.18);
  --hairline-soft: rgb(var(--nest-secondary) / 0.10);
  --teal:         rgb(var(--nest-secondary));
  --teal-light:   rgb(var(--nest-secondary-light));
  --accent:       rgb(var(--nest-active));
  --accent-light: rgb(var(--nest-active-light));
  --tint:         rgb(var(--nest-active) / 0.08);
  --tint-warm:    rgb(var(--nest-tertiary-dark) / 0.6);

  --ok:           rgb(var(--nest-action-done));
  --ok-tint:      rgb(var(--nest-action-done) / 0.10);
  --warn:         rgb(var(--nest-action-pending));
  --warn-tint:    rgb(var(--nest-action-pending) / 0.14);
  --info:         rgb(var(--nest-action-waiting));
  --info-tint:    rgb(var(--nest-action-waiting) / 0.12);
  --danger:       rgb(var(--nest-error));
  --danger-tint:  rgb(var(--nest-error) / 0.10);

  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'Overpass', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 68ch;
  --shell-max: 1240px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Spacing scale — use for new components. Existing components keep their
     hand-tuned values; this scale is the default for anything new. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Anchor-jump offset so sticky topbar doesn't cover the target heading. */
  --topbar-h: 64px;
}

/* --- Reset / base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-feature-settings: 'ss01', 'cv11';
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  /* Subtle paper grain — single inline SVG noise, very low opacity */
  background-image:
    radial-gradient(ellipse 80% 60% at 12% -5%, rgb(var(--nest-tertiary-dark) / 0.55), transparent 60%),
    radial-gradient(ellipse 70% 50% at 95% 0%, rgb(var(--nest-icon) / 0.18), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0.025 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
  background-repeat: no-repeat, no-repeat, repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--nest-active) / 0.22); color: var(--ink); }

img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* --- Top bar ------------------------------------------------------- */
.doc-topbar {
  border-bottom: 1px solid var(--hairline);
  background: rgb(var(--nest-tertiary) / 0.8);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.doc-topbar__inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.doc-topbar__brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}
.doc-topbar__brand:hover { text-decoration: none; }
.doc-topbar__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--teal);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.doc-topbar__crumb {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  font-weight: 500;
}
.doc-topbar__back {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--teal);
  font-weight: 500;
}

/* --- Search (Pagefind UI in the topbar) --------------------------- */
.doc-search {
  flex: 1 1 220px;
  max-width: 360px;
  min-width: 0;
  --pagefind-ui-scale: 0.8;
  --pagefind-ui-primary: var(--teal);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: rgb(var(--nest-white) / 0.92);
  --pagefind-ui-border: var(--hairline);
  --pagefind-ui-tag: var(--tint);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 10px;
  --pagefind-ui-image-border-radius: 6px;
  --pagefind-ui-image-box-ratio: 4 / 3;
  --pagefind-ui-font: var(--font-body);
}
.doc-search .pagefind-ui__search-input {
  font-family: var(--font-body);
  font-size: 14px;
}
/* Pagefind anchors the drawer to its form (position:relative) which sits in
   the 360px-wide search box. Center the wider drawer horizontally under the
   search input via left:50% + translate. */
.doc-search .pagefind-ui__drawer {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 2 * var(--gutter)));
  margin-top: 6px;
  background: rgb(var(--nest-white));
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgb(var(--nest-secondary) / 0.18);
  padding: 12px 14px;
  z-index: 12;
}
/* Pagefind reserves a square for a result image; we don't ship any, so hide
   the placeholder so result text sits flush-left in the drawer. */
.doc-search .pagefind-ui__result-thumb {
  display: none;
}
.doc-search .pagefind-ui__result-title a {
  color: var(--accent);
  text-decoration: none;
}
.doc-search .pagefind-ui__result-title a:hover {
  text-decoration: underline;
}
.doc-search .pagefind-ui__result-excerpt mark {
  background: var(--tint);
  color: var(--ink);
  padding: 0 2px;
  border-radius: 2px;
}
@media (max-width: 720px) {
  .doc-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
}

/* --- Page shell / layout ------------------------------------------ */
.doc-shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.doc-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 56px;
  margin: 56px auto 96px;
}
@media (max-width: 960px) {
  .doc-layout { grid-template-columns: 1fr; gap: 16px; }
}

.doc-page-header {
  padding-top: 56px;
  max-width: 880px;
}

.doc-measure {
  max-width: 68ch;
}

.doc-section--spaced {
  margin-top: 72px;
}

.doc-soft {
  opacity: 0.7;
}

.doc-home-main {
  padding: clamp(56px, 10vh, 120px) 0 80px;
  max-width: 1080px;
}

/* --- Hero / title block ------------------------------------------- */
.doc-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.doc-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.doc-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--teal);
  margin: 0 0 18px;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.doc-title em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.doc-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 8px;
}
.doc-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding-top: 24px;
  margin-top: 28px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.doc-meta span { display: inline-flex; align-items: center; gap: 8px; }
.doc-meta span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

/* --- Sidebar / table of contents ---------------------------------- */
.doc-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  font-size: 13px;
  padding-right: 8px;
}
.doc-toc::-webkit-scrollbar { width: 6px; }
.doc-toc::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }
.doc-toc__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin: 0 0 14px;
  font-weight: 500;
}
.doc-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
  border-left: 1px solid var(--hairline);
}
.doc-toc li { counter-increment: toc; }
.doc-toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0 6px 16px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.35;
  transition: color 120ms ease, border-color 120ms ease;
}
.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.doc-toc a:hover {
  color: var(--accent);
  border-left-color: var(--accent);
  text-decoration: none;
}
@media (max-width: 960px) {
  .doc-toc { position: static; max-height: none; border-bottom: 1px solid var(--hairline); padding-bottom: 16px; }
}

/* --- Main typography ---------------------------------------------- */
.doc-main {
  min-width: 0;
  background: rgb(var(--nest-white));
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 48px 56px;
  box-shadow: 0 1px 0 rgb(var(--nest-secondary) / 0.04),
              0 18px 40px -32px rgb(var(--nest-secondary) / 0.35);
}
@media (max-width: 960px) {
  .doc-main { padding: 32px 24px; }
}
.doc-main p,
.doc-main ul,
.doc-main ol {
  max-width: var(--measure);
}
.doc-main p { margin: 0 0 18px; }
.doc-main ul,
.doc-main ol { padding-left: 22px; margin: 0 0 22px; }
.doc-main li { margin-bottom: 8px; }
.doc-main li::marker { color: var(--accent); }

/* H2 — numbered hairline section header */
.doc-section {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--teal);
  margin: 80px 0 18px;
  padding-top: 28px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 18px;
}
.doc-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hairline);
}
.doc-section .doc-section__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  align-self: center;
  padding-top: 4px;
}
.doc-section + p::first-letter,
.doc-section + .doc-section__lede::first-letter {
  /* Reserved hook for drop caps — opted-in by adding .has-dropcap to the paragraph */
}
.has-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  float: left;
  font-size: 3.6em;
  line-height: 0.95;
  padding: 6px 12px 0 0;
  color: var(--accent);
}

.doc-h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: -0.005em;
  color: var(--teal);
  margin: 36px 0 8px;
}
.doc-h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin: 26px 0 6px;
  font-weight: 500;
}

/* --- Inline elements ---------------------------------------------- */
.doc-code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--tint-warm);
  border: 1px solid var(--hairline-soft);
  border-radius: 3px;
  padding: 0 5px;
  color: var(--teal);
}
kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 1px 6px;
  box-shadow: 0 1px 0 rgb(var(--nest-secondary) / 0.12);
}

/* --- Code blocks --------------------------------------------------- */
.doc-pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  background: rgb(var(--nest-secondary) / 0.04);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 14px 0 24px;
  overflow-x: auto;
  color: var(--ink);
  max-width: var(--measure);
  position: relative;
}
.doc-pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.doc-pre .kw   { color: rgb(var(--nest-secondary)); font-weight: 600; }
.doc-pre .type { color: var(--accent); }
.doc-pre .str  { color: rgb(var(--nest-action-done)); }
.doc-pre .com  { color: var(--ink-faint); font-style: italic; }
.doc-pre .ann  { color: var(--warn); }
.doc-pre .num  { color: var(--accent-light); }

/* --- Callouts ------------------------------------------------------ */
.doc-callout {
  position: relative;
  margin: 22px 0;
  padding: 18px 22px 18px 26px;
  background: var(--tint-warm);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  max-width: var(--measure);
}
.doc-callout::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.doc-callout__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--accent);
  display: block;
  margin-bottom: 6px;
}
.doc-callout p:last-child { margin-bottom: 0; }
.doc-callout > ul,
.doc-callout > ol { margin: 6px 0 0; }
.doc-callout.is-tip       { background: var(--ok-tint); }
.doc-callout.is-tip::before  { background: var(--ok); }
.doc-callout.is-tip .doc-callout__label { color: var(--ok); }
.doc-callout.is-warn      { background: var(--warn-tint); }
.doc-callout.is-warn::before { background: var(--warn); }
.doc-callout.is-warn .doc-callout__label { color: rgb(var(--nest-warning)); }
.doc-callout.is-note      { background: var(--info-tint); }
.doc-callout.is-note::before { background: var(--info); }
.doc-callout.is-note .doc-callout__label { color: var(--info); }
.doc-callout.is-danger    { background: var(--danger-tint); }
.doc-callout.is-danger::before { background: var(--danger); }
.doc-callout.is-danger .doc-callout__label { color: var(--danger); }

/* --- Q&A blocks (details/summary inside .doc-callout.is-note) ----- */
.doc-qa-group > .doc-qa + .doc-qa { margin-top: 12px; }
.doc-qa > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.doc-qa > summary::-webkit-details-marker { display: none; }
.doc-qa > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--info);
  transition: transform 0.15s ease;
}
.doc-qa[open] > summary::before { transform: rotate(90deg); }
.doc-qa > p:first-of-type { margin-top: 10px; }

/* Pull quote — editorial flourish for major callouts */
.doc-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--teal);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 24px 0;
  margin: 32px 0;
  max-width: var(--measure);
  position: relative;
}
.doc-pullquote::before {
  content: '“';
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.7;
  color: var(--accent);
  position: absolute;
  top: -2px;
  left: -42px;
  opacity: 0.35;
}
@media (max-width: 720px) {
  .doc-pullquote::before { display: none; }
}

/* --- Pills / status badges ---------------------------------------- */
.doc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--tint-warm);
  color: var(--ink-soft);
  border: 1px solid var(--hairline-soft);
  white-space: nowrap;
}
.doc-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.doc-pill.is-ok      { background: var(--ok-tint);     color: var(--ok); }
.doc-pill.is-warn    { background: var(--warn-tint);   color: rgb(var(--nest-warning)); }
.doc-pill.is-info    { background: var(--info-tint);   color: var(--info); }
.doc-pill.is-danger  { background: var(--danger-tint); color: var(--danger); }
.doc-pill.is-muted::before { opacity: 0.55; }

/* --- Tables -------------------------------------------------------- */
.doc-table {
  width: 100%;
  max-width: var(--measure);
  border-collapse: collapse;
  margin: 16px 0 28px;
  font-size: 14px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.doc-table th,
.doc-table td {
  padding: 11px 14px 11px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline-soft);
}
.doc-table th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}
.doc-table tbody tr:hover { background: var(--tint); }
.doc-table.is-wide { max-width: none; }

/* --- Steps (numbered, circle markers) ----------------------------- */
.doc-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  max-width: var(--measure);
}
.doc-steps > li {
  counter-increment: step;
  position: relative;
  padding: 4px 0 18px 56px;
  margin-bottom: 0;
  border-left: 1px solid var(--hairline);
  margin-left: 16px;
}
.doc-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -16px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }

/* --- Scenario blocks ---------------------------------------------- */
.doc-scenario {
  background: var(--tint-warm);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 22px 26px;
  margin: 22px 0;
  max-width: var(--measure);
  position: relative;
}
.doc-scenario::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 18px;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.doc-scenario__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 600;
}
.doc-scenario h4,
.doc-scenario .doc-scenario__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: var(--teal);
  margin: 0 0 10px;
}
.doc-scenario p:last-child,
.doc-scenario ul:last-child,
.doc-scenario ol:last-child { margin-bottom: 0; }

/* --- Glossary ------------------------------------------------------ */
.doc-glossary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 14px 32px;
  margin: 16px 0 24px;
  max-width: var(--measure);
}
.doc-glossary dt {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--teal);
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}
.doc-glossary dd {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
  color: var(--ink-soft);
  font-size: 14.5px;
}

/* --- API endpoint list -------------------------------------------- */
.doc-api {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  margin: 12px 0 22px;
  background: rgb(var(--nest-tertiary) / 0.6);
  max-width: var(--measure);
}
.doc-api__row {
  display: grid;
  grid-template-columns: 64px auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-top: 1px solid var(--hairline-soft);
  font-size: 13px;
}
.doc-api__row:first-child { border-top: 0; }
.doc-api__row:hover { background: var(--tint); }
.doc-api__verb {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 0;
  border-radius: 3px;
  background: var(--tint-warm);
  color: var(--ink-soft);
}
.doc-api__verb.verb-get    { color: var(--ok);     background: var(--ok-tint); }
.doc-api__verb.verb-post   { color: var(--info);   background: var(--info-tint); }
.doc-api__verb.verb-put    { color: rgb(var(--nest-warning)); background: var(--warn-tint); }
.doc-api__verb.verb-delete { color: var(--danger); background: var(--danger-tint); }
.doc-api__path {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--teal);
  word-break: break-word;
}
.doc-api__desc {
  color: var(--ink-muted);
  font-size: 13px;
  text-align: right;
}
@media (max-width: 720px) {
  .doc-api__row { grid-template-columns: 56px 1fr; }
  .doc-api__desc { grid-column: 1 / -1; text-align: left; padding-left: 70px; }
}

/* --- Cards (used on index) ---------------------------------------- */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 36px 0 0;
}
.doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  background: rgb(var(--nest-tertiary) / 0.85);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 220ms ease,
              box-shadow 220ms ease;
}
.doc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.doc-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--nest-active) / 0.4);
  box-shadow: 0 22px 40px -28px rgb(var(--nest-secondary) / 0.45);
  text-decoration: none;
}
.doc-card:hover::before { transform: scaleX(1); }
.doc-card__index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.doc-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--teal);
  margin: 0;
}
.doc-card__title em { font-style: italic; color: var(--accent); }
.doc-card__body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.doc-card__cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.doc-card__cta::after {
  content: '→';
  transition: transform 220ms ease;
  font-family: var(--font-body);
  font-size: 14px;
}
.doc-card:hover .doc-card__cta::after { transform: translateX(4px); }

/* --- Figure (diagrams) -------------------------------------------- */
.doc-figure {
  margin: 24px 0;
  padding: 28px;
  background: rgb(var(--nest-tertiary) / 0.7);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow-x: auto;
}
.doc-figure svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.doc-figure svg .node {
  fill: var(--paper);
  stroke: rgb(var(--nest-secondary) / 0.5);
  stroke-width: 1.5;
}
.doc-figure svg .node.start    { fill: rgb(var(--nest-active) / 0.10);     stroke: var(--accent); }
.doc-figure svg .node.terminal { fill: rgb(var(--nest-action-done) / 0.12); stroke: var(--ok); }
.doc-figure svg .node.error    { fill: rgb(var(--nest-error) / 0.10);      stroke: var(--danger); }
.doc-figure svg .label {
  fill: var(--teal);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.doc-figure svg .edge {
  stroke: rgb(var(--nest-secondary) / 0.45);
  stroke-width: 1.5;
  fill: none;
}
.doc-figure svg .edge-label {
  fill: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.doc-figure svg .arrow { fill: rgb(var(--nest-secondary) / 0.55); }
.doc-figure figcaption {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-muted);
  text-align: center;
}

/* --- Role pills (apps × user types) ------------------------------- */
.doc-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.doc-role-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
}
.doc-role-pill.role-home   { background: rgb(var(--nest-active) / 0.10);        color: var(--accent); }
.doc-role-pill.role-flow   { background: rgb(var(--nest-action-waiting) / 0.14); color: var(--info); }
.doc-role-pill.role-board  { background: rgb(var(--nest-action-done) / 0.12);   color: var(--ok); }
.doc-role-pill.role-nest   { background: rgb(var(--nest-secondary) / 0.10);     color: var(--teal); }
.doc-role-pill.role-go     { background: rgb(var(--nest-tertiary-dark) / 0.7);  color: var(--ink-muted); border-color: var(--hairline); }
.doc-role-pill.role-system { background: rgb(var(--nest-action-pending) / 0.16); color: rgb(var(--nest-warning)); }

/* --- App intro card grid (one card per FE app) -------------------- */
.doc-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
  max-width: var(--measure);
}
.doc-app-card {
  position: relative;
  padding: 18px 20px 20px;
  background: rgb(var(--nest-tertiary) / 0.7);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-app-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--teal);
  margin: 0;
}
.doc-app-card__role {
  align-self: flex-start;
}
.doc-app-card__what {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0;
}
.doc-app-card[data-app="home"]::after,
.doc-app-card[data-app="flow"]::after,
.doc-app-card[data-app="board"]::after {
  content: '';
  position: absolute;
  top: 0; right: 14px;
  width: 28px;
  height: 3px;
  background: var(--accent);
}
.doc-app-card[data-app="flow"]::after  { background: var(--info); }
.doc-app-card[data-app="board"]::after { background: var(--ok); }

/* --- Coverage matrix --------------------------------------------- */
.doc-coverage {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 28px;
  font-size: 13px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.doc-coverage th,
.doc-coverage td {
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline-soft);
}
.doc-coverage thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--hairline);
}
.doc-coverage tbody th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
}
.doc-coverage td { text-align: center; font-family: var(--font-mono); font-size: 13px; }
.cov-yes  { color: var(--ok); font-weight: 600; font-family: var(--font-mono); }
.cov-warn { color: rgb(var(--nest-warning)); font-family: var(--font-mono); }
.cov-no   { color: var(--ink-faint); font-family: var(--font-mono); }
.doc-coverage tbody tr:hover { background: var(--tint); }

/* --- Cross-app flow timeline (swimlane variant) ------------------- */
.doc-flow {
  list-style: none;
  margin: 28px 0 32px 18px;
  padding: 0;
  counter-reset: flow-step;
  border-left: 1px solid var(--hairline);
  max-width: var(--measure);
}
.doc-flow > li {
  counter-increment: flow-step;
  position: relative;
  padding: 4px 0 24px 32px;
  margin-left: -1px;
}
.doc-flow > li::before {
  content: counter(flow-step, decimal-leading-zero);
  position: absolute;
  left: -16px;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-flow > li:last-child { padding-bottom: 4px; }
.doc-flow > li > .doc-flow__where {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--ink-muted);
}
.doc-flow > li > .doc-flow__action {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--teal);
  margin: 0 0 4px;
}
.doc-flow > li > p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.doc-flow > li > p + p { margin-top: 6px; }

/* --- Two-column flow comparison (used for "what each side sees") -- */
.doc-flow-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 22px 0 28px;
  max-width: var(--measure);
}
@media (max-width: 720px) {
  .doc-flow-pair { grid-template-columns: 1fr; }
}
.doc-flow-pair__col {
  background: rgb(var(--nest-tertiary) / 0.65);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 18px 20px;
}
.doc-flow-pair__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline-soft);
}
.doc-flow-pair__col h4 {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--teal);
}
.doc-flow-pair__col ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
}
.doc-flow-pair__col li { margin-bottom: 5px; }

/* --- Footer / endmark --------------------------------------------- */
.doc-endmark {
  margin: 80px auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.doc-endmark::before,
.doc-endmark::after {
  content: '';
  display: inline-block;
  width: 38px;
  height: 1px;
  background: var(--hairline);
  vertical-align: middle;
  margin: 0 14px;
}

/* ============================================================
   Long-lived-site additions
   ----------------------------------------------------------------
   Components below were added when the site grew beyond a single
   subject. They cover: a11y plumbing, doc-lifecycle status badges,
   audience tags, subject hub layout, last-updated chip, anchor
   affordances, hard "coming soon" cards, and improved print.
   ============================================================ */

/* --- Anchor-jump offset & target highlight ------------------------ */
/* scroll-margin on the anchored elements is enough — adding scroll-padding
   on :root would also push the focus-into-view logic, causing the page to
   scroll up whenever the topbar's search input takes focus or its caret moves. */
.doc-section,
.doc-h3,
[id]:target {
  scroll-margin-top: calc(var(--topbar-h) + 24px);
}
[id]:target {
  animation: doc-target-flash 1.4s ease-out 1;
}
@keyframes doc-target-flash {
  0%   { background: rgb(var(--nest-active) / 0.18); }
  100% { background: transparent; }
}

/* --- Skip to content (a11y) --------------------------------------- */
.doc-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--accent);
  color: rgb(var(--nest-white));
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: 4px;
  box-shadow: 0 6px 14px -6px rgb(var(--nest-secondary) / 0.45);
  transform: translateY(calc(-100% - 16px));
  transition: transform 160ms ease;
}
.doc-skip-link:focus,
.doc-skip-link:focus-visible {
  transform: translateY(0);
  text-decoration: none;
}

/* --- Focus-visible (a11y) ----------------------------------------- */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.doc-card:focus-visible,
.doc-subject:focus-visible {
  outline-offset: 4px;
}

/* --- Doc-lifecycle status badges ---------------------------------- */
/* For marking a subject / section / endpoint with its maturity level. */
.doc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgb(var(--nest-tertiary) / 0.7);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.doc-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.doc-status.is-stable       { color: var(--ok); }
.doc-status.is-beta         { color: var(--info); }
.doc-status.is-experimental { color: rgb(var(--nest-warning)); }
.doc-status.is-deprecated   { color: var(--danger); }
.doc-status.is-draft        { color: var(--ink-muted); }
.doc-status.is-planned      { color: var(--ink-faint); border-style: dashed; }

/* --- Audience tags ------------------------------------------------ */
/* For marking content as primarily for förvaltare, developers, etc. */
.doc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgb(var(--nest-tertiary-dark) / 0.85);
  color: var(--ink);
  border: 1px solid var(--hairline);
}
.doc-tag.audience-fa       { background: rgb(var(--nest-active) / 0.18);         color: rgb(150 80 35);  border-color: rgb(var(--nest-active) / 0.35); }
.doc-tag.audience-dev      { background: rgb(var(--nest-secondary) / 0.18);      color: rgb(40 65 80);   border-color: rgb(var(--nest-secondary) / 0.35); }
.doc-tag.audience-board    { background: rgb(var(--nest-action-done) / 0.20);    color: rgb(70 92 36);   border-color: rgb(var(--nest-action-done) / 0.40); }
.doc-tag.audience-internal { background: rgb(var(--nest-action-pending) / 0.22); color: rgb(var(--nest-warning)); border-color: rgb(var(--nest-warning) / 0.35); }

/* --- Last-updated chip -------------------------------------------- */
.doc-updated {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
}
.doc-updated::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Subject hub (replaces .doc-cards on the index when scaling) -- */
/* One card per subject; each holds its own user-guide + tech-spec links. */
.doc-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin: var(--space-6) 0 var(--space-7);
}
.doc-subject {
  position: relative;
  background: rgb(var(--nest-tertiary) / 0.85);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 28px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.doc-subject:hover {
  border-color: rgb(var(--nest-active) / 0.4);
  box-shadow: 0 18px 36px -28px rgb(var(--nest-secondary) / 0.45);
  transform: translateY(-2px);
}
.doc-subject.is-planned {
  border-style: dashed;
  background: transparent;
}
.doc-subject.is-planned:hover {
  transform: none;
  box-shadow: none;
}
.doc-subject__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.doc-subject__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.doc-subject.is-planned .doc-subject__num { color: var(--ink-faint); }
.doc-subject__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--teal);
  margin: 4px 0 0;
}
.doc-subject__title em { font-style: italic; color: var(--accent); }
.doc-subject__byline {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.doc-subject__links {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 480px) {
  .doc-subject__links { grid-template-columns: 1fr; }
}
.doc-subject__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: rgb(var(--nest-tertiary) / 0.5);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease, background 150ms ease;
}
.doc-subject__link:hover {
  border-color: var(--accent);
  background: rgb(var(--nest-active) / 0.06);
  text-decoration: none;
}
.doc-subject__link__kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.doc-subject__link__label {
  font-size: 14px;
  color: var(--teal);
  font-weight: 500;
}
.doc-subject__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding-top: 10px;
}

/* --- Heading anchor hover affordance ------------------------------ */
/* For headings that have an id, show a faint "#" in the gutter on hover.
   Decorative only; the visible TOC + URL fragment do the navigation. */
.doc-section[id],
.doc-h3[id] {
  position: relative;
}
.doc-section[id]::before,
.doc-h3[id]::before {
  content: '#';
  position: absolute;
  left: -28px;
  top: calc(50% + 2px);
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--accent);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}
.doc-section[id]:hover::before,
.doc-h3[id]:hover::before {
  opacity: 0.45;
}
.doc-section[id]::before { font-size: 22px; top: 32px; }
@media (max-width: 980px) {
  .doc-section[id]::before,
  .doc-h3[id]::before { display: none; }
}

/* --- "Coming soon" / placeholder block ---------------------------- */
.doc-stub {
  border: 1px dashed var(--hairline);
  border-radius: 6px;
  padding: 22px 24px;
  background: rgb(var(--nest-tertiary) / 0.4);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  text-align: center;
  margin: var(--space-5) 0;
  max-width: var(--measure);
}

/* --- Print friendliness (expanded) -------------------------------- */
@page { margin: 2cm; }
@media print {
  :root { --topbar-h: 0px; }
  body {
    background: white;
    color: black;
    font-size: 11pt;
    line-height: 1.5;
  }
  .doc-topbar,
  .doc-toc,
  .doc-skip-link,
  .doc-card__cta,
  .doc-subject__link::after { display: none !important; }
  .doc-layout { grid-template-columns: 1fr; gap: 0; margin: 0; }
  .doc-shell { max-width: none; padding: 0; }
  .doc-section,
  .doc-h3 { page-break-after: avoid; }
  .doc-callout,
  .doc-scenario,
  .doc-figure,
  .doc-flow > li,
  .doc-pre,
  table { page-break-inside: avoid; }
  .doc-card,
  .doc-subject { box-shadow: none; transform: none; }
  /* Inline link URLs (only for external & cross-doc) so printed pages stay useful */
  a[href^="http"]:not([href*="googleapis"]):not([href*="gstatic"])::after,
  a[href$=".html"]::after {
    content: " ⟨" attr(href) "⟩";
    font-size: 0.78em;
    color: #555;
    word-break: break-all;
    font-family: var(--font-mono);
  }
  .doc-flow > li::before { background: white; }
}

/* --- Reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
  [id]:target { animation: none; }
}

/* --- Forced-colors / Windows high-contrast support ---------------- */
@media (forced-colors: active) {
  .doc-pill,
  .doc-role-pill,
  .doc-status,
  .doc-tag {
    border: 1px solid CanvasText;
  }
  .doc-card,
  .doc-subject,
  .doc-app-card {
    border-color: CanvasText;
  }
}