/* /buch — what this page adds to /lib/article/article.css. */

/* book.js */
/* The book and the hinge, drawn from the CAD model. The book's box leaves
   room above the plates for one standing up on its way across; on a phone
   it is taller, so the plates stay big enough to take with a finger. */
#fig-book { --fig-ratio: 4 / 3; }
#fig-hinge { --fig-ratio: 2 / 1; }

@media (max-width: 720px) {
  #fig-hinge { --fig-ratio: 4 / 3; }
}

/* a vertical swipe still scrolls the page; across, it turns a plate */
.book3d { touch-action: pan-y; }
.book3d.is-over { cursor: grab; }
.book3d.is-dragging { cursor: grabbing; }

/* the hinge's words, over its drawing */
.hinge3d { position: relative; }
.essay .fig.is-waiting .hinge3d > canvas { background: var(--wash); }
.hinge3d__labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hinge3d__labels text {
  font-family: "Strawford", system-ui, sans-serif;
  font-size: var(--t-meta);
  fill: var(--ink);
}
.hinge3d__labels line { stroke: var(--ink); stroke-width: 1; }

/* diagrams.js */
/* The five drawings in svg (options, sensors, board, chain, threshold).
   Colours, type scale and spacing come from /style.css; nothing here sets a
   font-size outside that scale or adds a colour: the ink at lower strengths,
   the paper, and the marker white of the plates and the board. */

/* An svg scales with its viewBox, and so would its words. The renderer
   measures the scale (--svg-scale: viewBox width over rendered width) and
   this cancels it, so the words stand at the meta size at every width, like
   the caption under them. */
.fig .fig__svg text { font-size: calc(var(--t-meta) * var(--svg-scale, 1)); }

/* the one line of text the small computer sends */
.fig .fig__svg text.code { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; }

/* a hairline: leaders, the table, the parts too small for the ink */
.fig .fig__svg .thin {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* drawn lighter: what is behind (the computer on the board's back), the
   boxes round a group, the angles a chart is read against */
.fig .fig__svg .mute { stroke: var(--ink-muted); }

/* the box each drawing keeps until it is in (article.css): about its size,
   measured at 1400 and at 390 wide */
#fig-options { --fig-ratio: 667 / 195; }
#fig-sensors { --fig-ratio: 667 / 187; }
#fig-board { --fig-ratio: 667 / 358; }
#fig-chain { --fig-ratio: 264 / 471; }
#fig-threshold { --fig-ratio: 667 / 374; }

@media (max-width: 600px) {
  #fig-options { --fig-ratio: 342 / 378; }
  #fig-sensors { --fig-ratio: 342 / 550; }
  #fig-board { --fig-ratio: 342 / 207; }
  #fig-threshold { --fig-ratio: 342 / 245; }
}

/* the ink as a fill: the chips, the leaders' ends */
.fig .fig__svg .solid { fill: var(--ink); }

/* the paper book's marks, which nobody was meant to see */
.fig .fig__svg .speck { fill: var(--ink-muted); }

/* where a page counts as lying still */
.fig .fig__svg .band { fill: color-mix(in srgb, var(--ink) 12%, transparent); }

/* a small part, dashed: at this size the lib's dash would leave it two dashes */
.fig .fig__svg .ghost.fine { stroke-dasharray: 3 2.5; }

/* a line that is also given a fill keeps it */
.fig .fig__svg :is(.ink, .ghost, .thin).fill { fill: var(--paper); }
.fig .fig__svg :is(.ink, .ghost, .thin).white { fill: var(--mark); }
.fig .fig__svg :is(.ink, .ghost, .thin).tone { fill: rgba(26, 26, 26, 0.22); }
.fig .fig__svg :is(.ink, .ghost, .thin).solid { fill: var(--ink); }

/* ---------- a list of drawings: three books, five sensors ---------- */
/* Side by side, each drawing over its name and its verdict. Where the
   column is narrow, a row each, the drawing beside its words, so the words
   wrap instead of the drawings shrinking. The drawings in a list share one
   scale: one viewBox, one width. */

.choices { container: choices / inline-size; }

/* the width of a drawing where it stands beside its words (a query can't
   set it on its own container, so it is set here and used below) */
.choices--options { --choice-w: 10.5rem; }
.choices--sensors { --choice-w: 7.5rem; }

.fig .choices__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.choices__item {
  display: grid;
  grid-template-rows: auto 1fr;
  row-gap: 0.6rem;
  align-content: start;
}

.choices__words { display: grid; row-gap: 0.15rem; align-content: start; }

.fig .choices__words p {
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.35;
}

.fig .choices__name { color: var(--ink); }
.fig .choices__note { color: var(--ink-muted); }

@container choices (max-width: 34rem) {
  .fig .choices__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    row-gap: 1.1rem;
  }

  .choices__item {
    grid-template-columns: var(--choice-w) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 1rem;
    align-items: center;
  }
}

/* ---------- the chain, in the margin ---------- */
/* in the column on a narrower screen it keeps about the margin's size, a
   diagram beside the text rather than a poster across it */
@media (max-width: 1099px) {
  #fig-chain { max-width: min(100%, 17rem); }
}

/* ---------- the threshold: the one number ---------- */

.threshold__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin-top: 0.9rem;
  font-size: var(--t-meta);
  line-height: 1.35;
  color: var(--ink);
}

.threshold__control output {
  min-width: 4ch;
  font-variant-numeric: tabular-nums;
}

/* the number is an example: said on its own line under the slider */
.threshold__note {
  flex-basis: 100%;
  color: var(--ink-muted);
}

/* the slider: a hairline of ink and a round handle, a finger's height to
   grab it by */
.threshold__control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 9rem;
  max-width: 16rem;
  height: 1.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.threshold__control input[type="range"]::-webkit-slider-runnable-track {
  height: 1.5px;
  border: 0;
  background: var(--ink);
}

.threshold__control input[type="range"]::-moz-range-track {
  height: 1.5px;
  border: 0;
  background: var(--ink);
}

.threshold__control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: calc(0.75px - 0.575rem);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.threshold__control input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

/* the handle whitens under the pointer and while it has the keys, like the
   site's other buttons */
.threshold__control input[type="range"]:hover::-webkit-slider-thumb,
.threshold__control input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--mark); }
.threshold__control input[type="range"]:hover::-moz-range-thumb,
.threshold__control input[type="range"]:focus-visible::-moz-range-thumb { background: var(--mark); }
.threshold__control input[type="range"]:focus-visible { outline-offset: 2px; }