/* Webill Green — User Manual stylesheet.
 *
 * Layer 1: the legacy manual stylesheet (shell, typography, tables, and the
 * six original figure families: allocation-diagram, priority-prorata-diagram,
 * rule-example-diagram, pricing-flow, run-chart-example(s), tab-sample(s)).
 * It is imported untouched; it retires into this file at M5.
 *
 * Layer 2 (this file): the six figure families added by the manual programme
 * (entity-map, lifecycle-rail, pipeline-spine, ledger-table, clock-dial,
 * topology-map). See STYLE.md for the copy-paste catalog, and
 * figure-gallery.html for a rendered sample of every family.
 *
 * Palette tokens (defined in the imported layer):
 *   --webill-green #059669 · --webill-green-deep #047857 · --webill-green-soft #d1fae5
 *   --webill-ink #212a34  · --webill-paper #fbfefc
 *   --navy #102a43 · --blue #1769e0 · --teal #0c8a7a · --line #dbe3ef
 * Zone register swatches (WB.WheelingWeb.So.ZoneColors, Z1–Z9 in order):
 *   #1769e0 #0c8a7a #be7f05 #8072af #c45a5a #539cb9 #6aaa8a #c99728 #9a5ba6
 * Shared card tints (match the original families):
 *   supply/gold #fff4c9|#e9c560 · demand/green #e8f7f0|#8bc5ad
 *   firm-trader/purple #eeeaf8|#a89bc5 · wind-munix/blue #e4f5fc|#8ecae6
 *   grid-danger/red #fff0f0|#d99a9a · neutral #fff|#ddd7ca
 */
/* Same-directory import so this resolves for both file:// viewing and
 * HTTP under /user-manual/ (a parent-relative ../USER-MANUAL.css becomes
 * /USER-MANUAL.css at the site root and 404s). Source:
 * docs/user-manual/USER-MANUAL.css. */
@import url("USER-MANUAL.css");

/* Specificity repairs for the legacy families: `#manual-content strong`
 * (imported layer) outranks `.family__part strong { color: inherit }`, so
 * white-on-ink values rendered dark-on-dark. Scoped overrides, legacy file
 * untouched. (pricing-flow__time already carries this fix upstream.) */
#manual-content .priority-prorata-diagram__demand strong,
#manual-content .rule-example-diagram__time strong { color: #fff; }

/* Supply-pile table: floor (first lift) and top (last crate). Beats the
 * even-row wash `#manual-content tr:nth-child(even) td`. Tints are the
 * documented grid-danger / demand swatches. */
#manual-content table.stack-pile tbody tr.stack-pile__floor td {
  background: #fff0f0;
  border-color: #d99a9a;
  color: #993f3f;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
#manual-content table.stack-pile tbody tr.stack-pile__floor td:first-child { color: #993f3f; }
#manual-content table.stack-pile tbody tr.stack-pile__top td {
  background: #e8f7f0;
  border-color: #8bc5ad;
  color: #23634e;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
#manual-content table.stack-pile tbody tr.stack-pile__top td:first-child { color: #23634e; }
#manual-content table.stack-pile--nums th:nth-child(n+3),
#manual-content table.stack-pile--nums td:nth-child(n+3) { text-align: right; }

/* Demand pile is the mirror: floor (must-serve) is green, top (first
 * to walk away) is red. */
#manual-content table.stack-pile--demand tbody tr.stack-pile__floor td {
  background: #e8f7f0;
  border-color: #8bc5ad;
  color: #23634e;
}
#manual-content table.stack-pile--demand tbody tr.stack-pile__floor td:first-child { color: #23634e; }
#manual-content table.stack-pile--demand tbody tr.stack-pile__top td {
  background: #fff0f0;
  border-color: #d99a9a;
  color: #993f3f;
}
#manual-content table.stack-pile--demand tbody tr.stack-pile__top td:first-child { color: #993f3f; }

#manual-content .allocation-diagram__segment--floor,
#manual-content .allocation-diagram__key--floor {
  background: #fff0f0;
  color: #993f3f;
  border: 1px solid #d99a9a;
}
#manual-content .allocation-diagram__segment--top,
#manual-content .allocation-diagram__key--top {
  background: #e8f7f0;
  color: #23634e;
  border: 1px solid #8bc5ad;
}
#manual-content .allocation-diagram__key--floor,
#manual-content .allocation-diagram__key--top { box-sizing: border-box; }

/* ---------------------------------------------------------------- shared */
.entity-map, .lifecycle-rail, .pipeline-spine, .ledger-table, .clock-dial, .topology-map {
  margin: 1.5rem 0; padding: 1.1rem; border: 1px solid #e4d5b7; border-radius: 14px;
  color: #303046; background: #fffdf8; box-shadow: 0 8px 20px rgba(64, 64, 104, .08);
}

/* Mermaid flowcharts — keep diagrams readable in the content column */
#manual-content .mermaid {
  margin: 1.5rem 0; padding: 1.1rem; border: 1px solid #e4d5b7; border-radius: 14px;
  color: #303046; background: #fffdf8; box-shadow: 0 8px 20px rgba(64, 64, 104, .08);
  overflow-x: auto;
}
#manual-content .mermaid svg { display: block; max-width: 100%; height: auto !important; margin: 0 auto; }
#manual-content .mermaid .nodeLabel,
#manual-content .mermaid .edgeLabel,
#manual-content .mermaid .cluster-label span {
  font-size: 1.25rem !important; line-height: 1.35;
}
#manual-content .mermaid .edgeLabel { font-size: 1.1rem !important; }
.entity-map figcaption, .lifecycle-rail figcaption, .pipeline-spine figcaption,
.ledger-table figcaption, .clock-dial figcaption, .topology-map figcaption {
  margin-bottom: .9rem; color: var(--webill-ink); font-size: .95rem; font-weight: 800;
}

/* ------------------------------------------------- entity-map (object model) */
.entity-map__group { padding: .75rem .8rem; border: 1px solid #e8e2d8; border-radius: 11px; background: #fff; }
.entity-map__group + .entity-map__group { margin-top: .8rem; }
.entity-map__group-label { display: inline-block; margin-bottom: .55rem; padding: .1rem .5rem; border-radius: 999px; color: #fff; background: var(--webill-ink); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.entity-map__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .55rem; }
.entity-map__lane { display: flex; align-items: stretch; gap: .45rem; }
.entity-map__lane + .entity-map__lane, .entity-map__grid + .entity-map__lane, .entity-map__lane + .entity-map__grid { margin-top: .6rem; }
.entity-map__card { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; padding: .55rem .65rem; border: 1px solid #ddd7ca; border-radius: 8px; background: #fff; }
.entity-map__card strong { color: #3f385d; font-size: .8rem; line-height: 1.25; }
.entity-map__card small { margin-top: .12rem; color: #686176; font-size: .64rem; line-height: 1.3; }
.entity-map__card--org     { border-color: #a89bc5; background: #eeeaf8; }
.entity-map__card--site    { border-color: #e9c560; background: #fff4c9; }
.entity-map__card--meter   { border-color: #8ecae6; background: #e4f5fc; }
.entity-map__card--deal    { border-color: #8bc5ad; background: #e8f7f0; }
.entity-map__card--money   { border-color: #d8bd88; background: #fef3d6; }
.entity-map__card--market  { border-color: #d99a9a; background: #fff0f0; }
.entity-map__rel { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; min-width: 3.4rem; color: #796a3d; font-size: .58rem; font-weight: 750; line-height: 1.15; text-align: center; }
.entity-map__rel b { color: var(--webill-green-deep); font-size: 1rem; line-height: 1; }
.entity-map__badge { display: inline-block; margin-left: .3rem; padding: .02rem .38rem; border-radius: 999px; color: #fff; background: var(--webill-ink); font-size: .58rem; font-weight: 800; vertical-align: .08em; }

/* --------------------------------------------- lifecycle-rail (state machines) */
.lifecycle-rail__track { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .45rem; }
.lifecycle-rail__state { padding: .3rem .7rem; border: 1px solid #ddd7ca; border-radius: 999px; background: #fff; color: #3f385d; font-size: .7rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.lifecycle-rail__state--initial  { border-style: dashed; border-color: #9b93b5; }
.lifecycle-rail__state--active   { border-color: var(--webill-ink); background: var(--webill-ink); color: #fff; }
.lifecycle-rail__state--happy    { border-color: var(--webill-green-deep); background: var(--webill-green-soft); color: #835900; }
.lifecycle-rail__state--terminal { border-color: #cfccc2; background: #f4f4f0; color: #7a7668; }
.lifecycle-rail__state--danger   { border-color: #d99a9a; background: #fff0f0; color: #993f3f; }
.lifecycle-rail__arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.6rem; color: #756d7e; font-size: .56rem; font-weight: 700; line-height: 1.1; text-align: center; }
.lifecycle-rail__arrow b { color: var(--webill-green-deep); font-size: 1rem; line-height: 1; }
.lifecycle-rail__branches { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed #e4dcc9; }
.lifecycle-rail__branch-label { color: #76662f; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lifecycle-rail__note { margin: .6rem 0 0; color: #5e5869; font-size: .72rem; line-height: 1.45; }

/* SettlementPeriod status chips — tones match LiveView status_tone/1
   (bg-slate/amber/emerald/red-100 · text-*-500/700 · REVERSED line-through). */
.status-chip {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; line-height: 1.35;
  white-space: nowrap; vertical-align: .05em;
}
.status-chip--draft       { background: #f1f5f9; color: #64748b; }
.status-chip--preliminary { background: #fef3c7; color: #b45309; }
.status-chip--final       { background: #d1fae5; color: #047857; }
.status-chip--disputed    { background: #fee2e2; color: #b91c1c; }
.status-chip--reversed    { background: #e2e8f0; color: #64748b; text-decoration: line-through; }

/* ----------------------------------- pipeline-spine (staged pipelines, locator) */
.pipeline-spine__stages { display: flex; align-items: stretch; gap: .4rem; margin: 0; padding: 0; }
.pipeline-spine__stages + .pipeline-spine__stages { margin-top: .55rem; }
.pipeline-spine__stage { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; padding: .58rem .62rem; border: 1px solid #ddd7ca; border-radius: 9px; background: #fff; }
.pipeline-spine__stage b {
  display: inline-flex; box-sizing: border-box; min-width: 1.35rem; min-height: 1.35rem;
  align-items: center; justify-content: center; padding: .12rem .42rem;
  border-radius: 999px; color: #fff; background: var(--webill-ink);
  font-size: .62rem; font-weight: 800; line-height: 1; letter-spacing: .01em;
  white-space: nowrap;
}
.pipeline-spine__stage strong { margin-top: .35rem; color: #3f385d; font-size: .76rem; line-height: 1.25; }
.pipeline-spine__stage small { margin-top: .1rem; color: #686176; font-size: .61rem; line-height: 1.3; }
.pipeline-spine__stage.is-here { border-color: var(--webill-green); background: var(--webill-green-soft); box-shadow: inset 0 0 0 1px var(--webill-green); }
.pipeline-spine__stage.is-here b { background: var(--webill-green-deep); }
.pipeline-spine__arrow { display: flex; flex: 0 0 auto; align-items: center; color: var(--webill-green-deep); font-size: 1.05rem; font-weight: 900; }
.pipeline-spine--locator { margin: 1rem 0 1.4rem; padding: .6rem .7rem; border-radius: 10px; box-shadow: none; }
.pipeline-spine--locator .pipeline-spine__stage { padding: .38rem .5rem; }
.pipeline-spine--locator .pipeline-spine__stage small { display: none; }
.pipeline-spine--locator .pipeline-spine__stage strong { font-size: .68rem; }
.pipeline-spine--locator figcaption { margin-bottom: .45rem; font-size: .72rem; }
/* Setup stage map (V8 §4.3) — roomy cards with arrows along each row */
.setup-stage-map {
  margin: 1.5rem 0; padding: 1.1rem; border: 1px solid #e4d5b7; border-radius: 14px;
  color: #303046; background: #fffdf8; box-shadow: 0 8px 20px rgba(64, 64, 104, .08);
}
.setup-stage-map figcaption {
  margin-bottom: .9rem; color: var(--webill-ink); font-size: .95rem; font-weight: 800;
}
.setup-stage-map__row {
  display: flex; align-items: stretch; gap: .35rem; margin: 0;
}
.setup-stage-map__row + .setup-stage-map__row { margin-top: .65rem; }
.setup-stage-map__card {
  display: flex; flex: 1 1 0; min-width: 0; flex-direction: column;
  align-items: flex-start; gap: .4rem; min-height: 4.4rem; padding: .75rem .85rem;
  border: 1px solid #ddd7ca; border-radius: 10px; background: #fff;
}
.setup-stage-map__arrow {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
  min-width: 1.1rem; color: var(--webill-green-deep); font-size: 1.15rem; font-weight: 900;
  line-height: 1;
}
.setup-stage-map__id {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.45rem; padding: .2rem .55rem; border-radius: 999px;
  color: #fff; background: var(--webill-ink); font-size: .7rem; font-weight: 800;
  letter-spacing: .02em; line-height: 1; white-space: nowrap;
}
.setup-stage-map__name {
  color: #3f385d; font-size: .9rem; font-weight: 750; line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (max-width: 680px) {
  .setup-stage-map__row { flex-wrap: wrap; }
  .setup-stage-map__card { flex: 1 1 42%; }
  .setup-stage-map__arrow { min-width: 100%; height: .85rem; transform: rotate(90deg); }
}

/* --------------------------------------- ledger-table (double entry, Σ = 0) */
.ledger-table__screen { overflow-x: auto; border: 1px solid #dcd4c7; border-radius: 9px; background: #fff; padding: .55rem; }
.ledger-table table { display: table; width: 100%; min-width: 540px; margin: 0; font-size: .72rem; }
.ledger-table th, .ledger-table td { min-width: auto; padding: .45rem .55rem; white-space: nowrap; }
.ledger-table th { font-size: .62rem; }
.ledger-table__num { text-align: right !important; font-variant-numeric: tabular-nums; }
.ledger-table__debit  { color: #993f3f; }
.ledger-table__credit { color: #23634e; }
.ledger-table tfoot td { border-top: 2px solid var(--teal); background: #effbf8 !important; color: #0c6b5e; font-weight: 800; }
.ledger-table__note { margin: .6rem 0 0; color: #5e5869; font-size: .72rem; line-height: 1.45; }

/* -------------------------------------------- clock-dial (rhythms of the system) */
.clock-dial__layout { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 1rem; align-items: center; }
.clock-dial__face svg { display: block; width: 100%; height: auto; overflow: visible; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.clock-dial__face svg text { fill: #655e72; font-size: 9px; font-weight: 650; }
.clock-dial__ring { fill: #fff; stroke: #e5dfd3; stroke-width: 1.5; }
.clock-dial__tick { stroke: #d8d2c6; stroke-width: 1; }
.clock-dial__mark { stroke: #fff; stroke-width: 1.5; }
.clock-dial__mark--settlement { fill: #faa919; }
.clock-dial__mark--strategy   { fill: #8072af; }
.clock-dial__mark--market     { fill: #539cb9; }
.clock-dial__mark--forecast   { fill: #0c8a7a; }
.clock-dial__mark--lifecycle  { fill: #c96a6a; }
.clock-dial__jobs { margin: 0; padding: 0; list-style: none; color: #5d5868; font-size: .72rem; line-height: 1.4; }
.clock-dial__jobs li { display: flex; align-items: baseline; gap: .45rem; padding: .16rem 0; }
.clock-dial__jobs b { min-width: 4.6rem; color: #3f385d; font-variant-numeric: tabular-nums; }
.clock-dial__dot { display: inline-block; flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; align-self: center; }
.clock-dial__dot--settlement { background: #faa919; }
.clock-dial__dot--strategy   { background: #8072af; }
.clock-dial__dot--market     { background: #539cb9; }
.clock-dial__dot--forecast   { background: #0c8a7a; }
.clock-dial__dot--lifecycle  { background: #c96a6a; }
.clock-dial__strip { display: grid; grid-template-columns: repeat(31, minmax(1.05rem, 1fr)); gap: 2px; margin-top: .95rem; }
.clock-dial__strip--hours { grid-template-columns: repeat(24, minmax(1.05rem, 1fr)); }
.clock-dial__strip-label { grid-column: 1 / -1; margin-bottom: .15rem; color: #76662f; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.clock-dial__day { display: flex; flex-direction: column; align-items: center; gap: .14rem; padding: .16rem 0 .22rem; border: 1px solid #eee5d5; border-radius: 4px; color: #857b69; font-size: .56rem; }
.clock-dial__day--job { border-color: var(--webill-green); background: var(--webill-green-soft); color: #6b5410; font-weight: 750; }
.clock-dial__day .clock-dial__dot { width: .34rem; height: .34rem; }
.clock-dial__hour {
  display: flex; align-items: center; justify-content: center;
  min-height: 1.55rem; padding: .12rem 0; border: 1px solid transparent;
  border-radius: 4px; font-size: .56rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.clock-dial__hour--peak { border-color: #c45a5a; background: #d96868; color: #fff; }
.clock-dial__hour--standard { border-color: #c99728; background: #e6b23c; color: #3f3208; }
.clock-dial__hour--offpeak { border-color: #4f8f72; background: #6aaa8a; color: #fff; }
.clock-dial__legend {
  display: flex; flex-wrap: wrap; gap: .45rem 1rem; margin-top: .85rem;
  color: #615b6f; font-size: .68rem;
}
.clock-dial__legend span { display: inline-flex; align-items: center; gap: .32rem; }
.clock-dial__note { margin: .7rem 0 0; color: #5e5869; font-size: .72rem; line-height: 1.45; }

/* ------------------------------------ topology-map (wheeling paths, voltage tiers) */
.topology-map__tier { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .7rem; align-items: stretch; padding: .75rem 0; border-top: 1px solid #ece5d9; }
.topology-map__tier:first-of-type { padding-top: 0; border-top: 0; }
.topology-map__tier:last-child { padding-bottom: 0; }
.topology-map__tier-label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .4rem .3rem; border-radius: 9px; color: #fff; background: var(--webill-ink); text-align: center; }
.topology-map__tier-label strong, #manual-content .topology-map__tier-label strong { color: #fff; font-size: .72rem; line-height: 1.2; }
.topology-map__tier-label span { color: #dedceb; font-size: .58rem; text-transform: uppercase; letter-spacing: .03em; }
.topology-map__nodes { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.topology-map__node { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: .5rem .6rem; border: 1px solid #ddd7ca; border-radius: 8px; background: #fff; }
.topology-map__node strong { color: #3f385d; font-size: .74rem; line-height: 1.2; }
.topology-map__node small { margin-top: .08rem; color: #686176; font-size: .6rem; line-height: 1.25; }
.topology-map__node--gen    { border-color: #e9c560; background: #fff4c9; }
.topology-map__node--load   { border-color: #8bc5ad; background: #e8f7f0; }
.topology-map__node--trader { border-color: #a89bc5; background: #eeeaf8; }
.topology-map__node--grid   { border-color: #d99a9a; background: #fff0f0; }
.topology-map__node--munix  { border-color: #8ecae6; background: #e4f5fc; }
.topology-map__node--meter  { border-style: dashed; border-color: #9587b4; background: #faf8ff; }
.topology-map__flow { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; min-width: 3.6rem; color: #796a3d; font-size: .56rem; font-weight: 750; line-height: 1.15; text-align: center; }
.topology-map__flow b { color: var(--webill-green-deep); font-size: 1rem; line-height: 1; }
.topology-map__drop { grid-column: 2; margin-top: -.15rem; color: #76662f; font-size: .6rem; font-weight: 750; text-align: center; }
.topology-map__drop b { display: block; color: var(--webill-green-deep); font-size: 1rem; line-height: 1; }

/* ------------------------------------------- glossary (master, on the hub) */
.glossary { display: grid; grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr); margin: 1.6rem 0; overflow: hidden; border: 1px solid #e4d5b7; border-radius: 12px; background: #fff; font-size: .88rem; line-height: 1.5; }
.glossary dt { padding: .6rem .8rem; border-top: 1px solid #f0e9db; color: #514775; font-weight: 750; scroll-margin-top: 24px; }
.glossary dd { margin: 0; padding: .6rem .9rem .6rem 0; border-top: 1px solid #f0e9db; color: #3d3d55; }
.glossary dt:first-of-type, .glossary dt:first-of-type + dd { border-top: 0; }
.glossary dt:target, .glossary dt:target + dd { background: var(--webill-green-soft); }
.glossary__refs { display: block; margin-top: .18rem; color: #8a7b52; font-size: .72rem; }
@media (max-width: 680px) {
  .glossary { grid-template-columns: 1fr; }
  .glossary dd { padding: 0 .8rem .6rem; border-top: 0; }
  .glossary dt { padding-bottom: .15rem; }
}
@media print { .glossary { break-inside: auto; } .glossary dt, .glossary dd { break-inside: avoid; } }

/* tab-sample: keep replicas inside the main content column.
 * Legacy `.tab-sample__screen table { min-width: 610px }` is fine for one
 * table (horizontal scroll). Two side-by-side cards would otherwise force
 * ~1220px and break out of `#manual-content`. */
.tab-samples,
.tab-sample,
.tab-sample__screen {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}
.tab-sample__margin-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.tab-sample__margin-cards > div {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid #eee8de;
  border-radius: 8px;
  background: #fffdf9;
}
.tab-sample__margin-cards > div > p {
  margin: 0 0 0.4rem;
  color: #3f385d;
  font-size: 0.78rem;
  font-weight: 750;
}
.tab-sample__margin-cards table {
  display: table;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: 0.68rem;
}
.tab-sample__margin-cards th,
.tab-sample__margin-cards td {
  min-width: 0;
  white-space: normal;
}
@media (max-width: 960px) {
  .tab-sample__margin-cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 680px) {
  .entity-map, .lifecycle-rail, .pipeline-spine, .ledger-table, .clock-dial, .topology-map,
  .pricing-flow, .tab-sample { padding: .85rem; }
  .entity-map__lane { display: grid; grid-template-columns: 1fr; }
  .entity-map__rel { min-height: 1.7rem; }
  .pipeline-spine__stages { flex-wrap: wrap; }
  .pipeline-spine__stage { flex: 1 1 42%; }
  .pipeline-spine__arrow { display: none; }
  .pipeline-spine--locator .pipeline-spine__stage { flex: 1 1 28%; }
  .setup-stage-map { padding: .85rem; }
  .clock-dial__layout { grid-template-columns: 1fr; }
  .clock-dial__strip { grid-template-columns: repeat(16, minmax(1rem, 1fr)); }
  .clock-dial__strip--hours { grid-template-columns: repeat(12, minmax(1rem, 1fr)); }
  .topology-map__tier { grid-template-columns: 1fr; }
  .topology-map__tier-label { flex-direction: row; gap: .4rem; padding: .35rem .4rem; }
  .topology-map__nodes { display: grid; grid-template-columns: 1fr 1fr; }
  .topology-map__flow { min-height: 1.6rem; }
  .pricing-flow__lane { grid-template-columns: 1fr; }
  .pricing-flow__path { flex-wrap: wrap; }
  .tab-samples { display: grid; gap: .85rem; }
}

/* ------------------------------------------------------------------- print */
@media print {
  .entity-map, .lifecycle-rail, .pipeline-spine, .ledger-table, .clock-dial, .topology-map,
  .setup-stage-map, .pricing-flow, .tab-sample, .tab-samples, .allocation-diagram,
  .priority-prorata-diagram, .rule-example-diagram, .run-chart-example, .run-chart-examples {
    break-inside: avoid; box-shadow: none;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .ledger-table__screen, .tab-sample__screen { overflow: visible; }
  .pricing-flow__path, .tab-samples { flex-wrap: wrap; }
  .manual-footer {
    grid-column: 1 / -1; border-top: 1px solid #ddd7ca; margin-top: 2rem;
    color: #303046; font-size: .75rem;
  }
  .manual-footer a { color: #a76e03; }
  .manual-footer strong, .manual-footer code { color: #303046; }
}

/* -------------------------------------------------------------- manual home */
/* Third-level TOC (N.M.K under N.M) — same rail as §-level nest, slightly quieter. */
#TOC ul ul ul { margin: 2px 0 6px 10px; }
#TOC ul ul ul a { font-size: .72rem; color: #a8a8bc; }

.manual-home-wrap { margin: 0; }
.manual-home {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .55rem; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; color: #fff4d9 !important; background: rgba(255, 255, 255, .08);
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.manual-home:hover {
  border-color: var(--webill-green); color: #fff !important;
  background: rgba(250, 169, 25, .18);
}
@media print {
  .manual-home-wrap { display: none; }
}

/* ----------------------------------------------------------- publish footer
   Lives as a body-grid sibling under the dark chrome (below the TOC column /
   spanning the page). Use light-on-ink colours so it stays readable. */
.manual-footer {
  flex: 1 0 100%;
  grid-column: 1 / -1;
  margin: 1.25rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: #ffffff; font-size: .78rem; line-height: 1.45;
}
.manual-footer p { margin: 0; color: #ffffff; }
.manual-footer strong { color: #ffffff; }
.manual-footer code {
  color: #fff4d9; background: transparent; font-size: .85em;
}
.manual-footer a {
  color: var(--webill-green); font-weight: 700;
  text-decoration-color: rgba(250, 169, 25, .55);
}
.manual-footer a:hover { color: #fff4d9; }

/* === M5 IPP figure families (from docs/IPP/USER-MANUAL.html) === */
/* Band swatches — mirror the in-app HAF palette (HAF.md §4.3). */
    .band{display:inline-block;padding:.05em .5em;border-radius:999px;color:#fff;font-size:.8rem;font-weight:700;}
    .band.high{background:#10b981;} .band.good{background:#84cc16;}
    .band.moderate{background:#f59e0b;} .band.low{background:#ef4444;}
    .band.nodata{background:#94a3b8;}
    /* Strategy limit-severity badges (ok / warn / breach) — match in-app colours */
    .band.ok{background:#10b981;} .band.warn{background:#f59e0b;} .band.breach{background:#ef4444;}

    /* ── IPP-manual visualizations (self-contained, ipp- prefixed) ── */
    .ipp-fig { margin:1.5rem 0; padding:1.15rem; border:1px solid #e4d5b7; border-radius:14px; background:#fffdf8; box-shadow:0 8px 20px rgba(64,64,104,.08); }
    .ipp-fig figcaption { margin-bottom:.9rem; color:#404068; font-size:.95rem; font-weight:800; }
    .ipp-fig figcaption small { display:block; margin-top:.1rem; color:#857b69; font-size:.72rem; font-weight:600; }

    /* Horizontal chain of nodes */
    .ipp-chain { display:flex; align-items:stretch; gap:.45rem; }
    .ipp-chain__node { display:flex; flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; padding:.6rem .68rem; border:1px solid #ddd7ca; border-radius:8px; background:#fff; }
    .ipp-chain__node small { color:#686176; font-size:.63rem; line-height:1.3; }
    .ipp-chain__node strong { margin-top:.1rem; color:#3f385d; font-size:.8rem; line-height:1.25; }
    .ipp-chain__node--in { border-color:#e9c560; background:#fff4c9; }
    .ipp-chain__node--calc { border-color:#a89bc5; background:#eeeaf8; }
    .ipp-chain__node--out { border-color:#8bc5ad; background:#e8f7f0; }
    .ipp-chain__arrow { display:flex; flex:0 0 auto; flex-direction:column; align-items:center; justify-content:center; color:#796a3d; font-size:.58rem; font-weight:750; line-height:1.15; text-align:center; }
    .ipp-chain__arrow b { color:#be7f05; font-size:1.05rem; line-height:1; }

    /* Stacked horizontal bars */
    .ipp-bars { display:grid; gap:.8rem; }
    .ipp-bar-row__head { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.25rem; color:#4c4663; font-size:.75rem; }
    .ipp-bar-row__head span { font-variant-numeric:tabular-nums; font-weight:750; }
    .ipp-bar-track { border-radius:7px; background:#f0edf4; }
    .ipp-bar { display:flex; min-height:2rem; overflow:hidden; border-radius:7px; }
    .ipp-seg { display:flex; flex:0 0 var(--w); box-sizing:border-box; align-items:center; justify-content:center; padding:.2rem; min-width:0; overflow:hidden; color:#303046; font-size:.63rem; font-weight:800; line-height:1.1; text-align:center; white-space:nowrap; }
    .ipp-seg--p1 { background:#f0bd3e; } .ipp-seg--p2 { background:#f7d478; } .ipp-seg--p3 { background:#fce7b3; }
    .ipp-seg--r1 { background:#8fa3e0; } .ipp-seg--r2 { background:#b3c1ec; } .ipp-seg--r3 { background:#d4dcf6; }
    .ipp-seg--f1 { background:#74659a; color:#fff; } .ipp-seg--f2 { background:#9a8cc0; color:#fff; } .ipp-seg--f3 { background:#c3b9dd; }
    .ipp-seg--surplus { background:#63bf9a; }
    .ipp-seg--short { background:repeating-linear-gradient(135deg,#c55353,#c55353 6px,#d97c7c 6px,#d97c7c 12px); color:#fff; }
    .ipp-legend { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.85rem; color:#666176; font-size:.68rem; }
    .ipp-legend span { display:inline-flex; align-items:center; gap:.32rem; }
    .ipp-key { display:inline-block; width:.68rem; height:.68rem; border-radius:2px; }

    /* Factor / score bars */
    .ipp-factors { display:grid; gap:.45rem; }
    .ipp-factor { display:grid; grid-template-columns:8.2rem minmax(0,1fr) 3.6rem; align-items:center; gap:.65rem; font-size:.74rem; color:#4c4663; }
    .ipp-factor > span:first-child { font-weight:750; }
    .ipp-factor__track { overflow:hidden; height:.85rem; border-radius:99px; background:#f0edf4; }
    .ipp-factor__fill { height:100%; border-radius:99px; background:linear-gradient(90deg,#faa919,#be7f05); }
    .ipp-factor__fill--band-high { background:#10b981; }
    .ipp-factor__fill--band-good { background:#84cc16; }
    .ipp-factor__fill--band-moderate { background:#f59e0b; }
    .ipp-factor__fill--band-low { background:#ef4444; }
    .ipp-factor__val { font-variant-numeric:tabular-nums; font-weight:800; color:#3f385d; text-align:right; }

    /* Step-by-step calculation card */
    .ipp-calc { margin:1.2rem 0; padding:.95rem 1.1rem; border-left:4px solid #faa919; border-radius:0 10px 10px 0; background:#fff8e8; font-size:.88rem; }
    .ipp-calc p { margin:.45rem 0; }
    .ipp-calc .ipp-calc__result { padding-top:.45rem; border-top:1px dashed #e0cfa4; color:#3f385d; font-weight:750; }

    /* Directory KPI explainers (V3 §2.3) — one discrete card per portfolio stat.
     * Keep cards inside `#manual-content`: legacy `th, td { min-width: 130px }`
     * would otherwise let a wide in-card table force ~780px+ and blow the column
     * (same failure mode as `.tab-sample__margin-cards`). */
    .directory-stats {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
      gap:1rem;
      margin:1.1rem 0 1.4rem;
      box-sizing:border-box;
      width:100%;
      max-width:100%;
      min-width:0;
    }
    .directory-stat {
      box-sizing:border-box;
      margin:0; padding:1rem 1.15rem 1.05rem;
      border:1px solid #e4d5b7; border-left-width:5px; border-radius:12px;
      background:#fffdf8; box-shadow:0 6px 16px rgba(64,64,104,.06);
      break-inside:avoid;
      min-width:0;
      max-width:100%;
      overflow-x:auto;
    }
    .directory-stat--coverage { border-left-color:#0ea5e9; }
    .directory-stat--margin { border-left-color:#10b981; }
    .directory-stat--mar { border-left-color:#f59e0b; }
    .directory-stat--spill { border-left-color:#8b5cf6; }
    .directory-stat--shortfall { border-left-color:#f43f5e; }
    /* V9 TODO priority grades (left rail matches band chip) */
    .directory-stat--todo-urgent { border-left-color:#ef4444; }
    .directory-stat--todo-intermediate { border-left-color:#f59e0b; }
    .directory-stat--todo-nice { border-left-color:#0ea5e9; }
    .band.todo-urgent { background:#ef4444; }
    .band.todo-intermediate { background:#f59e0b; }
    .band.todo-nice { background:#0ea5e9; }
    .directory-stat > :first-child { margin-top:0; }
    .directory-stat > :last-child { margin-bottom:0; }
    .directory-stat h5 {
      margin:0 0 .65rem; padding-bottom:.45rem;
      border-bottom:1px solid #ece5d9;
      color:#404068; font-size:1rem; font-weight:800; line-height:1.35;
    }
    .directory-stat p { margin:.5rem 0; }
    .directory-stat pre {
      margin:.65rem 0; padding:.65rem .75rem;
      border:1px solid #ece5d9; border-radius:8px;
      background:#fff; overflow-x:auto;
      font-size:.78rem; line-height:1.45;
    }
    .directory-stat table {
      display:block;
      box-sizing:border-box;
      width:100%;
      max-width:100%;
      min-width:0;
      margin:.55rem 0 0;
      overflow-x:auto;
      font-size:.78rem;
    }
    .directory-stat th,
    .directory-stat td {
      min-width:0;
      padding:.35rem .45rem;
      white-space:nowrap;
    }

    /* Numbered ladder (fallback chains) */
    .ipp-ladder { display:grid; gap:.5rem; }
    .ipp-ladder__step { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.65rem; align-items:center; padding:.6rem .75rem; border:1px solid #e8e2d8; border-radius:9px; background:#fff; }
    .ipp-ladder__num { display:flex; width:1.65rem; height:1.65rem; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:#404068; font-size:.75rem; font-weight:800; }
    .ipp-ladder__step small { display:block; color:#686176; font-size:.7rem; line-height:1.35; }
    .ipp-ladder__step strong { color:#3f385d; font-size:.82rem; }
    .ipp-ladder__step--warn { border-color:#e5bcbc; background:#fff6f6; }
    .ipp-ladder__step--warn .ipp-ladder__num { background:#c55353; }

    /* Guard scenarios */
    .ipp-scenarios { display:grid; gap:.75rem; }
    .ipp-scenario { display:grid; grid-template-columns:5.2rem minmax(0,1fr); gap:.75rem; align-items:stretch; }
    .ipp-scenario__tag { display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:9px; color:#fff; background:#404068; text-align:center; }
    .ipp-scenario__tag strong { color:inherit; font-size:.82rem; font-variant-numeric:tabular-nums; }
    .ipp-scenario__tag span { color:#dedceb; font-size:.6rem; text-transform:uppercase; }
    .ipp-scenario__tag--warn { background:#9d6a1c; }
    .ipp-scenario__tag--block { background:#9d4141; }

    /* Capacity-widget mock */
    .ipp-widget { max-width:36rem; overflow:hidden; margin:0 auto; border:1px solid #ddd3c0; border-radius:12px; background:#fff; font-size:.78rem; color:#3f385d; }
    .ipp-widget__head { display:flex; justify-content:space-between; gap:1rem; padding:.6rem .9rem; color:#fff; background:#404068; font-weight:750; font-size:.72rem; letter-spacing:.03em; }
    .ipp-widget__hero { display:flex; align-items:center; gap:1.1rem; padding:.95rem .9rem .3rem; }
    .ipp-widget__hero--stack { flex-direction:column; text-align:center; gap:.65rem; }
    .ipp-widget__hero--stack .ipp-gauge { flex:0 0 auto; margin:0 auto; }
    .ipp-widget__hero--stack .ipp-widget__mwh { text-align:center; }
    .ipp-gauge { position:relative; flex:0 0 5.4rem; width:5.4rem; height:5.4rem; border-radius:50%; background:conic-gradient(#f59e0b 0 202deg, #efe9dd 202deg 360deg); }
    .ipp-gauge::after { content:"0.563"; position:absolute; inset:.7rem; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:#3f385d; font-size:.95rem; font-weight:800; font-variant-numeric:tabular-nums; }
    .ipp-widget__headline { min-width:0; }
    .ipp-widget__headline small { color:#686176; font-size:.7rem; }
    .ipp-widget__headline .ipp-widget__mwh { display:block; margin:.1rem 0; color:#2c2c4c; font-size:1.35rem; font-weight:850; letter-spacing:-.02em; }
    .ipp-widget__tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; padding:.8rem .9rem .4rem; }
    .ipp-widget__tier { padding:.5rem .55rem; border:1px solid #e5ded2; border-radius:8px; text-align:center; }
    .ipp-widget__tier--active { border-color:#faa919; background:#fff8e8; box-shadow:inset 0 0 0 1px #faa919; }
    .ipp-widget__tier small { display:block; color:#6b6379; font-size:.6rem; font-weight:800; letter-spacing:.05em; }
    .ipp-widget__tier strong { display:block; margin:.12rem 0; color:#3f385d; font-size:.85rem; font-variant-numeric:tabular-nums; }
    .ipp-widget__rows { margin:.5rem .9rem .9rem; border-top:1px solid #ece5d9; }
    .ipp-widget__rows div { display:flex; justify-content:space-between; gap:1rem; padding:.34rem 0; border-bottom:1px dashed #efe8db; font-size:.72rem; color:#5d5868; }
    .ipp-widget__rows div strong { color:#3f385d; font-variant-numeric:tabular-nums; }

    /* Timeline */
    .ipp-timeline { display:flex; align-items:stretch; gap:.45rem; }
    .ipp-timeline__stop { display:flex; flex:1 1 0; min-width:0; flex-direction:column; padding:.6rem .65rem; border:1px solid #ddd7ca; border-radius:8px; background:#fff; }
    .ipp-timeline__stop small { color:#857b69; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
    .ipp-timeline__stop strong { margin:.15rem 0 .1rem; color:#3f385d; font-size:.78rem; }
    .ipp-timeline__stop span { color:#686176; font-size:.66rem; line-height:1.35; }

/* Zone register dots — same palette as the SO/MO zone swatch */
#manual-content .zone-code { white-space: nowrap; }
#manual-content .zone-dot {
  display: inline-block; width: .55em; height: .55em; margin-right: .35em;
  border-radius: 50%; vertical-align: .08em; box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
#manual-content .zone-dot--z1 { background: #1769e0; }
#manual-content .zone-dot--z2 { background: #0c8a7a; }
#manual-content .zone-dot--z3 { background: #be7f05; }
#manual-content .zone-dot--z4 { background: #8072af; }
#manual-content .zone-dot--z5 { background: #c45a5a; }
#manual-content .zone-dot--z6 { background: #539cb9; }
#manual-content .zone-dot--z7 { background: #6aaa8a; }
#manual-content .zone-dot--z8 { background: #c99728; }
#manual-content .zone-dot--z9 { background: #9a5ba6; }

    @media (max-width: 680px) {
      .ipp-chain, .ipp-timeline { flex-direction:column; }
      .ipp-chain__arrow { transform:rotate(90deg); min-height:1.4rem; }
      .ipp-factor { grid-template-columns:6.4rem minmax(0,1fr) 3.2rem; }
      .ipp-scenario { grid-template-columns:1fr; }
      .ipp-scenario__tag { flex-direction:row; gap:.5rem; padding:.4rem; }
      .ipp-widget__tiers { grid-template-columns:1fr; }
      .ipp-seg { font-size:.55rem; }
    }

/* Contents finder uses the manual shell's existing palette. */
.manual-chapter-search {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--webill-paper);
  color: var(--webill-ink);
  font: inherit;
}
.manual-chapter-search:focus-visible {
  outline: 2px solid var(--webill-green);
  outline-offset: 2px;
}