/* Technique School — REFERENCE.
   The course is a manual you consult, not a page you admire. So: white ground, crisp ink,
   clean sans throughout, and the diagrams made the biggest thing on the page.
   Fixes the six complaints directly —
     too dark / murky        -> white ground, 17.9:1 ink
     colors felt wrong       -> only the two colors the diagrams already use (teal path, copper contact)
     too styled for reference-> no posters, no display faces, no full-bleed; rules and tables
     type felt off           -> Helvetica throughout, tight and scannable; no editorial serif
     diagrams got lost       -> 2-up storyboards at ~2x, dark plates on white, spec beside the drawing
     flat                    -> denser rhythm, a real two-column lesson spec, a visible key
   WCAG 2.1/2.2 AA: ink 17.9:1, muted 6.4:1, teal 6.1:1, copper 5.8:1, UI borders >=3:1. */

body.tech-ref{
  --bg:#ffffff;--panel:#f4f6f7;--ink:#101820;--muted:#53616c;
  --line:#dde2e5;--line-ui:#7d8890;--teal:#0d6e66;--copper:#9a5312;--plate:#0e2230;
  background:var(--bg);color:var(--ink);margin:0;
  font:17px/1.55 'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.tech-ref ::selection{background:var(--teal);color:#fff}
.tech-ref main{max-width:1240px;margin:0 auto;padding:0 40px 80px}
.tech-ref section{margin:64px 0}
.tech-ref p{text-wrap:pretty;max-width:68ch}
.tech-ref a{color:var(--teal);text-underline-offset:3px}

/* running head */
.tech-ref header.compact-library-nav{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:0 40px;min-height:56px;background:var(--bg);border-bottom:1px solid var(--line);color:var(--ink)}
.tech-ref header.compact-library-nav .guide-home{color:var(--ink);font:700 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;text-decoration:none;margin-right:auto}
.tech-ref header.compact-library-nav>a{color:var(--ink);font:600 14px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;text-decoration:none;padding:0 4px}
.tech-ref header.compact-library-nav>a:hover{color:var(--teal)}
.tech-ref header.compact-library-nav .all-tables>summary{list-style:none;border:1px solid var(--line-ui);border-radius:5px;padding:7px 13px;white-space:nowrap;cursor:pointer;font:600 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif}
.tech-ref header.compact-library-nav .all-tables>summary::-webkit-details-marker{display:none}
.tech-ref header.compact-library-nav .all-tables-panel{position:absolute;right:40px;top:54px;z-index:30;width:min(760px,92vw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:10px;background:var(--bg);border:1px solid var(--line-ui);border-radius:8px;box-shadow:0 18px 40px rgba(16,24,32,.14)}
.tech-ref header.compact-library-nav .all-tables-panel a{color:var(--ink);text-decoration:none;padding:10px;border-radius:4px;font:14px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif}
.tech-ref header.compact-library-nav .all-tables-panel a:hover,
.tech-ref header.compact-library-nav .all-tables-panel a[aria-current=page]{background:var(--teal);color:#fff}
.tech-ref .section-progress,.tech-ref [class*="progress"]{background:var(--bg)!important;color:var(--muted)!important;border-bottom:1px solid var(--line)!important;font:600 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif!important;letter-spacing:1.2px!important;text-transform:uppercase!important;box-shadow:none!important}
.tech-ref .section-progress *,.tech-ref [class*="progress"] *{color:var(--ink)!important}

/* headings: tight sans, no display faces */
.tech-ref .eyebrow{font:700 11px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal);margin:0 0 10px;max-width:none}
.tech-ref h1,.tech-ref h2,.tech-ref h3,.tech-ref h4{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink)}
.tech-ref h1{font:700 clamp(34px,3.6vw,50px)/1.06 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-1.2px;margin:0 0 16px}
.tech-ref h1 em{font-style:normal;color:var(--teal)}
.tech-ref h2{font:700 clamp(23px,2.3vw,30px)/1.15 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.6px;max-width:30ch;margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.tech-ref h3{font:700 19px/1.25 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.3px;margin:0 0 8px}
.tech-ref h4{font:700 11px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--copper);margin:0 0 8px}

/* hero: a title block and one large reference plate */
.tech-ref .hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:44px;align-items:center;padding:44px 0 0;background:none}
.tech-ref .hero-copy{max-width:46ch}
.tech-ref .hero-deck{font:400 19px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--muted);max-width:44ch;margin:0 0 18px}
.tech-ref .hero-note{font:600 11px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:20px;padding-top:12px;border-top:1px solid var(--line)}
.tech-ref .hero-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0 0}
.tech-ref .hero-art{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--plate)}
.tech-ref .hero-art img{display:block;width:100%;height:auto;background:var(--plate)}
.tech-ref .hero-art figcaption{padding:18px 22px;background:var(--bg)!important;border-top:1px solid var(--line);color:var(--muted)!important;font:15px/1.55 'Helvetica Neue',Helvetica,Arial,sans-serif}
.tech-ref .hero-art figcaption span{display:block;font:700 10px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--copper);margin-bottom:8px}
.tech-ref .hero-art figcaption strong{display:block;font:700 17px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink);margin-bottom:6px}
.tech-ref .hero-art figcaption p{color:var(--muted)!important;margin:0 0 8px}
.tech-ref .hero-art figcaption a{color:var(--teal)!important}

.tech-ref .button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:var(--teal);color:#fff;border:0;border-radius:6px;padding:0 20px;min-height:46px;font:600 15px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;text-decoration:none}
.tech-ref .button:hover{background:var(--ink)}
.tech-ref .button.ghost{background:none;color:var(--ink);border:1px solid var(--line-ui)}
.tech-ref .button.ghost:hover{border-color:var(--ink);background:var(--panel)}

/* the diagram key — makes the drawings legible at a glance */
.tech-ref .diagram-key{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;margin:26px 0 0;padding:14px 18px;background:var(--panel);border:1px solid var(--line);border-radius:8px;font:600 13px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--muted)}
.tech-ref .diagram-key b{font:700 10px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink);margin-right:4px}
.tech-ref .diagram-key span{display:inline-flex;align-items:center;gap:8px}
.tech-ref .diagram-key i{width:13px;height:13px;border-radius:50%;flex:none}
.tech-ref .key-ball{background:#61e6d0;border:2px solid #0e2230}
.tech-ref .key-contact{background:#ba7e40}
.tech-ref .key-edge{background:#9fb6c4;border-radius:2px;height:4px;width:22px}

/* six sessions: a contents table, two columns, dense */
.tech-ref .route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:2px solid var(--ink)}
.tech-ref .route-grid a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;align-items:baseline;padding:18px 22px 16px 0;background:none!important;border-bottom:1px solid var(--line);text-decoration:none}
.tech-ref .route-grid a:nth-child(odd){padding-right:34px;border-right:1px solid var(--line)}
.tech-ref .route-grid a:hover,.tech-ref .route-grid a:focus-visible{background:var(--panel)!important}
.tech-ref .route-grid b{font:700 12px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1px;color:var(--copper)}
.tech-ref .route-grid strong{display:block;font:700 19px/1.2 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.3px;color:var(--ink)!important;margin-bottom:4px}
.tech-ref .route-grid span{display:block;grid-column:2;font:15px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--muted)}

/* LESSONS: spec column on the left, the drawings on the right */
.tech-ref .lesson{border-top:2px solid var(--ink);padding:26px 0 30px;background:none!important;
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:0 44px;align-items:start}
.tech-ref .lesson-spec{min-width:0}
.tech-ref .lesson-plates{min-width:0}
.tech-ref .lesson>header{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;align-items:baseline;margin:0 0 14px}
.tech-ref .lesson-number{display:block;width:auto;height:auto;background:none;border-radius:0;color:var(--copper);font:700 12px/1.3 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1px}
.tech-ref .rule{font:600 17px/1.45 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink);background:var(--panel);border-left:3px solid var(--teal);border-radius:0 6px 6px 0;padding:14px 18px;margin:0 0 14px;max-width:none}
.tech-ref .lesson-spec>p{font-size:16px;color:var(--muted);margin:0 0 10px;max-width:none}
.tech-ref .lesson-spec>p strong{color:var(--ink)}
.tech-ref .alias{font:600 11px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif!important;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.tech-ref .steps{counter-reset:s;display:block!important;grid-template-columns:none!important;margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.tech-ref .steps li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 10px;background:none!important;color:var(--ink)!important;padding:11px 0;border-bottom:1px solid var(--line);border-right:0!important;font:15px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}
.tech-ref .steps li:before{content:counter(s,decimal-leading-zero);font:700 11px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1px;color:var(--copper)}
.tech-ref .lesson>footer{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;border:0;border-top:1px solid var(--line);margin-top:20px;padding:12px 0 0;font:14px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--muted)}
.tech-ref .locator{font:600 11px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase}

/* storyboards: 2-up, so each frame is roughly twice the old size */
.tech-ref .demo-details{border:1px solid var(--line);border-radius:10px;margin:0 0 18px;background:none!important;overflow:hidden}
.tech-ref .demo-details>summary{list-style:none;cursor:pointer;padding:13px 18px;background:var(--panel)!important;border-bottom:1px solid var(--line);font:700 11px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink)!important}
.tech-ref .demo-details>summary::-webkit-details-marker{display:none}
.tech-ref .demo-details>summary::after{content:'Hide';float:right;color:var(--teal);letter-spacing:1px}
.tech-ref .demo-details:not([open])>summary{border-bottom:0}
.tech-ref .demo-details:not([open])>summary::after{content:'Show'}
.tech-ref .demo{background:none!important;padding:16px}
.tech-ref .frames{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px}
.tech-ref .frames figure{margin:0;background:var(--plate)!important;border:1px solid var(--line)!important;border-radius:8px!important;overflow:hidden}
.tech-ref .frames img,.tech-ref .frames svg{display:block;width:100%;height:auto;background:var(--plate)!important}
.tech-ref .frames figcaption{padding:12px 14px;background:var(--bg)!important;border-top:1px solid var(--line);color:var(--muted)!important;font:14px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}
.tech-ref .frames figcaption b{color:var(--copper)!important;font:700 11px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1px}
.tech-ref .frames figcaption strong{color:var(--ink)}
.tech-ref .frames a,.tech-ref .enlarge{color:var(--teal)!important;background:none!important;font-size:14px}
.tech-ref .diagram-note{font:14px/1.55 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--muted);margin:0 0 12px;padding:0 16px}

/* publisher clips */
.tech-ref .source-demos{display:grid!important;grid-template-columns:1fr!important;width:100%!important;margin:0 0 16px!important}
.tech-ref .source-demo{margin:0;background:var(--bg)!important;border:1px solid var(--line)!important;border-radius:10px!important;box-shadow:none!important;overflow:hidden}
.tech-ref .source-demo video{background:var(--plate)!important;max-height:360px}
.tech-ref .source-demo figcaption{padding:14px 16px!important;font-size:14px!important;gap:9px!important;color:var(--muted)!important;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important}
.tech-ref .source-demo figcaption strong{font-size:16px!important;color:var(--ink)!important}
.tech-ref .source-demo figcaption a{font-size:13px!important;color:var(--teal)!important}
.tech-ref .source-speed{min-height:40px;padding:9px 14px!important;font:600 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif!important;letter-spacing:.6px;text-transform:none;background:none;color:var(--ink);border:1px solid var(--line-ui);border-radius:5px;white-space:nowrap;cursor:pointer}
.tech-ref .source-speed:hover{background:var(--panel);border-color:var(--ink)}
.tech-ref .related-demo-block{background:var(--panel)!important;border:0;border-left:3px solid var(--copper);border-radius:0 6px 6px 0!important;padding:14px 18px;margin:0 0 16px}
.tech-ref .related-demo-block>p{font-size:14px;color:var(--muted);margin:0 0 10px}

/* index + primer */
.tech-ref details.all-lessons{margin:24px 0 0;border:1px solid var(--line);border-radius:10px;background:none!important;overflow:hidden}
.tech-ref details.all-lessons>summary{list-style:none;cursor:pointer;position:relative;padding:14px 46px 14px 18px;font:700 11px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink)!important;background:var(--panel)!important}
.tech-ref details.all-lessons>summary::-webkit-details-marker{display:none}
.tech-ref details.all-lessons>summary:after{content:'+';position:absolute;right:16px;top:9px;color:var(--teal);font:300 24px/1 'Helvetica Neue',Helvetica,Arial,sans-serif}
.tech-ref details.all-lessons[open]>summary{border-bottom:1px solid var(--line)}
.tech-ref details.all-lessons[open]>summary:after{content:'−'}
.tech-ref #lesson-links{display:flex;flex-wrap:wrap;gap:6px;padding:14px;background:none!important}
.tech-ref #lesson-links a{font:600 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink)!important;background:none!important;text-decoration:none;border:1px solid var(--line-ui);border-radius:99px;padding:10px 14px}
.tech-ref #lesson-links a:hover,.tech-ref #lesson-links a:focus-visible{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)}
.tech-ref .primer{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:44px;align-items:start;background:none!important}
.tech-ref .primer ol{max-width:60ch;padding-left:20px}
.tech-ref .primer ol li{margin-bottom:9px;background:none!important;color:var(--ink)!important;font-size:16px}
.tech-ref .primer ol li::marker{color:var(--copper);font-weight:700}
.tech-ref #dictionary{background:var(--panel)!important;border:1px solid var(--line);border-radius:10px;padding:22px 24px}
.tech-ref #dictionary h3{font:700 11px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.tech-ref #dictionary ul{list-style:none;margin:0;padding:0}
.tech-ref #dictionary li{border-top:1px solid var(--line);padding:11px 0;font:15px/1.55 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--muted)!important;background:none!important}
.tech-ref #dictionary li strong{color:var(--ink)!important}
.tech-ref .source-note{font:13px/1.6 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--muted);border-left:2px solid var(--line);padding-left:14px;max-width:64ch}
.tech-ref .skip{position:absolute;left:-9999px}
.tech-ref .skip:focus{left:12px;top:12px;z-index:20;background:var(--teal);color:#fff;padding:12px 18px;border-radius:6px}
.tech-ref footer{border-top:1px solid var(--line);color:var(--muted);font:600 11px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:1.4px;text-transform:uppercase;text-align:center;padding:22px 0 6px;margin-top:56px}
.tech-ref a:focus-visible,.tech-ref button:focus-visible,.tech-ref summary:focus-visible{outline:3px solid var(--teal);outline-offset:2px;box-shadow:0 0 0 5px #fff;border-radius:4px}
.tech-ref .masthead,.tech-ref .controls,.tech-ref .scrub-label,.tech-ref .player{display:none!important}

@media (max-width:860px){
  .tech-ref .lesson{grid-template-columns:1fr;gap:0}
  .tech-ref .lesson-plates{margin-top:18px}
  .tech-ref .hero,.tech-ref .primer{grid-template-columns:1fr;gap:30px}
  .tech-ref .route-grid{grid-template-columns:1fr}
  .tech-ref .route-grid a:nth-child(odd){border-right:0;padding-right:22px}
  .tech-ref main{padding:0 24px 64px}
  .tech-ref header.compact-library-nav{padding:0 24px}
}
@media (max-width:620px){
  .tech-ref .frames{grid-template-columns:1fr!important}
}

.tech-ref .section-progress,.tech-ref [class*="progress"]{background:var(--panel)!important}

/* lesson header: number beside the label, not above it */
.tech-ref .lesson>.lesson-spec>header{display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;gap:0 12px!important;align-items:baseline!important;margin:0 0 14px!important}
.tech-ref .lesson-spec>header>div{min-width:0}
.tech-ref .lesson-spec>header .eyebrow{margin-bottom:4px}
.tech-ref .lesson-spec>header h3{margin:0}

.tech-ref .hero-art figcaption{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
.tech-ref .hero-art figcaption>*{margin:0!important;max-width:100%}
.tech-ref .hero-art figcaption span{margin:0!important}

/* ——— Adapter completion.
   pinball-techniques.css dresses these for its dark "cabinet school" skin, and the
   adapter never restated them, so they survived onto the white page: a rotated,
   hard-shadowed hero plate, a 7px sage rail and drop shadow on every lesson, the
   paper-colored root background, and the JS-injected chapter dock in navy.
   All four contradict this design's own brief (white ground, hairline structure,
   "no gradients, no texture, no shadows, no boxes"), so they are overridden here at
   the same weight the base sheet uses. */
:root{background:#fff}
.tech-ref .hero-art{transform:none!important;box-shadow:none!important}
.tech-ref .lesson{border-left:0!important;border-radius:0!important;box-shadow:none!important;padding-left:0!important}
/* The dock is real chapter navigation on the full course page (six chapters), so it
   is re-themed to the reference palette rather than hidden the way .masthead is. */
.tech-ref .course-dock{background:var(--bg)!important;border-bottom:1px solid var(--line)!important;box-shadow:none!important}
.tech-ref .course-dock a{color:var(--ink)!important;border:1px solid var(--line-ui);font:600 12px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.4px}
.tech-ref .course-dock a:hover,.tech-ref .course-dock a[aria-current="location"]{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)}
/* Equal-height grid rows stretch each frame figure, but the caption did not grow with
   it, leaving the navy plate showing as a strip under the shorter captions. */
.tech-ref .frames figure{display:flex;flex-direction:column}
.tech-ref .frames figcaption{flex:1 0 auto}

/* ——— Review follow-ups.
   1. Both bars were sticky at top:0, so the chapter dock (base sheet, z-index 18) sat
      on top of the library nav and hid it on every scroll. Stack them instead.
   2. scroll-margin was 24px, set when nothing was sticky, so anchors landed underneath
      the stack. Clear the whole stack.
   3. .lesson-spec>p (0,2,1) was outranking .rule (0,2,0), so the rule line rendered
      16px muted instead of the 17px ink it asks for. .alias already carried !important
      to escape the same collision.
   4. The base sheet's four-sided .lesson border left a stray hairline down the right
      and across the bottom once the top rule was restated.
   5. box-shadow:none removed the :target cue, and the technique index is this page's
      main navigation, so every jump landed with no "you are here". */
.tech-ref{--head-h:56px;--sticky-h:112px}
.tech-ref .course-dock{top:var(--head-h)!important}
.tech-ref section,.tech-ref .lesson{scroll-margin-top:var(--sticky-h)}
.tech-ref .lesson-spec>p.rule{font:600 17px/1.45 'Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink)}
.tech-ref .lesson{border-right:0!important;border-bottom:0!important}
.tech-ref .lesson:target{outline:2px solid var(--copper);outline-offset:6px}
/* the header wraps to a second row on narrow viewports, so the panel follows it */
.tech-ref header.compact-library-nav .all-tables-panel{top:100%}
@media (max-width:560px){.tech-ref{--head-h:75px;--sticky-h:132px}}

/* The full course page carries a .site-footer that the excerpt does not; it keeps the
   base sheet's dark navy ground, which put the teal links at 2.64:1. */
.tech-ref .site-footer{background:var(--bg)!important;border-top:1px solid var(--line);
  padding:26px 40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tech-ref .site-footer a{color:var(--teal)!important;font:600 14px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif}

/* ---------- Align the chrome to the page column.
   main is a centred 1240px box with 40px padding, so its text starts at 140px on a
   1440 viewport, while the running head and the chapter dock were full-bleed at 40px
   and 100px. Three rows, three different left edges. All three now share one column. */
.tech-ref header.compact-library-nav{padding-inline:max(40px,calc((100vw - 1240px)/2 + 40px))}
.tech-ref .course-dock{padding-inline:max(40px,calc((100vw - 1240px)/2 + 40px))!important}
.tech-ref header.compact-library-nav .all-tables-panel{right:max(40px,calc((100vw - 1240px)/2 + 40px))}
@media (max-width:860px){
  .tech-ref header.compact-library-nav,.tech-ref .course-dock{padding-inline:24px!important}
  .tech-ref header.compact-library-nav .all-tables-panel{right:24px}
}
/* Header items had three different intrinsic heights (12, 14, 44), so they only
   lined up by accident. Give every child the same box and centre it. */
.tech-ref header.compact-library-nav>*{display:flex;align-items:center;min-height:44px}
.tech-ref header.compact-library-nav .all-tables>summary{border-radius:99px;min-height:36px;display:flex;align-items:center}

/* ================= Audit round 1 fixes =================
   .practice split a 442px column into two 208px columns, wrapping one-line coaching
   notes onto three or four lines, 88 times. And the h2 rule stopped at the heading's
   30ch text box while the rules above and below spanned the full column, stacking
   three rules of three different lengths. */
.tech-ref .practice{grid-template-columns:1fr;gap:14px}
.tech-ref h2{border-bottom:0;padding-bottom:0}
.tech-ref .lesson-spec>.practice p{max-width:62ch}
.tech-ref .source-list li,.tech-ref .large,.tech-ref .lesson-spec>p,.tech-ref .rule{max-width:62ch}

/* R7: main puts content at 140 but pinball-techniques.css adds another 32px of
   section padding, so the masthead sat at 140 and every section at 172.
   R5: .steps is capped inside .lesson but spans the full 1096px column when it is a
   direct child of a section - 148 characters per line, the widest on the site. */
.tech-ref main>section:not(.hero){max-width:none;margin-inline:0;padding-inline:0}
.tech-ref .steps,.tech-ref .steps li{max-width:68ch}
.tech-ref .lesson .steps,.tech-ref .lesson .steps li{max-width:none}
.tech-ref #your-setup>ol.steps>li{display:block;position:relative;box-sizing:border-box;padding:11px 0 11px 44px;max-width:68ch}
.tech-ref #your-setup>ol.steps>li::before{position:absolute;left:0;top:11px;width:34px;text-align:left}
/* N5: the panel overhung its trigger by 196px where every other page measures 0. */
.tech-ref header.compact-library-nav .all-tables{position:relative}
.tech-ref header.compact-library-nav .all-tables>.all-tables-panel{position:absolute;
  top:calc(100% + 8px);right:0;left:auto;transform:none}

/* ================= Audit round 4 =================
   D1: three families, three fixed panel widths (760/900/760), each right-anchored to a
   trigger ~350px from the viewport edge. Whenever the width exceeded the space to the
   left of the trigger the panel ran off-canvas - at 800-1152 on v3, 700-900 on the
   others. scrollWidth stays at the viewport width for negative overflow, which is why
   this survived three rounds. One width formula for all three, derived from the space
   actually available, plus a viewport pin on narrow screens. */
.tech-ref .all-tables>.all-tables-panel{
  width:min(760px,calc(100vw - 380px))!important;max-width:none!important;
  left:auto!important;right:0!important;transform:none!important}
@media (max-width:820px){
  .tech-ref .all-tables>.all-tables-panel{position:fixed!important;left:16px!important;right:16px!important;
    top:64px!important;width:auto!important;max-height:72vh;overflow:auto}
}