/* Troubleshooting: a page torn out of a 1970s radio service manual (after the Realistic R7000).
   Ink technique adapted from remilia.org's print-fx (shared/paper.js inkFilter).
   From brand/mockups/troubleshooting-scan.html. Everything is scoped to .doc-ts. */
.doc-ts {
    --desk: #dcdcd2; --paper: #f3f1e8; --ink: #1b1a17; --ink-2: #3b3a35;
    --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --type: "Courier Prime", "Courier New", monospace;
  }
  .doc-ts { padding: 56px 16px 90px; background: var(--desk); color: var(--ink); font: 400 15.5px/1.38 var(--sans); font-stretch: 100%; }

  /* ---------- the page ---------- */
  .doc-ts .sheet { position: relative; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .08)) drop-shadow(6px 10px 14px rgb(0 0 0 / .22)); }
  .doc-ts .paper { position: absolute; inset: 0; background:
      linear-gradient(90deg, rgb(60 50 30 / .07), rgb(60 50 30 / 0) 36px),            /* the cover's left edge is the gatefold's fold: a soft shade, no tear */
      linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 40%, rgb(90 80 50 / .06)), /* uneven scanner light */
      var(--paper); }
  .doc-ts .paper svg.grain { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
  .doc-ts .show { position: absolute; inset: 70px 56px 70px 80px; transform: scaleX(-1); opacity: .05; filter: blur(.6px); pointer-events: none; user-select: none;
    font: 600 14px/2.05 var(--sans); color: #000; overflow: hidden; }

  /* the printed layer: transparent background, so the filter only sees ink */
  .doc-ts .print { position: relative; padding: 46px 64px 40px 86px; filter: url(#ink-ts); }
  @media (prefers-contrast: more) { .doc-ts .print { filter: none; } }

  .doc-ts .running { display: flex; justify-content: space-between; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1.6px solid var(--ink); padding-bottom: 6px; }
  .doc-ts h2 { font: 900 40px/1 var(--sans); font-stretch: 118%; letter-spacing: .015em; text-align: center; margin: 30px 0 4px; text-transform: uppercase; }
  .doc-ts .model { text-align: center; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 26px; }

  /* table of faults, with dot leaders like the contents page */
  .doc-ts .toc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; margin-bottom: 30px; }
  .doc-ts .toc > div { min-width: 0; }
  .doc-ts .toc .cols { display: flex; justify-content: space-between; font: 700 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 10px; }
  .doc-ts .toc h3 { font: 700 13.5px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; text-align: center; margin: 14px 0 6px; display: flex; justify-content: center; position: relative; }
  .doc-ts .toc h3 span { position: absolute; right: 0; }
  .doc-ts .toc a { display: flex; align-items: baseline; color: inherit; text-decoration: none; font-size: 15px; line-height: 1.42; }
  .doc-ts .toc a .t { flex: none; max-width: 86%; }
  .doc-ts .toc a .lead { flex: 1; overflow: hidden; white-space: nowrap; margin: 0 2px; }
  .doc-ts .toc a .lead::after { content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ."; letter-spacing: .12em; }
  .doc-ts .toc a .n { flex: none; font-variant-numeric: tabular-nums; }
  .doc-ts .toc a:hover .t, .doc-ts .toc a:focus-visible .t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
  .doc-ts .toc a:focus-visible { outline: 1.5px dashed var(--ink); outline-offset: 2px; }

  /* block diagram, set like a line-art figure */
  .doc-ts figure { margin: 6px 0 28px; }
  .doc-ts figure svg { width: 100%; height: auto; display: block; }
  .doc-ts figure svg text { font-family: var(--sans); }
  .doc-ts figcaption { text-align: center; font: 700 12.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }

  /* the chart: heavy outer rule, hairlines inside */
  .doc-ts table { width: 100%; border-collapse: collapse; border: 2.2px solid var(--ink); }
  .doc-ts caption { caption-side: top; font: 900 22px/1 var(--sans); font-stretch: 118%; letter-spacing: .02em; text-transform: uppercase; padding-bottom: 12px; }
  .doc-ts thead th { font: 800 12.5px/1.15 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 8px 10px 7px; border-bottom: 2.2px solid var(--ink); border-right: 1px solid var(--ink); }
  .doc-ts thead th:last-child { border-right: 0; }
  .doc-ts thead th:first-child { width: 7%; } .doc-ts thead th:nth-child(2) { width: 30%; } .doc-ts thead th:nth-child(3) { width: 29%; }
  .doc-ts tbody tr.step th { text-align: left; font: 800 12.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; padding: 9px 10px 7px; border-top: 1.6px solid var(--ink); border-bottom: 1px solid var(--ink); background: rgb(27 26 23 / .06); }
  .doc-ts tbody td { vertical-align: top; padding: 9px 10px 10px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); font-size: 14.5px; line-height: 1.38; }
  .doc-ts tbody td:last-child { border-right: 0; }
  .doc-ts td.no { font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
  .doc-ts .err { font: 700 14px/1.35 var(--type); display: block; }
  .doc-ts .tw { font: 400 14px/1.35 var(--type); }
  .doc-ts .cmd { display: block; font: 700 14px/1.4 var(--type); margin-top: 6px; padding-left: 14px; position: relative; cursor: copy; }
  .doc-ts .cmd::before { content: "▸"; position: absolute; left: 0; font-family: var(--sans); }
  .doc-ts .cmd.copied::after { content: "  (copied)"; font-weight: 400; }
  .doc-ts .note { display: block; margin-top: 6px; font-size: 13px; font-style: italic; }
  .doc-ts .norm { display: inline-block; margin-top: 6px; font: 800 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid var(--ink); padding: 3px 5px 2px; }
  .doc-ts tr:target td, .doc-ts tr.lit td { background: rgb(27 26 23 / .07); }

  .doc-ts .after { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; margin-top: 24px; font-size: 14.5px; }
  .doc-ts .after h4 { font: 800 13px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 6px; }
  .doc-ts .after p { margin: 0 0 8px; }
  .doc-ts .after a { color: inherit; text-decoration-thickness: 1.2px; text-underline-offset: 2px; }
  .doc-ts .warn { border: 2.2px solid var(--ink); padding: 8px 10px; }
  .doc-ts .warn b { display: block; font: 900 13px/1 var(--sans); font-stretch: 112%; letter-spacing: .08em; margin-bottom: 4px; }
  .doc-ts .foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; margin-top: 34px; font-size: 11px; letter-spacing: .04em; }
  .doc-ts .foot .pg { font: 700 15px/1 var(--sans); }
  .doc-ts .foot .r { text-align: right; }

  /* ---------- the gatefold ---------- */
  /* Fixed paper sizes, scaled to fit (troubleshooting.js sets --s and the stage height).
     Closed, the rig slides so the cover sits in the middle; open, the whole spread does. */
  .doc-ts .stage { position: relative; }
  .doc-ts .rig { position: absolute; left: 50%; top: 0; width: 1632px; height: 1056px; transform-origin: 50% 0; perspective: 3200px;
    transform: translateX(calc(-50% + var(--shift, 0px))) scale(var(--s, 1)); transition: transform .7s cubic-bezier(.3,.6,.2,1); }
  .doc-ts .letter { width: 816px; height: 1056px; }                       /* US Letter at 96 dpi */
  .doc-ts .letter .print { height: 100%; display: flex; flex-direction: column; padding: 40px 54px 30px 74px; }
  .doc-ts .letter .foot, .doc-ts .spread .foot { margin-top: auto; }
  .doc-ts .letter h2 { margin-top: 22px; }
  .doc-ts .letter .model { margin-bottom: 18px; }
  .doc-ts .letter .toc { margin-bottom: 18px; }
  .doc-ts .letter figure { margin: 0 0 14px; }
  .doc-ts .base, .doc-ts .leaf { position: absolute; top: 0; left: 816px; width: 816px; height: 1056px; }
  .doc-ts .leaf { transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45,.05,.2,1); z-index: 3; cursor: pointer; }
  .doc-ts .open .leaf { transform: rotateY(-180deg); cursor: default; }
  .doc-ts .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .doc-ts .face.back { transform: rotateY(180deg); }
  .doc-ts .half { position: absolute; inset: 0; overflow: hidden; }
  .doc-ts .spread { position: absolute; top: 0; width: 1632px; height: 1056px; }
  .doc-ts .half.l .spread { left: 0; } .doc-ts .half.r .spread { left: -816px; }
  .doc-ts .spread .print { height: 100%; display: flex; flex-direction: column; padding: 40px 60px 30px 74px; }
  .doc-ts .spread thead th:first-child { width: 5%; } .doc-ts .spread thead th:nth-child(2) { width: 27%; } .doc-ts .spread thead th:nth-child(3) { width: 27%; }
  .doc-ts .spread caption { font-size: 26px; }
  .doc-ts .crease { position: absolute; top: 0; bottom: 0; left: 806px; width: 20px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .4s .5s;
    background: linear-gradient(90deg, rgb(0 0 0 / 0), rgb(40 30 10 / .16) 45%, rgb(255 255 255 / .35) 52%, rgb(0 0 0 / 0)); }
  .doc-ts .open .crease { opacity: 1; }
  .doc-ts .tab { position: absolute; right: -34px; top: 420px; width: 34px; height: 200px; background: var(--paper); border: 1.5px solid var(--ink); border-left: 0; border-radius: 0 6px 6px 0;
    display: grid; place-items: center; writing-mode: vertical-rl; font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; box-shadow: 4px 4px 8px rgb(0 0 0 / .15); }
  .doc-ts .open .tab { display: none; }
  .doc-ts .unfold { all: unset; cursor: pointer; display: block; margin: 6px auto 0; font: 800 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1.5px solid currentColor; }
  .doc-ts .unfold:focus-visible, .doc-ts .fold:focus-visible { outline: 2px dashed var(--ink); outline-offset: 4px; }
  .doc-ts .fold { all: unset; cursor: pointer; position: absolute; top: -40px; right: 0; font: 700 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #57574f; display: none; }
  .doc-ts .open .fold { display: block; }
  /* the cover's lower half: how to use the chart, and the three test points from Figure 7-1 */
  .doc-ts .howto { border-top: 1.6px solid var(--ink); padding-top: 12px; font-size: 14.5px; }
  .doc-ts .howto h4 { font: 800 13px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 6px; }
  .doc-ts .howto p { margin: 0 0 8px; }
  .doc-ts .tp { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .doc-ts .tp li { display: grid; grid-template-columns: 44px 120px 1fr; align-items: baseline; }
  .doc-ts .tp b { font: 800 12px/1 var(--sans); letter-spacing: .06em; }
  .doc-ts .tp .cmd { margin-top: 0; }

  /* Phones: open, the spread is held at the cover's size and you swipe across it. */
  .doc-ts .stage.pan { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .doc-ts .stage.pan .rig { left: 0; transform: scale(var(--s, 1)); transform-origin: 0 0; transition: none; }
  @media (max-width: 640px) { .doc-ts { padding: 28px 12px 50px; } }
  .doc-ts .letter { font-size: 14px; line-height: 1.32; }
  .doc-ts .letter .toc a { font-size: 13.5px; line-height: 1.36; }
  .doc-ts .letter .toc h3 { margin: 10px 0 4px; }
  /* closed, the inside stays hidden (it would peek out around the cover); it appears as the cover lifts, and goes once it's back down */
  .doc-ts .base { visibility: hidden; transition: visibility 0s .9s; }
  .doc-ts .open .base { visibility: visible; transition-delay: 0s; }