/* The napkin dispenser page: the sessions on one clock fill the view, with the webcam's picture beside them only where it is on this computer; the rest is the open house's workbench. */
.overview-view { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); background: var(--ds-surface) }
.overview-cell { position: relative; min-width: 0; min-height: 0; grid-row: 1; grid-column: 1 }
.overview-cell canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer }
.picture-cell { grid-row: 1; grid-column: 2; display: grid; place-items: center; background: #000; height: 100%; aspect-ratio: 4 / 3; max-width: 52vw; min-height: 0 }
.picture-cell[hidden] { display: none }
.picture { width: 100%; height: 100%; object-fit: contain; display: block }
.picture-none { margin: 0; padding: var(--ds-space-3); max-width: 46ch; color: #ddd; font-size: var(--ds-type-ui); text-align: center }
.graphs-body { max-height: 44vh }
.num { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; color: var(--ds-text-2) }
th.num, td.num { text-align: right }
.ds-dock-head h2 .num { font-weight: var(--ds-weight-regular) }

/* The Slides link, as small as the top bar's other controls. */
.slides-link { font-size: 11px; min-height: 22px; padding: 0 8px; margin-inline-end: var(--ds-space-2); text-decoration: none }

.draft { color: var(--ds-text-2) }
.explain ul { margin: 0 0 6px; padding-inline-start: 1.2em }
.explain li { margin-bottom: 3px }
.moments button .t { white-space: nowrap }
#moments button { grid-template-columns: 8.2em 1fr }
.read-table { width: 100%; margin: 0 0 6px }
.read-table :is(th, td) { height: auto; padding: 2px var(--ds-space-2) 2px 0; vertical-align: top; font-size: inherit; line-height: inherit; white-space: normal }
.read-table td:first-child { white-space: nowrap }
.read-table td.num { white-space: nowrap }
.read-table td:first-child:not(.num) { white-space: normal; min-width: 8em }
.read-table tr.line td { border-top: var(--ds-line) solid var(--ds-rule-strong) }
.said { margin: 0 0 6px; padding: 0 0 0 var(--ds-space-2); border-inline-start: var(--ds-line) solid var(--ds-rule-strong) }
.said p { margin: 0 }
.said footer { color: var(--ds-text-2) }

/* Sessions: a row each, the chosen one in ink. */
.sessions button { all: unset; cursor: pointer; display: block; width: 100% }
.sessions button:hover { text-decoration: underline }
.sessions button:focus-visible { outline: 2px solid var(--ds-focus, currentColor); outline-offset: 1px }
.sessions tr[aria-current="true"] td { font-weight: var(--ds-weight-semibold) }
.sessions td:first-child { white-space: nowrap }
.sessions td:nth-child(2) { white-space: nowrap; color: var(--ds-text-2); font-variant-numeric: tabular-nums }

/* The touches: time, module, size and the hand check, a row each. */
.touch-key { color: var(--ds-text-2); margin: 0 0 3px }
.touches button { grid-template-columns: max-content 3.2em minmax(3.4em, 1fr) 1em; padding: 1px 4px }
.touches .num { text-align: right }
.touches .dot { text-align: center }
.touches li[aria-current="true"] button { background: var(--ds-hover) }

/* A live slide shows the view and the graphs alone. */
[data-embed] :is(.ds-skip, .ds-topbar, .ds-statusbar, #side, #main > [role=separator], #replay) { 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 }
html[data-embed] .work { grid-template-rows: minmax(0, 1fr) }
html[data-embed] .work:has(> #view:not([hidden])):has(> #graphs:not([hidden])) { grid-template-rows: minmax(0, 1fr) auto }
html[data-embed] #graphs { height: 100%; min-height: 0 }
html[data-embed] .graphs-body { max-height: none; height: 100%; overflow: hidden }
#view[hidden], #graphs[hidden], #replay[hidden] { display: none !important }

@media (width <= 639px) {
  .overview-view { display: block }
  .work .overview-view.ds-view--fill { aspect-ratio: auto; height: auto }
  .overview-cell { position: relative; height: 62vh; min-height: 340px }
  .picture-cell { aspect-ratio: 4 / 3; height: auto; width: 100%; max-width: none }
  .replay { position: static; margin: 2px }
  .sessions td:nth-child(2) { white-space: normal }
}