/* =============================================================================
   soundchrome.css — THE TOP-RIGHT UTILITY CLUSTER, AND THE SOUND SWITCH.
   webcore, 2026-08-13. Owner-neutral: no colour literal, no owner name, no
   owner asset. Every value is a role token, so an owner's `theme` block
   supplies the palette and this sheet supplies the structure.

   WHAT IT OWNS
   ------------
     .nav-util            the cluster itself — sound, language, account,
                          Discord, as ONE group pinned to the top right
     .nav-cta[data-cta-icon]
                          the Discord control once its caption is removed
     .wc-aud*             the sound switch, re-fitted for two states after
                          js/ambient.js dropped the third and the volume rail
     .nav-menu-linkd      Link Discord, now a row inside the player's menu

   WHY A SEPARATE SHEET. site.css is the shell every fragment was written
   against and terminal.css is the house look; both are read by dozens of tests
   by selector. A nav re-layout landing inside either would be unreviewable in
   the diff. This loads after both and before the owner's overlay, so it can
   re-voice what they set and an owner can still re-voice it.

   IT DEGRADES TO THE OLD ROW. Drop this file and the cluster is still a flex
   row of the same four controls in the same order — plainer, not broken.
   ========================================================================== */


/* =============================================================================
   1. THE CLUSTER
   ============================================================================= */

/* ★ ONE GROUP, NOT FOUR NEIGHBOURS.  (owner ruling 2026-08-13)
   "for link discord, crysis, sounds, dfiscord etc put it top right."

   These controls used to be loose siblings on the nav's flex row, so they were
   top-right only by accident of source order: `.brand` carries `margin-right:
   auto`, which pushes everything after it right, and everything after it
   included the nav LINKS. An owner with ten links therefore had the utilities
   shunted around by the link row, and js/ambient.js had to name a NEIGHBOUR to
   inject the sound button ("insertBefore the session lane") because there was
   no group to join.

   As one element the group is a single flex item with a single place to style,
   `margin-left: auto` pins it to the corner regardless of how many nav links
   there are, and the sound button has somewhere to be inserted INTO.

   `flex: none` and `min-width: 0` together: never shrink the utilities to make
   room for links (they are all icon-sized already and there is nothing to give
   up), but never let the group establish a minimum that forces the row wider
   than the viewport either. */
.nav-util {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
  margin-left: auto;
}

/* ★★★ THE INSET THAT QUIETLY UN-CENTRED THE BAR. This rule used to read
   `margin-inline-start: 6px`, "the nav links keep their own spacing from the
   brand, but must not sit shoulder-to-shoulder with the utility group". The
   6px was doing nothing that `.nav-in`'s own `gap: clamp(9px, .9vw, 15px)` was
   not already doing — and because `margin-inline-start` is the logical form of
   `margin-left`, and this rule is both later and more specific than the
   `margin-left: auto` above, it CANCELLED the cluster's auto margin.

   That mattered the moment the destinations were centred (cinema.css, 2026-08-13).
   A flex line splits its free space equally between every auto margin on it,
   so with the cluster's auto killed there were THREE left — the brand's own
   `margin-right: auto` and the row's two — and the row landed a third of the
   free space too far right: measured at 1920, 106px of air before it and 54px
   after. With the cluster's auto restored there are FOUR, symmetric about the
   row, and the gap either side of it is the same number.

   ★ AND IT IS SCOPED TO THE DESKTOP BAR, at site.css's own burger breakpoint,
   because the two layouts want opposite things. Below 821 the bar is mark,
   BURGER, tools — three items and no destinations — and with two auto margins
   fighting over the free space the burger floated into the MIDDLE of the phone
   bar, which is neither where a menu button belongs nor where a thumb goes
   looking for one. Down there the fixed inset is right, and the brand's own
   `margin-right: auto` does all the pushing that is needed. */
.nav-in .nav-util { margin-inline-start: 6px; }
@media (min-width: 821px) {
  .nav-in .nav-util { margin-inline-start: auto; }
}

/* ★★★★★ THE SHARED PLATE IS GONE.  (owner reference, 2026-08-13.)
   What was here, and its argument, kept for the next reader: "Four separate
   bordered controls in a row read as four unrelated things; a shared inset
   ground behind them reads as one instrument panel, which is what it is." At
   ≥981px the cluster wore its own 1px border, 4px of padding and a `--surface`
   fill, so the corner of every page was a BOX INSIDE A BOX INSIDE A BOX — the
   plate, then each control's own border inside it, then the avatar's border
   inside that.

   The reference the owner sent draws the same three controls as three separate
   square hairline boxes standing directly on the bar, 14px apart, with nothing
   behind them (measured: two 36x36 squares at x=3064 and x=3114, then the
   225x40 identity block at x=3164, and no enclosing rule anywhere). It reads
   as one module because the controls are the same SHAPE and the same distance
   apart, which is a stronger grouping than a container and costs no ink.

   The gap and `margin-left: auto` above are what is left of this block, and
   they are the two things that were actually doing the grouping. */


/* =============================================================================
   2. THE ICON CONTROLS
   ============================================================================= */

/* ★ ONE FOOTPRINT FOR EVERY CAPTIONLESS CONTROL. The sound switch and the
   Discord icon are both 15px glyphs; without a shared box they would be sized
   by their own padding rules and land a pixel or two apart, which on a row of
   two is exactly visible. A square with the glyph centred is also the only
   shape that keeps a 34px pointer target once the caption is gone — an icon
   control padded like a text button is a target the width of its text and the
   height of its line box.

   34px rather than 44: this is a desktop utility row inside a 62px header, and
   the phone rules below take it to the touch size where a finger is the
   pointer. */
.nav-util .nav-cta[data-cta-icon],
.nav-util .wc-aud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  border-radius: var(--r-xs);
}

/* ★ THE DISCORD CONTROL KEEPS ITS WEIGHT. Losing the caption must not lose the
   fact that it is the site's one call to action — it is still the filled
   control in the row, it has just stopped spelling itself out. The gradient
   and shadow are site.css's; only the box changed. */
.nav-util .nav-cta[data-cta-icon] svg { flex: none; }

/* The sound switch is the opposite: a preference, not a destination. Hairline
   and wash only, so the eye lands on the account and the Discord icon first. */
.nav-util .wc-aud {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.nav-util .wc-aud-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg-dim);
  cursor: pointer;
  transition: border-color .16s, color .16s, background-color .16s;
}
.nav-util .wc-aud-btn:hover {
  border-color: var(--edge);
  color: var(--fg);
  background: var(--surface-hover);
}
/* ON reads as ON without a caption: the accent hairline is the state. */
.nav-util .wc-aud[data-on="1"] .wc-aud-btn {
  border-color: var(--edge-accent);
  color: var(--fg);
  background: var(--accent-wash-2);
}

/* ★★ THE SPEAKER STOPS PULSING. ambient.css animates the two wave arcs
   whenever `data-on="1"`, which was correct while `data-on` meant "the island
   bed is PLAYING" — the icon was showing live sound. It now means "the switch
   is on", and a switch that is on is the resting state of most visits, so the
   same rule would put a permanent looping animation in the header of every
   page for everyone. A control that animates while nothing is happening is
   noise in the other channel; this is the same ruling as the one that removed
   the bed, applied to the pixels. */
.nav-util .wc-aud[data-on="1"] .wc-aud-w1,
.nav-util .wc-aud[data-on="1"] .wc-aud-w2 {
  animation: none;
  opacity: 1;
}

/* Focus has to survive on a control with no text to underline. */
.nav-util .wc-aud-btn:focus-visible,
.nav-util .nav-cta:focus-visible,
.nav-util .nav-auth-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ★ THE LIVE REGION IS NOT A LAYOUT ELEMENT. `aria-pressed` is announced when a
   control receives focus, not when its state changes, so a player who toggles
   the switch and leaves focus where it is would hear nothing. The polite
   region says it out loud — and must take no space and never be read as an
   empty box. `clip-path` over `display:none`, because a hidden live region is
   not announced at all. */
.nav-util .wc-aud-say {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}


/* =============================================================================
   3. LINK DISCORD, INSIDE THE PLAYER'S MENU
   ============================================================================= */

/* It moved out of the top bar (owner ruling 2026-08-13) and into the account
   menu beside Sign out, where its opposite — Unlink Discord — already lived.
   It is a destination like the other rows, so it takes the row grammar and
   adds only the glyph. */
.nav-menu-linkd {
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav-menu-linkd svg {
  flex: none;
  opacity: .82;
}
.nav-menu-linkd:hover svg { opacity: 1; }
.nav-menu-linkd .nav-linkd-txt { min-width: 0; }


/* =============================================================================
   4. NARROW WIDTHS
   ============================================================================= */

/* Below the nav's own breakpoint the links collapse into the burger and the
   utility group is most of the row. The frame comes off — a bordered group
   against a bordered header at phone width is two rectangles saying the same
   thing — and the targets grow to a finger. */
@media (max-width: 980px) {
  .nav-util { gap: 6px; margin-inline-start: 4px; }
}

@media (max-width: 720px) {
  .nav-util { gap: 5px; }
  .nav-util .nav-cta[data-cta-icon],
  .nav-util .wc-aud-btn {
    width: 38px;
    height: 38px;
  }
}

/* 390px and under is the phone the fleet actually tests at. The cluster has to
   fit beside the brand and the burger with no horizontal scroll, so the boxes
   tighten one more step and the group is allowed to give up its own margin. */
@media (max-width: 420px) {
  .nav-util { gap: 4px; margin-inline-start: 2px; }
  .nav-util .nav-cta[data-cta-icon],
  .nav-util .wc-aud-btn {
    width: 36px;
    height: 36px;
  }
}


/* =============================================================================
   5. REDUCED MOTION
   ============================================================================= */

/* The only motion this sheet adds is the switch's colour transition. A visitor
   who asked for calm gets the state change instantly instead. (js/ambient.js
   reads the same query, plus prefers-reduced-data, to decide the sound
   DEFAULT — never to override a stored choice.) */
@media (prefers-reduced-motion: reduce) {
  .nav-util .wc-aud-btn { transition: none; }
  .nav-util .wc-aud[data-on="1"] .wc-aud-w1,
  .nav-util .wc-aud[data-on="1"] .wc-aud-w2 { animation: none; }
}