.mix-row span small {
  display: block;
  color: #9fb0c7;
  font-size: .67rem;
  margin-top: .15rem;
}

.visual-note, .scope-note { color: #9fb0c7; font-size: .7rem; line-height: 1.4; }
.visual-note { margin: .1rem 0 .75rem; }
.scope-note { margin: .1rem 1rem .75rem; }
.usage-visuals { align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.usage-visuals > div { align-self: start; min-height: 0; }
.usage-visuals > div:first-child { grid-column: 1 / -1; }
.usage-visuals > div:last-child { grid-column: auto; }
.trend { display: grid; gap: .7rem; height: auto; align-items: initial; justify-content: initial; }
.trend-day { display: grid; grid-template-columns: 4rem minmax(8rem, 1fr); gap: .25rem .65rem; align-items: center; height: auto; }
.trend-day time { color: #cbd9ea; font-size: .7rem; font-weight: 700; }
.trend-reading { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.trend-reading strong { font-size: .74rem; }
.trend-reading small, .trend-overhead { color: #9fb0c7; font-size: .62rem; }
.trend-track { grid-column: 2; display: block; height: 7px; background: #263b58; border-radius: 999px; overflow: hidden; }
.trend-track .trend-bar { display: block; width: auto; min-height: 0; height: 100%; border-radius: 999px; }
.trend-track .trend-bar.nonzero { min-width: 2px; }
.trend-track .trend-bar.partial { background: #fbbf24; }
.trend-track .trend-bar.unavailable { background: #64748b; }
.trend-overhead { grid-column: 2; }

.mix-row strong { text-align: right; }
.matrix-panel {
  margin: 0 1rem 1rem;
  background: #101f34;
  border: 1px solid #263b58;
  border-radius: .75rem;
  padding: .8rem;
}
.matrix-panel > p { color: #9fb0c7; font-size: .72rem; margin: .2rem 0 .7rem; }
.matrix-heading, .matrix-selection { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.matrix-heading h2 { font-size: .9rem; margin: 0; }
.matrix-wrap { overflow: auto; }
.matrix-table { min-width: 800px; }
.matrix-cell { display: grid; gap: .25rem; width: 100%; min-width: 10rem; text-align: left; padding: .55rem; }
.matrix-cell strong { font-size: 1.1rem; }
.matrix-cell small { color: #9fb0c7; line-height: 1.35; }
.matrix-cell:disabled { cursor: default; opacity: .45; }
.matrix-selection { margin-top: .65rem; color: #9fb0c7; font-size: .75rem; }
.matrix-selection:empty { display: none; }
.matrix-selection button { padding: .45rem .65rem; }
.receipt-list { margin: .45rem 0 0; padding-left: 1.2rem; min-width: 18rem; }
.receipt-list li { margin: .35rem 0; }
.receipt-list small { line-height: 1.35; }
.receipt-omitted { color: #9fb0c7; display: block; margin-top: .4rem; }
.receipt-state { display: grid; gap: .2rem; margin-top: .4rem; }
.receipt-state strong { font-size: .7rem; }
.receipt-state.missing strong { color: #fbbf24; }
.table-pages { display: flex; justify-content: flex-end; align-items: center; gap: .65rem; padding: 0 1rem 1rem; color: #9fb0c7; font-size: .72rem; }
.table-pages:empty { display: none; }
.table-pages button { padding: .45rem .7rem; }
.trace-panel { margin: 1rem 0; }
.trace-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .7rem; padding: .8rem 0; }
.trace-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem; padding: .8rem 0 0; }
.insight { background: #0c192a; border: 1px solid #2a405d; border-radius: .65rem; padding: .7rem; display: grid; gap: .3rem; }
.insight span { color: #9fb0c7; font-size: .72rem; }
.trace-timeline-panel { margin: .5rem 0 1rem; padding: .8rem; border: 1px solid #2a405d; border-radius: .7rem; background: #0c192a; }
.trace-timeline-panel h2 { font-size: .9rem; margin: 0 0 .55rem; }.trace-timeline-panel small { color: #9fb0c7; font-weight: normal; }
.trace-timeline svg { width: 100%; display: block; min-height: 8rem; }.timeline-legend { display: flex; flex-wrap: wrap; gap: .65rem; color: #c7d6e8; font-size: .72rem; }.timeline-legend span { display: inline-flex; align-items: center; gap: .3rem; }.timeline-legend i { width: .6rem; height: .6rem; border-radius: 50%; }
.machine-flow-panel { background: #0d192a; border: 1px solid #2a405e; border-radius: 1rem; margin: 1rem 0; overflow: hidden; }.machine-flow { display: grid; gap: .7rem; padding: 0 1rem 1rem; }.flow-lane { align-items: center; display: grid; gap: .6rem; grid-template-columns: 8rem 1fr; }.flow-lane strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }.flow-cells { display: grid; gap: 2px; grid-template-columns: repeat(24, minmax(5px, 1fr)); }.flow-cell { background: #536b85; border-radius: 2px; height: 1.5rem; }.flow-cell.busy { background: #8b7cf6; }.flow-cell.idle { background: #34d399; }.flow-cell.finished { background: #58c7ef; }.flow-cell.offline { background: #526172; }.flow-cell.unknown { background: #f59e0b; }.flow-cell.stalled { background: #ef4444; box-shadow: 0 0 0 1px #fecaca; }@media (max-width:620px){.flow-lane{grid-template-columns:1fr}.flow-cells{gap:1px}}
.filters label.filter-active { background: #173557; border-color: #61c6ff; box-shadow: inset 0 0 0 1px #61c6ff; border-radius: .65rem; padding: .3rem .45rem; }
.filters label.filter-active select, .filters label.filter-active input { border-color: #8bd8ff; }
.overview-brief { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.overview-brief article { background: #0d192a; border: 1px solid #2a405e; border-radius: 1rem; padding: 1rem; }.overview-brief h2 { font-size: .9rem; margin: 0 0 .8rem; }.overview-brief a { color: #cfeaff; display: grid; gap: .25rem; text-decoration: none; }.overview-brief a:hover { color: #7dd3fc; }.overview-brief a span { color: #9fb0c7; font-size: .78rem; line-height: 1.35; }.overview-brief ol { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }.overview-brief li { display: grid; gap: .3rem; }.overview-brief li > span { color: #7dd3fc; font-size: .7rem; font-weight: 800; text-transform: uppercase; }@media (max-width:800px){.overview-brief{grid-template-columns:1fr}}
.freshness-updated { color: #b9e7ff !important; text-shadow: 0 0 1rem #45c3ff; }
.freshness-roll { display: inline-block; animation: freshness-roll .48s cubic-bezier(.18,.85,.32,1.15) both; }
@keyframes freshness-roll { from { opacity: 0; transform: translateY(-.8em) rotateX(-70deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }
@media (prefers-reduced-motion: reduce) { .freshness-roll { animation: none; } }
details summary { cursor: pointer; color: #7dd3fc; margin-top: .35rem; }
@media (max-width:800px) { .usage-visuals { grid-template-columns: 1fr; }.usage-visuals > div:first-child,.usage-visuals > div:last-child { grid-column: auto; } }