/* The page stays a 90s desktop; the drawings are little museum exhibits. */
.exhibit { border: 2px solid #000; background: #c0c0c0; box-shadow: 3px 3px #000; margin: 16px 0 24px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); min-width: 0; }
.exhibit-tools { grid-column: 1 / -1; display: flex; gap: 8px; align-items: end; padding: 8px; border-bottom: 2px solid #000; }
.exhibit-tools label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-weight: bold; }
.exhibit-tools select { width: 100%; min-width: 0; min-height: 44px; font: bold 16px var(--ui); }
.exhibit .exhibit-stage { position: relative; min-width: 0; height: min(62vh, 560px); max-width: none; margin: 0; padding: 12px; border: 0; background: #fff; overflow: hidden; }
.exhibit .exhibit-stage > svg { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; }
.exhibit-stage figcaption { display: none; }
.exhibit-label { position: absolute; padding: 5px 9px; background: #fff9c4; border: 2px solid #000; box-shadow: 2px 2px #000; font: bold 14px var(--ui); max-width: calc(100% - 24px); pointer-events: none; }
.exhibit .hot.on > circle:not(.exhibit-hit), .exhibit .spot.on > circle:not(.exhibit-hit) { stroke: #c00; stroke-width: 3; }
.exhibit .hot:focus-visible { outline: 3px dotted #00f; outline-offset: 4px; }
.exhibit-detail { display: flex; flex-direction: column; min-width: 0; background: #fff; border-left: 2px solid #000; }
.exhibit-heading { font: bold 19px var(--ui); color: #fff; background: #000080; padding: 12px; }
.exhibit-copy { padding: 0 12px 12px; overflow-y: auto; flex: 1; min-height: 0; font-size: 16px; line-height: 1.5; }
.exhibit-copy .cite { white-space: normal; max-width: 100%; }
.exhibit-nav { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px; border-top: 2px solid #000; background: #c0c0c0; }
.exhibit-nav span { font: bold 13px var(--ui); white-space: nowrap; }
.exhibit-nav .b95 { min-height: 44px; }
.exhibit-styles { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 5px; }
.exhibit-styles .b95 { padding: 5px 8px; min-height: 40px; flex: 1; font-size: 13px; }
.exhibit-speech { position: absolute; left: 14px; right: 14px; bottom: 58px; background: #fff; border: 2px solid #000; box-shadow: 3px 3px #000; padding: 10px; font: italic 16px Georgia, serif; z-index: 3; }
.exhibit-speech[hidden] { display: none; }
.exhibit-blueprint .exhibit-stage { background: #12335b; background-image: linear-gradient(#ffffff10 1px, transparent 1px), linear-gradient(90deg, #ffffff10 1px, transparent 1px); background-size: 20px 20px; }
.exhibit-blueprint .exhibit-stage svg rect, .exhibit-blueprint .exhibit-stage svg path, .exhibit-blueprint .exhibit-stage svg line, .exhibit-blueprint .exhibit-stage svg ellipse { fill: none; stroke: #c7e9ff; stroke-width: 1.5; }
.exhibit-blueprint .exhibit-stage svg text { fill: #fff; }
.exhibit-blueprint .exhibit-stage .hot circle, .exhibit-blueprint .exhibit-stage .spot circle { fill: #ffd400; stroke: #000; }
.exhibit-blueprint .exhibit-stage .hot text, .exhibit-blueprint .exhibit-stage .spot text { fill: #000; }
.exhibit-modal { position: fixed; inset: 8px; z-index: 1000; background: #c0c0c0; border: 3px outset #ddd; display: flex; flex-direction: column; padding: 6px; box-shadow: 0 0 0 12px #000b; }
.exhibit-modal-head { display: flex; justify-content: space-between; align-items: center; background: #000080; color: #fff; padding: 6px 10px; gap: 8px; }
.exhibit-modal .exhibit { flex: 1; min-height: 0; margin: 8px 0 0; }
.exhibit-modal .exhibit-stage { height: auto; min-height: 0; }
body.exhibit-open { overflow: hidden; }
@media (max-width: 760px) {
 .exhibit { display: flex; flex-direction: column; }
 .exhibit-tools { padding: 6px; gap: 5px; }
 .exhibit-tools label { font-size: 12px; gap: 5px; }
 .exhibit-tools [data-expand] { padding: 7px; font-size: 13px; }
 .exhibit .exhibit-stage { height: min(44svh, 390px); padding: 8px; flex: none; }
 .exhibit-detail { border-left: 0; border-top: 2px solid #000; }
 .exhibit-heading { padding: 7px 10px; font-size: 17px; }
 .exhibit-copy { max-height: 23svh; padding: 0 10px 8px; font-size: 15px; }
 .exhibit-copy p { margin: 8px 0; }
 .exhibit-nav { padding: 5px; }
 .exhibit-nav .b95 { padding: 5px 12px; }
 .exhibit-styles .b95 { min-height: 44px; }
 .exhibit-modal { inset: 3px 3px calc(3px + env(safe-area-inset-bottom)); padding: 3px; }
 .exhibit-modal .exhibit { overflow: auto; }
 .exhibit-modal .exhibit-stage { height: min(43svh, 480px); }
 .exhibit-modal .exhibit-copy { max-height: 22svh; }
}

.exhibit-note { margin: 0; padding: 0 12px 8px; font: 12px var(--ui); color: #555; }
.exhibit-stage [data-feature].feature-selected rect, .exhibit-stage [data-feature].feature-selected path, .exhibit-stage [data-feature].feature-selected line { stroke: #d00050; stroke-width: var(--feature-width, 3px); }
.exhibit-ink .exhibit-stage { background: #faf0d6; }
.exhibit-ink .exhibit-stage svg > rect:first-of-type { fill: #f5e8bf; }
.exhibit-ink .exhibit-stage svg rect, .exhibit-ink .exhibit-stage svg path { stroke-linejoin: round; stroke-linecap: round; }
.exhibit-ink .exhibit-stage svg circle[fill="#2e8b3e"] { fill: #769165; stroke: #2d4125; stroke-width: 2; stroke-dasharray: 2 1; }

body.exhibit-open .pop { z-index: 1100; }
@media (max-width: 760px) {
 .exhibit .exhibit-stage { height: min(40svh, 360px); }
 .exhibit-copy { height: 22svh; max-height: none; flex: none; }
 .exhibit-modal .exhibit-copy { height: 22svh; }
}

.exhibit-stage .exhibit-hit { fill: transparent !important; stroke: none !important; pointer-events: all; }
@media (max-width: 760px) {
 .exhibit-modal .exhibit-stage { height: min(38svh, 480px); padding: 8px; }
 .exhibit-modal .exhibit-styles, .exhibit-modal [data-expand] { display: none; }
 .exhibit-modal .exhibit-copy { height: 20svh; }
}

/* the selected part is ringed and named in the panel below; a floating label only covered other markers */
.exhibit-label { display: none !important; }