/* system.css — the System page (roadmap Phase 2): the seven responsibility
   cards rendered from shared/architecture/model.js, the map, the things,
   the concerns, the implementation view. On the Explorer's tokens and its
   parts (ui.css: the card head, the chip, the tagged rows); the accent for
   structure; statuses as words in neutral chips, never a status colour
   (operational is not a pass, so it takes the accent, not green). */
/* The index of the page (the owner, 2026-10-13, and the layout notes of
   the same day). Narrow screens: a one-line rail of chapters under the
   title that sticks under the site header as the page scrolls, scrolls
   sideways under a finger, fades at both edges, keeps 44px targets; the
   script slides it so the chapter being read stays in view. Wide screens:
   the list in the left margin, sticking under the header (a sticky wrapper
   of no height, the card hung from it into the margin). In both, the
   chapter being read is marked in the accent with a thin bar; the card
   you land on from a tap is outlined; the scroll is smooth unless motion
   is turned off; an anchor lands below the header and the rail. */
.sys-toc-h { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 6px; }
.sys-toc ol { list-style: none; margin: 0; padding: 0; }
.sys-toc a { color: var(--text-hi); text-decoration: none; border-bottom: 0; font-size: 12px; }
@media (hover: hover) { .sys-toc a:hover { color: var(--accent); } }   /* a phone keeps a tapped link "hovered" until the next tap, which read as a second mark */
.sys-toc-side { display: none; }
.sys-toc-side li { margin: 0 0 6px; }
.sys-toc-side a { display: block; border-left: 2px solid transparent; padding-left: 8px; margin-left: -10px; }
.sys-toc-side a.current { color: var(--accent); border-left-color: var(--accent); }
.sys-toc-rail { position: sticky; top: var(--sys-header-h, 60px); z-index: 5; margin: 0 -20px 14px; padding: 0 6px; background: var(--bar-bg); border-bottom: 1px solid var(--border-dim); }
.sys-toc-rail ol { position: relative; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sys-toc-rail ol::-webkit-scrollbar { display: none; }
/* The fade at each edge is two overlays on the rail, not a mask on the
   scrolling list: a mask over a scrolling, sticky box left stale paint on
   a phone (the owner, 2026-10-13, two chapters lit at once). */
.sys-toc-rail::before, .sys-toc-rail::after { content: ""; position: absolute; top: 0; bottom: 1px; width: 18px; pointer-events: none; z-index: 1; }
.sys-toc-rail::before { left: 0; background: linear-gradient(to right, var(--bar-bg), transparent); }
.sys-toc-rail::after { right: 0; background: linear-gradient(to left, var(--bar-bg), transparent); }
.sys-toc-rail li { flex: none; }
.sys-toc-rail a { display: inline-block; min-height: 44px; box-sizing: border-box; padding: 13px 10px; line-height: 18px; white-space: nowrap; }
.sys-toc-rail a.current { color: var(--accent); }
/* One underline for the whole rail, moved under the current chapter by
   the script: a single element cannot show two chapters at once, which
   a border on each link did on a phone (the owner, 2026-10-13). */
.sys-toc-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: transform 150ms ease, width 150ms ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sys-toc-ink { transition: none; } }
/* Nothing on this page may widen the document: a phone that can scroll
   sideways wobbles under a finger (the owner, 2026-10-13). The bed clips
   sideways overflow; clip is not a scroll container, so the sticky rail
   and index keep working. */
.page-bed:has(.page-article.sys) { overflow-x: clip; }
.page-article.sys > .page-card { scroll-margin-top: calc(var(--sys-header-h, 60px) + 56px); }
/* The card being read is outlined, by the script's rule, the same one
   that marks the rail and the margin index, so the three never disagree
   (the owner, 2026-10-13: an outline that moved only on a tap fell out of
   step with the rail). */
.page-article.sys > .page-card { transition: border-color 150ms ease; }
.page-article.sys > .page-card.current { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .page-article.sys > .page-card { transition: none; } }
@media (prefers-reduced-motion: no-preference) { html:has(.page-article.sys) { scroll-behavior: smooth; } }
@media (min-width: 1100px) {
  .sys-toc-rail { display: none; }
  .sys-toc-side { display: block; position: sticky; top: 76px; height: 0; overflow: visible; z-index: 2; }
  .sys-toc-side .sys-toc-in { position: absolute; left: -204px; width: 180px; margin: 0; padding: 12px 14px; box-sizing: border-box; }
  .page-article.sys > .page-card { scroll-margin-top: 76px; }
}
.sys-map { margin: 6px 0 10px; }
.sys-map-svg { width: 100%; height: auto; display: block; }
.sys-map-svg .sys-map-h { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; fill: var(--text-hi); }
.sys-map-svg .sys-map-s { font-family: var(--font-body); font-size: 10.5px; fill: var(--text-dim); }
.sys-map-svg .sys-map-box rect { fill: color-mix(in srgb, var(--bg) 90%, #000 10%); stroke: var(--border-hi); stroke-width: 1.2; }
.sys-map-svg .sys-map-custody rect { stroke: var(--accent); }
.sys-map-svg .sys-map-arrow { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.sys-map-svg .sys-map-check { fill: none; stroke: var(--text-dim); stroke-width: 1.2; stroke-dasharray: 3 4; }
.sys-map-text { color: var(--text-dim); font-size: 12px; margin: 8px 0 0; }
/* Every card opens with the card head from ui.css (the owner, 2026-10-14,
   from the mock-up): the title left, the status chip at the far right, a
   note qualifying a status on a dim second line. */
.sys-purpose { color: var(--text-hi); font-size: 15px; margin: 4px 0 12px; }
.sys-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; row-gap: 7px; margin: 12px 0 0; font-size: 13px; }
/* The tones in a fact list (the owner, 2026-10-13): the label bright, the
   value a step dimmer; the paragraphs keep the body tone. */
.sys-dl dt { color: var(--text-hi); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 3px; }
.sys-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-mid); }
.sys-dl ul { margin: 0; padding-left: 18px; }
.sys-dl li { margin: 0 0 3px; }
/* The components are tagged rows (ui.css): the name first, the status chip
   at the column's right edge, under the name on a phone and in the table. */
.sys-inline span + span::before { content: " · "; color: var(--text-dim); }
.sys-also { color: var(--text-dim); font-size: 12px; }
.sys-src a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border-hi); }
.sys-src code { font-size: 12px; }
/* On a phone the table stacks by the page-card rule in styles.css (each
   row a block, the first cell its heading, the others labelled from
   data-label), the same as the seats table below it. */
.sys-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 10px 0 0; }
.sys-table th, .sys-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-dim); vertical-align: top; }
.sys-table th { color: var(--text-hi); font-weight: 600; letter-spacing: 0.5px; }
.sys-table td { color: var(--text-mid); }
@media (min-width: 601px) { .sys-table th:nth-child(1), .sys-table td:nth-child(1) { width: 16%; } }   /* on a phone the rows stack, and the first cell is the row's heading at full width */
.sys-things { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0 0; }
.sys-thing { border: 1px solid var(--border-dim); border-radius: 6px; padding: 10px 12px; }
.sys-thing .sys-k { color: var(--text-hi); font-weight: 600; display: block; margin-bottom: 4px; }
.sys-thing .sys-status { display: block; margin: 0 0 8px; }   /* the status on its own line, under the name, every time */
.sys-thing .sys-w { color: var(--text-mid); font-size: 12px; }
.sys-drawn { margin: 8px 0 0; }
.sys-drawn img { display: block; max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border-dim); }
@media (max-width: 600px) {
  .sys-dl { grid-template-columns: 1fr; row-gap: 2px; }
  .sys-dl dt { padding-top: 10px; }
  /* The page's side padding is 16px here (styles.css), so the rail's reach
     to the edges is 16px too: 20px made the document 8px wider than the
     screen, and the page wobbled sideways under a finger. */
  .sys-toc-rail { margin: 0 -16px 14px; }
  /* The map keeps its words readable on a phone and scrolls sideways;
     the paragraph under it says the same in words. */
  .sys-map { overflow-x: auto; }
  .sys-map-svg { min-width: 640px; }
}