/* Measuring collaboration: the panes of the view, the team's sensor matrix, the plan and the lanes. Band colours are data (the team's R script's, kept), and live in collab.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) }

.pane { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: auto; background: var(--ds-surface) }
.pane[hidden] { display: none }
.view-tools { z-index: 3 }
.view-tools .ds-icon-button { width: 24px; height: 24px; min-height: 24px; padding: 0 }
.replay { z-index: 3 }
.replay[hidden] { display: none }

/* The plan. */
#pane-office { overflow: hidden; display: grid; grid-template-columns: 286px minmax(0, 1fr); padding-bottom: 36px }
.office-side { min-height: 0; overflow: auto; padding: 2px var(--ds-space-2); border-inline-end: var(--ds-line) solid var(--ds-rule) }
.instruments tbody tr { cursor: pointer }
.instruments tbody tr:hover { background: var(--ds-hover) }
.instruments tbody tr.picked td { font-weight: var(--ds-weight-semibold) }
.plan-box { min-width: 0; min-height: 0; padding-top: 2px }
#plan { display: block; width: 100%; height: 100%; font-family: var(--ds-font-text) }
#plan .wall { fill: none; stroke: var(--ds-text-2); stroke-width: 5 }
#plan .partition { stroke: var(--ds-text-2); stroke-width: 4; fill: none }
#plan .door { fill: none; stroke: var(--ds-text-2); stroke-width: 1.5; stroke-dasharray: 4 3 }
#plan .door-leaf { stroke: var(--ds-text-2); stroke-width: 4 }
#plan .furn { fill: var(--ds-surface-sunk); stroke: var(--ds-rule); stroke-width: 1 }
#plan .zone { font-size: 18px; fill: var(--ds-text-2) }
#plan .inst { cursor: pointer; outline: none }
#plan .inst:focus-visible .mark { stroke: var(--ds-ink); stroke-width: 3 }
#plan .inst text { font-size: 18px; fill: var(--ds-text); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--ds-surface); stroke-width: 4px }
#plan .inst.lost .mark { fill: var(--ds-surface); stroke-dasharray: 2 2 }
#plan .inst .hit { fill: transparent }
#plan .inst.picked text { font-weight: var(--ds-weight-semibold) }
#plan .inst.picked .mark { stroke-width: 3 }
#plan .fov { fill-opacity: .16; stroke: none }
#plan .inst.picked .fov { fill-opacity: .3 }
#plan .ring { fill: none; stroke-width: 1.5 }
.pick-note { margin: var(--ds-space-2) 0 0; font-size: 11px; line-height: 1.32; color: var(--ds-text) }
/* The photograph beside its caption, small enough that the pane has no need to scroll. */
.pick-photo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ds-space-2); margin: var(--ds-space-2) 0 0 }
.pick-photo[hidden] { display: none }
.pick-photo img { display: block; width: auto; height: 84px }
.pick-photo figcaption { font-size: 10px; line-height: 1.3; color: var(--ds-text-2) }

/* 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] .office-side { display: none !important }
[data-embed] .ds-split { display: block !important; height: 100vh !important; min-height: 0 }
[data-embed] .work { height: 100vh }
[data-embed] #pane-office { display: block }
[data-embed] .plan-box { height: 100% }
[data-embed] .columns, [data-embed] .notes { padding-top: var(--ds-space-3) }
[data-embed] [data-plan=off] #view { display: none }
[data-embed] [data-plan=off] .work { display: block }

/* The lanes. */
.graphs { position: relative }
.graphs-body { max-height: none; overflow: hidden }
/* The lanes' controls have a strip of their own, between the report's lanes and the log's. */
.lane-tools { position: absolute; z-index: 2; left: calc(var(--lane-x, 124px) + 4px); top: calc(var(--lane-y, 0px) + 3px); display: flex; align-items: center; gap: var(--ds-space-3); padding: 0 var(--ds-space-2); font-size: 11px; white-space: nowrap; border: var(--ds-line) solid var(--ds-rule); border-radius: var(--ds-radius-act); background: color-mix(in srgb, var(--ds-surface) 86%, transparent) }
.lane-tools .ds-checkbox { font-size: 11px }
.lane-tools .ds-icon-button { width: 20px; height: 20px; min-height: 20px; padding: 0; border-color: transparent; background: transparent }
.lane-scale { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums }
.lane-scale i { display: inline-block; width: 72px; height: 9px; border: 1px solid var(--ds-rule) }
.lane-tools .ev { display: inline-block; width: 8px; height: 8px; margin-inline: 3px 2px }

/* The matrix. Rows are set to the room there is (--row), down to what can be read. */
#pane-method { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 0; align-items: start }
.matrix-wrap { min-width: 0; padding: 2px 0 2px 2px }
.matrix { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: var(--mfont, 11px); line-height: 1 }
.matrix th, .matrix td { padding: 0 3px; height: var(--row, 13px); border: 1px solid var(--ds-rule); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; text-align: left }
.matrix thead th { height: 74px; vertical-align: bottom; background: var(--ds-surface-sunk); font-weight: var(--ds-weight-semibold); padding-bottom: 3px; white-space: normal; line-height: 1.1 }
.matrix thead th.s { padding: 0 0 3px; text-align: center; cursor: pointer }
.matrix thead th.s span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; white-space: nowrap; font-weight: 400 }
.matrix thead th.s.on { background: var(--ds-ink); color: var(--ds-on-ink) }
.matrix .g { cursor: pointer; vertical-align: top; padding-top: 1px; white-space: normal; line-height: 1.05; background: var(--ds-surface) }
.matrix .g:hover { background: var(--ds-hover) }
.matrix .g.on { background: var(--ds-ink); color: var(--ds-on-ink) }
.matrix td.m { padding: 0; text-align: center }
.matrix td.m.x { background: var(--ds-text-2) }
.matrix tr.dim td.a, .matrix tr.dim td.m { opacity: .34 }
.matrix tr.lit td.a { font-weight: var(--ds-weight-semibold) }
.matrix tr.lit td.m.x { background: var(--ds-ink) }
.matrix td.m.x.hot { background: #d3461a !important }
.matrix tbody tr:hover td.a { background: var(--ds-hover) }
.matrix .count td { font-variant-numeric: tabular-nums; text-align: center; padding: 0; font-size: 10px; background: var(--ds-surface-sunk) }
.matrix .count td:first-child { text-align: right; padding-inline-end: 4px }

.notes { min-width: 0; padding: 30px var(--ds-space-3) var(--ds-space-3); font-size: 11px; line-height: 1.32 }
.notes h3 { margin: var(--ds-space-3) 0 2px; font-size: 11px; font-weight: var(--ds-weight-semibold) }
.notes h3:first-child { margin-top: 0 }
.notes p { margin: 0 0 4px; font-size: inherit; line-height: inherit }
.notes table { border-collapse: collapse; width: 100%; font-size: inherit }
.notes th, .notes td { padding: 1px 4px 1px 0; text-align: left; font-weight: 400; border-bottom: var(--ds-line) solid var(--ds-rule); vertical-align: top }
.notes thead th { color: var(--ds-text-2); white-space: nowrap }
.notes td.n, .notes th.n { text-align: right; font-variant-numeric: tabular-nums; padding-inline-end: 6px }
.notes .src { color: var(--ds-text-2) }
.tally { display: grid; grid-template-columns: max-content 1fr 24px; gap: 1px 6px; align-items: center }
.tally i { display: block; height: 9px; background: var(--ds-text-2) }
.tally i.top { background: var(--ds-ink) }
.tally .n { text-align: right; font-variant-numeric: tabular-nums }

/* Platform and students. */
.columns { display: grid; gap: var(--ds-space-4); padding: 30px var(--ds-space-3) var(--ds-space-3); font-size: 11px; line-height: 1.32; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start }
.columns .wide { grid-column: 1 / -1 }
.columns h3 { margin: var(--ds-space-3) 0 2px; font-size: 11px; font-weight: var(--ds-weight-semibold) }
.columns section > h3:first-child { margin-top: 0 }
.columns p { margin: 0 0 4px; font-size: inherit; line-height: inherit }
.columns .src { color: var(--ds-text-2) }
.columns table { border-collapse: collapse; width: 100%; font-size: inherit }
.columns th, .columns td { padding: 1px 6px 1px 0; text-align: left; font-weight: 400; border-bottom: var(--ds-line) solid var(--ds-rule); vertical-align: top }
.columns thead th { color: var(--ds-text-2) }
.columns td.n, .columns th.n { text-align: right; font-variant-numeric: tabular-nums }
.columns.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.deck-fig { margin: 2px 0 6px }
.deck-fig button { all: unset; display: block; cursor: zoom-in; width: 100% }
.deck-fig button:focus-visible { outline: 2px solid var(--ds-ink) }
.deck-fig img { display: block; width: 100%; height: auto; background: #fff; border: var(--ds-line) solid var(--ds-rule) }
.deck-fig figcaption { margin-top: 2px }
.enlarge { width: min(92vw, 1500px); max-width: none; padding: var(--ds-space-2); background: #fff; border: var(--ds-line) solid var(--ds-rule-strong); cursor: zoom-out }
.enlarge img { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain }
.enlarge .ds-icon-button { position: absolute; top: 4px; right: 4px; background: #fff; color: #111 }
#demo-plane { display: block; width: 100%; aspect-ratio: 1; cursor: crosshair; touch-action: none; border: var(--ds-line) solid var(--ds-rule-strong) }
.winner { font-weight: var(--ds-weight-semibold) }
.seat-table { display: block; width: 100%; max-width: 150px; aspect-ratio: 1 }
.seat-table circle { fill: var(--ds-surface); stroke: var(--ds-text-2) }
.seat-table .talk { fill: var(--ds-ink); stroke: var(--ds-ink) }
.seat-table line { stroke: var(--ds-text-2) }
.seat-table .board { fill: none; stroke: var(--ds-rule-strong) }
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3) }
.models figure { margin: 0 }
.models .strip { display: block; width: 100%; height: auto; margin-top: 2px; background: #fff }
.rebuild { margin: 0 0 3px; border-left: 2px solid var(--ds-rule-strong); padding-left: 6px }
.rebuild p { margin: 0 0 2px }
.rebuild b { font-weight: var(--ds-weight-semibold) }
.models button { all: unset; display: block; width: 100%; cursor: pointer; padding: 2px; border-radius: var(--ds-radius-act) }
.models button:hover { background: var(--ds-hover) }
.models button:focus-visible { outline: 2px solid var(--ds-ink) }
.models button.on { background: var(--ds-hover); box-shadow: inset 0 0 0 1px var(--ds-rule-strong) }
.sliders { display: grid; grid-template-columns: 56px 1fr 34px; gap: 2px 6px; align-items: center }
.sliders input { width: 100%; margin: 0; accent-color: var(--ds-ink); height: 14px }
.sliders .n { text-align: right; font-variant-numeric: tabular-nums }
.scores td.win { font-weight: var(--ds-weight-semibold) }
#students-timeline { display: block; width: 100%; height: 118px }
.legend-inline i { display: inline-block; width: 9px; height: 9px; margin-inline: 8px 3px; vertical-align: -1px }
.legend-inline i:first-child { margin-inline-start: 0 }
.tree { display: grid; grid-template-columns: max-content 1fr; gap: 1px var(--ds-space-3) }
.tree dt { color: var(--ds-text-2) }
.tree dd { margin: 0 }
.quiet { color: var(--ds-text-2) }
blockquote.line { margin: 0 0 4px; padding: 0; font: inherit }

/* A phone: the panes stack as v2 stacks them; the matrix and columns take the width and scroll with the page. */
@media (width <= 639px) {
  .work .ds-view--fill { display: flex; flex-direction: column; aspect-ratio: auto; height: auto; min-height: 0 }
  .pane { position: static; overflow: visible }
  .view-tools { position: static; order: -1; align-self: flex-end; margin: 2px }
  .lane-tools { position: static; flex-wrap: wrap; gap: 2px var(--ds-space-3); border-width: 0 0 var(--ds-line); border-radius: 0; white-space: normal }
  .matrix-wrap { overflow-x: auto; padding-inline-end: 2px }
  .matrix { min-width: 680px }
  #pane-office { display: flex; flex-direction: column-reverse; overflow: visible; padding-bottom: 0 }
  .plan-box { height: 56vw; padding-bottom: 0 }
  .office-side { border: 0; overflow: visible }
  #pane-method { display: block }
  .matrix { font-size: 10px }
  .matrix col.g1 { width: 72px }
  .columns { display: block; padding-top: 34px }
  .columns > section { margin-bottom: var(--ds-space-4) }
  .models { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .notes { padding-top: var(--ds-space-3) }
  .notes thead th { white-space: normal }
  .notes td.n, .notes th.n { padding-inline-end: 2px }
  .replay { position: sticky; order: 1; bottom: 0; left: auto; right: auto; margin: 2px }
}