/* ===================== ATMOSPHERE PANEL ===================== */
/* Chrome, tokens and open/close motion inherited 1:1 from .wear-panel (see
   styles.css); only the width and internal two-column grid differ. Loaded as a
   separate feature stylesheet, mirroring neva.css / world-select.css. */
.atmos-panel {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--panel-top);
  left: 64%;
  width: 70vw;
  max-height: calc(100vh - 240px);
  z-index: 11;
  padding: 36px 40px 32px;
  border-radius: var(--panel-radius);
  --wear-primary: rgba(243, 242, 238, 0.94);
  --wear-secondary: rgba(223, 222, 216, 0.8);
  --wear-muted: rgba(159, 159, 159, 0.62);
  background: var(--panel-glass);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border: none;
  box-shadow: var(--panel-shadow), var(--panel-highlight);
  color: var(--wear-primary);
  overflow: hidden;
  transform: translateX(-50%);
  transform-origin: top center;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
/* No scroll bar anywhere in a panel — every scrolling region here shows its
   overflow through an edge fade or the content itself, never through a bar. */
.atmos-panel,
.atmos-panel * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.atmos-panel::-webkit-scrollbar,
.atmos-panel *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.atmos-panel.hidden {
  opacity: 0;
  transform: translateX(-50%) scale(0.94) translateY(-10px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.3s;
}

/* header */
.atmos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 20px;
}
.atmos-title { display: flex; align-items: center; gap: 10px; }
.atmos-title__icon { display: inline-flex; color: var(--wear-secondary); }
.atmos-title__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.atmos-title__text {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.atmos-header__right { display: flex; align-items: center; gap: 12px; }
.atmos-mode-label,
.atmos-section-label {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wear-muted);
}
.atmos-section-label { padding: 12px 0 6px; }
.atmos-close { width: 34px; height: 34px; }
.atmos-close svg { width: 15px; height: 15px; }

/* segmented control (shared: mode + settings) */
.atmos-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
/* the selection is one pill that travels between the options, the same
   primitive as the top bar's .nav-active-indicator */
.atmos-seg__ink {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: var(--seg-w, 0);
  transform: translateX(var(--seg-x, 0));
  border-radius: 999px;
  background: rgb(111 111 111 / 20%);
  pointer-events: none;
  opacity: 0;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    width 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}
.atmos-seg__ink.is-ready { opacity: 1; }
/* first placement, and any re-measure, must not read as a slide */
.atmos-seg__ink.is-instant { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .atmos-seg__ink { transition: none; }
}
.atmos-seg__opt {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.2s ease,
    opacity 0.2s ease;
}
.atmos-seg__opt:hover { color: var(--wear-primary); }
/* the pill behind it carries the selected surface now */
.atmos-seg__opt.is-selected { background: transparent; color: var(--wear-primary); }
.atmos-seg__opt:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 1px;
}

/* tab bar */
.atmos-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* the primary bar trades the per-tab mark for one underline that travels,
   exactly as the Settings panel's .set-tabs__ink does */
.atmos-tabs--ink .atmos-tab.is-active::after { content: none; }
.atmos-tabs__ink {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--wear-primary);
  pointer-events: none;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.atmos-tabs__ink.is-instant { transition: none; }

@keyframes atmos-tab-in-right {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes atmos-tab-in-left {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: none; }
}
.atmos-enter--right { animation: atmos-tab-in-right 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.atmos-enter--left { animation: atmos-tab-in-left 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .atmos-enter--right,
  .atmos-enter--left { animation: none; }
  .atmos-tabs__ink { transition: none; }
}
.atmos-tab {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  padding: 12px 4px;
  transition: color 0.2s ease;
}
.atmos-tab:hover { color: var(--wear-secondary); }
.atmos-tab.is-active { color: var(--wear-primary); }
.atmos-tab.is-active::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--wear-primary);
}
.atmos-tab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
  border-radius: 8px;
}
.atmos-tabs[hidden] { display: none; }

/* tab-bar-row Back control + relocated title (shown in place of the tab bar while
   drilled in). Sits on the same baseline the primary tab bar occupied. */
.atmos-tabback-row {
  display: flex;
  align-items: center;
  padding: 0;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.atmos-tabback-row[hidden] { display: none; }
.atmos-tabback {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  padding: 12px 0;
  transition: color 0.2s ease;
}
.atmos-tabback:hover { color: var(--wear-primary); }
.atmos-tabback:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
  border-radius: 8px;
}
.atmos-tabback__chev { display: inline-flex; }
.atmos-tabback__chev svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.atmos-tabback__divider {
  align-self: center;
  width: 1px;
  height: 38px;
  margin: 0 24px;
  background: rgba(255, 255, 255, 0.07);
}
.atmos-tabback__titles { align-self: center; display: flex; flex-direction: column; gap: 2px; }
.atmos-tabback__title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.atmos-tabback__sub { font-size: 12px; font-weight: 300; color: var(--wear-muted); }

/* per-space tabs reuse the primary tab bar; bottom-aligned so the active
   underline lands on the row's rule, reading as one band with the title. */
.atmos-tabback__spaces {
  align-self: flex-end;
  margin: 0;
  border-bottom: none;
}

/* body grid — 50/50, ONE fixed height for all four tabs (no per-tab jump).
   The grid fills the content box and both columns stretch, so the artwork can
   stay put while the settings column scrolls inside itself. */
.atmos-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* an auto row would grow to the settings list and push the whole panel into
     scrolling; a 1fr row is bound by the body, so the column scrolls instead */
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  /* 360 is the height every tab shares, but it has to give way on a short
     window — as a floor it forced the whole panel to scroll instead */
  flex: 1 1 auto;
  height: 360px;
  min-height: 0;
  padding: 0;
  min-width: 0;
}
.atmos-body[hidden] { display: none; }

/* ambient visual column — artwork sits directly on the panel surface (no card),
   fills the full body height and fades softly at its edges. */
/* the 16px between the artwork and the caption is the caption's own margin, not
   a column gap, so it can collapse with the caption instead of staying behind */
.atmos-visual {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 0;
}
/* the artwork keeps its own size inside the left column and never reaches into
   the settings column; the negative inset only cancels the panel's side padding
   so nothing sits between the image and the panel's left border */
.atmos-visual__art-wrap {
  position: relative;
  /* shrinks with the column on a short window rather than pushing past it */
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 340px;
  margin-left: -40px;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
}
.atmos-visual__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  user-select: none;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 1;
  transition: opacity 400ms ease;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-composite: intersect;
}
/* Sound tab: the plate is a canvas the panel repaints, so object-fit does not
   apply — the drawing letterboxes itself and keeps the shared blend. The
   waveform runs the full width of that drawing, so the shared 48px side fade
   would eat its first and last peaks; only the top/bottom fade stays. */
.atmos-visual__art--viz {
  object-fit: fill;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.atmos-visual--waveform .atmos-visual__art-wrap {
  width: 115%;
  max-width: 115%;
  margin-top: -35px;
  margin-left: -45px;
}
.atmos-visual--ribbon .atmos-visual__art-wrap { margin-left: -7px; }

/* Visual tab: a bright duplicate of the plate, revealed only inside a band that
   travels across it. Because the reveal is the artwork's own alpha, the light
   runs along its lines and arcs instead of sliding over them as a flat sheen.
   The two edge gradients are the base plate's fade, intersected so the glow
   never lights up in the margins the plate itself has faded out. */
.atmos-visual__glow {
  position: absolute;
  inset: 0;
  filter:
    brightness(0) invert(1)
    brightness(1.5)
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 14px rgba(190, 214, 255, 0.45));
  transition: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
  -webkit-mask-size: auto, auto, 38% 100%;
  mask-size: auto, auto, 38% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  will-change: mask-position;
  animation: atmos-line-sweep 5.5s linear infinite;
}
@keyframes atmos-line-sweep {
  0%   { -webkit-mask-position: 0 0, 0 0, -40% 0; mask-position: 0 0, 0 0, -40% 0; }
  70%  { -webkit-mask-position: 0 0, 0 0, 140% 0; mask-position: 0 0, 0 0, 140% 0; }
  100% { -webkit-mask-position: 0 0, 0 0, 140% 0; mask-position: 0 0, 0 0, 140% 0; }
}

/* Focus tab: the held count reads off the plate itself, numeral first */
.atmos-visual__stat {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  pointer-events: none;
  white-space: nowrap;
}
.atmos-visual__statnum {
  font-size: 45px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--wear-primary);
}

@media (prefers-reduced-motion: reduce) {
  .atmos-visual__art { transition: none; }
  .atmos-visual__glow { animation: none; opacity: 0; }
}
/* Manual mode drops the caption. It collapses rather than disappearing, and
   because the column's free space grows over the same run the artwork above
   it grows with it instead of snapping to the larger size. */
.atmos-visual__caption {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 2px;
  margin-top: 16px;
  overflow: hidden;
  max-height: 160px;
  opacity: 1;
  transition:
    max-height 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.42s ease,
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.atmos-visual__insight {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--wear-secondary);
}
.atmos-visual__suggest {
  align-self: flex-start;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  transition: color 0.2s ease;
}
.atmos-visual__suggest:hover { color: var(--wear-secondary); }
.atmos-visual__plus { margin-right: 2px; }

/* settings column */
/* the only scroller on a tab: the artwork beside it must never move */
.atmos-settings {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
}
.atmos-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-radius: 14px;
}
.atmos-row__icon {
  flex-shrink: 0;
  width: 22px;
  display: inline-flex;
  justify-content: center;
  color: var(--wear-muted);
}
.atmos-row__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.atmos-row__label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Shared right edge + track width so the column reads as one aligned block. */
.atmos-settings .atmos-seg { flex: 0 1 300px; max-width: 300px; min-width: 0; }
.atmos-settings .atmos-seg__opt {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 5px 4px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* navigation (drill-in) row */
.atmos-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--wear-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.atmos-nav:hover { background: rgba(255, 255, 255, 0.04); }
.atmos-nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: -2px;
}
.atmos-nav__value {
  font-size: 13px;
  font-weight: 300;
  color: var(--wear-secondary);
  white-space: nowrap;
}
.atmos-nav__chev { flex-shrink: 0; display: inline-flex; color: var(--wear-muted); }
.atmos-nav__chev svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.atmos-divider { margin: 10px 0; }

/* now playing */
.atmos-now { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.atmos-now__play { flex-shrink: 0; width: 40px; height: 40px; }
.atmos-now__playicon { display: inline-flex; }
.atmos-now__play svg { width: 16px; height: 16px; }
.atmos-now__play.is-loading .atmos-now__playicon svg { animation: atmosSpin 0.9s linear infinite; }
@keyframes atmosSpin { to { transform: rotate(360deg); } }
.atmos-now__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.atmos-now__topline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.atmos-now__track {
  flex: 1;
  font-size: 14px;
  font-weight: 300;
  color: var(--wear-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atmos-now__ctrls { flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
.atmos-now__ctrl { width: 30px; height: 30px; }
.atmos-now__ctrl svg { width: 15px; height: 15px; }
.atmos-now__ctrl.is-active { color: var(--wear-primary); }
.atmos-now__ctrl[disabled] { opacity: 0.35; pointer-events: none; }
.atmos-now__vol { position: relative; display: flex; align-items: center; }
.atmos-now__vol .atmos-vol-slider {
  width: 0; opacity: 0; pointer-events: none;
  transition: width 0.2s ease, opacity 0.2s ease;
}
.atmos-now__vol:hover .atmos-vol-slider,
.atmos-now__vol:focus-within .atmos-vol-slider { width: 72px; opacity: 1; pointer-events: auto; margin-left: 4px; }
.atmos-now__seekline { display: flex; align-items: center; gap: 8px; }
.atmos-now__time { flex-shrink: 0; font-size: 11px; font-weight: 300; color: var(--wear-muted); font-variant-numeric: tabular-nums; min-width: 30px; }
.atmos-now__time:last-child { text-align: right; }
.atmos-now__bar {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  touch-action: none;
}
.atmos-now__bar:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: 3px; }
.atmos-now__fill {
  position: absolute; left: 0; top: 0;
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgba(243, 242, 238, 0.55);
}
.atmos-now__handle {
  position: absolute; top: 50%; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--wear-primary);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
  pointer-events: none;
}
.atmos-now__bar:hover .atmos-now__handle,
.atmos-now__bar:focus-visible .atmos-now__handle { transform: translate(-50%, -50%) scale(1); }

/* volume / mixer range sliders (reused primitive) */
.atmos-vol-slider {
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer; outline: none;
}
.atmos-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--wear-primary); border: none; cursor: pointer;
}
.atmos-vol-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--wear-primary); border: none; cursor: pointer; }
.atmos-vol-slider:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: 3px; }

/* audio mix drill-in view */
/* audio mix drill-in — same skeleton as Space Background: the body is a fixed
   height, the artwork column stays put and only the channel list scrolls */
.atmos-mixbody { gap: 22px; }
/* the plate column is fixed: it never scrolls and never pushes the body taller
   than its row, which is what used to hand the scroll to the whole panel */
.atmos-mixbody .atmos-space__left {
  min-height: 0;
  overflow: hidden;
  justify-content: flex-start;
}
.atmos-mixbody .atmos-visual { min-height: 0; }

/* right column: channel + master rows, the only scroller in the view */
.atmos-mix__right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}
.atmos-mixbody__divider { margin: 14px 0; }

/* one grid so every icon / label / slider / value / mute aligns across rows */
.atmos-mixrow {
  display: grid;
  grid-template-columns: 20px 12px 132px 20px minmax(0, 1fr) 14px 42px 12px 28px;
  align-items: center;
  height: 44px;
}
.atmos-mixrow__icon { grid-column: 1; display: inline-flex; color: var(--wear-secondary); }
.atmos-mixrow__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.atmos-mixrow__label { grid-column: 3; font-size: 13px; font-weight: 300; color: var(--wear-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atmos-mixrow__slider { grid-column: 5; position: relative; display: flex; align-items: center; min-width: 0; }
.atmos-mixrow__value { grid-column: 7; text-align: right; font-size: 12px; font-weight: 300; color: var(--wear-muted); font-variant-numeric: tabular-nums; }
.atmos-mixrow__mute { grid-column: 9; }

/* filled range slider (native input, gradient fill driven by --fill) */
.atmos-mixslider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; outline: none;
  --fill: 0%;
}
.atmos-mixslider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, rgba(243, 242, 238, 0.85) 0, rgba(243, 242, 238, 0.85) var(--fill), rgba(255, 255, 255, 0.14) var(--fill), rgba(255, 255, 255, 0.14) 100%);
}
.atmos-mixslider::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.atmos-mixslider::-moz-range-progress { height: 4px; border-radius: 999px; background: rgba(243, 242, 238, 0.85); }
.atmos-mixslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--wear-primary); border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: width 0.12s ease, height 0.12s ease, margin-top 0.12s ease;
}
.atmos-mixslider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--wear-primary); border: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.atmos-mixslider:hover::-webkit-slider-thumb, .atmos-mixslider:active::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; }
.atmos-mixslider:hover::-moz-range-thumb, .atmos-mixslider:active::-moz-range-thumb { width: 14px; height: 14px; }
.atmos-mixslider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(255, 255, 255, 0.25); }

/* ghost mute button — no filled circle, hover token only */
.atmos-mixrow__mute {
  width: 28px; height: 28px; border-radius: 999px;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--wear-secondary);
}
.atmos-mixrow__mute:hover { background: rgba(255, 255, 255, 0.06); }
.atmos-mixrow__mute svg { width: 16px; height: 16px; }
.atmos-mixrow__mute--empty { background: none; }
.atmos-mixrow__mute--empty:hover { background: none; }

/* master row emphasis */
.atmos-mixrow--master .atmos-mixrow__label { color: var(--wear-primary); }
.atmos-mixrow--master .atmos-mixslider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--wear-primary) 0, var(--wear-primary) var(--fill), rgba(255, 255, 255, 0.14) var(--fill), rgba(255, 255, 255, 0.14) 100%);
}
.atmos-mixrow--master .atmos-mixslider::-moz-range-progress { background: var(--wear-primary); }

/* muted channel: label, value, fill drop to muted; mute icon full primary */
.atmos-mixrow.is-muted .atmos-mixrow__label,
.atmos-mixrow.is-muted .atmos-mixrow__value { color: var(--wear-muted); }
.atmos-mixrow.is-muted .atmos-mixslider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--wear-muted) 0, var(--wear-muted) var(--fill), rgba(255, 255, 255, 0.14) var(--fill), rgba(255, 255, 255, 0.14) 100%);
}
.atmos-mixrow.is-muted .atmos-mixslider::-moz-range-progress { background: var(--wear-muted); }
.atmos-mixrow.is-muted .atmos-mixrow__mute { color: var(--wear-primary); }

/* duck toggle row + reset button align within the same right column */
.atmos-mixrow--toggle { height: 44px; }
.atmos-mixrow__reset { align-self: flex-start; padding: 8px 0; margin-top: 2px; }

/* output device dropdown (themed, anchored to the row) */
.atmos-dd {
  position: absolute;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(38, 42, 41, 0.96) 0%, rgba(26, 30, 29, 0.96) 100%);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  transform-origin: top center;
  animation: atmos-dd-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* unrolls downward from the row: a clip reveals it top to bottom, so the device
   names slide into view rather than being squashed by a scaleY */
@keyframes atmos-dd-in {
  from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0 round 14px); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); }
}
.atmos-dd.is-pending { visibility: hidden; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .atmos-dd { animation: none; }
}
.atmos-dd__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 300;
  color: var(--wear-primary); text-align: left;
  padding: 9px 10px; border-radius: 10px;
  transition: background 0.15s ease;
}
.atmos-dd__item:hover { background: rgba(255, 255, 255, 0.05); }
.atmos-dd__item.is-selected { background: rgba(255, 255, 255, 0.07); }
.atmos-dd__item:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: -2px; }
.atmos-dd__icon { flex-shrink: 0; display: inline-flex; color: var(--wear-muted); }
.atmos-dd__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.atmos-dd__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atmos-dd__check { flex-shrink: 0; display: inline-flex; color: var(--wear-primary); }
.atmos-dd__check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.atmos-dd__hint { padding: 8px 10px; font-size: 12px; font-weight: 300; color: var(--wear-muted); }

/* Inline toggle: a lit dot and the state word in place of a sliding switch.
   The word is drawn from the state, so every row that renders the primitive
   picks the treatment up without changing its markup. */
.atmos-row--toggle .atmos-switch { flex-shrink: 0; }
.atmos-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  transition: color 0.2s ease;
}
.atmos-switch::after { content: "Off"; }
.atmos-switch.is-on { color: var(--wear-primary); }
.atmos-switch.is-on::after { content: "On"; }
.atmos-switch__knob {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--wear-muted);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.atmos-switch.is-on .atmos-switch__knob {
  background: var(--wear-primary);
  border-color: var(--wear-primary);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}
.atmos-switch:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}
/* the whole row is the hit target, so it reads as one control */
.atmos-row--toggle { cursor: pointer; }
.atmos-panel.is-adaptive .atmos-row--toggle { cursor: not-allowed; }
/* an off row reads as unlit: its title and icon go down with the dot */
.atmos-row:has(> .atmos-switch:not(.is-on)) .atmos-row__label,
.atmos-row:has(> .atmos-switch:not(.is-on)) .atmos-row__icon {
  color: var(--wear-muted);
}
.atmos-row__label,
.atmos-row__icon { transition: color 0.2s ease; }

/* footer */
.atmos-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 8px 0 4px;
}
.atmos-footer__resets { display: flex; align-items: center; gap: 18px; }
.atmos-textbtn {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  transition: color 0.2s ease;
}
.atmos-textbtn:hover { color: var(--wear-secondary); }
.atmos-textbtn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
  border-radius: 6px;
}
.atmos-footer__meta { padding: 0; }

/* ATMOSPHERE MODE behavior: adaptive dims unselected options + locks the controls;
   manual hides the caption. Row labels and icons are never greyed. */
.atmos-panel.is-adaptive .atmos-settings .atmos-seg__opt:not(.is-selected) { opacity: 0.45; }
.atmos-panel.is-adaptive .atmos-settings .atmos-seg { cursor: not-allowed; }
.atmos-panel.is-adaptive .atmos-settings .atmos-seg__opt { pointer-events: none; }
.atmos-panel.is-adaptive .atmos-row--toggle .atmos-switch { pointer-events: none; cursor: not-allowed; }
.atmos-panel.is-manual .atmos-visual__caption {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-8px);
  padding-bottom: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .atmos-visual__caption { transition: none; }
}

/* content view stack — main visual controls | space background | chooser.
   All three occupy the same slot; only one is-active at a time. Fixed floor
   height keeps the panel from jumping between views. */
/* overflow-x is pinned to hidden: overflow-y: auto alone would compute
   overflow-x to auto and the atmosViewIn slide-in would flash a horizontal bar. */
.atmos-content {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
}
.atmos-header, .atmos-tabs, .atmos-tabback-row, .atmos-footer { flex: 0 0 auto; }
.atmos-view { display: none; }
.atmos-view.is-active { display: block; min-height: 0; animation: atmosViewIn 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.atmos-view--main.is-active,
.atmos-view--mymusic.is-active { flex: 1 1 auto; display: flex; flex-direction: column; }
/* Audio Mix joins these: as a block its 360px body could not shrink to a short
   panel, so the overflow landed on .atmos-content and the whole panel scrolled */
.atmos-view--space.is-active,
.atmos-view--audiomix.is-active {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.atmos-view--chooser.is-active { min-height: 360px; }
@keyframes atmosViewIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* space background view */
.atmos-space__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.atmos-space__back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; }
.atmos-space__backchev { display: inline-flex; }
.atmos-space__backchev svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.atmos-space__titles { display: flex; flex-direction: column; gap: 2px; }
.atmos-space__title { font-size: 17px; font-weight: 400; letter-spacing: -0.01em; color: var(--wear-primary); }
.atmos-space__sub { font-size: 12px; font-weight: 300; color: var(--wear-muted); }
/* same rule as the tab body: the row is bound by the view, so the preview stays
   put and the right column is the only thing that scrolls */
.atmos-space__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  flex: 1 1 auto;
  height: 360px;
  min-height: 0;
  min-width: 0;
}
.atmos-space__left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.atmos-space__preview {
  position: relative;
  width: 100%;
  max-width: 70%;
  aspect-ratio: 3 / 2;
  max-height: 300px;
  margin-inline: auto;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.atmos-space__previewimg { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
/* the app's own wallpaper for a space nobody has configured, drawn as the room draws it */
.atmos-space__previewapp { background-size: cover; background-position: center; }
.atmos-space__previewempty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 12px; color: var(--wear-muted);
}
.atmos-space__bgname { text-align: center; font-size: 13px; font-weight: 300; color: var(--wear-secondary); }
.atmos-space__right { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding-right: 6px; }
/* Segmented controls here are identical to the Visual tab's: same 300px track,
   right edge, chip height/padding, font-size and selected/muted treatment. */
.atmos-space__right .atmos-seg { flex: 0 1 300px; max-width: 300px; min-width: 0; }
.atmos-space__right .atmos-seg__opt {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 5px 4px; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis;
}
.atmos-space__action { align-self: flex-start; padding: 8px 0; }
.atmos-space__confirm { font-size: 12px; font-weight: 300; color: var(--wear-muted); padding: 2px 0; }
.atmos-space__confirm[hidden] { display: none; }

/* themed scroll surface (chooser body + right column): no bar and no edge
   fade, so content stays fully legible right up to the box's edges */
.atmos-scroll {
  overflow-y: auto;
  min-height: 0;
}
.atmos-scroll::-webkit-scrollbar-button { display: none; }
.atmos-space__apply { margin-top: 8px; }
.atmos-space__apply[hidden] { display: none; }
.atmos-apply-btn {
  border: none;
  border-radius: 999px;
  background: rgba(243, 242, 238, 0.92);
  color: #1a1e1d;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding: 8px 22px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.atmos-apply-btn:hover { opacity: 0.85; }
.atmos-apply-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.4); outline-offset: 2px; }

/* chooser (Neura Collection + My Images) */
.atmos-chooser__scroll { max-height: 360px; }
.atmos-section-label--gap { margin-top: 32px; }
.atmos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 6px 0 14px; }
.atmos-thumb {
  position: relative;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: block;
}
.atmos-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.2s ease; }
.atmos-thumb:hover img { filter: brightness(1.08); }
.atmos-thumb__remove {
  position: absolute; top: 6px; left: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; color: #fff;
  opacity: 0; cursor: pointer;
  transition: opacity 0.2s ease;
}
.atmos-thumb:hover .atmos-thumb__remove,
.atmos-thumb__remove:focus-visible { opacity: 1; }
.atmos-thumb__remove svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.atmos-thumb.is-selected { outline: 2px solid var(--wear-primary); outline-offset: 0; }
.atmos-thumb:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 0; }
.atmos-thumb__check {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.atmos-thumb__check svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.atmos-thumb__name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 8px 6px;
  font-size: 11px; font-weight: 300; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atmos-thumb--upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, 0.04); color: var(--wear-secondary);
  border: 1px dashed rgba(255, 255, 255, 0.07);
}
.atmos-thumb--upload .atmos-thumb__uploadicon { display: inline-flex; }
.atmos-thumb--upload .atmos-thumb__uploadicon svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.atmos-thumb--upload .atmos-thumb__name {
  position: static; background: none; padding: 0; color: var(--wear-secondary); text-align: center;
}

/* Live wallpaper effects — ONLY rendered once the user engages a control (a
   class is added to .map-canvas). With no class present the wallpaper layer is
   left completely untouched, so an unconfigured space renders byte-for-byte as
   it did before this feature: no filter, no scale, no extra transition. */
.map-canvas.has-bg-blur .map-photo {
  filter: blur(var(--bg-blur, 0px));
  transform: scale(1.06);
  transition: filter 200ms linear, transform 200ms linear;
}
/* Motion rides the photo layer rather than the canvas. Desk pins its wallpaper
   with position: fixed, and any transform on the canvas would make that
   404vw-wide box its containing block and throw the wallpaper off screen.
   Using scale/translate instead of transform leaves blur's own scale intact. */
.map-canvas.bg-motion-breathe .map-photo { animation: atmosBreathe 30s ease-in-out infinite; }
@keyframes atmosBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.03; } }
.map-canvas.has-bg-drift .map-photo {
  translate: var(--bg-drift-x, 0) var(--bg-drift-y, 0);
  transition: translate 200ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .map-canvas.bg-motion-breathe .map-photo { animation: none; }
}

@media (max-width: 1160px) {
  .atmos-panel { width: calc(100vw - 24px); min-width: 0; max-height: 86vh; }
  .atmos-body { grid-template-columns: 1fr; grid-template-rows: auto; }
  .atmos-content { min-height: 0; }
  .atmos-visual__art-wrap { max-height: 260px; }
  /* stacked, so the whole content scrolls again rather than the lower column */
  .atmos-settings { overflow: visible; }
  .atmos-settings .atmos-seg { width: 100%; max-width: 300px; }
  .atmos-header__right { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .atmos-space__body { grid-template-columns: 1fr; }
  .atmos-space__right { max-height: none; }
  .atmos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ============ My Music drill-in ============ */
.atmos-mm { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.atmos-mm__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: 32px; }

/* left column */
.atmos-mm__left { min-height: 0; height: 100%; overflow-y: auto; display: flex; flex-direction: column; padding-right: 8px; }
.atmos-mm__label { padding: 0 0 12px; }
.atmos-mm__label--gap { margin-top: 24px; }
.atmos-pllist { display: flex; flex-direction: column; gap: 2px; }
.atmos-pl {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 44px;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 300; color: var(--wear-secondary);
  text-align: left; padding: 0 10px; border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.atmos-pl:hover { background: rgba(255, 255, 255, 0.05); color: var(--wear-primary); }
.atmos-pl.is-active { background: rgba(255, 255, 255, 0.08); color: var(--wear-primary); }
.atmos-pl:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: -2px; }
.atmos-pl .atmos-row__icon { flex-shrink: 0; display: inline-flex; }
.atmos-pl__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atmos-pl__del { flex-shrink: 0; display: none; color: var(--wear-muted); }
.atmos-pl:hover .atmos-pl__del, .atmos-pl:focus-within .atmos-pl__del { display: inline-flex; }
.atmos-pl__del:hover { color: var(--wear-primary); }
.atmos-pl__del svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.atmos-mm__none { display: flex; align-items: center; height: 40px; padding: 0 10px; font-size: 13px; font-weight: 300; color: var(--wear-muted); }
.atmos-mm__plactions { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* right column */
.atmos-mm__right { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.atmos-mm__head-fixed { flex: 0 0 auto; margin-bottom: 16px; }
.atmos-mm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.atmos-mm__title { font-size: 18px; font-weight: 400; color: var(--wear-primary); }
.atmos-mm__count { font-size: 12px; font-weight: 300; color: var(--wear-muted); margin-top: 3px; }
.atmos-mm__actions { display: flex; gap: 8px; flex-shrink: 0; }
.atmos-mm__btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
  color: var(--wear-primary); font-family: inherit; font-size: 12px; font-weight: 300;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease;
}
.atmos-mm__btn:hover { background: rgba(255, 255, 255, 0.09); }
.atmos-mm__btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: 2px; }
.atmos-mm__btn svg { width: 14px; height: 14px; }
.atmos-mm__headdiv { flex: 0 0 auto; margin: 0 0 12px; }
.atmos-mm__tracks { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.atmos-mm__empty { font-size: 12px; font-weight: 300; color: var(--wear-muted); padding: 12px 4px; }

/* track rows */
.atmos-tracklist { display: flex; flex-direction: column; gap: 2px; }
.atmos-track {
  display: grid; grid-template-columns: 24px 16px minmax(0, 1fr) 16px 56px;
  align-items: center; height: 44px; padding: 0 8px; border-radius: 10px; cursor: pointer;
  transition: background 0.15s ease;
}
.atmos-track:hover { background: rgba(255, 255, 255, 0.05); }
.atmos-track.is-current { background: rgba(255, 255, 255, 0.06); }
.atmos-track__num { grid-column: 1; position: relative; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--wear-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.atmos-track__play, .atmos-track__eq { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.atmos-track__play svg { width: 14px; height: 14px; color: var(--wear-primary); }
.atmos-track:hover .atmos-track__idx { visibility: hidden; }
.atmos-track:hover .atmos-track__play { display: inline-flex; }
.atmos-track.is-current .atmos-track__idx { display: none; }
.atmos-track.is-current:hover .atmos-track__play { display: none; }
.atmos-track.is-current .atmos-track__eq { display: inline-flex; }
.atmos-track__eq { gap: 2px; }
.atmos-track__eq i { width: 2.5px; height: 6px; background: var(--wear-primary); border-radius: 1px; animation: atmosEq 0.9s ease-in-out infinite; }
.atmos-track__eq i:nth-child(2) { animation-delay: 0.25s; }
.atmos-track__eq i:nth-child(3) { animation-delay: 0.5s; }
@keyframes atmosEq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .atmos-track__eq i { animation: none; height: 10px; } }
.atmos-track__title { grid-column: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 300; color: var(--wear-primary); }
.atmos-track__dur { grid-column: 5; text-align: right; font-size: 12px; font-weight: 300; color: var(--wear-muted); font-variant-numeric: tabular-nums; }

/* player strip */
.atmos-mm__now { flex: 0 0 72px; height: 72px; display: flex; align-items: center; margin-top: 20px; margin-bottom: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.atmos-mm__now .atmos-now { width: 100%; }


/* ============ shared track cover ============ */
.atmos-cover {
  position: relative;
  flex-shrink: 0;
  width: var(--cover-size, 48px);
  height: var(--cover-size, 48px);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.atmos-cover__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 200ms ease;
}
.atmos-cover.has-img .atmos-cover__img { opacity: 1; }
.atmos-cover__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--wear-muted);
  opacity: 1; transition: opacity 200ms ease;
}
.atmos-cover.has-img .atmos-cover__ph { opacity: 0; }
.atmos-cover__ph svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* placements */
.atmos-now__cover { margin-right: 4px; }
.atmos-pl__cover { flex-shrink: 0; }
.atmos-mm__headleft { display: flex; align-items: center; gap: 16px; min-width: 0; }
.atmos-mm__headleft .atmos-mm__headtext { min-width: 0; }

/* ============ Room Orchestration drill-in (Neva) ============ */
/* skeleton: each column is a fixed label + scrolling list (+ fixed footer on
   the left); status strip fixed below; footer is the shared panel footer. */
.atmos-view--orchestration.is-active { flex: 1 1 auto; display: flex; flex-direction: column; }
.atmos-ro { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.atmos-ro__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: 32px; }
.atmos-ro__left, .atmos-ro__right { min-height: 0; height: 100%; display: flex; flex-direction: column; }
/* fixed section label above each scroll area — always full opacity, never faded */
.atmos-ro__collabel { flex: 0 0 auto; padding: 0 0 8px; opacity: 1; }
.atmos-ro__foot { flex: 0 0 auto; }

/* the only scrolling region here: no bar and no edge fade, so content stays
   fully legible right up to the box's edges */
.atmos-ro__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-top: 8px; padding-bottom: 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.atmos-ro__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* left column — action stack (entries as cards) */
.atmos-ro__acts { display: flex; flex-direction: column; gap: 8px; }
.atmos-ro__daysep { font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wear-muted); padding: 8px 2px 2px; }
.atmos-ro__act {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start; gap: 12px; padding: 14px;
  background: rgba(255, 255, 255, 0.04); border-radius: 14px;
  border-left: 2px solid rgba(243, 242, 238, 0.35);
  transition: background 0.15s ease;
}
.atmos-ro__act:hover, .atmos-ro__act:focus-within { background: rgba(255, 255, 255, 0.06); }
.atmos-ro__acticon { display: inline-flex; padding-top: 2px; color: var(--wear-muted); }
.atmos-ro__acticon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.atmos-ro__acttext { min-width: 0; }
.atmos-ro__actlabel { font-size: 13px; font-weight: 300; color: var(--wear-primary); }
.atmos-ro__actmeta { font-size: 12px; font-weight: 300; color: var(--wear-muted); margin-top: 2px; }
.atmos-ro__actreason { font-size: 12px; font-weight: 300; color: var(--wear-secondary); margin-top: 4px; line-height: 1.4; }
.atmos-ro__act.is-undone { border-left-color: var(--wear-muted); }
.atmos-ro__act.is-undone .atmos-ro__actlabel, .atmos-ro__act.is-undone .atmos-ro__actmeta, .atmos-ro__act.is-undone .atmos-ro__actreason { opacity: 0.5; }
.atmos-ro__undo { align-self: center; opacity: 0; transition: opacity 0.15s ease; }
.atmos-ro__act:hover .atmos-ro__undo, .atmos-ro__act:focus-within .atmos-ro__undo, .atmos-ro__undo:focus-visible { opacity: 1; }
.atmos-ro__undone { align-self: center; font-size: 12px; font-weight: 300; color: var(--wear-muted); }
/* centred empty state, filling the scroll area */
.atmos-ro__emptybox { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; }
.atmos-ro__emptyicon { display: inline-flex; color: var(--wear-muted); opacity: 0.35; margin-bottom: 16px; }
.atmos-ro__emptyicon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.atmos-ro__emptytitle { font-size: 13px; font-weight: 300; color: var(--wear-secondary); }
.atmos-ro__emptynote { font-size: 12px; font-weight: 300; color: var(--wear-muted); margin-top: 6px; max-width: 260px; line-height: 1.4; }
.atmos-ro__foot .atmos-divider { margin: 12px 0 10px; }
.atmos-ro__clear { align-self: flex-start; }
.atmos-ro__clear:disabled { opacity: 0.4; cursor: not-allowed; }

/* second group label inside the right scroll area: 20px before, 16px after */
.atmos-ro__grouplabel { margin: 16px 0 12px; padding: 0; }

/* master switch — the Settings toggle card: the whole card is the control, the
   edge lights up when on and everything inside dims when off */
.atmos-ro__master {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--wear-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.atmos-ro__master:hover { background: rgba(255, 255, 255, 0.06); }
.atmos-ro__master:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: -2px; }
.atmos-ro__master.is-on {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.05);
}
.atmos-ro__master:not(.is-on) > * { opacity: 0.55; }
.atmos-ro__masterhead { display: flex; align-items: center; gap: 10px; }
.atmos-ro__mastersub { display: block; font-size: 12px; font-weight: 300; color: var(--wear-muted); margin-top: 6px; padding-left: 34px; }
.atmos-ro__masterfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-left: 34px;
}
.atmos-ro__masterstate {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 300; letter-spacing: -0.01em; color: var(--wear-secondary);
}
.atmos-ro__masterdot {
  width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--wear-muted);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.atmos-ro__master.is-on .atmos-ro__masterdot {
  background: var(--wear-primary);
  border-color: var(--wear-primary);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
}
.atmos-ro__masterhint { font-size: 11px; font-weight: 300; letter-spacing: -0.01em; color: var(--wear-muted); opacity: 0.7; }
.atmos-panel.is-adaptive .atmos-ro__master { pointer-events: none; cursor: not-allowed; }

/* right column — settings; compact 44px rows, 4px apart */
.atmos-ro__sub { display: flex; flex-direction: column; gap: 4px; }
.atmos-ro__sub .atmos-row { min-height: 44px; padding: 0; }
.atmos-ro__sub .atmos-divider { margin: 10px 0; }
.atmos-ro__right .atmos-seg { flex: 0 1 300px; max-width: 300px; min-width: 0; }
.atmos-ro__right .atmos-seg__opt { flex: 1 1 0; min-width: 0; text-align: center; padding: 5px 4px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
/* master-off disables rows 2-8 with the same non-interactive treatment as Adaptive */
.atmos-ro__sub.is-disabled .atmos-seg, .atmos-ro__sub.is-disabled .atmos-switch, .atmos-ro__sub.is-disabled .atmos-ro__pausebtn { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
/* Adaptive mode locks setting rows 1-8 (never the stack / pause / status) */
.atmos-panel.is-adaptive .atmos-ro__right .atmos-seg__opt:not(.is-selected) { opacity: 0.45; }
.atmos-panel.is-adaptive .atmos-ro__right .atmos-seg { cursor: not-allowed; }
.atmos-panel.is-adaptive .atmos-ro__right .atmos-seg__opt { pointer-events: none; }
.atmos-panel.is-adaptive .atmos-ro__right .atmos-switch { pointer-events: none; cursor: not-allowed; }
.atmos-ro__pauserow { padding: 9px 0; }
.atmos-ro__pausebtn:disabled { opacity: 0.4; cursor: not-allowed; }
.atmos-ro__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding-left: 34px; }
.atmos-ro__chip {
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04);
  color: var(--wear-primary); font-family: inherit; font-size: 12px; font-weight: 300;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease;
}
.atmos-ro__chip:hover { background: rgba(255, 255, 255, 0.09); }
.atmos-ro__chip:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: 2px; }

/* label + info affordance wrapper (keeps the info icon beside the label text) */
.atmos-labelwrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.atmos-labelwrap .atmos-row__label { flex: 0 1 auto; }
.atmos-info {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--wear-muted); opacity: 0.45; transition: opacity 0.15s ease, color 0.15s ease;
}
.atmos-info:hover, .atmos-info:focus-visible { opacity: 1; color: var(--wear-muted); }
.atmos-info:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: 2px; border-radius: 50%; }
.atmos-info svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* reusable floating tooltip (portalled to <body>, never clipped, never blocks
   clicks). Placement is computed in JS; classes only drive arrow + slide-in. */
.atmos-tip {
  position: fixed; z-index: 1000; max-width: 280px; padding: 14px;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(38, 42, 41, 0.92) 0%, rgba(26, 30, 29, 0.9) 100%);
  backdrop-filter: blur(26px) saturate(135%); -webkit-backdrop-filter: blur(26px) saturate(135%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  color: var(--wear-primary, rgba(243, 242, 238, 0.94));
  pointer-events: none;
}
.atmos-tip[hidden] { display: none; }
.atmos-tip__title { font-size: 13px; font-weight: 500; color: rgba(243, 242, 238, 0.96); margin-bottom: 6px; }
.atmos-tip__body { font-size: 13px; font-weight: 300; line-height: 1.5; color: rgba(223, 222, 216, 0.8); }
.atmos-tip__arrow { position: absolute; width: 9px; height: 9px; background: inherit; border: 1px solid rgba(255, 255, 255, 0.12); transform: rotate(45deg); }
/* arrow-left: tooltip to the right of the icon, arrow on its left edge pointing left */
.atmos-tip.arrow-left .atmos-tip__arrow { border-right: none; border-top: none; }
/* arrow-top: tooltip below the icon, arrow on its top edge pointing up */
.atmos-tip.arrow-top .atmos-tip__arrow { border-right: none; border-bottom: none; }
/* arrow-bottom: tooltip above the icon, arrow on its bottom edge pointing down */
.atmos-tip.arrow-bottom .atmos-tip__arrow { border-left: none; border-top: none; }
/* fade + 4px slide-in from the arrow's direction (140ms), one-shot on open */
.atmos-tip.is-appearing.arrow-left { animation: atmosTipInLeft 140ms ease; }
.atmos-tip.is-appearing.arrow-top { animation: atmosTipInTop 140ms ease; }
.atmos-tip.is-appearing.arrow-bottom { animation: atmosTipInBottom 140ms ease; }
@keyframes atmosTipInLeft { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes atmosTipInTop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes atmosTipInBottom { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .atmos-tip.is-appearing { animation: none; } }

/* status strip — structural equivalent of the My Music player strip */
.atmos-ro__status {
  flex: 0 0 72px; height: 72px; display: flex; align-items: center; gap: 16px;
  margin-top: 20px; margin-bottom: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.atmos-ro__dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.atmos-ro__dot.is-active { background: var(--wear-primary); }
.atmos-ro__dot.is-paused { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wear-secondary); }
.atmos-ro__dot.is-off { background: rgba(255, 255, 255, 0.18); }
.atmos-ro__statustext { min-width: 0; display: flex; flex-direction: column; }
.atmos-ro__statusline { font-size: 14px; font-weight: 300; color: var(--wear-primary); }
.atmos-ro__statusdetail { font-size: 12px; font-weight: 300; color: var(--wear-muted); margin-top: 2px; }
.atmos-ro__statusbtn { margin-left: auto; flex-shrink: 0; }
.atmos-ro__statusbtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============ Focus Shield drill-in (Focus) ============ */
/* reuses the .atmos-ro skeleton; only Focus-specific pieces are defined here */
.atmos-view--focusshield.is-active { flex: 1 1 auto; display: flex; flex-direction: column; }
/* left column: protection level (fixed) + sections list (scrolls) */
.atmos-fs__level { flex: 0 0 auto; margin-bottom: 4px; }
.atmos-fs__levelseg { display: flex; width: 100%; max-width: none; }
.atmos-fs__levelseg .atmos-seg__opt { flex: 1 1 0; min-width: 0; text-align: center; padding: 5px 4px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.atmos-fs__seclabel { margin-top: 24px; }
.atmos-fs__sec {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 44px;
  margin-bottom: 2px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 300; color: var(--wear-secondary);
  text-align: left; padding: 0 10px; border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.atmos-fs__sec:hover { background: rgba(255, 255, 255, 0.05); color: var(--wear-primary); }
.atmos-fs__sec.is-active { background: rgba(255, 255, 255, 0.08); color: var(--wear-primary); }
.atmos-fs__sec:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.25); outline-offset: -2px; }
.atmos-fs__sec .atmos-row__icon { flex-shrink: 0; }
.atmos-fs__secname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atmos-fs__badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.14); color: var(--wear-primary);
  font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums;
}
/* right column: header (fixed) + settings (scroll) */
.atmos-fs__head { flex: 0 0 auto; }
.atmos-fs__title { font-size: 18px; font-weight: 400; color: var(--wear-primary); }
.atmos-fs__desc { font-size: 12px; font-weight: 300; color: var(--wear-muted); margin-top: 4px; }
.atmos-fs__headdiv { flex: 0 0 auto; margin: 16px 0 12px; }
.atmos-fs .atmos-ro__right .atmos-ro__scroll { display: flex; flex-direction: column; gap: 4px; }
.atmos-fs .atmos-ro__right .atmos-row { min-height: 44px; padding: 0; }
.atmos-fs .atmos-ro__right .atmos-seg { flex: 0 1 300px; max-width: 300px; min-width: 0; }
.atmos-fs .atmos-ro__right .atmos-seg__opt { flex: 1 1 0; min-width: 0; text-align: center; padding: 5px 4px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.atmos-fs .atmos-nav { min-height: 44px; padding: 0; }
.atmos-fs__actionrow { gap: 8px; }
.atmos-fs .atmos-textbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.atmos-fs__heldlabel { margin-top: 4px; }
/* held-now list */
.atmos-fs__heldlist { display: flex; flex-direction: column; gap: 8px; }
.atmos-fs__held {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center;
  gap: 12px; min-height: 52px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04); border-radius: 12px; transition: background 0.15s ease;
}
.atmos-fs__held:hover, .atmos-fs__held:focus-within { background: rgba(255, 255, 255, 0.06); }
.atmos-fs__heldicon { display: inline-flex; color: var(--wear-muted); }
.atmos-fs__heldicon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.atmos-fs__heldtext { min-width: 0; }
.atmos-fs__heldtitle { font-size: 13px; font-weight: 300; color: var(--wear-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atmos-fs__heldmeta { font-size: 12px; font-weight: 300; color: var(--wear-muted); margin-top: 2px; }
.atmos-fs__heldrelease { align-self: center; opacity: 0; transition: opacity 0.15s ease; }
.atmos-fs__held:hover .atmos-fs__heldrelease, .atmos-fs__held:focus-within .atmos-fs__heldrelease, .atmos-fs__heldrelease:focus-visible { opacity: 1; }
/* held-now empty state */
.atmos-fs__emptybox { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 12px; }
.atmos-fs__emptyicon { display: inline-flex; color: var(--wear-muted); opacity: 0.35; margin-bottom: 16px; }
.atmos-fs__emptyicon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* status strip: two buttons on the right */
.atmos-fs .atmos-ro__statustext { flex: 1 1 auto; }
.atmos-fs__statusbtn { flex-shrink: 0; }
.atmos-fs__statusbtn + .atmos-fs__statusbtn { margin-left: 8px; }
.atmos-fs__statusbtn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Adaptive locks the settings + the level preset; section list / held / release / pause stay usable */
.atmos-panel.is-adaptive .atmos-fs .atmos-ro__right .atmos-seg__opt:not(.is-selected) { opacity: 0.45; }
.atmos-panel.is-adaptive .atmos-fs .atmos-ro__right .atmos-seg { cursor: not-allowed; }
.atmos-panel.is-adaptive .atmos-fs .atmos-ro__right .atmos-seg__opt { pointer-events: none; }
.atmos-panel.is-adaptive .atmos-fs .atmos-ro__right .atmos-switch { pointer-events: none; cursor: not-allowed; }
.atmos-panel.is-adaptive .atmos-fs__levelseg .atmos-seg__opt:not(.is-selected) { opacity: 0.45; }
.atmos-panel.is-adaptive .atmos-fs__levelseg .atmos-seg__opt { pointer-events: none; }