/* Technical library, testing and manufacturing pages.
 *
 * Only what system.css does not already provide. Every class is prefixed
 * .lib-, every colour is a token or currentColor, and the figures take their
 * ink from the band they sit in so a drawing cannot end up invisible if a
 * section changes tone.
 */

/* --------------------------------------------------------------------------
   Article body
   -------------------------------------------------------------------------- */

.lib-article-head {
  max-width: var(--measure-width);
  margin: 0 0 2.75rem;
}

.lib-article-head h1 {
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* Gear-train work is a capability, not another library article. Keep the
 * engineering explanation and the practical entry point adjacent, with the
 * proportions changing naturally as room becomes available. */
.lib-gear-train-capability .open-sheet {
  max-width: 72rem;
}

.lib-gear-train-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 4rem);
}

.lib-gear-train-grid .lib-copy {
  max-width: 52rem;
  font-size: clamp(1rem, 0.35vw + 0.94rem, 1.15rem);
}

.lib-gear-train-grid .lib-copy p:first-child {
  margin-top: 0;
}

.lib-gear-train-list {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 3px solid var(--copper);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.lib-gear-train-label {
  margin: 0 0 1rem;
  color: var(--metal-3);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lib-gear-train-list ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lib-gear-train-list li {
  padding-left: 1rem;
  position: relative;
}

.lib-gear-train-list li::before {
  position: absolute;
  left: 0;
  color: var(--copper);
  content: "—";
}

.lib-gear-train-list .action {
  display: flex;
  width: fit-content;
  margin-top: 1.6rem;
}

@media (max-width: 760px) {
  .lib-gear-train-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.lib-question {
  margin: 0 0 1.5rem;
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.55;
  opacity: 0.86;
}

.lib-article-meta,
.lib-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  opacity: 0.62;
}

.lib-copy > * + * {
  margin-top: 1.35em;
}

.lib-copy h2 {
  margin-top: 2.75rem;
  margin-bottom: 0;
  text-wrap: balance;
}

.lib-copy h2 + p,
.lib-copy h3 + p {
  margin-top: 0.9rem;
}

.lib-copy h3 {
  margin-top: 2rem;
  margin-bottom: 0;
}

.lib-list {
  margin: 0;
  padding-left: 1.35rem;
}

.lib-list li + li {
  margin-top: 0.85rem;
}

.lib-list li::marker {
  color: var(--copper);
}

/* Figures and tables sit wider than the reading measure, left-aligned to it. */
.lib-wide {
  max-width: min(100%, 58rem);
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}

.lib-wide > * + * {
  margin-top: 1.75rem;
}

.lib-copy + .lib-wide {
  margin-top: 2rem;
}

.lib-wide + .lib-copy {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Figures
   -------------------------------------------------------------------------- */

/* The figures are drawn on a 680 unit grid with their type sized for that
 * grid. Letting one stretch to a 1300 px column scales every label to nearly
 * twice its intended size, so the drawing is capped near 1:1 and shares the
 * prose column's left edge. */
.lib-fig {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: auto;
  margin-right: auto;
  overflow: visible;
}

/* Words in a figure are words. The mono is reserved for the things that are
 * genuinely data: tick values, dimensions and codes. */
.lib-fig text {
  font-family: var(--body);
  fill: currentColor;
}

.lib-fig-tick,
.lib-fig-dimension,
.lib-fig-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.lib-fig-label,
.lib-fig-note {
  font-size: 13px;
  fill-opacity: 0.86;
}

.lib-fig-axis-title {
  font-family: var(--body);
  font-size: 13.5px;
  fill-opacity: 0.8;
}

.lib-fig-heading {
  font-family: var(--display);
  font-size: 19px;
  fill-opacity: 0.92;
}

.lib-fig-series-label {
  font-size: 13px;
  fill-opacity: 0.9;
}

.lib-fig-text-a {
  fill: var(--copper);
  fill-opacity: 1;
}

.lib-fig-axis {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.55;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lib-fig-tick {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.42;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.lib-fig-guide,
.lib-fig-centerline {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.3;
  stroke-width: 1;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
}

.lib-fig-centerline {
  stroke-dasharray: 14 4 3 4;
}

.lib-fig-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lib-fig-a {
  stroke: var(--copper);
  stroke-width: 2.4;
}

.lib-fig-b {
  stroke: currentColor;
  stroke-opacity: 0.72;
}

.lib-fig-c {
  stroke: currentColor;
  stroke-opacity: 0.46;
}

.lib-fig-dashed {
  stroke-dasharray: 8 6;
}

.lib-fig-region {
  fill: var(--copper);
  fill-opacity: 0.13;
  stroke: none;
}

.lib-fig-point {
  fill: var(--copper);
  stroke: none;
}

/* Schematic bodies: surface tone plus a self-coloured edge, never an outline
   drawn in a contrasting colour. */
.lib-fig-part,
.lib-fig-part-2,
.lib-fig-shaft,
.lib-fig-hole,
.lib-fig-pitch,
.lib-fig-base,
.lib-fig-detail-bubble {
  fill: currentColor;
  fill-opacity: 0.06;
  stroke: currentColor;
  stroke-opacity: 0.55;
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.lib-fig-part-2 {
  fill-opacity: 0.12;
}

.lib-fig-shaft {
  fill-opacity: 0.2;
  stroke-opacity: 0.6;
}

.lib-fig-hole {
  fill-opacity: 0.02;
}

.lib-fig-pitch {
  fill: none;
  stroke-opacity: 0.7;
}

.lib-fig-base {
  fill: none;
  stroke-opacity: 0.4;
  stroke-dasharray: 6 5;
}

.lib-fig-detail-bubble {
  fill: none;
  stroke-opacity: 0.34;
  stroke-dasharray: 5 5;
}

.lib-fig-hatch {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.22;
  stroke-width: 1;
}

.lib-fig-datum,
.lib-fig-dim {
  fill: none;
  stroke: currentColor;
  stroke-opacity: 0.6;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lib-fig-flank {
  fill: none;
  stroke: var(--copper);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lib-fig-ghost {
  stroke: currentColor;
  stroke-opacity: 0.34;
  stroke-width: 1.4;
  stroke-dasharray: 6 5;
}

/* --------------------------------------------------------------------------
   Library index
   -------------------------------------------------------------------------- */

.lib-topics > * + * {
  margin-top: 3.5rem;
}

.lib-topic h2 {
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.lib-topic-lead {
  max-width: var(--measure-width);
  margin: 0 0 2rem;
  opacity: 0.74;
}

.lib-entries {
  display: grid;
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 60rem) {
  .lib-entries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lib-entry {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.lib-entry-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
}

.lib-entry-title {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.22;
  letter-spacing: 0.005em;
}

.lib-entry-link .mark {
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
}

.lib-entry-question {
  max-width: 34rem;
  margin: 0;
  opacity: 0.78;
}

.lib-cell-question {
  display: block;
  max-width: 26rem;
  opacity: 0.82;
}

.lib-queue {
  max-width: var(--measure-width);
  margin-top: 2.5rem;
}

/* Deliberately not the tracked-out mono caps used for the micro-labels below:
   one small-label treatment repeated everywhere is its own tell. */
.lib-queue h3,
.lib-corrections h3,
.lib-related-group h3 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.7;
}

.lib-queue-list li + li {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Related routes and the article record
   -------------------------------------------------------------------------- */

.lib-related {
  display: grid;
  gap: 2.75rem;
  margin-top: 2.5rem;
}

@media (min-width: 64rem) {
  .lib-related {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 3.5rem;
  }
}

.lib-record {
  margin-top: 2.25rem;
}

.lib-corrections {
  max-width: var(--measure-width);
  margin-top: 2.75rem;
}

.lib-correction-empty {
  margin: 0;
  opacity: 0.72;
}

.lib-correction-list {
  margin: 0;
  padding-left: 1.35rem;
}

.lib-correction-list li + li {
  margin-top: 1rem;
}

.lib-correction-date {
  margin: 0 0 0.25rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--copper);
}

.lib-record-action {
  margin: 2.5rem 0 0;
}

/* --------------------------------------------------------------------------
   Manufacturing processes
   -------------------------------------------------------------------------- */

.lib-processes {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: process;
}

.lib-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--edge);
}

.lib-process:last-child {
  border-bottom: 1px solid var(--edge);
}

@media (min-width: 56rem) {
  .lib-process {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: 2rem;
  }
}

.lib-process-index {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--copper);
  opacity: 0.8;
}

.lib-process h3 {
  margin: 0 0 0.75rem;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1.2;
}

@media (min-width: 56rem) {
  .lib-process h3 {
    grid-column: 2;
  }

  .lib-process-index {
    grid-row: 1 / span 2;
  }
}

.lib-process-body {
  max-width: 46rem;
}

.lib-process-body > * + * {
  margin-top: 0.9rem;
}

.lib-process-body p {
  margin: 0;
}

.lib-process-physical {
  opacity: 0.88;
}

.lib-process-decides,
.lib-process-conversation {
  opacity: 0.78;
}

.lib-process-tag {
  display: inline-block;
  margin-right: 0.6rem;
}

/* --------------------------------------------------------------------------
   Reduced motion is irrelevant here: nothing on these pages animates, and
   nothing starts hidden. Print, however, is used: these pages get taken into
   design reviews.
   -------------------------------------------------------------------------- */

@media print {
  .lib-related,
  .lib-record-action {
    display: none;
  }

  .lib-wide,
  .lib-copy {
    max-width: 100%;
  }

  .lib-fig {
    break-inside: avoid;
  }
}