#bottom-review169 { position: absolute; inset-inline: 16px; inset-block-end: calc(var(--sheet) + 78px); z-index: 3;
  max-inline-size: 1100px; margin-inline: auto; color: #fff; direction: rtl; }
#bottom-review169 p { margin: 0; padding: 8px 12px; font-size: 12px; background: #292b2b; }
.bottom169-preview { block-size: 94px; border: 1px solid #fff8; pointer-events: none; }
.bottom169-controls { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #292b2b; }
.bottom169-controls button { min-block-size: 44px; padding-inline: 12px; border: 1px solid #fff5; border-radius: 4px;
  color: #fff; background: transparent; cursor: pointer; white-space: nowrap; }
.bottom169-controls button:disabled { opacity: .45; cursor: default; }
.bottom169-controls label { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 12px; }
.bottom169-controls input { min-inline-size: 60px; inline-size: 100%; block-size: 44px; accent-color: #E11E25; direction: ltr; }
.bottom169-controls :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) {
  #bottom-review169 { inset-inline: 12px; inset-block-end: calc(var(--sheet) + 78px); }
  .bottom169-controls { flex-wrap: wrap; gap: 4px; }
  .bottom169-controls button { flex: 1; padding-inline: 8px; font-size: 12px; }
  .bottom169-controls label { flex-basis: 100%; }
  #bottom-review169 p { font-size: 11px; padding-inline: 8px; }
}
/* Components share the contextual Door popup with the gauge, outside main-row layout. */
@container stage (min-width: 761px) {
  :root[data-variant="a"] .proto-swing { display: grid; place-items: center;
    inline-size: 44px; block-size: 44px; padding: 0; border-radius: 50%;
    color: var(--stage-ink); background: var(--stage-glass);
    border: 1px solid var(--stage-line); backdrop-filter: blur(12px); cursor: pointer; }
  :root[data-variant="a"] .proto-swing svg { inline-size: 16px; block-size: 16px; }
  :root[data-variant="a"] .proto-swing[aria-pressed="true"] { background: #fff; color: var(--ink); }
}
.door-controls { display: none; position: absolute; inset-inline-end: calc(100% + 8px);
  inset-block-start: 0; z-index: 4; inline-size: max-content; max-inline-size: calc(100vw - 32px);
  align-items: center; flex-wrap: wrap; gap: 8px; }
:root[data-gauge] .door-controls { display: flex; }
:root[data-variant="a"] .door-controls .swing { display: flex; position: static; inset: auto;
  animation: none; min-block-size: 52px; padding: 3px 6px; box-sizing: border-box; }
:root[data-variant="a"] .door-controls .swing input { inline-size: 104px; min-block-size: 44px; }
.door-gauge-label, .component-title { position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.component-dock { display: flex; align-items: center; }
#component-views { display: flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; color: var(--stage-muted); background: var(--stage-glass);
  border: 1px solid var(--stage-line); backdrop-filter: blur(12px); }
#component-views[hidden] { display: none; }
#component-views button { min-inline-size: 44px; min-block-size: 44px;
  padding-inline: 8px; border: 0; border-radius: 999px; background: transparent;
  color: var(--stage-muted); font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; }
#component-views button[aria-pressed="true"] { background: #fff; color: var(--ink); }
#component-views button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  :root[data-variant="a"] .view-dock { position: relative; align-items: center; gap: 10px; }
  :root[data-variant="a"] .door-controls { inset-inline-end: auto; inset-inline-start: 0;
    inset-block-start: auto; inset-block-end: calc(100% + 12px); max-inline-size: 100%; }
  :root[data-variant="a"] .view-tools { position: relative; inset-inline-end: auto;
    inset-block-end: auto; flex: none; }
  :root[data-variant="a"] #views { flex-wrap: wrap; justify-content: center;
    max-inline-size: calc(100% - 108px); }
  :root[data-variant="a"] #views button { min-block-size: 44px; padding-inline: 7.5px; }
  :root[data-variant="a"] .proto-swing,
  :root[data-variant="a"] #wall-toggle { inline-size: 44px; block-size: 44px; flex: none; }
  :root[data-variant="a"] .proto-swing svg,
  :root[data-variant="a"] #wall-toggle svg { inline-size: 16px; block-size: 16px; }
  :root[data-variant="a"] .swing { inset-inline-end: auto; inset-inline-start: 52px;
    inset-block-end: calc(100% + 12px); min-block-size: 44px; box-sizing: border-box; }
  :root[data-variant="a"] .swing input { min-block-size: 44px; }
}
/* Narrow screens keep all four views in one row, with Door/Walls above its left edge. */
@media (max-width: 389px) {
  :root[data-variant="a"] .view-dock { gap: 0; }
  :root[data-variant="a"] #views { flex-wrap: nowrap; max-inline-size: 100%; }
  :root[data-variant="a"] .proto-swing { position: absolute; inset-inline-end: 0;
    inset-block-end: calc(100% + 60px); }
  :root[data-variant="a"] .view-tools { position: absolute; inset-inline-end: 0;
    inset-block-end: calc(100% + 8px); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-variant="a"][data-gauge] .swing { animation: none; }
}