/* v6's own styles. The rail is _parts/flow.css; the unrolled notebook is
   _parts/paper.css + _parts/nbk.css + _parts/vtl.css (built into this folder).

   No topbar (build.py, `no-topbar`): on the wiki the site's own fixed navbar
   (Bootstrap fixed-top, 56px) sits at the top of the screen, and a second bar
   there overlapped it. The way back to the top of the page is this button, in
   the bottom-right corner, where the cards end in empty space (bottom left, on
   a phone it sat on the timeline's line and week badges). It shows once the
   reader is past the landing and either heads back up or reaches the end, and
   steps aside while they read on down and while the timeline plays: in a
   corner over content, it is there when it is wanted and out of the way when
   it is not. */
.hw-back {
  position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .55rem; padding: .62rem 1rem .62rem .78rem;
  border-radius: 999px; text-decoration: none; color: #eef2f6;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(10, 14, 18, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 12px 30px -12px rgba(0, 0, 0, .6);
  opacity: 0; translate: 0 12px; pointer-events: none;
  transition: opacity .3s ease, translate .35s cubic-bezier(.22, .9, .2, 1), background .2s ease, box-shadow .2s ease;
}
.hw-back[hidden] { display: inline-flex; }            /* hidden = not yet shown; the script reveals it */
.hw-back.on, .hw-back:focus-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.hw-back i {
  font-style: normal; width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 50%;
  background: rgba(61, 220, 139, .16); color: #3ddc8b; font-size: .8rem; letter-spacing: 0;
}
.hw-back:hover { background: rgba(14, 20, 26, .92); box-shadow: 0 0 0 1px rgba(61, 220, 139, .45), 0 14px 32px -12px rgba(0, 0, 0, .65); }
.hw-back:focus-visible { outline: 2px solid #3ddc8b; outline-offset: 3px; }
@media (max-width: 700px) {
  .hw-back { min-height: 44px; box-sizing: border-box; font-size: 11px; letter-spacing: .1em; padding: .55rem .9rem .55rem .65rem; }
  .hw-to { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hw-back { transition: none; } }
/* Room for the wiki's navigation over the film (round 18, judge). On the team's wiki their dark navbar is transparent
   until the page scrolls, and the hardware strip under it (Hardware, Overview, Photometer, DiOPAL...) sits at about
   y 68-112, over the film; on a bright frame its words were barely legible. v6 dropped its own topbar so that this
   nav could sit there, so the film's top shading is a little deeper and a little longer: the same hub.css layers, with
   the top one going from .72 -> transparent at 17% to .9 -> .7 at 9% -> transparent at 22%. Wide screens only; phones
   keep their own (hub.css, <=760px). The title starts at y 306 at 1440x900, below all of it. */
@media (min-width: 761px) {
  body.hub .hero-film::after {
    background: linear-gradient(to top, #05060a, rgba(5, 6, 10, .88) 14%, rgba(5, 6, 10, .6) 32%, rgba(5, 6, 10, .18) 54%, transparent 68%),
                radial-gradient(60% 42% at 50% 44%, rgba(5, 6, 10, .5), transparent 74%),
                linear-gradient(rgba(5, 6, 10, .9), rgba(5, 6, 10, .7) 9%, transparent 22%);
  }
}

/* At the very end of the page the button is on, so the footer keeps room for
   it under its last line: on a phone it sat on the three.js credit. */
body.hub .hub-foot { padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + 44px + 1.5rem); }

/* the kind of each entry (TEST, BUILD...) read at 9.3px on a wide screen. Wide screens only (round 18): loaded after
   vtl.css, it also beat the 11px phone floor there and set the chips at 10.24px on phones. */
@media (min-width: 701px) { .vtl-kind { font-size: .64rem; } }

/* ==========================================================================
   v9's own styles (build.py appends this to v6's v.css: v9 is v6 with the instruments section replaced).

   The section is dev/bench/v3's photograph bench (pb.css, pb.js: a component, scoped to .pb and prefixed pb-).
   1. Dark, like the landing above it and v6's instruments: the film's dark runs into the photo's. The photo's top
      fades into the page (pb.css, data-mode="section"), so there is no edge where the film ends; its bottom fades
      back into the dark, and v6's white notebook sheet rises after it, as it does on v6.
   2. One screen at every desktop size: the photo fills the section; the hub's own heading sits over the
      out-of-focus room, in the content column the notebook below uses; the four instruments sit over the bench's
      front edge. pb.js sizes the photo so no instrument sits under the heading's words or the list.
   3. Phone: the heading, the photo fitted to the width, the four as a 2 x 2, the note.
   ========================================================================== */

/* ---- 1, 2. the section ------------------------------------------------------- */
.pb-sec { position: relative; background: #05060a; }
/* polish.css gives every section[id] a 76px scroll margin (for the wiki's navbar); this section carries its own top
   room, so a jump to #instruments puts the whole of it on screen */
section#instruments { scroll-margin-top: 0; }
.pb-sec > .pb {
  --pb-bg: #05060a;
  /* the content column of the sections below (max 1280, the hub's gutters) */
  --pb-gut: max(clamp(1.25rem, 4vw, 3.5rem), calc((100% - 1280px) / 2 + clamp(1.25rem, 4vw, 3.5rem)));
  /* room for the team wiki's fixed navbar (56px) over the top of the section */
  --pb-head-top: clamp(64px, 9svh, 100px);
  --pb-note-top: calc(var(--pb-head-top) + 4px); --pb-note-right: var(--pb-gut);
  height: 100vh; height: 100svh; min-height: 560px;
}
.pb-sec .pb > .sh { position: absolute; z-index: 6; left: var(--pb-gut); top: var(--pb-head-top); margin: 0; max-width: min(620px, 50%); }
.pb-sec .sh-k { margin-bottom: clamp(.6rem, 1.5svh, 1rem); }
.pb-sec .sh-t { font-size: clamp(1.9rem, 1rem + 2vw, 2.85rem); }
.pb-sec .sh-sub { margin-top: .35rem; font-size: clamp(1.05rem, .8rem + .7vw, 1.4rem); }
/* the list in the same column as the heading and the notebook */
.pb-sec .pb-list { padding-inline: var(--pb-gut); }
.pb-sec .pb-list ol { max-width: none; }
.pb-sec .pb-note { max-width: 26ch; }

@media (min-width: 761px) and (max-height: 800px) {
  .pb-sec > .pb { --pb-head-top: 60px; }
  .pb-sec .sh-k { margin-bottom: .55rem; }
  .pb-sec .sh-t { font-size: clamp(1.75rem, .9rem + 1.8vw, 2.4rem); }
  .pb-sec .sh-sub { font-size: clamp(1rem, .8rem + .6vw, 1.25rem); margin-top: .25rem; }
}

/* ---- 3. phone ------------------------------------------------------------------ */
@media (max-width: 760px) {
  .pb-sec > .pb { height: auto; min-height: 0; padding-bottom: 4px; }
  .pb-sec .pb > .sh { position: static; padding: 26px 20px 16px; max-width: none; }
  .pb-sec .sh-k { margin-bottom: .6rem; }
  .pb-sec .sh-t { font-size: 1.9rem; }
  .pb-sec .sh-sub { font-size: 1.1rem; }
  .pb-sec .pb-list { padding-inline: 12px; }
  .pb-sec .pb-note { max-width: none; padding-inline: 14px !important; }
}

/* ---- v6's Back to Hardware button steps aside while the list is on screen (own.js) ---- */
html.pb-list-on .hw-back.on:not(:focus-visible) { opacity: 0; translate: 0 12px; pointer-events: none; }


/* ==========================================================================
   v10's own styles (build.py appends this to v9's v.css: v10 is v9 with its notebook replaced, all dark).
   The notebook section itself is pn.css; the bench is the component dev/bench/v3-tower (pb.css, pb.js).
   ========================================================================== */

/* ---- the page's shared column and type scale (round 28, round 1, coordinator's D1) ---------------------------------
   One column and one heading size for both sections, so the bench hands over to the notebook as one page. Defined here
   only (the notebook uses them, with fallbacks); --hub-k is set by own.js on load and resize (CSS cannot divide
   lengths): clamp(1, innerHeight / 900, 1.4), so big screens get bigger type and a wider column, not just more room. */
:root {
  --hub-k: 1;
  --hub-g: clamp(20px, 5.5vw, 80px);                                          /* side gutter */
  --hub-col: min(calc(1280px * var(--hub-k)), calc(100vw - 2 * var(--hub-g))); /* the content column, centred */
  --hub-h2: calc(clamp(1.9rem, 1rem + 2vw, 2.85rem) * var(--hub-k));         /* a section's title (the bench's, today) */
  --hub-kick: calc(.6875rem * var(--hub-k));                                  /* its kicker pill */
}
@media (min-width: 761px) and (max-height: 800px) { :root { --hub-h2: clamp(1.75rem, .9rem + 1.8vw, 2.4rem); } }

/* v6's Back to Hardware button steps aside while it would sit on the PDF viewer (own.js), as it does over the
   bench's list on v9: in the corner of the viewer it covered the page being read. Round 28, round 1 (QA judge #5):
   also while any of the bench's photograph is on screen (it covered the tub, the disclaimer, the bubble's name). */
html.pn-on-back .hw-back.on:not(:focus-visible),
html.pb-stage-on .hw-back.on:not(:focus-visible) { opacity: 0; translate: 0 12px; pointer-events: none; }
/* 11 px wherever it shows (QA judge #15: 10.9 px on a phone on its side) */
.hw-back { font-size: max(11px, .68rem); }

/* ==========================================================================
   Round 28 (8 Oct 2026, the bench): the photograph fills the screen, edge to edge, and comes out of the landing's dark
   as it scrolls into place; the heading and the list sit on quiet scrims, in the page's column (--hub-col).
   ========================================================================== */
.pb-sec > .pb {
  --pb-k: var(--hub-k, 1);
  --pb-gut: calc((100% - var(--hub-col, min(1280px, calc(100vw - 80px)))) / 2);
  --pb-note-right: var(--pb-gut);
  /* the heading under the wiki's navbar (56 px); on short screens lower, so a wheel stop a notch past the section's
     top still shows it (design judge #11) */
  --pb-head-top: clamp(64px, 8svh, 90px);
  /* the list a little off the section's foot: more dark after the bench than before it (item 8, QA judge #8) */
  --pb-list-bot: clamp(34px, 5.6svh, 70px);
}
@media (min-width: 761px) and (max-height: 768px) { .pb-sec > .pb { --pb-head-top: 90px; } }
.pb-sec .pb > .sh { translate: var(--pb-shift, 0px) 0; }
@media (min-width: 761px) { .pb-sec .pb > .sh { max-width: min(760px, 56%); } }
.pb-sec .sh-k { font-size: var(--hub-kick, .6875rem); }
.pb-sec .sh-t { font-size: var(--hub-h2, 2.85rem); }
.pb-sec .sh-sub { font-size: calc(clamp(1.05rem, .8rem + .7vw, 1.4rem) * var(--pb-k)); }
@media (min-width: 761px) and (max-height: 800px) { .pb-sec .sh-sub { font-size: clamp(1rem, .8rem + .6vw, 1.25rem); } }
.pb-sec .pb-list { translate: var(--pb-shift, 0px) 0; }
.pb-sec .pb-note { max-width: none; }

/* a window too narrow for the bench's band at full height (a phone upright, a tablet upright, a tall narrow window)
   stacks: pb.js marks it .pb-stack; v9's phone rules, for any width */
.pb-sec > .pb.pb-stack { height: auto; min-height: 0; padding-bottom: 68px; }   /* (item 8: the air after it) */
.pb-sec .pb.pb-stack > .sh { position: static; padding: 16px 20px 16px; max-width: none; translate: none; }
.pb-sec .pb.pb-stack .pb-list { padding-inline: 12px; translate: none; }
.pb-sec .pb.pb-stack .pb-note { max-width: none; padding-inline: 16px !important; }
@media (min-width: 761px) {
  .pb-sec .pb.pb-stack > .sh { padding: 28px var(--pb-gut) 20px; }
  .pb-sec .pb.pb-stack .pb-list { padding-inline: var(--pb-gut); }
  .pb-sec .pb.pb-stack .pb-note { padding-inline: var(--pb-gut) !important; }
}
/* a phone on its side (QA judge #3) is not stacked even under 760 px: one screen, the heading over the room, the list
   one compact row; v9's phone rules undone for it */
@media (max-width: 760px) and (max-height: 500px) and (orientation: landscape) {
  .pb-sec > .pb:not(.pb-stack) { height: 100vh; height: 100svh; min-height: 0; padding-bottom: 0; }
  .pb-sec .pb:not(.pb-stack) > .sh { position: absolute; padding: 0; max-width: min(420px, 52%); }
  .pb-sec .pb:not(.pb-stack) .pb-list { padding-inline: var(--pb-gut); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .pb-sec > .pb:not(.pb-stack) { height: 100vh; height: 100svh; min-height: 0; --pb-head-top: 60px; --pb-list-bot: 10px; }
  .pb-sec .pb:not(.pb-stack) .sh-k { display: none; }
  .pb-sec .pb:not(.pb-stack) .sh-t { font-size: 1.45rem; }
  .pb-sec .pb:not(.pb-stack) .sh-sub { font-size: .95rem; margin-top: .15rem; }
}