/* The code map page (seppo.app/docs/, built by tools/build-docs.mjs). Liquid Glass: ui.css owns the material, this file only
   lays the page out. Three glass surfaces: the tree and search rail, the map, the "On this page" rail. Cards inside are light
   veils (never glass on glass). Nothing here animates a glass surface. */
.docs {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 220px; gap: 20px; align-items: start;
  width: min(1500px, 100%); margin: 0 auto; padding: 100px max(20px, env(safe-area-inset-right, 0px)) 56px max(20px, env(safe-area-inset-left, 0px)); font-size: 17px; line-height: 1.5;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Rails: sticky glass, the scrolling happens inside so the frost layer is never clipped */
.rail { --glass-radius: var(--radius-card); position: sticky; top: 90px; border-radius: var(--radius-card); padding: 6px; }
.rail-fold { max-height: calc(100vh - 118px); max-height: calc(100dvh - 118px); overflow: auto; overscroll-behavior: contain; padding: 14px 16px 16px; scrollbar-width: thin; }
.rail-fold > summary { font: 700 12px/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ui-highlight); cursor: default; list-style: none; padding: 4px 4px 12px; }
.rail-fold > summary::-webkit-details-marker { display: none; }

/* Links between the code map and the function docs (/docs/api/) */
.docs-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.docs-links a { padding: 4px 14px; border-radius: 999px; background: var(--lg-control); box-shadow: var(--lg-control-rim); color: var(--ui-text); font: 600 13.5px/1.4 var(--font-body); text-decoration: none; }
.docs-links a:hover { background: var(--lg-control-hover); }
.docs-links a[aria-current] { background: var(--lg-control-strong); box-shadow: var(--lg-control-rim), 0 0 0 2px var(--ui-highlight); }

.search input { width: 100%; }
.status { min-height: 1.4em; margin: 8px 6px 4px; font-size: 14px; color: var(--ui-text-soft); }
.offline-note { margin: 14px 6px 0; font: italic 400 14px/1.35 var(--font-display); color: var(--ui-text-soft); }

/* The folding tree */
.tree, .tree ul, .outline, .outline ul { list-style: none; margin: 0; padding: 0; }
.tree > li { margin-bottom: 2px; }
.tree summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; cursor: pointer; list-style: none; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px; border-right: 2px solid var(--ui-text-soft); border-bottom: 2px solid var(--ui-text-soft); transform: rotate(-45deg); transition: transform .2s; }
.tree details[open] > summary::before { transform: rotate(45deg); }
.tree summary:hover { background: var(--lg-control); }
.tree summary a { flex: 1; min-width: 0; font: 700 12px/1.3 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-text); text-decoration: none; }
.count { flex: none; min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--lg-control); box-shadow: var(--lg-control-rim); font: 600 12px/1.2 var(--font-body); text-align: center; color: var(--ui-text-soft); }
.tree ul { margin: 2px 0 8px 17px; padding-left: 10px; border-left: 1px solid var(--lg-hairline); }
.tree ul a, .outline a { display: block; padding: 5px 12px; border-radius: 999px; color: var(--ui-text-soft); font-size: 15px; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.tree ul a:hover, .outline a:hover { background: var(--lg-control); color: var(--ui-text); }
.tree a[aria-current], .outline a[aria-current] { background: var(--lg-control-strong); box-shadow: var(--lg-control-rim); color: #fff; }
.tree a:focus-visible, .outline a:focus-visible, .edge:focus-visible, .results a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Search results replace the tree while there is a query */
.results { display: grid; gap: 6px; margin-top: 6px; }
.results[hidden], #docs-tree[hidden] { display: none; }
.results a { display: block; padding: 10px 14px; border-radius: var(--radius-box); background: var(--lg-control); box-shadow: var(--lg-control-rim); color: var(--ui-text); text-decoration: none; }
.results a:hover { background: var(--lg-control-hover); }
.results .r-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 600 18px/1.2 var(--font-display); }
.results .r-kind { font: 700 10.5px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-highlight); }
.results .r-snippet { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ui-text-soft); }
mark { padding: 0 2px; border-radius: 4px; background: rgb(255 214 120 / .42); color: #fff; }

/* On this page */
.outline > li > a { font: 700 12px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.outline ul { margin: 0 0 6px 8px; padding-left: 8px; border-left: 1px solid var(--lg-hairline); }
.outline ul a { font: 400 14px/1.3 var(--font-body); text-transform: none; letter-spacing: 0; }

/* The map */
main { padding: 36px 40px 40px; border-radius: var(--radius-panel); min-width: 0; }
h1 { margin: 0 0 12px; font: 400 clamp(2.1rem, 5vw, 2.6rem)/1.05 var(--font-display); letter-spacing: .005em; color: var(--ui-title); text-wrap: balance; }
h2 { margin: 0 0 6px; font: 700 13px/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ui-highlight); }
h3 { margin: 0 0 4px; font: 600 22px/1.15 var(--font-display); color: var(--ui-title); }
p { margin: 0 0 10px; }
.intro { max-width: 70ch; font-size: 18px; color: var(--ui-text-soft); }
.lead { max-width: 70ch; color: var(--ui-text-soft); font-size: 16px; }
.layer { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--lg-hairline); scroll-margin-top: 90px; }
.layer#map { margin-top: 20px; }
.panes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 14px; }
.pane { position: relative; min-width: 0; padding: 18px 22px 20px; border-radius: var(--radius-card); background: var(--lg-control); box-shadow: var(--lg-control-rim); scroll-margin-top: 96px; }
.pane::before { content: ""; position: absolute; left: 22px; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tone, var(--ui-highlight)); }
.k-service { --tone: var(--water); }
.k-module { --tone: #6fd9ae; }
.k-folder { --tone: #f0c26a; }
.flow { --tone: #b896f0; }
.pane:target, .pane.flash { background: var(--lg-control-strong); box-shadow: var(--lg-control-rim), 0 0 0 2px color-mix(in srgb, var(--tone) 70%, white); }
.path { font-size: 13.5px; color: var(--ui-text-soft); }
.path span { padding: 2px 9px; margin-right: 4px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 30%, transparent); font: 700 10.5px/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
code { font: 13px/1.4 var(--font-mono); overflow-wrap: anywhere; }
ol { margin: 0; padding-left: 22px; }
li { margin-bottom: 4px; }

/* Uses / Used by */
.relations { display: grid; gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--lg-hairline); }
.relations div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.relations dt { flex: none; width: 92px; font: 700 10.5px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-highlight); }
.relations dd { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; min-width: 0; flex: 1; }
.edge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: var(--lg-control); box-shadow: var(--lg-control-rim); color: var(--ui-text); font-size: 14px; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.edge::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tone, #b896f0); }
.edge:hover { background: var(--lg-control-hover); }

/* The chain of parts a journey goes through, on a card */
.journeys { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--lg-hairline); }
.journeys h4 { margin: 0 0 6px; font: 700 10.5px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-highlight); }
.journey { margin: 0 0 10px; }
.journey figcaption { margin: 0 0 4px; font-size: 13px; color: var(--ui-text-soft); }
.journey figcaption a { color: inherit; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
.chain li { display: inline-flex; align-items: center; margin: 0; }
.chain li + li::before { content: ""; width: 16px; height: 2px; margin: 0 2px 0 4px; background: rgb(255 255 255 / .6); }
.chain li + li::after { content: none; }
.chain a, .chain .here { padding: 3px 11px; border-radius: 999px; font-size: 13.5px; line-height: 1.25; text-decoration: none; color: var(--ui-text); background: var(--lg-control); box-shadow: var(--lg-control-rim); border-left: 4px solid var(--tone, #b896f0); }
.chain a:hover { background: var(--lg-control-hover); }
.chain .here { background: color-mix(in srgb, var(--tone, #b896f0) 38%, transparent); font-weight: 700; border-left-color: #fff; }

/* Where it lives, Before you change it */
.place, .before { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--lg-hairline); }
.place h4, .before summary { margin: 0 0 6px; font: 700 10.5px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-highlight); }
.before summary { cursor: pointer; margin: 0; padding: 2px 0; }
.before[open] summary { margin-bottom: 6px; }
.place ul, .before ul { margin: 0; padding: 0; list-style: none; }
.place li { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.place a { min-width: 0; font: 13px/1.4 var(--font-mono); overflow-wrap: anywhere; color: var(--ui-text); text-decoration-color: color-mix(in srgb, var(--tone, #b896f0) 70%, transparent); }
.copy { flex: none; padding: 2px 10px; border: 0; border-radius: 999px; background: var(--lg-control); box-shadow: var(--lg-control-rim); color: var(--ui-text); font: 600 12px/1.5 var(--font-body); cursor: pointer; }
.copy:hover { background: var(--lg-control-hover); }
.before li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.45; }
.before a { white-space: nowrap; }

/* The site map */
.sitemap { margin: 6px 0 18px; }
.sitemap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.sitemap-hint { flex: 1 1 220px; font-size: 13.5px; color: var(--ui-text-soft); }
.chip { padding: 4px 14px; border: 0; border-radius: 999px; background: var(--lg-control); box-shadow: var(--lg-control-rim); color: var(--ui-text); font: 600 13.5px/1.4 var(--font-body); cursor: pointer; }
.chip.on { background: var(--lg-control-strong); box-shadow: var(--lg-control-rim), 0 0 0 2px var(--ui-highlight); }
.sitemap-layer { margin: 0 0 12px; padding: 10px 14px 12px; border-radius: var(--radius-box); background: var(--lg-control); box-shadow: var(--lg-control-rim); }
.sitemap-layer h3 { margin: 0 0 8px; font: 700 11px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; }
.sitemap-layer h3 a { color: var(--ui-highlight); text-decoration: none; }
.nodes { display: flex; flex-wrap: wrap; gap: 6px; }
.node { padding: 4px 12px; border: 0; border-left: 4px solid var(--tone); border-radius: 999px; background: rgb(255 255 255 / .1); box-shadow: var(--lg-control-rim); color: var(--ui-text); font: 14px/1.3 var(--font-body); cursor: pointer; }
.node:hover { background: var(--lg-control-hover); }
.node[aria-pressed="true"] { background: color-mix(in srgb, var(--tone) 45%, transparent); outline: 2px solid #fff; font-weight: 700; }
.node.uses { outline: 2px solid var(--water); outline-offset: 1px; }
.node.by { outline: 2px solid #f0c26a; outline-offset: 1px; }
.sitemap-detail { padding: 12px 16px; border-radius: var(--radius-box); background: var(--lg-control-strong); box-shadow: var(--lg-control-rim); }
.sitemap-detail p { margin: 0 0 6px; }
.sitemap-detail .relation-note { font-size: 13.5px; color: var(--ui-text-soft); }
.sitemap-detail .links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 14px; }
.sitemap-detail .links a { color: var(--ui-text); overflow-wrap: anywhere; }
.overview { margin: 8px 0 0; }
.overview > summary { cursor: pointer; padding: 4px 0; font: 700 11px/1.2 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-highlight); }

/* The overview picture */
.diagram { width: 100%; height: auto; margin: 6px 0 0; }
.box rect { stroke: rgb(255 255 255 / .42); stroke-width: 1.5; }
.box.a rect { fill: rgb(154 111 224 / .5); } .box.b rect { fill: rgb(61 132 232 / .55); } .box.c rect { fill: rgb(224 80 122 / .5); }
.box.d rect { fill: rgb(63 191 138 / .5); } .box.e rect { fill: rgb(231 176 74 / .5); } .box.g rect { fill: rgb(120 90 220 / .55); }
.diagram text { fill: #fff; font: 700 15px var(--font-body); }
.diagram .sm { font: 12px var(--font-body); fill: rgb(255 255 255 / .85); }
.arr { stroke: #fff; stroke-width: 2.2; fill: none; marker-end: url(#head); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Tablets and phones: the rails become folded panels above the map */
@media (max-width: 1100px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 96px 14px 40px; }
  .rail { position: relative; top: auto; }
  #tree-rail { order: 1; }
  #outline-rail { order: 2; }
  main { order: 3; }
  .rail-fold { max-height: none; }
  .rail-fold > summary { position: relative; padding: 8px 40px 8px 8px; cursor: pointer; }
  .rail-fold > summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
  .rail-fold[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
  .rail-fold:not([open]) { padding-bottom: 8px; }
  #docs-tree { max-height: 60vh; max-height: 60dvh; overflow: auto; overscroll-behavior: contain; }
  /* Shut from the first paint (docs.js folds them and adds .ready); the HTML keeps them open for wide screens */
  .docs:not(.ready) .rail-fold { padding-bottom: 8px; }
  .docs:not(.ready) .rail-fold > :not(summary) { display: none; }
  .docs:not(.ready) .rail-fold[open] > summary::after { margin-top: -6px; transform: rotate(45deg); }
  .outline { display: flex; flex-wrap: wrap; gap: 4px; }
  .outline ul { display: none; }
}
@media (max-width: 640px) {
  .docs { padding: 84px 10px 32px; font-size: 16px; }
  main { padding: 26px 18px 26px; }
  .panes { grid-template-columns: minmax(0, 1fr); }
  .pane { padding: 16px 18px 18px; }
  .pane::before { left: 18px; }
  .relations dt { width: 100%; }
}

/* Workspace: the same layout in flat panels (ui.css supplies the colours) */
:root[data-scene="workspace"] .pane::before { display: none; }
:root[data-scene="workspace"] h1 { font: 600 24px/1.3 var(--font-body); }
:root[data-scene="workspace"] h3 { font: 600 17px/1.3 var(--font-body); }
@media (pointer: coarse) { .chip { min-height: 44px; } }
/* The simple look (html[data-simple], page-design slice 2): the overview's groups are flat rows on the one glass surface; their names stay gold capitals at 12px */
html:root[data-simple]:not([data-design="classic"]) .simple-surface .sitemap-layer { margin: 0; padding: 10px 0 12px; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--lg-hairline); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface.simple-surface .sitemap-layer h3 { font: 700 var(--text-12)/1.2 var(--font-ui); letter-spacing: .1em; }
/* The simple look keeps this page's own hierarchy (simple.css no longer flattens every size to 16px) on the six sizes: chips, links,
   hints and code at 14px, the small gold capitals at 12px, result titles at 20px */
html:root[data-simple]:not([data-design="classic"]) .simple-surface.simple-surface :is(.docs-links a, .path, .sitemap-hint, .chip, .chain a, .chain .here, .relation-note, .journey figcaption, code, .place a, .node, .tree a, .tree li, .copy) { font-size: var(--text-14); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface.simple-surface :is(.results .r-kind, .path span, .relations dt, .journeys h4, .place h4, .before summary, .overview > summary, .tree summary a, .count, .outline > li > a) { font-size: var(--text-12); }
html:root[data-simple]:not([data-design="classic"]) .simple-surface.simple-surface .results .r-title { font-size: var(--text-20); }