@charset "utf-8";
/* =====================================================================
   site-chapters — shared chapter layout for ledger articles
   Moved from the WAMNET article (column-wamnet2026.css), which remains the reference.
     .site-wrap            page-width container
     .site-chapterbar      sticky article bar: brand, chapter links, menu, progress line
     .site-toc-band        collapsible contents list in a full-width band
     .site-chapter         full-width chapter band (--alt: tinted), with a sticky
                           chapter mark beside the body on wide screens
   Load it before the page stylesheet, so the page can adjust the parts; the page keeps its
   own titles, bar height (--site-chapterbar-h) and scroll-padding. Colours and type come from
   the --site-* tokens only, so each data-palette applies as is. JS: assets/js/site-chapters.js
   (adds html.site-chapters-js). Link rules carry .site-chapterbar so that a page's own
   `a` colours do not override them.
   ===================================================================== */

.site-wrap {
  max-width: var(--site-page-width);
  margin: 0 auto;
  padding-inline: var(--site-gutter);
}

/* ---------- article bar (sticky) ---------- */
.site-chapterbar {
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--site-ground);
  border-top: 2px solid var(--site-ink);
  border-bottom: 2px solid var(--site-ink);
}
.site-chapterbar__inner {
  max-width: var(--site-page-width);
  margin: 0 auto;
  min-height: var(--site-chapterbar-h, 58px);
  padding: 6px var(--site-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.site-chapterbar__brand {
  display: flex; align-items: baseline; gap: 12px;
  color: var(--site-ink); text-decoration: none; white-space: nowrap;
}
.site-chapterbar__brand:hover { color: var(--site-ink); }
.site-chapterbar__name { font-family: var(--site-mono); font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.site-chapterbar__sub { font-size: 12px; color: var(--site-muted); letter-spacing: .1em; }
.site-chapterbar__nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 4px; font-size: 14px; }
.site-chapterbar .site-chapterbar__nav a {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 12px 8px;
  color: var(--site-ink-soft);
  text-decoration: none;
}
.site-chapterbar__num { font-family: var(--site-mono); font-size: 11px; color: var(--site-muted); }
.site-chapterbar__nav a::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: 6px;
  height: 2px; background: var(--site-pen);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.6, 0, .2, 1);
}
.site-chapterbar__nav a:hover::after,
.site-chapterbar__nav a.is-active::after { transform: scaleX(1); }
.site-chapterbar .site-chapterbar__nav a.is-active { color: var(--site-ink); font-weight: 700; }
.site-chapterbar__nav a.is-active .site-chapterbar__num { color: var(--site-pen); }

/* A bar whose links would wrap (set by site-chapters.js): drop the subtitle, then use the menu. */
.site-chapterbar.is-compact .site-chapterbar__sub { display: none; }
.site-chapterbar.is-collapsed .site-chapterbar__nav { display: none; }
html.site-chapters-js .site-chapterbar.is-collapsed .site-chapterbar__menu { display: inline-flex; align-items: center; }

/* Pages with ten or more chapters list numbers only; the full title is the link's label and tooltip. */
.site-chapterbar__nav--numbers { gap: 0; }
.site-chapterbar .site-chapterbar__nav--numbers a { padding-inline: 7px; }
.site-chapterbar__nav--numbers .site-chapterbar__num { font-size: 13px; color: var(--site-ink-soft); }
.site-chapterbar__nav--numbers a.is-active .site-chapterbar__num { color: var(--site-pen); }

.site-chapterbar__menu {
  display: none;
  min-height: 44px; padding: 6px 16px;
  border: var(--site-border-width) solid var(--site-ink); background: var(--site-sheet); color: var(--site-ink);
  cursor: pointer; font-size: 14px;
}
.site-chapterbar__menu[aria-expanded="true"] { background: var(--site-ink); color: var(--site-on-dark); }

.site-chapterbar__mobile {
  display: none;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  border-top: 1px dashed var(--site-line);
  background: var(--site-sheet);
}
.site-chapterbar__mobile.is-open { display: block; }
.site-chapterbar .site-chapterbar__mobile a {
  display: block;
  padding: 12px var(--site-gutter);
  border-bottom: 1px dashed var(--site-line);
  color: var(--site-ink); text-decoration: none; font-size: 15px;
}
.site-chapterbar .site-chapterbar__mobile a.is-active { background: var(--site-ink); color: var(--site-on-dark); }

.site-chapterbar__progress {
  position: absolute; left: 0; right: 0; top: calc(var(--site-chapterbar-h, 58px) - 1px);
  height: 3px; pointer-events: none;
}
.site-chapterbar__progress-fill { width: 0; height: 100%; background: var(--site-pen); }

/* ---------- table of contents ---------- */
.site-toc-band { border-bottom: 1px solid var(--site-line); }
.site-toc-band__inner { padding-block: 28px; }
.site-toc { background: var(--site-sheet); border: var(--site-border-width) solid var(--site-ink); }
.site-toc > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 10px 20px;
  font-family: var(--site-mono); font-size: 13px; letter-spacing: .16em;
}
.site-toc > summary::-webkit-details-marker { display: none; }
.site-toc > summary::after { content: "＋ 開く"; font-family: var(--site-sans); letter-spacing: .04em; font-size: 13px; color: var(--site-muted); }
.site-toc[open] > summary::after { content: "－ 閉じる"; }
.site-toc[open] > summary { border-bottom: 1px dashed var(--site-line); }
.site-toc ol {
  list-style: none; margin: 0; padding: 8px 20px 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 32px;
}
.site-toc li a {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 8px;
  padding: 9px 0; border-bottom: 1px dashed var(--site-line-soft);
  color: var(--site-ink); text-decoration: none; line-height: 1.6;
}
.site-toc .num { font-family: var(--site-mono); font-weight: 700; color: var(--site-muted); }
.site-toc li a:hover .num, .site-toc li a.is-active .num { color: var(--site-pen); }
.site-toc li a.is-active { font-weight: 700; }

/* ---------- chapter bands: mark | body ---------- */
.site-chapter__split {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px 56px;
  padding-block: 88px;
}
.site-chapter__mark {
  align-self: start;
  position: sticky;
  top: calc(var(--site-chapterbar-h, 58px) + 28px);
  display: flex; flex-direction: column; gap: 6px;
}
.site-chapter__kicker { font-family: var(--site-mono); font-size: 13px; letter-spacing: .16em; color: var(--site-muted); }
.site-chapter__no { font-family: var(--site-mono); font-weight: 700; font-size: 64px; line-height: 1; }
.site-chapter__ja { font-size: 14px; color: var(--site-muted); }
.site-chapter__body { min-width: 0; max-width: 780px; }
/* A note before the first chapter: aligned with the body column, without a chapter mark. */
.site-chapter__split--lead { padding-block: 56px; }

.site-chapter { border-top: 1px solid var(--site-line); }
.site-chapter--alt { background: var(--site-tint); }
.site-chapter:last-child { border-bottom: 1px solid var(--site-line); }

/* Chapters that stay inside a centred page (the report pages): the band and its top rule are
   drawn to the screen edges with border-image. Its outset is ink overflow, so no scrollbar. */
.site-chapter--bleed {
  border-style: solid;
  border-color: transparent;
  border-width: 1px 0 0;
  border-image: linear-gradient(var(--site-line), var(--site-line)) 1 / 1px 0 0 / 0 100vw;
}
.site-chapter--bleed.site-chapter--alt {
  background: none;
  border-image: linear-gradient(var(--site-line) 0 1px, var(--site-tint) 1px) fill 1 / 1px 0 0 / 0 100vw;
}

/* Sub-entries under a chapter in the contents list */
.site-toc__sub { list-style: none; margin: 0 0 8px; padding: 0 0 0 calc(2.6em + 8px); }
.site-toc .site-toc__sub a {
  display: block; padding: 4px 0; border: 0;
  color: var(--site-ink-soft); font-size: .9em; line-height: 1.6;
}

/* the sticky mark lights up while its chapter is on screen */
.site-chapters-js .site-chapter .site-chapter__no { transition: color .4s ease; }
.site-chapters-js .site-chapter.is-current .site-chapter__no { color: var(--site-ink); }
.site-chapters-js .site-chapter:not(.is-current) .site-chapter__no { color: color-mix(in srgb, var(--site-ink) 55%, transparent); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .site-chapterbar .site-chapterbar__nav a { padding-inline: 6px; }
  .site-chapterbar__nav a::after { left: 6px; right: 6px; }
  .site-chapterbar__sub { display: none; }
}
@media (max-width: 960px) {
  .site-chapterbar__nav { display: none; }
  html.site-chapters-js .site-chapterbar__menu { display: inline-flex; align-items: center; }
  .site-chapterbar__sub { display: inline; }
  .site-chapter__split { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 64px; }
  .site-chapter__mark { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
  .site-chapter__no { font-size: 44px; }
  .site-chapter__body { max-width: none; }
}
@media (max-width: 640px) {
  .site-chapterbar__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-chapterbar__nav a::after,
  .site-chapters-js .site-chapter .site-chapter__no { transition: none; }
}

@media print {
  .site-chapterbar { display: none !important; }
  .site-chapter__split { grid-template-columns: minmax(0, 1fr); padding-block: 24px; }
  .site-chapter__mark { position: static; flex-direction: row; gap: 10px; }
}