/* The office day's own: small things past style.css. The room's ground stays white in light and dark, as the team's viewer had it, because its colors and model were made for it. Charts follow the theme. */
:root { --sensor-logger: #6060ff; --sensor-spider-office: #f0504a }
.slides-link { font-size: 11px; min-height: 22px; padding: 0 8px; vertical-align: 1px }
#view { background: #fff }
#chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--ds-surface); cursor: pointer }
#chart[hidden] { display: none }
#chart.white { background: #fff }
#tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font: 10px/1 var(--ds-font-mono, monospace); color: #111 }
#tags span { position: absolute; transform: translate(-50%, -100%); padding: 0 2px; background: rgba(255, 255, 255, .78); white-space: nowrap }
#tags span.logger { font-weight: 600 }
.view-switch { top: var(--ds-space-2); left: var(--ds-space-2) }
.chart-tools { top: var(--ds-space-2); right: var(--ds-space-2); gap: var(--ds-space-3); padding: 0 var(--ds-space-2); font-size: 11px }
.chart-tools[hidden], .view-tools[hidden], .replay[hidden] { display: none }
.sw.logger { background: var(--sensor-logger) }
.sw.spider { background: var(--sensor-spider-office) }
.drawn-dock .reads { color: var(--ds-text-2) }
.ds-dock-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px var(--ds-space-2) }
.drawn-dock .ds-dock-head { display: flex; align-items: center; justify-content: space-between }
.moments .t { min-width: 5ch }
.explain .also { margin: var(--ds-space-2) 0 0 }
.graphs-body.track-body { padding: 0; max-height: none }
.track-head { display: flex; align-items: center; gap: var(--ds-space-2); padding: 2px var(--ds-space-2); font-size: 11px; white-space: nowrap; overflow: hidden }
.track-head select { font: inherit; height: 20px; padding: 0 2px; border: var(--ds-line) solid var(--ds-rule); border-radius: var(--ds-radius-act); background: var(--ds-surface); color: var(--ds-text) }
.track-head .quiet { color: var(--ds-text-2); overflow: hidden; text-overflow: ellipsis }
#track { display: block; width: 100%; height: 118px; cursor: pointer; touch-action: pan-y }

/* A live slide: the picture alone. The slide that replays keeps the replay's bar. */
[data-embed=""] :is(.replay, .graphs) { display: none !important }
[data-embed] :is(.ds-skip, .ds-topbar, .ds-statusbar, #side, #main > [role=separator], .view-tools, .view-switch, .chart-tools) { display: none !important }
html[data-embed][data-ds-page="tool"] > body:has(> .ds-split) { grid-template-rows: minmax(0, 1fr) }
html[data-embed][data-ds-page="tool"] > body > .ds-split { grid-template-columns: minmax(0, 1fr) !important }
[data-embed] #tags span:not(.logger) { font-size: 9px; opacity: .85 }
[data-embed="track"] .replay { display: none !important }
[data-embed="track"] .track-head { display: none }

@media (width <= 639px) {
  #track { height: 100px }
  .track-head { flex-wrap: wrap; white-space: normal }
  .work .ds-view--fill#view { aspect-ratio: 1 / 1 }
  .work .ds-view--fill#view[data-name=timeline], .work .ds-view--fill#view[data-name=devices] { aspect-ratio: auto; height: 640px }
  .work .ds-view--fill#view[data-name=clocks] { aspect-ratio: auto; height: 830px }
  .chart-tools { top: 58px; left: var(--ds-space-2); right: auto }
}