/* Figure: anatomy-style plate around the Blender render, with registered SVG overlays. */
.plate {
  margin: 0;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--lift);
  padding: 14px 16px 12px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  width: min-content; /* the drawing sets the width; captions wrap */
  max-width: 100%;
}
.plate-head,
.plate-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.plate-foot { text-transform: none; letter-spacing: 0.02em; align-items: baseline; min-height: 2.6em; }
.plate-foot .hint { text-transform: uppercase; letter-spacing: 0.06em; max-width: 46%; }
.plate-foot .readout {
  color: var(--strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: pre-line;
}

.plate-art {
  position: relative;
  height: calc(var(--stage-h) - 92px);
  aspect-ratio: var(--art-ratio, 1800 / 2357);
  max-width: 100%;
}
.plate[data-instrument] .plate-art { height: calc(var(--stage-h) - 150px); }
.plate-art > img,
.plate-art > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plate-art > img { transition: opacity 600ms var(--ease-in-out); }
.plate-art > img[data-off] { opacity: 0; }
.plate-art > svg { overflow: visible; pointer-events: none; }
.plate-art .floor {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Overlay marks (in render px; strokes stay thin on screen). */
.ov-line { fill: none; stroke: var(--line-strong); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ov-line.major { stroke: #8a8a8f; }
.ov-label { font-family: var(--mono); font-weight: 500; fill: #8a8a8f; letter-spacing: 0.04em; }
.ov-zone { fill: var(--dmp); fill-opacity: 0.13; stroke: none; transition: fill-opacity 300ms ease; }
.ov-zone-edge { fill: none; stroke: var(--dmp); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ov-zone-ghost { fill: none; stroke: var(--dmp); stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 200ms ease; }
.ov-beam { fill: none; stroke: var(--dmp); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.ov-guide { fill: none; stroke: var(--dmp); stroke-width: 1; stroke-dasharray: 1 4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ov-dot { fill: var(--dmp); }
.ov-person { fill: var(--hi); transition: opacity 300ms ease; }
.ov-zone-group,
.ov-person-group { transition: opacity 300ms ease; }
.ov-zone-group[data-off],
.ov-person-group[data-off] { opacity: 0; }

.ov-led { transition: opacity 70ms linear; opacity: 0; }
.ov-led[data-on] { opacity: 1; }

.ov-water { opacity: 0; transition: opacity 400ms ease; }
.ov-water[data-on] { opacity: 1; }
.ov-water .fill { fill: var(--dmp); fill-opacity: 0.16; }
.ov-water .swirl { fill: none; stroke: var(--dmp); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Detail inset: the plate seen close, with the same LED. */
.inset {
  position: absolute;
  right: 0;
  top: 0;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--lift);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top right;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.inset[data-on] { opacity: 1; transform: none; }
.inset-zoom { position: absolute; aspect-ratio: 1000 / 1301; }
.inset-zoom img,
.inset-zoom svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.inset span {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font: 500 9.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Presence timer: a ruler strip with a carriage. */
.instrument { display: none; }
.plate[data-instrument] .instrument { display: block; }
.instrument svg { display: block; width: 0; min-width: 100%; height: auto; overflow: visible; }
.instrument .strip { fill: #fff; stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.instrument .tick { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.instrument .tick.major { stroke: #8a8a8f; }
.instrument .lbl { font: 500 12.5px/1 var(--mono); fill: var(--muted); letter-spacing: 0.04em; }
.instrument .fill { fill: var(--dmp); fill-opacity: 0.22; }
.instrument .fill[data-over] { fill: var(--dmp); fill-opacity: 0.4; }
.instrument .limit { stroke: var(--led); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.instrument .limit-lbl { font: 600 12.5px/1 var(--mono); fill: var(--led); letter-spacing: 0.04em; }
.instrument .carriage { fill: var(--hi); }
.instrument .limit-glow { fill: var(--led); opacity: 0; transition: opacity 300ms ease; }
.instrument .limit-glow[data-on] { opacity: 0.16; transition: opacity 200ms var(--ease-out); }

@media (max-width: 760px) {
  .plate { width: 100%; padding: 12px 12px 10px; }
  .plate-art { height: auto; width: 100%; }
  .plate[data-instrument] .plate-art { height: auto; }
  .inset span { display: none; }
  .instrument .lbl, .instrument .limit-lbl { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .plate-art > img { transition: opacity 200ms ease; }
}

/* Water gauge: a graduated cylinder that fills to the flush volume. */
.gauge {
  position: absolute;
  left: 2%;
  top: 4%;
  width: 20%;
  aspect-ratio: 150 / 300;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.gauge[data-on] { opacity: 1; }
.gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gauge .g-tube,
.gauge .g-lip,
.gauge .g-foot { fill: #fff; stroke: var(--line-strong); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gauge .g-water { fill: var(--dmp); fill-opacity: 0.24; }
.gauge .g-surface { stroke: var(--dmp); stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: opacity 150ms ease; }
.gauge .g-tick { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gauge .g-tick.major { stroke: #8a8a8f; }
.gauge .g-lbl { font: 500 12px/1 var(--mono); fill: var(--muted); }
.gauge .g-cap { font: 500 11px/1 var(--mono); fill: var(--muted); letter-spacing: 0.08em; }
.gauge .g-target line { stroke: var(--dmp); stroke-width: 1.2; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.gauge .g-target path { fill: var(--dmp); }
.gauge .g-num { font: 700 38px/1 var(--sans); fill: var(--dmp); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transform-box: fill-box; transform-origin: center; }
.gauge[data-reached] .g-num { animation: g-pulse 320ms var(--ease-out); }
@keyframes g-pulse { 50% { transform: scale(1.06); } }
.gauge .g-unit { font: 500 13px/1 var(--mono); fill: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 760px) {
  .gauge { width: 21%; }
}
@media (prefers-reduced-motion: reduce) {
  .gauge[data-reached] .g-num { animation: none; }
  .inset { transform: none; }
}