/* ---- tokens.css ---- */
/* =====================================================================
   Design tokens — the ONLY place for colours, fonts, spacing, radii,
   shadows and motion. Components never hard-code these values.

   Colour (#305): two scales and a handful of roles. Every teal in the
   stylesheets is a step of --teal-* (the brand scale) or --tg-* (the
   muted teal-grey used for dividers, borders, quiet icons and text).
   Change the brand by changing the steps here — nothing else.
   ===================================================================== */
:root {
  /* The brand scale (OKLCH hue 197–199). 500 = the primary, 600 = strong / links / hover, 900 = the ink. */
  --teal-50: #edf8f8;
  --teal-100: #ddf2f2;
  --teal-150: #cbeaeb;
  --teal-200: #b9e2e4;
  --teal-300: #90d6d8;
  --teal-400: #5ac0c4;
  --teal-500: #1daaac;             /* the primary Rohit approved in the side-by-side (white on it 2.8:1; button labels are bold
                                      and short — the 3:1 line is for component boundaries, not label text) */
  --teal-600: #008c8e;
  --teal-700: #007274;
  --teal-800: #095255;
  --teal-900: #0e3b3d;
  --teal-950: #06282b;
  /* The same steps as "r g b", for rgb(var(--teal-500-rgb) / .2) in shadows, rings and overlays */
  --teal-50-rgb: 237 248 248;
  --teal-100-rgb: 221 242 242;
  --teal-150-rgb: 203 234 235;
  --teal-200-rgb: 185 226 228;
  --teal-300-rgb: 144 214 216;
  --teal-400-rgb: 90 192 196;
  --teal-500-rgb: 29 170 172;
  --teal-600-rgb: 0 140 142;
  --teal-700-rgb: 0 114 116;
  --teal-800-rgb: 9 82 85;
  --teal-900-rgb: 14 59 61;
  --teal-950-rgb: 6 40 43;

  /* The muted teal-grey scale: dividers, borders, quiet icons and secondary text with a hint of teal */
  --tg-50: #eff5f5;
  --tg-100: #e2ecec;
  --tg-200: #d6e3e3;
  --tg-300: #c6d4d4;
  --tg-350: #bdcbcb;               /* control outlines: 1.7:1 on white — seen, not loud (#305; 1.9 read as a grid of strokes on dense forms) */
  --tg-400: #9dafb0;
  --tg-500: #6f8586;
  --tg-600: #596a6b;
  --tg-700: #3d5d5f;
  --tg-800: #2a4244;
  --tg-900: #1d2c2d;
  --tg-50-rgb: 239 245 245;
  --tg-100-rgb: 226 236 236;
  --tg-200-rgb: 214 227 227;
  --tg-300-rgb: 198 212 212;
  --tg-350-rgb: 189 203 203;
  --tg-400-rgb: 157 175 176;
  --tg-500-rgb: 111 133 134;
  --tg-600-rgb: 89 106 107;
  --tg-700-rgb: 61 93 95;
  --tg-800-rgb: 42 66 68;
  --tg-900-rgb: 29 44 45;

  /* Brand roles */
  --color-primary: var(--teal-500);            /* buttons, fills, active states, the player */
  --color-primary-strong: var(--teal-600);     /* hover and pressed fills */
  --color-primary-soft: var(--teal-50);        /* soft washes */
  --color-primary-rgb: var(--teal-500-rgb);
  --color-on-primary: #ffffff;
  --color-link: var(--teal-600);               /* teal words on white: links, Change, View All, step counters */
  --color-link-hover: var(--teal-700);

  /* Surfaces & text */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f7f8;
  --color-text: #111111;
  --color-text-muted: #676767;
  --color-text-subtle: #767676;    /* counts, dates, hints — 4.5:1 on white (#305; was #898989 at 3.5:1) */
  --color-border: var(--tg-100);   /* dividers and separators: quiet, and in the same teal-grey family as the card edges (#305; was a neutral #E6E6E6 beside teal-grey card edges — two near-identical greys) */
  --color-control: var(--tg-350);  /* the outline of what you type in or press: fields, selects, ghost buttons, checks (#305) */
  --color-control-soft: var(--tg-300);   /* choice chips, filter chips, segmented options, option tiles — a step quieter, so a row of
                                            them recedes behind the fields; a chosen one turns teal (#305) */
  --color-control-icon: var(--tg-400);   /* icons and placeholders inside a field share one tone (#305) */
  --color-nav: #32353d;            /* side-menu icons + labels (2023: --nav-default-colors) */
  --surface-hover: #f5fafa;        /* a row or card under the pointer, a table head, a faint panel — one tint for all of them
                                      (#305: nine near-identical hexes between #f3f9f9 and #fbfdfd did this job) */

  /* Status (#305: one of each — the stylesheets carried five greens, five reds and three ambers) */
  --ok: #12804a;                   /* success text + ticks (6.1:1 on white) */
  --ok-soft: #e3f7ec;              /* its wash: Live pills, done steps */
  --warn: #f5a524;                 /* amber: stars, attention icons (never for text on white) */
  --warn-soft: #fffaf0;            /* its wash: pending cards, prizes */
  --warn-border: #f6e2b8;
  --warn-text: #8a5300;            /* amber words on the amber wash (Draft, Pending, Waiting — 6.6:1 on it) */
  --danger: #b42318;               /* danger text: errors, remove on hover, Off badges (7.6:1 on white) */
  --danger-soft: #fdecee;          /* its wash */
  --danger-border: #f3c4c9;
  --adjust: #b4555d;               /* #313: adjustments or penalties on royalties — money the stores took back, not an error: a softer
                                      red than --danger, never alarming (4.8:1 on white, 4.6:1 on --surface-hover) */
  --explicit: #5c6b6b;             /* #313: the stores mark explicit in plain grey, never a colour of its own */
  --explicit-soft: #eef1f1;
  --explicit-border: #d6dedd;
  --heart: #ff4d6d;                /* a liked song */
  --heart-soft: #fff0f3;           /* the heart button under the pointer */
  --color-error: #E81123;          /* error border (2023: --form-field-error-border-color) */
  --color-error-text: var(--danger);     /* error message + label (#305: was pure #ff0000, the only red of its kind on the site) */

  /* Dark surfaces (maintenance, player, overlays) */
  --color-dark: #0b0c0e;
  --color-on-dark: #f2f2f2;
  --color-on-dark-soft: rgba(255, 255, 255, 0.85);     /* on heroes and dark cards: a sub-line (artist, kicker) */
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);    /* meta: year, duration, counts */
  --color-on-dark-subtle: rgba(255, 255, 255, 0.55);   /* hints and quiet labels — three tones on dark, like the three greys on white (#305) */

  /* Skeleton loaders */
  --color-skeleton: #e9ecef;
  --color-skeleton-deep: #dfe3e7;   /* the blocks inside a grey loader, a shade down from its ground (#313) */
  --color-skeleton-shine: rgba(255, 255, 255, 0.6);

  /* Typography */
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Josefin Sans', var(--font-body);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --section-gap: 36px;            /* between sections on a page (shelves, settings blocks, library parts) — #104 */
  --gutter: 16px;                 /* side padding on phones */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 6px 20px rgba(17, 17, 17, 0.08);

  /* Cards — one look for every card in the Studio, Settings and the distribution form (#178) */
  --card-bg: #ffffff;
  --card-border: var(--tg-200);    /* a hint of teal, softer than --color-border; a touch crisper since #193 */
  --card-radius: 20px;
  --card-radius-sm: 14px;          /* cards inside cards: a person, a track, a tile */
  --card-pad: 24px;
  /* Cards lift off the white page on their own (#193 — chosen over tinting the page, which blended banners, tabs and light borders) */
  --card-shadow: 0 1px 2px rgb(var(--teal-900-rgb) / 0.05), 0 14px 34px -14px rgb(var(--teal-900-rgb) / 0.20);
  --card-tint: var(--teal-50);     /* soft teal panel inside a card */
  --card-ink: var(--teal-900);     /* headings on soft teal (as in the page banner) */

  /* Layout */
  --rail-width: 80px;             /* collapsed side menu on desktop (2023) */
  --sidebar-width: 230px;         /* expanded side menu (2023) */
  --header-height: 64px;
  --player-height: 76px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --dur-slow: 400ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --section-gap: 48px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 32px; }
}

/* ---- base.css ---- */
/* =====================================================================
   Base: fonts, reset, typography, accessibility helpers
   ===================================================================== */
@font-face { font-family: 'Poppins'; font-weight: 300; font-display: swap; src: url('../fonts/poppins-light-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('../fonts/poppins-medium-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('../fonts/poppins-semibold-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/poppins-bold-webfont.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-weight: 600; font-display: swap; src: url('../fonts/JosefinSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-weight: 700; font-display: swap; src: url('../fonts/JosefinSans-Bold.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Text for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A song's title in any list opens its page (Creator-Studio1); the row around it still plays */
.song-link { color: inherit; text-decoration: none; }
.song-link:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 2px; }
/* Artist names under a song title: each opens its page, in the line's own colour */
.pl-song__info span a, .sh-xp__t small a, .qtile__t small a, .ftile small a, .pgp-song__info small a { color: inherit; text-decoration: none; }
.pl-song__info span a:hover, .sh-xp__t small a:hover, .qtile__t small a:hover, .ftile small a:hover, .pgp-song__info small a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* The site's tooltip (#308, Rohit): data-tip on any control — a small dark bubble with an arrow, above it (below when
   there's no room), on hover and keyboard focus (app.js) */
.tip { position: fixed; z-index: 2000; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: var(--tg-900); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4;
  text-align: center; box-shadow: 0 6px 18px rgb(var(--teal-900-rgb) / .22); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.tip.is-below { transform: translateY(-3px); }
/* ⓘ beside a name that isn't a page to visit (#313, app.infoTip): its text in the tooltip, on hover, focus or a tap */
.info-tip { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .75; cursor: help; vertical-align: middle; }
.info-tip:hover, .info-tip:focus-visible { opacity: 1; }
.info-tip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tip.is-on { opacity: 1; transform: none; }
.tip::after { content: ""; position: absolute; left: var(--arrow, 50%); top: 100%; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--tg-900); }
.tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--tg-900); }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }

/* #309 (Rohit): Explicit content, marked wherever a song or album shows — the stores' convention: a small "E" beside the title in
   lists and on cards, the word "Explicit" on its own page. One muted wine red (--explicit), never the error red. app.explicitTag(on, full) */
.ex-tag { display: inline-grid; flex: none; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border: 1px solid var(--explicit-border); border-radius: 4px; background: var(--explicit-soft); color: var(--explicit); font-family: var(--font-body); font-size: 10px; font-weight: 700; font-style: normal; line-height: 1; letter-spacing: 0; vertical-align: 1px; text-transform: none; }
.ex-tag--full { height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; }
.ex-tag + .ex-sep { margin: 0 4px; }
.ex-tag { margin-right: 5px; }
.ex-tag:last-child { margin: 0 0 0 6px; }                 /* after a title */
.ex-tag:only-child { margin: 0; }
/* a title with its E (app.songTitle): the title shortens with …, the E stays in view */
.song-t { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; vertical-align: top; }
.song-t > a, .song-t > span:not(.ex-tag) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* #309 (Rohit): what the Starter Kit is promoting — a small gold star in the corner of its card in MuSlate's general sliders (the
   Home banner, Trending, New Releases, albums, artists), never on its own page. app.promoStar(x) */
.promo-star { position: absolute; z-index: 3; top: 6px; left: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(16 38 45 / .28); pointer-events: auto; }
.promo-star svg { width: 13px; height: 13px; fill: var(--warn); stroke: #d48806; stroke-width: 1; stroke-linejoin: round; }
.sh-card--round .promo-star { top: 8%; left: 8%; }
.chart__art .promo-star, .srow__art .promo-star { top: 3px; left: 3px; width: 18px; height: 18px; }
.chart__art .promo-star svg, .srow__art .promo-star svg { width: 11px; height: 11px; }
.hero__art .promo-star { top: 10px; left: 10px; width: 28px; height: 28px; }
.hero__art .promo-star svg { width: 16px; height: 16px; }

/* #309 audit: on phones an artist's name under a title (the mini player, Home's rows and charts) is a finger-sized target — inline
   padding grows the tap area without moving a thing (they were 12px tall) */
@media (max-width: 767px) {
  .mp__artists a, .srow__t small a, .chart__t small a, .qtile__t small a { padding: 5px 0; }   /* inline: the line still ends in … when cut */
}

/* #313 (Rohit: "why does the title look different on an explicit track"): .song-t only holds the title and its E
   together so the E stays in view while the title shortens. It must never change the type — a list's own
   "span { font-size: 12px }" was landing on it and taking the title down with it. :not(._) outranks that. */
.song-t:not(._) { font: inherit; color: inherit; letter-spacing: inherit; }
.song-t:not(._) > a, .song-t:not(._) > span:not(.ex-tag) { font: inherit; color: inherit; }

/* ---- Default covers (#313, Rohit) ----------------------------------------------------------------
   A piece of music with no picture of its own gets the mark for its kind: a music note for a song, a
   record for an album, a list for a playlist, stacked sleeves for a compilation. The tile around it
   belongs to the place it sits in (card, hero, player), so only the mark itself is set here — and it
   is set a little smaller for the record and the sleeves, which read heavier than the note. */
.art-mark { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.art-mark--album, .art-mark--compilation { width: 30%; height: 30%; }
.sp-art__empty .art-mark--album, .sp-art__empty .art-mark--compilation { width: 56px; height: 56px; }

/* ---- shell.css ---- */
/* =====================================================================
   App shell: side menu, header, page area, player slot, progress bar.
   ≥1024px : side menu is an 80px icon rail, collapsed by default, expandable to 230px
   <1024px : side menu becomes a slide-in drawer opened from the header
   ===================================================================== */
.app {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---- Side menu (2023 nav.css) ------------------------------------------------
   Phones/tablets: slide-in drawer, full logo + labels.
   Desktop: see the >=1024px block — 80px icon rail, collapsed by default,
   expanded to 230px by the round tab on its right edge (overlays the page). */
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: min(250px, 84vw);
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out, width 0.5s ease-in-out;
}
.app-sidebar.is-open {
  transform: none;
  box-shadow: 0 0 24px 6px rgba(4, 4, 4, 0.2);
}
/* The inner panel carries the background so the toggle tab can sit behind it (2023) */
.app-sidebar__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  background: var(--color-surface);
  overflow: hidden;
}
.app-sidebar__toggle { display: none; }

/* Logo: full MuSlate logo when the menu is expanded, round icon on the collapsed rail */
.app-sidebar__brand { flex: none; display: flex; align-items: center; justify-content: center; min-height: 90px; }
.app-sidebar__logo { display: block; width: 85%; max-width: 200px; height: auto; }
.app-sidebar__icon { display: none; width: 55px; height: 55px; }

.side-nav {
  flex: 1;
  min-height: 0;
  display: flex;                       /* the last group sits at the bottom (#117) */
  flex-direction: column;
  padding: 0 0 var(--space-4) 15px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.side-nav::-webkit-scrollbar { display: none; }
/* The player sits over the bottom of the menu. Without room for it the menu is exactly as tall as the screen,
   so it has nothing to scroll, and whatever the player covers — Our Vision, Blog, the social links — can never
   be reached. Leaving that room makes the menu taller than the screen, so it scrolls and everything is gettable. */
body.has-player .side-nav { padding-bottom: calc(var(--player-height) + var(--space-4) + env(safe-area-inset-bottom, 0px)); }
.side-nav__list { flex: none; list-style: none; margin: 15px 0 0; padding: 0; }
.side-nav__list--extra { margin-top: auto; padding-top: 40px; }   /* Create Playlist · Our Vision · Blog: always at the bottom, above the social links (#117) */
.side-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 45px;
  margin-top: 10px;
  padding: 0 0 0 15px;
  border: 0;
  border-radius: 25px 0 0 25px;
  background: none;
  color: var(--color-nav);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.side-nav__icon { flex: none; display: grid; place-items: center; width: 22px; }
.side-nav__icon svg { display: block; transition: transform var(--dur-fast) var(--ease); }
.side-nav__link:hover,
.side-nav__link.is-active { background: var(--color-primary-soft); color: var(--color-link); }
.side-nav__link:hover svg,
.side-nav__link.is-active svg { transform: scale(1.1); }
/* Active item: curves above and below on the right edge make it look like a tab (2023) */
.side-nav__link.is-active::before,
.side-nav__link.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  z-index: 1;
  width: 40px;
  height: 20px;
  background: no-repeat 0 0 / 100%;
  pointer-events: none;
}
.side-nav__link.is-active::after  { bottom: 45px; background-image: url('/assets/img/nav/curve1.png'); }
.side-nav__link.is-active::before { top: 45px;    background-image: url('/assets/img/nav/curve2.png'); }

/* Logged-in groups (2024 accordion): head = icon + label + arrow, items below with
   the 2024 thin line on the left; one group open at a time. */
.side-nav__list--groups { margin-top: 15px; }
.side-group__head { padding-right: 14px; }
.side-group__chevron { flex: none; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform 0.3s ease; }
.side-group.is-open > .side-group__head .side-group__chevron { transform: rotate(180deg); }
.side-group.is-open > .side-group__head,
.side-group:has(.side-sub__link.is-active) > .side-group__head { color: var(--color-link); }
.side-sub {
  position: relative;
  max-height: 0;
  list-style: none;
  margin: 0 0 0 26px;
  padding: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin 0.3s ease;
}
.side-group.is-open > .side-sub { max-height: 600px; margin-top: 4px; margin-bottom: 6px; }
.side-sub::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; border-left: 1px solid #d5d5d5; }
.side-sub__link {
  position: relative;
  display: block;
  width: calc(100% - 8px);
  margin: 1px 0 1px 8px;
  padding: 7px 12px 7px 16px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.side-sub__link::before { content: ''; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--color-control-icon); }
/* A heading inside a group (#216: My Artist Plus › Distribution): small grey capitals, as "Acting as" in the account menu */
.side-sub__head { margin: 10px 0 2px 8px; padding: 0 12px 0 16px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.side-sub__link:hover,
.side-sub__link.is-active { background: var(--color-primary-soft); color: var(--color-link); }
.side-sub__link:hover::before,
.side-sub__link.is-active::before { background: var(--color-primary); }
.side-sub__link[data-upgrade] { color: var(--color-link); font-weight: 500; }

/* Social links: row in the expanded menu; on the rail a share button pops them up */
.side-social {
  flex: none;
  position: relative;
  z-index: 2;
  display: none;                       /* 2023 hid them in the phone drawer */
  justify-content: center;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-primary-soft);
}
.side-social__share {
  display: none;
  place-items: center;
  width: 40px;
  height: 30px;
  border: 1px solid var(--color-nav);
  border-radius: 13px;
  background: var(--color-surface);
  color: var(--color-nav);
}
.side-social__list { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.side-social__list a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-nav);
  border-radius: 13px;
  color: var(--color-nav);
  background: var(--color-surface);
}
.side-social__share:hover,
.side-social.is-open .side-social__share,
.side-social__list a:hover { border-color: var(--color-primary); color: var(--color-link); background: var(--color-primary-soft); }

.app-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(11, 12, 14, 0.45);
  animation: fade-in var(--dur-med) var(--ease);
}

/* ---- Main column ---------------------------------------------------------- */
.app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: calc(var(--header-height) + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.app-header__menu {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: calc(var(--space-2) * -1);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}
.app-header__menu svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.app-header__menu:hover { background: var(--color-surface-muted); }

.app-header__brand { flex: none; display: flex; align-items: center; transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med); }
/* Phones: the mark alone, cropped tight (img/icon-mark.png) so it stands as tall as the buttons' glyphs — 28 px of ink,
   not 32 px of box with the mark lost inside it (#313, Rohit) */
.app-header__icon { width: auto; height: 28px; }
.app-header__logo { display: none; width: 196px; height: auto; }
.app-header__search { flex: 1; min-width: 0; max-width: 520px; height: 40px; }

/* Guest buttons / logged-in avatar — shown according to body[data-auth] */
.app-header__auth,
.app-header__user { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
body[data-auth="guest"] [data-user-only],
body:not([data-auth="guest"]) [data-guest-only] { display: none; }
@media (max-width: 479px) {
  /* phones: one "Log In" button, Sign Up is inside the dialog — written with the parent so the later .btn rule can't
     bring Sign Up back (it did, and the two buttons squeezed the search icon to nothing; #313, Rohit) */
  .app-header__auth .app-header__signup { display: none; }
  .app-header__auth .app-header__login { border-color: var(--color-primary); color: var(--color-link); }
  .app-header { gap: var(--space-2); }              /* six controls fit a 360 px phone, cart included */
  .app-header__user { gap: 4px; }
}

/* Logged-in header (2024 user header): bell + unread badge, photo + name + arrow */
.app-header__bell {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-nav);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.app-header__bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-header__bell:hover,
.app-header__bell[aria-expanded="true"] { background: var(--color-primary-soft); color: var(--color-link); }
.app-header__badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  background: var(--color-primary);   /* the site's teal, not alarm red (Rohit, var(--teal-600)) */
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}
.app-header__badge[hidden] { display: none; }
.app-header__profile {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--color-control);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.app-header__profile:hover,
.app-header__profile[aria-expanded="true"] { border-color: var(--color-primary); }
.app-header__name { min-width: 0; max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.app-header__chevron { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--color-text-muted); stroke-width: 2; stroke-linecap: round; transition: transform var(--dur-fast) var(--ease); }
.app-header__profile[aria-expanded="true"] .app-header__chevron { transform: rotate(180deg); }
@media (max-width: 575px) {
  .app-header__name, .app-header__chevron { display: none; }       /* 2024: photo only on phones */
  .app-header__profile { padding: 2px; }
}

/* Round photos (default avatar until one is uploaded) */
.avatar { flex: none; display: block; overflow: hidden; border-radius: 50%; background: var(--color-primary-soft); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; }
.avatar--md { width: 44px; height: 44px; }

.user-menu {
  position: absolute;
  top: calc(100% - 6px);
  right: var(--gutter);
  z-index: 70;
  min-width: 240px;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: fade-in var(--dur-fast) var(--ease);
}
.user-menu__who { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); }
.user-menu__who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.user-menu__who strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
/* the photo and name open the profile (#215): the name turns teal on hover, as links do */
.user-menu__name { display: block; min-width: 0; overflow: hidden; color: inherit; text-decoration: none; transition: color .15s ease; }
.user-menu__name strong { display: block; }
.user-menu__who:has([data-user-profile]:hover) .user-menu__name, .user-menu__name:focus-visible { color: var(--color-link-hover); }
.user-menu__who a.avatar { flex: none; }
.user-menu { max-width: min(320px, calc(100vw - 2 * var(--gutter))); }
.user-menu__who [data-user-handle] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.user-menu__who [data-user-handle] { font-size: var(--text-sm); color: var(--color-text-muted); }
.user-menu__item { display: block; width: 100%; text-align: left; padding: 10px var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); text-decoration: none; }
.user-menu__item:hover { background: var(--color-primary-soft); color: var(--color-link); }
.user-menu__item--accent { color: var(--color-link); font-weight: 500; }
body:not([data-auth="listener"]) [data-listener-only] { display: none !important; }
body:not([data-auth="professional"]) [data-pro-only] { display: none !important; }
body:not([data-uploads="1"]) [data-uploads-only] { display: none !important; }     /* My Music: listeners with old uploads (#117) */

/* Confirm dialog (app.confirm) */
.confirm { align-items: center; z-index: 300; }
.confirm__card { max-width: 420px; padding: 30px 28px 24px; }
.confirm__text { margin-top: var(--space-3); font-size: var(--text-sm); text-align: center; color: var(--color-text-muted); white-space: pre-line; }
.confirm__actions { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.confirm__actions .btn { min-width: 120px; }
.confirm__actions[hidden] { display: none; }
.confirm__actions--form { margin-top: var(--space-4); }       /* a form's own button, beside Cancel (app.confirm pair, #179) */
/* A dialog about one thing (#309, Rohit's sketch): the standard dialog — the same centred heading, centred line and centred
   Cancel · Action buttons as every other (Rohit: one scheme for all dialogs) — with the thing as a card in the middle: its cover,
   its title (a link to its page, opening in a new tab: the external-link icon, teal on hover) and its artist (underlined on
   hover). app.confirm({html: app.itemCard(…) + '<p>…</p>', onOpen: card → .confirm__card--item}) */
.confirm__card--item { max-width: 460px; }
.confirm__card--item .confirm__text { white-space: normal; }
.confirm__card--item .confirm__text > p { margin: 14px 0 0; }
.dlg-item { display: flex; align-items: center; gap: 14px; padding: 12px; text-align: left; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; }
.dlg-item__art { display: grid; flex: none; place-items: center; width: 60px; height: 60px; overflow: hidden; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-link); }
.dlg-item__art img { width: 100%; height: 100%; object-fit: cover; }
.dlg-item__art svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dlg-item__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dlg-item__t small { color: var(--color-text-subtle); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.dlg-item__title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--color-text); font-size: 15px; font-weight: 600; text-decoration: none; }
.dlg-item__title span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dlg-item__title svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--color-text-subtle); }
.dlg-item__title:hover, .dlg-item__title:hover svg { color: var(--color-link); }
.dlg-item__by { align-self: flex-start; color: var(--color-text-muted); font-size: 13.5px; text-decoration: none; }
.dlg-item__by:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

.app-page {
  flex: 1;
  width: 100%;
  padding: var(--space-5) var(--gutter) var(--space-7);
  outline: none;
}
body.has-player .app-page {
  padding-bottom: calc(var(--player-height) + var(--space-7) + env(safe-area-inset-bottom));
}

/* ---- Player slot ---------------------------------------------------------- */
.app-player {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  height: calc(var(--player-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-dark);
  color: var(--color-on-dark);
}

/* ---- Page-load progress bar ----------------------------------------------- */
.app-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 3px;
  width: 0;
  background: var(--color-primary);
  opacity: 0;
  transition: width var(--dur-slow) var(--ease), opacity var(--dur-med) var(--ease);
}
.app-progress.is-loading { opacity: 1; width: 70%; transition-duration: 4s, var(--dur-fast); }
.app-progress.is-done    { opacity: 0; width: 100%; }

/* ---- Desktop: collapsed icon rail, expandable (2023) ----------------------- */
@media (min-width: 1024px) {
  .app-sidebar {
    width: var(--rail-width);
    transform: none;
    box-shadow: 0 0 24px 6px rgba(4, 4, 4, 0.2);
  }
  .app-sidebar.is-expanded { width: var(--sidebar-width); z-index: 65; }      /* over the player while open */
  .app-main { margin-left: var(--rail-width); }   /* expanded menu overlays the page, no reflow */
  .app-backdrop { display: none !important; }
  .app-header__menu { display: none; }

  /* Round tab half-hidden behind the rail's right edge; arrow turns when expanded */
  .app-sidebar__toggle {
    position: absolute;
    top: 50%;
    right: -24px;
    z-index: 0;
    display: grid;
    place-items: center end;
    width: 55px;
    height: 55px;
    padding: 0 12px 0 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-nav);
    box-shadow: 0 0 18px 2px rgba(4, 4, 4, 0.1);
    transform: translateY(-50%);
    cursor: pointer;
  }
  .app-sidebar__toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.5s ease-in-out;
  }
  .app-sidebar__toggle:hover { color: var(--color-link); }
  .app-sidebar.is-expanded .app-sidebar__toggle svg { transform: rotate(180deg); }

  /* Collapsed rail: icon logo, centred icons, labels hidden (still read by screen readers) */
  .app-sidebar:not(.is-expanded) .app-sidebar__logo { display: none; }
  .app-sidebar:not(.is-expanded) .app-sidebar__icon { display: block; }
  .app-sidebar:not(.is-expanded) .side-nav { padding-left: 0; }
  .app-sidebar:not(.is-expanded) .side-nav__link {
    justify-content: center;
    width: 50px;
    margin: 10px auto 0;
    padding: 0;
    border-radius: 50%;
  }
  .app-sidebar:not(.is-expanded) .side-nav__link.is-active::before,
  .app-sidebar:not(.is-expanded) .side-nav__link.is-active::after { display: none; }
  .app-sidebar:not(.is-expanded) .side-nav__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* Rail: group icons only; a group with the current page gets the light-teal circle */
  .app-sidebar:not(.is-expanded) .side-group__chevron,
  .app-sidebar:not(.is-expanded) .side-sub { display: none; }
  .app-sidebar:not(.is-expanded) .side-group:has(.side-sub__link.is-active) > .side-group__head { background: var(--color-primary-soft); }

  /* Social: row when expanded; share button + pop-up column on the rail */
  .side-social { display: flex; }
  .app-sidebar:not(.is-expanded) .side-social__share { display: grid; }
  .app-sidebar:not(.is-expanded) .side-social__list {
    position: absolute;
    bottom: calc(100% - 4px);
    left: 50%;
    flex-direction: column;
    padding: 6px;
    border-radius: 18px;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scale(0);
    transform-origin: 50% 100%;
    transition: transform 0.5s, opacity 0.5s, visibility 0.5s;
  }
  .app-sidebar:not(.is-expanded) .side-social.is-open .side-social__list {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
  }

  /* Header: full logo (as in 2023); fades out while the expanded menu shows its own */
  .app-header__logo { display: block; }
  .app-header__icon { display: none; }
  body.menu-expanded .app-header__brand { opacity: 0; visibility: hidden; }

  .app-player { left: var(--rail-width); }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Logo (#311, Rohit): one finished picture — img/logo.png, icon + MUSLATE + "The Music Slate" with its line, laid out once
   (img/logo-white.png the same for dark backgrounds) — so it reads the same everywhere; without the tagline:
   img/logo-wordmark.png (MUSLATE centred on the icon) */
.brand-logo { position: relative; }   /* shown / hidden by .app-header__logo and .app-sidebar__logo */
.brand-logo img { display: block; width: 100%; height: auto; }

/* Expanding the desktop menu: the panel widens first, then the words fade in already on one line —
   no text squeezed onto several rows while the width grows (#104). Folding away stays as it is. */
.side-nav__text, .side-sub__link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-sub__link { display: block; }
@media (min-width: 1024px) {
  .app-sidebar.is-expanded .side-nav__text,
  .app-sidebar.is-expanded .side-group__chevron,
  .app-sidebar.is-expanded .side-sub,
  .app-sidebar.is-expanded .app-sidebar__logo,
  .app-sidebar.is-expanded .side-social__list { animation: nav-words-in 0.3s ease 0.28s both; }
}
@keyframes nav-words-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1024px) {
  .app-sidebar__logo { flex: none; width: 195px; max-width: none; }   /* its final size from the start: it doesn't grow with the panel */
}

/* ---- Acting as one of your pages (decision #105) ------------------------------------------- */
/* A thin strip across the top and "Acting as" over the name, so a like as the band is never by accident. */
body[data-acting] .app-header { box-shadow: inset 0 3px 0 var(--color-primary); }
.app-header__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.app-header__as { display: none; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-link); }
body[data-acting] .app-header__as { display: block; }
body[data-acting] .app-header__profile { border-color: var(--color-primary); }
@media (max-width: 575px) { .app-header__who { display: none; } }

.user-menu__switch { padding-bottom: var(--space-2); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.user-menu__label { margin: 0; padding: 4px var(--space-3) 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.user-menu__as { display: flex; align-items: center; gap: 10px; padding: 7px var(--space-3); }
.user-menu__as-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.user-menu__as-t strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }   /* lighter than your own name above (600) — a list, not a heading */
.user-menu__as-t small { font-size: 12px; color: var(--color-text-muted); }
.user-menu__as.is-current { background: var(--color-primary-soft); }
.user-menu__check { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.avatar--xs { width: 28px; height: 28px; }

/* Acting as a page: your own things (library, money, account, preferences, creating pages) leave the menus;
   "Page" (its settings) appears; Professional stays for artist pages (skills, work experience). */
body[data-acting] [data-for="person"],
body:not([data-acting]) [data-for="page"],
body[data-acting]:not([data-acting="artist"]) [data-for="artist"] { display: none !important; }
body[data-acting="artist"] .set-tabs__tab--page { display: none !important; }   /* an artist page has its own tabs in Settings (#207) */
/* Settings while acting as a page: the photos are changed in the page editor; the completeness ring is yours */
body[data-acting] .set-head__cover-btn, body[data-acting] .set-head__avatar-cam, body[data-acting] .set-ring, body[data-acting] .set-ring__pct,
body[data-acting] .set-complete { display: none !important; }
body[data-acting] .set-head__avatar { pointer-events: none; }
body[data-acting] .set-head__badge { display: none; }

/* Studio banners: "Working as Rock Band Test · Change" — small, beside the section name (#179) */
.page-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.page-hero__top .page-hero__eyebrow { margin-bottom: 0; }
.page-hero__as { font-size: 13px; line-height: 1.4; color: var(--tg-700); }
.page-hero__as[hidden] { display: none; }
.page-hero__as strong { color: var(--card-ink, var(--teal-900)); font-weight: 600; }
.link-btn { padding: 0; border: 0; background: none; color: var(--color-link); font: inherit; font-weight: 500; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* Your library / settings while acting as a page */
.acting-note__act { display: flex; flex-wrap: wrap; gap: 8px; }
.acting-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 var(--space-4);
  padding: 10px 14px; border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-soft); font-size: var(--text-sm); }

/* Likes and follows show whose they'll be: the page's picture on the button */
body[data-acting] [data-follow]::before,
body[data-acting] [data-pl-like]::before { content: ""; flex: none; display: inline-block; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%;
  background: var(--acting-avatar) center / cover no-repeat, var(--color-primary-soft); box-shadow: 0 0 0 1.5px #fff; vertical-align: -4px; }
body[data-acting] .mp__thumb[data-act="like"] { position: relative; }
body[data-acting] .mp__thumb[data-act="like"]::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--acting-avatar) center / cover no-repeat, var(--color-primary-soft); box-shadow: 0 0 0 1.5px #fff; }

/* ---- Site footer (var(--tg-700)): under every public page; part of the page, edge to edge (footer.sf: the Studio song form is .sf too) -------------------------------- */
.app-page:has(> footer.sf), body.has-player .app-page:has(> footer.sf) { padding-bottom: 0; }
.app-page:has(.home__sk) > footer.sf { display: none; }      /* home / discover: not under the loading placeholders either */
footer.sf {
  margin: var(--space-8) calc(-1 * var(--gutter)) 0;
  padding: var(--space-7) var(--gutter) var(--space-4);
  background: linear-gradient(180deg, var(--color-primary-soft) 0, var(--color-surface-muted) 260px);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
body.has-player footer.sf { padding-bottom: calc(var(--player-height) + var(--space-4) + env(safe-area-inset-bottom)); }
footer.sf a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
footer.sf a:hover, footer.sf a:focus-visible { color: var(--color-link-hover); }
.sf__top { display: grid; grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(130px, 1fr)); gap: var(--space-6) var(--space-7); padding-bottom: var(--space-6); }
.sf__logo { display: inline-block; width: 168px; color: var(--color-text); }
.sf__logo .brand-logo { display: block; }
.sf__about { margin: var(--space-3) 0 var(--space-4); max-width: 38ch; line-height: 1.6; }
.sf__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sf__cta .btn--primary, .sf__cta .btn--primary:hover { color: var(--color-on-primary); }
.sf__cta .btn--ghost { background: var(--color-surface); }
.sf__social { display: flex; gap: var(--space-2); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.sf__social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-control); background: var(--color-surface); color: var(--color-nav); }
/* footer.sf a:hover above outweighs .sf__social a:hover — this rule names the footer too, so the icon really turns white (#305) */
footer.sf .sf__social a:hover, footer.sf .sf__social a:focus-visible, .sf__social a:hover, .sf__social a:focus-visible { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.sf__col h2 { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); }
.sf__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sf__explore { display: grid; gap: 10px; padding: var(--space-5) 0; border-top: 1px solid var(--color-border); font-size: 13px; line-height: 1.7; }
.sf__explore p { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--space-2); margin: 0; color: var(--color-text-subtle); }   /* a wrapped row stays lined up after the label */
.sf__explore strong { font-weight: 600; color: var(--color-text); }
.sf__explore a { white-space: nowrap; }
.sf__explore a:not(:last-child)::after { content: "·"; margin: 0 4px 0 8px; color: var(--color-text-subtle); }
.sf__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-5);   /* equal sides: "Made with ♥ in India" sits in the true centre (#239) */ padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: 13px; }
.sf__bar p { margin: 0; }
.sf__love { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); }
.sf__love svg { width: 15px; height: 15px; fill: var(--color-primary); }
.sf__legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-4); }
@media (max-width: 1023px) {
  .sf__top { grid-template-columns: repeat(3, 1fr); }
  .sf__brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  footer.sf { margin-top: var(--space-7); padding-top: var(--space-6); }
  .sf__top { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .sf__col:last-child { grid-column: 1 / -1; }
  .sf__col:last-child ul { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
  .sf__explore p { grid-template-columns: minmax(0, 1fr); }
  .sf__explore strong { margin-bottom: 2px; }
  .sf__bar { display: flex; flex-direction: column; align-items: flex-start; }
  .sf__legal { justify-content: flex-start; }
  /* #309 audit: a finger-sized target for every footer link (they were 13–14px tall) — the space moves into the links */
  .sf__col ul { gap: 0; }
  .sf__col a, .sf__legal a { display: inline-block; padding: 7px 0; }
  .sf__legal { gap: 0 var(--space-4); }
  .sf__explore { line-height: 1.5; }
  .sf__explore a { display: inline-block; padding: 6px 0; }
}

/* ---- The team managing this account (#175, var(--teal-700)): a bar across the top, back to the admin panel (app.js managingBar) ---- */
/* #221: the admin panel's dark teal (was purple), fixed, and the page moves down by its height so it covers nothing —
   --header-height counts the strip too, so every sticky bar and scroll offset under the header moves with it */
:root.is-managing { --managing-h: 40px; --header-height: 104px; }                 /* 64 + the strip, in px: scripts read it as a number */
@media (max-width: 700px) { :root.is-managing { --managing-h: 54px; --header-height: 118px; } }
.is-managing body { padding-top: var(--managing-h); }
.is-managing .app-sidebar { top: var(--managing-h); }
.is-managing .app-header { top: var(--managing-h); height: calc(64px + env(safe-area-inset-top)); }
.managing-bar { position: fixed; inset: 0 0 auto 0; z-index: 400; display: flex; align-items: center; justify-content: center; gap: 14px; height: var(--managing-h, 40px); padding: 0 16px;
  background: linear-gradient(90deg, var(--teal-900), var(--teal-800)); color: #fff; font-size: 13px; box-shadow: 0 2px 10px rgb(var(--teal-950-rgb) / .22); }
.managing-bar > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.managing-bar__short { display: none; }
.managing-bar strong { font-weight: 600; }
.managing-bar__btn { flex: none; padding: 5px 14px; border: 0; border-radius: var(--radius-pill); background: #fff; color: var(--tg-800); font: inherit; font-weight: 600; cursor: pointer; }
.managing-bar__btn:hover { background: var(--teal-100); }
@media (max-width: 700px) {                     /* two lines on a phone, nothing cut */
  .managing-bar { justify-content: space-between; padding: 0 12px; font-size: 12px; line-height: 1.35; }
  .managing-bar > span { white-space: normal; }
  .managing-bar__long { display: none; }
  .managing-bar .managing-bar__short { display: block; }
}

/* Sideways tab bars and chip rows (var(--teal-600), scroll-hints.js): an arrow at each edge that has more — pinned inside the
   strip, a soft fade behind it in the page colour, hidden when there's nothing more that way */
.hs-btn { position: sticky; z-index: 3; display: none; flex: none; align-self: stretch; align-items: center; width: 34px; min-height: 32px; padding: 0; border: 0; cursor: pointer; }
.hs-btn--prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, var(--hs-bg, var(--color-bg)) 55%, transparent); }
.hs-btn--next { right: 0; justify-content: flex-end; background: linear-gradient(270deg, var(--hs-bg, var(--color-bg)) 55%, transparent); }
.hs-btn span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--color-control); border-radius: 50%; background: #fff; color: var(--color-text); box-shadow: 0 2px 6px rgb(var(--teal-900-rgb) / .12); transition: border-color var(--dur-fast), color var(--dur-fast); }
.hs-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hs-btn:hover span { border-color: var(--color-primary); color: var(--color-link-hover); }
.hs-on:not(.hs-start) > .hs-btn--prev, .hs-on:not(.hs-end) > .hs-btn--next { display: flex; }
.bx-chips__row.hs-on { -webkit-mask-image: none; mask-image: none; }     /* the arrow says it now, not the fade */
/* Acting as (var(--teal-600)): a long list of pages scrolls inside the menu — the rest of the menu stays reachable */
#acting-switch { max-height: min(46vh, 360px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#acting-switch .user-menu__label { position: sticky; top: 0; z-index: 1; background: #fff; }
/* #304 (Rohit): the account menu's items each with an icon, like the side menu's */
.user-menu__item { display: flex; align-items: center; gap: 12px; }
.user-menu__item > svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--color-text-muted); transition: color var(--dur-fast); }
.user-menu__item:hover > svg { color: var(--color-link); }
.user-menu__item--accent > svg { color: var(--color-link); }

/* Artist Plus in the menu (#305, Rohit): highlighted, not foreign — the sparkle in teal on a soft-teal pill, a small tag */
.side-nav__link--plus { color: var(--color-link); font-weight: 500; }
.side-nav__link--plus .side-nav__icon { width: 30px; height: 30px; margin-left: -4px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link); }
.side-nav__link--plus .side-nav__icon svg { width: 18px; height: 18px; }
.side-nav__link--plus .side-nav__text { display: inline-flex; align-items: center; gap: 8px; }
.side-nav__link--plus .side-nav__text::after { content: 'Plus'; display: inline-block; padding: 3px 7px 2px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.side-nav__link--plus:hover .side-nav__icon, .side-nav__link--plus.is-active .side-nav__icon { background: var(--color-primary); color: #fff; }
.side-sub__link--plus { color: var(--color-link) !important; font-weight: 600; }
.side-sub__link--plus::after { content: '✦'; margin-left: 6px; font-size: 11px; }

/* ---- skeleton.css ---- */
/* =====================================================================
   Skeleton loaders — grey placeholders with a moving shine, shown while
   content loads (replaces the old ph-item plugin CSS).
   ===================================================================== */
.sk {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-skeleton);
  border-radius: var(--radius-sm);
}
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--color-skeleton-shine), transparent);
  animation: sk-shine 1.3s ease-in-out infinite;
}
.sk-line   { height: 12px; }
.sk-pill   { border-radius: var(--radius-pill); }
.sk-circle { border-radius: 50%; }

/* Home skeleton: banner + rows of cards that scroll sideways on phones */
.sk-banner {
  width: 100%;
  aspect-ratio: 16 / 6;
  min-height: 160px;
  max-height: 340px;
  border-radius: var(--radius-lg);
}
.sk-section { margin-top: var(--space-6); }
.sk-section__title { width: min(220px, 50%); height: 20px; margin-bottom: var(--space-4); }
.sk-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: var(--space-4);
  overflow: hidden;
}
.sk-card { display: flex; flex-direction: column; gap: var(--space-2); }
.sk-card__art { aspect-ratio: 1; border-radius: var(--radius-md); }
.sk-card__title { width: 80%; }
.sk-card__sub { width: 55%; height: 10px; }

@media (max-width: 599px) {
  .sk-row { grid-auto-columns: 42%; }
}
@media (min-width: 1280px) {
  .sk-row { grid-auto-columns: minmax(160px, 1fr); }
}

@keyframes sk-shine { to { transform: translateX(100%); } }

/* The body of a content page while its script fetches the rest (#313: with a server-rendered hero in place the hero
   skeleton never showed, so the page arrived as a hero alone and then grew in steps). The blocks match the real ones:
   the numbers strip is a card of the same height, the tabs are the same row, then cards and shelves. */
.body-sk { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-5); }
.body-sk__stats { height: 84px; border-radius: var(--radius-lg); }
.body-sk__tabs { display: flex; gap: var(--space-2); }
.body-sk__tab { width: 94px; height: 34px; }
.body-sk__tab:nth-child(2) { width: 76px; }
.body-sk__tab:nth-child(3) { width: 118px; }
.body-sk__tab:nth-child(4) { width: 88px; }
.body-sk__card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-pad, 22px);
  border: 1px solid var(--color-border); border-radius: var(--card-radius, 16px); background: var(--color-surface); }
.body-sk__h { width: min(240px, 55%); height: 20px; }
.body-sk__short { width: 62%; }
.body-sk .sk-section { margin-top: 0; }
@media (max-width: 767px) {
  .body-sk { gap: var(--space-5); }
  .body-sk__stats { height: 86px; }
  .body-sk__tab { width: 78px; height: 32px; }
}

/* One grey for every loader (#313, Rohit: the home page loads in grey, so the rest must too). A hero skeleton borrows
   the real hero's box for its size, but never its colour — the teal wash and the blurred artwork behind it made the
   page look like it had already loaded something. Plain grey, the same as the blocks under it. */
.sp-hero--sk, .apx-hero.prof__head, .evp-hero.sk {
  background: var(--color-skeleton) !important;
  box-shadow: none;
}
.sp-hero--sk .apx-hero__bg, .apx-hero.prof__head .apx-hero__bg { display: none; }
.sp-hero--sk .sp-art, .apx-hero.prof__head .prof__avatar { box-shadow: none; }
.sp-hero--sk .sp-art__img.sk, .apx-hero.prof__head .prof__avatar.sk { background: var(--color-skeleton-deep, #dfe3e7); }
.sp-hero--sk .sk, .apx-hero.prof__head .sk { background: var(--color-skeleton-deep, #dfe3e7); }

/* ---- forms.css ---- */
/* =====================================================================
   Dialogs & forms — login, sign up, OTP, reset password.
   Visual values carried over from the 2023/24 revamp (commonForms.css,
   notLoggedInForms.css): 50px outlined fields with floating labels,
   teal focus + soft shadow, light-teal "valid" state with a check,
   error text sitting on the bottom border, 45px teal buttons.
   ===================================================================== */

/* ---- Dialog -------------------------------------------------------------- */
.dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(var(--space-5), env(safe-area-inset-top)) var(--space-2) max(var(--space-5), env(safe-area-inset-bottom));
  background: rgb(var(--teal-500-rgb) / 0.63);           /* MuSlate teal veil, as before */
  backdrop-filter: blur(4px);                     /* page shows through, softly blurred (designer note) */
  -webkit-backdrop-filter: blur(4px);
  animation: fade-in var(--dur-med) var(--ease);
}
/* Always in the middle of the screen (top and bottom); a tall dialog scrolls from the top. */
.dialog > .dialog__card { margin-block: auto; }
/* A dialog opened over another hides the one below until it closes (app.js dialog stack) */
.dialog.is-under { visibility: hidden; }
body.has-dialog { overflow: hidden; }

.dialog__card {
  position: relative;
  width: 100%;
  max-width: 500px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 0 24px 6px rgba(4, 4, 4, 0.2);
  padding: clamp(28px, 6vw, 40px) clamp(18px, 5vw, 40px);
  animation: dialog-in var(--dur-slow) var(--ease);
}

.dialog__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #C9C9CF;
  color: #fff;
  transition: background-color var(--dur-fast) var(--ease);
}
.dialog__close:hover { background: var(--color-primary); }
.dialog__close svg { width: 12px; height: 12px; fill: currentColor; }

.dialog__title {
  font-size: clamp(1.15rem, 4.5vw, 1.375rem);
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}
.dialog__subtitle {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--color-text-muted);
  text-wrap: balance;
}
.dialog__screen { display: none; }
.dialog__screen.is-active { display: block; }

/* ---- Social buttons + OR -------------------------------------------------- */
.social {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.social__btn {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-control);
  border-radius: 50%;
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.social__btn:hover { border-color: var(--color-primary); box-shadow: 0 3px 6px var(--teal-100); transform: translateY(-1px); }
.social__btn svg { width: 32px; height: 32px; }
.social__btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Waiting for Google/Facebook, as in 2023: a brand-coloured arc spins around the
   circle (notLoggedInForms.css .spin-border-social / spinsocial). */
.social__btn { position: relative; }
.social__btn[data-social="facebook"] { --ring: #376aed; }
.social__btn[data-social="google"]   { --ring: #34a853; }
.social__btn.is-loading { pointer-events: none; }
.social__btn.is-loading::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-top: 2px solid var(--ring);
  border-radius: 50%;
  animation: spin 2s linear infinite;
}
/* While the Google / Facebook window is open: the dialog is covered, a ring, what to do, Cancel (no blur — plain veil) */
.social-wait { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border-radius: inherit; background: rgba(255, 255, 255, 0.94); text-align: center; animation: fade-in var(--dur-med) var(--ease); }
.social-wait strong { font-size: 1.05rem; color: var(--color-text); }
.social-wait small { color: var(--color-text-muted, #6b6b6b); max-width: 280px; }
.social-wait .btn, .social-wait .link { margin-top: 6px; }
.social-wait__ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #e6e6e6; border-top-color: #34a853; animation: spin 0.9s linear infinite; }
.social-wait__ring[data-p="facebook"] { border-top-color: #376aed; }

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* ---- Fields --------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 15px; }

.field {
  position: relative;
  text-align: left;            /* a field inside a centred dialog text (confirm__text) keeps its label at the start (#301) */
  height: 50px;
  border: 1px solid var(--color-control);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 3px 6px var(--teal-100);
}
.field.is-valid {
  border-color: var(--color-primary);
  background: rgb(var(--teal-500-rgb) / 0.08);
}
.field.is-invalid {
  border-color: var(--color-error);
  box-shadow: none;
}

.field__icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: var(--color-control-icon);
  pointer-events: none;
}
.field.is-valid .field__icon,
.field:focus-within .field__icon { fill: var(--color-primary); }

.field__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 19px 44px 0 42px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
}
.field__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; transition: background-color 600000s; }

/* The label sits in the box like a placeholder and moves up, smaller, once the field is focused or has something in it —
   and stays up while it does (Rohit, #195; #180 had pinned every label on top, which lost the motion). It works from
   what's in the box (a text box knows it's empty through its placeholder — app.js gives every one a blank one) or from
   has-value (dropdowns, dates, times, tag pickers — controls.js / tags.js). Dropdowns, dates and times do the same as
   text boxes: empty and not focused, only their label shows; "Select…" appears once the label has moved up. */
.field__label {
  position: absolute;
  left: 42px;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top var(--dur-med) var(--ease), font-size var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.field:focus-within .field__label,
.field.has-value .field__label,
.field:has(input.field__input[placeholder]:is(:not([type]), [type=text], [type=email], [type=tel], [type=url], [type=number], [type=search], [type=password]):not(:placeholder-shown),
           textarea.field__input[placeholder]:not(:placeholder-shown)) .field__label {   /* text boxes only: a date / time box never "shows" its placeholder */
  top: 13px;
  font-size: 11px;
}
.field:focus-within .field__label { color: var(--color-link); }
.field__input::placeholder { color: var(--color-control-icon); opacity: 1; }
/* an example in the box shows only once the label has moved up out of its way (never both in the box at once — var(--teal-600)) */
.field:not(:focus-within) :is(input, textarea).field__input::placeholder { color: transparent; }
/* a dropdown / date / time with nothing chosen: just its label until it's opened (the label is its "Select…");
   a small one without a label (lineup day, opening hours) keeps showing "Select" */
.field:has(.field__label):not(:focus-within):not(.has-value) :is(.msel__text, .mdate__text) { visibility: hidden; }
/* Invalid: the label keeps its normal colour; red border + message are enough (Rohit, 2026-10-06) */

/* Right-side helpers: show/hide password, valid tick, edit */
.field__action {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-control-icon);
}
.field__action:hover { color: var(--color-link); }
.field__action .eye-off { display: none; }
.field__action.is-shown .eye-open { display: none; }
.field__action.is-shown .eye-off { display: inline; }
.field__action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* A field that can't change (#183, sent to the stores): greyed out, a lock where the password eye sits — hover or tap it
   for why (the note opens to its left, inside the field) */
.field.is-locked { background: #f5f8f8; }
.field.is-locked .field__input { color: var(--color-text-muted); -webkit-text-fill-color: var(--color-text-muted); cursor: not-allowed; opacity: 1; }
.field.is-locked .msel__btn svg, .field.is-locked .mdate__btn svg { display: none; }
.field__lock {
  position: absolute;
  right: 6px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tg-400);
  cursor: help;
}
.field__lock svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field__lock:hover, .field__lock.is-tip { color: var(--color-link); }
.field__lock::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 2px);
  top: 50%;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--tg-900);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(4px, -50%);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.field__lock:hover::after, .field__lock.is-tip::after { opacity: 1; transform: translate(0, -50%); }
.field__tick {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: none;
}
.field.is-valid:not(:has(.field__action)) .field__tick { display: block; }
/* Password fields too (Rohit): checked and left → just the tick (the eye hidden); back in the field → the eye again */
.field.is-valid:has(.field__action):not(:focus-within) .field__tick { display: block; }
.field.is-valid:has(.field__tick):not(:focus-within) .field__action { display: none; }

.field__error {
  position: absolute;
  right: 12px;
  bottom: -7px;
  z-index: 2;
  max-width: calc(100% - 24px);
  padding: 0 5px;
  font-size: 12px;
  line-height: 1.1;
  color: var(--color-error-text);
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field__error:empty { display: none; }
@media (max-width: 380px) { .field__error { font-size: 11px; } }

.field[readonly-field] { background: var(--color-surface-muted); }

/* ---- Phone field (intl-tel-input v29, themed) ------------------------------- */
.field .iti {
  position: absolute;
  inset: 0;
  display: block;
  --iti-border-color: var(--color-primary);
  --iti-hover-color: var(--color-primary-soft);
  --iti-icon-color: var(--color-control-icon);
  --iti-arrow-color: var(--color-control-icon);
  --iti-spacer-horizontal: 10px;
  --iti-mobile-popup-margin: 24px;
}
/* Flag images for every phone picker — set on :root because on phones the
   country list opens as a full-screen layer outside the field. Root paths:
   url() inside custom properties is resolved where it's used. */
:root {
  --iti-path-flags-1x: url('/assets/vendor/intl-tel-input/img/flags.webp');
  --iti-path-flags-2x: url('/assets/vendor/intl-tel-input/img/flags@2x.webp');
}
.field .iti .field__input { padding-top: 19px; }
/* Number text and floating label line up just after the flag + arrow */
.field.is-phone .field__input { padding-left: 62px !important; }
.field.is-phone .field__label { left: 62px; }
.field .iti__country-container { padding: 0 0 0 4px; }
.field .iti__selected-country { padding-top: 0; border-radius: var(--radius-sm); }
.field .iti__selected-country:hover { background: transparent; }
/* Identifier field: flag only appears once the text looks like a phone number */
.field.identifier:not(.is-phone) .iti__country-container { display: none; }
.field.identifier:not(.is-phone) .field__input { padding-left: 42px !important; }
.field.identifier:not(.is-phone) .field__label { left: 42px; }
.field.identifier.is-phone .field__icon { display: none; }

/* Matching icons (#227, Rohit): in a group of fields where one carries an icon — the phone's flag — every other field
   carries one too, in the same place: email ✉, name 👤, address 📍, link 🔗, or the input's data-icon (mail · user ·
   pin · link · tag · work). Groups: a form's grid, a page's contact fields, the invite form, an event's contact. */
.field:has(> .field__input:is([type=email], [data-icon=mail])) { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M16.286 2H1.714A1.719 1.719 0 0 0 0 3.714v10.715a1.719 1.719 0 0 0 1.714 1.714h14.572A1.719 1.719 0 0 0 18 14.429V3.714A1.719 1.719 0 0 0 16.286 2Zm-.214 3.643L9 10.357 1.929 5.643V3.929L9 8.643l7.071-4.714Z'/%3E%3C/svg%3E"); }
.field:has(> .field__input:is([autocomplete=name], [data-icon=user])) { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9,10.125A5.063,5.063,0,1,0,3.938,5.063,5.064,5.064,0,0,0,9,10.125Zm4.5,1.125H11.563a6.12,6.12,0,0,1-5.126,0H4.5A4.5,4.5,0,0,0,0,15.75v.563A1.688,1.688,0,0,0,1.688,18H16.313A1.688,1.688,0,0,0,18,16.313V15.75A4.5,4.5,0,0,0,13.5,11.25Z'/%3E%3C/svg%3E"); }
.field:has(> .field__input:is([autocomplete=street-address], [data-icon=pin])) { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5a8 8 0 0 0-8 8c0 5.6 6.6 12.2 7.3 12.9a1 1 0 0 0 1.4 0C13.4 21.7 20 15.1 20 9.5a8 8 0 0 0-8-8Zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z'/%3E%3C/svg%3E"); }
.field:has(> .field__input:is([type=url], [data-icon=link])) { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M10 13.5a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7M14 10.5a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.field:has(> .field__input[data-icon=tag]) { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4.5A2.5 2.5 0 0 1 4.5 2h6.6a2.5 2.5 0 0 1 1.8.7l8.4 8.4a2.5 2.5 0 0 1 0 3.6l-6.6 6.6a2.5 2.5 0 0 1-3.6 0L2.7 12.9A2.5 2.5 0 0 1 2 11.1V4.5Zm5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E"); }
.field:has(> .field__input[data-icon=work]) { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2a2 2 0 0 0-2 2v2H4a2 2 0 0 0-2 2v4h20V8a2 2 0 0 0-2-2h-3V4a2 2 0 0 0-2-2H9Zm0 2h6v2H9V4ZM2 14v5a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5h-8v1a2 2 0 0 1-4 0v-1H2Z'/%3E%3C/svg%3E"); }
:is(.sf-grid, .pg-fields, .inv-form__fields, .eve-ctf):has(.field.is-phone) .field:not(.is-phone, .identifier, .field--area):not(:has(.field__icon)):has(> .field__input:is([type=email], [autocomplete=name], [autocomplete=street-address], [type=url], [data-icon]))::before {
  content: ""; position: absolute; top: 50%; left: 13px; z-index: 1; width: 18px; height: 18px; transform: translateY(-50%); background: #cfcfcf; pointer-events: none;
  -webkit-mask: var(--fi) center / contain no-repeat; mask: var(--fi) center / contain no-repeat;
}
:is(.sf-grid, .pg-fields, .inv-form__fields, .eve-ctf):has(.field.is-phone) .field:not(.is-phone, .identifier, .field--area):not(:has(.field__icon)):has(> .field__input:is([type=email], [autocomplete=name], [autocomplete=street-address], [type=url], [data-icon])):is(:focus-within, .is-valid)::before { background: var(--color-primary); }
:is(.sf-grid, .pg-fields, .inv-form__fields, .eve-ctf):has(.field.is-phone) .field:not(.is-phone, .identifier, .field--area):not(:has(.field__icon)):has(> .field__input:is([type=email], [autocomplete=name], [autocomplete=street-address], [type=url], [data-icon])) > .field__input { padding-left: 42px !important; }
:is(.sf-grid, .pg-fields, .inv-form__fields, .eve-ctf):has(.field.is-phone) .field:not(.is-phone, .identifier, .field--area):not(:has(.field__icon)):has(> .field__input:is([type=email], [autocomplete=name], [autocomplete=street-address], [type=url], [data-icon])) > .field__label { left: 42px; }

/* While the country list is open, the field joins it: teal border, square bottom corners (2023) */
.field:has(.iti__selected-country[aria-expanded="true"]) {
  border-color: var(--color-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: none;
}

/* Dropdown attached under the field, teal edge (as customised in 2023) */
.iti__dropdown-content {
  border: 1px solid var(--color-primary);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 6px 16px rgb(var(--teal-500-rgb) / 0.18);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.iti__search-input {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 10px 12px 10px 34px;
  border-bottom: 1px solid var(--color-control);
}
.iti__country { padding: 9px 12px; }
.iti__country.iti__highlight { background: var(--color-primary-soft); }
.iti__dial-code { color: var(--color-text-subtle); }
.iti--fullscreen-popup.iti--detached-country-selector { z-index: 300; background: rgba(11, 12, 14, 0.55); }
.iti--fullscreen-popup .iti__dropdown-content { border-radius: var(--radius-md); }

/* ---- Links, buttons ---------------------------------------------------------- */
.form__links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: -4px;
  font-size: 13px;
}
.link {
  border: 0;
  padding: 0;
  background: none;
  font-size: inherit;
  color: var(--color-link);
  text-decoration: none;
}
.link:hover { text-decoration: underline; }
.link--strong { font-weight: 600; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* #309: a button's line icon, when its page brings no rule of its own (the empty-state "Create a Playlist" showed a black
   disc) — zero specificity, so every page's own button icon rule still wins; filled icons (fill set, .f / .is-fill) keep theirs */
:where(.btn) > svg:where(:not([fill]):not(.f):not(.is-fill)) { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-strong); }
.btn--ghost { background: transparent; color: var(--tg-700); border-color: var(--color-control); }   /* a secondary action reads a step softer than body text (#305: Skip, Cancel, Back) */
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-link); }
/* a call to action inside a list row (#307, Rohit: Add Details) — light teal with dark teal text, so it doesn't pierce the eye */
.btn--soft { border-color: var(--teal-200); background: var(--color-primary-soft); color: var(--color-link); }   /* the header Feed button's scheme (#308) */
.btn--soft:hover { border-color: var(--color-primary); background: var(--teal-100); color: var(--color-link-hover); }
/* Destructive actions (delete, clear, remove): red, white text — the same in every dialog */
/* Destructive actions in dialogs (delete, remove, cancel, leave…): one soft red everywhere, as the Studio's Delete (#221).
   Only deleting the whole account is solid red (.btn--danger-solid). */
.btn--danger { border: 1px solid var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.btn--danger:hover { border-color: #eaa3ab; background: #fbd9dd; color: var(--danger); }
.btn--danger-solid { background: var(--color-error); color: #fff; }
.btn--danger-solid:hover { background: #c10d1d; }
/* Press feedback on every button, as on login / sign up */
.btn:active:not([disabled]) { transform: scale(0.97); }
.btn { transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform 0.1s ease, width 0.4s ease, border-radius 0.4s ease; }
.btn--block { width: 100%; min-height: 45px; margin-top: 5px; font-size: var(--text-md); }
.btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn.is-loading[disabled] { opacity: 1; }

/* Submit loading, as in 2023: the button shrinks into a 45px circle and a white
   ring spins inside it (commonForms.css .ms_btn.collapsed + .loader / spinmsbtn). */
.btn--block {
  transition: width 0.4s ease, border-radius 0.4s ease, background-color var(--dur-fast) var(--ease);
}
/* Only when it stands alone: beside other buttons it keeps its size (spinner inside), so nothing shifts (#117).
   "Alone" = no button next to it — a link under it (Log In / Sign Up) doesn't count (#305: the auth forms never collapsed) */
.btn--block.is-loading:only-child,
.btn--block.is-loading:not(.btn ~ .btn):not(:has(~ .btn)) {
  width: 45px;
  min-width: 45px;
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  margin: -12.5px 0 0 -12.5px;
  border: 3px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.btn--ghost.is-loading::after { border-color: var(--color-border); border-top-color: var(--color-primary); }

/* Sign-up's two switches (var(--teal-600), var(--teal-600)): the agreement (always on — its switch is shown on and can't be turned off) and
   updates and offers (on unless turned off) — two quiet lines of fine print above Create Account, small switches on the
   left like ticks; no box, no extra lines (Rohit, #196: the block drew every eye and took a fifth of the form) */
.form__opts { display: flex; flex-direction: column; gap: 8px; margin: 2px 2px 4px; }
.form__opt { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--color-text-muted); text-align: left; cursor: pointer; }
.form__opt a { color: var(--color-text); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.form__opt a:hover { text-decoration-color: currentColor; }
.form__opt.is-locked { cursor: default; }
.form__opt.is-locked .set-switch input { cursor: not-allowed; }
.form__opt.is-locked .set-switch input:disabled + i { opacity: .7; }
/* the small switch (here only; doubled class: settings.css, loaded later, sets the normal one) */
.set-switch.set-switch--sm { width: 30px; height: 17px; }
.set-switch.set-switch--sm i { border-radius: 9px; }
.set-switch.set-switch--sm i::after { top: 2px; left: 2px; width: 13px; height: 13px; }
.set-switch.set-switch--sm input:checked + i::after { transform: translateX(13px); }
.form__note { font-size: 13px; text-align: center; color: var(--color-text-muted); }
.form__note a { color: var(--color-link); }
.form__footer { margin-top: var(--space-2); font-size: var(--text-sm); text-align: center; color: var(--color-text-muted); }
.form__back { display: inline-flex; align-items: center; gap: 6px; }
.form__alert {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--danger-soft);
  color: #B00E1D;
}
.form__alert.is-info { background: var(--color-primary-soft); color: var(--teal-700); }
/* A recommendation, not a refusal (#313, Rohit): a picture smaller than we would like is still accepted —
   amber says it could look better, red would say we will not take it. */
.form__alert.is-warn { background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--warn-text); }
.form__alert:empty { display: none; }

/* ---- OTP boxes ------------------------------------------------------------------ */
.otp {
  display: grid;
  grid-template-columns: repeat(var(--otp-length, 6), minmax(0, 1fr));
  gap: clamp(6px, 2vw, 12px);
}
.otp__box {
  width: 100%;
  aspect-ratio: 1;
  max-height: 56px;
  border: 1px solid var(--color-control);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  font-weight: 600;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.otp__box:focus { border-color: var(--color-primary); box-shadow: 0 3px 6px var(--teal-100); }
/* Filled digit: light teal, as in 2023 (.form-group.otp input.valid) */
.otp__box.is-filled { border-color: var(--color-primary); background: rgb(var(--teal-500-rgb) / 0.2); }
/* Wrong code: red borders on every box, no shadow (2023) */
.otp.is-invalid .otp__box { border-color: var(--color-error); background: #fff; box-shadow: none; }
/* Resend on the left, error on the right (same side as every field error), tucked under the boxes */
.otp__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: -9px; font-size: 13px; color: var(--color-text-muted); }
.otp__error { margin-left: auto; font-size: 12px; text-align: right; color: var(--color-error-text); }
.otp__sent { font-size: 13px; text-align: center; color: var(--color-text-muted); }
.otp__sent strong { color: var(--color-text); font-weight: 500; }

/* ---- Reset password: who is resetting -------------------------------------------- */
.who { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: var(--space-4); }
.who__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-soft); display: grid; place-items: center; font-weight: 600; color: var(--color-link); font-size: 1.4rem; overflow: hidden; }
.who__avatar img { width: 100%; height: 100%; object-fit: cover; }
.who__label { font-size: 12px; color: var(--color-text-subtle); }
.who__handle { font-weight: 600; }

/* ---- Toast ------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  z-index: 400;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: min(480px, calc(100vw - 32px));
  width: max-content;
  overflow: hidden;                    /* the countdown line follows the rounded corners */
  padding: 6px 6px 6px 16px;
  border-radius: var(--radius-md);
  background: var(--teal-800);         /* #311 (Rohit, option B): deep teal, white words — stands off every page and the player */
  color: #fff;
  font-size: var(--text-sm);
  line-height: 1.4;
  box-shadow: 0 10px 30px rgb(var(--teal-900-rgb) / 0.24);
  animation: toast-in var(--dur-slow) var(--ease);
}
body.has-player .toast { bottom: calc(var(--player-height) + var(--space-4) + env(safe-area-inset-bottom)); }
/* Centred on the content, not the screen: with the side rail showing, the page and the player start after it (#305) */
@media (min-width: 1024px) { .toast { left: calc(50% + var(--rail-width) / 2); } }
/* One look for every message (#229): the words, the action as light teal text, × to close it straight away — as wide as
   its words (up to 480px), the words left-aligned */
.toast__msg { flex: 1; min-width: 0; padding: 6px 4px 6px 0; }
.toast__btn { flex: none; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--teal-300); font: 600 13px/1.4 var(--font-sans, inherit); cursor: pointer; }
.toast__btn:hover, .toast__btn:focus-visible { background: rgb(255 255 255 / 0.12); outline: none; }
.toast__x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgb(255 255 255 / 0.8); cursor: pointer; }
.toast__x:hover, .toast__x:focus-visible { background: rgb(255 255 255 / 0.14); color: #fff; outline: none; }
.toast__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* #311 (Rohit): how long it stays — a line along the bottom, full when it appears, emptying to the left; it pauses while the
   pointer is on the message, and the message goes when it's empty (app.js) */
.toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(255 255 255 / 0.6); transform-origin: left center; animation: toast-time var(--toast-time, 4s) linear forwards; }
.toast:hover .toast__bar, .toast:focus-within .toast__bar { animation-play-state: paused; }
/* it's the timer, so reduced motion (base.css cuts every animation short) mustn't close the message at once */
@media (prefers-reduced-motion: reduce) { .toast__bar { animation-duration: var(--toast-time, 4s) !important; } }
@keyframes toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Checkboxes, site-wide: teal box with a white tick when ticked (the browser's own tick turns
        dark on a light accent colour). Switches (.set-switch) draw their own. ------------------ */
input[type="checkbox"]:not(.set-switch input) {
  appearance: none; -webkit-appearance: none;
  flex: none; display: inline-grid; place-content: center; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--tg-300); border-radius: 4px; background: var(--color-surface, #fff);
  vertical-align: -3px; cursor: pointer; transition: background-color .12s, border-color .12s;
}
input[type="checkbox"]:not(.set-switch input)::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border: solid var(--color-on-primary); border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); transition: transform .12s;
}
input[type="checkbox"]:not(.set-switch input):checked { border-color: var(--color-primary); background: var(--color-primary); }
input[type="checkbox"]:not(.set-switch input):checked::after { transform: rotate(-45deg) scale(1); }
input[type="checkbox"]:not(.set-switch input):hover:not(:disabled) { border-color: var(--color-primary); }
input[type="checkbox"]:not(.set-switch input):focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
input[type="checkbox"]:not(.set-switch input):disabled { opacity: .5; cursor: not-allowed; }
/* Radio buttons, site-wide, to match: a round box that fills with a teal dot (the browser's own goes dark) */
input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: none; display: inline-grid; place-content: center; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--tg-300); border-radius: 50%; background: var(--color-surface, #fff);
  vertical-align: -3px; cursor: pointer; transition: border-color .12s;
}
input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); transform: scale(0); transition: transform .12s; }
input[type="radio"]:checked { border-color: var(--color-primary); }
input[type="radio"]:checked::after { transform: scale(1); }
input[type="radio"]:hover:not(:disabled) { border-color: var(--color-primary); }
input[type="radio"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Platform icons (platform-icons.js, #97): brand marks in the text colour, a letter otherwise. Each icon carries
   its platform's colour as --b (var(--teal-600)): a platform without a mark shows its first letter in that colour on a soft tile
   of it — a little logo, not a grey box ---- */
.pf-ic { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--color-text); }
.pf-ic svg { width: 100%; height: 100%; fill: currentColor; }
.pf-ic .pf-ic__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-ic--letter { border-radius: 5px; background: color-mix(in srgb, var(--b, var(--teal-500)) 14%, #fff); color: var(--b, var(--teal-500)); font-size: 11px; font-weight: 700; line-height: 1; }
/* Platform pickers — the Platform list, a chosen link's platform (var(--teal-600)): each mark in its own colour on a soft tile of
   that colour, the look of the song page's Listen On; a store's own logo picture (Gaana, JioSaavn, MuSlate) fills it */
:is(.lk-menu__opt, .lk-pf) .pf-ic { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: color-mix(in srgb, var(--b, var(--teal-500)) 12%, #fff); color: var(--b, var(--color-text)); }
:is(.lk-menu__opt, .lk-pf) .pf-ic--letter { padding: 0; font-size: 13px; }
:is(.lk-menu__opt, .lk-pf) .pf-ic--img { padding: 0; background: none; }
:is(.lk-menu__opt, .lk-pf) .pf-ic--img img { border-radius: 8px; }

/* ---- Links editor (links.js, decisions #96, #97) ----------------------------------------------------
   A saved link: [icon · platform]  [link]  ×        A new one: [Platform ▾]  [Paste a link]  ×        */
.lk { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-3); }
.lk-row { position: relative; display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) 34px; gap: 6px 10px; align-items: center; }
.lk-row .field { margin: 0; }
.lk-row .field .field__input { padding-left: 14px; padding-right: 14px; }
.lk-row .field .field__label { left: 14px; right: 14px; }
.lk-pf { display: flex; align-items: center; gap: 10px; min-width: 0; height: 50px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--surface-hover); }
.lk-pf__name { overflow: hidden; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.lk-pf__tag { flex: none; margin-left: auto; padding: 2px 7px; border-radius: var(--radius-pill); background: #fff4dc; color: var(--warn-text); font-size: 11px; font-weight: 600; }
.lk-name .pf-ic { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); width: 20px; height: 20px; }
.lk-row .lk-name .field__input { padding-left: 42px; }
.lk-row .lk-name .field__label { left: 42px; }
.lk-choose { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 50px; padding: 0 12px 0 14px; border: 1px dashed var(--teal-200); border-radius: var(--radius-sm); background: #fff; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.lk-choose:hover, .lk-choose[aria-expanded="true"] { border-color: var(--color-primary); border-style: solid; color: var(--color-link-hover); }
.lk-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-x { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-subtle); cursor: pointer; }
.lk-x:hover { background: var(--danger-soft); color: var(--color-error); }
.lk-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.lk-note { grid-column: 1 / -1; margin: -2px 0 0; font-size: 13px; color: var(--color-text-muted); }
/* The item's own MuSlate link (#224): fixed first row; a draft says it's made on publishing */
.lk-row.is-home .field__input { padding-top: 0; cursor: text; text-overflow: ellipsis; }      /* no label: the text sits in the middle */
.lk-row.is-home .field__input.is-soon { font-size: 13px; font-style: italic; cursor: default; }
.lk-copy:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.lk-copy svg { stroke-width: 2; stroke-linejoin: round; }
/* Errors sit on the field's bottom border, on the right — the same as every form (login, sign-up) */
/* "+ Add a …" under every list (#181; one look everywhere since #200): the small outlined button — 36px, 13px, its plus
   drawn, as wide as its words, never stretched by the form around it. Add a Link, Add Experience, Add a Package / Member /
   Contact, Add another credit all share it, in the Studio, Settings and pages alike */
.sf-addrole, .lk-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; width: auto; height: 36px; min-height: 36px; padding: 0 var(--space-4);
  border: 1px solid var(--color-control); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.sf-addrole svg, .lk-add svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sf-addrole:hover, .lk-add:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.lk-add { margin-top: var(--space-3); }
button.link.sf-addrole { height: auto; min-height: 0; padding: 0; border: 0; color: var(--color-link-hover); }   /* "Add another credit" inside a credit list stays a text link */
/* The menu */
.lk-menu { position: absolute; top: 56px; left: 0; z-index: 30; width: min(320px, 100%); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); }
.lk-menu__search { padding: 8px; border-bottom: 1px solid var(--color-border); }
.lk-menu__search input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--color-control); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); outline: none; }
.lk-menu__search input:focus { border-color: var(--color-primary); box-shadow: 0 3px 6px var(--teal-100); }
.lk-menu__list { max-height: 300px; margin: 0; padding: 4px 6px 6px; overflow-y: auto; list-style: none; }
.lk-menu__group { padding: 10px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-subtle); }
.lk-menu__opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; }
.lk-menu__opt small { margin-left: auto; font-size: 11px; color: var(--warn-text); }
.lk-menu__opt.is-active { background: var(--color-primary-soft); color: var(--color-link-hover); }
.lk-menu__opt.is-active .pf-ic { background: #fff; }      /* the highlighted row: its tile turns white, the mark keeps its colour (var(--teal-600)) */
.lk-menu__opt--other { margin-top: 4px; border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--color-link-hover); }
.lk-menu__opt--other svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (max-width: 600px) {
  .lk-row { grid-template-columns: minmax(0, 1fr) 34px; }
  .lk-row > :first-child { grid-column: 1 / 2; }
  .lk-row > .lk-url { grid-column: 1 / -1; grid-row: 2; }
  .lk-row > .lk-x { grid-column: 2; grid-row: 1; }
  .lk-menu { width: 100%; }
}
@media (max-width: 600px) {
  /* A saved link on a phone: just the icon, then the link */
  .lk-row.is-set:has(.lk-pf) { grid-template-columns: 50px minmax(0, 1fr) 34px; }
  .lk-row.is-set:has(.lk-pf) > .lk-pf { grid-column: 1; justify-content: center; padding: 0; }
  .lk-row.is-set:has(.lk-pf) > .lk-url { grid-column: 2; grid-row: 1; }
  .lk-row.is-set:has(.lk-pf) > .lk-x { grid-column: 3; grid-row: 1; }
  .lk-row.is-set .lk-pf__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ---- Page loader (app.js): the MuSlate mark with sound bars flowing out, over a see-through layer --- */
.page-loader {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.page-loader.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
@media (min-width: 1024px) { .page-loader { left: var(--rail-width); } }
.page-loader__mark { display: flex; align-items: center; gap: 10px; }
.page-loader__mark img { width: 56px; height: 56px; animation: pl-pulse 1.2s ease-in-out infinite; }
.page-loader__bars { display: flex; align-items: center; gap: 4px; height: 44px; }
.page-loader__bars--l { flex-direction: row-reverse; }
.page-loader__bars i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary);
  opacity: calc(1 - var(--i) * 0.17);
  transform: scaleY(0.2);
  animation: pl-beat 0.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.11s);
}
@keyframes pl-beat { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(calc(1 - var(--i) * 0.14)); } }
@keyframes pl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---- Small round loader (Show more, lists filling in): the mark inside a turning ring ---- */
.ms-spin { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; }
.ms-spin img { width: 22px; height: 22px; }
.ms-spin__ring { position: absolute; inset: 0; border: 3px solid var(--color-primary-soft); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
.ms-more-wait { display: flex; justify-content: center; padding: var(--space-3) 0; }
.fade-in-item { animation: item-in 0.35s var(--ease) backwards; }   /* backwards: hidden until its turn, nothing kept after (#117) */
@keyframes item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Drag to reorder (app.js sortable): lifted card, soft placeholder ---- */
.sort-ghost {
  position: fixed !important;
  z-index: 500;
  margin: 0 !important;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 2px 6px rgba(17, 17, 17, 0.08);
  transition: scale 0.18s ease, rotate 0.18s ease, box-shadow 0.18s ease;
  list-style: none;
}
.sort-ghost.is-lifted { scale: 1.02; box-shadow: 0 18px 40px rgba(17, 17, 17, 0.22), 0 4px 10px rgba(17, 17, 17, 0.1); cursor: grabbing; }
.sort-ghost.is-dropping { transition: transform 0.18s ease, scale 0.18s ease, rotate 0.18s ease, box-shadow 0.18s ease; }
.sort-placeholder { position: relative; background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: transparent !important; }
.sort-placeholder > * { visibility: hidden; }
.sort-placeholder::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px dashed var(--teal-300);
  border-radius: var(--radius-md);
  background: rgb(var(--teal-500-rgb) / 0.07);
}
body.is-sorting, body.is-sorting * { cursor: grabbing !important; user-select: none; }

/* ---- Themed drop-down + calendar (controls.js), used by every select / date field ---------------- */
.msel__native, .mdate__native { position: absolute !important; inset: auto auto 0 0 !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.msel__btn, .mdate__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 19px 14px 0 14px !important;
  text-align: left; cursor: pointer;
}
.msel__btn:disabled, .mdate__btn:disabled { cursor: not-allowed; color: var(--color-text-subtle); }
/* A field that can't be used right now looks it — the grey of a disabled choice (#203: End year while "I work here") */
.field:has(> .msel__btn:disabled), .field:has(> .mdate__btn:disabled), .field:has(> .field__input:disabled:not(select)) { background: var(--tg-50); }
.msel__text, .mdate__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msel__btn.is-empty .msel__text, .mdate__btn.is-empty .mdate__text { color: var(--color-text-subtle); }
.msel__btn svg, .mdate__btn svg { flex: none; width: 18px; height: 18px; margin-top: -19px; fill: none; stroke: var(--color-text-subtle); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease); }
.msel.is-open .msel__btn svg { transform: rotate(180deg); }
.msel.is-open, .mdate.is-open { border-color: var(--color-primary); box-shadow: 0 3px 6px var(--teal-100); }
.msel.is-open svg, .mdate.is-open svg, .msel__btn:focus-visible svg, .mdate__btn:focus-visible svg { stroke: var(--color-primary); }
.field.msel, .field.mdate { background-image: none !important; }
.field.msel .field__label, .field.mdate .field__label { left: 14px; }

.msel__menu {
  position: fixed; z-index: 520;
  max-height: 280px; margin: 0; padding: 6px; overflow-y: auto; list-style: none;
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm);
  background: #fff; box-shadow: 0 10px 28px rgb(var(--teal-500-rgb) / 0.18);
  font-size: var(--text-sm);
  animation: pop-in 0.14s var(--ease);
}
.msel__opt { padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); }
.msel__opt.is-placeholder { color: var(--color-text-subtle); }
.msel__opt.is-active { background: var(--color-primary-soft); color: var(--color-link-hover); }
.msel__opt.is-selected { font-weight: 600; color: var(--color-link-hover); }
.msel__opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.mdate__pop {
  position: fixed; z-index: 520;
  width: 300px; min-width: 0 !important; padding: 12px;
  border: 1px solid var(--color-primary); border-radius: var(--radius-md);
  background: #fff; box-shadow: 0 10px 28px rgb(var(--teal-500-rgb) / 0.18);
  font-size: var(--text-sm);
  animation: pop-in 0.14s var(--ease);
}
.mdate__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mdate__nav, .mdate__title { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--color-text); font: inherit; cursor: pointer; }
.mdate__nav { width: 32px; height: 32px; justify-content: center; }
.mdate__nav svg { width: 18px; height: 18px; transform: rotate(90deg); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mdate__nav--next svg { transform: rotate(-90deg); }
.mdate__title { padding: 6px 10px; font-weight: 600; }
.mdate__title svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mdate__nav:hover, .mdate__title:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.mdate__grid { display: grid; gap: 2px; }
.mdate__grid--days { grid-template-columns: repeat(7, 1fr); }
.mdate__grid--months { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mdate__dow { padding: 4px 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--color-text-subtle); }
.mdate__day, .mdate__cell { height: 36px; border: 0; border-radius: 50%; background: none; color: var(--color-text); font: inherit; cursor: pointer; transition: background-color 0.12s, color 0.12s; }
.mdate__cell { border-radius: var(--radius-sm); height: 44px; }
.mdate__day:hover:not([disabled]), .mdate__cell:hover, .mdate__day:focus-visible { background: var(--color-primary-soft); color: var(--color-link-hover); outline: none; }
.mdate__day.is-today { box-shadow: inset 0 0 0 1px var(--color-primary); color: var(--color-link-hover); }
.mdate__day.is-selected, .mdate__cell.is-selected { background: var(--color-primary); color: #fff; font-weight: 600; }
.mdate__day[disabled] { color: #cfcfcf; cursor: not-allowed; }
.mdate__foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 13px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Search boxes: the browser's own × is replaced by one centred clear button (controls.js) */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.field__clear[hidden] { display: none; }
.is-busy[data-slate-more], .is-busy[data-lib-more], .ms-more-btn.is-busy, button.is-busy:has(+ .ms-more-wait) { display: none !important; }

/* ---- New page / tab switch: content eases in (app.js pageEnter, swap) ---------------------------- */
.page-enter { animation: page-in 0.4s var(--ease) backwards; }   /* not "both": a kept transform would make the page the frame of every fixed element (drag, menus) */
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.is-swapping { opacity: 0.45; pointer-events: none; transition: opacity 0.15s ease; }

/* ---- Buttons never overflow: long text ends in "…", the full text shows on hover (controls.js) --- */
.btn { max-width: 100%; min-width: 0; }
.btn__text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* The words always look like their button: no "… span { }" rule of a section may restyle them */
.btn > .btn__text { display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; letter-spacing: inherit !important; background: none !important; }
/* Button labels are in Title Case — "Add a Contact", "Update Password" — set by titlecase.js (#180; CSS capitalize made it "Add A Contact") */

/* Login / sign-up screens slide like steps: onward from the right, back from the left */
.dialog__screen.is-entering { animation: ob-in-next 0.45s cubic-bezier(0.22, 0.9, 0.3, 1); }
.dialog__screen.is-entering-back { animation: ob-in-back 0.45s cubic-bezier(0.22, 0.9, 0.3, 1); }
@media (prefers-reduced-motion: reduce) { .dialog__screen.is-entering, .dialog__screen.is-entering-back { animation: none; } }
.dialog__card { overflow-x: clip; }       /* the slide never shows a sideways scrollbar */

/* ---- Step slider (decision #120): the Studio's long forms, one section at a time, right to left ----------
   A slim card of numbered steps (name beside each number), short connectors, ‹ › at the end. The form is held to
   a readable width, and fills the screen's height so the Delete / Publish bar always sits in the same place. */
.wiz { position: relative; display: flex; flex-direction: column; gap: 16px; width: 100%; }
/* The steps stay under the header on a solid strip, so nothing scrolls into view above or around them */
.wiz__bar { position: sticky; top: calc(var(--header-height) + env(safe-area-inset-top)); z-index: 6; margin: -8px -4px 0; padding: 8px 4px; background: var(--color-bg); }
.wiz__card { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 6px 0 8px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03); }
.wiz__steps { flex: 1; display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.wiz__steps::-webkit-scrollbar { display: none; }
.wiz__sep { flex: 1 1 12px; min-width: 10px; max-width: 56px; height: 1px; margin: 0 2px; background: var(--color-border); }
.wiz__step { flex: none; }
.wiz__btn { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: none; font: inherit; font-size: 13px; line-height: 1; color: var(--color-text-muted); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.wiz__btn:hover { background: #f3f7f7; color: var(--color-text); }
.wiz__num { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--tg-200); border-radius: 50%; font-size: 11px; font-weight: 600; color: var(--color-text-muted); transition: background-color .2s, border-color .2s, color .2s; }
.wiz__num svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wiz__step.is-current .wiz__btn { color: var(--color-text); font-weight: 600; }
.wiz__step.is-current .wiz__num { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.wiz__step.is-past .wiz__num { border-color: var(--teal-300); color: var(--color-link-hover); }
.wiz__step.is-lead .wiz__num { border-color: transparent; background: var(--color-primary-soft); color: var(--color-link-hover); }
.wiz__step.is-locked .wiz__btn, .wiz__step.is-later .wiz__btn { cursor: default; }
.wiz__step.is-locked .wiz__btn:hover, .wiz__step.is-later .wiz__btn:hover { background: none; color: var(--color-text-muted); }
.wiz__step.is-later { opacity: .5; }
.wiz__arrows { flex: none; display: flex; gap: 2px; padding-left: 6px; border-left: 1px solid var(--color-border); }
.wiz__arrow { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text); cursor: pointer; }
.wiz__arrow:not(:disabled):hover { background: #f3f7f7; color: var(--color-link-hover); }
.wiz__arrow:disabled { opacity: .3; cursor: default; }
.wiz__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* What's still missing / would help: one slim line under the steps (not in the bar at the bottom) */
.wiz__notes { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.wiz__notes:empty { display: none; }
.wiz__notes .sf-miss { font-size: 13px; color: var(--color-text-muted); }
.wiz__notes .sf-miss strong { font-weight: 500; color: var(--color-text); }
.wiz__notes .sf-miss__item { padding: 2px 9px; font-size: 12px; }
.wiz__view { overflow-x: clip; transition: height .35s var(--ease); }
.wiz__track { display: flex; align-items: flex-start; transition: transform .42s cubic-bezier(.4, 0, .2, 1); }
.wiz__pane { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-bottom: 2px; }
.wiz__pane[inert] { visibility: hidden; transition: visibility 0s .42s; }
.wiz__group { display: flex; flex-direction: column; gap: 16px; }
/* The bar at the bottom: one row, one button size, always at the screen's bottom edge — pinned above the player over the
   step's column (left / width set by app.js). What scrolls under it fades into the page — no strip with a shadow edge of
   its own (#191: it looked like a bug). #303 (Rohit): the page ends at the step — scrolled down, Continue sits just above
   the bar; the steps column never adds height (app.js fitSide) */
.wiz__main { display: flex; flex-direction: column; min-width: 0; }
.wiz__footwrap { position: fixed; z-index: 20; bottom: calc(var(--player-height) + env(safe-area-inset-bottom)); padding: 8px 0 10px;
  background: linear-gradient(to bottom, transparent, var(--color-bg) 8px); }
body:not(.has-player) .wiz__footwrap { bottom: env(safe-area-inset-bottom); }
.wiz__footwrap .wiz__foot { position: static; padding: 10px 12px 10px 16px; gap: 0; border-radius: var(--radius-lg); box-shadow: none; backdrop-filter: none; background: #fff; }
.wiz__foot .sf-actions { flex-wrap: nowrap; gap: 8px; }
.wiz__foot .sf-actions .btn { height: 38px; min-height: 0; padding: 0 16px; font-size: 14px; }
.wiz__foot .sf-schedule:not([hidden]) { margin-top: 10px; }
.wiz--instant .wiz__track, .wiz--instant .wiz__view, .wiz--instant .wiz__pane { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .wiz__track, .wiz__view { transition: none; } }
/* Phones: numbers only, the current step named; the bottom bar wraps */
@media (max-width: 767px) {
  .wiz__card { height: 48px; }
  .wiz__label { display: none; }
  .wiz__step.is-current .wiz__label { display: inline; }
  .wiz__btn { padding: 0 5px; }
  .wiz__sep { min-width: 6px; }
  .wiz__foot .sf-actions { flex-wrap: wrap; }
}
/* Number and name on one line box (the font sits high in a 1-line-height box); the studio's own svg size never wins here */
.wiz .wiz__label { display: block; margin: 0; line-height: 22px; }
.wiz__num { line-height: 1; padding-top: 1px; }
.wiz .wiz__num svg { width: 12px; height: 12px; stroke-width: 2.4; }
.wiz .wiz__arrow svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .wiz .wiz__label { display: none; }
  /* #313 (Rohit): numbers alone said nothing about what was coming. The step you are on and the one after it
     are both named; the rest stay numbers, and the row still scrolls to reach them. */
  .wiz .wiz__step.is-current .wiz__label,
  .wiz .wiz__step.is-current + .wiz__sep + .wiz__step .wiz__label { display: block; }
  .wiz .wiz__step.is-current + .wiz__sep + .wiz__step .wiz__label { color: var(--color-text-muted); font-weight: 500; }
  /* The editor's own "← Release Types" link above the rail already goes back a level, so the lead chevron inside
     the rail is a second back control sitting next to the step arrows. One is enough on a phone. */
  .wiz .wiz__step.is-lead, .wiz .wiz__step.is-lead + .wiz__sep { display: none; }
}
.wiz__steps { position: relative; }

/* ‹ Back · Continue › under each step: teal text with an arrow — no underline; a soft pill on hover, the arrow nudging
   the way it goes (#194). The pill's padding hangs outside, so the words still line up with the cards' edges */
.wiz__pager { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px; }
.wiz__link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-link-hover); cursor: pointer; transition: background-color var(--dur-fast); }
/* Poppins sits its letters high in the line: the arrow comes up 1px — halfway between the capitals' middle (B, C: 2px
   up) and the small letters' (where it was), which reads as level (#195, #196) */
.wiz__link svg { flex: none; width: 16px; height: 16px; translate: 0 -1px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.wiz__link:hover, .wiz__link:focus-visible { background: var(--color-primary-soft); outline: none; }
.wiz__link:focus-visible { box-shadow: 0 0 0 2px var(--color-primary); }
.wiz__link:hover svg { transform: translateX(2px); }
.wiz__link--back:hover svg { transform: translateX(-2px); }
/* A drop-down without room below opens upwards (app.keepInView) — above the pinned bar and the player */
.lk-menu.is-up { top: auto; bottom: calc(100% + 6px); }
/* Drop-down lists scroll with a thin bar */
.lk-menu__list, .tagf__menu, .msel__menu { scrollbar-width: thin; scrollbar-color: var(--tg-300) transparent; }
.wiz__pane.is-off { height: 0; overflow: hidden; }      /* steps not on screen take no height (the page never grows from them) */

/* ---- The steps on the left (var(--teal-700)) ------------------------------------------------------------------------
   Every Studio form, and the distribution form: on wide screens the steps stand in a column on the left —
   number, name and a line about each, joined by a line through the middle of the numbers; a tick once a step
   is behind you, amber where something is still missing; what's left to fill in under them. The step fills
   the right. Narrower screens keep the bar on top. Same colours as the rest of the site. */
.wiz__side { display: contents; }                 /* narrow: the bar and the notes sit in the column as before */
.wiz__railhead, .wiz__hint { display: none; }
.wiz__txt { display: flex; flex-direction: column; min-width: 0; }
.wiz__num b { font-weight: 600; }
.wiz .wiz__num .wiz__tick { display: none; width: 13px; height: 13px; stroke-width: 3; }
/* Done: behind you with nothing missing (the Studio forms), or complete (the distribution form, is-done) */
.wiz__step.is-past:not(.is-warn) .wiz__num, .wiz__step.is-done .wiz__num { border-color: var(--color-primary-soft); background: var(--color-primary-soft); color: var(--color-link-hover); }
.wiz__step.is-past:not(.is-warn) .wiz__num b, .wiz__step.is-done .wiz__num b { display: none; }
.wiz .wiz__step.is-past:not(.is-warn) .wiz__tick, .wiz .wiz__step.is-done .wiz__tick { display: block; }
.wiz__step.is-warn:not(.is-current) .wiz__num { border-color: #f1c879; background: var(--warn-soft); color: var(--warn-text); }
.wiz__step.is-current .wiz__num { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.wiz__btn:disabled { cursor: default; }
.wiz__btn:disabled:hover { background: none; }
@media (min-width: 1180px) {
  .wiz { display: grid; grid-template-columns: 252px minmax(0, 1fr); column-gap: 24px; row-gap: 0; align-items: start; }
  .wiz__side { position: sticky; top: calc(var(--header-height) + 16px); z-index: 6; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 12px;
    max-height: calc(100vh - var(--header-height) - var(--player-height) - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tg-200) transparent; }
  body:not(.has-player) .wiz__side { max-height: calc(100vh - var(--header-height) - 32px); }
  .wiz__side { margin: -4px -8px 0; padding: 4px 8px 18px; }          /* room for the cards' shadows inside the scroll box */
  .wiz > :not(.wiz__side) { grid-column: 2; grid-row: 1; }
  .wiz__bar { position: static; margin: 0; padding: 0; background: none; }
  .wiz__card { display: block; height: auto; padding: 16px 10px 10px; border-color: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
  .wiz__railhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 10px; margin: 0 10px 12px; }
  .wiz__railhead span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle); }
  .wiz__railhead b { font-size: 12px; font-weight: 600; color: var(--color-link-hover); }
  .wiz__meter { grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; border-radius: 4px; background: var(--teal-100); }
  .wiz__meter > i { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--color-primary); transition: width .35s var(--ease); }
  .wiz__steps { flex-direction: column; align-items: stretch; gap: 2px; overflow: visible; }
  .wiz__sep, .wiz__arrows { display: none; }
  .wiz__step { position: relative; }
  /* The line: from under one number to just above the next, through their middle (button padding 10 + half of 26 − 1) */
  .wiz__step:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 39px; bottom: -7px; width: 2px; border-radius: 2px; background: var(--tg-100); }
  .wiz__step.is-past::after, .wiz__step.is-lead::after, .wiz__step.is-done::after { background: var(--teal-200); }
  .wiz__btn { width: 100%; height: auto; align-items: flex-start; gap: 12px; padding: 9px 10px; border-radius: 12px; font-size: 14px; line-height: 1.3; color: var(--color-text); white-space: normal; text-align: left; }
  .wiz__num { width: 26px; height: 26px; border-width: 2px; background: #fff; font-size: 12px; }
  .wiz .wiz__label { padding-top: 2px; line-height: 20px; font-weight: 500; }
  .wiz__hint { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--color-text-muted); }
  .wiz__step.is-current .wiz__btn { background: var(--color-primary-soft); font-weight: 400; }
  .wiz__step.is-current .wiz__label { font-weight: 600; color: var(--card-ink); }
  .wiz__step.is-current .wiz__num { box-shadow: 0 0 0 4px rgb(var(--teal-500-rgb) / .18); }
  .wiz__step.is-later .wiz__hint { display: none; }
  /* What's still missing: a card under the steps */
  .wiz__side .wiz__notes { gap: 12px; padding: 16px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
  .wiz__side .sf-miss { gap: 6px; }
  .wiz__side .sf-miss strong { flex-basis: 100%; margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--color-text); }
  .wiz__side .pg-done { padding: 16px; }
  .wiz__side .pg-done__bar { flex-wrap: wrap; }
}

/* Time picker (controls.js): hour · minute · AM/PM, like the calendar */
.mtime__pop { position: fixed; z-index: 520; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); }
.mtime__cols { display: flex; gap: 4px; }
.mtime__col { display: flex; flex-direction: column; gap: 2px; max-height: 232px; padding: 0 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tg-300) transparent; }
.mtime__col + .mtime__col { border-left: 1px solid var(--tg-50); padding-left: 6px; }
.mtime__opt { min-width: 52px; padding: 7px 12px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 14px; color: var(--color-text); text-align: center; cursor: pointer; font-variant-numeric: tabular-nums; }
.mtime__opt:hover { background: var(--teal-50); }
.mtime__opt.is-on { background: var(--color-primary); color: #fff; font-weight: 600; }
.mtime__foot { display: flex; justify-content: flex-end; margin-top: 6px; padding: 6px 4px 0; border-top: 1px solid var(--tg-50); font-size: 13px; }

/* Controls outside a form field (lineup day / time, opening hours): a small box in our look (Bugs210) */
.field.field--bare { display: inline-flex; position: relative; height: auto; margin: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; vertical-align: middle; }
.field--bare > .msel__btn, .field--bare > .mdate__btn { width: 100%; height: 36px; min-height: 36px; padding: 0 10px !important; border: 1px solid var(--color-control); border-radius: var(--radius-sm); background: #fff; font-size: 13px; }
.field--bare > .msel__btn svg, .field--bare > .mdate__btn svg { width: 16px; height: 16px; margin-top: 0; }
.field--bare.is-open > .msel__btn, .field--bare.is-open > .mdate__btn, .field--bare > .msel__btn:focus-visible, .field--bare > .mdate__btn:focus-visible { border-color: var(--color-primary); outline: none; }
.field.field--bare.is-open { box-shadow: none; }
/* No browser spinners on number boxes, anywhere */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field--bare.mdate { min-width: 118px; }
.field--bare.msel { min-width: 110px; }
.field.field--bare { display: inline-flex !important; height: auto !important; align-items: center; }
.field--bare > .msel__btn, .field--bare > .mdate__btn { position: relative; }

/* ---- A setting's dropdown (MuSlateChoice, #132): the choice on the button; each choice with what it means and our radio */
.choice { position: relative; }
.choice__btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 12px 0 10px; border: 1px solid var(--color-control); border-radius: var(--radius-sm); background: #fff; color: var(--color-text); text-align: left; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.choice__btn:hover:not(:disabled) { border-color: var(--teal-200); }
.choice.is-open .choice__btn, .choice__btn:focus-visible { border-color: var(--color-primary); box-shadow: 0 3px 6px var(--teal-100); outline: none; }
.choice__btn:disabled { background: var(--tg-50); cursor: not-allowed; }
.choice__btn .choice__ic { color: var(--color-link); }
.choice__ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #f1f8f8; color: var(--tg-600); }
.choice__ic svg { width: 19px; height: 19px; }
.choice__v { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.choice__v small { font-size: 11px; color: var(--color-text-subtle); }
.choice__v small:empty { display: none; }
.choice__v strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choice__chev { display: grid; color: var(--color-text-muted); transition: transform var(--dur-fast); }
.choice__chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.choice.is-open .choice__chev { transform: rotate(180deg); }
.choice__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 400px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: 0 16px 40px rgb(var(--teal-950-rgb) / .14); }
.choice__opt { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; cursor: pointer; transition: background-color var(--dur-fast); }
.choice__opt + .choice__opt { margin-top: 2px; }
.choice__opt:hover { background: #f5fafa; }
.choice__opt.is-on { background: var(--teal-50); }
.choice__opt.is-on .choice__ic { background: #fff; color: var(--color-link); }
.choice__t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.choice__t strong { font-size: 14px; font-weight: 600; color: var(--color-text); }
.choice__t small { font-size: 13px; line-height: 1.4; color: var(--color-text-muted); }
.choice__opt input { flex: none; margin: 0; }
@media (max-width: 720px) { .choice__menu { left: 0; right: auto; width: 100%; max-width: none; } }

/* ---- The editors' pinned bar on phones (song, album, event, page — Rohit): Delete is a bin icon on the left, the
   other buttons share the row evenly, the main one (Publish) takes a full row of its own */
@media (max-width: 767px) {
  .wiz__footwrap .wiz__foot { padding: 8px; }
  .wiz__foot .sf-actions, .wiz__foot .eve-foot__act { flex-wrap: wrap; justify-content: stretch; gap: 8px; }
  .wiz__foot .eve-foot__act { display: contents; }
  .wiz__foot .sf-actions > .btn, .wiz__foot .eve-foot__act > .btn { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .wiz__foot .sf-actions .btn--primary, .wiz__foot .eve-foot__act .btn--primary { flex-basis: 100%; order: 10; }
  .wiz__foot .sf-actions > .sf-delete { flex: none; width: 38px; padding: 0; font-size: 0; display: inline-grid; place-items: center; order: -1; margin-right: 0; }
  .wiz__foot .sf-delete::before { content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E") center / contain no-repeat; }
  .wiz__foot .sf-actions--pair .btn--primary { flex-basis: auto; order: 0; }   /* Cancel Schedule · Save & Close: one row (#183) */
  .wiz__foot .sf-saved { flex-basis: 100%; order: -3; text-align: center; font-size: 12px; }
  .wiz__foot .sf-saved:empty { display: none; }
}
/* Locked (#183): the field lock where the arrow was */
.choice.is-locked .choice__chev { visibility: hidden; }
.choice.is-locked .choice__btn strong { color: var(--color-text-muted); }
/* Open, the list floats over everything (moved to <body>, placed by controls.js) */
.choice__menu.is-floating { position: fixed; right: auto; z-index: 1200; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 720px) { .choice__menu.is-floating { width: auto; } }

/* Phones: the bin centred in its box (the button's own text is kept for screen readers only) */
@media (max-width: 767px) {
  .wiz__foot .sf-actions > .sf-delete { line-height: 0; }
  .wiz__foot .sf-actions > .sf-delete > .btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wiz__foot .sf-delete::before { display: block; }
}
.pf-ic--img img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

/* A number and its unit in one box (#180): "Length  120   minutes ▾" — the unit is a small picker at the box's right end */
.field--unit .field__input { padding-right: 132px; }
.field--unit .field__unit { position: absolute; top: 50%; right: 6px; z-index: 1; height: 34px; max-width: 124px; padding: 0 28px 0 12px; border: 0; border-left: 1px solid var(--color-border); border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dafb0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  font: inherit; font-size: 14px; color: var(--color-text); transform: translateY(-50%); appearance: none; cursor: pointer; }
.field--unit .field__unit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-radius: 6px; }

/* ---- Tooltips (#229, app.js data-tooltip): a small dark label above the thing — the same look as the lock's tip */
.tip { position: fixed; z-index: 10000;   /* above dialogs */  max-width: 260px; padding: 5px 10px; border-radius: 6px; background: var(--tg-900); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); animation: tip-in .12s ease-out; }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* #303 (Rohit): drop-downs of releases and profiles show each one's picture (controls.js: select[data-pics], option[data-img]) */
.msel__opt.has-pic { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.msel__pic { display: grid; flex: none; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 8px; background: var(--color-primary-soft); color: var(--color-link);
  font-size: 13px; font-weight: 700; }
.msel__pic.is-round { border-radius: 50%; }
.msel__pic img { width: 100%; height: 100%; object-fit: cover; }
.msel__pic svg { width: 16px; height: 16px; margin: 0 !important; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: none !important; }
.msel__pic.is-sm { width: 22px; height: 22px; border-radius: 5px; font-size: 10px; }
.msel__pic.is-sm.is-round { border-radius: 50%; }
.msel__pic.is-sm svg { width: 12px; height: 12px; }
.msel__t { display: flex; flex-direction: column; min-width: 0; }
.msel__t > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msel__t small { color: var(--color-text-muted); font-size: 12px; font-weight: 400; }
.msel__text:has(.msel__pic) { display: flex; align-items: center; gap: 8px; margin-top: -2px; }
.msel__lbl { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---- onboarding.css ---- */
/* =====================================================================
   Onboarding after sign-up (decisions #65–#68, layout #141)
   Step 2 — account type — is a compact dialog (it never changes size).
   Step 3 onwards is a full-screen page ([data-mode="page"]):
     top strip   logo · progress · "Step 2 of 3"           (stays put)
     main        one centred column; grows and scrolls       (Load more, scans, long lists: nothing resizes)
     action bar  Back · (what comes in) · Skip · the step's button   (stays put; buttons only)
   Look: MuSlate teal; chips / artists / skills keep the 2024 states (light-teal hover, teal border + ✓ picked).
   ===================================================================== */

/* ---- The dialog (step 2) ---------------------------------------------------------- */
.ob { align-items: center; }
.ob__card {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 0 24px 6px rgba(4, 4, 4, 0.2);
  padding: 36px clamp(16px, 5vw, 48px) 32px;
  animation: dialog-in var(--dur-slow) var(--ease);
}
.ob-page { display: none; }

/* ---- The page (step 3 onwards) ---------------------------------------------------- */
.ob[data-mode="page"] {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}
.ob[data-mode="page"] .ob__card { display: none; }
.ob[data-mode="page"] .ob-page { display: flex; flex-direction: column; height: 100%; height: 100dvh; animation: ob-page-in .35s var(--ease); }
@keyframes ob-page-in { from { opacity: 0; } to { opacity: 1; } }

/* Top strip */
.ob-top {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 clamp(16px, 4vw, 40px);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--color-border);
  background: #fff;
}
.ob-top__logo { display: block; width: 150px; padding-bottom: 6px; }       /* the shared logo, with its "The Music Slate" tag */
.ob-top__steps { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-top__step { display: flex; flex-direction: column; gap: 6px; width: clamp(64px, 11vw, 132px); }
.ob-top__step i { display: block; height: 4px; border-radius: 4px; background: var(--tg-100); transition: background-color var(--dur-med) var(--ease); }
.ob-top__step.is-done i { background: var(--teal-300); }
.ob-top__step.is-current i { background: var(--color-primary); }
.ob-top__step span { font-size: 12px; font-weight: 500; color: var(--color-text-subtle); white-space: nowrap; }
.ob-top__step.is-current span { color: var(--color-link-hover); }
.ob-top__count { justify-self: end; font-size: 13px; font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }

/* Main column: the only thing that scrolls */
.ob-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* A light teal-grey page under white cards: the content stands out, still all MuSlate teal */
  background: linear-gradient(180deg, var(--teal-100) 0, #eef5f5 260px, #f1f6f6 100%);
  scroll-padding-top: 72px;
}
.ob-main__in { width: 100%; max-width: 800px; margin: 0 auto; padding: clamp(28px, 5vh, 52px) clamp(16px, 4vw, 24px) 48px; }

/* Action bar */
.ob-bar {
  flex: none;
  border-top: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 -8px 24px rgb(var(--teal-950-rgb) / 0.05);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Back on the left, the buttons in the middle, what comes in on the right */
.ob-bar__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; max-width: 1040px; min-height: 72px; margin: 0 auto; padding: 12px clamp(16px, 4vw, 40px); }
.ob-bar__back { justify-self: start; }
.ob-bar__back { gap: 6px; padding: 0 16px 0 12px; }
.ob-bar__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ob-bar__back.is-off { visibility: hidden; }
.ob-bar__sum { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); }
.ob-bar__sum strong { font-weight: 600; color: var(--color-text); }
.ob-bar__sum i { font-style: normal; color: var(--color-text-subtle); }
.ob-bar__acts { display: flex; justify-content: center; gap: 10px; }
.ob-bar__btn { min-width: 128px; white-space: nowrap; }
.ob-bar__btn.btn--primary { min-width: 168px; }
.ob-bar__btn.is-loading { color: transparent; }

/* ---- Steps: one visible, slides in (back: from the left) --------------------------------- */
.ob__step { display: none; }
.ob__step.is-active { display: block; }
.ob__step.is-entering { animation: ob-in-next 0.4s cubic-bezier(0.22, 0.9, 0.3, 1); }
.ob__step.is-entering-back { animation: ob-in-back 0.4s cubic-bezier(0.22, 0.9, 0.3, 1); }
@keyframes ob-in-next { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes ob-in-back { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ob__step.is-entering, .ob__step.is-entering-back, .ob[data-mode="page"] .ob-page { animation: none; }
}

/* Headings */
.ob-head { margin-bottom: 28px; text-align: center; }
.ob__title { font-size: clamp(1.25rem, 4.6vw, 1.75rem); font-weight: 600; line-height: 1.25; text-align: center; color: var(--color-text); }
.ob__card .ob__title { font-size: clamp(1.15rem, 4.4vw, 1.5rem); }
.ob__subtitle { max-width: 480px; margin: 8px auto 0; font-size: 14px; text-align: center; color: var(--color-text-muted); text-wrap: balance; }
.ob__hint { margin-top: 14px; font-size: 13px; text-align: center; color: var(--color-link-hover); }
.ob__alert { margin-top: 16px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; text-align: center; background: var(--danger-soft); color: #B00E1D; }
.ob__alert:empty { display: none; }
.ob__empty { grid-column: 1 / -1; padding: 28px 0; font-size: 14px; text-align: center; color: var(--color-text-muted); }
.ob__more { display: flex; margin: 22px auto 0; min-width: 160px; }
.ob__more[hidden] { display: none; }

/* The dialog's button */
.ob__actions { display: flex; justify-content: center; margin-top: 28px; }
.ob__btn { min-width: 168px; padding: 0 24px; white-space: nowrap; }
.ob__btn.is-loading { width: 45px; min-width: 45px; overflow: hidden; padding: 0; border-radius: 50%; color: transparent; transition: width 0.4s ease, border-radius 0.4s ease; }

/* ---- Account type: two picture cards; hover lifts the picture and reveals the text ---- */
.ob-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 240px));
  justify-content: center;
  gap: clamp(12px, 4vw, 32px);
  margin-top: 60px;                     /* room for the lifted picture */
}
.ob-type {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 264px;
  padding: 0 14px 16px;
  border: 1px solid var(--color-control-soft);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.ob-type input { position: absolute; opacity: 0; pointer-events: none; }
.ob-type > :not(input) { transition: transform 0.5s ease, opacity 0.4s ease; }
.ob-type__art { display: block; width: 124px; margin-top: 18px; }
.ob-type__art img { display: block; width: 100%; height: auto; }
.ob-type__title { margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--color-link); }
.ob-type__text { margin-top: 6px; opacity: 0; font-size: 12px; line-height: 1.45; color: var(--color-text-muted); }
.ob-type__radio { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 10px; opacity: 0; border: 1.5px solid var(--color-control-icon); border-radius: 50%; }
.ob-type__radio .ob-check { width: 18px; height: 18px; fill: var(--color-primary); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease; }
/* Everything moves with transform / opacity only: the card and the dialog never change size */
@media (hover: hover) {
  .ob-type:hover { border-color: var(--teal-200); box-shadow: 0 8px 22px rgb(var(--teal-500-rgb) / 0.14); }
  .ob-type:hover > :not(input) { transform: translateY(-48px); }
  .ob-type:hover .ob-type__text, .ob-type:hover .ob-type__radio { opacity: 1; }
}
.ob-type:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 8px 22px rgb(var(--teal-500-rgb) / 0.2); }
.ob-type:has(input:checked) > :not(input) { transform: translateY(-48px); }
.ob-type:has(input:checked) .ob-type__text { opacity: 1; }
.ob-type:has(input:checked) .ob-type__radio { opacity: 1; border-color: transparent; }
.ob-type:has(input:checked) .ob-check { opacity: 1; transform: none; }
.ob-type:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 420px) {
  .ob-types { margin-top: 46px; }
  .ob-type { height: 236px; padding: 0 8px 12px; }
  .ob-type__art { width: 88px; }
  .ob-type:has(input:checked) > :not(input) { transform: translateY(-36px); }
  .ob-type__title { font-size: 12px; }
}

/* ---- Chips: languages, genres, skills --------------------------------------------- */
.ob-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 560px) { .ob-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.ob-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 34px 8px 10px;
  border: 1px solid var(--tg-100);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 1px 3px rgb(var(--teal-950-rgb) / .05);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.ob-chip__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-link);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: background-color .3s ease, color .3s ease;
}
.ob-chip__badge svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob-chip__name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; overflow-wrap: anywhere; }
.ob-chip .ob-check { position: absolute; right: 10px; top: calc(50% - 9px); width: 18px; height: 18px; fill: var(--color-primary); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease; }
.ob-chip__order { position: absolute; right: 10px; top: calc(50% - 10px); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 600; opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease; }
.ob-chip:hover { border-color: var(--teal-200); color: var(--color-link-hover); box-shadow: 0 4px 12px rgb(var(--teal-500-rgb) / .14); }
.ob-chip.is-selected { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); }
.ob-chip.is-selected .ob-chip__badge { background: var(--color-primary); color: #fff; }
.ob-chip.is-selected .ob-check, .ob-chip.is-selected .ob-chip__order { opacity: 1; transform: none; }
.ob-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.ob-chip:disabled:hover { border-color: var(--tg-100); box-shadow: none; color: var(--color-text-muted); }
.ob-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ob-chip[data-shade="1"] .ob-chip__badge { background: var(--teal-50); }
.ob-chip[data-shade="2"] .ob-chip__badge { background: var(--teal-100); color: var(--teal-600); }
.ob-chip[data-shade="3"] .ob-chip__badge { background: var(--teal-200); color: var(--teal-700); }
.ob-chip[data-shade="4"] .ob-chip__badge { background: var(--teal-50); }
.ob-chip.is-selected[data-shade] .ob-chip__badge { background: var(--color-primary); color: #fff; }
.ob-chip--sk { pointer-events: none; background: var(--color-skeleton); border-color: var(--color-skeleton); }
@media (max-width: 560px) { .ob-chip { min-height: 52px; font-size: 14px; gap: 9px; } .ob-chip__badge { width: 32px; height: 32px; } }

/* ---- Artists ---------------------------------------------------------------------- */
.ob-artists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .ob-artists { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 400px) { .ob-artists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob-artist {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 10px 16px;
  border: 1px solid var(--tg-100);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 1px 3px rgb(var(--teal-950-rgb) / .05);
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease;
}
.ob-artist__photo { display: grid; place-items: center; width: 96px; height: 96px; padding: 3px; border: 2px solid var(--color-text-subtle); border-radius: 50%; transition: border-color .3s ease; }
.ob-artist__photo img, .ob-artist__initial { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ob-artist__initial { display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-link); font-weight: 600; font-size: 20px; }
.ob-artist__name { width: 100%; margin-top: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 500; color: var(--color-text); }
.ob-artist__followers { margin-top: 2px; font-size: 12px; }
.ob-artist .ob-check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; fill: var(--color-primary); opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.3s ease; }
.ob-artist:hover { border-color: var(--teal-200); box-shadow: 0 4px 12px rgb(var(--teal-500-rgb) / .14); }
.ob-artist:hover .ob-artist__photo, .ob-artist.is-selected .ob-artist__photo { border-color: var(--color-primary); }
.ob-artist.is-selected { border-color: var(--color-primary); background: var(--color-primary-soft); }
.ob-artist.is-selected .ob-check { opacity: 1; transform: none; }
.ob-artist:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ob-artist--sk { pointer-events: none; height: 180px; background: var(--color-skeleton); border-color: var(--color-skeleton); }
@media (max-width: 560px) { .ob-artist__photo { width: 76px; height: 76px; } .ob-artist--sk { height: 150px; } }

/* ---- Your music: find yourself ------------------------------------------------------- */
.ob-src { display: flex; justify-content: center; margin: 0 auto 16px; }
.ob-src__logo { display: grid; place-items: center; width: 52px; height: 52px; padding: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(17, 17, 17, .08); }
.ob-src__logo + .ob-src__logo { margin-left: -10px; }
.ob-src__logo svg { width: 100%; height: 100%; }
.ob-src__logo:last-child svg { width: 78%; height: 78%; border-radius: 10px; }

.ob-find { max-width: 560px; margin: 0 auto; }
.ob-find__box { position: relative; }
/* The big search field */
/* The field itself carries the white, the border, the radius and the shadow; the input stays transparent on it
   (so the corners match and the search icon shows) */
.ob-find__field { height: 60px; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgb(var(--teal-950-rgb) / .06); }
.ob-find__field:focus-within { box-shadow: 0 6px 22px rgb(var(--teal-500-rgb) / .18); }
.ob-find__field .field__input { padding-left: 52px; font-size: 15px; }
.ob-find__field .field__label { left: 52px; }
.ob-find__field .field__icon, .ob-find__field:focus-within .field__icon { left: 18px; width: 22px; height: 22px; fill: none; stroke: var(--tg-400); stroke-width: 2; stroke-linecap: round; }
.ob-find__field:focus-within .field__icon { stroke: var(--color-primary); }
.ob-find__field[hidden] { display: none; }

/* The chosen artist, in the field's place */
.ob-pick { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 10px 10px 12px; border: 1.5px solid var(--color-primary); border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgb(var(--teal-500-rgb) / .14); animation: ob-pick-in .25s var(--ease); }
.ob-pick.is-off { border-color: var(--color-control-soft); box-shadow: 0 6px 20px rgb(var(--teal-950-rgb) / .06); }
.ob-pick[hidden] { display: none; }
@keyframes ob-pick-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.ob-pick__photo { position: relative; flex: none; }
.ob-pick__img { display: block; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--tg-50); }
.ob-pick__badge { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; }
.ob-pick__badge svg { display: block; width: 100%; height: 100%; border-radius: 5px; }
.ob-pick__t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ob-pick__t strong { font-size: 16px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-pick__t small { font-size: 13px; color: var(--color-text-muted); }
.ob-pick__ok { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff; }
.ob-pick__ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ob-pick__btn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--color-control-soft); border-radius: 50%; background: #fff; color: var(--color-text-muted); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.ob-pick__btn:hover { border-color: var(--color-primary); color: var(--color-link); background: var(--color-primary-soft); }
.ob-pick__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ob-pick__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Typing a name: Spotify's artists drop down over the page (the page doesn't grow) */
.ob-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; max-height: 340px; margin: 0; padding: 6px; overflow-y: auto; list-style: none;
  border: 1px solid var(--color-border); border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgb(var(--teal-950-rgb) / .16); text-align: left;
  /* a slim scrollbar inside the rounded corners (the default one squared them off) */
  clip-path: inset(0 round 16px); scrollbar-width: thin; scrollbar-color: var(--tg-200) transparent; }
.ob-sugg::-webkit-scrollbar { width: 8px; }
.ob-sugg::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.ob-sugg::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 8px; background: var(--tg-200); }
.ob-sugg__it { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.ob-sugg__it:hover, .ob-sugg__it.is-on { background: var(--teal-50); }
.ob-sugg__img { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--tg-50); }
.ob-sugg__it span { display: flex; flex-direction: column; min-width: 0; }
.ob-sugg__it strong { font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-sugg__it small { font-size: 12px; color: var(--color-text-muted); }
.ob-sugg__none { padding: 14px; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.ob-initial { display: grid; place-items: center; font-size: 20px; font-weight: 600; color: var(--color-link); }

/* Under the chosen artist */
.ob-found:empty { display: none; }
.ob-found { margin-top: 16px; text-align: center; }
.ob-found__checking { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }
.ob-spin { width: 16px; height: 16px; border: 2px solid var(--teal-100); border-top-color: var(--color-primary); border-radius: 50%; animation: ob-spin .8s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-found__q { margin: 4px 0 10px; font-size: 13px; font-weight: 500; color: var(--color-text); }
.ob-found__note { font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }
.ob-found__note.is-error { color: var(--color-error); }
.ob-found__picks { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ob-found__pick { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--color-control-soft); border-radius: 12px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.ob-found__pick span { display: flex; flex-direction: column; min-width: 0; }
.ob-found__pick strong { font-size: 14px; font-weight: 600; color: var(--color-text); }
.ob-found__pick small { font-size: 12px; color: var(--color-text-muted); }
.ob-found__pick.is-on { border-color: var(--color-primary); background: var(--teal-50); }
.ob-found__img { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--tg-50); }
.ob-claim { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; text-align: left; }
.ob-claim .field--area { height: auto; min-height: 88px; }
.ob-claim .field__input { padding-left: 14px; }
.ob-claim .field__label { left: 14px; }
.ob-claim textarea.field__input { padding-top: 22px; }
.ob-claim .btn { align-self: center; min-width: 200px; }

/* ---- Scanning: the MuSlate mark in a progress ring -------------------------------------- */
/* Under the chosen artist, which stays (greyed, ✎ × off) — the page doesn't change */
/* No card of its own: straight on the page, so the chosen artist stays the one solid thing on screen */
.ob-scan { display: flex; flex-direction: column; align-items: center; max-width: 560px; margin: 28px auto 0; padding: 4px 20px 8px; text-align: center; animation: ob-fade-up .35s var(--ease); }
.ob-scan[hidden] { display: none; }
.ob-pick.is-busy { opacity: .7; box-shadow: none; }
.ob-pick.is-busy .ob-pick__btn { opacity: .4; cursor: default; }
.ob-scan__ring { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.ob-scan__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ob-scan__track, .ob-scan__fill { fill: none; stroke-width: 6; }
.ob-scan__track { stroke: var(--tg-200); }                 /* visible on the tinted page */
.ob-scan__ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgb(var(--teal-600-rgb) / .12); }   /* a white disc behind the mark */
.ob-scan__ring img { position: relative; }
.ob-scan__fill { stroke: var(--color-primary); stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset .15s linear; }
.ob-scan__ring img { width: 52px; height: 52px; animation: ob-breathe 2.4s ease-in-out infinite; }
@keyframes ob-breathe { 50% { transform: scale(1.08); } }
.ob-scan__pct { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--color-link-hover); font-variant-numeric: tabular-nums; }
.ob-scan__caption { margin-top: 18px; font-size: 17px; font-weight: 600; color: var(--color-text); }
.ob-scan__quote { max-width: 420px; margin-top: 16px; font-size: 14px; font-style: italic; line-height: 1.6; color: var(--color-text-muted); }
.ob-scan .is-in { animation: ob-fade-up .5s var(--ease); }
@keyframes ob-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-scan__ring img, .ob-scan .is-in { animation: none; } }

/* ---- Review: the artist, then Singles · Albums · Profiles --------------------------------- */
.ob-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--tg-100); border-radius: 18px; background: linear-gradient(120deg, var(--teal-50) 0%, var(--surface-hover) 60%, #fff 100%); text-align: left; }
.ob-hero__photo { position: relative; flex: none; }
.ob-hero__img { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: var(--teal-100); box-shadow: 0 6px 18px rgb(var(--teal-600-rgb) / .18); }
.ob-hero__badge { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; padding: 2px; border-radius: 50%; background: #fff; }
.ob-hero__badge svg { display: block; width: 100%; height: 100%; }
.ob-hero__t { display: flex; flex-direction: column; min-width: 0; }
.ob-hero__kicker { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-link-hover); }
.ob-hero__t strong { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-hero__t small { font-size: 13px; color: var(--color-text-muted); }
/* "Show my name on MuSlate as <artist>" (#140) */
.ob-name { flex-basis: 100%; display: flex; align-items: flex-start; gap: 10px; padding-top: 14px; border-top: 1px solid rgb(var(--teal-600-rgb) / .15); cursor: pointer; font-size: 14px; color: var(--color-text); }
.ob-name input { position: absolute; opacity: 0; pointer-events: none; }
.ob-name__box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--teal-200); border-radius: 6px; background: #fff; }
.ob-name__box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.ob-name input:checked + .ob-name__box { border-color: var(--color-primary); background: var(--color-primary); }
.ob-name input:checked + .ob-name__box svg { opacity: 1; }
.ob-name input:focus-visible + .ob-name__box { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ob-name small { display: block; margin-top: 2px; font-size: 13px; color: var(--color-text-muted); }

/* Tabs: a segmented control that stays under the top strip while the list scrolls */
.ob-tabsbar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px -8px 14px; padding: 10px 8px; background: rgba(240, 246, 246, .96); }
.ob-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--color-surface-muted); }   /* the site's .seg look (var(--teal-600)) */
.ob-seg__opt { padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13px; font-weight: 500; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast), color var(--dur-fast); }
.ob-seg__opt span { margin-left: 2px; font-size: 13px; color: var(--color-text-subtle); }
.ob-seg__opt:hover { color: var(--color-text); }
.ob-seg__opt.is-on { background: #fff; color: var(--color-link-hover); font-weight: 600; box-shadow: var(--shadow-sm); }
.ob-seg__opt.is-on span { color: var(--color-link); }
.ob-seg__opt:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ob-tabsbar__all { flex: none; }
.ob-tabsbar__all[hidden] { display: none; }

/* Releases: numbered rows; an album opens to its songs */
.ob-rels { display: flex; flex-direction: column; gap: 10px; }
.ob-rel { flex-shrink: 0; overflow: hidden; border: 1.5px solid var(--tg-50); border-radius: 14px; background: #fff; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.ob-rel:hover { border-color: var(--teal-200); }
.ob-rel.is-selected { border-color: var(--color-primary); background: #f4fbfb; }
.ob-rel.is-fixed { background: #fafbfb; }
.ob-rel.is-fixed:hover { border-color: var(--tg-50); }
.ob-rel__row { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 6px; cursor: pointer; }
.ob-rel.is-fixed .ob-rel__row { cursor: default; }
.ob-rel__row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 14px; }
.ob-rel__n { flex: none; width: 44px; font-size: 22px; font-weight: 700; text-align: center; color: var(--tg-200); font-variant-numeric: tabular-nums; transition: color .2s; }
.ob-rel.is-selected .ob-rel__n { color: var(--teal-300); }
.ob-rel__art { flex: none; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: var(--tg-50); }
.ob-rel__art img { width: 100%; height: 100%; object-fit: cover; }
.ob-rel__ph { display: grid; place-items: center; width: 100%; height: 100%; color: var(--teal-300); }
.ob-rel__ph svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob-rel__t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ob-rel__t strong { font-size: 15px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-rel__t small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; }
/* #313: the ellipsis belongs on the words, not on the flex row around them, which never draws one */
.ob-rel__meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ob-rel__who { display: block !important; color: var(--color-text-subtle) !important; }
.ob-rel__type { padding: 1px 7px; border-radius: 999px; background: var(--tg-50); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tg-600); }
.ob-rel__check { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--tg-300); border-radius: 50%; color: transparent; transition: .2s; }
.ob-rel__check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ob-rel.is-selected .ob-rel__check { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.ob-rel__tag { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--tg-50); font-size: 12px; font-weight: 500; color: var(--tg-600); white-space: nowrap; }
.ob-rel__acts { display: flex; flex: none; gap: 6px; }
.ob-rel__acts .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.ob-rel__more { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--color-control-soft); border-radius: 50%; background: #fff; color: var(--color-text-muted); cursor: pointer; transition: transform .2s, border-color .2s, color .2s; }
.ob-rel__more:hover { border-color: var(--color-primary); color: var(--color-link); }
.ob-rel__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ob-rel.is-open .ob-rel__more { transform: rotate(180deg); }
.ob-tl { margin: 0; padding: 4px 16px 12px 138px; list-style: none; border-top: 1px dashed var(--tg-200); }
.ob-tl__row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--tg-50); }
.ob-tl__row:last-child { border-bottom: 0; }
.ob-tl__n { flex: none; width: 20px; font-size: 13px; color: var(--color-text-subtle); text-align: right; font-variant-numeric: tabular-nums; }
.ob-tl__t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ob-tl__t strong { font-size: 14px; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-tl__t small { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-tl__row.is-yours strong { font-weight: 600; }
.ob-tl__you { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--color-primary); font-size: 11px; font-weight: 600; color: #fff; }
.ob-tl__d { flex: none; font-size: 12px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* Profiles: full-width rows with the whole link, ✎ and a switch */
.ob-profs { display: flex; flex-direction: column; gap: 10px; }
.ob-pl { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--tg-50); border-radius: 14px; background: #fff; transition: border-color .2s, background-color .2s; }
.ob-pl.is-selected { border-color: var(--color-primary); background: #f4fbfb; }
.ob-pl__logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand); color: #fff; overflow: hidden; }
.ob-pl__logo .pf-ic { width: 22px; height: 22px; color: #fff; }
.ob-pl__logo:has(.pf-ic--img) { background: #fff; border: 1px solid var(--color-border); }
.ob-pl__logo .pf-ic--img { width: 100%; height: 100%; }
.ob-pl__logo .pf-ic--img img { border-radius: 0; }
.ob-pl.is-missing .ob-pl__logo { filter: grayscale(.4); opacity: .7; }
.ob-pl__t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ob-pl__t strong { font-size: 14px; font-weight: 600; color: var(--color-text); }
.ob-pl__t small { font-size: 12px; color: var(--color-text-muted); }
.ob-prof__url { font-size: 13px; color: var(--color-link-hover); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ob-prof__url:hover { text-decoration: underline; }
.ob-prof__maybe { color: #b7791f !important; }
.ob-prof__in { width: 100%; height: 34px; margin-top: 2px; padding: 0 10px; border: 1px dashed var(--tg-300); border-radius: 8px; font: inherit; font-size: 13px; background: #fff; }
.ob-prof__in:focus { outline: none; border-style: solid; border-color: var(--color-primary); }
.ob-pl__edit { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-subtle); cursor: pointer; }
.ob-pl__edit:hover { background: var(--tg-50); color: var(--color-link); }
.ob-pl__edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ob-switch { position: relative; flex: none; width: 42px; height: 24px; border: 0; border-radius: 12px; background: #d6dcdc; cursor: pointer; transition: background-color .2s; }
.ob-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.ob-switch[aria-checked="true"] { background: var(--color-primary); }
.ob-switch[aria-checked="true"] i { transform: translateX(18px); }
.ob-switch:disabled { cursor: default; opacity: .8; }
.ob-switch:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* While a scan runs, nothing else to press */
.ob.is-fetching .ob-bar { pointer-events: none; }

/* ---- Phones ---------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ob-top { grid-template-columns: auto 1fr auto; height: 56px; gap: 12px; }
  .ob-top__logo { width: 112px; }
  .ob-top__steps { justify-content: center; gap: 5px; }
  .ob-top__step { width: auto; flex: 1; max-width: 56px; }
  .ob-top__step span { display: none; }
  .ob-top__count { font-size: 12px; }
  .ob-main__in { padding-top: 26px; }
  .ob-head { margin-bottom: 22px; }
  /* The bar: what comes in on its own line, then Back · Skip · the button sharing the width */
  .ob-bar__in { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; padding: 10px 16px; }
  .ob-bar__sum { order: -1; flex-basis: 100%; justify-content: center; font-size: 13px; }
  .ob-bar__sum:empty { display: none; }
  .ob-bar__back { flex: none; width: 46px; padding: 0; justify-content: center; }
  .ob-bar__back span { display: none; }
  .ob-bar__back.is-off { display: none; }
  .ob-bar__acts { flex: 1; }
  .ob-bar__btn, .ob-bar__btn.btn--primary { flex: 1; min-width: 0; padding: 0 12px; }
  .ob-hero { padding: 14px; gap: 12px; }
  .ob-hero__img { width: 58px; height: 58px; }
  .ob-hero__t strong { font-size: 19px; }
  .ob-tabsbar { flex-wrap: wrap; margin-left: -16px; margin-right: -16px; padding: 10px 16px; }
  .ob-seg { flex: 1; }
  .ob-seg__opt { flex: 1; padding: 8px 6px; font-size: 13px; }
  .ob-tabsbar__all { margin-left: auto; }
  .ob-rel__row { flex-wrap: wrap; gap: 10px; padding: 10px 12px 10px 4px; }
  .ob-rel__n { width: 30px; font-size: 16px; }
  .ob-rel__art { width: 50px; height: 50px; }
  .ob-rel__t { flex-basis: calc(100% - 160px); }
  .ob-rel__acts { width: 100%; padding-left: 94px; }
  .ob-tl { padding-left: 16px; }
  .ob-pick { gap: 10px; }
  .ob-pick__img { width: 46px; height: 46px; }
  .ob-pick__btn { width: 34px; height: 34px; }
}
.ob-page { position: relative; }

/* ---- notifications.css ---- */
/* =====================================================================
   Notification drawer (2024 notification.css): slides in from the right
   over a blurred page; tabs; items with photo, text, time, unread dot;
   Accept / Remove on tags; "All caught up!" empty state.
   ===================================================================== */
.notif {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  width: min(400px, 100vw);
  padding-top: env(safe-area-inset-top);
  background: #fff;
  box-shadow: 0 0 24px 6px rgba(4, 4, 4, 0.2);
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out;
}
.notif.is-open { transform: none; }
.notif[hidden] { display: none; }
.notif-backdrop {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgb(var(--teal-500-rgb) / 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade-in var(--dur-med) var(--ease);
}
body.notif-open { overflow: hidden; }

.notif__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 8px 22px; }
.notif__title { font-size: 20px; font-weight: 600; }
.notif__tools { position: relative; display: flex; gap: 4px; }
.notif__icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-nav);
}
.notif__icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notif__icon-btn:hover,
.notif__icon-btn[aria-expanded="true"] { background: var(--color-primary-soft); color: var(--color-link); }
.notif__close { background: #C9C9CF; color: #fff; width: 32px; height: 32px; margin: 2px 0 0 4px; }
.notif__close:hover { background: var(--color-primary); color: #fff; }
.notif__menu {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 2;
  min-width: 180px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.notif__menu-item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); text-align: left; text-decoration: none; }
.notif__menu-item:hover { background: var(--color-primary-soft); color: var(--color-link); }

.notif__tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--color-border); }
.notif__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 12px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
}
.notif__tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background-color var(--dur-fast) var(--ease); }
.notif__tab:hover { color: var(--color-link); }
.notif__tab.is-active { color: var(--color-link); }
.notif__tab.is-active::after { background: var(--color-primary); }
.notif__count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 600; line-height: 18px; text-align: center; }
.notif__count[hidden] { display: none; }

.notif__panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 calc(16px + env(safe-area-inset-bottom)); }
.notif__panel[hidden] { display: none; }
.notif__list { list-style: none; margin: 0; padding: 0; }

.notif__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 12px 40px 12px 18px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.notif__item:hover { background: var(--surface-hover); }
.notif__item.is-unread { background: var(--teal-50); }
.notif__item.is-unread:hover { background: var(--color-primary-soft); }
.notif__img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--color-primary-soft); }
.notif__img--brand { padding: 6px; object-fit: contain; background: #fff; border: 1px solid var(--color-border); }
.notif__body { min-width: 0; flex: 1; }
.notif__text { font-size: 13px; line-height: 1.45; color: var(--color-text); overflow-wrap: anywhere; }
.notif__text a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.notif__text a:hover { color: var(--color-link); }
.notif__text strong { font-weight: 600; }
.notif__time { display: block; margin-top: 3px; font-size: 11px; color: var(--color-text-subtle); }
.notif__dot {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgb(var(--teal-500-rgb) / 0.15);
  cursor: pointer;
}
.notif__dot:hover { box-shadow: 0 0 0 6px rgb(var(--teal-500-rgb) / 0.25); }

/* Tags: Accept / Remove (2024 .tag-conf / .tag-dlt) */
.notif__actions { display: flex; gap: 8px; margin-top: 8px; }
.notif__btn {
  position: relative;
  min-width: 84px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-control);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
}
.notif__btn:hover:not(:disabled) { border-color: var(--color-error); color: var(--color-error); }
.notif__btn--accept { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.notif__btn--accept:hover:not(:disabled) { border-color: var(--color-primary-strong); background: var(--color-primary-strong); color: #fff; }
.notif__btn:disabled { opacity: 0.6; }
.notif__btn.is-loading { color: transparent; }
.notif__btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.8s linear infinite; }
.notif__btn--accept.is-loading::after { border-top-color: #fff; }
.notif__state { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; }
.notif__state--accepted { background: var(--color-primary-soft); color: var(--color-link-hover); }
.notif__state--rejected,
.notif__state--closed { background: var(--tg-50); color: var(--color-text-muted); }

.notif__loading { display: flex; justify-content: center; padding: 18px 0; }
.notif__loading[hidden] { display: none; }
.notif__spinner { width: 26px; height: 26px; border: 3px solid var(--color-primary-soft); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
.notif__empty { display: flex; flex-direction: column; align-items: center; padding: 70px 30px; text-align: center; }
.notif__empty[hidden] { display: none; }
.notif__empty svg { width: 64px; height: 64px; fill: none; stroke: var(--teal-300); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.notif__empty p { margin-top: 12px; font-size: 16px; font-weight: 500; color: var(--color-text-muted); }
.notif__empty span { margin-top: 4px; font-size: 12px; color: var(--color-text-subtle); }

@media (prefers-reduced-motion: reduce) { .notif { transition: none; } }
.notif__state--answered { background: var(--color-primary-soft); color: var(--color-link-hover); }

/* Choose roles one by one (decision #90) */
.confirm__text:has(.nt-pick) { white-space: normal; text-align: left; }
.nt-pick__hint { margin: 0 0 10px; }
.nt-pick { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nt-pick li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--color-border); }
.nt-pick li:first-child { border-top: 0; }
.nt-pick li > span:first-child { font-weight: 600; color: var(--color-text); }
/* Accept All · Decline All · Choose — one row however narrow the panel (#313, Rohit): the two buttons give up
   their minimum width before anything wraps, and "Choose" is a plain word rather than a third button. */
.notif__actions { flex-wrap: nowrap; align-items: center; }
.notif__actions .notif__btn { white-space: nowrap; min-width: 0; flex: 0 1 auto; padding: 0 10px; }
.notif__pick {
  flex: none;
  margin-left: 2px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.notif__pick:hover { color: var(--color-link-hover); }
.notif__pick:disabled { opacity: 0.6; }

/* "Remove me" dialog (decision #91): the role ticks */
.nt-pick--remove label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--color-text); }
.nt-pick--remove small { color: var(--color-text-muted); font-size: 12px; }
/* "for Rock Band Test" — which of your pages it's about (decision #105) */
.notif__body .notif__time { display: inline; }
.notif__for { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link);
  font-size: 11px; font-weight: 600; vertical-align: 1px; }
/* Page owners: All · You · Pages ▾ (decision #105; the pages in a list since #196 — three chips always fit, no slider) */
.notif__for-bar { position: relative; display: flex; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--color-border); }
.notif__for-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 200px; padding: 5px 12px; border: 1px solid var(--color-control-soft);
  border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font: inherit; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.notif__for-chip span { min-width: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 600; text-align: center; }
.notif__for-chip:hover { border-color: var(--color-primary); }
.notif__for-chip.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link); font-weight: 600; }
/* Pages ▾: the chosen page's name (shortened) or "Pages", its unread count, the arrow */
.notif__for-pick { min-width: 0; flex: 0 1 auto; }
.notif__for-pick b { min-width: 0; overflow: hidden; font-weight: inherit; text-overflow: ellipsis; }
.notif__for-chev { flex: none; width: 14px; height: 14px; margin-right: -4px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.notif__for-pick[aria-expanded="true"] .notif__for-chev { transform: rotate(180deg); }
/* The list of pages — the look of every dropdown's list (controls.js) */
.notif__for-menu { position: absolute; top: calc(100% - 4px); left: 16px; right: 16px; z-index: 5; max-height: 280px; margin: 0; padding: 6px; overflow-y: auto; list-style: none;
  border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: #fff; box-shadow: 0 10px 28px rgb(var(--teal-500-rgb) / 0.18); animation: pop-in 0.14s var(--ease); }
.notif__for-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 14px; color: var(--color-text); text-align: left; cursor: pointer; }
.notif__for-opt:hover, .notif__for-opt:focus-visible { background: var(--color-primary-soft); outline: none; }
.notif__for-opt.is-selected { font-weight: 600; color: var(--color-link-hover); }
.notif__for-opt img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.notif__for-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.notif__for-n { flex: none; min-width: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 600; text-align: center; }

/* The drawer's way to every notification (#117) */
.notif__all { flex: none; display: block; padding: 11px 16px; border-top: 1px solid var(--color-border); background: var(--surface-hover); color: var(--color-link-hover); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; transition: background var(--dur-fast); }
.notif__all:hover { background: var(--color-primary-soft); }

/* ---- All notifications page (#117) ------------------------------------------------------------- */
.ntp-cats { margin-top: var(--space-5); overflow-x: auto; scrollbar-width: none; }
.ntp-cats::-webkit-scrollbar { display: none; }
.ntp-cats .slate__tab span { color: var(--color-text-subtle); font-size: 12px; }
.ntp-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: center; gap: 12px; margin-top: var(--space-4); }
.ntp-filters .field { margin: 0; }
.ntp-unread { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-muted); cursor: pointer; }
.ntp-tools { position: sticky; top: calc(var(--header-height, 64px) + 4px); z-index: 5; display: flex; align-items: center; gap: 12px; margin-top: var(--space-4); padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); }
.ntp-tools.has-pick { border-color: var(--color-primary); background: rgba(230, 247, 248, .96); }
.ntp-count { flex: 1; color: var(--color-text-muted); font-size: 14px; }
.ntp-tools.has-pick .ntp-count { color: var(--color-link-hover); font-weight: 600; }
.ntp-tools__act { display: flex; gap: 8px; }
.ntp-del:hover { border-color: var(--color-error); color: var(--color-error); }
.ntp-all, .ntp-pick { display: grid; place-items: center; flex: none; width: 28px; cursor: pointer; }
.ntp-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.ntp-list .notif__item { border: 1px solid transparent; border-radius: var(--radius-md); }
.ntp-list .notif__item + .notif__item { margin-top: 4px; }
.ntp-list .notif__item:hover { border-color: var(--color-border); }
.ntp-list .notif__item:has(.ntp-pick input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.ntp-empty { list-style: none; }
@media (max-width: 639px) {
  .ntp-filters { grid-template-columns: 1fr 1fr; }
  .ntp-tools { flex-wrap: wrap; }
  .ntp-tools__act { width: 100%; }
  .ntp-tools__act .btn { flex: 1; }
}
/* #309 audit: on the narrowest phones (360) "Mark All as Read" was cut to "Mark All as Re…" — both buttons keep their words */
@media (max-width: 400px) { .ntp-tools__act .btn { min-width: 0; padding: 0 10px; font-size: 14px; } }
/* #309 audit: the unread dot keeps its 12px look with a 36px tap area (it marks the notification read) */
.notif__dot::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }

/* ---- settings.css ---- */
/* =====================================================================
   Settings (2023 settings pages in the new design)
   Profile head (cover + photo), tabs, white cards with "Edit" rows,
   2023 outlined fields, skills chips, experience list, links, toggles,
   (photo crop window: crop.css)
   ===================================================================== */
.settings { width: 100%; }
.settings__guest { padding: var(--space-7) 0; text-align: center; color: var(--color-text-muted); }

/* ---- Profile head --------------------------------------------------------------- */
.set-head { position: relative; margin-bottom: var(--space-4); }
.set-head__cover {
  position: relative;
  aspect-ratio: 3 / 1;
  max-height: 260px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(120deg, var(--teal-500) 0%, var(--teal-300) 55%, var(--teal-150) 100%);
}
.set-head__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.set-head__cover-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(11, 12, 14, 0.55);
  color: #fff;
  font: inherit;
  font-size: 12px;
  backdrop-filter: blur(4px);
  transition: background-color var(--dur-fast) var(--ease);
}
.set-head__cover-btn:hover { background: rgba(11, 12, 14, 0.75); }
.set-head__cover-btn svg,
.set-head__avatar-cam svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-head__who { display: flex; align-items: flex-start; gap: var(--space-5); margin: -64px 0 0 var(--space-6); position: relative; }   /* the photo sits half on the cover */
/* The row overlaps the cover: only its own pieces take clicks, so the "Edit cover" button under it works */
.set-head__who { pointer-events: none; }
.set-head__who > * { pointer-events: auto; }
.set-head__avatar { position: relative; flex: none; padding: 0; border: 4px solid #fff; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); cursor: pointer; }
.set-head__avatar .avatar { width: 112px; height: 112px; }
.set-head__avatar-cam {
  position: absolute;
  right: 2px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
.set-head__avatar:hover .set-head__avatar-cam { background: var(--color-primary-strong); }
.set-head__names { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-top: 76px; }   /* names start under the cover, never on it */
.set-head__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.set-head__names strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1.4rem; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.set-head__handle { font-size: var(--text-sm); color: var(--color-text-muted); }
/* "View profile": a button at the end of the row, level with the name */
.settings .set-head__view { flex: none; margin: 82px 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.set-head__view svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.set-head__badge { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 7px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 600; }
.set-head__badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
  .set-head__who { margin-left: var(--space-3); gap: var(--space-3); margin-top: -46px; }
  .set-head__names { margin-top: 52px; }
  .set-head__names strong { font-size: var(--text-lg); }
  .settings .btn.set-head__view { justify-content: center; width: 40px; min-width: 0; margin-top: 56px; padding: 0; }   /* the eye alone, in a round-cornered square — not a wide empty box (#179) */
  .set-head__view .btn__text { display: none !important; }
  .set-head__avatar .avatar { width: 86px; height: 86px; }
  .set-head__names strong { font-size: var(--text-md); }
  .set-head__badge { padding: 2px 6px; font-size: 0; gap: 0; }
  .set-head__badge svg { width: 12px; height: 12px; }
  .set-head__cover-btn span { display: none; }
}

/* ---- Tabs ---------------------------------------------------------------------- */
.set-tabs {
  display: flex;
  gap: 4px;
  margin: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.set-tabs::-webkit-scrollbar { display: none; }
.set-tabs__tab {
  position: relative;
  flex: none;
  padding: 10px 14px 12px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}
.set-tabs__tab::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; }
.set-tabs__tab:hover,
.set-tabs__tab.is-active { color: var(--color-link); }
.set-tabs__tab.is-active::after { background: var(--color-primary); }

/* ---- Cards ------------------------------------------------------------------------ */
.set-panel[hidden] { display: none; }
.set-panel { display: flex; flex-direction: column; gap: var(--space-6); }      /* one section per row, well apart (#104) */
/* Every action button in Settings: one size, one width */
.settings .btn { min-height: 40px; min-width: 130px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.settings .set-actions .btn { min-width: 172px; }
/* A busy button shrinks into a circle only when it stands alone; beside another button it keeps its size (spinner inside), so nothing shifts */
.settings .btn.is-loading:only-child { min-width: 40px; width: 40px; padding: 0; border-radius: 50%; }
.set-access .btn { flex: none; }
.set-loading { display: flex; flex-direction: column; gap: var(--space-4); }
.set-loading[hidden] { display: none; }
.set-loading .sk-line { display: block; height: 12px; margin-top: 12px; }
.set-card {
  padding: clamp(18px, 4vw, 26px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}
.set-card__title { font-size: var(--text-md); font-weight: 600; }
.set-card__hint { margin-top: 4px; font-size: 13px; color: var(--color-text-muted); }
.set-card__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.set-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-link-hover); }
.set-status:empty { display: none; }
.set-status svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.set-status.is-error { color: var(--color-error); }
.set-tags { margin-top: var(--space-4); }
.set-tags + .set-tags { margin-top: var(--space-5); }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: var(--space-4); }
.set-grid__full { grid-column: 1 / -1; }
.set-grid > .form__alert { grid-column: 1 / -1; }
@media (max-width: 600px) { .set-grid { grid-template-columns: 1fr; } }
.set-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.set-btn { min-width: 130px; }
.set-btn.is-loading:only-child { min-width: 40px; width: 40px; padding: 0; border-radius: 50%; }

/* Textareas and selects in the 2023 outlined style */
.field--area { height: auto; min-height: 110px; }
.field--area .field__input { position: relative; display: block; min-height: 110px; padding: 24px 14px 22px; resize: vertical; line-height: 1.5; }
.field--area .field__label { top: 22px; left: 14px; }        /* in the box's first line until focused / filled (#195) */
/* #313 (phone review): a box you can scroll ran its earlier lines under the risen label. They pass behind it now. */
.field--area .field__label { right: 14px; padding: 2px 6px 2px 0; background: #fff; }
.field--area:focus-within .field__label, .field--area.has-value .field__label,
.field--area:has(textarea.field__input[placeholder]:not(:placeholder-shown)) .field__label { top: 12px; }
.field__count { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: var(--color-text-subtle); pointer-events: none; }
/* #313 (phone review): a box tall enough to fill ran its last line under the count. The words stop above it. */
.field--area:has(> .field__count) .field__input { padding-bottom: 24px; }
/* One-line boxes (a headline): the count sits at the right, the words stop short of it (#201) */
.field:not(.field--area) > .field__count { top: 50%; bottom: auto; transform: translateY(-50%); }
.field:not(.field--area):has(> .field__count) .field__input { padding-right: 70px; }.field--select .field__input { padding-left: 14px; padding-right: 36px; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23898989' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; cursor: pointer; }
.field--select .msel__btn { background-image: none; }       /* the custom dropdown draws its own arrow: never two (Creator-Studio1) */
.field--select .field__label,
.set-grid .field:not(:has(.field__icon)) .field__label { left: 14px; }
.set-grid .field:not(:has(.field__icon)):not(.field--area) .field__input,
.set-row__form .field:not(:has(.field__icon)):not(.is-phone) .field__input { padding-left: 14px; }
.set-row__form .field:not(:has(.field__icon)):not(.is-phone) .field__label { left: 14px; }
.field input[type="date"] { color: var(--color-text); }

/* ---- "Edit" rows (2023 account settings) --------------------------------------------- */
.set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.set-row:last-child { border-bottom: 0; padding-bottom: 0; }
.set-row:first-of-type { margin-top: var(--space-2); }
.set-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.set-row__label { font-size: 12px; color: var(--color-text-subtle); }
.set-row__value { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; }
.set-row__value em { color: var(--color-text-subtle); font-style: normal; }
.set-row__edit { font-size: 13px; }
.set-inline__note { font-size: 12px; color: var(--color-text-muted); }
.set-inline__note strong { color: var(--color-text); font-weight: 500; }
.set-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; }
.set-tag--ok { background: var(--color-primary-soft); color: var(--color-link-hover); }
.set-tag--warn { background: var(--warn-soft); color: var(--warn-text); }
.set-tag--muted { background: var(--tg-50); color: var(--color-text-muted); }
.set-verify { padding: 0; border: 0; background: none; color: var(--color-link); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; }

/* ---- Account access ------------------------------------------------------------------ */
.set-access { display: flex; align-items: center; gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.set-access:last-child { border-bottom: 0; padding-bottom: 0; }
.set-access > div { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.set-access strong { font-size: var(--text-sm); font-weight: 500; }   /* every settings row: 14px title, 12px line under it (#203) */
.set-access span { font-size: 12px; color: var(--color-text-muted); }
.set-access.is-soon strong { color: var(--color-text-muted); }
.set-pill { flex: none; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--tg-50); color: var(--color-text-muted); font-size: 12px; }
.set-access:not(.is-soon) .set-pill { background: var(--color-primary-soft); color: var(--color-link-hover); }
/* Phones: the words get the full width, the button goes under them (they were squeezed into a narrow column, #179) */
@media (max-width: 560px) {
  .set-access { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---- Skills -------------------------------------------------------------------------- */

/* ---- Experience ------------------------------------------------------------------------ */
.set-exp { display: flex; flex-direction: column; margin-top: var(--space-3); container: setexp / inline-size; }
.set-exp:empty { display: none; }
.set-card > .sf-addrole { margin-top: var(--space-4); }  /* as far below the hint (or the last item) as a card's first field (16px, like Skills) */
/* A row lifts into a soft card on hover; the hairline between rows steps aside for it (#201). The padding sits
   in a negative margin, so the photo and words stay in line with the card's title */
/* photo | title + place, then the confirmation line and description | Edit · Remove, in the middle of the row
   however long the description is (#202) */
.set-exp__item { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--space-3);
  margin: 0 -12px; padding: 14px 12px; border-radius: var(--radius-md); transition: background-color .15s ease; }
.set-exp__icon { grid-column: 1; grid-row: 1 / -1; align-self: start; }
.set-exp__body { grid-column: 2; grid-row: 1; }
.set-exp__more { grid-column: 2; grid-row: 2; min-width: 0; }
.set-exp__tools { grid-column: 3; grid-row: 1 / -1; align-self: center; }
/* Narrow (a phone): the buttons stay up by the title and the description runs on under them, using the width (#202) */
@container setexp (max-width: 520px) {
  .set-exp__tools { grid-row: 1; align-self: start; }
  .set-exp__more { grid-column: 2 / -1; }
}
.set-exp__item + .set-exp__item::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--tg-50); transition: opacity .15s ease; }
.set-exp__item:hover, .set-exp__item:focus-within { background: var(--surface-hover); }
.set-exp__item:is(:hover, :focus-within)::before, .set-exp__item:is(:hover, :focus-within) + .set-exp__item::before { opacity: 0; }
/* Nothing yet: a dashed card the size of a row, "(+) Add an Experience" — it opens the form (#201) */
.set-exp__new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 76px; padding: 12px 16px;
  border: 1.5px dashed var(--teal-300); border-radius: var(--radius-md); background: var(--surface-hover); color: var(--color-link-hover); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.set-exp__new i { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--teal-200); border-radius: 50%; background: #fff; transition: inherit; }
.set-exp__new svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.set-exp__new:hover, .set-exp__new:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); }
.set-exp__new:hover i, .set-exp__new:focus-visible i { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.set-exp__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-link); }
.set-exp__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.set-exp__body { flex: 1; min-width: 0; }
.set-exp__title { font-size: var(--text-sm); font-weight: 600; }
.set-exp__meta { font-size: 12px; color: var(--color-text-muted); }
.set-exp__link { color: inherit; text-decoration: none; }              /* positions and workplace open what the profile opens (#205) */
.set-exp__link:hover, .set-exp__link:focus-visible { color: var(--color-link-hover); text-decoration: underline; }
.set-exp__desc { margin-top: 6px; font-size: 13px; color: var(--color-text-muted); white-space: pre-line; }
/* Edit · Remove: round icon buttons, as a link's remove button (#201) */
.set-exp__tools { display: flex; gap: 6px; }
.set-exp__btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--tg-50); color: var(--color-text-muted); cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.set-exp__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.set-exp__item:is(:hover, :focus-within) .set-exp__btn { background: #fff; }
.set-exp__item .set-exp__btn:is(:hover, :focus-visible) { background: var(--color-primary-soft); color: var(--color-link-hover); }
.set-exp__item .set-exp__btn--del:is(:hover, :focus-visible) { background: var(--danger-soft); color: var(--color-error); }
.set-exp__form { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-hover); border: 1px solid var(--color-primary-soft); }
.set-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); cursor: pointer; }
.set-check input { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* ---- Links ------------------------------------------------------------------------------ */
.set-links { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-3); }
.set-link { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.set-link .field { margin: 0; }
.set-link .field .field__input { padding-left: 14px; }
.set-link .field .field__label { left: 14px; }
.set-exp__form .field:not(.field--area) .field__input { padding-left: 14px; }
.set-exp__form .field .field__label { left: 14px; }
.set-link__remove { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--tg-50); color: var(--color-text-muted); }
.set-link__remove:hover { background: var(--danger-soft); color: var(--color-error); }
.set-link__remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.set-links__add { display: inline-block; margin-top: var(--space-3); font-size: 13px; }
@media (max-width: 600px) { .set-link { grid-template-columns: minmax(0, 1fr) auto; } .set-link .field:first-child { grid-column: 1 / -1; } }

/* ---- Preferences ---------------------------------------------------------------------- */

/* ---- Notification toggles (2023 notificationSettings) ------------------------------------ */
.set-toggles { display: flex; flex-direction: column; margin-top: var(--space-2); }
/* Cover video (#147): the link, and the video's picture once saved */
.set-cv { margin-top: var(--space-4); }
.set-cv[hidden] { display: none; }
.set-cv__preview { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--color-text-muted); }
.set-cv__preview[hidden] { display: none; }
.set-cv__preview img { flex: none; width: 160px; aspect-ratio: 16 / 9; border-radius: var(--radius-md); object-fit: cover; background: var(--color-surface-muted); }
.set-toggle { display: flex; align-items: center; gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.set-toggle:last-child { border-bottom: 0; padding-bottom: 0; }
.set-toggle > span:first-child { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; }
.set-toggle strong { font-size: var(--text-sm); font-weight: 500; }
.set-toggle small { font-size: 12px; color: var(--color-text-muted); }
.set-switch { position: relative; flex: none; width: 42px; height: 24px; }
.set-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.set-switch i { position: absolute; inset: 0; border-radius: 12px; background: #d6d6d6; transition: background-color 0.25s ease; pointer-events: none; }
.set-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.25s ease; }
.set-switch input:checked + i { background: var(--color-primary); }
.set-switch input:checked + i::after { transform: translateX(18px); }
.set-switch input:focus-visible + i { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.set-switch input:disabled + i { opacity: 0.55; }
.set-toggle.is-locked { cursor: default; }


/* Drop targets on the page (cover / photo): light up while a picture is dragged over the window */
.set-head__drop {
  position: absolute;
  inset: 8px;
  display: none;
  place-items: center;
  border: 2px dashed #fff;
  border-radius: var(--radius-md);
  background: rgb(var(--teal-500-rgb) / 0.55);
  color: #fff;
  font-weight: 600;
  pointer-events: none;
}
body.is-dragging-file [data-photo-drop="cover"] .set-head__drop { display: grid; background: rgb(var(--teal-500-rgb) / 0.35); }
[data-photo-drop="cover"].is-drop-target .set-head__drop { background: rgb(var(--teal-500-rgb) / 0.7); }
body.is-dragging-file [data-photo-drop="avatar"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgb(var(--teal-500-rgb) / 0.6); }
[data-photo-drop="avatar"].is-drop-target { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--color-primary); transform: scale(1.04); }
.set-head__avatar { transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }

/* ---- Location (city picker) ------------------------------------------------------------- */
.place { position: relative; }
.place .field__icon.place__pin { fill: none; stroke: var(--color-control-icon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.place .field:focus-within .place__pin,
.place .field.has-value .place__pin { stroke: var(--color-primary); fill: none; }
.place__clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.place__list {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 280px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.place__list[hidden] { display: none; }
.place:has(.place__list:not([hidden])) .field { border-color: var(--color-primary); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.place__opt { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.place__opt strong { font-size: var(--text-sm); font-weight: 500; }
.place__opt span { font-size: 12px; color: var(--color-text-muted); }
.place__opt:hover,
.place__opt.is-active { background: var(--color-primary-soft); }
.place__opt.is-active strong { color: var(--color-link-hover); }
.place__empty { padding: 10px; font-size: 13px; color: var(--color-text-muted); }
.place__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.place__gps { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.place__gps svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.place__gps.is-loading svg { animation: spin 1s linear infinite; }
.place__note { font-size: 12px; color: var(--color-text-subtle); }

/* ---- Profile completeness ring (around the photo) -------------------------------------- */
.set-ring { position: absolute; top: -13px; left: -13px; width: calc(100% + 26px); height: auto; max-width: none; aspect-ratio: 1; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.set-ring__track,
.set-ring__fill { fill: none; stroke-width: 5; }
.set-ring__track { stroke: rgb(var(--teal-500-rgb) / 0.16); }
.set-ring__fill { stroke: var(--color-primary); stroke-linecap: round; stroke-dasharray: 351.86; stroke-dashoffset: 351.86; transition: stroke-dashoffset 0.9s ease, stroke 0.4s ease; }
.set-ring__fill.is-low { stroke: #f0a63a; }
.set-ring__fill.is-done { stroke: var(--color-primary-strong); }
.set-ring__pct {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  padding: 1px 8px;
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  background: var(--color-primary-strong);   /* white type under 12px sits on the strong teal (4.1:1), not the primary (2.8:1) (#305) */
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
.set-ring__pct[hidden] { display: none; }
.set-head__avatar { overflow: visible; }
.set-head__avatar-cam { z-index: 1; }
.set-head__who { margin-bottom: 6px; }

.set-complete { margin-top: var(--space-5); padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-primary-soft); }
.set-complete[hidden] { display: none; }
.set-complete__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.set-complete__bar strong { font-size: var(--text-sm); font-weight: 600; color: var(--color-link-hover); }
.set-complete__bar span { font-size: 12px; color: var(--color-text-muted); }
.set-complete__items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.set-complete__item { padding: 5px 12px; border: 1px solid var(--teal-200); border-radius: var(--radius-pill); background: #fff; color: var(--color-link-hover); font-size: 12px; font-weight: 500; text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
.set-complete__item:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.set-complete__more { align-self: center; font-size: 12px; color: var(--color-text-muted); }

/* ---- Deactivate / delete ------------------------------------------------------------------ */
.set-danger { color: var(--color-error); border-color: #f2c4c8; }
.set-danger:hover { border-color: var(--color-error); color: var(--color-error); background: var(--danger-soft); }
.set-remove { max-width: 460px; }
.set-remove__form { margin-top: var(--space-4); }
.set-remove__form .field:not(:has(.field__icon)) .field__input { padding-left: 14px; }
.set-remove__form .field .field__label { left: 14px; }

/* Who can tag you in credits (decision #89) */
.set-tagging { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }   /* a row like the switches above it (#203) */
.set-tagging[hidden] { display: none; }
.set-tagging__text { display: flex; flex: 1 1 260px; flex-direction: column; gap: 2px; }
.set-tagging__text strong { font-size: var(--text-sm); font-weight: 500; }   /* the same type as every settings row: 14px title, 12px line (#203) */
.set-tagging__text small { color: var(--color-text-muted); font-size: 12px; }
.set-tagging .seg { display: flex; flex-wrap: nowrap; max-width: 100%; }
.set-tagging .seg__opt { flex: 1 1 auto; padding-inline: 12px; white-space: nowrap; }
@media (max-width: 420px) { .set-tagging .seg { width: 100%; } .set-tagging .seg__opt { min-width: 0; padding-inline: 5px; font-size: 13px; } }

/* Experience: the workplace picker and whether the page confirmed (decision #96) */
.set-exp__icon { position: relative; overflow: hidden; }
.set-exp__icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.set-exp__meta .link { font-size: inherit; }
.set-exp__state { margin-top: 4px; font-size: 13px; color: var(--color-text-muted); }
.set-exp__state.is-ok { color: #1f7a3a; }
.set-exp__state.is-wait { color: #9a6a00; }
.set-exp__state .link { font-size: inherit; }
.set-exp__form .field { position: relative; }
.set-org { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 280px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); }
.set-org[hidden] { display: none; }
.set-org__opt { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; }
.set-org__opt:hover, .set-org__opt.is-active { background: var(--color-primary-soft); }   /* ↑ ↓ highlight too (#206) */
.set-org__opt .avatar { flex: none; width: 34px; height: 34px; border-radius: 8px; }
.set-org__opt span:last-child { display: flex; flex-direction: column; min-width: 0; }
.set-org__opt strong { font-size: 14px; font-weight: 600; }
.set-org__opt small { font-size: 12px; color: var(--color-text-muted); }
.set-org__linked { margin: -6px 0 0; font-size: 13px; color: var(--color-text-muted); }
.set-org__linked[hidden] { display: none; }

/* Work experience: a workplace picked from MuSlate looks picked (#104) */
.set-org__pick, .set-org__tick { display: none; }
.settings .field.is-linked .field__input { padding-left: 54px !important; padding-right: 40px !important; border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.settings .field.is-linked .field__label { left: 54px !important; color: var(--color-link-hover); }
.field.is-linked .set-org__pick { position: absolute; left: 12px; top: 50%; display: block; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: #fff; transform: translateY(-50%); box-shadow: 0 0 0 2px #fff; }
.field.is-linked .set-org__pick img { width: 100%; height: 100%; object-fit: cover; }
.field:is(.is-linked, .is-typed) .set-org__tick { position: absolute; right: 14px; top: 50%; display: block; width: 18px; height: 18px; fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; }

/* Who can tag you: the dropdown on the right of its text (on phones under it) */
.set-tagging__pick { flex: 0 0 300px; max-width: 100%; }
@media (max-width: 720px) { .set-tagging__pick { flex-basis: 100%; } }
/* The phone prompt after log-in (#224) and the account dialogs (#229): the field and its label read left to right, like every form */
.confirm__text:has([data-phone-ask], [data-row-form]) { white-space: normal; text-align: left; }
.set-dlg__note { margin: 10px 0 0; }
/* Login details (#230): a small icon before each — username, email, phone, WhatsApp */
.set-row__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tg-50); color: var(--color-text-subtle); }   /* grey (#232): teal stays for the card headings' icons */
.set-row__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* #309 audit: a row's Edit / Change link — a finger-sized tap area on phones without moving the row */
@media (max-width: 767px) { .set-row__edit { padding: 8px 4px; margin: -8px -4px; } }

/* ---- tags.css ---- */
/* =====================================================================
   Typed tag field (tags.js, decision #78) — the form field is the search
   box; chips inside it, styled dropdown under it.
   Teal chip = picked from the list · grey chip = typed, waiting for review
   · dimmed chip = one more Backspace removes it.
   ===================================================================== */
.tagf-wrap { position: relative; }

.tagf.field {
  height: auto;
  min-height: 50px;
  padding: 21px 10px 4px 10px;
  cursor: text;
}
/* Like every field (#195): empty and not focused, the label sits in the middle of the box; focused or with chips, it
   moves up above them */
.tagf .field__label { left: 14px; right: 14px; top: 12px; font-size: 11px; }
.tagf:not(.is-focus):not(.has-value):not(:has(.tagf__chip)) .field__label { top: 50%; font-size: var(--text-sm); }   /* read from the chips themselves: a form resetting has-value from the empty typing box can't drop it onto them (#203) */
.tagf.is-focus .field__label { color: var(--color-link); }
.tagf:not(.is-focus):not(.has-value):not(:has(.tagf__chip)) .tagf__input::placeholder { color: transparent; }   /* its example only once the label is up */

.tagf__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tagf__entry { flex: 1 1 90px; min-width: 90px; }
.tagf__input {
  width: 100%;
  height: 24px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
}
.tagf__input::placeholder { color: var(--color-control-icon); }

/* ---- Chips ---------------------------------------------------------------- */
.tagf__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 30px;
  padding: 0 4px 0 3px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  user-select: none;
  transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tagf__chip.is-new { background: #E4E5E7; color: #4a4d52; }
.tagf__chip.is-armed { opacity: 0.45; }
.tagf__chip:focus-visible { outline: 2px solid var(--color-primary-strong); outline-offset: 2px; }
.tagf__chip.is-sortable { cursor: grab; touch-action: none; }
.tagf__chip.is-dragging { cursor: grabbing; box-shadow: 0 6px 16px rgba(17, 17, 17, 0.18); transform: scale(1.04); z-index: 1; }
.tagf__chip.is-bounce { animation: tagf-bounce 0.45s var(--ease); }
@keyframes tagf-bounce { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.tagf__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-link);
  font-size: 11px;
  font-weight: 600;
}
.tagf__chip.is-new .tagf__badge { color: #7a7d82; }
.tagf__badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tagf__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagf__name b { font-weight: 600; }
.tagf__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  cursor: pointer;
}
.tagf__chip.is-new .tagf__x { background: rgba(0, 0, 0, 0.07); }
.tagf__x:hover { background: rgba(255, 255, 255, 0.4); }
.tagf__chip.is-new .tagf__x:hover { background: rgba(0, 0, 0, 0.14); }
.tagf__x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
@media (pointer: coarse) { .tagf__x { width: 26px; height: 26px; } }

/* ---- Dropdown (2023: soft teal shadow, rounded bottom, slim teal scrollbar) ---- */
.tagf__menu {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  z-index: 30;
  max-height: 264px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 8px 18px rgb(var(--teal-500-rgb) / 0.18);
  cursor: default;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-primary-soft);
}
.tagf__menu[hidden] { display: none; }
.tagf:has(.tagf__menu:not([hidden])) { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tagf__menu::-webkit-scrollbar { width: 8px; }
.tagf__menu::-webkit-scrollbar-track { background: var(--color-primary-soft); border-radius: 8px; }
.tagf__menu::-webkit-scrollbar-thumb { background: var(--teal-300); border-radius: 8px; }
.tagf__menu::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

.tagf__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.tagf__opt + .tagf__opt { margin-top: 2px; }
.tagf__opt .tagf__badge { width: 28px; height: 28px; background: var(--color-primary-soft); }
.tagf__opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagf__opt mark { background: none; color: inherit; font-weight: 600; }
.tagf__opt small { flex: none; font-size: 11px; color: var(--color-text-subtle); }
.tagf__opt + .tagf__opt--add { border-top: 1px dashed var(--color-border); border-top-left-radius: 0; border-top-right-radius: 0; }
.tagf__opt--add small { display: block; margin-top: 1px; white-space: normal; }
.tagf__opt--add .tagf__badge { background: #EFEFF1; color: #6b6e73; }
/* Highlight (↑ ↓ or hover): MuSlate teal */
.tagf__opt.is-active { background: var(--color-primary); color: #fff; }
.tagf__opt.is-active .tagf__badge { background: #fff; color: var(--color-link); }
.tagf__opt.is-active small { color: var(--color-on-dark-soft); }
.tagf__note { padding: 10px; font-size: 13px; color: var(--color-text-muted); }

.tagf__hint { margin-top: 6px; font-size: 12px; color: var(--color-text-subtle); }

/* Tag popularity (decision #84): a small meter + percentage, never the real count */
.tagf__score { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-link-hover); }
.tagf__score i { position: relative; width: 34px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--color-primary-soft); }
.tagf__score i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--s); border-radius: inherit; background: var(--color-primary); }
.tagf__opt.is-active .tagf__score { color: #fff; }
.tagf__opt.is-active .tagf__score i { background: rgba(255, 255, 255, 0.3); }
.tagf__opt.is-active .tagf__score i::after { background: #fff; }

/* People (credits): a photo in the badge */
.tagf__badge { overflow: hidden; }
.tagf__badge img { width: 100%; height: 100%; object-fit: cover; }

/* People: you / your pages first ("Tag yourself"); people who turned tags off are greyed out (decision #89). */
.tagf__opt.is-mine small { color: var(--color-link-hover); font-weight: 600; }
.tagf__opt.is-disabled { opacity: .55; cursor: not-allowed; }
.tagf__opt.is-disabled.is-active { background: var(--color-surface-muted); color: inherit; }
.tagf__opt.is-mine.is-active small { color: inherit; }

/* Where a credit tag stands (decision #90) */
.tagf__chip.is-pending { background: var(--warn-soft); color: var(--warn-text); box-shadow: inset 0 0 0 1px #f0c76a; }
.tagf__chip.is-pending .tagf__badge { background: #ffe4a3; color: var(--warn-text); }
.tagf__chip.is-pending .tagf__x { background: rgba(122, 82, 0, 0.1); color: var(--warn-text); }
.tagf__chip.is-declined { background: #f4f4f5; color: #8a8d92; text-decoration: line-through; }
.tagf__tick { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: -2px; }
.tagf__tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tagf__flag { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
  background: #e8a317; color: #fff; font: 700 12px/1 var(--font-sans, inherit); cursor: pointer; }
.tagf__flag:hover, .tagf__flag:focus-visible { background: #c98500; outline: none; }
/* A saved name not on MuSlate (#227, #229): a teal "user +" on its grey chip — it stands out so people see they can
   invite them; a tooltip ("Invite to MuSlate") says what it does */
.tagf__flag--invite { background: var(--color-primary); }
.tagf__flag--invite:hover, .tagf__flag--invite:focus-visible { background: var(--color-primary-strong); }
.tagf__flag--invite svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tagf__chip:not(:has(.tagf__badge)) { padding-left: 12px; }   /* no picture / letter: the same breathing room as the badge gives (#117) */
/* Opens upwards when there's no room below (app.keepInView) */
.tagf__menu.is-up { top: auto; bottom: 100%; }

/* Read-only (#181): a distributed song's store credits — the chips as they are, no typing; locked (#183): the lock sits
   inside the field on the right, like the password eye (forms.css .field__lock) */
.tagf.is-readonly { background: var(--surface-hover); cursor: default; }
.tagf.is-readonly .tagf__list { min-height: 26px; }
.tagf.is-locked { padding-right: 44px; cursor: not-allowed; }
/* #303: a compilation's cover is square, like its artwork */
[data-tagkind="compilations"] .tagf__badge { border-radius: 6px; }
/* #309 audit: a chip's × keeps its 22px look with a 34px tap area behind it (on phones it was the only small target in forms) */
.tagf__x { position: relative; }
.tagf__x::after { content: ""; position: absolute; inset: -6px; }

/* ---- crop.css ---- */
/* =====================================================================
   Picture crop window (cropper.js) — profile photo (circle), playlist
   image (rounded square), cover (16:9 channel art with device guides).
   Empty state is a drop box; while a picture is dragged over the window
   the stage gets the dashed teal "Drop your picture here" frame (2023 style).
   ===================================================================== */
.crop { align-items: center; z-index: 260; }
.crop__card { max-width: 560px; padding: 26px clamp(16px, 4vw, 28px) 22px; }
.crop--cover .crop__card { max-width: 760px; }
.crop__hint { margin-top: 6px; font-size: 13px; text-align: center; color: var(--color-text-muted); text-wrap: balance; }
.crop__hint:empty { display: none; }
.crop__stage {
  position: relative;
  margin: 18px auto 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #1b1d20;
  touch-action: none;
  cursor: grab;
  user-select: none;
  outline: none;
}
.crop__stage:focus-visible { box-shadow: 0 0 0 3px var(--color-primary); }
.crop__stage.is-dragging { cursor: grabbing; }
.crop__stage > img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop__stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7); border-radius: inherit; }
.crop--avatar .crop__stage { width: min(300px, 100%); aspect-ratio: 1; border-radius: 50%; }
.crop--square .crop__stage { width: min(320px, 100%); aspect-ratio: 1; border-radius: var(--radius-md); }
.crop--cover .crop__stage { width: 100%; aspect-ratio: 16 / 9; }
.crop--photo .crop__card { max-width: 640px; }
.crop--photo .crop__stage { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius-md); }

/* Cover guides: 3:1 band = every device (bright), 2:1 = tablets (dashed), outside = phones only */
.crop__guides { display: none; position: absolute; inset: 0; pointer-events: none; }
.crop--cover .crop__guides { display: block; }
.crop--cover.is-empty .crop__guides { display: none; }
.crop__shade { position: absolute; left: 0; right: 0; height: calc((100% - 59.26%) / 2); background: rgba(11, 12, 14, 0.42); }
.crop__shade--top { top: 0; }
.crop__shade--bottom { bottom: 0; }
.crop__band { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.crop__band--all { height: 59.26%; border-top: 2px solid #fff; border-bottom: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }  /* (16/9)/3 */
.crop__band--tablet { height: 88.89%; border-top: 1px dashed rgba(255, 255, 255, 0.8); border-bottom: 1px dashed rgba(255, 255, 255, 0.8); } /* (16/9)/2 */
.crop__band em,
.crop__label { position: absolute; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(11, 12, 14, 0.6); color: #fff; font-size: 11px; font-style: normal; white-space: nowrap; }
.crop__band--all em { left: 8px; top: 6px; background: var(--color-primary); }
.crop__band--tablet em { right: 8px; top: 4px; }
.crop__label--phone { left: 8px; bottom: 8px; }
@media (max-width: 480px) { .crop__label--phone, .crop__band--tablet em { display: none; } }

/* Empty: drop box */
.crop__drop { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: var(--surface-hover); border: 2px dashed var(--teal-200); border-radius: inherit; cursor: default; }
.crop.is-empty .crop__drop { display: flex; }
.crop.is-empty .crop__stage { background: var(--surface-hover); }
.crop.is-empty .crop__stage::after { box-shadow: none; }
.crop__drop svg { width: 40px; height: 40px; fill: none; stroke: var(--color-primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.crop__drop strong { font-size: var(--text-sm); color: var(--color-text); }
.crop__drop span { font-size: 12px; color: var(--color-text-subtle); }
.crop__drop small { max-width: 260px; margin-top: 4px; font-size: 11px; color: var(--color-text-subtle); }
.crop--avatar .crop__drop small { display: none; }

/* A picture dragged over the window */
.crop__dropping { display: none; position: absolute; inset: 0; z-index: 3; place-items: center; border: 3px dashed var(--color-primary); border-radius: inherit; background: rgba(230, 247, 248, 0.92); pointer-events: none; }
.crop__dropping span { padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 600; }
.crop__stage.is-dropping .crop__dropping { display: grid; }

.crop__zoom { display: flex; align-items: center; gap: 10px; max-width: 320px; margin: 16px auto 0; color: var(--color-text-muted); }
.crop__zoom[hidden] { display: none; }
.crop__zoom svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.crop__zoom input { flex: 1; accent-color: var(--color-primary); }
/* Buttons centred under the picture, all the same size; Remove sits apart, to the left */
.crop__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }
.crop__actions .btn { min-width: 130px; white-space: nowrap; }
.crop__actions [hidden] { display: none; }
/* Removing a picture is an ordinary thing to do, not a warning: grey until you reach for it, red only then
   (#313, Rohit — as red words under the dialog it read like an error message every time it opened). The auto
   margin keeps it away from Cancel and Save, so it is never the button you press by accident. */
/* The bin alone (its words are read out, and shown on hover): a fourth full-width button wraps the row out
   of the dialog, and this is the one action that does not need naming twice. */
.crop__actions .crop__remove { min-width: 0; width: 44px; padding-inline: 0; margin-right: auto; color: var(--color-text-muted); }
.crop__remove span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.crop__remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.crop__remove:hover, .crop__remove:focus-visible { color: var(--color-error); border-color: var(--color-error); }
@media (max-width: 560px) {
  .crop__actions .crop__remove { flex: 0 0 44px; }                  /* stays a bin, never stretches */
  .crop__actions .btn { flex: 1; min-width: 0; }
}

/* ---- playlists.css ---- */
/* =====================================================================
   Playlists — My Playlists cards, playlist page, add songs, reorder,
   and the create / edit dialog.
   ===================================================================== */

/* ---- My Playlists ------------------------------------------------------------- */
.lib { width: 100%; }
.lib__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.lib__title { font-size: var(--text-xl); font-weight: 600; }
.lib__sub { margin-top: 4px; font-size: var(--text-sm); color: var(--color-text-muted); }
.lib__guest { padding: var(--space-7) 0; text-align: center; color: var(--color-text-muted); }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--space-5) var(--space-4); margin-top: var(--space-5); }
@media (max-width: 420px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); } }
.pl-grid__empty { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-text-muted); }
.pl-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: var(--color-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.pl-card__art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.pl-card:hover .pl-card__art { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pl-card__art img { width: 100%; height: 100%; object-fit: cover; }
.pl-card__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-sm); font-weight: 600; }
.pl-card__sub { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-muted); }
.pl-card--new .pl-card__art { display: grid; place-items: center; border: 2px dashed var(--teal-200); background: var(--surface-hover); box-shadow: none; }
.pl-card__plus { color: var(--color-link); font-size: 44px; font-weight: 300; line-height: 1; }
.pl-card--new strong { font-size: var(--text-sm); font-weight: 600; color: var(--color-link-hover); }
.pl-card--new span:last-child { font-size: 12px; color: var(--color-text-muted); }
.pl-card--sk .pl-card__art { background: var(--color-skeleton); }
.pl-card--sk .sk-line { display: block; height: 10px; margin-top: 6px; }

/* Picture placeholders: mosaic of songs, or a music note */
.pl-mosaic { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
.pl-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.pl-art-empty { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; }
.pl-art-empty svg { width: 34%; height: 34%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-lock { display: inline-flex; }
.pl-lock svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---- Playlist page --------------------------------------------------------------------- */
.pl { width: 100%; }
/* Edit Playlist / Compilation (#211): one card, as every editor — the card's own 16px rhythm between its parts */
.pl-box > .pl-play, .pl-box > .pl-add, .pl-box > .pl-songs { margin-top: 0; }
.pl-box > .pl-songs:empty { display: none; }
.pl-box > .pl-empty { display: block; padding: 0; }
.pl-box > .pl-empty[hidden] { display: none; }
.pl-box .set-exp__new small { font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
/* only when there's nothing yet (with songs, "+ Add Songs" up top does it), so it fills the space as an empty state (#212) */
.pl-box .pl-empty .set-exp__new { min-height: 220px; gap: 10px; font-size: 15px; }
.pl-box .pl-empty .set-exp__new i { width: 52px; height: 52px; }
.pl-box .pl-empty .set-exp__new svg { width: 22px; height: 22px; }
.pl-box .pl-empty .set-exp__new small { font-size: 13px; }
.pl-box .pl__art { width: clamp(120px, 26vw, 190px); }
.pl-box .pl__title { font-size: clamp(1.5rem, 4vw, 2.125rem); }
.pl__head { display: flex; align-items: flex-end; gap: clamp(16px, 4vw, 32px); }
.pl__art { position: relative; flex: none; width: clamp(140px, 30vw, 220px); aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-md); background: var(--color-primary-soft); box-shadow: var(--shadow-md); }
.pl__art img { width: 100%; height: 100%; object-fit: cover; }
.pl__art-edit { position: absolute; inset: auto 0 0 0; padding: 8px; border: 0; background: rgba(11, 12, 14, 0.6); color: #fff; font: inherit; font-size: 12px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.pl__art:hover .pl__art-edit,
.pl__art-edit:focus-visible { opacity: 1; }
@media (hover: none) { .pl__art-edit { opacity: 1; } }
.pl__meta { min-width: 0; }
.pl__kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.pl[data-mode="edit"] .pl__kind { display: none; }   /* the banner says "Edit Playlist" already (#194) */
/* The editor: its name, and beside it a small square that opens the public page (#195) */
.pl__titlerow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl__titlerow .pl__title { min-width: 0; }
.pl__view { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin-top: 4px; border: 1px solid var(--card-border); border-radius: 10px; background: #fff; color: var(--color-link-hover); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.pl__view:hover, .pl__view:focus-visible { border-color: var(--teal-200); background: var(--color-primary-soft); }
.pl__view[hidden] { display: none; }
.pl__view svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl__title { margin-top: 4px; font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.pl__desc { margin-top: 8px; max-width: 60ch; font-size: var(--text-sm); color: var(--color-text-muted); white-space: pre-line; }
.pl__desc:empty { display: none; }
.pl__by { margin-top: 8px; font-size: 13px; color: var(--color-text-muted); }
.pl__by a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.pl__by a:hover { color: var(--color-link); }
.pl__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.pl__actions[hidden] { display: none; }
@media (max-width: 560px) {
  .pl__head { flex-direction: column; align-items: flex-start; }
  .pl__art { width: min(220px, 70vw); }
  .pl__meta { width: 100%; }
  /* Add Songs · Edit · Share · Delete as an even 2 × 2, never a lone button on a second row (#181) */
  .pl__actions:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .pl__actions:not([hidden]):has(> .btn[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* private: no Share, so three in a row */
  .pl__actions .btn { width: 100%; justify-content: center; }
}

/* Add songs */
.pl-add { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-primary-soft); border-radius: var(--radius-md); background: var(--surface-hover); }
.pl-add[hidden] { display: none; }
.pl-add .field { background: #fff; }
.pl-add__icon { fill: none !important; stroke: var(--color-control-icon); stroke-width: 2; stroke-linecap: round; }
.pl-add .field:focus-within .pl-add__icon { stroke: var(--color-primary); }
.pl-add__close { display: block; margin: 10px 0 0 auto; font-size: 13px; }
.pl-songs--results { margin-top: 8px; }
.pl-results__empty { padding: 12px 4px; font-size: 13px; color: var(--color-text-muted); }

/* Song rows */
.pl-songs { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.pl-song {
  display: grid;
  grid-template-columns: auto 28px 44px minmax(0, 2fr) minmax(0, 1fr) minmax(48px, auto) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: #fff;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity 0.2s ease, transform 0.2s ease;
}
.pl-song:hover { background: var(--surface-hover); }
.pl:not(.is-mine) .pl-song { grid-template-columns: 28px 44px minmax(0, 2fr) minmax(0, 1fr) minmax(48px, auto) auto; }
.pl-song--result { grid-template-columns: 44px minmax(0, 1fr) minmax(48px, auto) auto; }
.pl-song__grip { display: grid; place-items: center; width: 24px; height: 36px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--color-control-icon); cursor: grab; touch-action: none; }
.pl-song__grip svg { width: 16px; height: 16px; fill: currentColor; }
.pl-song__grip:hover,
.pl-song__grip:focus-visible { color: var(--color-link); background: var(--color-primary-soft); }
.pl-song.is-dragging { position: relative; z-index: 2; background: #fff; box-shadow: var(--shadow-md); }
.pl-song.is-dragging .pl-song__grip { cursor: grabbing; }
.pl-song.is-removing { opacity: 0; transform: translateX(16px); }
.pl-song__num { font-size: 13px; text-align: center; color: var(--color-text-subtle); }
.pl-song__art { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 6px; background: var(--color-primary-soft); color: var(--teal-300); }
.pl-song__art svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-song__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-song__info { display: flex; flex-direction: column; min-width: 0; }
.pl-song__info strong,
.pl-song__info span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-song__info strong { font-size: var(--text-sm); font-weight: 500; }
.pl-song__info span { font-size: 12px; color: var(--color-text-muted); }
.pl-song__album { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--color-text-muted); }
.pl-song__time { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 13px; text-align: right; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pl-song__remove { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--color-control-icon); }
.pl-song__remove svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.pl-song__remove:hover { background: var(--danger-soft); color: var(--color-error); }
.pl-song.is-unavailable .pl-song__info,
.pl-song.is-unavailable .pl-song__art { opacity: 0.45; }
.pl-song__add { min-width: 78px; white-space: nowrap; }
.pl-song__add.is-added { color: var(--color-link-hover); border-color: var(--color-primary-soft); background: var(--color-primary-soft); opacity: 1; }
/* "Preview" in every song list (Rohit): a pill by the duration, centred on the row — never in the title or artists.
   On phones, where the duration column is dropped, .art-tag: a strip across the bottom of the cover instead. */
.pl-tag { display: inline-flex; flex: none; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn-text); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.art-tag { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; display: none; padding: 2px 0; background: rgba(154, 91, 0, .88); color: #fff; font-size: 8px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-align: center; text-transform: uppercase; pointer-events: none; }
.art-tag--off { background: rgba(60, 70, 72, .85); }
.sl-song__time > span:last-child, .pl-song__time > span:last-child, .sp-song__time > span:last-child { min-width: 34px; text-align: right; }   /* the pills line up */
.pl-tag--off { background: var(--tg-50); color: var(--color-text-muted); }          /* an album track with no clip on the stores (#142) */
.pl-song.is-noclip .pl-song__art { opacity: 0.6; }
@media (max-width: 640px) {
  /* #313: the page gutter, the card and the row each took their own padding, so a song title ran in a column
     about 50 px narrower than it had to be, inside a white row on a white card. The card gives its sides back
     to the list and the rows stop pretending to be cards; the row keeps its own padding for the tap target. */
  .pl-box { padding-left: 10px; padding-right: 10px; }
  .pl-songs .pl-song { background: none; box-shadow: none; }
  .pl-songs .pl-song + .pl-song { border-top: 1px solid var(--color-border-soft, var(--color-border)); }
  .pl-song { grid-template-columns: auto 44px minmax(0, 1fr) auto auto; gap: 10px; }
  .pl:not(.is-mine) .pl-song { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pl-song__num, .pl-song__album { display: none; }
  .pl-song--result { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pl-song--result .pl-song__time { display: none; }
  .pl-song .pl-song__time { display: none; }
  .pl-song .art-tag { display: block; }
}
.pl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--space-7) 0; text-align: center; color: var(--color-text-muted); }
.pl-empty[hidden] { display: none; }
/* (#211: the empty list is the dashed "(+) Add Songs" card — .set-exp__new draws its own icon) */

/* ---- Create / edit dialog --------------------------------------------------------------- */
.pl-dialog { align-items: center; }
.pl-dialog__card { max-width: 560px; }
.pl-dialog__form { margin-top: var(--space-5); container: pldlg / inline-size; }
/* Picture · title · tags (or Public) as one piece: the picture stays in the middle of the column beside it, however
   tall the tags make it (var(--teal-600)); the description is the next field under it */
.pl-dialog__row { display: flex; gap: var(--space-4); align-items: center; }
.pl-dialog__art {
  position: relative;
  flex: none;
  width: 132px;
  height: 132px;
  padding: 0;
  overflow: hidden;
  border: 2px dashed var(--teal-200);
  border-radius: var(--radius-md);
  background: var(--surface-hover);
  color: var(--color-link);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pl-dialog__art:hover { border-color: var(--color-primary); }
.pl-dialog__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-dialog__art.has-image { border-style: solid; border-color: transparent; }
.pl-dialog__art-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; font-size: 12px; font-weight: 500; }
.pl-dialog__art-empty svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-dialog__art.has-image .pl-dialog__art-empty { display: none; }
.pl-dialog__art-edit { position: absolute; inset: auto 0 0 0; padding: 5px; background: rgba(11, 12, 14, 0.55); color: #fff; font-size: 11px; display: none; }
.pl-dialog__art.has-image .pl-dialog__art-edit { display: block; }
body.is-dragging-file .pl-dialog__art { border-color: var(--color-primary); border-style: dashed; background: var(--color-primary-soft); }
.pl-dialog__art.is-drop-target { transform: scale(1.04); box-shadow: 0 0 0 4px rgb(var(--teal-500-rgb) / 0.25); }
.pl-dialog__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pl-dialog__fields .field .field__input,
.pl-dialog__form > .field .field__input { padding-left: 14px; }
.pl-dialog__fields .field .field__label,
.pl-dialog__form > .field .field__label { left: 14px; }
.pl-dialog__vis { padding: 6px 0 0; border: 0; }
/* (the description and tags sit the form's own 15px apart, like every field — no extra margins: var(--teal-600)) */
/* Narrow (the dialog's own width, #180): the picture on top, title and tags under it at full width */
@container pldlg (max-width: 420px) {
  .pl-dialog__row { flex-direction: column; align-items: stretch; }
  .pl-dialog__art { width: 120px; height: 120px; align-self: center; }
}

/* ---- Playing (player.js) ------------------------------------------------------------- */
.pl-play { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.pl-play[hidden] { display: none; }
.pl-play__btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; box-shadow: 0 6px 16px rgb(var(--teal-500-rgb) / 0.4); cursor: pointer; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.pl-play__btn:hover { background: var(--color-primary-strong); transform: scale(1.05); }
.pl-play__btn svg { width: 22px; height: 22px; fill: currentColor; }
.pl-play__btn .is-pause, .pl-play__btn.is-playing .is-play { display: none; }
.pl-play__btn.is-playing .is-pause { display: block; }
.pl-play__shuffle { display: inline-flex; align-items: center; gap: 6px; }
.pl-play__shuffle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-pl-songs] .pl-song:not(.is-unavailable) { cursor: pointer; }
.pl-song__num { position: relative; display: grid; place-items: center; height: 32px; }
.pl-song__play { display: none; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-link-hover); cursor: pointer; }
.pl-song__play svg { width: 16px; height: 16px; fill: currentColor; }
.pl-song__play svg + svg, .pl-song.is-playing .pl-song__play svg:first-child { display: none; }   /* playing: ❚❚ on hover (#190) */
.pl-song.is-playing .pl-song__play svg + svg { display: block; }
.pl-song__eq { display: none; align-items: flex-end; gap: 2px; height: 14px; }
.pl-song__eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--color-primary); }
.pl-song.is-playing .pl-song__eq i { animation: pl-eq 0.9s ease-in-out infinite; }
.pl-song.is-playing .pl-song__eq i:nth-child(2) { animation-delay: 0.2s; }
.pl-song.is-playing .pl-song__eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pl-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.pl-song:not(.is-unavailable):hover .pl-song__n, .pl-song.is-current .pl-song__n, .pl-song:has(.pl-song__play:focus-visible) .pl-song__n { display: none; }
.pl-song:not(.is-current):hover .pl-song__play, .pl-song:not(.is-current) .pl-song__play:focus-visible { display: grid; }
.pl-song.is-current .pl-song__eq { display: flex; }
.pl-song.is-current:hover .pl-song__eq { display: none; }
.pl-song.is-current:hover .pl-song__play { display: grid; }
.pl-song.is-current { background: var(--color-primary-soft); }
.pl-song.is-current .pl-song__info strong { color: var(--color-link-hover); font-weight: 600; }
@media (max-width: 640px) { .pl-song__num { display: none; } }

/* ---- Save to playlist (save-playlist.js, decision #80) ------------------------------------ */
.stp__card { max-width: 440px; }
.stp__part { margin-top: var(--space-5); }
.stp__part[hidden], .stp__or[hidden] { display: none; }
.stp__label { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--color-text); }
.stp__select { position: relative; }
.stp__trigger { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 7px 12px 7px 7px; border: 1px solid var(--color-control); border-radius: var(--radius-md); background: #fff; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.stp__trigger:hover, .stp__trigger[aria-expanded="true"] { border-color: var(--color-primary); }
.stp__trigger[aria-expanded="true"] { box-shadow: 0 3px 6px var(--teal-100); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.stp__trigger.is-empty .stp__text strong { font-weight: 500; color: var(--color-text-subtle); }
.stp__thumb { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-link); }
.stp__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stp__thumb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stp__text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.stp__text strong { overflow: hidden; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.stp__text small { font-size: 12px; color: var(--color-text-muted); }
.stp__chev { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--color-text-subtle); stroke-width: 2; stroke-linecap: round; transition: transform var(--dur-fast) var(--ease); }
.stp__trigger[aria-expanded="true"] .stp__chev { transform: rotate(180deg); stroke: var(--color-primary); }
.stp__list { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; max-height: 264px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: #fff; border: 1px solid var(--color-primary); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 10px 22px rgb(var(--teal-500-rgb) / 0.18); outline: none; scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-primary-soft); }
.stp__list[hidden] { display: none; }
.stp__opt { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: var(--radius-sm); cursor: pointer; }
.stp__opt + .stp__opt { margin-top: 2px; }
.stp__opt.is-active { background: var(--color-primary); color: #fff; }
.stp__opt.is-active .stp__text small { color: var(--color-on-dark-soft); }
.stp__opt.is-active .stp__thumb { background: rgba(255, 255, 255, 0.25); color: #fff; }
.stp__opt.is-chosen:not(.is-active) .stp__text strong { color: var(--color-link-hover); }
.stp__opt[aria-disabled="true"] { cursor: default; opacity: 0.55; }
.stp__tag--full { background: var(--tg-50) !important; color: var(--color-text-muted) !important; }
.stp__tag { flex: none; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-weight: 600; }
.stp__btn { width: 100%; margin-top: 12px; }
.stp__or { display: flex; align-items: center; gap: 12px; margin-top: var(--space-5); font-size: 12px; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.08em; }
.stp__or::before, .stp__or::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.stp__new .field__input { padding-left: 14px; }
.stp__new .field__label { left: 14px; }
.stp__private { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--color-text-muted); cursor: pointer; }
.stp__private input { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* Playlist tags (decision #84) */
.pl-dialog__tags { margin-top: 0; }
.pl__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pl__tags:empty { display: none; }
.pl__tag { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 500; }

/* ---- Page banner (templates/page-hero.php): library & social pages --------------------------------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 168px;
  margin-bottom: var(--space-5);
  padding: var(--space-5) clamp(20px, 4vw, 44px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--teal-50) 0%, var(--teal-100) 45%, var(--teal-200) 100%);
  isolation: isolate;
}
.page-hero::before { content: ""; position: absolute; right: -60px; top: -80px; z-index: -1; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%); }
.page-hero__text { position: relative; z-index: 1; max-width: 760px; }
.page-hero__eyebrow { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.75); color: var(--color-link-hover); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.page-hero__title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.15; color: var(--teal-900); }
.page-hero__sub { margin-top: 6px; font-size: var(--text-sm); color: var(--tg-700); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.page-hero__art { position: relative; flex: none; width: 260px; height: 130px; }
.page-hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgb(var(--teal-500-rgb) / 0.35); stroke-width: 2; }
.page-hero__waves path:last-child { stroke: rgb(var(--teal-500-rgb) / 0.2); }
.page-hero__disc { position: absolute; right: 40px; top: 50%; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: #fff; box-shadow: 0 12px 30px rgb(var(--teal-600-rgb) / 0.25); transform: translateY(-50%); animation: hero-float 6s ease-in-out infinite; }
.page-hero__disc svg { width: 48px; height: 48px; fill: none; stroke: var(--color-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.page-hero--slate .page-hero__disc svg { fill: rgba(232, 17, 35, 0.12); stroke: #e8475a; }
.page-hero__note { position: absolute; color: var(--color-link); font-size: 22px; opacity: 0.55; animation: hero-note 5s ease-in-out infinite; }
.page-hero__note--a { left: 30px; top: 18px; }
.page-hero__note--b { left: 92px; bottom: 10px; font-size: 26px; animation-delay: -1.6s; }
.page-hero__note--c { right: 6px; top: 6px; font-size: 18px; animation-delay: -3.2s; }
@keyframes hero-float { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 6px)); } }
@keyframes hero-note { 0%, 100% { transform: translateY(0) rotate(0); opacity: 0.55; } 50% { transform: translateY(-8px) rotate(-8deg); opacity: 0.85; } }
@media (max-width: 640px) {
  .page-hero { min-height: 0; padding: var(--space-5) var(--space-4); }
  .page-hero__art { display: none; }          /* on a phone the picture sat on top of the words (#179) */
}

/* ---- Suggestions under library pages: a clear divider, then sliders ---------------------------- */
.lib-suggest:empty { display: none; }
.lib-suggest { margin-top: calc(var(--section-gap) * 1.5); }
.lib-suggest__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.lib-suggest__head::before, .lib-suggest__head::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* ---- Library lists (one look on every library page, #104) ----------------------------------------- */
.lib-empty { display: grid; place-items: center; align-content: center; gap: 6px; grid-column: 1 / -1; min-height: 240px; margin-top: var(--space-4); padding: var(--space-7) var(--space-4); text-align: center; border: 1px dashed var(--teal-150); border-radius: var(--radius-lg); background: var(--surface-hover); }
.lib-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link); }
.lib-empty__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lib-empty strong { font-size: var(--text-md); font-weight: 600; }
.lib-empty p { max-width: 420px; font-size: var(--text-sm); color: var(--color-text-muted); }
.lib-empty .btn { margin-top: var(--space-3); }
.pl-grid > .lib-empty { margin-top: 0; }
.lib-count { margin-left: auto; font-size: 13px; color: var(--color-text-subtle); }
.sl-bar:has(> .lib-count:only-child) { min-height: 46px; }
.lib-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.lib-person { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; text-align: center; transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.lib-person:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lib-person__link { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; width: 100%; color: inherit; text-decoration: none; }
.lib-person__img { width: 88px; height: 88px; margin-bottom: 8px; overflow: hidden; border-radius: 50%; background: var(--color-primary-soft); }
.lib-person__img img { width: 100%; height: 100%; object-fit: cover; }
.lib-person strong { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.lib-person small { font-size: 12px; color: var(--color-text-muted); }
.lib-person .btn { min-width: 120px; }
.sl-bar .lib-count { align-self: center; }

/* Comments: cards of equal height — what it is on (picture, title, kind, by) on top, your words below */
.cm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cm-card, .cm-card.sl-song { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); min-width: 0; min-height: 0; cursor: default; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.cm-card:hover { box-shadow: var(--shadow-md); background: #fff; }
.cm-card.is-current { background: #fff; }
.cm-card.is-current { border-color: var(--color-primary); }
.cm-card__on { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cm-card__art { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; }
.cm-card__art > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cm-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-card__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: rgba(11, 12, 14, 0.35); color: #fff; opacity: 0; cursor: pointer; transition: opacity var(--dur-fast) var(--ease); }
.cm-card__play svg { width: 20px; height: 20px; fill: currentColor; }
.cm-card:hover .cm-card__play, .cm-card__play:focus-visible, .cm-card.is-playing .cm-card__play { opacity: 1; }
@media (hover: none) { .cm-card__play { opacity: 1; background: rgba(11, 12, 14, 0.2); } }
.cm-card__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-card__title { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cm-card__title a { color: inherit; text-decoration: none; }
.cm-card__title a:hover { color: var(--color-link-hover); }
.cm-card__by { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.cm-card__kind { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-style: normal; font-weight: 600; }
.cm-card__bubble { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); padding: 12px 14px; border-radius: 4px var(--radius-md) var(--radius-md) var(--radius-md); background: #f4fafa; }
.cm-card__body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-size: var(--text-sm); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.cm-card__meta { font-size: 12px; color: var(--color-text-subtle); }
.cm-card__reply { margin-right: 8px; font-style: normal; font-weight: 600; color: var(--color-link-hover); }


/* Album / compilation page: ♥ slate and 👍 like side by side (#104) */
.pl-play__heart { display: inline-flex; align-items: center; gap: 4px; }
.pl-like { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-control-icon); cursor: pointer; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.pl-like svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-like:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.pl-like:active { transform: scale(0.9); }
.pl-like.is-on { color: var(--heart); }                      /* the site's one heart red (#313) */
.pl-like.is-on:hover { background: var(--heart-soft); color: var(--heart); }
.pl-like.is-on svg { fill: currentColor; fill-opacity: 0.25; animation: mp-pop 0.35s var(--ease); }
.pl__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; white-space: pre-line; }
.pl__desc.is-open { display: block; -webkit-line-clamp: unset; }
.pl__descmore { margin-top: 2px; font-size: 13px; }
.pl__descmore[hidden] { display: none; }

/* Compact banner (editors, create pages) and its "← back" link (#104) */
.page-hero__back { display: table; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--color-link-hover); text-decoration: none; }
.page-hero__back:hover { text-decoration: underline; }
.page-hero--compact { min-height: 0; padding-top: var(--space-4); padding-bottom: var(--space-4); }
.page-hero--compact .page-hero__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.page-hero--compact .page-hero__art { height: 96px; width: 220px; }
.page-hero--compact .page-hero__disc { width: 78px; height: 78px; }
.page-hero--compact .page-hero__disc svg { width: 34px; height: 34px; }
.page-hero--compact .page-hero__note--b { display: none; }

.stp__verify { padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 14px; }
.stp__verify[hidden] { display: none; }

/* Someone you follow (#117): ▶ on the picture plays their radio, × in the corner unfollows, the rest opens the profile */
.lib-person { position: relative; }
.lib-person__x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-subtle); cursor: pointer; opacity: 0; transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.lib-person__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lib-person__x:hover, .lib-person__x:focus-visible { background: var(--danger-soft); color: var(--color-error); }
.lib-person__play { position: absolute; top: calc(var(--space-5) + 24px); left: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); cursor: pointer; opacity: 0; transform: scale(0.85); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.lib-person__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.lib-person__play:hover { background: var(--color-primary-strong); }
.lib-person:hover .lib-person__x, .lib-person:focus-within .lib-person__x, .lib-person:hover .lib-person__play, .lib-person:focus-within .lib-person__play { opacity: 1; transform: none; }
@media (hover: none) { .lib-person__x, .lib-person__play { opacity: 1; transform: none; } }
.lib-person.is-leaving { opacity: 0; transform: scale(0.94); transition: opacity 0.2s ease, transform 0.2s ease; }

/* My Music (#117): the numbers on top; each song's privacy and delete */
.mm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: var(--space-4); }
.mm-stat { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary-soft), #fff 70%); }
.mm-stat strong { font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.mm-stat small { color: var(--color-text-muted); font-size: 13px; }
.mm-stats:empty { display: none; }
@media (max-width: 639px) { .mm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mm-act { display: flex; flex: none; align-items: center; gap: 6px; margin-left: 8px; }
.mm-vis { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; color: var(--color-text-muted); font: inherit; font-size: 13px; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.mm-vis svg, .mm-del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mm-vis.is-public { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); }
.mm-vis:hover { border-color: var(--color-primary); }
.mm-vis.is-locked, .mm-vis.is-locked:hover { border-color: var(--color-border); cursor: default; }   /* an artist's old library uploads: private, not switchable (#313) */
.mm-del { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-subtle); cursor: pointer; }
.mm-del svg { width: 16px; height: 16px; }
.mm-del:hover { background: var(--danger-soft); color: var(--color-error); }
.pl-dialog__vis[hidden] { display: none; }                 /* compilations: always public, no switch (#120) */
.stp__private[hidden] { display: none; }
/* An album's "Listen on" row (var(--teal-950)) */
.pl__listen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; font-size: 13px; color: var(--color-text-muted); }
.pl__listen[hidden] { display: none; }
.pl__listen a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid var(--color-control); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); text-decoration: none; font-weight: 500; }
.pl__listen a:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.pl__listen a svg, .pl__listen a img { width: 18px; height: 18px; }
.sl-card > .pl-card__sub { margin-top: 4px; }
.pl__tags > span { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; }

/* Comments grouped per song / album / event (Rohit): the card's head, then your comments on it, newest first */
.cm-list { align-items: start; }
.cm-card__on { position: relative; }
.cm-card__n { flex: none; margin-left: auto; align-self: flex-start; font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }
.cm-card__said { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cm-card__said .cm-card__bubble { flex: none; padding-right: 44px; }
a.cm-card__body { color: var(--color-text); text-decoration: none; }
a.cm-card__body:hover { color: var(--color-link-hover); }                 /* like a title: teal, no underline */
.cm-card__rm { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--color-text-subtle); cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cm-card__rm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-card__bubble:hover .cm-card__rm, .cm-card__rm:focus-visible { opacity: 1; }
.cm-card__rm:hover { background: var(--danger-soft); color: var(--color-error); }
@media (hover: none) { .cm-card__rm { opacity: 1; } }
/* A song's card keeps its white ground (a song row's hover / playing tint is for rows, not these cards) */
.cm-card.sl-song:hover, .cm-card.sl-song.is-current { background: #fff; }
/* × removes a comment: centred on its row, red; on hover a white disc, as the hearts do (Rohit) */
.cm-card__said .cm-card__rm { top: 50%; right: 10px; width: 32px; height: 32px; color: var(--color-error); opacity: 1; transform: translateY(-50%); }
.cm-card__said .cm-card__rm svg { width: 16px; height: 16px; stroke-width: 2.4; }
.cm-card__said .cm-card__rm:hover, .cm-card__said .cm-card__rm:focus-visible { background: #fff; color: var(--color-error); box-shadow: 0 1px 4px rgb(var(--teal-950-rgb) / .12); }
/* Cards in a row level (Rohit): a card shows 3 comments at most, the row's cards stretch to one height; "Show All" at the foot */
.cm-list { align-items: stretch; }
.cm-card__said { flex: 1; align-content: flex-start; }
.cm-card__said .cm-card__bubble[hidden] { display: none; }
.cm-card__all { align-self: flex-start; font-size: 13px; }
/* The × only while the pointer is on that comment (always on touch screens) */
.cm-card__said .cm-card__rm { opacity: 0; }
.cm-card__said .cm-card__bubble:hover .cm-card__rm, .cm-card__said .cm-card__rm:focus-visible { opacity: 1; }
@media (hover: none) { .cm-card__said .cm-card__rm { opacity: 1; } }

/* ---- player.css ---- */
/* =====================================================================
   Player (player.js, decision #79). Light bar in the 2023 spirit (white →
   soft teal, teal controls), modernised:
     ≥ 1024px  full bar: song · controls + seek · radio / queue / volume / more
     768–1023  same without volume
     < 768     floating mini bar (thin progress line) → full-screen Now playing
   Radio mode greys out seek / previous / shuffle / repeat.
   ===================================================================== */
.app-player {
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  pointer-events: none;            /* only the bar, panels and menus take clicks */
}
.app-player[hidden] { display: none; }
.app-player > * { pointer-events: auto; }

.app-player svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-player svg.f { fill: currentColor; stroke: none; }

/* ---- Bar ------------------------------------------------------------------------- */
.mp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(320px, 1.6fr) minmax(200px, 1fr);
  align-items: center;
  gap: var(--space-4);
  height: var(--player-height);
  padding: 0 var(--space-4) env(safe-area-inset-bottom);
  box-sizing: content-box;
  background: linear-gradient(180deg, rgba(234, 247, 248, 0.96) 0%, rgba(255, 255, 255, 0.97) 70%);
  border-top: 1px solid rgb(var(--teal-500-rgb) / 0.22);
  box-shadow: 0 -6px 24px rgba(17, 17, 17, 0.06);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.mp__line { display: none; }

.mp__now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mp__art {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--color-primary-soft);
  color: var(--color-link);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.12);
}
.mp__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease); }
.mp__art:hover img { transform: scale(1.06); }
.mp__meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.mp__title { text-decoration: none; overflow: hidden; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; text-overflow: ellipsis; }
.mp__title:hover { color: var(--color-link-hover); }
.mp__artists { overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.mp__artists a { color: inherit; text-decoration: none; }
.mp__artists a:hover { color: var(--color-link-hover); text-decoration: underline; }
.mp__tag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 10px; font-weight: 600; vertical-align: 2px; }

.mp__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #43474d;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mp__icon:hover:not(:disabled) { color: var(--color-link-hover); background: rgb(var(--teal-500-rgb) / 0.1); }
.mp__icon:active:not(:disabled) { transform: scale(0.92); }
.mp__icon:disabled { opacity: 0.32; cursor: default; }
.mp__icon.is-on { color: var(--color-link); }
.mp__icon.is-on::after { content: ''; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.mp__fav.is-on svg { fill: var(--heart); stroke: var(--heart); }
.mp__fav.is-on { color: var(--heart); }
.mp__fav.is-on::after { display: none; }
.mp__fav.is-on svg { animation: mp-pop 0.35s var(--ease); }
@keyframes mp-pop { 50% { transform: scale(1.25); } }
.app-player :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.mp__center { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mp__controls { display: flex; align-items: center; gap: 10px; }
.mp__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(var(--teal-500-rgb) / 0.38);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.mp__play:hover { background: var(--color-primary-strong); transform: scale(1.05); }
.mp__play:active { transform: scale(0.95); }
.mp__play svg { width: 20px; height: 20px; }
.mp__spin { position: absolute; inset: -4px; border: 2px solid transparent; border-top-color: var(--color-primary); border-radius: 50%; opacity: 0; pointer-events: none; }
.is-loading .mp__spin { opacity: 1; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.mp__seek { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 620px; }
.mp__time { flex: none; min-width: 38px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.mp__time:first-child { text-align: right; }

.mp__side { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.mp__pop { position: relative; }
.mp__pop[hidden] { display: none; }
.mp__queue-btn b { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.mp__queue-btn b[hidden] { display: none; }
.queue-open .mp .mp__queue-btn { color: var(--color-link); }
.mp__vol { display: flex; align-items: center; gap: 2px; }
.mp__vol .mp-range { width: 96px; }
.mp__badge { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mp__badge span { overflow: hidden; text-overflow: ellipsis; }
.mp__badge svg { flex: none; width: 15px; height: 15px; }
.is-playing .mp__badge svg { animation: mp-pulse 1.6s ease-in-out infinite; }
@keyframes mp-pulse { 50% { opacity: 0.45; } }
.mp__badge[hidden], .mp__back[hidden] { display: none; }
.mp__back { padding: 5px 12px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); background: #fff; color: var(--color-link-hover); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.mp__back:hover { background: var(--color-primary); color: #fff; }
.mp__mini-play, .mp__mini-next { display: none; }

/* ---- Sliders (seek + volume) ------------------------------------------------------- */
.mp-range {
  --p: 0%;
  --fill: var(--color-primary);
  --track: rgba(17, 17, 17, 0.12);
  flex: 1;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mp-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--fill) var(--p), var(--track) var(--p)); }
.mp-range::-moz-range-track { height: 4px; border-radius: 4px; background: var(--track); }
.mp-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--fill); }
.mp-range::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--fill); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); transform: scale(0); transition: transform var(--dur-fast) var(--ease); -webkit-appearance: none; appearance: none; }
.mp-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--fill); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
.mp-range:hover::-webkit-slider-thumb, .mp-range:focus-visible::-webkit-slider-thumb, .mp-range:active::-webkit-slider-thumb { transform: scale(1); }
.mp-range:hover::-moz-range-thumb, .mp-range:focus-visible::-moz-range-thumb, .mp-range:active::-moz-range-thumb { transform: scale(1); }
.mp-range:hover { --fill: var(--color-primary-strong); }
.mp-range:focus-visible { outline: none; }
.mp-range:focus-visible::-webkit-slider-runnable-track { box-shadow: 0 0 0 3px rgb(var(--teal-500-rgb) / 0.3); }
.mp-range:disabled { cursor: default; --fill: rgb(var(--teal-500-rgb) / 0.55); }
.mp-range:disabled::-webkit-slider-thumb { transform: scale(0) !important; }
.mp-range:disabled::-moz-range-thumb { transform: scale(0) !important; }
@media (pointer: coarse) { .mp-range::-webkit-slider-thumb { transform: scale(1); } .mp-range::-moz-range-thumb { transform: scale(1); } }

/* ---- Queue panel --------------------------------------------------------------------- */
.mpq {
  position: fixed;
  top: calc(var(--header-height) + 8px);
  right: 8px;
  bottom: calc(var(--player-height) + env(safe-area-inset-bottom) + 8px);
  z-index: 6;                      /* above Now playing when opened from it */
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 16px));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 16px 48px rgba(17, 17, 17, 0.16);
  animation: mpq-in var(--dur-med) var(--ease);
}
.mpq[hidden] { display: none; }
@keyframes mpq-in { from { opacity: 0; transform: translateX(24px); } }
.mpq__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 10px 18px; border-bottom: 1px solid var(--color-border); }
.mpq__title { overflow: hidden; font-size: var(--text-md); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mpq__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--teal-200) transparent; }
.mpq__label { margin: 12px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-subtle); }
.mpq__label small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--color-link-hover); }
.mpq__list { margin: 0; padding: 0; list-style: none; }
.mpq__item { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-md); }
.mpq__item:hover { background: #f5f8f8; }
.mpq__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.mpq__item.is-current { background: var(--color-primary-soft); }
.mpq__item.is-dragging { position: relative; z-index: 1; background: #fff; box-shadow: var(--shadow-md); }
.mpq__grip { display: grid; place-items: center; width: 22px; height: 44px; color: #b5b8bd; cursor: grab; touch-action: none; }
.mpq__grip svg { width: 16px; height: 16px; }
.mpq__main { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 6px 6px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.mpq__main.is-static { cursor: default; }
button.mpq__art { padding: 0; border: 0; cursor: pointer; }
.mpq__info a { color: inherit; text-decoration: none; }
.mpq__info a:hover { color: var(--color-link-hover); text-decoration: underline; }
.mpq__info strong .song-link { color: inherit; }
.mpq__item:has(.mpq__grip) .mpq__main { padding-left: 2px; }
.mpq__art { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-link); }
.mpq__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mpq__art svg { width: 18px; height: 18px; }
.mpq__eq { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 11px; background: rgba(17, 17, 17, 0.45); }
.mpq__eq i { width: 3px; height: 6px; border-radius: 2px; background: #fff; }
.is-playing .mpq__eq i { animation: mp-eq 0.9s ease-in-out infinite; }
.is-playing .mpq__eq i:nth-child(2) { animation-delay: 0.2s; }
.is-playing .mpq__eq i:nth-child(3) { animation-delay: 0.4s; }
@keyframes mp-eq { 0%, 100% { height: 5px; } 50% { height: 18px; } }
.mpq__info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mpq__list--played .mpq__art, .mpq__list--played .mpq__info { opacity: 0.6; }          /* already played: tap to play again */
.mpq__info strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.is-current .mpq__info strong { color: var(--color-link-hover); font-weight: 600; }
.mpq__info span { overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.mpq__dur { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-text-subtle); }
.mpq__rm, .mpq__more { width: 32px; height: 32px; opacity: 0; }
.mpq__item:hover .mpq__rm, .mpq__rm:focus-visible, .mpq__item:hover .mpq__more, .mpq__more:focus-visible, .mpq__more[aria-expanded="true"] { opacity: 1; }
@media (pointer: coarse) { .mpq__rm, .mpq__more { opacity: 1; } }
.mpq__rm svg { width: 15px; height: 15px; }
.mpq__empty { padding: 28px 16px; font-size: 13px; text-align: center; color: var(--color-text-muted); list-style: none; }
.mpq__note { display: flex; gap: 8px; align-items: flex-start; margin: 8px 6px 4px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-primary-soft); font-size: 12px; color: var(--color-link-hover); }
.mpq__note svg { flex: none; width: 16px; height: 16px; }
.mpq__toqueue { display: block; margin: 16px auto 4px; }
.mpq__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); }
.mpq__foot[hidden] { display: none; }

/* ---- Menu ------------------------------------------------------------------------------ */
.mp-menu {
  position: fixed;
  z-index: 7;
  min-width: 220px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 12px 32px rgba(17, 17, 17, 0.16);
  animation: fade-in var(--dur-fast) var(--ease);
}
.mp-menu[hidden] { display: none; }
.mp-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--color-border); }
.mp-menu__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: none; font-size: var(--text-sm); color: var(--color-text); text-align: left; cursor: pointer; }
.mp-menu__item span { flex: 1; display: flex; flex-direction: column; }
.mp-menu__item small { font-size: 11px; color: var(--color-text-subtle); }
.mp-menu__item svg { flex: none; width: 18px; height: 18px; color: var(--color-text-muted); }
.mp-menu__item:hover:not(:disabled), .mp-menu__item:focus-visible { background: var(--color-primary); color: #fff; outline: none; }
.mp-menu__item:hover:not(:disabled) svg, .mp-menu__item:focus-visible svg, .mp-menu__item:hover small, .mp-menu__item:focus-visible small { color: #fff; }
.mp-menu__item.is-on > svg:last-child { color: var(--color-link); }
.mp-menu__item:disabled { cursor: default; color: var(--color-text-subtle); font-size: 12px; }

/* ---- Full-screen Now playing --------------------------------------------------------------- */
.np {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  overflow: clip;                  /* the blurred background is larger than the screen: never scrollable */
  background: #0f1416;
  color: #fff;
  opacity: 0;
  transform: translateY(6%);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.np[hidden] { display: none; }
.np.is-open { opacity: 1; transform: none; }
.np__bg { position: absolute; inset: -60px; background: var(--color-primary-strong) center / cover no-repeat; filter: blur(48px) saturate(1.3) brightness(0.55); transform: scale(1.1); }
.np::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55)); pointer-events: none; }
.np__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.6vh, 22px);
  width: 100%;
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) var(--space-5) max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  transition: transform var(--dur-fast) var(--ease);
}
.np .mp__icon { color: var(--color-on-dark-soft); }
.np .mp__icon:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.12); }
.np .mp__icon.is-on { color: var(--teal-300); }
.np .mp__fav.is-on { color: var(--heart); }
.np__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.np__top .mp__icon svg { width: 24px; height: 24px; }
.np__from { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.np__from small { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.np__from strong { max-width: 60vw; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.np__art {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 46vh, 420px);
  aspect-ratio: 1;
  margin: auto auto 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-dark-muted);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-slow) var(--ease);
}
.np__art svg { width: 64px; height: 64px; stroke-width: 1.4; }
.np__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.np__art { transform: scale(0.94); }
.is-playing .np__art { transform: none; }
.np__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.np__meta > div { display: flex; flex-direction: column; min-width: 0; }
.np__title { text-decoration: none; overflow: hidden; font-size: clamp(1.15rem, 5vw, 1.4rem); font-weight: 700; color: #fff; white-space: nowrap; text-overflow: ellipsis; }
.np__artists { overflow: hidden; font-size: var(--text-sm); color: var(--color-on-dark-muted); white-space: nowrap; text-overflow: ellipsis; }
.np__artists a { color: inherit; text-decoration: none; }
.np__meta .mp__fav svg { width: 26px; height: 26px; }
.np .mp-range { --fill: #fff; --track: rgba(255, 255, 255, 0.25); }
.np .mp-range::-webkit-slider-thumb { transform: scale(1); }
.np .mp-range::-moz-range-thumb { transform: scale(1); }
.np .mp-range:disabled { --fill: rgba(255, 255, 255, 0.6); }
.np__times { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-on-dark-muted); }
.np__controls { display: flex; align-items: center; justify-content: space-between; }
.np__big svg { width: 30px; height: 30px; }
.np__big { width: 54px; height: 54px; }
.np__play { width: 72px; height: 72px; background: #fff; color: var(--color-link-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
.np__play:hover { background: #fff; }
.np__play svg { width: 30px; height: 30px; }
.np .mp__spin { border-top-color: #fff; }
.np__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 44px; }
.np__foot .mp__badge { margin-right: auto; background: rgba(255, 255, 255, 0.15); color: #fff; }
.np__foot .mp__back { margin-right: auto; }
.np__foot .mp__badge:not([hidden]) + .mp__back { margin-left: -4px; margin-right: auto; }
body.np-open { overflow: hidden; }

/* ---- Dialog content (add to playlist, shortcuts) ------------------------------------------- */
.confirm__text:has(.mp-keys) { white-space: normal; text-align: left; }
.mp-keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; margin: 0; }
.mp-keys dd { margin: 0; color: var(--color-text); }
.mp-keys kbd { display: inline-block; padding: 2px 8px; border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: 6px; background: #fafafa; font: 600 12px var(--font-body); color: var(--color-text); white-space: nowrap; }

/* ---- Sizes ----------------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .mp { grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.4fr) auto; }
  .mp__vol .mp-range { width: 72px; }
  .mp__badge { max-width: 130px; }
}
@media (max-width: 1023px) {
  .mp__vol { display: none; }
  .mp__badge { display: none !important; }
}
/* Phones: floating mini bar; everything else lives in Now playing */
@media (max-width: 767px) {
  /* What the player really takes on a phone: a 60px bar, its 1px borders, and the 8px it floats above the
     bottom = 70. The token stayed at the desktop 76, so every page, toast and sticky footer kept 6px more
     than the player uses — and one rule below had given up on the token and hard-coded 60 + 16 (#313). */
  :root { --player-height: 70px; }
  .mp {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px;
    height: 60px;
    /* The gap you can see under the bar. It used to be 8px ON TOP OF the phone's own bottom inset, so on a
       handset with a home indicator the player floated ~42px up — which is what looked like too much room.
       The inset is already the clearance; 8px is only for phones that have none. (#313, Rohit) */
    margin: 0 8px max(8px, env(safe-area-inset-bottom));
    /* A swipe that starts on the bar belongs to the bar — without this the page scrolled underneath it. */
    touch-action: none;
    padding: 0 6px 0 6px;
    border: 1px solid rgb(var(--teal-500-rgb) / 0.25);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(17, 17, 17, 0.18);
    cursor: pointer;
  }
  .mp__line { display: block; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; background: rgb(var(--teal-500-rgb) / 0.18); }
  .mp__line i { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width 0.25s linear; }
  .mp__art { width: 44px; height: 44px; }
  .mp .mp__fav, .mp .mp__more, .mp__center, .mp__side { display: none; }
  .mp__mini-play, .mp__mini-next { display: grid; width: 42px; height: 42px; }
  .mp__mini-play svg { width: 22px; height: 22px; }
  .mp__mini-play { color: var(--color-link-hover); }
  .is-radio .mp__mini-next { color: var(--color-link-hover); }
  .mpq { inset: 0; width: 100%; border: 0; border-radius: 0; animation-name: mpq-up; }
  .mpq__head { padding-top: max(14px, env(safe-area-inset-top)); }
  @keyframes mpq-up { from { opacity: 0; transform: translateY(8%); } }
  body.has-player .app-page { padding-bottom: calc(var(--player-height) + var(--space-7) + env(safe-area-inset-bottom)); }
}
@media (max-height: 640px) and (max-width: 767px) {
  .np__art { width: min(100%, 38vh); }
}
@media (prefers-reduced-motion: reduce) {
  .app-player *, .np { animation: none !important; transition: none !important; }
}

/* ---- Thumbs up / down (private feedback, decision #80) --------------------------------------- */
.mp__rate, .np__rate { display: flex; align-items: center; }
.mp__rate { margin-left: auto; }
.mp__thumb svg { width: 18px; height: 18px; }
.mp__thumb.is-on { color: var(--color-link-hover); }
.mp__thumb.is-on svg path:last-child { fill: currentColor; fill-opacity: 0.18; }
.mp__thumb.is-on::after { display: none; }
.np .mp__thumb.is-on { color: var(--teal-300); }
.np__rate .mp__thumb svg { width: 22px; height: 22px; }
@media (max-width: 1023px) { .mp .mp__rate { display: none; } }

/* Nothing playing (#313, Rohit: the player must be there even with an empty queue, so the page never shifts
   and nobody thinks the site has no player). The bar keeps its place and its shape; what you cannot use yet
   is quiet rather than gone, so the controls do not move once a song loads. */
.mp.is-idle .mp__title { color: var(--color-text-muted); cursor: default; }
.mp.is-idle .mp__title:hover { color: var(--color-text-muted); }
.mp.is-idle .mp__controls,
.mp.is-idle .mp__seek,
.mp.is-idle .mp__rate,
.mp.is-idle .mp__fav,
.mp.is-idle .mp__more,
.mp.is-idle .mp__mini-play,
.mp.is-idle .mp__mini-next { opacity: .4; pointer-events: none; }
.mp.is-idle .mp__art { cursor: default; pointer-events: none; }
.mp.is-idle .mp__line { opacity: 0; }

/* ---- social.css ---- */
/* =====================================================================
   My Slate and public profiles (social.js, decision #80)
   ===================================================================== */

/* ---- Hearts (slate) anywhere ------------------------------------------------------------ */
.sl-heart { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-control-icon); cursor: pointer; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.sl-heart svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-heart:hover { background: var(--heart-soft); color: var(--heart); }
.sl-heart:active { transform: scale(0.9); }
.sl-heart.is-on { color: var(--heart); }
.sl-heart.is-on svg { fill: currentColor; animation: mp-pop 0.35s var(--ease); }
/* Hearts on songs in lists (Bugs-Issues-2): always shown — outline when not slated, filled red when it is */
.list-heart { flex: none; width: 34px; height: 34px; }
.list-heart svg { width: 18px; height: 18px; }
.srow__btn.sl-heart, .sp-song__btn.sl-heart, .list-heart { opacity: 1 !important; }
.sh-xp__row .list-heart, .chart__row .list-heart { justify-self: center; }
@keyframes mp-pop { 50% { transform: scale(1.25); } }
.slate__heart { color: var(--heart); }

/* ---- My Slate ---------------------------------------------------------------------------- */
.slate__privacy { display: flex; align-items: center; gap: 14px; margin-top: var(--space-5); padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; cursor: pointer; }
.slate__privacy-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); }
.slate__privacy-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slate__privacy-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slate__privacy-text strong { font-size: var(--text-sm); font-weight: 600; }
.slate__privacy-text small { font-size: 12px; color: var(--color-text-muted); }
/* An artist's: always private — the lock in a grey square where the switch would be (#212, as Settings' Slate row) */
.slate__privacy.is-locked { cursor: default; }
.slate__privacy .field__lock { position: static; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--tg-50); color: var(--color-text-muted); transform: none; }
.slate__privacy .set-switch[hidden] { display: none; }
.slate__profile { display: inline-block; margin-top: 8px; font-size: 13px; }
.slate__profile[hidden] { display: none; }
.slate__tabs { display: flex; gap: 4px; margin-top: var(--space-5); overflow-x: auto; border-bottom: 1px solid var(--color-border); scrollbar-width: none; }
.slate__tab { position: relative; flex: none; padding: 10px 14px; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); cursor: pointer; text-decoration: none; }
.slate__tab:hover { color: var(--color-text); }   /* a tab can be a link (an address per tab, var(--teal-600)): never underlined (var(--teal-600)) */
.slate__tab span { margin-left: 2px; font-size: 12px; color: var(--color-text-subtle); }
.slate__tab[aria-selected="true"] { color: var(--color-link-hover); font-weight: 600; }
.slate__tab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--color-primary); }
.slate__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-sm); }
.slate__panel { min-height: 120px; }
.slate__more { display: block; margin: var(--space-5) 0 0; }   /* at the left (#247) */
.slate__more[hidden] { display: none; }
.sl-empty { padding: var(--space-6) 0; font-size: var(--text-sm); text-align: center; color: var(--color-text-muted); }
.sl-note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-primary-soft); font-size: 13px; color: var(--color-link-hover); }
.sl-note svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Song rows */
.sl-bar { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); }
.sl-bar__play { width: 46px; height: 46px; }
.sl-bar__play svg { width: 20px; height: 20px; fill: currentColor; }
.sl-songs { margin: 0; padding: 0; list-style: none; }
.sl-song { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), opacity 0.2s ease, transform 0.2s ease; }
.sl-song:hover { background: var(--surface-hover); }
.sl-song.is-current { background: var(--color-primary-soft); }
.sl-song.is-current .sl-song__info strong { color: var(--color-link-hover); font-weight: 600; }
.sl-song.is-leaving, .sl-card.is-leaving { opacity: 0; transform: scale(0.96); }
.sl-song__art { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 6px; background: var(--color-primary-soft); color: var(--teal-300); }
.sl-song__art > svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-song__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-song__play { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: rgba(17, 17, 17, 0.45); color: #fff; opacity: 0; cursor: pointer; transition: opacity var(--dur-fast) var(--ease); }
.sl-song__play svg { width: 18px; height: 18px; fill: currentColor; }
.sl-song:hover .sl-song__play, .sl-song__play:focus-visible, .sl-song.is-current .sl-song__play { opacity: 1; }
@media (pointer: coarse) { .sl-song__play { opacity: 0; } .sl-song.is-current .sl-song__play { opacity: 1; } }
/* While it plays (#190): bars over the picture; hover (or focus) turns them into ❚❚ — the ▶ / ❚❚ icon follows the state */
.sl-song__play svg + svg, .sl-song.is-playing .sl-song__play svg:first-child { display: none; }
.sl-song.is-playing .sl-song__play svg + svg { display: block; }
.sl-song__eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 13px; background: rgba(17, 17, 17, 0.45); pointer-events: none; }
.sl-song__eq i { width: 3px; height: 16px; border-radius: 2px; background: #fff; transform-origin: bottom; animation: sl-eq .9s ease-in-out infinite alternate; }
.sl-song__eq i:nth-child(2) { animation-delay: -.3s; }
.sl-song__eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes sl-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.sl-song.is-playing .sl-song__eq { display: flex; }
.sl-song.is-playing .sl-song__play { opacity: 0; }
.sl-song.is-playing:hover .sl-song__eq, .sl-song.is-playing:has(.sl-song__play:focus-visible) .sl-song__eq { display: none; }
.sl-song.is-playing:hover .sl-song__play, .sl-song.is-playing .sl-song__play:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sl-song__eq i { animation: none; } .sl-song__eq i:nth-child(2) { transform: scaleY(.6); } }
.sl-song__info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sl-song__info strong, .sl-song__info span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sl-song__info strong { font-size: var(--text-sm); font-weight: 500; }
.sl-song__info span { font-size: 12px; color: var(--color-text-muted); }
.sl-song__info a { color: inherit; text-decoration: none; }
.sl-song__info a:hover { color: var(--color-link-hover); text-decoration: underline; }
.sl-song__time { flex: none; display: flex; align-items: center; gap: 10px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
@media (max-width: 480px) { .sl-song__time { display: none; } .sl-song .art-tag { display: block; } }
/* Popular's plays (#252): muted, lined up; on a phone (no length shown) they take the length's place */
.sl-song__plays { min-width: 72px; color: var(--color-text-subtle); text-align: right; white-space: nowrap; }
@media (max-width: 480px) { .sl-song__time:has(.sl-song__plays) { display: flex; } .sl-song__time:has(.sl-song__plays) > span:last-child { display: none; } .sl-song__plays { min-width: 0; } }

/* Cards with a heart */
.sl-card { position: relative; min-width: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.sl-card .sl-heart { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-sm); }

/* ---- Public profile ------------------------------------------------------------------------- */
.prof { width: 100%; }
.prof__cover { position: relative; aspect-ratio: 3 / 1; max-height: 260px; width: 100%; overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(120deg, var(--teal-500) 0%, var(--teal-300) 55%, var(--teal-150) 100%); }
.prof__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prof__who { position: relative; display: flex; align-items: flex-start; gap: var(--space-4); margin: 0 0 0 var(--space-5); }
.prof__avatar { flex: none; width: 128px; height: 128px; margin-top: -52px;   /* only the photo sits over the cover */ border: 4px solid #fff; box-shadow: var(--shadow-md); background: #fff; }
.prof__names { flex: 1; min-width: 0; padding-top: 12px; }
.prof__name { overflow: hidden; font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.prof__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--color-text-muted); }
.prof__role { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 600; }
.prof__loc { display: inline-flex; align-items: center; gap: 3px; }
.prof__loc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prof__counts { margin-top: 4px; font-size: 13px; color: var(--color-text); }
.prof__actions { display: flex; align-items: center; gap: 8px; padding-top: 16px; }
.prof__actions .btn { min-width: 108px; }
.prof__actions .is-following { color: var(--color-link-hover); border-color: var(--color-primary); }
.prof__share { min-width: 0 !important; width: 36px; padding: 0; display: grid; place-items: center; }
.prof__share svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.prof__bio { max-width: 720px; margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); white-space: pre-line; }
.prof__bio[hidden] { display: none; }
.prof__body { margin-top: var(--space-5); }
.prof__sec { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.prof__sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.prof__sec-head h2 { font-size: var(--text-lg); font-weight: 600; }
.prof__sec .pl-grid { margin-top: var(--space-4); }
.prof__pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--heart-soft); color: #e0435f; font-size: 12px; font-weight: 600; }
.prof__pill svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.prof__sub { margin-top: var(--space-5); }
.prof__sub h3 { font-size: var(--text-md); font-weight: 600; }
.prof__sub h3 small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--color-text-subtle); }
.prof__follows { display: flex; gap: var(--space-4); margin-top: var(--space-4); padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.prof__follow { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; color: var(--color-text); text-align: center; text-decoration: none; scroll-snap-align: start; }
.prof__follow .avatar { width: 88px; height: 88px; margin-bottom: 6px; transition: transform var(--dur-fast) var(--ease); }
.prof__follow:hover .avatar { transform: translateY(-2px); }
.prof__follow strong { max-width: 100%; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.prof__follow small { font-size: 11px; color: var(--color-text-muted); }
@media (max-width: 640px) {
  .prof__who { flex-wrap: wrap; margin: 0 0 0 var(--space-3); gap: 0 var(--space-3); }
  .prof__avatar { width: 92px; height: 92px; margin-top: -40px; }
  .prof__names { flex-basis: calc(100% - 110px); }
  .prof__actions { width: 100%; padding-top: 12px; margin-left: calc(-1 * var(--space-3)); }
  .prof__actions .btn:first-child { flex: 1; }
}

/* ---- Profile hero + artist profile (decision #94) ---------------------------------------------
   Every public profile uses the page hero (pages.css .pgp-hero): people get a round photo.
   An artist: music on the left (songs, albums, credits, compilations), about + experience on the right. */
.pgp-hero .pgp-hero__av--round { border-radius: 50%; }
.ap-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; font-size: 14px; color: var(--color-text-muted); }
.ap-stats strong { font-weight: 700; color: var(--color-text); }
.pgp .prof__sec-head { margin-bottom: var(--space-3); }
.pgp .prof__sec-head h2 { margin: 0; font-size: 19px; }
.pgp-sec .pl-grid { margin-top: 0; }
.pgp-sec .prof__sub:first-of-type { margin-top: 0; }
.ap-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-4); align-items: start; }
.ap-main, .ap-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
@media (max-width: 1023px) { .ap-cols { grid-template-columns: minmax(0, 1fr); } }
.ap-head-act { display: flex; align-items: center; gap: 10px; }
.ap-head-act small, .ap-count { font-size: 13px; color: var(--color-text-subtle); }
.ap-sub { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.ap-more { margin-top: var(--space-3); }
.ap-more[hidden] { display: none; }
.sl-song__n { flex: none; width: 20px; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--color-text-subtle); }
.sl-song.is-current .sl-song__n { color: var(--color-link-hover); }
.sl-song__info .sl-song__roles { color: var(--color-link-hover); }
.ap-fact { margin-top: var(--space-4); }
.ap-fact:first-child { margin-top: 0; }
.ap-fact h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-subtle); }
.ap-fact .pgp-chips { margin-top: 0; }
.ap-fact .pgp-chips + .pgp-chips { margin-top: 6px; }
.ap-fact > :not(h3):not(div) { font-size: 14px; }
.ap .pgp-bio { font-size: 14px; }
.ap-exp { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ap-exp__item { position: relative; display: flex; gap: 12px; padding: 0 0 var(--space-4); }
.ap-exp__item:last-child { padding-bottom: 0; }
.ap-exp__item:not(:last-child)::before { content: ''; position: absolute; top: 48px; bottom: 4px; left: 21px; width: 2px; border-radius: 1px; background: var(--color-border); }
.ap-exp__logo { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 700; }
.ap-exp__logo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.ap-exp__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-exp__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 2px; }
.ap-exp__body strong { font-size: 15px; font-weight: 600; color: var(--color-text); }   /* the role: the line that leads (#252) */
.ap-exp__org { font-size: 14px; color: var(--color-text-muted); }   /* where: lighter than the role, so the two never read alike (#252) */
.ap-exp__org a { color: inherit; font-weight: 400; text-decoration: none; }
.ap-exp__org a:hover { color: var(--color-link-hover); text-decoration: underline; }
.ap-exp__role { color: inherit; text-decoration: none; }                     /* a position opens its skill page: teal and underlined on hover (#204) */
.ap-exp__role:hover { color: var(--color-link-hover); text-decoration: underline; }
.ap-exp__org small { color: var(--color-text-subtle); font-size: 12px; }
.ap-exp__when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--color-text-muted); }
.ap-exp__item.is-current .ap-exp__when { color: var(--color-link-hover); font-weight: 500; }
.ap-exp__body p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-muted); white-space: pre-line; }
.pgp .prof__loc svg { width: 13px; height: 13px; vertical-align: -1px; }
.pgp-hero__act [data-follow] { min-width: 108px; }
.pgp-hero__act .is-following { color: var(--color-link-hover); border-color: var(--color-primary); }
@media (max-width: 640px) { .pgp-hero__act [data-follow] { flex: 1; } }
.pl-card__art > img + .pl-art-empty { display: none; }   /* shown again if the artwork fails to load */

/* Music by role (decision #98): a row per role, then "Other credits" with a tab per role */
.ap-role { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.ap-role:first-child { padding-top: 0; border-top: 0; }
.ap-role:last-child { padding-bottom: 0; }
.ap-role__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ap-role__head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ap-role__head h3 small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--color-text-subtle); }
.ap-role__play { width: 36px; height: 36px; box-shadow: none; }
.ap-role__play svg { width: 15px; height: 15px; }
.ap-tabs { display: flex; gap: 6px; margin: 4px 0 8px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.ap-tabs::-webkit-scrollbar { display: none; }
.ap-tab { flex: none; padding: 5px 12px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff; color: var(--color-text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.ap-tab small { margin-left: 3px; color: var(--color-text-subtle); }
.ap-tab:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.ap-tab.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 500; }
.ap-all { margin-top: 10px; }
.ap-all[hidden] { display: none; }

/* Decision #99: role chips on songs, chips under the name, a short bio, Experience in two parts */
.sl-song__info .sl-song__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; overflow: visible; white-space: normal; }
.rc { padding: 1px 8px; border-radius: var(--radius-pill); background: #f1f4f4; color: var(--color-text-muted); font-size: 11px; font-style: normal; font-weight: 500; line-height: 1.6; }
.rc--also { background: var(--color-primary-soft); color: var(--color-link-hover); }
.ap-hchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ap-hchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 500; }
.ap-hchip small { color: var(--color-text-subtle); font-weight: 400; }
button.ap-hchip { cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
button.ap-hchip:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
button.ap-hchip.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); }
.ap-role--filter .ap-head-act .link { font-size: 13px; }
/* Left-aligned: justified text in a column this narrow leaves wide gaps between words */
.ap-exsub + .ap-exsub { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.ap-exsub > h3 { margin: 0 0 var(--space-3); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-subtle); }
.pgp-hero__who > h1:first-child { margin-top: 12px; }

/* "Followed by" — pages that follow this profile (decision #105) */
.followed-by { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.followed-by a { color: var(--color-text); font-weight: 600; text-decoration: none; }
.followed-by a:hover { color: var(--color-link); }
.followed-by__faces { display: inline-flex; flex: none; }
.followed-by__faces img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: var(--color-primary-soft); }
.followed-by__faces img + img { margin-left: -8px; }
.ap-cols--one { grid-template-columns: minmax(0, 1fr); }

/* =====================================================================
   The artist page, redesigned (#147): hero on the cover, numbers, latest release + popular, music by
   role in tabs, events, bands & pages, about, work experience, similar artists carousel (.cf).
   ===================================================================== */
.apx { --apx-ink: var(--teal-950); }
/* Hero */
.apx-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(300px, 32vw, 430px); overflow: hidden; border-radius: var(--radius-lg); background: var(--teal-950); color: #fff; isolation: isolate; }
.apx-hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% 10%, var(--teal-400) 0%, var(--teal-600) 35%, var(--teal-900) 100%); }
.apx-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.apx-hero__bg img.apx-hero__blur { transform: scale(1.3); filter: blur(46px) saturate(1.3); opacity: .75; }
/* Dark enough under the text for any cover — a busy, bright poster included (#180); a touch of teal on the left */
.apx-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 22, 23, .12) 0%, rgba(8, 22, 23, .45) 40%, rgba(8, 22, 23, .9) 100%), linear-gradient(90deg, rgb(var(--teal-900-rgb) / .6) 0%, rgb(var(--teal-900-rgb) / .25) 55%, rgb(var(--teal-900-rgb) / .08) 100%); }
.apx-hero__in { display: flex; align-items: flex-end; gap: 28px; width: 100%; padding: 36px 36px 64px; }
.apx-hero__av { flex: none; width: clamp(120px, 14vw, 184px); aspect-ratio: 1; overflow: hidden; border: 4px solid rgba(255, 255, 255, .92); border-radius: 50%; background: var(--tg-50); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.apx-hero__av img { width: 100%; height: 100%; object-fit: cover; }
.apx-hero__who { flex: 1; min-width: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }   /* stays readable on a busy cover photo */
.apx-hero__kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-on-dark-soft); }
.apx-ver svg { display: block; width: 20px; height: 20px; fill: var(--teal-500); }
.apx-hero h1 { margin: 0; font-size: clamp(32px, 4.8vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; overflow-wrap: break-word; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }   /* words break only when one alone can't fit ("Parad / igm", #179) */
/* The name / title steps down as it gets longer, never below a readable size; past three lines it ends in … (the full
   one on hover). Shared by profiles, pages, songs, albums, playlists and compilations (social.js titleFit) */
.apx-hero h1 { font-size: clamp(32px, 4.2vw, 56px); }
.apx-hero--t2 h1 { font-size: clamp(28px, 3vw, 42px); }
.apx-hero--t3 h1 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; }
.apx-hero--t4 h1 { font-size: clamp(22px, 2vw, 28px); line-height: 1.18; letter-spacing: -.01em; }
.apx-hero--t3 h1, .apx-hero--t4 h1 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
@media (max-width: 767px) {
  .apx-hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .apx-hero--t2 h1 { font-size: 26px; }
  .apx-hero--t3 h1 { font-size: 22px; }
  .apx-hero--t4 h1 { font-size: 20px; }
}
.apx-hero__line { margin: 8px 0 0; font-size: 15px; color: var(--color-on-dark-soft); }
.apx-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; font-size: 14px; color: var(--color-on-dark-soft); }
.apx-hero__meta i { font-style: normal; opacity: .6; }
.apx-hero__loc { display: inline-flex; align-items: center; gap: 4px; }
.apx-hero__loc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.apx-chips { margin-top: 12px; }
/* Next show, on the cover */
.apx-next { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .95); color: var(--apx-ink); font-size: 13px; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); transition: transform var(--dur-fast) var(--ease); }
.apx-next:hover { transform: translateY(-1px); }
.apx-next strong { font-weight: 700; color: var(--color-link-hover); }
.apx-next span:last-child { color: var(--color-text-muted); }
.apx-next__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.apx-next__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(229, 72, 77, .35); animation: apx-pulse 1.8s var(--ease) infinite; }
@keyframes apx-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .apx-next__dot::after { animation: none; } }
.apx-chips .ap-hchip { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14); color: #fff; }
.apx-chips .ap-hchip small { color: var(--color-on-dark-muted); }
.apx-chips button.ap-hchip:hover, .apx-chips button.ap-hchip.is-on { border-color: #fff; background: #fff; color: var(--color-link-hover); }
.apx-chips button.ap-hchip:hover small, .apx-chips button.ap-hchip.is-on small { color: var(--color-link-hover); }
.apx-hero__act { display: flex; flex: none; align-items: center; gap: 10px; }
/* By the banner's own width, not the screen's (#179): when it's not wide enough for photo · name · buttons in one row,
   the photo (or an event's date card) stays on the left, lined up with the name and the buttons under it — the buttons
   never squeeze the name. Only narrow banners (phones) stack everything in the middle (the max-width: 767px rules). */
.apx-hero { container-type: inline-size; }
@container (min-width: 601px) and (max-width: 1000px) {
  /* the picture (photo, artwork, date card) beside the text, centred on it; the buttons under the text when there are any */
  .apx-hero__in { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; row-gap: 18px; align-items: center; padding: 40px 32px 60px; text-align: left; }
  .apx-hero__in:has(> .apx-hero__act) > :first-child { grid-row: 1 / span 2; align-self: center; }
  .apx-hero__in:has(> .apx-hero__act) > .apx-hero__who { align-self: end; }
  .apx-hero__in > .apx-hero__act { align-self: start; justify-content: flex-start; }
  .apx-hero__in :is(.apx-hero__kicker, .apx-hero__meta, .apx-chips, .evp-by) { justify-content: flex-start; }
  /* the text sits mid-cover here, not at its foot: darker through the middle */
  .apx-hero__bg::after { background: linear-gradient(180deg, rgba(8, 22, 23, .3), rgba(8, 22, 23, .6) 45%, rgba(8, 22, 23, .9)), linear-gradient(90deg, rgb(var(--teal-900-rgb) / .6), rgb(var(--teal-900-rgb) / .15) 70%); }
}
/* A narrow cover (a phone, or a small window): everything stacked and centred — decided by the cover's own width, never
   half by the screen and half by the cover (that mix broke the event cover at ~760px, #180) */
@container (max-width: 600px) {
  .apx-hero__in { flex-direction: column; align-items: center; gap: 14px; padding: 62px var(--gutter, 16px) 60px; text-align: center; }
  .apx-hero__in :is(.apx-hero__kicker, .apx-hero__meta, .apx-chips, .evp-by) { justify-content: center; }
  .apx-hero__act { flex-wrap: nowrap; justify-content: center; gap: 8px; }
}
.apx-l-short { display: none; }
@media (max-width: 767px) { .apx-l-short { display: inline; } }
.apx-play { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgb(var(--teal-500-rgb) / .4); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.apx-play:hover { background: var(--color-primary-strong); transform: translateY(-1px); }
.apx-play svg { width: 20px; height: 20px; fill: currentColor; }
.apx-play--sm { height: 42px; padding: 0 20px 0 14px; font-size: 14px; }
.apx-play--icon { width: 42px; height: 42px; padding: 0; justify-content: center; box-shadow: none; }
.apx-play--icon svg { width: 18px; height: 18px; margin-left: 2px; }
/* Hero buttons: Play teal, Enquire white, Follow outlined white — all pills of one height */
.apx-hero .apx-btn, .apx-hero .apx-btn.btn--primary, .apx-hero .apx-btn.btn--ghost { height: 50px; padding: 0 24px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600; }
.apx-hero .apx-btn:hover { background: rgba(255, 255, 255, .22); }
.apx-hero .apx-btn.apx-btn--solid { border-color: #fff; background: #fff; color: var(--apx-ink); }
.apx-hero .apx-btn.apx-btn--solid:hover { background: var(--teal-50); }
.apx-hero .apx-btn.is-following { border-color: rgba(255, 255, 255, .45); color: var(--color-on-dark-soft); }
/* Cover video: silent, looping, filling the hero like the photo (larger than the frame so YouTube's edges stay hidden) */
.apx-hero__video { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 900ms var(--ease); container-type: size; pointer-events: none; }
.apx-hero__video.is-on { opacity: 1; }
.apx-hero__video iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; transform: translate(-50%, -50%) scale(1.2); }
.apx-vidbtn { position: absolute; top: 18px; left: 18px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgb(var(--teal-950-rgb) / .45); color: #fff; cursor: pointer; }
.apx-vidbtn:hover { background: rgb(var(--teal-950-rgb) / .7); }
.apx-vidbtn svg { width: 15px; height: 15px; fill: currentColor; }
.apx-round { display: grid; place-items: center; width: 50px; height: 50px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.apx-round:hover { background: rgba(255, 255, 255, .22); }
.apx-round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Numbers: a white strip over the hero's foot */
.apx-stats { position: relative; container-type: inline-size; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: -38px clamp(12px, 3vw, 36px) 0; padding: 16px 6px; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 14px 36px rgb(var(--teal-950-rgb) / .12); }
.apx-stat { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 12px; }
.apx-stat + .apx-stat { border-left: 1px solid #edf1f1; }
.apx-stat__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); }
.apx-stat__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.apx-stat strong { display: block; font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--color-text); }
.apx-stat small { display: block; font-size: 13px; color: var(--color-text-muted); }
/* One row always; each number stacks (icon over figure) once its share of the strip gets narrow — by the strip's own
   width and how many numbers it holds, not the screen (#180) */
@container (max-width: 780px) { .apx-stat:nth-last-child(n+5), .apx-stat:nth-last-child(n+5) ~ .apx-stat { flex-direction: column; gap: 4px; padding: 0 2px; text-align: center; } }
@container (max-width: 620px) { .apx-stat:nth-last-child(n+4), .apx-stat:nth-last-child(n+4) ~ .apx-stat { flex-direction: column; gap: 4px; padding: 0 2px; text-align: center; } }
@container (max-width: 470px) {
  .apx-stat { flex-direction: column; gap: 4px; padding: 0 2px; text-align: center; }
  .apx-stat__ic { width: 28px; height: 28px; }
  .apx-stat__ic svg { width: 15px; height: 15px; }
  .apx-stat strong { font-size: 16px; }
  .apx-stat small { font-size: 11px; }
}
/* Their links on the cover, top right (up to five, their order): each mark in its own colour on a white disc (#179) */
.apx-social { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; gap: 8px; }
.apx-social a, .apx-social__share { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--b, var(--color-text)); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.apx-social__share { padding: 0; border: 0; color: var(--color-text); cursor: pointer; }   /* Share, when it is the only action (an ended event, #180) */
.apx-social__share svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.apx-social a:hover, .apx-social__share:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }
.apx-social .pf-ic { width: 18px; height: 18px; color: inherit; }
.apx-social .pf-ic svg { fill: currentColor; stroke: none; }
.apx-social .pf-ic .pf-ic__line { fill: none; stroke: currentColor; stroke-width: 2; }
.apx-social .pf-ic--letter { background: none; color: var(--color-text); font-size: 13px; }
.apx-social .pf-ic--img img { width: 20px; height: 20px; border-radius: 4px; }
/* Links in the hero and the facts: roles, city, skills, genres, languages → the browse pages */
a.apx-hero__loc { color: inherit; text-decoration: none; }
.apx-hero a.apx-hero__loc:hover { color: #fff; text-decoration: underline; }
.apx-chips a.ap-hchip { text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.apx-chips a.ap-hchip:hover { border-color: #fff; background: #fff; color: var(--color-link-hover); }
.apx-chips a.ap-hchip:hover small { color: var(--color-link-hover); }
.pgp-chips .apx-chip, .pl__tags .apx-chip { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--tg-50); color: var(--color-text); font-size: 13px; text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pgp-chips .apx-chip:hover, .pl__tags .apx-chip:hover { background: var(--color-primary); color: #fff; }
.apx-fact__v a { color: var(--color-link-hover); text-decoration: none; }
.apx-fact__v a svg { display: none; }
.apx-fact__v a:hover { text-decoration: underline; }
/* Sticky: the slim bar (once the hero is gone) and the section links */
.apx-sticky { position: sticky; top: var(--header-height); z-index: 6; margin: 0; background: var(--color-bg); }
.apx-sticky-mark { height: 1px; margin-top: 25px; }                         /* where the bar pins (social.js stickyBar) */
.apx-bar { display: flex; align-items: center; gap: 12px; max-height: 0; overflow: hidden; opacity: 0; border-bottom: 1px solid transparent; transition: max-height var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), padding var(--dur-med) var(--ease); }
.apx-sticky.is-stuck .apx-bar { max-height: 64px; padding: 10px 0; opacity: 1; border-bottom-color: var(--teal-150); }
/* Pinned (Rohit): a light teal band, the full width of the page (the colour runs past the column on both sides),
   a teal hairline and a soft shadow under it — so it reads as something sitting on top of the page */
.apx-sticky.is-stuck { background: var(--teal-50); }
.apx-sticky.is-stuck::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; background: var(--teal-50); }
.apx-sticky.is-stuck::after { content: ""; position: absolute; right: -100vmax; bottom: -1px; left: -100vmax; height: 1px; background: var(--teal-150); box-shadow: 0 6px 14px rgb(var(--teal-900-rgb) / .12); }
.app-page:has(> .apx), .app-page:has(.apx-sticky) { overflow-x: clip; }       /* the band runs to the page's edges, never past them */
.apx-bar__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apx-sticky.is-stuck .apx-nav a.is-on { background: #fff; box-shadow: 0 1px 3px rgb(var(--teal-900-rgb) / .12); }
.apx-sticky.is-stuck .apx-nav a:not(.is-on):hover { background: rgba(255, 255, 255, .6); }
.apx-bar__av { flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: var(--color-primary-soft); }
.apx-bar__av img { width: 100%; height: 100%; object-fit: cover; }
.apx-bar__who { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
/* #313 (phone review): this was inline-flex, where the name is an anonymous flex item and text-overflow does nothing —
   so a long title was sliced mid-letter against the buttons with no "…". A block box ellipsises it properly, and the
   tick, being inline, rides along at the end. One rule, and it covers the bar on songs, albums, events and contests. */
.apx-bar__who strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.apx-bar__who .apx-ver { margin-left: 5px; }
.apx-bar__who .apx-ver svg { width: 15px; height: 15px; vertical-align: -2px; }
.apx-bar__who small { font-size: 13px; color: var(--color-text-subtle); }
.apx-bar__act { display: flex; flex: none; align-items: center; gap: 8px; }
/* The bar's buttons: one shape — pills, 36px — Play filled, Enquire and Follow outlined */
.apx-bar .apx-pill, .apx-bar .apx-pill.btn--primary, .apx-bar .apx-pill.btn--ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 0; min-height: 0; padding: 0 16px;   /* min-height: Follow is also a .btn (42px) — one pill size in the bar (#229) */  border: 1.5px solid var(--color-primary); border-radius: var(--radius-pill); background: #fff; color: var(--color-link-hover); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.apx-bar .apx-pill:hover { background: var(--color-primary-soft); }
.apx-bar .apx-pill.apx-pill--fill { padding-left: 12px; background: var(--color-primary); color: #fff; }
.apx-bar .apx-pill.apx-pill--fill:hover { background: var(--color-primary-strong); border-color: var(--color-primary-strong); }
.apx-bar .apx-pill svg { width: 16px; height: 16px; fill: currentColor; }
.apx-bar .apx-pill.is-following { border-color: var(--color-control-soft); color: var(--color-text-muted); }
/* Section links */
.apx-nav { display: flex; gap: 6px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.apx-nav::-webkit-scrollbar { display: none; }
.apx-nav a { flex: none; padding: 8px 16px; border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.apx-nav a:hover { color: var(--color-link-hover); }
.apx-nav a.is-on { background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
/* Sections: open, the cards inside carry the white */
.apx-body { display: flex; flex-direction: column; gap: var(--section-gap); margin-top: 18px; }
.apx .apx-sec { padding: 0; border: 0; background: none; border-radius: 0; scroll-margin-top: calc(var(--header-height) + 124px); }
.apx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.apx-head h2 { display: flex; align-items: baseline; margin: 0; font-size: 22px; font-weight: 700; }
/* Separators (Rohit): a hairline between sections, and a short teal mark before each heading */
.apx-body > .apx-sec + .apx-sec, .apx-body > .apx-top + .apx-sec { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
/* two sections side by side (About beside another, var(--teal-600) — events, courses): the same line above and below the pair */
.apx-body > .apx-sec + .sp-duo, .apx-body > .sp-duo + .apx-sec { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
.sp-duo .ev-venue--map { grid-template-columns: minmax(0, 1fr); }     /* the venue beside About: its map under the address */
.apx-head h2::before { content: ""; align-self: center; flex: none; width: 4px; height: 20px; margin-right: 10px; border-radius: 2px; background: var(--color-primary); }
.apx-pop .apx-head h2::before { display: none; }
/* … and the same for the sliders under the page (Worked with, Playlists with) */
.apx .shelves > .shelf { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
.apx .shelf__head h2 { display: flex; align-items: center; }
.apx .shelf__head h2::before { content: ""; flex: none; width: 4px; height: 20px; margin-right: 10px; border-radius: 2px; background: var(--color-primary); }
.apx-head h2 small { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--color-text-subtle); }
.apx-card { padding: 20px 22px; border: 1px solid var(--tg-50); border-radius: var(--radius-lg); background: #fff; }
.apx-kick { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-150); }
.apx-kick svg { width: 15px; height: 15px; fill: currentColor; }
/* Latest release + popular */
.apx-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; scroll-margin-top: calc(var(--header-height) + 66px); }
.apx-top--one { grid-template-columns: minmax(0, 1fr); }
.apx-spot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; min-height: 100%; padding: 24px; overflow: hidden; border-radius: var(--radius-lg); background: var(--teal-900); color: #fff; isolation: isolate; }
.apx-spot__bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(140deg, var(--teal-600), var(--tg-900)); }
.apx-spot__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); filter: blur(38px) saturate(1.4); opacity: .7; }
.apx-spot__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--teal-950-rgb) / .15), rgb(var(--teal-950-rgb) / .7)); }
.apx-spot__art { position: relative; display: grid; place-items: center; width: min(210px, 62%); aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .14); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.apx-spot__art img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.apx-spot__art .pl-art-empty svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 1.6; }
.apx-spot h3 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.15; }
.apx-spot h3 a { color: inherit; text-decoration: none; }
.apx-spot__meta { margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.apx-spot__by { margin: 4px 0 0; font-size: 14px; color: var(--color-on-dark-soft); }
.apx-spot__by a { color: inherit; text-decoration: none; }
.apx-spot__by a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }   /* artist names: underline on hover, as everywhere */
.apx-spot__act { margin-top: 16px; }
.apx-pop .sl-songs { margin: 0; }
/* Music by role */
.apx-tabs { display: flex; gap: 8px; margin: -2px 0 14px; overflow-x: auto; scrollbar-width: none; }
.apx-tab { flex: none; padding: 8px 16px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff; color: var(--color-text-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.apx-tab small { margin-left: 4px; color: var(--color-text-subtle); }
.apx-tab:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.apx-tab.is-on { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.apx-tab.is-on small { color: var(--color-on-dark-soft); }
.apx .apx-pane[hidden] { display: none; }
.apx .apx-pane .ap-role__head { margin-bottom: 6px; }
/* Bands & pages */
/* Part of: the page's picture big, what it is, name (@username), then their part (Owner or the role) */
.apx-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.apx-org { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--tg-50); border-radius: var(--radius-lg); background: #fff; color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
a.apx-org:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.apx-org__pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); color: #fff; font-size: 54px; font-weight: 700; }
.apx-org__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
a.apx-org:hover .apx-org__pic img { transform: scale(1.05); }
.apx-org__body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; min-width: 0; }
.apx-org__cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-link-hover); }
.apx-org__name, .apx-org__handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apx-org__name { font-size: 15px; line-height: 1.3; }
.apx-org__handle { margin-top: -2px; font-size: 13px; color: var(--color-text-subtle); }
.apx-org__role { align-self: flex-start; max-width: 100%; margin-top: 6px; padding: 3px 10px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* About */
.apx-about { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.apx-about--one { grid-template-columns: minmax(0, 1fr); }
.apx-bio .pgp-bio { margin: 0; font-size: 14px; line-height: 1.7; color: var(--tg-800); overflow-wrap: anywhere; }   /* long text is 14px everywhere — About, song descriptions (#235) */
.apx-fact__v { margin: 0; font-size: 14px; }
/* Events: cards, Upcoming | Past, "Load more" under them */
.apx .apx-evgrid { margin-top: 0; }
.apx-evgrid--past .ev-card__art img, .apx-evgrid--past img { filter: saturate(.75); }
.apx-evmore { display: flex; justify-content: flex-start; margin-top: 18px; }   /* Load More: at the left, under its list — the site's one place for it (#247) */
/* Enquire form */
.apx-enq .sf-grid { margin-top: 4px; }
.apx-enq__who { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid #edf1f1; }
.apx-enq__otp { font-size: 22px; letter-spacing: .4em; }
.apx-enq__note { align-self: center; margin: 0; font-size: 13px; }
.apx-enq__resend { margin: 10px 0 0; text-align: center; font-size: 14px; }
/* The SMS didn't come: the code by email instead (#174) */
.apx-enq__alt { margin: 6px 0 0; text-align: center; font-size: 14px; }
.apx-enq__alt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-top: 10px; text-align: left; }
.apx-enq__alt-row .btn { margin-top: 6px; }
/* Share card */
.apx-share-card { max-width: 440px; }
.apx-share { display: flex; flex-direction: column; gap: 16px; }
.apx-share__card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 16px 16px; overflow: hidden; border: 1px solid var(--tg-50); border-radius: var(--radius-lg); background: #fff; text-align: center; }
.apx-share__cover { align-self: stretch; height: 110px; margin: 0 -16px; background: linear-gradient(120deg, var(--teal-500) 0%, var(--teal-600) 60%, var(--teal-900) 100%); }
.apx-share__cover img { width: 100%; height: 100%; object-fit: cover; }
.apx-share__av { width: 84px; height: 84px; margin-top: -42px; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: var(--color-primary-soft); box-shadow: var(--shadow-md); }
.apx-share__av img { width: 100%; height: 100%; object-fit: cover; }
.apx-share__av--sq { border-radius: 16px; }
.apx-share__card strong { margin-top: 8px; font-size: 18px; color: var(--color-text); }
.apx-share__card small { font-size: 13px; color: var(--color-text-muted); }
.apx-share__brand { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-link-hover); }
.apx-share__link { display: flex; gap: 8px; }
.apx-share__link input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--color-control); border-radius: var(--radius-md); background: var(--color-surface-muted); font: inherit; font-size: 14px; color: var(--color-text); }
.apx-share__link .btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; }
.apx-share__link .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.apx-share__apps { display: flex; justify-content: center; gap: 14px; }
.apx-share__apps a, .apx-share__apps button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; }
.apx-share__apps span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.apx-share__apps a:hover span, .apx-share__apps button:hover span { background: var(--color-primary); color: #fff; }
.apx-share__apps svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.apx-share__apps svg.f, .apx-share__apps .pf-ic svg { fill: currentColor; stroke: none; }
.apx-share__apps .pf-ic { width: 20px; height: 20px; color: inherit; }
.apx-share__apps svg circle { fill: currentColor; }
/* Every profile kind in the shared layout (#150): a page's photo is a rounded square; "followed by" and the open
   badge read on the dark cover; people (members, following) as cards with a round photo; the enquiry band */
.apx-hero__av--sq, .apx-bar__av--sq { border-radius: 22%; }
.apx-hero__av--sq { border-radius: 26px; }
.apx-fby { margin-top: 12px; color: var(--color-on-dark-soft); }
.apx-fby a { color: #fff; }
.apx-fby .followed-by__faces img { border-color: rgba(255, 255, 255, .9); }
.apx-hero .pgp-open { background: rgba(255, 255, 255, .16); color: #fff; }
.apx-hero .pgp-open.is-open { background: var(--ok); color: #fff; }   /* #310: white on the status green (5.6:1; the lighter green was 2.7:1) */
.apx-sub { display: flex; align-items: baseline; gap: 6px; margin: 22px 0 12px; font-size: 16px; font-weight: 700; }
.apx-sub small { font-size: 13px; font-weight: 500; color: var(--color-text-subtle); }
.apx-pop .apx-sub { margin: 0; }
.apx-orgs--people { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.apx-org--person { align-items: center; text-align: center; }
.apx-org--person .apx-org__pic { width: calc(100% - 44px); margin: 18px auto 0; border-radius: 50%; font-size: 40px; }
.apx-org--person .apx-org__pic--sq { border-radius: 22%; }
.apx-org--person .apx-org__body { align-items: center; width: 100%; }
.apx-org--person .apx-org__role { align-self: center; }
.apx-orgs--former .apx-org { opacity: .72; }
.apx-visit .pgp-hours h3, .apx-visit .pgp-where h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
/* Visit in one card (var(--tg-800)): the hours, then the address and map beside them past a thin line, as About's two halves */
.apx-card.apx-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.apx-visit > .pgp-hours { padding-right: 28px; }
.apx-visit > .pgp-where { padding-left: 28px; border-left: 1px solid var(--card-border); }
.apx-visit--one { grid-template-columns: minmax(0, 1fr); }
.apx-visit--one > .pgp-hours, .apx-visit--one > .pgp-where { padding: 0; border: 0; }
@container (max-width: 760px) {
  .apx-card.apx-visit { grid-template-columns: minmax(0, 1fr); }
  .apx-visit > .pgp-hours { padding: 0 0 18px; }
  .apx-visit > .pgp-where { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--card-border); }
}
.apx-visit h3 svg { width: 18px; height: 18px; fill: none; stroke: var(--color-primary-strong); stroke-width: 2; }
.apx .apx-card .pgp-songs, .apx .apx-card .pgp-facts { margin: 0; }
.apx .pgp-offs { margin: 0; }
.apx-facts .pgp-managed { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.apx-facts .pgp-managed small { display: block; font-size: 13px; color: var(--color-text-subtle); }
/* Management · Label (#210): one under the other; the tick once they confirmed, as Work Experience's */
.apx-facts .pgp-managed + .pgp-managed { margin-top: 10px; }
.apx-facts .ap-fact .pgp-managed { display: flex; width: fit-content; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: none; }   /* light rows, as the other facts */
.apx-facts a.pgp-managed:hover strong { color: var(--color-link-hover); }
/* Managed By · Signed To (var(--tg-800)): the page's verified tick, and Exclusive as a small badge */
.pgp-ver { display: inline-flex; margin-left: 5px; vertical-align: -2px; }
.pgp-ver svg { width: 15px; height: 15px; }
.apx-facts .pgp-facts + .ap-fact { margin-top: var(--space-4); }
/* "Interested in …? Enquire" at the foot of the sections */
.apx-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--teal-400) 0%, var(--teal-600) 60%, var(--teal-700) 100%); color: #fff; }
.apx-cta strong { display: block; font-size: 19px; }
.apx-cta span { font-size: 14px; color: var(--color-on-dark-soft); }
.apx-cta .apx-cta__btn { height: 46px; padding: 0 26px; border: 0; border-radius: var(--radius-pill); background: #fff; color: var(--apx-ink); font-weight: 700; }
.apx-cta .apx-cta__btn:hover { background: var(--teal-50); }
/* "Is this you? Claim this profile" (var(--teal-600)): last in the body of a credited name or a managed artist, before Similar (#190) */
.apx-claim { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 22px; border: 1px solid var(--teal-150); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--teal-50), #f8fcfc); }
.apx-claim > svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: #fff; fill: none; stroke: var(--color-primary-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 2px 6px rgb(var(--teal-900-rgb) / .08); }
.apx-claim > div { flex: 1 1 260px; min-width: 0; }
.apx-claim strong { font-size: 15px; font-weight: 600; }
.apx-claim p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.55; }
.apx-claim__sent { padding: 7px 14px; border-radius: var(--radius-pill); background: #fff; color: var(--color-link-hover); font-size: 13px; font-weight: 600; }
.apx-claimform { display: flex; flex-direction: column; gap: 14px; }
.apx-claimform .field:not(.field--area) .field__input { padding-left: 14px; }
.apx-claimform .field__label { left: 14px; }
/* What's yours (#190): Everything | Only Some, then the albums and songs to tick */
.apx-cpick { display: flex; flex-direction: column; gap: 8px; }
.apx-cpick__k { font-size: 13px; font-weight: 600; color: var(--color-text); }
.apx-cpick__seg { display: flex; }
.apx-cpick__seg .seg__opt { flex: 1; }
.apx-cpick__box { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.apx-cpick__q { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--color-control); border-radius: var(--radius-sm); font: inherit; font-size: 14px; }
.apx-cpick__q:focus { border-color: var(--color-primary); outline: none; }
.apx-cpick__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.apx-cpick__bar small { color: var(--color-text-subtle); font-size: 13px; }
.apx-cpick__all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.apx-cpick__ul { max-height: 260px; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.apx-cpick__h { padding: 8px 4px 4px; color: var(--color-text-subtle); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.apx-cpick__row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; cursor: pointer; }
.apx-cpick__row:hover { background: #f5fafa; }
.apx-cpick input[type="checkbox"] { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--color-primary); }
.apx-cpick__art { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 8px; background: var(--teal-50); }
.apx-cpick__art svg { width: 18px; height: 18px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; }
.apx-cpick__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.apx-cpick__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.apx-cpick__t strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.apx-cpick__t small { overflow: hidden; color: var(--color-text-subtle); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.apx-cpick .field__error { display: none; color: var(--color-danger, #d64545); font-size: 13px; }
.apx-cpick.is-invalid .field__error { display: block; }
.apx-cpick.is-invalid .apx-cpick__box { border-color: var(--color-danger, #d64545); }
/* Empty, with an invitation (your own page) */
.apx-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 24px; border: 1.5px dashed var(--teal-150); border-radius: var(--radius-lg); background: var(--surface-hover); }
.apx-empty > svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--color-primary); stroke-width: 1.8; }
.apx-empty > div { flex: 1; min-width: 220px; }
.apx-empty strong { font-size: 15px; }
.apx-empty p { margin: 2px 0 0; font-size: 14px; color: var(--color-text-muted); }

/* Similar artists / pages: the carousel — the middle one big, the sides smaller and fading, moving by itself */
.cf { position: relative; margin: var(--section-gap) 0 0; padding: 22px 0 16px; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(70% 90% at 50% 40%, #ffffff 0%, var(--teal-50) 55%, var(--teal-100) 100%); text-align: center; }
.cf__word { position: absolute; top: 46%; left: 50%; margin: 0; transform: translate(-50%, -50%); font-size: clamp(48px, 8.5vw, 124px); font-weight: 800; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgb(var(--teal-500-rgb) / .16); pointer-events: none; }
.cf__title { position: relative; margin: 0; font-size: 21px; font-weight: 700; }
.cf__stage { position: relative; height: clamp(168px, 17vw, 218px); margin-top: 4px; }
.cf__item { position: absolute; top: 50%; left: 50%; width: clamp(112px, 12vw, 162px); aspect-ratio: 1; transition: transform 700ms var(--ease), opacity 700ms var(--ease); will-change: transform; }
.cf__pic { display: block; width: 100%; height: 100%; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: var(--color-primary-soft); box-shadow: 0 10px 26px rgb(var(--teal-950-rgb) / .16); transition: box-shadow 700ms var(--ease), border-color 700ms var(--ease); }
.cf__pic--sq { border-radius: 22%; }
/* The middle one, on hover: the home page's artist-card overlay (shelves.css .cx) — radio in the middle, Follow under it */
.cf__item:not(.is-center) .cx { display: none; }
.cf__item.is-center:hover .cx__play, .cf__item.is-center:focus-within .cx__play { opacity: 1; transform: none; }
.cf__item.is-center:hover .cx__follow, .cf__item.is-center:focus-within .cx__follow { opacity: 1; transform: translate(-50%, 0); }
.cf .cx__follow { bottom: 9%; }
.cf__pic img { width: 100%; height: 100%; object-fit: cover; }
.cf__item.is-center .cf__pic { border-color: var(--color-primary); box-shadow: 0 0 0 8px rgb(var(--teal-500-rgb) / .16), 0 22px 44px rgb(var(--teal-950-rgb) / .25); }
.cf__arrow { position: absolute; top: 50%; z-index: 30; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%; background: #fff; color: var(--color-text); box-shadow: var(--shadow-md); cursor: pointer; }
.cf__arrow:hover { color: var(--color-link-hover); }
.cf__arrow--l { left: 16px; }
.cf__arrow--r { right: 16px; }
.cf__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.cf__focus { position: relative; min-height: 46px; margin-top: 2px; }
.cf__name { font-size: 18px; font-weight: 700; color: var(--color-text); text-decoration: none; }
.cf__name:hover { color: var(--color-link-hover); }
.cf__sub { margin: 2px 0 0; font-size: 14px; color: var(--color-text-muted); }
.cf__act { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.cf__dots { position: relative; display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.cf__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--teal-200); cursor: pointer; transition: width var(--dur-med) var(--ease), background-color var(--dur-med) var(--ease); }
.cf__dots button.is-on { width: 22px; background: var(--color-primary); }
.apx [data-apx-similar] { scroll-margin-top: calc(var(--header-height) + 66px); }
.apx .shelves { margin-top: var(--section-gap); }

@media (max-width: 1023px) {
  .apx-top, .apx-about { grid-template-columns: minmax(0, 1fr); }
  .apx-spot { flex-direction: row; align-items: center; }
  .apx-spot__art { width: 150px; flex: none; }
}
@media (max-width: 767px) {
  .apx-hero { border-radius: 0; margin: 0 calc(-1 * var(--gutter)); }
  /* The cover runs edge to edge and up to the header (the page's top padding is taken back) */
  .apx-hero { margin-top: calc(-1 * var(--space-5)); }
  /* Compact buttons, short labels */
  .apx-hero .apx-btn, .apx-hero .apx-btn.btn--primary, .apx-hero .apx-btn.btn--ghost, .apx-hero .apx-play { height: 40px; padding: 0 16px; font-size: 14px; }
  .apx-hero .apx-play { padding-left: 12px; gap: 6px; box-shadow: 0 6px 16px rgb(var(--teal-500-rgb) / .35); }
  .apx-hero .apx-play svg { width: 16px; height: 16px; }
  .apx-round { width: 40px; height: 40px; flex: none; }
  .apx-round svg { width: 18px; height: 18px; }
  .apx-l-full { display: none; }
  .apx-bar [data-apx-enquire] { display: none; }
  .apx-social { top: 12px; right: 12px; }
  /* The numbers in one slim row (up to five) */
  .apx-stats { margin: -30px 0 0; padding: 10px 2px; }
  .apx-spot { flex-direction: column; align-items: flex-start; }
  .apx-spot__art { width: 64%; }
  .apx-card { padding: 16px; }
  .cf__arrow { display: none; }
}
/* The similar carousel keeps its layers to itself: its arrows and pictures never paint over the slim bar */
.cf { isolation: isolate; }

/* The ⋯ beside the heart on a song in any list (app.songMore): the one song menu */
.list-more { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-control-icon); cursor: pointer; transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.list-more svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.list-more:hover, .list-more[aria-expanded="true"] { background: var(--color-primary-soft); color: var(--color-link-hover); }
.row-acts { display: flex; align-items: center; justify-content: flex-end; }   /* heart + ⋯ as one cell of a row's grid */
/* Same rule as every song list: the heart always shows; ⋯ on hover / keyboard focus — always on touch screens */
.list-more { opacity: 0; transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
*:hover > .list-more, *:hover > .row-acts > .list-more, *:focus-within > .list-more, *:focus-within > .row-acts > .list-more, .list-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .list-more { opacity: 1; } }
/* Phones and touch screens: every song row's ⋯ always shows (some rows went by width, some by hover — now both) */
@media (max-width: 767px) { .list-more, .chart__more, .sp-song__btn, .srow__btn, .mpq__more { opacity: 1; } }
@media (hover: none) { .chart__more, .sp-song__btn, .srow__btn { opacity: 1; } }

/* A dialog that only asks how to reach you (Talk to Our Team, Request a Call Back): the fields one under the other (#180) */
.ap-ask .apx-enq__who { grid-template-columns: minmax(0, 1fr); }
.ap-ask .apx-enq__who > [data-field="name"] { order: -3; }
.ap-ask .apx-enq__who > [data-field="phone"] { order: -2; }
.ap-ask .apx-enq__who > .apx-enq__note { order: -1; margin-top: -6px; }
/* Signed in (no name field): the mobile number first, then the optional email (#180) */
.apx-enq__who:not(:has(> [data-field="name"])) > [data-field="phone"] { order: -1; }

/* ---- The profile, final (#230) -------------------------------------------------------------------------------------
   Popular / Songs with Videos: the home page's videos block (home.css .vids) inside the section — the section's own heading */
.apx-vids { margin: 0; }
.apx-vids > .shelf__head { display: none; }
.apx-vids .vids { height: 380px; }
.vrow__role { color: var(--color-on-dark-subtle); }
@media (max-width: 767px) { .apx-vids .vids { height: auto; } }   /* phones: the picture on top, the list under it (home.css) */
/* One video only: the video alone, across the block — no list beside it */
.vids--one { grid-template-columns: minmax(0, 1fr); }
.vids--one .vids__list { display: none; }
.vids--one .vids__shade { background: linear-gradient(0deg, rgb(var(--teal-950-rgb) / .75), transparent 55%); }
.vids--one .vids__watch { left: calc(50% - 34px); }
.vids--one .vids__now { max-width: calc(100% - 48px); }
/* Load More at the end of the list (#230): the rows join the same list, which scrolls */
.vids__more { display: flex; justify-content: flex-start; padding: 10px 0 22px; list-style: none; }   /* clear of the list's fade at the foot */
.vids__more .btn { border-color: rgba(255, 255, 255, .35); background: transparent; color: #fff; }
.vids__more .btn:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* Their intro (#236, locked): the headline in a soft-teal tray tucked under the numbers card — narrower, its top hidden
   beneath the card, a soft shadow — centred italic in teal quote marks; no "Intro" label (the quotes say it) */
.apx-stats { z-index: 2; }
.apx-intro { position: relative; z-index: 1; margin: -14px clamp(28px, 7vw, 96px) 0; padding: 28px clamp(16px, 3vw, 28px) 16px; border: 1px solid var(--card-border); border-top: 0;
  border-radius: 0 0 18px 18px; background: var(--card-tint); box-shadow: 0 12px 26px -14px rgb(var(--teal-900-rgb) / .22); color: var(--tg-800); text-align: center; overflow-wrap: anywhere; }
.apx-intro p { margin: 0; font-size: 15px; font-style: italic; line-height: 1.55; }
.apx-intro p::before { content: "\201C"; margin-right: 2px; color: var(--color-link); font-style: normal; font-weight: 700; }
.apx-intro p::after { content: "\201D"; margin-left: 2px; color: var(--color-link); font-style: normal; font-weight: 700; }

/* The filter chips in a list's card (#230 — All Music, All Work, Events): small and light, one row that scrolls
   sideways; ▶ for the list as filtered sits at the end of the row */
.apx-lbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.apx-filters { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.apx-filters::-webkit-scrollbar { display: none; }
.apx-filters--top { margin: -2px 0 14px; }
.apx-filter { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill);
  background: #fff; color: var(--color-text-muted); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.apx-filter small { font-size: 12px; color: var(--color-text-subtle); }
.apx-filter:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.apx-filter.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.apx-filter.is-on small { color: var(--color-link-hover); }
.apx-lbar__play { flex: none; width: 38px; height: 38px; }
.apx-lcard .ap-all { margin-top: 10px; }

/* All Work's rows (#230): a small video picture (opens our video player), the song, its artists, their roles; the time
   and ▶ (plays the song) on the right */
.apx-wlist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.apx-wrow { gap: 14px; padding: 8px 10px 8px 8px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; }
.apx-wrow:hover { background: var(--card-tint); }
.apx-wrow__th { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); cursor: pointer; }
.apx-wrow__th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.apx-wrow__th:hover img, .apx-wrow__th:focus-visible img { transform: scale(1.05); }
.apx-wrow__yt { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--color-link-hover); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.apx-wrow__yt svg { width: 13px; height: 13px; margin-left: 2px; fill: currentColor; }
.apx-wrow__play { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }   /* light teal in the list (#232): the solid one is the list's own ▶ */
.apx-wrow__play:hover, .apx-wrow.is-playing .apx-wrow__play { background: var(--color-primary); color: #fff; }
.apx-wrow__play svg { width: 15px; height: 15px; fill: currentColor; }
.apx-wrow__play svg:first-child { margin-left: 2px; }
.apx-wrow__play svg + svg, .apx-wrow.is-playing .apx-wrow__play svg:first-child { display: none; }
.apx-wrow.is-playing .apx-wrow__play svg + svg { display: block; }
.apx-wrow.is-current .sl-song__info strong { color: var(--color-link-hover); }
.apx-wrow .rc { white-space: nowrap; }
/* Phones: the row itself plays the song (as every song row) — no separate ▶; a smaller picture leaves the title room */
@media (max-width: 480px) { .apx-wrow__th { width: 84px; } .apx-wrow { gap: 10px; } .apx-wrow__play { display: none; } }
.apx-lcard .apx-evmore { margin-top: 12px; }

/* The latest release's Watch (#229): beside its Play, outlined on the dark card */
.apx-spot__act { display: flex; flex-wrap: wrap; gap: 10px; }
.apx-play--line { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.apx-play--line:hover { background: rgba(255, 255, 255, .12); }
.apx-play--line svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The list cards (#232): All Music's card is also an .ap-role (its Load More, its chips) — keep the card's own padding and edge */
.apx-card.apx-lcard.ap-role { padding: 20px 22px; border: 1px solid var(--card-border); }
@media (max-width: 767px) { .apx-card.apx-lcard.ap-role { padding: 16px; } }
.apx-wrow .sl-heart { flex: none; }
/* About in one card (#232): the bio, then the facts beside it past a thin line; under each other where the card is narrow */
.apx-aboutw { container-type: inline-size; }
.apx-about1 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0; }
.apx-about1--one { grid-template-columns: minmax(0, 1fr); }
.apx-about1 .apx-bio { padding-right: 28px; }
.apx-about1 .apx-bio .pgp-bio { margin: 0; }
.apx-about1__facts { padding-left: 28px; border-left: 1px solid var(--card-border); }
.apx-about1--one .apx-bio, .apx-about1--one .apx-about1__facts { padding: 0; border: 0; }
.apx-about1__facts > .ap-fact:first-child { margin-top: 0; }
@container (max-width: 760px) {
  .apx-about1 { grid-template-columns: minmax(0, 1fr); }
  .apx-about1 .apx-bio { padding: 0 0 18px; }
  .apx-about1__facts { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--card-border); }
}
/* Following's chips (#249): the list cards' filter chips, above the cards, no ▶ */
.apx-fchips { margin-bottom: 16px; }
.apx-fchips .apx-lbar { margin: 0; padding: 0; border: 0; }

/* One small chip for facts about a link (#252): Confirmed (the page or person said yes), Exclusive. The tick by a name is
   only ever a verified profile */
.apx-tag { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-weight: 600; font-style: normal; line-height: 18px; white-space: nowrap; vertical-align: 1px; }
.apx-tag + .apx-tag { margin-left: 4px; }
/* Part Of (#252): the role is the line under the name — dark, not muted; the kind of page a small label on the photo */
.apx-partof .sh-card > small, .apx-roles .sh-card > small { color: var(--color-text); font-weight: 500; }   /* Members, Lineup too */
.apx-partof .sh-card__badge { top: 8px; left: 8px; right: auto; }
.apx-ptype { display: inline-flex; padding: 2px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .94); color: var(--color-text); font-size: 11px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
/* Confirmed · Exclusive on a line of their own, under @username · years (#253) */
.apx-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.apx-tags .apx-tag { margin-left: 0; }
.pgp-managed span.apx-tags, .pgp-managed span.apx-tags:last-child { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; }   /* one row at the left — not the column pages.css gives a last span (#253) */
.ap-exp__handle { color: var(--color-text-subtle); font-size: 13px; }
/* Roles under a name (#253): each its own link — underlined, teal, on hover — so two roles never read as one */
.apx-role { color: inherit; text-decoration: none; }
.apx-role:hover { color: var(--color-link-hover); text-decoration: underline; }
/* How to Submit a Demo (#258): a short paragraph under the bio in About, past a hairline — the facts' heading style */
.apx-demo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--card-border); }
.apx-bio > .apx-demo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.apx-demo h3 { margin: 0 0 6px; color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.apx-demo p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text); }
/* #309 audit: the carousel dots get the hero dots' 25px tap area behind the 7px dot (#305) */
.cf__dots button { position: relative; }
.cf__dots button::after { content: ""; position: absolute; inset: -9px; }

/* Phones (#313, Rohit's mobile review): in the profile's Popular box the row is narrow — the play count would leave the
   title ~80 px, so the title keeps the width and the count waits for the song page (the strip above has the totals) */
@media (max-width: 480px) { .apx-pop .sl-song__time:has(.sl-song__plays) { display: none; } }

/* ---- studio.css ---- */
/* =====================================================================
   Creator Studio + upload tray (studio.js, uploads.js — decision #85)
   ===================================================================== */
.studio { width: 100%; }
.studio svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.studio svg.f { fill: currentColor; stroke: none; }
.studio-head { margin-bottom: var(--space-5); }
.studio-head h1 { font-size: var(--text-xl); font-weight: 600; }
.studio-head p { margin-top: 4px; font-size: var(--text-sm); color: var(--color-text-muted); }
.studio-head--row { margin-bottom: var(--space-3); }
.studio-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.studio-head--split .btn { display: inline-flex; align-items: center; gap: 6px; }
.studio-head--split .btn svg { width: 16px; height: 16px; }
.studio-back { display: inline-block; margin-bottom: 8px; font-size: 13px; }
.studio-foot { margin-top: var(--space-5); font-size: 13px; text-align: center; color: var(--color-text-muted); }
.studio-card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.studio-start { display: flex; flex-direction: column; gap: var(--space-4); max-width: 520px; }
.studio-start .field__input { padding-left: 14px; }
.studio-start .field__label { left: 14px; }
.studio-empty { padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-text-muted); }
.studio-empty .rtype__icon { margin: 0 auto var(--space-3); }
.studio-gate { max-width: 440px; margin: var(--space-7) auto; text-align: center; }
.studio-gate__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--space-4); border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); }
.studio-gate h1 { font-size: var(--text-xl); font-weight: 600; }
.studio-gate p { margin: 8px 0 var(--space-5); color: var(--color-text-muted); }

/* ---- Release types (2023 "Choose a Release Type") ---------------------------------- */
.rtypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 1280px) { .rtypes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* four equal cards in a row, or 2 × 2 */
@media (max-width: 600px) { .rtypes { grid-template-columns: 1fr; } }
/* Five kinds of page (var(--tg-800)): five in a row on wide screens; 3 + 2 (the two centred) in between — never one card alone */
.rtypes--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rtypes--5 > .rtype { grid-column: span 2; }
.rtypes--5 > .rtype:nth-child(4) { grid-column: 2 / span 2; }
@media (min-width: 1280px) { .rtypes--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .rtypes--5 > .rtype, .rtypes--5 > .rtype:nth-child(4) { grid-column: auto; } }
@media (max-width: 600px) { .rtypes--5 { grid-template-columns: 1fr; } .rtypes--5 > .rtype, .rtypes--5 > .rtype:nth-child(4) { grid-column: auto; } }
.rtype { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--space-6) var(--space-5); border: 1px solid var(--color-control-soft); border-radius: var(--radius-lg); background: #fff; color: var(--color-text); text-align: center; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.rtype:hover { border-color: var(--color-primary); box-shadow: 0 10px 28px rgb(var(--teal-500-rgb) / 0.16); transform: translateY(-3px); }
.rtype strong { font-size: var(--text-md); font-weight: 600; }
.rtype span:last-child { font-size: 13px; color: var(--color-text-muted); }
.rtype__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); }
.rtype__icon svg { width: 28px !important; height: 28px !important; }

/* ---- Drop zones -------------------------------------------------------------------------- */
.sdz { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-7) var(--space-4); border: 2px dashed var(--teal-200); border-radius: var(--radius-lg); background: var(--surface-hover); color: var(--color-text); text-align: center; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.sdz:hover, .sdz:focus-within { border-color: var(--color-primary); }
.sdz.is-over { border-color: var(--color-primary); background: var(--color-primary-soft); transform: scale(1.01); }
.sdz strong { font-size: var(--text-md); font-weight: 600; }
.sdz > span:not(.sdz__icon):not(.sdz__btn) { font-size: 13px; color: var(--color-text-muted); }
.sdz__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: #fff; color: var(--color-link); box-shadow: var(--shadow-sm); }
.sdz.is-over .sdz__icon { animation: sdz-bob 0.8s ease-in-out infinite; }
@keyframes sdz-bob { 50% { transform: translateY(-4px); } }
.sdz__btn { margin-top: 8px; pointer-events: none; }
.sf-sec .sdz { margin-top: var(--space-4); padding: var(--space-5) var(--space-4); }

/* ---- Bulk ----------------------------------------------------------------------------------- */
.bulk-live { display: flex; margin-bottom: var(--space-4); padding: 14px 18px; cursor: pointer; }
.bulk-list { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.bulk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 10px 4px; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.bulk-row__name { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.bulk-row__st { font-size: 12px; color: var(--color-text-muted); }
.bulk-row.is-failed .bulk-row__st { color: var(--color-error-text); }
.bulk-row.is-failed .bulk-row__name { color: var(--color-error-text); }
.bulk-row.is-failed .sf-audio__bar i { background: var(--color-error-text); }   /* a failed file reads as failed in the row too, not only in the tray (var(--teal-600)) */
.bulk-row .sf-audio__bar { grid-column: 1 / -1; }

/* ---- Status pills ------------------------------------------------------------------------- */
.spill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--tg-50); color: var(--color-text-muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.spill--draft { background: #eef1f3; color: #4a5560; }          /* neutral, no amber (#120) */
.spill--scheduled { background: #e5f1f8; color: #1d6a8f; }   /* #304 (Rohit): not purple — a deep sea blue from the teal's family (Live keeps the teal) */
.spill--live { background: var(--color-primary-soft); color: var(--color-link-hover); }
.spill--locked { background: #f3eefe; color: #6b3fb8; }

/* ---- Song editor ---------------------------------------------------------------------------- */
.sf { display: flex; flex-direction: column; gap: var(--space-4); }
.sf-loading .sk { display: block; border-radius: var(--radius-lg); }
.sf-head { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.sf-art { position: relative; flex: none; display: grid; place-items: center; width: 168px; aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px dashed var(--teal-200); border-radius: var(--radius-md); background: var(--surface-hover); color: var(--color-link-hover); cursor: pointer; }
.sf-art:has(img) { border-style: solid; border-color: transparent; box-shadow: var(--shadow-md); }
.sf-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-art:not(:disabled):hover { border-color: var(--color-primary); }
.sf-art:disabled { cursor: default; }
.sf-art__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.sf-art__empty svg { width: 28px; height: 28px; }
.sf-art__note { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(17, 17, 17, 0.6); color: #fff; font-size: 10px; }
.sf-head__main { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-head__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-saved { margin-left: auto; font-size: 12px; color: var(--color-link-hover); }
.sf .field__input { padding-left: 14px; }
.sf .field__label { left: 14px; }
.sf .tagf .field__label { left: 14px; }
.sf-audio { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-surface-muted); font-size: 13px; }
.sf-audio__play { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; cursor: pointer; }
.sf-audio__play svg { width: 16px; height: 16px; }
.sf-audio__info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sf-audio__info strong { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sf-audio__info small { color: var(--color-text-muted); }
.sf-audio__replace { flex: none; font-size: 13px; cursor: pointer; }
.sf-audio__empty { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--color-link-hover); font-weight: 500; cursor: pointer; }
.sf-audio__up { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.sf-audio__name { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sf-audio__up > span:nth-child(2) { font-size: 12px; color: var(--color-text-muted); }
.sf-audio__up.is-failed > span:nth-child(2), .sf-audio__up.is-stalled > span:nth-child(2) { color: var(--color-error-text); }
.sf-audio__up .link { grid-column: 1 / -1; justify-self: start; font-size: 13px; cursor: pointer; }
.sf-audio__bar { grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; border-radius: 4px; background: rgb(var(--teal-500-rgb) / 0.18); }
.sf-audio__bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width 0.3s ease; }
.is-processing .sf-audio__bar i { background: linear-gradient(90deg, var(--color-primary) 0%, var(--teal-200) 50%, var(--color-primary) 100%); background-size: 200% 100%; animation: sf-shimmer 1.2s linear infinite; }
@keyframes sf-shimmer { to { background-position: -200% 0; } }
.sf-tools { display: flex; justify-content: flex-end; }
.sf-tools .link, .sf-addrole { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sf-tools svg, .sf-addrole svg { width: 15px; height: 15px; }
.sf-sec { display: flex; flex-direction: column; gap: 14px; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.sf-sec h3 { font-size: var(--text-md); font-weight: 600; }
.sf-sec h3 small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--color-text-subtle); }
.sf-sec__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 560px) { .sf-sec__bar { flex-wrap: wrap; } .sf-sec__bar [data-al-fixed] { flex-basis: 100%; } }
.sf-hint { font-size: 12px; color: var(--color-text-muted); }
.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sf-row--stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.sf-label { font-size: 13px; font-weight: 500; color: var(--color-text-muted); }
.sf-switch { padding: 4px 0; }
.sf-original { display: flex; flex-direction: column; gap: 14px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-hover); border: 1px solid var(--color-primary-soft); }
.sf-original .orig__card { background: #fff; }
.sf-original[hidden] { display: none; }
.sf-video summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.sf-video summary::-webkit-details-marker { display: none; }
.sf-video summary svg { transition: transform var(--dur-fast) var(--ease); color: var(--color-text-muted); }
.sf-video[open] summary svg { transform: rotate(180deg); }
.sf-video:not([open]) { gap: 0; }
/* <details> doesn't lay its content out as flex in every browser: space the video fields by margin */
.sf-video[open] { display: block; }
.sf-video[open] > :not(summary) { margin-top: 14px; }
.sf-crow.is-set .sf-crow__role { display: none; }
.sf-crow .tagf__hint:empty { display: none; }

/* Segmented choice (version, access) */
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--radius-pill); background: var(--color-surface-muted); }
.seg__opt { padding: 6px 14px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; font-size: 13px; color: var(--color-text-muted); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.seg__opt.is-on { background: #fff; color: var(--color-link-hover); font-weight: 600; box-shadow: var(--shadow-sm); }
.seg__opt:disabled { cursor: default; opacity: 0.6; }
.seg__opt { justify-content: center; }   /* an icon + label option stays centred when the toggle spans the row */
/* Locked (#184, sent to the stores): the field lock at its end */
.seg.is-locked { position: relative; padding-right: 40px; }
.seg.is-locked .seg__opt:disabled { opacity: 1; cursor: not-allowed; }
.seg.is-locked .seg__opt:not(.is-on) { opacity: .55; }

/* ---- The original of a cover / recreation / remix (#184, original.js): search, the linked song's card, by hand ---- */
.orig { display: flex; flex-direction: column; gap: 10px; }
.orig__find { position: relative; }
.orig__find .field__input { padding-left: 14px; padding-right: 44px; }       /* no icon: the same in the editor and the distribution form */
.orig__find .field__label { left: 14px; }
.orig__find:has(.orig__menu:not([hidden])) { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-color: var(--color-primary); }
.orig__menu { position: absolute; top: 100%; left: -1px; right: -1px; z-index: 30; max-height: 330px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none;
  background: #fff; border: 1px solid var(--color-primary); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: 0 8px 18px rgb(var(--teal-500-rgb) / 0.18); }
.orig__opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.orig__opt + .orig__opt { margin-top: 2px; }
.orig__opt.is-active, .orig__opt:hover { background: var(--color-primary-soft); }
.orig__opt--typed { margin-top: 6px !important; padding-top: 10px; border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.orig__art { display: grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.orig__art img { width: 100%; height: 100%; object-fit: cover; }
.orig__art svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.orig__t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.orig__t strong, .orig__t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orig__t strong { font-size: 14px; font-weight: 600; color: var(--color-text); }
.orig__t small { font-size: 12px; color: var(--color-text-muted); }
.orig__src { flex: none; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-style: normal; font-weight: 600; }
.orig__src--muslate { background: var(--color-primary-soft); color: var(--color-link-hover); }
.orig__src--store { background: var(--tg-50); color: var(--color-text-muted); }
.orig__wait { display: flex; align-items: center; gap: 10px; padding: 10px 8px; font-size: 13px; color: var(--color-text-muted); }
.orig__wait .ms-spin, .orig__busy .ms-spin { transform: scale(.75); }
.orig__busy { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 1px dashed var(--color-primary); border-radius: var(--radius-md); background: #fff; font-size: 14px; color: var(--color-link-hover); }
.orig__card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-primary-soft); border-radius: var(--radius-md); background: #fff; }
.orig__card .orig__art { width: 52px; height: 52px; border-radius: 8px; }
.orig__card .orig__t small:first-child { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-link-hover); }
.orig__act { display: flex; align-items: center; gap: 6px; flex: none; }
.orig__ic { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; }
.orig__ic:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.orig__rm:hover { background: var(--danger-soft); color: var(--danger); }
.orig__ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.orig__card .orig__lock { position: relative; top: auto; right: auto; transform: none; }
.orig__cancel { align-self: flex-start; font-size: 13px; }
.orig__manual { display: flex; flex-direction: column; gap: 12px; }
.orig__note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--color-text-muted); }
.orig__note svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
@media (max-width: 560px) { .orig__card { flex-wrap: wrap; } .orig__act { margin-left: auto; } .orig__src { display: none; } }

/* Credit rows */
.sf-credits { display: flex; flex-direction: column; gap: 12px; }
.sf-crow { display: flex; align-items: center; gap: 10px; }
.sf-crow__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); }
.sf-crow__icon svg { width: 18px; height: 18px; }
.sf-crow__field { flex: 1; min-width: 0; }
.sf-crow--extra .sf-crow__role { flex: 0 0 34%; min-width: 0; }
.sf-crow__rm { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--tg-50); color: var(--color-text-muted); cursor: pointer; }
.sf-crow__rm:hover { background: var(--danger-soft); color: var(--color-error); }
.sf-crow__rm svg { width: 14px; height: 14px; }
.sf-addrole { align-self: flex-start; }

/* Publish bar */
.sf-publish { position: sticky; bottom: calc(var(--player-height) + 8px); z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 14px var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.96); box-shadow: 0 -8px 24px rgba(17, 17, 17, 0.06); backdrop-filter: blur(8px); }
body:not(.has-player) .sf-publish { bottom: 8px; }
.sf-miss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.sf-miss strong { margin-right: 4px; font-weight: 600; }
.sf-miss__item { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font: inherit; font-size: 12px; cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); }
.sf-miss:not(.sf-miss--tips) .sf-miss__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-error); }
.sf-miss__item:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.sf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.sf-actions .btn svg { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; }
.sf-delete { margin-right: auto; order: -1; font-size: 13px; }
.sf-schedule { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.sf-schedule[hidden] { display: none; }
.sf-schedule .field { width: min(100%, 260px); }
.sf-schedule .field__input { padding-left: 14px; }
.sf-schedule .field__label { left: 14px; }
.sf-copy { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.sf-copy__parts { display: flex; flex-direction: column; gap: 6px; }
.sf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); }
.sf-check input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.confirm__text:has(.sf-copy), .confirm__text:has(.al-pick) { white-space: normal; text-align: left; }

/* Compact (inside an album track) */
.sf--compact .sf-head { padding: var(--space-4); }
.sf--compact .sf-art { width: 96px; }
.sf--compact .sf-sec { padding: var(--space-4); }

/* ---- Album builder ------------------------------------------------------------------------ */
.al-tracks { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.al-track { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; transition: box-shadow var(--dur-fast) var(--ease); }
.al-track.is-dragging { position: relative; z-index: 2; box-shadow: var(--shadow-md); }
.al-track.is-open { border-color: var(--color-primary); }
.al-track__row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.al-track__grip { display: grid; place-items: center; width: 28px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--color-control-icon); cursor: grab; touch-action: none; }
.al-track__grip svg { width: 16px; height: 16px; }
.al-track__grip:focus-visible, .al-track__grip:hover { color: var(--color-link); background: var(--color-primary-soft); }
.al-track__n { width: 22px; font-size: 13px; text-align: center; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.al-track__open { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 8px; min-width: 0; padding: 6px 4px; border: 0; background: none; text-align: left; cursor: pointer; }
.al-track__open strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.al-track__open small { grid-row: 2; font-size: 12px; color: var(--color-text-muted); }
.al-track.is-incomplete .al-track__open small { color: var(--color-error); }
.al-track__open svg { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease); }
.al-track.is-open .al-track__open svg { transform: rotate(180deg); }
.al-track__rm { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-control-icon); cursor: pointer; }
.al-track__up { flex: none; gap: 6px; cursor: pointer; }
.al-track__up svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .al-track__up { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; } .al-track__up span { display: none; } }
.al-track__rm:hover { background: var(--danger-soft); color: var(--color-error); }
.al-track__rm svg { width: 14px; height: 14px; }
.al-track__form { padding: 0 var(--space-3) var(--space-3); }
.al-track__form[hidden] { display: none; }
.al-pick { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; margin-top: 10px; overflow-y: auto; }
.al-pick__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-md); cursor: pointer; }
.al-pick__item:hover { background: #f4f8f8; }
.al-pick__item input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.al-pick__art { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-link); }
.al-pick__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.al-pick__art svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.al-pick__item span:last-child { display: flex; flex-direction: column; min-width: 0; }
.al-pick__item strong { font-size: var(--text-sm); font-weight: 500; }
.al-pick__item small { font-size: 12px; color: var(--color-text-muted); }

/* ---- Lists -------------------------------------------------------------------------------------- */
.slist { display: flex; flex-direction: column; gap: 2px; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.slist__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.slist__item:hover { background: var(--surface-hover); }
.slist__art { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 8px; background: var(--color-primary-soft); color: var(--teal-300); }
.slist__art img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.slist__info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slist__info strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.slist__info small { overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 640px) {
  .sf-head { flex-direction: column; align-items: stretch; padding: var(--space-4); }
  .sf-art { width: min(100%, 220px); align-self: center; }
  /* #313 audit: a Studio row on a phone gave the title ~85 px beside the status chip, Edit and the icons.
     The words take the first line; the chip and buttons sit on their own line underneath, right-aligned. */
  .slist__item { flex-wrap: wrap; row-gap: 6px; }
  .slist__info { flex: 1 1 calc(100% - 64px); }
  .slist__item > .spill { margin-left: auto; }
  .slist__item > .spill ~ * { flex: none; }
  .sf-grid { grid-template-columns: 1fr; }
  .sf-sec { padding: var(--space-4); }
  .sf-crow--extra { flex-wrap: wrap; }
  .sf-crow--extra .sf-crow__role { flex: 1 1 calc(100% - 44px); }
  .sf-crow--extra .sf-crow__field { flex-basis: 100%; }
  .sf-crow__icon { display: none; }
  .sf-actions .btn--primary { flex: 1; }
  .seg { width: 100%; border-radius: var(--radius-md); }
  .seg__opt { flex: 1; border-radius: var(--radius-sm); }
  /* Phones (#305): a row's Move is its icon alone */
  .slist__move > span { display: none; }
  .slist__move { padding-left: 10px; padding-right: 10px; }
}
/* Phones (#305): when the bar wraps, "Move to Another Profile" takes the whole line under the tabs */
@media (max-width: 640px) {
  .studio-bar > .btn.studio-bar__select { flex: 1 1 100%; order: 3; justify-content: center; margin: 0 0 10px; }
}

/* ---- Upload tray (uploads.js) ------------------------------------------------------------------ */
.upt { position: fixed; right: 16px; bottom: calc(var(--player-height) + 16px); z-index: 120; width: min(360px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 16px 40px rgba(17, 17, 17, 0.16); animation: upt-in var(--dur-med) var(--ease); }
body:not(.has-player) .upt { bottom: 16px; }
/* Bottom right, above the player — clear of the menu */
@media (max-width: 767px) { .upt { left: 8px; right: 8px; width: auto; bottom: calc(60px + 24px + env(safe-area-inset-bottom)); } body:not(.has-player) .upt { bottom: 12px; } }
.upt[hidden] { display: none; }
@keyframes upt-in { from { opacity: 0; transform: translateY(12px); } }
.upt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.upt__head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; background: var(--color-primary-soft); }
.upt__head strong { flex: 1; font-size: 13px; font-weight: 600; color: var(--color-link-hover); }
.upt__ring { --p: 0%; flex: none; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--color-primary) var(--p), rgb(var(--teal-500-rgb) / 0.2) 0); -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); mask: radial-gradient(circle, transparent 6px, #000 7px); }
.upt__btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-link-hover); cursor: pointer; }
.upt__btn:hover { background: rgba(255, 255, 255, 0.6); }
.upt__btn[data-upt="toggle"] svg { transition: transform var(--dur-fast) var(--ease); }
.upt.is-collapsed .upt__btn[data-upt="toggle"] svg { transform: rotate(180deg); }
.upt.is-collapsed .upt__list { display: none; }
.upt__list { max-height: 260px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; }
.upt__item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 8px; padding: 8px 10px 8px 14px; }
.upt__item + .upt__item { border-top: 1px solid var(--color-border); }
.upt__name { overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.upt__status { grid-row: 2; grid-column: 1; font-size: 11px; color: var(--color-text-muted); }
.upt__item.is-failed .upt__status, .upt__item.is-paused .upt__status { color: var(--color-error-text); }
.upt__item.is-done .upt__status { color: var(--color-link-hover); }
.upt__link { grid-row: 1 / 3; grid-column: 2; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-link-hover); text-decoration: none; cursor: pointer; }
.upt__x { grid-row: 1 / 3; grid-column: 3; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; }
.upt__x:hover { background: var(--danger-soft); color: var(--color-error); }
.upt__bar { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 3px; background: rgb(var(--teal-500-rgb) / 0.16); }
.upt__bar i { display: block; height: 100%; background: var(--color-primary); transition: width 0.3s ease; }
.upt__item.is-done .upt__bar, .upt__item.is-failed .upt__bar { display: none; }
@media (max-width: 640px) {
  .rtype { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: var(--space-4); text-align: left; }
  .rtype__icon { grid-row: span 2; width: 52px; height: 52px; margin: 0; }
  .rtype strong { flex: 1; }
  .rtype span:last-child { flex-basis: calc(100% - 66px); margin-left: 66px; margin-top: -8px; }
}
/* Phones: the publish bar sits at the end of the form (the mini player and upload tray own the bottom edge). */
@media (max-width: 767px) { .sf-publish { position: static; box-shadow: none; } }

/* ---- Optional details (nothing but the audio is required, decision #86) ---------------------------- */
.sf-miss--tips .sf-miss__item { border-color: var(--teal-200); background: var(--color-primary-soft); color: var(--color-link-hover); }

/* ---- After submitting: tagged people + marketing (decision #86) ------------------------------------ */
.confirm__card.rel-card { max-width: 520px; width: 100%; }
.confirm__text:has(.rel-intro) { white-space: normal; text-align: left; }
.rel-intro { margin: 0 0 12px; }
.rel-done { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--color-link-hover); font-weight: 600; }
.rel-done svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.rel-people { display: flex; flex-direction: column; max-height: 52vh; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; list-style: none; }
.rel-p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 2px; border-top: 1px solid var(--color-border); }
.rel-p:first-child { border-top: 0; }
.rel-p__av { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 50%;
  background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.rel-p__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rel-p__main { display: flex; flex: 1 1 160px; flex-direction: column; min-width: 0; }
.rel-p__main strong { overflow: hidden; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rel-p__main small { font-size: 12px; color: var(--color-text-muted); }
.rel-p__st { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
.rel-p__st.is-requested, .rel-p__st.is-invited, .rel-p__st.is-on_release { background: var(--color-primary-soft); color: var(--color-link-hover); }
.rel-p__st.is-accepted { background: #e7f6ec; color: #1e7a3c; }
.rel-p__st.is-declined { background: var(--danger-soft); color: var(--color-error-text); }
.rel-p__st.is-not_on_muslate { background: #fff5e6; color: #8a5600; }
/* Each person opens the profile that was picked (#224), in a new tab */
.rel-people { container-type: inline-size; }
.rel-p__who { display: flex; flex: 1 1 200px; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
a.rel-p__who:hover .rel-p__main strong, a.rel-p__who:focus-visible .rel-p__main strong { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 2px; }
.rel-inv { flex-basis: 100%; padding: 8px 0 2px; }          /* full width under the row */
.rel-inv[hidden] { display: none; }
.rel-fix { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }
.rel-fix .link { font-weight: 600; }
/* The invite form (#224): Email · Phone side by side when there's room, stacked when not */
.inv-form { container-type: inline-size; }
.inv-form__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.inv-form .field { margin: 0; }
.inv-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.inv-intro { margin: 0 0 14px; color: var(--color-text-muted); text-align: left; }
.confirm__text:has(.inv-form) { white-space: normal; text-align: left; }
/* Promotion services (#125): the dialog keeps its title and buttons in view, the cards scroll between them */
.confirm__card.mk-card { display: flex; flex-direction: column; max-width: 680px; max-height: calc(100dvh - 40px); padding-bottom: 20px; }
.mk-card .confirm__text { flex: 1 1 auto; min-height: 0; margin-inline: -6px; padding: 0 6px 4px; overflow-y: auto; overscroll-behavior: contain; }
.mk-card .confirm__actions { flex: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.mk-card .confirm__actions [data-yes] { min-width: 180px; }
.mk-intro { margin-bottom: 16px; color: var(--color-text-muted); line-height: 1.55; }
.mk-list { display: flex; flex-direction: column; gap: 12px; }
.mk { position: relative; display: grid; grid-template-columns: 22px 46px minmax(0, 1fr); align-items: start; gap: 0 14px; padding: 18px 18px 16px;
  border: 1.5px solid var(--color-border); border-radius: 16px; background: var(--color-surface); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.mk:hover { border-color: var(--teal-200); box-shadow: 0 6px 18px rgb(var(--teal-900-rgb) / .08); }
.mk.is-on { border-color: var(--color-primary); background: var(--surface-hover); box-shadow: 0 0 0 3px rgb(var(--teal-500-rgb) / .16); }
.mk:has(.mk__in:focus-visible) { outline: 2px solid var(--color-primary-strong); outline-offset: 2px; }
.mk__in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mk__box { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 12px; border: 2px solid var(--tg-300); border-radius: 7px; background: var(--color-surface);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.mk__box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.mk.is-on .mk__box { border-color: var(--color-primary); background: var(--color-primary); }
.mk.is-on .mk__box svg { opacity: 1; transform: none; }
.mk__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; }
.mk__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mk__ic--distribution { background: var(--color-primary-soft); color: var(--color-link-hover); }
.mk__ic--youtube { background: #fdeceb; color: #d6312b; }
.mk__ic--instagram { background: linear-gradient(135deg, #fff1e6, #fde7f3 55%, #efe9fd); color: #c2306f; }
.mk__ic--social { background: #e9f0fd; color: #2f66d0; }
.mk__ic--offline { background: #f0ecfb; color: #6e54c2; }
.mk__body { display: flex; flex-direction: column; min-width: 0; }
.mk__t { color: var(--color-text); font-size: 16px; font-weight: 700; line-height: 1.3; cursor: pointer; }
.mk__tag { margin: 3px 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.45; }
.mk__head { display: flex; align-items: flex-start; gap: 12px; }
.mk__name { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.mk__pts { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }
.mk__pts li { display: flex; align-items: flex-start; gap: 8px; color: var(--color-text); font-size: 13px; line-height: 1.45; }
.mk__pts svg { flex: none; width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: var(--color-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mk__more { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 13px; line-height: 1.55; }
.mk__more[hidden] { display: none; }
.mk__know { flex: none; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; padding: 6px 10px 6px 14px; border: 1px solid var(--teal-200); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-link-hover); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mk__know:hover { background: var(--color-primary-soft); }
.mk__know svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.mk__know[aria-expanded="true"] svg { transform: rotate(-90deg); }
.mk-card .confirm__title { padding-inline: 28px; }
@media (max-width: 560px) {
  .mk { grid-template-columns: 22px minmax(0, 1fr); gap: 0 12px; padding: 14px; }
  .mk__ic { grid-column: 2; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 11px; }
  .mk__ic svg { width: 20px; height: 20px; }
  .mk__box { grid-row: 1; margin-top: 8px; }
  .mk__body { grid-column: 2; }
  .mk-card .confirm__title { padding: 0 34px 0 0; text-align: left; }
  .mk__know { position: absolute; top: 17px; right: 14px; }      /* beside the icon, so the name keeps the full width */
  .mk-card .confirm__actions { flex-direction: column-reverse; }
  .mk-card .confirm__actions .btn { width: 100%; }
}
.confirm__actions [data-yes]:disabled { opacity: .5; cursor: not-allowed; }
/* One line a person: the state (or Invite) stays on the right, the name gives way */
.rel-p { flex-wrap: wrap; gap: 6px 10px; }
.rel-p__who { flex: 1 1 0; }
.rel-p__st, .rel-p__inv { flex: none; margin-left: auto; }

/* Previews (decision #90) */
button.rtype { width: 100%; font: inherit; cursor: pointer; }
.confirm__card.pv-card { max-width: 480px; width: 100%; }
.confirm__text:has(.pv-add) { white-space: normal; text-align: left; }
.pv-add { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pv-add .field { margin: 0; }
.confirm__actions [data-yes][hidden] { display: none; }
.al-track__bar { display: block; height: 3px; margin: 0 14px 8px 64px; overflow: hidden; border-radius: 3px; background: rgb(var(--teal-500-rgb) / 0.15); }
.al-track__bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width 0.3s ease; }
.al-track__bar.is-processing i { background: linear-gradient(90deg, var(--color-primary), var(--teal-300), var(--color-primary)); background-size: 200% 100%; animation: bar-shine 1.2s linear infinite; }
.al-track__bar.is-failed i { background: var(--color-error); }
@keyframes bar-shine { to { background-position: -200% 0; } }

/* ---- Studio pages share the library look (#104): banner, a bar (tabs · main action), empty cards ---- */
/* The tabs ask for their natural width (flex-basis: max-content): a button beside them wraps under them only when the two
   no longer fit side by side — by content, not by a screen width (#305, Rohit: never squeeze a tab bar for a button) */
.studio-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.studio-bar > .slate__tabs, .studio-bar > .ev-tabs, .studio-bar .slate__tabs { flex: 1 1 max-content; min-width: 0; margin: 0; border-bottom: 0; }
.studio-bar > .btn { flex: none; margin-bottom: 8px; margin-left: auto; }
.studio-bar:has(> span:first-child:empty) { border-bottom: 0; justify-content: flex-end; }
.studio .lib-empty + .lib-empty, .studio [data-pg-list] .lib-empty { margin-top: var(--space-4); }

/* ---- Move To (decision #105): Select → pick rows → "Move to…" -------------------------------- */
.is-selecting [data-move-id] { position: relative; padding-left: 36px; cursor: pointer; }
.is-selecting [data-move-id]::before { content: ""; position: absolute; left: 8px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border: 2px solid var(--color-border-strong, #b9c3c7); border-radius: 6px; background: #fff; }
.is-selecting [data-move-id].is-picked::before { border-color: var(--color-primary);
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.is-selecting [data-move-id].is-picked > .slist__item,
.is-selecting .ev-sitem.is-picked { background: var(--color-primary-soft); }
.is-selecting [data-move-id][data-move-block] { opacity: .55; }
.is-selecting [data-move-id] a, .is-selecting [data-move-id] button { pointer-events: none; }
.move-bar { position: fixed; left: 50%; bottom: calc(var(--player-height, 72px) + env(safe-area-inset-bottom) + 14px); z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: #fff; box-shadow: var(--shadow-md); font-size: var(--text-sm); white-space: nowrap; animation: fade-in var(--dur-fast) var(--ease); }
.move-bar [data-move-n] { font-weight: 600; margin-right: 4px; }
.move-dlg { text-align: left; }
.move-dlg__check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: var(--text-sm); cursor: pointer; }
.move-dlg__check input { margin-top: 3px; }
.move-dlg__note { margin: 12px 0 0; font-size: 12px; color: var(--color-text-muted); }
.move-dlg__problems { margin: 0; padding-left: 18px; text-align: left; font-size: var(--text-sm); }
.studio-bar__select { margin-bottom: 8px; }

/* ---- Distributed (decisions #106, #126): one list of releases, a row opens into its songs and ISRCs ---- */
.dist-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.dist-tile { padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, #fff, var(--color-primary-soft)); }
.dist-tile strong { display: block; font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--color-text); }
.dist-tile span { font-size: 13px; color: var(--color-text-muted); }
.dist .an-sample { margin-bottom: 14px; }
.dist-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.dist-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 360px; padding: 0 14px; height: 40px;
  border: 1px solid var(--color-control); border-radius: var(--radius-pill); background: #fff; }
.dist-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.dist-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--color-text-muted); stroke-width: 2; stroke-linecap: round; }
.dist-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--text-sm); }
.dist-count { margin-left: auto; color: var(--color-text-muted); font-size: 13px; }
.dist-type { flex: none; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #eef1f2; color: var(--color-text-muted); }
.dist-type--album { background: var(--color-primary-soft); color: var(--color-link-hover); }
.dist-stores { display: flex; flex-wrap: wrap; gap: 6px; }
.dist-store { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; font-size: 12px; color: var(--color-text); text-decoration: none; }
.dist .dist-store svg, .dist .dist-store img { width: 16px; height: 16px; }
a.dist-store:hover { border-color: var(--color-primary); color: var(--color-link); }
.dist-store--submitted { opacity: .7; border-style: dashed; }
.dist-store--taken_down { opacity: .45; text-decoration: line-through; }
.dr-list { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
/* the last column: the support button (#301 — Claim Removal, Metadata Change, Take Down, Something Else) */
.dr-head, .dr-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 110px 200px 40px; align-items: center; gap: 14px; padding: 0 14px 0 10px; }
.dr-head { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--color-border); background: var(--surface-hover); color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.dr-help { display: flex; justify-content: center; }
.dr + .dr { border-top: 1px solid var(--color-border); }
.dr-row { min-height: 78px; padding-top: 10px; padding-bottom: 10px; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.dr-row:hover { background: var(--surface-hover); }
.dr.is-open > .dr-row { background: var(--surface-hover); }
.dr-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; }
.dr-toggle:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.dist .dr-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) var(--ease); transform: rotate(-90deg); }
.dr.is-open .dr-toggle svg { transform: none; }
.dr-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dr-art { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; background: var(--color-primary-soft); }
.dist .dr-art svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-300); stroke-width: 1.6; }
.dr-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dr-info { min-width: 0; }
.dr-title { display: block; overflow: hidden; color: var(--color-text); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.dr-title:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 2px; }
.dr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 0; color: var(--color-text-muted); font-size: 13px; }
.dr-meta .dist-type { margin-right: 2px; }
.dr-meta i { color: var(--color-text-subtle); font-style: normal; }
.dr-stores { display: flex; align-items: center; }
.dr-store { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: var(--tg-50); color: var(--color-text-muted); font-size: 11px; font-weight: 700; }
.dr-store:first-child { margin-left: 0; }
.dist .dr-store svg, .dist .dr-store img { width: 16px; height: 16px; }
.dr-store .pf-ic { width: 16px; height: 16px; color: var(--b, var(--color-text-muted)); }   /* the store's mark in its own colour (#305) */
.xp-help[disabled] { opacity: .45; cursor: default; }
.dr-store--more { background: var(--color-primary-soft); color: var(--color-link-hover); }
.dr-code { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; color: var(--color-text);
  font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.dr-code small { font-family: var(--font-sans, inherit); color: var(--color-text-subtle); font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.dr-code span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist .dr-code svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--color-text-subtle); stroke-width: 2; }
button.dr-code:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
button.dr-code:hover svg { stroke: var(--color-primary-strong); }
.dr-code.is-none { cursor: default; color: var(--color-text-subtle); font-family: inherit; }
.dr-open { display: flex; flex-direction: column; gap: 14px; padding: 4px 18px 18px 64px; background: var(--surface-hover); }
.dr-open[hidden] { display: none; }
.dr-tracks { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.dr-tr { display: grid; grid-template-columns: 32px minmax(0, 1fr) 190px 60px; align-items: center; gap: 12px; padding: 9px 14px; font-size: 14px; }
.dr-tr + .dr-tr { border-top: 1px solid var(--color-border); }
.dr-th { padding-top: 8px; padding-bottom: 8px; background: var(--surface-hover); color: var(--color-text-subtle); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.dr-n { color: var(--color-text-subtle); text-align: center; font-variant-numeric: tabular-nums; }
.dr-t { display: flex; flex-direction: column; min-width: 0; }
.dr-t strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.dr-t small { overflow: hidden; color: var(--color-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dr-d { color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.dr-tr .dr-code { padding: 4px 8px; }
@media (max-width: 1024px) {
  .dr-head { display: none; }
  .dr-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; grid-template-areas: "t m s h" ". st u u"; gap: 8px 12px; padding: 12px 14px 12px 6px; }
  .dr-help { grid-area: h; }
  .dr-toggle { grid-area: t; }
  .dr-main { grid-area: m; }
  .dr-status { grid-area: s; justify-self: end; }
  .dr-stores { grid-area: st; }
  .dr-upc { grid-area: u; justify-self: end; }
  .dr-open { padding: 4px 14px 16px; }
}
@media (max-width: 767px) {
  /* Five small numbers in one row (three and two left a gap, #179) */
  .dist-sum { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .dist-tile { padding: 10px 6px; text-align: center; }
  .dist-tile strong { font-size: 19px; }
  .dist-tile span { display: block; overflow: hidden; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
  .dist-search { max-width: none; }
  .dist-count { width: 100%; margin-left: 0; }
  .dr-row { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "t m h" ". s s" ". st st" ". u u"; }
  .dr-status, .dr-upc { justify-self: start; }
  .dr-art { width: 48px; height: 48px; }
  .dr-tr { grid-template-columns: 22px minmax(0, 1fr) 44px; }
  .dr-tr > :nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  .dr-th > :nth-child(3) { display: none; }
}

/* ---- Filter pills (app.pillMenu, #126): "Label: All ▾" → a small list, with search when it's long ---- */
.er-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pmenu { position: relative; }
.pmenu__btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; max-width: 260px; padding: 0 10px 0 14px; border: 1px solid var(--color-control); border-radius: var(--radius-pill); background: #fff;
  color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.pmenu__btn:hover, .pmenu__btn[aria-expanded="true"] { border-color: var(--color-primary); }
.pmenu__btn.is-set { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pmenu__k { color: var(--color-text-muted); }
.pmenu__k::after { content: ':'; }
.pmenu__v { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pmenu__btn.is-set .pmenu__v { color: var(--color-link-hover); }
.studio .pmenu__btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--color-text-subtle); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.pmenu__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pmenu__pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 220px; max-width: 320px; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); animation: fade-in var(--dur-fast) var(--ease); }
.pmenu__pop.is-up { top: auto; bottom: calc(100% + 6px); }
.pmenu__q { display: flex; align-items: center; gap: 8px; margin: 8px 8px 4px; padding: 0 10px; height: 34px; border: 1px solid var(--color-control); border-radius: 8px; }
.pmenu__q:focus-within { border-color: var(--color-primary); }
.studio .pmenu__q svg { width: 15px; height: 15px; fill: none; stroke: var(--color-text-subtle); stroke-width: 2; }
.pmenu__q input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; }
.pmenu__pop ul { max-height: 300px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; }
.pmenu__opt { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 6px; color: var(--color-text); font-size: 14px; cursor: pointer; outline: 0; }
.pmenu__opt:hover, .pmenu__opt:focus { background: var(--surface-hover); }
.pmenu__opt.is-on { color: var(--color-link-hover); font-weight: 600; }
.pmenu__opt small { color: var(--color-text-subtle); font-size: 12px; font-weight: 400; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pmenu__none { padding: 10px; color: var(--color-text-muted); font-size: 13px; }
.er-clear { padding: 0 4px; border: 0; background: none; color: var(--color-link-hover); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.er-clear:hover { text-decoration: underline; }
.er-clear[hidden] { display: none; }

/* ---- Credited On (#115) ------------------------------------------------------------------------------ */
.cred-intro { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: 14px; }
/* Credited On: Accepted · Waiting (Rohit, #313) — the same toggle as Previews' Songs · Albums */
.cred-status { margin: var(--space-3) 0 0; }
.cred-status__n { font-variant-numeric: tabular-nums; opacity: 0.8; }
.cred { display: flex; align-items: center; gap: 8px; border-radius: var(--radius-md); }
.cred:hover { background: var(--surface-hover); }
.cred .slist__item { flex: 1; min-width: 0; }
.cred .slist__item:hover { background: none; }
.cred.is-waiting { background: var(--warn-soft); box-shadow: inset 3px 0 0 #f0a23b; }
.cred__roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cred__roles span { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-weight: 500; }
.cred__act { display: flex; flex: none; align-items: center; gap: 8px; padding-right: 8px; }
/* Role by role — the same quiet word the notification drawer uses, beside Accept All / Decline All (#313) */
.cred__pick {
  flex: none;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cred__pick:hover { color: var(--color-link-hover); }
.cred__pick:disabled { opacity: 0.6; }
.spill--wait { background: var(--warn-soft); color: var(--warn-text); }
.cred__more { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.cred__more:hover { background: var(--color-surface-muted); color: var(--color-text); }
.cred__more svg { width: 18px; height: 18px; fill: currentColor; }
.cred-new { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 4px; border-radius: var(--radius-pill); background: #f0a23b; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.cred-loadmore { margin-top: var(--space-3); }
@media (max-width: 639px) {
  .cred { flex-wrap: wrap; gap: 0; padding-bottom: 8px; }
  .cred .slist__item { flex-basis: 100%; }
  .cred__act { width: 100%; justify-content: flex-end; padding: 0 8px; }
}

/* ---- Creator-Studio1 ------------------------------------------------------------------------------ */
/* Every create starts the same way: one card, centred under the banner (album, preview, compilation, event, page) */
.studio-start { width: 100%; max-width: 560px; margin-inline: auto; }
.studio-start .field--icon .field__input { padding-left: 42px; }
.studio-start .field--icon .field__label { left: 42px; }
.studio-start .field--icon .field__icon { color: var(--color-text-subtle); }
.studio-start .field--icon:focus-within .field__icon { color: var(--color-link); }
.studio-start.ev-dlg .ev-kinds { margin-top: -6px; }
.pg-new__kind { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.pg-new__kind strong { font-size: 15px; }
.pg-new__kind .link { margin-left: auto; font-size: 13px; }
.studio-start .pg-new__url { margin-top: -8px; }
/* Artwork you can change: the same strip as playlists' "Change picture" */
.sf-art__edit { position: absolute; inset: auto 0 0 0; padding: 7px; background: rgba(11, 12, 14, 0.6); color: #fff; font-size: 12px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.sf-art:hover .sf-art__edit, .sf-art:focus-visible .sf-art__edit { opacity: 1; }
@media (hover: none) { .sf-art__edit { opacity: 1; } }
/* Sent to the stores (#183): the fields' lock, in the artwork's corner; its note opens above it */
.sf-art:disabled { cursor: default; opacity: 1; }
.sf-art .sf-art__lock { top: auto; right: 8px; bottom: 8px; transform: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--color-text-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.sf-art .sf-art__lock::after { right: 0; top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.sf-art:hover .sf-art__lock { color: var(--color-link); }
.sf-art:hover .sf-art__lock::after { opacity: 1; transform: none; }
/* Removing an album track: from the album (a single again) or from your profile */
.al-rm { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.al-rm__opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--color-control-soft); border-radius: var(--radius-md); cursor: pointer; }
.al-rm__opt:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.al-rm__opt span { display: flex; flex-direction: column; gap: 2px; }
.al-rm__opt small { color: var(--color-text-muted); font-size: 13px; }
.al-rm__list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; padding: 4px 14px 0; }   /* the album's songs, tick to keep (var(--teal-600)) */
.al-rm__keep { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.al-rm__keep span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-track__grip:not(button) { width: 22px; }
/* Your albums as cards: "New Album" first, a status pill on each; Select picks a card */
a.sh-new { text-decoration: none; }
.sh-card small .spill { margin-right: 4px; padding: 1px 7px; font-size: 11px; vertical-align: 1px; }
.is-selecting .sh-card[data-move-id] { padding-left: 0; }
.is-selecting .sh-card[data-move-id]::before { left: 10px; top: 10px; margin-top: 0; z-index: 4; }
.is-selecting .sh-card[data-move-id].is-picked .sh-card__media { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-md); }
/* #120: the event / page editors' sticky bar; a picked kind card stays marked */
.eve-foot__act { display: flex; flex-wrap: wrap; gap: 10px; }
.rtype.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); }

/* #120: the song Release step stacks (date, who can listen, downloads) instead of two lopsided columns */
.sf-sec--rel > .sf-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; }       /* (older layout; the step is a .rel-list now) */
/* Remove a track: two choice cards with our own radio (the dialog's muted text colour and the browser radio looked off) */
.al-rm { gap: 10px; margin-top: 4px; }
.al-rm__opt { align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--color-control-soft); border-radius: var(--radius-md); background: #fff; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.al-rm__opt:hover { border-color: var(--teal-200); }
.al-rm__opt:has(input:checked) { border-color: var(--color-primary); background: var(--teal-50); }
.al-rm__opt strong { color: var(--color-text); font-size: 14px; font-weight: 600; }
.al-rm__opt small { color: var(--color-text-muted); font-size: 13px; }
/* Deleting is the destructive choice: red once picked */
.al-rm__opt--danger:has(input:checked) { border-color: var(--color-error); background: #fff6f6; }
.al-rm__opt--danger input:checked { border-color: var(--color-error); }
.al-rm__opt--danger input::after { background: var(--color-error); }

/* ---- Studio cards for pages and events (Rohit): a grid like albums, the picture on top, the name opens it ---- */
.pg-cards, .ev-scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pg-card, .ev-scard { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; transition: box-shadow var(--dur-fast), transform var(--dur-fast); }
.pg-card:hover, .ev-scard:hover { box-shadow: 0 10px 28px rgba(17, 17, 17, 0.08); transform: translateY(-2px); }
.pg-card__cover { display: block; aspect-ratio: 16 / 6; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); }
.pg-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.pg-card__av img { display: block; width: 64px; height: 64px; margin-top: -36px; border: 3px solid #fff; border-radius: 16px; background: var(--color-primary-soft); object-fit: cover; box-shadow: var(--shadow-md); }
.pg-card__av { display: block; width: max-content; margin-left: 16px; }      /* the photo sits half over the cover */
.pg-card__body, .ev-scard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 16px 16px; }
.ev-scard__body { padding-top: 12px; }
.pg-card__kind { color: var(--color-link-hover); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.pg-card__t, .ev-scard__t { overflow: hidden; color: var(--color-text); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.pg-card__t:hover, .ev-scard__t:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 2px; }
.pg-card__body > small, .ev-scard__body > small { overflow: hidden; color: var(--color-text-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.pg-card__meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pg-card__meter .pg-meter { flex: 1; }
.pg-card__meter small { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
.pg-card .spill { align-self: flex-start; margin-top: 4px; }
.pg-card__act, .ev-scard__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pg-card__act .btn, .ev-scard__act .btn { flex: 1; }
.ev-scard__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-primary-soft); }
.ev-scard__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-scard__art .ev-date { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: var(--shadow-md); }
.ev-scard__state { position: absolute; top: 10px; right: 10px; z-index: 2; }
.ev-scard__state .spill { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); background-color: #fff; }
.ev-scard__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }
/* Select (Move To) on cards: the tick in the corner */
.is-selecting .ev-scard[data-move-id] { padding-left: 0; }
.is-selecting .ev-scard[data-move-id]::before { left: 10px; top: auto; bottom: 10px; margin-top: 0; z-index: 4; }
.is-selecting .ev-scard[data-move-id].is-picked { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.ev-scards, .pg-cards { margin-top: 16px; }

/* Song rows: the title opens the public page, Edit the editor */
.slist__t { overflow: hidden; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.slist__t:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 2px; }
/* Who's on it, between the title and the details — each name to their profile */
.slist__by { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.slist__by a { color: inherit; text-decoration: none; }
.slist__by a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Dashboard → Analytics (#123) --------------------------------------------------------------- */
.an { display: flex; flex-direction: column; gap: 18px; }
.an.is-loading > :not(.sk) { opacity: .55; transition: opacity .2s; }
.an-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.an-period { color: var(--color-text-muted); font-size: 13px; }
.an-sample { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border: 1px dashed var(--teal-200); border-radius: var(--radius-md); background: var(--surface-hover); color: var(--color-text-muted); font-size: 13px; }
.an-sample svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--color-primary-strong); stroke-width: 2; stroke-linecap: round; }
.an-sample strong { color: var(--color-text); }
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.an-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px 14px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.an-kpi__l { color: var(--color-text-muted); font-size: 13px; font-weight: 500; }
.an-kpi__v { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.an-kpi__d { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.an-kpi__d small { color: var(--color-text-subtle); font-size: 12px; }
.an-spark { position: absolute; right: 14px; top: 16px; width: 96px; height: 34px; }
.an-delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 5px; border-radius: var(--radius-pill); background: #f1f3f4; color: var(--color-text-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.an-delta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.an-delta.is-up { background: var(--tg-50); color: #17784a; }
.an-delta.is-down { background: var(--danger-soft); color: #b4232f; }
.an-delta.is-new { padding-left: 8px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.an-row { display: grid; gap: 14px; }
.an-row--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.an-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-row--2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
/* Previews (var(--teal-900)): their own cards, under the streaming numbers */
.an-pv { margin-top: 0; }
.an-pv__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.an-pv__nums > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--radius-md); background: var(--surface-hover); }
.an-pv__nums strong { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--color-text); }
.an-pv__nums span { font-size: 13px; color: var(--color-text-muted); }
.an-pv__nums .an-delta { align-self: flex-start; }
.an-pv__nudge { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.an-pv__nudge a { color: var(--color-link-hover); font-weight: 500; }
.an-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.an-card > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.an-card h2 { margin: 0; font-size: 15px; font-weight: 600; }
.an-card__note { color: var(--color-text-muted); font-size: 13px; }
.an-legend { display: flex; gap: 14px; color: var(--color-text-muted); font-size: 13px; }
.an-legend span, .an-tip span { display: inline-flex; align-items: center; gap: 6px; }
.an-legend i, .an-tip i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.an-legend i.is-dash, .an-tip i.is-dash { height: 0; border-top: 2px dashed; background: none; }
.an-chart { position: relative; min-width: 0; }
.an-chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.an-grid { stroke: var(--tg-50); stroke-width: 1; }
.an-axis { fill: var(--color-text-subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.an-cross { stroke: var(--tg-300); stroke-width: 1; stroke-dasharray: 3 3; }
.an-dot { stroke: #fff; stroke-width: 2; }
.an-bar { opacity: .9; transition: opacity .15s; }
.an-bar:hover { opacity: 1; }
.an-tip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 3px; min-width: 190px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); color: var(--color-text-muted); font-size: 13px; pointer-events: none; }
.an-tip strong { color: var(--color-text); font-size: 13px; }
.an-bars { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.an-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; font-size: 13px; }
.an-bars__l { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.an-bars__v { font-weight: 600; font-variant-numeric: tabular-nums; }
.an-bars__v small { margin-left: 6px; color: var(--color-text-subtle); font-weight: 400; }
.an-bars__track { grid-column: 1 / -1; display: block; height: 6px; overflow: hidden; border-radius: 4px; background: var(--tg-50); }
.an-bars__track i { display: block; height: 100%; border-radius: 4px; background: var(--teal-600); }
.an-top5 { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.an-top5 li { display: grid; grid-template-columns: 18px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.an-top5__n { color: var(--color-text-subtle); font-size: 13px; font-weight: 600; text-align: center; }
.an-top5__art { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: var(--color-primary-soft); color: var(--teal-300); }
.an-top5__art img { width: 100%; height: 100%; object-fit: cover; }
.an-top5__art svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.an-top5__t { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; font-weight: 500; }
.an-top5__t a { overflow: hidden; color: var(--color-text); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.an-top5__t a:hover { color: var(--color-link-hover); text-decoration: underline; }
.an-top5__t .an-bars__track { height: 4px; }
.an-top5__v { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.an-top5__v small { font-size: 12px; font-weight: 600; }
.an-top5__v small.is-up { color: #17784a; }
.an-top5__v small.is-down { color: #b4232f; }
.an-eng { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.an-eng div, .an-cat a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-hover); }
.an-eng div:first-child { grid-column: 1 / -1; }
.an-eng strong, .an-cat strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.an-eng span, .an-cat span { color: var(--color-text-muted); font-size: 13px; }
.an-cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.an-cat a { color: var(--color-text); text-decoration: none; transition: background-color var(--dur-fast); }
.an-cat a:hover { background: var(--color-primary-soft); }
.an-none { margin: 0; color: var(--color-text-muted); font-size: 13px; }
@media (max-width: 1100px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-row--main, .an-row--3, .an-row--2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .an-kpis { gap: 10px; } .an-kpi { padding: 14px; } .an-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-spark { display: none; } }   /* phones keep two numbers to a row (#179) */
/* The Studio sizes its icons (.studio svg 20px): the analytics charts keep their own size */
.an .an-chart svg { width: 100%; height: auto; stroke: none; }
.an .an-spark { width: 96px; height: 34px; stroke: none; }
.an .an-delta svg { width: 14px; height: 14px; }
/* Analytics: the scope switch (all music / only uploads), album art, kind labels */
.an-top { gap: 10px 20px; }
.an-scope { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--color-text); font-size: 14px; font-weight: 500; cursor: pointer; }
.an-top5__art.is-album { border-radius: 6px; }
.an-top5__t > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.an-top5__k { margin-top: -4px; color: var(--color-text-subtle); font-size: 11px; font-weight: 500; }
.an-top5__u { color: var(--color-text-subtle); font-weight: 500; }

/* Where listeners are: a small Cities / Countries switch; the place's region under its name; the DB-IP credit */
.an-mini .seg__opt { padding: 4px 10px; font-size: 12px; }
.an-bars__l small { margin-left: 6px; color: var(--color-text-subtle); font-size: 12px; }
.an-credit { margin-top: auto; padding-top: 4px; color: var(--color-text-subtle); font-size: 11px; }
.an-credit a { color: inherit; }
.an-credit a:hover { color: var(--color-link-hover); }

/* ---- Reports / Royalties (#126): the Analytics cards, a stacked monthly chart and the monthly statement ---- */
.er-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.er-dl { margin-left: auto; gap: 6px; }
.studio .er-dl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.er [data-body] { display: flex; flex-direction: column; gap: 18px; }
.er-legend { flex-wrap: wrap; gap: 6px 14px; }
.er-legend i { width: 10px; height: 10px; border-radius: 3px; }
.er-bar { transition: opacity .15s; }
.er-bar.is-dim { opacity: .35; }
.er-tip { min-width: 210px; }
.er-tip strong { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.er-tip strong em { font-style: normal; font-variant-numeric: tabular-nums; }
.er-tip span { display: flex !important; gap: 8px; }
.er-tip span i { flex: none; width: 10px !important; height: 10px !important; border-radius: 3px !important; }
.er-tip b { margin-left: auto; color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.er-dot { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 8px; border-radius: 3px; vertical-align: 1px; }
@media (max-width: 767px) { .er-dl { margin-left: 0; } }

/* ---- Royalties / Reports (#313): summary · controls · one chart · Breakdown · Monthly Statement ---------------- */
/* The summary: three figures (Royalties) or two (Reports); narrow space keeps two to a row, a lone first one spans it */
.er-sum { container-type: inline-size; }
.er .er-kpis { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.er-kpis .an-kpi__d { flex-wrap: wrap; gap: 4px 8px; }
/* Bars that are rows: a Breakdown row filters the page, an album in a month opens to its tracks */
.er-bars { gap: 2px; margin: 0 -8px; }
.er-bars > li { display: block; }
.er-brow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--color-text); font: inherit; font-size: 13px; text-align: left; }
button.er-brow { cursor: pointer; transition: background-color var(--dur-fast); }
button.er-brow:hover { background: var(--surface-hover); }
button.er-brow.is-on { background: var(--color-primary-soft); }
button.er-brow.is-on .an-bars__l { color: var(--color-link-hover); font-weight: 600; }
.studio .er-tog svg { width: 14px; height: 14px; margin-left: 4px; vertical-align: -3px; stroke-width: 2.4; transition: transform var(--dur-fast); }
button.er-brow[aria-expanded="true"] .er-tog svg { transform: rotate(180deg); }
.er-tracks { margin: 0 0 4px 16px; padding-left: 8px; border-left: 2px solid var(--tg-100); }
.er-tracks[hidden] { display: none; }
.er-bfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.er-break > header { align-items: center; }
.er-break > header .xp-seg { align-self: center; }
/* The statement: a month opens under its row (folded by default); the PDF icon at the row's end */
.er-statement { gap: 10px; padding-bottom: 8px; }
.er-table { margin: 0 -20px; }
.er-stmt { container-type: inline-size; }
.er-tr { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(90px, 1fr) minmax(120px, 1.2fr) minmax(90px, 1fr) 40px; align-items: center; gap: 12px; width: 100%;
  padding: 12px 20px; color: var(--color-text); font-size: 14px; text-align: left; }
.er-stmt.is-streams .er-tr { grid-template-columns: minmax(150px, 1.4fr) minmax(90px, 1fr) minmax(110px, 1fr) minmax(120px, 1.2fr); }
.er-th { padding-top: 9px; padding-bottom: 9px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--surface-hover); color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.er-month + .er-month { border-top: 1px solid var(--color-border); }
.er-tr[data-open] { cursor: pointer; transition: background-color var(--dur-fast); }
.er-tr[data-open]:hover, .er-month.is-open > .er-tr { background: var(--surface-hover); }
.er-m { min-width: 0; }
.er-mbtn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.studio .er-mbtn svg { flex: none; width: 16px; height: 16px; color: var(--color-text-subtle); stroke-width: 2.4; transform: rotate(-90deg); transition: transform var(--dur-fast); }
.er-month.is-open .er-mbtn svg { transform: none; }
.er-v { font-weight: 600; font-variant-numeric: tabular-nums; }
/* #313: was display:flex, where the store's name is an anonymous flex item and text-overflow draws nothing, so a
   long store name was cut mid-letter. A block box ellipsises it; the row still centres it. */
.er-s { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.er-pdf { display: flex; justify-content: flex-end; }
.er-pdf .xp-help { width: 34px; height: 34px; }
.er-none { color: var(--color-text-subtle); }
/* Adjustments or penalties: the soft red of the design system (--adjust), never the error red */
.er-neg { color: var(--adjust); font-weight: 500; font-variant-numeric: tabular-nums; }
.er-open { display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 18px; background: var(--surface-hover); }
.er-open[hidden] { display: none; }
.er-open .an-bars__track { background: var(--tg-100); }
.er-open button.er-brow:hover { background: var(--color-surface); }
.er-sk { display: block; height: 64px; border-radius: 12px; }
.er-more { align-self: flex-start; }
.er-facts { display: none; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-size: 13px; }
.er-facts > div { display: flex; align-items: center; gap: 8px; }
.er-facts dt { color: var(--color-text-muted); }
.er-facts dd { display: flex; align-items: center; margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.er-adj { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-top: 12px; border-top: 1px solid var(--tg-100); font-size: 13px; }
.er-adj__l { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.er-adj__l b { font-weight: 600; }
.er-adj__btn { display: inline-flex; align-items: center; gap: 2px; }
.er-adj__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.er-adjlist { display: flex; flex-direction: column; font-size: 13px; }
.er-adjrow { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(80px, auto); gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--tg-100); }
.er-adjrow > span { min-width: 0; overflow-wrap: anywhere; }
.er-adjrow > :last-child { text-align: right; }
.er-adjrow.is-h { padding-top: 0; border-top: 0; color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
/* Narrow space (#180, by the component's own width): the statement keeps Month, Earned (or Streams) and the PDF —
   the rest shows when a month opens (.er-facts); an adjustment folds to store + amount, then release and track */
@container (max-width: 560px) {
  .er .er-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .er .er-kpis > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .er-stmt .er-tr { grid-template-columns: minmax(0, 1fr) auto 40px; }
  .er-stmt.is-streams .er-tr { grid-template-columns: minmax(0, 1fr) auto; }
  .er-stmt .er-tr > :nth-child(3), .er-stmt .er-tr > :nth-child(4) { display: none; }
  .er-facts { display: flex; }
  .er-adjrow { grid-template-columns: minmax(0, 1fr) auto; }
  .er-adjrow.is-h { display: none; }
  .er-adjrow > :nth-child(1) { grid-area: 1 / 1; font-weight: 500; }
  .er-adjrow > :nth-child(4) { grid-area: 1 / 2; }
  .er-adjrow > :nth-child(2), .er-adjrow > :nth-child(3) { grid-column: 1 / -1; color: var(--color-text-muted); }
  .er-adjrow > :nth-child(3):empty { display: none; }
}
/* Store marks in the Studio are filled shapes, not the Studio's line icons */
.studio .pf-ic svg { fill: currentColor; stroke: none; }
.studio .pf-ic .pf-ic__line { fill: none; stroke: currentColor; }
/* Reports / Royalties: the chart fills its card; phones keep the tiles two by two */
.er .an-card--chart .an-chart { flex: 1 1 auto; min-height: 300px; }
@media (max-width: 1100px) { .er .an-card--chart .an-chart { flex: none; } }
@media (max-width: 520px) {
  .er .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .er .an-kpi { padding: 14px; }
  .er .an-kpi__v { font-size: 19px; overflow-wrap: anywhere; }
}

/* ---- Payouts (#127) ------------------------------------------------------------------------------ */
.po-link { padding: 0; border: 0; background: none; color: var(--color-link-hover); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.po-link:hover { text-decoration: underline; }
/* Payouts page */
.po-row2 { align-items: stretch; }
.po-method { display: flex; align-items: center; gap: 14px; }
.po-method > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.po-method strong { font-size: 15px; }
.po-method small { color: var(--color-text-muted); font-size: 13px; }
.po-method__ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.studio .po-method__ic svg, .po-dlg .po-method__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.po-note { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.po-how ol { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.po-how li { display: flex; gap: 12px; }
.po-how li b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 13px; }
.po-how li span { display: flex; flex-direction: column; gap: 2px; }
.po-how strong { font-size: 14px; }
.po-how small { color: var(--color-text-muted); font-size: 13px; line-height: 1.45; }
.po-table { margin: 0 -20px -6px; container-type: inline-size; }
.po-tr { display: grid; grid-template-columns: minmax(90px, .9fr) minmax(100px, 1fr) minmax(110px, 1fr) minmax(130px, 1.4fr) minmax(90px, .8fr) minmax(100px, 1fr); align-items: center; gap: 12px; padding: 12px 20px; font-size: 14px; }
.po-tr + .po-tr { border-top: 1px solid var(--color-border); }
.po-th { padding-top: 9px; padding-bottom: 9px; border-top: 1px solid var(--color-border); background: var(--surface-hover); color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.po-tr small { display: block; color: var(--color-text-muted); font-size: 12px; }
.po-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.po-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
/* The request / details dialog */
.confirm__card.po-card { max-width: 480px; width: 100%; }
.po-card .confirm__actions { display: none; }
.confirm__text:has(.po-dlg) { white-space: normal; text-align: left; }
.po-dlg { display: flex; flex-direction: column; gap: 14px; }
.po-intro { margin: 0; color: var(--color-text-muted); line-height: 1.5; }
.po-kind { align-self: flex-start; }
.po-kind .seg__opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; }
.po-kind svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.po-form { display: flex; flex-direction: column; gap: 12px; }
.po-form .field { margin: 0; }
.po-amount { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--teal-50), #f8fcfc); text-align: center; }
.po-amount small { color: var(--color-text-muted); font-size: 13px; }
.po-amount strong { color: var(--color-text); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.po-amount span { color: var(--color-text-muted); font-size: 13px; }
.po-method--card { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.po-sample { margin: 0; color: var(--color-text-subtle); font-size: 12px; text-align: center; }
.po-dlg__act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.po-dlg__act .btn { min-width: 120px; }
/* Narrow space: each request folds into two columns — request and amount on top, every other column under them with its name (#180: nothing hidden) */
@container (max-width: 740px) {
  .po-tr { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .po-th { display: none; }
  .po-tr > :nth-child(1) { grid-area: 1 / 1; }
  .po-tr > :nth-child(3) { grid-area: 1 / 2; }
  .po-tr > :nth-child(2) { grid-area: 2 / 1; }
  .po-tr > :nth-child(5) { grid-area: 2 / 2; justify-self: end; }
  .po-tr > :nth-child(4) { grid-area: 3 / 1; padding-left: 0; }
  .po-tr > :nth-child(6) { grid-area: 3 / 2; justify-self: end; text-align: right; }
  .po-tr > [data-l] { color: var(--color-text-muted); font-size: 13px; }
  .po-tr > [data-l]::before { content: attr(data-l) " "; color: var(--color-text-subtle); }
  .po-tr > [data-l] small { display: inline; }
}
@media (max-width: 767px) {
  .po-dlg__act { flex-direction: column-reverse; }
  .po-dlg__act .btn { width: 100%; }
}
/* Distributed as the Studio's album cards: the release opens under its row (#126) */
.dist-view .seg__opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dist .dist-view svg { width: 15px; height: 15px; }
.dist .sh-grid { margin-top: 0; }
.dist-xp__head { gap: 14px; margin-bottom: 14px; }
.dist .sh-xp__body .dr-tracks { margin-bottom: 12px; }
.dist .sh-card small .spill { margin-right: 4px; }
@media (max-width: 767px) { .dist-xp__head { flex-wrap: wrap; } }

/* ---- The balance card, redesigned (#127): amount + Request on top, a real progress bar on its own strip ---- */
.po-wallet { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.po-wallet__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 24px 20px; }
.po-wallet__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-wallet__l { color: var(--color-text-muted); font-size: 13px; font-weight: 600; }
.po-wallet__v { color: var(--color-text); font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.po-wallet__main small { color: var(--color-text-muted); font-size: 13px; }
.po-wallet__act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.po-wallet__act .btn { min-width: 180px; }
.po-wallet__act small { max-width: 300px; color: var(--color-text-muted); font-size: 12px; }
.po-prog { display: flex; flex-direction: column; gap: 9px; padding: 16px 24px 14px; border-top: 1px solid var(--color-border); background: var(--surface-hover); }
.po-prog__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.po-prog__state { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--color-text-muted); font-size: 13px; }
.po-prog__state b { color: var(--color-text); font-weight: 600; }
.studio .po-prog__state svg { flex: none; width: 18px; height: 18px; padding: 2px; border-radius: 50%; stroke-width: 2.6; }
.po-prog__pct { flex: none; color: var(--color-text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.po-prog__bar { position: relative; height: 12px; border-radius: 999px; background: var(--tg-100); box-shadow: inset 0 1px 2px rgb(var(--teal-900-rgb) / .08); }
.po-prog__bar i { position: relative; display: block; height: 100%; min-width: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--teal-100), var(--end, var(--teal-600))); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.po-prog__bar i::after { content: ''; position: absolute; top: 50%; right: -2px; width: 18px; height: 18px; border: 3px solid var(--end, var(--teal-600)); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(var(--teal-900-rgb) / .25); transform: translateY(-50%); }
.po-prog__scale { display: flex; justify-content: space-between; color: var(--color-text-subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.po-wallet.is-ready .po-prog { background: var(--teal-50); }
.po-wallet.is-ready .po-prog__bar i { background: linear-gradient(90deg, var(--teal-100), var(--tg-700)); }
.po-wallet.is-ready .po-prog__bar i::after, .po-wallet.is-pending .po-prog__bar i::after { display: none; }
.studio .po-wallet.is-ready .po-prog__state svg { background: var(--color-primary-strong); stroke: #fff; }
.po-wallet.is-ready .po-prog__state b, .po-wallet.is-ready .po-prog__pct { color: var(--color-link-hover); }
.po-wallet.is-pending .po-prog { background: var(--surface-hover); }
.po-wallet.is-pending .po-prog__bar i { background: repeating-linear-gradient(45deg, var(--teal-600) 0 10px, var(--teal-500) 10px 20px); }
.studio .po-wallet.is-pending .po-prog__state svg { stroke: var(--color-primary-strong); padding: 0; }
.po-wallet.is-pending .po-prog__pct { color: var(--color-link-hover); }
/* Payouts page: how it works and your methods fold away */
.po-more { display: flex; flex-direction: column; gap: 14px; }
.po-more__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 18px; border: 1px dashed var(--teal-200); border-radius: var(--radius-lg); background: var(--surface-hover);
  color: var(--color-link-hover); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.po-more__btn:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.po-more__btn i { margin: 0 4px; color: var(--color-text-subtle); font-style: normal; }
.studio .po-more__btn svg { flex: none; width: 18px; height: 18px; stroke-width: 2.4; transition: transform var(--dur-fast); }
.po-more.is-open .po-more__btn { border-style: solid; }
.po-more.is-open .po-more__btn svg { transform: rotate(180deg); }
.po-more__in[hidden] { display: none; }
/* Payout methods: a list, one default */
.po-methods ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.po-methods li { padding: 12px 0; border-top: 1px solid var(--color-border); }
.po-methods li:first-child { padding-top: 0; border-top: 0; }
.po-methods > header .po-link { display: inline-flex; align-items: center; gap: 4px; }
.studio .po-link svg { width: 15px; height: 15px; stroke-width: 2.4; }
.po-methods__add { align-self: flex-start; gap: 4px; }
.studio .po-methods__add svg { width: 16px; height: 16px; }
.po-method__act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
.po-link--danger { color: #b4232f; }
.po-def { margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }
/* In the request dialog: pick where it goes */
.po-sec { display: flex; flex-direction: column; gap: 8px; }
.po-sec__l { color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.po-choose { display: flex; flex-direction: column; gap: 8px; }
.po-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--color-control-soft); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.po-opt:hover { border-color: var(--teal-200); }
.po-opt.is-on { border-color: var(--color-primary); background: var(--surface-hover); }
.po-opt > span:nth-of-type(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.po-opt strong { font-size: 14px; }
.po-opt small { color: var(--color-text-muted); font-size: 12px; }
.po-opt .po-method__ic { width: 38px; height: 38px; border-radius: 10px; }
.po-dlg .po-opt .po-method__ic svg { width: 19px; height: 19px; }
.po-addrow { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border: 1.5px dashed var(--color-control); border-radius: var(--radius-md); background: none; color: var(--color-link-hover); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.po-addrow:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.po-addrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* Distributed: the status sits on the cover's corner (Rohit) */
.sh-card__badge { position: absolute; top: 8px; right: 8px; z-index: 2; pointer-events: none; }
.sh-card__badge .spill { box-shadow: 0 2px 8px rgba(0, 0, 0, .14); background-color: #fff; }
.sh-card__badge .spill--live { background: #fff; color: var(--color-link-hover); }
@media (max-width: 767px) {
  .po-wallet__head { flex-direction: column; align-items: stretch; padding: 18px; }
  .po-wallet__act { align-items: stretch; text-align: left; }
  .po-wallet__act small { max-width: none; }
  .po-wallet__v { font-size: 30px; }
  .po-prog { padding: 14px 18px 12px; }
  .po-prog__scale span:nth-child(2) { display: none; }
  .po-method { flex-wrap: wrap; }
  .po-method__act { width: 100%; justify-content: flex-start; padding-left: 60px; }
}

/* A payout waiting on our team: teal outline (no blue / purple on money — Rohit) */
.spill--req { border: 1px solid var(--teal-200); background: #fff; color: var(--color-link-hover); }

/* Distributed: the songs table lines up with its headings; titles and artists are links (#126) */
.dr-th > :last-child { text-align: right; }
.dr-t strong a, .dr-t small a, .dist-xp__head strong a { color: inherit; text-decoration: none; }
.dr-t strong a:hover, .dr-t small a:hover, .dist-xp__head strong a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 2px; }
/* Payout history: amounts right-aligned so the digits line up */
.po-tr > :nth-child(3) { text-align: right; }
.po-tr > :nth-child(4) { padding-left: 24px; }
@container (max-width: 740px) { .po-tr > :nth-child(4) { padding-left: 0; } }

/* Studio song lists: ▶ on the picture, as in every song list (Bugs210) */
.slist__media { position: relative; flex: none; display: grid; }
.slist__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .38); color: #fff;
  cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.studio .slist__play svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.slist__item:hover .slist__play, .slist__play:focus-visible { opacity: 1; }
@media (hover: none) { .slist__play { opacity: 1; background: rgba(0, 0, 0, .22); } }
/* Who you tagged on an album: a line per role, with its tracks (Bugs210) */
.rel-p__on { display: block; overflow: hidden; color: var(--color-text-muted); font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.rel-p__on b { color: var(--color-text); font-weight: 600; }

/* Before publishing: schedule for the release date or go now; a scheduled release's audience (Bugs210) */
.confirm__card.pp-card { max-width: 460px; width: 100%; }
.confirm__text:has(.pp) { white-space: normal; text-align: left; }
.pp { display: flex; flex-direction: column; gap: 10px; }
.pp__intro { margin: 0 0 4px; color: var(--color-text-muted); line-height: 1.5; }
.pp-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--color-control-soft); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.pp-opt:hover { border-color: var(--teal-200); }
.pp-opt.is-on { border-color: var(--color-primary); background: var(--surface-hover); }
.pp-opt > span { display: flex; flex-direction: column; }
.pp-opt strong { color: var(--color-text); font-size: 14px; }
.pp-opt small { color: var(--color-text-muted); font-size: 13px; }
.pp-when { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; padding-left: 30px; transition: opacity var(--dur-fast); }
.pp-when .field { margin: 0; }
.pp-when.is-off { opacity: .4; pointer-events: none; }

/* First steps (Add Preview, new event, new page) use the full width like the steps after them (Bugs210):
   one field → the field and its button on one row; several → the button on the right, its own size */
.studio-start, .studio-start.studio-card { width: 100%; max-width: none; margin-inline: 0; }
.studio-start > .btn { align-self: flex-end; min-width: 200px; }
.studio-start--row { flex-direction: row; align-items: flex-start; }
.studio-start--row > .field { flex: 1; min-width: 0; margin: 0; }
.studio-start--row > .btn { align-self: flex-start; height: 50px; }
@media (max-width: 640px) { .studio-start--row { flex-direction: column; align-items: stretch; } .studio-start--row > .field { flex: none; } .studio-start > .btn, .studio-start--row > .btn { align-self: stretch; width: 100%; } }

/* ---- The Release step (Rohit): one list of settings — icon, name and what it means; the control on the right ---- */
.rel-list { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.rel-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 320px); align-items: center; gap: 16px; padding: 18px 20px; }
.rel-row + .rel-row { border-top: 1px solid var(--tg-50); }
.rel-row__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary-soft, var(--tg-50)); color: var(--color-link); }
.rel-row__ic svg, .acc__ic svg { width: 20px; height: 20px; }
.rel-row__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rel-row__t strong { font-size: 14px; font-weight: 600; color: var(--color-text); }
.rel-row__t small { font-size: 13px; line-height: 1.45; color: var(--color-text-muted); }
.rel-row__t small b { font-weight: 600; color: var(--color-text); }
.rel-row__c { min-width: 0; }
.rel-row.is-switch .rel-row__c { display: flex; justify-content: flex-end; }
.sf-sec--rel .sf-albumset { margin: 0 0 12px; }
/* #309: under Lyrics in an album's song it's a note for the section, not the field's hint — it isn't pulled up into the box */
.sf-sec > .field--area + .sf-hint.sf-albumset { margin-top: 2px; }

@media (max-width: 720px) {
  .rel-row { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; gap: 12px 14px; }
  .rel-row__c { grid-column: 1 / -1; }
  .rel-row.is-switch { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .rel-row.is-switch .rel-row__c { grid-column: auto; }
}

/* ---- Add a preview (#135): find the song by name, or paste its link ---- */
.pv-start { width: 100%; max-width: 640px; margin: 0 auto; }
.pv-hint { margin: 10px 4px 0; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.pv-list { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 6px; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; box-shadow: 0 12px 32px rgb(var(--teal-950-rgb) / .08); }
.pv-wait { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-size: 13px; color: var(--color-text-muted); }
.pv-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background-color .15s; }
.pv-row:hover, .pv-row:focus-visible { background: var(--teal-50); outline: none; }
.pv-row.is-taken { cursor: default; background: #fafafa; }
.pv-art { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--tg-50); color: var(--teal-300); }
.pv-art img { width: 100%; height: 100%; object-fit: cover; }
.pv-art svg { width: 22px; height: 22px; }
.pv-t { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pv-t strong { font-size: 14px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-t small { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-owner { color: #8a6d1f !important; }
.pv-d { flex: none; font-size: 12px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.pv-add { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: var(--color-primary); font-size: 12px; font-weight: 600; color: #fff; }
.pv-add svg { width: 13px; height: 13px; }
.pv-tag { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--tg-50); font-size: 12px; font-weight: 500; color: var(--tg-600); white-space: nowrap; }
.pv-acts { display: flex; flex: none; gap: 6px; }
.pv-acts .btn { height: 30px; padding: 0 10px; font-size: 12px; }
.ob-spin { width: 16px; height: 16px; border: 2px solid var(--teal-100); border-top-color: var(--color-primary); border-radius: 50%; animation: pv-spin .8s linear infinite; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .pv-row { flex-wrap: wrap; }
  .pv-d { display: none; }
  .pv-acts { width: 100%; padding-left: 60px; }
}
.pv-add { white-space: nowrap; flex-direction: row; }
.pv-add svg { flex: none; stroke: currentColor; stroke-width: 2.4; fill: none; }
/* The preview finder in the editors' layout (Rohit): full-width card, results inside it, the button at its foot */
.pvs-card { display: flex; flex-direction: column; gap: 12px; }      /* not .pv-card: that's the plan card on Privileges (var(--teal-700)) */
.pvs-card .pv-hint { margin: -2px 2px 0; text-align: left; }
.pvs-card .pv-list { margin: 4px 0 0; padding: 4px 0 0; border: 0; border-top: 1px solid var(--color-border); border-radius: 0; box-shadow: none; gap: 2px; }
.pvs-card .pv-row { padding: 10px 8px; }
.pv-foot { display: flex; justify-content: flex-end; }
.pv-foot .btn { min-width: 200px; }
.pv-add { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 14px; border-radius: 999px; line-height: 1; }
@media (max-width: 640px) { .pv-foot .btn { width: 100%; } }

/* Add a preview: Songs / Albums headings in the results; Previews list: Songs | Albums */
.pv-group { padding: 10px 8px 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-subtle); list-style: none; }
.pv-row.is-album .pv-art { border-radius: 8px; box-shadow: 3px 3px 0 -1px var(--tg-100); }
.pv-type { margin: 0 0 12px; }

/* #303: the PAN under the payout methods — what any TDS is shown against */
.po-pan { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.po-pan > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-pan strong { font-size: 14px; }
.po-pan small { color: var(--color-text-muted); font-size: 13px; }
.po-pan .po-link { display: inline-flex; align-items: center; gap: 4px; flex: none; }
/* #303: the search results' Add pill — the add-preview dialog's .pv-add (a column with a 12px top margin) leaked onto it
   and pushed it below the duration; in a result row it sits on the row's middle line */
.pv-row .pv-add { margin: 0; flex-direction: row; align-self: center; }
.pv-row .pv-d { align-self: center; }

/* #303 (Rohit): the song form, tidied
   - "Copy details from another song" sits in the first card's top line, never between cards
   - an album track: the title, the audio and what the song is in one card; Credits, Video and More Details fold away;
     Done at the end folds the track (it saves as you type)
   - an album's Basic Info: the artwork, title and artists, then its details, in one card */
.sf-copylink { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; white-space: nowrap; }
.sf-copylink svg { width: 15px; height: 15px; }
.sf-sec--basic > .sf-head { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.sf-sec--basic > .sf-head + * { padding-top: 16px; border-top: 1px solid var(--card-border); }
.sf-fold > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; }
.sf-fold > summary::-webkit-details-marker { display: none; }
.sf-fold > summary h3 { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.sf-fold > summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) var(--ease); color: var(--color-text-muted); }
.sf-fold[open] > summary svg { transform: rotate(180deg); }
.sf-fold:not([open]) { gap: 0; }
.sf-fold[open] { display: block; }
.sf-fold[open] > :not(summary) { margin-top: 14px; }
.sf-done { display: flex; justify-content: flex-end; }
.sf-done .btn svg { width: 15px; height: 15px; }
.al-track.is-uploading .al-track__open small { color: var(--color-link-hover); }
.sf-albumset { display: block; }
/* #304 (Rohit): the preview search's × — clears the box and closes the results (Esc and a click elsewhere close them too) */
.pvs-card [data-field="link"] { position: relative; }
.pvs-card [data-field="link"] .field__input { padding-right: 52px; }
.pv-clear { position: absolute; top: 50%; right: 10px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--color-text-muted); cursor: pointer; transform: translateY(-50%); transition: background-color var(--dur-fast), color var(--dur-fast); }
.pv-clear:hover, .pv-clear:focus-visible { background: var(--color-primary-soft); color: var(--color-link-hover); outline: none; }
.pv-clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pv-clear[hidden] { display: none; }
/* #304 (Rohit): moving to another profile says so — the bar's button and each row's Move */
.studio-bar__select, .slist__move { display: inline-flex; align-items: center; gap: 6px; }
.studio-bar__select svg, .slist__move svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.studio.is-selecting .slist__move, [data-movable].is-selecting .slist__move { display: none; }
/* #309 (Rohit): the upload tray floats — its title bar is the handle (uploads.js: drag anywhere, stays put, double click = back) */
.upt__head { cursor: grab; touch-action: none; user-select: none; }
.upt.is-dragging { box-shadow: var(--shadow-lg, 0 18px 40px rgb(16 38 45 / .22)); }
.upt.is-dragging .upt__head { cursor: grabbing; }
.upt__head button { cursor: pointer; }

/* ---- pages.css ---- */
/* =====================================================================
   Pages (decision #92) — Studio list, the editor (pg-*), the public
   one-page website (pgp-*), dialogs (create, offering, enquire, convert)
   ===================================================================== */

/* ---- Studio → Pages ----------------------------------------------------------------------------- */
.pg-list__h { margin: var(--space-5) 0 var(--space-3); font-size: 16px; }
.pg-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pg-list__empty { color: var(--color-text-muted); font-size: 14px; }
.pg-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.pg-item__main { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.pg-item__av { flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-muted); }
.pg-item__av img { width: 100%; height: 100%; object-fit: cover; }
.pg-item__info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pg-item__info strong, .pg-item__info small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pg-item__info small { color: var(--color-text-muted); font-size: 13px; }
.pg-item__pct { flex: none; width: 36px; font-size: 12px; color: var(--color-text-muted); }
.pg-meter { flex: none; display: block; width: 72px; height: 6px; overflow: hidden; border-radius: 6px; background: #eef0f1; }
.pg-meter > span { display: block; height: 100%; border-radius: 6px; background: var(--color-primary); }
.pg-meter--lg { width: 160px; height: 8px; }
@media (max-width: 560px) { .pg-item .pg-meter, .pg-item__pct { display: none; } }

/* ---- Create dialog ------------------------------------------------------------------------------- */
.confirm__card.pg-new-card, .confirm__card.pg-dlg-card { max-width: 560px; width: 100%; }
.confirm__text:has(.pg-dlg) { white-space: normal; text-align: left; }
.pg-dlg { display: flex; flex-direction: column; gap: 14px; }
.pg-new__step { margin: 0; font-weight: 600; color: var(--color-text); }
.pg-new__url { margin: -6px 0 0; font-size: 13px; color: var(--color-text-muted); }
.pg-new__rest { display: flex; flex-direction: column; gap: 14px; }
.pg-new__rest[hidden] { display: none; }
.pg-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pg-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1.5px solid var(--color-control-soft); border-radius: var(--radius-md); background: #fff; font: inherit; text-align: left; color: var(--color-text); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.pg-cat:hover { border-color: var(--teal-200); }
.pg-cat.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pg-cat__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); }
.pg-cat.is-on .pg-cat__icon { background: #fff; }
.pg-cat__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-cat strong { font-size: 14px; }
.pg-cat small { font-size: 12px; line-height: 1.35; color: var(--color-text-muted); }
.pg-new-card.has-cat .pg-cat small { display: none; }
.pg-cats--sm .pg-cat { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; }
@media (max-width: 420px) { .pg-cats { grid-template-columns: minmax(0, 1fr); } }

/* ---- Editor ------------------------------------------------------------------------------------- */
.pg label.field, .pg-dlg label.field { display: block; }
.pg .field__input, .pg-dlg .field__input { padding-left: 14px; }
.pg .field__label, .pg-dlg .field__label { left: 14px; }
.pg { display: flex; flex-direction: column; gap: var(--space-4); }
.pg .studio-head { margin-bottom: 0; }
.pg-hero { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.pg-hero__cover { position: relative; display: block; width: 100%; aspect-ratio: 3 / 1; max-height: 220px; padding: 0; border: 0; background: linear-gradient(120deg, var(--teal-500) 0%, var(--teal-300) 55%, var(--teal-150) 100%); cursor: pointer; overflow: hidden; }
.pg-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-hero__hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(17, 17, 17, 0.6); color: #fff; font-size: 12px; }
.pg-hero__hint svg, .pg-hero__av span svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.pg-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 0 var(--space-5) var(--space-4); }
.pg-hero__av { position: relative; flex: none; width: 104px; height: 104px; margin-top: -44px; padding: 0; overflow: hidden; border: 4px solid #fff; border-radius: var(--radius-lg); background: var(--color-surface-muted); cursor: pointer; }
.pg-hero__av img { width: 100%; height: 100%; object-fit: cover; }
.pg-hero__av span { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(17, 17, 17, 0.6); color: #fff; }
.pg-hero__who { flex: 1; min-width: 200px; }
.pg-hero__who h2 { margin: 0; font-size: 22px; }
.pg-hero__cat { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-link-hover); }
.pg-hero__url { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted); }
.pg-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pg-done { padding: 0 var(--space-5) var(--space-4); }
.pg-done:empty { display: none; }
.pg-done__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
.pg-nav { position: sticky; top: calc(var(--header-height, 64px) + 4px); z-index: 4; display: flex; gap: 6px; overflow-x: auto; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.96); scrollbar-width: none; backdrop-filter: blur(6px); }
.pg-nav::-webkit-scrollbar { display: none; }
.pg-nav a { flex: none; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 13px; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.pg-nav a:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.pg-secs { display: flex; flex-direction: column; gap: var(--space-4); }
.pg-sec { scroll-margin-top: calc(var(--header-height, 64px) + 64px); }
.pg-sec h2, .pg-danger h2 { margin: 0; font-size: 17px; }
.pg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pg-fields > .pg-q, .pg-fields > .field--area, .pg-fields > [data-show-if], .pg-fields > .pg-toggle { grid-column: 1 / -1; }
.pg-fields > [data-show-if][hidden] { display: none; }
@media (max-width: 640px) { .pg-fields, .pg .sf-grid, .pg-dlg .sf-grid { grid-template-columns: minmax(0, 1fr); } }
.pg-q { display: flex; flex-direction: column; gap: 8px; }
/* a chip question's label reads as its heading, as a feature group's (#270) — not light grey beside the chips */
.pg-q > .sf-label { font-size: 14px; font-weight: 600; color: var(--color-text); }
.pg-q .sf-label small { font-weight: 400; color: var(--color-text-subtle); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff; font: inherit; font-size: 13px; color: var(--color-text); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.pg-chip:hover { border-color: var(--teal-200); }
.pg-chip.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 500; }
.pg-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; }
.pg-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
/* From · Up to (· Per) in one row of equal boxes; stacked when the box is narrow (#180) */
.pg-money { container-type: inline-size; }
.pg-money__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pg-money__row:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 440px) { .pg-money__row:has(> :nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-money__row > :nth-child(3) { grid-column: 1 / -1; } }   /* Per under From · Up to, full width — never a lone half */
.pg-money__row .field { min-width: 0; }
.pg-money .pg-toggle { margin-top: 2px; }
.pg-legacy { padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface-muted); font-size: 13px; }
.pg-legacy summary { cursor: pointer; font-weight: 500; }
.pg-legacy pre { margin: 8px 0 0; white-space: pre-wrap; font: inherit; }
.pg-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--tg-50); color: var(--color-text-muted); cursor: pointer; }
.pg-x:hover { background: #ececec; color: var(--color-text); }
.pg-x[disabled] { opacity: 0.35; cursor: default; }
.pg-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* An empty list that has something worth saying (an event's lineup, a page's members): a placeholder card the size of a
   row, in the soft teal of every "nothing here yet" — never a loose line of text (#200) */
.pg-empty { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 12px 16px; border: 1.5px dashed var(--teal-150); border-radius: var(--radius-md);
  background: var(--surface-hover); font-size: 13px; color: var(--color-text-muted); text-align: center; list-style: none; }

/* Location */
.pg-place { position: relative; }
.pg-place__list { position: absolute; left: 0; right: 0; z-index: 6; }
.pg-pin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pg-pin .field { flex: 1; min-width: 220px; }
.pg-pin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.pg-map { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pg-map__frame { display: block; width: 100%; height: 240px; border: 0; border-radius: var(--radius-md); background: var(--color-surface-muted); }

/* Hours */
.pg-seg { align-self: flex-start; flex-wrap: wrap; }
.pg-hours { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.pg-hours li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 40px; }
.pg-hours .pg-toggle { width: 130px; }
.pg-hours__slot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-muted); }
.pg-hours__slot input { padding: 6px 8px; border: 1px solid var(--color-control); border-radius: var(--radius-sm); font: inherit; font-size: 14px; color: var(--color-text); }
.pg-hours__closed { font-size: 13px; color: var(--color-text-subtle); }
/* The hours box: the toggle, the days, Copy, the note — spaced like every form (#180) */
[data-hours] { display: flex; flex-direction: column; gap: 14px; }
[data-hours] > .pg-hours { margin: 0; }
/* "Add a break": a quiet text button beside the times, not a bright link */
.pg-hours__brk { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.pg-hours__brk svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pg-hours__brk:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.pg-hours__copy { align-self: flex-start; }
.pg-hours__copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Offerings — and an event's contacts: the rows of Work Experience (settings.css .set-exp__*, #209) */
.pg-offs { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; container: setexp / inline-size; }
.set-exp__btn:disabled { opacity: .4; cursor: default; }
.pg-dur { display: flex; gap: 10px; }
.pg-dur > * { flex: 1; min-width: 0; }

/* Features */
/* Every list one way (#268): open groups under light labels, a search above a long one, a tick stays in place; equipment's
   Models and Quantities last, a row for each ticked item */
/* each group a band of its own (#270): a clear heading with its ticked count, the chips under it, a hairline after */
.pg-feat__g { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--card-border); }
.pg-feat__t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); }
.pg-feat__n { min-width: 20px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 600; text-align: center; }
.pg-feat__notes { margin-top: 18px; }
.pg-feat__notes ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.pg-feat__notes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 6px 6px 12px; border: 1px solid var(--card-border); border-radius: var(--radius-md); font-size: 14px; }
.pg-feat__name { flex: 0 1 200px; min-width: 0; font-weight: 500; }
.pg-feat__x { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-left: auto; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; }
.pg-feat__x:hover { background: var(--tg-50); color: var(--color-text); }
.pg-feat__x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pg-feat__search { margin-bottom: 14px; }
.pg-feat__more { margin-top: 14px; }
.pg-note { flex: 1; min-width: 160px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; }

/* Members (#209): rows like Work Experience (settings.css .set-exp__*), and the same form in place */
.pg-mems { display: flex; flex-direction: column; container: setexp / inline-size; }
.pg-mem__form { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
.pg-mem__form .set-actions { margin: 0; }

/* Gallery */
.pg-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pg-gal__item { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-muted); }
.pg-gal__item img { width: 100%; height: 100%; object-fit: cover; }
.pg-gal__act { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.pg-gal__act .pg-x { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.9); }
.pg-gal__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 3 / 2; border: 2px dashed var(--teal-200); border-radius: var(--radius-md); background: var(--surface-hover); font: inherit; font-size: 13px; color: var(--color-link-hover); cursor: pointer; }
.pg-gal__add svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Links */
.pg-link { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-bottom: 10px; }
.pg-link .pg-x { margin-top: 10px; }
@media (max-width: 560px) { .pg-link { grid-template-columns: minmax(0, 1fr) auto; } .pg-link > :first-child { grid-column: 1 / -1; } }
.pg-danger { border-color: #f3d4d6 !important; }

/* Convert dialog */
.pg-conv__what { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: 13px; }
.pg-conv__what > div { padding: 10px 12px; border-radius: var(--radius-md); background: var(--color-surface-muted); }
.pg-conv__what ul { margin: 6px 0 0; padding-left: 18px; color: var(--color-text-muted); }
.pg-conv__what li + li { margin-top: 4px; }
.pg-conv [data-rest] { display: flex; flex-direction: column; gap: 14px; }
.pg-conv [data-rest][hidden] { display: none; }
.pg-conv__warn { padding: 10px 12px; border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-size: 13px; }
@media (max-width: 520px) { .pg-conv__what { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   The public page
   ===================================================================== */
.pgp { width: 100%; }
.pgp-hero { overflow: hidden; border-radius: var(--radius-lg); background: #fff; }
.pgp-hero__cover { height: clamp(140px, 24vw, 280px); overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(120deg, var(--teal-500) 0%, var(--teal-300) 55%, var(--teal-150) 100%); }
.pgp-hero__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pgp-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 0 var(--space-4) var(--space-4); }
.pgp-hero__av { flex: none; width: 128px; height: 128px; margin-top: -56px; overflow: hidden; border: 5px solid #fff; border-radius: var(--radius-lg); background: var(--color-surface-muted); box-shadow: var(--shadow-sm); }
.pgp-hero__av img { width: 100%; height: 100%; object-fit: cover; }
.pgp-hero__who { flex: 1; min-width: 220px; }
.pgp-hero__cat { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-link-hover); }
.pgp-hero__who h1 { margin: 2px 0 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; }
.pgp-hero__line { margin: 6px 0 0; font-size: 15px; color: var(--color-text); }
.pgp-hero__meta { margin: 6px 0 0; font-size: 14px; color: var(--color-text-muted); }
.pgp-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pgp-hero__act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.pgp-open { display: inline-flex; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--tg-50); color: var(--color-text-muted); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.pgp-open.is-open { background: #e5f6ea; color: #1f7a3a; }
@media (max-width: 640px) {
  .pgp-hero__av { width: 96px; height: 96px; margin-top: -40px; }
  .pgp-hero__act { width: 100%; }
  .pgp-hero__act .btn--primary { flex: 1; white-space: nowrap; }
}
.pgp-nav { position: sticky; top: calc(var(--header-height, 64px) + 4px); z-index: 4; display: flex; gap: 4px; overflow-x: auto; margin: 8px 0 var(--space-4); padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.96); scrollbar-width: none; backdrop-filter: blur(6px); }
.pgp-nav::-webkit-scrollbar { display: none; }
.pgp-nav a { flex: none; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 14px; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.pgp-nav a:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.pgp-body { display: flex; flex-direction: column; gap: var(--space-4); }
.pgp-sec { scroll-margin-top: calc(var(--header-height, 64px) + 70px); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.pgp-sec > h2 { margin: 0 0 var(--space-4); font-size: 19px; }
.pgp-sub { margin: var(--space-4) 0 var(--space-3); font-size: 14px; color: var(--color-text-muted); }
.pgp-bio { margin: 0 0 var(--space-4); font-size: 15px; line-height: 1.65; white-space: pre-line; }
.pgp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 24px; margin: 0; }
.pgp-fact dt { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-subtle); }
.pgp-fact dd { margin: 4px 0 0; font-size: 15px; }
.pgp-fact--multi, .pgp-fact--list, .pgp-fact--textarea { grid-column: 1 / -1; }
.pgp-fact--textarea dd { white-space: pre-line; line-height: 1.55; }
.pgp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* One chip for every fact (#232) — skills, genres, languages, tags: grey with dark text; a link turns teal on hover. Teal fill
   is for what's selected (filter chips), so a fact chip never uses it */
.pgp-tags span, .pgp-chips span { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--tg-50); color: var(--color-text); font-size: 13px; }
.pgp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); }
.pgp-list { margin: 0; padding-left: 18px; line-height: 1.6; }
/* What a page offers (#264): ticks, one per line, side by side where there's room — readable as chips, but not clickable-looking */
.pgp-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 16px; margin: 2px 0 0; padding: 0; list-style: none; }
.pgp-ticks li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.pgp-ticks li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pgp-offs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pgp-off { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pgp-off h3 { margin: 0; font-size: 15px; }
.pgp-off p { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.pgp-off__meta { color: var(--color-text) !important; }
.pgp-off__ask { align-self: flex-start; margin-top: auto; padding-top: 6px; font-size: 13px; }
.pgp-feat { margin-bottom: var(--space-4); }
.pgp-classfacts { margin-top: var(--space-4); }     /* a studio's class facts under its courses (#260) */
/* Short sections as the columns of one card (#260, "Classes and Facilities"): side by side past thin lines, as Visit,
   when the card has the room; under each other, a line between, when it hasn't */
.pgp-details { container-type: inline-size; }
.pgp-dgrid { display: grid; gap: 0; }
.pgp-dcol { min-width: 0; }
.pgp-dcol + .pgp-dcol { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--card-border); }
.pgp-dcol > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; }
.pgp-dcol > h3 svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pgp-dcol .pgp-feat { margin-bottom: 14px; }
.pgp-dcol .pgp-feat:last-child { margin-bottom: 0; }
.pgp-dcol .pgp-feat h3 { margin-bottom: 6px; font-size: 12px; }
.pgp-dcol .pgp-feat ul { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pgp-dval { margin: 0; font-size: 14px; }
/* up to three columns side by side from 720px of card; four (a studio with classes) from 960px */
@container (min-width: 720px) {
  .pgp-dgrid:not([data-n="4"]) { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .pgp-dgrid:not([data-n="4"]) > .pgp-dcol { padding: 0 24px; }
  .pgp-dgrid:not([data-n="4"]) > .pgp-dcol:first-child { padding-left: 0; }
  .pgp-dgrid:not([data-n="4"]) > .pgp-dcol:last-child { padding-right: 0; }
  .pgp-dgrid:not([data-n="4"]) > .pgp-dcol + .pgp-dcol { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--card-border); }
}
@container (min-width: 960px) {
  .pgp-dgrid[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pgp-dgrid[data-n="4"] > .pgp-dcol { padding: 0 20px; }
  .pgp-dgrid[data-n="4"] > .pgp-dcol:first-child { padding-left: 0; }
  .pgp-dgrid[data-n="4"] > .pgp-dcol:last-child { padding-right: 0; }
  .pgp-dgrid[data-n="4"] > .pgp-dcol + .pgp-dcol { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--card-border); }
}
.pgp-feat:last-child { margin-bottom: 0; }
.pgp-feat h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: 0.03em; }
.pgp-feat ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.pgp-feat li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.pgp-feat li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--color-primary); stroke-width: 2.5; }
.pgp-feat li small { color: var(--color-text-muted); }
.pgp-mems { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pgp-mem { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: var(--radius-md); color: inherit; text-align: center; text-decoration: none; }
a.pgp-mem:hover { background: var(--color-surface-muted); }
.pgp-mem .avatar { width: 76px; height: 76px; margin-bottom: 4px; }
.pgp-mem strong { font-size: 14px; }
.pgp-mem small { font-size: 13px; color: var(--color-text-muted); }
.pgp-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pgp-gal__item { aspect-ratio: 3 / 2; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-md); background: var(--color-surface-muted); cursor: zoom-in; }
.pgp-gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base, 200ms) var(--ease); }
.pgp-gal__item:hover img { transform: scale(1.03); }
.confirm__card.pgp-lb-card { max-width: 960px; width: 100%; }
.confirm__card.pgp-lb-card .confirm__title { display: none; }
.pgp-lb img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-md); background: #111; }
/* #313: one picture on its own (an event's poster) carries no Previous / Next row, so it may stand that much taller */
.pgp-lb:not(:has(.pgp-lb__nav)) img { max-height: 78vh; }
.pgp-lb__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; }
.pgp-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.pgp-visit h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.pgp-visit h3 svg { width: 18px; height: 18px; fill: none; stroke: var(--color-primary-strong); stroke-width: 2; }
.pgp-hours table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pgp-hours th, .pgp-hours td { padding: 6px 0; border-bottom: 1px solid var(--color-border); text-align: left; font-weight: 400; }
.pgp-hours th { color: var(--color-text-muted); width: 42%; }
.pgp-hours tr.is-today th, .pgp-hours tr.is-today td { font-weight: 600; color: var(--color-text); }
.pgp-where { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pgp-where p { margin: 0; font-size: 14px; line-height: 1.5; }
.pgp-where .pg-map__frame { height: 220px; }
.pgp-links { display: flex; flex-wrap: wrap; gap: 8px; }
/* A profile's links: the Artist Plus store chips — the brand mark in its own colour on a white pill (#179) */
.pgp-link { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border: 1px solid var(--card-border); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.pgp-link:hover { border-color: color-mix(in srgb, var(--b, var(--color-primary)) 45%, #fff); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--b, var(--color-primary)) 60%, transparent); transform: translateY(-1px); color: var(--color-text); }
.pgp-songs { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pgp-songs > li { display: flex; align-items: center; gap: 4px; }
.pgp-song { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 0; border-radius: var(--radius-md); background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.pgp-song:hover { background: var(--color-surface-muted); }
.pgp-song__art { position: relative; flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-primary-soft); }
.pgp-song__art img { width: 100%; height: 100%; object-fit: cover; }
.pgp-song__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(17, 17, 17, 0.35); color: #fff; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.pgp-song:hover .pgp-song__play { opacity: 1; }
.pgp-song__play svg { width: 18px; height: 18px; }
.pgp-song__info { display: flex; flex-direction: column; min-width: 0; }
.pgp-song__info small { overflow: hidden; color: var(--color-text-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
/* A long title takes two lines at most, like every other song row (it wrapped to five on phones) */
.pgp-song__info strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.pgp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--space-4); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-primary-soft); }
.pgp-cta div { display: flex; flex-direction: column; gap: 2px; }
.pgp-cta span { font-size: 14px; color: var(--color-text-muted); }
.pgp-emptynote { padding: var(--space-6) 0; text-align: center; }
@media (max-width: 640px) { .pgp-sec { padding: var(--space-4); } }
/* Two columns (decision #94): what the page offers on the left; enquire, visit, links on the right */
.pgp-side .pgp-sec { padding: var(--space-4) var(--space-5); }
.pgp-side .pgp-sec > h2 { font-size: 17px; }
.pgp-side .pgp-visit { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.pgp-side .pgp-where .pg-map__frame { height: 200px; }
.pgp-side .pgp-mems { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.pgp-cta--side { flex-direction: column; align-items: stretch; margin-top: 0; }
.pgp-managed { display: flex; align-items: center; gap: 12px; padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; color: inherit; text-decoration: none; }
.pgp-managed:hover { border-color: var(--color-primary); }
.pgp-managed .avatar { flex: none; width: 40px; height: 40px; }
.pgp-managed span:last-child { display: flex; flex-direction: column; }
.pgp-managed small { font-size: 12px; color: var(--color-text-subtle); }
.pgp-managed strong { font-size: 14px; }
/* #313: the pull-up was tuned for the editor, where the row above has padding. In About the row has none, so the
   hint landed on top of the @username. It sits under the row in both places now. */
.pgp-managed__note { margin: var(--space-2) 4px 0; }
/* the team's own pages (#313, app.teamChip): a Listen On chip — the page's round picture, its name (the chips' own text
   colour, Rohit: grey read as disabled), the ⓘ — but not a link: no hover lift */
.team-chip { gap: 8px; padding: 5px 10px 5px 5px; cursor: default; }
.team-chip:hover { border-color: var(--card-border); box-shadow: none; transform: none; color: var(--color-text); }
.team-chip__pic { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--color-surface-muted); }
.team-chip .info-tip { width: 20px; height: 20px; margin-left: -2px; color: var(--color-text-subtle); }
.pgp-link .pf-ic { width: 20px; height: 20px; color: var(--b, var(--color-text)); }
.pgp-link .pf-ic svg { fill: currentColor; stroke: none; }          /* brand marks are filled shapes (they were drawn as outlines) */
.pgp-link .pf-ic .pf-ic__line { fill: none; stroke: currentColor; stroke-width: 2; }

/* Create a page — a page of its own (/studio/pages/new, #104) */
.pg-new--page { display: flex; flex-direction: column; gap: var(--space-5); }
.pg-new--page .sf-grid { align-items: start; }
.pg-new--page [data-rest][hidden] { display: none; }
.pg-new--page .pg-cats { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pg-new--page .pg-cat { padding: 16px; }
.studio [data-pg-filters] + [data-pg-list] { margin-top: 16px; }    /* Pages list under its sort / filter bar, like the other Studio lists */

/* The course / room / service dialog (Bugs210): wider, nothing cut off; Cancel and Save side by side like other dialogs */
.confirm__card.pg-off-card { max-width: 640px; }
.pg-dlg__act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.pg-dlg__act .btn { min-width: 120px; }
@media (max-width: 560px) { .pg-dlg__act { flex-direction: column-reverse; } .pg-dlg__act .btn { width: 100%; } }
.pg-other[hidden] { display: none; }
.pg-money .sf-label small { font-weight: 400; color: var(--color-text-subtle); }

/* The gallery editor (gallery.js, Bugs210): several photos at once, an upload tile each, edit / remove, drag to reorder */
.pg-gal.is-dropping { outline: 2px dashed var(--color-primary); outline-offset: 6px; border-radius: var(--radius-md); }
.pg-gal__item[draggable="true"] { cursor: grab; }
.pg-gal__item.is-dragging { opacity: .4; }
.pg-gal__item.is-target { box-shadow: 0 0 0 3px var(--color-primary); }
.pg-gal__move { position: absolute; bottom: 6px; left: 6px; right: 6px; display: flex; justify-content: space-between; opacity: 0; transition: opacity var(--dur-fast); }
.pg-gal__act { opacity: 0; transition: opacity var(--dur-fast); }
.pg-gal__item:hover .pg-gal__act, .pg-gal__item:hover .pg-gal__move, .pg-gal__item:focus-within .pg-gal__act, .pg-gal__item:focus-within .pg-gal__move { opacity: 1; }
@media (hover: none) { .pg-gal__act, .pg-gal__move { opacity: 1; } }
.pg-gal__move .pg-x { width: 28px; height: 28px; background: rgba(255, 255, 255, .9); }
.pg-gal__item svg, .pg-gal__move svg, .pg-gal__act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pg-gal__item.is-up { display: grid; place-items: center; }
.pg-gal__item.is-up img { position: absolute; inset: 0; opacity: .45; }
.pg-gal__item.is-up > svg { width: 28px; height: 28px; color: var(--color-text-subtle); }
.pg-gal__item.is-up small { position: absolute; bottom: 18px; left: 0; right: 0; color: var(--color-text); font-size: 12px; font-weight: 600; text-align: center; }
.pg-gal__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .7); }
.pg-gal__bar i { display: block; height: 100%; background: var(--color-primary); transition: width .2s; }
label.pg-gal__add { cursor: pointer; text-align: center; padding: 8px; }
.pg-gal__add small { color: var(--color-text-subtle); font-size: 12px; }

/* ---- A course's own page (Bugs210) ------------------------------------------------------------------ */
.crs { display: flex; flex-direction: column; gap: 22px; }
.crs-hero { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg, var(--teal-700), var(--teal-600) 60%, var(--teal-400)); color: #fff; }
.crs-hero::before { content: ''; position: absolute; inset: 0; background: var(--crs-cover, none) center / cover no-repeat; filter: blur(2px); transform: scale(1.04); opacity: .35; }
.crs-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--teal-900-rgb) / .85), rgb(var(--teal-900-rgb) / .35)); }
.crs-hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 40px 40px 34px; }
.crs-eyebrow { padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.crs-hero h1 { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; }
.crs-school { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.crs-school .avatar { width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, .7); }
.crs-school > span:last-child { display: flex; flex-direction: column; }
.crs-school strong { font-size: 15px; }
.crs-school small { color: var(--color-on-dark-soft); font-size: 13px; }
.crs-school:hover strong { text-decoration: underline; }
.crs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.crs-chips li { padding: 6px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .16); font-size: 13px; font-weight: 600; }
.crs-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.crs-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.crs-desc { margin: 0; color: var(--color-text); line-height: 1.7; white-space: pre-line; }
.crs-desc--none { color: var(--color-text-muted); }
.crs-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.crs-facts div { padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-hover); }
.crs-facts dt { color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.crs-facts dd { margin: 4px 0 0; color: var(--color-text); font-size: 15px; font-weight: 600; }
.crs-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.crs-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.crs-card:hover { border-color: var(--color-primary); box-shadow: 0 6px 18px rgb(var(--teal-900-rgb) / .08); }
.crs-card small { color: var(--color-text-muted); font-size: 13px; }
.crs-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.crs-cta { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--teal-200); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--teal-50), #fff); }
.crs-cta strong { font-size: 16px; }
.crs-cta span { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.crs-cta .crs-price { color: var(--color-text); font-size: 22px; font-weight: 700; }
.crs-cta .btn { margin-top: 6px; }
.crs-schoolcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); text-decoration: none; }
.crs-schoolcard__cover { display: block; height: 96px; background: var(--color-primary-soft); }
.crs-schoolcard__cover img { width: 100%; height: 100%; object-fit: cover; }
.crs-schoolcard__body { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 34px 18px 16px; }
.crs-schoolcard__body .avatar { position: absolute; top: -26px; left: 18px; width: 52px; height: 52px; border: 3px solid #fff; }
.crs-schoolcard small { color: var(--color-text-muted); font-size: 13px; }
.crs-schoolcard__go { margin-top: 8px; color: var(--color-link-hover); font-size: 13px; font-weight: 600; }
.crs-schoolcard:hover { border-color: var(--color-primary); }
.pgp-off h3 a { color: inherit; text-decoration: none; }
.pgp-off h3 a:hover { color: var(--color-link-hover); text-decoration: underline; }
@media (max-width: 900px) { .crs-body { grid-template-columns: minmax(0, 1fr); } .crs-side { position: static; } .crs-hero__in { padding: 28px 22px; } }
.crs-schoolcard:not(:has(.crs-schoolcard__cover)) .crs-schoolcard__body { padding-top: 18px; }
.crs-schoolcard:not(:has(.crs-schoolcard__cover)) .crs-schoolcard__body .avatar { position: static; margin-bottom: 8px; border: 0; }

/* Who can tag this page: the shared dropdown, half width on wide screens */
/* (#209: "Who can tag" is the Privacy & Tagging row on every page — .set-tagging) */

/* An artist page's Skills and Work Experience in its editor (#134): the Settings cards, flat inside the section */
.set-pro { display: flex; flex-direction: column; gap: 14px; }
.set-pro .set-card { margin: 0; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; }
.set-pro .set-card__title { font-size: 15px; }

/* ---- One engine for the Studio's page editor and Settings' profile tabs (#207) --------------------------------- */
.pg--cards .pg-secs { gap: var(--space-4); }
/* A card's title bar (#208): "Saving… / Saved", then its switch (shown on the profile or not) or its lock (private) */
.pg-sec__side { display: inline-flex; flex: none; align-items: center; gap: 12px; margin-left: auto; }
.pg-sec__side .field__lock, .set-toggle.is-locked .field__lock { position: static; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--tg-50); color: var(--color-text-muted); transform: none; }   /* a grey square: visible at a glance (#209) */
.pg-show { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }   /* "Show on profile" beside its switch (#209) */
.pg-sec__body { display: flex; flex-direction: column; gap: 16px; }
.pg-sec__body[hidden] { display: none; }
.pg-sec__body > .sf-addrole { align-self: flex-start; }
.set-pro--bare { gap: 16px; }                                   /* Skills: the card's own rhythm (16px), Studio and Settings alike */
.set-pro--bare .set-tags, .set-pro--bare .set-tags + .set-tags { margin: 0; }   /* the 16px gap only — as Genres & Languages */
/* Rows in Privacy & Tagging: the Settings rows, inside the card */
.pg-sec .set-toggle { padding: 0 0 14px; border-bottom: 0; }   /* one line between the rows: the tag row draws it */
.set-toggle.is-locked .field__lock { position: static; flex: none; transform: none; }   /* the lock beside the row, where its switch would be */
.pg-sec .set-tagging { margin-top: 0; }
.pg-sec .set-toggle + .set-tagging { padding-top: 14px; }
.pg-sec > .set-tagging:first-of-type { padding-top: 0; border-top: 0; }
/* Lists — the layout everywhere (#201, #207): rows lift on hover, round icon buttons, a dashed card when empty */
.pg-off--new { list-style: none; }
.pg-x { width: 34px; height: 34px; background: var(--tg-50); transition: background-color .15s ease, color .15s ease; }
.pg-off:is(:hover, :focus-within) .pg-x { background: #fff; }
.pg-x:not([disabled]):is(:hover, :focus-visible) { background: var(--color-primary-soft); color: var(--color-link-hover); }
.pg-x--del:not([disabled]):is(:hover, :focus-visible) { background: var(--danger-soft); color: var(--color-error); }
.pg-x svg { width: 15px; height: 15px; }
.pg-sec > .sf-addrole { align-self: flex-start; }
/* Management & Label (#209): Managed by · Signed by as rows like Work Experience; the form, its workplace picker */
.pg-mgmt { display: flex; flex-direction: column; gap: 12px; container: setexp / inline-size; }
.pg-rep__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 12px; color: var(--color-text-muted); }
.pg-rep__pill { padding: 1px 8px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-weight: 600; }
.pg-rep__form { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
.pg-rep__field { position: relative; }
.pg-rep__form .pg-rep__field.is-linked .field__input { padding-left: 54px; padding-right: 40px; border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.pg-rep__form .pg-rep__field.is-linked .field__label { left: 54px; color: var(--color-link-hover); }
.pg-rep__form .pg-rep__field.is-typed .field__input { padding-right: 40px; }
.pg-rep__list { top: calc(100% + 4px); }
.pg-rep__form .set-org__linked { margin: -4px 0 0; }
.pg-rep__form .set-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }
/* Booking Contact */
.pg-contact { display: flex; flex-direction: column; gap: 14px; }
.pg-contact__by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pg-contact__by .sf-label { margin: 0; }
.pg-place { display: flex; flex-direction: column; gap: 8px; }
.pg-place .place__gps { align-self: flex-start; }      /* "Use my current location" under the city, at its left (#207) */
/* A member added by name (#224): Invite on its row, the form opens under the state line */
.pg-mem2 .set-exp__more > .btn { margin-top: 6px; }
.pg-mem__inv { padding: 8px 0 2px; }

/* A course's page (var(--teal-600)): Course Details beside About — each detail a label and its answer, two or three a row */
.crs-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 24px; }
.crs-dgrid .ap-fact { margin: 0; }
/* its banner: what it teaches · level · how — plain words, not chips (they open nothing) */
.crs-hfacts { margin: 10px 0 0; color: var(--color-on-dark-soft); font-size: 15px; font-weight: 500; }

/* The facts a public page carries before its script runs (#313, search engines and link previews): a plain, readable
   block in the page's own type; the script replaces it the moment it loads */
.ssr-body { display: grid; gap: 18px; max-width: 920px; margin: 22px auto 0; padding: 0 4px; }
.ssr-sec h2 { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.ssr-sec p { margin: 0; line-height: 1.55; }
.ssr-credits { margin: 0; display: grid; gap: 6px 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ssr-credits > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; }
.ssr-credits dt { color: var(--color-text-subtle, #5b6a69); font-size: 13px; }
.ssr-credits dd { margin: 0; }
.ssr-tracks { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.ssr-tracks span { color: var(--color-text-subtle, #5b6a69); margin-left: 6px; }
.ssr-tracks time { color: var(--color-text-subtle, #5b6a69); margin-left: 6px; font-variant-numeric: tabular-nums; }
.ssr-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ssr-chips a { display: inline-block; padding: 6px 12px; border: 1px solid var(--card-border, #dfe6e5); border-radius: 999px; text-decoration: none; color: inherit; font-size: 13px; }
.ssr-hero { padding: 28px 0 10px; }
.ssr-hero h1 { margin: 6px 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; }
.ssr-kicker { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle, #5b6a69); }
.ssr-sub { margin: 0; font-size: 17px; }
.ssr-line { margin: 6px 0 0; color: var(--color-text-subtle, #5b6a69); }

/* #313 (Rohit's screen recording): on a refresh the server-rendered facts showed for a moment as a plain list — "Credits,
   Also Available On, Details" in bare type — before the page's own script drew the real thing. The words stay in the
   HTML for search engines and screen readers, but they no longer paint: the grey loader under them holds the page
   until the content is ready. A page whose script never runs still reads them, because the rule needs the script. */
.js .ssr-body { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- shelves.css ---- */
/* =====================================================================
   Cards and sliders (shelves.js) — related sliders (#101), home and search (#107).
   ===================================================================== */
.shelves { display: flex; flex-direction: column; gap: var(--section-gap); margin-top: var(--section-gap); }
.lib-suggest .shelves { margin-top: var(--space-4); }
.shelves:empty { display: none; }
.shelf { min-width: 0; }
.shelf__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.shelf__head h2 { flex: 1; min-width: 0; margin: 0; font-size: 19px; font-weight: 600; }
.shelf__head h2 small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--color-text-subtle); }
.shelf__all { flex: none; font-size: 14px; font-weight: 600; color: var(--color-link); text-decoration: none; }
.shelf__all:hover { text-decoration: underline; }
.shelf__nav { display: flex; gap: 6px; }
.shelf.is-static .shelf__nav { display: none; }
.shelf__btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-control); border-radius: 50%; background: #fff; color: var(--color-text); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.shelf__btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-link-hover); }
.shelf__btn:disabled { opacity: 0.35; cursor: default; }
.shelf__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The row: cards side by side, scrolled sideways, snapping to a card */
.shelf__track { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 18px; margin: 0 -6px; padding: 6px 6px 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 6px; scrollbar-width: none; }
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__track--playlists, .shelf__track--songs, .shelf__track--albums, .shelf__track--compilations { grid-auto-columns: 184px; }

/* ---- A card ---------------------------------------------------------------------------------- */
.sh-card { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--color-text); scroll-snap-align: start; }
.sh-card__media { position: relative; margin-bottom: 8px; border-radius: var(--radius-md); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; box-shadow: var(--shadow-sm); }
.sh-card__img { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; border-radius: inherit; background: var(--color-primary-soft); cursor: pointer; isolation: isolate; }
.sh-card__img > img, .sh-mosaic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.sh-card__empty { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; }
.sh-card__empty svg { width: 34%; height: 34%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sh-mosaic { display: grid; grid-template-columns: 1fr 1fr; }
.sh-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.sh-card--round .sh-card__media { border-radius: 50%; }
.sh-card--page .sh-card__media { border-radius: var(--radius-lg); }
.sh-card__t { min-width: 0; color: inherit; text-decoration: none; }
.sh-card strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
a.sh-card__t:hover strong { color: var(--color-link); }
.sh-card small { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.sh-card small a { color: inherit; text-decoration: none; }
.sh-card small a:hover { color: var(--color-link); text-decoration: underline; }
.sh-card--round { text-align: center; isolation: isolate; }
/* Round artists stay bare circles; on hover a soft panel appears behind the photo and name (no box at rest) */
/* The panel reaches 12px around the card (the row gives it that room), so the photo never touches its edge;
   the photo stays put (no lift) — the panel is the hover cue. */
.sh-card--round::before { content: ""; position: absolute; inset: -12px -12px -10px; z-index: -1; border-radius: var(--radius-lg); background: var(--tg-50);
  opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.sh-card--round:hover::before, .sh-card--round.is-menu::before, .sh-card--round:focus-within::before { opacity: 1; }
.shelf__track--profiles { margin: -6px -12px 0; padding: 12px 12px 14px; scroll-padding: 12px; }

/* Shade + controls over the picture */
.sh-card__media::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--teal-950-rgb) / .28) 0%, rgb(var(--teal-950-rgb) / 0) 34%, rgb(var(--teal-950-rgb) / 0) 52%, rgb(var(--teal-950-rgb) / .62) 100%);
  opacity: 0; transition: opacity .35s ease; }
.cx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cx__btn, .cx__play, .cx__follow { pointer-events: auto; cursor: pointer; font: inherit; }
.cx__btn { position: absolute; top: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: var(--color-text); box-shadow: 0 2px 8px rgba(0, 0, 0, .18);       /* no backdrop blur: it made scrolling stutter */
  opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s; }
.cx__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx__btn svg.is-fill { fill: currentColor; stroke: none; }
.cx__btn:hover { background: #fff; color: var(--color-link); transform: scale(1.08); }
.cx__more { right: 8px; transition-delay: .04s; }
.cx__heart { right: 46px; }
.cx__heart.is-on { color: var(--heart); }
.cx__heart.is-on svg { fill: currentColor; }
.cx__play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgb(var(--teal-700-rgb) / .45);
  opacity: 0; transform: translateY(10px) scale(.85); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1), background .2s; }
.cx__play svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; }
.cx__play:hover { background: var(--color-primary-strong, var(--teal-600)); transform: scale(1.08); }
.cx__follow { position: absolute; left: 50%; bottom: 12%; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border: 0; border-radius: var(--radius-pill);
  background: #fff; color: var(--color-text) !important; font-size: 12px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.cx__follow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cx__follow.is-following { background: var(--color-primary); color: #fff !important; }
.sh-card--round .cx__more { top: 6%; right: 6%; }
.sh-card--round .cx__heart { display: none; }
/* Artists: play (their radio) in the middle of the photo, Follow under it; the rest of the photo opens the profile */
.cx__play--mid { left: 50%; top: 50%; right: auto; bottom: auto; width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.sh-card--round .cx__follow { bottom: 9%; }
.sh-card.sh-card--round:hover .sh-card__media, .sh-card.sh-card--round.is-menu .sh-card__media, .sh-card.sh-card--round:focus-within .sh-card__media { transform: none; }

.sh-card:hover .sh-card__media, .sh-card.is-menu .sh-card__media, .sh-card:focus-within .sh-card__media { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sh-card:hover .sh-card__img > img, .sh-card:hover .sh-mosaic { transform: scale(1.07); }
.sh-card:hover .sh-card__media::after, .sh-card.is-menu .sh-card__media::after, .sh-card:focus-within .sh-card__media::after { opacity: 1; }
.sh-card:hover .cx__btn, .sh-card:hover .cx__play, .sh-card.is-menu .cx__btn, .sh-card.is-menu .cx__play,
.sh-card:focus-within .cx__btn, .sh-card:focus-within .cx__play { opacity: 1; transform: none; }
.sh-card:hover .cx__follow, .sh-card.is-menu .cx__follow, .sh-card:focus-within .cx__follow { opacity: 1; transform: translate(-50%, 0); }
/* The heart shows with the other hover buttons only (red when slated) — never sits on the picture (#117) */

/* Touch screens: no hover — play and ⋯ always there, smaller */
@media (hover: none) {
  .cx__more, .cx__play { opacity: 1; transform: none; }
  .cx__play { width: 38px; height: 38px; right: 8px; bottom: 8px; }
  .cx__play svg { width: 16px; height: 16px; }
  .cx__more { width: 28px; height: 28px; background: rgba(255, 255, 255, .85); }
  .cx__heart, .cx__follow { display: none; }        /* phones: slate from ⋯ (no picture covered by buttons) */
  .cx__play--mid { left: auto; top: auto; right: 4%; bottom: 4%; width: 36px; height: 36px; margin: 0; }   /* phones: on the photo's edge, face stays clear */
  .sh-card--round::before { display: none; }
  .sh-card__media::after { opacity: .55; background: linear-gradient(180deg, rgb(var(--teal-950-rgb) / .22) 0%, rgb(var(--teal-950-rgb) / 0) 30%, rgb(var(--teal-950-rgb) / 0) 60%, rgb(var(--teal-950-rgb) / .45) 100%); }
}

/* The ⋯ menu */
.cmenu { position: fixed; z-index: 90; min-width: 220px; max-width: 280px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff; box-shadow: 0 18px 40px rgb(var(--teal-950-rgb) / .18); animation: cmenu-in .18s cubic-bezier(.2, .8, .2, 1); }
@keyframes cmenu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cmenu__head { padding: 6px 10px 8px; border-bottom: 1px solid var(--color-border); margin-bottom: 4px; }
.cmenu__head strong { display: block; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.cmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--color-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cmenu__item svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmenu__item svg.is-fill { fill: currentColor; stroke: none; }
.cmenu__item:hover, .cmenu__item:focus-visible { background: var(--color-primary-soft); color: var(--color-link); outline: 0; }
.cmenu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--color-border); }

@media (max-width: 767px) {
  .shelf__btn { width: 30px; height: 30px; }            /* arrows on phones too — swiping alone hid that there's more (#250) */
  .shelf--wide .shelf__track { grid-auto-columns: min(316px, 86%); }   /* the next card peeks in */
  .shelf__track { grid-auto-columns: 136px; gap: 12px; }
  .shelf__track--playlists, .shelf__track--songs, .shelf__track--albums, .shelf__track--compilations { grid-auto-columns: 148px; }
  .shelf__head h2 { font-size: 17px; }
}

/* ---- Card grids (library, profiles, My Playlists): the same cards, ▾ shows the tracks under the row (#117) ---- */
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 26px 18px; margin-top: var(--space-4); }
@media (max-width: 639px) { .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }
.sh-grid .sh-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-content: start; }
.sh-grid .sh-card > .sh-card__media { grid-column: 1 / -1; }
.sh-grid .sh-card > .sh-card__t, .sh-grid .sh-card > small { grid-column: 1; min-width: 0; }
.sh-exp { grid-column: 2; grid-row: 2 / span 2; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: #fff; color: var(--color-text-muted); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.sh-exp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
.sh-exp:hover, .sh-card.is-expanded .sh-exp { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); }
.sh-card.is-expanded .sh-exp svg { transform: rotate(180deg); }
.sh-card.is-expanded .sh-card__media { box-shadow: 0 0 0 3px var(--color-primary), var(--shadow-md); }
.sh-card.is-leaving { opacity: 0; transform: scale(.94); transition: opacity .2s ease, transform .2s ease; }
.sh-lock { display: inline-flex; vertical-align: -2px; margin-right: 4px; color: var(--color-text-subtle); }
.sh-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.cx__edit { color: inherit; text-decoration: none; }

/* The open card's tracks: under its row, full width, sliding open */
.sh-xp { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; margin: -8px 0 -6px; transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1), margin .32s; }
.sh-xp.is-open { grid-template-rows: 1fr; margin: 0; }
.sh-xp__in { min-height: 0; overflow: hidden; }
.sh-xp__body { padding: 18px 22px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--surface-hover); }
.sh-xp__body > .ms-spinner, .sh-xp__body > svg { display: block; margin: 8px auto; }
.sh-xp__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sh-xp__head > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sh-xp__head small { color: var(--color-link-hover); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sh-xp__head strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.sh-xp__head span { color: var(--color-text-muted); font-size: 13px; }
.sh-xp__x { margin-right: -6px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.sh-xp__x:hover { background: var(--color-surface-muted); }
.sh-xp__x svg { width: 18px; height: 18px; transform: rotate(180deg); fill: none; stroke: currentColor; stroke-width: 2.4; }
.sh-xp__list { margin: 0; padding: 0; list-style: none; }
.sh-xp__row { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin: 0 -10px; padding: 6px 10px; border-radius: var(--radius-md); cursor: pointer; }
.sh-xp__row:hover { background: var(--teal-50); }
.sh-xp__n { color: var(--color-text-subtle); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.sh-xp__art { position: relative; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 6px; background: var(--color-primary-soft); color: var(--teal-300); }
.sh-xp__art > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-xp__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-xp__play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: rgba(0, 0, 0, .35); color: #fff; opacity: 0; transition: opacity .15s; }
.sh-xp__play svg { width: 16px; height: 16px; fill: currentColor; }
.sh-xp__row:hover .sh-xp__play { opacity: 1; }
.sh-xp__t { display: flex; flex-direction: column; min-width: 0; }
.sh-xp__t strong { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sh-xp__t small { overflow: hidden; color: var(--color-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sh-xp__d { color: var(--color-text-subtle); font-size: 13px; font-variant-numeric: tabular-nums; }
.sh-xp__more { display: flex; width: max-content; margin: 8px 0 0; }   /* at the left (#247) */
.sh-xp__none { margin: 6px 0 0; color: var(--color-text-muted); font-size: 14px; }

/* "Create playlist / compilation" — the first card of your own grid */
.sh-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1; padding: 12px; border: 2px dashed var(--tg-200); border-radius: var(--radius-md); background: var(--surface-hover); color: var(--color-text); font: inherit; text-align: center; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.sh-new:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.sh-new__plus { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 26px; line-height: 1; }
.sh-new strong { font-size: 14px; }
.sh-new small { color: var(--color-text-muted); font-size: 12px; }

.sh-xp__row.is-off { cursor: default; opacity: .45; }
.sh-xp__row.is-off:hover { background: none; }
.sh-xp__row.is-off .sh-xp__play { display: none; }

.tagp__count { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.tagp__count strong { color: var(--color-text); }

/* ---- Wide cards (#245): the small rectangular card for playlists, albums and compilations a page points to — the song
   page's playlists, a listener's slate, Featured On. A slider past 5 (Load More at its end), else laid out as they are --------- */
.shelf--wide .shelf__track { grid-auto-columns: 316px; }
.shelf--wide .sh-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 14px; padding: 10px; border: 1px solid var(--tg-100); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--teal-50), #fff 70%); }
.shelf--wide .sh-card:hover { border-color: var(--teal-200); }
.shelf--wide .sh-card__media { grid-row: 1 / -1; margin: 0; }
.shelf--wide .sh-card__t { grid-column: 2; grid-row: 2; }
.shelf--wide .sh-card > small { grid-column: 2; grid-row: 3; }
.shelf--wide .cx__play { left: 62px; right: auto; bottom: 16px; width: 34px; height: 34px; }   /* on the picture's corner */
.shelf--wide .cx__play svg { width: 15px; height: 15px; }
/* #248: the heart and ⋯ behave exactly as a song row's (.sl-heart, .list-more): the heart always there, a white circle and
   teal on its hover (#249: red is the trending list's only); ⋯ shows on the card's hover; the card tints as a row does. The overlay spans the card, so the picture
   doesn't lift on hover (lifting it would re-anchor the buttons to the picture) */
.shelf--wide .sh-card__media { position: static; }
.shelf--wide .sh-card__media::after { display: none; }
.shelf--wide .sh-card:hover .sh-card__media, .shelf--wide .sh-card.is-menu .sh-card__media, .shelf--wide .sh-card:focus-within .sh-card__media { transform: none; box-shadow: var(--shadow-sm); }
.shelf--wide .sh-card:hover, .shelf--wide .sh-card.is-menu { background: var(--surface-hover); border-color: var(--teal-200); }
.shelf--wide .sh-card__t, .shelf--wide .sh-card > small { padding-right: 80px; }
.shelf--wide .cx__btn { top: calc(50% - 17px); width: 34px; height: 34px; opacity: 1; transform: none; background: transparent; box-shadow: none; color: var(--color-control-icon); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.shelf--wide .cx__btn svg { width: 19px; height: 19px; }
.shelf--wide .cx__heart { right: 46px; }
.shelf--wide .cx__heart:not(.is-on):hover { background: #fff; color: var(--color-link-hover); transform: none; }   /* the site's heart hover: white circle, teal (links.css) */
.shelf--wide .cx__heart.is-on { color: var(--heart); }
.shelf--wide .cx__more { right: 8px; opacity: 0; }
.shelf--wide .sh-card:hover .cx__more, .shelf--wide .sh-card:focus-within .cx__more, .shelf--wide .sh-card.is-menu .cx__more { opacity: 1; transform: none; }
.shelf--wide .cx__more:hover { background: var(--color-primary-soft); color: var(--color-link-hover); transform: none; }
@media (hover: none) { .shelf--wide .cx__heart { display: grid; } .shelf--wide .cx__more { opacity: 1; width: 34px; height: 34px; background: transparent; } }
.apx-wmore { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 112px; padding: 10px; border: 1.5px dashed var(--teal-150); border-radius: var(--radius-lg); background: var(--surface-hover); color: var(--color-link-hover); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; scroll-snap-align: start; }
.apx-wmore:hover { border-color: var(--color-primary); }
.apx-wmore svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* People and page cards in a section (#245): two rows, then Load More */
.apx-pgrid .sh-grid { margin-top: 0; }
.apx-pgrid .sh-card.is-off, .apx-pgrid .sh-grid > .is-off { display: none; }
.apx-pgrid + .apx-sub { margin-top: var(--space-5); }
/* A listener's slate (#245): each kind under its own small heading, a thin line between them */
.apx-slate .apx-sblock { margin-top: 18px; }
.apx-slate .apx-sblock + .apx-sblock { padding-top: 18px; border-top: 1px solid var(--card-border); }
.apx-sblock__head { margin-bottom: 12px; }
.apx-sblock__head .apx-sub, .apx-sblock > .apx-sub { flex: 1; margin: 0 0 6px; }
.apx-sblock[hidden] { display: none; }
/* A slider's Load More tile (#253): a card's width, as tall as the cards beside it */
.shelf__track > .sh-more { min-height: 0; align-self: stretch; }

/* ---- The edge of a row on a phone (#313, Rohit) ---------------------------------------------------
   A row that scrolls used to stop mid-card, so the card at the edge looked broken rather than next in
   line. The edge it can still scroll towards is faded instead: the next card shows through and reads as
   waiting its turn, and the arrows above the row say it can be moved. The fade is only on the side there
   is more to see, so the first and last cards are never dimmed for no reason. shelves.js sets the classes.

   Softened (#313, Rohit): it used to fade over 64px all the way to nothing, which on a phone erases a sixth
   of the width — read as a fault in the screen, not as a hint. Half as wide now, and it stops at 45% instead
   of vanishing, so the edge card dips rather than dissolves. The arrows above the row are the real control. */
@media (max-width: 640px) {
  .shelf.has-more .shelf__track {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), rgba(0, 0, 0, .45));
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), rgba(0, 0, 0, .45));
  }
  .shelf.has-back .shelf__track {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .45), #000 24px);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, .45), #000 24px);
  }
  .shelf.has-back.has-more .shelf__track {
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .45), #000 24px, #000 calc(100% - 30px), rgba(0, 0, 0, .45));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, .45), #000 24px, #000 calc(100% - 30px), rgba(0, 0, 0, .45));
  }
}

/* ---- events.css ---- */
/* =====================================================================
   Events (decision #102) — cards and rows (profiles, sliders, /events),
   Creator Studio list (ev-s*), the editor (eve-*), the public page (evp-*)
   ===================================================================== */

/* ---- Shared: date chip, poster, badges ---------------------------------------------------------- */
.ev-date { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; padding: 5px 6px; border-radius: var(--radius-md); background: #fff; color: var(--color-text); line-height: 1.05; text-align: center; box-shadow: 0 0 0 1px var(--color-border); }
.ev-date small { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.ev-date small:first-child { color: var(--color-link-hover); }
.ev-date strong { margin: 1px 0; font-size: 21px; font-weight: 700; }
.ev-date--float { position: absolute; top: 10px; left: 10px; z-index: 2; box-shadow: var(--shadow-md); }
.ev-date--lg { min-width: 62px; padding: 7px 8px; }
.ev-date--lg strong { font-size: 27px; }

.ev-poster { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px; overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, var(--teal-300) 0%, transparent 55%), linear-gradient(135deg, var(--teal-700) 0%, var(--teal-500) 55%, var(--teal-600) 100%); color: #fff; }
.ev-poster::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 160px; height: 160px; border: 22px solid rgba(255, 255, 255, 0.12); border-radius: 50%; }
.ev-poster__d { display: none; }
.ev-poster__ic { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .16); }
.ev-poster__ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ev-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--tg-50); color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ev-badge--off { background: var(--danger-soft); color: var(--danger); }
.ev-badge--now { background: #e8f8ee; color: #1a7f43; }
.ev-badge--draft { background: var(--warn-soft); color: var(--warn-text); }
.ev-card__art > .ev-badge { position: absolute; top: 12px; right: 10px; z-index: 2; box-shadow: var(--shadow-sm); }

/* ---- Card ----------------------------------------------------------------------------------------- */
.ev-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--color-text); text-decoration: none; scroll-snap-align: start; }
.ev-card__art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--color-primary-soft); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.ev-card__art > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ev-card:hover .ev-card__art { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ev-card.is-past .ev-card__art > img { filter: saturate(0.75); }
.ev-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-card__body strong { display: -webkit-box; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ev-card__body small { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.ev-card__body .ev-card__when { font-weight: 600; color: var(--color-link-hover); }
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px 16px; }
.ev-grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.shelf__track--events { grid-auto-columns: 264px; }
@media (max-width: 767px) { .shelf__track--events { grid-auto-columns: 220px; } }

/* ---- Rows (past events) --------------------------------------------------------------------------- */
.ev-pasth { display: flex; align-items: baseline; gap: 8px; margin: var(--space-5) 0 var(--space-2); font-size: 15px; font-weight: 600; }
.ev-pasth:first-child { margin-top: 0; }
.ev-pasth small { font-size: 13px; font-weight: 500; color: var(--color-text-subtle); }
.ev-rows { display: flex; flex-direction: column; }
.ev-row { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-top: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.ev-row:first-child { border-top: 0; }
.ev-row__t strong:hover { color: var(--color-link-hover); }
.ev-row__d { flex: none; width: 74px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.ev-row__t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ev-row__t strong, .ev-row__t small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ev-row__t strong { font-size: 14px; font-weight: 600; }
.ev-row__t small { font-size: 13px; color: var(--color-text-muted); }
.ev-more { margin-top: 8px; font-size: 14px; }

/* ---- Creator Studio → Events ---------------------------------------------------------------------- */
.ev-tabs { margin-bottom: var(--space-4); }
.ev-slist { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ev-sitem { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.ev-sitem__main { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; color: inherit; text-decoration: none; }
.ev-sitem__art { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-primary-soft); }
.ev-sitem__art > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ev-sitem__art .ev-poster { padding: 8px; }
.ev-sitem__art .ev-poster__ic { width: 30px; height: 30px; border-radius: 9px; }
.ev-sitem__art .ev-poster__ic svg { width: 16px; height: 16px; }
.ev-sitem__art .ev-poster::after { display: none; }
.ev-sitem__info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-sitem__info > strong, .ev-sitem__info > small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ev-sitem__info > small { font-size: 13px; color: var(--color-text-muted); }
.ev-sitem__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; }
.ev-wait { color: var(--warn-text); }
.ev-spill--off { background: var(--danger-soft); color: var(--danger); }
.ev-empty .studio-gate__icon svg, .studio-gate__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ev-empty p { max-width: 420px; margin: 0 auto var(--space-4); }
@media (max-width: 640px) {
  .ev-sitem { flex-wrap: wrap; }
  .ev-sitem__art { display: none; }
  .ev-sitem .btn { flex: 1; }
}

/* ---- Create dialog -------------------------------------------------------------------------------- */
.confirm__card.ev-dlg-card { max-width: 560px; width: 100%; }
.confirm__text:has(.ev-dlg) { white-space: normal; text-align: left; }
.ev-dlg { display: flex; flex-direction: column; gap: 14px; }
.ev-dlg label.field { display: block; }
.ev-dlg .field__input, .eve .field__input { padding-left: 14px; }
.ev-dlg .field__label, .eve .field__label { left: 14px; }
.ev-dlg .sf-label { margin: 0 0 -6px; }
.ev-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-kind { padding: 7px 13px; border: 1.5px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff; font: inherit; font-size: 13px; color: var(--color-text); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.ev-kind:hover { border-color: var(--teal-200); }
.ev-kind.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.ev-kind-err { margin-top: -8px; font-size: 12px; color: var(--color-error-text); }
.ev-kind-err:empty { display: none; }
.ev-calopts .btn { justify-content: center; }

/* ---- Editor --------------------------------------------------------------------------------------- */
.eve { display: flex; flex-direction: column; gap: var(--space-4); }
.eve .studio-head { margin-bottom: 0; }
.eve label.field { display: block; }
.eve-top { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.eve-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 6; max-height: 300px; padding: 0; overflow: hidden; border: 0; background: linear-gradient(135deg, var(--teal-50) 0%, var(--color-primary-soft) 100%); cursor: pointer; }
.eve-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eve-cover__empty { position: absolute; inset: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--teal-200); border-radius: var(--radius-md); color: var(--color-link-hover); }
.eve-cover__empty svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.eve-cover__empty small { color: var(--color-text-muted); font-size: 13px; }
.eve-cover:hover .eve-cover__empty { border-color: var(--color-primary); }
.eve-top__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: var(--space-4) var(--space-5); }
.eve-top__who { min-width: 0; }
.eve-top__who h2 { margin: 4px 0 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.eve-top__state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--color-text-muted); }
.eve-top__act { display: flex; flex-wrap: wrap; gap: 8px; }
.eve-check { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--space-5) var(--space-4); }
.eve-check[hidden] { display: none; }
.eve .pg-nav { position: sticky; top: calc(var(--header-height, 64px) + 4px); z-index: 5; display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.96); scrollbar-width: none; backdrop-filter: blur(6px); }
.eve .pg-nav::-webkit-scrollbar { display: none; }
.eve .pg-nav a { flex: none; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 14px; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.eve .pg-nav a:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.eve-saved { flex: none; margin-left: auto; padding: 0 10px; font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }
.eve-secs { display: flex; flex-direction: column; gap: var(--space-4); }
.eve-sec { scroll-margin-top: calc(var(--header-height, 64px) + 70px); }
.eve-sec h2 { font-size: 17px; }
.eve-host { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 4px; }
/* Starts and Ends side by side across the card, each a date and a time; they stack only when the card is narrow (#180) */
.eve-dt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px 20px; }
.eve-dt__g { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eve-dt > :not(.eve-dt__g) { grid-column: 1 / -1; }
.eve-dt__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.eve-dt .field__error[data-dt-err] { display: block; font-size: 12px; color: var(--color-error-text); }
.eve-dt .field__error:empty { display: none; }
.eve-sec .seg { align-self: flex-start; }
.eve-venue { position: relative; }
.eve-vpick { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-primary-soft); }
.eve-vpick .avatar { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); }
.eve-vpick__t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.eve-vpick__t small { font-size: 13px; color: var(--color-text-muted); }
.eve-vlist { position: absolute; left: 0; right: 0; z-index: 8; }
.eve-vopt { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
.eve-vopt .avatar { flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm); }
.eve-vopt > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.eve [data-city] { position: relative; }

/* Lineup rows */
.eve-lineup { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.eve-lu { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1fr) auto; grid-template-areas: "star who role act" ". slot slot slot" ". tag tag tag"; align-items: start; gap: 8px 10px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.eve-lu.is-head { border-color: #f1d8a0; background: #fffcf4; }
.eve-star { grid-area: star; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 8px; padding: 0; border: 0; border-radius: 50%; background: none; color: #c9c9c9; cursor: pointer; }
.eve-star svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.eve-star:hover { color: #e0a82e; }
.eve-star[aria-pressed="true"] { color: #e0a82e; }
.eve-star[aria-pressed="true"] svg { fill: currentColor; }
.eve-lu__who { grid-area: who; min-width: 0; }
.eve-lu__role { grid-area: role; min-width: 0; }
.eve-lu__act { grid-area: act; display: flex; gap: 2px; margin-top: 8px; }
.eve-lu__slot { grid-area: slot; display: flex; flex-wrap: wrap; gap: 8px; }
.eve-lu [data-tagstate] { grid-area: tag; }
.eve-mini { height: 36px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: 13px; color: var(--color-text); }
.eve-mini:focus { border-color: var(--color-primary); outline: none; }
.eve-mini--stage { flex: 1; min-width: 120px; }
.eve-tag { font-size: 12px; color: var(--color-text-subtle); }
.eve-tag:empty { display: none; }
.eve-tag.is-ok { color: var(--color-link-hover); font-weight: 600; }
.eve-tag.is-wait { color: var(--warn-text); }
.eve-tag.is-no { color: var(--danger); }
.eve-lineup__add { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.eve-lineup__add .btn svg, .eve-sec > .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.eve-org { padding-top: 6px; border-top: 1px solid var(--color-border); }
.eve-org .sf-label { margin-bottom: 8px; }
.eve-org .sf-label small, .eve-dt .sf-label small { font-weight: 400; color: var(--color-text-subtle); }
@media (max-width: 640px) {
  .eve-lu { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "star who act" ". role role" ". slot slot" ". tag tag"; }
  .eve-dt__row { max-width: none; }
  .eve-top__row { padding: var(--space-4); }
  .eve-top__act { width: 100%; }
  .eve-top__act .btn { flex: 1; }
}

/* Contacts */
.eve-contacts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.eve-ct { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.eve-ct__grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .eve-ct__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- The public page ------------------------------------------------------------------------------ */
.evp { display: block; }
.ev-draftbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); padding: 10px 14px; border-radius: var(--radius-md); background: var(--warn-soft); color: #6b4000; font-size: 14px; }
.evp-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-primary-soft); }
.evp-hero__art { position: relative; aspect-ratio: 16 / 7; max-height: 460px; width: 100%; }
.evp-hero__art > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.evp-hero.is-poster .evp-hero__art { aspect-ratio: 16 / 5; max-height: 300px; }
.evp-hero .ev-poster { padding: clamp(18px, 4vw, 40px); }
.evp-hero .ev-poster::after { width: 340px; height: 340px; right: -60px; bottom: -120px; border-width: 46px; }
.evp-hero .ev-poster__d { position: relative; z-index: 1; display: flex; flex-direction: column; font-family: var(--font-display); font-size: clamp(54px, 9vw, 96px); font-weight: 700; line-height: 0.9; }
.evp-hero .ev-poster__d small { font-size: 0.32em; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.evp-hero.is-off .evp-hero__art > img { filter: grayscale(0.7); }

.evp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: var(--space-5) 0 var(--space-2); }
.evp-head__main { flex: 1; min-width: 260px; }
.evp-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-link-hover); }
.evp-head h1 { margin: 6px 0 0; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.12; overflow-wrap: anywhere; }
.evp-sum { margin: 8px 0 0; font-size: 16px; color: var(--color-text); }
.evp-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 14px; color: var(--color-text-muted); }
.evp-facts span { display: inline-flex; align-items: center; gap: 7px; }
.evp-facts svg, .ev-tix__line svg, .ev-cta svg, .ev-tix__tools svg, .ev-venue .btn svg, .ev-ct a svg, .ev-web svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.evp-facts svg { color: var(--color-link-hover); }
.ev-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; font-size: 14px; }
.ev-by__l { color: var(--color-text-muted); }
.ev-by a, .ev-by > span:not(.ev-by__l) { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.ev-by a:hover { color: var(--color-link-hover); }
.ev-by .avatar { width: 28px; height: 28px; }
.evp-head__act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ev-leave { font-size: 13px; color: var(--color-text-muted); }
.evp-cols { margin-top: var(--space-3); }
.evp .pgp-nav { margin-top: var(--space-3); }

/* About */
.ev-about { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.ev-about.is-clamped { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.ev-about { max-height: none; }

/* Lineup */
.ev-heads { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-bottom: var(--space-4); }
.ev-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ev-act { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; border-radius: var(--radius-md); color: inherit; text-align: center; text-decoration: none; }
a.ev-act:hover { background: var(--color-surface-muted); }
.ev-act .avatar { width: 84px; height: 84px; margin-bottom: 6px; }
.ev-act strong { font-size: 14px; }
.ev-act small { font-size: 13px; color: var(--color-text-muted); }
.ev-act--head .avatar { width: 128px; height: 128px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px #f1d8a0; }
.ev-act--head strong { font-size: 17px; }
.ev-act--head small { color: #9a6b00; font-weight: 600; }
.ev-daytabs { margin-bottom: var(--space-3); }
.ev-sched { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ev-sched[hidden] { display: none; }
.ev-sched li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.ev-sched li:first-child { border-top: 0; }
.ev-sched__t { font-size: 14px; font-weight: 700; color: var(--color-link-hover); font-variant-numeric: tabular-nums; }
.ev-sched__p { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
a.ev-sched__p strong:hover { color: var(--color-link-hover); }
.ev-sched__p .avatar { flex: none; width: 44px; height: 44px; }
.ev-sched__who { display: flex; flex-direction: column; min-width: 0; }
.ev-sched__who strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.ev-sched__who small { font-size: 13px; color: var(--color-text-muted); }
.ev-stage { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-surface-muted); font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
@media (max-width: 560px) {
  .ev-sched li { grid-template-columns: 62px minmax(0, 1fr); }
  .ev-stage { grid-column: 2; justify-self: start; margin-top: -4px; }
  .ev-heads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-act--head .avatar { width: 104px; height: 104px; }
}

/* Venue */
.ev-venue { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ev-venue__pg { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.ev-venue__pg .avatar { width: 52px; height: 52px; border-radius: var(--radius-md); }
.ev-venue__pg span:last-child { display: flex; flex-direction: column; }
.ev-venue__pg small { font-size: 13px; color: var(--color-text-muted); }
.ev-venue__pg strong:hover { color: var(--color-link-hover); }
.ev-venue__name { font-size: 16px; }
.ev-venue__addr { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.ev-venue__addr:empty { display: none; }
.ev-venue .pg-map__frame { width: 100%; height: 240px; border: 0; border-radius: var(--radius-md); }

/* Side: tickets, contacts */
.evp-side { position: sticky; top: calc(var(--header-height, 64px) + 16px); }
.ev-tix { display: flex; flex-direction: column; gap: 12px; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); }
.ev-tix__row { display: flex; align-items: center; gap: 14px; }
.ev-tix__row > div { display: flex; flex-direction: column; gap: 2px; }
.ev-tix__row strong { font-size: 15px; }
.ev-tix__row span { font-size: 14px; color: var(--color-text-muted); }
.ev-tix__line { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.ev-tix__line svg { margin-top: 1px; color: var(--color-link-hover); }
.ev-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ev-tix__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-tix__tools .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.ev-note { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-surface-muted); font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.ev-note--off { background: var(--danger-soft); color: var(--danger); }
.ev-note--now { background: #e8f8ee; color: #1a7f43; }
.ev-contacts { padding: var(--space-4) var(--space-5); }
.ev-contacts > h2 { font-size: 17px; }
.ev-ct { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.ev-contacts .ev-ct:nth-child(2) { padding-top: 0; border-top: 0; }
.ev-ct small { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-subtle); }
.ev-ct strong { font-size: 14px; }
.ev-ct a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
.ev-ct a:hover { color: var(--color-link-hover); }
.ev-ct a svg { color: var(--color-link-hover); }
/* An event's contact in About (var(--teal-600)): its label as the heading, the person card (or the name), then Call · Email buttons */
.ev-ct__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ev-ct__acts .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: var(--color-link-hover); }
.ev-ct__name { margin: 0; font-weight: 600; }
.ev-web { align-self: flex-start; }
@media (max-width: 1023px) {
  .evp-side { position: static; }   /* under the main column, in the order of the section links */
  .evp-head__act { align-items: flex-start; }
}

/* ---- /events -------------------------------------------------------------------------------------- */
.evb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 14px; margin-bottom: var(--space-5); }
.evb-head h1 { width: 100%; margin: 0; font-size: clamp(26px, 4vw, 34px); }
.evb-head p { flex: 1; margin: 0; color: var(--color-text-muted); }
.evb-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.evb-head .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.evb-h { margin: var(--space-6) 0 var(--space-4); font-size: 19px; }
.evb-h:first-child { margin-top: 0; }
.evb-more { margin-top: var(--space-4); }
.eve-sec [data-where], .eve-sec [data-tix] { display: flex; flex-direction: column; gap: 14px; }
.eve-sec [data-where]:empty, .eve-sec [data-tix]:empty { display: none; }
.btn.ev-more { margin-top: 10px; font-size: var(--text-sm); }      /* "Load More" is the same button everywhere */
/* #120: in the editor the cover is a banner, so the steps start on the first screen */
.eve .eve-top .eve-cover { aspect-ratio: auto; height: clamp(120px, 12vw, 160px); }

/* var(--teal-950): more ticket sites — in the editor under the main link, on the page under the button */
.eve-moretix { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.eve-moretix[hidden] { display: none; }
.ev-moretix { margin: 8px 0 0; font-size: 13px; color: var(--color-text-muted); text-align: center; }
.ev-moretix a { color: var(--color-link-hover); font-weight: 500; }

/* ---- The public page in the profile pages' design (#160) ------------------------------------------------- */
.evp.apx .apx-hero { min-height: clamp(320px, 30vw, 420px); }
.evp.apx .apx-hero--nocover .apx-hero__bg { background: radial-gradient(120% 90% at 85% 10%, var(--teal-400) 0%, var(--teal-600) 35%, var(--teal-900) 100%); }
.evp.apx .apx-hero.is-off .apx-hero__bg img { filter: grayscale(.7); }
.evp.apx .apx-hero__kicker .ev-badge { margin-left: 4px; }
/* The date as a tile where a profile has its photo */
.evp-date.ev-date { flex: none; min-width: 0; width: clamp(104px, 10vw, 132px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.evp-date small { font-size: 13px; }
.evp-date strong { margin: 2px 0; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; color: var(--color-text); }
.evp-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; font-size: 14px; color: var(--color-on-dark-soft); }
.evp-by a, .evp-by b { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; text-decoration: none; }
.evp-by a:hover { text-decoration: underline; }
.evp-by img { width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; object-fit: cover; }
.evp.apx .apx-hero__meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.evp.apx .apx-play svg { fill: none; stroke: currentColor; stroke-width: 2; }
.evp.apx .apx-stat__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.evp-moretix { margin: 12px 4px 0; font-size: 14px; color: var(--color-text-muted); }
.evp-moretix a { color: var(--color-link-hover); font-weight: 500; text-decoration: none; }
.evp-leave { margin: 8px 4px 0; text-align: right; }
/* The slim bar: the picture (or the date) */
.evp-bar__av { position: relative; display: grid; place-items: center; }
.evp-bar__av img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.evp-bar__date.ev-date { min-width: 0; padding: 0; border: 0; background: none; }
.evp-bar__date small { display: none; }
.evp-bar__date strong { font-size: 16px; }
.apx-bar .apx-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.apx-bar a.apx-pill { text-decoration: none; }
/* Two columns: about, lineup, photos | venue, contact — each flows on its own */
.evp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(24px, 3vw, 44px); align-items: start; margin: 0; }
.evp-main, .evp-side { display: flex; flex-direction: column; gap: var(--section-gap); min-width: 0; }
.evp-main > .apx-sec + .apx-sec, .evp-side > .apx-sec + .apx-sec { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
.evp.apx .evp-side { position: static; }
.evp.apx .ev-contacts { padding: 16px 18px; }
.evp.apx .ev-contacts .ev-ct:first-child { padding-top: 0; border-top: 0; }
.evp.apx .apx-sec { scroll-margin-top: calc(var(--header-height) + 124px); }
@media (max-width: 1023px) {
  .evp-cols { grid-template-columns: minmax(0, 1fr); }
  .evp-side { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
}
@media (max-width: 767px) {
  .evp-date.ev-date { width: 92px; border-radius: 18px; }
  .evp-date strong { font-size: 38px; }
  .evp-leave { text-align: center; }
}

/* Add a Contact (#180): the fields one under the other; the note tight under the last one */
.eve-ctf { display: flex; flex-direction: column; gap: 12px; }
.eve-ctf > .sf-hint { margin: -4px 0 0; }

/* One event card everywhere (#230): the banner on top, date · title · venue held together underneath in a framed card
   that lifts as one — as on the home page; profiles, pages, the events browse and its sliders alike */
:is(.ev-grid, .shelf__track--events) .ev-card { gap: 0; overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; box-shadow: var(--card-shadow);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
:is(.ev-grid, .shelf__track--events) .ev-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 36px rgb(var(--teal-950-rgb) / .14); }
:is(.ev-grid, .shelf__track--events) .ev-card__art { border-radius: 0; box-shadow: none; }
:is(.ev-grid, .shelf__track--events) .ev-card:hover .ev-card__art { transform: none; box-shadow: none; }
:is(.ev-grid, .shelf__track--events) .ev-card__body { gap: 3px; padding: 12px 16px 16px; }

/* The event page in one column (#238): the venue card holds the place (name / its page, address, directions) and, with a
   map, the map beside it — under it where the card is narrow */
.ev-venue__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.ev-venue--map { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: stretch; }
.ev-venue--map .pg-map__frame { height: 100%; min-height: 220px; }
@media (max-width: 767px) { .ev-venue--map { grid-template-columns: minmax(0, 1fr); } }
/* Contact, among the About facts */
.ap-fact .ev-contacts, .evp.apx .ap-fact .ev-contacts { display: flex; flex-direction: column; gap: 12px; padding: 0; }     /* in About: in line with its heading (var(--tg-800)) */
.ap-fact .ev-ct, .evp.apx .ap-fact .ev-ct { padding: 0; border-top: 0; }
.ev-ct a.ev-ct__who { color: var(--color-text); }
.ev-heads + .seg, .ev-heads + .ev-sched { margin-top: var(--space-4); }
/* #303 (Rohit): the event's name in the editor's top card — calm, not a shout: the body font, a size down */
.eve-top__who h2 { font-family: var(--font-body); font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--color-text); }

/* ---- search.css ---- */
/* =====================================================================
   Global search (decision #107): the header box and the results page (search.js).
   ===================================================================== */

/* ---- Header box (desktop) ------------------------------------------------------------------- */
.hsearch { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; max-width: 560px; height: 42px; padding: 0 12px 0 14px;
  border: 1px solid var(--color-control); border-radius: var(--radius-pill); background: var(--surface-hover); transition: border-color .2s, background .2s, box-shadow .2s; }
.hsearch:hover { border-color: var(--tg-300); }
.hsearch:focus-within { border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 4px var(--color-primary-soft); }
.hsearch.is-open { border-radius: 21px 21px 0 0; box-shadow: none; }
.hsearch__icon { display: grid; place-items: center; flex: none; color: var(--color-control-icon); }
.hsearch__icon svg, .app-header__search-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.app-header__search-btn svg { width: 22px; height: 22px; stroke-width: 1.9; }      /* the phone icon: the bell's size and weight (#313) */
.hsearch:focus-within .hsearch__icon { color: var(--color-link); }
.hsearch__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--color-text); }
.hsearch__input::-webkit-search-cancel-button { display: none; }
.hsearch__input::placeholder { color: var(--color-control-icon); }
.hsearch__clear { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #e8eff0; color: var(--color-text-muted); cursor: pointer; }
.hsearch__clear svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hsearch__clear:hover { background: var(--color-primary-soft); color: var(--color-link); }
.hsearch__kbd { flex: none; padding: 1px 7px; border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: 6px; font: 600 11px/1.5 ui-monospace, monospace; color: var(--color-text-subtle); background: #fff; }
.hsearch:focus-within .hsearch__kbd { display: none; }
.hsearch__drop { position: absolute; left: -1px; right: -1px; top: calc(100% - 1px); z-index: 80; max-height: min(70vh, 520px); overflow-y: auto; padding: 14px 16px 16px;
  border: 1px solid var(--color-primary); border-top-color: var(--color-border); border-radius: 0 0 18px 18px; background: #fff; box-shadow: 0 18px 40px rgb(var(--teal-950-rgb) / .14);
  animation: cmenu-in .18s ease; }
.app-header__search-btn { display: none; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--color-nav); }   /* flex: none — never squeezed by the buttons beside it */
.app-header__search-btn:hover { background: var(--color-primary-soft); color: var(--color-link); }
@media (max-width: 767px) {
  .hsearch { display: none; }
  .app-header__search-btn { display: grid; margin-left: auto; }
  .app-header__search-btn + .app-header__auth, .app-header__search-btn ~ .app-header__user { margin-left: 4px; }
}

/* ---- Suggestions (header drop + empty page) ---------------------------------------------------- */
.sp-sug + .sp-sug { margin-top: 18px; }
.sp-sug__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-sug__head h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.sp-sug__head .link { font-size: 13px; }
.sp-sug__none { margin: 4px 0; font-size: 14px; color: var(--color-text-muted); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 7px 14px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill);
  background: #fff; color: var(--color-text); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.sp-chip span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-chip svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--color-text-subtle); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-chip:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link); transform: translateY(-1px); }
.sp-chip:hover svg { stroke: var(--color-primary); }
.sp-chip--recent { padding: 0 4px 0 0; gap: 0; }
.sp-chip--recent > button:first-child { display: inline-flex; align-items: center; gap: 7px; padding: 7px 6px 7px 14px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.sp-chip__x { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sp-chip__x:hover { background: #e8eff0; }
.sp-chip__x svg { width: 12px; height: 12px; }
.sp-genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sp-genre { position: relative; height: 84px; padding: 14px; overflow: hidden; border: 0; border-radius: var(--radius-lg); cursor: pointer; text-align: left;
  background: linear-gradient(135deg, hsl(var(--h) 62% 46%), hsl(calc(var(--h) + 40) 70% 62%)); color: #fff; font: inherit; font-weight: 700; font-size: 16px;
  box-shadow: 0 6px 16px hsl(var(--h) 50% 40% / .25); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.sp-genre::after { content: ""; position: absolute; right: -18px; bottom: -22px; width: 78px; height: 78px; border-radius: 14px; background: rgba(255, 255, 255, .18); transform: rotate(24deg); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.sp-genre:hover { transform: translateY(-3px); box-shadow: 0 12px 26px hsl(var(--h) 50% 40% / .35); }
.sp-genre:hover::after { transform: rotate(34deg) scale(1.12); }

/* ---- Results page -------------------------------------------------------------------------------- */
.sp { min-height: 60vh; }
.sp-form { display: none; position: relative; align-items: center; gap: 10px; height: 50px; padding: 0 14px; margin-bottom: 20px;
  border: 1.5px solid var(--color-control); border-radius: var(--radius-pill); background: #fff; }
.sp-form:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.sp-form__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; }
.sp-form__input::-webkit-search-cancel-button { display: none; }
@media (max-width: 767px) { .sp-form { display: flex; position: sticky; top: calc(var(--header-height, 64px) + 8px); z-index: 20; } }
.sp-start { padding: 12px 0 30px; }
.sp-start__title { margin: 0; font-size: 30px; font-weight: 700; }
.sp-start__sub { margin: 6px 0 28px; color: var(--color-text-muted); }
.sp-loading { display: grid; place-items: center; min-height: 240px; }
.sp-results { transition: opacity .2s ease; }
.sp-results.is-busy { opacity: .55; }
.sp-head h1 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.25; word-break: break-word; }
.sp-head h1 span { color: var(--color-link); }
.sp-head p { margin: 4px 0 0; font-size: 14px; color: var(--color-text-muted); }
.sp-tabs { position: sticky; top: var(--header-height, 64px); z-index: 15; display: flex; gap: 8px; margin: 16px -4px 22px; padding: 10px 4px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(var(--color-bg, #fff) 80%, transparent); }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff;
  color: var(--color-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s ease; }
.sp-tab span { font-size: 12px; color: var(--color-text-subtle); }
.sp-tab:hover { border-color: var(--color-primary); color: var(--color-link); }
.sp-tab.is-on { border-color: var(--color-primary); background: var(--color-primary); color: #fff; box-shadow: 0 6px 14px rgb(var(--teal-600-rgb) / .3); }
.sp-tab.is-on span { color: var(--color-on-dark-soft); }

/* All: best match + songs */
.sp-top { display: grid; grid-template-columns: minmax(280px, 0.85fr) 1.6fr; gap: 28px; align-items: start; }
.sp-top > :only-child { grid-column: 1 / -1; }
.sp-best__label { margin: 0 0 12px; font-size: 19px; font-weight: 600; }
.sp-best__card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--color-primary-soft), #fff 70%); border: 1px solid var(--color-border); transition: box-shadow .3s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.sp-best__card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sp-best__art { position: relative; display: grid; place-items: center; width: 116px; height: 116px; overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; box-shadow: 0 10px 24px rgb(var(--teal-900-rgb) / .2); }
.sp-best__art svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sp-best__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-best__card.is-round .sp-best__art { border-radius: 50%; }
.sp-best__title { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--color-text); text-decoration: none; word-break: break-word; }
a.sp-best__title:hover { color: var(--color-link); }
.sp-best__sub { display: block; margin-top: 4px; font-size: 14px; color: var(--color-text-muted); }
.sp-best__act { display: flex; align-items: center; gap: 10px; }
.sp-best__play { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; cursor: pointer;
  box-shadow: 0 10px 22px rgb(var(--teal-700-rgb) / .4); transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s; }
.sp-best__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.sp-best__play:hover { transform: scale(1.07); background: var(--color-primary-strong, var(--teal-600)); }
.sp-best__more { position: static; opacity: 1; transform: none; border: 1px solid var(--color-control); box-shadow: none; }
.sp-songs-box .shelf__head { margin-bottom: 8px; }

/* Song rows */
.sp-songs { margin: 0; padding: 0; list-style: none; }
.sp-song { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, .55fr) minmax(52px, auto) 36px 36px; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--radius-md);
  cursor: pointer; transition: background .15s; }
.sp-song:hover { background: var(--color-primary-soft); }
.sp-song__art { position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; }
.sp-song__art > svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sp-song__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-song__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(var(--teal-950-rgb) / .45); opacity: 0; transition: opacity .2s; }
.sp-song__play svg { width: 18px; height: 18px; fill: #fff; }
.sp-song:hover .sp-song__play { opacity: 1; }
.sp-song__info { min-width: 0; }
.sp-song__info strong { display: block; overflow: hidden; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.sp-song__info small { display: block; overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.sp-song__info a { color: inherit; text-decoration: none; }
.sp-song__info a:hover { color: var(--color-link); text-decoration: underline; }
.sp-song__album { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.sp-song__time { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-align: right; font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sp-song__btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.sp-song__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-song__btn[data-ca="more"] svg { fill: currentColor; stroke: none; }
.sp-song__btn:hover { background: #fff; color: var(--color-link); }
.sp-song:hover .sp-song__btn, .sp-song__btn.is-on, .sp-song:focus-within .sp-song__btn { opacity: 1; }
.sp-song__btn.is-on { color: var(--heart); }
.sp-song__btn.is-on svg { fill: currentColor; }
.sp-shelves { margin-top: 36px; }

/* A category */
.sp-list-head h2 { margin: 0 0 14px; font-size: 19px; font-weight: 600; }
.sp-list-head h2 small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--color-text-subtle); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 26px 20px; }
.sp-grid--events { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sp-more { display: flex; justify-content: flex-start; margin: 26px 0 8px; }   /* Load More at the left (#247) */
.sp-none .lib-empty { margin-bottom: 26px; }

@media (max-width: 1023px) { .sp-top { grid-template-columns: 1fr; } .sp-song { grid-template-columns: 48px minmax(0, 1fr) minmax(46px, auto) 34px 34px; } .sp-song__album { display: none; } }
@media (max-width: 767px) {
  .sp-head h1 { font-size: 21px; }
  .sp-best__card { flex-direction: row; align-items: center; padding: 14px; gap: 14px; }
  .sp-best__art { width: 72px; height: 72px; flex: none; }
  .sp-best__info { flex: 1; min-width: 0; }
  .sp-best__title { font-size: 18px; }
  .sp-best__play { width: 44px; height: 44px; }
  .sp-best__act .btn, .sp-best__more { display: none; }
  .sp-song { grid-template-columns: 44px minmax(0, 1fr) 34px 34px; gap: 10px; padding: 6px 4px; }
  .sp-song__time { display: none; }
  .sp-song .art-tag { display: block; }
  .sp-song__btn { opacity: 1; }
  .sp-song__art { width: 44px; height: 44px; }
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .sp-start__title { font-size: 24px; }
  .sp-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- The results layer (#108): over the page, under the header; full screen on phones ------------------- */
.sov { position: fixed; inset: calc(var(--header-height) + env(safe-area-inset-top)) 0 0 0; z-index: 28; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5) var(--gutter) calc(var(--player-height) + var(--space-7)); background: var(--color-bg, #fff);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .25s var(--ease); }
.sov.is-in { opacity: 1; transform: none; }
.sov[hidden] { display: none; }
html.sov-open { overflow: hidden; }
.sov__bar { display: none; }
.sov__close { position: sticky; top: 0; z-index: 17; float: right; display: grid; place-items: center; width: 40px; height: 40px; margin: -6px -4px 0 12px; padding: 0;
  border: 1px solid var(--color-control); border-radius: 50%; background: #fff; color: var(--color-text-muted); cursor: pointer; box-shadow: var(--shadow-sm); transition: all .2s; }
.sov__close svg, .sov__back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sov__close:hover { border-color: var(--color-primary); color: var(--color-link); transform: rotate(90deg); }
.sov .sp-tabs { top: -24px; }
.sov__body { max-width: 1400px; margin: 0 auto; }
@media (min-width: 1024px) { .sov { left: var(--rail-width); } }
@media (max-width: 767px) {
  .sov { inset: 0; z-index: 45; padding-top: 0; }
  .sov__close { display: none; }
  .sov__bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; margin: 0 calc(var(--gutter) * -1) 14px; padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px 8px;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
  .sov__back { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text); cursor: pointer; }
  .sov__back:active { background: var(--color-surface-muted); }
  .sov .sp-form { display: flex; flex: 1; position: static; height: 44px; margin: 0; }
  .sov .sp-tabs { top: 64px; }
}

/* Header box: room after the logo (#108) */
@media (min-width: 768px) { .app-header__search { margin-left: clamp(24px, 4.5vw, 84px); } }

/* "View All" in a category tab */
.sp-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* #313 (Rohit): scoped to this head. The song and album pages have a .sp-viewall of their own (song.css), and this
   rule's margin-bottom was reaching it — in a centred row a bottom margin lifts a button, so it sat above the
   heading it belongs beside. The hover here was moving that button's gap too. */
.sp-list-head .sp-viewall { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--color-primary-soft);
  font-size: 14px; font-weight: 600; color: var(--color-link-hover); text-decoration: none; transition: background .2s, gap .2s; }
.sp-list-head .sp-viewall svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-list-head .sp-viewall:hover { background: var(--teal-100); gap: 9px; }

/* ---- A category's page (#108) ------------------------------------------------------------------------ */
.sa-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--color-text-muted); text-decoration: none; }
.sa-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sa-back:hover { color: var(--color-link); }
.sa-back:hover svg { transform: translateX(-3px); }
.sa-head h1 { margin: 10px 0 0; font-size: 30px; font-weight: 700; line-height: 1.2; word-break: break-word; }
.sa-head h1 span { font-weight: 500; color: var(--color-text-muted); }
.sa-tabs { position: static; margin: 14px -4px 0; background: none; }
.sa-tabs .sp-tab { text-decoration: none; }
.sa .fbar { position: sticky; top: var(--header-height); z-index: 16; margin: 6px calc(var(--gutter) * -1) 18px; padding: 10px var(--gutter); background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); }
.sa .fbar .fbar__panel { max-height: calc(100vh - var(--header-height) - 140px); overflow-y: auto; }
.sa-body { transition: opacity .2s; }
.sa-body.is-busy { opacity: .5; pointer-events: none; }
@media (max-width: 767px) { .sa-head h1 { font-size: 22px; } .sa .fbar .fbar__panel { max-height: 82dvh; } }

/* ---- filters.css ---- */
/* =====================================================================
   Sort and filters bar (decision #108, filters.js) — search View All, library, Studio.
   ===================================================================== */
.fbar { position: relative; margin-top: var(--space-4); }
.fbar__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fbar__count { margin: 0 auto 0 0; font-size: 14px; color: var(--color-text-muted); white-space: nowrap; }
.fbar__count b { color: var(--color-text); font-weight: 600; }
.fbar__find { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 320px; height: 38px; padding: 0 12px; border: 1px solid var(--color-control);
  border-radius: var(--radius-pill); background: #fff; color: var(--color-text-subtle); transition: border-color .2s, box-shadow .2s; }
.fbar__find:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); color: var(--color-link); }
.fbar__find svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fbar__find input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--color-text); text-overflow: ellipsis; }
.fbar__find input::placeholder { text-overflow: ellipsis; }   /* a long hint ends in … before the edge, never cut by it (#305) */
.fbar__find input::-webkit-search-cancel-button { cursor: pointer; }
.fbar__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.fbar__btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid var(--color-control); border-radius: var(--radius-pill);
  background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--color-text); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.fbar__btn:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); }
.fbar__btn svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fbar__btn > svg:last-child { width: 15px; height: 15px; color: var(--color-text-subtle); transition: transform .2s; }
.fbar__btn[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.fbar__btn-k { color: var(--color-text-subtle); font-weight: 400; }
.fbar__btn b { font-weight: 600; }
.fbar__toggle.is-on, .fbar__toggle[aria-expanded="true"] { border-color: var(--color-primary); color: var(--color-link-hover); background: var(--color-primary-soft); }
.fbar__ball { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--color-primary); color: #fff;
  font-style: normal; font-size: 12px; font-weight: 700; }

/* Sort menu */
.fbar__sort { position: relative; }
.fbar__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: #fff; box-shadow: 0 18px 40px rgb(var(--teal-950-rgb) / .18); animation: cmenu-in .18s cubic-bezier(.2, .8, .2, 1); }   /* the same as every menu on the site (.cmenu) */
.fbar__menu li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; transition: background .12s, color .12s; }
.fbar__menu li:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.fbar__menu li svg { width: 16px; height: 16px; fill: none; stroke: var(--color-primary); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.fbar__menu li[aria-selected="true"] { font-weight: 600; color: var(--color-link-hover); background: var(--color-primary-soft); }
.fbar__menu li[aria-selected="true"] svg { visibility: visible; }

/* What's on */
.fbar__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.fbar__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border: 0; border-radius: var(--radius-pill);
  background: var(--color-primary-soft); color: var(--color-link-hover); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; animation: fbar-pop .2s ease; }
.fbar__chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.fbar__chip:hover { background: var(--teal-100); }
.fbar__clear-all { margin-left: 4px; font-size: 13px; }
@keyframes fbar-pop { from { transform: scale(.9); opacity: 0; } }

/* The panel */
.fbar__panel { margin-top: 12px; padding: 18px 20px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--surface-hover);
  box-shadow: 0 10px 30px rgb(var(--teal-950-rgb) / .06); animation: fbar-open .22s var(--ease); }
@keyframes fbar-open { from { opacity: 0; transform: translateY(-6px); } }
.fbar__sheet-head { display: none; }
.fbar__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 28px; }
.fbar__none { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.ff { min-width: 0; margin: 0; padding: 0; border: 0; }
.ff__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.ff legend { padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); float: left; }
.ff__clear { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--color-link-hover); cursor: pointer; }
.ff__clear:hover { text-decoration: underline; }
.ff__opts { display: flex; flex-wrap: wrap; gap: 7px; clear: both; }
.ff__opt { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill);
  background: #fff; font: inherit; font-size: 13px; color: var(--color-text); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.ff__opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff__opt small { font-size: 12px; color: var(--color-text-subtle); }
.ff__opt:hover { border-color: var(--teal-300); }
.ff__tick { display: none; place-items: center; width: 15px; height: 15px; margin-left: -4px; border-radius: 50%; background: var(--color-primary); }
.ff__tick svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ff__opt.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.ff__opt.is-on .ff__tick { display: grid; }
.ff__opt.is-on small { color: var(--color-link-hover); }
.ff__more { height: 32px; padding: 0 10px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--color-link-hover); cursor: pointer; }
.fbar__foot { display: none; }

/* Phones: the panel is a sheet from the bottom */
@media (max-width: 767px) {
  .fbar__count { flex-basis: 100%; order: 3; }
  .fbar__find { max-width: none; }
  .fbar__tools { margin-left: 0; }
  .fbar__find + .fbar__tools { flex: none; }
  .fbar__btn-k { display: none; }
  .fbar__panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; max-height: 82dvh; display: flex; flex-direction: column; margin: 0; padding: 0;
    border: 0; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); animation: fbar-sheet .28s var(--ease); }
  .fbar__panel[hidden] { display: none; }
  @keyframes fbar-sheet { from { transform: translateY(100%); } }
  .fbar__sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--color-border); }
  .fbar__sheet-head strong { font-size: 17px; }
  .fbar__x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--color-surface-muted); cursor: pointer; }
  .fbar__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .fbar__fields { flex: 1; overflow-y: auto; grid-template-columns: 1fr; padding: 16px; }
  .fbar__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); }
  .fbar__foot .btn { flex: 1; max-width: 220px; height: 44px; }
  html.fbar-sheet-open::after { content: ''; position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, .4); animation: fade-in .2s ease; }
  html.fbar-sheet-open body { overflow: hidden; }
  .fbar__menu { right: auto; left: 0; }
}
@keyframes fade-in { from { opacity: 0; } }

/* ---- home.css ---- */
/* =====================================================================
   Home page (home.js, decisions #43, #52, #107)
   ===================================================================== */
.home { display: flex; flex-direction: column; gap: var(--section-gap); }
.home-shelf .shelf { margin: 0; }
.home__more { display: grid; place-items: center; min-height: 80px; }

/* ---- Featured ------------------------------------------------------------------------------- */
.hero { position: relative; margin: 0 0 4px; }
.hero__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 880px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-lg); }
.hero__track::-webkit-scrollbar { display: none; }
.hero__slide { position: relative; height: 300px; overflow: hidden; border-radius: var(--radius-lg); scroll-snap-align: start; isolation: isolate; background: var(--teal-900); color: #fff; }
.hero__bg { position: absolute; inset: -40px; z-index: -1; background: var(--art) center / cover no-repeat, linear-gradient(135deg, var(--teal-600), var(--teal-500));
  filter: blur(28px) saturate(1.4) brightness(.62); transform: scale(1.15); transition: transform 8s ease; }
.hero__slide:hover .hero__bg { transform: scale(1.25); }
.hero__slide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(var(--teal-950-rgb) / .55), rgb(var(--teal-950-rgb) / .1) 70%); }
.hero__body { display: flex; align-items: center; gap: 34px; height: 100%; padding: 32px 40px; }
.hero__art { position: relative; flex: none; display: grid; place-items: center; width: 220px; height: 220px; overflow: hidden; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); box-shadow: 0 24px 48px rgba(0, 0, 0, .45); transform: rotate(-2deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.hero__slide:hover .hero__art { transform: rotate(0) scale(1.03); }
.hero__art svg { width: 36%; height: 36%; fill: none; stroke: #fff; stroke-width: 1.5; }
.hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__text { min-width: 0; }
.hero__label { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .24); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero__title { margin: 12px 0 6px; font-size: clamp(24px, 3.2vw, 40px); font-weight: 800; line-height: 1.08; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__title a { color: inherit; text-decoration: none; }
.hero__title a:hover { text-decoration: underline; }
.hero__by { margin: 0 0 22px; font-size: 15px; opacity: .88; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hero__by a { color: inherit; text-decoration: none; }
.hero__by a:hover { text-decoration: underline; }
.hero__act { display: flex; align-items: center; gap: 12px; }
.hero__play { display: inline-flex; align-items: center; gap: 8px; padding-left: 18px; padding-right: 22px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.hero__play svg { width: 16px; height: 16px; fill: currentColor; }
.hero__more { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; transition: background .2s; }
.hero__more svg { width: 18px; height: 18px; fill: currentColor; }
.hero__more:hover { background: rgba(255, 255, 255, .25); }
.hero__nav { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -21px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--color-text); box-shadow: 0 6px 18px rgba(0, 0, 0, .2); cursor: pointer; opacity: 0; transition: opacity .25s, transform .25s; }
.hero__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero__nav--prev { left: 14px; } .hero__nav--next { right: 14px; }
.hero:hover .hero__nav { opacity: 1; }
.hero__nav:hover { transform: scale(1.08); }
.hero__dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.hero__dots button { position: relative; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: var(--tg-200); cursor: pointer; transition: width .3s, background .3s; }
.hero__dots button.is-on { width: 24px; background: var(--color-primary); }

/* ---- Jump back in ----------------------------------------------------------------------------- */
.home-quick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qtile { position: relative; display: flex; align-items: center; gap: 12px; padding-right: 12px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-hover);
  cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; }
.qtile:hover, .qtile:focus-visible { background: var(--color-primary-soft); box-shadow: var(--shadow-sm); outline: 0; }
.qtile__art { position: relative; flex: none; display: grid; place-items: center; width: 60px; height: 60px; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; }
.qtile__art svg { width: 40%; height: 40%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.qtile__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qtile__t { flex: 1; min-width: 0; }
.qtile__t strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.qtile__t small { display: block; overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.qtile__play { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: #fff;
  opacity: 0; transform: scale(.8); transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 6px 14px rgb(var(--teal-700-rgb) / .35); }
.qtile__play svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.qtile:hover .qtile__play, .qtile:focus-visible .qtile__play { opacity: 1; transform: none; }

/* ---- Trending chart -------------------------------------------------------------------------- */
.home-radio { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff;
  color: var(--color-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.home-radio svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.home-radio:hover { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
[data-play-chart] svg { fill: currentColor; stroke: none; }
.chart { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.chart__row { display: grid; grid-template-columns: 42px 54px minmax(0, 1fr) 34px 36px; align-items: center; gap: 12px; padding: 7px 8px; border-radius: var(--radius-md); cursor: pointer; transition: background .15s; }
.chart__row:hover { background: var(--color-primary-soft); }
.chart__n { font-size: 30px; font-weight: 800; line-height: 1; text-align: center; color: transparent; -webkit-text-stroke: 1.4px var(--color-primary); font-variant-numeric: tabular-nums; }
.chart__row:nth-child(-n+3) .chart__n { color: var(--color-link); -webkit-text-stroke: 0; }
.chart__art { position: relative; display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; }
.chart__art > svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.chart__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chart__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(var(--teal-950-rgb) / .45); opacity: 0; transition: opacity .2s; }
.chart__play svg { width: 18px; height: 18px; fill: #fff; }
.chart__row:hover .chart__play { opacity: 1; }
.chart__t { min-width: 0; }
.chart__t strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.chart__t small { display: block; overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.chart__t a { color: inherit; text-decoration: none; }
.chart__t a:hover { color: var(--color-link); text-decoration: underline; }
.chart__more { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; }
.chart__more svg { width: 17px; height: 17px; fill: currentColor; }
.chart__row:hover .chart__more, .chart__more:focus-visible { opacity: 1; }
.chart__more:hover { background: #fff; color: var(--color-link); }

/* Each slide lays itself out by its own width, not the screen's (#179): artwork beside the words while there's room
   (smaller on a medium slide), stacked only on a narrow one (phones) */
.hero__slide { container-type: inline-size; }
.hero__title { font-size: clamp(22px, 4.6cqi, 40px); }
@container (max-width: 760px) {
  .hero__body { gap: 24px; padding: 24px 28px; }
  .hero__art { width: 170px; height: 170px; }
}
@container (max-width: 519px) {
  .hero__body { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .hero__art { width: 112px; height: 112px; }
  .hero__title { margin-top: 8px; font-size: 22px; }
  .hero__by { margin-bottom: 14px; }
}

/* ---- Language and genre tiles -------------------------------------------------------------- */
.shelf__track--langs { grid-auto-columns: 172px; padding-bottom: 30px; margin-bottom: -20px; }   /* room for the tiles' coloured shadow — it was cut into a grey band (#179) */
.ltile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 132px; padding: 14px 16px; overflow: hidden; border: 0; border-radius: var(--radius-lg);
  background: linear-gradient(145deg, hsl(var(--h) 58% 42%), hsl(calc(var(--h) + 35) 66% 58%)); color: #fff; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start;
  box-shadow: 0 8px 18px hsl(var(--h) 50% 35% / .25); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.ltile__glyph { position: absolute; top: -8px; right: 10px; font-size: 76px; font-weight: 800; line-height: 1; opacity: .28; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.ltile strong { position: relative; font-size: 17px; font-weight: 700; }
.ltile small { position: relative; font-size: 12px; opacity: .85; }
.ltile__play, .gtile__play { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--color-link);
  opacity: 0; transform: translateY(6px) scale(.85); transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.ltile__play svg, .gtile__play svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.ltile:hover { transform: translateY(-4px); box-shadow: 0 16px 30px hsl(var(--h) 50% 35% / .35); }
.ltile:hover .ltile__glyph { transform: scale(1.15) rotate(-6deg); opacity: .4; }
.ltile:hover .ltile__play, .gtile:hover .gtile__play { opacity: 1; transform: none; }
.shelf__track--genres { grid-auto-columns: 208px; }
.gtile { position: relative; display: flex; align-items: flex-end; height: 118px; padding: 14px 16px; overflow: hidden; border: 0; border-radius: var(--radius-lg); isolation: isolate;
  background: linear-gradient(135deg, hsl(var(--h) 62% 44%), hsl(calc(var(--h) + 40) 70% 60%)); color: #fff; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; box-shadow: var(--shadow-sm); }
.gtile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.gtile__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, hsl(var(--h) 60% 30% / .88), hsl(calc(var(--h) + 40) 70% 45% / .55)); }
.gtile strong { font-size: 18px; font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.gtile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gtile:hover img { transform: scale(1.1); }

@media (hover: none) { .ltile__play, .gtile__play, .qtile__play, .chart__more { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .home-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hero__track { grid-auto-columns: 88%; gap: 12px; }
  .hero__slide { height: auto; min-height: 220px; }
  .hero__nav { display: none; }
  .chart { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  /* #313: the title gets every spare pixel — tighter rank, art and gaps (172 → ~200 px for the words at 390).
     The art column has to match the art: a 48px picture in a 44px column overflowed into the gap and left
     2px between picture and title, where every other list has 8. That is what made this row look wrong. */
  .chart__row { grid-template-columns: 24px 48px minmax(0, 1fr) 32px 32px; gap: 8px; padding: 6px 2px; }
  .chart__n { font-size: 22px; }
  .chart__art { width: 48px; height: 48px; }
  .home-quick__grid { gap: 8px; }
  .qtile__art { width: 52px; height: 52px; }
  .qtile__play { display: none; }
  .shelf__track--langs { grid-auto-columns: 140px; }
  .ltile { height: 112px; }
  .shelf__track--genres { grid-auto-columns: 168px; }
  .gtile { height: 100px; }
}

/* =====================================================================
   More layouts (#109): two-row compact slider, top pick + list, artist spotlight, wide events, large cards
   ===================================================================== */
/* Two rows of small song tiles */
.shelf__track--rows2 { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: minmax(360px, 1fr); gap: 10px 18px; }
.srow { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 6px 8px 8px; border-radius: var(--radius-md); cursor: pointer;
  scroll-snap-align: start; transition: background .2s; }
.srow:hover { background: var(--color-primary-soft); }
.srow__art { position: relative; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 10px rgb(var(--teal-950-rgb) / .12); }
.srow__img { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; }
.srow__img svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.srow__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.srow:hover .srow__img img { transform: scale(1.08); }
.srow__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(var(--teal-950-rgb) / .45); opacity: 0; transition: opacity .2s; }
.srow__play svg { width: 18px; height: 18px; margin-left: 2px; fill: #fff; }
.srow:hover .srow__play { opacity: 1; }
.srow__t { flex: 1; min-width: 0; }
.srow__t strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.srow__t small { display: block; overflow: hidden; margin-top: 2px; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.srow__t a { color: inherit; text-decoration: none; }
.srow__t a:hover { color: var(--color-link); text-decoration: underline; }
.srow__btn { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted);
  cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.srow__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.srow__btn[data-ca="more"] svg { fill: currentColor; stroke: none; }
.srow__btn:hover { background: #fff; color: var(--color-link); }
.srow:hover .srow__btn, .srow:focus-within .srow__btn, .srow__btn.is-on { opacity: 1; }
.srow__btn.is-on { color: var(--heart); }
.srow__btn.is-on svg { fill: currentColor; }
.srow__n { flex: none; width: 22px; text-align: center; font-size: 15px; font-weight: 700; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* Top pick + list */
.home-split__body { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.spot { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 340px; padding: 24px; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--teal-900); color: #fff; isolation: isolate; }
.spot__bg { position: absolute; inset: -40px; z-index: -2; background: var(--art) center / cover no-repeat, linear-gradient(135deg, var(--teal-600), var(--teal-500));
  filter: blur(26px) saturate(1.5) brightness(.6); transform: scale(1.1); transition: transform 6s ease; }
.spot:hover .spot__bg { transform: scale(1.22); }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgb(var(--teal-950-rgb) / .65)); }
.spot__art { position: relative; display: grid; place-items: center; width: 150px; height: 150px; overflow: hidden; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.spot:hover .spot__art { transform: translateY(-4px) rotate(-1.5deg); }
.spot__art svg { width: 36%; height: 36%; fill: none; stroke: #fff; stroke-width: 1.5; }
.spot__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot__label { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.spot__title { margin: 10px 0 4px; font-size: 24px; font-weight: 800; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spot__title a, .spot__by a { color: inherit; text-decoration: none; }
.spot__title a:hover, .spot__by a:hover { text-decoration: underline; }
.spot__by { display: block; overflow: hidden; font-size: 14px; opacity: .88; white-space: nowrap; text-overflow: ellipsis; }
.spot__act { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.spot__act .btn { display: inline-flex; align-items: center; gap: 7px; }
.spot__act .btn svg { width: 14px; height: 14px; fill: currentColor; }
.split-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 4px 18px; margin: 0; padding: 0; list-style: none; align-content: start; }

/* Artist spotlight */
.shelf__track--spot { grid-auto-columns: 264px; gap: 18px; }
.acard { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff;
  scroll-snap-align: start; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.acard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgb(var(--teal-950-rgb) / .14); }
.acard__cover { position: relative; display: block; height: 128px; overflow: hidden; background: linear-gradient(135deg, hsl(var(--h) 55% 42%), hsl(calc(var(--h) + 50) 65% 60%)); }
.acard__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.acard__cover.is-blur img { filter: blur(18px) saturate(1.4); transform: scale(1.3); }
.acard:hover .acard__cover img { transform: scale(1.08); }
.acard:hover .acard__cover.is-blur img { transform: scale(1.4); }
.acard__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .25)); }
.acard__face { position: relative; z-index: 1; display: block; width: 92px; height: 92px; margin: -48px auto 0; overflow: hidden; border: 4px solid #fff; border-radius: 50%;
  background: var(--tg-50); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.acard:hover .acard__face { transform: scale(1.06); }
.acard__face img { width: 100%; height: 100%; object-fit: cover; }
.acard__body { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px 18px; text-align: center; }
.acard__name { max-width: 100%; overflow: hidden; font-size: 16px; font-weight: 700; color: var(--color-text); white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.acard__name:hover { color: var(--color-link); }
.acard__body small { font-size: 13px; color: var(--color-text-muted); }
.acard__act { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.acard__play { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-control); border-radius: 50%; background: #fff; color: var(--color-link);
  cursor: pointer; transition: all .2s; }
.acard__play svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.acard__play:hover { border-color: var(--color-primary); background: var(--color-primary); color: #fff; transform: scale(1.06); }
.acard__act .btn { min-width: 104px; }

/* Wide events */
.shelf__track--wide { grid-auto-columns: minmax(300px, calc((100% - 54px) / 4)); gap: 18px; }
.shelf__track--wide .ev-card { scroll-snap-align: start; }
/* Each event in a card: the banner on top, its date, title and venue held together underneath — lifts as one */
.shelf__track--wide .ev-card { gap: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.shelf__track--wide .ev-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 36px rgb(var(--teal-950-rgb) / .14); }
.shelf__track--wide .ev-card__art { border-radius: 0; box-shadow: none; }
.shelf__track--wide .ev-card:hover .ev-card__art { transform: none; box-shadow: none; }
.shelf__track--wide .ev-card__art > img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.shelf__track--wide .ev-card:hover .ev-card__art > img { transform: scale(1.05); }
.shelf__track--wide .ev-card__body { gap: 3px; padding: 12px 16px 16px; }

/* Large cards (playlists) */
.shelf--large .shelf__track { grid-auto-columns: 232px; gap: 22px; }

@media (max-width: 1023px) {
  .home-split__body { grid-template-columns: 1fr; }
  .spot { min-height: 0; flex-direction: row; align-items: center; }
  .spot__art { width: 120px; height: 120px; flex: none; }
  .split-list { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .shelf__track--rows2 { grid-auto-columns: 82%; }
  .srow__btn { opacity: 1; }
  .spot { padding: 16px; gap: 14px; }
  .spot__art { width: 92px; height: 92px; }
  .spot__title { font-size: 18px; margin-top: 6px; }
  .spot__act { margin-top: 10px; }
  .shelf__track--spot { grid-auto-columns: 220px; }
  .acard__cover { height: 100px; }
  .shelf__track--wide { grid-auto-columns: 80%; }
  .shelf--large .shelf__track { grid-auto-columns: 168px; }
  .split-list .srow:nth-child(n+6) { display: none; }
}

/* ---- Music Videos (var(--teal-700)): the video plays muted behind the list, one after another ------------------------------- */
.vids { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); height: 400px; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--teal-900); color: #fff; isolation: isolate; }
.vids__stage { position: absolute; inset: 0; z-index: -1; }
.vids__media { position: absolute; inset: 0; overflow: hidden; container-type: size; background: var(--teal-900); }
.vids__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: vids-pan calc(var(--dwell) + 2s) ease-out both; }
.vids__yt { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.vids__yt iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; transform: translate(-50%, -50%) scale(1.18); }
.vids__media.is-live .vids__yt { opacity: 1; }
.vids__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--teal-950-rgb) / .35) 0%, rgb(var(--teal-950-rgb) / .2) 30%, rgb(var(--teal-950-rgb) / .78) 58%, rgb(var(--teal-950-rgb) / .9) 100%),
  linear-gradient(0deg, rgb(var(--teal-950-rgb) / .7), transparent 45%); }
.vids__watch { position: absolute; left: calc(28% - 34px); top: calc(50% - 34px); display: grid; place-items: center; width: 68px; height: 68px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: var(--color-link-hover); cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s ease, background .2s ease; }
.vids__watch::before { content: ""; position: absolute; inset: -8px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; animation: vids-ring 2.4s ease-out infinite; }
.vids__watch svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.vids__watch:hover, .vids__watch:focus-visible { transform: scale(1.07); background: #fff; }
.home-vids.is-novid .vids__watch { display: none; }      /* the video's gone: its picture only (#190) */
.home-vids.is-ext .vids__label, .home-vids.is-novid .vids__label { background: rgba(255, 255, 255, .22); }
.vids__now { position: absolute; left: 24px; bottom: 26px; max-width: calc(56% - 48px); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.vids__label { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); background: rgb(var(--teal-500-rgb) / .9); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-shadow: none; }
.vids__now strong { display: block; margin: 10px 0 3px; overflow: hidden; font-size: 22px; font-weight: 800; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.vids__now small { display: block; overflow: hidden; font-size: 14px; opacity: .85; white-space: nowrap; text-overflow: ellipsis; }
.vids__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .14); }
.vids__bar i { display: block; height: 100%; background: var(--color-primary); transform-origin: left; animation: vids-bar var(--dwell) linear both; }
.vids.is-paused .vids__bar i, .home-vids.is-paused .vids__bar i, .home-vids.is-paused .vids__poster { animation-play-state: paused; }
.vids__list { position: relative; grid-column: 2; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px 14px 14px 0; overflow-y: auto; scrollbar-width: none; list-style: none;
  mask-image: linear-gradient(180deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
.vids__list::-webkit-scrollbar { display: none; }
.vrow { position: relative; display: flex; align-items: center; gap: 12px; flex: none; padding: 8px 8px 8px 10px; border-radius: var(--radius-md); cursor: pointer; transition: background .2s ease; }
.vrow:hover { background: rgba(255, 255, 255, .06); }
.vrow:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
/* The picture plays the song: ▶ over it on hover, as in every song list (#179) */
button.vrow__art { padding: 0; border: 0; background: none; cursor: pointer; }
.vrow__ov { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgb(var(--teal-950-rgb) / .55); opacity: 0; transition: opacity .2s; }
.vrow__ov svg { width: 16px; height: 16px; margin-left: 2px; fill: #fff; }
.vrow__art:hover .vrow__ov, .vrow__art:focus-visible .vrow__ov { opacity: 1; }
@media (hover: none) { .vrow:not(.is-on) .vrow__ov { opacity: 1; background: rgb(var(--teal-950-rgb) / .35); } }   /* touch: no hover, so the ▶ stays */
.vrow.is-on { background: rgba(255, 255, 255, .12); }
.vrow.is-on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--color-primary); }
.vrow__art { position: relative; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; }
.vrow__img { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); }
.vrow__img svg { width: 40%; height: 40%; fill: none; stroke: #fff; stroke-width: 1.5; }
.vrow__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vrow__eq { position: absolute; inset: 0; display: none; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 13px; background: rgb(var(--teal-950-rgb) / .55); }
.vrow__eq i { width: 3px; height: 16px; border-radius: 2px; background: #fff; transform-origin: bottom; animation: vids-eq .9s ease-in-out infinite alternate; }
.vrow__eq i:nth-child(2) { animation-delay: -.3s; } .vrow__eq i:nth-child(3) { animation-delay: -.6s; }
.vrow.is-on .vrow__eq { display: flex; }
.home-vids.is-paused .vrow:not(.is-playing) .vrow__eq i { animation-play-state: paused; }
/* Its song in the player (#191): ❚❚ instead of ▶ (pauses), and the clock waits on its video */
.vrow__ov svg + svg, .vrow__play svg + svg, .vrow.is-playing .vrow__ov svg:first-child, .vrow.is-playing .vrow__play svg:first-child { display: none; }
.vrow.is-playing .vrow__ov svg + svg, .vrow.is-playing .vrow__play svg + svg { display: block; margin-left: 0; }
.home-vids.is-pinned .vids__bar i { animation-play-state: paused; opacity: 0; }
.vrow__t { flex: 1; min-width: 0; text-align: left; }
.vrow__t a { color: inherit; text-decoration: none; }
.home-vids .vids__now strong a { color: inherit; text-decoration: none; }
.home-vids .vids__now strong a:hover { color: var(--teal-300); text-decoration: none; }
.home-vids .vids__now small a { color: inherit; text-decoration: none; }
.home-vids :is(.vrow__t, .vids__now) small a:hover { color: var(--teal-300); text-decoration: underline; text-underline-offset: 2px; }   /* on the dark ground: the light teal */
.vrow__t strong, .vrow__t small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vrow__t strong { font-size: var(--text-sm); font-weight: 600; }
.vrow__t small { margin-top: 2px; font-size: 12px; color: var(--color-on-dark-muted); }
.vrow.is-on .vrow__t strong { color: var(--teal-300); }
.vrow__dur { flex: none; font-size: 12px; color: var(--color-on-dark-muted); font-variant-numeric: tabular-nums; }
.vrow .srow__btn { color: var(--color-on-dark-muted); }
.vrow:hover .srow__btn, .vrow:focus-within .srow__btn, .vrow.is-on .srow__btn { opacity: 1; }
.vrow .srow__btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.vrow .srow__btn.is-on { color: var(--heart); }
.vrow__play { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.vrow__play svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.vrow__play:hover { transform: scale(1.08); background: var(--color-primary-strong); }
@keyframes vids-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vids-pan { from { transform: scale(1.12); } to { transform: scale(1.22) translateX(-2%); } }
@keyframes vids-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes vids-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@media (max-width: 1023px) {
  .vrow__dur { display: none; }
}
@media (max-width: 767px) {
  .vids { display: block; height: auto; }
  .vids__stage { position: relative; z-index: 0; aspect-ratio: 16 / 9; }
  .vids__shade { background: linear-gradient(0deg, rgb(var(--teal-950-rgb) / .85), transparent 60%); }
  .vids__watch { left: calc(50% - 28px); top: calc(42% - 28px); width: 56px; height: 56px; }
  .vids__watch svg { width: 22px; height: 22px; }
  .vids__now { left: 16px; right: 16px; bottom: 14px; max-width: none; }
  .vids__now strong { margin-top: 0; font-size: 17px; }
  .vids__label { display: none; }
  .vids__list { max-height: 268px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .vids__bar i, .vids__poster, .vids__watch::before, .vrow__eq i { animation: none; }
  .vids__bar i { transform: scaleX(0); }
}
/* ⋯ on a quick tile: the one song menu, shown with the ▶ (always on touch screens) */
.qtile .list-more { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.qtile:hover .list-more, .qtile:focus-within .list-more, .qtile .list-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .qtile .list-more { opacity: 1; } }
/* With a mouse the ▶ and ⋯ float over the tile's end (on a fade) only while it's hovered, so the title has the whole width
   the rest of the time (#180); touch screens keep them in the row, always shown */
@media (hover: hover) {
  .qtile .list-more, .qtile__play { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; }
  .qtile__play { right: 12px; }
  .qtile .list-more { right: 52px; }
  .qtile::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 128px; background: linear-gradient(90deg, rgba(230, 247, 248, 0), var(--color-primary-soft) 42%); opacity: 0; transition: opacity .2s; pointer-events: none; }
  .qtile:hover::after, .qtile:focus-within::after { opacity: 1; }
}
.hero__dots button::after { content: ""; position: absolute; inset: -9px; }   /* a 25px tap area behind the 7px dot (#305) */

/* ---- browse.css ---- */
/* =====================================================================
   Discover pages (browse.js, decision #118): the banner's trail and collage, Explore | All tabs,
   "Narrow down" chips, radio station cards, tile grids, the genre cloud.
   Sliders themselves are the home page's (home.css / shelves.css).
   ===================================================================== */

/* ---- Banner ---------------------------------------------------------------------------------------- */
.bx-hero .page-hero__sub strong { color: var(--teal-900); font-weight: 700; }
.bx-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 0 8px; font-size: 13px; color: var(--tg-700); }
.bx-trail > svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; }
.bx-trail a { color: var(--color-link-hover); font-weight: 600; text-decoration: none; }
.bx-trail a:hover { text-decoration: underline; }
.bx-trail__step { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 11px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 0 rgb(var(--teal-900-rgb) / .06); }
.bx-trail__step > span { font-weight: 600; color: var(--teal-900); }
.bx-trail__x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--tg-500) !important; position: relative; }
.bx-trail__x::after { content: ''; position: absolute; inset: -6px; }   /* a 34px tap area on phones, same 22px look (var(--teal-600)) */
.bx-trail__x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.bx-trail__x:hover { background: var(--danger-soft); color: var(--danger) !important; }
.bx-actions { display: contents; }
.bx-actions:empty { display: none; }
.page-hero__actions .btn svg { width: 15px; height: 15px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }   /* line icons, like the empty-state buttons (round 4) */
.page-hero__actions .btn svg.is-fill { fill: currentColor; stroke: none; }
.bx-btn svg { fill: none; stroke: currentColor; stroke-width: 2; }
.page-hero__actions .bx-btn { background: rgba(255, 255, 255, .85); }

/* The top of the list in place of the icon: a fanned stack of covers */
.bx-collage { width: 300px; height: 150px; }
.bx-collage::before { content: ""; position: absolute; inset: 10% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%); }
.bx-collage__i { position: absolute; top: 50%; width: 108px; height: 108px; overflow: hidden; border-radius: 14px; background: var(--teal-100);
  box-shadow: 0 14px 28px rgb(var(--teal-900-rgb) / .22); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.bx-collage__i img { width: 100%; height: 100%; object-fit: cover; }
.bx-collage__i--0 { left: 50%; z-index: 3; width: 124px; height: 124px; transform: translate(-50%, -50%); }
.bx-collage__i--1 { left: 22%; z-index: 2; transform: translate(-50%, -50%) rotate(-9deg) scale(.86); }
.bx-collage__i--2 { left: 78%; z-index: 2; transform: translate(-50%, -50%) rotate(9deg) scale(.86); }
.bx-collage__i--3 { left: 2%; z-index: 1; transform: translate(-30%, -50%) rotate(-16deg) scale(.7); opacity: .8; }
.bx-collage__i--4 { left: 98%; z-index: 1; transform: translate(-70%, -50%) rotate(16deg) scale(.7); opacity: .8; }
.bx-hero:hover .bx-collage__i--1 { transform: translate(-58%, -52%) rotate(-12deg) scale(.88); }
.bx-hero:hover .bx-collage__i--2 { transform: translate(-42%, -52%) rotate(12deg) scale(.88); }
.bx-hero:hover .bx-collage__i--0 { transform: translate(-50%, -54%); }
/* "No Folk Labels Yet" (#259): a short note above the same genre's music, not a page-tall empty box */
.bx-none { margin-bottom: var(--section-gap); }
.bx-none .lib-empty { min-height: 0; margin-top: 0; padding: var(--space-5) var(--space-4); }

/* ---- Explore | All, and Narrow down ---------------------------------------------------------------------- */
.bx-bar { display: flex; align-items: center; gap: 14px 18px; margin: -4px 0 var(--section-gap); min-width: 0; }
.bx-tabs { flex: none; display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--teal-50); }
.bx-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--radius-pill); color: var(--tg-700); font-size: 14px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.bx-tab svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.bx-tab:hover { color: var(--color-link-hover); }
.bx-tab.is-on { background: #fff; color: var(--color-link-hover); box-shadow: 0 2px 8px rgb(var(--teal-900-rgb) / .12); }
.bx-chips { position: relative; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.bx-chips__k { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.bx-chips__row { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; scroll-padding-inline: 2px;   /* the snap rests at 0: the first chip whole (#196) */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.bx-chips__row::-webkit-scrollbar { display: none; }
.bx-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff;
  color: var(--color-text); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; scroll-snap-align: start; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.bx-chip small { font-size: 12px; color: var(--color-text-subtle); }
.bx-chip:hover { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); transform: translateY(-1px); }
.bx-chip:hover small { color: var(--color-link-hover); }

/* ---- Sliders ------------------------------------------------------------------------------------------------ */
.bx-body { gap: var(--section-gap); }
.bx-body > .home-shelf .shelf { margin: 0; }
/* Tiles with a link (Genres): ▶ plays the radio, the tile opens the page */
.tile-w { position: relative; display: grid; min-width: 0; }
.tile-w > a { text-decoration: none; color: #fff; }
.tile-w__radio { z-index: 2; border: 0; cursor: pointer; }
.tile-w:hover .ltile__play, .tile-w:hover .gtile__play, .tile-w:focus-within .ltile__play, .tile-w:focus-within .gtile__play { opacity: 1; transform: none; }
.tile-w__radio:hover { transform: scale(1.08) !important; }
/* Every station / genre of a kind: rows of tiles */
.shelf__track.bx-tilegrid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
.shelf__track--genres.bx-tilegrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Radio stations: big gradient cards with a moving equaliser */
.bx-stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.bx-station { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 148px; padding: 18px 18px 16px; overflow: hidden;
  border: 0; border-radius: var(--radius-lg); text-align: left; color: #fff; cursor: pointer; isolation: isolate;
  background: linear-gradient(135deg, hsl(var(--h) 62% 42%), hsl(calc(var(--h) + 38) 70% 55%)); box-shadow: 0 8px 20px hsl(var(--h) 50% 35% / .22);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.bx-station::after { content: ""; position: absolute; right: -40px; top: -40px; z-index: -1; width: 160px; height: 160px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .12); }
.bx-station:hover { transform: translateY(-4px); box-shadow: 0 18px 32px hsl(var(--h) 50% 35% / .35); }
.bx-station__eq { display: flex; align-items: flex-end; gap: 4px; height: 28px; }
.bx-station__eq i { width: 5px; height: 30%; border-radius: 3px; background: rgba(255, 255, 255, .9); animation: bx-eq 1.1s ease-in-out infinite; animation-play-state: paused; }
.bx-station__eq i:nth-child(2) { animation-delay: -.3s; height: 70%; }
.bx-station__eq i:nth-child(3) { animation-delay: -.6s; height: 45%; }
.bx-station__eq i:nth-child(4) { animation-delay: -.15s; height: 85%; }
.bx-station__eq i:nth-child(5) { animation-delay: -.45s; height: 55%; }
.bx-station:hover .bx-station__eq i, .bx-station:focus-visible .bx-station__eq i { animation-play-state: running; }
@keyframes bx-eq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
.bx-station__eq i { transform-origin: bottom; }
.bx-station__t { display: grid; gap: 3px; padding-right: 48px; }
.bx-station__t strong { font-size: 17px; font-weight: 700; line-height: 1.2; }
.bx-station__t small { font-size: 13px; opacity: .85; }
.bx-station__play { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff;
  color: hsl(var(--h) 60% 38%); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); transition: transform .25s; }
.bx-station__play svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.bx-station:hover .bx-station__play { transform: scale(1.1); }

/* Every genre, A–Z */
.bx-cloud__list { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- The whole list ------------------------------------------------------------------------------------------- */
.bx-list { min-height: 200px; transition: opacity .2s; }
.bx-list.is-busy { opacity: .45; pointer-events: none; }
.bx-grid { margin-top: var(--space-2); }
.bx-grid--events, .bx-gridsec .sh-grid:has(.ev-card) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bx-grid--artists, .bx-gridsec .sh-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

@media (max-width: 900px) {
  .bx-bar { flex-direction: column; align-items: stretch; }
  .bx-tabs { align-self: flex-start; }
  .bx-chips__k { display: none; }
}
@media (max-width: 640px) {
  .bx-collage { width: 200px; height: 120px; opacity: .45; }
  .bx-collage__i { width: 80px; height: 80px; }
  .bx-collage__i--0 { width: 92px; height: 92px; }
  .bx-trail { font-size: 13px; }
  .bx-stations { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bx-station { min-height: 124px; padding: 14px; }
  .bx-station__t strong { font-size: 15px; }
  .bx-station__t { padding-right: 0; }
  .bx-station__play { width: 34px; height: 34px; top: 12px; bottom: auto; }
  .shelf__track.bx-tilegrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (hover: none) { .tile-w .ltile__play, .tile-w .gtile__play { opacity: 1; transform: none; } }

/* ==== Artist and album layouts (browse.js): featured, posters, compact rows, records ========================== */
.bx-noart { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-link); background: linear-gradient(135deg, var(--teal-100), var(--teal-200)); }
.bx-noart svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bx-noart + img, .bx-alfeat__art img, .bx-almini__art img, .bx-vinyl__sleeve img, .bx-alrow__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bx-feat a:not(.shelf__all), .bx-posters a:not(.shelf__all), .bx-arows a:not(.shelf__all), .bx-vinyls a:not(.shelf__all), .bx-alrows a:not(.shelf__all) { color: inherit; text-decoration: none; }

/* ---- Featured: the #1 big, the next ones beside it ---- */
.bx-feat__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.bx-feat__big { position: relative; display: flex; align-items: center; gap: 28px; min-height: 290px; padding: 30px; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--teal-900); color: #fff; isolation: isolate; box-shadow: 0 16px 36px rgb(var(--teal-900-rgb) / .22); }
.bx-feat__bg { position: absolute; inset: -40px; z-index: -2; background: var(--bg) center / cover; filter: blur(30px) saturate(1.25) brightness(.6); transform: scale(1.1); }
.bx-feat__big::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgb(var(--teal-950-rgb) / .55), rgb(var(--teal-950-rgb) / .1) 70%); }
.bx-afeat__face { flex: none; width: 176px; height: 176px; overflow: hidden; border: 4px solid rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.bx-afeat__face img { width: 100%; height: 100%; object-fit: cover; }
.bx-alfeat__art { position: relative; flex: none; width: 156px; height: 156px; overflow: hidden; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.bx-alfeat .bx-feat__big { min-height: 0; padding: 24px 26px; gap: 24px; }
.bx-alfeat .bx-feat__name { font-size: clamp(20px, 2vw, 26px); }
.bx-alfeat .bx-feat__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.bx-feat__big:hover .bx-afeat__face, .bx-feat__big:hover .bx-alfeat__art { transform: scale(1.04) rotate(-2deg); }
.bx-feat__t { display: grid; gap: 6px; min-width: 0; }
.bx-feat__label { justify-self: start; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bx-feat__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; line-height: 1.1; }
.bx-feat__name:hover { text-decoration: underline; }
.bx-feat__by { font-size: 15px; font-weight: 600; }
.bx-feat__t small { font-size: 13px; color: var(--color-on-dark-soft); }
.bx-feat__act { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.bx-feat__act .btn svg { width: 14px; height: 14px; margin-right: 6px; fill: currentColor; }
.bx-feat__follow { border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .18); color: #fff; }
.bx-feat__follow:hover { background: #fff; color: var(--color-link-hover); }
.bx-feat__follow.is-following { background: rgba(255, 255, 255, .9); color: var(--color-link-hover); }
/* the next eight artists */
.bx-afeat__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: center; }
.bx-amini { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 12px 6px 10px; border-radius: var(--radius-md); text-align: center; transition: background .2s; }
.bx-amini:hover { background: var(--color-primary-soft); }
.bx-amini__img { position: relative; display: block; width: 86px; height: 86px; }
.bx-amini__img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgb(var(--teal-900-rgb) / .14); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.bx-amini:hover .bx-amini__img img { transform: scale(1.06); }
.bx-amini__n { position: absolute; top: -2px; left: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--color-link-hover);
  font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.bx-amini__play { position: absolute; top: 72px; left: calc(50% + 16px); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-primary); color: #fff; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; box-shadow: 0 6px 14px rgb(var(--teal-600-rgb) / .4); }
.bx-amini__play svg { width: 13px; height: 13px; margin-left: 2px; fill: currentColor; }
.bx-amini:hover .bx-amini__play, .bx-amini__play:focus-visible { opacity: 1; transform: none; }
.bx-amini__t { display: grid; width: 100%; min-width: 0; }
.bx-amini__t strong, .bx-almini__t strong { overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bx-amini__t small, .bx-almini__t small { overflow: hidden; font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; text-overflow: ellipsis; }
/* the next six albums */
.bx-alfeat__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-content: center; }
.bx-almini { position: relative; min-width: 0; }
.bx-almini__art { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 10px; box-shadow: 0 6px 16px rgb(var(--teal-900-rgb) / .12); }
.bx-almini__art img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.bx-almini:hover .bx-almini__art img { transform: scale(1.07); }
.bx-almini__play { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #fff;
  color: var(--color-link); cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.bx-almini__play svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.bx-almini:hover .bx-almini__play, .bx-almini__play:focus-visible { opacity: 1; transform: none; }
.bx-almini__t { display: grid; margin-top: 6px; min-width: 0; }
.bx-almini__t strong { font-size: 13px; }

/* ---- Posters: tall photo cards ---- */
.shelf__track--poster { grid-auto-columns: 200px; gap: 16px; }
.bx-poster { position: relative; height: 270px; overflow: hidden; border-radius: var(--radius-lg); background: hsl(var(--h) 35% 32%); scroll-snap-align: start; isolation: isolate;
  box-shadow: 0 6px 18px rgb(var(--teal-900-rgb) / .12); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.bx-poster__img { position: absolute; inset: 0; z-index: -2; }
.bx-poster__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.bx-poster__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(var(--teal-950-rgb) / 0) 45%, rgb(var(--teal-950-rgb) / .88)); }
.bx-poster__t { position: absolute; right: 60px; bottom: 16px; left: 16px; display: grid; gap: 2px; color: #fff; }
.bx-poster__name { overflow: hidden; font-size: 16px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.bx-poster__t small { font-size: 12px; opacity: .85; }
.bx-poster__play { position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff;
  color: var(--color-link); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.bx-poster__play svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.bx-poster__more { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s; }
.bx-poster__more svg { width: 16px; height: 16px; fill: currentColor; }
.bx-poster:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgb(var(--teal-900-rgb) / .22); }
.bx-poster:hover .bx-poster__img img { transform: scale(1.07); }
.bx-poster:hover .bx-poster__play, .bx-poster:hover .bx-poster__more, .bx-poster__play:focus-visible { opacity: 1; transform: none; }

/* ---- Compact rows: two rows sliding sideways ---- */
/* Columns share the width when there are only a few (no empty gap on the right), and keep their size and slide when there are more */
.shelf__track--arows { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: minmax(330px, 1fr); gap: 10px 18px; }
.bx-arow { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: var(--radius-md); scroll-snap-align: start; transition: background .2s; }
.bx-arow:hover { background: var(--color-primary-soft); }
.bx-arow__img { flex: none; width: 58px; height: 58px; overflow: hidden; border-radius: 50%; }
.bx-arow__img img { width: 100%; height: 100%; object-fit: cover; }
.bx-arow__play { position: absolute; top: 50%; left: 10px; display: grid; place-items: center; width: 58px; height: 58px; margin-top: -29px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(var(--teal-950-rgb) / .45); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s; }
.bx-arow__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.bx-arow:hover .bx-arow__play, .bx-arow__play:focus-visible { opacity: 1; }
.bx-arow__t { display: grid; flex: 1; min-width: 0; }
.bx-arow__t strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bx-arow__t small { overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.bx-arow__follow { flex: none; padding: 5px 14px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); background: #fff; color: var(--color-link-hover);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.bx-arow__follow:hover { background: var(--color-primary); color: #fff; }
.bx-arow__follow.is-following { border-color: var(--color-control-soft); color: var(--color-text-muted); }
.shelf__track--alrows { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: minmax(360px, 1fr); gap: 12px 18px; }
.bx-alrow { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff;
  scroll-snap-align: start; transition: transform .25s, box-shadow .25s, border-color .25s; }
.bx-alrow:hover { border-color: transparent; box-shadow: 0 10px 24px rgb(var(--teal-900-rgb) / .12); transform: translateY(-2px); }
.bx-alrow__art { position: relative; flex: none; width: 72px; height: 72px; overflow: hidden; border-radius: 8px; }
.bx-alrow__t { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr); gap: 1px; min-width: 0; }
/* a long title (or one without spaces) ends in … inside the card, never over the play button */
.bx-alrow__t > *, .bx-almini__t > *, .bx-vinyl > a, .bx-arow__t > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-alrow__t strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bx-alrow__t small { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.bx-alrow__t .bx-alrow__m { font-size: 12px; color: var(--color-text-subtle); }
.bx-alrow__play { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary-soft);
  color: var(--color-link); cursor: pointer; transition: background .2s, color .2s; }
.bx-alrow__play svg { width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.bx-alrow__play:hover { background: var(--color-primary); color: #fff; }
.bx-alrow .srow__btn { opacity: 0; }
.bx-alrow:hover .srow__btn, .bx-alrow .srow__btn:focus-visible { opacity: 1; }

/* ---- Records: the sleeve with its disc peeking out ---- */
.shelf__track--vinyl { grid-auto-columns: 212px; gap: 26px; }
.bx-vinyl { min-width: 0; scroll-snap-align: start; }
.bx-vinyl__media { position: relative; width: calc(100% - 30px); aspect-ratio: 1; margin-bottom: 12px; }
.bx-vinyl__disc { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; border-radius: 50%; border: 2px solid var(--teal-300); box-shadow: 0 6px 16px rgb(var(--teal-900-rgb) / .16);
  background: radial-gradient(circle, transparent 0 30%, rgb(var(--teal-600-rgb) / .18) 31%, transparent 33%), repeating-radial-gradient(circle, var(--teal-50) 0 2px, var(--tg-100) 2px 4px);
  transform: translateX(18%); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.bx-vinyl__label { position: absolute; inset: 32%; border-radius: 50%; background: var(--color-primary) center / cover; box-shadow: 0 0 0 3px var(--teal-200), 0 0 0 4px var(--teal-300); }
.bx-vinyl__label::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--teal-300); }
.bx-vinyl__sleeve { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 6px; box-shadow: 6px 10px 22px rgba(0, 0, 0, .25); }
.bx-vinyl__sleeve::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .18), transparent 40%); pointer-events: none; }
.bx-vinyl__play { position: absolute; bottom: 12px; left: 12px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-primary); color: #fff; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; box-shadow: 0 8px 18px rgb(var(--teal-600-rgb) / .45); }
.bx-vinyl__play svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.bx-vinyl:hover .bx-vinyl__disc { transform: translateX(31%); }   /* out by ~23px, still ~14px short of the next sleeve (#190) */
.bx-vinyl:hover .bx-vinyl__label { animation: spin 2.6s linear infinite; }
.bx-vinyl:hover .bx-vinyl__play, .bx-vinyl__play:focus-visible { opacity: 1; transform: none; }
.bx-vinyl__t strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bx-vinyl small { display: block; overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }

@media (hover: none) {
  .bx-poster__play, .bx-vinyl__play, .bx-amini__play, .bx-almini__play { opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
  .bx-feat__body, .bx-alfeat .bx-feat__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bx-feat__big { flex-direction: column; align-items: flex-start; gap: 18px; min-height: 0; padding: 22px; }
  .bx-afeat__face { width: 110px; height: 110px; }
  .bx-alfeat__art { width: 120px; height: 120px; }
  /* #313: four across a phone left about 80 px for a title, so every name ended in an ellipsis and two albums
     could read the same. Three at 480–640, two below that, where there is no room for three. */
  .bx-alfeat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bx-almini:nth-child(n+9) { display: none; }
  .bx-afeat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .bx-amini { padding: 8px 2px; }
  .bx-amini__img { width: 64px; height: 64px; }
  .bx-amini__play { top: 50px; left: calc(50% + 10px); width: 28px; height: 28px; }
  .bx-alfeat__grid { gap: 10px; }
  .shelf__track--poster { grid-auto-columns: 160px; }
  .bx-poster { height: 220px; }
  .shelf__track--arows { grid-auto-columns: minmax(280px, 1fr); }
  .shelf__track--alrows { grid-auto-columns: minmax(300px, 1fr); }
  .shelf__track--vinyl { grid-auto-columns: 170px; gap: 22px; }
}

/* ---- feed.css ---- */
/* =====================================================================
   Music Feed (feed.js, decisions #109, #110). Song rows (.srow) come from home.css.
   Wide: [you + tabs] [stories + feed] [side boxes], the whole width; phones: one column.
   ===================================================================== */
.feed { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; gap: 28px; align-items: start; max-width: 1480px; margin: 0 auto; }
.feed > .lib__guest { grid-column: 1 / -1; }
.feed__left, .feed__right { position: sticky; top: calc(var(--header-height) + 20px); display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - var(--header-height) - 40px);
  overflow-y: auto; scrollbar-width: none; padding-bottom: 90px; }
.feed__left::-webkit-scrollbar, .feed__right::-webkit-scrollbar { display: none; }
.feed__main { min-width: 0; }
.feed__list { display: flex; flex-direction: column; gap: 18px; }
.feed__more { display: flex; justify-content: center; margin: 24px 0; }
.feed__chips { display: none; }

/* You */
.fme { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; text-align: center; }
.fme__cover { height: 78px; overflow: hidden; background: linear-gradient(135deg, var(--teal-600), var(--teal-300)); }
.fme__cover img { width: 100%; height: 100%; object-fit: cover; }
.fme__cover.is-blur img { filter: blur(16px) saturate(1.3); transform: scale(1.4); }
.fme__face { display: block; width: 72px; height: 72px; margin: -38px auto 0; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: var(--tg-50); position: relative; }
.fme__face img { width: 100%; height: 100%; object-fit: cover; }
.fme__name { display: block; margin-top: 6px; padding: 0 12px; overflow: hidden; font-size: 16px; font-weight: 700; color: var(--color-text); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.fme__role { display: block; font-size: 12px; color: var(--color-text-subtle); }
.fme__stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 12px; border-top: 1px solid var(--tg-50); }
.fme__stats a { padding: 10px 6px; color: var(--color-text); text-decoration: none; transition: background .2s; }
.fme__stats a:nth-child(odd) { border-right: 1px solid var(--tg-50); }
.fme__stats a:nth-child(n+3) { border-top: 1px solid var(--tg-50); }
.fme__stats a:hover { background: var(--color-primary-soft); }
.fme__stats b { display: block; font-size: 17px; }
.fme__stats small { font-size: 12px; color: var(--color-text-muted); }
.fnav { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.fnav__tab { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--color-text); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.fnav__tab svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--color-text-muted); }
.fnav__tab:hover { background: var(--color-surface-muted); }
.fnav__tab.is-on { background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.fnav__tab.is-on svg { color: var(--color-link); }

/* Stories row */
.fstories { display: flex; gap: 14px; margin-bottom: 18px; padding: 14px 16px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.fstories::-webkit-scrollbar { display: none; }
.fstories:empty { display: none; }
.fstory { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.fstory__ring { position: relative; display: block; width: 66px; height: 66px; padding: 3px; border-radius: 50%; background: var(--tg-100); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.fstory.is-new .fstory__ring { background: conic-gradient(from 200deg, var(--teal-500), #7b61ff, #ff5c8a, #ffb347, var(--teal-500)); }
.fstory__ring img { width: 100%; height: 100%; border: 3px solid #fff; border-radius: 50%; object-fit: cover; background: var(--tg-50); }
.fstory__play { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 50%; background: rgb(var(--teal-950-rgb) / .45); opacity: 0; transition: opacity .2s; }
.fstory__play svg { width: 20px; height: 20px; margin-left: 2px; fill: #fff; }
.fstory:hover .fstory__ring { transform: scale(1.06); }
.fstory:hover .fstory__play { opacity: 1; }
.fstory__name { width: 100%; overflow: hidden; font-size: 12px; color: var(--color-text); white-space: nowrap; text-overflow: ellipsis; text-align: center; }

/* A card */
.fx { padding: 16px 18px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; transition: box-shadow .3s, border-color .3s; }
.fx:hover { border-color: var(--teal-150); box-shadow: 0 12px 32px rgb(var(--teal-950-rgb) / .08); }
.fx--sk { min-height: 210px; }
.fx__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fx__av { flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--tg-50); }
.fx__av img { width: 100%; height: 100%; object-fit: cover; }
.fx__av--icon { display: grid; place-items: center; background: var(--danger-soft); color: var(--heart); }
.fx__av--icon svg { width: 20px; height: 20px; fill: currentColor; }
.fx__line { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-text-muted); }
.fx__line a { font-weight: 600; color: var(--color-text); text-decoration: none; }
.fx__line a:hover { color: var(--color-link); }
.fx__line b { color: var(--color-text); }
.fx__muted { color: var(--color-text-subtle); font-weight: 400; }
.fx__wave { display: inline-block; animation: fx-wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes fx-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } }
.fx__chip { flex: none; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--color-primary-soft); color: var(--color-link-hover); }
.fx__chip--album, .fx__chip--list { background: #f1ecfc; color: #6a43c2; }
.fx__chip--event { background: #fdf0e6; color: #b85c12; }
.fx__chip--hello, .fx__chip--rising, .fx__chip--people { background: #e9f7ee; color: #1f8a4c; }
.fx__chip--slated { background: var(--danger-soft); color: #c43a52; }
.fx__chip--pick, .fx__chip--say { background: #eef2fb; color: #3e5aa8; }
.fx__foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fx__foot .btn { display: inline-flex; align-items: center; gap: 7px; }
.fx__foot .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.fx__cta { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--color-link-hover); }
.fx__cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Social proof */
.fproof { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--color-text-muted); }
.fproof__faces { display: flex; flex: none; }
.fproof__faces img, .fface { width: 26px; height: 26px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: var(--tg-50); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.fproof__faces > :first-child { margin-left: 0; }
.fface--i { display: grid; place-items: center; flex: none; box-sizing: border-box; background: hsl(var(--h) 52% 58%); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.fproof__faces--head img, .fproof__faces--head .fface--i { width: 34px; height: 34px; font-size: 14px; }
.fproof__t a { font-weight: 600; color: var(--color-text); text-decoration: none; }
.fproof__t a:hover { color: var(--color-link); }
.fproof__t b { color: var(--color-text); }

/* Media: a song / album / playlist */
.fsong { position: relative; display: flex; align-items: center; gap: 18px; padding: 14px; overflow: hidden; border-radius: var(--radius-md); background: #f4f9f9; isolation: isolate; }
.fsong__bg { display: none; }
.fsong--big { padding: 20px; color: #fff; background: var(--teal-900); }
.fsong--big .fsong__bg { display: block; position: absolute; inset: -40px; z-index: -1; background: var(--art) center / cover no-repeat, linear-gradient(135deg, var(--teal-600), var(--teal-500));
  filter: blur(30px) saturate(1.5) brightness(.55); transform: scale(1.1); transition: transform 6s ease; }
.fsong--big:hover .fsong__bg { transform: scale(1.22); }
.fsong__art { position: relative; flex: none; display: grid; place-items: center; width: 120px; height: 120px; overflow: hidden; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; box-shadow: 0 12px 26px rgba(0, 0, 0, .25); }
.fsong--big .fsong__art { width: 168px; height: 168px; }
.fsong__art > svg { width: 36%; height: 36%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.fsong__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.fsong:hover .fsong__art img { transform: scale(1.06); }
.fsong__play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: var(--color-primary); color: #fff; cursor: pointer; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.fsong__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.fsong:hover .fsong__play { opacity: 1; transform: none; }
.fsong__t { flex: 1; min-width: 0; }
.fsong__kind { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .75; }
.fsong__title { display: -webkit-box; overflow: hidden; font-size: 19px; font-weight: 700; line-height: 1.22; color: inherit; text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fsong--big .fsong__title { font-size: 26px; }
.fsong__title:hover { text-decoration: underline; }
.fsong__by { display: block; overflow: hidden; margin-top: 4px; font-size: 14px; opacity: .85; white-space: nowrap; text-overflow: ellipsis; }
.fsong__by a { color: inherit; text-decoration: none; }
.fsong__by a:hover { text-decoration: underline; }
.fsong__act { display: flex; align-items: center; gap: 6px; margin-top: 16px; }
.fsong__act .btn { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; }
.fsong__act .btn svg { width: 13px; height: 13px; fill: currentColor; }
.fbtn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: inherit; cursor: pointer; transition: background .2s, color .2s; }
.fsong:not(.fsong--big) .fbtn { background: #fff; color: var(--color-text-muted); }
.fbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.fbtn[data-ca="more"] svg { fill: currentColor; stroke: none; }
.fbtn:hover { background: rgba(255, 255, 255, .28); }
.fsong:not(.fsong--big) .fbtn:hover { color: var(--color-link); }
.fbtn.is-on { color: var(--heart) !important; }
.fbtn.is-on svg { fill: currentColor; }
.fbtn--ring { border: 1px solid var(--color-control); background: #fff; color: var(--color-link); }
.fbtn--ring svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; stroke: none; }
.fbtn--ring:hover { background: var(--color-primary); color: #fff; }
.fmosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.fmosaic img { position: static !important; width: 100%; height: 100%; object-fit: cover; }

/* A person */
.fperson { overflow: hidden; border: 1px solid var(--tg-50); border-radius: var(--radius-md); }
.fperson__cover { display: block; height: 120px; overflow: hidden; background: linear-gradient(135deg, var(--teal-600), #7b61ff); }
.fperson__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fperson__cover.is-blur img { filter: blur(20px) saturate(1.4); transform: scale(1.4); }
.fperson:hover .fperson__cover img { transform: scale(1.06); }
.fperson:hover .fperson__cover.is-blur img { transform: scale(1.5); }
.fperson__row { display: flex; align-items: flex-end; gap: 14px; padding: 0 16px 14px; }
.fperson__face { flex: none; width: 88px; height: 88px; margin-top: -40px; overflow: hidden; border: 4px solid #fff; border-radius: 50%; background: var(--tg-50); position: relative; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.fperson__face img { width: 100%; height: 100%; object-fit: cover; }
.fperson__t { flex: 1; min-width: 0; padding-top: 10px; }
.fperson__name { display: block; overflow: hidden; font-size: 17px; font-weight: 700; color: var(--color-text); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.fperson__name:hover { color: var(--color-link); }
.fperson__t small { font-size: 13px; color: var(--color-text-muted); }
.fperson__skills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fperson__skills span { padding: 2px 9px; border-radius: var(--radius-pill); background: #f1f5f5; font-size: 12px; color: var(--color-text-muted); }
.fperson__act { display: flex; align-items: center; gap: 8px; flex: none; }

/* Events, milestones, quotes */
.fevent .ev-card { max-width: 100%; }
.fevent .ev-card__art { aspect-ratio: 16 / 7; }
.fx--milestone { padding: 0; overflow: hidden; }
.fx--milestone .fproof { margin: 0; padding: 12px 18px 16px; }
.fmile { position: relative; display: flex; align-items: center; gap: 20px; padding: 22px; overflow: hidden; background: linear-gradient(120deg, #fff6e5, #ffe9f0 55%, #eaf6ff); }
.fmile__burst { position: absolute; left: -20px; top: -20px; color: rgba(255, 170, 60, .3); }
.fmile__burst svg { width: 140px; height: 140px; fill: none; stroke: currentColor; stroke-width: 1.5; animation: fmile-spin 18s linear infinite; }
@keyframes fmile-spin { to { transform: rotate(360deg); } }
.fmile__n { position: relative; flex: none; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: #fff; box-shadow: 0 10px 26px rgba(214, 120, 40, .22); text-align: center; }
.fmile__n b { display: block; font-size: 30px; line-height: 1; background: linear-gradient(135deg, #ff8a3d, var(--heart)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fmile__n small { display: block; font-size: 12px; color: var(--color-text-muted); }
.fmile__t { position: relative; flex: 1; min-width: 0; }
.fmile__t p { margin: 0; font-size: 16px; line-height: 1.45; }
.fmile__t a { font-weight: 700; color: var(--color-text); text-decoration: none; }
.fmile__t a:hover { color: var(--color-link); }
.fmile__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fmile__act .btn--primary { display: inline-flex; align-items: center; gap: 7px; }
.fmile__act .btn--primary svg { width: 13px; height: 13px; fill: currentColor; }
.fmile__art { position: relative; flex: none; width: 96px; height: 96px; overflow: hidden; border-radius: var(--radius-md); transform: rotate(4deg); box-shadow: 0 10px 22px rgba(0, 0, 0, .2); background: var(--teal-500); }
.fmile__art img { width: 100%; height: 100%; object-fit: cover; }
.fquote { position: relative; margin: 0 0 14px; padding: 16px 18px 16px 52px; border-radius: 4px 18px 18px 18px; background: #f3f6fb; }
.fquote svg { position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; fill: none; stroke: #9db0d6; stroke-width: 2; stroke-linecap: round; }
.fquote p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-text); white-space: pre-line; }

/* In-feed modules */
.fx--module { background: linear-gradient(180deg, var(--surface-hover), #fff 60%); }
.fmod__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fmod__head h3, .fbox h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 700; }
.fmod__head h3 svg, .fbox h2 svg { width: 19px; height: 19px; fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fchart { margin: 0; padding: 0; list-style: none; }
.fartists { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.fartists::-webkit-scrollbar { display: none; }
.fart { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; text-align: center; }
.fart__img { width: 76px; height: 76px; overflow: hidden; border-radius: 50%; background: var(--tg-50); }
.fart__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.fart:hover .fart__img img { transform: scale(1.08); }
.fart__name { max-width: 100%; margin-top: 4px; overflow: hidden; font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.fart small { min-height: 30px; font-size: 12px; line-height: 1.3; color: var(--color-text-muted); }
.fart .btn { width: 100%; margin-top: 4px; }
.ftiles { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.ftiles::-webkit-scrollbar { display: none; }
.ftile { min-width: 0; cursor: pointer; }
.ftile__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; margin-bottom: 8px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--teal-500), var(--teal-300)); color: #fff; }
.ftile__art > svg { width: 34%; height: 34%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ftile__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ftile:hover .ftile__art img { transform: scale(1.06); }
.ftile:hover .srow__play { opacity: 1; }
.ftile strong, .ftile small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ftile strong { font-size: 14px; }
.ftile small { font-size: 12px; color: var(--color-text-muted); }

/* Right column */
.fbox { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.fbox h2 { margin-bottom: 10px; font-size: 15px; }
.fbox__more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--color-link-hover); text-decoration: none; }
.fbox__more:hover { text-decoration: underline; }
.fchart--mini .srow { padding: 6px 4px; gap: 10px; }
.fchart--mini .srow__art { width: 44px; height: 44px; }
.fwho { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.fwho + .fwho { border-top: 1px solid var(--tg-50); }
.fwho__img { flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: var(--tg-50); }
.fwho__img img { width: 100%; height: 100%; object-fit: cover; }
.fwho__t { flex: 1; min-width: 0; color: var(--color-text); text-decoration: none; }
.fwho__t strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.fwho__t small { display: block; overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.fwho__t strong:hover { color: var(--color-link); }
.fev { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--color-text); text-decoration: none; }
.fev + .fev { border-top: 1px solid var(--tg-50); }
.fev__d { flex: none; display: grid; place-items: center; width: 46px; height: 50px; border-radius: 10px; background: #fdf0e6; color: #b85c12; line-height: 1.05; text-align: center; }
.fev__d small { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.fev__d b { font-size: 18px; }
.fev__t { min-width: 0; }
.fev__t strong { display: block; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.fev__t small { display: block; overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.fev strong:hover { color: var(--color-link); }
.fsearch { display: flex; flex-wrap: wrap; gap: 7px; }
.fsearch .sp-chip { padding: 6px 12px; font-size: 13px; }

@media (max-width: 1280px) { .feed { grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 22px; } }
@media (max-width: 1100px) {
  .feed { grid-template-columns: minmax(0, 1fr) 300px; }
  .feed__left { display: none; }
  .feed__chips { position: sticky; top: var(--header-height); z-index: 5; display: flex; gap: 8px; margin: 0 -4px 12px; padding: 8px 4px; overflow-x: auto; scrollbar-width: none;
    background: linear-gradient(var(--color-bg, #fff) 82%, transparent); }
}
@media (max-width: 860px) { .feed { grid-template-columns: minmax(0, 1fr); } .feed__right { display: none; } }
@media (max-width: 767px) {
  .fstories { margin: 0 calc(var(--gutter) * -1) 12px; padding: 12px var(--gutter); border-width: 0 0 1px; border-radius: 0; }
  .fx { padding: 14px; }
  .fsong, .fsong--big { gap: 14px; padding: 12px; }
  .fsong__art, .fsong--big .fsong__art { width: 96px; height: 96px; }
  .fsong__title, .fsong--big .fsong__title { font-size: 17px; }
  .fsong__play { opacity: 1; transform: none; width: 38px; height: 38px; right: 6px; bottom: 6px; }
  .fsong__act { margin-top: 10px; }
  .fsong__act .btn { display: none; }
  .fx__chip { display: none; }
  .fperson__row { flex-wrap: wrap; }
  .fperson__act { width: 100%; justify-content: flex-end; }
  .fmile { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .fmile__n { width: 84px; height: 84px; }
  .fmile__n b { font-size: 24px; }
  .fmile__art { display: none; }
}

/* The header button (#110): lit on the feed */
.app-header__feed { display: grid; place-items: center; color: inherit; }
.app-header__feed.is-on { background: var(--color-primary-soft); color: var(--color-link); }
/* Wider screens: the icon with its name in a light teal pill (#117); phones: the icon alone */
.app-header__feed-t { display: none; }
@media (min-width: 1024px) {
  .app-header__feed { display: inline-flex; align-items: center; gap: 7px; width: auto; height: 38px; padding: 0 15px 0 12px; border: 1px solid var(--teal-200); border-radius: var(--radius-pill);
    color: var(--color-link); font-size: 14px; font-weight: 400; line-height: 1; text-decoration: none; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }   /* at rest the link teal, like every teal word on white; the hover shade only on hover (#305) */
  .app-header__feed svg { width: 20px; height: 20px; }
  .app-header__feed-t { display: block; padding-top: 1px; }      /* Poppins sits a touch high: optically centred */
  .app-header__feed:hover, .app-header__feed:focus-visible, .app-header__feed.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); }
}
/* ⋯ on a tile: top-right of the picture, as on cards */
.ftile { position: relative; }
.ftile > .list-more { position: absolute; top: 6px; right: 6px; z-index: 2; width: 30px; height: 30px; background: rgba(255, 255, 255, 0.92); color: var(--color-text); box-shadow: var(--shadow-sm); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.ftile:hover > .list-more, .ftile > .list-more:focus-visible, .ftile > .list-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .ftile > .list-more { opacity: 1; } }
/* Trending This Week once per screen: in the right column when it shows, in the feed only when it doesn't */
@media (min-width: 861px) { .feed:has(.feed__right .fchart) .fx--chart { display: none; } }
/* #304: the feed tabs are links now (every tab is an address) — never underlined */
a.fnav__tab, a.sp-tab { text-decoration: none; }

/* ---- song.css ---- */
/* =====================================================================
   The song page (decisions #112, #151) — song.js. Built on the profile pages' look (.apx, social.css):
   the cover, the numbers strip, the slim bar, the sections — with what's the song's own here.
   ===================================================================== */
.sp { display: block; }
.sp > .ev-draftbar { margin-bottom: var(--space-4); }

/* ---- Cover ------------------------------------------------------------------------------------------ */
.sp-hero--sk { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface-muted); }
.sp-hero--sk .sp-hero__in { display: flex; align-items: flex-end; gap: 28px; padding: 36px 36px 64px; }
.sp-hero--sk .sp-meta { flex: 1; }
.sp .apx-hero { min-height: clamp(320px, 30vw, 420px); }
.sp .apx-hero__bg { background: var(--teal-950); }
.sp .apx-hero__bg img.apx-hero__blur { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); opacity: .85; }
.sp .apx-hero__video { z-index: 0; }
/* The video plays in the cover: a little more shade on the left, where the words are */
.sp .apx-hero.has-video .apx-hero__bg::after { background: linear-gradient(90deg, rgba(6, 18, 19, .86) 0%, rgba(6, 18, 19, .7) 38%, rgba(6, 18, 19, .32) 72%, rgba(6, 18, 19, .2) 100%), linear-gradient(180deg, rgba(6, 18, 19, .25) 0%, rgba(6, 18, 19, 0) 30%, rgba(6, 18, 19, .55) 78%, rgba(6, 18, 19, .85) 100%); }
/* Words on a moving picture: a soft shadow keeps them readable whatever the frame */
.sp .apx-hero.has-video h1, .sp .apx-hero.has-video .sp-by, .sp .apx-hero.has-video .apx-hero__meta, .sp .apx-hero.has-video .apx-hero__kicker { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 4px 22px rgba(0, 0, 0, .45); }
.sp .apx-hero__bg::after { z-index: 1; }
.sp .apx-hero__in { position: relative; z-index: 1; align-items: flex-end; }

/* Artwork, with a record that slides out and spins while the song plays */
.sp-art { position: relative; flex: none; width: clamp(170px, 18vw, 236px); aspect-ratio: 1; }
.sp-art.sk { border-radius: 14px; }
.sp-art__img { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, 0.1); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45); }
.sp-art__img img { width: 100%; height: 100%; object-fit: cover; }
.sp-art__empty svg { width: 64px; height: 64px; fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.5; }
/* #313: with no artwork the square was 10% white, so the record behind showed through it — grooves and a small
   spindle dot where a sleeve should be. A song without a picture gets a plain tile, and the note waits under the
   picture so a file that never arrived leaves the tile, not a blank square. */
.sp-art__img:has(.sp-art__empty) { background: var(--color-primary-soft); }
.sp-art__empty svg { stroke: var(--color-link); }                        /* the same light tile the cards use (#313) */
.sp-av__by { margin-top: 14px; text-align: right; }
.sp-art__empty { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; }
.sp-art__img > .sp-art__own, .sp-art__img > .sp-mosaic { position: absolute; inset: 0; z-index: 1; }
.sp-disc { position: absolute; z-index: 1; top: 5%; left: 5%; width: 90%; height: 90%; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #1d1d1d 2px 4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sp-disc > span { position: absolute; inset: 33%; border-radius: 50%; background: var(--color-primary) center / cover; box-shadow: 0 0 0 4px #0b0b0b; }
.sp-disc::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ddd; }
.sp-art.is-playing .sp-disc { transform: translateX(18%); }                 /* a small, sleek peek (Rohit: half of before) */
.sp-art.is-playing .sp-disc > span { animation: sp-spin 4s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-art.is-playing { margin-right: clamp(18px, 2.6vw, 40px); transition: margin .9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sp-art { transition: margin .9s cubic-bezier(0.2, 0.8, 0.2, 1); }

.sp-kick { flex-wrap: wrap; gap: 8px; }
.sp-label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 11px; letter-spacing: 0.08em; cursor: default; }
.sp-label svg { width: 12px; height: 12px; fill: currentColor; }
.sp-label--exclusive { background: linear-gradient(135deg, #ffe08a, #e9a93a); color: #3b2600; box-shadow: 0 4px 14px rgba(233, 169, 58, 0.35); }
.sp-label--preview { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); }
/* A cover / recreation / remix (#184): the version on the artwork — a pill like Exclusive; its original is a card in About */
.sp-art__tag { position: absolute; top: 10px; left: 10px; z-index: 4; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.94); color: var(--color-link-hover);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); pointer-events: none; }
.sp-e { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: rgba(255, 255, 255, 0.85); color: #10262d; font-family: var(--font-body); font-size: 12px; vertical-align: middle; text-shadow: none; }
.sp-by { margin: 10px 0 0; font-size: 17px; font-weight: 600; }
.sp-by a, .sp-by span { color: #fff; text-decoration: none; }
.sp-by a:hover { text-decoration: underline; }
.sp-by i { font-style: normal; opacity: 0.6; }.sp-meta a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.sp-meta a:hover { color: #fff; text-decoration: underline; }
.sp-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Play (with its word), then round buttons — the profile pages' buttons */
.sp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.sp-acts .apx-round svg { stroke-linecap: round; stroke-linejoin: round; }
.sp-acts .apx-round svg.is-fill { fill: currentColor; stroke: none; }
.sp-acts .apx-round.is-on { border-color: #fff; background: #fff; color: var(--color-link-hover); }
/* A slated heart is the site's red wherever it is — hero, slim bar, cards, player (#313) */
.sp-acts .apx-round.is-on[data-slate] { color: var(--heart); }
.sp-acts .apx-round.is-on[data-slate] svg { fill: currentColor; }
.sp-acts .apx-btn { display: inline-flex; align-items: center; gap: 8px; }
.sp-acts .apx-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-acts .apx-btn svg.is-fill { fill: var(--heart); stroke: none; }
.sp-play:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.sp-play .is-pause, .sp-play.is-playing .is-play { display: none; }
.sp-play.is-playing .is-pause { display: block; }
.sp-play svg { fill: currentColor; stroke: none; }

/* ---- Numbers strip ---------------------------------------------------------------------------------- */
.sp-stats [data-jump] { cursor: pointer; border-radius: var(--radius-md); transition: background-color var(--dur-fast) var(--ease); }
.sp-stats [data-jump]:hover { background: var(--surface-hover); }
.sp-stats .apx-stat__ic svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Slim bar ---------------------------------------------------------------------------------------- */
.sp .apx-bar__av--sq { border-radius: 8px; }
.sp .apx-bar__av img { display: block; }
.apx-bar .apx-pill.apx-pill--ic { width: 36px; padding: 0; }
.apx-bar .apx-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.apx-bar .apx-pill svg.is-fill { fill: currentColor; stroke: none; }
.apx-bar .apx-pill--ic.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); }
.apx-bar .apx-pill--ic.is-on[data-slate] { border-color: var(--heart-soft); background: var(--heart-soft); color: var(--heart); }
.apx-bar .apx-pill--ic.is-on svg { fill: currentColor; }

/* ---- Sections ---------------------------------------------------------------------------------------- */
.sp-body { gap: var(--section-gap); }
.sp-body > .sp-duo, .sp-body > .sp-duo + .apx-sec, .sp-body > .apx-sec + .sp-duo { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
.sp-body > :first-child { padding-top: 0 !important; border-top: 0 !important; }
.sp .apx-sec { scroll-margin-top: calc(var(--header-height) + 124px); }
.sp-duo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
.sp-duo--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-sub { margin: -6px 0 var(--space-4); font-size: 14px; color: var(--color-text-muted); }
.sp-more { margin-top: 10px; }
.sp-aboutcard { display: flex; flex-direction: column; gap: 14px; }
.sp-aboutcard .sp-dl { margin: 0; }
.sp-aboutcard .pgp-chips { margin: 0; }
.sp-aboutcard .sp-rights { margin: 0; text-align: right; }     /* ℗ at the far right of the card (var(--tg-800)) */
.sp-aboutcard .sp-alb { margin: 0; padding: 10px; border: 1px solid var(--color-border); }
.sp-alb__t small:first-child { color: var(--color-link-hover); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sp .shelves { margin-top: var(--section-gap); }
.sp-viewall { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border: 1.5px solid var(--color-primary); border-radius: var(--radius-pill); background: #fff; color: var(--color-link-hover); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.sp-viewall:hover, .sp-viewall[aria-expanded="true"] { background: var(--color-primary-soft); }
.sp-viewall svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* People's pictures (initial when there's none) */
.sp-face { position: relative; display: inline-grid; flex: none; width: 40px; height: 40px; font-size: 40px; overflow: hidden; border-radius: 50%; background: #e9eef0; }
/* every face round — people and pages alike — in credits, comments, original songs (#274, Rohit: never squares among circles) */
.sp-face img { width: 100%; height: 100%; object-fit: cover; }
.sp-face b { display: none; }
.sp-face.is-i b { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(140deg, hsl(calc(178 + var(--h, 0) / 18) 46% 88%), hsl(calc(178 + var(--h, 0) / 18) 40% 74%)); color: var(--teal-700); font-size: 0.42em; font-weight: 700; }
.sp-face--sm { width: 38px; height: 38px; font-size: 38px; }
.sp-face--sm.is-i b { font-size: 15px; }

/* ---- Credits: the constellation (#151) ---------------------------------------------------------------- */
.cn { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: radial-gradient(60% 75% at 50% 42%, #ffffff 0%, var(--teal-50) 55%, var(--teal-100) 100%); transition: height .4s var(--ease); }
.cn__net { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(75% 90% at 50% 45%, #000 40%, transparent 100%); mask-image: radial-gradient(75% 90% at 50% 45%, #000 40%, transparent 100%); }
.cn__stage { position: relative; height: clamp(400px, 38vw, 470px); outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.cn__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--color-primary); }
.cn__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cn__l { fill: none; stroke: rgb(var(--teal-500-rgb) / .28); stroke-width: 1.2; }
.cn__l--hub { stroke: rgb(var(--teal-500-rgb) / .4); stroke-dasharray: 3 7; animation: cn-flow 2.4s linear infinite; animation-delay: calc(var(--k) * -.3s); }
@keyframes cn-flow { to { stroke-dashoffset: -20; } }

.cn__p { position: absolute; display: block; width: 60px; height: 60px; color: var(--color-text); text-decoration: none; transform: translate(-50%, -50%);
  transition: left .8s cubic-bezier(.3, .7, .2, 1), top .8s cubic-bezier(.3, .7, .2, 1), width .8s cubic-bezier(.3, .7, .2, 1), height .8s cubic-bezier(.3, .7, .2, 1), opacity .6s ease; }
.cn__face { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(140deg, hsl(calc(178 + var(--h, 0) / 18) 46% 88%), hsl(calc(178 + var(--h, 0) / 18) 40% 74%)); box-shadow: 0 8px 22px rgb(var(--teal-950-rgb) / .16);
  animation: cn-float 3.6s ease-in-out var(--d, 0s) infinite alternate; transition: border-color .6s, box-shadow .6s, border-width .6s; }
.cn__face img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.cn__face b { color: var(--teal-700); font-size: 2.2em; font-weight: 700; }
.cn__p:not(.is-center) .cn__face b { font-size: 1.3em; }
@keyframes cn-float { from { translate: 0 -4px; } to { translate: 0 4px; } }
.cn__p:not(.is-center):hover .cn__face { border-color: var(--color-primary); box-shadow: 0 0 0 5px rgb(var(--teal-500-rgb) / .18), 0 10px 24px rgb(var(--teal-950-rgb) / .2); }
.cn__tip { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 3; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--teal-950); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, -4px); transition: opacity .2s, transform .2s; pointer-events: none; }
.cn__p:not(.is-center):hover .cn__tip, .cn__p:not(.is-center):focus-visible .cn__tip { opacity: 1; transform: translate(-50%, 0); }
.cn__p.is-center .cn__face { border-width: 5px; border-color: #fff; box-shadow: 0 0 0 7px rgb(var(--teal-500-rgb) / .35), 0 0 0 22px rgb(var(--teal-500-rgb) / .1), 0 26px 50px rgb(var(--teal-950-rgb) / .28); animation: none; }
/* The one in the middle, on hover: "View Profile" over the photo */

/* Who's in the middle: name and roles under them */
.cn__focus { position: absolute; top: calc(42% + clamp(100px, 10.5vw, 125px)); left: 50%; z-index: 45; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(420px, 40%); transform: translateX(-50%); text-align: center; pointer-events: none; }
.cn__focus a, .cn__focus span { pointer-events: auto; }
.cn__name { font-size: 21px; font-weight: 700; color: var(--color-text); text-decoration: none; }
a.cn__name:hover { color: var(--color-link-hover); }
.cn__roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cn__role { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgb(var(--teal-950-rgb) / .08); }
.cn__focus > * { animation: cn-in .5s var(--ease); }
@keyframes cn-in { from { opacity: 0; transform: translateY(6px); } }

/* View All: a drawer over the section, everyone role by role */
.cn-all { display: flex; flex-direction: column; gap: 18px; padding: 22px clamp(18px, 3vw, 32px) 26px; }
.cn .cn-all { position: absolute; inset: 0; z-index: 60; overflow-y: auto; background: #fff; opacity: 0; transform: translateY(24px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.cn.is-all .cn-all { opacity: 1; transform: none; }
.cn-all__head { display: flex; align-items: center; justify-content: space-between; }
.cn-all__head strong { font-size: 18px; }
.cn-all__x { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--color-control); border-radius: 50%; background: #fff; color: var(--color-text); cursor: pointer; }
.cn-all__x:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.cn-all__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.cn-all__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--color-border); }
.cn-all__role { color: var(--color-text-muted); font-size: 14px; font-weight: 500; }
.cn-all__people { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px 3px 3px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
a.cn-chip:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.cn-chip .sp-face--sm { width: 30px; height: 30px; font-size: 30px; }
.cn-chip .sp-face--sm.is-i b { font-size: 13px; }

/* Phones: the compact slider */
.cn--strip .cn__stage { height: 290px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.cn--strip .cn__p { transition-duration: .6s; }
.cn--strip .cn__p.is-center .cn__face { border-width: 4px; box-shadow: 0 0 0 5px rgb(var(--teal-500-rgb) / .3), 0 16px 32px rgb(var(--teal-950-rgb) / .25); }
.cn--strip .cn__face { animation: none; }
.cn--strip .cn__tip { display: none; }
.cn--strip .cn__focus { top: calc(38% + 66px); bottom: auto; width: calc(100% - 32px); }
.cn--strip .cn__name { font-size: 18px; }

@media (prefers-reduced-motion: reduce) { .cn__face, .cn__l--hub, .cn__focus > * { animation: none; } .cn__p { transition: none; } }

/* ---- The video: a big card ----------------------------------------------------------------------------- */
.sp-vid { display: flex; align-items: center; gap: 18px; width: 100%; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.sp-vid:hover { border-color: var(--color-primary); box-shadow: 0 10px 26px rgb(var(--teal-950-rgb) / .1); }
.sp-vid__th { position: relative; display: grid; flex: 0 0 min(46%, 300px); place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: #10262d; }
.sp-vid__th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.sp-vid__th::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35)); }
.sp-vid:hover .sp-vid__th img { transform: scale(1.04); }
.sp-vid__ic { position: relative; z-index: 1; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgb(var(--teal-500-rgb) / .95); color: #fff; box-shadow: 0 0 0 7px rgba(255, 255, 255, .22), 0 10px 24px rgba(0, 0, 0, .35); transition: transform var(--dur-fast) var(--ease); }
.sp-vid:hover .sp-vid__ic { transform: scale(1.08); }
.sp-vid__ic svg { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; }
.sp-vid__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-vid__t small { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-subtle); font-size: 12px; }
.sp-vid__t small svg { width: 16px; height: 16px; fill: #ff0000; }
.sp-vid__t strong { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sp-vid__t [data-yt-stats] { color: var(--color-text-muted); font-size: 13px; }
.sp-vid__t [data-yt-stats] b { color: var(--color-text); font-weight: 600; }
/* The video alone (no stores): picture and words side by side */
.sp-watch--solo .sp-vid { max-width: 760px; }
.sp-watch--solo .sp-vid__th { flex-basis: min(50%, 340px); }
.sp-vid__t strong { font-size: 17px; -webkit-line-clamp: 3; }
.sp-vid__t::after { content: "Watch Now"; align-self: flex-start; margin-top: 12px; padding: 9px 20px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 600; }
@media (max-width: 767px) { .sp-watch--solo .sp-vid { flex-direction: column; align-items: stretch; } .sp-watch--solo .sp-vid__th { flex: none; } .sp-vid__t::after { display: none; } }
/* Listen On beside the video: the wheel when there's room, tiles when there isn't */
.sp-listen { min-width: 0; }
/* Beside the video: the stores as tiles, two to a row (the wheel is for a song with no video) */
.sp-duo--even .sp-listen .lw-wrap { display: none; }
.sp-duo--even .sp-listen .lw-tiles { display: block; }
.sp-duo--even .sp-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .sp-duo, .sp-duo--even { grid-template-columns: minmax(0, 1fr); }
  .sp-duo > .apx-sec + .apx-sec { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
}
@media (max-width: 767px) {
  .sp .apx-hero__in { align-items: center; padding-top: 34px; }
  .sp-art { width: min(56vw, 210px); }
  .sp-art.is-playing { margin-right: 0; }
  .sp-art.is-playing .sp-disc { transform: translateX(14%); }
  .sp-by { font-size: 15px; }
  .sp-acts { justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: nowrap; }
  .sp-wide { display: none !important; }
  .sp .apx-hero .apx-play { height: 40px; padding: 0 16px 0 12px; font-size: 14px; }
  .apx-bar .apx-pill--fill span { display: none; }
  .apx-bar .apx-pill.apx-pill--fill { width: 36px; padding: 0; }
  .cn-all__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sp-vid { flex-direction: column; align-items: stretch; }
  .sp-vid__th { flex: none; width: 100%; }
}

/* ---- Lyrics, about ---------------------------------------------------------------------------------- */
.sp-lyrics { font-size: 15px; line-height: 1.9; white-space: pre-line; }
.sp-lyrics.is-clamped { max-height: calc(1.9em * 12); overflow: hidden; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
.sp-duo--solo { grid-template-columns: minmax(0, 1fr); }     /* its video taken off YouTube, nothing else to show: About alone */
/* About beside the lyrics or Available On (var(--teal-700)): one column — the words, a line, the facts, its album / original */
.sp-duo .apx-about1 { grid-template-columns: minmax(0, 1fr); }
.sp-duo .apx-about1 .apx-bio { padding: 0 0 18px; }
.sp-duo .apx-about1:not(.apx-about1--one) .apx-about1__facts { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--card-border); }
/* Available On (#275, var(--teal-700)): compact rows — the music video, caller tunes — then Listen On. Side by side (rows left,
   stores right) when it runs across the page (under lyrics + About), under each other beside About. Never a big video
   thumbnail */
.sp-av { container-type: inline-size; }
.sp-av__grid { display: grid; gap: 0; }
.sp-av__grid > * + * { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--card-border); }
@container (min-width: 860px) {
  .sp-av__grid:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-av__grid:has(> :nth-child(2)) > :first-child { padding-right: 28px; }
  .sp-av__grid > * + * { margin-top: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--card-border); }
}
.sp-av__rows { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sp-av .sp-albox .sp-alb { margin: 0; padding: 10px; border: 0; }
/* the stores' label, as the rows' own labels ("From the Album") */
.sp-av__h { margin: 0 0 10px; color: var(--color-link-hover); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* the music video's row: a small 16:9 picture where the album's art goes; any part plays it */
.sp-vbox .sp-vbox__th { position: relative; width: 96px; height: 54px; padding: 0; border: 0; background: #10262d; cursor: pointer; }
.sp-vbox__th img { width: 100%; height: 100%; object-fit: cover; }
.sp-vbox__ic { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .18); }
.sp-vbox__ic svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; stroke: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.sp-vbox .sp-alb__t { gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* (var(--teal-700)) a list row, not a heading: the title in the body size and weight, two lines at most */
.sp-vbox__title { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sp-vbox .sp-alb__t:hover .sp-vbox__title { color: var(--color-link-hover); }
.sp-vbox__go { flex: none; gap: 6px; }
.sp-vbox__go svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
/* a narrow card (a phone): the title keeps the room, Watch is its round ▶ */
@container (max-width: 479px) { .sp-vbox__go { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; } .sp-vbox__go span { display: none; } }
.sp-av__crbt .sp-crbt { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sp-body .sp-av .sp-stores { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }     /* two a row beside the lyrics, more in its own section */
@media (max-width: 639px) { .sp-body .sp-av .sp-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }     /* phones: two a row, as before */
.sp-av .sp-sub { margin: -4px 0 10px; }
.sp-desc { font-size: 14px; line-height: 1.7; white-space: pre-line; color: var(--color-text-muted); }
.sp-desc.is-clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.sp-dl { margin: var(--space-3) 0 0; }
.sp-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--color-border); font-size: 14px; }
.sp-dl dt { color: var(--color-text-muted); }
.sp-dl dd { margin: 0; font-weight: 500; text-align: right; }
.sp-rights { margin: var(--space-4) 0 0; color: var(--color-text-subtle); font-size: 13px; }
/* Languages and genres in About as chips (#283), as on every profile; a list's say how many of its songs ("Hindi 8") */
.sp-fact { margin-top: 16px; }
.apx-about1__facts > .sp-fact:first-child { margin-top: 0; }
.sp-fact .pgp-chips { margin-top: 0; }
.sp-fact__v { margin: 0; font-size: 15px; }     /* a fact's answer in words (Released, Submitted By), as a profile's */
.sp-fact__v .sp-subby { display: inline-flex; align-items: center; gap: 8px; }
.pgp-chips .apx-chip small { margin-left: 3px; color: var(--color-text-subtle); font-size: 12px; font-weight: 500; }
.pgp-chips .apx-chip:hover small { color: inherit; opacity: .85; }
.sp-about > h2:first-child + .sp-dl { margin-top: 0; }
.sp-alb { display: flex; align-items: center; gap: 12px; margin: -6px; padding: 6px; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.sp-alb:hover { background: var(--color-surface-muted); }
.sp-alb__art { display: grid; flex: none; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 8px; background: var(--color-primary-soft); box-shadow: var(--shadow-sm); }
.sp-alb__art img { width: 100%; height: 100%; object-fit: cover; }
.sp-alb__art svg, .sp-alb > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-alb > svg { width: 18px; color: var(--color-text-subtle); }
.sp-alb__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sp-alb__t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-alb__t small { color: var(--color-text-muted); font-size: 13px; }

/* ---- Stores, caller tunes ---------------------------------------------------------------------------- */
.sp-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.sp-store { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-control); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; transition: border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast); }
.sp-store:hover { border-color: var(--b); box-shadow: 0 8px 20px rgb(var(--teal-950-rgb) / 0.08); transform: translateY(-2px); }
.sp-store .pf-ic { width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: color-mix(in srgb, var(--b) 12%, #fff); color: var(--b); }
.sp-store .pf-ic--letter { padding: 0; font-size: 15px; }
.sp-store > span:not(.pf-ic) { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.sp-store strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; }     /* a long name ends in … rather than running into the arrow (var(--teal-700)) */
.sp-store small { color: var(--color-text-subtle); font-size: 12px; }
.sp-store > svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--color-text-subtle); stroke-width: 2; }
.sp-crbt { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sp-crbt__i { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-surface-muted); }
.sp-crbt__i > svg { width: 22px; height: 22px; fill: none; stroke: var(--color-primary-strong); stroke-width: 2; }
.sp-crbt__i > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sp-crbt__i small { color: var(--color-text-muted); font-size: 12px; }
.sp-crbt__i strong { font-size: 15px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.sp-crbt__copy { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; color: var(--color-text-muted); cursor: pointer; }
.sp-crbt__copy:hover { color: var(--color-link-hover); }
.sp-crbt__copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---- Comments ---------------------------------------------------------------------------------------- */
.cm-form { display: flex; align-items: flex-start; gap: 12px; }
.cm-me { flex: none; padding-top: 2px; }
.cm-field { flex: 1; min-width: 0; }
.cm-field textarea { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 11px 18px; border: 1px solid var(--color-control); border-radius: 22px; background: #fff; color: var(--color-text); font: inherit; font-size: 14px; line-height: 1.45; resize: none; transition: border-color var(--dur-fast); }
.cm-field textarea:focus { outline: none; border-color: var(--color-primary); }
.cm-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.cm-actions small { margin-right: auto; color: var(--color-text-subtle); font-size: 12px; }
.cm-login { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 14px; }
.cm-list, .cm-replies { margin: 0; padding: 0; list-style: none; }
.cm-list { margin-top: var(--space-4); }
.cm { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--color-border); }
.cm-list > .cm:first-child { border-top: 0; }
.cm__face { flex: none; text-decoration: none; }
.cm__b { flex: 1; min-width: 0; }
.cm__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font-size: 14px; }
.cm__n { color: var(--color-text); font-weight: 600; text-decoration: none; }
a.cm__n:hover { color: var(--color-link-hover); }
.cm__h time { color: var(--color-text-subtle); font-size: 12px; }
.cm__t { margin: 3px 0 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.cm__a { display: flex; gap: 16px; margin: 6px 0 0; font-size: 13px; }
.cm__a:empty { display: none; }
.cm__a .link { font-size: 13px; }
.cm__rm { color: var(--color-text-subtle) !important; }
.cm__rm:hover { color: var(--color-error) !important; }
.cm-replies:not(:empty) { margin-top: 6px; }
.cm--reply { padding: 10px 0 4px; border-top: 0; }
.cm--reply .sp-face--sm { width: 30px; height: 30px; font-size: 30px; }
.cm-form--reply { margin-top: 10px; }
.cm-empty { padding: 18px 0 4px; color: var(--color-text-muted); font-size: 14px; text-align: center; }
.cm-more { margin-top: var(--space-3); }

.sp-shelves { margin-top: var(--space-4); }
.sp-shelves:empty { display: none; }
@media (max-width: 639px) { .sp-stores, .sp-crbt { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-store { padding: 10px; gap: 10px; } .sp-store > svg { display: none; } }

/* ---- Lyrics --------------------------------------------------------------------------------------------- */
.sp-lyrics { font-size: 16px; line-height: 1.85; white-space: normal; }
.sp-lyrics p { margin: 0 0 1.1em; }
.sp-lyrics.is-clamped { max-height: calc(1.85em * 11); }
.sp-lyrics__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.sp-lyrics__foot .sp-more { margin-top: 0; }
.sp-lyrics__foot small { margin-left: auto; color: var(--color-text-subtle); font-size: 13px; }
.sp-nolyr { display: flex; align-items: flex-start; gap: 16px; padding: 18px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary-soft), #fff 75%); }
.sp-nolyr > svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--color-primary-strong); stroke-width: 1.8; stroke-linecap: round; }
.sp-nolyr strong { font-size: 15px; }
.sp-nolyr p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 14px; }
.sp-nolyr .btn { margin-top: 12px; }

button.sp-store { width: 100%; background: #fff; font: inherit; text-align: left; cursor: pointer; }
button.sp-store > svg { fill: currentColor; stroke: none; color: #e00; }

/* The wheel: the song in the middle, the platforms around it on a slowly turning ring */
.lw-wrap { display: flex; justify-content: center; padding: 6px 0 0; }
.lw-tiles { display: none; }
.lw { --R: calc(140px + var(--n) * 6px); position: relative; width: calc(var(--R) * 2 + 180px); max-width: 100%; height: calc(var(--R) * 2 + 84px); }
.lw::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(var(--R) * 2); height: calc(var(--R) * 2); border: 1.5px dashed var(--tg-200); border-radius: 50%; translate: -50% -50%; }
.lw::after { content: ""; position: absolute; top: 50%; left: 50%; width: calc(var(--R) * 1.2); height: calc(var(--R) * 1.2); border-radius: 50%; background: radial-gradient(circle, var(--color-primary-soft), transparent 70%); translate: -50% -50%; }
.lw__ring { position: absolute; inset: 0; z-index: 1; animation: lw-turn 90s linear infinite; }
.lw:hover .lw__ring, .lw:hover .lw__in, .lw:focus-within .lw__ring, .lw:focus-within .lw__in { animation-play-state: paused; }
@keyframes lw-turn { to { rotate: 360deg; } }
@keyframes lw-back { to { rotate: -360deg; } }
.lw__spoke { position: absolute; top: 50%; left: 50%; width: var(--R); height: 1.5px; background: linear-gradient(90deg, rgb(var(--teal-500-rgb) / 0), var(--tg-200) 30%); transform: rotate(var(--a)); transform-origin: 0 50%; transition: background 0.3s, height 0.3s; }
.lw__spoke:has(+ .lw__i:hover), .lw__spoke:has(+ .lw__i:focus-visible) { height: 2.5px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--b) 40%); }
.lw__i { position: absolute; top: 50%; left: 50%; width: 0; height: 0; padding: 0; border: 0; background: none; color: var(--color-text); font: inherit; text-decoration: none; cursor: pointer; transform: rotate(var(--a)) translateX(var(--R)) rotate(calc(-1 * var(--a))); }
.lw__in { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-md); font-size: 14px; white-space: nowrap; translate: -50% -50%;
  animation: lw-back 90s linear infinite; transition: border-color 0.25s, box-shadow 0.25s, scale 0.25s; }
.lw__in .pf-ic { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: color-mix(in srgb, var(--b) 13%, #fff); color: var(--b); }
.lw__in .pf-ic--letter { padding: 0; font-size: 14px; }
.lw__in b { font-weight: 600; }
.lw__i:hover .lw__in, .lw__i:focus-visible .lw__in { border-color: var(--b); box-shadow: 0 12px 28px rgb(var(--teal-950-rgb) / 0.16); scale: 1.08; }
.lw__i:focus-visible { outline: none; }
.lw__hub { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; translate: -50% -50%; pointer-events: none; }
.lw__art { display: grid; place-items: center; width: 116px; height: 116px; overflow: hidden; border-radius: 50%; background: var(--color-primary-soft); box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--tg-100), 0 18px 36px rgb(var(--teal-950-rgb) / 0.2); animation: sp-spin 24s linear infinite; }
.lw__art img { width: 100%; height: 100%; object-fit: cover; }
.lw__art svg { width: 36px; height: 36px; fill: none; stroke: var(--color-primary-strong); stroke-width: 1.6; }
.lw__hub small { padding: 3px 10px; border-radius: var(--radius-pill); background: #fff; color: var(--color-text-muted); font-size: 12px; box-shadow: var(--shadow-sm); }
.lw__hub small b { color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .lw__ring, .lw__in, .lw__art { animation: none; } }
@media (max-width: 639px) {
  .lw-wrap { display: none; }
  .lw-tiles { display: block; }
}

/* ---- The video player (over the page) -------------------------------------------------------------- */
html.vp-open { overflow: hidden; }
.vp { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #05090b; color: #fff; opacity: 0; transition: opacity 0.25s ease; }
.vp.is-in { opacity: 1; }
.vp.is-idle { cursor: none; }
.vp__bg { position: absolute; inset: 0; overflow: hidden; }
.vp__bg img { position: absolute; inset: -90px; width: calc(100% + 180px); height: calc(100% + 180px); object-fit: cover; filter: blur(60px) saturate(1.4); opacity: 0.42; }
.vp__top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 20px; transition: opacity 0.35s; }
.vp__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vp__t strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.vp__t small { overflow: hidden; color: var(--color-on-dark-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.vp__yt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.1); color: var(--color-on-dark-soft); font-size: 13px; text-decoration: none; }
.vp__yt:hover { background: rgba(255, 255, 255, 0.18); }
.vp__yt svg { width: 16px; height: 16px; fill: #ff3d3d; }
.vp__x { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.vp__x:hover { background: rgba(255, 255, 255, 0.22); }
.vp__x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.vp__stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; padding: 0 20px; }
.vp__frame { position: relative; width: min(100%, calc((100vh - 180px) * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: scale(0.97); transition: transform 0.35s var(--ease); }
.vp.is-in .vp__frame { transform: none; }
.vp__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vp__shield { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; }
.vp__big { position: absolute; top: 50%; left: 50%; z-index: 3; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px; border-radius: 50%; background: rgb(var(--teal-500-rgb) / 0.92); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transform: scale(0.8); transition: opacity 0.25s, transform 0.25s; }
.vp__big svg { width: 34px; height: 34px; margin-left: 5px; fill: #fff; }
.vp.is-ready:not(.is-playing):not(.is-wait) .vp__big { opacity: 1; transform: none; }
.vp__spin { position: absolute; top: 50%; left: 50%; z-index: 3; opacity: 0; pointer-events: none; translate: -50% -50%; transition: opacity 0.2s; }
.vp:not(.is-ready) .vp__spin, .vp.is-wait .vp__spin { opacity: 1; }
.vp__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: min(100% - 40px, calc((100vh - 180px) * 16 / 9)); margin: 14px auto 20px; padding: 8px 14px 8px 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.09); backdrop-filter: blur(12px); transition: opacity 0.35s; }
.vp.is-idle .vp__bar, .vp.is-idle .vp__top { opacity: 0; }
.vp__b { display: grid; flex: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.vp__b:hover { background: rgba(255, 255, 255, 0.14); }
.vp__b svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp__b svg.is-fill { fill: currentColor; stroke: none; }
.vp__pp { width: 44px; height: 44px; background: var(--color-primary); }
.vp__pp:hover { background: var(--color-primary-strong); }
.vp__pp .is-play { margin-left: 2px; }
.vp__pp .is-pause, .vp.is-playing .vp__pp .is-play { display: none; }
.vp.is-playing .vp__pp .is-pause { display: block; }
.vp__m, .vp.is-muted .vp__w { display: none; }
.vp.is-muted .vp__m { display: inline; }
.vp__time { flex: none; min-width: 38px; color: var(--color-on-dark-soft); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.vp__seek { flex: 1; min-width: 60px; }
.vp__vol { flex: none; width: 90px; }
.vp__seek, .vp__vol { height: 4px; margin: 0; border-radius: 4px; background: linear-gradient(90deg, var(--color-primary) var(--p, 0%), rgba(255, 255, 255, 0.25) var(--p, 0%)); cursor: pointer; -webkit-appearance: none; appearance: none; }
.vp__seek::-webkit-slider-thumb, .vp__vol::-webkit-slider-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; -webkit-appearance: none; appearance: none; }
.vp__seek::-moz-range-thumb, .vp__vol::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
@media (max-width: 639px) {
  .vp__top { padding: 12px 14px; }
  .vp__yt { display: none; }
  .vp__stage { padding: 0; }
  .vp__frame { border-radius: 0; }
  .vp__vol, .vp__b[data-vp="mute"] { display: none; }
  .vp__bar { width: calc(100% - 24px); }
}
.vp__cover { position: absolute; inset: 0; z-index: 2; background: #000; transition: opacity 0.45s ease; pointer-events: none; }
.vp__cover img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.vp__cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55)); }
.vp.is-live .vp__cover { opacity: 0; }
.vp__shield { z-index: 3; }
.vp__big, .vp__spin { z-index: 4; }
/* YouTube wouldn't play it here (#190): the message over the cover, the rest of the bar asleep */
.vp__err { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.55); }
.vp__err strong { font-size: 1.05rem; font-weight: 600; }
.vp__err .btn svg { width: 18px; height: 18px; margin-right: 6px; }
.vp.is-error .vp__big, .vp.is-error .vp__spin, .vp.is-error .vp__shield { display: none; }
.vp.is-error .vp__bar { opacity: 0.4; pointer-events: none; }

/* ---- Credits, round 2 (#151) -------------------------------------------------------------------------- */
/* Instead of the word: soft teal light drifting slowly behind the network */
.cn__glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cn__glow i { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(var(--teal-500-rgb) / .26), rgb(var(--teal-500-rgb) / 0) 68%); animation: cn-drift 18s ease-in-out infinite alternate; }
.cn__glow i:nth-child(1) { top: -18%; left: 4%; }
.cn__glow i:nth-child(2) { right: 2%; bottom: -24%; width: 52%; background: radial-gradient(circle, rgba(61, 139, 253, .14), rgba(61, 139, 253, 0) 68%); animation-duration: 23s; animation-delay: -6s; }
.cn__glow i:nth-child(3) { top: 22%; left: 34%; width: 32%; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%); animation-duration: 15s; animation-delay: -3s; }
@keyframes cn-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, 8%) scale(1.12); } 100% { transform: translate(-5%, -4%) scale(.94); } }
/* The one in the middle, on hover: radio in the middle, Follow under it (the home page's artist cards) */
.cn__face { color: inherit; text-decoration: none; }
.cn__cx { border-radius: 50%; overflow: hidden; }
.cn__p:not(.is-center) .cn__cx { display: none; }
.cn__p.is-center .cn__cx::before { content: ""; position: absolute; inset: 0; background: rgba(8, 22, 23, .35); opacity: 0; transition: opacity .25s; pointer-events: none; }
.cn__p.is-center:hover .cn__cx::before, .cn__p.is-center:focus-within .cn__cx::before { opacity: 1; }
.cn__p.is-center:hover .cx__play, .cn__p.is-center:focus-within .cx__play { opacity: 1; transform: none; }
.cn__p.is-center:hover .cx__follow, .cn__p.is-center:focus-within .cx__follow { opacity: 1; transform: translate(-50%, 0); }
.cn__cx .cx__play--mid { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cn__cx .cx__follow { bottom: 14%; }
.cn--strip .cn__cx .cx__play--mid { left: auto; top: auto; right: 6%; bottom: 6%; width: 34px; height: 34px; margin: 0; opacity: 1; transform: none; }
.cn__p:not(.is-center) { cursor: pointer; }
/* Roles under the name: plain chips */
.cn__role { gap: 0; color: var(--color-text-muted); font-weight: 500; }
/* View All: the role, then the names — nothing else */
.cn-all__list { display: flex; flex-direction: column; }
.cn-all__row:last-child { border-bottom: 0; }
.cn-all__role { color: var(--color-text-subtle); font-size: 13px; font-weight: 400; }
.cn-chip { font-weight: 600; }

/* ---- Under the page: sliders, each its own look -------------------------------------------------------- */
/* Playlists & compilations: wide cards — shelves.css (#245: every page uses them) */

@media (prefers-reduced-motion: reduce) { .cn__glow i { animation: none; } }

/* ---- Round 3 (#153) ------------------------------------------------------------------------------------- */
/* Two columns that flow on their own: lyrics, video, comments | about, where to listen, caller tunes */
.sp-body > .sp-cols2 { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
.sp-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(24px, 3vw, 44px); align-items: start; }
.sp-main, .sp-side { display: flex; flex-direction: column; gap: var(--section-gap); min-width: 0; }
.sp-main > .apx-sec + .apx-sec, .sp-side > .apx-sec + .apx-sec { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
.sp-side .sp-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-side .sp-store { padding: 10px; gap: 10px; }
.sp-side .sp-store > svg { display: none; }
.sp-side .sp-store .pf-ic { width: 34px; height: 34px; padding: 8px; }
.sp-side .lw-wrap { display: none; }
.sp-side .lw-tiles { display: block; }
/* About: language and genre open their browse pages */
.sp-dl dd a { color: var(--color-link-hover); text-decoration: none; }
.sp-dl dd a:hover { text-decoration: underline; }
/* Submitted by (#190): the uploader's photo and name — a name, so it reads like the artists' names */
.sp-dl dd a.sp-subby { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text); font-weight: 600; }
.sp-subby img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
/* More from these artists: the site's song rows, two columns */
.sp-songs--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (min-width: 768px) { .sp-songs--2 .sp-song { grid-template-columns: 48px minmax(0, 1fr) minmax(46px, auto) 36px 36px; } }
.sp-songs--2 .sp-song__album { display: none; }
@media (max-width: 1023px) {
  .sp-cols2 { grid-template-columns: minmax(0, 1fr); }
  .sp-cols2 .sp-side { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
  .sp-songs--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Round 4 (var(--teal-800)) and the album page (var(--teal-800)) ----------------------------------------------------------- */
/* Comments: a list, one under the other (the library's comment cards use .cm-list as a grid) */
.sp-comments .cm-list { display: block; }
.cm-field textarea { overflow-y: hidden; }
/* View All: names in the normal weight */
.cn-chip { font-weight: 500; }
.cn-chip small { margin-left: 2px; color: var(--color-text-subtle); font-size: 12px; font-weight: 400; }
/* The album: which songs they're on, under their roles */
.cn__on { max-width: 100%; overflow: hidden; color: var(--color-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
/* Listen On under the video: the tiles in a row */
.sp-body .sp-stores { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }   /* one column (#238) */
.sp-body .lw-wrap { display: none; }
.sp-body .lw-tiles { display: block; }
/* (#252: Listen On is a section like any other — the same gap and hairline above it; it still comes right after the video) */
/* An album's songs: the site's rows, numbered */
.sp-tracks { counter-reset: trk; }
/* an album's one video (var(--teal-700), #279): a teal Watch chip with the video icon after that song's title — it stands out */
.sp-song__info.has-watch { display: flex; align-items: center; gap: 12px; }     /* the chip centred on the title + artists (#280) */
.sp-song__words { display: block; min-width: 0; }
.sp-song__watch { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border: 1px solid var(--color-primary); border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font: inherit; font-size: 12px; font-weight: 600; vertical-align: 2px; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.sp-song__watch:hover { background: var(--color-primary); color: #fff; }
.sp-song__watch svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sp-tracks .sp-song { counter-increment: trk; grid-template-columns: 26px 48px minmax(0, 1fr) minmax(52px, auto) 36px 36px; }
.sp-tracks .sp-song::before { content: counter(trk); color: var(--color-text-subtle); font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.sp-tracks .sp-song__album { display: none; }
/* The song's album in About: open it for its songs, this one marked */
.sp-albox { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.sp-aboutcard .sp-albox .sp-alb { margin: 0; padding: 10px; border: 0; }
.sp-alb a { color: inherit; text-decoration: none; }
.sp-alb a.sp-alb__t:hover strong { color: var(--color-link-hover); }
.sp-origbox .sp-alb:not(:has(a)):hover { background: none; }       /* the original typed by hand: nothing to open (#184) */
.sp-albox__tog { display: grid; flex: none; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-control); border-radius: 50%; background: #fff; color: var(--color-text-muted); cursor: pointer; transition: transform var(--dur-med) var(--ease), border-color var(--dur-fast); }
.sp-albox__tog:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.sp-albox__tog svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.sp-albox.is-open .sp-albox__tog { transform: rotate(180deg); }
.sp-albox__list { margin: 0; padding: 4px 6px 8px; border-top: 1px solid var(--color-border); list-style: none; }
.sp-albox__i { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 6px; border-radius: var(--radius-sm); font-size: 14px; }
.sp-albox__i:hover { background: var(--color-surface-muted); }
.sp-albox__i.is-me { background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 500; }
.sp-albox__n { color: var(--color-text-subtle); font-size: 13px; text-align: center; }
.sp-albox__t { overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
a.sp-albox__t:hover { color: var(--color-link-hover); }
.sp-albox__d { color: var(--color-text-subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-albox__all { padding: 8px 6px 2px; font-size: 13px; }
.sp-albox__all a { color: var(--color-link-hover); font-weight: 500; text-decoration: none; }
.sp-albox__wait { display: flex; justify-content: center; padding: 12px; color: var(--color-text-muted); font-size: 13px; }
/* A typed original's credits, under its card (#209): role · the name chips of All Credits, each opening its page (#210) */
.sp-origbox__credits li { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px; font-size: 13px; }
.sp-origbox__role { color: var(--color-text-muted); }
.sp-origbox__credits .cn-chip { font-size: 13px; }
.sp-alb__t .sp-origbox__a { color: var(--color-link-hover); text-decoration: none; }
.sp-alb__t .sp-origbox__a:hover { text-decoration: underline; }
.sp-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sp-eq i { width: 3px; height: 100%; border-radius: 1px; background: var(--color-primary); animation: sp-eq 1s ease-in-out infinite alternate; }
.sp-eq i:nth-child(2) { animation-delay: -.4s; }
.sp-eq i:nth-child(3) { animation-delay: -.7s; }
.sp-eq i { transform-origin: bottom; }
@keyframes sp-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
/* Records under the page: the browse pages' slider */
.sp .bx-vinyls .shelf__track { padding-bottom: 6px; }

/* Narrower screens: one column, in reading order — words / songs, about, video, listen, caller tunes, comments */
@media (max-width: 1023px) {
  .sp-cols2 { display: flex; flex-direction: column; align-items: stretch; gap: var(--section-gap); }
  .sp-cols2 .sp-main, .sp-cols2 .sp-side { display: contents; }
  .sp-cols2 .sp-side { padding: 0; border: 0; }
  .sp-cols2 .apx-sec { order: 9; padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
  .sp-cols2 .sp-lead { order: 1; padding-top: 0; border-top: 0; }
  .sp-cols2 .sp-about { order: 2; }
  .sp-cols2 .sp-watch { order: 3; }
  .sp-cols2 .sp-listen { order: 4; }
  .sp-cols2 .sp-crbt-sec { order: 5; }
  .sp-cols2 .sp-comments { order: 6; }
  .sp-body .sp-watch + .sp-listen { margin-top: calc(var(--section-gap) * -.5); }
}
@media (max-width: 767px) {
  .sp-tracks .sp-song { grid-template-columns: 22px 44px minmax(0, 1fr) auto auto; }
}
@media (max-width: 639px) { .sp-body .sp-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The constellation keeps its layers to itself (the View All drawer and the people never paint over the header or the slim bar) */
.cn { isolation: isolate; }
@container (max-width: 470px) { .sp-stats .sp-stat-opt { display: none; } }   /* a narrow strip keeps the main numbers */
/* #313 (Rohit): numbers with nothing in them share one cell, and the cell says so by stacking two cards — one
   behind the other, the way a deck sits — not by setting two icons side by side, which read as a mistake. The card
   behind shows only its edge: its drawing is hidden, so nothing is half-cut. The white ring separates the two.
   The figure keeps the ordinary ink: a paler one looked as though likes had been switched off for the piece. */
.apx-stat__ic--pair { position: relative; display: block; flex: none; width: 46px; height: 46px; background: none; }
.apx-stat__ic--pair svg { position: absolute; box-sizing: content-box; width: 14px; height: 14px; padding: 10px;
  border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); }
/* The card behind keeps the same tint as the one in front, even though that leaves it barely there (Rohit): it
   stands for a number with nothing in it, so it should not be the loudest thing in the cell. The white ring on the
   front card is what separates them. :not(:last-child) so a cell that somehow holds one icon keeps its drawing. */
.apx-stat__ic--pair svg:first-child:not(:last-child) { top: 0; right: 0; color: transparent; }
.apx-stat__ic--pair svg:last-child { bottom: 0; left: 0; box-shadow: 0 0 0 2px #fff; }   /* the card in front */
/* A long album: the first 10 songs, then Show all */
.sp-tracks.is-clipped > li:nth-child(n+11) { display: none; }
.sp-tracks__more { margin-top: 12px; }

/* ---- Playlists and compilations (#158) --------------------------------------------------------------------- */
/* The cover: a 2×2 of its songs' covers when it has no picture of its own; who made it, with their photo */
.sp-mosaic { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
.sp-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.sp-by--maker a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.sp-by--maker img { width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; object-fit: cover; }
/* Its songs across the page, with the album column */
.sp-body > .sp-lead { padding-top: 0; border-top: 0; }
.sp-tracks--wide .sp-song { grid-template-columns: 26px 48px minmax(0, 1fr) minmax(0, .6fr) minmax(52px, auto) 36px 36px; }
.sp-tracks--wide .sp-song__album { display: block; overflow: hidden; color: var(--color-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
/* About: who made it */
.sp-maker { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.sp-maker__pic { flex: none; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: var(--color-primary-soft); }
.sp-maker__pic img { width: 100%; height: 100%; object-fit: cover; }
.sp-maker__t { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.sp-maker__t small { color: var(--color-text-subtle); font-size: 12px; }
.sp-maker__t a { overflow: hidden; color: var(--color-text); font-size: 15px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.sp-maker__t a:hover { color: var(--color-link-hover); }
.sp-maker__follow { flex: none; border-radius: var(--radius-pill); }
/* No video: about across the page, in two halves */
.sp-cols2--solo { display: block; }
.sp-cols2--solo .sp-aboutcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 40px; align-items: start; }
.sp-cols2--solo .sp-maker, .sp-cols2--solo .sp-desc, .sp-cols2--solo .sp-more { grid-column: 1; }
.sp-cols2--solo .sp-dl { grid-column: 2; grid-row: 1 / span 3; }
.sp-cols2--solo .pgp-chips { grid-column: 1 / -1; }
@media (max-width: 1023px) { .sp-tracks--wide .sp-song { grid-template-columns: 26px 48px minmax(0, 1fr) minmax(52px, auto) 36px 36px; } .sp-tracks--wide .sp-song__album { display: none; } }
@media (max-width: 767px) {
  .sp-tracks--wide .sp-song { grid-template-columns: 22px 44px minmax(0, 1fr) auto auto; }
  /* #313 audit: playlist / compilation / album track rows on phones gave the title 72 px — the number and duration
     columns and 36 px buttons ate the row. Duration goes, the rest tightens: the words get ~200 px at 390. */
  .sp-tracks .sp-song { grid-template-columns: 20px 44px minmax(0, 1fr) 32px 32px; gap: 8px; padding: 6px 2px; }
  .sp-tracks .sp-song__time { display: none; }
  .sp-cols2--solo .sp-aboutcard { grid-template-columns: minmax(0, 1fr); }
  .sp-cols2--solo .sp-dl { grid-column: 1; grid-row: auto; }
}
.sp-art__img .sp-mosaic + .sp-art__own { position: absolute; inset: 0; }

/* The record that slides out while it plays: the browse pages' light teal record (#118), not a black one (Rohit) */
.sp-disc { background: radial-gradient(circle, transparent 0 30%, rgb(var(--teal-600-rgb) / .18) 31%, transparent 33%), repeating-radial-gradient(circle, var(--teal-50) 0 2px, var(--tg-100) 2px 4px);
  border: 2px solid var(--teal-300); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
.sp-disc > span { box-shadow: 0 0 0 3px var(--teal-200), 0 0 0 4px var(--teal-300); }
.sp-disc::after { width: 10px; height: 10px; margin: -5px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--teal-300); }
/* Playlists / compilations: songs beside about — the album column only when there's room */
/* #313: bounded below at 768 — unbounded, this later rule overrode the phone layout above and squeezed the words to 72 px */
@media (min-width: 768px) and (max-width: 1279px) { .sp-tracks--wide .sp-song { grid-template-columns: 26px 48px minmax(0, 1fr) minmax(52px, auto) 36px 36px; } .sp-tracks--wide .sp-song__album { display: none; } }

/* Round 6 (#160) */
/* The record peeks out with only a small gap before the words */
.sp-art.is-playing { margin-right: clamp(10px, 1.4vw, 20px); }
/* Store tiles: room for the names on wide screens; phones drop the little arrow (the whole tile opens the store) */
.sp-body .sp-stores { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sp-store strong { white-space: nowrap; }
@media (max-width: 767px) { .sp-store > svg { display: none; } .sp-store strong { white-space: normal; } }
/* Hover the artwork on the cover: a play button over it (plays it all, as Play does) */
.sp-art__play { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px; background: rgba(8, 22, 23, .35); color: #fff; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.sp-art__play span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 10px 26px rgb(var(--teal-500-rgb) / .5); transition: transform var(--dur-fast) var(--ease); }
.sp-art__play svg { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.sp-art__play .is-pause { display: none; margin: 0; }
.sp-art__play.is-playing .is-play { display: none; }
.sp-art__play.is-playing .is-pause { display: block; }
.sp-art:hover .sp-art__play, .sp-art__play:focus-visible { opacity: 1; }
.sp-art__play:hover span { transform: scale(1.06); }
@media (hover: none) { .sp-art__play { display: none; } }

/* Comments: "· edited", editing in place, and the one opened from Library → Comments lit up for a moment */
.cm__ed { margin-left: 4px; font-size: 12px; color: var(--color-text-subtle); }
.cm-edit { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.cm-edit textarea { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--color-control); border-radius: var(--radius-md); font: inherit; font-size: var(--text-sm); resize: vertical; }
.cm-edit textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.cm-edit .cm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cm.is-target > .cm__b { border-radius: var(--radius-md); background: var(--color-primary-soft); box-shadow: 0 0 0 8px var(--color-primary-soft); transition: background-color .6s ease, box-shadow .6s ease; }
.cm > .cm__b { transition: background-color .6s ease, box-shadow .6s ease; }

/* ---- Taken down (#190, #191): the same page and layout, greyed; its actions off (actionsOff in song.js) */
.sp.is-down .apx-hero, .sp.is-down .sp-stats, .sp.is-down .sp-tracks, .sp.is-down .sp-watch, .sp.is-down .sp-listen, .sp.is-down .sp-crbt { filter: grayscale(1); }
.sp.is-down .apx-hero__bg { opacity: .6; }
.sp.is-down .is-off, .sp.is-down .sp-play:disabled { opacity: .45; cursor: not-allowed; }
.sp.is-down .is-off:hover { transform: none; }
.sp.is-down .sp-tracks .sp-song { cursor: default; }
.sp.is-down .sp-tracks .sp-song:hover { background: none; }
.sp.is-down .sp-tracks .sp-song__play { display: none; }            /* no ▶ over the pictures */
.sp.is-down .cm__a [data-cm-reply], .sp.is-down .cm__a [data-cm-edit] { display: none; }   /* nothing new; Remove stays (#191) */
.sp-downbar { background: var(--tg-50); color: var(--tg-700); }

/* About across the whole card (#238 — no description beside it): the facts side by side, the label over the value, as
   the About facts on profiles; tags, album and ℗ under them */
.apx-about1--one.sp-aboutcard { display: flex; flex-direction: column; gap: 16px; }
.apx-about1--one .apx-about1__facts { display: flex; flex-direction: column; gap: 16px; }
.apx-about1--one .sp-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 24px; }
.apx-about1--one .sp-dl > div { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 0; border: 0; }
.apx-about1--one .sp-dl dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.apx-about1--one .sp-dl dd { text-align: left; }
/* Beside a description: the facts column keeps its rows, its parts spaced like the card's */
.apx-about1.sp-aboutcard .apx-about1__facts { display: flex; flex-direction: column; gap: 14px; }
.sp-trackcard { padding: 12px 14px; }
.sp-trackcard .sp-tracks__more { margin: 10px 0 4px 8px; }
/* With a description (#240): the shared two-column About — the old .sp-aboutcard stack above must not win */
.apx-about1.sp-aboutcard:not(.apx-about1--one) { display: grid; gap: 0; }
.apx-about1__facts .sp-maker { padding-bottom: 0; border-bottom: 0; }   /* no divider left over under "Playlist by" (#240) */
.apx-about1__facts > .sp-maker:not(:first-child) { margin-top: 18px; }   /* the person card after the facts (#285) */
.apx-about1__facts > .sp-maker + .sp-albox { margin-top: 14px; }

/* ---- gone.css ---- */
/* Deleted, not missing (#190): what broke, the message, and the countdown to the browse page — the 404's look */
.gone { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: var(--space-3); padding: var(--space-6) 0; text-align: center; }
.gone__title { margin: 0; font-size: clamp(1.25rem, 5vw, 1.75rem); font-weight: 600; text-wrap: balance; }
.gone__text { margin: 0; max-width: 40ch; color: var(--color-text-muted); }
.gone__go { display: flex; align-items: center; gap: 12px; margin-top: var(--space-2); font-size: 14px; color: var(--color-text-muted); }
.gone__to strong { color: var(--color-text); font-weight: 600; }
.gone__ring { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; }
.gone__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gone__track { fill: none; stroke: var(--color-primary-soft); stroke-width: 4; }
.gone__bar { fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round; stroke-dashoffset: 0; animation: gone-ring linear forwards; }
.gone__ring b { font-size: 17px; font-weight: 700; color: var(--color-link-hover); font-variant-numeric: tabular-nums; }
@keyframes gone-ring { to { stroke-dashoffset: 138.2; } }
.gone.is-staying .gone__go { display: none; }
.gone__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--space-2); }

/* The pictures — one palette for all of them: the 404's teal and the album slider's light vinyl */
.gn-art { width: min(440px, 88vw); height: auto; overflow: visible; }
.gn-art * { vector-effect: non-scaling-stroke; }            /* lines keep their weight when laid flat on the floor */
.gn-floor { fill: rgb(var(--teal-900-rgb) / .045); }
.gn-shade { fill: rgb(var(--teal-900-rgb) / .10); }
.gn-boom-sh, .gn-cable-sh { fill: none; stroke: rgb(var(--teal-900-rgb) / .08); stroke-width: 5; stroke-linecap: round; }
.gn-boom-sh { stroke-width: 6; }
/* records */
.gn-edge { fill: var(--teal-200); }
.gn-face { fill: var(--teal-50); stroke: var(--teal-300); stroke-width: 1.5; }
.gn-groove { fill: none; stroke: var(--teal-150); stroke-width: 1.1; }
.gn-shine { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; opacity: .85; }
.gn-label { fill: var(--color-primary); stroke: var(--teal-200); stroke-width: 2.5; }
.gn-label--strong { fill: var(--color-primary-strong); }
.gn-label--dark { fill: var(--teal-600); }
.gn-hole { fill: #fff; stroke: var(--teal-300); stroke-width: 1; }
.gn-bit { fill: var(--tg-100); stroke: var(--teal-300); stroke-width: 1; }
.gn-crack { fill: none; stroke: var(--teal-300); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* the album's sleeve */
.gn-sleeve { fill: var(--color-primary-strong); }
.gn-sleeve-edge { fill: var(--teal-600); }
.gn-sleeve-art { fill: var(--color-primary); }
.gn-sleeve-dot, .gn-sleeve-line { fill: var(--teal-150); }
.gn-sleeve-line--b { fill: var(--teal-300); }
.gn-crease { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; stroke-linecap: round; }
.gn-flap { fill: var(--teal-150); stroke: var(--teal-300); stroke-width: 1; stroke-linejoin: round; }
/* the playlist */
.gn-card { fill: #fff; stroke: var(--teal-150); stroke-width: 1.5; }
.gn-card-edge { fill: var(--teal-150); }
.gn-card-head { fill: var(--color-primary-strong); }
.gn-ic { fill: #fff; }
.gn-thumb { fill: var(--teal-150); }
.gn-thumb--b { fill: var(--teal-300); }
.gn-line { fill: var(--teal-150); }
.gn-line--b { fill: var(--teal-100); }
.gn-tri { fill: var(--teal-300); }
/* the mic stand */
.gn-leg { fill: none; stroke: var(--teal-600); stroke-width: 6; stroke-linecap: round; }
.gn-pole { fill: none; stroke: var(--teal-600); stroke-width: 7; }
.gn-pole2 { fill: none; stroke: var(--color-primary-strong); stroke-width: 5; }
.gn-collar, .gn-clamp, .gn-mic { fill: var(--teal-600); }
.gn-knob { fill: var(--tg-300); }
.gn-boom { fill: none; stroke: var(--color-primary); stroke-width: 5; stroke-linecap: round; }
.gn-holder { fill: none; stroke: var(--teal-600); stroke-width: 3; stroke-linecap: round; }
.gn-snap { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; }
.gn-grille { fill: var(--teal-150); stroke: var(--teal-600); stroke-width: 2; }
.gn-grille-l { fill: none; stroke: var(--teal-300); stroke-width: 1.2; }
.gn-cable { fill: none; stroke: var(--teal-600); stroke-width: 3.5; stroke-linecap: round; }
/* the framed profile picture */
.gn-frame { fill: var(--color-primary-strong); }
.gn-frame-edge { fill: var(--teal-600); }
.gn-mat { fill: var(--teal-50); }
.gn-photo { fill: var(--tg-100); }
.gn-av { fill: var(--teal-300); }
.gn-glass-lo { fill: none; stroke: var(--teal-300); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gn-glass { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.gn-shard { fill: rgba(255, 255, 255, .92); stroke: var(--teal-300); stroke-width: 1; stroke-linejoin: round; }
/* notes drifting off, as on the 404 */
.gn-note path { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gn-note circle { fill: var(--color-primary); }
.gn-note--a { opacity: .45; animation: gn-drift 5s ease-in-out infinite; }
.gn-note--b { opacity: .3; animation: gn-drift 6s ease-in-out infinite reverse; }
@keyframes gn-drift { 0%, 100% { translate: 0 0; } 50% { translate: 4px -8px; } }
@media (prefers-reduced-motion: reduce) { .gn-note { animation: none; } .gone__bar { animation: none; } }

/* ---- contests.css ---- */
/* =====================================================================
   Music contests (Bugs210): /contests and /contest/<id>
   ===================================================================== */
.ct { display: flex; flex-direction: column; gap: var(--section-gap, 40px); }
.ct svg, .ctp svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct svg.is-fill, .ctp svg.is-fill { fill: currentColor; stroke: none; }
.ct-sec { display: flex; flex-direction: column; gap: 16px; }
.ct-sec__h, .ctp-sec__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ct-sec__h h2, .ctp-sec__h h2 { margin: 0; font-size: 20px; }
.ctp-sec__h h2 small { margin-left: 6px; color: var(--color-text-subtle); font-size: 14px; font-weight: 600; }
.ct-years { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ct-year { padding: 6px 14px; border: 1px solid var(--color-control-soft); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; }
.ct-year:hover { border-color: var(--color-primary); }
.ct-year.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
/* Nothing open */
.ct-none { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border: 1px dashed var(--teal-200); border-radius: var(--radius-lg); background: var(--surface-hover); }
.ct-none > svg { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: #fff; color: var(--color-link-hover); }
.ct-none div { display: flex; flex-direction: column; gap: 2px; }
.ct-none strong { font-size: 15px; }
.ct-none span { color: var(--color-text-muted); font-size: 14px; }
/* The feature: latest results */
.ct-feat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); overflow: hidden; border-radius: 20px; background: linear-gradient(135deg, var(--teal-800), var(--teal-700) 55%, var(--teal-600)); color: #fff; text-decoration: none; box-shadow: 0 18px 40px rgb(var(--teal-800-rgb) / .22); }
.ct-feat__art { position: relative; min-height: 320px; background: var(--teal-800); }
.ct-feat__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-feat__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--teal-800-rgb) / 0) 60%, rgb(var(--teal-800-rgb) / .9)); }
.ct-feat__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 34px 36px; }
.ct-feat__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ct-feat__eyebrow svg { width: 15px; height: 15px; }
.ct-feat__t { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; }
.ct-feat__tag { color: var(--color-on-dark-soft); font-size: 16px; }
.ct-feat__meta { color: var(--color-on-dark-muted); font-size: 14px; }
.ct-feat__nums { display: flex; gap: 26px; margin: 6px 0 4px; }
.ct-feat__nums span { display: flex; flex-direction: column; color: var(--color-on-dark-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ct-feat__nums b { color: #fff; font-size: 24px; letter-spacing: 0; text-transform: none; }
.ct-feat__win { display: flex; gap: 18px; }
.ct-medal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; text-align: center; }
.ct-medal img { width: 54px; height: 54px; border: 3px solid #fff; border-radius: 50%; object-fit: cover; background: #fff; }
.ct-medal i { position: absolute; top: 36px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 700; color: #3a2a00; }
.ct-medal--1 i { background: #f4c542; } .ct-medal--2 i { background: #d5dbe0; } .ct-medal--3 i { background: #e2a46b; }
.ct-medal small { overflow: hidden; width: 100%; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ct-feat__go { margin-top: 8px; background: #fff; color: var(--color-link-hover); }
.ct-feat:hover .ct-feat__go { background: var(--color-primary-soft); }
/* Cards */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.ct-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; color: var(--color-text); text-decoration: none; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast); }
.ct-card[hidden] { display: none; }
.ct-card:hover { transform: translateY(-3px); border-color: var(--teal-200); box-shadow: 0 14px 30px rgb(var(--teal-900-rgb) / .12); }
.ct-card__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: visible; background: linear-gradient(135deg, var(--teal-600), var(--teal-700)); color: #fff; }
.ct-card__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ct-card__art > svg { width: 40px; height: 40px; }
.ct-card .ct-pill { position: absolute; top: 10px; right: 10px; }
.ct-card__logo { position: absolute; left: 14px; bottom: -22px; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 3px solid #fff; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.ct-card__logo img { width: 100%; height: 100%; object-fit: contain; }
.ct-card__body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 30px 16px 14px; }
.ct-card__host { color: var(--color-link-hover); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ct-card__body > strong { font-size: 17px; line-height: 1.25; }
.ct-card__tag { color: var(--color-text-muted); font-size: 13px; }
.ct-card__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--color-text-muted); font-size: 13px; }
.ct-card__meta svg { width: 14px; height: 14px; }
.ct-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 13px; }
.ct-faces { display: inline-flex; }
.ct-faces img { width: 26px; height: 26px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: var(--tg-50); }
.ct-faces img:first-child { margin-left: 0; }
.ct-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .94); color: var(--color-text); font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.ct-pill--open { background: var(--color-primary); color: #fff; }
.ct-pill--up, .ct-pill--judging { color: var(--color-link-hover); }
/* ---- One contest ---- */
.ctp { display: flex; flex-direction: column; gap: 24px; }
.ctp-hero { position: relative; overflow: hidden; border-radius: 20px; background: var(--teal-800); color: #fff; }
.ctp-hero::before { content: ''; position: absolute; inset: -20px; background: var(--ctp-bg, none) center / cover no-repeat; filter: blur(22px) saturate(1.2); opacity: .55; }
.ctp-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--tg-900-rgb) / .92), rgb(var(--tg-900-rgb) / .72)); }
.ctp-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 34px; align-items: center; padding: 36px; }
.ctp-poster { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .1); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.ctp-poster img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ctp-poster svg { width: 54px; height: 54px; }
.ctp-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.ctp-hero h1 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; }
.ctp-tag { margin: 0; color: var(--color-on-dark-soft); font-size: 17px; }
.ctp-host { display: flex; align-items: center; gap: 10px; margin: 0; }
.ctp-host img { width: 40px; height: 40px; border-radius: 10px; background: #fff; object-fit: contain; }
.ctp-host span { display: flex; flex-direction: column; }
.ctp-host small { color: var(--color-on-dark-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ctp-time { display: flex; flex-wrap: wrap; gap: 0; margin: 6px 0 0; padding: 0; list-style: none; }
.ctp-time li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 28px 0 18px; font-size: 13px; }
.ctp-time li::before { content: ''; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border: 2px solid rgba(255, 255, 255, .8); border-radius: 50%; }
.ctp-time li.is-done::before { background: var(--teal-400); border-color: var(--teal-400); }
.ctp-time li + li::after { content: ''; position: absolute; left: -24px; top: 9px; width: 18px; height: 2px; background: rgba(255, 255, 255, .35); }
.ctp-time b { color: var(--color-on-dark-muted); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.ctp-nums { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ctp-nums span { display: flex; flex-direction: column; min-width: 96px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--color-on-dark-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.ctp-nums b { color: #fff; font-size: 20px; letter-spacing: 0; text-transform: none; }
.ctp-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ctp-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ctp-winners h2 { display: flex; align-items: center; gap: 8px; }
.ctp-winners h2 svg { color: #d8a400; }
.ctp-pod + .ctp-pod { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.ctp-pod h3 { margin: 0 0 12px; color: var(--color-text-muted); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.ctp-pod__stage { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.ctp-pod__p { display: flex; flex: 0 1 180px; flex-direction: column; align-items: center; gap: 4px; color: var(--color-text); text-align: center; text-decoration: none; }
.ctp-pod__face { position: relative; }
.ctp-pod__face img { width: 76px; height: 76px; border: 4px solid #fff; border-radius: 50%; object-fit: cover; background: var(--tg-50); box-shadow: 0 6px 16px rgba(0, 0, 0, .14); }
.ctp-pod__p--1 .ctp-pod__face img { width: 96px; height: 96px; }
.ctp-pod__face i { position: absolute; right: -2px; bottom: 2px; display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%; color: #3a2a00; font-size: 13px; font-style: normal; font-weight: 800; }
.ctp-pod__p--1 i { background: #f4c542; } .ctp-pod__p--2 i { background: #d5dbe0; } .ctp-pod__p--3 i { background: #e2a46b; }
.ctp-pod__p strong { overflow: hidden; max-width: 100%; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ctp-pod__p small { color: var(--color-text-muted); font-size: 12px; }
.ctp-pod__p strong:hover { color: var(--color-link-hover); }
.ctp-pod__step { display: block; width: 100%; margin-top: 8px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--color-primary-soft), var(--surface-hover)); }
.ctp-pod__p--1 .ctp-pod__step { height: 70px; } .ctp-pod__p--2 .ctp-pod__step { height: 46px; } .ctp-pod__p--3 .ctp-pod__step { height: 30px; }
.ctp-rest { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding-left: 22px; color: var(--color-text-muted); font-size: 13px; }
.ctp-rest a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text); text-decoration: none; }
.ctp-rest img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ctp-html { color: var(--color-text); line-height: 1.7; }
.ctp-html p { margin: 0 0 10px; }
.ctp-html h3, .ctp-html h4 { margin: 18px 0 8px; font-size: 15px; }
.ctp-html ul, .ctp-html ol { margin: 0 0 10px; padding-left: 20px; }
.ctp-prizes { background: linear-gradient(135deg, var(--warn-soft), #fff); }
.ctp-note { margin: -6px 0 0; color: var(--color-text-subtle); font-size: 13px; }
.ctp-ents { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ctp-ent { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--color-border); border-radius: 12px; }
.ctp-ent__art { position: relative; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 10px; background: var(--color-primary-soft); color: var(--teal-300); }
.ctp-ent__art.is-round { border-radius: 50%; }
.ctp-ent__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctp-ent__play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0; border: 0; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; opacity: 0; transition: opacity var(--dur-fast); }
.ctp-ent:hover .ctp-ent__play, .ctp-ent__play:focus-visible { opacity: 1; }
@media (hover: none) { .ctp-ent__play { opacity: 1; background: rgba(0, 0, 0, .2); } }
.ctp-ent__t { display: flex; flex-direction: column; min-width: 0; }
.ctp-ent__t strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ctp-ent__t small { overflow: hidden; color: var(--color-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ctp-ent a { color: inherit; text-decoration: none; }
.ctp-ent a:hover { color: var(--color-link-hover); text-decoration: underline; }
.ctp-ent__v { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ctp-ent__v svg { width: 14px; height: 14px; }
.ctp-more { align-self: flex-start; margin-top: 12px; }   /* Load More: at the left, under its list — everywhere (#247) */
.ctp-rules summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.ctp-rules summary::-webkit-details-marker { display: none; }
.ctp-rules summary h2 { margin: 0; }
.ctp-rules[open] summary svg { transform: rotate(180deg); }
.ctp-rules[open] summary { margin-bottom: 12px; }
.ctp-side { position: sticky; top: 84px; }
.ctp-glance { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.ctp-glance h3 { margin: 0; font-size: 15px; }
.ctp-glance dl { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ctp-glance dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ctp-glance dt { color: var(--color-text-muted); }
.ctp-glance dd { margin: 0; font-weight: 600; text-align: right; }
.ctp-glance .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ctp-all { color: var(--color-link-hover); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; }
.ctp-all:hover { text-decoration: underline; }
@media (max-width: 960px) {
  .ct-feat { grid-template-columns: minmax(0, 1fr); }
  .ct-feat__art { min-height: 220px; }
  .ct-feat__art::after { background: linear-gradient(180deg, rgb(var(--teal-800-rgb) / 0) 50%, rgb(var(--teal-800-rgb) / .9)); }
  .ct-feat__body { padding: 24px; }
  .ctp-hero__in { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .ctp-poster { width: 180px; }
  .ctp-body { grid-template-columns: minmax(0, 1fr); }
  .ctp-side { position: static; }
}
@media (max-width: 560px) { .ctp-ents { grid-template-columns: minmax(0, 1fr); } .ctp-pod__stage { gap: 6px; } .ctp-pod__face img { width: 60px; height: 60px; } .ctp-pod__p--1 .ctp-pod__face img { width: 76px; height: 76px; } }

/* Information pages: info.css (var(--teal-600)) */

/* The contest hero honours the banner (Rohit): the whole poster in its own shape across the top, on a blur of
   itself; the name, host, timeline and numbers in a band under it */
.ctp-banner { position: relative; z-index: 1; display: flex; justify-content: center; padding: 28px 28px 0; }
.ctp-banner img { display: block; width: auto; max-width: 100%; max-height: 460px; border-radius: 14px; box-shadow: 0 20px 44px rgba(0, 0, 0, .4); }
.ctp-hero .ctp-hero__in { grid-template-columns: minmax(0, 1fr); padding: 26px 36px 32px; }
.ctp-hero .ctp-hero__text { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "pill pill" "title nums" "tag nums" "host nums" "time nums"; column-gap: 32px; row-gap: 10px; align-items: start; }
.ctp-hero__text > .ct-pill { grid-area: pill; justify-self: start; }
.ctp-hero__text > h1 { grid-area: title; }
.ctp-hero__text > .ctp-tag { grid-area: tag; }
.ctp-hero__text > .ctp-host { grid-area: host; }
.ctp-hero__text > .ctp-time { grid-area: time; }
.ctp-hero__text > .ctp-nums { grid-area: nums; align-self: center; justify-content: flex-end; margin: 0; }
@media (max-width: 960px) {
  .ctp-banner { padding: 16px 16px 0; }
  .ctp-hero .ctp-hero__in { padding: 20px; }
  .ctp-hero .ctp-hero__text { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pill" "title" "tag" "host" "time" "nums"; }
  .ctp-hero__text > .ctp-nums { justify-content: flex-start; }
}

/* The home page's contests slider */
.home-contests .ct-card { flex: 0 0 290px; scroll-snap-align: start; }
@media (max-width: 560px) { .home-contests .ct-card { flex-basis: 78vw; } }
/* Contest cards anywhere (the home slider too): their icons as lines, like on /contests */
.ct-card svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-card .ct-card__art > svg { width: 40px; height: 40px; }

/* Contest hero as a cover (Rohit): the banner full width at its own height, the details on a shade over its foot */
.ctp-hero.has-cover::before, .ctp-hero.has-cover::after { display: none; }
.ctp-hero.has-cover .ctp-banner { padding: 0; display: block; }
.ctp-hero.has-cover .ctp-banner img { display: block; width: 100%; height: auto; max-height: 640px; max-width: none; object-fit: cover; object-position: top; border-radius: 0; box-shadow: none; }
.ctp-hero.has-cover .ctp-hero__in { position: absolute; left: 0; right: 0; bottom: 0; padding: 140px 36px 28px;
  background: linear-gradient(to top, rgb(var(--teal-950-rgb) / .96) 0%, rgb(var(--teal-950-rgb) / .82) 45%, rgb(var(--teal-950-rgb) / 0) 100%); }
.ctp-hero.has-cover h1 { text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
.ctp-hero.has-cover .ctp-nums span { background: rgba(255, 255, 255, .14); backdrop-filter: none; }
@media (max-width: 760px) {
  .ctp-hero.has-cover .ctp-hero__in { position: static; padding: 20px; background: linear-gradient(180deg, var(--teal-800), var(--teal-900)); }
}
/* A darker foot so the poster's own words don't fight the details; phones: the timeline as a short list */
.ctp-hero.has-cover .ctp-hero__in { padding-top: 190px; background: linear-gradient(to top, rgb(var(--teal-950-rgb) / .98) 0%, rgb(var(--teal-950-rgb) / .92) 50%, rgb(var(--teal-950-rgb) / .55) 78%, rgb(var(--teal-950-rgb) / 0) 100%); }
@media (max-width: 760px) {
  .ctp-hero.has-cover .ctp-hero__in { padding-top: 20px; }
  .ctp-time { flex-direction: column; gap: 8px; }
  .ctp-time li { padding-right: 0; }
  .ctp-time li + li::after { display: none; }
  .ctp-nums span { min-width: 0; flex: 1 1 40%; }
}
.ctp-hero.has-cover .ctp-hero__in { background: linear-gradient(to top, rgb(var(--teal-950-rgb) / .98) 0%, rgb(var(--teal-950-rgb) / .95) 62%, rgb(var(--teal-950-rgb) / .6) 84%, rgb(var(--teal-950-rgb) / 0) 100%); }
@media (max-width: 760px) { .ctp-hero.has-cover .ctp-hero__in { background: linear-gradient(180deg, var(--teal-800), var(--teal-900)); } }

/* ---- The contest page in the profile pages' design (#160) ---------------------------------------------- */
.ctp.apx .ctp-hero--t2 h1 { font-size: clamp(26px, 3vw, 38px); }
.ctp.apx .ctp-hero--t3 h1 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; }
.ctp.apx .ctp-hero--t4 h1 { font-size: clamp(22px, 2vw, 28px); line-height: 1.18; }
.ctp.apx .ctp-hero--t3 h1, .ctp.apx .ctp-hero--t4 h1 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.ctp.apx .ctp-body { margin-top: 18px; }
/* Sections: no cards, the teal mark and a hairline between them (as every public page) */
.ctp.apx .ctp-main { gap: var(--section-gap); }
.ctp.apx .ctp-main > .apx-sec { padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; }
.ctp.apx .ctp-main > .apx-sec + .apx-sec { padding-top: var(--section-gap); border-top: 1px solid var(--color-border); }
.ctp.apx .ctp-sec__h.apx-head { margin-bottom: 14px; }
.ctp.apx .ctp-rules summary.apx-head { margin-bottom: 0; }
.ctp.apx .ctp-rules[open] summary.apx-head { margin-bottom: 14px; }
.ctp.apx .ctp-rules summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur-fast); }
.ctp.apx .ctp-rules[open] summary svg { transform: rotate(180deg); }
.ctp.apx .ctp-side { top: calc(var(--header-height) + 124px); }
/* More contests under it: the contest cards in a slider */
.shelf__track.ct-track { grid-auto-columns: 290px; }
.ct-track .ct-card { scroll-snap-align: start; }
@media (max-width: 560px) { .shelf__track.ct-track { grid-auto-columns: 78vw; } }
@media (max-width: 767px) {
  .ctp.apx .ctp-hero h1 { font-size: 26px; }
  .ctp.apx .ctp-hero--t3 h1, .ctp.apx .ctp-hero--t4 h1 { font-size: 21px; }
}
/* The numbers strip over the poster's foot (timeline, entries, votes, winners) */
.ctp.apx .ctp-hero__in { padding-bottom: 72px; }
.ctp.apx .ctp-stats { z-index: 2; }
.ctp-stats .apx-stat__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctp-stats .apx-stat.is-done .apx-stat__ic { background: var(--color-primary); color: #fff; }
.ctp-stats .apx-stat strong { font-size: 18px; white-space: nowrap; }
@media (max-width: 767px) { .ctp.apx .ctp-hero__in { padding-bottom: 56px; } }
@container (max-width: 560px) { .ctp-stats .apx-stat strong { font-size: 13px; white-space: normal; } }
/* The page itself adds no gaps of its own: the same spacing as the other public pages */
.ctp.apx { gap: 0; }
/* Phones (#162): the whole banner still, but a compact block under it — the status on the banner's corner, a smaller title,
   the tagline in two lines at most, the host in one row, less padding — about half the height it was */
@media (max-width: 760px) {
  .ctp.apx .ctp-hero.has-cover .ctp-hero__in { position: static; padding: 14px 16px 50px; }
  .ctp.apx .ctp-hero.has-cover .ctp-hero__text { row-gap: 6px; }
  .ctp.apx .ctp-hero.has-cover .ctp-hero__text > .ct-pill { position: absolute; top: 12px; left: 12px; z-index: 2; }
  .ctp.apx .ctp-hero h1 { font-size: 22px; line-height: 1.15; }
  .ctp.apx .ctp-hero--t3 h1, .ctp.apx .ctp-hero--t4 h1 { font-size: 19px; }
  .ctp.apx .ctp-tag { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ctp.apx .ctp-host { gap: 8px; margin-top: 2px; }
  .ctp.apx .ctp-host img { width: 28px; height: 28px; border-radius: 7px; }
  .ctp.apx .ctp-host span { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .ctp.apx .ctp-host small { font-size: 11px; }
  .ctp.apx .ctp-host strong { font-size: 14px; }
  .ctp.apx .ctp-stats { margin-top: -34px; }
}

/* ---- info.css ---- */
/* =====================================================================
   Information pages (Bugs210; redesigned in var(--teal-600), var(--teal-600)): Our Vision, FAQ, Contact, Feedback, Careers, Terms, Privacy,
   Copyright. The menu on the left (centred pills on top on narrow screens); the page uses the full width beside it.
   Each layout follows the space it has (container queries on .info-main, #180), not the device. Links in the words are
   bold words in the text colour — never teal underlines (Rohit, var(--teal-600)). Type as on the rest of the site (var(--teal-600)): headings
   in the site's text colour at 600 (as shelf titles), long text in the profile bio's soft ink, answers muted.
   ===================================================================== */
.info { --info-ink: var(--tg-800); display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.info-main { container: info / inline-size; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* ---- The menu ---- */
.info-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.info-nav a { padding: 9px 14px; border-radius: var(--radius-md); color: var(--color-text-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--dur-fast), color var(--dur-fast); }
.info-nav a:hover { background: var(--color-surface-muted); color: var(--color-text); }
.info-nav a.is-on { background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
@media (max-width: 900px) {
  .info { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* #313 (Rohit): nine pills wrapped into four ragged centred rows with no straight edge anywhere. They are now the
     one sideways row the song and album pages use for their sections — arrows at the ends from scroll-hints.js,
     the page you are on highlighted and scrolled into view by info.js. */
  .info-nav { position: static; flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .info-nav::-webkit-scrollbar { display: none; }
  .info-nav a { flex: none; padding: 7px 15px; border: 1px solid var(--card-border); border-radius: var(--radius-pill); background: #fff; font-size: 14px; white-space: nowrap; }
  .info-nav a.is-on { border-color: transparent; }
}

/* ---- The words ---- */
.info-text { padding: 32px 40px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); color: var(--info-ink); font-size: 15px; line-height: 1.75; }
.info-text > :first-child { margin-top: 0; }
.info-text h2 { margin: 34px 0 10px; color: var(--color-text); font-size: 18px; font-weight: 600; line-height: 1.35; scroll-margin-top: 96px; }
.info-text h3 { margin: 22px 0 6px; color: var(--color-text); font-size: 15px; font-weight: 600; }
.info-text p { margin: 0 0 12px; }
.info-text ul, .info-text ol { margin: 0 0 14px; padding-left: 22px; }
.info-text li { margin-bottom: 6px; padding-left: 2px; }
.info-text li::marker { color: var(--color-text-subtle); }
.info-text li ul { margin: 6px 0 0; }
.info-text strong { font-weight: 600; color: var(--color-text); }
/* Links read as bold words in the text colour; a quiet underline only while pointing at one. Buttons keep their own
   colours (the FAQ's Contact Us button had turned dark-on-teal) */
:is(.info-text, .info-formcard, .info-sidecard, .info-faq) a:not(.btn) { color: var(--color-text); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-fast); }
:is(.info-text, .info-formcard, .info-sidecard, .info-faq) a:not(.btn):hover { text-decoration-color: currentColor; }
.info-updated { margin-bottom: 18px !important; color: var(--color-text-subtle); font-size: 13px; }
.info-summary { margin: 0 0 30px; padding: 20px 24px; border-radius: var(--card-radius-sm); background: var(--card-tint); }
.info-summary .info-summary__t { margin: 0 0 8px; font-size: 15px; }
.info-summary ul { margin-bottom: 8px; }
.info-summary > p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.info-card { display: grid; gap: 2px; margin: 4px 0 16px; padding: 16px 20px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: var(--surface-hover); font-size: 14px; line-height: 1.6; }
.info-card strong { margin-bottom: 2px; font-size: 15px; }

/* ---- Legal pages: the words with "On this page" beside them ---- */
.info-doc { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; align-items: start; }
.info-toc { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 18px 12px 14px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); }
.info-toc summary { display: block; padding: 0 10px 10px; color: var(--color-text-subtle); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; list-style: none; pointer-events: none; }
.info-toc summary::-webkit-details-marker { display: none; }
.info-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.info-toc li { counter-increment: toc; }
.info-toc a { display: flex; gap: 8px; padding: 6px 10px; border-radius: 8px; color: var(--color-text-muted); font-size: 14px; line-height: 1.4; text-decoration: none; transition: background-color var(--dur-fast), color var(--dur-fast); }
.info-toc a::before { content: counter(toc) "."; flex: none; min-width: 18px; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.info--legal .info-toc li:last-child a::before { content: "→"; }
.info-toc a:hover { background: var(--color-surface-muted); color: var(--color-text); }
.info-toc a.is-on { background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
/* The FAQ's topics: no numbers, how many questions on the right */
.info-toc__plain a::before { display: none; }
.info-toc__plain a { justify-content: space-between; align-items: baseline; }
.info-toc__plain small { flex: none; color: var(--color-text-subtle); font-size: 12px; font-weight: 400; }
@container info (max-width: 920px) {
  .info-doc { grid-template-columns: minmax(0, 1fr); }
  /* Narrow: the list sits on top, folded — open it to jump */
  .info-toc { position: static; order: -1; max-height: none; padding: 0; }
  .info-toc summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; color: var(--color-text); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 600; cursor: pointer; pointer-events: auto; }
  .info-toc summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--color-text-subtle); border-bottom: 2px solid var(--color-text-subtle); transform: rotate(45deg) translateY(-3px); transition: transform var(--dur-fast); }
  .info-toc[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
  .info-toc ol { padding: 0 8px 12px; columns: 2 220px; column-gap: 12px; }
  .info-toc li { break-inside: avoid; }
}
@container info (max-width: 600px) {
  .info-text { padding: 22px 20px; font-size: 14px; }
  .info-text h2 { margin-top: 30px; font-size: 17px; }
  .info-summary { padding: 16px 18px; }
}

/* ---- Forms: Contact, Feedback, the copyright notice ---- */
.info-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
@container info (max-width: 860px) { .info-split { grid-template-columns: minmax(0, 1fr); } }
.info-formcard { padding: 28px 32px 30px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); scroll-margin-top: 96px; }
.info-formcard__head { margin-bottom: 24px; }
.info-formcard__head h2 { margin: 0; color: var(--color-text); font-size: 19px; font-weight: 600; }
/* A friendly word before the fields (Rohit: not straight into a form) */
.info-formcard__head p { max-width: 640px; margin: 6px 0 0; color: var(--info-ink); font-size: 15px; line-height: 1.65; }
@container info (max-width: 600px) { .info-formcard { padding: 22px 18px 24px; } }
.info-form { display: flex; flex-direction: column; gap: 18px; }
.info-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.info-form legend { margin-bottom: 10px; padding: 0; color: var(--color-text); font-size: 14px; font-weight: 600; }
.info-form legend span { color: var(--color-text-subtle); font-weight: 400; }
.info-form .field:not(:has(.field__icon)):not(.field--area):not(.is-phone) .field__input { padding-left: 14px; }
.info-form .field:not(:has(.field__icon)):not(.is-phone) .field__label { left: 14px; }
.info-form__sec { margin: 6px 0 -4px; color: var(--color-text-subtle); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.info-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--card-border); }
.info-form__note { flex: 1 1 260px; margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.info-form__foot .btn { min-width: 170px; }
@container info (max-width: 520px) { .info-form__foot .btn { width: 100%; } }
.info-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Logged in, Feedback's guest-only email is hidden: the field beside it takes the whole row */
body:not([data-auth="guest"]) .info-form .sf-grid:has(> [data-guest-only]) { grid-template-columns: minmax(0, 1fr); }
[data-show][hidden] { display: none !important; }

/* Notice / counter-notice, owner / authorised: a two-way switch */
.info-seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--color-surface-muted); }   /* the site's .seg look (var(--teal-600)) */
.info-seg label { position: relative; cursor: pointer; }
.info-seg input { position: absolute; opacity: 0; pointer-events: none; }
.info-seg span { display: block; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: 13px; font-weight: 500; transition: background-color var(--dur-fast), color var(--dur-fast); }
.info-seg input:checked + span { background: #fff; color: var(--color-link-hover); font-weight: 600; box-shadow: var(--shadow-sm); }
.info-seg input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.info-seg--sm span { padding: 6px 14px; font-size: 13px; }
[data-show="notice"] > .info-seg { margin-bottom: 14px; }
[data-show="notice"] > .field, [data-show="notice"] > [data-show] > .field { margin-bottom: 18px; }
[data-show="notice"] > .info-form__sec { display: block; margin-bottom: 14px; }

/* Statements to tick */
.info-checks { display: flex; flex-direction: column; gap: 10px; }
.info-checks > div { display: flex; flex-direction: column; gap: 10px; }
.info-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 13px 16px; border: 1px solid var(--card-border); border-radius: 12px; background: #fff; color: var(--color-text); font-size: 14px; line-height: 1.5; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.info-check input { margin: 1px 0 0; }
.info-check:has(input:checked) { border-color: var(--color-primary); background: var(--card-tint); }
.info-check.is-invalid { border-color: var(--color-error); }
.info-check .field__error, .info-chips .field__error { position: static; grid-column: 2; max-width: none; padding: 0; background: none; white-space: normal; }

/* Feedback: how it feels, and what it's about */
.info-moods { container-type: inline-size; }   /* on the wrapper: an element cannot query its own container */
.info-moods__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
/* #313 (Rohit): where five across leaves each tile too narrow for its name, they go three and two — the second row
   splitting the width between the two of them, as sketched. It goes by the row's own width, not the device's. */
@container (max-width: 400px) {    /* under this, five across leaves each tile below ~75px and the names break up */
  .info-moods__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .info-mood { grid-column: span 2; }
  .info-mood:nth-child(4) { grid-column: 1 / span 3; }
  .info-mood:nth-child(5) { grid-column: 4 / span 3; }
}
.info-mood { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border: 1px solid var(--card-border); border-radius: 14px; background: #fff; color: var(--color-text-subtle); font-size: 12px; text-align: center; cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.info-mood input { position: absolute; opacity: 0; pointer-events: none; }
.info-mood svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.info-mood svg .eye { fill: currentColor; stroke: none; }
.info-mood:hover { border-color: var(--color-primary); color: var(--color-text); }
.info-mood:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-text); font-weight: 600; }
.info-mood:has(input:checked) svg { color: var(--color-link-hover); transform: scale(1.1); }
.info-mood:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.info-chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.info-chip { position: relative; cursor: pointer; }
.info-chip input { position: absolute; opacity: 0; pointer-events: none; }
.info-chip span { display: block; padding: 8px 16px; border: 1px solid var(--card-border); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font-size: 14px; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.info-chip:hover span { border-color: var(--color-primary); }
.info-chip input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-text); font-weight: 600; }
.info-chip input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.info-chips.is-invalid .info-chip span { border-color: var(--color-error); }
.info-chips .field__error { display: block; margin-top: 8px; }
.info-chips .field__error:empty { display: none; }

/* Sent */
.info-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 12px 20px; text-align: center; }
.info-done__tick { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); animation: dialog-in var(--dur-slow) var(--ease); }
.info-done__tick svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.info-done h2 { margin: 0; color: var(--color-text); font-size: 19px; font-weight: 600; }
.info-done p { max-width: 440px; margin: 0 0 14px; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }
.info-done p strong { color: var(--color-text); }

/* ---- Beside the form: other ways to reach us ---- */
.info-side { display: flex; flex-direction: column; gap: 12px; }
@container info (max-width: 860px) { .info-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.info-sidecard { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; box-shadow: var(--card-shadow); }
.info-sidecard__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.info-sidecard__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-sidecard h3 { margin: 1px 0 3px; color: var(--color-text); font-size: 15px; font-weight: 600; }
.info-sidecard p { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.info-sidecard p a { color: var(--color-text); }
.info-sidecard__small { margin-top: 6px !important; font-size: 13px !important; color: var(--color-text-subtle) !important; }
.info-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--color-text) !important; font-size: 14px; }
.info-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.info-go:hover svg { transform: translateX(3px); }

/* ---- FAQ (var(--teal-600)): one question a row across the full width, search above them, "Topics" at the side like "On this
   page". Each question looks like the Artist Plus FAQ: a white card, the round + that turns into ×, a muted answer ---- */
.info-faq { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.info-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid var(--card-border); border-radius: var(--radius-pill); background: #fff; box-shadow: var(--card-shadow); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.info-search:focus-within { border-color: var(--color-primary); box-shadow: 0 3px 6px var(--teal-100); }
.info-search svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--color-text-subtle); stroke-width: 2; stroke-linecap: round; }
.info-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--color-text); font: inherit; font-size: 14px; outline: none; }
.info-search input::placeholder { color: var(--color-control-icon); }
.info-faq__list { display: flex; flex-direction: column; gap: 30px; }
.faq-group { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 96px; }
.faq-group[hidden] { display: none; }
/* Section titles as on every public page: the teal mark, then the title (song, album, profile pages) */
.faq-group > h2 { display: flex; align-items: center; margin: 0 0 4px; color: var(--color-text); font-size: 18px; font-weight: 600; }
.faq-group > h2::before { content: ""; flex: none; width: 4px; height: 18px; margin-right: 10px; border-radius: 2px; background: var(--color-primary); }
.faq-group details { border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.faq-group details[hidden] { display: none; }
.faq-group details[open] { border-color: var(--teal-200); box-shadow: 0 10px 26px rgb(var(--teal-950-rgb) / .06); }
.faq-group summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 16px 20px; color: var(--color-text); font-size: 15px; font-weight: 500; line-height: 1.45; list-style: none; cursor: pointer; }
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary:hover { color: var(--color-link-hover); }
.faq-group summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--card-radius-sm); }
.faq-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); transition: transform var(--dur-med) var(--ease), background-color var(--dur-fast), color var(--dur-fast); }
.faq-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.faq-group details[open] .faq-ic { transform: rotate(45deg); background: var(--color-primary); color: #fff; }
.faq-group details > :not(summary) { max-width: 820px; margin: 0; padding: 0 20px 12px; color: var(--color-text-muted); font-size: 14px; line-height: 1.7; }
.faq-group details > :not(summary):last-child { padding-bottom: 18px; }
.faq-group details ul { padding-left: 40px; }
.faq-group details li { margin-bottom: 4px; }
.faq-group details strong { font-weight: 600; color: var(--color-text); }
.info-faq__none { margin: 0; padding: 22px; border: 1px dashed var(--card-border); border-radius: var(--card-radius-sm); color: var(--color-text-muted); font-size: 14px; text-align: center; }
.info-faq__more { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; padding: 22px 26px; border-radius: var(--card-radius); background: var(--card-tint); }
.info-faq__more > div { flex: 1 1 260px; }
.info-faq__more h2 { margin: 0; color: var(--color-text); font-size: 17px; font-weight: 600; }
.info-faq__more p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 14px; }
@container info (max-width: 600px) { .faq-group summary { padding: 14px 14px 14px 16px; font-size: 14px; } .faq-group details > :not(summary) { padding-left: 16px; padding-right: 16px; } }

/* ---- Careers (var(--teal-600)): the words and the application, how we hire beside them ---- */
.info-stack { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.info-text .info-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 16px; padding: 0; list-style: none; }
.info-areas li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: var(--surface-hover); line-height: 1.5; }
.info-areas li::marker { content: ""; }
.info-areas strong { font-size: 14px; }
.info-areas span { color: var(--color-text-muted); font-size: 14px; }

/* ---- Our Vision: the opening line, the quote, the team as cards (#179) ---- */
.info-lead { margin-bottom: 14px !important; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--color-text); }
.info-quote { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid var(--color-primary); border-radius: 0 12px 12px 0; background: var(--card-tint); }
.info-quote p { margin: 0 !important; font-style: italic; }
.info-quote cite { display: block; margin-top: 4px; font-size: 13px; font-style: normal; color: var(--color-text-muted); }
.info-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.info-member { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; }
.info-member h4 { margin: 0; font-size: 16px; font-weight: 600; }
.info-member__role { margin: 2px 0 10px !important; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-link-hover); }
.info-member p { font-size: 14px; line-height: 1.6; }
.info-member__links { display: flex; gap: 8px; margin: auto 0 0 !important; padding-top: 4px; }
.info-member__links a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--card-border); border-radius: 50%; color: var(--color-text-muted); }
.info-member__links a:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.info-member__links svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info-contact { margin: 0 !important; color: var(--color-text-muted); }

/* ---- services.css ---- */
/* =====================================================================
   Artist Plus — the Services page (decision #172). services.php + services.js.
   A two-slide hero (deep teal for distribution, violet-magenta for marketing), then sections on white, soft
   colour or dark bands in turn, with visual cards (bento, a sample dashboard, poster and album sliders) so it
   never reads like a document. No backdrop blur (it slowed scrolling, #-perf); album cards use their artwork
   darkened, not blurred.
   ===================================================================== */
.ap { --ap-ink: var(--teal-950); --ap-line: var(--tg-100); --ap-soft: var(--surface-hover); --ap-violet: #7c5cff; --ap-pink: #ff4d8d;
  --ap-h2: 23px;   /* #303 (Rohit): the sections' headings a few pixels over the home page's 19px (20px on phones), the body font */
  --ap-h3: 19px;   /* a card's title: the home page's heading size (#302) */
  display: flex; flex-direction: column; padding-bottom: 24px; }
/* Only on the Artist Plus page — profile pages also carry the class "ap" and took this font for their headings (#179) */
.ap[data-artist-plus] h1, .ap[data-artist-plus] h2, .ap[data-artist-plus] h3 { font-family: var(--font-display); letter-spacing: -.01em; }
.ap-btn-lg { min-height: 50px; padding: 0 26px; font-size: 15px; border-radius: var(--radius-pill); }
.ap-btn-glass { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.ap-btn-glass:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.ap-btn-white { background: #fff; color: var(--ap-ink); border: 1px solid #fff; }
.ap-btn-white:hover { background: var(--teal-50); color: var(--ap-ink); }
.ap[data-artist-plus] .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-eyebrow { margin: 0; color: var(--color-link-hover); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ap-eyebrow--light { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; padding: 7px 14px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .1); color: var(--teal-200); border: 1px solid rgba(255, 255, 255, .2); }
.ap[data-artist-plus] h1 em, .ap[data-artist-plus] h2 em { font-style: normal; background: linear-gradient(90deg, var(--teal-300), var(--teal-500) 40%, #b9a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Hero: two slides in one cell, the tabs over their foot ---- */
.ap-hero { position: relative; display: grid; grid-template-rows: 1fr auto; overflow: hidden; border-radius: 28px; color: #fff; background: var(--teal-950); isolation: isolate; }
.ap-slide { grid-row: 1 / 3; grid-column: 1; position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px; align-items: center;
  min-height: 600px; padding: 56px 0 112px 56px; opacity: 0; visibility: hidden; transition: opacity .8s var(--ease), visibility 0s .8s; }
.ap-slide.is-on { opacity: 1; visibility: visible; transition: opacity .8s var(--ease), visibility 0s; z-index: 1; }
.ap-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.ap-slide--dist::before { background: radial-gradient(60% 80% at 0% 0%, rgb(var(--teal-500-rgb) / .38), transparent 60%), radial-gradient(50% 60% at 100% 100%, rgba(124, 92, 255, .28), transparent 60%),
  radial-gradient(40% 50% at 70% 0%, rgba(255, 77, 141, .16), transparent 60%), linear-gradient(160deg, var(--teal-900) 0%, var(--teal-950) 55%, var(--teal-950) 100%); }
.ap-slide--mk::before { background: radial-gradient(55% 75% at 0% 0%, rgba(255, 77, 141, .42), transparent 60%), radial-gradient(55% 70% at 100% 100%, rgba(250, 126, 30, .3), transparent 60%),
  radial-gradient(50% 60% at 80% 10%, rgba(124, 92, 255, .5), transparent 60%), linear-gradient(160deg, #2b0f4d 0%, #1b0a33 55%, #12061f 100%); }
.ap-slide--mk em { background-image: linear-gradient(90deg, #ffd36e, #ff7aa8 45%, #c9a8ff); }
.ap-slide--mk .ap-eyebrow--light { color: #ffc2d8; }
.ap-slide.is-on .ap-hero__text > * { animation: ap-rise .8s var(--ease) both; }
.ap-slide.is-on .ap-hero__text > :nth-child(2) { animation-delay: .06s; }
.ap-slide.is-on .ap-hero__text > :nth-child(3) { animation-delay: .12s; }
.ap-slide.is-on .ap-hero__text > :nth-child(4) { animation-delay: .18s; }
.ap-slide.is-on .ap-hero__text > :nth-child(5) { animation-delay: .24s; }
@keyframes ap-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ap-hero__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; max-width: 600px; }
.ap-hero h1, .ap-hero .ap-hero__h1 { margin: 0; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; font-weight: 700; }   /* one h1 per page: the second slide's heading is an h2 styled the same (var(--teal-600)) */
.ap-hero__sub { margin: 0; max-width: 530px; color: var(--color-on-dark-soft); font-size: 16px; line-height: 1.65; }
.ap-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.ap-hero__ctas .btn--primary { box-shadow: 0 10px 30px rgb(var(--teal-500-rgb) / .45); }
.ap-figs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; margin: 14px 0 0; padding: 0; list-style: none; }
.ap-figs li { display: flex; flex-direction: column; gap: 2px; padding: 0 22px; border-left: 1px solid rgba(255, 255, 255, .16); }
.ap-figs li:first-child { padding-left: 0; border-left: 0; }
.ap-figs strong { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.ap-figs span { color: var(--color-on-dark-muted); font-size: 13px; }
.ap-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ap-tags li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 600; }
.ap-tags svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Tabs: number, name, a line; a bar fills while the slide shows (paused on hover), then the next */
.ap-hero__tabs { grid-row: 2; grid-column: 1; position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; margin: 0 56px 22px; gap: 24px; }
.ap-htab { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; padding: 16px 0 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; opacity: .55; transition: opacity var(--dur-med); }
.ap-htab:hover, .ap-htab.is-on { opacity: 1; }
.ap-htab i { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.ap-htab i b { display: block; width: 0; height: 100%; background: #fff; }
.ap-htab.is-on i b { animation: ap-prog 8s linear forwards; }
.ap-hero:hover .ap-htab.is-on i b, .ap-hero:focus-within .ap-htab.is-on i b { animation-play-state: paused; }
@keyframes ap-prog { to { width: 100%; } }
.ap-htab span { grid-row: span 2; font-family: var(--font-display); font-size: 14px; color: var(--color-on-dark-muted); }
.ap-htab strong { font-size: 15px; }
.ap-htab small { color: var(--color-on-dark-muted); font-size: 13px; }
.ap-htab:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }

/* Distribution art: three columns of artwork drifting, tilted, fading at the edges */
.ap-hero__art { position: relative; align-self: stretch; min-height: 460px; margin: -56px 0 -112px; }
.ap-wall { position: absolute; inset: -40px -60px -40px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: rotate(-8deg) scale(1.08);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.ap-wall__col { overflow: hidden; }
.ap-wall__run { display: flex; flex-direction: column; gap: 14px; animation: ap-up 46s linear infinite; }
.ap-wall__col--1 .ap-wall__run { animation-name: ap-down; animation-duration: 54s; }
.ap-wall__col--2 .ap-wall__run { animation-duration: 40s; }
.ap-wall__t { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.ap-wall__t img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes ap-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes ap-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.ap-chip { position: absolute; z-index: 3; display: inline-grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; padding: 10px 14px 10px 10px;
  border-radius: 14px; background: #fff; color: var(--color-text); box-shadow: 0 18px 40px rgba(0, 0, 0, .3); font-size: 13px; animation: ap-float 6s ease-in-out infinite; }
.ap-chip b { font-weight: 600; white-space: nowrap; }
.ap-chip small { grid-column: 2; color: var(--color-text-muted); font-size: 12px; }
.ap-chip .pf-ic, .ap-chip i { grid-row: span 2; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: #f2f5f5; }
.ap-chip i { display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-link-hover); }
.ap-chip i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-chip--1 { top: 16%; left: 2%; } .ap-chip--1 .pf-ic { color: #1DB954; }
.ap-chip--2 { top: 48%; right: 8%; animation-delay: -2s; }
.ap-chip--3 { bottom: 20%; left: 10%; animation-delay: -4s; } .ap-chip--3 .pf-ic { color: #FF0000; }
@keyframes ap-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Marketing art: a phone playing a Reel, two covers behind it, hearts floating up */
.ap-mkart { position: absolute; inset: 0; }
.ap-phone { position: absolute; top: 50%; left: 50%; width: 240px; aspect-ratio: 9 / 18.5; transform: translate(-50%, -50%) rotate(4deg); border: 9px solid #0c0a12; border-radius: 38px;
  background: #0c0a12; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12); z-index: 2; }
.ap-phone__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 29px; background: #222; }
.ap-phone__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); animation: ap-kb 14s ease-in-out infinite alternate; }
@keyframes ap-kb { to { transform: scale(1.18) translateY(-4%); } }
.ap-phone__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 25%, transparent 55%, rgba(0, 0, 0, .75)); }
.ap-phone__bar { position: absolute; z-index: 1; top: 12px; left: 12px; right: 12px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.ap-phone__bar b { display: block; height: 100%; width: 0; background: #fff; animation: ap-prog 8s linear infinite; }
.ap-phone__top { position: absolute; z-index: 1; top: 24px; left: 14px; font-weight: 700; font-size: 15px; }
.ap-phone__side { position: absolute; z-index: 1; right: 10px; bottom: 90px; display: flex; flex-direction: column; gap: 14px; }
.ap-phone__side i svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-phone__side i:first-child svg { fill: var(--heart); stroke: var(--heart); }
.ap-phone__foot { position: absolute; z-index: 1; left: 14px; right: 46px; bottom: 18px; display: flex; flex-direction: column; gap: 3px; }
.ap-phone__foot b { font-size: 13px; }
.ap-phone__foot small { overflow: hidden; color: var(--color-on-dark-soft); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.ap-hearts { position: absolute; z-index: 2; right: 14px; bottom: 120px; width: 30px; height: 30px; }
.ap-heart { position: absolute; bottom: 0; left: 0; opacity: 0; animation: ap-heart 5.6s ease-out infinite; animation-delay: var(--d); }
.ap-heart svg { width: 22px; height: 22px; fill: var(--heart); stroke: none; filter: drop-shadow(0 2px 6px rgba(255, 59, 107, .5)); }
@keyframes ap-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -200px) scale(1.2); } }
.ap-mkart__card { position: absolute; top: 50%; width: 190px; aspect-ratio: 1; overflow: hidden; border-radius: 22px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); background: rgba(255, 255, 255, .08); }
.ap-mkart__card img { width: 100%; height: 100%; object-fit: cover; }
.ap-mkart__card--l { left: 6%; transform: translateY(-62%) rotate(-12deg); }
.ap-mkart__card--r { right: 4%; transform: translateY(-28%) rotate(10deg); }
.ap-chip--a { top: 22%; left: 2%; } .ap-chip--a .pf-ic { color: #FF0000; }
.ap-chip--b { top: 56%; right: 3%; animation-delay: -2s; }
.ap-chip--b i { background: #f1edff; color: #6a4be0; }
.ap-chip--c { bottom: 16%; left: 14%; animation-delay: -4s; } .ap-chip--c .pf-ic { color: #E1306C; }

/* ---- Stores marquee ---- */
.ap-stores { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 34px 0 0; }
.ap-stores > p { margin: 0; color: var(--color-text-muted); font-size: 14px; text-align: center; }
.ap-stores > p strong { color: var(--color-text); }
.ap-marquee { display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ap-marquee__run { flex: none; display: flex; gap: 12px; margin: 0; padding: 4px 6px; list-style: none; animation: ap-left 60s linear infinite; }
.ap-marquee:hover .ap-marquee__run { animation-play-state: paused; }
@keyframes ap-left { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ap-store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border: 1px solid var(--ap-line); border-radius: var(--radius-pill); background: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--color-text); }
.ap-store .pf-ic { width: 22px; height: 22px; color: var(--b, var(--color-text)); }
.ap-store .pf-ic--img img, .ap-logo .pf-ic--img img { width: 100%; height: 100%; border-radius: 5px; }

/* ---- Sections and bands ---- */
.ap-sec { padding-top: 80px; scroll-margin-top: calc(var(--header-height) + 16px); }
.ap-band { position: relative; margin-top: 80px; padding: 64px 56px; border-radius: 32px; overflow: hidden; scroll-margin-top: calc(var(--header-height) + 16px); }
.ap-band--tint { background: linear-gradient(160deg, var(--teal-50) 0%, #f1f5ff 55%, #f7f1ff 100%); }
.ap-band--pink { background: radial-gradient(50% 60% at 100% 0%, rgba(255, 122, 168, .18), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(124, 92, 255, .14), transparent 60%), linear-gradient(160deg, #fff5f8, #f7f2ff 60%, #f1f7ff); }
.ap-band--dark { color: #fff; background: radial-gradient(55% 70% at 0% 0%, rgb(var(--teal-500-rgb) / .32), transparent 60%), radial-gradient(50% 60% at 100% 100%, rgba(124, 92, 255, .3), transparent 60%), linear-gradient(160deg, var(--teal-900), var(--teal-950) 55%, var(--teal-950)); }
.ap-head { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 880px; margin: 0 auto 28px; text-align: center; }
.ap-head h2 { margin: 0; font-size: var(--ap-h2); line-height: 1.3; font-weight: 600; text-wrap: balance; }
/* the home page's heading: the body font, not the display one (h1 in the hero keeps it) */
.ap[data-artist-plus] .ap-head h2, .ap[data-artist-plus] .ap-reports h2, .ap[data-artist-plus] .ap-reach h2, .ap[data-artist-plus] .ap-last h2 {
  font-family: var(--font-body); font-size: var(--ap-h2); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
/* #304 (Rohit): the three sliders (Fresh Off the Press, Albums We Distributed, Popular Artists) are the home page's
   shelves — their headings exactly the home page's (shelves.css: 19px, 600, the body font; 17px on phones) */
.ap[data-artist-plus] .ap-music .shelf__head h2 { font-family: var(--font-body); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
@media (max-width: 767px) { .ap[data-artist-plus] .ap-music .shelf__head h2 { font-size: 17px; } }
@media (max-width: 767px) { .ap { --ap-h2: 20px; --ap-h3: 17px; } }
.ap-head h2 span { color: var(--color-link-hover); }
.ap-band--pink .ap-head h2 span { background: linear-gradient(90deg, #d62976, #7c5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-band--pink .ap-head .ap-eyebrow { color: #c2185b; }
.ap-head > p:last-child:not(.ap-eyebrow) { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; text-wrap: balance; }
.ap-head--light .ap-eyebrow--light { align-self: center; }
.ap-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.ap-reveal.is-in { opacity: 1; transform: none; }

/* ---- Included with every plan: the bento ---- */
.ap-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.ap-b { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 26px; border-radius: 26px; background: #fff; box-shadow: 0 1px 0 rgb(var(--teal-950-rgb) / .04), 0 12px 30px rgb(var(--teal-950-rgb) / .06);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.ap-b:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgb(var(--teal-950-rgb) / .12); }
.ap-b h3 { margin: 0; font-size: 30px; line-height: 1.1; }
.ap-b p { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.55; }
.ap-b__k { color: var(--color-link-hover) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ap-b__big { font-family: var(--font-display); font-size: 54px; line-height: 1; letter-spacing: -.02em; color: var(--ap-ink); }
.ap-b--stores { grid-column: span 2; grid-row: span 2; justify-content: space-between; gap: 24px; padding: 32px; color: #fff;
  background: radial-gradient(70% 60% at 100% 0%, rgba(124, 92, 255, .35), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgb(var(--teal-500-rgb) / .45), transparent 60%), linear-gradient(160deg, var(--teal-900), var(--teal-950)); }
.ap-b--stores h3 { font-size: clamp(32px, 3vw, 44px); }
.ap-b--stores p { max-width: 440px; margin-top: 12px; color: var(--color-on-dark-muted); font-size: 15px; }
.ap-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ap-logo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); transition: transform var(--dur-med) var(--ease); }
.ap-logo:nth-child(odd) { transform: translateY(6px); }
.ap-b--stores:hover .ap-logo { transform: translateY(-2px); }
.ap-logo .pf-ic { width: 46%; height: 46%; color: var(--b, #111); }
.ap-split { display: flex; height: 34px; margin-top: auto; overflow: hidden; border-radius: 10px; font-size: 12px; font-weight: 700; }
.ap-split span { display: flex; align-items: center; padding: 0 10px; }
.ap-split span:first-child { color: #fff; background: linear-gradient(90deg, var(--teal-600), var(--teal-500)); }
.ap-split span:last-child { flex: 1; justify-content: center; background: #e7eeee; color: var(--tg-700); padding: 0; }   /* #309 audit: "Us" was 3.3:1 on its grey — now readable */
.ap-b--speed { background: linear-gradient(160deg, #f3efff, #fff 70%); }
.ap-b--speed .ap-b__k { color: #6a4be0 !important; }
.ap-line { display: flex; justify-content: space-between; margin: auto 0 0; padding: 22px 0 0; list-style: none; position: relative; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.ap-line::before { content: ""; position: absolute; top: 6px; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, #7c5cff, var(--teal-500)); }
.ap-line li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ap-line li::before { content: ""; position: absolute; top: -22px; width: 14px; height: 14px; border-radius: 50%; background: #7c5cff; box-shadow: 0 0 0 4px #efeaff; }
.ap-line li.is-live::before { background: #12b76a; box-shadow: 0 0 0 4px #dcfae6; animation: ap-pulse 1.8s ease-out infinite; }
.ap-line li.is-live { color: #0f8a50; }
@keyframes ap-pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .5); } 100% { box-shadow: 0 0 0 12px rgba(18, 183, 106, 0); } }
.ap-barcode { height: 52px; margin-top: auto; border-radius: 6px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 7px, transparent 7px 9px, #111 9px 10px, transparent 10px 13px, #111 13px 16px, transparent 16px 18px); opacity: .85; }
/* #301: free YouTube OAC and Content ID, as free as the codes — a channel name with its ♪ badge */
.ap-b--yt { background: linear-gradient(160deg, #fff0f0, #fff 75%); }
.ap-b--yt .ap-b__k { color: #c4101e !important; }
.ap-b--yt p b { color: var(--color-text); font-weight: 600; }
.ap-ytbadge { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: auto; padding: 8px 14px 8px 8px; border-radius: var(--radius-pill); background: #fff; box-shadow: 0 8px 20px rgba(196, 16, 30, .12); font-size: 14px; font-weight: 700; }
.ap-ytbadge .pf-ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #ffecec; color: #FF0000; }
.ap-ytbadge i { margin-left: 2px; font-style: normal; color: var(--tg-500); }
.ap-small { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ap-feat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .9); }
.ap-feat__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(140deg, var(--teal-500), var(--teal-600)); color: #fff; box-shadow: 0 8px 18px rgb(var(--teal-600-rgb) / .3); }
.ap-feat__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-feat h3 { margin: 0; font-size: 16px; line-height: 1.25; }
.ap-feat p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.45; }

/* ---- How it works ---- */
.ap-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ap-steps::before { content: ""; position: absolute; top: 40px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--teal-300) 0 8px, transparent 8px 16px); }
.ap-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px; text-align: center; }
.ap-step__ic { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 24px; color: #fff; transform: rotate(-4deg);
  background: linear-gradient(140deg, var(--teal-500), var(--teal-600)); box-shadow: 0 14px 30px rgb(var(--teal-600-rgb) / .32); transition: transform var(--dur-med) var(--ease); }
.ap-step:nth-child(2) .ap-step__ic { background: linear-gradient(140deg, #8b6dff, #6a4be0); box-shadow: 0 14px 30px rgba(106, 75, 224, .3); transform: rotate(3deg); }
.ap-step:nth-child(3) .ap-step__ic { background: linear-gradient(140deg, #ff6b9a, #e0457a); box-shadow: 0 14px 30px rgba(224, 69, 122, .3); }
.ap-step:nth-child(4) .ap-step__ic { background: linear-gradient(140deg, #fbbf24, #f59e0b); box-shadow: 0 14px 30px rgba(245, 158, 11, .3); transform: rotate(3deg); }
.ap-step:hover .ap-step__ic { transform: rotate(0) scale(1.06); }
.ap-step__ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-step__n { position: absolute; z-index: 1; top: -8px; left: calc(50% + 26px); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--ap-ink); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 3px #fff; }
.ap-step h3 { margin: 10px 0 0; font-size: 19px; }
.ap-step p { margin: 0; max-width: 240px; color: var(--color-text-muted); font-size: 14px; line-height: 1.55; }

/* ---- Reports and payouts (dark band) ---- */
.ap-reports { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.ap-reports__text { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.ap-reports h2 { margin: 0; font-size: var(--ap-h2); line-height: 1.12; }
.ap-rpts { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ap-rpts li { display: flex; gap: 14px; align-items: flex-start; }
.ap-rpts li > span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgb(var(--teal-500-rgb) / .18); color: var(--teal-300); border: 1px solid rgb(var(--teal-300-rgb) / .2); }
.ap-rpts svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-rpts strong { font-size: 16px; }
.ap-rpts p { margin: 2px 0 0; color: var(--color-on-dark-muted); font-size: 14px; line-height: 1.5; }
.ap-dash { position: relative; padding: 24px; border-radius: 26px; background: #fff; color: var(--color-text); box-shadow: 18px 18px 0 0 rgba(124, 92, 255, .38), 0 40px 80px rgba(0, 0, 0, .4); transform: rotate(-1.5deg); }
.ap-dash__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ap-dash__top small { color: var(--color-text-muted); font-size: 13px; }
.ap-dash__top strong { display: block; font-family: var(--font-display); font-size: 38px; line-height: 1.1; color: var(--ap-ink); }
.ap-dash__tag { padding: 5px 10px; border-radius: var(--radius-pill); background: #f1edff; color: #5b3fd6; font-size: 12px; font-weight: 700; }
.ap-dash__bars { display: flex; align-items: flex-end; gap: 12px; height: 160px; margin: 18px 0 14px; padding-bottom: 22px; border-bottom: 1px solid var(--ap-line); }
.ap-dash__bars span { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.ap-dash__bars b { display: block; width: 100%; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--teal-500), var(--teal-200)); transform-origin: bottom; transform: scaleY(.05); transition: transform 1s var(--ease); }
.ap-dash__bars span:last-child b { background: linear-gradient(180deg, #7c5cff, #c4b5fd); }
.ap-reports.is-in .ap-dash__bars b { transform: scaleY(1); }
.ap-reports.is-in .ap-dash__bars span:nth-child(2) b { transition-delay: .08s; } .ap-reports.is-in .ap-dash__bars span:nth-child(3) b { transition-delay: .16s; }
.ap-reports.is-in .ap-dash__bars span:nth-child(4) b { transition-delay: .24s; } .ap-reports.is-in .ap-dash__bars span:nth-child(5) b { transition-delay: .32s; }
.ap-reports.is-in .ap-dash__bars span:nth-child(6) b { transition-delay: .4s; }
.ap-dash__bars small { position: absolute; bottom: -22px; left: 0; right: 0; color: var(--color-text-subtle); font-size: 11px; text-align: center; }
.ap-dash__split { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ap-dash__split li { display: grid; grid-template-columns: 22px 110px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; }
.ap-dash__split .pf-ic { width: 20px; height: 20px; }
.ap-dash__split li:nth-child(1) .pf-ic { color: #1DB954; } .ap-dash__split li:nth-child(3) .pf-ic { color: #FF0000; } .ap-dash__split li:nth-child(4) .pf-ic { color: #FA243C; }
.ap-dash__split i { height: 8px; border-radius: 8px; background: var(--tg-50); overflow: hidden; }
.ap-dash__split i b { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--teal-600), #7c5cff); }
.ap-dash__split em { font-style: normal; font-weight: 700; text-align: right; }
.ap-dash__pay { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--ap-ink); color: #fff; font-size: 13px; }
.ap-dash__pay span { display: inline-flex; align-items: center; gap: 8px; color: var(--color-on-dark-soft); }
.ap-dash__pay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.ap-dash__pay b { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--teal-500); font-size: 13px; }

/* ---- Plans ---- */
/* #301 (Rohit): every card's price on one line — the cards share their rows (subgrid): who it's for and the name, the price,
   what sits under the price (the Release Pack's sizes; a line for the others), the button, what's included, a hint */
.ap-plans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; align-items: stretch; padding-top: 10px; }
.ap-plan { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 12px; align-content: start; margin-bottom: 16px; padding: 28px 24px 26px; border: 1px solid var(--ap-line); border-radius: 24px; background: #fff;
  box-shadow: 0 12px 30px rgb(var(--teal-950-rgb) / .05); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.ap-plan__top { display: flex; flex-direction: column; gap: 10px; }
.ap-plan__price { align-self: end; }
.ap-plan__under { display: flex; flex-direction: column; gap: 8px; }
.ap-plan__note { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.ap-plan.is-pop .ap-plan__note { color: var(--color-on-dark-muted); }
.ap-plan:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgb(var(--teal-950-rgb) / .1); }
.ap-plan.is-flash { animation: ap-flash 1.4s var(--ease); }
@keyframes ap-flash { 0%, 100% { box-shadow: 0 24px 50px rgb(var(--teal-950-rgb) / .28); } 30% { box-shadow: 0 0 0 6px rgb(var(--teal-500-rgb) / .55), 0 24px 50px rgb(var(--teal-950-rgb) / .28); } }
.ap-plan__for { align-self: flex-start; margin: 0; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--ap-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 600; }
.ap-plan h3 { margin: 6px 0 0; font-size: 26px; }
.ap-plan__line { margin: 0; min-height: 44px; color: var(--color-text-muted); font-size: 14px; line-height: 1.55; }
.ap-plan__hint { align-self: end; margin: 0; padding: 12px 14px; border-radius: 14px; background: #f6f3ff; color: #4c3a99; font-size: 13px; line-height: 1.5; }
.ap-plan__hint button { padding: 0; border: 0; background: none; color: #5b3fd6; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.ap-price { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.ap-price__was { display: flex; align-items: center; gap: 8px; min-height: 22px; color: var(--color-text-subtle); font-size: 15px; }
.ap-price__was em { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 700; -webkit-text-fill-color: currentColor; }
.ap-price__now { display: flex; align-items: baseline; gap: 8px; }
.ap-price__now strong { font-family: var(--font-display); font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.ap-price__now small { color: var(--color-text-muted); font-size: 14px; }
.ap-plan__cta { width: 100%; min-height: 46px; margin: 0; border-radius: var(--radius-pill); font-weight: 600; }
.ap-pts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 0 0; border-top: 1px dashed var(--ap-line); list-style: none; }
.ap-pts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; }
.ap-pts svg { width: 18px; height: 18px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--color-primary-soft); fill: none; stroke: var(--color-primary-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ap-pack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--ap-soft); }   /* 3 · 5 · 7 · 10 in one row */
.ap-pack__o { display: flex; flex-direction: column; align-items: center; padding: 7px 0 6px; border: 0; border-radius: 10px; background: none; color: var(--color-text); cursor: pointer; transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.ap-pack__o strong { font-size: 17px; line-height: 1.2; }
.ap-pack__o small { color: var(--ok); font-size: 11px; font-weight: 700; }
.ap-pack__o:hover { background: rgba(255, 255, 255, .7); }
.ap-pack__o.is-on { background: #fff; box-shadow: 0 2px 8px rgb(var(--teal-950-rgb) / .12), inset 0 0 0 1.5px var(--color-primary); }
.ap-pack__o:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ap-plan.is-pop { border-color: transparent; color: #fff; background: radial-gradient(90% 60% at 100% 0%, rgb(var(--teal-500-rgb) / .35), transparent 60%), linear-gradient(165deg, var(--teal-900), var(--teal-950));
  box-shadow: 0 24px 50px rgb(var(--teal-950-rgb) / .28); transform: translateY(-10px); }
.ap-plan.is-pop:hover { transform: translateY(-14px); }
.ap-plan.is-pop .ap-plan__for { background: rgb(var(--teal-500-rgb) / .2); color: var(--teal-300); }
.ap-plan.is-pop .ap-plan__line, .ap-plan.is-pop .ap-price__now small { color: var(--color-on-dark-muted); }
.ap-plan.is-pop .ap-price__was { color: var(--color-on-dark-subtle); }
.ap-plan.is-pop .ap-price__was em { background: rgba(110, 231, 160, .16); color: #7ee8a8; }
.ap-plan.is-pop .ap-pts { border-top-color: rgba(255, 255, 255, .16); }
.ap-plan.is-pop .ap-pts svg { background: rgb(var(--teal-500-rgb) / .25); stroke: var(--teal-300); }
.ap-plan.is-pop .ap-plan__cta { box-shadow: 0 10px 26px rgb(var(--teal-500-rgb) / .45); }
.ap-plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap;
  background: linear-gradient(90deg, var(--teal-500), #7c5cff); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 8px 20px rgba(124, 92, 255, .35); }
.ap-plan--max .ap-plan__for { background: #f1edff; color: #5b3fd6; }
.ap-compare { margin-top: 26px; border: 1px solid var(--ap-line); border-radius: 20px; background: #fff; }
.ap-compare summary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; cursor: pointer; list-style: none; color: var(--color-link-hover); font-weight: 600; }
.ap-compare summary::-webkit-details-marker { display: none; }
.ap-compare summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur-med); }
.ap-compare[open] summary svg { transform: rotate(180deg); }
.ap-compare__wrap { overflow-x: auto; padding: 0 16px 16px; }
/* #301: a fixed layout — the feature column a third, the four plans equal — and every tick in the middle of its column */
.ap-compare table { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.ap-compare__k { width: 32%; }
.ap-compare th, .ap-compare td { padding: 12px 14px; border-top: 1px solid var(--ap-line); text-align: center; vertical-align: middle; }
.ap-compare thead th { border-top: 0; font-family: var(--font-display); font-size: 16px; }
.ap-compare tbody th { text-align: left; font-weight: 500; color: var(--color-text-muted); }
.ap-compare td:nth-child(4), .ap-compare thead th:nth-child(4) { background: var(--ap-soft); }
.ap-y { display: inline-block; width: 18px; height: 18px; fill: none; stroke: var(--color-primary-strong); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ap-n { color: var(--tg-300); }
.ap-fine { max-width: 820px; margin: 18px auto 0; color: var(--color-text-subtle); font-size: 13px; line-height: 1.6; text-align: center; }
.ap-fine a { color: var(--color-text-muted); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Marketing (pink band) ---- */
.ap-mk__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ap-mkc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 22px; border-radius: 24px; background: #fff;
  box-shadow: 0 12px 30px rgba(80, 30, 110, .07); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.ap-mkc::before { content: ""; position: absolute; top: -60px; right: -60px; width: 160px; height: 160px; border-radius: 50%; background: var(--b); opacity: .08; transition: transform .5s var(--ease); }
.ap-mkc:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(80, 30, 110, .14); }
.ap-mkc:hover::before { transform: scale(1.25); }
.ap-mkc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ap-mkc__ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: color-mix(in srgb, var(--b) 12%, #fff); color: var(--b); }
.ap-mkc__ic .pf-ic { width: 25px; height: 25px; color: var(--b); }
.ap-mkc__ic > svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ap-mkc__from { display: flex; flex-direction: column; align-items: flex-end; margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.3; text-align: right; }
.ap-mkc__from strong { color: var(--color-text); font-family: var(--font-display); font-size: 24px; line-height: 1.15; }
.ap-mkc h3 { margin: 0; font-size: var(--ap-h3); }
.ap-mkc__line { margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }
.ap-mkc .ap-pts { margin-bottom: 12px; }
.ap-mkc .ap-pts svg { background: color-mix(in srgb, var(--b) 12%, #fff); stroke: var(--b); }
.ap-mkc__cta { align-self: flex-start; margin-top: auto; border-radius: var(--radius-pill); gap: 6px; }
.ap-mkc:hover .ap-mkc__cta.btn--ghost { border-color: var(--b); color: var(--b); }
.ap-mkc.is-wide { grid-column: span 2; color: #fff; background: radial-gradient(70% 90% at 100% 0%, rgba(124, 92, 255, .55), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgb(var(--teal-500-rgb) / .6), transparent 60%), linear-gradient(140deg, var(--teal-900), #2b0f4d); }
.ap-mkc.is-wide::before { background: #fff; opacity: .1; width: 260px; height: 260px; top: -90px; right: -70px; }
.ap-mkc.is-wide.ap-mkc--ig { background: radial-gradient(80% 90% at 0% 100%, #feda75 0%, transparent 55%), linear-gradient(135deg, #4f5bd5 0%, #962fbf 35%, #d62976 70%, #fa7e1e 100%); }
.ap-mkc.is-wide .ap-mkc__free { background: rgba(255, 255, 255, .2); color: #fff; }
.ap-mkc.is-wide .ap-mkc__ic { background: rgba(255, 255, 255, .2); }
.ap-mkc.is-wide .ap-mkc__ic .pf-ic { color: #fff; }
.ap-mkc.is-wide .ap-mkc__from, .ap-mkc.is-wide .ap-mkc__line { color: var(--color-on-dark-soft); }
.ap-mkc.is-wide .ap-mkc__from strong { color: #fff; font-size: 28px; }
.ap-mkc.is-wide h3 { font-size: var(--ap-h3); }                     /* #302: card titles at the home page's heading size */
.ap-mkc.is-wide .ap-pts { display: grid; grid-template-columns: 1fr 1fr; border-top-color: rgba(255, 255, 255, .3); }
.ap-mkc.is-wide .ap-pts svg { background: rgba(255, 255, 255, .22); stroke: #fff; }
.ap-mkc.is-wide:hover { box-shadow: 0 22px 46px rgba(150, 47, 191, .3); }
.ap-mkc__in { display: flex; gap: 12px; align-items: flex-start; margin: 2px 0 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); }
.ap-mkc__in-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; color: #d62976; }
.ap-mkc__in-ic svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.ap-mkc__in strong { display: block; font-size: 15px; }
.ap-mkc__in strong small { margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .22); font-size: 12px; font-weight: 600; }
.ap-mkc__in p { margin: 4px 0 0; color: var(--color-on-dark-soft); font-size: 14px; line-height: 1.5; }
/* #301: every service at its price — a row each: what it is, small what you get, the price on the right */
.ap-mkc h3 small { margin-left: 6px; padding: 2px 9px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .18); font-family: var(--font-body); font-size: 12px; font-weight: 600; vertical-align: middle; }
.ap-prices { display: flex; flex-direction: column; margin: 6px 0 12px; padding: 0; list-style: none; }
.ap-prices li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ap-line); }
.ap-prices li span { display: flex; flex-direction: column; min-width: 0; }
.ap-prices strong { font-size: 14px; }
.ap-prices small { color: var(--color-text-muted); font-size: 12px; line-height: 1.4; }
.ap-prices b { flex: none; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-prices b s { margin-left: 6px; color: var(--color-text-subtle); font-size: 12px; font-weight: 500; }
.ap-mkc.is-wide .ap-prices li { border-top-color: rgba(255, 255, 255, .18); }
.ap-mkc.is-wide .ap-prices small, .ap-mkc.is-wide .ap-prices b s { color: var(--color-on-dark-muted); }
.ap-mkc__fine { margin: -4px 0 12px; color: var(--color-text-subtle); font-size: 12px; }
.ap-mkc__free { padding: 5px 11px; border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); font-size: 12px; font-weight: 700; }
.ap-mkc--planned { grid-column: 1 / -1; --b: #7c5cff; }
.ap-planned { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 16px; }
.ap-planned__c { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--b) 6%, #fff); }
.ap-planned__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--b) 14%, #fff); color: var(--b); }
.ap-planned__ic .pf-ic { width: 20px; height: 20px; color: var(--b); }
.ap-planned__ic > svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-planned__c strong { display: block; font-size: 14px; }
.ap-planned__c small { display: block; color: var(--b); font-size: 12px; font-weight: 600; }
.ap-planned__c p { margin: 6px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }

/* #301: the AI Plan Builder — the questions on the left, the plan (on dark) on the right */
.ap-ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: 16px; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 16px 40px rgba(80, 30, 110, .1); scroll-margin-top: calc(var(--header-height) + 16px); }
.ap-ai__ask { display: flex; flex-direction: column; gap: 10px; padding: 30px; }
.ap-ai__k { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #6a4be0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ap-ai__k svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.ap-ai__k--light { color: #c9b8ff; }
.ap-ai__q--first { margin-top: 0; }
.ap-plansec .ap-ai { margin-top: 0; }                                 /* #303: the AI Plan Builder, its own section under its heading */
.ap-ai__q { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.ap-ai__q b { font-family: var(--font-display); font-size: 18px; color: var(--ap-ink); font-variant-numeric: tabular-nums; }
.ap-ai__goals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-ai__goal { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--ap-line); border-radius: 14px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-text); text-align: left; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.ap-ai__goal svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #6a4be0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-ai__goal:hover { border-color: #c9b8ff; }
.ap-ai__goal.is-on { border-color: #7c5cff; background: #f6f3ff; }
.ap-ai__range { width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 50%; }
.ap-ai__range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, #7c5cff 0 var(--p), #e8e3f7 var(--p) 100%); }
.ap-ai__range::-moz-range-track { height: 6px; border-radius: 6px; background: #e8e3f7; }
.ap-ai__range::-moz-range-progress { height: 6px; border-radius: 6px; background: #7c5cff; }
.ap-ai__range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; border: 3px solid #fff; border-radius: 50%; background: #7c5cff; box-shadow: 0 2px 6px rgba(60, 30, 120, .35); -webkit-appearance: none; }
.ap-ai__range::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: #7c5cff; }
.ap-ai__ticks { display: flex; justify-content: space-between; color: var(--color-text-subtle); font-size: 12px; font-weight: 600; }
.ap-ai__where { align-self: flex-start; }
.ap-ai__plan { display: flex; flex-direction: column; gap: 12px; padding: 30px; color: #fff; background: radial-gradient(70% 70% at 100% 0%, rgba(124, 92, 255, .45), transparent 60%), radial-gradient(60% 60% at 0% 100%, rgb(var(--teal-500-rgb) / .35), transparent 60%), linear-gradient(160deg, #1b0a33, var(--teal-950)); }
.ap-ai__items { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ap-ai__items li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.ap-ai__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; color: #6a4be0; }
.ap-ai__ic .pf-ic { width: 20px; height: 20px; color: #FF0000; }
.ap-ai__ic > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-ai__items strong { display: block; font-size: 14px; }
.ap-ai__items small { display: block; color: var(--color-on-dark-muted); font-size: 12px; }
.ap-ai__items em { display: block; margin-top: 4px; color: #c9b8ff; font-size: 12px; font-style: normal; }
.ap-ai__items b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-ai__total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); font-weight: 700; }
.ap-ai__total small { margin-left: 6px; color: var(--color-on-dark-muted); font-size: 12px; font-weight: 500; }
.ap-ai__total strong { font-family: var(--font-display); font-size: 30px; }
.ap-ai__go { min-height: 48px; border-radius: var(--radius-pill); gap: 8px; }
.ap-ai__fine { margin: 0; color: var(--color-on-dark-muted); font-size: 12px; text-align: center; }
.ap-ai__fine button { padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ap-ai__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; text-align: center; }
.ap-ai__empty svg { width: 28px; height: 28px; fill: #c9b8ff; }
.ap-ai__empty p { margin: 0; color: var(--color-on-dark-muted); font-size: 14px; }
.ap-ai__wait .sk { opacity: .25; }
/* Better rates and free releases */
.ap-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ap-perk { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 12px 30px rgba(80, 30, 110, .07); }
.ap-perk__ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(140deg, #8b6dff, #6a4be0); color: #fff; }
.ap-perk:last-child .ap-perk__ic { background: linear-gradient(140deg, var(--teal-500), var(--teal-600)); }
.ap-perk__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-perk h3 { margin: 0; font-size: 19px; }
.ap-perk p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }
.ap-perk__steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ap-perk__steps li { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--ap-soft); }
.ap-perk__steps strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.ap-perk__steps small { color: var(--color-text-muted); font-size: 12px; }

/* ---- The big numbers (dark band) ---- */
.ap-nums-band { padding-bottom: 56px; }
.ap-nums { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ap-nums li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 10px; border-left: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.ap-nums li:first-child { border-left: 0; }
.ap-nums strong { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 50px); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(180deg, #fff, var(--teal-200)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-nums span { color: var(--color-on-dark-muted); font-size: 14px; }

/* ---- The music: posters, albums with tracks, artists ---- */
.ap-music { display: flex; flex-direction: column; gap: var(--section-gap); padding-top: 72px; }
.ap-shelf__sub { color: var(--color-text-muted); font-size: 14px; }
.shelf__track.ap-rels { grid-auto-columns: 232px; gap: 18px; padding-bottom: 6px; }
.ap-rel { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 22px; background: var(--teal-950); color: #fff; cursor: pointer; scroll-snap-align: start;
  box-shadow: 0 12px 28px rgb(var(--teal-950-rgb) / .16); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.ap-rel:hover { transform: translateY(-5px); box-shadow: 0 24px 44px rgb(var(--teal-950-rgb) / .26); }
.ap-rel__art, .ap-rel__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-rel__art img { transition: transform .7s var(--ease); }
.ap-rel:hover .ap-rel__art img { transform: scale(1.08); }
.ap-rel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(4, 16, 18, .55) 62%, rgba(4, 16, 18, .95)); pointer-events: none; }
.ap-rel__play { position: absolute; z-index: 2; top: 14px; right: 14px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary); color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3); opacity: 0; transform: scale(.8); transition: opacity var(--dur-med), transform var(--dur-med) var(--ease); }
.ap-rel__play svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.ap-rel:hover .ap-rel__play, .ap-rel:focus-within .ap-rel__play { opacity: 1; transform: none; }
.ap-rel__foot { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; display: flex; flex-direction: column; gap: 3px; }
.ap-rel__t { overflow: hidden; color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.ap-rel__foot small { overflow: hidden; color: var(--color-on-dark-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
/* #301 (Rohit): titles turn teal on hover; artists are links — underlined, teal on hover — on every card here */
.ap-rel__t:hover, .ap-alb__t:hover, .ap-trk__name:hover { color: var(--color-link); }
.ap-artists a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 2px; }
.ap-artists a:hover { color: var(--color-link); text-decoration-color: currentColor; }
.ap-rel__st { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ap-rel__st > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .14); }
.ap-rel__st .pf-ic { width: 15px; height: 15px; color: #fff; }
.ap-rel__st em { padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14); color: #fff; font-size: 12px; font-style: normal; font-weight: 600; }
/* Albums: two at a time */
.shelf__track.ap-albs { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
.ap-alb { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 22px; border-radius: 26px; color: #fff; scroll-snap-align: start; background: #0e1416; }
.ap-alb__bg { position: absolute; inset: 0; z-index: -1; background: var(--art) center / cover; transform: scale(1.6); opacity: .4; }
.ap-alb::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(8, 12, 14, .62), rgba(8, 12, 14, .9) 42%, rgba(8, 12, 14, .95)); }
.ap-alb__side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-alb__art { position: relative; display: block; width: 100%; aspect-ratio: 1; margin-bottom: 12px; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .08); cursor: pointer; box-shadow: 0 18px 36px rgba(0, 0, 0, .45); }
.ap-alb__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ap-alb__art span { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); transition: transform var(--dur-med) var(--ease); }
.ap-alb__art span svg { width: 17px; height: 17px; margin-left: 2px; fill: currentColor; }
.ap-alb__art:hover img { transform: scale(1.06); }
.ap-alb__art:hover span { transform: scale(1.1); }
.ap-alb__k { margin: 0; color: var(--teal-300); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ap-alb__t { overflow: hidden; color: #fff; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ap-alb__side small { color: var(--color-on-dark-muted); font-size: 13px; }
.ap-alb__main { display: flex; flex-direction: column; min-width: 0; }
.ap-alb__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ap-trk { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background var(--dur-fast); }
.ap-trk:hover { background: rgba(255, 255, 255, .1); }
.ap-trk__n, .ap-trk__p { grid-column: 1; grid-row: 1; color: var(--color-on-dark-subtle); font-size: 13px; text-align: center; }
.ap-trk__p { display: none; color: var(--teal-300); }
.ap-trk__p svg { width: 14px; height: 14px; fill: currentColor; }
.ap-trk:hover .ap-trk__n { display: none; }
.ap-trk:hover .ap-trk__p { display: block; }
.ap-trk__t { display: flex; flex-direction: column; min-width: 0; }
.ap-trk__t .ap-trk__name, .ap-trk__t small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ap-trk__name { align-self: flex-start; max-width: 100%; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.ap-trk__t small { color: var(--color-on-dark-muted); font-size: 12px; }
.ap-trk em { color: var(--color-on-dark-subtle); font-size: 13px; font-style: normal; font-variant-numeric: tabular-nums; }
/* #301: Open Album — a bordered, see-through button (the page's glass button, as Load More is elsewhere) */
.btn.ap-alb__all { align-self: flex-start; gap: 6px; margin: auto 0 0 10px; border-radius: var(--radius-pill); }
.ap-alb__main .ap-alb__list { margin-bottom: 14px; }
.ap-alb__all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.ap-alb__all:hover svg { transform: translateX(3px); }

/* ---- Labels: a wall of logos in two lanes (tint band) ---- */
.ap-labels { display: flex; flex-direction: column; gap: 14px; }
.ap-labels .ap-head { margin-bottom: 18px; }
.ap-lane .ap-marquee__run { gap: 16px; animation-duration: 70s; }
.ap-lane--rev .ap-marquee__run { animation-direction: reverse; }
.ap-lane li a { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 116px; color: var(--color-text); text-decoration: none; }
.ap-lane img { width: 96px; height: 96px; border-radius: 24px; object-fit: cover; background: #fff; box-shadow: 0 10px 24px rgb(var(--teal-950-rgb) / .1); transition: transform var(--dur-med) var(--ease); }
.ap-lane li a:hover img { transform: translateY(-4px) scale(1.04); }
.ap-lane span { max-width: 100%; overflow: hidden; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }

/* ---- Talk to a real person (#174): call / call back, and a question ---- */
.ap-reach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; margin-top: 80px; padding: 44px 48px; border-radius: 32px;
  background: radial-gradient(50% 80% at 100% 0%, rgba(251, 146, 60, .18), transparent 60%), linear-gradient(150deg, #fff7ef, #fdf2f8 70%); }
.ap-reach h2 { margin: 8px 0 10px; font-size: var(--ap-h2); line-height: 1.12; }
.ap-reach__text p:last-child { margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.6; }
.ap-reach .ap-eyebrow { color: #c2410c; }
.ap-reach__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ap-reach__o { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 20px; border: 0; border-radius: 22px; background: #fff; color: var(--color-text);
  text-align: left; cursor: pointer; box-shadow: 0 12px 30px rgba(120, 60, 20, .08); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.ap-reach__o:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(120, 60, 20, .14); }
.ap-reach__o span { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: linear-gradient(140deg, #fb923c, #f97316); box-shadow: 0 10px 22px rgba(249, 115, 22, .3); }
.ap-reach__o:last-child span { background: linear-gradient(140deg, var(--teal-500), var(--teal-600)); box-shadow: 0 10px 22px rgb(var(--teal-600-rgb) / .3); }
.ap-reach__o svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-reach__o strong { font-size: 16px; }
.ap-reach__o small { color: var(--color-text-muted); font-size: 13px; }
.ap-reach__o:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 1023px) { .ap-reach { grid-template-columns: minmax(0, 1fr); padding: 32px; } }
@media (max-width: 767px) { .ap-reach { margin-top: 56px; padding: 26px 18px; border-radius: 24px; } .ap-reach__opts { grid-template-columns: minmax(0, 1fr); } }

/* ---- FAQ ---- */
.ap-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; max-width: 1080px; margin: 0 auto; }
.ap-q { border: 1px solid var(--ap-line); border-radius: 16px; background: #fff; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ap-q[open] { border-color: var(--teal-200); box-shadow: 0 10px 26px rgb(var(--teal-950-rgb) / .06); }
.ap-q summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; }
.ap-q summary::-webkit-details-marker { display: none; }
.ap-q summary span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ap-soft); color: var(--color-link-hover); transition: transform var(--dur-med) var(--ease), background var(--dur-fast); }
.ap-q summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ap-q[open] summary span { transform: rotate(45deg); background: var(--color-primary); color: #fff; }
.ap-q p { margin: 0; padding: 0 20px 18px; color: var(--color-text-muted); font-size: 14px; line-height: 1.65; }

/* ---- Last call ---- */
.ap-last { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 80px; padding: 48px 52px; border-radius: 32px; color: #fff;
  background: radial-gradient(60% 120% at 100% 0%, rgba(255, 77, 141, .35), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgb(var(--teal-500-rgb) / .5), transparent 60%), linear-gradient(135deg, #2b0f4d, var(--teal-900)); }
.ap-last h2 { margin: 0 0 8px; font-size: var(--ap-h2); line-height: 1.12; }
.ap-last p { margin: 0; max-width: 560px; color: var(--color-on-dark-muted); font-size: 15px; line-height: 1.6; }
.ap-last__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- The request dialog ---- */
.ap-ask { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ap-ask__what { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--color-primary-soft); }
.ap-ask__what strong { font-size: 16px; color: var(--color-text); }
.ap-ask__what span { color: var(--color-link-hover); font-size: 14px; font-weight: 600; }
.ap-ask__l { font-size: 14px; font-weight: 600; color: var(--color-text); }
.ap-ask__note { margin: 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }

/* ---- Smaller screens ---- */
@media (max-width: 1279px) {
  .ap-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-b--stores { grid-row: auto; }
  .ap-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .ap-plan.is-pop { transform: none; }
  .ap-plan.is-pop:hover { transform: translateY(-4px); }
  .ap-mk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-planned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .ap-nums li:nth-child(4) { border-left: 0; }
  .ap-reports { grid-template-columns: minmax(0, 1fr); }
  .shelf__track.ap-albs { grid-auto-columns: 78%; }
}
@media (max-width: 1023px) {
  .ap-slide { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 40px 32px 104px; }
  .ap-hero__art { min-height: 320px; margin: 8px -32px -104px; }
  .ap-wall { inset: -20px -40px -40px -40px; grid-template-columns: repeat(4, 1fr); }
  .ap-hero__tabs { margin: 0 32px 18px; }
  .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .ap-steps::before { display: none; }
  .ap-band { padding: 48px 32px; }
  .ap-ai { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ap-slide { padding: 28px 20px 96px; }
  .ap-hero { border-radius: 22px; }
  /* #313 (phone review): the collage used to end on a hard horizontal cut right above the two tabs, slicing the
     photographs through the middle. It now dissolves into the slide's own colour, so the tabs sit on a fade. */
  .ap-hero__art { margin: 4px -20px 0; min-height: 340px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .35) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, .35) 86%, transparent 100%); }
  /* the stores marquee: 8% of 390px is 31px, too short to hide a 150px pill, so a card sat half-cut at each edge */
  .ap-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
  .ap-mkart__card--r { right: -6%; }
  .ap-chip--b { right: 4%; top: 62%; }
  .ap-hero__tabs { margin: 0 20px 14px; gap: 14px; }
  .ap-htab small { display: none; }
  .ap-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .ap-figs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ap-chip--3, .ap-chip--c, .ap-mkart__card--l { display: none; }
  .ap-phone { width: 150px; border-width: 6px; border-radius: 26px; }
  .ap-phone__screen { border-radius: 20px; }
  .ap-mkart__card { width: 130px; }
  .ap-sec { padding-top: 56px; }
  .ap-band { margin-top: 56px; padding: 40px 18px; border-radius: 24px; }
  .ap-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .ap-b--stores { grid-column: auto; }
  .ap-b { padding: 22px; }
  .ap-b__big { font-size: 46px; }
  .ap-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ap-small { grid-template-columns: minmax(0, 1fr); }
  .ap-faq__list { grid-template-columns: minmax(0, 1fr); }
  /* Plans: a row to swipe, the next card peeking in (each card its own column again) */
  .ap-plans__grid { display: flex; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 18px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; align-items: stretch; }
  .ap-plans__grid::-webkit-scrollbar { display: none; }
  .ap-plan { display: flex; flex-direction: column; gap: 12px; flex: 0 0 84%; margin-bottom: 0; scroll-snap-align: start; }
  .ap-plan__hint { margin-top: auto; }
  .ap-plan__price, .ap-plan__hint { align-self: stretch; }     /* a column now: "end" would push them right */
  /* Marketing: one service a row (#301 — each has its prices to read) */
  .ap-mk__grid { display: flex; flex-direction: column; gap: 12px; }
  .ap-plan:hover, .ap-mkc:hover, .ap-plan.is-pop:hover { transform: none; }
  .ap-mkc { padding: 20px 18px; }
  .ap-mkc.is-wide { grid-column: auto; }
  .ap-mkc.is-wide .ap-pts { grid-template-columns: minmax(0, 1fr); }
  .ap-ai__ask, .ap-ai__plan { padding: 22px 18px; }
  .ap-ai__goals { grid-template-columns: minmax(0, 1fr); }
  .ap-perks { grid-template-columns: minmax(0, 1fr); }
  .ap-perk { padding: 20px 18px; }
  .ap-steps { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .ap-step { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 0; text-align: left; }
  .ap-step__ic { grid-row: span 2; width: 60px; height: 60px; border-radius: 18px; }
  .ap-step__ic svg { width: 24px; height: 24px; }
  .ap-step__n { top: -6px; left: 44px; width: 22px; height: 22px; font-size: 11px; }
  .ap-step h3 { margin: 0; align-self: end; font-size: 16px; }
  .ap-step p { align-self: start; max-width: none; font-size: 14px; }
  .ap-dash { transform: none; padding: 18px; }
  .ap-dash__split li { grid-template-columns: 20px 92px minmax(0, 1fr) 36px; }
  .ap-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-nums li:nth-child(odd) { border-left: 0; }
  .ap-nums li:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, .12); }
  .shelf__track.ap-rels { grid-auto-columns: 62%; }
  .shelf__track.ap-albs { grid-auto-columns: 90%; }
  .ap-alb { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .ap-alb__side { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .ap-alb__art { grid-row: span 3; margin: 0; }
  .ap-last { padding: 32px 22px; margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-wall__run, .ap-marquee__run, .ap-chip, .ap-heart, .ap-phone__screen > img, .ap-phone__bar b, .ap-line li.is-live::before { animation: none; }
  .ap-htab.is-on i b { animation: none; width: 100%; }
  .ap-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Phones (#313, Rohit's mobile review): no narrow text columns. Where a row holds an icon or a price beside its
   words, the words get the whole width on the next line — the icon and the title (or the price) share the first line. */
@media (max-width: 480px) {
  /* the hero's two buttons stack, full width (a long label never squeezes the text beside it) */
  .ap-hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .ap-hero__text { min-width: 0; }
  /* Starter Kit prices: name and price on one line, the description and the promise under them, full width */
  .ap-prices li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline; }
  .ap-prices li > span { display: contents; }
  .ap-prices li strong { grid-column: 1; grid-row: 1; }
  .ap-prices li b { grid-column: 2; grid-row: 1; }
  .ap-prices li small { grid-column: 1 / -1; grid-row: 2; }
  .ap-prices li .ap-promise { grid-column: 1 / -1; grid-row: 3; }
  .ap-prices li .ap-promise + .ap-promise { grid-row: 4; }
  /* Perks ("Better rates as you grow", "Marketing earns free releases"): icon and title side by side, the rest under */
  .ap-perk { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; }
  .ap-perk__ic { width: 44px; height: 44px; border-radius: 13px; }
  .ap-perk > div { display: contents; }
  .ap-perk h3 { grid-column: 2; grid-row: 1; font-size: 18px; }
  .ap-perk p { grid-column: 1 / -1; grid-row: 2; margin: 4px 0 0; }
  .ap-perk .ap-perk__steps { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; }
  /* the sliders' heads: the title and the arrows on one line, the line about it under them */
  .ap-music .shelf__head { flex-wrap: wrap; row-gap: 2px; }
  .ap-music .shelf__head h2 { flex: 1 1 auto; }
  .ap-music .shelf__head .ap-shelf__sub { flex: 1 1 100%; order: 3; }
  /* the marketing cards' top line: the price block never pushes the icon off */
  .ap-mkc__top { flex-wrap: wrap; }
  .ap-mkc__from strong { font-size: 22px; }
  /* the "talk to us" options and the four steps keep the icon beside the title only */
  .ap-reach__o { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .ap-reach__o span { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
  /* the hero heading scales with the screen: its longest word ("Everywhere.") must fit the column */
  .ap-hero h1, .ap-hero .ap-hero__h1 { font-size: clamp(28px, 10.5vw, 36px); overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  /* the sample report's payout row: the button under the words, full width */
  .ap-dash__pay { flex-wrap: wrap; }
  .ap-dash__pay b { flex: 1 1 100%; text-align: center; }
  /* the AI plan's lines: icon and title first, the details and the price under them in the same column */
  .ap-ai__items li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 2px; }
  .ap-ai__items li > div { display: contents; }
  .ap-ai__items li strong { grid-column: 2; grid-row: 1; }
  .ap-ai__items li small { grid-column: 2; grid-row: 2; }
  .ap-ai__items li em { grid-column: 2; grid-row: 3; }
  .ap-ai__items li b { grid-column: 2; grid-row: 4; margin-top: 4px; }
}
/* The hero never grows past its box (#313): its one column is bounded, so a wide decorative art column (the phone
   mock-ups with fixed widths) can't push the slide wider than the hero and clip the words on narrow screens */
.ap-hero { grid-template-columns: minmax(0, 1fr); }
.ap-slide, .ap-hero__text, .ap-hero__art { min-width: 0; }

/* ---- privileges.css ---- */
/* =====================================================================
   Privileges (decision #174): Creator Studio → Distribution → Privileges (privileges.js), and the star that shows
   a privilege in force — in the account menu and on the header photo.
   ===================================================================== */
/* The star */
.plus-pill { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 6px; padding: 3px 10px 3px 7px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--warn-soft), #ffe7b3); color: var(--warn-text); font-size: 12px; font-weight: 700; text-decoration: none; }
.plus-pill[hidden] { display: none; }
.plus-pill svg { width: 13px; height: 13px; fill: var(--warn); stroke: none; }
.plus-pill:hover { background: linear-gradient(90deg, #ffefc2, #ffdd91); }
.user-menu__who > span { display: flex; flex-direction: column; }
body[data-plus] .app-header__profile .avatar { position: relative; overflow: visible; }
body[data-plus] .app-header__profile .avatar::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%;
  background: var(--warn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11.5 2.8a.6.6 0 0 1 1 0l2.6 5.3 5.8.8a.6.6 0 0 1 .3 1l-4.2 4.1 1 5.8a.6.6 0 0 1-.8.6L12 17.7l-5.2 2.7a.6.6 0 0 1-.8-.6l1-5.8-4.2-4.1a.6.6 0 0 1 .3-1l5.8-.8Z'/%3E%3C/svg%3E") center / 9px no-repeat; }
body[data-plus] .app-header__profile .avatar img { border-radius: 50%; }

/* The page */
.pv { display: flex; flex-direction: column; gap: 24px; }
/* The plan card: the site's light teal (the page banner's), the plan told by its star pill; Featured / Lifetime in soft gold (var(--teal-700)) */
.pv-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 30px 32px; border-radius: var(--card-radius); color: var(--card-ink);
  background: linear-gradient(120deg, var(--teal-50) 0%, var(--teal-100) 45%, var(--teal-200) 100%); }
.pv-card::after { content: ""; position: absolute; top: -70px; right: -50px; width: 260px; height: 260px; opacity: .1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23008c8e' d='M11.5 2.8a.6.6 0 0 1 1 0l2.6 5.3 5.8.8a.6.6 0 0 1 .3 1l-4.2 4.1 1 5.8a.6.6 0 0 1-.8.6L12 17.7l-5.2 2.7a.6.6 0 0 1-.8-.6l1-5.8-4.2-4.1a.6.6 0 0 1 .3-1l5.8-.8Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pv-card--featured, .pv-card--free_lifetime { background: linear-gradient(120deg, var(--warn-soft) 0%, #ffefcc 55%, #ffe3a8 100%); }
.pv-card--standard { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.pv-card--standard::after { opacity: .05; }
.pv-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pv-star { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: var(--radius-pill); background: linear-gradient(90deg, #ffd36e, var(--warn)); color: #3d2600; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pv-star svg { width: 14px; height: 14px; fill: currentColor; }
.pv-card--standard .pv-star { background: var(--tg-100); color: var(--tg-800); }
.pv-chip { padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .8); color: var(--color-link-hover); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pv-chip--active { background: var(--ok-soft); color: var(--ok); }
.pv-others .pv-chip { background: var(--tg-50); color: var(--tg-600); }
.pv-others .pv-chip--active { background: var(--ok-soft); color: var(--ok); }
.pv-others .pv-chip--upcoming { background: var(--color-primary-soft); color: var(--color-link-hover); }
.pv-card h2 { margin: 10px 0 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.pv-card__for { margin: 0; color: var(--tg-700); font-size: 14px; }
.pv-card--standard .pv-card__for { color: var(--color-text-muted); }
.pv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.pv-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--card-radius-sm); background: rgba(255, 255, 255, .82); }
.pv-card--standard .pv-tile { background: #fff; border: 1px solid var(--card-border); }
.pv-tile__ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.pv-tile__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pv-tile__k { margin: 0; color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pv-tile__v { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--card-ink); }
.pv-tile__v small { font-size: 14px; font-weight: 500; opacity: .7; }
.pv-tile__f { margin: 4px 0 0; color: var(--color-text-muted); font-size: 13px; }
.pv-bar { display: block; height: 7px; margin-top: 6px; border-radius: 7px; background: var(--teal-100); overflow: hidden; }
.pv-bar b { display: block; height: 100%; border-radius: 7px; background: var(--color-primary); }
.pv-card__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; }
.pv-btn-white { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; border: 1px solid var(--color-primary); font-weight: 600; }
.pv-btn-white:hover { background: var(--color-primary-strong); border-color: var(--color-primary-strong); color: #fff; }
.pv-btn-white:disabled { opacity: .5; cursor: not-allowed; }
.pv-btn-white svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-card__note { color: var(--tg-700); font-size: 13px; }
.pv-card--standard .pv-card__note { color: var(--color-text-muted); }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pv-grid:empty { display: none; }
.pv-sec { padding: var(--card-pad); border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.pv-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 17px; }
.pv-sec h3 small { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--tg-50); color: var(--color-text-muted); font-size: 12px; }
.pv-perks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pv-perks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; }
.pv-perks svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--color-primary-soft); fill: none; stroke: var(--color-primary-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pv-uses, .pv-others { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pv-uses li, .pv-others li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--tg-50); }
.pv-uses li:first-child, .pv-others li:first-child { border-top: 0; }
.pv-uses__art { position: relative; display: grid; place-items: center; width: 46px; height: 46px; overflow: hidden; border-radius: 10px; background: var(--tg-50); color: var(--tg-400); }
.pv-uses__art svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pv-uses__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-uses__t { display: flex; flex-direction: column; min-width: 0; }
.pv-uses__t a, .pv-uses__t strong { overflow: hidden; color: var(--color-text); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.pv-uses__t small, .pv-others__t small { color: var(--color-text-muted); font-size: 13px; }
.pv-others__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--warn-soft); }
.pv-others__ic svg { width: 18px; height: 18px; fill: var(--warn); }
.pv-others__t { display: flex; flex-direction: column; min-width: 0; }
.pv-others__t strong { font-size: 14px; }
.pv-empty { margin: 0; color: var(--color-text-muted); font-size: 14px; }
/* The release picker */
.pv-pick__note { margin: 0 0 12px; color: var(--color-text-muted); font-size: 14px; line-height: 1.55; text-align: left; }
.pv-pick { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; text-align: left; }
.pv-pick__o { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--color-control-soft); border-radius: 14px; cursor: pointer; }
.pv-pick__o:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.pv-pick__o input { accent-color: var(--color-primary); }
@media (max-width: 1023px) { .pv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pv-card { padding: 24px 20px; } .pv-tile__v { font-size: 24px; } .pv-sec { padding: 18px; } }

/* ---- orders.css ---- */
/* =====================================================================
   Distribution orders (decisions var(--teal-700), var(--teal-700)) — dist-orders.js: the Start a distribution dialog (big tiles), "On its
   way" on Distributed, and Orders. The distribution form itself is dist-flow.css.
   ===================================================================== */
.do-body svg, .do-progress svg, .do-orders svg, .do-orders__bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.do-art { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: none; overflow: hidden; border-radius: 12px; background: var(--tg-50); color: var(--tg-400); }
.do-art svg { width: 20px; height: 20px; stroke-width: 1.8; }
.do-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.do-art--round { border-radius: 50%; }
.do-art--new { background: var(--color-primary); color: #fff; }
.do-art--ini { background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 13px; font-weight: 600; }
.do-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.do-pill--todo { background: #eef2f4; color: #46535e; }
.do-pill--warn { background: var(--warn-soft); color: var(--warn-text); }
.do-pill--wait { background: var(--color-primary-soft); color: var(--color-link-hover); }
.do-pill--live { background: var(--color-primary-soft); color: var(--color-link); }
.do-pill--off { background: #f1f2f3; color: #7b8388; }

/* ---- The dialog: the site's dialog (confirm__card) — centred title and line, standard close button and buttons (#179) ---- */
.confirm__card.do-card { width: 100%; max-width: 600px; text-align: left; }
.do-body { display: flex; flex-direction: column; gap: 20px; margin-top: var(--space-5); }
.do-q { display: flex; flex-direction: column; gap: 10px; }
.do-q[hidden] { display: none; }
.do-q__l { font-size: 14px; font-weight: 700; }
.do-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.do-type { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 16px; border: 1.5px solid var(--tg-100); border-radius: 18px; background: #fff; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.do-type:hover { border-color: var(--color-primary); }
.do-type.is-on { border-color: var(--color-primary); background: linear-gradient(160deg, var(--teal-50), #fff 70%); box-shadow: 0 0 0 3px rgb(var(--teal-500-rgb) / .14); }
.do-type__ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 13px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.do-type.is-on .do-type__ic { background: var(--color-primary); color: #fff; }
.do-type strong { font-size: 15px; }
.do-type small { color: var(--color-text-muted); font-size: 13px; }
.do-count { display: inline-flex; align-self: flex-start; align-items: center; overflow: hidden; border: 1.5px solid var(--tg-100); border-radius: var(--radius-pill); }
.do-count button { display: grid; place-items: center; width: 46px; height: 46px; border: 0; background: #fff; color: var(--color-link-hover); cursor: pointer; }
.do-count button:hover { background: var(--color-primary-soft); }
.do-count input { width: 64px; height: 46px; border: 0; border-left: 1.5px solid var(--tg-100); border-right: 1.5px solid var(--tg-100); color: var(--color-text); font: inherit; font-size: 18px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.do-count input::-webkit-outer-spin-button, .do-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.do-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 236px; overflow-y: auto; padding: 2px; }
.do-rel, .do-prof { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1.5px solid var(--tg-100); border-radius: 14px; background: #fff; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.do-rel:hover, .do-prof:hover { border-color: var(--teal-200); }
.do-rel.is-on, .do-prof.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); }
.do-rel .do-art { width: 42px; height: 42px; border-radius: 10px; }
.do-rel > span:last-child, .do-prof > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.do-rel strong, .do-prof span { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.do-rel small, .do-prof small { color: var(--color-text-muted); font-size: 12px; font-weight: 400; }
.do-profiles { display: flex; flex-wrap: wrap; gap: 8px; }
.do-prof { padding: 5px 14px 5px 5px; border-radius: var(--radius-pill); }
.do-prof .do-art { width: 32px; height: 32px; }
.do-uses, .do-buy { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; }
.do-uses { background: var(--warn-soft); color: var(--warn-text); }
.do-buy { background: #fff3ee; color: #6b2a10; }
.do-uses__ic, .do-buy__ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #fff; color: var(--warn); }
.do-uses__ic svg, .do-buy__ic svg { fill: var(--warn); stroke: none; }
.do-uses div, .do-buy div { display: flex; flex: 1; flex-direction: column; font-size: 14px; }
.do-uses small, .do-buy small { opacity: .8; font-size: 13px; }
.do-err { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-size: 14px; }

/* ---- "On its way" on Distributed ---- */
.do-progress { margin: 0 0 24px; }
.do-progress header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.do-progress h2 { margin: 0; font-size: 18px; font-weight: 600; }
.do-progress header small { color: var(--color-text-muted); }
.do-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.do-c a { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--color-border); border-radius: 20px; background: #fff; color: var(--color-text); text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.do-c a:hover { transform: translateY(-1px); border-color: var(--color-primary); box-shadow: 0 12px 26px rgb(var(--teal-950-rgb) / .08); }
.do-c .do-art { width: 60px; height: 60px; border-radius: 14px; }
.do-c--details_required a, .do-c--changes_requested a { border-color: var(--warn-border); background: linear-gradient(160deg, var(--warn-soft), #fff 60%); }
.do-c__t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.do-c__t strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.do-c__t small { color: var(--color-text-muted); font-size: 13px; }
.do-steps5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 160px; margin-top: 6px; }
.do-steps5 i { height: 5px; border-radius: 5px; background: var(--tg-100); }
.do-steps5 i.on { background: var(--color-primary); }
.do-c__end { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.do-c em { display: inline-flex; align-items: center; gap: 4px; color: var(--color-link-hover); font-size: 13px; font-style: normal; font-weight: 700; white-space: nowrap; }
.do-c em svg { width: 14px; height: 14px; }

/* ---- Orders ---- */
.do-orders__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: var(--color-text-muted); font-size: 14px; }
.do-orders__bar .btn { display: inline-flex; align-items: center; gap: 7px; }
.do-orders__bar .btn svg { width: 16px; height: 16px; }
.do-orders { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* Orders as a table, as the Releases list (#216): the header row, then a row per order — # · order no., service, date |
   amount | status | invoice | Details (what it's for opens under the row) */
.do-table { margin-top: 14px; }
.do-o { display: grid; grid-template-columns: 36px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 120px 90px; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; }
.do-table .do-o { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: none; box-shadow: none; }
.do-table .do-o--head { border-top: 0; padding-top: 11px; padding-bottom: 11px; background: var(--surface-hover); color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.do-o__n { color: var(--color-text-subtle); font-size: 13px; text-align: center; }
.do-o span { display: flex; flex-direction: column; min-width: 0; }
.do-o--head span { display: block; }
.do-o strong { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.do-o small { overflow: hidden; color: var(--color-text-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.do-o__no small { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.do-o__st { align-items: flex-start; }
.do-o__inv { align-items: flex-start; }
.do-o__inv .btn { display: inline-flex; align-items: center; gap: 6px; }
.do-o__inv .btn svg { width: 15px; height: 15px; }
.do-o__tog { display: inline-flex; align-items: center; justify-self: end; gap: 4px; padding: 6px 8px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-link-hover); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.do-o__tog:hover { background: var(--color-primary-soft); }
.do-o__tog svg { width: 15px; height: 15px; transition: transform .2s ease; }
.do-o.is-open .do-o__tog svg { transform: rotate(90deg); }
.do-o.is-open { background: var(--surface-hover); }
.do-o__more { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.do-o__more[hidden] { display: none; }
.do-o__rel { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--color-text); text-decoration: none; }
.do-o__rel:hover strong { color: var(--color-link-hover); }
.do-o__rel .do-art { width: 48px; height: 48px; border-radius: 12px; }
.do-o__facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.do-o__facts dt { font-size: 12px; color: var(--color-text-muted); }
.do-o__facts dd { margin: 0; font-size: 14px; font-weight: 500; }

@media (max-width: 860px) {
  .do-table .do-o--head { display: none; }
  .do-o { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 16px; }
  .do-o__n { display: none; }
  .do-o__no, .do-o__paid { grid-column: 1; }
  .do-o__st { grid-column: 2; grid-row: 1; align-items: flex-end; }
  .do-o__inv { grid-column: 2; grid-row: 2; align-items: flex-end; }
  .do-o__tog { grid-column: 1 / -1; justify-self: start; padding-left: 0; }
  .do-o__more { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .do-card { padding: 22px 18px; border-radius: 22px; }
  .do-types, .do-picks { grid-template-columns: minmax(0, 1fr); }
  .do-cards { grid-template-columns: minmax(0, 1fr); }
  .do-c__end em { display: none; }
}

/* A message from the team waiting (#181) */
.do-new { padding: 3px 10px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
/* Orders (#216): which service each order is for — Distribution now, Marketing later */
.do-o .do-svc { display: inline-flex; flex-direction: row; margin-right: 6px; padding: 0 7px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 1px; }
[data-do-filters] + [data-do-list] .do-orders { margin-top: 14px; }
/* Releases › In Progress (#216): the "getting ready" cards above what's sent and not live yet */
.dist-ready { margin-bottom: 16px; }
.dist-ready .do-cards { margin: 0; }
/* the getting-ready cards fill the row; anything older that's sent and not live sits under its own small heading */
.dist-ready .do-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.dist-sub { margin: 22px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); }
.dist-view[hidden] { display: none; }
/* Columns as a table reads (Rohit, #218): text from the left, amounts to the right (digits line up), status and invoice centred */
.do-o__paid { align-items: flex-end; text-align: right; }
.do-o__st, .do-o__inv { align-items: center; text-align: center; }
.do-o--head span:nth-child(3) { text-align: right; }
.do-o--head span:nth-child(4), .do-o--head span:nth-child(5) { text-align: center; }
.do-o__paid strong { font-variant-numeric: tabular-nums; }
.do-o__paid { min-width: 0; }
.do-o__paid small { white-space: normal; overflow-wrap: anywhere; }   /* a long "how it was paid" wraps in its own column (#294) */
.do-o__none { color: var(--color-text-subtle); }
@media (max-width: 860px) {
  .do-o__paid { align-items: flex-start; text-align: left; }
  .do-o__st, .do-o__inv { align-items: flex-end; }
}
/* the release's picture in an order's Details: its own grid, not the row's column layout — the note centred (#219) */
.do-o .do-art { display: grid; flex-direction: initial; place-items: center; }

/* Releases list, as a table reads (#219): text from the left; stores, status and UPC centred under their headings; in a
   release's songs the ISRC centred, the length (a number) to the right */
.dr-head span:nth-child(3), .dr-head span:nth-child(4), .dr-head span:nth-child(5) { text-align: center; }
.dr-stores { justify-content: center; }
.dr-status, .dr-upc { display: flex; justify-content: center; }
.dr-th span:nth-child(3) { text-align: center; }
.dr-th span:nth-child(4) { text-align: right; }
.dr-tr:not(.dr-th) > span:nth-child(3) { display: flex; justify-content: center; }
@media (max-width: 1024px) {                         /* the list stacks (studio.css): back to the row's own sides */
  .dr-stores { justify-content: flex-start; }
  .dr-status, .dr-upc { justify-content: flex-end; }
}

/* ---- Requests on a release in the stores (#220) ----------------------------------------------------------------- */
.dist-ask svg, .rq-card svg, .rq-list svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the opened release: locked, so a change goes through our team */
.dist-ask { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.dist-ask__ic { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #eef1f3; color: #6b7780; }
.dist-ask__ic svg { width: 17px; height: 17px; }
.dist-ask__t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.dist-ask__t strong { font-size: 14px; font-weight: 600; }
.dist-ask__t > span { color: var(--color-text-muted); font-size: 13px; }
.dist-ask__open { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dist-ask__req { padding: 4px 10px; border: 1px solid var(--teal-200); border-radius: 999px; background: var(--color-primary-soft); color: var(--color-link-hover); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.dist-ask__req:hover { background: var(--teal-100); }
.dist-ask .btn { flex: none; }
@media (max-width: 600px) { .dist-ask { flex-wrap: wrap; } .dist-ask .btn { width: 100%; } }

/* the dialogs: raise one · its conversation */
.rq-card .confirm__text { text-align: left; white-space: normal; }
.rq-card .btn svg { width: 15px; height: 15px; }
.confirm__card.rq-card--thread { max-width: 640px; }
.rq-rel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rq-rel__art { position: relative; display: grid; flex: none; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-link); }
.rq-rel__art svg { width: 22px; height: 22px; }
.rq-rel__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rq-rel__t { display: flex; flex-direction: column; min-width: 0; }
.rq-rel__t strong { overflow: hidden; color: var(--color-text); font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rq-rel__t small { color: var(--color-text-muted); font-size: 13px; }
.rq-kinds { margin: 0; padding: 0; border: 0; }
.rq-kinds legend { margin-bottom: 8px; padding: 0; color: var(--color-text); font-size: 14px; font-weight: 600; }
.rq-kinds__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .rq-kinds__grid { grid-template-columns: minmax(0, 1fr); } }
.rq-kind { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--color-control-soft); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.rq-kind:hover { border-color: var(--teal-200); }
.rq-kind.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); }
.rq-kind input { position: absolute; opacity: 0; pointer-events: none; }
.rq-kind:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.rq-kind__ic { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f1f6f6; color: var(--color-link-hover); }
.rq-kind.is-on .rq-kind__ic { background: #fff; }
.rq-kind__ic svg { width: 16px; height: 16px; }
.rq-kind__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rq-kind__t strong { color: var(--color-text); font-size: 14px; font-weight: 600; }
.rq-kind__t small { color: var(--color-text-muted); font-size: 13px; line-height: 1.35; }
.rq-kinds.is-invalid .rq-kind { border-color: var(--color-error); }
.rq-kinds .field__error { display: block; margin-top: 6px; color: var(--color-error); font-size: 13px; }
.rq-kinds .field__error:empty { display: none; }
.rq-attach { display: flex; flex-direction: column; gap: 10px; }
.rq-limits { flex: 1; color: var(--color-text-subtle); font-size: 12px; }
.rq-reply .rq-limits { text-align: right; padding-right: 4px; }
@media (max-width: 480px) { .rq-limits { display: none; } }
/* a picked file, going up: its progress along the bottom */
.rq-file { position: relative; overflow: hidden; }
.rq-file.is-failed { border-color: #f3c2c2; background: #fff6f6; }
.rq-file.is-failed small { color: var(--danger); }
.rq-file__bar { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--color-primary); transition: width .2s linear; }
.rq-file__again:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.rq-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.rq-msgs { max-height: min(46vh, 460px); overflow-y: auto; padding-right: 4px; }
.rq-step { align-self: center; max-width: 90%; padding: 8px 14px; border-radius: 12px; background: var(--surface-hover); text-align: center; }
.rq-step strong { color: var(--color-text); font-size: 13px; font-weight: 600; }
.rq-step p { margin: 2px 0 0; color: var(--color-text); font-size: 14px; line-height: 1.5; }
.rq-step small { display: block; margin-top: 2px; color: var(--color-text-subtle); font-size: 12px; }
.rq-audio { display: block; width: min(280px, 100%); height: 36px; margin-bottom: 4px; }
.rq-cancel { align-self: flex-start; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Get Help on a release (#301): the drawer — what kind of help (one card a row), then only what that kind needs */
.rq-help { display: flex; flex-direction: column; gap: 10px; }
.rq-help__h { margin: 4px 0 2px; font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.rq-help__h:not(:first-child) { margin-top: 14px; }
.rq-cards { display: flex; flex-direction: column; gap: 10px; }
.rq-card2 { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--card-border, var(--color-border)); border-radius: 14px; background: #fff; font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.rq-card2:hover { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.rq-card2 .rq-kind__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary-soft); }
.rq-card2 .rq-kind__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rq-card2 .rq-kind__t { flex: 1; }
.rq-card2 > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--color-text-subtle); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rq-openlist { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rq-openlist button { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--surface-hover); font: inherit; text-align: left; cursor: pointer; }
.rq-openlist strong { font-size: 14px; }
.rq-openlist small { grid-row: 2; font-size: 12px; color: var(--color-text-muted); }
.rq-openlist svg { grid-row: 1 / 3; grid-column: 2; align-self: center; width: 16px; height: 16px; fill: none; stroke: var(--color-text-subtle); stroke-width: 2; }
.rq-openlist button:hover { background: var(--color-primary-soft); }
.rq-form2 { display: flex; flex-direction: column; gap: 14px; }
.rq-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-link-hover); cursor: pointer; }
.rq-back svg, .rq-addlink svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rq-form2__h { display: flex; align-items: center; gap: 12px; }
.rq-form2__h .rq-kind__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary-soft); }
.rq-form2__h .rq-kind__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rq-form2__h strong { display: block; font-size: 16px; }
.rq-form2__h small { font-size: 13px; color: var(--color-text-muted); }
.rq-links { display: flex; flex-direction: column; gap: 10px; }
.rq-addlink { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-top: -4px; font-size: 13px; color: var(--color-link-hover); }
.rq-also { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.rq-also input { position: absolute; opacity: 0; pointer-events: none; }
.rq-also:has(input:checked) .ck-check { border-color: var(--color-primary); background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.rq-form2__act { display: flex; justify-content: flex-end; }
.rq-cancel:hover { color: var(--danger); }
.rq-closed { margin: 0; }

/* the Requests tab: a table, as Orders and Releases */
.rq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 120px 120px 24px; align-items: center; gap: 16px; width: 100%; padding: 12px 18px; border: 0; border-top: 1px solid var(--color-border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); }
.rq-row:hover { background: var(--surface-hover); }
.rq-row--head { border-top: 0; padding-top: 11px; padding-bottom: 11px; background: var(--surface-hover); color: var(--color-text-subtle); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: default; }
.rq-row--head:hover { background: var(--surface-hover); }
.rq-row--head span:nth-child(3), .rq-row--head span:nth-child(4) { text-align: center; }
.rq-row__no, .rq-row__rel > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.rq-row strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.rq-row small { overflow: hidden; color: var(--color-text-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.rq-row__rel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rq-row__rel .rq-rel__art { width: 40px; height: 40px; }
.rq-row__at { color: var(--color-text-muted); font-size: 14px; text-align: center; }
.rq-row__st { display: flex; justify-content: center; }
.rq-row__go { display: grid; place-items: center; color: var(--color-text-subtle); }
.rq-row__go svg { width: 16px; height: 16px; }
.rq-new { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; vertical-align: 1px; }
@media (max-width: 760px) {
  .rq-row--head { display: none; }
  .rq-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 16px; }
  .rq-row:nth-child(2) { border-top: 0; }
  .rq-row__no { grid-column: 1; grid-row: 1; }
  .rq-row__st { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .rq-row__rel { grid-column: 1 / -1; grid-row: 2; }
  .rq-row__at { grid-column: 2; grid-row: 3; display: none; }
  .rq-row__go { display: none; }
}

/* ---- Start a Distribution (#225): three short steps — what, which release, how it's paid ---- */
.ds-sec { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.ds-l { font-size: 14px; font-weight: 700; }
.ds-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ds-type { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1.5px solid var(--tg-100); border-radius: 14px; background: #fff; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.ds-type:hover { border-color: var(--teal-200); }
.ds-type.is-on { border-color: var(--color-primary); background: var(--teal-50); }
.ds-type__ic { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.ds-type.is-on .ds-type__ic { background: var(--color-primary); color: #fff; }
.ds-type__ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-type > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ds-type strong { font-size: 14px; }
.ds-type small { color: var(--color-text-muted); font-size: 13px; }
.ds-songs { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 0; font-size: 14px; }
.ds-songs[hidden] { display: none; }
.ds-songs .do-count button, .ds-songs .do-count input { height: 38px; }
.ds-songs .do-count button { width: 38px; }
.ds-songs .do-count input { width: 52px; font-size: 16px; }
.ds-sec .field { margin: 0; }
.ds-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border: 1.5px dashed var(--tg-200); border-radius: 14px; }
.ds-none p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.ds-seg { display: inline-flex; overflow: hidden; border: 1.5px solid var(--tg-100); border-radius: var(--radius-pill); }
.ds-seg button { padding: 7px 14px; border: 0; background: #fff; color: var(--color-text); font: 600 13px/1.4 var(--font-sans, inherit); cursor: pointer; }
.ds-seg button + button { border-left: 1.5px solid var(--tg-100); }
.ds-seg button.is-on { background: var(--color-primary); color: #fff; }
.ds-plans { display: flex; flex-direction: column; gap: 8px; }
.ds-plan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 11px 14px; border: 1.5px solid var(--tg-100); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.ds-plan:hover { border-color: var(--teal-200); }
.ds-plan.is-on { border-color: var(--color-primary); background: var(--teal-50); }
.ds-plan input[type=radio] { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }
.ds-plan__t { display: flex; flex-direction: column; min-width: 0; }
.ds-plan__t strong { font-size: 14px; }
.ds-plan__t small, .ds-plan__p small { color: var(--color-text-muted); font-size: 13px; }
.ds-plan__p { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.ds-plan__p b { font-size: 15px; }
.ds-pack { grid-column: 2 / -1; padding: 2px 0 2px; }
.ds-pack input[type=range] { width: 100%; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.ds-pack__ticks { display: flex; justify-content: space-between; margin-top: 2px; color: var(--color-text-muted); font-size: 12px; }
.ds-pack__ticks .is-on { color: var(--color-link-hover); font-weight: 700; }
.ds-note { margin: 0; color: var(--color-text-muted); font-size: 13px; }
/* #292: Upload Now · Upload Later (and the Infinite label choice) — two rectangular buttons with rounded corners */
.ds-ups { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.ds-up { min-height: 38px; padding: 8px 16px; border: 1.5px solid var(--tg-100); border-radius: 10px; background: #fff; color: var(--color-text); font: 600 14px/1.3 var(--font-sans, inherit); cursor: pointer; }
.ds-up:hover { border-color: var(--teal-200); }
.ds-up.is-on { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.ds-sec .field + .ds-ups { margin-top: 10px; }
/* a price: struck through, the price, "+ GST" */
.ds-plan__p s { color: var(--color-text-muted); font-size: 13px; }
.ds-rec { margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-style: normal; font-weight: 600; }
/* "Or buy a package for this album" — closed until asked for */
.ds-more { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0; border: 0; background: none; color: var(--color-link-hover); font: 600 14px/1.4 var(--font-sans, inherit); text-align: left; cursor: pointer; }
.ds-more svg { width: 16px; height: 16px; transition: transform .15s; }
.ds-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.ds-info { margin: 0; padding: 10px 14px; border-radius: 12px; background: #f6f8f8; color: var(--color-text-muted); font-size: 13px; }
.ds-info--act { background: var(--warn-soft); color: var(--warn-text); }
.ds-info a { color: inherit; font-weight: 700; text-decoration: underline; }
/* the summary: subtotal · GST · total */
.ds-sum { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; padding: 12px 2px 0; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 13px; }
.ds-sum b { color: var(--color-text); font-weight: 600; }
.ds-sum__t { color: var(--color-text); font-size: 15px; }
.ds-sum__t b { font-weight: 700; }
@container (max-width: 380px) { .ds-plan { grid-template-columns: auto minmax(0, 1fr); } .ds-plan__p { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 6px; } .ds-pack { grid-column: 1 / -1; } }
.ds-pack input[type=range] { height: 6px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--color-primary) var(--p, 0%), var(--tg-100) var(--p, 0%)); -webkit-appearance: none; appearance: none; }
.ds-pack input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; border: 3px solid var(--color-primary); border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); -webkit-appearance: none; appearance: none; }
.ds-pack input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid var(--color-primary); border-radius: 50%; background: #fff; }
.ds-pack__ticks { margin-top: 6px; }
@container (max-width: 420px) { .ds-type { gap: 9px; padding: 10px 11px; } .ds-type__ic { width: 30px; height: 30px; border-radius: 9px; } .ds-type strong { font-size: 14px; } }

/* ---- dist-flow.css ---- */
/* =====================================================================
   The distribution form (decisions var(--teal-700), var(--teal-700)) — dist-flow.js. The Studio's own look: the light page banner with
   the release in it and how ready it is, the steps on the left (app.stepper's column — a bar on top on narrower
   screens), one step at a time in a big white card. The site's light teal only; cards from cards.css.
   No backdrop blur.
   ===================================================================== */
.df { --df-line: var(--card-border); --df-soft: var(--card-tint);
  display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; }
.df h1, .df h2, .df h3, .df h4 { font-family: var(--font-body); letter-spacing: -.01em; }
.df svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.df svg.f, .df svg .dot { fill: currentColor; stroke: none; }
.df .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.df .btn svg { width: 16px; height: 16px; }

/* ---- The banner: the release, how ready it is ---- */
.df-hero { margin-bottom: 0; }
.df-hero .page-hero__text { flex: 1; min-width: 0; max-width: none; }
.df-hero__rel { display: flex; align-items: center; gap: 16px; min-width: 0; margin-top: 4px; }
.df-hero__art { position: relative; display: grid; place-items: center; width: 72px; height: 72px; flex: none; overflow: hidden; border-radius: 14px;
  background: rgba(255, 255, 255, .8); color: var(--color-link-hover); box-shadow: 0 10px 24px rgb(var(--teal-600-rgb) / .22); }
.df-hero__art svg { width: 28px; height: 28px; stroke-width: 1.7; }
.df-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-hero__t { min-width: 0; }
.df-hero__t .page-hero__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.df-hero__t .page-hero__sub { margin-top: 2px; }
.df-hero__side { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 16px; }
/* How ready: a ring on a white disc (the banner's disc), the number in the middle */
.df-ring { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(var(--color-primary) calc(var(--p) * 1%), var(--teal-100) 0); box-shadow: 0 12px 30px rgb(var(--teal-600-rgb) / .25); }
.df-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.df-ring span { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.df-ring b { display: flex; align-items: flex-start; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--card-ink); }
.df-ring b i { margin: 2px 0 0 1px; font-size: 12px; font-style: normal; font-weight: 600; line-height: 1; }
.df-ring small { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--tg-500); }
.df-saved { display: inline-flex; align-items: center; gap: 6px; min-width: 76px; color: var(--tg-700); font-size: 13px; }
.df-saved svg { width: 15px; height: 15px; color: var(--color-link-hover); stroke-width: 2.6; }
.df-hero__inv { background: #fff; }
.df-hero__tl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.df-hero__tl .page-hero__title { margin: 0; }
.df-hero__tl .df-badge { margin-top: 2px; }
.df-badge { padding: 8px 14px; border-radius: var(--radius-pill); background: #fff; color: var(--color-link-hover); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); }
.df-badge--live { background: var(--color-primary-soft); color: var(--color-link); }

.df-changes { display: flex; gap: 14px; padding: 16px 20px; border-radius: var(--card-radius); background: #fff6e5; border: 1px solid #ffd899; color: #6b4300; }
.df-changes > svg { width: 24px; height: 24px; color: #e08a00; }
.df-changes strong { font-size: 15px; }
.df-changes p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }

/* ---- Body: the steps (forms.css .wiz) + the step ---- */
.df-help { display: none; gap: 12px; padding: 16px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-tint); }
.df-help > span { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: #fff; color: var(--color-link-hover); }
.df-help div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.df-help small { color: var(--color-text-muted); font-size: 13px; }
.df-help .link { align-self: flex-start; margin-top: 4px; font-weight: 600; }
@media (min-width: 1180px) { .df-help { display: flex; } }

.df-stage { min-width: 0; padding: 28px 30px 24px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.df-stage__head { margin-bottom: 24px; }
.df-kicker { color: var(--color-link-hover); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.df-stage__head h2 { margin: 6px 0; font-size: clamp(22px, 2.4vw, 26px); font-weight: 600; line-height: 1.2; color: var(--card-ink); }
.df-stage__head p { margin: 0; max-width: 620px; color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }
.df-stage__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--card-border); }
.df-stage__foot .btn { min-height: 44px; padding: 0 22px; font-size: 14px; }
.df-submit { min-width: 230px; }
.df-s { display: none; }

/* Shared bits */
.df-in { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--tg-200); border-radius: var(--radius-md); background: #fff; color: var(--color-text); font: inherit; font-size: 15px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.df-in:hover { border-color: var(--tg-300); }
.df-in:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgb(var(--teal-500-rgb) / .16); }
.df-in--lg { min-height: 54px; font-size: 19px; font-weight: 600; }
.df-area { min-height: 160px; line-height: 1.6; resize: vertical; }
.df-field { display: flex; flex-direction: column; gap: 8px; }
.df-field__l { font-size: 14px; font-weight: 600; }
.df-field__h { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
/* A version's original (#184, original.js): under the choice; typed by hand, its credits two by two */
.df-orig { margin-top: 4px; }
.df-orig__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 520px) { .df-orig__grid { grid-template-columns: minmax(0, 1fr); } }
.df-cover__f { container-type: inline-size; }
.df-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.df-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border: 1px solid var(--tg-200); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.df-pill:hover { border-color: var(--color-primary); }
.df-pill.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.df-pill svg { width: 15px; height: 15px; stroke-width: 3; }
.df-card { padding: 18px 20px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; }
.df-card > header { display: flex; gap: 12px; margin-bottom: 14px; }
.df-card__ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.df-card h4 { margin: 0; font-size: 16px; font-weight: 600; }
.df-card h4 small { margin-left: 6px; color: var(--color-text-subtle); font-size: 12px; font-weight: 500; }
.df-card header p { margin: 3px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.df-bar { display: block; height: 8px; overflow: hidden; border-radius: 8px; background: var(--tg-100); }
.df-bar i { display: block; height: 100%; border-radius: 8px; background: var(--color-primary); transition: width .4s var(--ease); }
.df-tipline { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 16px; border-radius: var(--card-radius-sm); background: var(--df-soft); color: var(--tg-700); font-size: 14px; line-height: 1.55; }
.df-tipline svg { margin-top: 1px; color: var(--color-link-hover); }
.df-av { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 15px; font-weight: 600; }
.df-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-av--new { background: var(--df-soft); color: var(--color-link-hover); border: 1.5px dashed var(--teal-200); }
.df-av--new svg { width: 18px; height: 18px; }
.df-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; border: 1.5px dashed var(--tg-200); border-radius: var(--card-radius); text-align: center; }
.df-empty > svg { width: 38px; height: 38px; color: var(--color-link); stroke-width: 1.6; }
.df-empty span { color: var(--color-text-muted); font-size: 14px; }
.df-empty .btn { margin-top: 6px; }

/* 1 · Release */
.df-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.df-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.df-choice:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: 0 14px 30px -12px rgb(var(--teal-600-rgb) / .35); }
.df-choice:disabled { cursor: default; opacity: .6; }
.df-choice--main { border-color: var(--teal-200); background: linear-gradient(160deg, var(--teal-50), #fff 60%); }
.df-choice__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.df-choice--main .df-choice__ic { background: var(--color-primary); color: #fff; }
.df-choice__ic svg { width: 24px; height: 24px; }
.df-choice em { position: absolute; top: 18px; right: 18px; padding: 4px 10px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--teal-200); color: var(--color-link-hover); font-size: 12px; font-style: normal; font-weight: 600; }
.df-choice strong { font-size: 18px; font-weight: 600; }
.df-choice > span:not(.df-choice__ic) { color: var(--color-text-muted); font-size: 14px; line-height: 1.55; }
.df-choice b { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--color-link-hover); font-size: 14px; font-weight: 600; }
.df-choice b svg { width: 16px; height: 16px; }
.df-pick { margin-top: 24px; }
.df-pick h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.df-rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.df-rcard { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.df-rcard:hover { border-color: var(--color-primary); box-shadow: 0 10px 24px -10px rgb(var(--teal-600-rgb) / .35); }
.df-rcard__art { position: relative; display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 6px; overflow: hidden; border-radius: 10px; background: var(--df-soft); color: var(--tg-400); }
.df-rcard__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-rcard strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.df-rcard small { color: var(--color-text-muted); font-size: 12px; }
.df-current { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: var(--df-soft); }
.df-current__art { position: relative; display: grid; place-items: center; width: 72px; height: 72px; flex: none; overflow: hidden; border-radius: 12px; background: #fff; color: var(--tg-400); }
.df-current__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-current > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.df-current strong { font-size: 16px; font-weight: 600; }
.df-current small { color: var(--color-text-muted); font-size: 13px; }

/* 2 · Cover & title */
.df-cover { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.df-artdrop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1; width: 100%; padding: 20px; overflow: hidden;
  border: 2px dashed var(--teal-200); border-radius: var(--card-radius); background: var(--df-soft); color: var(--color-text); font: inherit; text-align: center; cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.df-artdrop:hover { border-color: var(--color-primary); }
.df-artdrop__ic { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 4px; border-radius: 50%; background: #fff; color: var(--color-link-hover); box-shadow: 0 10px 24px rgb(var(--teal-900-rgb) / .08); }
.df-artdrop__ic svg { width: 26px; height: 26px; }
.df-artdrop strong { font-size: 16px; font-weight: 600; }
.df-artdrop small { color: var(--color-text-muted); font-size: 13px; }
.df-artdrop .btn { margin-top: 8px; pointer-events: none; }
.df-artdrop.has-art { padding: 0; border: 0; box-shadow: 0 18px 40px rgb(var(--teal-900-rgb) / .18); }
.df-artdrop.has-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-artdrop__edit { position: absolute; left: 12px; right: 12px; bottom: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .94); color: var(--card-ink); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(6px); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.df-artdrop.has-art:hover .df-artdrop__edit, .df-artdrop.has-art:focus-visible .df-artdrop__edit { opacity: 1; transform: none; }
.df-artdrop__edit svg { width: 15px; height: 15px; }
.df-cover__f { display: flex; flex-direction: column; gap: 22px; }
.df-as { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--radius-pill); background: var(--df-soft); font-size: 15px; }
.df-as .df-av { width: 34px; height: 34px; font-size: 13px; }
.df-rules { margin-top: 26px; padding: 18px 20px; border-radius: var(--card-radius-sm); background: var(--df-soft); }
.df-rules h4 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.df-rules ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.df-rules li { display: flex; align-items: center; gap: 9px; color: var(--tg-700); font-size: 14px; }
.df-rules li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 3; }
.df-rules .is-ok svg { background: var(--teal-100); color: var(--color-link); }
.df-rules .is-no svg { background: #fde6e6; color: #c62828; }

/* 3 · Music */
.df-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; padding: 30px; border: 2px dashed var(--teal-200); border-radius: var(--card-radius);
  background: var(--df-soft); text-align: center; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.df-drop:hover, .df-drop.is-over { border-color: var(--color-primary); background: var(--color-primary-soft); }
.df-drop__ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--color-primary); color: #fff; box-shadow: 0 12px 28px rgb(var(--teal-500-rgb) / .32); }
.df-drop__ic svg { width: 26px; height: 26px; }
.df-drop strong { font-size: 18px; font-weight: 600; }
.df-drop > span:not(.df-drop__ic) { color: var(--color-text-muted); font-size: 14px; }
.df-drop small { color: var(--color-link-hover); font-size: 13px; font-weight: 600; }
.df-drop--row { flex-direction: row; justify-content: flex-start; gap: 16px; min-height: 0; margin-top: 12px; padding: 16px 20px; text-align: left; }
.df-drop--row .df-drop__ic { width: 48px; height: 48px; margin: 0; box-shadow: none; }
.df-drop--row .df-drop__ic svg { width: 22px; height: 22px; }
.df-drop--row > span:last-child { display: flex; flex-direction: column; }
.df-drop--row strong { font-size: 16px; }
.df-drop--row small { color: var(--color-text-muted); font-weight: 400; }
.df-up, .df-player { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: var(--df-soft); }
.df-up__ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 14px; background: #fff; color: var(--color-link-hover); }
.df-up__t { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.df-up__t strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.df-up__t span:not(.df-bar) { color: var(--color-text-muted); font-size: 14px; }
.df-up.is-failed .df-up__t span:not(.df-bar), .df-up.is-stalled .df-up__t span:not(.df-bar) { color: var(--danger); }
.df-play { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; cursor: pointer; box-shadow: 0 10px 24px rgb(var(--teal-500-rgb) / .32); }
.df-play svg { width: 20px; height: 20px; }
.df-player__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.df-player__t strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.df-player__t small { color: var(--color-text-muted); font-size: 13px; }
.df-player__ok { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link); font-size: 13px; font-weight: 600; }
.df-player__ok svg { width: 14px; height: 14px; stroke-width: 3; }
.df-lyrics { margin-top: 18px; }
.df-tcount { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; padding: 16px 18px; border-radius: var(--card-radius-sm); background: var(--df-soft); }
.df-tcount div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.df-tcount strong { font-size: 17px; font-weight: 600; }
.df-tcount small { color: var(--color-text-muted); font-size: 14px; }
.df-tcount.is-done { background: var(--color-primary-soft); }
.df-tcount.is-done .df-bar i { background: var(--color-link); }
.df-tcount.is-over { background: var(--warn-soft); }
.df-tracks { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.df-track { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; }
.df-track.is-up { grid-template-columns: 34px minmax(0, 1fr) auto 120px; background: var(--df-soft); }
.df-track__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--df-soft); color: var(--color-link-hover); font-size: 13px; font-weight: 600; }
.df-track__n svg { width: 16px; height: 16px; }
.df-track__title { min-height: 40px; padding: 8px 12px; border-color: transparent; font-weight: 600; }
.df-track__title:hover { border-color: var(--tg-200); }
.df-track__name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.df-track__st { color: var(--color-text-muted); font-size: 13px; white-space: nowrap; }
.df-track__ok { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link); font-size: 13px; font-weight: 600; white-space: nowrap; }
.df-track__ok svg { width: 13px; height: 13px; stroke-width: 3; }
.df-track__need { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn-text); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.df-track__need svg { width: 14px; height: 14px; }
.df-track__act { display: inline-flex; gap: 2px; }
.df-track__act button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--tg-500); cursor: pointer; }
.df-track__act button:hover:not(:disabled) { background: var(--df-soft); color: var(--color-text); }
.df-track__act button:disabled { opacity: .3; cursor: default; }
.df-track__act [data-rm-track]:hover { background: var(--danger-soft) !important; color: var(--danger) !important; }
.df-track__act svg { width: 16px; height: 16px; }

/* 4 · People */
.df-songtabs { display: flex; gap: 8px; margin: -4px 0 18px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
.df-songtab { display: inline-flex; flex: none; align-items: center; gap: 8px; max-width: 220px; min-height: 40px; padding: 0 14px 0 6px; overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--radius-pill); background: #fff; color: var(--color-text); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.df-songtab > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--df-soft); font-size: 12px; }
/* #313: the ellipsis belongs on the name, not on the pill around it — on the pill it never draws and the song's
   title is cut mid-letter at 220px. */
.df-songtab__nm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.df-songtab span svg { width: 14px; height: 14px; stroke-width: 3; }
.df-songtab.is-done span { background: var(--color-primary-soft); color: var(--color-link); }
.df-songtab.is-on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-link-hover); font-weight: 600; }
.df-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.df-role { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; transition: border-color var(--dur-fast); }
.df-role.is-req:not(.is-set) { border-color: var(--warn-border); background: linear-gradient(180deg, var(--warn-soft), #fff 60%); }
.df-role.is-set { border-color: var(--teal-200); }
.df-role__h { display: flex; align-items: flex-start; gap: 12px; }
.df-role__ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.df-role__ic svg { width: 19px; height: 19px; }
.df-role__h > div { flex: 1; min-width: 0; }
.df-role h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.df-role h4 em { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn-text); font-size: 11px; font-style: normal; font-weight: 600; }
.df-role.is-set h4 em { background: var(--df-soft); color: var(--tg-500); }
.df-role__h p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 13px; }
.df-role__ok { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link); }
.df-role__ok svg { width: 14px; height: 14px; stroke-width: 3; }
.df-people { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* name on top, the four contact icons under it — names stay readable however narrow the card */
.df-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px; border-radius: 12px; }
.df-person > .df-av { grid-row: span 2; align-self: start; margin-top: 2px; }
.df-person > .df-links { grid-column: 2; grid-row: 2; margin-top: 6px; }
.df-person > .df-x { grid-column: 3; grid-row: 1; }
.df-person:hover { background: var(--df-soft); }
.df-person__t { display: flex; flex-direction: column; min-width: 0; }
.df-person__t strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.df-person__t small { color: var(--color-text-muted); font-size: 12px; }
/* #301: the Infinite plan's label — set for them, locked (the lock where the remove × would be) */
.df-person--locked:hover { background: none; }
.df-lock { display: inline-flex; grid-column: 3; grid-row: 1; padding: 6px; color: var(--color-text-subtle); }
.df-lock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.df-links { display: inline-flex; gap: 5px; }
.df-link { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--tg-200); border-radius: 50%; background: #fff; color: var(--tg-400); cursor: pointer; transition: transform var(--dur-fast), border-color var(--dur-fast); }
.df-link:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--tg-300); color: var(--color-text); }
.df-link:disabled { opacity: .4; cursor: default; }
.df-link svg { width: 15px; height: 15px; }
.df-link i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: var(--color-link); color: #fff; }
.df-link i svg { width: 8px; height: 8px; stroke-width: 4; }
.df-link--instagram.is-on { border-color: transparent; background: linear-gradient(45deg, #f9a03f, #e1306c 50%, #8a3ab9); color: #fff; }
.df-link--spotify.is-on { border-color: transparent; background: #1db954; color: #fff; }
.df-link--apple_music.is-on { border-color: transparent; background: linear-gradient(160deg, #fb5c74, #fa233b); color: #fff; }
.df-link--email.is-on { border-color: transparent; background: var(--color-primary); color: #fff; }
.df-link.is-editing { box-shadow: 0 0 0 3px rgb(var(--teal-500-rgb) / .3); }
.df-x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--tg-400); cursor: pointer; }
.df-x:hover { background: var(--danger-soft); color: var(--danger); }
.df-x svg { width: 15px; height: 15px; }
.df-linkedit { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: end; gap: 6px 12px; margin: 2px 0 6px; padding: 14px; border-radius: var(--card-radius-sm); background: var(--df-soft); }
.df-linkedit__ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 5px; border-radius: 50%; background: #fff; color: var(--color-link-hover); }
.df-linkedit__ic.df-link--instagram { color: #e1306c; } .df-linkedit__ic.df-link--spotify { color: #1db954; } .df-linkedit__ic.df-link--apple_music { color: #fa233b; }
.df-linkedit label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.df-linkedit .df-in { min-height: 42px; font-weight: 400; }
.df-linkedit__act { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.df-linkedit small { grid-column: 2 / -1; color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
.df-linkedit__err { color: var(--danger) !important; }
.df-linkedit__err:empty { display: none; }
.df-find { position: relative; }
.df-find__ic { position: absolute; left: 13px; top: 50%; color: var(--tg-400); transform: translateY(-50%); pointer-events: none; }
.df-find__ic svg { width: 17px; height: 17px; }
.df-find__in { width: 100%; min-height: 44px; padding: 10px 14px 10px 40px; border: 1.5px dashed var(--tg-300); border-radius: var(--radius-md); background: var(--surface-hover); color: var(--color-text); font: inherit; font-size: 14px; }
.df-find__in:focus { outline: none; border-style: solid; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 4px rgb(var(--teal-500-rgb) / .14); }
.df-find__menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; padding: 6px; overflow-y: auto; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; box-shadow: 0 18px 40px rgb(var(--teal-900-rgb) / .16); }
.df-find__o { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.df-find__o.is-active, .df-find__o:hover { background: var(--color-primary-soft); }
.df-find__o:disabled { opacity: .5; cursor: not-allowed; }
.df-find__o .df-av { width: 36px; height: 36px; font-size: 13px; }
.df-find__o span:last-child { display: flex; flex-direction: column; min-width: 0; }
.df-find__o strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.df-find__o small { color: var(--color-text-muted); font-size: 12px; }
.df-find__new { margin-top: 2px; border-top: 1px solid var(--card-border); border-radius: 0 0 10px 10px; }
.df-find__empty { margin: 0; padding: 12px; color: var(--color-text-muted); font-size: 14px; }
.df-people-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.df-people-foot > div:empty { display: none; }
.df-people-foot > div { flex-basis: 100%; }
.df-addrole { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--card-radius-sm); background: var(--df-soft); }
.df-addrole .link { align-self: flex-start; }

/* 5 · Details */
.df-dgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.df-dcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.df-pills--quick .df-pill { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 54px; border-radius: var(--radius-md); line-height: 1.2; }
.df-pills--quick .df-pill small { color: var(--color-text-muted); font-size: 12px; font-weight: 500; }
.df-datefield { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 600; }
.df-hint { display: flex; gap: 8px; margin: 14px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.df-hint svg { width: 16px; height: 16px; color: var(--color-link-hover); }

/* 6 · Review (and the submitted page): the release on the banner's soft teal */
.df-review { display: flex; flex-direction: column; gap: 16px; }
.df-sum { display: flex; gap: 22px; padding: 22px; border-radius: var(--card-radius); color: var(--card-ink); background: linear-gradient(120deg, var(--teal-50) 0%, var(--teal-100) 45%, var(--teal-200) 100%); }
.df-sum__art { position: relative; display: grid; place-items: center; width: 150px; height: 150px; flex: none; overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, .7); color: var(--color-link-hover); box-shadow: 0 14px 30px rgb(var(--teal-600-rgb) / .25); }
.df-sum__art svg { width: 40px; height: 40px; }
.df-sum__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.df-sum__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.df-sum__t > p { margin: 0; color: var(--color-link-hover); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.df-sum__t h3 { margin: 4px 0 2px; font-size: 24px; font-weight: 700; line-height: 1.15; }
.df-sum__t > span { color: var(--tg-700); font-size: 14px; }
.df-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: auto 0 0; padding-top: 16px; }   /* the four facts on one row when there is room (Rohit) */
.df-facts div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .78); }
.df-facts dt { color: var(--tg-500); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.df-facts dd { margin: 2px 0 0; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.df-facts dd i { color: #b26b00; font-style: normal; font-weight: 500; }
.df-sumsongs h4 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.df-sumsongs ol { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.df-sumsongs li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--tg-50); }
.df-sumsongs li:first-child { border-top: 0; }
.df-sumsongs__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--df-soft); color: var(--color-link-hover); font-size: 13px; font-weight: 600; }
.df-sumsongs li div { display: flex; flex-direction: column; min-width: 0; }
.df-sumsongs li strong { font-size: 14px; font-weight: 600; }
.df-sumsongs li small { color: var(--color-text-muted); font-size: 13px; }
.df-sumsongs li > span:last-child { color: var(--color-text-muted); font-size: 13px; }
.df-missing { padding: 16px 20px; border-radius: var(--card-radius-sm); background: #fff7e8; border: 1px solid #ffdca3; }
.df-missing h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: #7a4a00; font-size: 15px; font-weight: 600; }
.df-missing h4 svg { color: #e08a00; }
.df-missing ul { margin: 0; padding: 0; list-style: none; }
.df-missing li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px dashed #f3d7a4; color: #5a3b00; font-size: 14px; }
.df-missing li:first-child { border-top: 0; }
.df-missing .link { font-weight: 600; }
.df-ready { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--card-radius-sm); background: var(--color-primary-soft); color: var(--teal-800); }
.df-ready > svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--color-link); color: #fff; stroke-width: 3; }
.df-ready div { display: flex; flex-direction: column; }
.df-ready small { color: var(--teal-700); }
.df-next h4 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.df-next ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.df-next li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); }
.df-next b { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 13px; }
.df-next strong { font-size: 14px; font-weight: 600; }
.df-next small { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }

.df-status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 20px; padding: 26px 28px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.df-status__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--color-primary); color: #fff; box-shadow: 0 12px 28px rgb(var(--teal-500-rgb) / .32); }
.df-status__ic svg { width: 26px; height: 26px; }
.df-status h2 { margin: 2px 0 6px; font-size: 24px; font-weight: 600; color: var(--card-ink); }
.df-status p { margin: 0 0 12px; max-width: 640px; color: var(--color-text-muted); font-size: 15px; line-height: 1.6; }
.df-status--processed .df-status__ic { background: var(--color-primary-strong); }
.df-status--live { border-color: var(--teal-200); }
.df-status--live .df-status__ic { background: var(--color-link); box-shadow: 0 12px 28px rgb(var(--teal-500-rgb) / .3); }
.df-status--cancelled .df-status__ic, .df-status--taken_down .df-status__ic { background: var(--tg-500); box-shadow: none; }
.df-track5 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 6px 0 0; padding: 0; list-style: none; }
.df-track5 li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.df-track5 li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--tg-100); z-index: 0; }
.df-track5 li.is-done::before, .df-track5 li.is-current::before { background: var(--color-primary); }
.df-track5 span { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--tg-200); color: var(--tg-500); font-size: 13px; font-weight: 600; }
.df-track5 .is-done span { background: var(--color-primary-soft); border-color: var(--color-primary-soft); color: var(--color-link-hover); }
.df-track5 .is-current span { background: var(--color-primary); border-color: var(--color-primary); color: #fff; box-shadow: 0 0 0 5px rgb(var(--teal-500-rgb) / .2); animation: df-pulse 2s ease-in-out infinite; }
.df-track5 span svg { width: 15px; height: 15px; stroke-width: 3; }
.df-track5 strong { font-size: 13px; font-weight: 600; }
.df-track5 small { color: var(--color-text-muted); font-size: 12px; }
@keyframes df-pulse { 50% { box-shadow: 0 0 0 9px rgb(var(--teal-500-rgb) / .08); } }
.df-review--ro .df-sum { margin-top: 0; }
.df-history { padding: 16px 20px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.df-history summary { font-size: 16px; font-weight: 600; cursor: pointer; }
.df-history ol { margin: 14px 0 0; padding: 0 0 0 16px; list-style: none; border-left: 2px solid var(--tg-100); }
.df-history li { position: relative; padding: 0 0 14px 14px; }
.df-history li::before { content: ""; position: absolute; left: -23px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px #fff; }
.df-history li.df-history__team::before { background: var(--card-ink); }
.df-history strong { display: block; font-size: 14px; }
.df-history p { margin: 3px 0 0; color: var(--color-text-muted); font-size: 13px; white-space: pre-line; }
.df-history small { color: var(--color-text-subtle); font-size: 12px; }

/* Loading */
.df--loading .sk { display: block; border-radius: var(--card-radius); }
.df-sk-head { height: 150px; }
.df-sk-rail { display: none !important; height: 420px; }
.df-sk-stage { height: 520px; }
@media (min-width: 1180px) {
  .df-body--sk { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px; }
  .df-sk-rail { display: block !important; }
}

@media (prefers-reduced-motion: reduce) { .df-track5 .is-current span { animation: none; } .df-choice, .df-link { transition: none; } }

/* ---- Narrower screens ---- */
@media (max-width: 1023px) {
  .df-roles { grid-template-columns: minmax(0, 1fr); }
  .df-dgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .df-hero { flex-direction: column; align-items: stretch; gap: 14px; }
  .df-hero__art { width: 60px; height: 60px; border-radius: 12px; }
  .df-hero__t .page-hero__title { white-space: normal; }
  .df-hero__side { justify-content: space-between; padding-top: 12px; border-top: 1px solid rgb(var(--teal-600-rgb) / .18); }
  .df-ring { width: 68px; height: 68px; box-shadow: 0 8px 20px rgb(var(--teal-600-rgb) / .22); }
  .df-ring::before { inset: 6px; }
  .df-ring b { font-size: 18px; }
  .df-ring b i { font-size: 10px; margin-top: 1px; }
  .df-ring small { display: none; }
  .df-stage { padding: 22px 18px 18px; }
  .df-choices { grid-template-columns: minmax(0, 1fr); }
  .df-cover { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .df-artdrop { max-width: 300px; justify-self: center; }
  .df-artdrop__edit { opacity: 1; transform: none; }
  .df-rules ul { grid-template-columns: minmax(0, 1fr); }
  .df-track { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .df-track__title { grid-column: 2 / -1; }
  .df-track > .df-track__st, .df-track > .df-track__ok, .df-track > .df-track__need { grid-column: 2; justify-self: start; }
  .df-track__act { grid-column: 3; grid-row: 2; }
  .df-linkedit { grid-template-columns: minmax(0, 1fr); }
  .df-linkedit__ic { display: none; }
  .df-linkedit small { grid-column: 1; }
  .df-sum { flex-direction: column; }
  .df-sum__art { width: 120px; height: 120px; }
  .df-facts { grid-template-columns: minmax(0, 1fr); }
  .df-next ol { grid-template-columns: minmax(0, 1fr); }
  .df-status { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .df-track5 strong { font-size: 12px; }
  .df-track5 small { display: none; }
  .df-stage__foot { position: sticky; bottom: calc(var(--player-height) + 8px); z-index: 4; margin: 24px -10px -8px; padding: 12px 10px; border-top: 1px solid var(--card-border); border-radius: 16px; background: rgba(255, 255, 255, .97); }
  body:not(.has-player) .df-stage__foot { bottom: 8px; }
  .df-stage__foot .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .df-submit { min-width: 0; flex: 1; }
  .df-stage__foot .df-l { display: none; }
  .df-stage__foot .df-s { display: inline; }
}

/* The full-name note on Composer and Lyricist (#181) */
.df-role__note { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); }

/* ---- The conversation with our team (#181): like comments — the team on the left, you on the right ---- */
.df-chat { margin-top: var(--space-5); padding: 22px 24px; border: 1px solid var(--card-border, var(--tg-100)); border-radius: 18px; background: #fff; box-shadow: var(--card-shadow, 0 6px 20px rgb(var(--teal-950-rgb) / .05)); }
.df-chat__h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.df-chat__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.df-chat__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.df-chat__h h2 { margin: 0; font-size: 17px; font-weight: 600; }
.df-chat__h p { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted); }
.df-chat__new { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; vertical-align: 2px; }
.df-chat__list { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.df-chat__empty { padding: 14px 16px; border-radius: 12px; background: var(--surface-hover); font-size: 14px; color: var(--color-text-muted); }
.df-msg { display: flex; align-items: flex-end; gap: 10px; max-width: min(620px, 88%); }
.df-msg--artist { flex-direction: row-reverse; align-self: flex-end; }
.df-msg__av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 13px; font-weight: 700; }
.df-msg--artist .df-msg__av { background: var(--tg-50); color: var(--color-text-muted); }
.df-msg__b { min-width: 0; padding: 10px 14px 12px; border-radius: 16px 16px 16px 4px; background: #f1f8f8; }
.df-msg--artist .df-msg__b { border-radius: 16px 16px 4px 16px; background: var(--color-primary); color: #fff; }
.df-msg.is-changes .df-msg__b { background: #fff6e6; }
.df-msg__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.df-msg__meta strong { font-size: 13px; font-weight: 600; }
.df-msg__meta small { font-size: 12px; color: var(--color-text-subtle); }
.df-msg--artist .df-msg__meta small { color: var(--color-on-dark-muted); }
.df-msg__tag { display: inline-block; margin: 2px 0 4px; padding: 1px 8px; border-radius: 999px; background: #ffe6b8; color: var(--warn-text); font-size: 11px; font-style: normal; font-weight: 600; }
.df-msg__b p { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
/* The box: the message, the files picked for it, then Attach Files (left) · Send (right) — #183 */
.df-chat__form { display: flex; flex-direction: column; gap: 10px; }
.df-chat__form .field { min-height: 64px; }
.df-chat__form .field__input { min-height: 64px; padding-bottom: 10px; }
.df-chat__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.df-chat__form .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.df-chat__attach { cursor: pointer; }
.df-chat__files { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.df-chat__files li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--surface-hover); font-size: 13px; }
.df-chat__files li > svg { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--color-text-subtle); stroke-width: 1.8; stroke-linejoin: round; }
.df-chat__files span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-chat__files small { flex: none; color: var(--color-text-subtle); font-size: 12px; }
.df-chat__files .df-x { width: 26px; height: 26px; }
/* A message's files: a picture's preview, and a row per file to download */
.df-msg__files { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.df-msg__pic { display: block; margin-bottom: 4px; }
.df-msg__pic img { display: block; max-width: min(260px, 100%); max-height: 200px; border-radius: 10px; object-fit: cover; }
.df-msg__file { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .7); color: inherit; font-size: 13px; text-decoration: none; }
.df-msg__file:hover { background: #fff; }
.df-msg--artist .df-msg__file { background: rgba(255, 255, 255, .16); }
.df-msg--artist .df-msg__file:hover { background: rgba(255, 255, 255, .26); }
.df-msg__file svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.df-msg__file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.df-msg__file small { flex: none; margin-left: auto; opacity: .75; font-size: 12px; }
.df-chat__closed { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--color-primary-soft); color: var(--teal-800); font-size: 14px; }
.df-chat__closed svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.df-changes .link { margin-top: 6px; font-weight: 600; }
@media (max-width: 560px) { .df-chat { padding: 18px 16px; } .df-msg { max-width: 100%; } }

/* #302: Submit's dialog — the terms line under the text, as the sign-up form shows it (forms.css .form__opt.is-locked) */
.confirm__text:has(.df-agree) { white-space: normal; }
.confirm__text:has(.df-agree) p { margin: 0; }
.df-agree { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border); }

/* ---- The release page on the site's card scale (#305, Rohit: it read a size bigger than every other page) ------------- */
.df-hero__art { width: 64px; height: 64px; border-radius: 12px; }
.df-status { gap: 14px 16px; padding: 20px 22px; }
.df-status__ic { width: 40px; height: 40px; border-radius: 12px; box-shadow: none; }
.df-status__ic svg { width: 20px; height: 20px; }
.df-status h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.df-status p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; }
.df-track5 { margin-top: 4px; }
.df-track5 li + li::before { top: 13px; }
.df-track5 span { width: 28px; height: 28px; font-size: 12px; }
.df-track5 span svg { width: 13px; height: 13px; }
.df-track5 strong { font-size: 12.5px; }
.df-track5 small { font-size: 11.5px; }
.df-sum { gap: 18px; padding: 18px 20px; }
.df-sum__art { width: 112px; height: 112px; border-radius: 14px; }
.df-sum__art svg { width: 32px; height: 32px; }
.df-sum__t > p { font-size: 11px; }
.df-sum__t h3 { margin: 3px 0 2px; font-size: 20px; }
.df-sum__t > span { font-size: 13px; }
.df-facts div { padding: 9px 12px; }
.df-stage { padding: 22px 24px 20px; }
.df-stage__head { margin-bottom: 18px; }
.df-stage__head h2 { font-size: 20px; }
.df-stage__foot { margin-top: 22px; padding-top: 16px; }
@media (max-width: 640px) {
  .df-hero__art { width: 56px; height: 56px; }
  .df-sum__art { width: 88px; height: 88px; }
}

/* ---- The release drawer (#305): the status card, summary and songs inside the shared drawer ---- */
.df--drawer .df-status { padding: 0 0 4px; border: 0; background: none; box-shadow: none; }
.df--drawer .df-status__t > .btn { margin-top: 6px; }
.df--drawer .df-sum { margin-top: 10px; }
.df--drawer .df-sum__art { width: 88px; height: 88px; }
.df--drawer .df-card.df-sumsongs { margin-top: 10px; }
.df--drawer .df-track5 strong { font-size: 11.5px; }
.df--drawer .df-track5 small { font-size: 11px; }
.dr-help { gap: 6px; }

/* =====================================================================
   #306 (Rohit's spec): the Add Details form
   ===================================================================== */
/* no heading over a step — its fields start the card */
.df-stage__body > :first-child { margin-top: 0; }
/* 1 · who it's released as, above the choice */
.df-owner { margin-bottom: 18px; }
.df-owner__one { display: flex; align-items: center; gap: 10px; min-height: 56px; padding-top: 18px; cursor: default; }
.df-owner__one .df-av { width: 28px; height: 28px; font-size: 12px; }
.df-owner__one strong { font-size: 15px; font-weight: 600; }
/* 2 · the title in its box, then what the song is — the Studio's compact rows */
.df-cover__f { gap: 18px; }
.df-cover__f .df-field__h { display: block; margin-top: -10px; }
.df-what { display: flex; flex-direction: column; gap: 10px; }
.df-what .df-field__h { margin-top: -4px; }
.df-what .df-field__h[hidden] { display: none; }
.df-what .set-toggle { padding: 6px 0 0; border-bottom: 0; }
/* 4 · credits one per row, full width: singer, composer, lyricist (warm — a must), then the rest */
.df-roles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.df-role.is-req, .df-role.is-req.is-set { border-color: var(--warn-border); background: linear-gradient(180deg, var(--warn-soft), #fff 70%); }
.df-role.is-req.is-set h4 em { background: var(--warn-soft); color: var(--warn-text); }
/* 5 · a plain form: the date across, language | genre, the label across */
.df-details { display: flex; flex-direction: column; gap: 18px; }
.df-date { display: flex; flex-direction: column; gap: 10px; }
.df-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.df-quick .df-pill { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 46px; padding: 0 14px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.2; }
.df-quick .df-pill small { color: var(--color-text-muted); font-size: 11.5px; font-weight: 500; }
.df-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.df-details > .df-field__h, .df-date > .df-field__h { margin-top: -8px; }
@media (max-width: 640px) { .df-two { grid-template-columns: minmax(0, 1fr); } }
/* 3 · an album's songs: drag by the grip; Edit opens the song's credits, lyrics and details under its row */
.df-track--album { grid-template-columns: 28px 34px minmax(0, 1fr) auto auto; }
.df-track__grip { display: grid; place-items: center; width: 28px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--tg-300); cursor: grab; touch-action: none; }
.df-track__grip:hover, .df-track__grip:focus-visible { background: var(--df-soft); color: var(--tg-600); }
.df-track__grip svg { width: 16px; height: 16px; }
.df-track__st2 { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.df-track__st2 .df-track__need { border: 0; font: inherit; font-size: 13px; font-weight: 600; }
.df-track__act .df-track__edit { display: inline-flex; gap: 6px; width: auto; padding: 0 10px; color: var(--color-link-hover); font: inherit; font-size: 13px; font-weight: 600; }
.df-track__act .df-track__edit:hover { background: var(--color-primary-soft) !important; }
.df-track.is-open { border-color: var(--teal-200); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.df-track__ed { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; margin: 6px -2px 2px; padding: 16px 4px 4px; border-top: 1px solid var(--card-border); }
.df-track__ed .df-people-foot { margin-top: 0; }
.df-ed__more { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; border-top: 1px solid var(--tg-50); }
.df-ed__done { display: flex; justify-content: flex-end; }
.df-track.sort-placeholder { opacity: .4; }
@media (max-width: 720px) {
  .df-track--album { grid-template-columns: 24px 30px minmax(0, 1fr) auto; }
  .df-track--album .df-track__title { grid-column: 3 / -1; }
  .df-track--album > .df-track__st2 { grid-column: 3; justify-content: flex-start; }
  .df-track--album .df-track__act { grid-column: 4; grid-row: 2; }
  .df-track__act .df-track__edit span { display: none; }
}
/* fields without an icon start where the Studio's do (studio.css .sf, pages.css .pg) */
.df .field__input { padding-left: 14px; }
.df .field__label { left: 14px; }
/* an album's song on a phone: number and title, then what it still needs, then its buttons on a row of their own */
@media (max-width: 720px) {
  .df-track--album > .df-track__st2 { grid-column: 3 / -1; justify-content: flex-start; }
  .df-track--album .df-track__act { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; }
  .df-track__act .df-track__edit span { display: inline; }
  .df-people-foot .btn { width: 100%; height: auto; min-height: 38px; }
  .df-people-foot .btn .btn__text { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* =====================================================================
   #307 (Rohit's corrections)
   ===================================================================== */
/* Version and Explicit on one line */
.df-what__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.df-explicit { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
/* Released As under the release made here */
.df-current + .df-owner { margin: 16px 0 0; }
.df-owner.is-locked .field__input { cursor: default; }
/* a person in a role: grip · photo · name · links · ×, one line; a hairline between people */
.df-person { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 0; }
.df-person > .df-av { margin-top: 0; }
.df-person > .df-links { margin: 0; }
.df-person__t { flex: 1; }
.df-people > .df-person + .df-person, .df-people > .df-linkedit + .df-person { border-top: 1px solid var(--tg-100); }
.df-person:hover { background: rgb(var(--teal-500-rgb) / .04); }
.df-person__grip { display: grid; place-items: center; width: 16px; flex: none; color: var(--tg-300); cursor: grab; touch-action: none; }
.df-person__grip:hover { color: var(--tg-600); }
.df-person__grip svg { width: 14px; height: 14px; }
.df-person.sort-placeholder { opacity: .4; }
.df-link.is-locked { cursor: default; }
.df-link.is-locked:hover { transform: none; }
@media (max-width: 560px) {
  .df-person { flex-wrap: wrap; row-gap: 8px; }
  .df-person > .df-links { order: 5; width: 100%; padding-left: 52px; }
  .df-person:has(.df-person__grip) > .df-links { padding-left: 80px; }
}
/* an album's song: copy credits from a song before it, at the top of its editor */
.df-ed__copy { display: flex; }
/* uploading: a thin bar under the song's title, no extra text */
.df-track__prog { grid-column: 3 / 4; grid-row: 2; display: block; height: 3px; margin: -4px 12px 2px; overflow: hidden; border-radius: 3px; background: var(--tg-100); }
.df-track__prog i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width .4s var(--ease); }
.df-track.is-up { background: #fff; }
.df-track.is-up .df-track__name { padding: 0 12px; color: var(--color-text-muted); }
.df-track__st.is-failed { color: var(--danger); }
@media (max-width: 720px) { .df-track__prog { grid-column: 3 / -1; grid-row: auto; } }
.df-person > .df-av { align-self: center; }
/* #308: dropdown and date icons keep the fields' own soft colour (the form's .df svg rule had made them black) */
.df .msel__btn svg, .df .mdate__btn svg { stroke: var(--color-text-subtle); stroke-width: 1.8; }
.df .msel.is-open svg, .df .mdate.is-open svg, .df .msel__btn:focus-visible svg, .df .mdate__btn:focus-visible svg { stroke: var(--color-primary); }

/* =====================================================================
   #308 (Rohit): the album's songs, copy credits
   ===================================================================== */
/* a song: grip · no. · title with its line under it · Edit ↑ ↓ × */
.df-track--album, .df-track--album.is-up { grid-template-columns: 28px 34px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 10px 10px 8px; background: #fff; }
.df-track__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.df-track--album .df-track__title { min-height: 34px; padding: 4px 10px; font-size: 15px; }
.df-track__name { overflow: hidden; padding: 6px 10px 2px; font-size: 15px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.df-track__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 18px; padding: 0 10px; font-size: 12.5px; color: var(--color-text-muted); }
.df-track__meta svg { width: 13px; height: 13px; }
.df-track__dot { font-style: normal; color: var(--tg-300); }
.df-track__meta .df-track__prog { display: block; flex: 0 1 220px; height: 4px; margin: 0; overflow: hidden; border-radius: 4px; background: var(--tg-100); grid-column: auto; grid-row: auto; }
.df-track__meta .df-track__prog i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width .4s var(--ease); }
.df-track__pct { color: var(--color-link); font-variant-numeric: tabular-nums; }
.df-track__add { display: inline-flex; align-items: center; gap: 4px; color: var(--color-link); font-weight: 600; cursor: pointer; }
.df-track__add:hover { color: var(--color-link-hover); }
.df-track__cr { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--warn-text); font-weight: 600; cursor: pointer; }
.df-track__cr.is-ok { color: var(--color-link); font-weight: 500; cursor: default; }
.df-track__fail { color: var(--danger); }
.df-track--album .df-track__act { align-self: center; }
.df-track--album .df-track__ed { grid-column: 1 / -1; }
/* copy credits from an existing song — or add them below */
.df-ed__copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.df-ed__or { font-size: 13px; color: var(--color-text-subtle); }
/* the copy dialog: the field, then its note, left-aligned */
.confirm__text:has(.df-copydlg) { white-space: normal; }
.df-copydlg { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.df-copydlg__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
/* a phone: the title and its line across, the buttons on a row of their own under them */
@media (max-width: 720px) {
  .df-track--album, .df-track--album.is-up { grid-template-columns: 22px 28px minmax(0, 1fr); padding: 10px 8px; }
  .df-track--album .df-track__title { grid-column: auto; }
  .df-track--album .df-track__act { grid-column: 3; grid-row: 2; justify-content: flex-start; margin-left: 4px; }
  .df-track--album .df-track__act .df-track__edit span { display: inline; }
  .df-track--album.is-up .df-track__act { display: none; }
  .df-track__meta .df-track__prog { flex-basis: 120px; }
  .df-track__meta { gap: 2px 12px; }
  .df-track__dot { display: none; }                                         /* wrapped, a dot would hang at a line's end */
  .df-ed__copy .btn { max-width: 100%; height: auto; min-height: 38px; }
  .df-ed__copy .btn .btn__text { white-space: normal; overflow: visible; text-overflow: clip; text-align: left; }
}
/* #308 (Rohit): the form ends ~28px above the player (or the page's foot) on every step, single or album — not the page's
   usual 48px plus the form's own 32px */
.df-page > .df:not(.df--drawer) { padding-bottom: 0; }
.app-page:has(> .df-page) { padding-bottom: 28px; }
body.has-player .app-page:has(> .df-page) { padding-bottom: calc(var(--player-height) + 28px + env(safe-area-inset-bottom)); }
/* #308: on wide screens the step card reaches the bottom of the steps column (with "Need a hand?"), Back / Next at its foot —
   both columns end on one line, 28px above the player, however short the step */
@media (min-width: 1180px) {
  .df-body.wiz { align-items: stretch; }
  .df-body.wiz > .wiz__side { align-self: start; margin-bottom: -18px; }      /* its shadow room doesn't count */
  .df-body.wiz > .df-stage { display: flex; flex-direction: column; }
  .df-stage > .df-stage__body { flex: 1 0 auto; }
}
/* …and a step shorter than the window: the card still reaches 28px above the player (the page fills the window) */
.app-page:has(> .df-page) { display: flex; flex-direction: column; }
.app-page > .df-page { display: flex; flex: 1 0 auto; flex-direction: column; }
.df-page > .df:not(.df--drawer) { flex: 1 0 auto; }
.df > .df-body { flex: 1 0 auto; }
.df-body > .df-stage { flex: 1 0 auto; display: flex; flex-direction: column; }
.df-body > .df-stage > .df-stage__body { flex: 1 0 auto; }
/* #308: the codes — a hairline after Label, the switch, then their own UPC and ISRCs */
.df-codes { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--tg-100); }
.df-codes__sw { padding: 0; border-bottom: 0; }
.df-codes__own { display: flex; flex-direction: column; gap: 10px; }
.df-codes__own[hidden] { display: none; }
.df-codes__own > .df-field__h { margin-top: -4px; }
/* their own codes in one bordered card (Rohit's sketch): the release + UPC on top, each song + ISRC under it, hairlines */
.df-codecard { container-type: inline-size; border: 1px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; }
.df-codecard ol { margin: 0; padding: 0; list-style: none; }
.df-isrc { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(180px, 260px); align-items: center; gap: 12px; padding: 10px 14px; }
.df-isrc + .df-isrc { border-top: 1px solid var(--tg-50); }
.df-isrc__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--df-soft); color: var(--color-link-hover); font-size: 13px; font-weight: 600; }
.df-isrc__n svg { width: 15px; height: 15px; }
.df-isrc__t { overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.df-isrc__t i { font-style: normal; font-weight: 400; color: var(--color-text-subtle); }
.df-isrc__chip { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-link); font-size: 12px; font-weight: 600; vertical-align: 1px; }
@container (max-width: 520px) { .df-isrc { grid-template-columns: 30px minmax(0, 1fr); } .df-isrc > .field { grid-column: 2; } }
/* titles at medium weight here and on Review, so the two song lists read alike (Rohit) */
.df-sumsongs li strong { font-weight: 500; }
/* #308: Review — a pencil by an album song's title (to it, open in Songs) */
.df-sumsongs li strong { display: inline-flex; align-items: center; gap: 6px; }
.df-sumsongs__edit { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tg-400); cursor: pointer; }
.df-sumsongs__edit:hover, .df-sumsongs__edit:focus-visible { background: var(--color-primary-soft); color: var(--color-link-hover); }
.df-sumsongs__edit svg { width: 14px; height: 14px; }
/* #309 (Rohit): an added credit's × sits where the usual cards show their tick */
.df-role__rm { flex: none; margin: -3px -4px 0 0; }
/* #309 (Rohit): hovering a link icon broke its colours (a filled Instagram / Spotify turned dark-ink with a grey ring) —
   a filled one stays its brand colour and just lifts; an empty one takes its brand colour on hover */
.df-link.is-on:hover:not(:disabled) { border-color: transparent; color: #fff; filter: brightness(1.06); }
.df-link--instagram:not(.is-on):hover:not(:disabled) { border-color: #f3b5cb; color: #e1306c; }
.df-link--spotify:not(.is-on):hover:not(:disabled) { border-color: #a8e6bf; color: #1aa34a; }
.df-link--apple_music:not(.is-on):hover:not(:disabled) { border-color: #fbb7c1; color: #fa233b; }
.df-link--email:not(.is-on):hover:not(:disabled) { border-color: var(--teal-200); color: var(--color-link); }
/* #309 (Rohit): Review — what we'll generate when their own codes are only some of them, with a way back to add them */
.df-codesnote { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--teal-150); border-radius: var(--card-radius-sm); background: var(--color-primary-soft); }
.df-codesnote > svg { flex: none; width: 18px; height: 18px; color: var(--color-link); }
.df-codesnote p { flex: 1; margin: 0; font-size: 13.5px; color: var(--color-text); }
.df-codesnote .btn { flex: none; background: #fff; }
.df-codesnote { flex-wrap: wrap; } .df-codesnote p { min-width: 180px; }

/* ---- plus.css ---- */
/* =====================================================================
   Artist Plus (decision #292): the Privileges page's plan ladder and "unlock for free" cards (privileges.js), the shop
   after publishing and the Upgrade checkout (plus-shop.js), the Marketing tab's campaigns and chat, order lines.
   Built from the site's tokens and the dialog / card pieces in orders.css and privileges.css — no new colours.
   ===================================================================== */

/* ---- Privileges: the ladder ---- */
.pv-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pv-lad { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border: 1.5px solid var(--card-border); border-radius: var(--card-radius-sm); background: #fff; }
.pv-lad.is-here { border-color: var(--color-primary); background: var(--teal-50); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.pv-lad.is-locked { background: var(--tg-50); color: var(--color-text-muted); }
.pv-lad--premium.is-here { border-color: var(--warn); background: var(--warn-soft); box-shadow: none; color: var(--card-ink); }
.pv-lad h4 { margin: 0; font-size: 16px; }
.pv-lad__share { margin: 0; color: var(--color-link-hover); font-size: 22px; font-weight: 700; }
.pv-lad.is-locked .pv-lad__share { color: inherit; }
.pv-lad__share small { color: var(--color-text-muted); font-size: 12px; font-weight: 600; }
.pv-lad__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: 15px; }
.pv-lad__price s { color: var(--color-text-muted); font-size: 13px; }
.pv-lad__price small { color: var(--color-text-muted); font-size: 12px; }
.pv-lad ul { display: flex; flex: 1; flex-direction: column; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; }
.pv-lad li { display: flex; gap: 6px; }
.pv-lad li svg, .pv-steps svg, .pv-lad__foot svg, .pv-act h3 svg, .pv-grid--2 h3 svg { width: 15px; height: 15px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-lad li svg { color: var(--color-link); }
.pv-lad.is-locked li svg { color: inherit; }
.pv-lad__foot { min-height: 36px; margin-top: 10px; }
.pv-lad__here, .pv-lad__inc, .pv-lad__lock { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.pv-lad__here { background: var(--color-primary); color: #fff; }
.pv-lad__inc { background: var(--ok-soft); color: var(--ok); }
.pv-lad__lock { background: var(--tg-50); color: var(--tg-600); }
.pv-lad__foot .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-note, .pv-sub { margin: 12px 0 0; color: var(--color-text-muted); font-size: 13px; }
.pv-sub:first-of-type { margin-top: 0; }
.pv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-steps { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.pv-steps li { display: flex; gap: 8px; color: var(--color-text-muted); }
.pv-steps li.is-done { color: var(--card-ink); }
.pv-steps li.is-done svg { color: var(--ok); }
.pv-grid--2 .pv-bar { margin-top: 10px; }
/* Infinite's label */
.pv-act p { margin: 0 0 12px; color: var(--color-text-muted); font-size: 14px; }
.pv-act--done p { margin: 0; color: var(--card-ink); }
.pv-act__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.pv-act__row .field { flex: 1 1 220px; margin: 0; }
.pv-act__row .btn { min-height: 48px; }
.pv-act__err { margin: 8px 0 0; color: var(--color-error-text); font-size: 13px; }
/* Credits history */
.pv-hist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.pv-hist li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--color-border); }
.pv-hist li:first-child { border-top: 0; }
.pv-hist__n { width: 44px; flex: none; font-weight: 700; text-align: right; }
.pv-hist--added .pv-hist__n { color: var(--ok); }
.pv-hist--returned .pv-hist__n { color: var(--color-text-muted); text-decoration: line-through; }
.pv-hist__t { display: flex; flex-direction: column; min-width: 0; }
.pv-hist__t strong { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pv-hist__t small { color: var(--color-text-muted); font-size: 13px; }
.pv-sec h3 small { color: var(--color-text-muted); font-size: 13px; font-weight: 500; }
@media (max-width: 1100px) { .pv-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pv-ladder, .pv-grid--2 { grid-template-columns: minmax(0, 1fr); } .pv-lad__foot { min-height: 0; } }

/* ---- The shop dialog ---- */
.confirm__card.ps-card { max-width: 640px; }
.ps-sec { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.ps-sec + .ps-sec { padding-top: 18px; border-top: 1px solid var(--color-border); }
.ps-sec h3 { margin: 0; font-size: 16px; }
.ps-sub { margin: -4px 0 0; color: var(--color-text-muted); font-size: 13px; }
.ps-check input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); }
.ps-check.is-dim { opacity: .55; cursor: default; }
.ps-check .ds-plan__t strong svg { width: 16px; height: 16px; margin: -2px 6px 0 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; }
.ps-offer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--warn-soft); color: var(--warn-text); }
.ps-offer svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; }
.ps-offer div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.ps-offer small { opacity: .85; font-size: 13px; }
.ps-offer [data-cd] { font-variant-numeric: tabular-nums; }
.ps-vnote { margin: -2px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--tg-50); color: var(--color-text-muted); font-size: 13px; }
.ps-vnote--warn { background: var(--warn-soft); color: var(--warn-text); }
.ps-tabs .ds-up svg { width: 15px; height: 15px; margin: -2px 6px 0 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; }
.ps-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ps-reach { cursor: default; }
.ps-ai { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.ps-ai .field { flex: 1 1 220px; margin: 0; }
.ps-ai .btn { min-height: 48px; }
.ps-ai .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.ps-calls { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-call { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid var(--tg-100); border-radius: 10px; background: #fff; font-size: 14px; cursor: pointer; }
.ps-call.is-on { border-color: var(--color-primary); background: var(--teal-50); }
.ps-call input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); }
.ps-shop .ds-pack .field { margin: 4px 0 0; }

/* ---- The Marketing tab ---- */
.ps-camps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ps-camp { padding: 18px 20px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.ps-camp__head, .ps-camp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ps-camp__foot { margin-top: 10px; color: var(--color-text-muted); font-size: 13px; }
.ps-camp__t { display: flex; flex-direction: column; min-width: 0; }
.ps-camp__t strong { font-size: 15px; }
.ps-camp__t small { color: var(--color-text-muted); font-size: 13px; }
.ps-camp__foot .btn svg, .ps-say .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ps-chat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.ps-msgs { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.ps-msg { max-width: 80%; padding: 10px 14px; border-radius: 14px; background: var(--tg-50); font-size: 14px; }
.ps-msg--artist { align-self: flex-end; background: var(--teal-50); }
.ps-msg strong { font-size: 13px; }
.ps-msg p { margin: 2px 0; white-space: pre-wrap; }
.ps-msg small { color: var(--color-text-muted); font-size: 12px; }
.ps-say { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ps-say .field { flex: 1 1 260px; margin: 0; }

/* ---- Orders: an order's lines and GST ---- */
.do-o__lines { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.do-o__lines li { display: flex; justify-content: space-between; gap: 12px; }
.do-o__gst { color: var(--color-text-muted); }
.do-o__what { margin: 0; font-weight: 600; }
/* icons that sit in a line of text (the site's svg default is a block) */
.ps-check .ds-plan__t strong svg, .ps-tabs .ds-up svg, .ps-ai .btn svg { display: inline-block; }
.ps-group + .ps-group { margin-top: 28px; }
.ps-group h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 18px; }
.ps-group h2 small { color: var(--color-text-muted); font-size: 14px; font-weight: 500; }

/* ---- cards.css ---- */
/* =====================================================================
   One card look across the Creator Studio, Settings and the distribution form (decision var(--teal-700)).
   After the audit: every section is a white card on the page — soft teal border, 20px corners, a soft shadow —
   with a heading that has its own little icon (data-ic on the heading), the site's own light teal colours.
   Loaded after the page stylesheets, so these few rules are the one place the look is set.
   ===================================================================== */

/* ---- The cards: editors, Settings, lists, Analytics, Reports / Payouts, Distributed, Orders ---- */
/* … and the public pages' cards (#229): profiles, pages, song pages — the same lift, not a flat grey line */
.sf-sec, .sf-head, .studio-card, .set-card, .rtype, .sf-publish, .eve-top, .pg-hero,
.an-kpi, .an-card, .pg-card, .ev-scard, .po-wallet, .dr-list, .dist-tile, .do-o, .apx-card, .apx-org {
  border-color: var(--card-border);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow);
}
.sf-sec, .sf-head, .set-card { padding: var(--card-pad); }
/* A Settings card inside a Studio card (an artist page's skills): no second frame — a line between them instead */
.sf-sec .set-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.sf-sec .set-card + .set-card { padding-top: 20px; border-top: 1px solid var(--card-border); }
.set-card { border-width: 1px; border-style: solid; }
.sf-sec { gap: 16px; }
.wiz__footwrap .wiz__foot { border-color: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.wiz__card { border-color: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
/* Soft teal panels inside a card */
.sf-audio { border-radius: var(--card-radius-sm); background: var(--card-tint); }
.sdz { border-radius: var(--card-radius); background: var(--card-tint); }
/* "+ Add a …" under a list keeps its one size in every card, whatever a page's own .btn rule says (Settings made it 40px
   and 14px — #200); its look is in forms.css (.sf-addrole, .lk-add) */
.btn.sf-addrole { height: 36px; min-height: 36px; min-width: 0; font-size: 13px; }
/* Choice tiles (release type, page kind): lift and turn teal on hover */
.rtype { padding: 28px 22px; }
.rtype:hover { border-color: var(--color-primary); box-shadow: 0 14px 30px -12px rgb(var(--teal-600-rgb) / .35); }

/* ---- Card headings: an icon chip, the title, the line under it ---- */
.sf-sec > h3, .sf-sec__bar h3, .sf-sec__bar h2, .sf-video summary h3, .set-card__title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.set-card__bar { margin-bottom: 0; }
.sf-sec .sf-hint, .set-card__hint { font-size: 13px; line-height: 1.55; }
[data-ic] { display: flex; align-items: center; gap: 12px; }
[data-ic]::before {
  content: ""; flex: none; width: 38px; height: 38px; border-radius: 12px;
  background: var(--color-primary-soft) var(--ic) center / 19px no-repeat;
}
/* The hint under an iconed heading lines up with the title, not the icon */
.sf-sec > [data-ic] + .sf-hint, .sf-sec > .sf-sec__bar:has([data-ic]) + .sf-hint { margin-top: -10px; padding-left: 50px; }
.set-card > [data-ic] + .set-card__hint, .set-card__bar:has([data-ic]) + .set-card__hint { margin-top: 2px; padding-left: 50px; }
[data-ic] small { margin-left: 2px; }

/* The icons (lucide-style lines, in --color-primary-strong) */
[data-ic] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2Z'/%3E%3C/svg%3E"); }
[data-ic="about"], [data-ic="basics"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E"); }
[data-ic="album"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
[data-ic="people"], [data-ic="members"], [data-ic="lineup"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
[data-ic="lineup"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3'/%3E%3C/svg%3E"); }
[data-ic="video"], [data-ic="cover-video"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='m10 9 5 3-5 3z'/%3E%3C/svg%3E"); }
[data-ic="details"], [data-ic="booking"], [data-ic="demos"], [data-ic="classes"], [data-ic="space"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E"); }
[data-ic="release"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/%3E%3C/svg%3E"); }
[data-ic="listen"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); }
[data-ic="tracks"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15V6M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12 12H3M16 6H3M12 18H3'/%3E%3C/svg%3E"); }
[data-ic="when"], [data-ic="hours"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
[data-ic="where"], [data-ic="location"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
[data-ic="tickets"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M13 5v2M13 17v2M13 11v2'/%3E%3C/svg%3E"); }
[data-ic="contacts"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); }
[data-ic="photos"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E"); }
[data-ic^="off-"], [data-ic="services"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 2.8a.6.6 0 0 1 1 0l2.6 5.3 5.8.8a.6.6 0 0 1 .3 1l-4.2 4.1 1 5.8a.6.6 0 0 1-.8.6L12 17.7l-5.2 2.7a.6.6 0 0 1-.8-.6l1-5.8-4.2-4.1a.6.6 0 0 1 .3-1l5.8-.8Z'/%3E%3C/svg%3E"); }
[data-ic^="feat-"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='6' height='6' rx='1'/%3E%3Cpath d='m3 17 2 2 4-4M13 6h8M13 12h8M13 18h8'/%3E%3C/svg%3E"); }
[data-ic="account"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E"); }
[data-ic="personal"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M15 8h2M15 12h2M7 16h10'/%3E%3C/svg%3E"); }
[data-ic="password"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
[data-ic="access"], [data-ic="tagging"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.7 9a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1Z'/%3E%3C/svg%3E"); }
[data-ic="artist-info"], [data-ic="music"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
[data-ic="work"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E"); }
[data-ic="links"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
[data-ic="languages"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
[data-ic="genres"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10v3M6 6v11M10 3v18M14 8v7M18 5v13M22 10v3'/%3E%3C/svg%3E"); }
[data-ic="privacy"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
[data-ic="email"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
[data-ic="sms"], [data-ic="whatsapp"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008c8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }

/* ---- Forms (#179) ---- */
/* A value that can't be changed here (a page's type, who an event is posted as): a locked field the same size as the
   others, not loose text beside them */
.eve-host { position: relative; justify-content: center; gap: 2px; min-height: 50px; padding: 6px 42px 6px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-muted); }
.eve-host .sf-label { font-size: 11px; font-weight: 400; line-height: 1.2; color: var(--color-text-subtle); }
.eve-host strong { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.eve-host::after { content: ""; position: absolute; right: 15px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dafb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
/* A help line belongs to the field above it: tight under that field, the usual gap before the next one — never hanging
   halfway between two fields (#179) */
:is(.sf-sec, .form, .set-grid, .studio-card) > :is(.field, .tagf-wrap, .field--area, .msel, label.field--select, .eve-host, .sf-grid) + :is(.sf-hint, .field-hint, .set-hint) { margin-top: -9px; }
/* Two to a row: a field left on its own takes the whole row (never a lone half-width field beside a gap) */
.sf-grid > :last-child:nth-child(odd), .pg-fields > .pg-wide { grid-column: 1 / -1; }
/* A short note beside a heading ("up to 30") instead of a line under it */
.sf-sec__bar h2 small, .sf-sec > h3 small { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--color-text-subtle); }
/* What's still missing: chips read left to right, never centred */
.sf-miss__item { text-align: left; }
@media (min-width: 1180px) {
  .wiz__side .sf-miss { flex-direction: column; align-items: stretch; gap: 4px; }
  .wiz__side .sf-miss__item { justify-content: flex-start; width: 100%; padding: 7px 10px; border-radius: 10px; line-height: 1.35; }
  .wiz__side .sf-miss + .sf-miss { margin-top: 6px; }
}

/* ---- Playlist mosaics (#179): a picture whose file is missing is dropped; the ones left fill the square — no empty quarters ---- */
:is(.sh-mosaic, .pl-mosaic, .sp-mosaic, .fmosaic) { grid-auto-rows: 1fr; }
:is(.sh-mosaic, .pl-mosaic, .sp-mosaic, .fmosaic):has(> img:only-child) { grid-template-columns: 1fr; }
:is(.sh-mosaic, .pl-mosaic, .sp-mosaic, .fmosaic):has(> img:nth-child(2):last-child) { grid-template-rows: 1fr; }
:is(.sh-mosaic, .pl-mosaic, .sp-mosaic, .fmosaic) > img:first-child:nth-last-child(3) { grid-row: span 2; }

/* ---- Studio lists (Singles, Albums, Previews, Credited On): the rows sit in one card ---- */
.slist { gap: 0; padding: 6px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); }
.slist > li + li { border-top: 1px solid var(--tg-50); }
.slist__item { border-radius: 12px; }
.slist__item:hover { background: var(--card-tint); }

@media (max-width: 767px) {
  :root { --card-pad: 18px; --card-radius: 18px; }
  [data-ic]::before { width: 34px; height: 34px; border-radius: 11px; background-size: 17px; }
  .sf-sec > [data-ic] + .sf-hint, .sf-sec > .sf-sec__bar:has([data-ic]) + .sf-hint { padding-left: 0; margin-top: -6px; }
  .set-card > [data-ic] + .set-card__hint, .set-card__bar:has([data-ic]) + .set-card__hint { padding-left: 0; margin-top: 8px; }
}

/* ---- Long text: N lines, then "Read More" / "Show Less" (app.js moreText, data-lines="N", #203) ------------------ */
.more-text:not(.is-open) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: var(--more-lines, 3); }
.more-btn { display: block; align-self: flex-start; width: fit-content; margin-top: 4px; padding: 0; font-size: 13px; font-weight: 500; text-align: left; }   /* under the text, at its left — in any layout */
.more-btn[hidden] { display: none; }

/* ---- artistplus.css ---- */
/* =====================================================================
   Artist Plus, redesigned (decision #296) — one look for everything an artist buys and tracks:
     .ck-*   the full-screen checkout (Start a Distribution · Promote Your Music · Upgrade) — steps on the left, the
             cart on the right (a sticky card), a total bar on phones (plus-checkout.js)
     .ap-*   the pages: Orders (order cards, the "order placed" card), Marketing (tabs, campaign cards), Privileges
             (the plan path, pending credits, collapsible sections, credit history), the cart banner, the side panel
             with a chat (order and campaign messages)
   The site's tokens only (tokens.css, cards.css): teal, the card border / radius / shadow — no new colours.
   ===================================================================== */

/* ---- Shared bits ---- */
.ap-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.ap-ic svg, .ck svg, .ap-page svg, .ap-panel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-ic img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ck-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ck-price b { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--color-text); font-variant-numeric: tabular-nums; }
.ck-price s { font-size: 13px; color: var(--color-text-subtle); }
.ck-off { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.ck-price small { flex-basis: 100%; font-size: 12px; color: var(--color-text-subtle); }
/* #302: the struck price and its % off on their own line, under the price, on the same side as it */
.ck-price__was { display: flex; flex-basis: 100%; align-items: center; justify-content: inherit; gap: 6px; }
.ap-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ap-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* var(--teal-600): the site's teal for anything open — outlined when it waits on you, filled once it's moving — green when done, grey when off */
.ap-pill--todo { background: #fff; color: var(--color-link-hover); box-shadow: inset 0 0 0 1px var(--teal-300); }
.ap-pill--wait { background: var(--color-primary-soft); color: var(--color-link-hover); }
.ap-pill--live { background: var(--color-primary-soft); color: var(--color-link); }
.ap-pill--off { background: var(--tg-50); color: var(--tg-600); }
.ap-btn-soft { background: var(--color-primary-soft); color: var(--color-link-hover); border-color: transparent; }
.ap-btn-soft:hover { background: var(--teal-100); color: var(--color-link-hover); }

/* =====================================================================
   The checkout (full screen)
   ===================================================================== */
.ck { position: fixed; inset: 0; z-index: 320; display: flex; flex-direction: column; background: #f5f9f9; animation: ck-in var(--dur-med) var(--ease); }
@keyframes ck-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body.ck-open { overflow: hidden; }
.ck-top { display: flex; flex: none; align-items: center; gap: 16px; height: 72px; padding: 0 max(var(--gutter), calc((100vw - 1240px) / 2)); border-bottom: 1px solid var(--card-border); background: #fff; box-shadow: 0 1px 0 rgb(var(--teal-900-rgb) / .03); }
.ck-brand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.ck-brand svg { width: 16px; height: 16px; }
.ck-top__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ck-top__t h1 { margin: 0; overflow: hidden; font-family: var(--font-body); font-size: 19px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ck-top__t p { margin: 1px 0 0; overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.ck-x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--color-control); border-radius: 50%; background: #fff; color: var(--color-text); cursor: pointer; }
.ck-x:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.ck-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; max-width: 1240px; margin: 0 auto; padding: 28px var(--gutter) 48px; }
.ck-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ck-done { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: var(--color-primary-soft); color: var(--teal-800); font-weight: 600; }
.ck-done svg { width: 22px; height: 22px; }

/* A step: a numbered card */
.ck-step { padding: 24px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); }
.ck-step__h { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ck-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 14px; font-weight: 700; }
.ck-step.is-done .ck-num { background: var(--color-primary); color: #fff; }
.ck-num svg { width: 16px; height: 16px; stroke-width: 3; }
.ck-step__h h2 { margin: 3px 0 0; font-family: var(--font-body); font-size: 17px; font-weight: 700; }
.ck-step__h p { margin: 3px 0 0; font-size: 13px; color: var(--color-text-muted); }
.ck-step__h > div { flex: 1; min-width: 0; }
.ck-step__opt { margin-left: auto; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--tg-50); color: var(--tg-600); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Choice tiles (release type) */
.ck-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ck-type { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1.5px solid var(--tg-100); border-radius: 16px; background: #fff; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.ck-type:hover { border-color: var(--teal-200); }
.ck-type.is-on { border-color: var(--color-primary); background: var(--surface-hover); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ck-type__row { display: flex; align-items: center; gap: 14px; }
.ck-type__t { display: flex; flex: 1; flex-direction: column; }
.ck-type__t strong { font-size: 16px; }
.ck-type__t small { font-size: 13px; color: var(--color-text-muted); }
.ck-radio { position: relative; flex: none; width: 22px; height: 22px; border: 2px solid var(--tg-300); border-radius: 50%; background: #fff; }
.is-on > .ck-radio, .is-on > * > .ck-radio, .is-on .ck-opt__top .ck-radio { border-color: var(--color-primary); }
.is-on > .ck-radio::after, .is-on > * > .ck-radio::after, .is-on .ck-opt__top .ck-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--color-primary); }
.ck-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--tg-200); font-size: 14px; font-weight: 500; cursor: default; }
.ck-stepper { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--tg-200); border-radius: 12px; background: #fff; }
.ck-stepper button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; background: none; color: var(--color-link-hover); cursor: pointer; }
.ck-stepper button:hover { background: var(--color-primary-soft); }
.ck-stepper svg { width: 16px; height: 16px; }
.ck-stepper input { width: 44px; height: 38px; border: 0; border-inline: 1px solid var(--tg-100); font: inherit; font-weight: 700; text-align: center; -moz-appearance: textfield; }
.ck-stepper input::-webkit-outer-spin-button, .ck-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The release picker: a card dropdown with artwork */
.ck-select { position: relative; }
.ck-select__btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; border: 1.5px solid var(--tg-100); border-radius: 16px; background: #fff; text-align: left; cursor: pointer; }
.ck-select__btn:hover, .ck-select.is-open .ck-select__btn { border-color: var(--color-primary); }
.ck-select.is-open .ck-select__btn { box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ck-select__btn > svg:last-child { width: 20px; height: 20px; margin-left: auto; color: var(--color-text-subtle); transition: transform var(--dur-fast); }
.ck-select.is-open .ck-select__btn > svg:last-child { transform: rotate(180deg); }
.ck-rel { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ck-rel strong { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.ck-rel small { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.ck-art { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; overflow: hidden; width: 52px; height: 52px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.ck-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-select__list { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; right: 0; max-height: 340px; overflow-y: auto; margin: 0; padding: 6px; border: 1px solid var(--card-border); border-radius: 16px; background: #fff; list-style: none; box-shadow: 0 22px 44px -18px rgb(var(--teal-900-rgb) / .35); }
.ck-select__list button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
.ck-select__list button:hover { background: var(--card-tint); }
.ck-select__list button.is-on { background: var(--teal-50); }
.ck-select__list .ck-art { width: 44px; height: 44px; border-radius: 10px; }
.ck-select__list button > svg:last-child { width: 18px; height: 18px; margin-left: auto; color: var(--color-link); }
.ck-select__list li + li.ck-select__new { margin-top: 4px; padding-top: 4px; border-top: 1px solid #edf2f2; }

/* No matching release · Upload Now / Upload Later */
.ck-nomatch { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 14px; padding: 16px 18px; border: 1.5px dashed var(--tg-200); border-radius: 16px; background: var(--card-tint); }
.ck-select + .ck-nomatch { margin-top: 12px; }
.ck-nomatch > div { display: flex; flex: 1 1 260px; flex-direction: column; }
.ck-nomatch strong { font-size: 15px; }
.ck-nomatch small { font-size: 13px; color: var(--color-text-muted); }
.ck-nomatch__act { display: flex; flex: none !important; flex-direction: row !important; gap: 10px; }
.ck-up { min-height: 42px; padding: 0 18px; border: 1px solid var(--tg-100); border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-text); cursor: pointer; }
.ck-up:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.ck-up.is-on { border-color: transparent; background: var(--color-primary-soft); color: var(--color-link-hover); }

/* Segmented choices (label, YouTube region / ad, build or AI) */
.ck-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--color-surface-muted); }   /* the site's .seg look (var(--teal-600)) */
.ck-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; font-size: 13px; color: var(--color-text-muted); cursor: pointer; }
.ck-seg button.is-on { background: #fff; color: var(--color-link-hover); font-weight: 600; box-shadow: var(--shadow-sm); }
.ck-seg svg { width: 16px; height: 16px; }
.ck-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ck-row + .ck-row, .ck-row + .ck-reach, .ck-field + .ck-row, .ck-note + .ck-seg, .ck-seg + .ck-row { margin-top: 14px; }
.ck-lbl { font-size: 14px; font-weight: 600; }

/* Package / option rows (Rohit, #296: one per row — the prices line up on the right, no card stretches another):
   the tick or radio · icon, name and the line under it · the price; a slider or list under the name */
.ck-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ck-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 18px 20px; border: 1.5px solid var(--tg-100); border-radius: 16px; background: #fff; cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); }
.ck-opt:hover { border-color: var(--teal-200); }
.ck-opt.is-on { border-color: var(--color-primary); background: var(--surface-hover); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ck-opt input[type=radio], .ck-opt input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.ck-opt > .ck-radio, .ck-opt > .ck-check { grid-column: 1; grid-row: 1; }
.ck-opt__body { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ck-opt__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ck-opt__txt strong { font-size: 15px; line-height: 1.35; }
.ck-opt__sub { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.ck-opt__price { grid-column: 3; grid-row: 1; max-width: 230px; }
.ck-opt__price .ck-price { justify-content: flex-end; text-align: right; }
.ck-opt > .ck-range { grid-column: 2 / -1; grid-row: 2; }
.ck-opt__txt ul { margin-top: 6px; }
.ck-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn-text); font-size: 11px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.ck-tag--teal { background: var(--color-primary-soft); color: var(--color-link-hover); }
.ck-opt ul { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--color-text-muted); }
.ck-opt li { display: flex; gap: 8px; }
.ck-opt li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--color-link); stroke-width: 2.5; }
.ck-opt.is-dim { opacity: .55; cursor: default; }
.ck-check { position: relative; flex: none; width: 22px; height: 22px; border: 2px solid var(--tg-300); border-radius: 7px; background: #fff; }
.is-on .ck-check { border-color: var(--color-primary); background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
/* The range (pack size, YouTube reach): the fill follows the thumb (--p), drawn without redrawing the card */
.ck-range { margin-top: 4px; }
.ck-range input { width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.ck-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--color-primary) 0 var(--p), var(--tg-100) var(--p) 100%); }
.ck-range input::-moz-range-track { height: 6px; border-radius: 6px; background: var(--tg-100); }
.ck-range input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--color-primary); }
.ck-range input::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; border: 3px solid #fff; border-radius: 50%; background: var(--color-primary); box-shadow: 0 2px 6px rgb(var(--teal-900-rgb) / .3); -webkit-appearance: none; }
.ck-range input::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: var(--color-primary); box-shadow: 0 2px 6px rgb(var(--teal-900-rgb) / .3); }
.ck-ticks { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--color-text-subtle); }
.ck-ticks span.is-on { color: var(--color-link-hover); }
.ck-reach { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1.5px solid var(--color-primary); border-radius: 16px; background: var(--surface-hover); }
.ck-reach__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.ck-reach__top strong { display: block; font-size: 18px; }
.ck-reach__top small { font-size: 13px; color: var(--color-text-muted); }
/* the price's "+ GST" line counts in its width, so it sits flush right like every other price beside a choice (#301) */
.ck-reach__top .ck-price { justify-content: flex-end; text-align: right; }
.ck-reach__top [data-ck-ytprice] { margin-left: auto; }     /* on its own line (a narrow card) it stays at the right edge too */

/* What's covered (a plan, credits) */
.ck-wallet { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #c8ebd8; border-radius: 16px; background: #f0fbf5; }
.ck-wallet .ap-ic { background: var(--color-primary-soft); color: var(--color-link); }
.ck-wallet strong { display: block; font-size: 15px; }
.ck-wallet small { font-size: 13px; color: var(--color-text-muted); }
.ck-wallet--part { border-color: var(--card-border); background: var(--surface-hover); }
.ck-wallet--part .ap-ic { background: var(--color-primary-soft); color: var(--color-link-hover); }
.ck-label { margin: 18px 0 10px; font-size: 14px; font-weight: 700; }
.ck-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-link-hover); cursor: pointer; }
.ck-more svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.ck-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ck-more + .ck-opts { margin-top: 14px; }
.ck-note { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--tg-50); font-size: 13px; color: var(--color-text-muted); }
.ck-note--warn { background: var(--warn-soft); color: var(--warn-text); }
.ck-note a { font-weight: 600; color: inherit; }
.ck-offer { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(100deg, var(--warn-soft), var(--warn-soft)); color: var(--warn-text); box-shadow: inset 0 0 0 1px var(--warn-border); }
.ck-offer svg { width: 24px; height: 24px; flex: none; color: #e39b12; }
.ck-offer strong { display: block; font-size: 15px; }
.ck-offer small { font-size: 13px; opacity: .85; }
.ck-offer [data-cd] { font-variant-numeric: tabular-nums; }
.ck-field { margin: 0; }
.ck-ai { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 14px; }
.ck-ai .field { flex: 1 1 240px; margin: 0; }
.ck-ai .btn { min-height: 50px; }
.ck-calls { display: flex; flex-wrap: wrap; gap: 10px; }
.ck-call { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1.5px solid var(--tg-100); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.ck-call.is-on { border-color: var(--color-primary); background: var(--surface-hover); }
.ck-call input { position: absolute; opacity: 0; pointer-events: none; }
.ck-skel { display: block; height: 120px; border-radius: 16px; }

/* ---- The cart (right) ---- */
.ck-side { position: sticky; top: 28px; }
.ck-cart { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); }
.ck-cart__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ck-cart__h h2 { margin: 0; font-family: var(--font-body); font-size: 18px; font-weight: 700; }
.ck-cart__h span { font-size: 13px; color: var(--color-text-muted); }
.ck-cart .ck-offer { margin-bottom: 14px; padding: 12px 14px; }
.ck-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ck-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--tg-50); }
.ck-line:first-child { padding-top: 0; }
.ck-line .ap-ic, .ck-line .ck-art { width: 42px; height: 42px; border-radius: 12px; }
.ck-line__t { display: flex; flex-direction: column; min-width: 0; }
.ck-line__t strong { font-size: 14px; line-height: 1.35; }
.ck-line__t small { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.4; color: var(--color-text-muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ck-line__t button { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-text-subtle); cursor: pointer; }
.ck-line__t button:hover { color: var(--danger); }
.ck-line__p { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.ck-line__p b { font-size: 14px; }
.ck-line__p s { font-size: 12px; color: var(--color-text-subtle); }
.ck-line__p em { font-size: 11px; font-style: normal; font-weight: 700; color: var(--color-link-hover); }
.ck-line--free .ck-line__p b { color: var(--color-link); }
.ck-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 8px; text-align: center; color: var(--color-text-muted); }
.ck-empty .ap-ic { width: 56px; height: 56px; border-radius: 18px; }
.ck-empty strong { color: var(--color-text); }
.ck-empty small { font-size: 13px; }
.ck-totals { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.ck-totals > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ck-totals dt { color: var(--color-text-muted); }
.ck-totals dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-totals .is-save dt, .ck-totals .is-save dd { color: var(--color-link-hover); }
.ck-totals__t { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--tg-100); }
.ck-totals__t dt { font-size: 15px; font-weight: 700; color: var(--color-text); }
.ck-totals__t dd { font-size: 22px; font-weight: 700; }
.ck-totals__t dd.is-free { font-size: 16px; color: var(--color-link); }
.ck-totals.is-busy dd { opacity: .45; }
.ck-checkout { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 18px; border: 0; border-radius: 14px; background: var(--color-primary); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 22px -10px rgb(var(--teal-600-rgb) / .7); transition: background var(--dur-fast), transform .1s; }
.ck-checkout:hover { background: var(--color-primary-strong); }
.ck-checkout:active:not([disabled]) { transform: scale(.98); }
.ck-checkout[disabled] { background: var(--tg-300); box-shadow: none; cursor: not-allowed; }
.ck-checkout svg { width: 20px; height: 20px; }
.ck-trust { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-subtle); }
.ck-trust svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
/* #302: the terms, as the sign-up form has them — a locked switch (forms.css .form__opt.is-locked) */
.ck-agree { margin-top: 16px; }
/* #301: on Infinite — "Distributing for another label?" under the plan, and the note once another label is picked */
.ck-labelsw { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-link-hover); cursor: pointer; }
.ck-labelsw svg, .ck-labelnote > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ck-labelsw:hover { text-decoration: underline; text-underline-offset: 3px; }
.ck-labelnote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: var(--tg-50); font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }
.ck-labelnote span { flex: 1 1 220px; }
.ck-labelnote b { color: var(--color-text); }
.ck-labelnote .xp-link { margin: 0; font-size: 13px; color: var(--color-link-hover); }
.ck-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.ck-err[hidden] { display: none; }
.ck-bar { display: none; }

@media (max-width: 1023px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 110px; }
  .ck-side { position: static; }
  .ck-bar { position: fixed; z-index: 2; inset: auto 0 0 0; display: flex; align-items: center; gap: 12px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--card-border); background: #fff; box-shadow: 0 -10px 24px -14px rgb(var(--teal-900-rgb) / .3); }
  .ck-bar__t { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
  .ck-bar__t small { font-size: 12px; color: var(--color-text-muted); }
  .ck-bar__t strong { font-size: 18px; font-variant-numeric: tabular-nums; }
  .ck-bar .ck-checkout { width: auto; min-height: 48px; margin: 0; padding: 0 22px; }
}
@media (max-width: 640px) {
  .ck-top { height: 64px; gap: 10px; }
  .ck-brand span { display: none; }
  .ck-top__t h1 { font-size: 17px; }
  .ck-grid { padding-top: 16px; gap: 16px; }
  .ck-step { padding: 18px; }
  .ck-types { grid-template-columns: minmax(0, 1fr); }
  .ck-opt { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .ck-opt__price { grid-column: 2; grid-row: 2; max-width: none; }
  .ck-opt__price .ck-price { justify-content: flex-start; text-align: left; }
  .ck-opt > .ck-range { grid-row: 3; }
  .ck-opt__body .ap-ic { width: 38px; height: 38px; border-radius: 12px; }
  .ck-nomatch__act { width: 100%; }
  .ck-nomatch__act .ck-up { flex: 1; }
}

/* =====================================================================
   The side panel (order / campaign details and chat)
   ===================================================================== */
.ap-panel { position: fixed; inset: 0; z-index: 330; display: flex; justify-content: flex-end; background: rgb(var(--teal-950-rgb) / .32); animation: ap-fade var(--dur-fast) var(--ease); }
@keyframes ap-fade { from { opacity: 0; } }
.ap-panel__box { display: flex; flex-direction: column; width: min(520px, 100%); height: 100%; background: #fff; box-shadow: -20px 0 40px -20px rgb(var(--teal-900-rgb) / .35); animation: ap-slide var(--dur-med) var(--ease); }
@keyframes ap-slide { from { transform: translateX(30px); opacity: .5; } }
.ap-panel__h { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--card-border); }
.ap-panel__h > div { flex: 1; min-width: 0; }
.ap-panel__h h2 { margin: 0; font-family: var(--font-body); font-size: 18px; font-weight: 700; }
.ap-panel__h p { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted); }
.ap-panel__b { flex: 1; overflow-y: auto; padding: 20px 22px; }
.ap-panel__f { padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--card-border); }
/* The chat */
.ap-msgs { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ap-msg { display: flex; flex-direction: column; max-width: 84%; }
.ap-msg__b { padding: 11px 15px; border-radius: 16px 16px 16px 4px; background: #f1f5f5; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-msg small { margin-top: 4px; font-size: 11px; color: var(--color-text-subtle); }
.ap-msg--artist { align-self: flex-end; align-items: flex-end; }
.ap-msg--artist .ap-msg__b { border-radius: 16px 16px 4px 16px; background: var(--color-primary); color: #fff; }
.ap-msgs .ap-msg .ap-msg__who { align-self: flex-start; display: inline-block; margin-bottom: 5px; padding: 2px 9px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-link); font-size: 11px; font-weight: 600; line-height: 1.5; }   /* a chip, not a bar (#305, Rohit) */
.ap-chat-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; text-align: center; color: var(--color-text-muted); font-size: 14px; }
.ap-say { display: flex; align-items: flex-end; gap: 10px; }
.ap-say textarea { flex: 1; min-height: 46px; max-height: 140px; padding: 12px 14px; border: 1.5px solid var(--tg-100); border-radius: 14px; font: inherit; font-size: 14px; resize: none; }
.ap-say textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ap-say button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 14px; background: var(--color-primary); color: #fff; cursor: pointer; }
.ap-say button[disabled] { opacity: .5; }
.ap-closed { margin: 0; font-size: 13px; color: var(--color-text-muted); text-align: center; }

/* =====================================================================
   The pages
   ===================================================================== */
.ap-page { display: flex; flex-direction: column; gap: 20px; }
/* The cart banner (your cart is waiting) */
.ap-cartbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 18px; border: 1px solid var(--teal-200); border-radius: 18px; background: linear-gradient(100deg, var(--teal-50), #f8fdfd); }
.ap-cartbar > div { display: flex; flex: 1 1 220px; flex-direction: column; }
.ap-cartbar strong { font-size: 15px; }
.ap-cartbar small { font-size: 13px; color: var(--color-text-muted); }
.ap-cartbar .btn svg { width: 18px; height: 18px; }
/* "Order placed" */
.ap-placed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; padding: 24px; border: 1px solid #c8ebd8; border-radius: var(--card-radius); background: linear-gradient(120deg, #f0fbf5, #fff 70%); box-shadow: var(--card-shadow); }
.ap-placed__ic { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-link); color: #fff; }
.ap-placed__ic svg { width: 28px; height: 28px; stroke-width: 3; }
.ap-placed h2 { margin: 4px 0 0; font-family: var(--font-body); font-size: 20px; font-weight: 700; }
.ap-placed p { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.ap-next { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: n; }
.ap-next li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 14px 52px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--tg-100); font-size: 13px; color: var(--color-text-muted); }
.ap-next li::before { counter-increment: n; content: counter(n); position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 13px; font-weight: 700; }
.ap-next li.is-done::before { content: "✓"; background: var(--color-link); color: #fff; }
.ap-next strong { font-size: 14px; color: var(--color-text); }
.ap-placed__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Order cards */
.ap-orders { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ap-oc { border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); }
.ap-oc.is-hl { box-shadow: 0 0 0 3px var(--color-primary-soft), var(--card-shadow); border-color: var(--color-primary); }
.ap-oc__h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 20px 22px; }
.ap-oc__t { display: flex; flex-direction: column; min-width: 0; }
.ap-oc__t strong { font-size: 16px; letter-spacing: .01em; }
.ap-oc__t small { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.ap-oc__amt { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.ap-oc__amt strong { font-size: 18px; }
.ap-oc__amt small { font-size: 12px; color: var(--color-text-muted); }
.ap-oc__amt small.is-due { color: var(--warn-text); font-weight: 600; }
.ap-oc__amt strong.is-off { font-weight: 600; color: var(--color-text-subtle); text-decoration: line-through; }
.ap-oc__b { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0; border-top: 1px solid var(--tg-50); }
.ap-oc__items { padding: 18px 22px; }
.ap-oc__items h3, .ap-oc__sum h3 { margin: 0 0 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.ap-items { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ap-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ap-item .ap-ic, .ap-item .ck-art { width: 40px; height: 40px; border-radius: 11px; }
.ap-item__t { display: flex; flex-direction: column; min-width: 0; }
.ap-item__t strong { font-size: 14px; }
.ap-item__t small { font-size: 12px; color: var(--color-text-muted); }
.ap-item__p { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-item a { color: inherit; text-decoration: none; }
.ap-item a:hover strong { color: var(--color-link-hover); }
.ap-oc__sum { padding: 18px 22px; border-left: 1px solid var(--tg-50); background: var(--surface-hover); border-radius: 0 0 var(--card-radius) 0; }
.ap-oc__sum dl { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.ap-oc__sum dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.ap-oc__sum dt { color: var(--color-text-muted); }
.ap-oc__sum dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-oc__sum .is-t { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--tg-100); }
.ap-oc__sum .is-t dt { font-weight: 700; color: var(--color-text); }
.ap-oc__sum .is-t dd { font-size: 16px; }
.ap-oc__f { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 22px; border-top: 1px solid var(--tg-50); }
.ap-track { display: flex; flex: 1 1 340px; align-items: flex-start; gap: 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.ap-track li { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--color-text-subtle); text-align: center; }
.ap-track li::before { content: ""; z-index: 1; width: 12px; height: 12px; border: 2px solid var(--tg-200); border-radius: 50%; background: #fff; }
.ap-track li + li::after { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--tg-100); }
.ap-track li.is-done { color: var(--color-text); }
.ap-track li.is-done::before { border-color: var(--color-primary); background: var(--color-primary); }
.ap-track li.is-done + li.is-done::after, .ap-track li.is-done + li.is-now::after { background: var(--color-primary); }
.ap-track li.is-now { color: var(--color-link-hover); }
.ap-track li.is-now::before { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
.ap-track li small { font-size: 10px; font-weight: 500; color: var(--color-text-subtle); }
.ap-oc__act { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ap-oc__act .btn svg { width: 16px; height: 16px; }
.ap-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 700; }
.ap-oc__tog { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-link-hover); cursor: pointer; }
.ap-oc__tog svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.ap-oc__tog[aria-expanded="true"] svg { transform: rotate(180deg); }
.ap-oc__b[hidden] { display: none; }
@media (max-width: 860px) {
  .ap-oc__h { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ap-oc__h .ap-pill { grid-column: 2; grid-row: 2; justify-self: start; }
  .ap-oc__amt { grid-row: 1 / span 2; grid-column: 3; }
  .ap-oc__b { grid-template-columns: minmax(0, 1fr); }
  .ap-oc__sum { border-left: 0; border-top: 1px solid var(--tg-50); border-radius: 0; }
  .ap-next { grid-template-columns: minmax(0, 1fr); }
  .ap-oc__act { margin-left: 0; width: 100%; }
}

/* Marketing: tabs and campaign cards */
.ap-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ap-tabbar { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--tg-50); }
.ap-tabbar button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.ap-tabbar button b { min-width: 22px; padding: 1px 7px; border-radius: 10px; background: var(--tg-100); font-size: 12px; color: var(--color-text-muted); }
.ap-tabbar button.is-on { background: #fff; color: var(--color-link-hover); box-shadow: 0 1px 2px rgb(var(--teal-900-rgb) / .1), 0 4px 10px -4px rgb(var(--teal-900-rgb) / .2); }
.ap-tabbar button.is-on b { background: var(--color-primary-soft); color: var(--color-link-hover); }
.ap-camps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ap-camp { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); }
.ap-camp__h { display: flex; align-items: flex-start; gap: 14px; }
.ap-camp__h > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ap-camp__h strong { font-size: 15px; line-height: 1.35; }
.ap-camp__h small { overflow: hidden; font-size: 13px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.ap-camp .ap-track { flex: none; padding: 6px 0 2px; }
.ap-camp__f { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--tg-50); font-size: 13px; color: var(--color-text-muted); }
.ap-camp__f .btn svg { width: 16px; height: 16px; }
.ap-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; border: 1px dashed var(--tg-200); border-radius: var(--card-radius); background: #fff; text-align: center; }
.ap-empty .ap-ic { width: 60px; height: 60px; border-radius: 20px; }
.ap-empty strong { font-size: 17px; }
.ap-empty p { max-width: 440px; margin: 0; font-size: 14px; color: var(--color-text-muted); }
.ap-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.ap-facts > div { padding: 12px 14px; border-radius: 12px; background: #f5f9f9; }
.ap-facts dt { font-size: 12px; color: var(--color-text-subtle); }
.ap-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.ap-facts > .is-wide { grid-column: 1 / -1; }
.ap-subh { margin: 0 0 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
@media (max-width: 860px) { .ap-camps { grid-template-columns: minmax(0, 1fr); } .ap-tabbar { width: 100%; overflow-x: auto; } }

/* Privileges: the plan path, pending, collapsible sections, credit history */
.ap-card { padding: 24px; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); }
.ap-card > h2, .ap-card__h h2 { margin: 0; font-family: var(--font-body); font-size: 17px; font-weight: 700; }
.ap-card__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 18px; }
.ap-card__h small { font-size: 13px; color: var(--color-text-muted); }
.ap-path { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ap-path::before { content: ""; position: absolute; top: 31px; left: 10%; right: 10%; height: 2px; background: var(--tg-100); }
.ap-lvl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 16px; border: 1.5px solid transparent; border-radius: 16px; background: var(--surface-hover); text-align: center; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.ap-lvl:hover { border-color: var(--tg-200); }
.ap-lvl.is-sel { border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px var(--color-primary-soft); }
.ap-lvl__dot { z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--tg-300); border-radius: 50%; background: #fff; color: #fff; }
.ap-lvl__dot svg { width: 14px; height: 14px; stroke-width: 3.5; }
.ap-lvl.is-past { opacity: .7; }
.ap-lvl.is-past .ap-lvl__dot { border-color: var(--teal-300); background: var(--teal-300); }
.ap-lvl.is-here .ap-lvl__dot { border-color: var(--color-primary); box-shadow: 0 0 0 5px var(--color-primary-soft); }
.ap-lvl.is-here .ap-lvl__dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); }
.ap-lvl strong { font-size: 14px; line-height: 1.3; }
.ap-lvl__r { font-size: 20px; font-weight: 700; color: var(--color-link-hover); }
.ap-lvl.is-past .ap-lvl__r { color: var(--color-text-muted); }
.ap-lvl small { font-size: 12px; color: var(--color-text-muted); }
.ap-lvl__tag { margin-top: 2px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.ap-lvl.is-here .ap-lvl__tag { background: var(--color-primary); color: #fff; }
.ap-lvl.is-past .ap-lvl__tag { background: var(--teal-100); color: var(--tg-600); }
.ap-lvl.is-lock .ap-lvl__tag { background: var(--tg-50); color: var(--tg-600); }
.ap-plandet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--card-tint); }
.ap-plandet h3 { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 700; }
.ap-plandet ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.ap-plandet li { display: flex; gap: 8px; }
.ap-plandet li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--color-link); stroke-width: 2.5; }
.ap-plandet__act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ap-plandet__act .btn svg { width: 16px; height: 16px; }
.ap-note { margin: 14px 0 0; font-size: 13px; color: var(--color-text-muted); }
.ap-pending { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--warn-border); border-radius: 18px; background: var(--warn-soft); }
.ap-pending__h { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--warn-text); }
.ap-pending__h svg { width: 20px; height: 20px; color: #e39b12; }
.ap-pending ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ap-pending li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.ap-pending li small { color: var(--color-text-muted); }
.ap-acc { border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); }
.ap-acc > summary { display: flex; align-items: center; gap: 14px; padding: 18px 22px; list-style: none; cursor: pointer; }
.ap-acc > summary::-webkit-details-marker { display: none; }
.ap-acc > summary > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ap-acc > summary strong { font-size: 16px; }
.ap-acc > summary small { font-size: 13px; color: var(--color-text-muted); }
.ap-acc > summary > svg:last-child { width: 20px; height: 20px; flex: none; color: var(--color-text-subtle); transition: transform var(--dur-fast); }
.ap-acc[open] > summary > svg:last-child { transform: rotate(180deg); }
.ap-acc__b { padding: 0 22px 20px 80px; }
.ap-ladder { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ap-ladder li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface-hover); font-size: 14px; }
.ap-ladder li svg { width: 16px; height: 16px; flex: none; color: var(--color-text-subtle); }
.ap-ladder li.is-done { background: var(--color-primary-soft); }
.ap-ladder li.is-done svg { color: var(--color-link); stroke-width: 3; }
.ap-bar { display: block; height: 8px; margin: 12px 0; overflow: hidden; border-radius: 8px; background: var(--tg-100); }
.ap-bar b { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.ap-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ap-table th { padding: 0 12px 10px 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; color: var(--color-text-subtle); }
.ap-table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--tg-50); vertical-align: middle; }
.ap-table td:last-child, .ap-table th:last-child { padding-right: 0; text-align: right; }
.ap-table td small { display: block; font-size: 12px; color: var(--color-text-muted); }
.ap-cr { display: inline-flex; min-width: 38px; justify-content: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700; }
.ap-cr--in { background: var(--color-primary-soft); color: var(--color-link); }
.ap-cr--out { background: var(--tg-50); color: var(--tg-700); }
.ap-cr--back { background: var(--warn-soft); color: var(--warn-text); }
.ap-more-row { display: flex; justify-content: center; margin-top: 12px; }
@media (max-width: 1100px) { .ap-path { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ap-path::before { display: none; } }
@media (max-width: 640px) {
  .ap-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-plandet { grid-template-columns: minmax(0, 1fr); }
  .ap-plandet ul { grid-template-columns: minmax(0, 1fr); }
  .ap-plandet__act { align-items: stretch; }
  .ap-acc__b { padding: 0 18px 18px; }
  .ap-card { padding: 18px; }
}

/* =====================================================================
   var(--teal-600) — My Artist Plus rebuilt (xp-*): compact numbered rows (Orders, Campaigns), the support button, the drawer's
   items and bill, Privileges as one sheet (level cards, your plan with its figures, free-upgrade graphics), the
   header's cart. Sizes are a step smaller than #296 so more fits in less space (Rohit). Layouts follow the component's
   own width (container queries), never the device (#180).
   ===================================================================== */
.app-header__cart[hidden] { display: none; }
.xp-page { display: flex; flex-direction: column; gap: 16px; container-type: inline-size; }
.xp-muted { color: var(--color-text-subtle); }
.xp-tabbed > .xp-tabbar { margin-bottom: 18px; }

/* The support button: a person with a headset — grey so it doesn't pull the eye (Rohit, var(--teal-600)), teal with a round tint on hover */
.xp-help { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tg-400); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.xp-help:hover, .xp-help:focus-visible { background: var(--color-primary-soft); color: var(--color-link-hover); }
.xp-help svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xp-help__n { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

/* Segmented filter (All · Live · Pending …) */
/* Segmented tabs (All · Live · Pending …) — the site's own .seg look (studio.css: a pill track, 13px, white pill when picked),
   so Artist Plus, Analytics and Reports share one style (var(--teal-600)); a count rides in a small pill inside */
.xp-seg { display: inline-flex; flex-wrap: nowrap; align-self: flex-start; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; border-radius: var(--radius-pill); background: var(--color-surface-muted); scrollbar-width: none; }
.xp-seg button { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: var(--radius-pill); background: none; font: inherit; font-size: 13px; color: var(--color-text-muted); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.xp-seg button b { min-width: 18px; padding: 0 6px; border-radius: 9px; background: #e7ebec; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; color: var(--color-text-muted); }
.xp-seg button.is-on { background: #fff; color: var(--color-link-hover); font-weight: 600; box-shadow: var(--shadow-sm); }
.xp-seg button.is-on b { background: var(--color-primary-soft); color: var(--color-link-hover); }
.xp-seg--sm button { padding: 6px 14px; }

/* Numbered rows: Orders — the same columns in every row (var(--teal-600)), so every status, amount and button lines up: no. ·
   picture · number and date · where it stands (the middle of the row) · amount · Pay Now (empty when nothing's due) ·
   support · Details */
.xp-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.xp-row { display: grid; grid-template-columns: 24px 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 12px 12px 12px 10px; border: 1px solid var(--card-border); border-radius: 16px; background: #fff;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.xp-orow { grid-template-columns: 24px 44px minmax(0, 1fr) minmax(0, 1fr) 112px 104px auto; }
.xp-row__pay { display: flex; justify-content: flex-end; }
/* Where an order stands: its words with a dot, five small bars under them */
.xp-ost { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* A release's state is a chip, as every other state on the site is — it was plain teal words here (#313). */
.xp-ost__l { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.xp-ost__l::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.xp-ost.is-done .xp-ost__l { background: var(--ok-soft); color: var(--ok); }                                  /* live on the stores */
.xp-ost.is-wait .xp-ost__l, .xp-ost.is-warn .xp-ost__l { background: var(--warn-soft); color: var(--warn-text); }   /* submitted, changes asked for */
.xp-ost.is-wait .xp-ost__l::before { background: #fff; box-shadow: inset 0 0 0 2px currentColor; }
.xp-ost.is-off .xp-ost__l { background: var(--surface-hover); color: var(--color-text-muted); }               /* taken down, or never distributed */
.xp-ost__bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 130px; }
.xp-ost__bar i { height: 4px; border-radius: 4px; background: var(--tg-100); }
.xp-ost__bar i.on { background: var(--color-primary); }
.xp-ost.is-done .xp-ost__l { color: var(--color-link); }
.xp-ost.is-done .xp-ost__bar i.on { background: var(--color-primary); }
.xp-ost.is-off .xp-ost__l { color: var(--tg-500); }
.xp-row:hover { border-color: var(--teal-200); }
.xp-row.is-sel, .xp-camp.is-sel { border-color: var(--color-primary); background: var(--surface-hover); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.xp-row__n { font-size: 13px; font-weight: 700; color: var(--color-text-subtle); text-align: center; font-variant-numeric: tabular-nums; }
.xp-row__pic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.xp-row__pic.do-art { width: 44px; height: 44px; background: var(--tg-50); color: var(--tg-400); }
.xp-row__pic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.xp-row__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.xp-row__main strong { font-size: 14px; letter-spacing: .01em; }
.xp-row__main small { overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.xp-row__main:hover strong { color: var(--color-link-hover); }
.xp-row .ap-pill { padding: 3px 10px; font-size: 11px; }
.xp-row__amt { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.xp-row__amt strong { font-size: 15px; }
.xp-row__amt strong.is-off { font-weight: 600; color: var(--color-text-subtle); text-decoration: line-through; }
.xp-row__amt small { font-size: 12px; color: var(--color-text-muted); }
.xp-row__amt small.is-back { color: var(--color-link); }
.xp-row__act { display: flex; align-items: center; gap: 2px; }
.xp-row__act .btn { margin-right: 4px; }
.xp-more { display: inline-flex; align-items: center; gap: 2px; padding: 8px 8px 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-link-hover); cursor: pointer; }
.xp-more:hover { background: var(--color-primary-soft); }
.xp-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Narrower: the status goes under the order's number, the amount and buttons to the right */
@container (max-width: 820px) {
  .xp-orow { grid-template-columns: 24px 44px minmax(0, 1fr) auto auto auto; grid-template-areas: "n pic main amt pay act" "n pic ost amt pay act"; row-gap: 8px; }
  .xp-orow > .xp-row__n { grid-area: n; } .xp-orow > .xp-row__pic { grid-area: pic; } .xp-orow > .xp-row__main { grid-area: main; }
  .xp-orow > .xp-ost { grid-area: ost; } .xp-orow > .xp-row__amt { grid-area: amt; } .xp-orow > .xp-row__pay { grid-area: pay; } .xp-orow > .xp-row__act { grid-area: act; }
  .xp-orow .xp-row__pay:empty { display: none; }
}
@container (max-width: 560px) {
  .xp-orow { grid-template-columns: 20px 40px minmax(0, 1fr) auto; grid-template-areas: "n pic main amt" "n pic ost ost" ". . pay act"; gap: 8px 12px; padding: 12px 10px 10px 8px; }
  .xp-orow > .xp-row__pic { width: 40px; height: 40px; align-self: start; }
  .xp-orow > .xp-row__n { align-self: start; padding-top: 12px; }
  .xp-orow > .xp-row__pay { justify-content: flex-start; }
  .xp-orow > .xp-row__act { justify-content: flex-end; }
  .xp-ost { flex-direction: row; align-items: center; gap: 10px; }
  .xp-ost__bar { width: 90px; }
}

/* Payout history (#301): the Orders rows — no. · picture · RPT… and date · where it stands · amount · support + Details */
.po-history { margin-top: 26px; }
.po-history__h { margin: 0; font-family: var(--font-body); font-size: 18px; font-weight: 700; }
.po-history__h span { font-size: 14px; font-weight: 500; color: var(--color-text-muted); }
.xp-porow { grid-template-columns: 24px 44px minmax(0, 1fr) minmax(0, 1fr) 150px auto; }
.xp-porow .xp-ost.is-off .xp-ost__bar i.on { background: var(--tg-300); }
@container (max-width: 820px) {
  .xp-porow { grid-template-columns: 24px 44px minmax(0, 1fr) auto auto; grid-template-areas: "n pic main amt act" "n pic ost amt act"; row-gap: 8px; }
  .xp-porow > .xp-row__n { grid-area: n; } .xp-porow > .xp-row__pic { grid-area: pic; } .xp-porow > .xp-row__main { grid-area: main; }
  .xp-porow > .xp-ost { grid-area: ost; } .xp-porow > .xp-row__amt { grid-area: amt; } .xp-porow > .xp-row__act { grid-area: act; }
}
@container (max-width: 560px) {
  .xp-porow { grid-template-columns: 20px 40px minmax(0, 1fr) auto; grid-template-areas: "n pic main amt" "n pic ost ost" ". . . act"; gap: 8px 12px; padding: 12px 10px 10px 8px; }
  .xp-porow > .xp-row__pic { width: 40px; height: 40px; align-self: start; }
  .xp-porow > .xp-row__n { align-self: start; padding-top: 12px; }
  .xp-porow > .xp-row__act { justify-content: flex-end; }
}

/* Numbered cards: Campaigns — the picture by what it is (a video 16:9, a release square, a profile or channel round) */
.xp-camp { display: grid; grid-template-columns: 24px auto minmax(0, 1fr) auto; grid-template-areas: "n pic main side" "foot foot foot foot"; align-items: center; gap: 10px 14px; padding: 14px 14px 10px 10px;
  border: 1px solid var(--card-border); border-radius: 16px; background: #fff; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.xp-camp:hover { border-color: var(--teal-200); }
.xp-camp > .xp-row__n { grid-area: n; }
.xp-thumb { grid-area: pic; position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; overflow: hidden; width: 56px; height: 56px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.xp-thumb--wide { width: 100px; height: 56px; border-radius: 10px; background: var(--tg-900); color: #fff; }
.xp-thumb--round { border-radius: 50%; }
.xp-thumb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-camp__main { grid-area: main; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.xp-camp__eye { overflow: hidden; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-subtle); white-space: nowrap; text-overflow: ellipsis; }
.xp-camp__main strong { overflow: hidden; font-size: 15px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.xp-camp__main:hover strong { color: var(--color-link-hover); }
.xp-camp__line { font-size: 13px; color: var(--color-text-muted); }
.xp-camp__side { grid-area: side; display: flex; align-items: center; gap: 8px; }
.xp-camp__side .ap-pill { padding: 3px 10px; font-size: 11px; }
.xp-camp__foot { grid-area: foot; display: flex; align-items: center; padding: 10px 0 0 38px; border-top: 1px solid var(--tg-50); }
.xp-camp__foot > .xp-track, .xp-camp__foot > .xp-prog { flex: 1 1 auto; }
.xp-camp__foot > .xp-track, .xp-camp__foot > .xp-prog { flex: 1 1 280px; }
.xp-camp__foot > .xp-help { margin-left: auto; }
.xp-camp__foot > .xp-camp__edit + .xp-help { margin-left: 0; }
.xp-camp__edit { margin-left: auto; }
.xp-camp__when { font-size: 12px; color: var(--color-text-subtle); white-space: nowrap; }
.xp-camp__note { flex: 1; margin: 0; font-size: 13px; color: var(--color-text-muted); }
.xp-track--sm li { font-size: 10px; }
.xp-prog__top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--color-text-muted); }
.xp-prog__top b { color: var(--color-link-hover); }
.xp-prog .ap-bar { margin: 6px 0 0; }
@container (max-width: 620px) {
  .xp-camp { grid-template-columns: 20px auto minmax(0, 1fr); grid-template-areas: "n pic main" "n pic side" "foot foot foot"; padding: 12px 10px 10px 8px; }
  .xp-thumb { width: 48px; height: 48px; } .xp-thumb--wide { width: 80px; height: 45px; }
  .xp-camp__side { flex-direction: row; align-items: center; justify-self: start; }
  .xp-camp__foot { padding-left: 0; }
}

/* The drawer: where an order stands, its items, the bill, refunds */
.ap-panel__box--wide { width: min(600px, 100%); }
.ap-panel__h .xp-thumb { width: 48px; height: 48px; } .ap-panel__h .xp-thumb--wide { width: 80px; height: 45px; }
.xp-h3 { margin: 22px 0 6px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.xp-track { margin: 2px 0 4px; }
.xp-items { margin: 0; padding: 0; list-style: none; }
.xp-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--tg-50); }
.xp-item:last-child { border-bottom: 0; }
.xp-item__pic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.xp-item__pic.do-art { width: 36px; height: 36px; border-radius: 10px; }
.xp-item__pic svg { width: 17px; height: 17px; }
.xp-item__t { display: flex; flex-direction: column; min-width: 0; }
.xp-item__t strong { font-size: 13px; font-weight: 600; line-height: 1.45; }
.xp-item__t small { font-size: 12px; color: var(--color-text-muted); }
.xp-item__p { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xp-item__p .is-back { font-size: 11px; color: var(--color-link); }
.xp-ref { display: inline-flex; align-items: center; gap: 1px; padding: 1px 5px 1px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-decoration: none; vertical-align: 1px; white-space: nowrap; }
.xp-ref svg { width: 11px !important; height: 11px !important; stroke-width: 2.6 !important; }
.xp-ref:hover { background: var(--teal-100); }
.xp-bill { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--card-tint); }
.xp-bill > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.xp-bill dt { color: var(--color-text-muted); }
.xp-bill dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-bill .is-t { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--tg-100); }
.xp-bill .is-t dt { font-weight: 700; color: var(--color-text); }
.xp-bill .is-t dd { font-size: 15px; }
.xp-bill .is-due dd { color: var(--color-link-hover); }
.xp-bill .is-back dd, .xp-bill .is-back dt { color: var(--color-link); }
.xp-refunds { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.xp-refunds li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.xp-refunds li > span { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link); }
.xp-refunds li > span svg { width: 15px; height: 15px; }
.xp-refunds strong { display: block; font-size: 13px; }
.xp-refunds small { font-size: 12px; color: var(--color-text-muted); }
.xp-note { margin: 12px 0 0; font-size: 12px; color: var(--color-text-muted); }
.xp-cancelled { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--tg-50); font-size: 13px; color: var(--color-text-muted); }
.xp-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-foot .btn svg { width: 16px; height: 16px; }
/* An order's drawer foot (var(--teal-600)): pay (or the invoice) in the middle, the support button at the far end */
.xp-dfoot { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 10px; }
.xp-dfoot__mid { display: flex; justify-content: center; }
.xp-dfoot__mid .btn { min-width: 220px; }
.xp-dfoot__mid .btn svg { width: 16px; height: 16px; }
.xp-dfoot__end { display: flex; justify-content: flex-end; }
.ap-next__refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* A campaign's details: what can still change, or that it's locked */
.xp-facts__act { display: flex; justify-content: flex-end; margin-top: 10px; }
.xp-facts__act .btn svg, .xp-camp__edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xp-lockline { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--tg-50); font-size: 12px; color: var(--color-text-muted); }
.xp-lockline svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.xp-campform .field + .field, .xp-campform .field + .sf-hint { margin-top: 12px; }
.ap-placed--warn { border-color: var(--warn-border); background: linear-gradient(120deg, var(--warn-soft), #fff 70%); }
.ap-placed--warn .ap-placed__ic { background: #e39b12; }
/* The chat: files with a message */
.xp-attach { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1.5px solid var(--tg-100); border-radius: 14px; color: var(--color-text-muted); cursor: pointer; }
.xp-attach:hover { border-color: var(--color-primary); color: var(--color-link-hover); }
.xp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.xp-chips[hidden] { display: none; }
.xp-chips li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: var(--radius-pill); background: var(--tg-50); font-size: 12px; }
.xp-chips li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-chips li svg { width: 14px; height: 14px; }
.xp-chips button { display: inline-flex; padding: 2px; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; }
.xp-msgfiles { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.xp-msgfiles a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: inherit; }
.xp-msgfiles a svg { width: 14px; height: 14px; }
.xp-msgfiles small { color: var(--color-text-subtle); }
.xp-msgfiles__pic img { display: block; max-width: 220px; max-height: 160px; border-radius: 10px; }
.xp-tag { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-style: normal; font-weight: 700; }
.xp-tag--warn { background: var(--warn-soft); color: var(--warn-text); }
/* A release card with its support button (Releases' In Progress) */
.do-c { position: relative; }
.do-c > .xp-help { position: absolute; top: 10px; right: 10px; background: #fff; }
.do-c > .xp-help:hover { background: var(--color-primary-soft); }
.do-c:has(> .xp-help) > a { padding-right: 56px; }

/* =====================================================================
   Privileges: one sheet, its parts divided by hairlines
   ===================================================================== */
.xp-sheet { overflow: hidden; border: 1px solid var(--card-border); border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); container-type: inline-size; }
.xp-sheet svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xp-sec { padding: 22px 24px; }
.xp-sec + .xp-sec { border-top: 1px solid #eaf0f0; }
.xp-sec__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.xp-sec__h h2 { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.xp-sec__h small { font-size: 12px; color: var(--color-text-muted); }
/* Level cards — wide, nearly square: You're Here, passed (ticked), ahead (locked) */
.xp-levels { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.xp-lv { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; min-height: 196px; padding: 14px; border: 1.5px solid var(--tg-100); border-radius: 16px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.xp-lv:hover { border-color: var(--teal-200); }
.xp-lv.is-sel { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.xp-lv.is-here { background: linear-gradient(160deg, var(--teal-50), #fff 62%); }
.xp-lv.is-passed { background: var(--surface-hover); }
.xp-lv__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.xp-lv__top strong { font-size: 14px; line-height: 1.3; }
.xp-lv__here { flex: none; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-primary-strong); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; }
.xp-lv__ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tg-50); color: var(--tg-500); }
.xp-lv__ic svg { width: 12px; height: 12px; stroke-width: 2.6; }
.xp-lv__ic.is-passed { background: var(--teal-100); color: var(--color-link-hover); }
.xp-lv__big { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--color-link-hover); }
.xp-lv.is-passed .xp-lv__big, .xp-lv.is-ahead .xp-lv__big, .xp-lv.is-invite .xp-lv__big { color: var(--tg-700); }
.xp-lv__small { font-size: 12px; color: var(--color-text-muted); }
.xp-lv ul { display: flex; flex-direction: column; gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--tg-700); }
.xp-lv li { display: flex; gap: 6px; line-height: 1.35; }
.xp-lv li svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--color-link); stroke-width: 2.6; }
.xp-lv__foot { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 600; }
.xp-lvdet { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; margin-top: 12px; padding: 16px 18px; border-radius: 14px; background: var(--card-tint); }
.xp-lvdet h3 { margin: 0; font-family: var(--font-body); font-size: 14px; font-weight: 700; }
.xp-lvdet ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.xp-lvdet li { display: flex; gap: 7px; }
.xp-lvdet li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--color-link); stroke-width: 2.6; }
.xp-lvdet__act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.xp-lvdet__act .ck-price { justify-content: flex-end; text-align: right; }
.xp-lvdet__act .ck-price b { font-size: 18px; }
.xp-lvdet__need { max-width: 220px; font-size: 13px; color: var(--color-text-muted); text-align: right; }
.xp-lvdet__need b { color: var(--color-text); }
@container (max-width: 820px) {
  .xp-levels { grid-template-columns: none; grid-auto-columns: minmax(176px, 42%); grid-auto-flow: column; padding-bottom: 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .xp-levels > li { scroll-snap-align: start; }
}
@container (max-width: 560px) {
  .xp-sec { padding: 18px 16px; }
  .xp-levels { grid-auto-columns: minmax(170px, 72%); }
  .xp-lvdet { grid-template-columns: minmax(0, 1fr); }
  .xp-lvdet ul { grid-template-columns: minmax(0, 1fr); }
  .xp-lvdet__act { align-items: flex-start; }
  .xp-lvdet__act .ck-price { justify-content: flex-start; text-align: left; }
  .xp-lvdet__need { text-align: left; }
}
/* Your plan / your level */
.xp-plan { background: linear-gradient(135deg, var(--teal-50) 0%, #fff 58%); }
.xp-plan__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.xp-plan__eye { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-link-hover); }
.xp-plan__eye svg { width: 14px; height: 14px; }
.xp-plan h2 { margin: 4px 0 0; font-family: var(--font-body); font-size: 21px; font-weight: 700; }
.xp-plan__head p { margin: 2px 0 0; font-size: 13px; color: var(--color-text-muted); }
.xp-plan__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xp-plan__cta .btn svg { width: 16px; height: 16px; }
.xp-activated { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--teal-800); font-size: 13px; font-weight: 600; }
.xp-activated a { color: inherit; font-weight: 700; }
.xp-activated svg { width: 14px !important; height: 14px !important; stroke-width: 3 !important; }
.xp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; overflow: hidden; border: 1px solid var(--tg-100); border-radius: 14px; background: #fff; }
.xp-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; }
.xp-stat + .xp-stat { border-left: 1px solid var(--tg-100); }
.xp-stat__k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.xp-stat__v { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.xp-stat__f { font-size: 12px; line-height: 1.4; color: var(--color-text-muted); }
.xp-stat .xp-seg { margin: 4px 0 4px; }
.xp-link { display: inline-flex; align-self: flex-start; align-items: center; gap: 2px; margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.xp-link:hover { color: var(--color-link-hover); text-decoration: underline; }
.xp-link svg { width: 13px !important; height: 13px !important; }
@container (max-width: 700px) {
  .xp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xp-stat:nth-child(3) { border-left: 0; }
  .xp-stat:nth-child(n+3) { border-top: 1px solid var(--tg-100); }
}
/* Activate Infinite */
.xp-act { margin-top: 14px; padding: 16px; border: 1px dashed var(--teal-200); border-radius: 14px; background: #fff; }
.xp-act__lead { margin: 0 0 12px; font-size: 13px; color: var(--color-text-muted); }
.xp-act__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.xp-act .field { margin: 0; }
.xp-act .field[hidden] { display: none; }
.xp-act .field__hint { display: block; margin-top: 5px; font-size: 12px; color: var(--color-text-muted); }
.xp-act .field__hint[hidden] { display: none; }
.xp-act__go { display: flex; gap: 8px; margin-top: 12px; }
.xp-act__err { margin: 10px 0 0; font-size: 13px; color: var(--danger); }
.xp-act__err[hidden] { display: none; }
/* Unlock for free: two chips; Know More opens a graphic */
.xp-unls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xp-unl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--tg-100); border-radius: 14px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.xp-unl:hover, .xp-unl.is-on { border-color: var(--color-primary); }
.xp-unl__ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--warn-soft); color: #c98207; }
.xp-unl__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.xp-unl__t strong { font-size: 13px; }
.xp-unl__t small { font-size: 12px; color: var(--color-text-muted); }
.xp-unl__more { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 5px 8px 5px 10px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 12px; font-weight: 700; white-space: nowrap; }
.xp-unl__more svg { width: 14px !important; height: 14px !important; transition: transform var(--dur-fast); }
.xp-unl.is-on .xp-unl__more svg { transform: rotate(180deg); }
.xp-graph { margin-top: 14px; padding: 18px 20px; border-radius: 16px; background: var(--card-tint); }
.xp-graph h3 { margin: 0; font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.xp-graph h3 b { color: var(--color-link-hover); }
.xp-graph p { margin: 4px 0 0; font-size: 13px; color: var(--color-text-muted); }
.xp-graph__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px !important; }
.xp-miles { position: relative; height: 82px; margin: 22px 46px 0; }
.xp-miles__bar { position: absolute; top: 8px; left: 0; right: 0; height: 8px; overflow: hidden; border-radius: 8px; background: var(--tg-100); }
.xp-miles__bar b { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.xp-mile { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; width: 92px; text-align: center; transform: translateX(-50%); }
.xp-mile i { width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; background: var(--tg-300); box-shadow: 0 1px 3px rgb(var(--teal-900-rgb) / .2); }
.xp-mile.is-done i { background: var(--color-primary); }
.xp-mile strong { margin-top: 4px; font-size: 12px; }
.xp-mile small { font-size: 11px; line-height: 1.3; color: var(--color-text-muted); }
.xp-stairs { display: flex; align-items: flex-end; gap: 10px; height: 160px; margin: 18px 0 0; padding: 0; list-style: none; }
.xp-stairs li { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.xp-stairs__bar { display: flex; align-items: flex-start; justify-content: center; height: var(--h); padding-top: 8px; border-radius: 10px 10px 4px 4px; background: var(--tg-100); }
.xp-stairs__bar b { font-size: 14px; color: var(--tg-600); }
.xp-stairs li.is-done .xp-stairs__bar { background: var(--teal-150); }
.xp-stairs li.is-done .xp-stairs__bar b { color: var(--color-link-hover); }
.xp-stairs li.is-here .xp-stairs__bar { background: var(--color-primary); }
.xp-stairs li.is-here .xp-stairs__bar b { color: #fff; }
.xp-stairs small { margin-top: 6px; font-size: 11px; line-height: 1.3; color: var(--color-text-muted); }
@container (max-width: 620px) {
  .xp-unls { grid-template-columns: minmax(0, 1fr); }
  .xp-miles { height: auto; margin: 14px 0 0; }
  .xp-miles__bar { display: none; }
  .xp-mile { position: static; flex-direction: row; gap: 10px; width: auto; padding: 5px 0; text-align: left; transform: none; }
  .xp-mile i { flex: none; width: 20px; height: 20px; }
  .xp-mile strong { margin: 0; min-width: 44px; }
  .xp-stairs { gap: 6px; }
}
/* Credit history (opens on demand) */
.xp-sec__tog { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.xp-sec__tog span { display: flex; flex-direction: column; }
.xp-sec__tog strong { font-size: 15px; }
.xp-sec__tog small { font-size: 12px; color: var(--color-text-muted); }
.xp-sec__tog > svg { width: 20px !important; height: 20px !important; color: var(--color-text-subtle); transition: transform var(--dur-fast); }
.xp-sec__tog[aria-expanded="true"] > svg { transform: rotate(180deg); }
.xp-hist { margin-top: 14px; font-size: 13px; }
.xp-hist td:nth-child(3) { white-space: nowrap; }
/* Marketing: lifetime spend and the way to the next level */
.xp-life { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 36px; margin-top: 16px; }
.xp-life > div:first-child { display: flex; flex-direction: column; }
.xp-life__v { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--color-link-hover); font-variant-numeric: tabular-nums; }
.xp-life__way { display: flex; flex-direction: column; gap: 6px; }
.xp-life__labels { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.xp-life__way small { font-size: 12px; color: var(--color-text-muted); }
.xp-life__way small b { color: var(--color-text); }
.xp-life .ap-bar { height: 10px; margin: 0; }
@container (max-width: 600px) { .xp-life { grid-template-columns: minmax(0, 1fr); } }
.xp-figs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 20px; }
.xp-figs + .xp-stats { margin-top: 10px; }
.xp-stairs { max-width: 620px; height: 132px; }
.xp-graph h3 .xp-muted { font-weight: 500; }

/* =====================================================================
   var(--teal-600) — the order builder: a step smaller everywhere (Rohit: headings were too big), "MuSlate Artist Plus" on top,
   an accordion of sections (one open; the rest fold into a summary row with price and ×; services not picked are
   cards, one per row), the distribution's steps on a rail whose numbers turn into ticks once you move on, YouTube's
   four parts, callbacks, the cart with × on every line and Clear Cart.
   ===================================================================== */
.ck-top { height: 60px; gap: 14px; }
.ck-brand { gap: 10px; padding: 0; background: none; color: var(--color-text); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* #311 (Rohit, like YouTube's box): the logo (icon + MUSLATE), then "Artist Plus" in a small teal box */
.ck-brand img { width: auto; height: 30px; }
.ck-brand span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--color-primary);
  font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: #fff; white-space: nowrap; }
.ck-brand.is-soft span { border: 1px solid var(--teal-200); background: var(--color-primary-soft); color: var(--color-link); }   /* the Feed button's scheme */
.ck-top__safe { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--color-text-muted); }
.ck-top__safe svg { width: 15px; height: 15px; }
.ck-x { width: 38px; height: 38px; }
.ck-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; padding: 22px var(--gutter) 40px; }
.ck-main { gap: 12px; }
.ck-price b { font-size: 18px; }
.ck-opts { gap: 10px; }
.ck-opt { gap: 10px 14px; padding: 14px 16px; border-radius: 14px; }
.ck-opt__txt strong { font-size: 14px; }
.ck-opt__sub { font-size: 12px; }
.ck-opt__body .ap-ic, .ck-type .ap-ic { width: 38px; height: 38px; border-radius: 11px; }
.ck-type { gap: 12px; padding: 14px; border-radius: 14px; }
.ck-type__t strong { font-size: 15px; }
.ck-type__t small { font-size: 12px; }
.ck-select__btn { padding: 10px 14px 10px 10px; border-radius: 14px; }
.ck-art { width: 46px; height: 46px; border-radius: 11px; }
.ck-art--round { border-radius: 50%; }
.ck-rel strong { font-size: 14px; }
.ck-rel small { font-size: 12px; }
.ck-nomatch { padding: 14px 16px; border-radius: 14px; }
.ck-nomatch strong { font-size: 14px; }
.ck-nomatch small { font-size: 12px; }
.ck-up { min-height: 38px; padding: 0 16px; font-size: 13px; }
.ck-seg button { min-height: 0; }
.ck-seg--sm button { padding: 6px 14px; }
.ck-reach { gap: 8px; padding: 14px; }
.ck-reach__top strong { font-size: 16px; }
.ck-wallet { padding: 12px 14px; }
.ck-wallet strong { font-size: 14px; }
.ck-offer { padding: 12px 16px; }
.ck-offer strong { font-size: 14px; }
.ck-note { font-size: 12px; }
.ck-label { margin: 14px 0 8px; font-size: 13px; }
.ck-row + .ck-row, .ck-row + .ck-reach, .ck-field + .ck-row, .ck-note + .ck-seg, .ck-seg + .ck-row { margin-top: 12px; }
.ck-reach, .ck-ai { margin-top: 12px; }
.is-free { color: var(--color-link); font-weight: 700; }

/* Sections — one open at a time */
.ck-sec { border: 1px solid var(--card-border); border-radius: 18px; background: #fff; box-shadow: var(--card-shadow); scroll-margin-top: 14px; }
.ck-sec__h { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--tg-50); }
.ck-sec__h > div { flex: 1; min-width: 0; }
.ck-sec__h h2 { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 700; }
.ck-sec__h p { margin: 1px 0 0; font-size: 12px; color: var(--color-text-muted); }
.ck-sec__ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-link-hover); }
.ck-sec__ic svg { width: 19px; height: 19px; }
.ck-sec__total { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-sec__x, .ck-sec__fold, .ck-sum__x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-subtle); cursor: pointer; }
.ck-sec__x:hover, .ck-sum__x:hover { background: var(--danger-soft); color: var(--danger); }
.ck-sec__fold:hover { background: var(--color-primary-soft); color: var(--color-link-hover); }
.ck-sec__x svg, .ck-sec__fold svg, .ck-sum__x svg { width: 17px; height: 17px; }
.ck-sec__b { padding: 16px 18px 18px; }
/* A section with something in the cart, folded: what's in it, its price, Edit, × */
.ck-sum { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 6px; border: 1px solid var(--card-border); border-radius: 16px; background: #fff; }
.ck-sum__open { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ck-sum__open:hover { background: var(--card-tint); }
.ck-sum__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ck-sum__t strong { font-size: 14px; }
.ck-sum__t small { overflow: hidden; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
.ck-sum__p { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-sum__edit { padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--color-link-hover); }
.ck-sum__open:hover .ck-sum__edit { background: var(--color-primary-soft); }
/* The services not picked yet — one per row */
.ck-svcs { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ck-svcs__h { margin: 8px 0 2px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.ck-svc { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: 16px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ck-svc:hover { border-color: var(--color-primary); box-shadow: 0 10px 22px -16px rgb(var(--teal-900-rgb) / .45); }
.ck-svc__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ck-svc__t strong { font-size: 15px; }
.ck-svc__t small { font-size: 12px; color: var(--color-text-muted); }
.ck-svc__from { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ck-svc__from small { font-size: 11px; font-weight: 500; color: var(--color-text-muted); }
.ck-svc__go { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link-hover); transition: background var(--dur-fast), color var(--dur-fast); }
.ck-svc__go svg { width: 16px; height: 16px; }
.ck-svc:hover .ck-svc__go { background: var(--color-primary); color: #fff; }
/* Give your release the desired push */
.ck-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; border: 1.5px dashed var(--teal-300); border-radius: 18px; background: linear-gradient(100deg, var(--teal-50), #fff); }
.ck-cta > div { display: flex; flex: 1 1 240px; flex-direction: column; }
.ck-cta strong { font-size: 15px; }
.ck-cta small { font-size: 13px; color: var(--color-text-muted); }
.ck-cta__ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--color-primary); color: #fff; }
.ck-cta__ic svg { width: 20px; height: 20px; }
.ck-cta .btn svg { width: 16px; height: 16px; }
/* Promoting: which release the marketing is for */
.ck-promote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ck-promote__k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.ck-select--sm { flex: 1 1 320px; max-width: 540px; }
.ck-select--sm .ck-select__btn { padding: 8px 12px 8px 8px; }
.ck-select--sm .ck-art { width: 40px; height: 40px; border-radius: 10px; }
.ck-select--sm .ck-art--round, .ck-select__list .ck-art--round { border-radius: 50%; }

/* The distribution's steps: a rail of numbers that turn into ticks once you've moved past them */
.ck-sec .ck-step { position: relative; padding: 0 0 20px 42px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ck-sec .ck-step:last-child { padding-bottom: 0; }
.ck-sec .ck-step::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--tg-100); }
.ck-sec .ck-step:last-child::before { display: none; }
.ck-sec .ck-step.is-done::before { background: var(--teal-200); }
.ck-sec .ck-num { position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--tg-50); color: var(--color-text-muted); font-size: 13px; }
.ck-sec .ck-step.is-cur .ck-num { background: #fff; color: var(--color-link-hover); box-shadow: inset 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-primary-soft); }
.ck-sec .ck-step.is-done .ck-num { background: var(--color-primary); color: #fff; }
.ck-sec .ck-num svg { width: 14px; height: 14px; }
.ck-sec .ck-step__h { display: block; margin-bottom: 10px; }
.ck-sec .ck-step__h h3 { margin: 3px 0 0; font-family: var(--font-body); font-size: 14px; font-weight: 700; }
.ck-sec .ck-step__h p { margin: 1px 0 0; font-size: 12px; color: var(--color-text-muted); }

/* YouTube: its four parts, each folding on its own */
.ck-ytsubs { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ck-ytsub { border: 1px solid var(--tg-100); border-radius: 14px; background: #fff; }
.ck-ytsub.is-on { border-color: var(--teal-300); }
.ck-ytsub__h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ck-ytsub__h:hover { background: #fafdfd; }
.ck-ytsub__dot { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; border: 2px solid var(--tg-300); border-radius: 50%; color: #fff; }
.ck-ytsub.is-on .ck-ytsub__dot { border-color: var(--color-primary); background: var(--color-primary); }
.ck-ytsub__dot svg { width: 12px; height: 12px; stroke-width: 3.2; }
.ck-ytsub__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ck-ytsub__t strong { font-size: 14px; }
.ck-ytsub__t small { font-size: 12px; color: var(--color-text-muted); }
.ck-ytsub__from { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.ck-ytsub__from b { font-size: 14px; color: var(--color-text); }
.ck-ytsub__h > svg:last-child { width: 18px; height: 18px; flex: none; color: var(--color-text-subtle); transition: transform var(--dur-fast); }
.ck-ytsub__h[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.ck-ytsub__b { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border-top: 1px dashed var(--tg-100); }
.ck-ytsub__b > .btn { align-self: flex-start; }
.ck-ytsub__b .btn svg { width: 16px; height: 16px; }
.ck-ytsub__b .ck-row:first-child { margin-top: 0; }
.ck-qty { position: relative; padding: 12px 14px; border: 1.5px solid var(--tg-100); border-radius: 12px; background: #fff; }
.ck-qty.is-on { border-color: var(--color-primary); background: var(--surface-hover); }
.ck-qty__top { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.ck-qty__top input { position: absolute; opacity: 0; pointer-events: none; }
.ck-qty__t { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ck-qty__t strong { font-size: 14px; }
.ck-qty__t small { font-size: 12px; color: var(--color-text-muted); }
.ck-qty__p .ck-price { justify-content: flex-end; text-align: right; }
.ck-qty__p .ck-price b { font-size: 16px; }
.ck-qty .ck-range { margin-top: 10px; }
.ck-qty .ck-ticks span { font-size: 10px; }
.ck-linkx { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-text-subtle); cursor: pointer; }
.ck-linkx:hover { color: var(--danger); }
.ck-linkx svg { width: 14px; height: 14px; }
/* Callbacks */
.ck-calls { gap: 8px; }
.ck-call { position: relative; padding: 9px 14px; font-size: 13px; }
.ck-callnote { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--card-tint); font-size: 13px; color: var(--color-text-muted); }
.ck-callnote svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--color-link-hover); }
.ck-callnote strong { color: var(--color-text); }

/* The cart */
.ck-side { top: 22px; }
.ck-cart { padding: 18px; }
.ck-cart__h { align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 10px; }
.ck-cart__h h2 { font-size: 16px; }
.ck-cart__h span { font-size: 12px; }
.ck-clear { margin-left: auto; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-text-subtle); cursor: pointer; }
.ck-clear:hover { background: var(--danger-soft); color: var(--danger); }
.ck-line { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 0; }
.ck-line .ap-ic, .ck-line .ck-art { width: 38px; height: 38px; border-radius: 10px; }
.ck-line__t strong { font-size: 13px; }
.ck-line__x { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 1px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-subtle); cursor: pointer; }
.ck-line__x:hover { background: var(--danger-soft); color: var(--danger); }
.ck-line__x svg { width: 14px; height: 14px; }
.ck-line__x--none { visibility: hidden; }
.ck-line__lvl { display: inline-block; align-self: flex-start; margin-top: 3px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 10px; font-style: normal; font-weight: 700; }
.ck-line__p b { font-size: 13px; }
.ck-totals > div { font-size: 13px; }
.ck-totals__t dd { font-size: 20px; }
.ck-checkout { min-height: 50px; font-size: 15px; }
@media (max-width: 1023px) { .ck-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ck-top { height: 56px; }
  .ck-top__safe { display: none; }
  .ck-brand span { display: inline-flex; height: 20px; padding: 0 7px; font-size: 12px; }
  .ck-brand img { height: 26px; }
  .ck-brand { margin-right: auto; gap: 8px; }
  .ck-sec__h { padding: 12px 12px 12px 14px; }
  .ck-sec__b { padding: 14px; }
  .ck-sec .ck-step { padding-left: 38px; }
  .ck-svc { padding: 12px 14px; gap: 12px; }
  .ck-svc__go { display: none; }
  .ck-sum__edit { display: none; }
  .ck-ytsub__h { flex-wrap: wrap; }
  .ck-ytsub__from { margin-left: 34px; }
}
/* a part being on must not tick the boxes inside it: only a ticked box shows its tick */
.ck-ytsub.is-on .ck-check { border-color: var(--tg-300); background: #fff; }
.ck-ytsub .ck-qty.is-on .ck-check, .ck-ytsub .ck-call.is-on .ck-check { border-color: var(--color-primary); background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.do-c.is-hl > a { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.df-hero__side .xp-help { background: #fff; box-shadow: 0 1px 2px rgb(var(--teal-900-rgb) / .08); }
.df-hero__side .xp-help:hover { background: var(--color-primary-soft); }
.dist-status { margin-bottom: 14px; }
/* var(--teal-600) phone fix: the campaign side line wraps */
@container (max-width: 620px) { .xp-camp__side { flex-wrap: wrap; justify-self: stretch; gap: 4px 10px; min-width: 0; } }
.xp-act__hint { display: block; margin-top: 5px; font-size: 12px; color: var(--color-text-muted); }
.xp-act__hint[hidden], .xp-act [data-act-new][hidden] { display: none; }

/* =====================================================================
   var(--teal-600) — Privileges as two cards (the ladder · yours); the ladder joined by a dotted line, teal up to where you are;
   MuSlate Premium by invitation (a gold touch: locked, but never for sale); Know More chips that work as tabs, joined
   to their graphic; the royalty graphic with its figures beside it
   ===================================================================== */
.xp-cards { display: flex; flex-direction: column; gap: 18px; }
.xp-levels { gap: 28px; }
.xp-levels > li { position: relative; }
.xp-levels > li:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 100%; width: 28px; height: 4px; transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(circle, var(--tg-300) 1.6px, transparent 2.1px) 1px 50% / 7px 4px repeat-x; }
.xp-levels > li.is-passed::after { background-image: radial-gradient(circle, var(--color-primary) 1.6px, transparent 2.1px); }
.xp-lv.is-invite { border-color: #ecdcb4; background: linear-gradient(160deg, var(--warn-soft), #fff 62%); }
.xp-lv.is-invite:hover { border-color: #dcc189; }
.xp-lv.is-invite.is-sel { border-color: #c99a3b; box-shadow: 0 0 0 3px #fbf0d9; }
.xp-lv.is-invite .xp-lv__big, .xp-lv.is-invite .xp-lv__foot { color: #8f6514; }
.xp-lv.is-invite li svg { color: #c08a22; }
.xp-lv__ic.is-invite { background: #fbefd5; color: #9a6b12; }   /* a crown where the others have a lock: not for sale */
.xp-lvdet.is-invite { background: var(--warn-soft); }
.xp-lvdet.is-invite li svg { color: #c08a22; }
/* Know More: the open chip runs into its graphic, like a tab into its page */
.xp-unls { align-items: start; }
.xp-unls.is-open { row-gap: 0; }
.xp-unls.is-open .xp-unl { margin-bottom: 12px; }
.xp-unls.is-open .xp-unl.is-on { margin-bottom: 0; padding-bottom: 24px; border-color: var(--card-tint); border-radius: 14px 14px 0 0; background: var(--card-tint); }
.xp-unls.is-open + .xp-graph { margin-top: 0; }
.xp-unls.is-open--level + .xp-graph { border-top-left-radius: 0; }
.xp-unls.is-open--share + .xp-graph { border-top-right-radius: 0; }
@container (max-width: 620px) {
  .xp-unls.is-open .xp-unl, .xp-unls.is-open .xp-unl.is-on { margin-bottom: 12px; padding-bottom: 12px; border-color: var(--color-primary); border-radius: 14px; background: #fff; }
  .xp-unls.is-open + .xp-graph { border-radius: 16px; }
}
.xp-graph--share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 290px); align-items: start; gap: 18px 32px; }
.xp-graph--share .xp-stairs { max-width: none; }
.xp-gfacts { display: flex; flex-direction: column; margin: 0; padding: 0 0 0 24px; border-left: 1px solid var(--tg-100); }
.xp-gfacts > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--tg-100); }
.xp-gfacts > div:last-child { border-bottom: 0; }
.xp-gfacts dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.xp-gfacts dd { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xp-gfacts dd small { font-size: 12px; font-weight: 500; color: var(--color-text-muted); }
@container (max-width: 720px) {
  .xp-graph--share { grid-template-columns: minmax(0, 1fr); }
  .xp-gfacts { padding: 10px 0 0; border-top: 1px solid var(--tg-100); border-left: 0; }
}

/* =====================================================================
   var(--teal-600) — the order builder: every product always listed; open one to pick, Add to Cart at its foot (nothing goes in
   by itself); In Cart on a row once it's there; YouTube's parts each with a small picture and their own foot
   ===================================================================== */
.ck-svc.is-in { border-color: var(--teal-300); background: var(--surface-hover); }
.ck-svc.is-in .ck-svc__from { flex-direction: row; align-items: center; gap: 10px; font-size: 15px; }
.ck-incart { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link-hover); font-size: 11px; font-style: normal; font-weight: 700; white-space: nowrap; }
.ck-incart svg { width: 12px !important; height: 12px !important; stroke-width: 3 !important; }
.ck-sec__h[data-ck-fold] { cursor: pointer; }
.ck-sec__h .ck-incart { margin-right: 2px; }
.ck-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tg-50); }
.ck-foot__p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.ck-foot__p .ck-price b { font-size: 18px; }
.ck-foot__p > b { font-size: 16px; }
.ck-foot__p > small { font-size: 12px; color: var(--color-text-muted); }
.ck-foot__act { display: flex; gap: 8px; margin-left: auto; }
.ck-foot__act .btn svg { width: 15px; height: 15px; }
.ck-ytsub__b > .ck-foot { margin-top: 4px; padding-top: 12px; }
.ck-sec__b > .ck-ytsubs:first-child { margin-top: 0; }
.ck-ytsub__ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--tg-50); color: var(--color-link-hover); }
.ck-ytsub__ic svg { width: 15px; height: 15px; }
.ck-ytsub.is-on .ck-ytsub__ic { background: var(--color-primary-soft); }
.ck-ytsub__from { display: inline-flex; align-items: center; gap: 8px; }
.ck-kitrel { margin-top: 12px; }
.ck-skel--sm { display: inline-block; width: 120px; height: 22px; border-radius: 8px; }
@media (max-width: 640px) {
  .ck-svc.is-in .ck-svc__from { flex-direction: column; align-items: flex-end; gap: 4px; }
  .ck-ytsub__from { margin-left: 42px; }
  .ck-foot__act { width: 100%; justify-content: flex-end; }
}
/* var(--teal-600) phone: nothing cut off to fit — an order's services and a campaign's ID wrap; YouTube's parts put their price
   under the name; a Know More chip puts its button under the words when there's no room beside them */
@container (max-width: 560px) { .xp-orow .xp-row__main small { white-space: normal; } }
@container (max-width: 620px) {
  .xp-camp__eye { white-space: normal; }
  .xp-unl { flex-wrap: wrap; }
  .xp-unl__t { flex: 1 1 180px; }
  .xp-unl__more { margin-left: 46px; }
}
@media (max-width: 640px) {
  .ck-ytsub__h { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; column-gap: 12px; row-gap: 4px; }
  .ck-ytsub__h > svg:last-child { grid-column: 3; grid-row: 1; }
  .ck-ytsub__from { grid-column: 2; grid-row: 2; margin-left: 0; }
}

/* var(--teal-600) — "Select a Release" until one is picked; the Starter Kit's profile and release pickers; a campaign edited in its
   drawer; Releases: the status tabs with Cards / List at the end, then the site's one filter bar */
.ck-rel strong.is-ph { color: var(--color-text-muted); font-weight: 600; }
.ck-kitpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.ck-kitpick .ck-field { margin: 0; }
.xp-campform { display: flex; flex-direction: column; gap: 12px; }
.xp-campform .field + .field, .xp-campform .field + .sf-hint { margin-top: 0; }
.xp-campform .sf-hint { margin: -4px 0 0; }
.xp-campform .xp-facts__act { gap: 8px; margin-top: 2px; }
.dist-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 14px; }
.dist-top .dist-status { margin-bottom: 0; }
.dist .dist-bar { display: block; margin-bottom: 14px; }
/* a greyed-out option keeps its real box hidden (the site's disabled-box style would show it at half opacity) */
.ck .ck-opt input[type=checkbox]:disabled, .ck .ck-opt input[type=radio]:disabled { opacity: 0; }   /* beats forms.css's input:not(.set-switch input):disabled */

/* var(--teal-600) — "Your Cart" above its card (both columns' cards start level); who the invoice is for; the Starter Kit pickers
   (artwork / photo, name, what it is) right under what they're for; the billing details drawer, list and rows */
body.ck-open .dialog { z-index: 340; }                                    /* a dialog over the builder (verify a phone) */
.ck-side__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 18px; margin: 8px 0 14px; }
.ck-side__h .ck-svcs__h { margin: 0; }
.ck-side__h .ck-svcs__h span { font-weight: 600; letter-spacing: .02em; text-transform: none; }
.ck-side__h .ck-clear { margin: 0; }
.ck-billto { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--card-tint); font-size: 13px; color: var(--color-text-muted); }
.ck-billto span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ck-billto small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-subtle); }
.ck-billto strong { color: var(--color-text); }
.ck-billto .xp-link { flex: none; margin: 0; }
.ck-kitpick { display: block; margin: -2px 0 6px 44px; }
.ck-kitpick--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 640px) { .ck-kitpick--two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .ck-kitpick { margin-left: 0; } .ck-kitpick--two { grid-template-columns: minmax(0, 1fr); } }
.ck-kitsel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ck-kitsel__k { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.ck-kitsel .ck-select { width: 100%; }
.ck-kitsel .ck-select__btn:disabled { cursor: default; opacity: 1; }
.xp-billform { display: flex; flex-direction: column; gap: 12px; }
.xp-billform__more { display: flex; flex-direction: column; gap: 12px; }
.xp-billform__more[hidden], .xp-billform__gst[hidden] { display: none; }
.xp-billform__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }   /* City | PIN code, half each (#307) */
.xp-billform__gst { align-self: flex-start; gap: 6px; margin: 0; color: var(--color-link-hover); }
.xp-billform .field.is-invalid { border-color: var(--color-error); }
.xp-billpick { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.xp-billpick__o { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1.5px solid var(--tg-100); border-radius: 14px; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.xp-billpick__o:hover { border-color: var(--teal-200); }
.xp-billpick__o.is-on { border-color: var(--color-primary); background: var(--surface-hover); }
.xp-billpick__o > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.xp-billpick__o strong { font-size: 14px; }
.xp-billpick__o small { font-size: 12px; color: var(--color-text-muted); }
.xp-billed { margin: 10px 0 0; font-size: 13px; color: var(--color-text-muted); }
.xp-billed strong { color: var(--color-text); }
.xp-billrow { grid-template-columns: 44px minmax(0, 1fr) auto; }
.xp-billrow__t { display: flex; flex-direction: column; min-width: 0; }
.xp-billrow__t strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.xp-billrow__t small { font-size: 12px; color: var(--color-text-muted); }
.xp-billrow__act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.xp-billadd { align-self: flex-start; margin-top: 12px; }
.xp-billadd svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@container (max-width: 560px) { .xp-billrow { grid-template-columns: 40px minmax(0, 1fr); } .xp-billrow__act { grid-column: 1 / -1; justify-content: flex-start; } }
/* …and on phones the same shape as the site's .seg there (studio.css): a rounded track, rounded options — still
   scrolling sideways when there are more tabs than fit */
@media (max-width: 640px) {
  .xp-seg, .ck-seg { border-radius: var(--radius-md); }
  .xp-seg button, .ck-seg button { border-radius: var(--radius-sm); }
}
.ck-kitsel .ck-rel small { white-space: normal; }                         /* never cut off (#180) */
.xp-billform .xp-facts__act { gap: 8px; }

/* An empty slot in the page column (no cart bar, no placed note, hidden filters) adds no gap, so an empty list sits right under the tabs as in the Studio (round 4) */
.xp-page > :empty, .xp-page > [hidden] { display: none; }

/* The Cancel / Save row of an inline edit (campaign details, billing details) keeps clear of whatever follows it (round 6, Rohit) */
.xp-facts__act { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0 28px; }

/* ---- Chat drawers (#305, Rohit): one column — the details at their full height (no scrollbar of their own), the thread
   below is the only thing that scrolls; the show / hide switch sits in the title bar beside Close ---- */
.ap-stack { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ap-stack__det { flex: none; padding: 20px 22px 4px; }
.ap-stack__det.is-closed { display: none; }
.ap-stack__bar { flex: none; margin-top: 6px; padding: 16px 22px 4px; border-top: 1px solid var(--color-border); }   /* one hairline, nothing boxed (Rohit: B) */
.ap-stack__det.is-closed + .ap-stack__bar { margin-top: 0; border-top: 0; }
.ap-stack__bar .xp-h3 { margin: 0; }
.ap-stack .ap-panel__msgs { flex: 1 1 0; min-height: 140px; overflow-y: auto; padding: 10px 22px 20px; }
.ap-stack__bar[hidden] { display: none; }
.ap-stack__bar[hidden] + .ap-panel__msgs { padding-top: 18px; }

/* A fact tile that can still be changed carries a small pencil in its corner (Rohit: no separate Edit Details button) */
.ap-facts > div { position: relative; }
.ap-facts > div.is-editable { padding-right: 44px; }
.ap-facts__pen { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--color-link); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.ap-facts__pen svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-facts__pen:hover, .ap-facts__pen:focus-visible { border-color: var(--color-primary); background: #fff; outline: none; }

/* The invoice: one glyph on the order row (beside the chat icon); in a drawer, a labelled link under the title (#308) */
a.xp-inv { text-decoration: none; }
.xp-inv svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.xp-help.xp-inv:hover { color: var(--color-link); background: var(--color-primary-soft); }

/* =====================================================================
   #306 (Rohit's spec): one layout for Orders, Payouts, Campaigns and Releases
   ===================================================================== */
/* Where it stands: what's behind filled, the step it's at a bigger teal dot with a light rim, what's ahead hollow */
.ap-track li::before { width: 12px; height: 12px; }
.ap-track li.is-now { color: var(--color-link-hover); }
.ap-track li.is-now::before { width: 16px; height: 16px; margin: -2px 0; border-color: var(--color-primary); background: var(--color-primary); box-shadow: 0 0 0 4px var(--teal-100); }
.ap-track li.is-done + li.is-now::after { background: var(--color-primary); }
.ap-track.is-off li.is-now { color: var(--tg-600); }
.ap-track.is-off li.is-now::before { border-color: var(--tg-400); background: var(--tg-400); box-shadow: 0 0 0 4px var(--tg-50); }
.ap-panel__b > .ap-track:first-child, .ap-stack__det > .ap-track:first-child { margin: 4px 0 18px; }
/* …and in small, on a row: the dots alone, joined */
.xp-dots { display: flex; align-items: center; gap: 12px; height: 14px; }
.xp-dots i { position: relative; flex: none; width: 8px; height: 8px; border: 2px solid var(--tg-200); border-radius: 50%; background: #fff; }
.xp-dots i + i::before { content: ""; position: absolute; top: 50%; right: calc(100% + 2px); width: 12px; height: 2px; margin-top: -1px; background: var(--tg-100); }
.xp-dots i.on { border-color: var(--color-primary); background: var(--color-primary); }
.xp-dots i.now { width: 12px; height: 12px; border-color: var(--color-primary); background: var(--color-primary); box-shadow: 0 0 0 3px var(--teal-100); }
.xp-dots i.on + i::before, .xp-dots i.on + i.now::before { background: var(--color-primary); }
.xp-dots i.now + i::before { background: var(--tg-100); }
.xp-ost.is-off .xp-dots i.on, .xp-ost.is-off .xp-dots i.now { border-color: var(--tg-300); background: var(--tg-300); box-shadow: none; }
.xp-ost.is-warn .xp-ost__l { color: var(--warn-text); }
.xp-ost.is-todo .xp-ost__l { color: var(--warn-text); }
.xp-ost.is-todo .xp-ost__l::before { background: var(--warn); }

/* The row (#306, #307 Rohit): left — no. · picture · title and line; centre — where it stands (or a release's UPC), in the
   middle of the row; right — Pay Now · the amount (always lined up) · the download · support · Details. Full width. */
.xp-list { container-type: inline-size; }
.xp-r { grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr); grid-template-areas: "l c r"; gap: 14px; }
.xp-r__l { grid-area: l; display: flex; align-items: center; gap: 14px; min-width: 0; }
.xp-r__l > .xp-row__n { flex: none; width: 24px; }
.xp-r__pic { display: flex; flex: none; }
.xp-r__pic .xp-row__pic, .xp-r__pic .xp-thumb { width: 48px; height: 48px; }
.xp-r__pic .xp-thumb--wide { width: 86px; height: 48px; }
.xp-r__l > .xp-row__main { flex: 1; }
.xp-r__c { grid-area: c; display: flex; justify-content: center; min-width: 0; }
.xp-r__r { grid-area: r; display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.xp-r__r > .btn { flex: none; margin-right: 14px; white-space: nowrap; }
.xp-r__r > .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xp-r__r > .xp-row__amt { margin-right: 12px; min-width: 104px; }   /* #311: one width for every amount (₹1,00,000.00 fits), so the Pay buttons before it line up */
.xp-r__dl { display: inline-flex; flex: none; width: 38px; }                 /* its place is kept: icons line up row to row */
.xp-r .xp-ost { align-items: center; }
.xp-r .xp-ost__l::before { display: none; }                                    /* the words alone, over the bars (Rohit: no dot) */
.xp-r .xp-ost__bar { width: 120px; }
.xp-row__amt.is-soft strong { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.xp-row__amt.is-soft small { font-size: 11px; }
.xp-r .xp-row__main strong { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; }
/* #313: the ellipsis belongs on the name, not on the flex row around it — on the row it never appears and a long
   title is cut mid-letter. The chevron stays beside it either way. */
.xp-r .xp-row__main strong .xp-row__nm { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-r .xp-row__main strong svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--tg-400); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast); }
.xp-r.is-open .xp-row__main strong svg { transform: rotate(180deg); }
.xp-r.has-more { cursor: pointer; }
/* a campaign or a release on its way: its milestones across the row, the same space at both ends */
.xp-r__foot { grid-column: 1 / -1; padding: 12px 0 2px; border-top: 1px solid var(--tg-50); }
.xp-r__foot .ap-track { max-width: none; }
.xp-r__foot .ap-track li { font-size: 11px; }
.xp-r__foot .xp-prog { padding: 0 20px; }
.xp-r__more { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; padding: 12px 0 2px; border-top: 1px solid var(--tg-50); cursor: default; }
.xp-r__more[hidden] { display: none; }
.xp-r.is-needs { border-color: var(--warn-border); background: linear-gradient(90deg, var(--warn-soft), #fff 45%); }
/* a release in the stores: its UPC in the middle, its state at the right */
.dist-upc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dist-upc > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--color-text-subtle); }
.dist-upc .dr-code { padding: 4px 8px; font-size: 12.5px; }
.xp-r__r > .dist-st { margin-right: 10px; }
.xp-r__r > .dist-st.is-done .xp-ost__l { color: var(--color-link); }
@container (max-width: 900px) {
  .xp-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l r" "c r"; row-gap: 6px; }
  .xp-r__c { justify-content: flex-start; padding-left: 100px; }
  .xp-r__c:empty { display: none; }
  .xp-r .xp-ost { flex-direction: row; align-items: center; gap: 10px; }
  .xp-r .xp-ost__bar { width: 90px; }
}
@container (max-width: 560px) {
  .xp-r { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l" "c" "r"; gap: 8px; padding: 12px 10px 10px 8px; }
  .xp-r__l { gap: 10px; align-items: flex-start; }
  .xp-r__l > .xp-row__n { width: 18px; padding-top: 12px; }
  .xp-r__pic .xp-row__pic, .xp-r__pic .xp-thumb { width: 40px; height: 40px; }
  .xp-r__pic .xp-thumb--wide { width: 72px; height: 40px; }
  .xp-r__c { padding-left: 78px; }
  .xp-r__r { flex-wrap: nowrap; }                                         /* one line: the amount first, then Pay Now, the icons, Details */
  .xp-r__r > .xp-row__amt { order: -1; margin-right: auto; align-items: flex-start; }
  .xp-r__r > .btn { margin-right: 6px; }
  .xp-r__foot { grid-row: 4; } .xp-r__more { grid-row: 5; }                 /* the milestones and the songs after the buttons, as on wider screens */
}


/* The drawer with no conversation yet: just its details, scrolling as one — no heading, no separator, no switch */
.ap-stack { overflow-y: auto; }
.ap-stack.is-empty .ap-panel__msgs { display: none; }
.ap-stack.is-empty .ap-stack__det { padding-bottom: 20px; }
/* The drawer's facts (a campaign's, a release's) */
.ap-panel .ap-facts { margin-bottom: 4px; }
/* changes asked for: the step it's at reads warm */
.ap-track.is-warn li.is-now { color: var(--warn-text); }
.ap-track.is-warn li.is-now::before { border-color: var(--warn); background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.xp-ost.is-warn .xp-dots i.now, .xp-ost.is-todo .xp-dots i.now { border-color: var(--warn); background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
/* Releases: a row opened — the UPC (and label) on one line, then its songs with ISRCs, its stores */
.dist-codes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.dist-codes__l { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-subtle); }
.dist-codes__l:not(:first-child) { margin-left: 8px; }
.dist .xp-list { margin-top: 2px; }
.xp-r__more .dr-tracks { margin: 0; }
/* a release's drawer: its three facts on one row when there's room, the release across */
.ap-facts--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.xp-r__slot .btn { white-space: nowrap; }
/* Billing details rows (#307): Set as Default, then the Studio's round Edit / Remove buttons */
.xp-billrow__act { align-items: center; gap: 10px; }
.xp-billrow .set-exp__tools { display: flex; gap: 6px; }
.xp-billrow:is(:hover, :focus-within) .set-exp__btn { background: #fff; box-shadow: inset 0 0 0 1px var(--tg-100); }
.xp-billrow .set-exp__btn:is(:hover, :focus-visible) { background: var(--color-primary-soft); color: var(--color-link-hover); }
.xp-billrow .set-exp__btn--del:is(:hover, :focus-visible) { background: var(--danger-soft); color: var(--color-error); }
/* #308 (Rohit): the drawer's title bar — the item's download as a labelled link in the line under the title, Close alone at
   the right; the show / hide switch on the Messages line, at its right */
.ap-panel__h p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }      /* the link's icon separates it — no "·" left dangling when it wraps */
.ap-panel__dl { display: inline-flex; align-items: center; gap: 4px; color: var(--color-link); font-weight: 600; text-decoration: none; }
.ap-panel__dl:hover, .ap-panel__dl:focus-visible { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.ap-panel__dl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ap-stack__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ap-stack__tog { display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-link); cursor: pointer; }
.ap-stack__tog:hover, .ap-stack__tog:focus-visible { color: var(--color-link-hover); }
.ap-stack__tog svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* #309 (Rohit): the order drawer's Pay button had no room above the message box — a clear gap; no empty row when nothing's due */
.ap-panel__f > .xp-dfoot + [data-say] { margin-top: 14px; }
.ap-panel__f > .xp-dfoot:has(> .xp-dfoot__mid:empty) { display: none; }
/* #309 (Rohit's sketch, option B): show / hide details is a small tab hanging from the line above Messages, joined to it like a
   selected tab; with the details hidden it hangs from the title bar's line */
.ap-stack__bar { position: relative; padding-top: 22px; }
.ap-stack__tog { position: absolute; top: -1px; right: 22px; gap: 3px; padding: 3px 9px 4px 11px; border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; font-size: 12px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ap-stack__tog:hover, .ap-stack__tog:focus-visible { background: var(--color-primary-soft); outline: none; }
.ap-stack__tog svg { width: 14px; height: 14px; }
/* #309 (Rohit): the Starter Kit's guarantee under each item — a tick and the number ("10,000 guaranteed streams") */
.ap-promise { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--color-link); font-size: 13px; font-weight: 600; font-style: normal; }
.ap-promise svg { flex: none; width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: var(--color-primary-soft); fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ap-promise + .ap-promise { margin-top: 3px; }
/* #309 (Rohit): a Starter Kit campaign's row while live — its parts, one line each: name · bar · "3,240 of 10,000" (a
   Complete Profile Audit: its review, its Release Push, its Profile Boost — one campaign). The lines share one set of
   columns (subgrid), so every bar starts and ends at the same place whatever its number says; the names soft, the
   numbers carry the weight. */
.xp-parts { display: grid; grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) auto; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.xp-parts li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; row-gap: 6px; min-height: 20px; font-size: 13px; }
.xp-part__l { color: var(--color-text-muted); font-weight: 500; }
.xp-part__bar { display: block; height: 4px; border-radius: 4px; background: var(--tg-100); overflow: hidden; }
.xp-part__bar i { display: block; height: 100%; border-radius: 4px; background: var(--color-primary); }
.xp-partsbox { container-type: inline-size; }                          /* lays out by its own width — row or drawer alike */
.xp-partsbox + [data-camp-facts] { margin-top: 18px; }                 /* in its drawer: room before the fact cards */
.xp-part__n { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-part__n b { color: var(--color-text); font-weight: 600; }
.xp-part__n svg, .xp-part__st svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--color-link); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.xp-part__st { color: var(--warn-text); font-weight: 600; }          /* the audit's "In Review" / "✓ Done" in the numbers' place */
.xp-part__st.is-done { color: var(--color-link); }
/* narrow, and always in its drawer: each bar drops under its line, across the whole width */
.xp-parts--stack { grid-template-columns: minmax(0, 1fr) auto; }
.xp-parts--stack .xp-part__bar { grid-column: 1 / -1; grid-row: 2; }
@container (max-width: 520px) { .xp-parts { grid-template-columns: minmax(0, 1fr) auto; } .xp-part__bar { grid-column: 1 / -1; grid-row: 2; } }

/* ---- links.css ---- */
/* =====================================================================
   Links in lists, cards, heroes and the player — one rule site-wide (Rohit, #168). Loaded last, so it wins.
     A title (song, album, playlist, event, artist / page name on a card, hero and player titles) never underlines:
     on hover it turns teal.
     The names under a title (artists, owners, hosts) underline on hover, in teal — they read as links.
   ===================================================================== */

/* Titles: teal, no underline */
:is(.song-link, .hero__title a, .fsong__title, .bx-feat__name, .spot__title a, .pgp-off h3 a, .sp-best__title, .sh-card__t,
    .mp__title, .np__title, .dr-title, .pg-card__t, .ev-scard__t, .slist__t, .an-top5__t a, .apx-spot h3 a, .bx-vinyl__t,
    .dr-t strong a, .dist-xp__head strong a):hover,
:is(.srow__t, .chart__t, .sp-song__info, .sl-song__info, .mpq__info, .pl-song__info, .sh-xp__t, .qtile__t, .ftile, .pgp-song__info,
    .vrow__t, .fev__t, .ctp-ent) strong a:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}
/* A whole card that is one link: still only the title itself turns teal — when the pointer is on the title */
:is(.ev-card__body, .ev-row__t, .crs-school, .fev__t) strong:hover,
.pl-card__title:hover { color: var(--color-link-hover); text-decoration: none; }
/* A shortened title anywhere: its "…" belongs to the box around the link, so that box turns teal with it — any title whose
   only content is a link (strong / heading around an <a>, or an <a> around a strong). :where() = no weight: a page's own
   colours (dark grounds) still win. The named lists below stay for boxes that set their own colour. */
:where(:is(strong, b, h1, h2, h3, h4, h5):has(> a:only-child:hover)),
:where(a:hover > :is(strong, b):only-child) { color: var(--color-link-hover); }
:is(.srow__t, .chart__t, .sp-song__info, .sl-song__info, .mpq__info, .pl-song__info, .sh-xp__t, .qtile__t, .ftile, .pgp-song__info,
    .vrow__t, .fev__t, .ctp-ent, .hero__title, .spot__title, .sp-best__info, .apx-spot h3) :is(strong, h2, h3):has(> a:hover),
:is(.srow__t, .chart__t, .sp-song__info, .sl-song__info, .mpq__info, .pl-song__info, .sh-xp__t, .qtile__t, .ftile, .pgp-song__info, .ctp-ent) strong:has(> a:hover),
a.sh-card__t:hover strong, .hero__title:has(> a:hover), .spot__title:has(> a:hover) { color: var(--color-link-hover); }
:is(.vrow__t strong, .hero__title, .apx-spot h3):has(> a:hover) { color: var(--teal-300); }

/* Hearts (Slate): hover teal, like every icon button; slated = filled, in one red everywhere (Bugs-Issues-2) */
.sl-heart:not(.is-on):hover { background: #fff; color: var(--color-link-hover); }   /* cards and the player already do */
:is(.sl-heart, .cx__heart, .srow__btn, .sp-song__btn).is-on, :is(.sl-heart, .cx__heart).is-on:hover { color: var(--heart); }
.sl-heart.is-on:hover { background: var(--heart-soft); }

/* Names under a title: underline (teal) */
:is(.srow__t small, .chart__t small, .sp-song__info small, .sl-song__info > span, .mpq__info > span, .pl-song__info > span, .sh-xp__t small,
    .qtile__t small, .ftile small, .pgp-song__info small, .sh-card small, .hero__by, .fsong__by, .spot__by, .mp__artists, .np__artists,
    .sp-by, .sp-best__sub, .apx-spot__by, .vids__now, .vrow__t small, .pl-card__sub, .evp-by, .slist__by, .dr-t small, .ctp-ent small) a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* On dark grounds (heroes, the video card, full-screen Now Playing) the names stay light while underlined */
:is(.hero__by, .fsong__by, .spot__by, .np__artists, .sp-by, .vids__now, .vrow__t small, .apx-spot__by) a:hover { color: #fff; }
:is(.hero__title a, .fsong__title, .np__title, .apx-spot h3 a, .vrow__t strong a):hover { color: var(--teal-300); }
/* On any dark card a hovered title lightens, never darkens (#305, Rohit: the Top Pick and Latest Release titles went near-black
   on hover). The dark grounds: the home / shelf spot card, the profile's latest-release card, heroes, the video row, Now Playing. */
/* :not(._) only adds weight: the title list above counts as its longest selector, and this must outrank it */
/* Titles only — the names under them (.spot__by, .apx-spot__by, .hero__by…) keep their white underline rule above */
:is(.spot__title, .apx-spot h3, .hero__title, .np__title, .vrow__t strong, .bx-feat__t, .bx-feat__name) a:hover:not(._),
:is(.spot__title, .apx-spot h3, .hero__title, .vrow__t strong, .bx-feat__t):has(> a:hover):not(._),
:is(.spot, .apx-spot, .hero, .np, .vrow, .bx-feat, .bx-afeat, .bx-alfeat) :is(strong, h2, h3):hover:not(._):not(:has(small)),
.spot .song-link:hover:not(._), .bx-feat__name:hover:not(._) { color: var(--teal-300); text-decoration: none; }