/* The device ecosystems page, on the open house's workbench. The colors here are data, so they keep one place: devices, attention, activity, context, and the purple and red of the team's 2012 labeler.
   Categorical slots and their dark steps are the validated reference set (scripts in the dataviz method); attending, tacking and darting were validated together, all pairs, in both modes. */
:root {
  --dev-l: #2a78d6; --dev-p: #eb6834; --dev-t: #1baf7a;
  --att-a: #6250d6; --att-t: #e87ba4; --att-d: #eda100;
  --act-1: #2a78d6; --act-2: #eb6834; --act-3: #1baf7a; --act-4: #eda100; --act-5: #e87ba4; --act-6: #008300; --act-7: #6250d6; --act-8: #e34948; --act-other: #b9b8b3;
  --place-home: #1baf7a; --place-work: #2a78d6; --place-other: #eb6834; --place-transit: #17171a; --place-unclear: #8f8e89; --place-none: #e9e8e3;
  --moved: 128, 0, 128; --valid: 255, 0, 0;
  --arc: 64, 0, 200; --arc-dim: 128, 0, 200; --arc-on: 255, 0, 0;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --dev-l: #3987e5; --dev-p: #d95926; --dev-t: #199e70;
    --att-a: #9085e9; --att-t: #d55181; --att-d: #c98500;
    --act-1: #3987e5; --act-2: #d95926; --act-3: #199e70; --act-4: #c98500; --act-5: #d55181; --act-6: #008300; --act-7: #9085e9; --act-8: #e66767; --act-other: #6d6c67;
    --place-home: #199e70; --place-work: #3987e5; --place-other: #d95926; --place-transit: #f0efec; --place-unclear: #8f8e89; --place-none: #2a2a29;
    --moved: 208, 120, 232; --valid: 255, 70, 70;
    --arc: 150, 130, 255; --arc-dim: 170, 130, 255; --arc-on: 255, 90, 90;
  }
}
:root[data-theme="dark"] {
  --dev-l: #3987e5; --dev-p: #d95926; --dev-t: #199e70;
  --att-a: #9085e9; --att-t: #d55181; --att-d: #c98500;
  --act-1: #3987e5; --act-2: #d95926; --act-3: #199e70; --act-4: #c98500; --act-5: #d55181; --act-6: #008300; --act-7: #9085e9; --act-8: #e66767; --act-other: #6d6c67;
  --place-home: #199e70; --place-work: #3987e5; --place-other: #d95926; --place-transit: #f0efec; --place-unclear: #8f8e89; --place-none: #2a2a29;
  --moved: 208, 120, 232; --valid: 255, 70, 70;
  --arc: 150, 130, 255; --arc-dim: 170, 130, 255; --arc-on: 255, 90, 90;
}

.w-a, .w-t, .w-d { font-weight: var(--ds-weight-semibold) }
.w-a::before, .w-t::before, .w-d::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 3px }
.w-a::before { background: var(--att-a) } .w-t::before { background: var(--att-t) } .w-d::before { background: var(--att-d) }

.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) }
.quiet { color: var(--ds-text-2) }
.moments button { grid-template-columns: 7.2em 1fr }

/* 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: 170px; 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) }
.day-name { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 8.2em; text-align: center }
.thresh { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px }
.thresh input { width: 90px; margin: 0; accent-color: var(--ds-ink) }
.thresh output { font-family: var(--ds-font-mono); font-size: 11px; min-width: 3.4em; font-variant-numeric: tabular-nums }
.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 }
#chart { touch-action: pan-y; cursor: crosshair }

/* Views that are 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 .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-space-4) }
.panel .cols--wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) }
.panel section + section { margin-top: var(--ds-space-3) }
.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 }
.panel .q { color: var(--ds-text-2) }
.panel button.row { all: unset; cursor: pointer; text-decoration: underline; text-decoration-color: var(--ds-rule); text-underline-offset: 2px }
.panel tr.miss td { color: var(--ds-text-2) }

/* The deck's table of the model, with the three modes' shares in it. */
.grid2 { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); border-top: var(--ds-line-strong) solid var(--ds-rule-strong); margin-bottom: 6px; font-size: 11.5px }
.grid2 > * { padding: 3px 6px; border-bottom: var(--ds-line) solid var(--ds-rule) }
.grid2 .h { color: var(--ds-text-2) }
.grid2 .cell { display: flex; align-items: center; gap: 8px; min-width: 0 }
.grid2 .wide { grid-column: span 2 }
.grid2 svg { flex: none; width: 34px; height: 14px }
.grid2 b { font-weight: var(--ds-weight-semibold) }
.grid2 .pct { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-family: var(--ds-font-mono) }

/* Stacked bars, in the three modes. */
.bar { display: flex; height: 12px; gap: 1px; min-width: 60px; background: var(--ds-surface-sunk) }
.bar i { display: block; height: 100% }
.bar .a { background: var(--att-a) } .bar .t { background: var(--att-t) } .bar .d { background: var(--att-d) }
.bars th { white-space: nowrap; width: 1%; padding-inline-end: 8px }
.bars td { width: auto }
.key { display: inline-flex; gap: 10px; flex-wrap: wrap; color: var(--ds-text-2); font-size: 11px }
.key i { display: inline-block; width: 9px; height: 9px; margin-inline-end: 3px; vertical-align: -1px }

/* The pilot's small tables sit on the canvas's right. */
.pilot-side { position: absolute; top: 36px; right: var(--ds-space-2); bottom: var(--ds-space-2); width: 330px; overflow: auto; padding: 4px 8px; background: color-mix(in srgb, var(--ds-surface) 92%, transparent); border-inline-start: var(--ds-line) solid var(--ds-rule); font-size: 11.5px; line-height: 1.35 }
.pilot-side h3 { margin: 4px 0 2px; font-size: 12px; font-weight: var(--ds-weight-semibold) }
.pilot-side p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.35 }
.pilot-side table { width: 100%; border-collapse: collapse; font-size: 11px }
.pilot-side th, .pilot-side td { padding: 1px 3px; border-top: var(--ds-line) solid var(--ds-rule); text-align: start; font-weight: var(--ds-weight-regular) }
.pilot-side .n { text-align: end; font-variant-numeric: tabular-nums }
.heat { min-width: 26px; text-align: center !important; font-variant-numeric: tabular-nums }
.things-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 }
.things-note p { margin: 0 0 4px; font-size: 11px; line-height: 1.35 }
.things-note table { width: 100%; border-collapse: collapse }
.things-note th, .things-note td { padding: 0 4px 0 0; font-weight: var(--ds-weight-regular); text-align: start; border-top: var(--ds-line) solid var(--ds-rule) }
.things-note .n { text-align: end; font-variant-numeric: tabular-nums }

/* The tooltip reads a bucket as the deck's data examples list it, with categories in place of names. */
.tip table { border-collapse: collapse; margin-top: 2px }
.tip th, .tip td { padding: 0 4px 0 0; font-weight: var(--ds-weight-regular); text-align: start; white-space: nowrap }
.tip td:last-child { white-space: normal }
.tip .n { font-variant-numeric: tabular-nums; text-align: end }
.tip .dev { font-weight: var(--ds-weight-semibold); border-top: var(--ds-line) solid var(--ds-rule) }
.tip .quiet { color: var(--ds-text-2) }
.training-note { position: absolute; top: 36px; left: var(--ds-space-2); width: 290px; 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 }
.training-note p { margin: 0 0 4px; font-size: 11px; line-height: 1.35 }
.training-note p:last-child { margin-bottom: 0 }
.training-note h3 { margin: 0 0 2px; font-size: 12px; font-weight: var(--ds-weight-semibold) }

/* 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 .things-note, html.embed .training-note { top: var(--ds-space-2) }
html.embed .pilot-side { 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 }
  .panel .cols, .panel .cols--wide { grid-template-columns: minmax(0, 1fr) }
  .pilot-side, .things-note, .training-note { position: static; width: auto }
  .thresh input { width: 70px }
  /* A view with notes keeps its canvas tall, and the notes follow it down the page. */
  .work .ds-view--fill:has(.pilot-side, .things-note, .training-note) { height: auto }
  .work .ds-view--fill:has(.pilot-side, .things-note, .training-note) #chart { position: relative; flex: none; height: 66vh }
  .grid2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) }
  .grid2 .cell { flex-wrap: wrap; gap: 0 4px }
  .grid2 .pct { margin-inline-start: 0 }
}
/* Totals: the bars of change, and the places table. */
.delta { display: inline-block; height: 9px; vertical-align: -1px }
.delta.up { background: var(--dev-l) } .delta.down { background: var(--act-other) }
.panel table.places th[scope="row"] { white-space: nowrap; }