/* page-connect.css: the Connectivity half of /technology, plus its page header (§1) and closing band (§7) (wrapper
   #p-technology, technology.php; was /connect, #p-connect, merged with /decision-models 2026-10-26, owner ask; the
   page is named Connectivity since 2026-10-31, R2·4, and keeps the /technology URL). Its
   views are content/views/technology/01-04 and 13. The Decision models deck moved to /ai on 2026-10-31 (R2·5), so
   technology.php loads page-connect only. §5 Integrate or own and §6 The whole stack are parked (2026-10-27, owner ask: the page was too
   long) as content/views/technology/.parking-lot/05-stack.css and 06-chain.css; the numbering keeps their gap.
   On /technology the last section, #pn-next, is the site's closing band (Main::closingBand(), site.css §24a).
   Every selector starts with #p-technology.
   Built from research/26-connect-brief.md §3 and §5 on site.css components (.page-header, .page-toc, .sec,
   .section-head, .schematic, .stage-track, .segmented, .dd-stack, .dl, .ledger, .state, .led, .src-chip, tags).
   Production state: P1 light ("Light steel") only, no script for these sections. Loaded after site.css.

   Grounds: header bg · connection levels bg · machines surface · screens bg (D81) · closing band (navy, site.css §24a). Panels take the opposite tone of their section.
   Type (D83): mono is allowed only on instrument values (L0-L3, B7E4H2, 04:12, Last Checked, 30 s / 60 s, CH01-CH03,
   85%); it is set on the levels L0-L3 and the one-time code. The countdown and the Settings row keep the product's
   sans (no mono in a product frame but the code), and the captions stay in the site's sans. Labels, keys, chips,
   layer numerals and figure meta lines are sans.

   State (no script; from 720px every alternative shares one grid cell, so heights never jump):
     name pn-way  #pn-way-man | #pn-way-col (default) | #pn-way-plc, inside fieldset.segmented.pn-ways-pick (input in
       its label), under the Line 4 overview (Layout A, R1·C13). Shows the matching .pn-pic--man / --col / --plc
       picture beside the unit-op table; the overview is the same in every state (§3). The collector's picture is the
       default in a rule of its own, so it holds without :has(). The checkbox #pn-ways-still (one fixed name, "Pause
       motion") stops the overview's signals.
     The pairing figure's row menu is a details (.app-dd, open at rest; it opens and shuts with no page CSS).
   Motion: the page's one orchestrated motion is the install schematic (D79, §2): the path draws, the way-points
   reveal in order, the board's 71% appears last (scroll-driven and finite; with reduced motion or no support the
   finished drawing shows). In Ways to collect the signal arcs ripple up from each collector and machine on a loop,
   with a Pause control, and the level pictures crossfade; reduced motion shows every arc at rest and swaps the
   pictures at once (§3). The pairing code's bar rests at 84% (D80; no scroll link).
   Phone: the schematic shows its portrait drawing with numbered stops and the labels as a numbered list (§2);
   pairing and the six screens stack; the Settings row is FormV2's form mode. The level pictures number their stops
   and list the labels under the drawing, as the schematic does (§3). */

/* 1 · Page header ---------------------------------------------------------------------------------- */
/* D78 (O3): the D06 grid; the right column holds the collector, the company's render of the shipped device, cropped
   to the box (the file's own rounded frame and the cable ends fall outside) on a white card with --app-shadow. It is a
   render, captioned as one, so it takes no Illustrative tag. The crop is in the render's pixels: x 140-860, y 100-580
   of 940 x 632 (margins in % of the crop width). */
#p-technology .pn-head-fig { margin-inline: 0; margin-bottom: 0; }
#p-technology .pn-head-render {
  aspect-ratio: 720 / 480;
  overflow: hidden;
  overflow: clip;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--app-shadow);
}
#p-technology .pn-head-render img { display: block; width: 130.56%; max-width: none; height: auto; margin: -13.89% 0 0 -19.44%; }
#p-technology .pn-head-cap { max-width: none; margin-top: var(--s-3); font-size: 13px; line-height: 1.5; color: var(--ink-3); }
/* R2·6 phone fix, a page-level exception to D06: the "Remote Displays" chip cut the 358px rail by 7px at 390, so the
   chips take 10px side padding (they fit at 390) and the row wraps on narrower phones instead of clipping a chip. */
@media (max-width: 719px) {
  #p-technology .page-toc ol { flex-wrap: wrap; }
  #p-technology .page-toc a { padding-inline: 10px; }
}

/* Shared card head (copied from page-trust.css:36-58; Trust keeps its own copy) ------------------ */
#p-technology .pn-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
#p-technology .pn-card-title { margin-right: auto; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
/* Second line of a card head: the source screen and a short count. */
#p-technology .pn-card-meta { display: flex; flex-wrap: wrap; flex-basis: 100%; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
#p-technology .pn-card-count { font-size: 13px; line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* The levels L0-L3 in the unit-op ledger: an instrument value, so mono. */
#p-technology .pn-mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); }

/* Shared: figure heads, fact strips, link rows ----------------------------------------------------- */
#p-technology .pn-fig-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; margin-bottom: var(--s-4); }
#p-technology .pn-fig-title { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); letter-spacing: var(--track-h3); color: var(--ink); }
#p-technology .pn-fig-meta { max-width: none; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
#p-technology .pn-fig-head .tag { margin-left: auto; }
@media (max-width: 767px) { #p-technology .pn-fig-head .tag { margin-left: 0; } }
/* Facts: sans sentences (D83), the key word inline and set in 600. */
#p-technology .pn-facts { display: grid; gap: var(--s-2) var(--s-5); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
#p-technology .pn-facts li { min-width: 0; padding-top: var(--s-2); border-top: 1px solid var(--hairline); overflow-wrap: anywhere; }
#p-technology .pn-facts b { margin-right: 4px; font-weight: 600; color: var(--ink); }
#p-technology .pn-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); max-width: none; margin-top: var(--s-6); }

/* 2 · Machines: the install schematic (V1, D79), the facts, the health line, and one stop (V2) ---------------- */
#p-technology .pn-install { display: grid; gap: var(--s-5); min-width: 0; margin: 0; }
#p-technology .pn-install-cap { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
#p-technology .pn-install-cap .pn-fig-head { margin-bottom: 0; }
#p-technology .pn-install-cap .caption { max-width: 64ch; margin-top: 0; }
/* D79: one count's path to the wall, drawn once. site.css §21 hides .schematic-svg below 768; this page overrides
   that here: below 768 the portrait drawing (.pn-sch-svg--tall, 320 x 420) shows instead, its stops numbered, and the
   labels read as the numbered list under it. From 768 the wide drawing (640 x 440) carries the labels in place. The
   drawing box (.pn-sch-art) holds both drawings and the mini board, so the board sits on whichever drawing shows. */
#p-technology .pn-sch { padding: var(--s-3) var(--s-4) var(--s-2); background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-card); }
#p-technology .pn-sch-art { position: relative; aspect-ratio: 320 / 420; max-width: 400px; margin-inline: auto; }
#p-technology .pn-sch-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#p-technology .pn-sch-svg--wide { display: none; }
#p-technology .pn-sch-svg * { vector-effect: non-scaling-stroke; }
/* The labels: sans (mono is for instrument values only), the sub-line under the name. */
#p-technology .pn-sch-labels { counter-reset: pn-sch; margin-top: var(--s-3); }
#p-technology .pn-sch-labels li { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); }
#p-technology .pn-sch-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-3); }
#p-technology .pn-sch-sub .led { animation: none; }
/* The collector and the way-points: what Plant Toolbox adds, so the data path visibly starts at the collector. */
#p-technology .pn-sch-l--node { color: var(--teal-ink); }
/* Phone: the list numbers match the drawing's numbered stops. */
@media (max-width: 767px) {
  #p-technology .pn-sch-labels li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; counter-increment: pn-sch; }
  #p-technology .pn-sch-labels li::before {
    content: counter(pn-sch);
    display: inline-grid;
    place-items: center;
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-variant-numeric: tabular-nums;
  }
  #p-technology .pn-sch-labels li:is(:nth-child(4), :nth-child(6), :nth-child(7))::before { color: var(--white); background: var(--teal); border-color: var(--teal); }
  #p-technology .pn-sch-sub { grid-column: 2; }
}
/* The drawing: hairline strokes; the accent marks only what we add and the data path (the collector, the path, its
   way-points), never a state. Green stays reserved for the one real state, Online Active. */
#p-technology .pn-s-floor { stroke: var(--hairline); stroke-width: 1.5; }
#p-technology .pn-s-thin { stroke: var(--hairline); }
#p-technology .pn-s-belt { fill: var(--neutral-fill); stroke: var(--line-strong); }
#p-technology .pn-s-btl rect { fill: var(--bg-subtle); stroke: var(--line-strong); }
#p-technology .pn-s-legs { stroke: var(--line-strong); stroke-width: 2; }
#p-technology .pn-s-mach { fill: var(--surface); stroke: var(--line-strong); }
#p-technology .pn-s-win { fill: var(--bg-subtle); stroke: var(--hairline); }
#p-technology .pn-s-plc { fill: var(--bg); stroke: var(--ink-3); }
/* The sensor: a head on a vertical stand, its beam across the bottles. */
#p-technology .pn-s-stand { stroke: var(--ink-2); stroke-width: 2; }
#p-technology .pn-s-sens { fill: var(--surface); stroke: var(--ink-2); }
#p-technology .pn-s-eye { fill: var(--ink-2); stroke: none; }
#p-technology .pn-s-beam { stroke: var(--ink-3); stroke-dasharray: 2 3; }
#p-technology .pn-s-cable { stroke: var(--ink-3); stroke-width: 1.5; }
#p-technology .pn-s-plug { fill: var(--surface); stroke: var(--ink-3); }
/* The collector: a plain labelled box (the detailed enclosure is the header's render). */
#p-technology .pn-s-box { fill: var(--tint); stroke: var(--teal); stroke-width: 1.5; }
/* The path: one solid #255697 stroke (pathLength 1, so .rv-draw can draw it; scaling stroke, so the dash maths holds). */
#p-technology .pn-s-path { stroke: var(--teal); stroke-width: 2; vector-effect: none; }
#p-technology .pn-s-arrow { stroke: var(--teal); stroke-width: 2; vector-effect: none; }
#p-technology .pn-s-node { fill: var(--teal); stroke: var(--surface); stroke-width: 2; }
#p-technology .pn-s-num circle { fill: var(--surface); stroke: var(--line-strong); }
#p-technology .pn-s-num text { font-family: var(--font-sans); font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--ink); stroke: none; }
#p-technology .pn-s-num:is(.pn-s-num--node, .pn-s-num--wp) circle { fill: var(--teal); stroke: var(--teal); }
#p-technology .pn-s-num:is(.pn-s-num--node, .pn-s-num--wp) text { fill: var(--white); }
/* The mini board: the shared .app-board (site.css §49s), held at 16:9 at any size by this section-scoped helper (the
   shared part stacks below a 640px container and floors its figures at 28px, which a ~200px board cannot hold). It
   keeps the Realtime Results layout: the rail with the PT mark and OEE 71% Off target, the hourly bars on the goal
   line, the downtime and checks bands. Text stays at 12px or more; the bands carry no words at this size. */
#p-technology .pn-sch-board { position: absolute; left: 18.75%; top: 71.43%; width: 62.5%; }
#p-technology .pn-sch-board .app-board-screen { grid-template-columns: 36% minmax(0, 1fr); grid-template-rows: 58% 42%; grid-template-areas: "rail chart" "rail split"; aspect-ratio: 16 / 9; }
#p-technology .pn-sch-board .app-board-rail { display: flex; flex-direction: column; justify-content: flex-start; gap: max(2px, 1.5cqw); padding: max(5px, 3cqw) max(6px, 3.5cqw); }
#p-technology .pn-sch-board .app-board-mark { width: max(20px, 10cqw); height: max(20px, 10cqw); font-size: 12px; }
#p-technology .pn-sch-board .app-board-k dt { font-size: 12px; line-height: 1.2; }
#p-technology .pn-sch-board .app-board-k dd { font-size: max(19px, 9.5cqw); }
#p-technology .pn-sch-board .app-board-k .app-board-word { font-size: 12px; line-height: 1.15; white-space: normal; }
#p-technology .pn-sch-board .app-board-chart { height: auto; gap: max(2px, 1cqw); padding: max(4px, 2cqw) max(6px, 3cqw) max(4px, 2cqw); }
#p-technology .pn-sch-board .app-board-title { font-size: 12px; line-height: 1.2; }
#p-technology .pn-sch-board .app-board-bars { gap: max(2px, 1.4cqw); }
#p-technology .pn-sch-board .app-board-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#p-technology .pn-sch-board .app-board-am > div { justify-content: flex-end; padding: 0 max(4px, 2cqw); }
#p-technology .pn-sch-board .app-board-am .app-i { width: max(9px, 4.5cqw); height: max(9px, 4.5cqw); }
/* From 768: the wide drawing, its labels in place (% of 640 x 440), the board at the top right where the path ends. */
@media (min-width: 768px) {
  #p-technology .pn-sch { padding: 0; overflow: clip; }
  #p-technology .pn-sch-art { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; }
  #p-technology .pn-sch-svg--wide { display: block; }
  #p-technology .pn-sch-svg--tall { display: none; }
  #p-technology .pn-sch-board { left: 65.625%; top: 1.82%; width: 31.25%; }
  #p-technology .pn-sch-labels { margin-top: 0; }
  #p-technology .pn-sch-labels li { left: var(--x); top: var(--y); padding: 5px 9px; font-size: 13px; line-height: 1.35; }
  #p-technology .pn-sch-sub { font-size: 12px; }
  /* --x is the right edge for these labels (the way-points and the board's name). */
  #p-technology .pn-sch-labels .pn-sch-l--end { transform: translate(-100%, -50%); }
  #p-technology .pn-sch-labels .pn-sch-l--node { border-color: var(--tint-border); background: var(--tint); }
  #p-technology .pn-sch-labels .pn-sch-l--plc { border-color: var(--ink-3); }
  /* Plant Wi-Fi is the path's network, not a stop: a plain word sitting on the wire. */
  #p-technology .pn-sch-labels .pn-sch-l--wire { padding-block: 2px; color: var(--ink-2); }
}
/* The page's one orchestrated motion (D79). One view timeline on the drawing box: the path draws, the way-points
   reveal in order, then the board's 71% (and the arrow into the board) appears last. Scroll-driven and finite, like
   the site's .rv reveals; with no support or with reduced motion nothing runs and the finished drawing shows. */
@keyframes pn-sch-in { from { opacity: 0; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #p-technology .pn-sch { view-timeline: --pn-sch block; }
    #p-technology .pn-sch .rv-draw { animation-timeline: --pn-sch; animation-range: cover 6% cover 32%; }
    #p-technology .pn-sch :is(.pn-sch-wp1, .pn-sch-wp2, .pn-sch-last) { animation: pn-sch-in linear both; animation-timeline: --pn-sch; }
    #p-technology .pn-sch .pn-sch-wp1 { animation-range: cover 24% cover 29%; }
    #p-technology .pn-sch .pn-sch-wp2 { animation-range: cover 29% cover 34%; }
    #p-technology .pn-sch .pn-sch-last { animation-range: cover 34% cover 40%; }
  }
}
#p-technology .pn-health {
  max-width: none;
  padding: var(--s-4);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
@media (min-width: 768px) and (max-width: 1199px) {
  #p-technology .pn-install-cap .pn-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 1200px: the drawing at 7/12 (about 650px wide, so the labels keep their places), its caption and facts beside it. */
@media (min-width: 1200px) {
  #p-technology .pn-install { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; }
  /* At 5/12 the h3-size title (D83) leaves no room for the tag beside it: it sits under the title, left-aligned. */
  #p-technology .pn-install-cap .pn-fig-head .tag { margin-left: 0; }
}
#p-technology .pn-stop {
  min-width: 0;
  margin: var(--s-6) 0 0;
  padding: var(--s-5) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
@media (min-width: 720px) { #p-technology .pn-stop { padding: var(--s-5); } }
#p-technology .pn-stop-steps { display: grid; gap: var(--s-4); }
#p-technology .pn-stop-steps > li { position: relative; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
#p-technology .pn-step-k { display: flex; gap: var(--s-2); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
/* D82: the stop steps carry no numerals (the ol keeps the order). */
#p-technology .pn-step-d { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
#p-technology .pn-step-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-1); }
@media (min-width: 1024px) {
  #p-technology .pn-stop-steps { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr) minmax(0, 1.3fr); gap: var(--s-6); }
  /* A small chevron on the rule between steps: the stop moves left to right. */
  #p-technology .pn-stop-steps > li + li::before {
    content: "";
    position: absolute;
    top: -4px;
    left: calc(-1 * var(--s-6) / 2 - 4px);
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--line-strong);
    border-right: 1px solid var(--line-strong);
    transform: rotate(45deg);
  }
}

/* 3 · Ways to collect (was the L0-L3 ladder, moved from Trust §4). Layout A (owner, Oct 30, R1·C13): the whole line
   first, full width under the one-line intro: one drawing of Line 4 (content/img/connect/line-4.svg: the homepage tiers
   line with the people and the story taken out), a collector on the filler, capper and labeler, each sending its
   counts up, and the depalletizer and case packer sending their own, their aisle faces tinted. Then a toggle of the
   three ways in (by hand, collector, the machine's PLC: level order, the collector chosen by default), then the
   unit-op table beside the chosen way's picture, 50/50 from 1024. The toggle swaps only that picture, with CSS
   (R1·18; no script). A historian is an L3 source, so it has no option or picture of its own. ----------------------- */
#p-technology .pn-ways { display: grid; gap: var(--s-6); min-width: 0; }
/* The toggle: the site's .segmented, three wide segments that each carry the level over the way's name. */
#p-technology .pn-ways-seg { display: flex; }
#p-technology .pn-ways-seg label { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* The focused segment rises over its neighbour, so the -1px overlap never hides its focus ring's edge. */
#p-technology .pn-ways-seg label:focus-within { z-index: 1; }
#p-technology .pn-ways-seg label > span {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 68px;
  padding: var(--s-2) var(--s-5);
  text-align: left;
}
#p-technology .pn-ways-k { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ink-3); text-wrap: balance; }
#p-technology .pn-ways-k .pn-mono { font-weight: 600; }
#p-technology .pn-ways-t { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); text-wrap: balance; }
#p-technology .pn-ways-seg input:checked + span :is(.pn-ways-k, .pn-ways-t) { color: var(--select-ink); }
/* L0 is offered, not recommended (a collector is quick to ship and to fit): its segment is quieter in every state,
   narrower, on the section's ground, its words in --ink-3 at weight 500. Chosen, it still takes the selected look. */
#p-technology .pn-ways-seg .pn-ways-opt--quiet { flex-grow: .7; }
#p-technology .pn-ways-opt--quiet > span { background: transparent; }
#p-technology .pn-ways-opt--quiet :is(.pn-ways-k, .pn-ways-t) { color: var(--ink-3); }
#p-technology .pn-ways-opt--quiet .pn-ways-t { font-weight: 500; }
#p-technology .pn-ways-opt--quiet input:checked + span { background: var(--select-bg); }
/* The title keeps weight 600 when chosen (the fill and underline mark it), so no label rewraps on a switch. */
/* Below 600 the three segments stack, one per row, square-cornered between. */
@media (max-width: 599px) {
  #p-technology .pn-ways-seg { flex-direction: column; }
  #p-technology .pn-ways-seg label > span { min-height: 60px; padding: var(--s-2) var(--s-4); border-radius: 0; }
  #p-technology .pn-ways-seg label + label span { margin-top: -1px; margin-left: 0; }
  #p-technology .pn-ways-seg label:first-of-type span { border-radius: var(--r-control) var(--r-control) 0 0; }
  #p-technology .pn-ways-seg label:last-of-type span { border-radius: 0 0 var(--r-control) var(--r-control); }
  #p-technology .pn-ways-t { font-size: 15px; }
}

/* The overview: the picture and its overlay share one box and one crop (object-position 0 100% matches the overlay's
   xMinYMax slice): 2:1 from 768, which trims only bare wall off the top, and 4:3 below it, which trims the right
   edge and keeps the case packer to the depalletizer. */
#p-technology .pn-ways-stage { position: relative; display: grid; gap: var(--s-3); min-width: 0; margin: 0; }
#p-technology .pn-ways-pic {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  overflow: clip;
  background: var(--bg-subtle);
  border: 1px solid var(--hairline);
  border-radius: var(--r-decision);
}
#p-technology :is(.pn-ways-img, .pn-ways-art) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#p-technology .pn-ways-img { object-fit: cover; object-position: 0 100%; }

/* The collectors are black, as the shipped device is dark, lit from the drawing's side (top lightest, aisle face
   darkest), hung from the conveyors' side rails. The signals are the accent blue on a white halo, so they read over
   any part of the line; the PLC machines' aisle faces take the same blue as a tint. */
#p-technology .pn-ways-art { --col-top: #4A5059; --col-lit: #353A42; --col-shade: #24282E; --col-edge: #111418; --col-ink: #9AA3AD; overflow: hidden; }
#p-technology .pn-ways-art :is(.pn-col-t, .pn-col-l, .pn-col-r) { stroke: var(--col-edge); stroke-width: 1; stroke-linejoin: round; }
#p-technology .pn-col-t { fill: var(--col-top); }
#p-technology .pn-col-l { fill: var(--col-lit); }
#p-technology .pn-col-r { fill: var(--col-shade); }
#p-technology .pn-col-seam { fill: none; stroke: var(--col-ink); stroke-opacity: .55; stroke-width: .8; }
#p-technology .pn-col-port { fill: var(--col-ink); }
/* The status light: the drawing's stack-light green, which holds on black where --ok-ink would not. */
#p-technology .pn-col-led { fill: #2E9E5E; stroke: var(--col-edge); stroke-width: .6; }
#p-technology .pn-mach { fill: var(--teal); fill-opacity: .2; stroke: var(--teal); stroke-width: 1.4; stroke-linejoin: round; }
#p-technology .pn-sig-h { fill: none; stroke: var(--white); stroke-opacity: .9; stroke-width: 6; stroke-linecap: round; }
#p-technology .pn-sig-w { fill: none; stroke: var(--teal); stroke-width: 2.6; stroke-linecap: round; }
#p-technology .pn-sig-dot { fill: var(--teal); stroke: var(--white); stroke-width: 1.5; }

/* The legend: which mark is which, in flow under the picture at every width (Layout A keeps the drawing whole). */
#p-technology .pn-ways-cap { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
#p-technology .pn-ways-cap-t { font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }
#p-technology .pn-ways-legend { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#p-technology .pn-ways-legend li { display: flex; align-items: baseline; gap: var(--s-2); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
#p-technology .pn-ways-legend b { font-weight: 600; color: var(--ink); }
/* The keys repeat the overlay's marks: the black collector, the machine's tinted aisle face (a parallelogram at the
   drawing's 2:1 slope). */
#p-technology .pn-ways-key { flex: none; width: 12px; height: 9px; border: 1px solid var(--teal); }
#p-technology .pn-ways-key--col { background: #353A42; border-color: #111418; border-radius: 2px; }
#p-technology .pn-ways-key--plc { width: 14px; background: color-mix(in srgb, var(--teal) 20%, transparent); transform: skewY(-26.57deg); }

/* Pause: the signals loop, so they can be stopped (WCAG 2.2.2). Shown only where they move; the drawing at rest is
   the whole picture, every arc drawn. */
#p-technology .pn-ways-still {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  display: none;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--s-3);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}
#p-technology .pn-ways-still input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* One fixed name ("Pause motion", so a screen reader hears "checked" while it is stopped); the checked state takes
   the site's selected look, as a .segmented does. */
#p-technology .pn-ways-still:has(input:checked) { color: var(--select-ink); background: var(--select-bg); border-color: var(--select-edge); box-shadow: inset 0 -2px 0 var(--select-edge); }
#p-technology .pn-ways-still:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Phone: a smaller Pause pill. */
@media (max-width: 767px) {
  #p-technology .pn-ways-still { right: var(--s-2); bottom: var(--s-2); min-height: 26px; padding: 0 var(--s-2); font-size: 12px; }
}
@media (min-width: 768px) { #p-technology .pn-ways-pic { aspect-ratio: 2 / 1; } }

/* The chosen way's picture (R1·18, R1·20): three static line drawings in the #pn-data schematic's family (R1·C15;
   content/views/technology/art/*.svg.html, one 640 x 480 viewBox, the pn-s-* marks of §2 plus the ones below), each
   over its one "You need" line. They share one cell (.dd-stack) and swap with visibility, not display, so the cell
   keeps the tallest one's height and nothing under it moves. The collector's picture is the default in a rule of its
   own, so a browser without :has() still shows it alone; the :has() rules only move the choice. */
#p-technology .pn-pics { max-width: 640px; }
#p-technology .pn-pic { display: grid; gap: var(--s-3); align-content: start; min-width: 0; margin: 0; }
#p-technology .pn-ways .pn-pic:not(.pn-pic--col) { visibility: hidden; opacity: 0; }
#p-technology .pn-ways:has(#pn-way-col:not(:checked)) .pn-pic--col { visibility: hidden; opacity: 0; }
#p-technology .pn-ways:has(#pn-way-man:checked) .pn-pic--man,
#p-technology .pn-ways:has(#pn-way-plc:checked) .pn-pic--plc { visibility: visible; opacity: 1; }
#p-technology .pn-pic-art { overflow: hidden; overflow: clip; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-decision); }
#p-technology .pn-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#p-technology .pn-art :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
#p-technology .pn-pic-cap { display: grid; gap: var(--s-2); min-width: 0; }
#p-technology .pn-pic-need { max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
#p-technology .pn-pic-need b { font-weight: 600; color: var(--ink); }
/* The level pictures' own marks, on §2's palette: the tablet, the middleware box and its link, the Plant Toolbox box
   and the Line 4 Remote Display as a mini board. The accent marks what we add and the data path; the PLC lights up
   only where its tags are the source (L3). Labels are sans, in the drawing's units (about 13px in the half column). */
#p-technology .pn-s-thin2 { stroke: var(--line-strong); stroke-width: 1.2; }
#p-technology .pn-s-plc--on { fill: var(--tint); stroke: var(--teal); stroke-width: 2; }
#p-technology .pn-s-dot { fill: var(--ink-2); stroke: none; }
#p-technology .pn-s-link { stroke: var(--ink-3); stroke-width: 1.5; }
#p-technology .pn-s-tab { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
#p-technology .pn-s-tabscr { fill: var(--bg-tint); stroke: var(--tint-border); }
#p-technology .pn-s-tabbtn { fill: var(--teal); stroke: none; }
#p-technology .pn-s-srv { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
#p-technology .pn-s-tv { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
#p-technology .pn-s-scr { fill: var(--bg); stroke: var(--hairline); }
#p-technology .pn-s-rail { fill: var(--bg-subtle); stroke: none; }
#p-technology .pn-s-mark { fill: var(--teal); stroke: none; }
#p-technology .pn-s-bar { fill: var(--bg-subtle); stroke: var(--line-strong); }
#p-technology .pn-s-bar--now { fill: var(--tint-border); stroke: var(--teal); }
#p-technology .pn-s-bar--empty { fill: none; stroke: var(--hairline); }
#p-technology .pn-s-goal { stroke: var(--ink-3); stroke-dasharray: 4 3; }
#p-technology .pn-s-pt { fill: var(--surface); stroke: var(--teal); stroke-width: 1.5; }
#p-technology .pn-s-lbl { font-family: var(--font-sans); font-size: 18px; font-weight: 500; fill: var(--ink-2); stroke: none; }
#p-technology .pn-s-lbl--mute { font-size: 16px; fill: var(--ink-3); }
#p-technology .pn-s-lbl--on { font-weight: 700; fill: var(--teal); }
#p-technology .pn-s-lbl--pt { font-weight: 700; fill: var(--ink); }
#p-technology .pn-s-lbl--path { font-weight: 600; fill: var(--teal); }
#p-technology .pn-art .pn-s-num text { font-size: 18px; }
/* Below 768 (as #pn-data): the drawing's labels give way to numbered stops, and the labels read as the numbered list
   under it; from 768 the labels sit in the drawing and the list leaves. */
#p-technology .pn-pic-keys { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: pn-key; }
#p-technology .pn-pic-keys li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--s-3); align-items: center; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); counter-increment: pn-key; }
#p-technology .pn-pic-keys li::before {
  content: counter(pn-key);
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
#p-technology .pn-pic-keys .pn-pic-key--ours::before { color: var(--white); background: var(--teal); border-color: var(--teal); }
@media (max-width: 767px) { #p-technology .pn-art .pn-s-lbl { display: none; } }
@media (min-width: 768px) { #p-technology :is(.pn-art .pn-s-num, .pn-pic-keys) { display: none; } }

/* Motion (no-preference only): each emitter's arcs ripple outward in turn, down the line from the depalletizer, and a
   collector's light blinks as it sends; Pause stops it at rest. The level pictures crossfade in 300 ms. */
@media (prefers-reduced-motion: no-preference) {
  #p-technology .pn-pic { transition: opacity 300ms ease, visibility 300ms ease; }
  #p-technology .pn-ways-still { display: inline-flex; }
  #p-technology .pn-sig-a1 { --a: 0s; }
  #p-technology .pn-sig-a2 { --a: .18s; }
  #p-technology .pn-sig-a3 { --a: .36s; }
  #p-technology .pn-ways-art :is(.pn-sig-h, .pn-sig-w) { animation: pn-sig 2.8s ease-out calc(var(--i) * .35s + var(--a)) infinite both; }
  #p-technology .pn-ways-art .pn-col-led { animation: pn-led 2.8s linear calc(var(--i) * .35s) infinite; }
  #p-technology .pn-ways:has(#pn-ways-still:checked) .pn-ways-art :is(.pn-sig-h, .pn-sig-w, .pn-col-led) { animation: none; }
}
@keyframes pn-sig { 0% { opacity: 0; } 12%, 48% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes pn-led { 0%, 14%, 100% { opacity: 1; } 5% { opacity: .2; } }

/* Line 4 by unit op beside the chosen way's picture (Layout A). Stacked below 1024, the picture first (its DOM
   place, so a phone meets it before the table); from 1024 two equal columns, the table left. */
#p-technology .pn-levels-detail { display: grid; gap: var(--s-6); min-width: 0; }
#p-technology .pn-uo { display: grid; gap: var(--s-3); min-width: 0; margin: 0; }
#p-technology .pn-uo .caption { margin-top: 0; }
#p-technology .pn-uo-ledger { --cols: minmax(0, 1.1fr) minmax(0, 0.5fr) minmax(0, 1.9fr) minmax(0, 1fr); }
#p-technology .pn-uo-name { font-weight: 600; }
/* Phone, and the half column from 1024: each unit op is two short lines under a two-line head: [Unit op | Level] over
   [How counts arrive | Status]. The head stays visible, so the cells drop their data-label captions. */
@media (max-width: 767px), (min-width: 1024px) {
  #p-technology .pn-uo-ledger .ledger-head,
  #p-technology .pn-uo-ledger .ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-4); align-items: center; }
  #p-technology .pn-uo-ledger .ledger-head { padding-block: var(--s-3) var(--s-2); }
  #p-technology .pn-uo-ledger .ledger-row { min-height: 0; padding-block: var(--s-3); }
  #p-technology .pn-uo-ledger :is(.ledger-head, .ledger-row) > :nth-child(even) { justify-self: end; text-align: right; }
  #p-technology .pn-uo-ledger .ledger-cell::before { content: none; }
}
@media (min-width: 1024px) {
  #p-technology .pn-levels-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "uo pic"; column-gap: var(--s-7); align-items: start; }
  #p-technology .pn-pics { grid-area: pic; max-width: none; }
  #p-technology .pn-uo { grid-area: uo; }
}

/* 4 · Remote Displays: the board list beside one screen and custom boards (R2·8 dropped the huddle note) --------- */
/* The figure: the list of standard boards (4.8/12) beside the TV (7.2/12) from 1200; the TV takes the extra 0.2 so from
   the full 1152 container its screen stays 640 or wider inside the bezel and the boards keep their 16:9 layout.
   Below 1200 (where a 7/12 screen would fall under 640 and stack) it is an accordion (see the end of the state rules): the picked board's screen opens under its row, at
   that board's own height. */
#p-technology .pn-boards { min-width: 0; margin: 0; }
#p-technology .pn-boards-grid { display: grid; gap: var(--s-5); align-items: start; min-width: 0; }
#p-technology .pn-boards-stage { display: grid; gap: var(--s-3); min-width: 0; }
@media (min-width: 1200px) {
  #p-technology .pn-boards-grid { grid-template-columns: minmax(0, 4.8fr) minmax(0, 7.2fr); column-gap: var(--s-6); }
  #p-technology .pn-boards-stage { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
#p-technology .pn-pair-state { justify-self: end; margin: 0; font-size: 13px; line-height: 1.4; text-align: right; color: var(--ink-3); }

/* The list: each board is a label for its radio. Hairline rows; the board on screen gets a navy edge and the surface
   fill, and while the screen steps through the boards a thin bar under that row fills for its turn. */
#p-technology .pn-board-list { min-width: 0; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hairline); }
#p-technology .pn-bl { position: relative; border-top: 1px solid var(--hairline); }
#p-technology .pn-bl label { display: grid; gap: 2px; padding: 12px var(--s-4) 12px calc(var(--s-4) + 3px); cursor: pointer; transition: background-color var(--t-fast) ease-out; }
#p-technology .pn-bl label::before { content: ""; position: absolute; inset: -1px auto 0 0; width: 3px; background: transparent; }
#p-technology .pn-bl::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--app-primary); }
#p-technology .pn-bl b { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
#p-technology .pn-bl-where { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }
#p-technology .pn-bl-what { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
/* The board on screen (rest state: the first; see the state rules below). */
#p-technology .pn-bl--1 label, #p-technology .pn-bl.is-on label { background: var(--surface); }
#p-technology .pn-bl--1 label::before { background: var(--app-primary); }
/* The custom-board offer: a tint card with a navy edge, so it reads as an offer rather than a footnote to the list. */
#p-technology .pn-custom { display: grid; gap: var(--s-2); max-width: 52ch; margin-top: var(--s-5); padding: var(--s-4) var(--s-5); font-size: 15px; line-height: 1.5; color: var(--ink-2); background: var(--tint); border: 1px solid var(--tint-border); border-left: 3px solid var(--app-primary); border-radius: var(--r-card); }
#p-technology .pn-custom p { margin: 0; }
#p-technology .pn-custom-t { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink); }
#p-technology .pn-custom .link-ghost { justify-self: start; margin-top: 2px; }

/* The TV (.pn-set): the stage sits in a black bezel with a thicker chin and a power light at its right, with no stand
   (the boards hang on a wall or over the line), so each board reads as a screen rather than a flat drawing. This is the page's one
   exception to site.css §49 rule 10 (boards are bare screens with no bezel). The bezel is drawn in fixed px, so every
   board keeps its own 16:9 inside it; the screens drop their hairline for the panel's black edge, and a faint sheen
   and edge shade sit over the glass (pointer-events: none, so hover still reaches the screens). */
#p-technology .pn-set { --tv-edge: 10px; --tv-chin: 20px; position: relative; min-width: 0; margin-bottom: var(--s-2); padding: var(--tv-edge) var(--tv-edge) var(--tv-chin); border-radius: 14px; background: linear-gradient(180deg, #2A2E35 0, #16191E 18px, #0E1014 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 0 0 1px rgba(10, 12, 16, .5), 0 2px 4px rgba(15, 20, 30, .14), 0 22px 40px -18px rgba(15, 20, 30, .5); }
#p-technology .pn-set::before { content: ""; position: absolute; right: 20px; bottom: calc(var(--tv-chin) / 2 - 2px); width: 4px; height: 4px; border-radius: 50%; background: #6EE7A0; box-shadow: 0 0 4px 1px rgba(110, 231, 160, .55); }
#p-technology .pn-set .pn-stage { position: relative; overflow: hidden; border-radius: 2px; background: var(--app-board-bg); box-shadow: 0 0 0 1px #050608; }
#p-technology .pn-set .pn-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, 0) 34%), radial-gradient(140% 120% at 50% 40%, rgba(10, 14, 20, 0) 62%, rgba(10, 14, 20, .07) 100%); }
#p-technology .pn-set .pn-scr { border: 0; }

/* The stage: the six screens overlaid in one cell (.dd-stack), so the frame never changes height; each screen fills
   it. At rest the first shows. */
#p-technology .pn-stage > .pn-scr { display: grid; visibility: hidden; opacity: 0; }
#p-technology .pn-stage > .pn-scr > * { min-height: 0; }
#p-technology .pn-stage > .pn-scr--1 { visibility: visible; opacity: 1; }
/* The line board (the shared .app-board, site.css §49s): the "… 3 more" row in italic; at 7/12 the downtime title keeps
   one line (its floor drops from 19px to 16px, still large text). */
#p-technology .pn-scr--1 .pn-board-more { font-style: italic; }
#p-technology .pn-scr--1 .app-board-dt h4 { font-size: max(16px, 2.4cqw); }

/* State, CSS only (site.css §45). Auto: nothing picked and nothing hovered, so each screen and its row take a 5 s turn
   in a 30 s loop (delay (i - 7) × 5 s puts screen i on at (i - 1) × 5 s); hovering the screen pauses the loop. Picked:
   the checked radio's board shows. Hovered: a hovered row's board shows over the pick. All the state rules share one
   specificity, so source order settles them. Reduced motion: no loop, the first board rests until one is picked. The
   loop and hover run from 1200 only. */
@keyframes pn-scr-turn { 0% { visibility: visible; opacity: 0; } 2%, 16.667% { visibility: visible; opacity: 1; } 18.5%, 100% { visibility: hidden; opacity: 0; } }
@keyframes pn-bl-turn { 0%, 16.667% { background: var(--surface); } 16.7%, 100% { background: transparent; } }
@keyframes pn-bl-edge { 0%, 16.667% { background: var(--app-primary); } 16.7%, 100% { background: transparent; } }
@keyframes pn-bl-fill { 0% { width: 0; } 16.667% { width: 100%; } 16.7%, 100% { width: 0; } }
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  #p-technology .pn-boards:not(:has(.pn-b:checked, .pn-bl:hover)) .pn-scr { animation: pn-scr-turn 30s linear calc((var(--i) - 7) * 5s) infinite both; }
  #p-technology .pn-boards:not(:has(.pn-b:checked, .pn-bl:hover)) .pn-bl label { animation: pn-bl-turn 30s step-end calc((var(--i) - 7) * 5s) infinite both; }
  #p-technology .pn-boards:not(:has(.pn-b:checked, .pn-bl:hover)) .pn-bl label::before { animation: pn-bl-edge 30s step-end calc((var(--i) - 7) * 5s) infinite both; }
  #p-technology .pn-boards:not(:has(.pn-b:checked, .pn-bl:hover)) .pn-bl::after { animation: pn-bl-fill 30s linear calc((var(--i) - 7) * 5s) infinite both; }
  #p-technology .pn-boards:has(.pn-set:hover) :is(.pn-scr, .pn-bl label, .pn-bl label::before, .pn-bl::after) { animation-play-state: paused; }
}
/* Picked or hovered: every screen and row off, then the picked board on, then (while a row is hovered) all off again
   and the hovered board on. */
#p-technology .pn-boards:has(.pn-b:checked, .pn-bl:hover) .pn-scr { visibility: hidden; opacity: 0; }
#p-technology .pn-boards:has(.pn-b:checked, .pn-bl:hover) .pn-bl label { background: transparent; }
#p-technology .pn-boards:has(.pn-b:checked, .pn-bl:hover) .pn-bl label::before { background: transparent; }
#p-technology .pn-boards:has(.pn-b-1:checked) :is(.pn-scr--1, .pn-bl--1 label),
#p-technology .pn-boards:has(.pn-b-2:checked) :is(.pn-scr--2, .pn-bl--2 label),
#p-technology .pn-boards:has(.pn-b-3:checked) :is(.pn-scr--3, .pn-bl--3 label),
#p-technology .pn-boards:has(.pn-b-4:checked) :is(.pn-scr--4, .pn-bl--4 label),
#p-technology .pn-boards:has(.pn-b-5:checked) :is(.pn-scr--5, .pn-bl--5 label),
#p-technology .pn-boards:has(.pn-b-6:checked) :is(.pn-scr--6, .pn-bl--6 label) { visibility: visible; opacity: 1; background: var(--surface); }
#p-technology .pn-boards:has(.pn-b-1:checked) .pn-bl--1 label::before,
#p-technology .pn-boards:has(.pn-b-2:checked) .pn-bl--2 label::before,
#p-technology .pn-boards:has(.pn-b-3:checked) .pn-bl--3 label::before,
#p-technology .pn-boards:has(.pn-b-4:checked) .pn-bl--4 label::before,
#p-technology .pn-boards:has(.pn-b-5:checked) .pn-bl--5 label::before,
#p-technology .pn-boards:has(.pn-b-6:checked) .pn-bl--6 label::before { background: var(--app-primary); }
@media (min-width: 1200px) {
  #p-technology .pn-boards:has(.pn-bl:hover) .pn-scr { visibility: hidden; opacity: 0; }
  #p-technology .pn-boards:has(.pn-bl:hover) .pn-bl label { background: transparent; }
  #p-technology .pn-boards:has(.pn-bl:hover) .pn-bl label::before { background: transparent; }
  #p-technology .pn-boards:has(.pn-bl--1:hover) :is(.pn-scr--1, .pn-bl--1 label),
  #p-technology .pn-boards:has(.pn-bl--2:hover) :is(.pn-scr--2, .pn-bl--2 label),
  #p-technology .pn-boards:has(.pn-bl--3:hover) :is(.pn-scr--3, .pn-bl--3 label),
  #p-technology .pn-boards:has(.pn-bl--4:hover) :is(.pn-scr--4, .pn-bl--4 label),
  #p-technology .pn-boards:has(.pn-bl--5:hover) :is(.pn-scr--5, .pn-bl--5 label),
  #p-technology .pn-boards:has(.pn-bl--6:hover) :is(.pn-scr--6, .pn-bl--6 label) { visibility: visible; opacity: 1; background: var(--surface); }
  #p-technology .pn-boards:has(.pn-bl--1:hover) .pn-bl--1 label::before,
  #p-technology .pn-boards:has(.pn-bl--2:hover) .pn-bl--2 label::before,
  #p-technology .pn-boards:has(.pn-bl--3:hover) .pn-bl--3 label::before,
  #p-technology .pn-boards:has(.pn-bl--4:hover) .pn-bl--4 label::before,
  #p-technology .pn-boards:has(.pn-bl--5:hover) .pn-bl--5 label::before,
  #p-technology .pn-boards:has(.pn-bl--6:hover) .pn-bl--6 label::before { background: var(--app-primary); }
}
#p-technology .pn-stage > .pn-scr { transition: opacity 160ms ease-out, visibility 160ms; }
/* The screen is white, so the row fill never sits on the screen itself. Keyboard focus mirrors onto the row. */
#p-technology .pn-boards:has(.pn-b-1:focus-visible) .pn-bl--1 label,
#p-technology .pn-boards:has(.pn-b-2:focus-visible) .pn-bl--2 label,
#p-technology .pn-boards:has(.pn-b-3:focus-visible) .pn-bl--3 label,
#p-technology .pn-boards:has(.pn-b-4:focus-visible) .pn-bl--4 label,
#p-technology .pn-boards:has(.pn-b-5:focus-visible) .pn-bl--5 label,
#p-technology .pn-boards:has(.pn-b-6:focus-visible) .pn-bl--6 label { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Below 1200: an accordion. The side, list and stage wrappers step aside (display: contents; the list keeps role=list),
   so the rows, the screen and its state line share one column; each row takes order 10 × i and the screen and state
   line slot in after the picked row (the first at rest). Only the picked screen is drawn, so the frame fits it. The
   TV (.pn-set) is the item that moves, centred under the row and capped at 880 so it stays a TV rather than a wall;
   under 640 its bezel thins to suit a phone-width set. */
@media (max-width: 1199px) {
  #p-technology .pn-boards-grid { gap: 0; }
  #p-technology :is(.pn-boards-side, .pn-board-list, .pn-boards-stage) { display: contents; }
  #p-technology .pn-board-list { border: 0; }
  #p-technology .pn-bl { order: calc(var(--i) * 10); }
  #p-technology .pn-bl--6 { border-bottom: 1px solid var(--hairline); }
  #p-technology .pn-boards-side > :is(.kbd-hint, .pn-custom) { order: 100; }
  #p-technology :is(.pn-set, .pn-boards-stage > .pn-pair-state) { --at: 1; }
  #p-technology .pn-set { order: calc(var(--at) * 10 + 1); width: min(100%, 880px); margin: var(--s-3) auto; }
  #p-technology .pn-boards-stage > .pn-pair-state { order: calc(var(--at) * 10 + 2); margin-block: var(--s-2) var(--s-4); }
  #p-technology .pn-boards:has(.pn-b-2:checked) :is(.pn-set, .pn-pair-state) { --at: 2; }
  #p-technology .pn-boards:has(.pn-b-3:checked) :is(.pn-set, .pn-pair-state) { --at: 3; }
  #p-technology .pn-boards:has(.pn-b-4:checked) :is(.pn-set, .pn-pair-state) { --at: 4; }
  #p-technology .pn-boards:has(.pn-b-5:checked) :is(.pn-set, .pn-pair-state) { --at: 5; }
  #p-technology .pn-boards:has(.pn-b-6:checked) :is(.pn-set, .pn-pair-state) { --at: 6; }
  #p-technology .pn-stage > .pn-scr { display: none; }
  #p-technology .pn-stage > .pn-scr--1 { display: grid; }
  #p-technology .pn-boards:has(.pn-b:checked) .pn-stage > .pn-scr { display: none; }
  #p-technology .pn-boards:has(.pn-b-1:checked) .pn-stage > .pn-scr--1,
  #p-technology .pn-boards:has(.pn-b-2:checked) .pn-stage > .pn-scr--2,
  #p-technology .pn-boards:has(.pn-b-3:checked) .pn-stage > .pn-scr--3,
  #p-technology .pn-boards:has(.pn-b-4:checked) .pn-stage > .pn-scr--4,
  #p-technology .pn-boards:has(.pn-b-5:checked) .pn-stage > .pn-scr--5,
  #p-technology .pn-boards:has(.pn-b-6:checked) .pn-stage > .pn-scr--6 { display: grid; }
}
@media (max-width: 639px) {
  #p-technology .pn-set { --tv-edge: 7px; --tv-chin: 14px; border-radius: 10px; }
  #p-technology .pn-set::before { right: 14px; width: 3px; height: 3px; }
}

/* The five drawn TV boards (.pn-tv), in the line board's look: a white 16:9 screen (inside the .pn-set bezel), a grey title
   strip with the PT mark, board name and scope, then the board. Sizes in cqw so the board scales like a TV; below a
   640px frame (phones) the screen loses its 16:9 and its parts stack, as the line board does. */
#p-technology .pn-tv { container-type: inline-size; min-width: 0; background: var(--app-board-bg); border: 1px solid var(--hairline); font-family: var(--app-font); color: var(--app-board-ink); }
#p-technology .pn-tv :is(p, dl, dt, dd, ol, li) { margin: 0; max-width: none; }
#p-technology .pn-tv-scr { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
#p-technology .pn-tv-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.6cqw; padding: 1.3cqw 2.2cqw; background: var(--app-board-rail); }
#p-technology .pn-tv-name { display: flex; align-items: center; gap: max(6px, .8cqw); font-size: max(13px, 1.9cqw); font-weight: 700; line-height: 1.1; color: var(--app-primary-dark); white-space: nowrap; }
#p-technology .pn-tv .app-board-mark { display: inline-grid; place-items: center; flex: none; width: max(22px, 3cqw); height: max(22px, 3cqw); border-radius: var(--app-r-type); background: var(--app-primary); color: var(--app-card); font-size: max(11px, 1.3cqw); font-weight: 700; line-height: 1; letter-spacing: -.4px; }
#p-technology .pn-tv-meta { font-size: max(12px, 1.3cqw); line-height: 1.3; color: var(--app-mute); text-align: right; }
#p-technology .pn-tv-body { min-height: 0; padding: 1.8cqw 2.2cqw; }
#p-technology .pn-tv-h { margin-bottom: .8cqw; font-size: max(12px, 1.3cqw); font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .04em; color: var(--app-mute); }
#p-technology .pn-tv-k { display: flex; flex-direction: column; }
#p-technology .pn-tv-k dt { font-size: max(12px, 1.6cqw); line-height: 1.25; }
#p-technology .pn-tv-k dd { font-size: max(24px, 4.6cqw); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#p-technology .pn-tv-k--bad dd { color: var(--app-board-bad); }
#p-technology .pn-tv-k--good dd { color: var(--app-board-good); }
#p-technology .pn-tv-pill { justify-self: end; padding: .3cqw 1cqw; border-radius: var(--app-r-round); font-size: max(11px, 1.15cqw); font-weight: 700; line-height: 1.3; white-space: nowrap; color: var(--app-primary-dark); background: var(--app-primary-soft); }
#p-technology .pn-tv-pill.is-good { color: var(--app-good-ink); background: var(--app-good-soft); }
#p-technology .pn-tv-pill.is-bad { color: var(--app-bad-ink); background: var(--app-bad-soft); }
#p-technology .pn-tv-pill.is-warn { color: var(--app-warn-ink); background: var(--app-warn-soft); }

/* Plant Downtime: a rail of plant totals and the line down now, then minutes by line as bars (the worst line red). */
#p-technology .pn-dt { display: grid; grid-template-columns: 30% minmax(0, 1fr); padding: 0; }
#p-technology .pn-tv-rail { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2cqw; padding: 1.8cqw 2.2cqw; background: var(--app-board-rail); border-top: 1px solid var(--app-line); }
#p-technology .pn-dt-now { display: grid; gap: 2px; margin: 0 -2.2cqw -1.8cqw; padding: 1.2cqw 2.2cqw; font-size: max(12px, 1.3cqw); line-height: 1.3; background: var(--app-board-dt); }
#p-technology .pn-dt-now span { font-size: max(11px, 1.15cqw); font-weight: 800; text-transform: uppercase; color: var(--app-board-bad-ink); }
#p-technology .pn-dt-now b { font-size: max(13px, 1.6cqw); }
#p-technology .pn-dt-lines { display: grid; grid-auto-rows: minmax(0, 1fr); align-content: stretch; min-height: 0; padding: 1.8cqw 2.2cqw; }
#p-technology .pn-dt-lines .pn-tv-h { align-self: start; }
#p-technology .pn-dt-row { display: grid; grid-template-columns: 9cqw minmax(0, 1fr) 12cqw; align-items: center; gap: 1.4cqw; font-size: max(12px, 1.4cqw); line-height: 1.2; }
#p-technology .pn-dt-row b { font-size: max(13px, 1.6cqw); }
#p-technology .pn-dt-bar { display: block; height: 62%; min-height: 8px; }
#p-technology .pn-dt-bar > span { display: block; width: calc(var(--v) * 1%); height: 100%; background: var(--app-board-now); }
#p-technology .pn-dt-row.is-bad .pn-dt-bar > span { background: var(--app-board-bad); }
#p-technology .pn-dt-n { font-variant-numeric: tabular-nums; color: var(--app-mute); }
#p-technology .pn-dt-row.is-bad :is(b, .pn-dt-n) { color: var(--app-board-bad-ink); }

/* Batch Record Tracking: today's five counts as tiles, then the latest folder reads. */
#p-technology .pn-brt { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2cqw; }
#p-technology .pn-brt-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2cqw; }
#p-technology .pn-brt-tiles .pn-tv-k { gap: .6cqw; padding: 1.4cqw 1.6cqw; background: var(--app-board-am); }
#p-technology .pn-brt-tiles .pn-tv-k dt { font-weight: 700; text-transform: uppercase; color: var(--app-board-am-ink); }
#p-technology .pn-brt-rows { min-height: 0; overflow: hidden; }
#p-technology .pn-brt-row { display: grid; grid-template-columns: 11cqw minmax(0, 1.3fr) minmax(0, 1fr) 11cqw; align-items: center; gap: 1.4cqw; padding: 1cqw 0; border-top: 1px solid var(--app-line); font-size: max(12px, 1.4cqw); line-height: 1.25; }
#p-technology .pn-brt-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#p-technology .pn-brt-gate { color: var(--app-mute); }

/* Master Plan: each line's orders and changeovers on an 8-hour axis (6am to 2pm) with the now line; Line 4's running
   order is behind plan (its OEE is off target). Blocks sit at --s hours from 6am and run --w hours. */
#p-technology .pn-mp { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .8cqw; }
#p-technology .pn-mp-hours, #p-technology .pn-mp-row { display: grid; grid-template-columns: 8cqw minmax(0, 1fr); gap: 1.2cqw; align-items: center; }
#p-technology .pn-mp-hours > div { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); font-size: max(11px, 1.1cqw); color: var(--app-mute); }
#p-technology .pn-mp-rows { position: relative; display: grid; grid-auto-rows: minmax(0, 1fr); gap: .7cqw; min-height: 0; }
#p-technology .pn-mp-rows::after { content: ""; position: absolute; top: -.6cqw; bottom: -.6cqw; left: calc(9.2cqw + (100% - 9.2cqw) * var(--now) / 8); border-left: 2px solid var(--app-board-bad); }
#p-technology .pn-mp-row b { font-size: max(12px, 1.5cqw); }
#p-technology .pn-mp-track { position: relative; height: 100%; background: repeating-linear-gradient(to right, var(--app-line) 0 1px, transparent 1px calc(100% / 8)); }
#p-technology .pn-mp-b { position: absolute; top: 8%; bottom: 8%; left: calc(var(--s) / 8 * 100%); width: calc(var(--w) / 8 * 100% - 2px); display: flex; align-items: center; padding: 0 .8cqw; overflow: hidden; font-size: max(11px, 1.15cqw); font-weight: 700; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; color: var(--app-board-am-ink); background: var(--app-board-am); border-left: 3px solid var(--app-primary); }
#p-technology .pn-mp-b.is-late { color: var(--app-board-bad-ink); background: var(--app-bad-soft); border-left-color: var(--app-board-bad); }
#p-technology .pn-mp-b.is-co { justify-content: center; padding: 0; color: var(--app-mute); background: repeating-linear-gradient(135deg, var(--app-fill) 0 4px, var(--app-line) 4px 6px); border-left: 0; }
#p-technology .pn-mp-key { display: flex; flex-wrap: wrap; align-items: center; gap: .6cqw 1.4cqw; font-size: max(11px, 1.1cqw); color: var(--app-mute); }
#p-technology .pn-mp-sw { display: inline-block; width: 1.6cqw; min-width: 10px; aspect-ratio: 1; margin-right: -.8cqw; background: var(--app-board-am); border-left: 2px solid var(--app-primary); }
#p-technology .pn-mp-sw.is-late { background: var(--app-bad-soft); border-left-color: var(--app-board-bad); }
#p-technology .pn-mp-sw.is-co { background: repeating-linear-gradient(135deg, var(--app-fill) 0 3px, var(--app-line) 3px 5px); border-left: 0; }
#p-technology .pn-mp-sw.is-now { width: 0; min-width: 0; border-left-color: var(--app-board-bad); }

/* Safety Board: the Decision Tree with each answer as the product's Yes/No pair, beside the color it lands on. */
#p-technology .pn-msb { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 2.4cqw; }
#p-technology .pn-msb-list { display: grid; grid-auto-rows: minmax(0, 1fr); padding: 0; list-style: none; }
#p-technology .pn-msb-tree { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
#p-technology .pn-msb-q { display: grid; grid-template-columns: 4cqw minmax(0, 1fr) 7cqw 7cqw; align-items: center; gap: 1cqw; border-top: 1px solid var(--app-line); font-size: max(12px, 1.4cqw); line-height: 1.25; }
#p-technology .pn-msb-n { font-weight: 700; color: var(--app-mute); }
#p-technology :is(.pn-msb-yes, .pn-msb-no) { padding: .6cqw 0; border: 1px solid var(--app-ctl-line); border-radius: var(--app-r-ctl); font-size: max(11px, 1.2cqw); font-weight: 700; text-align: center; color: var(--app-mute); }
#p-technology .pn-msb-q.is-y .pn-msb-yes { color: var(--app-card); background: var(--app-board-good); border-color: var(--app-board-good); }
#p-technology .pn-msb-q.is-n .pn-msb-no { color: var(--app-card); background: var(--app-board-bad); border-color: var(--app-board-bad); }
#p-technology .pn-msb-res { display: grid; align-content: center; justify-items: center; gap: 1.4cqw; background: var(--app-board-rail); margin: -1.8cqw -2.2cqw -1.8cqw 0; padding: 2cqw; }
#p-technology .pn-msb-disc { display: grid; place-content: center; justify-items: center; width: 17cqw; aspect-ratio: 1; border-radius: 50%; background: var(--app-board-good); color: var(--app-card); font-size: max(13px, 1.8cqw); font-weight: 700; line-height: 1.1; }
#p-technology .pn-msb-disc b { font-size: max(28px, 5.6cqw); line-height: 1; }
#p-technology .pn-msb-note { font-size: max(12px, 1.3cqw); line-height: 1.3; text-align: center; color: var(--app-mute); }

/* Shift Handover: Q, D, C and I results against goal, then the open actions the next shift inherits. */
#p-technology .pn-sho { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2cqw; }
#p-technology .pn-sho-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; }
#p-technology .pn-sho-t { display: grid; gap: .5cqw; padding: 1.3cqw 1.5cqw; border: 1px solid var(--app-line); }
#p-technology .pn-sho-t dt { display: flex; align-items: center; gap: .8cqw; font-size: max(12px, 1.35cqw); font-weight: 700; line-height: 1.2; }
#p-technology .pn-sho-t .app-type { display: inline-grid; place-items: center; flex: none; width: max(18px, 2.4cqw); height: max(18px, 2.4cqw); border-radius: var(--app-r-type); font-size: max(10px, 1.2cqw); font-weight: 800; line-height: 1; color: var(--app-card); background: var(--app-type-p); }
#p-technology .pn-sho-t .app-type.q { background: var(--app-type-q); }
#p-technology .pn-sho-t .app-type.d { background: var(--app-type-d); }
#p-technology .pn-sho-t .app-type.c { background: var(--app-type-c); }
#p-technology .pn-sho-t .app-type.i { background: var(--app-type-i); }
#p-technology .pn-sho-t dd:not(.pn-sho-st) { font-size: max(22px, 3.8cqw); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
#p-technology .pn-sho-t dd.is-bad { color: var(--app-board-bad); }
#p-technology .pn-sho-st { font-size: max(11px, 1.1cqw); line-height: 1.3; color: var(--app-mute); }
#p-technology .pn-sho-acts { min-height: 0; overflow: hidden; }
#p-technology .pn-sho-row { display: grid; grid-template-columns: minmax(0, 1fr) 11cqw auto; align-items: center; gap: 1.4cqw; padding: 1.1cqw 0 1.1cqw 1.4cqw; border-top: 1px solid var(--app-line); border-left: 3px solid var(--app-warn); font-size: max(12px, 1.4cqw); line-height: 1.25; }
#p-technology .pn-sho-row.is-over { border-left-color: var(--app-board-bad); }
#p-technology .pn-sho-row.is-open { border-left-color: var(--app-line); }
#p-technology .pn-sho-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#p-technology .pn-sho-row > span:not(.pn-tv-pill) { color: var(--app-mute); }

/* Phones (a frame under 640px): no 16:9, parts stack, type floors carry the size. */
@container (max-width: 639px) {
  #p-technology .pn-tv-scr { aspect-ratio: auto; }
  #p-technology .pn-tv-bar { flex-wrap: wrap; padding: 10px 12px; }
  #p-technology .pn-tv-meta { text-align: left; }
  #p-technology .pn-tv-body { padding: 12px; }
  #p-technology :is(.pn-dt, .pn-msb) { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  #p-technology .pn-tv-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
  #p-technology .pn-dt-now { grid-column: 1 / -1; margin: 0 -12px -12px; padding: 10px 12px; }
  #p-technology .pn-dt-lines { gap: 8px; padding: 12px; }
  #p-technology .pn-dt-row { grid-template-columns: 52px minmax(0, 1fr) 80px; gap: 8px; }
  #p-technology .pn-dt-bar { height: 12px; }
  #p-technology .pn-brt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #p-technology .pn-brt-tiles .pn-tv-k { padding: 8px 10px; }
  #p-technology .pn-brt-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; padding: 8px 0; }
  #p-technology .pn-brt-gate { display: none; }
  #p-technology .pn-mp { overflow-x: hidden; }
  #p-technology .pn-mp-hours, #p-technology .pn-mp-row { grid-template-columns: 48px minmax(0, 1fr); gap: 6px; }
  #p-technology .pn-mp-hours > div > :nth-child(even) { visibility: hidden; }
  #p-technology .pn-mp-rows { grid-auto-rows: 30px; gap: 6px; }
  #p-technology .pn-mp-rows::after { left: calc(54px + (100% - 54px) * var(--now) / 8); }
  #p-technology .pn-mp-b { padding: 0 4px; font-size: 10px; }
  #p-technology .pn-msb-tree { padding: 12px; }
  #p-technology .pn-msb-q { grid-template-columns: 24px minmax(0, 1fr) 40px 40px; gap: 6px; padding: 8px 0; }
  #p-technology .pn-msb-res { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; margin: 0; padding: 12px; }
  #p-technology .pn-msb-disc { width: 76px; }
  #p-technology .pn-msb-note { text-align: left; }
  #p-technology .pn-sho-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #p-technology .pn-sho-t { padding: 8px 10px; }
  #p-technology .pn-sho-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 0 8px 8px; }
  #p-technology .pn-sho-row > span:not(.pn-tv-pill) { display: none; }
}

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

/* Forced colors: boxes keep a solid edge, drawn marks use system colors (the .app parts follow site.css §49x). ---- */
@media (forced-colors: active) {
  #p-technology :is(.pn-sch, .pn-health, .pn-stop, .pn-head-render) { border: 1px solid; }
  #p-technology .pn-head-render { box-shadow: none; }
  #p-technology .pn-sch-svg { forced-color-adjust: none; }
  #p-technology .pn-sch-svg :is(path, rect, circle) { stroke: CanvasText; }
  #p-technology .pn-sch-svg rect { fill: Canvas; }
  #p-technology .pn-sch-svg :is(.pn-s-eye, .pn-s-node) { fill: CanvasText; }
  #p-technology .pn-sch-svg .pn-s-num circle { fill: Canvas; }
  #p-technology .pn-sch-svg .pn-s-num text { fill: CanvasText; }
  #p-technology .pn-stop-steps > li + li::before { forced-color-adjust: none; border-color: CanvasText; }
  #p-technology :is(.pn-ways-pic, .pn-ways-still, .pn-pic-art) { border: 1px solid; }
  #p-technology .pn-ways-art { forced-color-adjust: none; }
  #p-technology .pn-ways-key { forced-color-adjust: none; border-color: CanvasText; }
  #p-technology .pn-art { forced-color-adjust: none; }
  #p-technology .pn-art :is(path, rect, circle) { stroke: CanvasText; }
  #p-technology .pn-art rect { fill: Canvas; }
  #p-technology .pn-art :is(.pn-s-eye, .pn-s-dot, .pn-s-mark, .pn-s-tabbtn) { fill: CanvasText; }
  #p-technology .pn-art .pn-s-num circle { fill: Canvas; }
  #p-technology .pn-art text { fill: CanvasText; }
  #p-technology .pn-pic-keys :is(li, .pn-pic-key--ours)::before { forced-color-adjust: none; color: CanvasText; background: Canvas; border-color: CanvasText; }
  #p-technology :is(.pn-set, .pn-set .pn-scr) { border: 1px solid; }
}