/* ═══════════════════════════════════════════════════════════════════════════
   NXS Clinical — SHARED CHROME STYLESHEET (top bar + island taskbar)

   ONE source of truth, loaded by BOTH shells:
     · canvas Home  →  public/v6/index.html          (<link> in the real <head>)
     · React app    →  src/components/v6/V6Chrome.tsx (import)

   Why this file exists (Brock, 2026-07-29): the chrome was implemented twice —
   inline styles in the canvas and a forked .nxs6-* stylesheet in React — so the
   bar visibly changed material, light, ring and icons the moment you left Home.
   The values below are lifted verbatim from the canvas, which is the reference.

   RULES
   1. Never re-declare any of these values in a shell-local stylesheet or an
      inline style. Change them HERE and both shells move together.
   2. Theme-token driven only. Never hardcode a colour — every surface reads
      --chromeC / --chromeA / --chromeInk / --chromeSolid / --shd / --acc* and
      the AA-solved alpha tiers (--a38 … --a95) from themes-runtime.js.
   3. Both shells must render the same DOM: the data-nxs="…" hooks below are the
      contract. Markup lives in index.html and V6Chrome.tsx; geometry lives here.

   Structural state that CANNOT live in CSS is passed in as custom properties or
   data attributes, so the formula still lives here only once:
     --nxs-tab   (0-4)  active island tab index → drives the sliding indicator
     --nxs-ring  (0-100) shift progress percentage on the ringed mark
     data-ind    lens | bubble | lamp  (island indicator style)
     data-active true|false            (island tab)
     data-listening true|false         (mic button)
     data-overtime true|false          (ringed mark)
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes iconGlow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(var(--ink), .25)); }
  50%      { filter: drop-shadow(0 0 4px rgba(var(--ink), var(--a95))); }
}
@keyframes cbGlow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(140, 180, 255, .3)); }
  50%      { filter: drop-shadow(0 0 4px rgba(170, 200, 255, .95)); }
}

/* ── 1. Chrome ink scope ──────────────────────────────────────────────────
   The chrome contract: NXS mark, greeting, top controls, island icons and
   labels stay white/near-white in ALL 50 themes. Both bars therefore re-point
   --ink at --chromeInk and lift the alpha tiers, so every child rule can be
   written the ordinary way — rgba(var(--ink), var(--aNN)) — and still land on
   white-on-glass. These are the canvas's exact tier overrides.            */
[data-nxs='topbar'],
[data-nxs='island'] {
  box-sizing: border-box;
  /* Use the same typography token as the rest of NXS. */
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif);
  -webkit-tap-highlight-color: transparent;
  --ink: var(--chromeInk);
  --inkMax: rgb(var(--chromeInk));
  --txsh: 0, 0, 0;
  /* The rebinding above only reaches rules that spell rgba(var(--ink), …).
     `color` is a SECOND, inherited channel: globals.css sets body { color:
     var(--nexus-ivory) }, so anything in here that resolves to `inherit` or
     leaves colour unset was landing on the PAGE's ink — near-black on the 30
     light themes — on a bar engineered for white. Re-point the inherited
     channel at the same source as --ink so the chrome ink scope is complete
     and no child can fall back out of it. Components still override. */
  color: rgb(var(--chromeInk));
  --a38: .7;  --a4: .7;   --a42: .95; --a45: .95; --a5: .95;
  --a55: .92; --a6: .95;  --a65: .95; --a7: .95;  --a72: .95;
  --a75: .95; --a9: .97;  --a92: .97; --a94: .97; --a95: .97;
}

/* Etched vs lit icon light. The top bar etches at .14, the island at .12 —
   that 0.02 is the canvas's own value, kept rather than "tidied". */
[data-nxs='topbar'] { --nxsEtched: drop-shadow(0 -1px 0 rgba(var(--shd), .5)) drop-shadow(0 1px 0 rgba(var(--ink), .14)); }
[data-nxs='island'] { --nxsEtched: drop-shadow(0 -1px 0 rgba(var(--shd), .5)) drop-shadow(0 1px 0 rgba(var(--ink), .12));
                      --nxsLit: drop-shadow(0 0 5px rgba(var(--ink), var(--a9))) drop-shadow(0 0 14px rgba(var(--ink), var(--a4))); }

/* Control reset — the React shell inherits app-wide button rules from
   globals.css (scale(.98) on :active, 200ms colour transitions, 44px minimums,
   .clinical-mode's 48px + 12px/16px padding) that the canvas never had.
   Neutralised here so both shells start level.

   This reset used to be ONE block at descendant specificity, which made it
   out-specify every single-attribute component rule further down THIS file:
   the greeting lost Georgia 20px and its 44px tap padding, .nxs6-iconbtn lost
   its surface and ring, and `color: inherit` dragged the whole bar back onto
   the page's ink. A reset that beats the components it precedes is not a
   reset. It is split in two, by what each declaration actually has to beat:

     A. AUTHOR overrides — must out-specify globals.css, so they keep the
        descendant selector. Only declarations no chrome component owns.
     B. USER-AGENT normalisation — a <button>'s own default font/border/
        background/colour. Author styles beat the UA sheet at ANY specificity,
        so these are wrapped in :where() and carry (0,0,0). They still do
        their job on the canvas shell (no Tailwind preflight there), and they
        now lose to every component rule below, which is the correct order. */

/* A. beats globals.css */
[data-nxs='topbar'] button,
[data-nxs='island'] button,
[data-nxs='topbar'] [role='button'],
[data-nxs='island'] [role='button'] {
  min-width: 0;
  min-height: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* B. beats the UA sheet only — (0,0,0) on purpose. */
:where([data-nxs='topbar'], [data-nxs='island']) :where(button, [role='button']) {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  margin: 0;
  background: none;
  border: none;
  color: inherit;
  text-align: inherit;
}
[data-nxs='topbar'] button:active,
[data-nxs='island'] button:active,
[data-nxs='topbar'] [role='button']:active,
[data-nxs='island'] [role='button']:active { transform: none; }
[data-nxs='topbar'] button:focus-visible,
[data-nxs='island'] button:focus-visible,
[data-nxs='topbar'] [role='button']:focus-visible,
[data-nxs='island'] [role='button']:focus-visible {
  outline: 2px solid var(--focusC);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── 2. Top bar shell ─────────────────────────────────────────────────────
   Tinted Glass is the BASE declaration (not a [data-mat-topbar='glass'] opt-in)
   so the bar is never transparent before the material attribute is written. */
[data-nxs='topbar'] {
  position: fixed;
  /* env() is 0 unless the shell opts into viewport-fit=cover — the canvas does
     not, the Capacitor/web app does, so the notch is handled without the two
     shells diverging on desktop. */
  top: calc(6px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(1568px, calc(100% - 24px));
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 65%), rgba(var(--chromeC), calc(var(--chromeA) * .72));
  border: 1px solid rgba(var(--chromeInk), .16);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(var(--chromeInk), .18),
    inset 0 -1px 1px rgba(var(--shd), .25),
    0 5px 18px rgba(var(--shd), .3);
}

/* ── 3. Ringed mark — shift progress ring + brand N ───────────────────────
   The ring is DATA: no shift = flat track, active = elapsed fraction,
   overtime = capped full + a flat hairline halo. */
[data-nxs='mark-btn'] {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
[data-nxs='mark-ring'] {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(rgb(var(--ink)) calc(var(--nxs-ring, 0) * 1%), rgba(var(--ink), .16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}
/* No active shift: the ring is a plain track, not a 0% conic gradient. */
[data-nxs='mark-btn'][data-shift='false'] [data-nxs='mark-ring'] { background: rgba(var(--ink), .14); }
[data-nxs='mark-btn'][data-overtime='true'] [data-nxs='mark-ring'] {
  outline: 1px solid rgba(var(--ink), .35);
  outline-offset: 2px;
}
[data-nxs='mark-well'] {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-nxs='mark'] {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: var(--markFx);
}

/* ── 4. Greeting ──────────────────────────────────────────────────────── */
[data-nxs='greet-wrap'] {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
/* Scoped to its bar (0,2,0) for one reason: the greeting is a span[role=
   'button'], so the control reset above and globals.css's
   `.clinical-mode [role="button"] { padding: 12px 16px }` both target it at
   (0,1,1). Its own padding is the 44px tap target and has to win. */
[data-nxs='topbar'] [data-nxs='greeting'] {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(var(--ink), var(--a94));
  white-space: nowrap;
  /* Same truncation contract as the dateline below. Without these three the
     nowrap text simply painted out of its flex box and over the dateline
     ("Good morningᴹonday, A…"); min-width:0 is what lets a flex item shrink
     past its min-content width so the ellipsis can ever appear. */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-shadow: none;
  cursor: pointer;
  /* 44px tap target without changing the bar's baseline layout. */
  padding: 11px 0;
  margin: -11px 0;
  display: inline-block;
}
[data-nxs='dateline'] {
  font-size: 0.75rem;
  color: rgba(var(--ink), var(--a45));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Shrink order. Once the greeting is truncatable (above), both items are,
     and flex split the deficit between them — at 390px that chopped BOTH
     ("Good …" beside "Monday…"). The greeting is the primary label at 20px /
     --a94; the dateline is secondary metadata at 12px / --a45, so it yields
     first and the greeting keeps its text. (It is already free to shrink to
     zero: overflow:hidden makes a flex item's automatic minimum size 0.) */
  flex-shrink: 3;
}
[data-nxs='top-status'] {
  flex: none;
  font-size: 0.59375rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid rgba(var(--ink), .25);
  background: rgba(var(--ink), .06);
  color: rgba(var(--ink), var(--a75));
}

/* ── 5. Top-bar controls ─────────────────────────────────────────────── */
[data-nxs='top-actions'] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
[data-nxs='iconbtn'] {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(var(--ink), .12);
  background: rgba(var(--ink), .05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--ink), var(--a72));
  box-shadow:
    inset 0 1px 0 rgba(var(--ink), .14),
    inset 0 -1px 2px rgba(var(--shd), .35);
}
[data-nxs='iconbtn']:hover {
  background: rgba(var(--ink), .11);
  color: var(--inkMax);
}
[data-nxs='topbar'] [data-nxs='iconbtn'] svg { filter: var(--nxsEtched); }

/* Mic — the only top control that animates between states. */
[data-nxs='iconbtn'][data-mic] { transition: background .2s, color .2s; }
[data-nxs='iconbtn'][data-listening='true'] {
  border: 1px solid rgba(var(--ink), var(--a4));
  background: rgba(var(--ink), .16);
  color: var(--inkMax);
}
[data-nxs='topbar'] [data-nxs='iconbtn'][data-listening='true'] svg {
  filter: none;
  animation: iconGlow 1.4s ease-in-out infinite;
}

/* Code Blue — top-bar only, its own token family, always breathing. */
[data-nxs='topbar'] [data-nxs='code'] {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--cbBorder);
  background: var(--cbBg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--chromeInk), .92);
  box-shadow:
    inset 0 1px 0 var(--cbHi),
    inset 0 -1px 2px rgba(var(--shd), .4);
}
[data-nxs='topbar'] [data-nxs='code']:hover {
  background: var(--cbHov);
  color: rgb(var(--chromeInk));
}
[data-nxs='topbar'] [data-nxs='code'] svg {
  filter: none;
  animation: cbGlow 3s ease-in-out infinite;
}

/* ── 6. Island taskbar shell ─────────────────────────────────────────── */
[data-nxs='island'] {
  position: fixed;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, calc(100% - 24px));
  z-index: 90;
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 65%), rgba(var(--chromeC), calc(var(--chromeA) * .72));
  border: 1px solid rgba(var(--chromeInk), .16);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(var(--chromeInk), .18),
    inset 0 -1px 1px rgba(var(--shd), .3),
    0 6px 22px rgba(var(--shd), .32);
  display: flex;
  align-items: stretch;
  padding: 0 8px;
  overflow: hidden;
}

/* ── 7. Sliding indicator — OPT-IN ONLY (default off) ─────────────────
   Brock 2026-09-23: the island is "ink only · no pill". The React shell
   renders no indicator and carries no data-ind; the rules below engage only
   when a shell sets data-ind="lens|bubble|lamp" (the canvas prototype still
   does). Without that attribute the indicator, if present, is hidden.
   ONE geometry formula: 8px island padding, five equal cells, centre of the
   active cell. --nxs-tab is the only thing either shell supplies. */
[data-nxs='island']:not([data-ind='lens']):not([data-ind='bubble']):not([data-ind='lamp']) [data-nxs='indicator'],
[data-nxs='island']:not([data-ind='lens']):not([data-ind='bubble']):not([data-ind='lamp']) [data-nxs='indicator-track'] {
  display: none;
}
[data-nxs='indicator'] {
  position: absolute;
  left: calc(8px + (100% - 16px) * (var(--nxs-tab, 0) * .2 + .1));
  pointer-events: none;
  transition: left .45s cubic-bezier(.32, .72, 0, 1);
}
/* lens (opt-in; was the default before 2026-09-23) */
[data-nxs='island'][data-ind='lens'] [data-nxs='indicator'] {
  top: 50%;
  width: 58px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 13px;
  background: rgba(var(--ink), .065);
  border: 1px solid var(--accBorder);
  box-shadow:
    inset 0 1px 0 rgba(var(--ink), .28),
    inset 0 -6px 12px rgba(var(--ink), .05),
    0 4px 14px rgba(var(--shd), .35),
    0 0 16px var(--accGlow);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
[data-nxs='island'][data-ind='bubble'] [data-nxs='indicator'] {
  top: 50%;
  width: 58px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 23px;
  border: none;
  background: radial-gradient(closest-side, rgba(var(--ink), .22), rgba(var(--ink), .05) 70%, transparent);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: blur(1px);
}
[data-nxs='island'][data-ind='lamp'] [data-nxs='indicator'] {
  top: 0;
  width: 30px;
  height: 3px;
  transform: translateX(-50%);
  border: none;
  border-radius: 0 0 3px 3px;
  background: var(--lampC);
  box-shadow: 0 0 12px 3px var(--lampGlow), 0 22px 30px 6px rgba(var(--ink), .14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── 8. Island tabs — THE ONE BLOCK ───────────────────────────────────
   Brock 2026-09-23, mockups/icons-rework-2026-09-22.html variant 2 ("ink
   only · no pill · filled · Set 1 · clock & cap"):
     · icon 26px, hit target 52px, stroke 1.7, no etched/lit filter;
     · rest ink at .55, active ink at .98 — always --chromeInk, never accent;
     · the outline twin (data-glyph='o') cross-fades to the filled twin
       (data-glyph='f') on the active tab; no indicator, no visible label.
   This block REPLACES the three size overrides that used to trail this file
   (22px @1.5 / 25px @1.7 / 22px). Sizes for the island live here only.
   Canvas note: the prototype still ships one svg per tab with a label; the
   glyph-twin rules are keyed on data-glyph so that markup is untouched. */
[data-nxs='island'] [data-nxs='tab'] {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  align-self: center;
  height: 52px;
  min-height: 52px;
  border-radius: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: rgba(var(--chromeInk), .55);
  transition: color .18s ease;
}
[data-nxs='island'] [data-nxs='tab'][data-active='true'] {
  color: rgba(var(--chromeInk), .98);
}
html [data-nxs='island'] [data-nxs='tab'] svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.7;
  color: inherit;
  filter: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2, 1.4, .4, 1);
}
html [data-nxs='island'] [data-nxs='tab'][data-active='true'] svg { filter: none; }
[data-nxs='island'] [data-nxs='tab'] svg[data-glyph] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
[data-nxs='island'] [data-nxs='tab'] svg[data-glyph='f'] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
}
[data-nxs='island'] [data-nxs='tab'][data-active='true'] svg[data-glyph='f'] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
[data-nxs='island'] [data-nxs='tab'][data-active='true'] svg[data-glyph='o'] { opacity: 0; }
/* Label — canvas only (the React island renders none). */
[data-nxs='island'] [data-nxs='tab-label'] {
  font-size: .8125rem;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(var(--chromeInk), .55);
  text-shadow: none;
  transition: color .16s;
}
[data-nxs='island'] [data-nxs='tab'][data-active='true'] [data-nxs='tab-label'] {
  font-weight: 600;
  color: rgba(var(--chromeInk), .98);
  text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-nxs='island'] [data-nxs='tab'],
  [data-nxs='island'] [data-nxs='tab'] svg,
  [data-nxs='island'] [data-nxs='tab-label'] { transition: none !important; }
}

/* ── 9. Legibility guard ──────────────────────────────────────────────
   White ink on translucent theme-tinted glass. Glass mode only — the solid
   material has enough body to carry the text on its own. The shadow is a
   literal black (not --shd): it is a legibility guard, not a theme surface. */
html [data-nxs='topbar'] { text-shadow: none; }
html:not([data-mat-topbar='solid']) [data-nxs='topbar'] svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
html:not([data-mat-island='solid']) [data-nxs='island'] { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
html:not([data-mat-island='solid']) [data-nxs='island'] svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }

/* The per-control light (etched / lit / glow) is deliberately more specific
   than the guard above, so it wins in both materials exactly as it did when it
   was an inline style on the canvas. Re-stated after the guard for source
   order clarity. */
html [data-nxs='topbar'] [data-nxs='iconbtn'] svg { filter: var(--nxsEtched); }
html [data-nxs='topbar'] [data-nxs='iconbtn'][data-listening='true'] svg { filter: none; }
html [data-nxs='topbar'] [data-nxs='code'] svg { filter: none; }
/* Island tab light: none — see §8 (the one block). */

/* ── 10. Materials — Theme Solid + reduced transparency ───────────────── */
html[data-mat-topbar='solid'] [data-nxs='topbar'] {
  background: rgb(var(--chromeSolid)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(var(--chromeInk), .18) !important;
  box-shadow: var(--matSolidShadow) !important;
}
html[data-mat-island='solid'] [data-nxs='island'] {
  background: rgb(var(--chromeSolid)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(var(--chromeInk), .18) !important;
  box-shadow: var(--matSolidShadow) !important;
}
@media (prefers-reduced-transparency: reduce) {
  [data-nxs='topbar'], [data-nxs='island'] {
    background: rgb(var(--chromeSolid)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [data-nxs='indicator'] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── 11. Narrow widths ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  [data-nxs='topbar'] { padding-inline: 10px; gap: 6px; }
  [data-nxs='top-actions'] { gap: 4px; }
  /* The dateline does not fit on a phone and never did. Inner bar width at
     390px is 364px; the mark (44) and the three controls (140) take 196, and
     the greeting alone is 129px ("Good morning") to 195px ("Good morning,
     Brock") at Georgia 20px. There is no width left. Before this file was
     fixed the greeting simply painted over it; giving the greeting its
     ellipsis instead left the dateline as an 8px "M" stub. Hidden outright at
     the width the bar already tightens at — the canvas reference shell has no
     dateline at all. Above 600px the bar is ≥558px inside and both fit. */
  [data-nxs='dateline'] { display: none; }
}
@media (max-width: 360px) {
  [data-nxs='topbar'] { padding-inline: 8px; gap: 4px; }
  [data-nxs='top-actions'] { gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-nxs='indicator'],
  [data-nxs='tab'] svg,
  [data-nxs='tab-label'],
  [data-nxs='iconbtn'] { transition: none !important; animation: none !important; }
}

/* Approved September 2026 refinement: lighter optics, unchanged tap targets. */
[data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code),
[data-nxs='topbar'] [data-nxs='iconbtn'] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
[data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code):hover,
[data-nxs='topbar'] [data-nxs='iconbtn']:hover { background: rgba(var(--chromeInk), .09); }
[data-nxs='topbar'] svg { stroke-width: 1.5; }
[data-nxs='top-actions'] svg { width: 21px; height: 21px; }
[data-nxs='mark-ring'] { inset: 5px; }
[data-nxs='topbar'] [data-nxs='greeting'] { font-size: 1.125rem; }
@media (prefers-reduced-motion: reduce) {
  [data-nxs='topbar'] svg, [data-nxs='island'] svg { animation: none !important; }
}

.nxs-date-compact { display: none; }
@media (max-width: 600px) {
  [data-nxs='topbar'] [data-nxs='greeting'] {
    padding: 5px 0; margin: 0; min-height: 44px; max-width: 100%;
    box-sizing: border-box; font-size: 1.0625rem; line-height: 21px;
  }
  .nxs-greeting-text { display: block; overflow: hidden; text-overflow: ellipsis; }
  .nxs-date-compact { display: block; font: .6875rem/1.4 -apple-system, BlinkMacSystemFont, sans-serif; color: rgba(var(--chromeInk), .85); overflow: hidden; text-overflow: ellipsis; }
}

/* The light moves on a composited track; no per-frame left/layout or nested blur. */
[data-nxs='indicator-track'] {
  position: absolute; left: 8px; top: 0; bottom: 0;
  width: calc((100% - 16px) / 5);
  transform: translate3d(calc(var(--nxs-tab, 0) * 100%), 0, 0);
  transition: transform .34s cubic-bezier(.22,.8,.25,1);
  pointer-events: none;
  will-change: transform;
}
[data-nxs='island'] [data-nxs='indicator-track'] [data-nxs='indicator'] {
  left: 50%; transition: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-nxs='indicator-track'] { transition: none; }
}

.nxs-greeting-short { display: none; }
@media (max-width: 420px) {
  .nxs-greeting-full { display: none; }
  .nxs-greeting-short { display: inline; }
}

/* The themed toolbar is darker than the page in light themes too. */
[data-nxs='topbar'] .nxs6-iconbtn.nxs6-code { color: rgba(var(--chromeInk), .96); }

/* September 12 visual study: quiet, viewport-anchored edges and stable controls. */
[data-nxs='topbar'] { height:var(--nxs-toolbar-height, 64px); border-radius:24px; padding-inline:12px; gap:8px; }
[data-nxs='topbar'] [data-nxs='greet-wrap'] { min-width:0; }
[data-nxs='topbar'] [data-nxs='greeting'] { font-size:1.25rem; line-height:1.18; text-shadow:none; white-space:normal; overflow:visible; }
[data-nxs='greeting'][data-contextual='true'] { cursor:default; }
.nxs-context-title { display:block; overflow-wrap:anywhere; }
[data-nxs='topbar'] [data-nxs='top-actions'] { gap:4px; flex:none; }
[data-nxs='topbar'] .nxs6-iconbtn { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; flex:none; }
[data-nxs='topbar'] .nxs6-iconbtn svg { width:24px; height:24px; stroke-width:1.7; }
[data-nxs='topbar'] .nxs6-iconbtn.nxs6-code { color:var(--cbInk, #adc8f7); }
[data-nxs='island'] { height:var(--nxs-toolbar-height, 64px); border-radius:24px; }
/* Island tab size, stroke, light and label: §8 only — do not re-declare here. */
[data-nxs='island'] [data-nxs='indicator-track'] [data-nxs='indicator'] { width:calc(100% - 4px); max-width:74px; height:56px; border-radius:18px; border:0; background:rgba(var(--chromeInk),.12); box-shadow:inset 0 1px 0 rgba(var(--chromeInk),.2); }
.nxs-edge-blur { position:fixed; inset-inline:0; pointer-events:none; z-index:89; }
.nxs-edge-blur-top { top:0; height:calc(120px + env(safe-area-inset-top,0px)); }
.nxs-edge-blur-bottom { bottom:0; height:calc(126px + env(safe-area-inset-bottom,0px)); }
.nxs-edge-blur i { position:absolute; inset:0; --edge-blur:3px; --edge-solid:48%; --edge-end:100%; backdrop-filter:blur(var(--edge-blur)); -webkit-backdrop-filter:blur(var(--edge-blur)); mask-image:linear-gradient(to bottom,black var(--edge-solid),transparent var(--edge-end)); -webkit-mask-image:linear-gradient(to bottom,black var(--edge-solid),transparent var(--edge-end)); }
.nxs-edge-blur i:nth-child(2) { --edge-blur:8px; --edge-solid:28%; --edge-end:84%; }
.nxs-edge-blur i:nth-child(3) { --edge-blur:16px; --edge-solid:12%; --edge-end:66%; }
.nxs-edge-blur-bottom i { mask-image:linear-gradient(to top,black var(--edge-solid),transparent var(--edge-end)); -webkit-mask-image:linear-gradient(to top,black var(--edge-solid),transparent var(--edge-end)); }
/* Keep the existing native-wide blur workaround; opt in only the six bounded
   edge layers. No card or toolbar gains another nested blur layer on iOS. */
html.native-app .nxs-edge-blur i { backdrop-filter:blur(var(--edge-blur)) !important; -webkit-backdrop-filter:blur(var(--edge-blur)) !important; }
.nxs-edge-blur::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,var(--color-background),transparent); opacity:.28; }
.nxs-edge-blur-bottom::after { background:linear-gradient(to top,var(--color-background),transparent); }
@media(max-width:600px) {
 [data-nxs='topbar'] { padding-inline:8px; gap:4px; }
 [data-nxs='topbar'] [data-nxs='greeting'] { font-size:1.125rem; line-height:1.18; }
 [data-nxs='topbar'] .nxs-date-compact { font-size:.75rem; line-height:1.35; margin-top:3px; }
 [data-nxs='topbar'] [data-nxs='top-actions'] { gap:2px; }
}
@media(prefers-reduced-transparency:reduce) { .nxs-edge-blur { display:none; } }
@media(prefers-reduced-motion:reduce) { [data-nxs='indicator-track'] { transition:none; } }

/* The shift-progress arc ends in round caps instead of gradient wedges. */
[data-nxs='mark-btn'] [data-nxs='mark-ring'][data-round='true'] {
  background: transparent;
  -webkit-mask: none;
  mask: none;
  color: rgb(var(--ink));
}
[data-nxs='mark-ring'][data-round='true'] svg { display: block; overflow: visible; }
[data-nxs='mark-ring'][data-round='true'] circle[stroke-dasharray] { transition: stroke-dasharray .2s linear; }
@media (prefers-reduced-motion: reduce) {
  [data-nxs='mark-ring'][data-round='true'] circle[stroke-dasharray] { transition: none; }
}

/* Light themes use pale tinted frost, with clear dark controls and a fine rim. */
html[data-nxs-mode='light'] [data-nxs='topbar'],
html[data-nxs-mode='light'] [data-nxs='island'] {
  text-shadow: none;
  border-color: rgba(var(--chromeInk), .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 6px 18px rgba(var(--shd),.14);
}
html[data-nxs-mode='light'] [data-nxs='topbar'] svg,
html[data-nxs-mode='light'] [data-nxs='island'] svg { filter: none; }

/* OT is metadata, not a competing column that can collapse the greeting. */
@media (max-width:600px) {
  [data-nxs='topbar'] [data-nxs='greet-wrap']:has([data-nxs='top-status']) {
    flex-direction:column; align-items:flex-start; justify-content:center; gap:2px;
  }
  [data-nxs='topbar'] [data-nxs='greet-wrap']:has([data-nxs='top-status']) [data-nxs='greeting'] {
    width:100%; min-height:0; padding:0; margin:0; line-height:1.12;
  }
  [data-nxs='topbar'] .nxs-greeting-text,
  [data-nxs='topbar'] .nxs-context-title {
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  [data-nxs='greet-wrap']:has([data-nxs='top-status']) .nxs-greeting-full { display:none; }
  [data-nxs='greet-wrap']:has([data-nxs='top-status']) .nxs-greeting-short { display:inline; }
  [data-nxs='greet-wrap']:has([data-nxs='top-status']) .nxs-date-compact { margin-top:1px; line-height:1.2; }
  [data-nxs='topbar'] [data-nxs='top-status'] {
    max-width:100%; box-sizing:border-box; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; line-height:1.15;
    padding:2px 5px; letter-spacing:.035em;
  }
}

/* ── The Station: six icon tabs in the centre slot ─────────────────────
   src/components/breakroom/BreakroomTopBar.tsx owns the markup and
   breakroom.css the behaviour; these rules re-anchor the colours inside
   the chrome ink scope (--ink is --chromeInk here — that is intended) and
   let the tabs stretch to the bar's full height. */
[data-nxs='topbar'] [data-nxs='greet-wrap']:has(.br-tabs) { align-items: stretch; overflow: visible; }
[data-nxs='topbar'] .br-tabs { min-width: 0; }
/* One theme accent for every unselected toolbar icon, including The Station. */
html [data-nxs='topbar'], html [data-nxs='island'] {
  --nxs-toolbar-icon-rest: var(--linkC);
}
html [data-nxs='topbar'] .br-tabs > .br-tab,
html [data-nxs='island'] [data-nxs='tab'],
html [data-nxs='topbar'] .nxs6-iconbtn.nxs6-code {
  color: var(--nxs-toolbar-icon-rest);
}
html [data-nxs='topbar'] .br-tabs > .br-tab::after { content: none; }
/* Keep the filled silhouettes visible at rest, as on the bottom toolbar. */
html [data-nxs='topbar'] .br-tabs > .br-tab .o { display: none; }
html [data-nxs='topbar'] .br-tabs > .br-tab .f {
  opacity: 1;
  transform: translate(-50%, -56%);
}
html [data-nxs='topbar'] .br-tabs > .br-tab[aria-current='page'] {
  color: var(--nxs-nav-selected);
}
html [data-nxs='topbar'] .br-tabs > .br-tab svg {
  width: 26px; height: 26px;
  filter: none;
  transition: filter .22s ease;
}
html [data-nxs='topbar'] .br-tabs > .br-tab[aria-current='page'] svg {
  filter: var(--nxs-toolbar-icon-glow);
}
html [data-nxs='topbar'] .br-tabs > .br-tab:focus-visible {
  outline: 2px solid var(--focusC); outline-offset: -4px; border-radius: 12px;
}

/* September 25 selections: filled silhouettes, white illumination in both theme modes.
   No tile or painted cutout behind the icon; the tinted glass stays visible. */
html {
  --nxs-nav-selected: #fff;
  /* One white halo for Station, Search/Dictate and the bottom toolbar. */
  --nxs-toolbar-icon-glow: drop-shadow(0 0 5px rgba(255, 255, 255, .5));
}
html [data-nxs='island'] [data-nxs='tab'][data-active='true'] {
  color: var(--nxs-nav-selected);
}
html [data-nxs='island'] [data-nxs='tab'] svg {
  width: 26px; height: 26px;
  transition: opacity .18s ease, filter .22s ease, transform .22s ease;
}
html [data-nxs='island'] [data-nxs='tab'][data-active='true'] svg {
  filter: var(--nxs-toolbar-icon-glow);
}

/* Search / dictation light only the glyph. Code Blue keeps its own capsule. */
html [data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code),
html [data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code):hover {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--nxs-toolbar-icon-rest);
  /* Touch hover must not flash white before the selected state takes over. */
  transition: transform 80ms ease;
}
html [data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code) svg {
  color: inherit; filter: none; transition: none;
}
html [data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code)[data-active='true'] {
  color: var(--nxs-nav-selected);
}
html [data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code)[data-active='true'] svg {
  filter: var(--nxs-toolbar-icon-glow);
}

@media (prefers-reduced-motion: reduce) {
  html [data-nxs='topbar'] .br-tabs > .br-tab svg { transition: none; }
}

/* Recording motion is tied to live listening, never to transcription or search. */
html [data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code)[data-listening='true'] svg {
  transform-box: fill-box;
  transform-origin: center;
  animation: nxs-mic-listening 1.6s ease-in-out infinite;
}
html [data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code)[data-active='true']:disabled {
  opacity: 1;
}
@keyframes nxs-mic-listening {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  html [data-nxs='topbar'] .nxs6-iconbtn:not(.nxs6-code)[data-listening='true'] svg {
    animation: none;
  }
}

/* Identity and Home recognition share the toolbar's theme accent. The mask
   preserves the approved N artwork; progress still controls the ring arc. */
[data-nxs='topbar'] [data-nxs='greeting'][data-contextual='false'],
[data-nxs='mark-btn'] [data-nxs='mark-ring'][data-round='true'] {
  color: var(--nxs-toolbar-icon-rest, var(--linkC));
}
[data-nxs='mark-btn'][data-overtime='true'] [data-nxs='mark-ring'] {
  outline-color: var(--nxs-toolbar-icon-rest, var(--linkC));
}
[data-nxs='mark'][data-tinted='true'] {
  display:block;
  background:var(--nxs-toolbar-icon-rest, var(--linkC));
  -webkit-mask:url('/v6/public/brand/nexus-n-mark-transparent.png') center / contain no-repeat;
  mask:url('/v6/public/brand/nexus-n-mark-transparent.png') center / contain no-repeat;
  filter:none;
}

/* Both responsive date presentations follow the toolbar accent. */
[data-nxs='topbar'] [data-nxs='dateline'],
[data-nxs='topbar'] .nxs-date-compact {
  color: var(--nxs-toolbar-icon-rest, var(--linkC));
}

/* Approved soft-window toolbar: tap to search, hold to dictate. */
[data-nxs='topbar'][data-soft-toolbar] {gap:8px;padding-inline:10px;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Splash proportions: the letter occupies 42% of the ring diameter. */
[data-soft-toolbar] [data-nxs='mark-btn'] {width:52px;height:52px}
[data-soft-toolbar] [data-nxs='mark-ring'] {inset:0}
[data-soft-toolbar] [data-nxs='mark'] {width:22px;height:22px}
[data-soft-toolbar] .nxs-soft-window {display:block;flex:1;min-width:0;height:44px;border-radius:15px;background:color-mix(in srgb,var(--linkC) 12%,transparent);color:var(--nxs-toolbar-icon-rest,var(--linkC));overflow:hidden}
[data-nxs='topbar'] .nxs-soft-caption {font-family:var(--font-sans,inherit);text-align:center;position:relative;height:100%;padding:5px 12px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;outline-offset:-3px}
.nxs-soft-caption small {font-size:10px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxs-soft-caption strong {font-size:17px;font-weight:650;line-height:1.2;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:nxs-caption-in .25s ease}
.nxs-soft-overtime {position:absolute;right:9px;top:6px;font-size:9px;background:rgb(var(--chromeC));border-radius:6px;padding:3px}
.nxs-soft-caption:has(.nxs-soft-overtime) {padding-right:85px}
[data-soft-toolbar] [data-nxs='top-actions'] {flex:none;gap:0}
[data-soft-toolbar] .nxs6-iconbtn svg {width:26px!important;height:26px!important}
.nxs-soft-search,.nxs-inline-query {height:100%;min-width:0}
.nxs-soft-search[hidden] {display:none}
.nxs-inline-query {display:flex;align-items:center}
[data-nxs='topbar'] .nxs-inline-query input {flex:1;width:0;min-width:0;height:44px;border:0;outline:0;box-shadow:none;border-radius:0;background:none;color:rgb(var(--chromeInk));padding:0 0 0 12px;font:inherit;font-size:16px;user-select:text;-webkit-user-select:text}
.nxs-inline-query input::placeholder {color:rgba(var(--chromeInk),.65)}
[data-nxs='topbar'] .nxs-query-mic,.nxs-soft-stop {display:grid;place-items:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--nxs-toolbar-icon-rest,var(--linkC))}
.nxs-query-mic svg {width:26px;height:26px}
[data-nxs='topbar'] .nxs-query-mic[data-active='true'] {color:white;filter:drop-shadow(0 0 5px #fff6)}
.nxs-query-mic[data-listening='true'] svg {animation:nxs-query-pulse 1.5s ease-in-out infinite}
.nxs-soft-listening {height:100%;display:flex;align-items:center;padding-left:12px;gap:8px;font-size:11px;color:white}
.nxs-soft-listening>span:first-child {flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nxs-soft-stop {color:inherit;font-size:18px}
.nxs-voice-wave {display:flex;align-items:center;gap:3px;height:32px;flex:none}
.nxs-voice-wave i {width:3px;border-radius:6px;background:currentColor;animation:nxs-wave 900ms ease-in-out infinite alternate}
[data-soft-toolbar][data-voice-active='true'] [data-nxs='mark-ring'] {color:var(--nxs-toolbar-icon-rest,var(--linkC))}
.nxs-toolbar-transcript {position:fixed;z-index:1300;top:var(--nxs-content-top,100px);left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 24px));max-height:calc(var(--nxs-visible-height,100dvh) - var(--nxs-content-top,100px) - 100px);overflow:auto;overscroll-behavior:contain;border-radius:22px;padding:18px;background:rgb(var(--sheet));color:rgb(var(--ink));border:1px solid rgba(var(--ink),.12);box-shadow:0 16px 50px rgba(var(--shd),.25)}
.nxs-transcript-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.nxs-transcript-heading span,.nxs-toolbar-transcript label {font-size:12px;color:rgba(var(--ink),.65)}
.nxs-toolbar-transcript textarea {display:block;width:100%;min-height:120px;max-height:30dvh;resize:vertical;border:1px solid rgba(var(--ink),.15);border-radius:14px;background:rgba(var(--ink),.03);color:inherit;padding:12px;margin-top:8px;font:inherit;font-size:16px;line-height:1.6}
.nxs-transcript-actions {display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.nxs-transcript-actions button {min-height:44px;padding:8px 16px;border-radius:99px;border:0;background:rgba(var(--ink),.08);color:inherit;font:inherit}
.nxs-transcript-actions button:last-child {background:var(--linkC);color:rgb(var(--sheet))}
.nxs-transcript-actions button:disabled {opacity:.45}
.nxs-inline-results-heading {justify-content:space-between;font-size:12px}
.nxs6-search-overlay[data-inline-toolbar='true'] {padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.12)}
@keyframes nxs-wave {from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes nxs-query-pulse {50%{opacity:.7;transform:scale(.94)}}
@keyframes nxs-caption-in {from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) {.nxs-voice-wave i,.nxs-query-mic svg,.nxs-soft-caption strong{animation:none!important}}
.nxs-caption-viewport {display:block;min-width:0;width:100%;overflow:hidden}
.nxs-caption-words {display:block;text-align:center;width:max-content;min-width:100%;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;white-space:nowrap}
.nxs-soft-caption:has(small) .nxs-caption-words {font-size:17px}
.nxs-caption-viewport[data-overflow='true'] .nxs-caption-words {animation:nxs-caption-scroll var(--caption-duration) linear infinite}
@keyframes nxs-caption-scroll {0%,20%{transform:translateX(0)}70%,85%{transform:translateX(var(--caption-travel))}100%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce) {.nxs-caption-viewport[data-overflow='true']{overflow-x:auto;scrollbar-width:none;touch-action:pan-x}.nxs-caption-viewport[data-overflow='true'] .nxs-caption-words{animation:none}}
/* Shared geometry, including The Station's social toolbar. Cards use a
   12px phone gutter / 16px wide gutter; glass reaches 6px / 8px past it. */
:root { --nxs-toolbar-height:64px; --nxs-toolbar-gutter:8px; }
@media(max-width:600px) { :root { --nxs-toolbar-gutter:6px; } }
html [data-nxs='topbar'], html [data-nxs='island'] {
  width:min(1584px,calc(100% - 2 * max(var(--nxs-toolbar-gutter),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))));
  height:var(--nxs-toolbar-height);
  min-height:var(--nxs-toolbar-height);
  max-height:var(--nxs-toolbar-height);
  box-sizing:border-box;
}


/* The focused input must not draw a vertical edge beside its microphone. */
[data-nxs="topbar"] .nxs-inline-query input:focus {box-shadow:none!important;border:0!important;outline:none}

.nxs-query-entry {position:relative;flex:1;min-width:0;height:44px}
.nxs-query-entry-legacy {display:contents}
[data-nxs='topbar'] .nxs-query-entry input {width:100%;padding-inline:12px 0}
.nxs-query-placeholder {position:absolute;inset:0 0 0 12px;display:flex;align-items:center;pointer-events:none;color:rgba(var(--chromeInk),.65)}
.nxs-query-placeholder .nxs-caption-words {font-size:16px;font-weight:400;letter-spacing:normal;text-align:left}

/* Code Blue keeps its hit area and accent glyph without a separate tile. */
html [data-nxs='topbar'] .nxs6-iconbtn.nxs6-code,
html [data-nxs='topbar'] .nxs6-iconbtn.nxs6-code:hover,
html [data-nxs='topbar'] .nxs6-iconbtn.nxs6-code:active {
  background: transparent; border-color: transparent; box-shadow: none;
}

/* Equal controls center the soft window geometrically. The N's ring is its
   outer icon boundary, not extra space outside the shared glyph footprint. */
:root { --nxs-toolbar-glyph-size:32px; }
html [data-nxs='topbar'][data-soft-toolbar] [data-nxs='mark-btn'],
html [data-nxs='topbar'][data-soft-toolbar] .nxs6-code {
  width:44px; height:44px; min-width:44px; padding:0; flex:0 0 44px;
}
html [data-nxs='topbar'] [data-nxs='mark-btn'] [data-nxs='mark-ring'][data-round='true'] {
  inset:4px; width:36px; height:36px;
}
html [data-nxs='topbar'] [data-nxs='mark'] {width:18px;height:18px}
html [data-nxs='topbar'] .nxs6-code svg,
html [data-nxs='topbar'] .br-tabs > .br-tab svg,
html [data-nxs='island'] [data-nxs='tab'] svg {
  width:var(--nxs-toolbar-glyph-size)!important;
  height:var(--nxs-toolbar-glyph-size)!important;
}


/* Toolbar lettering stays crisp in every theme and interaction state. */
html [data-nxs='topbar'] :is(.nxs-soft-window,.nxs-soft-window *,[data-nxs='greeting'],[data-nxs='dateline'],.nxs-date-compact) {text-shadow:none}

/* Do not leave the glass island visible through or around the iOS keyboard. */
html[data-nxs-keyboard-open='true'] [data-nxs='island'] {visibility:hidden!important;pointer-events:none!important}