/* HX2-IVORY-UI-177: apply the owner's UI concept with the original icon anchors.
   Owner177b adds frost;177c matches proportions;177e lightens hover and the wall card. */
:root[data-variant="a"] {
  --control-surface177: rgb(247 245 240 / .86);
  --control-edge177: #DFDBD4;
  --control-ink177: #292A29;
  --control-muted177: #55534F;
  --control-shadow177: inset 0 1px 0 rgb(255 255 255 / .65),
    0 4px 12px rgb(28 25 21 / .08), 0 1px 2px rgb(28 25 21 / .05);
}
:root[data-variant="a"] #views,
:root[data-variant="a"] #component-views,
:root[data-variant="a"] #wall-toggle,
:root[data-variant="a"] #wall-tweaker,
:root[data-variant="a"] .proto-swing,
:root[data-variant="a"] .door-controls .swing {
  color: var(--control-ink177);
  background: var(--control-surface177);
  border-color: rgb(255 255 255 / .62);
  box-shadow: var(--control-shadow177);
  backdrop-filter: blur(12px) saturate(.85);
  -webkit-backdrop-filter: blur(12px) saturate(.85);
}
:root[data-variant="a"] #wall-tweaker {
  display: grid;
  grid-template-columns: max-content max-content 22px;
  column-gap: 8px;
  border-radius: 18px;
  color-scheme: light;
}
/* Share columns across rows so different Hebrew label widths cannot offset controls. */
:root[data-variant="a"] #wall-tweaker label {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
}
:root[data-variant="a"] #wall-tweaker select {
  color: var(--control-ink177);
  background: rgb(255 254 252 / .58);
  border-color: rgb(41 42 41 / .18);
  border-radius: 999px;
}
:root[data-variant="a"] #wall-tweaker select:hover {
  background: rgb(255 254 252 / .82);
}
:root[data-variant="a"] #wall-tweaker select option {
  color: var(--control-ink177); background: #F7F5F0;
}
:root[data-variant="a"] #wall-tweaker input[type="color"] {
  border-color: #C4BFB6;
  background: rgb(255 254 252 / .58);
}
:root[data-variant="a"] #wall-tweaker :is(select, input):focus-visible {
  outline: 2px solid var(--control-ink177); outline-offset: 2px;
}
:root[data-variant="a"] #views button,
:root[data-variant="a"] #component-views button {
  color: var(--control-muted177);
}
:root[data-variant="a"] #views .view-thumb {
  background: var(--control-ink177);
  box-shadow: none;
}
:root[data-variant="a"] #views button[aria-pressed="true"],
:root[data-variant="a"] #component-views button[aria-pressed="true"] {
  color: #FFF;
}
:root[data-variant="a"] #component-views button[aria-pressed="true"] {
  background: var(--control-ink177);
}
:root[data-variant="a"] #wall-toggle[aria-expanded="true"],
:root[data-variant="a"] .proto-swing[aria-pressed="true"] {
  color: var(--control-ink177);
  background: rgb(255 254 252 / .92);
  border-color: var(--accent);
}
:root[data-variant="a"] .gauge-direction176 {
  color: var(--control-ink177);
}
:root[data-variant="a"] .swing input::-webkit-slider-runnable-track {
  background: linear-gradient(to top, var(--accent) var(--p, 0%), #C9C5BE var(--p, 0%));
}
:root[data-variant="a"] .swing input::-moz-range-track {
  background: #C9C5BE;
}
:root[data-variant="a"] .swing input::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgb(28 25 21 / .12);
}
:root[data-variant="a"] .swing input::-moz-range-thumb {
  box-shadow: 0 1px 3px rgb(28 25 21 / .12);
}
/* Use a dark inset focus ring on pale surfaces; it remains visible over either scene. */
:root[data-variant="a"] #views button:focus-visible,
:root[data-variant="a"] #component-views button:focus-visible,
:root[data-variant="a"] #wall-toggle:focus-visible,
:root[data-variant="a"] .proto-swing:focus-visible {
  outline: 2px solid var(--control-ink177);
  outline-offset: -2px;
}
:root[data-variant="a"] #views button[aria-pressed="true"]:focus-visible,
:root[data-variant="a"] #component-views button[aria-pressed="true"]:focus-visible {
  outline-color: #FFF;
}
/* Owner: remove only the black outline around the opening gauge. */
:root[data-variant="a"] .swing input:focus-visible { outline: none; }
/* Retain the sheet grid, existing schematic icons and selected radio indicators. */
:root[data-variant="a"] .optrow,
:root[data-variant="a"] .fdemo {
  background: rgb(255 255 255 / .20);
  border-color: var(--control-edge177);
  box-shadow: none;
}
:root[data-variant="a"] .optrow[aria-checked="true"],
:root[data-variant="a"] .fdemo[aria-pressed="true"] {
  background: #FBF9F5;
  border-color: #FFF;
  box-shadow: 0 4px 12px rgb(40 35 28 / .06);
}
:root[data-variant="a"] .optrow[aria-checked="true"]::before,
:root[data-variant="a"] .fdemo[aria-pressed="true"]::before {
  content: none;
}
:root[data-variant="a"] .cta-stack {
  background: var(--control-ink177);
  box-shadow: 0 5px 14px rgb(28 25 21 / .12);
}
/* Paint shorter shells inside the existing hit areas, so the icons do not shift.
   At the reference width: POV140x40, camera287x44; buttons retain44px targets. */
:root[data-variant="a"] #component-views {
  position: relative;
}
:root[data-variant="a"] #component-views button {
  position: relative; z-index: 1; isolation: isolate;
  padding-inline: 12.5px;
}
:root[data-variant="a"] #views,
:root[data-variant="a"] #component-views {
  isolation: isolate;
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root[data-variant="a"] #views::before,
:root[data-variant="a"] #component-views::before {
  content: ""; position: absolute; z-index: -1;
  box-sizing: border-box; inset-inline: -1px; inset-block: -1px;
  border: 1px solid rgb(255 255 255 / .62); border-radius: inherit;
  background: var(--control-surface177); box-shadow: var(--control-shadow177);
  backdrop-filter: blur(12px) saturate(.85);
  -webkit-backdrop-filter: blur(12px) saturate(.85);
  pointer-events: none;
}
:root[data-variant="a"] #component-views::before { inset-block: 5px; }
:root[data-variant="a"] #component-views button::before {
  content: ""; position: absolute; z-index: -1; inset-inline: 0; inset-block: 6px;
  border-radius: inherit; pointer-events: none;
}
:root[data-variant="a"] #component-views button[aria-pressed="true"] {
  background: transparent;
}
:root[data-variant="a"] #component-views button[aria-pressed="true"]::before {
  background: var(--control-ink177);
}
:root[data-variant="a"] #component-views button:focus-visible { outline-offset: -6px; }
:root[data-variant="a"] #views button::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  border-radius: inherit; pointer-events: none;
}
/* Some touch-capable browsers still dispatch hover without matching (hover:hover).
   Keep the label and its floating surface in the same unconditional hover state. */
:root[data-variant="a"] #views button::before,
:root[data-variant="a"] #component-views button:not([aria-pressed="true"])::before {
  background: rgb(41 42 41 / .03);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), 0 1px 3px rgb(28 25 21 / .025);
  opacity: 0; transform: translateY(1px);
  transition: opacity .16s ease-out, transform .16s ease-out;
}
:root[data-variant="a"] #views button:hover:not([aria-pressed="true"]):not(:disabled),
:root[data-variant="a"] #component-views button:hover:not([aria-pressed="true"]):not(:disabled) {
  color: var(--control-ink177); background: transparent;
}
:root[data-variant="a"] #views button:hover:not([aria-pressed="true"]):not(:disabled)::before,
:root[data-variant="a"] #component-views button:hover:not([aria-pressed="true"]):not(:disabled)::before {
  opacity: 1; transform: translateY(-1px);
}
:root[data-variant="a"] #views button:hover:not([aria-pressed="true"]):not(:disabled):focus-visible,
:root[data-variant="a"] #component-views button:hover:not([aria-pressed="true"]):not(:disabled):focus-visible {
  outline-color: var(--control-ink177);
}
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  :root[data-variant="a"] #views::before { inset-block: 3px; }
  :root[data-variant="a"] #views .view-thumb { clip-path: inset(4px 0 round 999px); }
  :root[data-variant="a"] #views button::before {
    inset-block: 4px;
  }
  :root[data-variant="a"] #views button:focus-visible { outline-offset: -4px; }
}
@media (hover: hover) {
  :root[data-variant="a"] #wall-toggle:hover,
  :root[data-variant="a"] .proto-swing:hover {
    color: var(--control-ink177);
    background: rgb(255 254 252 / .92);
  }
  :root[data-variant="a"] .optrow:not([aria-checked="true"]):hover,
  :root[data-variant="a"] .fdemo:not([aria-pressed="true"]):hover {
    background: rgb(255 255 255 / .42);
    border-color: #BBB6AE;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-variant="a"] #views button::before,
  :root[data-variant="a"] #component-views button:not([aria-pressed="true"])::before {
    transition: none; transform: none;
  }
  :root[data-variant="a"] #views button:hover:not([aria-pressed="true"]):not(:disabled)::before,
  :root[data-variant="a"] #component-views button:hover:not([aria-pressed="true"]):not(:disabled)::before {
    transform: none;
  }
}