/* page-modules.css: Plant Toolbox modules (wrapper #p-modules).
   Generated by .plans/site-overhaul/tools/port.py from ptb-site-overhaul-src/css/p-modules.css, then rebuilt for the
   design pass (D55, D56, D57, D60) and swept (D61: sans labels, mono only for ids and times, no .rv reveals).
   One theme, light. Loaded after site.css. */

/* ==========================================================================
   p-modules.css · Modules inner page. Every selector starts with #p-modules.
   Sections: page header = the hero map (p50-modules-1, 01-header: "Many modules, one system, connected through Action Planning", ten module
   nodes into the Action Planning hub, played by content/js/modules-map.js; §1 and §6) · every module as a deck, one
   card per module in the Technology decision-model card system, each with its own line drawing, rendered from
   Modules.php moduleData() and run by content/js/modules.js (2-5b) · Start with the Core 4, four cards that slide in
   once (7) · the closing band, #pm-next (8). Loss Elimination, one stop to an owned fix (03b-loss, #pa-loss, from /action-planning on
   2026-10-26), is parked in content/views/modules/.parking-lot/.
   State: none in CSS. Review 1, R1·15 removed the role filter (its radio group, role line and §5 filter states), so
   the deck always holds every module. No module count anywhere (G10). Tokens only.
   ========================================================================== */

/* 1. Page header = the hero map (owner ask 2026-10-27). The copy on top (eyebrow, h1, lead), the map (§6) under it
   across the container. From 768 the header starts 64px down, not the inner headers' 96, so at 1440 × 900 the map
   starts above the fold. No chip TOC: the deck of every module follows the Core 4. */
#p-modules .pm-head .lead { max-width: 46em; }
#p-modules .pm-head .pm-map { margin-top: var(--s-6); }
@media (min-width: 768px) {
  #p-modules .pm-head { padding-top: var(--s-8); }
  #p-modules .pm-head .pm-map { margin-top: var(--s-7); }
}

/* 2. Every module: section head, tag key, the deck's bar ----------------------------------------------------------
   No role filter (R1·15). The bar (rail, previous, next) ships hidden and modules.js shows it; the rail is the window
   of cards in view along the whole row, so no module count is printed (G10). */
#p-modules .pm-families .section-head { margin-bottom: var(--s-5); }
#p-modules .pm-families .section-head h2 { max-width: 24em; }
#p-modules .pm-tools { display: grid; gap: var(--s-3); min-width: 0; margin-bottom: var(--s-5); }

/* Tag key: one line of tag + meaning per status (Core 4, the one tag the key explains since R1·1). Desktop: a
   wrapping row. Phone: a two-column legend, so a tag never strands its meaning on a line of its own. */
#p-modules .pm-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); max-width: none; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
#p-modules .pm-key-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
#p-modules .pm-key-text { min-width: 0; }
@media (max-width: 767px) {
  #p-modules .pm-key { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: var(--s-2) var(--s-3); }
  #p-modules .pm-key-item { display: contents; }
  #p-modules .pm-key .tag { justify-self: start; }
  #p-modules .pm-key-text { padding-top: 2px; }
}

#p-modules .pm-deck-bar { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
#p-modules .pm-deck-bar[hidden] { display: none; }
#p-modules .pm-deck-rail { position: relative; width: min(200px, 40%); height: 3px; margin-right: auto; background: var(--hairline); border-radius: 2px; }
#p-modules .pm-deck-rail i {
  position: absolute;
  inset-block: 0;
  left: calc(var(--pm-from, 0) * 100%);
  width: calc(var(--pm-span, 1) * 100%);
  background: var(--ink);
  border-radius: 2px;
}
#p-modules .pm-deck-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast) ease-out, border-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
#p-modules .pm-deck-btn .icon { width: 16px; height: 16px; }
#p-modules .pm-deck-btn:hover:not(:disabled) { background: var(--ink); color: var(--surface); }
#p-modules .pm-deck-btn:disabled { border-color: var(--hairline); color: var(--line-strong); cursor: default; }

/* 3. The deck (#pm-deck, Modules.php renderModuleDeck; the Technology decision-models deck's pattern) ---------------
   The list itself is the scroller: a sideways scroll-snap row of grid columns that starts on the content edge and runs
   on to the window's edge, so the next card shows past the container. --pmd-edge is that content edge (the sum
   .container makes); it pads the row and is where each card snaps. Three cards fill the content width from 1024, two
   from 720, one with the next one showing below. Once modules.js runs it (.is-paged) the scroll bar hides. */
#p-modules .pm-deck {
  --pmd-edge: max(var(--gutter), (100% - var(--container)) / 2 + var(--gutter));
  --pmd-gap: var(--s-4);
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% - 32px);
  gap: var(--pmd-gap);
  margin: 0;
  padding: 2px var(--pmd-edge) var(--s-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pmd-edge);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
@media (min-width: 720px) { #p-modules .pm-deck { grid-auto-columns: calc((100% - var(--pmd-gap)) / 2); } }
@media (min-width: 1024px) { #p-modules .pm-deck { --pmd-gap: var(--s-5); grid-auto-columns: calc((100% - 2 * var(--pmd-gap)) / 3); } }
#p-modules .pm-deck:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#p-modules .pm-deck.is-paged { padding-bottom: 2px; scrollbar-width: none; }
#p-modules .pm-deck.is-paged::-webkit-scrollbar { display: none; }

/* 4. Module cards: the index, the name (the whole card is its link), the family, a white panel with what it feeds the
   plan with, what it does, and a foot behind a hairline: "Learn more", with the Core 4 tag at the right (Early access removed, Review 1, 2026-10-30). With subgrid every
   card's six parts share the deck's six rows, so names, panels and feet line up across the row; without it each card
   is a column of its own. modules.js sets --pm-in (0 outside the content width, 1 inside), so the cards outside the
   ones in focus fade as they slide; without the script it stays 1. Action Planning, the hub, keeps an accent top edge;
   a card a link lands on (/modules#pm-m-<key>) takes the action edge. */
#p-modules .pm-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-5);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  scroll-snap-align: start;
  opacity: calc(0.18 + 0.82 * var(--pm-in, 1));
  transition: border-color var(--t-fast) ease-out;
}
/* module-pages-parked 2026-10-28: #p-modules .pm-card:hover { border-color: var(--line-strong); } */
#p-modules .pm-card--hub { box-shadow: inset 0 2px 0 var(--teal); }
#p-modules .pm-card:target { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
@supports (grid-template-rows: subgrid) {
  #p-modules .pm-deck { grid-template-rows: repeat(6, auto); row-gap: 0; }
  #p-modules .pm-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: var(--s-3); }
}
#p-modules .pm-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 26px; }
#p-modules .pm-idx { margin-right: auto; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }
#p-modules .pm-name { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); }
/* module-pages-parked 2026-10-28: the name is plain text while the module pages are parked, so the .pm-name a rules
   below (the ::after cover that made the whole card the link) and the .link-ghost one match nothing. Kept for the restore. */
#p-modules .pm-name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--hairline);
  transition: color var(--t-fast) ease-out, text-decoration-color var(--t-fast) ease-out;
}
#p-modules .pm-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-card); }
#p-modules .pm-card:hover .pm-name a { color: var(--link-hover); text-decoration-color: currentColor; }
#p-modules .pm-name a:focus-visible { outline: none; }
#p-modules .pm-name a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; }
/* The links inside the card sit above the card's cover. */
#p-modules .pm-card .pm-card-foot .link-ghost { position: relative; z-index: 2; }
#p-modules .pm-card-sub { margin-top: calc(-1 * var(--s-2)); font-size: 14px; line-height: 1.4; color: var(--ink-3); }
#p-modules .pm-card-see {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
#p-modules .pm-card-k { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }
#p-modules .pm-card-does .pm-card-k { margin-bottom: 4px; }
/* The mark: the KPI names (.kpi-name, no bolt: D04), or for a module with no KPI the two halves of its via line. */
#p-modules .pm-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 26px; max-width: none; }
#p-modules .pm-via {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 1px 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-2);
}
#p-modules .pm-feeds { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
#p-modules .pm-job { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
/* The card foot: "Learn more" and the Core 4 tag (the Early access tag left in Review 1, 2026-10-30). */
#p-modules .pm-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
#p-modules .pm-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#p-modules .pm-card-foot .link-ghost { font-size: 14px; }
/* The hero map's hub row shares the chip row. */
#p-modules .pm-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; }

/* 4b. Line art: each card's own faint plant-floor drawing, top right, bleeding off the card's edge. One drawing per
   module, kept off the Technology cards' AI motifs: Operations a conveyor with two machines and a gauge; Autonomous
   Maintenance a gear on its centre marks, a wrench and a centerline scale; Loss Elimination a fishbone; Action Planning
   four tiers as stairs with an escalation arrow; Preventative Maintenance a month grid over an asset tree; Quality a
   batch record under a seal; Production Execution a step flow; Safety a shield, a hard hat and a permit tag; People a
   roster behind three figures; Supply Stream gantt bars on a timeline; Inventory crates on a pallet with a QR label.
   The drawing is the --pm-art mask (stroked SVG, 240 × 200, drawn at 0.8 so a stroke is about 1.2px); it is the action blue
   at 0.08 (0.12 on hover), the same strength as the Technology cards' art (page-decision-models.css §3), so it never
   competes with the words. ::after lays a blueprint dot
   grid that fades out from the same corner. Both sit under the content (z-index -1 inside the card's isolation). No
   drift under reduced motion; no art in forced colors. Built by .plans/site-overhaul/tools/modules-card-art.py:
   edit the drawings there and re-paste its art.css. */
#p-modules .pm-card::before,
#p-modules .pm-card::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
#p-modules .pm-card::before {
  top: -14px;
  right: -22px;
  width: 192px;
  height: 160px;
  background: var(--action);
  opacity: 0.08;
  -webkit-mask: var(--pm-art) right top / 192px 160px no-repeat;
  mask: var(--pm-art) right top / 192px 160px no-repeat;
  transition: transform 700ms ease-out, opacity 300ms ease-out;
}
#p-modules .pm-card::after {
  top: 0;
  right: 0;
  width: 75%;
  height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 0.8px, transparent 1.3px) 0 0 / 12px 12px;
  -webkit-mask: radial-gradient(farthest-side at 100% 0, #000, transparent);
  mask: radial-gradient(farthest-side at 100% 0, #000, transparent);
}
/* module-pages-parked 2026-10-28: #p-modules .pm-card:hover::before { transform: translate(-5px, 4px); opacity: 0.12; } */
@media (prefers-reduced-motion: reduce) {
  #p-modules .pm-card::before { transition: none; }
  /* module-pages-parked 2026-10-28: #p-modules .pm-card:hover::before { transform: none; } */
}
@media (forced-colors: active) {
  #p-modules .pm-card::before, #p-modules .pm-card::after { display: none; }
  #p-modules .pm-deck-btn:disabled { border-color: GrayText; color: GrayText; }
  #p-modules .pm-card:target { outline: 2px solid Highlight; }
}
#p-modules #pm-m-operations { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 192 H240 M30 164 V192 M210 164 V192'/%3E%3Crect x='8' y='150' width='224' height='14' rx='7'/%3E%3Ccircle cx='16' cy='157' r='3.5'/%3E%3Ccircle cx='42' cy='157' r='3.5'/%3E%3Ccircle cx='68' cy='157' r='3.5'/%3E%3Ccircle cx='94' cy='157' r='3.5'/%3E%3Ccircle cx='120' cy='157' r='3.5'/%3E%3Ccircle cx='146' cy='157' r='3.5'/%3E%3Ccircle cx='172' cy='157' r='3.5'/%3E%3Ccircle cx='198' cy='157' r='3.5'/%3E%3Ccircle cx='224' cy='157' r='3.5'/%3E%3Crect x='34' y='86' width='56' height='64' rx='2'/%3E%3Cpath d='M42 86 L50 64 H74 L82 86'/%3E%3Crect x='46' y='100' width='32' height='22' rx='2'/%3E%3Ccircle cx='51' cy='136' r='2.5'/%3E%3Ccircle cx='59' cy='136' r='2.5'/%3E%3Cpath d='M62 64 V52'/%3E%3Crect x='128' y='104' width='48' height='46' rx='2'/%3E%3Ccircle cx='152' cy='88' r='13'/%3E%3Ccircle cx='152' cy='88' r='3.5'/%3E%3Cpath d='M140 92 L130 104 M164 92 L174 104'/%3E%3Crect x='100' y='136' width='12' height='14' rx='1'/%3E%3Crect x='186' y='136' width='12' height='14' rx='1'/%3E%3Crect x='12' y='136' width='12' height='14' rx='1'/%3E%3Ccircle cx='204' cy='46' r='24'/%3E%3Cpath d='M185.8 56.5 L190.1 54'/%3E%3Cpath d='M183 46 L186 46'/%3E%3Cpath d='M185.8 35.5 L190.1 38'/%3E%3Cpath d='M193.5 27.8 L195 30.4'/%3E%3Cpath d='M204 25 L204 30'/%3E%3Cpath d='M214.5 27.8 L213 30.4'/%3E%3Cpath d='M222.2 35.5 L217.9 38'/%3E%3Cpath d='M225 46 L222 46'/%3E%3Cpath d='M222.2 56.5 L217.9 54'/%3E%3Cpath d='M204 46 L212 34.5'/%3E%3Ccircle cx='204' cy='46' r='2.5'/%3E%3Cpath d='M204 70 V82 H186 V104' stroke-dasharray='3 3'/%3E%3Cpath d='M100 176 H150 M144 172 L150 176 L144 180'/%3E%3C/svg%3E"); }
#p-modules #pm-m-am { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M188 82 L195.9 84.9 L195.1 91.1 L186.7 91.8 L182.9 101 L188.3 107.5 L184.5 112.4 L176.9 108.9 L169 114.9 L170.5 123.2 L164.7 125.6 L159.8 118.7 L150 120 L147.1 127.9 L140.9 127.1 L140.2 118.7 L131 114.9 L124.5 120.3 L119.6 116.5 L123.1 108.9 L117.1 101 L108.8 102.5 L106.4 96.7 L113.3 91.8 L112 82 L104.1 79.1 L104.9 72.9 L113.3 72.2 L117.1 63 L111.7 56.5 L115.5 51.6 L123.1 55.1 L131 49.1 L129.5 40.8 L135.3 38.4 L140.2 45.3 L150 44 L152.9 36.1 L159.1 36.9 L159.8 45.3 L169 49.1 L175.5 43.7 L180.4 47.5 L176.9 55.1 L182.9 63 L191.2 61.5 L193.6 67.3 L186.7 72.2Z'/%3E%3Ccircle cx='150' cy='82' r='14'/%3E%3Ccircle cx='176' cy='82' r='3'/%3E%3Ccircle cx='163' cy='104.5' r='3'/%3E%3Ccircle cx='137' cy='104.5' r='3'/%3E%3Ccircle cx='124' cy='82' r='3'/%3E%3Ccircle cx='137' cy='59.5' r='3'/%3E%3Ccircle cx='163' cy='59.5' r='3'/%3E%3Cpath d='M88 82 H212 M150 20 V144' stroke-dasharray='12 4 2 4'/%3E%3Cg transform='rotate(-38 80 150)'%3E%3Cpath d='M133.5 156.1 A13 13 0 1 1 133.5 143.9 L126 146 L126 154 Z'/%3E%3Cpath d='M40 146 H110 M40 154 H110'/%3E%3Ccircle cx='31' cy='150' r='10'/%3E%3Ccircle cx='31' cy='150' r='4.5'/%3E%3C/g%3E%3Cpath d='M12 34 H96'/%3E%3Cpath d='M12 34 V28'/%3E%3Cpath d='M24 34 V31'/%3E%3Cpath d='M36 34 V28'/%3E%3Cpath d='M48 34 V31'/%3E%3Cpath d='M60 34 V28'/%3E%3Cpath d='M72 34 V31'/%3E%3Cpath d='M84 34 V28'/%3E%3Cpath d='M96 34 V31'/%3E%3Crect x='42' y='22' width='26' height='12' rx='1' stroke-dasharray='2 2'/%3E%3Cpath d='M55 40 L51 47 H59 Z'/%3E%3C/svg%3E"); }
#p-modules #pm-m-le { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 100 H196'/%3E%3Cpath d='M196 80 L232 100 L196 120 Z'/%3E%3Cpath d='M70 100 L36 44 M70 100 L36 156'/%3E%3Crect x='18' y='28' width='34' height='14' rx='2'/%3E%3Crect x='18' y='158' width='34' height='14' rx='2'/%3E%3Cpath d='M58.1 80.4 H40.1 M58.1 119.6 H40.1'/%3E%3Cpath d='M47.9 63.6 H29.9 M47.9 136.4 H29.9'/%3E%3Cpath d='M122 100 L88 44 M122 100 L88 156'/%3E%3Crect x='70' y='28' width='34' height='14' rx='2'/%3E%3Crect x='70' y='158' width='34' height='14' rx='2'/%3E%3Cpath d='M110.1 80.4 H92.1 M110.1 119.6 H92.1'/%3E%3Cpath d='M99.9 63.6 H81.9 M99.9 136.4 H81.9'/%3E%3Cpath d='M174 100 L140 44 M174 100 L140 156'/%3E%3Crect x='122' y='28' width='34' height='14' rx='2'/%3E%3Crect x='122' y='158' width='34' height='14' rx='2'/%3E%3Cpath d='M162.1 80.4 H144.1 M162.1 119.6 H144.1'/%3E%3Cpath d='M151.9 63.6 H133.9 M151.9 136.4 H133.9'/%3E%3C/svg%3E"); }
#p-modules #pm-m-ap { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 184 H20 V150 H70 V116 H120 V82 H170 V48 H232 V184'/%3E%3Crect x='28' y='124' width='30' height='22' rx='2'/%3E%3Cpath d='M34 132 H52 M34 139 H46'/%3E%3Cpath d='M36 146 V150 M50 146 V150'/%3E%3Crect x='78' y='90' width='30' height='22' rx='2'/%3E%3Cpath d='M84 98 H102 M84 105 H96'/%3E%3Cpath d='M86 112 V116 M100 112 V116'/%3E%3Crect x='128' y='56' width='30' height='22' rx='2'/%3E%3Cpath d='M134 64 H152 M134 71 H146'/%3E%3Cpath d='M136 78 V82 M150 78 V82'/%3E%3Crect x='178' y='22' width='30' height='22' rx='2'/%3E%3Cpath d='M184 30 H202 M184 37 H196'/%3E%3Cpath d='M186 44 V48 M200 44 V48'/%3E%3Cpath d='M30 176 C70 176 90 120 120 104 S180 60 214 26' stroke-dasharray='4 4'/%3E%3Cpath d='M204 24 L215 25 L212 36'/%3E%3C/svg%3E"); }
#p-modules #pm-m-pm { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='96' y='14' width='133' height='112' rx='4'/%3E%3Cpath d='M96 34 H229 M118 8 V20 M206 8 V20'/%3E%3Cpath d='M115 34 V126'/%3E%3Cpath d='M134 34 V126'/%3E%3Cpath d='M153 34 V126'/%3E%3Cpath d='M172 34 V126'/%3E%3Cpath d='M191 34 V126'/%3E%3Cpath d='M210 34 V126'/%3E%3Cpath d='M96 57 H229'/%3E%3Cpath d='M96 80 H229'/%3E%3Cpath d='M96 103 H229'/%3E%3Ccircle cx='181.5' cy='68.5' r='8'/%3E%3Cpath d='M101 69 l3 3 l6 -7 M120 69 l3 3 l6 -7 M139 69 l3 3 l6 -7 M101 92 l3 3 l6 -7'/%3E%3Crect x='26' y='118' width='38' height='18' rx='2'/%3E%3Cpath d='M45 136 V148 M18 148 H112 M18 148 V158 M62 148 V158 M106 148 V158'/%3E%3Crect x='6' y='158' width='26' height='14' rx='2'/%3E%3Crect x='50' y='158' width='26' height='14' rx='2'/%3E%3Crect x='94' y='158' width='26' height='14' rx='2'/%3E%3Cpath d='M62 172 V182 H84'/%3E%3Crect x='84' y='176' width='20' height='12' rx='2'/%3E%3Cpath d='M171 166 L174.9 167.4 L174.3 170.4 L170.2 170.2 L167.8 173.8 L169.6 177.6 L167 179.3 L164.2 176.2 L160 177 L158.6 180.9 L155.6 180.3 L155.8 176.2 L152.2 173.8 L148.4 175.6 L146.7 173 L149.8 170.2 L149 166 L145.1 164.6 L145.7 161.6 L149.8 161.8 L152.2 158.2 L150.4 154.4 L153 152.7 L155.8 155.8 L160 155 L161.4 151.1 L164.4 151.7 L164.2 155.8 L167.8 158.2 L171.6 156.4 L173.3 159 L170.2 161.8Z'/%3E%3Ccircle cx='160' cy='166' r='5'/%3E%3Cpath d='M120 165 H144' stroke-dasharray='3 3'/%3E%3C/svg%3E"); }
#p-modules #pm-m-quality { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M62 12 H152 L172 32 V162 H62 Z M152 12 V32 H172'/%3E%3Cpath d='M74 30 H128'/%3E%3Crect x='74' y='49' width='10' height='10' rx='1'/%3E%3Cpath d='M92 54 H158'/%3E%3Cpath d='M76 54 l3 3 l5 -7'/%3E%3Crect x='74' y='69' width='10' height='10' rx='1'/%3E%3Cpath d='M92 74 H158'/%3E%3Cpath d='M76 74 l3 3 l5 -7'/%3E%3Crect x='74' y='89' width='10' height='10' rx='1'/%3E%3Cpath d='M92 94 H158'/%3E%3Cpath d='M76 94 l3 3 l5 -7'/%3E%3Crect x='74' y='109' width='10' height='10' rx='1'/%3E%3Cpath d='M92 114 H158'/%3E%3Crect x='74' y='129' width='10' height='10' rx='1'/%3E%3Cpath d='M92 134 H158'/%3E%3Cpath d='M160 172 L150 198 L161 192 L167 200 L172 178 M190 172 L200 198 L189 192 L183 200 L178 178'/%3E%3Cpath d='M205 150 L200.5 155.1 L202.7 161.5 L196.6 164.4 L196.2 171.2 L189.4 171.6 L186.5 177.7 L180.1 175.5 L175 180 L169.9 175.5 L163.5 177.7 L160.6 171.6 L153.8 171.2 L153.4 164.4 L147.3 161.5 L149.5 155.1 L145 150 L149.5 144.9 L147.3 138.5 L153.4 135.6 L153.8 128.8 L160.6 128.4 L163.5 122.3 L169.9 124.5 L175 120 L180.1 124.5 L186.5 122.3 L189.4 128.4 L196.2 128.8 L196.6 135.6 L202.7 138.5 L200.5 144.9Z'/%3E%3Ccircle cx='175' cy='150' r='20'/%3E%3Cpath d='M165 150 l7 7 l13 -15'/%3E%3C/svg%3E"); }
#p-modules #pm-m-pe { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='100' r='11'/%3E%3Ccircle cx='74' cy='100' r='11'/%3E%3Ccircle cx='126' cy='100' r='11'/%3E%3Ccircle cx='178' cy='58' r='11'/%3E%3Ccircle cx='178' cy='142' r='11'/%3E%3Ccircle cx='226' cy='100' r='11'/%3E%3Cpath d='M33 100 H63 M85 100 H115 M135 93 L169 65 M135 107 L169 135 M187 65 L218 93 M187 135 L218 107'/%3E%3Cpath d='M57 96 L63 100 L57 104 M109 96 L115 100 L109 104'/%3E%3Cpath d='M17 100 l3 3 l6 -7 M69 100 l3 3 l6 -7'/%3E%3Cpath d='M126 94 V100 L131 103'/%3E%3Crect x='160' y='24' width='36' height='12' rx='2'/%3E%3Crect x='160' y='162' width='36' height='12' rx='2'/%3E%3Cpath d='M178 36 V47 M178 153 V162'/%3E%3Cpath d='M6 186 H234' stroke-dasharray='2 4'/%3E%3Cpath d='M22 182 V190'/%3E%3Cpath d='M74 182 V190'/%3E%3Cpath d='M126 182 V190'/%3E%3Cpath d='M178 182 V190'/%3E%3Cpath d='M226 182 V190'/%3E%3C/svg%3E"); }
#p-modules #pm-m-safety { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150 14 C170 26 188 28 206 26 V82 C206 120 182 142 150 158 C118 142 94 120 94 82 V26 C112 28 130 26 150 14 Z'/%3E%3Cpath d='M150 28 C166 37 180 39 194 38 V82 C194 112 175 130 150 143 C125 130 106 112 106 82 V38 C120 39 134 37 150 28 Z' stroke-dasharray='3 3'/%3E%3Cpath d='M130 84 l14 14 l28 -32'/%3E%3Cpath d='M8 180 H104 M18 180 C18 146 94 146 94 180 M46 150 V180 M66 150 V180 M50 146 H62'/%3E%3Cpath d='M212 120 L222 150'/%3E%3Cpath d='M206 150 H238 V196 H206 Z'/%3E%3Ccircle cx='222' cy='158' r='3'/%3E%3Cpath d='M212 172 H232 M212 182 H226'/%3E%3C/svg%3E"); }
#p-modules #pm-m-people { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='96' y='12' width='136' height='100' rx='3'/%3E%3Cpath d='M96 36 H232 M96 61 H232 M96 86 H232 M140 12 V112 M164 12 V112 M188 12 V112 M212 12 V112'/%3E%3Cpath d='M106 24 H130 M106 48 H126 M106 73 H130 M106 98 H122'/%3E%3Cpath d='M147 48 l3 3 l6 -7'/%3E%3Cpath d='M171 48 l3 3 l6 -7'/%3E%3Cpath d='M195 73 l3 3 l6 -7'/%3E%3Cpath d='M147 98 l3 3 l6 -7'/%3E%3Cpath d='M219 98 l3 3 l6 -7'/%3E%3Cpath d='M171 73 l3 3 l6 -7'/%3E%3Cpath d='M219 44 l10 10 M229 44 l-10 10 M147 69 l10 10 M157 69 l-10 10'/%3E%3Ccircle cx='34' cy='136' r='11'/%3E%3Cpath d='M12 182 C12 140 56 140 56 182'/%3E%3Ccircle cx='112' cy='140' r='11'/%3E%3Cpath d='M90 186 C90 144 134 144 134 186'/%3E%3Ccircle cx='72' cy='122' r='13'/%3E%3Cpath d='M44 186 C44 128 100 128 100 186'/%3E%3C/svg%3E"); }
#p-modules #pm-m-ss { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 182 H234'/%3E%3Cpath d='M12 182 V188'/%3E%3Cpath d='M36 182 V188'/%3E%3Cpath d='M60 182 V188'/%3E%3Cpath d='M84 182 V188'/%3E%3Cpath d='M108 182 V188'/%3E%3Cpath d='M132 182 V188'/%3E%3Cpath d='M156 182 V188'/%3E%3Cpath d='M180 182 V188'/%3E%3Cpath d='M204 182 V188'/%3E%3Cpath d='M228 182 V188'/%3E%3Crect x='22' y='28' width='62' height='14' rx='4'/%3E%3Crect x='90' y='58' width='70' height='14' rx='4'/%3E%3Crect x='166' y='88' width='56' height='14' rx='4'/%3E%3Crect x='52' y='118' width='74' height='14' rx='4'/%3E%3Crect x='132' y='148' width='72' height='14' rx='4'/%3E%3Cpath d='M84 35 H87 V65 H90 M160 65 H163 V95 H166 M126 125 H129 V155 H132'/%3E%3Cpath d='M140 14 V188' stroke-dasharray='3 4'/%3E%3Cpath d='M140 8 l-4 -5 h8 Z'/%3E%3Cpath d='M214 34 l8 8 l-8 8 l-8 -8 Z'/%3E%3C/svg%3E"); }
#p-modules #pm-m-inventory { --pm-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='40' y='176' width='182' height='8' rx='1'/%3E%3Cpath d='M48 184 V192 H64 V184 M123 184 V192 H139 V184 M198 184 V192 H214 V184'/%3E%3Crect x='44' y='126' width='56' height='50' rx='2'/%3E%3Cpath d='M72 126 V138'/%3E%3Crect x='104' y='126' width='56' height='50' rx='2'/%3E%3Cpath d='M132 126 V138'/%3E%3Crect x='164' y='126' width='54' height='50' rx='2'/%3E%3Cpath d='M191 126 V138'/%3E%3Crect x='74' y='76' width='56' height='50' rx='2'/%3E%3Cpath d='M102 76 V88'/%3E%3Crect x='134' y='76' width='56' height='50' rx='2'/%3E%3Cpath d='M162 76 V88'/%3E%3Crect x='104' y='28' width='54' height='48' rx='2'/%3E%3Cpath d='M131 28 V40'/%3E%3Crect x='160' y='94' width='22' height='22' rx='1'/%3E%3Crect x='162' y='96' width='6' height='6'/%3E%3Crect x='174' y='96' width='6' height='6'/%3E%3Crect x='162' y='108' width='6' height='6'/%3E%3Cpath d='M174 108 h2 M178 108 h2 M176 111 h4 M174 113 h2'/%3E%3Crect x='54' y='150' width='34' height='16' rx='1'/%3E%3Cpath d='M58 156 H84 M58 161 H76'/%3E%3C/svg%3E"); }

/* 5b. Phone (below 768): one card with the next one peeking (§3), a tighter card, a smaller name. ------------------- */
@media (max-width: 767px) {
  #p-modules .pm-card { padding: 20px; }
  #p-modules .pm-name { font-size: 18px; }
}

/* 6. Hero map (01-header, figure #pm-connect): module nodes → a bus → the Action Planning hub -----------------
   Below 1024: one column. The bus runs down the left of the nodes and the wire drops into the hub, which follows the
   nodes: the map reads the way the work flows, and focus order stays the DOM order. From 1024: nodes | wire | hub on
   one stretched grid row, so the column and the hub are exactly one height: the nodes share the column (flex 1 1 0)
   and the hub spreads its five parts. Each node draws its stub and its own bus segment (the first from its middle
   down, the last down to its middle), so node heights never break the bus; the wire leaves the bus at its middle.
   Line types, as the hub's "Arrives as" rows key them: 2px solid blue raises owned actions, 1px solid carries KPI
   results, dashed sets the shift.
   Live (.is-live, set by modules-map.js unless reduced motion): the nodes, the wire and the hub's parts arrive in a
   staged reveal (.is-ready); then one node at a time is .is-on (its via line shows, its stub turns blue, the
   script's .pm-pulse runs along stub, bus and wire), and on arrival the hub rings (.is-land) and its parts for that
   line type are .is-hit (the "Arrives as" row and the module's name in it; actions also light "Every action", the
   shift lights its two chips). The other nodes show their names only, so the column stays calm. Without the script
   the map shows whole: every via line, nothing lit. */
#p-modules .pm-map { display: grid; gap: var(--s-4); min-width: 0; }
#p-modules .pm-map-grid { --pm-stub: 16px; --pm-bus: 20px; --pm-gap: 8px; position: relative; display: grid; min-width: 0; }
#p-modules .pm-nodes { display: flex; flex-direction: column; gap: var(--pm-gap); min-width: 0; padding-left: calc(var(--pm-stub) + var(--pm-bus)); }
#p-modules .pm-node { position: relative; display: flex; min-width: 0; }
#p-modules .pm-node a {
  flex: 1;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 52px;
  padding: 7px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-fast) ease-out, background-color 300ms ease-out;
}
/* module-pages-parked 2026-10-28: #p-modules .pm-node a:hover { border-color: var(--line-strong); } */
#p-modules .pm-node-name { font-size: 15px; font-weight: 600; line-height: 1.35; transition: transform 300ms ease-out, color 300ms ease-out; }
#p-modules .pm-node-via { font-size: 13px; line-height: 1.4; color: var(--ink-3); overflow-wrap: anywhere; transition: opacity 300ms ease-out, transform 300ms ease-out; }
/* Stub: bus → node (below 1024 from the left). */
#p-modules .pm-node::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--pm-stub));
  width: var(--pm-stub);
  border-top: 1px solid var(--line-strong);
  transition: border-color 300ms ease-out;
}
#p-modules .pm-node--act::before { margin-top: -1px; border-top: 2px solid var(--teal); }
#p-modules .pm-node--shift::before { border-top-style: dashed; }
/* Bus segment. */
#p-modules .pm-node::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(-1 * var(--pm-gap));
  left: calc(-1 * var(--pm-stub));
  border-left: 1px solid var(--line-strong);
}
#p-modules .pm-node:first-child::after { top: 50%; }
#p-modules .pm-node:last-child::after { bottom: 0; }
/* Wire into the hub: below 1024 it drops from the bus, 20px in, so its arrow clears the hub's corner. */
#p-modules .pm-wire { position: relative; width: 0; height: 36px; margin-left: var(--pm-bus); border-left: 1px solid var(--line-strong); }
#p-modules .pm-wire::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5px;
  border-top: 7px solid var(--line-strong);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
#p-modules .pm-hub {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--teal);
  border-radius: var(--r-decision);
  transition: box-shadow 300ms ease-out;
}
#p-modules .pm-hub.is-land { box-shadow: 0 0 0 4px var(--tint-border); }
@media (max-width: 767px) { #p-modules .pm-hub { padding: 20px; } }
#p-modules .pm-hub-name { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
#p-modules .pm-hub-name a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
/* module-pages-parked 2026-10-28: #p-modules .pm-hub-name a:hover { text-decoration: underline; text-underline-offset: 4px; } */
#p-modules .pm-hub-sub { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
#p-modules .pm-hub-k { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--ink-3); transition: color 300ms ease-out; }
/* Arrives as: the line key, one row per line type, each naming its modules. */
#p-modules .pm-ins { display: grid; gap: 2px; margin: 6px -8px 0; }
#p-modules .pm-in {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: var(--s-3);
  padding: 6px 8px;
  border-radius: var(--r-control);
  transition: background-color 300ms ease-out;
}
#p-modules .pm-in::before { content: ""; grid-row: 1 / span 2; margin-top: 10px; border-top: 1px solid var(--line-strong); }
#p-modules .pm-in--act::before { margin-top: 9px; border-top: 2px solid var(--teal); }
#p-modules .pm-in--shift::before { border-top-style: dashed; }
#p-modules .pm-in b { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
#p-modules .pm-in-from { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
#p-modules .pm-in-from [data-m] { border-radius: 2px; transition: color 300ms ease-out, background-color 300ms ease-out, box-shadow 300ms ease-out; }
#p-modules .pm-tiers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#p-modules .pm-tiers li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink); }
#p-modules .pm-tiers li span { padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); }
#p-modules .pm-tiers li + li::before { content: "\2192"; content: "\2192" / ""; color: var(--ink-3); }
#p-modules .pm-hub-rule { margin-top: var(--s-2); font-size: 15px; line-height: 1.5; color: var(--ink); }
#p-modules .pm-hub-row { display: grid; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--hairline); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
#p-modules .pm-hub .src-chip { transition: background-color 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out; }
#p-modules .pm-map-cap { max-width: 72ch; margin-top: 0; }

@media (min-width: 1024px) {
  #p-modules .pm-map-grid { --pm-stub: 28px; grid-template-columns: minmax(0, 0.9fr) 88px minmax(0, 1.15fr); align-items: stretch; }
  #p-modules .pm-nodes { padding-left: 0; }
  #p-modules .pm-node { flex: 1 1 0; }
  #p-modules .pm-node::before { left: 100%; }
  #p-modules .pm-node::after { left: calc(100% + var(--pm-stub)); }
  #p-modules .pm-node:last-child::after { bottom: 50%; }
  #p-modules .pm-wire { align-self: center; width: auto; height: 0; margin-left: var(--pm-stub); border-left: 0; border-top: 1px solid var(--line-strong); }
  #p-modules .pm-wire::after {
    top: -6px;
    bottom: auto;
    left: auto;
    right: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--line-strong);
    border-right: 0;
  }
  #p-modules .pm-hub { justify-content: space-between; padding: var(--s-5) var(--s-6); }
}

/* Live. The calm column: an idle node shows its name only, centred (the via line's height plus the gap, halved). */
#p-modules .pm-map.is-live .pm-node:not(.is-on) .pm-node-name { transform: translateY(10px); }
#p-modules .pm-map.is-live .pm-node:not(.is-on) .pm-node-via { opacity: 0; transform: translateY(6px); }
#p-modules .pm-map.is-live .pm-node.is-on a { border-color: var(--teal); background: var(--tint); }
#p-modules .pm-map.is-live .pm-node.is-on .pm-node-name { color: var(--select-ink); }
#p-modules .pm-map.is-live .pm-node.is-on::before { border-top-color: var(--teal); }
#p-modules .pm-map.is-live .pm-in.is-hit { background: var(--tint); }
#p-modules .pm-map.is-live .pm-in-from .is-hit { color: var(--select-ink); background: var(--tint-border); box-shadow: 0 0 0 2px var(--tint-border); }
#p-modules .pm-map.is-live .pm-hub-row.is-hit .pm-hub-k { color: var(--teal-ink); }
#p-modules .pm-map.is-live .src-chip.is-hit { background: var(--tint); border-color: var(--tint-border); color: var(--select-ink); }
/* The pulse: a blue dot with a soft ring, moved by modules-map.js (transform only). */
#p-modules .pm-pulse {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent);
  opacity: 0;
  pointer-events: none;
}
/* The staged reveal: nodes top-down (each node brings its stub and bus segment), then the wire, then the hub's parts.
   The hidden state takes no transition, so .is-live hides at once and only .is-ready animates. */
#p-modules .pm-map.is-live :is(.pm-node, .pm-wire, .pm-hub > *) { opacity: 0; transform: translateY(6px); }
#p-modules .pm-map.is-live.is-ready :is(.pm-node, .pm-wire, .pm-hub > *) { opacity: 1; transform: none; transition: opacity 450ms ease-out, transform 450ms ease-out; }
#p-modules .pm-map.is-live.is-ready .pm-node { transition-delay: calc(var(--n, 0) * 55ms); }
#p-modules .pm-map.is-live.is-ready .pm-wire { transition-delay: 520ms; }
#p-modules .pm-map.is-live.is-ready .pm-hub > :nth-child(1) { transition-delay: 600ms; }
#p-modules .pm-map.is-live.is-ready .pm-hub > :nth-child(2) { transition-delay: 680ms; }
#p-modules .pm-map.is-live.is-ready .pm-hub > :nth-child(3) { transition-delay: 760ms; }
#p-modules .pm-map.is-live.is-ready .pm-hub > :nth-child(4) { transition-delay: 840ms; }
#p-modules .pm-map.is-live.is-ready .pm-hub > :nth-child(5) { transition-delay: 920ms; }

/* 7. Start with the Core 4 ---------------------------------------------------
   Review 1, R1·14: four cards, one per Core 4 module, in the order a loss travels (R1·C11), under a small "One loss
   through the Core 4" title. Each card: the name and its role tag, the job line, a hairline, "In one loss", that
   module's step of the one filler jam and its screen chip. One column, two from 720, four from 1024; every width
   shows them (D56: the old stage track hid below 768). */
#p-modules .pm-core-sec { overflow-x: clip; }
#p-modules .pm-core-fig { min-width: 0; margin: 0; }
#p-modules .pm-core-title { margin-bottom: var(--s-3); font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); }
#p-modules .pm-core-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { #p-modules .pm-core-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #p-modules .pm-core-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
#p-modules .pm-core-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
@media (max-width: 767px) { #p-modules .pm-core-card { padding: 20px; } }
#p-modules .pm-core-card-h { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#p-modules .pm-core-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#p-modules .pm-core-job { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
#p-modules .pm-core-k { margin-top: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--hairline); font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--ink-3); }
#p-modules .pm-core-text { font-size: 15px; line-height: 1.55; color: var(--ink); }
/* D61: the ids and the clock time (17:42, RCA #219, #4190) are the only mono on the page; they keep the sentence's
   ink and never break. */
#p-modules .pm-core-text .mono { color: inherit; white-space: nowrap; }
#p-modules .pm-core-card .src-chip { align-self: flex-start; margin-top: auto; }
/* The slide (play once). modules.js arms the list (.is-armed: each card faded and 32px to the right, no transition)
   only while it is below the fold, then adds .is-in once as it enters view: 500ms ease-out, each card 90ms after the
   one before (--i), all four in place by 770ms. Below 720 (.is-each) every card takes .is-in on its own as it
   appears, with no stagger. Never a scroll scrub, a reverse on scroll-up or a loop; under reduced motion the list is
   never armed, so the cards sit at rest. The section clips the overhang, so the page never scrolls sideways. */
#p-modules .pm-core-cards.is-armed > li { opacity: 0; transform: translateX(32px); }
#p-modules .pm-core-cards.is-armed.is-in > li,
#p-modules .pm-core-cards.is-armed > li.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease-out, transform 500ms ease-out;
  transition-delay: calc(var(--i, 0) * 90ms);
}
#p-modules .pm-core-cards.is-each > li.is-in { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
  #p-modules .pm-core-cards.is-armed > li { opacity: 1; transform: none; transition: none; }
}

/* 8. Closing band (#pm-next) -------------------------------------------------
   The page's last section is the site's closing band (Main::closingBand(), site.css §24a; 2026-10-28). No page rules. */

/* 9. Phone height (QA3-04; D56: /modules under 8,000px at 390). Below 560 the page tightens its rhythm instead of
   hiding words: no line is clamped (the map's sub-lines already fit on one line at 390, and a clamped Core 4 step
   would cut a Core 4 card's step mid-sentence). The sections take 48px (the page-level --section-pad override
   /trust and /next-8-hours use), section heads 32px; the deck's job lines set at 15px, and the Core 4 cards run
   tighter (R1·14): 16px padding, a 17px name, the job and "In one loss" lines at 14px;
   the hero map's nodes keep a 48px tap target on a 6px gap; the hub and the "Then add" rows run tighter. */
@media (max-width: 559px) {
  #p-modules { --section-pad: var(--s-7); }
  #p-modules .sec .section-head { margin-bottom: var(--s-6); }
  #p-modules .pm-job { font-size: 15px; line-height: 1.5; }
  #p-modules .pm-map-grid { --pm-gap: 6px; }
  #p-modules .pm-node a { min-height: 48px; padding-block: 6px; }
  #p-modules .pm-hub { gap: var(--s-3); padding: var(--s-4); }
  #p-modules .pm-core-card { padding: var(--s-4); }
  #p-modules .pm-core-card h3 { font-size: 17px; }
  #p-modules :is(.pm-core-job, .pm-core-text) { font-size: 14px; line-height: 1.5; }
  #p-modules .pm-then { margin-top: var(--s-6); }
  #p-modules .pm-then-list li { display: block; padding-block: var(--s-1) var(--s-2); }
  #p-modules .pm-then-list a { display: inline-flex; margin-right: var(--s-1); }
}