/* The instruments: Technology from the analytical dimensions on, and the System
   architecture, in the home readings' language. Each page is an instrument with the
   home reading's frame and anatomy: a 1320 u column with 48 u sides; the intro
   (spaced-capital label, two-line IBM Plex Sans 800 title with the second line grey,
   the lead on the right); a white card with a 1 px #dbe3ee frame, a toolbar with the
   measurement and its selector, the chart on the left and the panel of blue values and
   bar rows on the right; the explanation row under the card. Chart and row values are
   the home's, to the pixel. Loaded
   by technology.html and system.html, after the shared stylesheets. */
body:is([data-page="technology"], [data-page="system"]) {
  --tl-ink: #132d58;
  --tl-secondary: #536986;
  --tl-label: #607189;
  --tl-rule: #dbe3ee;
  --tl-grid: #e6ecf4;
  --tl-soft: #edf3fb;
  --tl-track: #edf1f7;
  --tl-blue: #338cff;
}

/* ---- the frame: every page opens at the home reading's first line ---- */
@media (min-width: 1051px) {
  body:is([data-page="technology"], [data-page="system"]) .psv-page.tl-frame {
    justify-content: flex-start;
    padding-block: calc(var(--psv-canvas-extra) / 2) 0;
  }

  /* The page keeps the canvas height. Where the type floors make an instrument
     taller than the canvas allows (narrow desktops), it grows into the screen height
     the canvas does not use, below it, instead of spilling out of its card. */
  body:is([data-page="technology"], [data-page="system"]) .psv-page.tl-frame > .tq-shell {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--psv-u));
    width: 100%;
    max-width: var(--psv-shell-content);
    min-height: calc(100svh - var(--psv-header-height) - var(--psv-canvas-extra));
    max-height: calc(100svh - var(--psv-header-height) - var(--psv-canvas-extra) / 2);
    margin-inline: auto;
    padding: calc(10 * var(--psv-u)) calc(48 * var(--psv-u)) calc(20 * var(--psv-u));
  }

  body:is([data-page="technology"], [data-page="system"]) .psv-page.tl-frame .tl-card {
    flex: 1 0 auto;
  }

  /* a drawing takes the room its card gives it and never sizes the card itself */
  body:is([data-page="technology"], [data-page="system"]) .ti-chart,
  body:is([data-page="technology"], [data-page="system"]) .ti-mini {
    contain: size;
  }
}

/* ---- the intro ---- */
body:is([data-page="technology"], [data-page="system"]) .tl-intro {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0 calc(45 * var(--psv-u));
  align-items: end;
  flex: none;
  margin: 0;
  color: var(--tl-ink);
  font-family: var(--psv-font-sans);
}

body:is([data-page="technology"], [data-page="system"]) .tl-eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 calc(9 * var(--psv-u));
  color: #3f5266;
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(11 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: calc(1.7 * var(--psv-u));
}

body:is([data-page="technology"], [data-page="system"]) .tl-title {
  width: auto;
  max-width: none;
  margin: 0;
  color: var(--tl-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--psv-font-sans);
  font-size: calc(32 * var(--psv-u));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: calc(-1.4 * var(--psv-u));
  word-spacing: normal;
  text-transform: none;
  text-wrap: initial;
}

body:is([data-page="technology"], [data-page="system"]) .tl-title > br {
  display: none;
}

body:is([data-page="technology"], [data-page="system"]) .tl-title > span {
  display: block;
}

body:is([data-page="technology"], [data-page="system"]) .tl-title > span:last-child {
  color: var(--tl-secondary);
}

body:is([data-page="technology"], [data-page="system"]) .tl-lead {
  max-width: calc(400 * var(--psv-u));
  margin: 0;
  color: var(--tl-secondary);
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
  line-height: 1.55;
}

body:is([data-page="technology"], [data-page="system"]) .tl-lead strong {
  color: var(--tl-ink);
  font-weight: 600;
}

/* ---- the card, its toolbar and the selector ---- */
body:is([data-page="technology"], [data-page="system"]) .tl-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--tl-rule);
  background: #ffffff;
  color: var(--tl-ink);
  font-family: var(--psv-font-sans);
}

body:is([data-page="technology"], [data-page="system"]) .tl-toolbar {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--psv-u));
  min-height: calc(53 * var(--psv-u));
  margin: 0;
  padding: calc(5 * var(--psv-u)) calc(24 * var(--psv-u));
  border: 0;
  border-bottom: 1px solid var(--tl-rule);
}

body:is([data-page="technology"], [data-page="system"]) .tl-toolbar > strong,
body:is([data-page="technology"], [data-page="system"]) .tl-toolbar-name {
  color: var(--tl-ink);
  font-family: var(--psv-font-sans);
  font-size: calc(17 * var(--psv-u));
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: calc(0.2 * var(--psv-u));
  white-space: nowrap;
}

body:is([data-page="technology"], [data-page="system"]) .tl-count {
  color: var(--tl-secondary);
  font-size: max(var(--psv-text-floor), calc(14 * var(--psv-u)));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body:is([data-page="technology"], [data-page="system"]) .ti-select,
body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register ol {
  display: flex;
  gap: calc(2 * var(--psv-u));
  margin: 0;
  padding: calc(3 * var(--psv-u));
  border: 0;
  border-radius: calc(4 * var(--psv-u));
  background: var(--tl-soft);
  list-style: none;
}

body:is([data-page="technology"], [data-page="system"]) .ti-select button,
body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(36 * var(--psv-u));
  padding: calc(7 * var(--psv-u)) calc(13 * var(--psv-u));
  border: 0;
  border-radius: calc(3 * var(--psv-u));
  background: transparent;
  color: var(--tl-secondary);
  font: 500 calc(14 * var(--psv-u)) / normal var(--psv-font-sans);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: none;
}

body:is([data-page="technology"], [data-page="system"]) .ti-select button:hover,
body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a:hover {
  color: var(--tl-ink);
}

body:is([data-page="technology"], [data-page="system"]) .ti-select button[aria-pressed="true"],
body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a[aria-current="step"] {
  background: var(--tl-ink);
  color: #ffffff;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a > span {
  display: none;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a > strong {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ---- the body: chart on the left, panel on the right, as the home cards ---- */
body:is([data-page="technology"], [data-page="system"]) .tl-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  min-height: 0;
}

body:is([data-page="technology"], [data-page="system"]) .ti-chart {
  display: flex;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: calc(12 * var(--psv-u)) calc(18 * var(--psv-u)) calc(10 * var(--psv-u)) calc(24 * var(--psv-u));
}

body:is([data-page="technology"], [data-page="system"]) .ti-chart svg {
  display: block;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

body:is([data-page="technology"], [data-page="system"]) .ti-panel,
body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-stages {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--psv-u));
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: calc(12 * var(--psv-u)) calc(24 * var(--psv-u)) calc(8 * var(--psv-u));
  border: 0;
  border-left: 1px solid var(--tl-rule);
}

body:is([data-page="technology"], [data-page="system"]) .ti-read-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--psv-u));
  margin: calc(2 * var(--psv-u)) 0 0;
}

body:is([data-page="technology"], [data-page="system"]) .ti-read-name {
  min-width: 0;
  color: var(--tl-ink);
  font-size: calc(17 * var(--psv-u));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: calc(0.2 * var(--psv-u));
}

body:is([data-page="technology"], [data-page="system"]) .ti-read-value {
  color: var(--tl-blue);
  font-size: calc(28 * var(--psv-u));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: calc(-0.8 * var(--psv-u));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body:is([data-page="technology"], [data-page="system"]) .ti-rows {
  display: grid;
  gap: calc(4 * var(--psv-u));
  margin: 0;
  padding: calc(8 * var(--psv-u)) 0 0;
  border-top: 1px solid var(--tl-rule);
  list-style: none;
}

body:is([data-page="technology"], [data-page="system"]) .ti-rows li,
body:is([data-page="technology"], [data-page="system"]) .ti-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(calc(44 * var(--psv-u)), max-content);
  align-items: center;
  gap: calc(10 * var(--psv-u));
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--tl-ink);
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
  font-weight: 600;
  line-height: 1.4;
}

body:is([data-page="technology"], [data-page="system"]) .ti-rows li::before {
  display: none;
}

body:is([data-page="technology"], [data-page="system"]) .ti-rows em,
body:is([data-page="technology"], [data-page="system"]) .ti-row em {
  color: var(--tl-ink);
  font-style: normal;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body:is([data-page="technology"], [data-page="system"]) .ti-track {
  position: relative;
  display: block;
  height: calc(6 * var(--psv-u));
  border-radius: calc(1 * var(--psv-u));
  background: var(--tl-track);
}

body:is([data-page="technology"], [data-page="system"]) .ti-track b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: calc(1 * var(--psv-u));
  background: var(--tl-blue);
}

body:is([data-page="technology"], [data-page="system"]) .ti-track.is-signed::after {
  content: "";
  position: absolute;
  top: calc(-3 * var(--psv-u));
  bottom: calc(-3 * var(--psv-u));
  left: 50%;
  width: 1px;
  background: #a9b9ce;
}

body:is([data-page="technology"], [data-page="system"]) .ti-track i {
  position: absolute;
  top: calc(-3 * var(--psv-u));
  bottom: calc(-3 * var(--psv-u));
  width: 1px;
  background: var(--tl-ink);
}

body:is([data-page="technology"], [data-page="system"]) .ti-note {
  margin: calc(-3 * var(--psv-u)) 0 0;
  color: var(--tl-secondary);
  font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: 400;
  line-height: 1.35;
}

/* the explanation row under the card, as the home readings set it: two columns,
   a 12 u bold label and the 12 u reading, a rule between them */
body:is([data-page="technology"], [data-page="system"]) .tl-explain {
  display: grid;
  flex: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(32 * var(--psv-u));
  max-width: none;
  margin: 0;
  color: var(--tl-secondary);
  font-family: var(--psv-font-sans);
}

body:is([data-page="technology"], [data-page="system"]) .tl-explain > div + div {
  padding-left: calc(32 * var(--psv-u));
  border-left: 1px solid var(--tl-rule);
}

body:is([data-page="technology"], [data-page="system"]) .tl-explain h3 {
  margin: 0 0 calc(6 * var(--psv-u));
  color: #061426;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: calc(0.6 * var(--psv-u));
  text-transform: uppercase;
}

body:is([data-page="technology"], [data-page="system"]) .tl-explain p {
  max-width: none;
  margin: 0;
  color: var(--tl-secondary);
  font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  line-height: 1.45;
}

/* ---- 3 · the dimensions: the register is the toolbar, the reading of the dimension
   being read is the panel ---- */
body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim {
  display: none;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim.is-current {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(6 * var(--psv-u));
  min-height: 0;
  animation: none;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-stage-head {
  display: block;
  margin: 0;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dimension-code {
  display: none;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim h3 {
  width: auto;
  max-width: none;
  margin: calc(6 * var(--psv-u)) 0 0;
  padding-top: calc(8 * var(--psv-u));
  border-top: 1px solid var(--tl-rule);
  color: var(--tl-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  word-spacing: normal;
  text-transform: none;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim .tq-dim-desc {
  max-width: none;
  margin: 0;
  color: var(--tl-secondary);
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  line-height: 1.4;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-term-list {
  grid-template-columns: none;
  margin-top: calc(4 * var(--psv-u));
  counter-reset: none;
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-term-list {
  gap: calc(3 * var(--psv-u));
}

body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-term-list li {
  counter-increment: none;
}

/* the dimensions' terms are long names: their column takes more of the row so the
   names keep to one line; the bar keeps the rest */
body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-term-list li {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(calc(44 * var(--psv-u)), max-content);
}

/* German, French and Spanish name the terms at greater length: the name column
   takes more of the bar's share, so a name still keeps to one line */
html:is(:lang(de), :lang(fr), :lang(es)) body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-term-list li {
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.4fr) minmax(calc(44 * var(--psv-u)), max-content);
}

/* French and Spanish name the seven dimensions at length: the register's buttons
   close up so the title and all seven keep to the toolbar's one line */
html:is(:lang(fr), :lang(es)) body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a {
  padding-inline: calc(8 * var(--psv-u));
}

/* ---- 4 · the technologies: a wall of nine instruments ---- */
body:is([data-page="technology"], [data-page="system"]) .ti-wall {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the tile: its name across the top, the drawing and the reading side by side
   under it, so the reading has the tile's full height and never runs past it */
body:is([data-page="technology"], [data-page="system"]) .ti-tile {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "head head" "chart text";
  gap: calc(6 * var(--psv-u)) calc(16 * var(--psv-u));
  min-width: 0;
  min-height: 0;
  padding: calc(10 * var(--psv-u)) calc(18 * var(--psv-u)) calc(10 * var(--psv-u)) calc(20 * var(--psv-u));
  border-top: 1px solid var(--tl-rule);
  border-left: 1px solid var(--tl-rule);
}

body:is([data-page="technology"], [data-page="system"]) .ti-tile:nth-child(-n + 3) {
  border-top: 0;
}

body:is([data-page="technology"], [data-page="system"]) .ti-tile:nth-child(3n + 1) {
  border-left: 0;
}

body:is([data-page="technology"], [data-page="system"]) .ti-mini {
  display: flex;
  grid-area: chart;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

body:is([data-page="technology"], [data-page="system"]) .ti-mini svg {
  display: block;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body:is([data-page="technology"], [data-page="system"]) .ti-tile h3 {
  display: flex;
  grid-area: head;
  align-items: baseline;
  gap: calc(8 * var(--psv-u));
  margin: 0;
  color: var(--tl-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--psv-font-sans);
  font-size: calc(15 * var(--psv-u));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: calc(0.1 * var(--psv-u));
}

body:is([data-page="technology"], [data-page="system"]) .ti-tile-no {
  flex: none;
  color: var(--tl-blue);
  font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* A technology tile is a measuring surface: below the canvas it scales as one piece,
   without the page's type floors, so its reading keeps the share of the tile it has on
   the canvas and stays inside it down to the narrowest desktop (the Terminal's panels
   do the same). */
body:is([data-page="technology"], [data-page="system"]) .ti-tile {
  --psv-text-floor: 0px;
  --psv-label-floor: 0px;
}

body:is([data-page="technology"], [data-page="system"]) .ti-tile p {
  grid-area: text;
  min-height: 0;
  margin: 0;
  color: var(--tl-secondary);
  font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  line-height: 1.4;
}

/* ---- 5 · the capabilities: one reading per claim, stacked in the panel ---- */
body:is([data-page="technology"], [data-page="system"]) .ti-caps .ti-panel {
  margin: 0;
  border-top: 0;
}

body:is([data-page="technology"], [data-page="system"]) .ti-caps .ti-panel > .ti-cap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(8 * var(--psv-u));
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

body:is([data-page="technology"], [data-page="system"]) .ti-caps .ti-panel > .ti-cap[hidden] {
  display: none;
}

body:is([data-page="technology"], [data-page="system"]) .ti-caps .ti-cap dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(12 * var(--psv-u));
  margin: calc(2 * var(--psv-u)) 0 0;
}

body:is([data-page="technology"], [data-page="system"]) .ti-caps .ti-cap dt .ti-read-name {
  color: var(--tl-ink);
  font-size: calc(17 * var(--psv-u));
  line-height: 1.3;
}

body:is([data-page="technology"], [data-page="system"]) .ti-caps .ti-cap dt .ti-read-value {
  margin: 0 0 0 auto;
  padding: 0;
  color: var(--tl-blue);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: calc(28 * var(--psv-u));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: calc(-0.8 * var(--psv-u));
  white-space: nowrap;
}

body:is([data-page="technology"], [data-page="system"]) .ti-caps .ti-cap dd {
  max-width: none;
  margin: 0;
  padding-top: calc(8 * var(--psv-u));
  border-top: 1px solid var(--tl-rule);
  color: var(--tl-secondary);
  font-size: max(var(--psv-text-floor), calc(13 * var(--psv-u)));
  line-height: 1.5;
}

/* ---- chart type: the home charts' 11 px labels ---- */
body:is([data-page="technology"], [data-page="system"]) .ti-chart text,
body:is([data-page="technology"], [data-page="system"]) .ti-mini text {
  font-family: var(--psv-font-sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--tl-secondary);
}

body:is([data-page="technology"], [data-page="system"]) .ti-chart text.ti-k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  fill: var(--tl-ink);
}

body:is([data-page="technology"], [data-page="system"]) .ti-chart text.ti-note-t {
  font-weight: 500;
  fill: var(--tl-ink);
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* the 7/24 dial: the time of now in the centre */
body:is([data-page="technology"], [data-page="system"]) .ti-chart text.ti-dial-time {
  font-size: calc(28 * var(--psv-u));
  font-weight: 500;
  letter-spacing: calc(-0.8 * var(--psv-u));
  fill: var(--tl-blue);
}

/* the chart's observation, as the home charts state theirs under the label */
body:is([data-page="technology"], [data-page="system"]) .ti-chart text.ti-observe {
  font-size: calc(20 * var(--psv-u));
  font-weight: 600;
  letter-spacing: calc(-0.3 * var(--psv-u));
  fill: var(--tl-ink);
}

body:is([data-page="technology"], [data-page="system"]) .ti-mini text {
  font-size: 9px;
  fill: var(--tl-label);
}

/* ---- below the desktop scale ----
   Tablets (761-1050 px) keep the deck: every page stays one screen in the desktop
   frame at the canvas sizes, the toolbar's selector wraps under its name and the
   controls take a finger's 44 px. A phone (760 px and under) reads top to bottom: the
   intro, the card and the explanation stack, each chart takes a fixed height and its
   panel sits under it. */
@media (min-width: 761px) and (max-width: 1050px) {
  body:is([data-page="technology"], [data-page="system"]) .psv-page.tl-frame > .tq-shell {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 0;
    margin-inline: auto;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body:is([data-page="technology"], [data-page="system"]) .tl-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-panel,
  body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-stages {
    border-top: 1px solid var(--tl-rule);
    border-left: 0;
  }
}

@media (max-width: 1050px) {
  /* Off the desktop frame a page can grow with its content, so a drawing must not
     size its own box: each chart takes the room its card gives it, never less than
     its floor, and the drawing fits that room. */
  body:is([data-page="technology"], [data-page="system"]) .ti-chart,
  body:is([data-page="technology"], [data-page="system"]) .ti-mini {
    contain: size;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-chart {
    min-height: 280px;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-mini {
    min-height: 96px;
  }

  /* a title line that wraps here breaks evenly, not with one word left over */
  body:is([data-page="technology"], [data-page="system"]) .tl-title > span {
    text-wrap: balance;
  }

  body:is([data-page="technology"], [data-page="system"]) .tl-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 10px;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-select,
  body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register ol {
    flex-wrap: wrap;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-select button,
  body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a {
    min-height: 44px;
  }

  body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a > strong {
    display: inline;
  }
}

@media (max-width: 760px) {
  body:is([data-page="technology"], [data-page="system"]) .psv-page.tl-frame > .tq-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  body:is([data-page="technology"], [data-page="system"]) .tl-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-page="technology"], [data-page="system"]) .tl-lead {
    max-width: none;
    margin-top: 18px;
  }

  body:is([data-page="technology"], [data-page="system"]) .tl-toolbar {
    padding: 12px 16px;
  }

  body:is([data-page="technology"], [data-page="system"]) .tl-toolbar > strong,
  body:is([data-page="technology"], [data-page="system"]) .tl-toolbar-name {
    white-space: normal;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-select button,
  body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-register a {
    padding-inline: 11px;
  }

  body:is([data-page="technology"], [data-page="system"]) .tl-body {
    grid-template-columns: minmax(0, 1fr);
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-chart {
    height: 300px;
    padding: 12px 16px 10px;
  }

  /* the price and seven heat rows need the taller chart */
  body:is([data-page="technology"], [data-page="system"]) .ti-dims .ti-chart {
    height: 380px;
  }

  /* a long value ("Up to 10,000") takes the line under its name */
  body:is([data-page="technology"], [data-page="system"]) .ti-read-head,
  body:is([data-page="technology"], [data-page="system"]) .ti-caps .ti-cap dt {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  /* the dial is small on a phone: its time keeps inside the innermost day */
  body:is([data-page="technology"], [data-page="system"]) .ti-chart text.ti-dial-time {
    font-size: 20px;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-panel,
  body:is([data-page="technology"], [data-page="system"]) .tq-dimensions .tq-dim-stages {
    padding: 14px 16px 16px;
    border-top: 1px solid var(--tl-rule);
    border-left: 0;
  }

  body:is([data-page="technology"], [data-page="system"]) .tl-explain {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  body:is([data-page="technology"], [data-page="system"]) .tl-explain > div + div {
    padding-left: 0;
    border-left: 0;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-wall {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-tile,
  body:is([data-page="technology"], [data-page="system"]) .ti-tile:nth-child(-n + 3) {
    padding: 14px 16px;
    border-top: 1px solid var(--tl-rule);
    border-left: 0;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-tile:first-child {
    border-top: 0;
  }

  body:is([data-page="technology"], [data-page="system"]) .ti-mini {
    min-height: 96px;
  }
}

/* ---- System · the architecture: six stages, one instrument ----
   Each stage is an article -- its intro and the text read under the card -- and the
   card follows the six. With the controller running, the shell is a three-row grid
   (intro, card, text) and the articles lend it their children. On the deck (761 px and
   wider) the six intros share one cell and the six texts another, so the card
   keeps its place and size from stage to stage and from language to language, and only
   the stage being read shows; a phone lays out the stage being read alone. Without the
   controller the six stages read as one document and the card, which only the
   controller can draw, stays out. */
body[data-page="system"] .psv-page.si-arch:not([data-instrument-ready]) .tl-card {
  display: none;
}

body[data-page="system"] .psv-page.si-arch:not([data-instrument-ready]) .tq-layer + .tq-layer {
  margin-top: calc(36 * var(--psv-u));
}

body[data-page="system"] .psv-page.si-arch:not([data-instrument-ready]) .si-explain {
  margin-top: calc(14 * var(--psv-u));
}

@media (min-width: 761px) {
  /* six stages are taller than one screen: without the controller the page grows */
  body[data-page="system"] .psv-page.si-arch:not([data-instrument-ready]) > .tq-shell {
    max-height: none;
  }
}

body[data-page="system"] .psv-page.si-arch[data-instrument-ready] > .tq-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr);
}

body[data-page="system"] .psv-page.si-arch[data-instrument-ready] .tq-layer {
  display: contents;
}

body[data-page="system"] .psv-page.si-arch[data-instrument-ready] .tq-layer > .tl-intro {
  grid-area: 1 / 1;
}

body[data-page="system"] .psv-page.si-arch[data-instrument-ready] .tl-card {
  grid-area: 2 / 1;
}

/* the stage's text is read in the card's panel (the controller copies it there),
   so the card takes the page's height */
body[data-page="system"] .psv-page.si-arch[data-instrument-ready] .tq-layer > .si-explain {
  display: none;
}

@media (min-width: 761px) {
  body[data-page="system"] .psv-page.si-arch[data-instrument-ready] .tq-layer:not(.is-current) > * {
    visibility: hidden;
  }

  /* the cell is as tall as the tallest of the six intros: the label and the title
     keep the page's first lines, the lead ends on the card */
  body[data-page="system"] .psv-page.si-arch[data-instrument-ready] .tl-intro {
    grid-template-rows: auto 1fr;
  }

  body[data-page="system"] .psv-page.si-arch[data-instrument-ready] .tl-title {
    align-self: start;
  }
}

@media (max-width: 760px) {
  body[data-page="system"] .psv-page.si-arch[data-instrument-ready] .tq-layer:not(.is-current) {
    display: none;
  }
}

/* the label is the stage's number and name; the toolbar names the page */
body[data-page="system"] .si-arch .tl-eyebrow,
body[data-page="system"] .si-arch .tl-toolbar > strong {
  text-transform: uppercase;
}

body[data-page="system"] .si-no {
  margin-right: calc(10 * var(--psv-u));
  color: var(--tl-blue);
  font-variant-numeric: tabular-nums;
}

/* the text under the card: the stage and its word, then the rest of the stage's
   paragraph in two columns with the home's rule between them */
body[data-page="system"] .si-explain {
  color: var(--tl-secondary);
  font-family: var(--psv-font-sans);
}

body[data-page="system"] .si-explain h4 {
  margin: 0 0 calc(6 * var(--psv-u));
  color: #061426;
  background: none;
  -webkit-text-fill-color: currentColor;
  font-family: var(--psv-font-sans);
  font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: calc(0.6 * var(--psv-u));
  text-transform: uppercase;
}

body[data-page="system"] .si-explain h4 i {
  color: var(--tl-label);
  font-style: normal;
  font-weight: 500;
}

body[data-page="system"] .si-explain h4 i + span {
  color: var(--tl-label);
}

body[data-page="system"] .si-explain p {
  max-width: none;
  margin: 0;
  column-count: 2;
  column-gap: calc(64 * var(--psv-u));
  column-rule: 1px solid var(--tl-rule);
  color: var(--tl-secondary);
  font-size: max(var(--psv-text-floor), calc(12 * max(var(--psv-u), var(--psv-label-floor))));
  line-height: 1.45;
}

/* the panel: the stage and its word over a rule, then the stage's paragraph in one
   column, set a size above the page's leads so the panel reads as the card's text */
body[data-page="system"] .si-arch .ti-panel > .si-explain--panel h4 {
  margin: calc(2 * var(--psv-u)) 0 calc(12 * var(--psv-u));
  padding-bottom: calc(10 * var(--psv-u));
  border-bottom: 1px solid var(--tl-rule);
}

body[data-page="system"] .si-arch .ti-panel > .si-explain--panel p {
  column-count: 1;
  color: var(--tl-ink);
  font-size: max(var(--psv-text-floor), calc(16 * var(--psv-u)));
  line-height: 1.6;
  text-wrap: pretty;
}

body[data-page="system"] .si-arch .ti-chart text.si-name {
  font-weight: 500;
  fill: var(--tl-ink);
}

@media (min-width: 1051px) {
  /* the titles are sentences: the title takes the room, the lead a fixed column */
  body[data-page="system"] .si-arch .tl-intro {
    grid-template-columns: minmax(0, 1fr) calc(380 * var(--psv-u));
    gap: 0 calc(40 * var(--psv-u));
  }

  body[data-page="system"] .si-arch .tl-title > span {
    white-space: nowrap;
  }

  body[data-page="system"] .si-arch .tl-lead {
    max-width: none;
  }

  /* the chart never gets shorter than its lanes need: on a narrow desktop the card
     grows into the screen height the canvas does not use */
  body[data-page="system"] .si-arch .ti-chart {
    min-height: max(calc(300 * var(--psv-u)), 256px);
  }
}

@media (max-width: 760px) {
  body[data-page="system"] .si-explain p {
    column-count: 1;
  }

  /* the stages' lanes and rows need the taller chart */
  body[data-page="system"] .si-arch .ti-chart {
    height: 330px;
  }
}