/* The candy bag page, on the open house's workbench. The colors here are data, so they keep one place. Touch, moves, the rate of change, the axes, video and valid data are the pens of the team's data viewer;
   in dark they step up to read on the dark ground. The place codes and the four bag sizes are the validated categorical slots the site's other studies use. */
:root {
  --touch: #c9920e; --touch-held: #b8b7b0; --move: 128, 0, 128; --roc: #2f9e00; --axis-x: #e00000; --axis-y: #c03f00; --axis-z: #807e00;
  --video: #2233dd; --photo: #7fb2e6; --valid: #e23b3b; --outside: #8f8e89;
  --home: #1baf7a; --away: #eb6834; --transit: #17171a; --lost: .42;
  --size-1: #2a78d6; --size-2: #eb6834; --size-3: #1baf7a; --size-4: #eda100;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --touch: #e8b52c; --touch-held: #5f5e59; --move: 208, 120, 232; --roc: #63cf3a; --axis-x: #ff6b6b; --axis-y: #e89a55; --axis-z: #c2c04a;
    --video: #7d8cff; --photo: #4f7ca8; --valid: #ff5c5c; --outside: #4a4a47;
    --home: #199e70; --away: #d95926; --transit: #f0efec;
    --size-1: #3987e5; --size-2: #d95926; --size-3: #199e70; --size-4: #c98500;
  }
}
:root[data-theme="dark"] {
  --touch: #e8b52c; --touch-held: #5f5e59; --move: 208, 120, 232; --roc: #63cf3a; --axis-x: #ff6b6b; --axis-y: #e89a55; --axis-z: #c2c04a;
  --video: #7d8cff; --photo: #4f7ca8; --valid: #ff5c5c; --outside: #4a4a47;
  --home: #199e70; --away: #d95926; --transit: #f0efec;
  --size-1: #3987e5; --size-2: #d95926; --size-3: #199e70; --size-4: #c98500;
}

.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: 4.4em 1fr }
.key-touch, .key-move { font-weight: var(--ds-weight-semibold) }
.key-touch::before, .key-move::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 3px }
.key-touch::before { background: var(--touch) } .key-move::before { background: rgb(var(--move)) }

/* The view. */
.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: 210px; 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) }
.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 .q { color: var(--ds-text-2) }
#chart { touch-action: pan-y; cursor: crosshair }

/* Views that are text and 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 h4 { margin: 6px 0 1px; font-size: 11px; font-weight: var(--ds-weight-semibold); color: var(--ds-text-2) }
.panel p { margin: 0 0 5px; font-size: 12px; line-height: 1.35 }
.panel .q { color: var(--ds-text-2) }
.panel table { width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 1.3 }
.panel th, .panel td { padding: 2px 6px 2px 0; border-top: var(--ds-line) solid var(--ds-rule); vertical-align: top; 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 }

/* The model: the three questions side by side, then whether the approach held up, then the team's draft. */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-4); align-items: start }
.ask { padding-top: 4px; border-top: var(--ds-line-strong) solid var(--ds-rule-strong); min-width: 0 }
.reach { display: inline-block; padding: 0 5px; margin-inline-start: 4px; font-size: 10.5px; font-weight: var(--ds-weight-regular); border: var(--ds-line) solid var(--ds-rule-strong) }
.bars { display: grid; grid-template-columns: minmax(0, max-content) minmax(40px, 1fr) max-content; gap: 1px 6px; align-items: center; margin: 1px 0 4px; font-size: 11px }
.bars i { display: block; height: 9px; background: var(--ds-text-2) }
.bars .tn { font-variant-numeric: tabular-nums; text-align: end }
.bars .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.life { display: block; width: 100%; max-width: 420px; height: auto; color: var(--ds-text) }
.two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--ds-space-4); margin-top: var(--ds-space-3); align-items: start }
.flow-line { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0 5px; font-size: 11px }
.flow-line span { padding: 1px 6px; border: var(--ds-line) solid var(--ds-rule) }
.flow-line span.on { border-color: var(--ds-rule-strong); font-weight: var(--ds-weight-semibold) }
.flow-line em { font-style: normal; color: var(--ds-text-2); align-self: center }

/* The pack. */
.pack-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ds-space-4); align-items: start }
.pack-grid figure { margin: 0 0 6px }
.pack-grid img { display: block; width: 100%; height: auto; border-top: var(--ds-line-strong) solid var(--ds-rule-strong) }
.pack-grid figcaption { font-size: 11px; color: var(--ds-text-2); padding-top: 2px }
.replay-box { position: relative; border-top: var(--ds-line-strong) solid var(--ds-rule-strong); padding-top: 4px }
#replay { display: block; width: 100%; height: 300px; background: var(--ds-surface) }
.rule-fig { margin: var(--ds-space-3) 0 0; border-top: var(--ds-line-strong) solid var(--ds-rule-strong); padding-top: 4px }
.rule-fig canvas { display: block; width: 100%; height: clamp(120px, 22vh, 240px) }
.rule-fig figcaption { font-size: 11px; color: var(--ds-text-2); padding-top: 2px }
.replay-bar { display: flex; align-items: center; gap: 6px; font-size: 11px; margin: 2px 0 6px }
.replay-bar input[type=range] { flex: 1; min-width: 0; margin: 0; accent-color: var(--ds-ink) }
.replay-bar output { font-family: var(--ds-font-mono); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap }
.replay-bar .ds-icon-button { width: 22px; height: 22px; min-width: 22px; min-height: 22px; padding: 0 }
table.rows { width: auto }
table.rows td, table.rows th { font-family: var(--ds-font-mono); font-size: 10.5px; padding-inline-end: 8px; white-space: nowrap }
table.rows th { font-family: inherit; color: var(--ds-text-2) }
.lights { display: inline-grid; grid-template-columns: repeat(6, 8px); gap: 1px; vertical-align: -1px }
.lights i { width: 8px; height: 8px; border: var(--ds-line) solid var(--ds-rule) }
.lights i.on { background: var(--touch); border-color: var(--touch) }

/* 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, html.embed .view-tools { display: none !important }
html.embed .panel { padding-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: 78vh }
  .view-tools { top: 40px; left: var(--ds-space-2); right: auto; flex-wrap: wrap }
  .panel { padding-top: 70px }
  .three, .two, .pack-grid { grid-template-columns: minmax(0, 1fr) }
  .pick { max-width: 140px }
}