/* Office beacons: the plan's canvas, the lanes under it, and a live slide. The beacon, heat and device colors are data and live in beacons.js. */
.slides-link { font-size: 11px; min-height: 22px; padding: 0 8px; margin-inline-end: var(--ds-space-2) }
.explain .draft { color: var(--ds-text-2) }
.moments .t { white-space: nowrap; color: var(--ds-text-2) }
.moments button[aria-current="true"] { background: var(--ds-hover) }
.explain .steps { margin: 0 0 6px; padding-inline-start: 16px }
.explain .steps li { margin: 0 0 3px }

.view-tools { z-index: 3 }
.view-tools .ds-icon-button { width: 24px; height: 24px; min-height: 24px; padding: 0 }
.tool-gap { width: 6px }
.replay { z-index: 3 }
.replay.fit { right: auto; width: max-content }
.replay[hidden], .legend[hidden], .checks-bar[hidden], .pods-table[hidden], .tip[hidden], .lanes-dock[hidden] { display: none }
#map { position: absolute; inset: 0; touch-action: none; cursor: grab; background: var(--ds-surface) }
#map.dragging { cursor: grabbing }
.work .ds-view { overflow: hidden }

/* The team's readout, top left of the view, in their order. */
.readout { position: absolute; z-index: 2; left: var(--ds-space-2); top: var(--ds-space-1); margin: 0; font-family: var(--ds-font-mono); font-size: 10px; line-height: 1.25; color: var(--ds-text-2); pointer-events: none; white-space: pre; padding: 1px 3px; background: color-mix(in srgb, var(--ds-surface) 82%, transparent) }
.readout b { font-weight: var(--ds-weight-semibold); color: var(--ds-text) }

.scale { z-index: 2; right: var(--ds-space-2); bottom: 34px; display: flex; align-items: center; gap: 4px; padding: 1px 4px; font-size: 10px; color: var(--ds-text-2); pointer-events: none }
.scale i { display: block; height: 3px; border: var(--ds-line) solid var(--ds-text-2); border-top: 0 }
.legend { z-index: 2; left: var(--ds-space-2); bottom: 34px; gap: var(--ds-space-2); padding: 1px 6px; font-size: 10px; flex-wrap: wrap; max-width: 60% }
.legend .sw { display: inline-block; width: 10px; height: 10px; margin-inline-end: 3px; vertical-align: -1px; border: 0 }
.checks-bar { z-index: 3; top: 34px; right: var(--ds-space-2); gap: var(--ds-space-2); padding: 0 6px; font-size: 11px; flex-wrap: wrap; justify-content: flex-end; max-width: 70% }
.checks-bar label { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; white-space: nowrap }
.checks-bar input { width: 13px; height: 13px; margin: 0 }
.tip { position: absolute; z-index: 4; padding: 1px 5px; font-size: 11px; line-height: 1.3; white-space: nowrap; border: var(--ds-line) solid var(--ds-rule); background: var(--ds-surface); color: var(--ds-text); pointer-events: none }

/* The seven iPods' check, over the view. */
.pods-table { position: absolute; z-index: 2; left: var(--ds-space-2); bottom: 34px; padding: 2px 6px; font-size: 11px; border: var(--ds-line) solid var(--ds-rule); background: var(--ds-surface) }
.pods-table table { border-collapse: collapse }
.pods-table :is(th, td) { padding: 0 8px 0 0; font-weight: var(--ds-weight-regular); text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums }
.pods-table th { color: var(--ds-text-2) }
.pods-table :is(th, td):first-child { text-align: start }
.pods-table caption { caption-side: top; text-align: start; font-weight: var(--ds-weight-semibold) }
.pods-table p { margin: 2px 0 0; max-width: 34ch; color: var(--ds-text-2); font-size: 10px; line-height: 1.3 }

.lanes-dock { min-height: 0; height: 206px; padding: 0; border-top: var(--ds-line) solid var(--ds-rule) }
.lanes-dock.short { height: 92px }
.legend .chip { display: inline-flex; align-items: center; gap: 0; padding: 0 3px; border: 0; border-radius: var(--ds-radius-act); background: transparent; color: var(--ds-text); font: inherit; font-size: 10px; cursor: pointer }
.legend .chip:hover { background: var(--ds-hover) }
.legend .chip[aria-pressed="true"] { background: var(--ds-ink); color: var(--ds-on-ink) }
.legend .near-key { color: var(--ds-text-2); white-space: nowrap }
#lanes { display: block; width: 100%; height: 100%; cursor: ew-resize; touch-action: pan-y }

/* A live slide: one view, with nothing round it. */
[data-embed] body { display: block; overflow: hidden }
[data-embed] .ds-topbar, [data-embed] .ds-skip, [data-embed] #side, [data-embed] .ds-split > [role=separator], [data-embed] .ds-statusbar, [data-embed] .view-tools, [data-embed] .checks-bar { display: none !important }
[data-embed] .ds-split { display: block !important; height: 100vh !important; min-height: 0 }
[data-embed] .work { height: 100vh }

@media (width <= 639px) {
  .readout { display: none }
  .work .ds-view { min-height: 60vh }
  .lanes-dock { height: 150px }
  .checks-bar { top: 34px; max-width: 90% }
  .pods-table { display: none }
  .legend { max-width: 90% }
}