/* The shop's model: its layers' inks, in light and dark, and what floats over the picture. */
:root { --shop-floor:#7c8a7e; --shop-wall:#47544c; --shop-ceil:#8a93a6; --shop-open:#b4570e; --shop-bar:#8d4f1e; --shop-counter:#6f5a30; --shop-case:#a2395f; --shop-webcam:#1b6fc2; --shop-holder:#c4122e; --shop-photo:#6d5bd0; --shop-wash:#7a6f55 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shop-floor:#8d9c90; --shop-wall:#b8c4bc; --shop-ceil:#8f99ad; --shop-open:#ef9a5a; --shop-bar:#d59a63; --shop-counter:#c9b27a; --shop-case:#e88bb0; --shop-webcam:#6db3f2; --shop-holder:#ff6b7e; --shop-photo:#a99cf2; --shop-wash:#b5aa8d } }
:root[data-theme="dark"] { --shop-floor:#8d9c90; --shop-wall:#b8c4bc; --shop-ceil:#8f99ad; --shop-open:#ef9a5a; --shop-bar:#d59a63; --shop-counter:#c9b27a; --shop-case:#e88bb0; --shop-webcam:#6db3f2; --shop-holder:#ff6b7e; --shop-photo:#a99cf2; --shop-wash:#b5aa8d }

.slides-link { font-size: 11px; min-height: 22px; padding: 0 8px; vertical-align: 1px }
.moments .t { min-width: 6.2em }
.quiet { color: var(--ds-text-2) }
.explain .measures th { font-weight: var(--ds-weight-semibold); text-align: start; vertical-align: top; padding-inline-end: var(--ds-space-2); white-space: nowrap }
.side .ds-table.measures :is(th, td), .side .ds-table.misses :is(th, td) { height: auto; padding-block: 1px; vertical-align: top; border-bottom: var(--ds-line) solid var(--ds-rule) }
.explain .misses { width: 100%; margin-bottom: 4px }
.explain .misses :is(th, td) { font-variant-numeric: tabular-nums; padding-inline-end: var(--ds-space-2) }
.explain .misses thead th { font-weight: var(--ds-weight-regular); color: var(--ds-text-2); text-align: start }
.explain .misses tbody th { font-family: var(--ds-font-mono); font-weight: var(--ds-weight-regular) }
.explain .misses td:nth-child(3) { white-space: nowrap }
.explain .plain { margin: 0 0 6px; padding-inline-start: 14px }
.explain .plain li { margin-bottom: 3px }
#placed th { text-align: end; font-variant-numeric: tabular-nums }
.side .instruments { font-size: 11px; width: 100% }
.side .instruments :is(th, td) { height: 17px; line-height: 16px; border-bottom: 0; vertical-align: middle; white-space: nowrap; padding-inline-end: var(--ds-space-2); font-size: 11px }
.side .instruments td:nth-child(2) { white-space: normal; color: var(--ds-text-2) }
.side .instruments .state { text-align: end; padding-inline-end: 0 }
.state.established { color: var(--ds-text) }
.state.inferred { color: var(--ds-text-2) }
.state.unknown { color: var(--ds-text-2); font-style: italic }
.pick { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: var(--ds-weight-regular); cursor: pointer; text-align: start; white-space: nowrap }
.pick:hover { text-decoration: underline }
tr.on > :is(td, th) { background: var(--ds-hover) }

#view { background: var(--ds-bg); overflow: hidden }
.over.layers { top: var(--ds-space-2); left: var(--ds-space-2); display: block; max-width: 230px; padding: 3px 6px; font-size: 11px; line-height: 15px }
.over.layers label { display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap }
.over.layers input { flex: none; width: 12px; height: 12px; margin: 0 }
.over.layers i { flex: none; width: 10px; height: 3px }
.over.views { top: var(--ds-space-2); right: 96px; flex-wrap: wrap; font-size: 11px }
.over.views button { min-height: 0; height: 22px; padding: 0 6px; border: 0; border-radius: var(--ds-radius-act); background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap }
.over.views button:hover { background: var(--ds-hover) }
.over.views button[aria-pressed="true"] { background: var(--ds-ink); color: var(--ds-on-ink) }
.hud { position: absolute; left: var(--ds-space-2); bottom: var(--ds-space-2); right: 380px; margin: 0; font-size: 11px; color: var(--ds-text-2); pointer-events: none }
.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% - 60px); 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) }
.shop-canvas { cursor: grab }
.shop-canvas:active { cursor: grabbing }
.figure { margin: 4px 0 6px }
.figure img { display: block; width: 100%; height: auto; border: var(--ds-line) solid var(--ds-rule) }
.figure figcaption { font-size: 11px; color: var(--ds-text-2); margin-top: 2px }

@media (width <= 900px) { .over.views { right: var(--ds-space-2); top: auto; bottom: 36px; left: var(--ds-space-2) } .hud { display: none } .over.layers { max-height: 42%; overflow: auto } }
@media (width <= 639px) {
  .card { left: 4px; right: 4px; bottom: 4px; width: auto; max-height: 62% }
  .over.layers { display: none }
  .slides-link { padding: 0 6px }
}