/* ============================================================
   doc.css — the process-documentation page shell
   ------------------------------------------------------------
   Only what the generic markdown elements need, plus the page
   chrome. The meaning-carrying components (grounding lines,
   ledger, badges, audit mode) stay in components.css; the
   colours stay in tokens.css. No new colours are defined here.

   The split holds: the reading column is serif, everything
   that is machinery — nav, tables, code, section headings — is
   mono. See Design/README.md.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ chrome */

/* scroll-progress — a thin fill across the very top that grows as you read.
   Driven by --scroll (0..1) set from the template; scaleX keeps it off the
   layout and cheap to animate. Sits above the sticky topbar. */
.scrollprogress {
  position: fixed; top: 0; left: 0; z-index: 20;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--brass));
  transform: scaleX(var(--scroll, 0));
  transform-origin: left center;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .scrollprogress { transition: transform .08s linear; }
}

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar .brand { text-decoration: none; }

.topnav {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.topnav a {
  color: var(--ink-soft); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* nav dropdowns — <details>, so they work with JavaScript off. A group reads
   as one nav item and lights up in accent when the page you are on is inside
   it, so the current section is visible without opening the menu. */
.navgroup { position: relative; }
.navgroup > summary {
  list-style: none; cursor: pointer;
  color: var(--ink-soft);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: "\2009\25BE"; }   /* thin space + caret */
.navgroup > summary:hover { color: var(--ink); }
.navgroup[open] > summary { color: var(--ink); }
.navgroup.current > summary { color: var(--accent); border-bottom-color: var(--accent); }

.navmenu {
  position: absolute; z-index: 30;
  top: calc(100% + 12px); left: -16px;
  display: flex; flex-direction: column; gap: 13px;
  min-width: 160px; padding: 15px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: 3px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 12%);
}
.navmenu hr { width: 100%; margin: 0; border: none; border-top: 1px solid var(--rule); }

.themetoggle {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); background: none;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 5px 10px; cursor: pointer;
}
.themetoggle:hover { color: var(--ink); border-color: var(--rule-strong); }

.foot {
  max-width: var(--measure); margin: 80px auto 60px; padding: 0 28px;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------ page + plumb */

/* The reading column hangs off a hairline with a brass tip — the identity mark
   of the system, per Design/README.md.

   .page is wider than the measure on purpose. .prose stays at --measure, so
   prose never exceeds it; wide apparatus (the pipeline diagram, tables) reaches
   right into the space beyond. That asymmetry is the design language, not a
   layout accident: the text hangs on the line, the machinery extends away. */
.page {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 28px 0;
}
.plumb {
  position: absolute; left: 0; top: 56px; bottom: 0;
  width: 1px; background: var(--rule);
}
.plumb::before {
  content: ""; position: absolute; left: -1px; top: 0;
  width: 3px; height: 64px;
  background: linear-gradient(var(--brass), transparent);
}

/* ------------------------------------------------------------ prose */

.prose h1 {
  font-size: 38px; font-weight: 600; line-height: 1.15;
  letter-spacing: -.02em; margin: 0 0 .35em; text-wrap: balance;
}
.prose h4 {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 2em 0 .6em;
  scroll-margin-top: 80px;
}

.lede {
  font-size: 21px; line-height: 1.5; color: var(--ink-soft);
  margin: 0 0 1.6em; text-wrap: pretty;
}

/* every generated page says where its content actually comes from */
.provenance {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  color: var(--ink-soft);
  background: var(--sunk);
  border-left: 2px solid var(--accent);
  border-radius: 0 3px 3px 0;
  padding: 10px 14px; margin: 0 0 2em;
}

.prose a { color: var(--accent-2); text-underline-offset: 2px; }
.prose strong { font-weight: 600; }

/* semantic labels ([text]{.tag-*}) — colour is meaning, matching the map and ledger:
   indigo = a carrier of trust · pine = settled · ochre = open */
.prose strong.tag-accent  { color: var(--accent); }
.prose strong.tag-settled { color: var(--settled); }
.prose strong.tag-open    { color: var(--open); }

/* an outlined box — used for the map legend; reusable for any aside */
.prose .callout {
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  border-radius: 4px;
  padding: 1em 1.25em;
  margin: 0 0 1.6em;
}
.prose .callout > :first-child { margin-top: 0; }
.prose .callout > :last-child { margin-bottom: 0; }

.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.prose li { margin-bottom: .45em; }
.prose li > ul, .prose li > ol { margin: .45em 0 0; }

.prose blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--rule-strong);
  color: var(--ink-soft);
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose hr {
  border: 0; border-top: 1px solid var(--rule);
  margin: 2.8em 0;
}

/* ------------------------------------------------------------ apparatus: code + tables */

.prose code {
  font-family: var(--font-mono);
  font-size: .82em;
  background: var(--sunk);
  border-radius: 3px;
  padding: .12em .38em;
}
/* `ch` inside a <pre> is one mono character, so the cap is stated in the unit
   that matters: a diagram up to 104 characters wide fits without scrolling.
   Wider than that, or on a narrow screen, it scrolls inside its own box —
   the page itself never scrolls sideways. */
.prose pre {
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px 18px;
  margin: 1.6em 0;
  line-height: 1.45;
  width: max-content;
  max-width: min(104ch, calc(100vw - 56px));
  overflow-x: auto;
}
.prose pre code {
  background: none; padding: 0; font-size: 13px;
}

/* tables outgrow the reading column too — same treatment as <pre> */
.prose table {
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.55;
  border-collapse: collapse;
  margin: 1.6em 0;
  display: block;
  width: max-content;
  max-width: min(104ch, calc(100vw - 56px));
  overflow-x: auto;
}
.prose th, .prose td {
  text-align: left; vertical-align: top;
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--rule);
}
.prose th {
  color: var(--accent); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
  border-bottom-color: var(--rule-strong);
  white-space: nowrap;
}
.prose td code { font-size: 1em; }

/* ------------------------------------------------------------ the process map */

/* Hand-authored SVG in Process/src/_map.svg. Styled here rather than inline so
   it uses the same tokens as everything else and themes with the page. All of
   it is apparatus, so all of it is mono. */
.map {
  display: block;
  width: 100%;
  max-width: 660px;
  height: auto;
  margin: 2em 0 2.2em;
  font-family: var(--font-mono);
}

.map rect, .map path { vector-effect: non-scaling-stroke; }

/* blocks of work — neutral; the colour belongs to the decisions */
.m-block rect { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1; }

/* a block that is a link to its own page. Only the blocks are linked, so the
   accent on hover reads as "there is more here", not as a change of meaning. */
.map a { cursor: pointer; }
.map a .m-block rect,
.map a .m-name { transition: stroke .12s ease, fill .12s ease; }
.map a:hover .m-block rect { stroke: var(--accent); stroke-width: 1.5; }
.map a:hover .m-name { fill: var(--accent); }
.map a:focus-visible { outline: none; }
.map a:focus-visible .m-block rect { stroke: var(--accent); stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) {
  .map a .m-block rect, .map a .m-name { transition: none; }
}
.m-end rect   { fill: var(--settled-bg); stroke: var(--settled); stroke-width: 1.5; }

/* gates — indigo, the plumb-line colour: grounding, authority, structure */
.m-gate path { fill: var(--paper); stroke: var(--accent); stroke-width: 1.5; }

/* revise steps — ochre, the same "honestly unsettled" semantic as the ledger */
.m-revise rect { fill: var(--open-bg); stroke: var(--open); stroke-width: 1; }

.m-name { font-size: 13px; font-weight: 600; letter-spacing: .1em;
          fill: var(--ink); text-anchor: middle; }
.m-sub  { font-size: 9.5px; fill: var(--ink-soft); text-anchor: middle; }
.m-term { font-size: 11px; font-weight: 600; letter-spacing: .12em;
          fill: var(--ink); text-anchor: middle; }
.m-end .m-term { fill: var(--settled); }

.m-gname { font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
           fill: var(--accent); text-anchor: middle; }
.m-gsub  { font-size: 9px; fill: var(--ink-soft); text-anchor: middle; }
.m-rev   { font-size: 10px; fill: var(--open); text-anchor: middle; }

.m-flow, .m-yes, .m-no, .m-back, .m-loop {
  fill: none; stroke-width: 1.5; stroke-linejoin: round;
}
.m-flow { stroke: var(--ink-faint); }
.m-yes  { stroke: var(--settled); }
.m-no   { stroke: var(--open); }
.m-back { stroke: var(--open); stroke-dasharray: 4 3; }  /* the loop back is a detour, drawn as one */
.m-loop { stroke: var(--ink-faint); stroke-dasharray: 4 3; }

.m-lyes { font-size: 9.5px; fill: var(--settled); letter-spacing: .06em; }
.m-lno  { font-size: 9.5px; fill: var(--open); letter-spacing: .06em; text-anchor: middle; }
.m-note { font-size: 9px; fill: var(--ink-faint); text-anchor: middle; }

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .page { padding: 36px 20px 0; }
  .prose h1 { font-size: 30px; }
  .lede { font-size: 19px; }
  .topbar { gap: 16px; padding: 12px 20px; }
  .plumb { display: none; }
}