/* Source proposal. Native 390/1280/true200% inspection is still required. */
.qt-exhibit {
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  margin: 2.5rem auto;
  max-width: 48rem;
  min-width: 0;
  border-block: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.qt-exhibit *, .qt-exhibit *::before, .qt-exhibit *::after { box-sizing: border-box; }
.qt-exhibit .qt-body { padding: 1.25rem; }
.qt-exhibit .qt-label, .qt-exhibit .qt-scale, .qt-exhibit figcaption {
  font-size: .875rem;
  line-height: 1.5;
}
.qt-exhibit .qt-label { color: var(--ink-m); margin: 0 0 .5rem; }
.qt-exhibit .qt-illustrative { color: var(--ink); font-weight: 700; }
.qt-exhibit h3 { font: 1.25rem/1.3 var(--display); margin: 0 0 1rem; }
.qt-exhibit .qt-scale { margin: 0 0 .75rem; }
.qt-exhibit figcaption { display: block; border-top: 1px solid var(--line); padding: .875rem 1.25rem; }
.qt-exhibit a { color: inherit; text-underline-offset: .15em; }
.qt-exhibit a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.qt-exhibit .qt-chart-data {
  display: block;
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.qt-orientation .qt-body { padding-block: 1rem; }
.qt-orientation h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.qt-exhibit .qt-loop-frame { position: relative; padding-left: 2.25rem; }
.qt-exhibit .qt-loop-path { position: absolute; inset: 0 auto 0 0; width: 2rem; height: 100%; }
.qt-exhibit .qt-loop-path path { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.qt-exhibit .qt-loop { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.qt-exhibit .qt-loop li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .4rem;
  border-bottom: 1px solid var(--line); padding-block: .2rem; min-width: 0;
}
.qt-exhibit .qt-loop li:last-child { border-bottom: 0; }
.qt-exhibit .qt-stage-number { color: var(--ink-m); margin-right: .2em; font-variant-numeric: tabular-nums; }
.qt-exhibit .qt-current { border-left: 3px solid var(--gold); padding-left: .5rem; }
.qt-exhibit .qt-return { flex-basis: 100%; padding-left: 2rem; }
.qt-exhibit .qt-desktop-chart { display: none; width: 100%; height: auto; overflow: visible; }
.qt-exhibit .qt-desktop-chart text { fill: var(--ink); font-family: inherit; font-size: 18px; }
.qt-exhibit .qt-grid path { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.qt-exhibit .qt-step { fill: none; stroke: var(--ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.qt-exhibit .qt-points circle { fill: var(--ink); }
.qt-exhibit .qt-count-text text { font-weight: 700; }
.qt-exhibit .qt-annotation path { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.qt-exhibit .qt-phone-sequence { list-style: none; margin: 0; padding: 0; }
.qt-exhibit .qt-phone-sequence li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem;
  border-top: 1px solid var(--line); padding: .75rem 0; min-width: 0;
}
.qt-exhibit .qt-phone-sequence .qt-change { border-left: 3px solid var(--gold); padding-left: .75rem; }
.qt-exhibit .qt-month, .qt-exhibit .qt-event { font-size: .875rem; }
.qt-exhibit .qt-count { font-variant-numeric: tabular-nums; }
.qt-exhibit .qt-event { grid-column: 1 / -1; }
.qt-exhibit .qt-sector-clocks { padding: 1.25rem; border-top: 1px solid var(--line); }
.qt-exhibit .qt-clock-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.qt-exhibit .qt-clock-grid section { min-width: 0; border-left: 3px solid var(--gold); padding-left: .875rem; }
.qt-exhibit .qt-clock-grid h4 { margin: 0 0 .75rem; font: 1rem/1.4 var(--body); font-weight: 700; }
.qt-exhibit .qt-clock-grid dl { margin: 0; font-size: .875rem; }
.qt-exhibit .qt-clock-grid dt { margin-top: .75rem; font-weight: 700; }
.qt-exhibit .qt-clock-grid dt:first-child { margin-top: 0; }
.qt-exhibit .qt-clock-grid dd { margin: .2rem 0 0; }
.qt-exhibit .qt-activity-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .875rem; }
.qt-exhibit .qt-activity-table caption { text-align: left; font: 1.125rem/1.3 var(--display); margin-bottom: 1rem; }
.qt-exhibit .qt-activity-table th, .qt-exhibit .qt-activity-table td {
  padding: .75rem .3rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.qt-exhibit .qt-activity-table th:first-child { padding-left: 0; }
.qt-exhibit .qt-activity-table td:last-child, .qt-exhibit .qt-activity-table th:last-child { padding-right: 0; }
.qt-exhibit .qt-activity-table td { font-variant-numeric: tabular-nums; }
.qt-exhibit .qt-activity-col { width: 36%; }
.qt-exhibit .qt-frequency-col { width: 18%; }
.qt-exhibit .qt-duration-col { width: 23%; }
.qt-exhibit .qt-total-col { width: 23%; }
.qt-exhibit .qt-activity-table tfoot th, .qt-exhibit .qt-activity-table tfoot td { border-bottom: 0; font-weight: 700; }
/* Phone fit for the activity ledger (cert 37199357881: 22 critical text-outside-clipped-parent issues in Chromium at 375 and 414 px and 11 in WebKit at 375 px, all in this
   one table). The shared Insights rule (editorial.css, max-width 640px) gives every cell of a four-column .table-scroll table a 7.5rem floor, 480 px in all, which is right for a
   wide record template that scrolls but wrong here: the ledger is four short columns of words and digits inside a figure that clips (editorial.css figure{overflow:hidden}), so
   its last columns sat outside the figure and the caption and headers were cut at the figure edge. On a phone the ledger drops those floors and fits its figure with no sideways
   scroll: every column keeps its colgroup share, headers and activity names wrap inside their cells, and the caption, every column and the 55 total are in view. Layout only: the
   table, its caption, headers, numbers and text are untouched, and it stays a real table inside its labelled .table-scroll region (focus and print behaviour unchanged). The
   selectors out-rank the shared floor ((0,4,1) against (0,3,4)) so no !important is needed. */
@media (max-width: 640px) {
  .qt-exhibit.qt-ledger .qt-body { padding-inline: 1rem; }
  .article-content .qt-exhibit .table-scroll .qt-activity-table { font-size: .8125rem; }
  .article-content .qt-exhibit .table-scroll .qt-activity-table :is(th, td) { min-width: 0; padding-inline: .2rem; }
  .article-content .qt-exhibit .table-scroll .qt-activity-table :is(th, td):first-child { padding-left: 0; }
  .article-content .qt-exhibit .table-scroll .qt-activity-table :is(th, td):last-child { padding-right: 0; }
}
@media (min-width: 48rem) {
  .qt-exhibit .qt-desktop-chart { display: block; }
  .qt-exhibit .qt-phone-sequence { display: none; }
  .qt-exhibit .qt-clock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print {
  .qt-exhibit { break-inside: avoid; }
  .qt-exhibit .qt-desktop-chart { display: block; }
  .qt-exhibit .qt-phone-sequence { display: none; }
}