/* The bottle cams page, on the open house's workbench. The colors here are data: the three modes, the kinds of product, stored and out. The modes' colors follow the team's chart of one bottle
   (purple, orange, green), set to steps validated together in both modes. The sound's ramp is the same in light and dark: its lane is its own dark panel. */
:root {
  --m-spot: #6250d6; --m-habitual: #eb6834; --m-planned: #1baf7a; --m-other: #8f8e89;
  --p-a: #2a78d6; --p-b: #eb6834; --p-all: #1baf7a; --p-anti: #eda100; --p-bleach: #e87ba4; --p-other: #8f8e89;
  --stored: #8f8e89; --out: #ecdfb4; --band: #ecebe7; --strong: #17171a; --weak: #b9b8b3; --no-file: #b9b8b3;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --m-spot: #9085e9; --m-habitual: #d95926; --m-planned: #199e70; --m-other: #8f8e89;
    --p-a: #3987e5; --p-b: #d95926; --p-all: #199e70; --p-anti: #c98500; --p-bleach: #d55181; --p-other: #8f8e89;
    --stored: #6d6c67; --out: #5c5333; --band: #242423; --strong: #f0efec; --weak: #5c5b57; --no-file: #6d6c67;
  }
}
:root[data-theme="dark"] {
  --m-spot: #9085e9; --m-habitual: #d95926; --m-planned: #199e70; --m-other: #8f8e89;
  --p-a: #3987e5; --p-b: #d95926; --p-all: #199e70; --p-anti: #c98500; --p-bleach: #d55181; --p-other: #8f8e89;
  --stored: #6d6c67; --out: #5c5333; --band: #242423; --strong: #f0efec; --weak: #5c5b57; --no-file: #6d6c67;
}

.m-s, .m-h, .m-p { font-weight: var(--ds-weight-semibold) }
.m-s::before, .m-h::before, .m-p::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 3px }
.m-s::before { background: var(--m-spot) } .m-h::before { background: var(--m-habitual) } .m-p::before { background: var(--m-planned) }

.slides-link { font-size: 11px; min-height: 22px; padding: 0 8px; margin-inline-end: var(--ds-space-2) }
.draft { margin: 2px 0 6px; color: var(--ds-text-2) }
.moments button { grid-template-columns: 6.2em 1fr }
.moments .t { white-space: nowrap }

/* The view. */
.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.gl[hidden] { display: none }
#chart { position: relative; touch-action: pan-y; cursor: crosshair }
.view-nav { top: var(--ds-space-2); left: var(--ds-space-2); padding-inline-end: var(--ds-space-2) }
.view-nav .view-name { padding-inline-start: 4px; font-size: 11px; color: var(--ds-text-2); white-space: nowrap }
.view-nav .ds-icon-button, .view-tools .ds-icon-button { width: 22px; height: 22px; min-width: 22px; min-height: 22px; padding: 0 }
.view-tools { gap: 4px; padding-inline: 4px; font-size: 11px }
.pick { max-width: 150px; font: inherit; font-size: 11px; height: 22px; 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) }
.pick-wide { max-width: 330px }
.pick-small { max-width: 52px }
.tiny { font-size: 11px; min-height: 22px; padding: 0 6px }
.tiny[aria-pressed="true"] { background: var(--ds-ink); color: var(--ds-on-ink) }
.tick { font-size: 11px; white-space: nowrap }
.tip { position: absolute; z-index: 5; pointer-events: none; max-width: 340px; padding: 2px 6px; border: var(--ds-line) solid var(--ds-rule); background: var(--ds-surface); color: var(--ds-text); font-size: 11px; line-height: 1.35 }
.tip b { font-weight: var(--ds-weight-semibold) }
.tip .quiet { color: var(--ds-text-2) }

/* A view's short note, over the canvas. */
.note { position: absolute; top: 36px; left: var(--ds-space-2); width: 300px; padding: 4px 6px; background: color-mix(in srgb, var(--ds-surface) 92%, transparent); border: var(--ds-line) solid var(--ds-rule); font-size: 11px; line-height: 1.35; pointer-events: none }
.note p { margin: 0 0 4px; font-size: 11px; line-height: 1.35 }
.note p:last-child { margin-bottom: 0 }
.note b { font-weight: var(--ds-weight-semibold) }
.note table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 2px }
.note th, .note td { padding: 0 4px 0 0; border-top: var(--ds-line) solid var(--ds-rule); font-weight: var(--ds-weight-regular); text-align: start }
.note .n { text-align: end; font-variant-numeric: tabular-nums }
.note .id { color: var(--ds-text-2) }
.note .id span { font-size: 22px; line-height: 1; margin-inline-end: 4px; color: var(--ds-text-2) }

/* The clip's frame: on this computer, the picture; elsewhere, a held place. */
.clip-frame { position: absolute; top: 36px; right: var(--ds-space-2); width: 240px; margin: 0; border: var(--ds-line) dashed var(--ds-rule-strong); background: color-mix(in srgb, var(--ds-surface) 92%, transparent); font-size: 11px; line-height: 1.35 }
.clip-frame img { display: block; width: 100%; height: auto }
.clip-frame figcaption { padding: 3px 5px; color: var(--ds-text-2) }
.clip-frame.has-picture { border-style: solid }

/* Tables: a panel over the canvas, under the floating controls. */
.panel { position: absolute; inset: 0; overflow: auto; padding: 36px var(--ds-space-3) var(--ds-space-2); background: var(--ds-surface); font-size: 12px; line-height: 1.35 }
.panel h3 { margin: 0 0 2px; font-size: 12px; font-weight: var(--ds-weight-semibold) }
.panel p { margin: 0 0 6px; font-size: 12px; line-height: 1.35 }
.panel section + section { margin-top: var(--ds-space-3) }
.panel table { border-collapse: collapse; font-size: 11.5px; line-height: 1.3; margin-bottom: 6px }
.panel th, .panel td { padding: 2px 10px 2px 0; border-top: var(--ds-line) solid var(--ds-rule); text-align: start; font-weight: var(--ds-weight-regular) }
.panel thead th { border-top: 0; color: var(--ds-text-2) }
.panel tbody th { font-weight: var(--ds-weight-semibold) }
.panel .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap }

/* On a live slide: the view alone, in the whole of the frame. */
html.embed .ds-topbar, html.embed .ds-statusbar, html.embed #side, html.embed [role=separator], html.embed .ds-skip { display: none !important }
html.embed body { display: block; height: 100vh; overflow: hidden }
html.embed .ds-split { display: block !important; height: 100vh }
html.embed .work { height: 100vh }
html.embed #nav { display: none !important }
html.embed .view-tools { display: none !important }
html.embed .note { top: var(--ds-space-2) }
html.embed .clip-frame { top: var(--ds-space-2) }

/* A phone: the view takes a tall box, and its controls wrap. */
@media (width <= 639px) {
  .work .ds-view--fill { aspect-ratio: auto; height: 82vh }
  .view-tools { top: 40px; left: var(--ds-space-2); right: auto; flex-wrap: wrap }
  .pick-wide { max-width: 190px }
  .panel { padding-top: 70px }
  .note { position: absolute; top: auto; bottom: var(--ds-space-2); left: var(--ds-space-2); right: var(--ds-space-2); width: auto; max-height: 32%; overflow: hidden }
  .note p:not(:nth-child(-n+2)) { display: none }
  .note .id { display: none }
  .clip-frame { top: 72px; width: 130px }
  .clip-frame figcaption { display: none }
}