/* ==========================================================================
   Selective Amplifiers — technology.css
   Loaded only by routes carrying 'css' => 'technology' in routes.php.

   Two components, both of them content rather than decoration:

   1. The signal chain. The manual draws it (Diagram 6P) as a wide schematic
      with one row per input — unreadable below about 900 px and impossible to
      reflow. Rebuilt here as three stages of ordered list: signal runs left to
      right between stages and top to bottom inside one, and the <ol> carries
      the order for a screen reader so the drawn connector is decoration on top
      of real structure rather than the structure itself. Same reasoning as
      viz/zones.php choosing HTML rows over one big SVG.
      Each stage is a .card and carries its own explainer beneath its list, so
      the three stages are three columns rather than a diagram plus a second
      full-width block repeating the same headings.

   2. The cable-gauge tables. Three narrow numeric tables that want to sit side
      by side; main.css's 560 px comparison-table minimum is right for a wide
      spec comparison and wrong for four columns of short figures.

   Everything else on the page is main.css. No new colours, no new header
   treatment — the breaking hairline is still the only one.
   ========================================================================== */

/* ── Signal chain ───────────────────────────────────────────────────────── */
/* Each stage is a .card carrying its step list AND its explainer prose, so the
   three read side by side (client request, 2026-08-01). Before that the section
   was the chain diagram followed by a full-width prose column that repeated the
   same three "Stage n" headings underneath it; the duplicate headings and the
   second full-width block were most of the section's height.
   220 px was the right minimum for a bare list and is far too narrow for a
   column of body copy — 300 px keeps three across at --maxw and drops to one
   before the prose gets unreadable. */

.chain{
  display:grid;
  gap:var(--s4);
  grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr));
  margin:0 0 var(--s5);
}

/* .card supplies the box; it also sets gap on its own flex column, which would
   double up with the margins below. */
.chain-stage{gap:0;}

.chain-stage-head{
  display:flex;
  align-items:baseline;
  gap:var(--s3);
  padding-bottom:var(--s2);
  margin-bottom:var(--s3);
  border-bottom:1px solid var(--rule);
}
.chain-stage-head .label{color:var(--paper);}
/* The stage's own count, in the trailing position .sec-head-meta uses. */
.chain-stage-head .chain-n{
  margin-left:auto;
  font-size:var(--fs-micro);
  letter-spacing:var(--track);
  text-transform:uppercase;
  color:var(--dim);
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
}

.chain-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.chain-steps li{
  position:relative;
  margin:0;
  padding:9px var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  font-size:var(--fs-small);
  line-height:1.45;
}
/* The connector: the gap between two steps, made visible. */
.chain-steps li + li::before{
  content:'';
  position:absolute;
  left:50%;
  top:-14px;
  width:1px;
  height:14px;
  background:var(--rule);
}
/* Same alternation main.css already makes for .card and .notice — on a panel
   band the step would otherwise be the colour of the band behind it. */
.sec-panel .chain-steps li{background:var(--ink);}
/* …but a stage is now itself a .card, and main.css already flipped THAT to
   --ink inside .sec-panel. Flipping the steps too would paint them the colour
   of the card holding them. Three levels, all existing tokens: section --panel,
   card --ink, step --panel. */
.sec-panel .card .chain-steps li{background:var(--panel);}

/* ── The stage explainer ────────────────────────────────────────────────── */
/* Body copy inside the stage card. .card p already supplies colour, size and
   line-height, so this is spacing and the two enumerations. */

.chain-note{margin-top:var(--s4);}
/* .card p sets margin:0 and is (0,1,1); a bare `> * + *` is only (0,1,0) and
   loses, which collapsed every paragraph gap in the card. Measured, not
   guessed — the extra class is what makes this rule apply at all. */
.card .chain-note > * + *{margin-top:var(--s3);}
.chain-note ul{
  margin:0;
  padding-left:1.15em;
  color:var(--dim);
  font-size:var(--fs-small);
  line-height:1.6;
}
.chain-note li{margin-bottom:6px;}
.chain-note li:last-child{margin-bottom:0;}
/* The term in a term-and-definition line: it is the thing being scanned for. */
.chain-note strong{color:var(--paper);font-weight:600;}

/* The cable gauge tables moved to the documentation page at the client's first
   review, so `.cable-tables` now lives in main.css (§9) rather than here. */

/* ── Latency table ──────────────────────────────────────────────────────── */
/* Same reasoning as the cable tables: three short numeric columns, so main.css's
   560 px scroll minimum hides a column instead of protecting one. .table-scroll
   stays on the element as a fallback if a translation ever lengthens a header. */
.tech-latency > table{min-width:0;}
.tech-latency .specs th[scope="row"]{width:auto;}
.tech-latency .specs td{font-variant-numeric:tabular-nums lining-nums;}

/* ── Print ──────────────────────────────────────────────────────────────── */
/* An integrator printing this page wants the chain and the tables; the chain
   is the one thing here that would otherwise break badly across a page. */
@media print{
  /* Per STAGE, not per chain: now that each stage carries its explainer the
     whole chain is ~2000 px and cannot be held on one page. A stage can. */
  .chain-stage{break-inside:avoid;}
  .chain-steps li{background:none;}
  .chain-stage.card{border-color:#ccc;}
}