/* timing.css: chrome for the "Where the time goes" view.
   Same Observatory rules as everything else. The bars in this view are read
   against each other rather than against a scale, so the only colour used to
   separate them is the corona ramp; orange and green stay reserved for the
   stripped twin and the independently written control, which are data. */

.tm-note {
  margin: 10px 0 0; font: 12.5px/1.55 var(--sans); color: var(--ink-2);
  max-width: 86ch; text-wrap: pretty;
}

/* The activity table carries a plain-English sentence under each name, so a
   reader never has to know what "visible_tests_host_confirm" means. */
.tm-stage-name { display: block; color: var(--ink); }
.tm-stage-what {
  display: block; margin-top: 2px; font: 11.5px/1.45 var(--sans);
  color: var(--ink-3); text-transform: none; letter-spacing: 0;
  max-width: 52ch; text-wrap: pretty;
}

/* A row saying where a figure came from: a stopwatch reading taken around the
   activity, or a reconstruction from artifacts. Never mixed silently. */
.tm-source {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font: 500 10px/1.6 var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--hairline-2);
  color: var(--ink-3);
}
.tm-source.is-measured { color: var(--corona-2); border-color: var(--corona); }

/* The plain-words warning shown beside a single named cell or attempt that
   does not count towards the primary analysis, so a reader who picked it out
   by name is not left thinking its seconds are part of any total on the page. */
.tm-invalid-note { display: inline-block; margin-left: 8px; color: var(--warn); font: 500 12px/1.5 var(--sans); }

.tm-split {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1100px) { .tm-split { grid-template-columns: 1fr; } }

/* What the agent spent its own half of a turn doing, one bar per command. */
.tm-tools { padding: 2px 0; }
.tm-tools h3 {
  margin: 0 0 3px; font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.tm-tools p {
  margin: 0 0 12px; font: 11.5px/1.5 var(--sans); color: var(--ink-3);
  text-wrap: pretty;
}
.tm-tool-row {
  display: grid; grid-template-columns: 9.5ch 1fr 8ch;
  gap: 8px; align-items: center; margin-bottom: 6px;
  font: 11.5px/1.6 var(--mono); color: var(--ink-2);
}
.tm-tool-bar {
  height: 8px; border-radius: 999px; background: var(--well);
  overflow: hidden;
}
.tm-tool-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--corona), var(--corona-2));
}
.tm-tool-row b {
  font-weight: 500; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The clickable rows of the ranking table, which jump to a cell's waterfall. */
#tm-rank-table tbody tr { cursor: pointer; }
#tm-rank-table tbody tr:hover { background: rgba(var(--corona-rgb), 0.08); }

.tm-empty {
  padding: 28px 4px; color: var(--ink-3);
  font: 13px/1.6 var(--sans); text-wrap: pretty;
}

/* Figure C, "the campaign, by model and by build": two charts side by side,
   the model-request box plot and the by-build stacked bar. Wraps to a single
   column on a narrow window rather than squeezing two charts unreadably
   thin, the same rule the rest of the page's two-up layouts follow. */
.tm-campaign-split {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
}
.tm-campaign-col { flex: 1 1 360px; min-width: 0; }
.tm-campaign-col h3 {
  margin: 0 0 6px; font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}

/* Figure A, "each attempt, five ways": one full sentence per attempt under
   the stacked bar, so a reader who cannot hover a touchscreen still gets
   every number the chart carries. */
.tm-attempts-captions { margin-top: 6px; }
.tm-attempts-captions p {
  margin: 0 0 6px; font: 12.5px/1.55 var(--sans); color: var(--ink-2);
  text-wrap: pretty;
}