/* The aging in place page: the open house's workbench, with the study's model of activity beside the view, and an instrument's labels and card over it. */
.slides-link { font-size: 11px; min-height: 22px; padding: 0 8px; vertical-align: 1px }
.explain blockquote.tj { margin: 0 0 6px; padding: 0 0 0 var(--ds-space-2); border-left: var(--ds-line) solid var(--ds-rule-strong) }
.explain blockquote.tj p { margin: 0 }
.lens-lead { margin-bottom: 2px !important }
.moments .t { min-width: 6.5em }
.explain .survives th { font-weight: var(--ds-weight-semibold); white-space: nowrap; vertical-align: top; padding-inline-end: var(--ds-space-3) }
.side .ds-table.survives :is(th, td) { height: auto; padding-block: 1px; vertical-align: top }
.explain .survives { margin-bottom: 6px }
.quiet { color: var(--ds-text-2) }
.sensors { font-size: 11px }
.box-note { margin: 2px 0 0; font-size: 11px; line-height: 14px }
.right .ds-table.sensors :is(th, td) { height: 17px; line-height: 16px; border-bottom: 0; vertical-align: middle; font-size: 11px; white-space: nowrap; padding-inline-end: var(--ds-space-2) }
.sensors thead th { color: var(--ds-text-2) }
.sensors .box { font-family: var(--ds-font-mono); color: var(--ds-text-2) }
.right .ds-table.sensors .reads { white-space: normal; padding-inline-end: 0 }
.sensors .sw { width: 8px; height: 8px; margin-inline-end: 4px; vertical-align: 0 }

/* The rows that drive the view: a row's name is a button, and the row lights when it is what is chosen. */
.pick { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: start; white-space: nowrap }
.pick:hover { text-decoration: underline }
.pick:disabled { cursor: default; text-decoration: none }
tr.on > :is(td, th) { background: var(--ds-hover) }

/* The work pane: the view, and beside it the instruments and the model of activity. */
.work.aging { grid-template-columns: minmax(0, 1fr) minmax(300px, 336px); grid-template-rows: minmax(0, 1fr) }
.right { min-width: 0; min-height: 0; overflow: auto; border-left: var(--ds-line) solid var(--ds-rule); background: var(--ds-surface) }
.model-body { padding-top: 0 }
.model { width: 100%; table-layout: fixed; margin-bottom: 4px; font-size: 11px }
.right .ds-table.model :is(td, th) { height: 16px; padding: 0; line-height: 16px; border-bottom: 0; font-size: 11px; color: var(--ds-text) }
.model col.dot { width: 13px }
.model col.note { width: 62px }
.model .instrument-head { padding: 0; text-align: center; font-weight: var(--ds-weight-regular); font-size: 9px; font-family: var(--ds-font-mono); color: var(--ds-text-2); line-height: 1 }
.model .instrument-head span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg) }
.right .ds-table.model thead th { height: auto; border-bottom: 0 }
.right .ds-table.model .group th { height: 17px; padding-top: 2px; font-weight: var(--ds-weight-semibold); text-align: start; border-bottom: var(--ds-line) solid var(--ds-rule) }
.model td.mark { text-align: center }
.model td.mark i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 1px }
.model td.mark i.kinect { background: var(--sensor-kinect) }
.model td.mark i.grideye { background: var(--sensor-grideye) }
.model td.mark i.spider { background: var(--sensor-spider) }
.model th.name { font-weight: var(--ds-weight-regular); text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: 4px }
.model td.state { color: var(--ds-text-2); font-size: 10px; text-align: end; white-space: nowrap }
.model tr.none th.name, .model tr.none td.state { color: var(--ds-text-2) }
.count { margin: 0 0 4px; font-weight: var(--ds-weight-semibold) }
.right .ds-table.kinds :is(th, td) { height: auto; padding-block: 1px; vertical-align: top; border-bottom: 0; font-size: 11px; color: var(--ds-text) }
.kinds th { font-weight: var(--ds-weight-semibold); text-align: start; padding-inline-end: var(--ds-space-2); width: 5.5em }
.right .ds-table.kinds td.icon { padding-inline-end: var(--ds-space-2) }
.kinds img { display: block; mix-blend-mode: multiply }
:root[data-theme="dark"] .kinds img { mix-blend-mode: screen; filter: invert(1) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kinds img { mix-blend-mode: screen; filter: invert(1) } }
.kinds .no { color: var(--ds-text-2) }

/* Over the picture: the placement and fields of view at the foot, an instrument's card at the other corner, where it hides the least of the house, and the labels, which follow the instruments. */
.stage { left: var(--ds-space-2); bottom: var(--ds-space-2); gap: var(--ds-space-2); padding-inline: var(--ds-space-2) 2px; font-size: var(--ds-type-ui) }
.stage .speed { font: inherit; 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); max-width: 16em }
.card { right: var(--ds-space-2); bottom: var(--ds-space-2); display: block; width: min(360px, calc(100% - 2 * var(--ds-space-2))); max-height: calc(100% - 90px); overflow: auto; padding: var(--ds-space-2); font-size: var(--ds-type-ui); line-height: var(--ds-leading-ui) }
.card[hidden] { display: none }
.card h3 { margin: 0 20px 4px 0; font-size: var(--ds-type-ui); font-weight: var(--ds-weight-semibold) }
.card dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--ds-space-2); margin: 0 }
.card dt { font-weight: var(--ds-weight-semibold) }
.card dd { margin: 0 }
.card .close { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--ds-text-2); cursor: pointer; font: inherit; line-height: 1 }
.card .close:hover { color: var(--ds-text) }
.tags { position: absolute; inset: 0; overflow: hidden; pointer-events: none }
.tag { position: absolute; left: 0; top: 0; padding: 0 4px 0 3px; border: 0; border-left: 3px solid; border-radius: 0; background: color-mix(in srgb, var(--ds-surface) 88%, transparent); color: var(--ds-text); font: 500 11px/15px var(--ds-font-text); white-space: nowrap; pointer-events: auto; cursor: pointer }
.tag.kinect { border-color: var(--sensor-kinect) }
.tag.grideye { border-color: var(--sensor-grideye) }
.tag.spider { border-color: var(--sensor-spider) }
.tag.on { background: var(--ds-ink); color: var(--ds-on-ink) }
.tag[hidden] { display: none }
#scene { cursor: grab }
#scene.dragging { cursor: grabbing }

/* In a slide: the picture alone (the slide says the rest). */
[data-embed] :is(.ds-skip, .ds-topbar, .ds-statusbar, #side, #main > [role=separator], .right, .over) { display: none !important }
html[data-embed][data-ds-page="tool"] > body:has(> .ds-split) { grid-template-rows: minmax(0, 1fr) }
html[data-embed][data-ds-page="tool"] > body > .ds-split { grid-template-columns: minmax(0, 1fr) !important }
html[data-embed] { scrollbar-gutter: auto; overflow: hidden }
html[data-embed][data-ds-page="tool"] > body { height: 100vh; overflow: hidden }
html[data-embed][data-ds-page="tool"] > body > .ds-split { display: block; height: 100vh; overflow: hidden }
html[data-embed] .ds-split > .work.aging { display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden }
html[data-embed] .work.aging #view { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto }

/* A narrower window: the instruments and the model of activity go under the view. */
@media (640px <= width <= 1180px) {
  .work.aging { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 42% }
  .right { border-left: 0; border-top: var(--ds-line) solid var(--ds-rule) }
}
/* A phone: the panes stack and the page scrolls; the picture first, then its instruments and model of activity. */
@media (width <= 639px) {
  .work.aging { display: block }
  .right { border-left: 0; overflow: visible }
  .card { left: 4px; right: 4px; bottom: 4px; width: auto; max-height: 62% }
  .stage .speed { max-width: 10em }
  .slides-link { padding: 0 6px }
}