/* Cable only: the compact title block (no Material cell), the truth table and the honest section.
   Shared sheet rules live in sheet.css. */

/* ---- Compact title block: Status takes the whole last row. */
[data-sheet="cable"] .tb-cell[data-key="status"]{grid-column:span 6}
@media (max-width:1199px){[data-sheet="cable"] .tb-cell[data-key="status"]{grid-column:span 3}}
@media (max-width:760px){[data-sheet="cable"] .tb-cell[data-key="status"]{grid-column:span 2}}

/* ---- Truth table: columns 1-8, 24px under its statement, Body cells. The running row is told
   apart by position, a paper ground and weight; the lamp colour never touches it. Its first column
   keeps the cell padding so the running row's text does not sit on the edge of its ground. */
.doc-table.truth{grid-column:1 / 9;margin-top:24px}
.doc-table.truth th,.doc-table.truth td{font-size:17px;line-height:1.4}
.doc-table.truth thead th{font-size:15px;line-height:20px}
.doc-table.truth tr > :first-child{padding-left:16px}
.doc-table.truth tr.run > *{background:var(--paper);color:var(--ink);font-weight:700}
.table-caption{grid-column:1 / 9;margin-top:16px;max-width:34em}

/* ---- The honest section. Headed paragraphs in columns 1-6 and Listing 1 in 7-12, its top on the
   first h3's top. No numbers, icons or boxes: they are paragraphs, not steps. */
.honest > .lead{margin-top:24px;max-width:34em}
.honest .groups{grid-column:1 / 7;grid-row:3;margin-top:32px}
.honest .groups > section + section{margin-top:24px}
.honest .groups p{margin-top:8px;max-width:34em}
.honest .listing{grid-column:7 / 13;grid-row:3;margin-top:32px}

@media (max-width:1199px){
  .honest .groups,.honest .listing{grid-column:1 / -1;grid-row:auto}
  .honest .listing{margin-top:24px}
}

@media (max-width:760px){
  .doc-table.truth,.table-caption{grid-column:1 / -1}
  .doc-table.truth th,.doc-table.truth td,.doc-table.truth tr > :first-child{padding:12px 8px}
}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .doc-table.truth tbody th,.doc-table.truth td{font-size:15px}
}

/* ---- View E, the signal live. Desktop: the hint over the pedal (columns 1-3), the trace with its
   64px label gutter (4-8) and the tape under its label (9-12) share one strip; the status line sits
   12px under the strip. Tablet: pedal 1-4 and trace 5-12 in one row, the tape full width below.
   Phone: one column in source order. The plot is 240px tall (200px on phones). */
.view-e{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;position:relative}
.view-e > *{min-width:0}
.view-e .hint{grid-column:1 / 5;grid-row:1;margin-bottom:8px;font-size:15px;line-height:20px}
.view-e #pedal{grid-column:1 / 5;grid-row:2}
.view-e .trace{grid-column:5 / 9;grid-row:2}
.view-e .tape-wrap{grid-column:9 / 13;grid-row:1 / 3;display:grid;grid-template-rows:subgrid}
.view-e .status{grid-column:1 / -1;grid-row:3;margin-top:12px}
.view-e figcaption{grid-column:1 / -1;grid-row:4}

/* The drawn pedal is the button: no box of its own, only the drawing and the focus ring. */
#pedal{display:block;width:100%;height:160px;margin:0;padding:0;border:0;background:none;color:var(--paper);font:inherit;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#pedal:focus-visible{outline:2px solid var(--paper);outline-offset:6px}
#pedal svg{display:block;width:100%;height:100%;overflow:visible}
/* The lens is the page's only lamp: unlit it is the 3D scene's dark lens; lit, it is lamp orange,
   and only the flash gate lights it. Rise 90ms, fall 160ms. The treadle turns about the hinge by the
   pressed minus rest angle: 40ms down, 60ms back up. */
#pedal .lens{fill:#552010;transition:fill 160ms ease-in}
#pedal .lens.lit{fill:var(--lamp);transition-duration:90ms;transition-timing-function:ease-out}
#pedal g.treadle{transform-box:view-box;transition:transform 60ms ease-in}
#pedal svg.down g.treadle{transform:rotate(var(--press));transition:transform 40ms ease-out}

/* The wire, from the drawn gland into the plot's left border at channel 1's low line. */
.view-e .chain{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--paper)}

/* The plot and its labels. Channel labels sit in the gutter, each centred on its channel. */
.trace{display:grid;grid-template-columns:64px minmax(0,1fr);--plot:240px}
.trace .gutter{position:relative;height:var(--plot)}
.trace .gutter span{position:absolute;left:0;transform:translateY(-50%);font-size:15px;line-height:20px}
.trace .plot{height:var(--plot)}
.trace canvas{display:block;width:100%;height:100%}
.trace .scale{grid-column:2;display:flex;justify-content:space-between;gap:16px;margin-top:8px;font-size:15px;line-height:20px}

/* The agent tape: Home's #tape exactly, with its torn bottom edge, as tall as the plot. */
.tape-label{margin-bottom:8px;font-size:15px;line-height:20px}
.tape{margin:0;min-height:240px;padding:12px 16px;background:var(--paper);color:var(--ink);font:400 13.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;
  padding-left:calc(16px + 12ch);text-indent:-12ch each-line;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),97% 100%,94% calc(100% - 5px),91% 100%,88% calc(100% - 5px),85% 100%,82% calc(100% - 5px),79% 100%,76% calc(100% - 5px),73% 100%,70% calc(100% - 5px),67% 100%,64% calc(100% - 5px),61% 100%,58% calc(100% - 5px),55% 100%,52% calc(100% - 5px),49% 100%,46% calc(100% - 5px),43% 100%,40% calc(100% - 5px),37% 100%,34% calc(100% - 5px),31% 100%,28% calc(100% - 5px),25% 100%,22% calc(100% - 5px),19% 100%,16% calc(100% - 5px),13% 100%,10% calc(100% - 5px),7% 100%,4% calc(100% - 5px),0 100%)}
.tape .caret{display:inline-block;width:.6em;height:1.05em;vertical-align:-.17em;background:var(--ink)}
/* The cut: an ink bar where the lease lapsed, then the host's own note in Apfel Grotezk. */
.tape .keep{white-space:nowrap}
.tape .cut{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.17em;background:var(--ink)}
.tape .cut-tag{display:inline-block;height:20px;padding:0 8px;border:1px solid var(--ink);border-radius:2px;background:var(--paper);color:var(--ink);
  font:400 15px/18px var(--sans);vertical-align:1px;white-space:nowrap}

@media (max-width:1199px){
  .view-e .hint{grid-column:1 / 5}
  .view-e #pedal{grid-column:1 / 5}
  .view-e .trace{grid-column:5 / 13}
  .view-e .tape-wrap{grid-column:1 / -1;grid-row:3;display:block;margin-top:24px}
  .view-e .status{grid-row:4}
  .view-e figcaption{grid-row:5}
}
@media (max-width:760px){
  .view-e{grid-template-columns:minmax(0,1fr)}
  .view-e > *,.view-e .hint,.view-e #pedal,.view-e .trace,.view-e .tape-wrap,.view-e .status,.view-e figcaption{grid-column:1;grid-row:auto}
  .view-e #pedal{height:128px}
  .view-e .trace{margin-top:16px;--plot:200px}
  .tape{min-height:200px}
  .view-e .tape-wrap{margin-top:24px}
  .view-e .chain{display:none}
}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .tape{font-size:12px;padding:8px 12px 8px calc(12px + 12ch)}
}

/* ---- Calm: the treadle and the lens snap. The lens is still lit only through the gate. */
@media (prefers-reduced-motion: reduce){#pedal .lens,#pedal .lens.lit,#pedal g.treadle,#pedal svg.down g.treadle{transition:none}}
html.calm #pedal .lens,html.calm #pedal .lens.lit,html.calm #pedal g.treadle,html.calm #pedal svg.down g.treadle{transition:none}

/* ---- View D: Held in columns 1-6 and Released in 7-12 on desktop; stacked 32px apart below that.
   Each state's h3 sits 16px over its drawing; the drawing is built at the box's own width. */
.view-d{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.view-d > *{grid-column:1 / -1;min-width:0}
.view-d .state[data-state="held"]{grid-column:1 / 7}
.view-d .state[data-state="released"]{grid-column:7 / 13}
.view-d h3{margin:0 0 16px;font-size:1em;font-weight:700;line-height:1.4}
.view-d svg{display:block;width:100%;height:auto;overflow:visible;color:var(--paper)}
@media (max-width:1199px){
  .view-d .state[data-state]{grid-column:1 / -1}
  .view-d .state + .state{margin-top:32px}
}

/* ---- Pinout: View F in columns 1-4, View G in 5-7, the wire table and its note in 8-12, all
   top-aligned 24px under the heading. Tablet: F and G share a row, the table below. Phone: stacked. */
.pinout > .doc-h{grid-row:1}
.pinout .view-f{grid-column:1 / 5;grid-row:2;margin-top:24px}
.pinout .view-g{grid-column:5 / 8;grid-row:2;margin-top:24px}
.pinout .wires{grid-column:8 / 13;grid-row:2;margin-top:24px}
.pinout svg{display:block;width:100%;height:auto;overflow:visible;color:var(--paper)}
.pinout .note{margin-top:16px;max-width:34em}
@media (max-width:1199px){
  .pinout .view-f{grid-column:1 / 7}
  .pinout .view-g{grid-column:7 / 13}
  .pinout .wires{grid-column:1 / -1;grid-row:3;margin-top:32px}
}
@media (max-width:760px){
  .pinout .view-f,.pinout .view-g,.pinout .wires{grid-column:1 / -1;grid-row:auto}
  .pinout .view-g,.pinout .wires{margin-top:32px}
}

/* ---- Print. The running row keeps its place by rules and weight; View E needs a foot, so only its
   tape (as plain text in a ruled box) and the line that says so go on paper. */
@media print{
  .doc-table.truth th,.doc-table.truth td{padding-block:8px}
  .doc-table.truth tr.run > *{background:none;color:var(--ink);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);font-weight:700}
  .view-e .hint,.view-e #pedal,.view-e .trace,.view-e .status,.view-e .chain,.tape-label,.tape .caret{display:none}
  .view-d,.view-e,.view-e .tape-wrap{display:block}
  .view-d{break-inside:auto}
  .view-d .state{break-inside:avoid}
  .view-d .state + .state{margin-top:32px}
  .doc-table.truth,.honest .groups,.honest .listing{margin-top:24px}
  .view-e .print-only{margin-bottom:12px}
  .view-e .tape-wrap{margin-top:0}
  /* View F and View G share a row on paper, at the shares of the print width js/pages/cable.js
     draws them at (PRINT_SHARE in js/ui/cable-views.js); the table and note run full width below. */
  .pinout{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:3.5%}
  .pinout > .doc-h,.pinout .wires{flex:0 0 100%}
  .pinout .view-f{flex:0 0 58%}
  .pinout .view-g{flex:0 0 38%}
  .pinout .view-f,.pinout .view-g{margin-top:16px}
  .pinout .wires{margin-top:16px}
  .tape{min-height:0;background:none;color:var(--ink);border:1px solid var(--ink);clip-path:none}
  .tape .cut{width:0;background:none;border-left:2px solid var(--ink)}
  .tape .cut-tag{background:none;color:var(--ink);border-color:var(--ink)}
}