/* ================= THE MUSIC NETWORK — the chrome the three apps share =================
 * What makes the map, the portfolio and the studio one place (Content-Studio/Network/UX_Review.md,
 * step 2): the company's logo with the room's name, and the way back to the room you came from.
 * The tokens (network-tokens.css) come first; this file only draws these two things.
 *
 * EDIT IT ONLY HERE: Credits_Claude_Code_Music_Only/app/swajbeats-catalog-v5/network-chrome.css.
 * scripts/sync-tokens.sh copies it into the map (src/) and the studio (UI/, and inline in the page),
 * with the logo files it names (assets/brand/).
 *
 * Colours: --nb-ink, --nb-bg, --nb-line and --nb-hover default to the tokens' --color-* set (the
 * portfolio's light/dark switch); the map and the studio, which pick their sets themselves, set
 * these four on :root to their own ink and ground.
 */
:root{
  --nb-ink:var(--color-ink);
  --nb-bg:var(--color-bg);
  --nb-line:var(--color-line-strong);
  --nb-hover:var(--color-surface-2);
}
/* The room: the logo and its name (MAP, PORTFOLIO, STUDIO), a link to the room's front door. */
.nb-room{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0 2px;color:var(--nb-ink);text-decoration:none;font:600 11.5px/1 var(--font-sans);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.nb-room:hover,.nb-room:focus-visible{text-decoration:none;color:var(--nb-ink);outline:0}
.nb-room:focus-visible{border-radius:6px;box-shadow:0 0 0 2px var(--nb-bg),0 0 0 4px var(--nb-ink)}
/* The logo, INSPO MUSIC GROUP (the owner, 2026-10-18), where the rounded-square mark was. One white-on-clear file per
   variant in assets/brand/, used as a mask so it takes the theme's ink in light and dark. Public pages keep these files
   for good, so a new logo comes under a new name (the vector: inspo-wordmark.svg / inspo-logo.svg, already allowed):
   put it in assets/brand/, change the two urls here, run scripts/sync-tokens.sh. The INSPO wordmark in the bars,
   where "MUSIC GROUP" would be too small to read; the full lockup (.nb-lockup) only where it can be 44px tall or more.
   The element carries the name itself (role="img" aria-label="Inspo Music Group"). */
.nb-mark{flex:none;display:block;width:calc(16px * 890 / 159);height:16px;background:var(--nb-ink);-webkit-mask:url(assets/brand/inspo-wordmark.png) center/contain no-repeat;mask:url(assets/brand/inspo-wordmark.png) center/contain no-repeat}
.nb-mark.nb-lockup{width:calc(44px * 890 / 243);height:44px;-webkit-mask-image:url(assets/brand/inspo-logo.png);mask-image:url(assets/brand/inspo-logo.png)}
/* The way back: an outlined pill with an arrow, only on a page opened from another room. */
.nb-back{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px 0 11px;border:1px solid var(--nb-line);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--nb-bg) 72%,transparent);color:var(--nb-ink);font:600 13px/1 var(--font-sans);text-decoration:none;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nb-back::before{content:"\2190";font-weight:500}
.nb-back:hover,.nb-back:focus-visible{background:var(--nb-hover);text-decoration:none;color:var(--nb-ink);outline:0}
.nb-back:focus-visible{box-shadow:0 0 0 2px var(--nb-bg),0 0 0 4px var(--nb-ink)}
.nb-back[hidden]{display:none}