/* DOM chrome soft-absorption when hierarchy machine UI is open (presentation only) */
.hero-shell[data-hero-machine-ui="1"] .seat-stack,
.hero-shell[data-hero-machine-ui="1"] .hero-inspection,
.hero-shell[data-hero-machine-ui="1"] .hero-controls .control-row,
.hero-shell[data-hero-machine-ui="1"] .spatial-parts {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.hero-shell[data-hero-machine-ui="1"] .seat-stack.is-machine-absorbed,
.hero-shell[data-hero-machine-ui="1"] .hero-inspection.is-machine-absorbed {
  position: absolute;
}

/* Retired lock-only camera presets (visual only — do not change accessible name) */
[data-camera][data-lock-only="1"] {
  opacity: 0.55;
  text-decoration: line-through;
}

/* V3.5 — Far-environment chrome lives outside .hero-shell (never machine chrome) */
.far-environment {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  justify-content: center;
  align-items: center;
  padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, #f5f2ec 88%, transparent);
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  pointer-events: auto;
}
.far-environment[data-far-outside-machine="1"] {
  /* Explicit contract marker: not a seat/machine region */
}
.far-environment a {
  color: rgba(43, 45, 42, 0.55);
  text-decoration: none;
}
.far-environment a:hover,
.far-environment a:focus-visible {
  color: rgba(43, 45, 42, 0.9);
  text-decoration: underline;
}
/* Machine-ui absorption must never target far-environment (it is outside .hero-shell) */
.hero-shell[data-hero-machine-ui="1"] ~ .far-environment,
.far-environment {
  opacity: 1;
  visibility: visible;
}

/* Settings shell */
.hero-settings-shell {
  margin: 0 0 0.75rem;
  padding: 0 0.65rem 0.5rem;
}
.hero-settings-button {
  font: inherit;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.hero-settings-panel {
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.35rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 0.85rem;
}
.hero-settings-panel__kicker {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hero-settings-panel__note {
  margin: 0 0 0.5rem;
  opacity: 0.85;
}
.hero-settings-panel__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.hero-settings-panel__row button {
  font: inherit;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, Canvas 88%, transparent);
  color: inherit;
  cursor: pointer;
}

.hero-settings-panel__scale {
  align-items: center;
  gap: 0.5rem;
}
.hero-settings-panel__scale label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.9;
}
.hero-settings-panel__scale input[type="range"] {
  width: 100%;
}
.hero-settings-panel [data-settings-scale-value] {
  min-width: 3rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Presentation-only root scale hook */
html {
  font-size: calc(100% * var(--ui-scale, 1));
}

.hero-settings-panel__lang {
  align-items: center;
  gap: 0.5rem;
}
.hero-settings-panel__lang label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.9;
}
.hero-settings-panel__lang select {
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, Canvas 88%, transparent);
  color: inherit;
}
.hero-settings-panel__lang-note {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Dedicated Settings diagnostic surface. It must not share the seat-stack
   stacking context, because that layer is intentionally occupied by machine
   presentation. The menu still opens this panel through the Settings button. */
.hero-settings-mount {
  position: absolute;
  top: 78px;
  right: clamp(18px, 3vw, 36px);
  z-index: 12;
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}
.hero-settings-mount .hero-settings-shell {
  pointer-events: auto;
  margin: 0;
  padding: 0;
}
.hero-settings-mount .hero-settings-panel {
  max-height: min(72vh, 640px);
  overflow: auto;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 44px rgba(50,48,42,.16);
  backdrop-filter: blur(18px) saturate(115%);
}
.hero-settings-mount .hero-settings-button {
  display: none;
}
html[data-spatial-responsive="compact"] .hero-settings-mount {
  top: calc(68px + env(safe-area-inset-top, 0px));
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
  width: min(320px, calc(100vw - 32px));
}

html[data-spatial-responsive="phone"] .hero-settings-mount {
  top: calc(64px + env(safe-area-inset-top, 0px));
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
  width: calc(100vw - 24px);
}

.hero-settings-panel__semantic {
  margin: 0.65rem 0;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.hero-settings-panel__semantic-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0.45rem;
}
.hero-settings-panel__semantic-list {
  display: grid;
  gap: 0.25rem;
}
.hero-settings-panel__semantic-list button {
  font: inherit;
  text-align: left;
  padding: 0.25rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.hero-settings-panel__semantic-list button[aria-pressed="true"] {
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor;
}
.hero-settings-panel__semantic-detail {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.45rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, Canvas 86%, transparent);
}
.hero-settings-panel__semantic-detail strong,
.hero-settings-panel__semantic-detail span,
.hero-settings-panel__semantic-detail small {
  overflow-wrap: anywhere;
}
.hero-settings-panel__semantic-detail strong { font-size: 0.78rem; }
.hero-settings-panel__semantic-detail span,
.hero-settings-panel__semantic-detail small { font-size: 0.68rem; opacity: 0.75; }
.hero-settings-panel__semantic-detail ul {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.1rem;
  font-size: 0.68rem;
}
@media(max-width:520px){
  .hero-settings-panel__semantic-grid {
    grid-template-columns: 1fr;
  }
}