/* Office socialization: the panes of the view. Sherlock's colors are its own and live in social.js, and traces are gray. */
.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) }
.explain .also { margin: var(--ds-space-2) 0 0 }
.moments .t { white-space: nowrap; color: var(--ds-text-2) }
.moments button[aria-current="true"] { background: var(--ds-hover) }
.tj { margin: 0 0 6px; padding: 0 0 0 var(--ds-space-2); border-left: 2px solid var(--ds-rule-strong); font: inherit }
.tj p { margin: 0 }
.quiet { color: var(--ds-text-2) }
.note { margin: 4px 0 0; font-size: 11px; line-height: 1.32; color: var(--ds-text-2) }

.pane { position: absolute; inset: 0; min-width: 0; min-height: 0; overflow: hidden; background: var(--ds-surface) }
.pane[hidden] { display: none }
.pane canvas { display: block; width: 100%; height: 100%; touch-action: none }
.view-tools { z-index: 3 }
.view-tools .ds-icon-button { width: 24px; height: 24px; min-height: 24px; padding: 0 }
.panel-tools { position: absolute; z-index: 3; left: 80px; bottom: 2px }
.panel-tools .ds-icon-button { width: 20px; height: 20px; min-height: 20px; padding: 0 }
.tiny { font: inherit; font-size: 11px; height: 20px; 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) }

/* Shingles and shapes. */
#pane-shingles { display: grid; grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr) }
.shingle-top { position: relative; min-height: 0 }
.shingle-low { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr); min-height: 0; border-top: var(--ds-line) solid var(--ds-rule) }
.shingle-tools { position: absolute; z-index: 3; left: 8px; top: 4px; gap: 6px; font-size: 11px; padding-inline: 6px }
.shingle-tools input { width: 220px; margin: 0; accent-color: var(--ds-ink); height: 14px }
.shingle-tools output { font-variant-numeric: tabular-nums; min-width: 34px }

/* Filters over the eight weeks. */
.legend-tools { position: absolute; z-index: 3; left: 72px; bottom: 2px; gap: 8px; padding-inline: 6px; font-size: 11px; flex-wrap: wrap }
.legend-tools .ds-checkbox { font-size: 11px; min-height: 16px }

/* Sound: three lanes that share the height. */
#pane-sound { overflow: hidden }
.sound-grid { display: grid; grid-template-rows: minmax(0, 1.45fr) minmax(0, .78fr) minmax(0, 1fr); height: 100% }
.lane { display: grid; grid-template-rows: auto minmax(0, 1fr); margin: 0; min-height: 0; min-width: 0; border-bottom: var(--ds-line) solid var(--ds-rule); padding: 2px var(--ds-space-2) 0 }
.lane figcaption, .plan-box figcaption, .map-box figcaption { font-size: 11px; line-height: 1.3 }
.under-tools { padding-inline-end: 224px }
.lane b, .plan-box b, .map-box b { font-weight: var(--ds-weight-semibold) }
.bands-row { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-rows: minmax(0, 1fr); min-height: 0; min-width: 0 }
.bands-side { display: grid; grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 0; min-width: 0 }
.lane[data-on] { background: var(--ds-hover) }

/* The places. */
.places-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: minmax(0, .62fr) minmax(0, 1.38fr); height: 100%; gap: 0 var(--ds-space-3); padding: 2px var(--ds-space-2) }
.places-table { grid-row: 1 / -1; min-height: 0; overflow: auto }
.places-table table { width: 100%; font-size: 11px; line-height: 1.1; border-collapse: collapse }
.places-table th, .places-table td { height: auto; padding: 2px 6px 2px 0; border-bottom: var(--ds-line) solid var(--ds-rule); text-align: left; vertical-align: top; font-weight: 400; white-space: normal }
.places-table thead th { color: var(--ds-text-2); position: sticky; top: 0; background: var(--ds-surface) }
.places-table tbody tr { cursor: pointer }
.places-table tbody tr:hover { background: var(--ds-hover) }
.places-table tr.picked td { font-weight: var(--ds-weight-semibold) }
.places-table tr.set-aside td { color: var(--ds-text-2) }
.places-table td.n { font-variant-numeric: tabular-nums; white-space: nowrap }
.plan-box, .map-box { display: grid; grid-template-rows: auto minmax(0, 1fr); margin: 0; min-width: 0; min-height: 0 }
#plan { display: block; width: 100%; height: 100%; font-family: var(--ds-font-text) }
#plan .wing { fill: var(--ds-surface-sunk); stroke: var(--ds-text-2); stroke-width: 3 }
#plan .spot { fill: var(--ds-ink); stroke: var(--ds-surface); stroke-width: 3 }
#plan text { font-size: 24px; fill: var(--ds-text-2) }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline: 4px 2px }
.map { position: relative; min-height: 0; margin: 2px 0 18px 18px; border-left: 2px solid var(--ds-text); border-bottom: 2px solid var(--ds-text) }
.map .cloud { position: absolute; transform: translate(-50%, -50%); cursor: pointer }
.map .cloud img { display: block; width: 100%; height: auto }
.map .tag { position: absolute; top: 96%; left: 50%; transform: translateX(-50%); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--ds-text); pointer-events: none; white-space: nowrap }
.map .cloud.picked .tag { font-weight: var(--ds-weight-semibold); text-decoration: underline }
.map .axis { position: absolute; font-size: 10px; color: var(--ds-text-2); white-space: nowrap }
.map .axis.x0 { left: 0; bottom: -15px }
.map .axis.x1 { right: 0; bottom: -15px }
.map .axis.xm { left: 50%; bottom: -15px; transform: translateX(-50%) }
.map .axis.y0 { left: -15px; bottom: 0; transform: rotate(-90deg); transform-origin: left bottom }
.map .axis.y1 { left: -15px; top: 0; transform: translateX(0) rotate(-90deg) translateX(-100%); transform-origin: left top }
.map .reading { position: absolute; font-size: 10px; line-height: 1.25; color: var(--ds-text-2); max-width: 150px }
[data-theme="dark"] .map .cloud img { filter: brightness(1.15) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map .cloud img { filter: brightness(1.15) } }

/* The instrument. */
#pane-instrument { overflow: auto; display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--ds-space-4); padding: 8px var(--ds-space-3) var(--ds-space-3); font-size: 11px; line-height: 1.32; align-content: start }
#pane-instrument > div:last-child { padding-top: 32px }
#pane-instrument h3 { margin: var(--ds-space-3) 0 2px; font-size: 11px; font-weight: var(--ds-weight-semibold) }
#pane-instrument h3:first-child { margin-top: 0 }
#pane-instrument p { margin: 0 0 4px; font-size: inherit; line-height: inherit }
#pane-instrument figure { margin: 0 }
#pane-instrument figcaption { color: var(--ds-text-2); margin-top: 2px }
#pane-instrument .jar { display: block; width: 62%; margin: 0 auto 2px; color: var(--ds-text-2) }
#pane-instrument .base { display: block; width: 100%; background: #fff }
#pane-instrument ol, #pane-instrument ul { margin: 0 0 4px; padding-inline-start: 16px }
.path { display: grid; grid-template-columns: max-content max-content 1fr; gap: 2px 6px; align-items: baseline }
.path .arrow { color: var(--ds-text-2) }
.fields { border-collapse: collapse; width: 100%; font-size: inherit }
.fields th, .fields td { padding: 1px 6px 1px 0; border-bottom: var(--ds-line) solid var(--ds-rule); text-align: left; font-weight: 400; vertical-align: top }
.fields thead th { color: var(--ds-text-2) }
.fields td.n { font-variant-numeric: tabular-nums; white-space: nowrap }
.schedule { display: block; width: 100%; height: 34px }

/* 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 { display: none !important }
[data-embed] .ds-split { display: block !important; height: 100vh !important; min-height: 0 }
[data-embed] .work { height: 100vh }
[data-embed] .under-tools { padding-inline-end: 0 }
[data-embed] #pane-instrument > div:last-child { padding-top: 0 }

/* A phone: the panes stack as v2 stacks them, and each lane keeps a height it can be read at. */
@media (width <= 639px) {
  .work .ds-view--fill { display: flex; flex-direction: column; aspect-ratio: auto; height: auto; min-height: 0 }
  .pane { position: relative; inset: auto; overflow: visible }
  .view-tools { position: static; order: -1; align-self: flex-end; margin: 2px; flex-wrap: wrap }
  #pane-sherlock { height: 150vw; min-height: 600px; margin-bottom: 30px }
  #pane-weeks { height: 150vw; min-height: 560px }
  #pane-day { height: 250vw; min-height: 900px }
  #pane-notes { height: 310vw; min-height: 1180px }
  #pane-shingles { display: block }
  .shingle-top { height: 80vw }
  .shingle-low { display: block }
  #shingle-curve { height: 40vw }
  #shapes { height: 70vw }
  .shingle-tools input { width: 120px }
  .sound-grid { display: block; height: auto }
  .lane { display: block; padding-bottom: 6px }
  .under-tools { padding-inline-end: 0 }
  #rounds { height: 86vw }
  #device { height: 48vw }
  .bands-row { display: block }
  #bands { height: 48vw }
  .bands-side { display: block }
  #wheel { height: 56vw }
  #october { height: 30vw }
  .places-grid { display: block; height: auto }
  .places-table { overflow: visible }
  .plan-box { height: 56vw }
  .map-box { height: 96vw }
  #pane-instrument { display: block; overflow: visible }
  #pane-instrument > div { margin-bottom: var(--ds-space-3) }
  .panel-tools { left: 2px; bottom: -28px }
  .legend-tools { position: static }
}