/* Buzz Music — shared stylesheet
   Every page loads this file. Change a colour here and it changes everywhere. */

/* ===== FONTS =================================================================
   These three typefaces used to come from Google. Every page view sent the
   visitor's IP address to Google's servers before a single word appeared —
   which is not what BUILD-SPEC means by "no third-party trackers" or "data
   stays in the EU". So they live on our own server now, in ../fonts/.

   The files are exactly the ones Google was serving, downloaded once. They are
   variable fonts: one file per family per alphabet covers every weight, so the
   list below repeats the same file for 400, 600 and 800. That repetition is
   deliberate — it keeps the browser snapping to the same weights it snapped to
   before, so nothing moves by a hair.

   unicode-range means a browser only fetches the alphabets a page actually
   uses. A Norwegian or English reader downloads three files (~132 KB) and
   never touches the Greek, Cyrillic or Vietnamese ones.

   All three are under the SIL Open Font License 1.1, which allows this
   outright. The licence texts sit beside the fonts in ../fonts/*-OFL.txt and
   must stay there — shipping them is a condition of the licence.

   To add a weight: add it to the list below AND check it is one the variable
   font actually has. Do not re-add a Google URL; a test will fail if you do.
   ========================================================================== */

/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/public-sans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/public-sans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/public-sans-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand colours, taken straight from the BuzzMusic.live logo files */
  --ink:        #1D1D2C;   /* page background — same navy as the logo */
  --panel:      #26263A;   /* cards and raised areas */
  --panel-2:    #2F2F46;   /* inner blocks */
  --line:       #35354D;   /* hairlines and borders */

  --teal:       #1BA098;   /* the "live" in the logo — main accent */
  --teal-bright:#22C0B5;   /* hover state */
  --teal-deep:  #0F5F5A;   /* text sitting on a teal fill */

  --orange:     #FB8122;   /* the dot in the logo — used sparingly, see note */
  --orange-deep:#5C2C05;

  --cream:      #F2F2F5;   /* body text */
  --muted:      #9A9AAE;   /* supporting text */
  --faint:      #6C6C84;   /* captions, footer */

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'Public Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --wrap: 1120px;
  --r:    10px;

  /* ---- The admin panel's colour boxes. Used ONLY under /admin. ----
     Each colour means one thing, on every admin page. App\Support\AdminTone
     is where a page asks for one, by meaning:
       now     ORANGE. Something is waiting for you: tracks waiting for
               approval, unread Buzzmail, open copyright claims, genre
               requests. Those four, above zero, and nothing else.
       blue    music — tracks, songs, albums, uploads
       purple  artists
       rose    listeners
       steel   businesses
       teal    admins, and plain information: plays, storage, totals
       red     something is wrong — failures, suspensions, debug mode on
       amber   needs watching, not broken — maintenance, TONO at 80%
       green   THE SYSTEM CHECK PAGE ONLY — a check passed
       grey    nought, nothing yet, switched off, not connected
     A count box is the colour of what it counts, and grey at nought.

     Two values per colour. --adm-X is the colour itself, used for a box's
     edge. --adm-X-fill is what the box is filled with: the colour darkened
     just enough that white text passes the WCAG AA contrast ratio of 4.5:1
     for small text. Teal, green, amber, orange and rose are too light as
     they are, so their fills are darker; blue, purple, steel, red and grey
     pass as given. AdminColourBoxesTest re-checks every pair. */
  --adm-teal:   #1BA098;  --adm-teal-fill:   #147771;
  --adm-blue:   #2D6CDF;  --adm-blue-fill:   #2D6CDF;
  --adm-purple: #7C5CE0;  --adm-purple-fill: #7C5CE0;
  --adm-rose:   #C4569B;  --adm-rose-fill:   #A84985;
  --adm-steel:  #4F7A9E;  --adm-steel-fill:  #4F7A9E;
  --adm-green:  #2E9E5B;  --adm-green-fill:  #237B46;
  --adm-amber:  #D99A0B;  --adm-amber-fill:  #8D6407;
  --adm-red:    #D0453B;  --adm-red-fill:    #D0453B;
  --adm-grey:   #5A5A78;  --adm-grey-fill:   #3A3A52;
  --adm-now:    #FB8122;  --adm-now-fill:    #A55516;
  --adm-plain:  #9A9AAE;  --adm-plain-fill:  #26263A;   /* "All": no colour of its own */
  --adm-on-fill: #FFFFFF;   /* all text on a filled box */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }

p { color: var(--cream); }
.lead  { font-size: 1.12rem; color: var(--muted); max-width: 56ch; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ---- header ---- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,16,13,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 24px;
  height: 68px;
}
.logo { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--cream); letter-spacing: -0.03em; }
.logo span { color: var(--teal); }
.logo:hover { text-decoration: none; }
.tagline { font-size: 0.8rem; color: var(--faint); border-left: 1px solid var(--line); padding-left: 16px; }
.head-spacer { flex: 1; }

.nav { display: flex; gap: 22px; align-items: center; }
.nav a { color: var(--muted); font-size: 0.94rem; }
.nav a:hover { color: var(--cream); text-decoration: none; }

/* "Waiting for you", in the header for an administrator and for nobody
   else: tracks and video links waiting for approval. The link is teal like
   any link; the count is grey at nought and orange above it, the same rule
   as the admin panel's own waiting counts — something is waiting on you now. */
.nav a.admin-link { color: var(--teal); display: inline-flex; align-items: center; gap: 7px; }
.nav a.admin-link:hover { color: var(--teal-bright); }
.admin-count {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1;
  background: var(--line); color: var(--muted);
  padding: 3px 6px; border-radius: 100px; min-width: 18px; text-align: center;
}
.admin-count.now { background: var(--orange); color: #FFF; }

/* ---- the account menu, and Log out in it ----
   A <details> rather than a scripted dropdown: it opens on a click and on
   Enter, closes on Escape, is reachable by keyboard and by a screen reader,
   and still works on a page whose scripts did not load — which is exactly the
   state a page is in when somebody most wants to get out of it. */
.acct { position: relative; flex-shrink: 0; }
.acct > summary {
  display: inline-flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer;
  color: var(--muted); font-size: 0.94rem;
  padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 100px;
}
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover, .acct[open] > summary { color: var(--cream); border-color: var(--muted); }
.acct-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal); color: #08312E;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 0.85rem;
}
/* The name goes at the width where the header starts to crowd. The initial
   stays, so the menu is still findable and still says whose account it is. */
@media (max-width: 620px) { .acct-name { display: none; } }

.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  min-width: 180px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  display: flex; flex-direction: column;
}
.acct-menu a, .acct-menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  font-family: var(--body); font-size: 0.92rem; color: var(--muted);
  padding: 9px 12px; border-radius: 7px;
}
.acct-menu a:hover, .acct-menu button:hover,
.acct-menu a:focus-visible, .acct-menu button:focus-visible {
  background: var(--panel-2); color: var(--cream); text-decoration: none;
}
/* Log out is the last item and the only destructive one, so it is marked off
   from the three links above it. */
.acct-menu button { border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; margin-top: 4px; }

/* ---- unread Buzzmail ----
   Settings and Buzzmail moved out of the top bar and into this menu, which
   made the header clean and made a waiting message invisible. A link
   announces itself; an item inside a closed menu cannot. On this site that
   silence is a listener who wrote to an artist and heard nothing back.

   So the announcement moves to the one control that is always on screen.
   ORANGE, AND THIS IS WHAT ORANGE IS FOR — something new (BUILD-SPEC section
   3). It is spent nowhere else on this bar, which is what leaves it able to
   catch an eye at all.

   A dot and not a number on the button: at 26px beside an avatar a two-digit
   count is a smudge, and the exact figure is one tap away inside the menu.
   Nothing is drawn at all when nothing is unread — a badge reading 0 is a
   thing to check every day for no reason. */
.acct-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--orange);
  /* A ring in the bar's own colour, so the dot still reads as a dot where it
     sits against the avatar rather than smearing into it. */
  box-shadow: 0 0 0 2px var(--ink);
}

/* The figure itself, beside Buzzmail inside the open menu. Same shape as the
   administrator's queue count in the bar, different colour for the different
   meaning: that one is a standing work list, this one is new. */
.acct-count {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1;
  background: var(--orange); color: #3A1B02;
  padding: 3px 6px; border-radius: 100px; min-width: 18px; text-align: center;
  flex-shrink: 0;
}

/* ---- buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden;
  font-family: var(--body); font-size: 0.89rem; font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 20px;
  border-radius: 100px;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.08s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--teal); color: #08312E; }
.btn-primary:hover { background: var(--teal-bright); }

.btn-ghost { background: transparent; color: var(--cream); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); }

.btn-play { background: var(--orange); color: #FFF; }
.btn-play:hover { background: #FF9440; }

.btn-lg { padding: 9px 28px; font-size: 0.94rem; }
.btn-sm { padding: 4px 14px; font-size: 0.82rem; }

/* ---- the sweep ----
   A band of light crosses the button on hover. Desktop only: a phone has no
   hover, so on touch it would either never fire or fire on tap and look like
   a fault. */

@media (hover: hover) and (pointer: fine) {
  .btn::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
      110deg,
      transparent 20%,
      rgba(255, 255, 255, 0.30) 48%,
      rgba(255, 255, 255, 0.30) 52%,
      transparent 80%
    );
    transform: translateX(-120%);
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
  }
  .btn:hover::after { transform: translateX(120%); }

  /* Ghost buttons are see-through, so a white sweep barely shows.
     They get a teal one instead. */
  .btn-ghost::after {
    background: linear-gradient(
      110deg,
      transparent 20%,
      rgba(27, 160, 152, 0.22) 48%,
      rgba(27, 160, 152, 0.22) 52%,
      transparent 80%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
  .btn:active { transform: none; }
}

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ---- sections ---- */

section { padding: 84px 0; }
.section-head { margin-bottom: 44px; max-width: 62ch; }
.section-head h2 { margin: 10px 0 14px; }

/* ---- hero ---- */

.hero { padding: 96px 0 84px; border-bottom: 1px solid var(--line); }
.hero h1 { margin: 18px 0 22px; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--teal); }
.hero h1 strong { font-weight: 800; color: var(--orange); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 18px; font-size: 0.85rem; color: var(--faint); }

/* ---- landing page photos ----
   The hero photo is an <img> rather than a CSS background so it can carry
   alt text and a phone-sized file. The ink layer over it is what keeps the
   white headline and the teal "be" readable: it is darkest on the left,
   where the words are, and darker again on phones, where the words cover
   the whole photo. Only the new landing page uses these classes;
   index-classic.html keeps the plain .hero. */

.hero-photo { position: relative; overflow: hidden; }
.hero-photo .hero-bg,
.hero-photo .hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(29,29,44,0.94) 0%, rgba(29,29,44,0.9) 55%, rgba(29,29,44,0.76) 100%);
}
.hero-photo .wrap { position: relative; z-index: 1; }

.diff-head { display: grid; gap: 36px; align-items: center; grid-template-columns: 1fr 1fr; margin-bottom: 44px; }
.diff-head .section-head { margin-bottom: 0; }
.diff-photo img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }

.join-photo { display: block; margin: -28px -24px 22px; }
.join-photo img {
  display: block; width: 100%; height: 150px; object-fit: cover; object-position: center 35%;
  border-radius: 13px 13px 0 0;
}

/* ---- cards ---- */

.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.95rem; }
.card-icon {
  width: 40px; height: 40px; border-radius: 9px;
  background: var(--panel-2); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 500;
  margin-bottom: 18px;
}

/* ---- steps ---- */

.step { display: flex; gap: 22px; padding: 26px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  font-family: var(--mono); font-size: 0.8rem; color: var(--teal);
  padding-top: 4px; flex-shrink: 0; width: 34px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.95rem; max-width: 60ch; }

/* ---- join panels ---- */

.join { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.join-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 24px;
  display: flex; flex-direction: column;
}
.join-card.featured { border-color: var(--teal-deep); }
.join-card .badge {
  align-self: flex-start; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--teal); color: #08312E;
  padding: 4px 10px; border-radius: 5px; margin-bottom: 16px;
}
.join-card ul { list-style: none; margin: 16px 0 26px; }
.join-card li { color: var(--muted); font-size: 0.92rem; padding: 6px 0 6px 20px; position: relative; }
.join-card li::before { content: '—'; position: absolute; left: 0; color: var(--teal-deep); }
.join-card .btn { margin-top: auto; }

/* ---- "Coming soon" ----
   One tag for anything on a page that is promised but not built yet. Muted
   grey on purpose: orange means something happening now, and this is the
   opposite. The landing page wraps each one so that
   buzz.menu.show_unbuilt_pages takes the tag away again (LegacyPageController). */

.soon {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px;
}
.join-card .soon-card { align-self: flex-start; margin: 0 0 16px; }
.btn.btn-soon { color: var(--faint); border-color: var(--line); cursor: default; }
.btn.btn-soon:hover { border-color: var(--line); }
.btn.btn-soon:active { transform: none; }
.btn.btn-soon::after { display: none; }
.foot-soon { color: var(--faint); font-size: 0.92rem; }

/* ---- footer ---- */

.site-foot { border-top: 1px solid var(--line); padding: 54px 0 40px; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr 1fr; }
.foot-grid h4 { font-size: 0.78rem; font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; font-weight: 400; }
.foot-grid ul { list-style: none; }
.foot-grid li { padding: 5px 0; }
.foot-grid li a { color: var(--muted); font-size: 0.92rem; }
.foot-grid li a:hover { color: var(--cream); text-decoration: none; }
.foot-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.foot-bottom p { font-size: 0.84rem; color: var(--faint); }

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .tagline { display: none; }
  .nav a.hide-sm { display: none; }
  section { padding: 60px 0; }
  .hero { padding: 64px 0 56px; }
  .hero-photo::after { background: rgba(29,29,44,0.92); }
  .diff-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- logo image ---- */
.logo-img { height: 26px; width: auto; display: block; }
.site-foot .logo-img { height: 30px; margin-bottom: 12px; }

/* ---- orange is reserved ----
   Teal is the everyday accent: buttons, links, headings.
   Orange marks one thing only — something happening right now.
   Live badges, the play button, a new event suggestion. Nothing else. */
.is-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange);
}
.is-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
/* .btn-play — the play button — is the third of these, and it is declared with
   the other button styles further up rather than a second time here. */

/* Nav link colour was overriding button text colour — buttons in the header
   need their own rule or the "Sign up" text turns grey on teal. */
.nav a.btn-primary { color: #08312E; }
.nav a.btn-primary:hover { color: #08312E; }
.nav a.btn-play { color: #FFFFFF; }
.nav a.btn-ghost { color: var(--cream); }

/* ================= FORMS ================= */

.auth-wrap { max-width: 660px; margin: 0 auto; padding: 56px 20px 90px; }
.auth-head { text-align: center; margin-bottom: 36px; }
.auth-head h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 10px; }
.auth-head p { color: var(--muted); }

/* account type chooser */
.type-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 34px; }
.type-pick button {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 14px; cursor: pointer; text-align: left;
  font-family: var(--body); color: var(--cream); transition: border-color 0.15s, background 0.15s;
}
.type-pick button:hover { border-color: var(--muted); }
.type-pick button[aria-pressed="true"] { border-color: var(--teal); background: var(--panel-2); }
.type-pick .t-name { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 3px; }
.type-pick .t-desc { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.4; }

/* fields */
.form-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 30px 28px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 7px; }
.field .hint { font-size: 0.8rem; color: var(--faint); margin-top: 6px; }

.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=date], .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--line); border-radius: var(--r);
  font-family: var(--body); font-size: 0.98rem;
}
/* A text box is the same box, about four lines tall. Without this a
   textarea was the browser's own: white, small, in a typewriter font. */
.field textarea { display: block; min-height: 7.2em; line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(27,160,152,0.18); }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

/* ---- show / hide a password ----
   The wrapper, the button and the icons are all built by assets/js/buzz.js —
   nothing here appears in any page's markup, and with javascript off none of
   it is drawn at all, so the box behaves exactly as it always did.

   MUTED, AND CREAM WHEN THE PASSWORD IS SHOWING. Deliberately not orange and
   not teal: orange means something is happening now, teal means the brand and
   the thing you are meant to press. An eye is neither — it is a control that
   should be findable and should not compete with the Log in button under it.
   Cream while showing because "your password is on screen" is worth being
   able to see out of the corner of an eye. */

.pw-wrap { position: relative; display: block; }

/* The box keeps room at its right-hand end, so typing never runs underneath
   the button. 52 = the 44px target plus a little air. */
.pw-wrap input[type=password],
.pw-wrap input[type=text] { padding-right: 52px; min-height: 46px; }

.pw-eye {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 100%; min-height: 44px;   /* a real target, not a 20px icon */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--muted);
  border-radius: 0 var(--r) var(--r) 0;
  -webkit-tap-highlight-color: transparent;
}
/* Hover brightens it but never reaches cream, because cream has ONE meaning
   here: the password is on screen right now. The first version used cream for
   both, and a browser test caught it — with a mouse resting on the button the
   icon stayed cream after the password had been hidden again, so the colour
   was telling you the opposite of the truth. Nobody would have seen that on a
   phone, where there is no hover at all. */
.pw-eye:hover { color: #C3C3D2; }
.pw-eye[aria-pressed="true"],
.pw-eye[aria-pressed="true"]:hover { color: var(--cream); }
.pw-eye:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
.pw-eye svg { width: 20px; height: 20px; display: block; }

/* One icon at a time, chosen by the state the button is already announcing —
   so the picture and what a screen reader hears can never disagree. */
.pw-eye .eye-off { display: none; }
.pw-eye[aria-pressed="true"] .eye-on { display: none; }
.pw-eye[aria-pressed="true"] .eye-off { display: block; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* checkboxes */
.check { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 14px; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--teal); }
.check .c-text { font-size: 0.9rem; line-height: 1.55; }
.check .c-text strong { display: block; font-weight: 600; margin-bottom: 3px; }
.check .c-text span { color: var(--muted); }
.check.consent { border-color: var(--teal-deep); }

.form-error { display: none; color: #FF8A80; font-size: 0.86rem; margin-top: 6px; }
.field.bad input, .field.bad select { border-color: #FF8A80; }
.field.bad .form-error { display: block; }

.form-foot { margin-top: 26px; }
.form-foot .btn { width: 100%; }
.form-alt { text-align: center; margin-top: 20px; font-size: 0.92rem; color: var(--muted); }

.hidden { display: none !important; }

/* Off the screen, still read aloud. For words a screen reader should reach
   when the layout has no room to show them. Everything is forced, because a
   utility has to beat whatever the element already had.
   .sr-only-sm gives the space up only on a narrow screen; above 620px the
   text reads normally. The two recipes are spelled out twice on purpose —
   there is no preprocessor here to share them. */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 0 !important; margin: -1px !important; padding: 0 !important;
  border: 0 !important; overflow: hidden !important;
  white-space: nowrap !important; clip-path: inset(50%) !important;
}
@media (max-width: 620px) {
  .sr-only-sm {
    position: absolute !important; width: 1px !important; height: 1px !important;
    min-width: 0 !important; margin: -1px !important; padding: 0 !important;
    border: 0 !important; overflow: hidden !important;
    white-space: nowrap !important; clip-path: inset(50%) !important;
  }
}

@media (max-width: 620px) {
  .type-pick { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px; }
}

/* ================= PRICING ================= */

.bill-toggle { display: flex; justify-content: center; gap: 0; margin-bottom: 40px; }
.bill-toggle button {
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--body); font-size: 0.9rem; padding: 10px 22px; cursor: pointer;
}
.bill-toggle button:first-child { border-radius: var(--r) 0 0 var(--r); }
.bill-toggle button:last-child { border-radius: 0 var(--r) var(--r) 0; border-left: none; }
.bill-toggle button[aria-pressed="true"] { background: var(--panel-2); color: var(--cream); border-color: var(--teal); }
.bill-save { font-size: 0.78rem; color: var(--teal); margin-left: 6px; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tier {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 24px; display: flex; flex-direction: column; position: relative;
}
.tier.featured { border-color: var(--teal); }
.tier .flag {
  position: absolute; top: -11px; left: 24px;
  background: var(--teal); color: #08312E;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 5px;
}
.tier h3 { font-size: 1.3rem; margin-bottom: 4px; }
.tier .line { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; }
.tier .price { font-family: var(--display); font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; }
.tier .per { color: var(--faint); font-size: 0.85rem; margin-bottom: 22px; }
.tier ul { list-style: none; margin-bottom: 26px; }
.tier li { font-size: 0.9rem; padding: 6px 0 6px 24px; position: relative; color: var(--cream); }
.tier li::before { content: '+'; position: absolute; left: 4px; color: var(--teal); font-weight: 600; }
.tier li.no { color: var(--faint); }
.tier li.no::before { content: '–'; color: var(--faint); }
.tier .btn { margin-top: auto; width: 100%; }

.notice {
  background: var(--panel-2); border-left: 3px solid var(--orange); border-radius: 0;
  padding: 16px 20px; margin: 40px 0; font-size: 0.9rem; color: var(--muted);
}
.notice strong { color: var(--cream); }

@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }

/* ================= MOBILE MENU ================= */
/* Before this, Discover / How it works / Pricing were simply hidden on a
   phone, which meant a phone visitor could not reach them at all. */

.menu-btn {
  display: none;
  position: relative;               /* the unread dot hangs off this */
  flex-shrink: 0;                   /* never squashed by a long artist name */
  background: transparent; border: 1px solid var(--line); border-radius: var(--r);
  width: 44px; height: 44px; cursor: pointer; padding: 0;   /* 44: the smallest target worth calling a target */
  align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--cream); border-radius: 2px; }

/* Unread Buzzmail, on the burger.

   The account menu carries the same dot on a wide screen and is HIDDEN on a
   phone (see the 860px block below), so without this a waiting message would
   be announced nowhere at all to most of the people who will ever use this
   site. Orange, because it is something new — the one thing orange is for. */
.menu-dot {
  position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 2px var(--ink);   /* so it reads as a dot against the bar */
}

.mobile-menu {
  display: none;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 8px 0 16px;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block; padding: 14px 20px; color: var(--cream);
  font-size: 1.05rem; border-bottom: 1px solid var(--line);
}
.mobile-menu a:hover { text-decoration: none; background: var(--panel-2); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .btn { margin: 16px 20px 0; width: calc(100% - 40px); }

/* The page's links above, the person's below — Buzzmail, Settings, Log out,
   in the same order as the account menu on a wide screen, so somebody who
   uses a phone and a laptop learns one order rather than two. */
.mm-divider { height: 1px; background: var(--line); margin: 8px 20px; }

/* The unread count sits at the right-hand end of its row. */
.mobile-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Nothing in here may push the page sideways. The header is built to fit
   360px so this should never have anything to do — it is here so that one
   long word in an artist name cannot drag the page off to the right while
   the panel is down. The class is put on by assets/js/buzz.js. */
.mobile-menu { max-width: 100%; }
body.menu-open { overflow-x: hidden; }

@media (max-width: 860px) {
  .menu-btn { display: flex; }
  .nav a:not(.btn) { display: none; }
  .site-head .wrap { gap: 12px; }
  .logo-img { height: 22px; }

  /* THE ACCOUNT MENU IS HIDDEN HERE, and the burger is the only menu.
     Two menus side by side on a phone is two places to look for the same
     four items — and the phone menu now holds all four, so this one has
     nothing left to offer that the burger does not. */
  .acct { display: none; }

  /* The one plain link that survives: a guest has to be able to log in from
     the header without opening a menu first. It comes AFTER the two rules
     above so that it wins on source order rather than needing !important. */
  .nav a.nav-keep { display: inline-flex; }
  .logo { flex-shrink: 1; min-width: 0; }
}

/* ---- the smallest phone that matters ----
   360px, which is a Galaxy A-series and most budget Androids. The header has
   to hold the logo, the burger, Log in and Sign up on one line with a gap at
   the right-hand edge, and at 22px the logo alone is 113px of that. Measured
   at 360: 28 padding + 93 logo + 44 burger + 48 Log in + 86 Sign up + 24 of
   gaps = 323, which leaves room rather than only just fitting. */
@media (max-width: 420px) {
  .site-head .wrap { gap: 8px; padding: 0 14px; }
  .logo-img { height: 18px; }
  .nav { gap: 10px; }
  .nav a { font-size: 0.88rem; }
  .site-head .btn { padding: 6px 14px; font-size: 0.84rem; }
  .tagline { display: none; }
}

/* comfortable tap targets on touch screens */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .nav a { padding: 10px 4px; }
  /* The account menu is now the way to Buzzmail, Settings and Log out, and on
     a phone it is the ONLY way — the plain links beside it are hidden below
     860px. So it has to be a comfortable target rather than a 26px circle,
     and so do the items inside it. */
  .acct > summary { min-height: 44px; padding-right: 12px; }
  .acct-menu a, .acct-menu button { min-height: 44px; }
  /* On a phone this panel is the whole navigation, so every row in it is a
     target somebody is aiming at with a thumb. */
  .menu-btn { min-width: 44px; min-height: 44px; }
  .mobile-menu a { min-height: 44px; }
  .pw-eye { min-width: 44px; min-height: 44px; }
  .player .p-bar { min-height: 44px; }
  .type-pick button { min-height: 68px; }
  .check input { width: 22px; height: 22px; }
}

/* ================= DISCOVER ================= */

.filters { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 6px; margin-bottom: 24px; -webkit-overflow-scrolling: touch; }
.filters::-webkit-scrollbar { height: 0; }
/* button OR a: the filters are javascript on some pages and real links with a
   query string on Discover, so a filtered view can be sent to somebody and
   the page works with no script at all. They have to look identical. */
.filters button, .filters a {
  flex-shrink: 0; background: var(--panel); border: 1px solid var(--line);
  color: var(--muted); font-family: var(--body); font-size: 0.88rem;
  padding: 8px 16px; border-radius: 100px; cursor: pointer; white-space: nowrap;
}
.filters a { text-decoration: none; }
.filters a:hover { color: var(--cream); text-decoration: none; }
.filters button[aria-pressed="true"], .filters a[aria-pressed="true"] { background: var(--teal); color: #08312E; border-color: var(--teal); }

/* Scrolls sideways rather than running off the screen, the same way .set-nav
   does further down — five tabs do not fit a phone at any sensible size. */
.tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tabs button, .tabs a {
  flex-shrink: 0; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--body); font-size: 0.98rem; font-weight: 500;
  padding: 0 0 12px; cursor: pointer; white-space: nowrap;
}
.tabs a { text-decoration: none; }
.tabs a:hover { color: var(--cream); text-decoration: none; }
/* TEAL, NOT ORANGE. Orange marks one thing on this site: something happening
   NOW — a track playing, a live badge, a new suggestion. Which tab you are
   looking at is not an event, it is where you are standing, so it gets the
   brand colour like every other piece of ordinary interface. Using orange
   here spent the one signal the site has on a tab heading, which then made
   the real orange mean less everywhere else. */
.tabs button[aria-pressed="true"], .tabs a[aria-pressed="true"] { color: var(--cream); border-bottom-color: var(--teal); }

.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; }
.track { cursor: pointer; }
.track .art {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--panel-2); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
}
.track .art .init { font-family: var(--display); font-size: 2rem; font-weight: 800; color: var(--faint); }
.track .play {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; border-radius: 50%; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s; border: none; cursor: pointer;
}
.track:hover .play, .track:focus-within .play { opacity: 1; }
.track .play::before { content: ''; border-left: 11px solid #FFF; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.track .t-title { font-size: 0.92rem; font-weight: 500; line-height: 1.35; }
.track .t-artist { font-size: 0.84rem; color: var(--muted); }
.track .t-plays { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); margin-top: 3px; }

@media (pointer: coarse) { .track .play { opacity: 1; } }

/* empty state — what every visitor sees in week one */
/* An empty section, inside a page that has other things in it.
   ------------------------------------------------------------------
   Different from .empty below, which is a whole page with nothing on
   it. This is one block — no tracks yet, no contacts yet, nothing in
   the diary — and it sits in the flow at the size of the thing it is
   standing in for.

   Every early artist sees several of these at once, so they are drawn
   as a quiet dashed outline rather than as a warning. What matters is
   the first line: it says what is missing and what to do about it,
   and the paragraph underneath says why it is worth doing. */
.nothing-yet {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 22px 22px 24px;
  background: rgba(255,255,255,0.012);
}
.nothing-yet strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--cream);
  margin-bottom: 8px;
}
.nothing-yet p { color: var(--muted); font-size: 0.92rem; line-height: 1.65; max-width: 56ch; }
.nothing-yet .btn { margin-top: 16px; margin-right: 8px; font-size: 0.86rem; padding: 6px 18px; }

.empty { text-align: center; padding: 60px 20px 70px; border: 1px dashed var(--line); border-radius: 16px; }
.empty .mark { font-family: var(--display); font-size: 3rem; font-weight: 800; color: var(--teal); margin-bottom: 16px; }
.empty h2 { margin-bottom: 12px; }
.empty p { color: var(--muted); max-width: 46ch; margin: 0 auto 26px; }
.empty .btn { margin: 0 6px 10px; }

/* ================= PLAYER BAR ================= */

.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--panel); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  /* Nothing in this bar may ever reach past its own edges. Without it a long
     track title on a narrow phone pushes the whole row sideways and the left
     of it — the play button and the start of the title — goes off screen. */
  max-width: 100%; overflow: hidden;
}
.player .p-art { width: 44px; height: 44px; border-radius: 7px; background: var(--panel-2); flex-shrink: 0; }
/* min-width:0 is what lets a flex item shrink below its content. Without it
   the title sets a floor the row cannot go under, and everything to the left
   of it is pushed out of the bar. */
.player .p-meta { min-width: 0; flex: 1 1 auto; overflow: hidden; }
/* Both lines, not just the title. The artist line had no truncation at all,
   so a long name wrapped and made the bar two rows high, or ran out of it. */
.player .p-title,
.player .p-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.player .p-title { font-size: 0.9rem; }
.player .p-artist { font-size: 0.78rem; color: var(--muted); }
/* GREY UNTIL THERE IS SOMETHING TO PLAY. Orange means "happening now", and
   with nothing loaded nothing is happening — so the bar's button is muted
   until a track is loaded (.has-track) or playing (.playing), and only then
   turns orange. partials/player.blade.php sets and clears both classes. */
.player .p-btn {
  width: 42px; height: 42px; border-radius: 50%; background: var(--line); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.player .p-btn::before { content: ''; border-left: 12px solid var(--muted); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.player.has-track .p-btn, .player.playing .p-btn { background: var(--orange); }
.player.has-track .p-btn::before, .player.playing .p-btn::before { border-left-color: #FFF; }
/* Playing: the same button becomes pause. */
.player.playing .p-btn::before {
  border: none; width: 4px; height: 14px; margin-left: 0;
  background: #FFF; box-shadow: 8px 0 0 #FFF; transform: translateX(-4px);
}
.player audio { display: none; }

/* ---- the progress bar, which is a slider you can drag ----

   THE LINE IS 4px AND THE THING YOU GRAB IS 44px. They are not the same
   element: .p-bar is a transparent 44-tall box that catches the finger, and
   .p-line inside it is the thin grey line you actually see. A 4px-tall
   target is not a target on a phone, and making the line itself 44px would
   turn the bar into a slab.

   touch-action: none is what stops the page scrolling underneath while
   somebody drags along the bar. Without it a horizontal drag on a phone is
   read as a scroll and the bar never moves.

   IT IS HIDDEN UNTIL A TRACK IS LOADED, at every width. It used to be hidden
   below 760px and shown above, and the script then set an inline
   display:block that beat the media query — so on a phone it appeared only
   by accident of specificity. A bar with nothing behind it is a control that
   cannot do anything. */
.player .p-bar {
  flex: 1 1 0; min-width: 0; max-width: 46%;
  height: 44px; display: none; align-items: center;
  background: none; cursor: pointer;
  touch-action: none;                 /* the drag is ours, not the page's */
  -webkit-tap-highlight-color: transparent;
}
.player.has-track .p-bar { display: flex; }
.player .p-bar:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

.player .p-line { position: relative; display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--line); }

/*
   ORANGE ONLY WHILE SOMETHING IS ACTUALLY PLAYING.
   Orange on this site means one thing: happening right now. The fill was
   orange and 28% wide from the moment the page loaded, so a bar that had
   never played anything showed a quarter of an orange progress bar — which
   reads as a track paused part way through. Neutral until the player is
   playing, and the width starts at nought. A track that is loaded but paused
   is deliberately grey for the same reason: nothing is happening.
*/
.player .p-bar i { display: block; height: 4px; width: 0; border-radius: 2px; background: var(--line); transition: background 0.15s; }
.player.playing .p-bar i { background: var(--orange); }

/* The handle. Grey when paused, orange while playing — the same rule as the
   fill, so the two can never disagree about whether anything is happening. */
.player .p-knob {
  position: absolute; top: 50%; left: 0;
  width: 12px; height: 12px; margin: 0; border-radius: 50%;
  background: var(--muted);
  transform: translate(-50%, -50%);
  transition: background 0.15s, transform 0.1s;
  pointer-events: none;               /* the 44px box does the catching */
}
.player.playing .p-knob { background: var(--orange); }
.player .p-bar.dragging .p-knob { transform: translate(-50%, -50%) scale(1.35); }

/* Where you are, and how long it is. Hidden with the bar, for the same
   reason: 0:00 / 0:00 under a player that has never played is noise. */
.player .p-time {
  display: none; flex-shrink: 0;
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
  font-variant-numeric: tabular-nums;   /* so it does not jiggle as it ticks */
}
.player.has-track .p-time { display: block; }

.has-player { padding-bottom: 84px; }

/* On a narrow phone the bar gives up width to the title rather than the
   other way round — but never so much that it cannot be dragged. */
@media (max-width: 520px) {
  .player .p-bar { max-width: 38%; min-width: 90px; }
  .player .p-time { font-size: 0.68rem; }
}

/* An empty 44px square is not worth the room on a phone, and it is the space
   the title needs. There is no artwork behind it yet in any case. */
@media (max-width: 520px) { .player .p-art { display: none; } }

/* ================= DOCUMENT PAGES ================= */

.doc { max-width: 720px; margin: 0 auto; padding: 50px 20px 90px; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 10px; }
.doc .updated { font-family: var(--mono); font-size: 0.78rem; color: var(--faint); margin-bottom: 40px; }
.doc h2 { font-size: 1.4rem; margin: 44px 0 14px; }
.doc h3 { font-size: 1.05rem; margin: 28px 0 8px; }
.doc p { margin-bottom: 16px; line-height: 1.75; }
.doc ul, .doc ol { margin: 0 0 18px 22px; }
.doc li { margin-bottom: 9px; line-height: 1.7; }
.doc .callout {
  background: var(--panel); border-left: 3px solid var(--teal);
  padding: 18px 22px; margin: 28px 0;
}
.doc .callout p:last-child { margin-bottom: 0; }
.doc .callout.warn { border-left-color: var(--orange); }
.doc .toc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; margin-bottom: 44px; }
.doc .toc ul { list-style: none; margin: 0; }
.doc .toc li { margin-bottom: 7px; }
.doc .draft {
  background: var(--panel-2); border: 1px dashed var(--orange);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 36px; font-size: 0.9rem;
}
.doc .draft strong { color: var(--orange); }

/* ================= FANBASE ================= */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; margin-bottom: 40px; }
.stat { background: var(--panel); border-radius: 12px; padding: 18px 20px; }
.stat .s-label { font-size: 0.82rem; color: var(--muted); }
.stat .s-value { font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }

.drill { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.drill-row { border-bottom: 1px solid var(--line); }
.drill-row:last-child { border-bottom: none; }
.drill-head {
  width: 100%; background: var(--panel); border: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  font-family: var(--body); color: var(--cream); text-align: left;
}
.drill-head:hover { background: var(--panel-2); }
.drill-head .d-name { flex: 1; font-size: 0.98rem; }
.drill-head .d-count { font-family: var(--mono); font-size: 0.88rem; color: var(--muted); }
.drill-head .d-arrow { color: var(--faint); transition: transform 0.15s; font-size: 0.8rem; }
.drill-head[aria-expanded="true"] .d-arrow { transform: rotate(90deg); }
.drill-body { display: none; padding: 4px 20px 22px; background: var(--panel); }
.drill-body.open { display: block; }

.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 10px; margin-bottom: 14px; }
.mini div { background: var(--ink); border-radius: var(--r); padding: 12px 14px; }
.mini .m-label { font-size: 0.76rem; color: var(--muted); }
.mini .m-value { font-size: 1.05rem; margin-top: 2px; }

.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.bar-row .b-name { font-size: 0.85rem; color: var(--muted); width: 78px; flex-shrink: 0; }
.bar-row .b-track { flex: 1; height: 7px; border-radius: 4px; background: var(--ink); }
.bar-row .b-track i { display: block; height: 7px; border-radius: 4px; background: var(--teal); }
.bar-row .b-num { font-family: var(--mono); font-size: 0.8rem; width: 38px; text-align: right; color: var(--muted); }

.too-small {
  background: var(--ink); border: 1px dashed var(--line); border-radius: var(--r);
  padding: 16px 18px; font-size: 0.88rem; color: var(--muted); line-height: 1.6;
}

.compose { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.compose textarea {
  width: 100%; min-height: 130px; resize: vertical;
  background: var(--ink); color: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px 14px; font-family: var(--body); font-size: 0.96rem;
}
.compose textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(27,160,152,0.18); }
.compose .c-note { font-size: 0.84rem; color: var(--faint); margin: 12px 0 18px; line-height: 1.6; }

.thread { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.thread:last-child { border-bottom: none; }
.thread .av { width: 38px; height: 38px; border-radius: 50%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; flex-shrink: 0; }
.thread .t-body { flex: 1; min-width: 0; }
.thread .t-who { font-size: 0.94rem; }
.thread .t-prev { font-size: 0.84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread .t-when { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); flex-shrink: 0; }

/* ================= ARTIST BAR ================= */
/* The artist's own menu. In the old build these links were buried in a
   pop-out icon strip and nobody found them. They stay at top level here. */

.artist-bar { background: var(--panel); border-bottom: 1px solid var(--line); position: relative; }
.artist-bar .inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.artist-bar .inner::-webkit-scrollbar { height: 0; }
.artist-bar a {
  flex-shrink: 0; padding: 14px 14px 12px; font-size: 0.92rem;
  color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.artist-bar a:hover { color: var(--cream); text-decoration: none; }
.artist-bar a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--teal); }
.artist-bar a .lock { font-size: 0.72rem; color: var(--muted); margin-left: 5px; }

/* ================= DASHBOARD ================= */

.greet { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.greet .who { flex: 1; min-width: 200px; }
.greet h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); }
.greet .sub { color: var(--muted); font-size: 0.94rem; }
.tier-badge {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; border: 1px solid var(--line); color: var(--muted);
}
.tier-badge.rising { border-color: var(--teal); color: var(--teal); }
.tier-badge.pro { background: var(--teal); border-color: var(--teal); color: #08312E; }

.suggest {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: 0 12px 12px 0; padding: 22px 24px; margin-bottom: 34px;
}
.suggest .s-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.suggest p { font-size: 1rem; line-height: 1.7; margin-bottom: 16px; }

.locked {
  background: var(--panel); border: 1px dashed var(--line); border-radius: 12px;
  padding: 26px 24px; margin-bottom: 34px;
}
.locked h3 { margin-bottom: 8px; }
.locked p { color: var(--muted); font-size: 0.93rem; margin-bottom: 18px; max-width: 54ch; }

.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 12px; margin-bottom: 40px; }
.actions a {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; color: var(--cream); font-size: 0.95rem;
}
.actions a:hover { border-color: var(--teal); text-decoration: none; }
.actions a span { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 3px; }

.feed { border-top: 1px solid var(--line); }
.feed div.item { padding: 15px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; }
.feed .when { font-family: var(--mono); font-size: 0.75rem; color: var(--faint); width: 62px; flex-shrink: 0; padding-top: 2px; }
.feed .what { font-size: 0.93rem; }

/* ================= UPLOAD ================= */

.drop {
  border: 2px dashed var(--line); border-radius: 14px; padding: 44px 24px;
  text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  background: var(--panel);
}
.drop:hover, .drop.over { border-color: var(--teal); background: var(--panel-2); }
.drop .d-icon { font-size: 2rem; color: var(--teal); margin-bottom: 10px; }
.drop .d-main { font-size: 1.02rem; font-weight: 500; margin-bottom: 6px; }
.drop .d-sub { font-size: 0.85rem; color: var(--muted); }
.drop.chosen { border-style: solid; border-color: var(--teal); }

.tag-box {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 10px; min-height: 48px;
}
.tag-box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(27,160,152,0.18); }
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--teal); color: #08312E; border-radius: 100px;
  padding: 4px 6px 4px 12px; font-size: 0.85rem; font-weight: 500;
}
.tag button { background: none; border: none; color: #08312E; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.tag-box input { flex: 1; min-width: 110px; background: none; border: none; color: var(--cream); font-family: var(--body); font-size: 0.95rem; outline: none; padding: 6px 2px; }

.lic { display: flex; flex-direction: column; gap: 10px; }
.lic label {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px;
}
.lic label:hover { border-color: var(--muted); }
.lic input { margin-top: 3px; accent-color: var(--teal); width: 18px; height: 18px; flex-shrink: 0; }
.lic input:checked ~ .l-text .l-name { color: var(--teal); }
.lic .l-name { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 3px; }
.lic .l-plain { font-size: 0.87rem; color: var(--muted); line-height: 1.55; display: block; }
.lic .l-code { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); display: block; margin-top: 5px; }

/* ================= ARTIST PROFILE ================= */

.cover {
  position: relative; height: clamp(180px, 30vw, 300px);
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border-radius: 0 0 16px 16px; overflow: hidden;
}
.cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(29,29,44,0.92), transparent 60%);
}
/* On a phone the 180px floor above wins outright — 30vw only passes it at
   600px wide — so the header image ate a third of the screen before the
   band name. Same 30vw slope, lower floor and ceiling: the name is now
   near the top of the first screen. Desktop is untouched. */
@media (max-width: 620px) {
  .cover { height: clamp(100px, 30vw, 150px); }
}

.artist-id { position: relative; margin-top: -56px; padding: 0 4px; z-index: 2; }
.artist-id .avatar {
  width: 104px; height: 104px; border-radius: 16px;
  background: var(--panel-2); border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 2.4rem; font-weight: 800; color: var(--teal);
  margin-bottom: 14px;
}
.artist-id h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: 4px; }
.artist-id .meta { color: var(--muted); font-size: 0.95rem; }
.artist-id .meta b { color: var(--cream); font-weight: 600; }
.artist-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.socials a {
  font-size: 0.84rem; padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--muted);
}
.socials a:hover { border-color: var(--teal); color: var(--cream); text-decoration: none; }

.col-2 { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .col-2 { grid-template-columns: 1fr; gap: 28px; } }
/* A grid item will not shrink below its own content unless it is told it may,
   so one wide song row was widening the whole column and carrying every
   block on the page past the right edge with it. */
.col-2 > * { min-width: 0; }

.block { margin-bottom: 40px; }
.block-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.block-head h2 { font-size: 1.25rem; }
.block-head .count { font-family: var(--mono); font-size: 0.85rem; color: var(--faint); }
.block-head a { margin-left: auto; font-size: 0.86rem; }

.song-list { border-top: 1px solid var(--line); }
.song-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
/* The number, the play button, the tick and the running time are all fixed
   widths; on a phone five 14px gaps on top of them left the title nothing to
   sit in. Narrower gaps give it back about 30px. */
@media (max-width: 620px) { .song-row { gap: 8px; } }

.song-row .n { font-family: var(--mono); font-size: 0.78rem; color: var(--faint); width: 20px; }
.song-row .sp {
  width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.song-row .sp::before { content: ''; border-left: 9px solid var(--cream); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.song-row:hover .sp { background: var(--orange); }
.song-row:hover .sp::before { border-left-color: #FFF; }

/* The track that is playing. Orange, because orange marks the one thing
   happening now and nothing else. The triangle becomes two bars. */
.song-row .sp.playing { background: var(--orange); }
.song-row .sp.playing::before {
  border: none; width: 4px; height: 12px; margin-left: 0;
  background: #FFF; box-shadow: 7px 0 0 #FFF; transform: translateX(-3px);
}
.song-row .s-name { flex: 1; min-width: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.song-row .s-name small { display: block; color: var(--faint); font-size: 0.76rem; }
/* "12 plays", not "12". The unit is dimmer than the figure so the number is
   still what the eye lands on, and the whole thing never wraps — a count
   broken over two lines is worse than no label at all. */
.song-row .s-plays {
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted);
  white-space: nowrap; flex-shrink: 0;
}
.song-row .s-plays .unit { color: var(--faint); }
.song-row .s-time { font-family: var(--mono); font-size: 0.78rem; color: var(--faint); width: 42px; text-align: right; flex-shrink: 0; }

/* Delete, on the owner's own track rows. Quiet until it is reached for: it is
   the one control on this site that destroys something, and a red button
   sitting beside every track invites the accident it is trying to prevent. */
.song-row .s-del { flex-shrink: 0; }
.song-row .s-del button {
  background: none; border: 1px solid transparent; color: var(--faint);
  font-family: var(--body); font-size: 0.78rem; padding: 4px 9px;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.song-row .s-del button:hover,
.song-row .s-del button:focus-visible { color: #FF8A80; border-color: rgba(255,138,128,0.45); }

/* On a phone the owner's row carries the Visible tick and Delete as well,
   and together they left the title one pixel — "Yellow eyes" read down the
   screen a letter at a time. The title keeps at least 150px; whatever does
   not fit beside it goes to a second line. */
@media (max-width: 620px) {
  .song-row { flex-wrap: wrap; }
  .song-row .s-name { flex: 1 1 150px; }
}
/* Narrower than 360px the label and the running time together leave the title
   nothing, so the count keeps its word and the running time goes: a running
   time next to a track is a convention anybody can read back from the player,
   and an unlabelled play count is what sent somebody looking for it in the
   first place. 360px and up keeps both — BUILD-SPEC section 13 is the note on
   what happens at 320px, and this is deliberately not adding to it. */
@media (max-width: 359px) {
  .song-row .s-time { display: none; }
}
.badge-e { font-family: var(--mono); font-size: 0.6rem; border: 1px solid var(--faint); color: var(--faint); padding: 1px 4px; border-radius: 3px; margin-left: 6px; vertical-align: 1px; }

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 16px; }
.album .cvr { aspect-ratio: 1; border-radius: 10px; background: var(--panel-2); margin-bottom: 8px; display:flex; align-items:center; justify-content:center; font-family: var(--display); font-size:1.6rem; color: var(--faint); }
.album .a-name { font-size: 0.9rem; }
.album .a-year { font-size: 0.78rem; color: var(--faint); }

.side-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.side-card h3 { font-size: 1rem; margin-bottom: 12px; }
.side-card .btn { width: 100%; }

.gig { padding: 12px 0; border-bottom: 1px solid var(--line); }
.gig:last-child { border-bottom: none; }
.gig .g-date { font-family: var(--mono); font-size: 0.75rem; color: var(--orange); }
.gig .g-where { font-size: 0.92rem; margin: 2px 0 6px; }

/* ---- merchandise, as a listener sees it ----
   BUILD-SPEC 10e. A grid of what is for sale, a line asking for support and
   a way to buy. No earning figure, no tick and no lock is written into this
   view at all — see the owner-view section for those. */
.merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.merch-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column;
}
.merch-card .m-shot {
  aspect-ratio: 1; border-radius: 9px; background: var(--panel-2); margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.5rem; color: var(--faint);
}
.merch-card .m-name { font-size: 0.9rem; line-height: 1.35; }
.merch-card .m-sub { font-size: 0.78rem; color: var(--faint); }
.merch-card .m-price { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); margin: 6px 0 11px; }
.merch-card .btn { width: 100%; font-size: 0.85rem; padding: 6px 14px; margin-top: auto; }
.m-support { font-size: 0.9rem; color: var(--muted); max-width: 52ch; margin-top: 16px; }

/* ================= OWNER VIEW ================= */
/* Everything here is only ever rendered when the artist is looking at their
   own page. A listener must never see a lock, a tickbox or an upgrade card. */

.view-bar {
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.view-bar .inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.view-bar .v-text { font-size: 0.88rem; color: var(--muted); flex: 1; min-width: 180px; }
.view-bar .v-text b { color: var(--cream); }
/* On a phone the sentence wraps to two lines and pushes the buttons onto a
   row of their own — 114px of chrome above a 117px header image. The two
   buttons are the part you act on, so the sentence gives up its space there:
   it carries .sr-only-sm in the markup, which takes it out of the layout
   without taking it away from a screen reader. */
.view-switch { display: flex; }
.view-switch button {
  background: var(--ink); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--body); font-size: 0.84rem; padding: 8px 16px; cursor: pointer;
}
.view-switch button:first-child { border-radius: var(--r) 0 0 var(--r); }
.view-switch button:last-child { border-radius: 0 var(--r) var(--r) 0; border-left: none; }
.view-switch button[aria-pressed="true"] { background: var(--teal); color: #08312E; border-color: var(--teal); }

/* per-item visibility control */
.vis {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.78rem; color: var(--muted); cursor: pointer;
  padding: 3px 9px; border-radius: 100px; border: 1px solid var(--line);
  background: var(--ink); white-space: nowrap;
}
.vis input { width: 14px; height: 14px; accent-color: var(--teal); margin: 0; }
.vis.on { color: var(--teal); border-color: var(--teal-deep); }

/* a tick for a whole section rather than one item, e.g. merchandise */
.block-head .vis { margin-left: auto; align-self: center; }

.is-hidden-item { opacity: 0.45; }

/* A song row the owner can see and a listener cannot.
   Dimmed one piece at a time rather than as a whole row, because opacity on
   the row would take the play button down with it — and the artist CAN play
   their own track while it waits to be checked (PlaybackController::url).
   A greyed-out play button would say otherwise. */
.song-row.is-hidden-item { opacity: 1; }
.song-row.is-hidden-item .n,
.song-row.is-hidden-item .s-name,
.song-row.is-hidden-item .s-plays,
.song-row.is-hidden-item .s-time { opacity: 0.62; }

.hidden-tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line); padding: 1px 6px; border-radius: 3px; margin-left: 8px;
}
/* Waiting is not a fault, so it is the logo orange rather than a red. */
.hidden-tag.waiting { color: var(--orange); border-color: var(--orange-deep); }
.hidden-tag.checking { color: var(--muted); border-color: var(--line); }
.hidden-tag.taken,
.hidden-tag.failed,
/* An upload that never landed. A fault, and one the artist has to act on. */
.hidden-tag.broken,
.hidden-tag.paused { color: #FF8A80; border-color: rgba(255,138,128,0.4); }

/* The sentence under a track that is not live, saying why. */
.song-row .s-name small.track-note { color: var(--muted); margin-top: 3px; }

/* The same thing said once at the top of the artist's own track list. */
.track-waiting {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--orange-deep); border-left-width: 3px;
  border-radius: 8px; background: rgba(251,129,34,0.06);
  padding: 11px 14px; margin-bottom: 16px;
  font-size: 0.86rem; color: var(--muted); line-height: 1.5;
}
.track-waiting strong { color: var(--cream); }

/* greyed-out upgrade cards — artist only */
.upsell {
  border: 1px dashed var(--line); border-radius: 12px; padding: 24px;
  background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 10px, var(--panel-2) 10px, var(--panel-2) 20px);
  opacity: 0.9;
}
.upsell h3 { color: var(--faint); margin-bottom: 6px; }
.upsell h3 .lk { font-size: 0.8rem; margin-right: 7px; color: var(--muted); }
/* The drawn padlock (partials/lock). Takes the colour of whatever holds it. */
.lock-ic { display: inline-block; vertical-align: -1px; }
.upsell p { color: var(--faint); font-size: 0.9rem; margin-bottom: 16px; max-width: 46ch; }
.upsell .btn { font-size: 0.86rem; }

/* ---- video links (BUILD-SPEC 7a) ----
   PICTURE FIRST. Every box is a still picture with a play button over it.
   Nothing contacts YouTube or Vimeo until that button is pressed — several
   players loading at once make the page crawl on a phone, and even the
   youtube-nocookie player calls Google the moment it loads.

   Mobile first: one per row, and two per row from 700px up. The grid is
   written that way round on purpose, because the phone is where this is
   actually looked at. */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }

.video-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* The window itself. 16:9, which is the shape both providers deliver. */
.video-box {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 12px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line);
}
.video-box img.v-still {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* THE ONE ORANGE THING ON THE PAGE besides the track play button, and it is
   the same thing: a play button. Nothing else here borrows the colour. */
.video-box .v-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--orange); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: transform 0.15s ease;
}
/* A triangle drawn in CSS rather than an image, so it cannot fail to load.
   Nudged right because a triangle's visual centre is left of its box. */
.video-box .v-play::before {
  content: ''; margin-left: 5px;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #FFF;
}
.video-box .v-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.video-box .v-play:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .video-box .v-play { transition: none; } }
@media (prefers-reduced-motion: reduce) { .video-box .v-play:hover { transform: translate(-50%, -50%); } }

/* Which service it is, before you press anything. */
.video-box .v-src {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--cream);
  background: rgba(29,29,44,0.82); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 4px;
}

.video-item .v-title { font-size: 0.93rem; line-height: 1.45; }

/* The ad note under every YouTube window. Buzz Music never sells or places
   advertising; YouTube may put its own inside its player and gives websites
   no setting to stop it. Saying so is the only honest option. */
.video-item .v-note { font-size: 0.76rem; color: var(--faint); line-height: 1.5; }

/* ---- the artist's own view of a video ---- */
.video-item .v-owner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 0.8rem;
}
.video-item .v-owner form { display: inline-flex; gap: 8px; align-items: center; }
.video-item .v-owner .btn { font-size: 0.78rem; padding: 6px 12px; }
.video-item .v-reason {
  font-size: 0.8rem; color: var(--muted); line-height: 1.5;
  border-left: 2px solid rgba(255,138,128,0.4); padding-left: 10px;
}
/* An unapproved or unticked video, dimmed on the artist's own page the same
   way an unshared track is. Never rendered for anybody else at all. */
.video-item.is-hidden-item .video-box { opacity: 0.55; }

/* Changing the link. Hidden until asked for, because it is the rare case. */
.video-item .v-edit { display: none; gap: 8px; flex-wrap: wrap; }
.video-item .v-edit.open { display: flex; }
.video-item .v-edit input { flex: 1; min-width: 200px; font-size: 0.82rem; }

/* ---- the add-a-video box ---- */
.video-add { margin-bottom: 26px; }
.video-add label { display: block; font-size: 0.9rem; margin-bottom: 7px; }
.video-add input[type="url"],
.video-add input[type="text"] { width: 100%; }
.video-add .v-help { font-size: 0.8rem; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.video-add .v-bad { font-size: 0.82rem; color: #FF8A80; margin-top: 7px; display: none; }
.video-add .v-bad.show { display: block; }
.video-add .check { margin-top: 16px; }
.video-add .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* image upload spots */
.img-slot {
  position: absolute; z-index: 3;
  background: rgba(29,29,44,0.86); border: 1px solid var(--line);
  border-radius: var(--r); padding: 7px 13px; font-size: 0.82rem;
  color: var(--cream); cursor: pointer;
}
.img-slot:hover { border-color: var(--teal); text-decoration: none; }
.img-slot.cover-slot { right: 14px; bottom: 14px; }
/* Inside the picture's bottom-left corner, clear of the name. It used to
   hang 10px below the picture and sat on the first letter of the name.
   20px = the picture's own 14px margin + 6px inset. */
.img-slot.avatar-slot { left: 6px; bottom: 20px; font-size: 0.72rem; padding: 4px 9px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 10px; }
.gallery .g-item { position: relative; aspect-ratio: 1; border-radius: 9px; background: var(--panel-2); display:flex; align-items:center; justify-content:center; color: var(--faint); font-size:0.8rem; }
.gallery .g-item .vis { position: absolute; left: 6px; bottom: 6px; font-size: 0.68rem; padding: 2px 7px; }
.gallery .add {
  border: 1px dashed var(--line); background: none; color: var(--muted);
  cursor: pointer; font-family: var(--body); font-size: 0.85rem;
}
.gallery .add:hover { border-color: var(--teal); color: var(--cream); }

/* Real pictures (BUILD-SPEC 12C). Each fills the box it sits in. A held one
   is the owner's view only, greyed, with its note underneath. */
.cover > img.pic, .artist-id .avatar > img.pic, .album .cvr > img.pic,
.gallery .g-item > img.pic, .song-row .s-art > img.pic {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.cover > img.pic { position: absolute; inset: 0; border-radius: 0; }
.artist-id .avatar { overflow: hidden; }
.pic.is-held, .g-item.is-held > img.pic { opacity: 0.4; filter: grayscale(1); }
.pic-note { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
.img-slot input[type=file], .pic-up input[type=file] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
}
.img-slot label, .pic-up label { cursor: pointer; }
.pic-up { position: relative; display: inline-block; font-size: 0.78rem; color: var(--muted); }
.pic-up label { border-bottom: 1px dashed var(--line); }
.pic-up label:hover { color: var(--cream); border-color: var(--teal); }
.gallery .g-item .g-tag {
  position: absolute; left: 6px; right: 6px; top: 6px; font-size: 0.68rem;
  background: rgba(29,29,44,0.86); border-radius: 6px; padding: 3px 6px; color: var(--cream);
}
.gallery .g-item .g-tools {
  position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px;
}
.gallery .g-item .g-tools button {
  font-size: 0.68rem; padding: 2px 7px; border-radius: 6px; cursor: pointer;
  background: rgba(29,29,44,0.86); color: var(--cream); border: 1px solid var(--line);
}
.song-row .s-art {
  width: 34px; height: 34px; border-radius: 6px; overflow: hidden; flex: none;
  background: var(--panel-2); display: inline-block; vertical-align: middle; margin-right: 8px;
}
/* The Report link: small and quiet, never a button that competes with Play. */
.report-link { font-size: 0.74rem; color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.report-link:hover { color: var(--muted); }

.limit-note { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); margin-top: 10px; }

/* ---- merchandise, as the artist sees it ----
   One row per product, and the one number section 10e promises them:
   what they earn per sale. Teal, because it is money that is theirs —
   orange stays reserved for something happening right now.
   Stacked on a phone, one line per product from 620px up. */
.merch-list { border-top: 1px solid var(--line); }
.merch-row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 6px 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.merch-row .m-shot {
  grid-row: span 2; width: 54px; height: 54px; border-radius: 8px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.05rem; color: var(--faint);
}
.merch-row .m-name { font-size: 0.95rem; }
.merch-row .m-sub { font-size: 0.78rem; color: var(--faint); line-height: 1.45; }
.merch-row .m-earn { font-size: 0.92rem; color: var(--teal); }
.merch-row .vis { justify-self: start; }

@media (min-width: 620px) {
  .merch-row { grid-template-columns: 54px minmax(0, 1fr) auto auto; }
  .merch-row .m-shot { grid-row: auto; }
  .merch-row .m-earn { text-align: right; }
}

/* add a product */
.merch-add {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 18px; margin-top: 24px;
}
.merch-add h3 { margin-bottom: 18px; }
.merch-add .lbl { display: block; font-size: 0.88rem; font-weight: 500; margin-bottom: 7px; }
.merch-add .drop { padding: 28px 18px; }
.merch-add .field:last-of-type { margin-bottom: 0; }
.merch-add .form-foot { margin-top: 22px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--body); font-size: 0.84rem; padding: 7px 14px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--ink); color: var(--muted); cursor: pointer;
}
.chip:hover { border-color: var(--muted); color: var(--cream); }
.chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #08312E; }

@media (min-width: 620px) { .merch-add { padding: 26px 24px; } }

/* ================= BACKSTAGE ================= */

.private-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal);
  border: 1px solid var(--teal-deep); border-radius: 100px;
  padding: 5px 13px; margin-bottom: 18px;
}

.bs-grid { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; }
@media (max-width: 940px) { .bs-grid { grid-template-columns: 1fr; } }

.cal-item {
  display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.cal-item:last-child { border-bottom: none; }
.cal-date {
  flex-shrink: 0; width: 54px; text-align: center;
  background: var(--panel-2); border-radius: 9px; padding: 7px 4px;
}
.cal-date .d { font-family: var(--display); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.cal-date .mo { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); text-transform: uppercase; }
.cal-body { flex: 1; min-width: 0; }
.cal-body .c-what { font-size: 0.96rem; }
.cal-body .c-where { font-size: 0.83rem; color: var(--muted); }
.cal-kind {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 3px; align-self: flex-start;
}
.k-gig     { background: rgba(251,129,34,0.15); color: var(--orange); }
.k-studio  { background: rgba(27,160,152,0.15); color: var(--teal); }
.k-release { background: var(--panel-2); color: var(--muted); }
.k-task    { background: var(--panel-2); color: var(--faint); }

.contact-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-row:last-child { border-bottom: none; }
.contact-row .c-av {
  width: 36px; height: 36px; border-radius: 9px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; color: var(--muted); flex-shrink: 0;
}
.contact-row .c-name { font-size: 0.94rem; }
.contact-row .c-role { font-size: 0.8rem; color: var(--muted); }
.contact-row .c-tag {
  font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); padding: 2px 7px; border-radius: 3px;
}

.note-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 15px 17px; margin-bottom: 10px;
}
.note-card .n-title { font-size: 0.94rem; margin-bottom: 4px; }
.note-card .n-body { font-size: 0.86rem; color: var(--muted); line-height: 1.6; }
.note-card .n-when { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); margin-top: 8px; }

.member-row { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.member-row:last-child { border-bottom: none; }
.member-row .m-av {
  width: 38px; height: 38px; border-radius: 50%; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0;
}
.member-row .m-name { font-size: 0.94rem; }
.member-row .m-can { font-size: 0.79rem; color: var(--muted); }
.member-row select {
  background: var(--ink); color: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r); padding: 6px 10px; font-family: var(--body); font-size: 0.84rem;
}

/* ================= TOAST ================= */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  z-index: 200; max-width: min(460px, calc(100vw - 40px));
  background: var(--panel-2); color: var(--cream);
  border: 1px solid var(--teal-deep); border-radius: 10px;
  padding: 13px 20px; font-size: 0.9rem; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body.has-player .toast { bottom: 92px; }

/* links to pages that don't exist yet — a hint, not a warning */
a.not-yet { opacity: 0.62; }
a.not-yet:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ================= PREVIEW STRIP ================= */
/* Shown only while the artist is previewing their own page. A real visitor
   is not the owner, so this is never built for them. */

.preview-strip {
  position: sticky; top: 0; z-index: 80;
  background: var(--teal); color: #08312E;
  padding: 9px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 0.88rem;
}
.preview-strip .p-label { font-weight: 600; }
.preview-strip .p-note { opacity: 0.75; flex: 1; min-width: 140px; }
.preview-strip button {
  background: #08312E; color: #FFF; border: none; border-radius: var(--r);
  font-family: var(--body); font-size: 0.85rem; font-weight: 600;
  padding: 8px 16px; cursor: pointer;
}
.preview-strip button:hover { background: #0B4A44; }

/* the sticky site header sits below the strip, not on top of it */
.preview-strip ~ .site-head { top: 41px; }
@media (max-width: 560px) {
  .preview-strip { font-size: 0.82rem; }
  .preview-strip .p-note { display: none; }
}

/* ================= STATS ================= */

.range { display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; }
.range button {
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--body); font-size: 0.86rem; padding: 7px 15px;
  border-radius: 100px; cursor: pointer; white-space: nowrap;
}
.range button[aria-pressed="true"] { background: var(--teal); color: #08312E; border-color: var(--teal); }

.chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; }
.chart-card h2 { font-size: 1.1rem; margin-bottom: 4px; }
.chart-card .c-sub { font-size: 0.84rem; color: var(--muted); margin-bottom: 20px; }

.map-wrap { position: relative; background: var(--ink); border-radius: 10px; overflow: hidden; }
.map-wrap svg { display: block; width: 100%; height: auto; }
.map-toggle { display: flex; gap: 6px; margin-bottom: 14px; }
.map-toggle button {
  background: var(--ink); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r); cursor: pointer;
}
.map-toggle button[aria-pressed="true"] { color: var(--teal); border-color: var(--teal-deep); }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 0.78rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { display: block; border-radius: 50%; background: var(--teal); opacity: 0.75; }

.split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 6px 0 10px; }
.split i { display: block; height: 12px; }
.split-key { display: flex; gap: 20px; font-size: 0.84rem; }
.split-key span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.split-key i { width: 10px; height: 10px; border-radius: 2px; display: block; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

.rank-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rank-row:last-child { border-bottom: none; }
.rank-row .r-n { font-family: var(--mono); font-size: 0.76rem; color: var(--faint); width: 18px; }
.rank-row .r-name { flex: 1; min-width: 0; font-size: 0.93rem; }
.rank-row .r-name small { display: block; color: var(--faint); font-size: 0.76rem; }
.rank-row .r-val { font-family: var(--mono); font-size: 0.84rem; }
.rank-row .r-val small { color: var(--faint); font-size: 0.72rem; display: block; text-align: right; }

/* ---- track table ---- */

.track-head, .track-row {
  display: grid;
  grid-template-columns: 1fr 68px 68px 56px 68px;
  gap: 8px; align-items: center;
}
.track-head {
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.track-head .th-name {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
}
.track-head .th {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); text-align: right;
}
.track-head .th:hover { color: var(--cream); }
.track-head .th.on { color: var(--teal); }
.track-head .th.on::after { content: ' ▾'; }

.track-row { padding: 13px 0; border-bottom: 1px solid var(--line); }
.track-row:last-child { border-bottom: none; }
.track-row .tr-name { font-size: 0.93rem; min-width: 0; }
.track-row .tr-bar {
  display: block; height: 4px; border-radius: 2px;
  background: var(--ink); margin-top: 6px; max-width: 220px;
}
.track-row .tr-bar i { display: block; height: 4px; border-radius: 2px; background: var(--teal); opacity: 0.55; }
.track-row .tr-num { font-family: var(--mono); font-size: 0.85rem; text-align: right; }
.track-row .tr-num.rate { color: var(--teal); }

@media (max-width: 640px) {
  .track-head, .track-row { grid-template-columns: 1fr 54px 54px 46px; }
  .track-head .th:last-child, .track-row .tr-num:last-child { display: none; }
}

/* ---- swipeable rows ----
   Fades at the edges so it is obvious there is more to see, and a grab
   cursor so it can be dragged with a mouse as well as a finger. */

.swipe-x { scroll-behavior: smooth; }
.swipe-x.can-drag { cursor: grab; }
.swipe-x.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.swipe-x.dragging a { pointer-events: none; }

.swipe-wrap { position: relative; min-width: 0; }
.artist-bar .swipe-wrap { max-width: var(--wrap); margin: 0 auto; }
.swipe-wrap::before, .swipe-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 54px;
  pointer-events: none; opacity: 0; transition: opacity 0.18s; z-index: 2;
}
/* Solid at the edge so text visibly runs under it, not a faint wash. */
.swipe-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--panel) 30%, rgba(38,38,58,0) 100%);
}
.swipe-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--panel) 30%, rgba(38,38,58,0) 100%);
}

/* An arrow, because a fade alone is easy to miss on a dark bar. */
.swipe-wrap .swipe-hint {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; pointer-events: none;
  font-size: 0.8rem; color: var(--teal);
  opacity: 0; transition: opacity 0.18s;
}
.swipe-wrap .swipe-hint.left  { left: 6px; }
.swipe-wrap .swipe-hint.right { right: 6px; }
.swipe-wrap.can-left  .swipe-hint.left  { opacity: 1; }
.swipe-wrap.can-right .swipe-hint.right { opacity: 1; }
.swipe-wrap.can-left::before  { opacity: 1; }
.swipe-wrap.can-right::after  { opacity: 1; }

/* the filter pills on Discover sit on the page background, not a panel */
.filters-wrap.swipe-wrap::before { background: linear-gradient(to right, var(--ink) 30%, rgba(29,29,44,0) 100%); }
.filters-wrap.swipe-wrap::after  { background: linear-gradient(to left,  var(--ink) 30%, rgba(29,29,44,0) 100%); }

@media (prefers-reduced-motion: reduce) {
  .swipe-x { scroll-behavior: auto; }
  .swipe-wrap::before, .swipe-wrap::after { transition: none; }
}

/* ================= EVENT CALCULATOR ================= */

.verdict {
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border: 1px solid var(--teal-deep); border-radius: 14px;
  padding: 28px 30px; margin-bottom: 26px;
}
.verdict .v-eyebrow {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 12px; display: block;
}
.verdict h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: 14px; line-height: 1.25; }
.verdict p { font-size: 1.02rem; line-height: 1.7; color: var(--cream); max-width: 62ch; }
.verdict .v-figs { display: flex; flex-wrap: wrap; gap: 26px; margin: 22px 0 24px; }
.verdict .v-fig .f-num { font-family: var(--display); font-size: 1.7rem; font-weight: 800; }
.verdict .v-fig .f-lab { font-size: 0.8rem; color: var(--muted); }

.working { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 26px; }
.working summary {
  padding: 16px 20px; cursor: pointer; background: var(--panel);
  font-size: 0.94rem; list-style: none;
}
.working summary::-webkit-details-marker { display: none; }
.working summary::before { content: '▶ '; color: var(--teal); font-size: 0.72rem; }
.working[open] summary::before { content: '▼ '; }
.working .w-body { padding: 4px 20px 20px; background: var(--panel); }
.working .step-line { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.working .step-line:last-child { border-bottom: none; }
.working .step-line .s-lbl { flex: 1; color: var(--muted); }
.working .step-line .s-val { font-family: var(--mono); }

.option-row {
  display: grid; grid-template-columns: 1fr 90px 90px 96px; gap: 12px;
  align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.option-row:last-child { border-bottom: none; }
.option-row .o-place { font-size: 0.95rem; }
.option-row .o-place small { display: block; color: var(--faint); font-size: 0.77rem; }
.option-row .o-num { font-family: var(--mono); font-size: 0.85rem; text-align: right; }
.option-row .o-num small { display: block; color: var(--faint); font-size: 0.7rem; }
.option-row .o-verd {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center; padding: 4px 8px; border-radius: 4px;
}
.o-go    { background: rgba(27,160,152,0.16); color: var(--teal); }
.o-maybe { background: rgba(251,129,34,0.14); color: var(--orange); }
.o-no    { background: var(--panel-2); color: var(--faint); }

@media (max-width: 620px) {
  .option-row { grid-template-columns: 1fr 74px 84px; }
  .option-row .o-num.hide-sm { display: none; }
  .verdict { padding: 22px 20px; }
}

/* ================= BUDGET CARDS ================= */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 14px; margin-bottom: 24px; }

.bcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column;
}
.bcard.has-pick { border-color: var(--teal-deep); }
.bcard-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bcard-head input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--cream);
  font-family: var(--body); font-size: 1rem; font-weight: 600; padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.bcard-head input:focus { outline: none; border-bottom-color: var(--teal); }
.bcard-head .kill {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 2px 4px;
}
.bcard-head .kill:hover { color: #FF8A80; }

.bitem { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.bitem:last-of-type { border-bottom: none; }
.bitem input[type=radio] { width: 16px; height: 16px; accent-color: var(--teal); flex-shrink: 0; }
.bitem .i-name {
  flex: 1; min-width: 0; background: var(--ink); border: 1px solid transparent;
  color: var(--cream); font-family: var(--body); font-size: 0.86rem;
  padding: 6px 8px; border-radius: 6px;
}
.bitem .i-cost {
  width: 74px; background: var(--ink); border: 1px solid transparent;
  color: var(--cream); font-family: var(--mono); font-size: 0.82rem;
  padding: 6px 8px; border-radius: 6px; text-align: right;
}
.bitem input:focus { outline: none; border-color: var(--teal); }
.bitem .drop {
  background: none; border: none; color: var(--faint); cursor: pointer;
  font-size: 0.95rem; padding: 2px 3px;
}
.bitem .drop:hover { color: #FF8A80; }

.bcard .add-item {
  margin-top: 10px; background: none; border: 1px dashed var(--line);
  color: var(--muted); border-radius: 8px; padding: 8px; cursor: pointer;
  font-family: var(--body); font-size: 0.84rem; width: 100%;
}
.bcard .add-item:hover { border-color: var(--teal); color: var(--cream); }

.add-card {
  border: 1px dashed var(--line); border-radius: 12px; background: none;
  color: var(--muted); cursor: pointer; font-family: var(--body); font-size: 0.94rem;
  min-height: 120px; display: flex; align-items: center; justify-content: center;
}
.add-card:hover { border-color: var(--teal); color: var(--cream); }

/* ---- totals ---- */

.totals { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.tot-line { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 0.92rem; border-bottom: 1px solid var(--line); }
.tot-line:last-of-type { border-bottom: none; }
.tot-line .t-lbl { color: var(--muted); }
.tot-line .t-val { font-family: var(--mono); }
.tot-line.sum { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; font-size: 1rem; }
.tot-line.sum .t-val { font-weight: 600; }

.tot-input { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tot-input label { flex: 1; font-size: 0.92rem; color: var(--muted); }
.tot-input input {
  width: 84px; background: var(--ink); border: 1px solid var(--line);
  color: var(--cream); font-family: var(--mono); font-size: 0.9rem;
  padding: 8px 10px; border-radius: var(--r); text-align: right;
}
.tot-input input:focus { outline: none; border-color: var(--teal); }

.headline-price {
  background: var(--panel-2); border-radius: 12px; padding: 20px; margin-top: 18px; text-align: center;
}
.headline-price .hp-num { font-family: var(--display); font-size: 2.3rem; font-weight: 800; color: var(--teal); line-height: 1; }
.headline-price .hp-lab { font-size: 0.86rem; color: var(--muted); margin-top: 6px; }
.headline-price.warn .hp-num { color: var(--orange); }

.saved-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.saved-row:last-child { border-bottom: none; }
.saved-row .s-nm { flex: 1; min-width: 0; }
.saved-row .s-tot { font-family: var(--mono); color: var(--muted); font-size: 0.82rem; }
.saved-row button { background: none; border: none; color: var(--teal); cursor: pointer; font-size: 0.82rem; font-family: var(--body); }

.calc-grid { display: grid; grid-template-columns: 1fr 330px; gap: 26px; align-items: start; }
@media (max-width: 940px) { .calc-grid { grid-template-columns: 1fr; } }

/* ================= DIRECTORY ================= */

.dir-search { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-bottom: 20px; }
/* reputation.html and admin.html set their own columns inline, which beats a
   plain rule however narrow the screen gets, so this one is forced. */
@media (max-width: 720px) { .dir-search { grid-template-columns: 1fr !important; } }
.dir-search input, .dir-search select {
  background: var(--ink); border: 1px solid var(--line); color: var(--cream);
  font-family: var(--body); font-size: 0.95rem; padding: 12px 14px; border-radius: var(--r);
}
.dir-search input:focus, .dir-search select:focus { outline: none; border-color: var(--teal); }

.biz {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px;
}
.biz.picked { border-color: var(--teal); }
.biz .b-main { flex: 1; min-width: 0; }
.biz .b-name { font-size: 1.02rem; font-weight: 600; margin-bottom: 2px; }
.biz .b-meta { font-size: 0.84rem; color: var(--muted); margin-bottom: 8px; }
.biz .b-desc { font-size: 0.89rem; color: var(--muted); line-height: 1.6; margin-bottom: 10px; max-width: 62ch; }
.biz .b-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.biz .b-tags span {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); padding: 2px 7px; border-radius: 3px;
}
.biz .b-right { text-align: right; flex-shrink: 0; }
.biz .b-price { font-family: var(--mono); font-size: 0.92rem; margin-bottom: 10px; }
.biz .b-price small { display: block; color: var(--faint); font-size: 0.7rem; }
.biz .b-add {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--cream);
  font-family: var(--body); font-size: 0.84rem; padding: 8px 14px;
  border-radius: var(--r); cursor: pointer; white-space: nowrap;
}
.biz .b-add:hover { border-color: var(--teal); }
.biz.picked .b-add { background: var(--teal); color: #08312E; border-color: var(--teal); }

.basket {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; background: var(--panel-2); border: 1px solid var(--teal-deep);
  border-radius: 100px; padding: 10px 12px 10px 22px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s;
  max-width: calc(100vw - 32px);
}
.basket.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.basket .k-count { font-size: 0.9rem; white-space: nowrap; }
.basket .k-count b { color: var(--teal); }
.basket .btn { padding: 6px 18px; font-size: 0.88rem; }

/* ================= BUZZMAIL ================= */

.mail { display: grid; grid-template-columns: 320px 1fr; gap: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-height: 520px; }
@media (max-width: 860px) { .mail { grid-template-columns: 1fr; min-height: 0; } }

/* min-width:0 on both grid children, or neither can shrink below its own
   content. The conversation previews are white-space:nowrap, so their
   min-content width is the whole line — which pushed the 1fr column out to
   several hundred pixels past the screen on a phone, clipped rather than
   ellipsised because .mail is overflow:hidden. */
.mail-list { background: var(--panel); border-right: 1px solid var(--line); min-width: 0; }
@media (max-width: 860px) {
  .mail-list { border-right: none; border-bottom: 1px solid var(--line); }
  .mail.reading .mail-list { display: none; }
  .mail:not(.reading) .mail-thread { display: none; }
}

.mail-list-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.mail-list-head h2 { font-size: 0.95rem; flex: 1; }
.mail-list-head .unread {
  font-family: var(--mono); font-size: 0.66rem; background: var(--orange);
  color: #FFF; padding: 2px 7px; border-radius: 100px;
}

.mail-item {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--body); color: var(--cream); text-decoration: none;
}
.mail-item:hover { background: var(--panel-2); }
.mail-item[aria-current="true"] { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--teal); }
.mail-item .m-av {
  width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; font-size: 0.82rem; flex-shrink: 0;
}
.mail-item .m-body { flex: 1; min-width: 0; }
.mail-item .m-who { font-size: 0.92rem; display: flex; gap: 7px; align-items: center; }
.mail-item .m-who i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); display: none; }
.mail-item.new .m-who i { display: block; }
.mail-item.new .m-who { font-weight: 600; }
.mail-item .m-prev { display: block; font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item .m-when { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); flex-shrink: 0; }

.mail-thread { display: flex; flex-direction: column; min-width: 0; }
.mail-thread-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.mail-thread-head .back { display: none; background: none; border: none; color: var(--teal); cursor: pointer; font-size: 0.9rem; text-decoration: none; }
@media (max-width: 860px) { .mail-thread-head .back { display: block; } }
.mail-thread-head .t-who { font-size: 1rem; font-weight: 600; }
.mail-thread-head .t-sub { font-size: 0.8rem; color: var(--muted); }

.mail-body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 74%; padding: 12px 16px; border-radius: 14px; font-size: 0.92rem; line-height: 1.6; }
.bubble.them { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.me { background: var(--teal); color: #08312E; border-bottom-right-radius: 4px; align-self: flex-end; }
.bubble .b-when { font-family: var(--mono); font-size: 0.66rem; opacity: 0.6; margin-top: 6px; display: block; }

.mail-reply { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-end; }
.mail-reply textarea {
  flex: 1; min-height: 44px; max-height: 140px; resize: vertical;
  background: var(--ink); border: 1px solid var(--line); color: var(--cream);
  border-radius: var(--r); padding: 11px 13px; font-family: var(--body); font-size: 0.92rem;
}
.mail-reply textarea:focus { outline: none; border-color: var(--teal); }

.mail-empty { display: flex; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
.mail-empty p { color: var(--muted); max-width: 40ch; }

/* ================= SETTINGS ================= */

.set-nav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.set-nav button {
  flex-shrink: 0; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--body); font-size: 0.94rem;
  padding: 0 14px 12px; cursor: pointer; white-space: nowrap;
}
.set-nav button[aria-pressed="true"] { color: var(--cream); border-bottom-color: var(--teal); }

.set-panel { display: none; }
.set-panel.on { display: block; }

.set-block { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px; margin-bottom: 18px; }
.set-block h2 { font-size: 1.05rem; margin-bottom: 6px; }
.set-block .s-note { font-size: 0.86rem; color: var(--muted); margin-bottom: 18px; line-height: 1.6; }
.set-block.danger { border-color: rgba(255,138,128,0.4); }
.set-block.danger h2 { color: #FF8A80; }

.toggle-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row .t-txt { flex: 1; }
.toggle-row .t-name { font-size: 0.94rem; margin-bottom: 3px; }
.toggle-row .t-desc { font-size: 0.83rem; color: var(--muted); line-height: 1.55; }
.switch { position: relative; width: 44px; height: 25px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 100px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.switch span::before {
  content: ''; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px;
  background: var(--muted); border-radius: 50%; transition: transform 0.15s, background 0.15s;
}
.switch input:checked + span { background: var(--teal); border-color: var(--teal); }
.switch input:checked + span::before { transform: translateX(19px); background: #08312E; }
.switch input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ================= FAN PROFILE ================= */

.fan-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.fan-head .f-av {
  width: 66px; height: 66px; border-radius: 50%; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.7rem; font-weight: 800; color: var(--teal);
  flex-shrink: 0;
}
.fan-head .f-name { font-size: clamp(1.5rem, 4vw, 2rem); }
.fan-head .f-meta { color: var(--muted); font-size: 0.92rem; }

.feed-item {
  display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.feed-item:last-child { border-bottom: none; }
.feed-item .fi-av {
  width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
  color: var(--muted); flex-shrink: 0;
}
.feed-item .fi-body { flex: 1; min-width: 0; }
.feed-item .fi-what { display: block; font-size: 0.94rem; line-height: 1.5; }
.feed-item .fi-what b { font-weight: 600; }
.feed-item .fi-sub { display: block; font-size: 0.83rem; color: var(--muted); margin-top: 3px; }
.feed-item .fi-when { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); flex-shrink: 0; }
.feed-item .fi-kind {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px; margin-right: 8px;
}
.fk-track { background: rgba(27,160,152,0.16); color: var(--teal); }
.fk-gig   { background: rgba(251,129,34,0.15); color: var(--orange); }
.fk-post  { background: var(--panel-2); color: var(--muted); }

.follow-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.follow-row:last-child { border-bottom: none; }
.follow-row .fr-av {
  width: 42px; height: 42px; border-radius: 10px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
  color: var(--teal); flex-shrink: 0;
}
.follow-row .fr-body { flex: 1; min-width: 0; }
.follow-row .fr-name { display: block; font-size: 0.96rem; }
.follow-row .fr-meta { display: block; font-size: 0.82rem; color: var(--muted); }
.follow-row button {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--body); font-size: 0.82rem; padding: 6px 14px;
  border-radius: 100px; cursor: pointer; white-space: nowrap;
}
.follow-row button:hover { border-color: #FF8A80; color: #FF8A80; }

.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 16px; }
.pl-card { cursor: pointer; }
.pl-card .pl-cvr {
  aspect-ratio: 1; border-radius: 10px; margin-bottom: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: rgba(255,255,255,0.55);
}
.pl-card .pl-name { font-size: 0.93rem; }
.pl-card .pl-count { font-size: 0.79rem; color: var(--faint); }

.ticket {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 12px; display: flex; gap: 16px; align-items: center;
}
.ticket .tk-date {
  width: 58px; text-align: center; background: var(--panel-2);
  border-radius: 9px; padding: 8px 4px; flex-shrink: 0;
}
.ticket .tk-date .d { font-family: var(--display); font-size: 1.35rem; font-weight: 800; line-height: 1; }
.ticket .tk-date .mo { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); text-transform: uppercase; }
.ticket .tk-body { flex: 1; min-width: 0; }
.ticket .tk-who { display: block; font-size: 0.98rem; }
.ticket .tk-where { display: block; font-size: 0.84rem; color: var(--muted); }

/* ================= BUSINESS PAGE ================= */

.biz-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.biz-head .bh-av {
  width: 76px; height: 76px; border-radius: 14px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--teal);
  flex-shrink: 0;
}
.biz-head .bh-name { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 4px; }
.biz-head .bh-meta { color: var(--muted); font-size: 0.94rem; }
.biz-head .bh-price { font-family: var(--mono); font-size: 1.05rem; color: var(--cream); margin-top: 8px; }
.biz-head .bh-price small { color: var(--faint); font-size: 0.76rem; }

.areas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.areas span {
  font-size: 0.82rem; padding: 5px 12px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--muted);
}

.spec-list { border-top: 1px solid var(--line); }
.spec-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.spec-row .sp-k { width: 160px; flex-shrink: 0; color: var(--muted); }
.spec-row .sp-v { flex: 1; min-width: 0; }

.enq-row {
  display: flex; gap: 14px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.enq-row:last-child { border-bottom: none; }
.enq-row .e-av {
  width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
  color: var(--teal); flex-shrink: 0;
}
.enq-row .e-body { flex: 1; min-width: 0; }
.enq-row .e-who { display: block; font-size: 0.95rem; }
.enq-row .e-what { display: block; font-size: 0.83rem; color: var(--muted); }
.enq-row .e-when { font-family: var(--mono); font-size: 0.7rem; color: var(--faint); flex-shrink: 0; }
.enq-row .e-state {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; flex-shrink: 0;
}
.es-new     { background: rgba(251,129,34,0.16); color: var(--orange); }
.es-replied { background: rgba(27,160,152,0.16); color: var(--teal); }
.es-closed  { background: var(--panel-2); color: var(--faint); }

/* ================= ADMIN ================= */

.admin-bar { background: #11111C; border-bottom: 1px solid var(--line); }
.admin-bar .inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  display: flex; gap: 4px; overflow-x: auto;
}
.admin-bar a {
  flex-shrink: 0; padding: 14px 14px 12px; font-size: 0.9rem;
  color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap;
}
.admin-bar a:hover { color: var(--cream); text-decoration: none; }
/* Same rule as .tabs above: which page you are on is not an event. Nothing
   uses .admin-bar yet — the admin panel is still being built — and it is
   changed now so that it is already right when something does. */
.admin-bar a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--teal); }
.admin-bar .badge-n {
  background: var(--orange); color: #FFF; font-family: var(--mono);
  font-size: 0.62rem; padding: 1px 6px; border-radius: 100px; margin-left: 6px;
}

.admin-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--orange);
  border: 1px solid rgba(251,129,34,0.4); border-radius: 100px;
  padding: 4px 12px; margin-bottom: 16px;
}

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
  padding: 0 10px 10px 0; border-bottom: 1px solid var(--line); font-weight: 400;
}
.tbl td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .u-name { display: flex; align-items: center; gap: 10px; }
.tbl .u-av {
  width: 32px; height: 32px; border-radius: 8px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; color: var(--muted); flex-shrink: 0;
}
.tbl .mini-btn {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--body); font-size: 0.78rem; padding: 5px 11px;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.tbl .mini-btn:hover { border-color: var(--teal); color: var(--cream); }
.tbl .mini-btn.bad:hover { border-color: #FF8A80; color: #FF8A80; }

.pill {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 3px;
}
/*
   SCOPED TO .pill, and that is the whole point of this block.

   `.p-artist` here is the account-type badge in the admin people table. The
   PLAYER's artist line is also `.p-artist` — partials/player — and this rule
   was reaching it: every page with the player on it drew "Pick a track to
   start" inside a teal pill, which looked like a deliberate highlight and was
   a name collision. `.player .p-artist` sets no background of its own, so
   there was nothing to override it with.

   Requiring `.pill` fixes it in the one place rather than renaming a class
   used across the admin pages: the player's line does not carry `.pill`, so
   it no longer matches.
*/
.pill.p-artist   { background: rgba(27,160,152,0.16); color: var(--teal); }
.pill.p-fan      { background: var(--panel-2); color: var(--muted); }
/* Not orange. Orange marks something happening now, and being a business
   is not an event. */
.pill.p-business { background: var(--panel-2); color: var(--cream); }
.pill.p-active   { background: rgba(27,160,152,0.16); color: var(--teal); }
.pill.p-suspended{ background: rgba(255,138,128,0.16); color: #FF8A80; }
.pill.p-closed   { background: var(--panel-2); color: var(--faint); }

.queue-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; display: block; color: var(--cream);
}
.queue-card:hover { border-color: var(--teal); text-decoration: none; }
.queue-card .q-num { font-family: var(--display); font-size: 2rem; font-weight: 800; }
.queue-card .q-num.hot { color: var(--orange); }
.queue-card .q-lab { font-size: 0.86rem; color: var(--muted); margin-top: 2px; }

.log-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.87rem; }
.log-row:last-child { border-bottom: none; }
.log-row .l-when { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); width: 96px; flex-shrink: 0; }
.log-row .l-what { flex: 1; min-width: 0; }
.log-row .l-what b { font-weight: 600; }
.log-row .l-why { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }

/* ================= REPUTATION ================= */

.rep-score { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
.rep-score .rs-num { font-family: var(--display); font-size: 3rem; font-weight: 800; line-height: 1; }
.rep-score .rs-of { color: var(--faint); font-size: 1rem; }
.rep-score .rs-count { font-size: 0.88rem; color: var(--muted); }
.stars { color: var(--orange); font-size: 1.05rem; letter-spacing: 2px; }
.stars .off { color: var(--line); }

.rev {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 12px;
}
.rev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rev-head .rv-who { font-size: 0.94rem; font-weight: 600; }
.rev-head .rv-when { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); margin-left: auto; }
.rev p { font-size: 0.92rem; line-height: 1.65; color: var(--cream); margin-bottom: 10px; }
.rev .rv-crit { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.rev .rv-crit span { font-size: 0.8rem; color: var(--muted); }
.rev .rv-crit b { color: var(--cream); font-family: var(--mono); font-size: 0.78rem; }
.rev .rv-reply {
  border-left: 2px solid var(--teal-deep); padding: 10px 0 2px 14px;
  margin-top: 14px; font-size: 0.88rem; color: var(--muted);
}
.rev .rv-reply b { color: var(--cream); display: block; margin-bottom: 4px; font-size: 0.82rem; }

.too-few {
  background: var(--panel-2); border: 1px dashed var(--line); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 18px; font-size: 0.9rem; color: var(--muted); line-height: 1.6;
}

/* ================= BOOKINGS AND REVIEW FORM ================= */

.bk {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 12px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.bk.due { border-color: var(--orange); }
.bk .bk-date {
  width: 58px; text-align: center; background: var(--panel-2);
  border-radius: 9px; padding: 8px 4px; flex-shrink: 0;
}
.bk .bk-date .d { font-family: var(--display); font-size: 1.35rem; font-weight: 800; line-height: 1; }
.bk .bk-date .mo { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); text-transform: uppercase; }
.bk .bk-body { flex: 1; min-width: 200px; }
.bk .bk-who { display: block; font-size: 1rem; margin-bottom: 2px; }
.bk .bk-what { display: block; font-size: 0.85rem; color: var(--muted); }
.bk .bk-state { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
.bk .bk-state b { color: var(--orange); }
.bk .bk-act { flex-shrink: 0; }

/* star input */
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label {
  font-size: 2rem; line-height: 1; color: var(--line); cursor: pointer;
  transition: color 0.1s; padding: 0 2px;
}
.star-input input:checked ~ label,
.star-input label:hover, .star-input label:hover ~ label { color: var(--orange); }
.star-input input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 3px; }

.crit-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.crit-row:last-child { border-bottom: none; }
.crit-row .cr-q { flex: 1; min-width: 190px; font-size: 0.92rem; }
.crit-scale { display: flex; gap: 5px; }
.crit-scale label {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.82rem; color: var(--muted); cursor: pointer;
}
.crit-scale input { position: absolute; opacity: 0; width: 0; height: 0; }
.crit-scale input:checked + label { background: var(--teal); border-color: var(--teal); color: #08312E; }
.crit-scale label:hover { border-color: var(--muted); }
.crit-scale input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 2px; }

.yn { display: flex; gap: 8px; }
.yn input { position: absolute; opacity: 0; width: 0; height: 0; }
.yn label {
  border: 1px solid var(--line); border-radius: 100px; padding: 8px 20px;
  font-size: 0.88rem; color: var(--muted); cursor: pointer;
}
.yn input:checked + label { background: var(--teal); border-color: var(--teal); color: #08312E; }
.yn input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 2px; }

.sealed {
  background: var(--panel-2); border-left: 3px solid var(--teal);
  padding: 16px 20px; margin: 20px 0; font-size: 0.9rem; line-height: 1.65; color: var(--muted);
  border-radius: 0 8px 8px 0;
}
.sealed b { color: var(--cream); }

/* ================= ADMIN SHELL ================= */

.adm { display: grid; grid-template-columns: 246px 1fr; min-height: calc(100vh - 68px); }
@media (max-width: 900px) { .adm { grid-template-columns: 1fr; } }

.adm-side {
  background: #15151F; border-right: 1px solid var(--line);
  padding: 14px 0 40px; overflow-y: auto;
}
@media (max-width: 900px) {
  .adm-side { display: none; border-right: none; border-bottom: 1px solid var(--line); }
  .adm-side.open { display: block; }
}

.adm-group { margin-bottom: 6px; }
.adm-group > .g-head {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 9px 18px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); text-align: left;
}
.adm-group > .g-head:hover { color: var(--muted); }
.adm-group > .g-head .caret { margin-left: auto; font-size: 0.6rem; transition: transform 0.15s; }
.adm-group.shut > .g-head .caret { transform: rotate(-90deg); }
.adm-group.shut .g-items { display: none; }

.adm-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 20px; font-size: 0.89rem; color: var(--muted);
  border-left: 2px solid transparent;
}
.adm-side a:hover { color: var(--cream); background: rgba(255,255,255,0.03); text-decoration: none; }
.adm-side a[aria-current="page"] {
  color: var(--cream); border-left-color: var(--orange); background: rgba(251,129,34,0.07);
}
.adm-side a .n {
  margin-left: auto; font-family: var(--mono); font-size: 0.62rem;
  background: var(--orange); color: #FFF; padding: 1px 6px; border-radius: 100px;
}
.adm-side a .soon {
  margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); flex-shrink: 0;
}

.adm-main { padding: 26px 24px 60px; min-width: 0; }
@media (max-width: 620px) { .adm-main { padding: 20px 16px 50px; } }

.adm-toggle {
  display: none; background: var(--panel); border: 1px solid var(--line);
  color: var(--cream); font-family: var(--body); font-size: 0.86rem;
  padding: 9px 16px; border-radius: var(--r); cursor: pointer; margin-bottom: 18px;
}
@media (max-width: 900px) { .adm-toggle { display: block; } }

/* coloured metric tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; margin-bottom: 26px; }
.tile {
  border-radius: 12px; padding: 20px; color: #FFF; position: relative; overflow: hidden;
  display: block;
}
.tile:hover { text-decoration: none; filter: brightness(1.08); }
.tile .t-num { font-family: var(--display); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.tile .t-lab { font-size: 0.86rem; opacity: 0.9; margin-top: 2px; }
.tile .t-more { font-size: 0.74rem; opacity: 0.75; margin-top: 12px; }
.t-teal   { background: linear-gradient(135deg, #17867F, #10635E); }
.t-orange { background: linear-gradient(135deg, #D96D16, #A85310); }
.t-slate  { background: linear-gradient(135deg, #3A3A55, #2A2A40); }
.t-red    { background: linear-gradient(135deg, #A34742, #7C332F); }

.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 4px 30px; }
.quick a { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--cream); }
.quick a:hover { text-decoration: none; }
.quick a:hover .q-t { color: var(--teal); }
.quick .q-ic {
  width: 34px; height: 34px; border-radius: 9px; background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 0.9rem; color: var(--teal);
}
.quick .q-t { display: block; font-size: 0.94rem; margin-bottom: 2px; }
.quick .q-d { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

.planned {
  background: var(--panel); border: 1px dashed var(--line); border-radius: 12px;
  padding: 26px 28px;
}
.planned h2 { font-size: 1.15rem; margin-bottom: 8px; }
.planned .p-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line); padding: 3px 10px; border-radius: 100px; margin-bottom: 14px;
}
.planned p { color: var(--muted); font-size: 0.93rem; line-height: 1.7; max-width: 62ch; margin-bottom: 12px; }
.planned ul { margin: 0 0 12px 20px; }
.planned li { color: var(--muted); font-size: 0.9rem; line-height: 1.65; margin-bottom: 5px; }


/* =====================================================================
   THE ADMIN PANEL  (layouts/admin.blade.php)
   =====================================================================
   The same shell as every other page — layouts/site.blade.php — with a
   sidebar beside the content. On a wide screen the site header is put away
   and the sidebar carries the logo; below 860px the sidebar is put away and
   the site header, burger and phone menu are back, exactly as on the rest of
   the site. One burger, wired once, in buzz.js.

   ORANGE MEANS SOMETHING IS WAITING FOR YOU, and only four things are:
   tracks waiting for approval, unread Buzzmail, open copyright claims and
   genre requests — each orange above nought and grey at nought. No orange
   headings, no orange hovers. The colour boxes further down follow the
   same rule; App\Support\AdminTone decides every colour.
   ===================================================================== */

.adm { display: flex; min-height: 100vh; }

.adm-side {
  position: sticky; top: 0; align-self: flex-start;
  width: 244px; flex-shrink: 0; height: 100vh; overflow-y: auto;
  background: #181826; border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 18px 0 16px;
}
.adm-side .adm-logo { display: block; padding: 4px 20px 18px; }
.adm-side .adm-logo img { height: 24px; width: auto; display: block; }
.adm-side .adm-logo span {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
}
.adm-nav { display: flex; flex-direction: column; }
.adm-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 20px; color: var(--muted); font-size: 0.92rem;
  border-left: 3px solid transparent;
}
.adm-nav a:hover { color: var(--cream); background: rgba(255,255,255,0.03); text-decoration: none; }
/* Where you are standing is not an event: teal, never orange. */
.adm-nav a[aria-current="page"] { color: var(--cream); border-left-color: var(--teal); background: rgba(27,160,152,0.08); }
.adm-nav .adm-group {
  margin: 18px 20px 6px;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.adm-nav .adm-group + a { margin-top: 0; }
.adm-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

/* A plain count beside a menu item. Muted: a number is not news. */
.adm-n {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1;
  color: var(--muted); background: var(--panel-2);
  padding: 3px 7px; border-radius: 100px; min-width: 20px; text-align: center;
}
/* The ones that ARE news: something waiting for you — tracks waiting,
   unread Buzzmail, open claims, genre requests. Orange, above zero only. */
.adm-n.now { background: var(--adm-now); color: var(--ink); font-weight: 600; }

.adm-toggle {
  margin: 0 20px 12px; align-self: flex-start;
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.8rem; cursor: pointer;
}
.adm-toggle:hover { color: var(--cream); border-color: var(--muted); }

/* Collapsed: a slim rail with the button to bring it back, and the waiting
   count if there is one — the one thing that must not disappear with it. */
.adm-rail {
  display: none; position: sticky; top: 0; align-self: flex-start;
  width: 52px; flex-shrink: 0; height: 100vh;
  background: #181826; border-right: 1px solid var(--line);
  flex-direction: column; align-items: center; gap: 14px; padding: 16px 0;
}
.adm-rail img { width: 24px; height: 24px; }
body.adm-collapsed .adm-side { display: none; }
body.adm-collapsed .adm-rail { display: flex; }

.adm-main { flex: 1; min-width: 0; padding: 30px 32px 80px; }
.adm-main > * { max-width: 1100px; }
.adm-main h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 6px; }
.adm-main h2 { font-size: 1.15rem; margin: 34px 0 12px; }
.adm-lede { color: var(--muted); font-size: 0.94rem; margin-bottom: 26px; max-width: 70ch; }

/* The site header is the phone's; the sidebar is the desk's. */
@media (min-width: 861px) {
  body.admin-page .site-head,
  body.admin-page .mobile-menu { display: none !important; }
}
@media (max-width: 860px) {
  .adm-side, .adm-rail, body.adm-collapsed .adm-rail { display: none; }
  .adm-main { padding: 22px 16px 70px; }
}

/* ---- the plain dark cards on the overview ---- */
.adm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 8px; }
.adm-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; color: var(--cream); display: block; min-width: 0;
}
a.adm-card:hover { border-color: var(--teal); text-decoration: none; }
.adm-card .k {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.adm-card .v { font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.adm-card .v.na { font-family: var(--body); font-size: 0.95rem; font-weight: 400; color: var(--muted); }
.adm-card .s { font-size: 0.8rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }

.adm-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.adm-panel > :last-child { margin-bottom: 0; }

/* ---- tables that still work on a phone ----
   Below 700px each row becomes a small stacked block, with the column name
   written in front of each value from data-k. No sideways scroll. */
.adm-tbl { width: 100%; border-collapse: collapse; }
.adm-tbl th {
  text-align: left; font-family: var(--mono); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.adm-tbl th a { color: var(--faint); }
.adm-tbl th a:hover, .adm-tbl th a[aria-current] { color: var(--cream); text-decoration: none; }
.adm-tbl td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: top; overflow-wrap: anywhere; }
.adm-tbl tr:last-child td { border-bottom: none; }
@media (max-width: 700px) {
  .adm-tbl thead { display: none; }
  .adm-tbl, .adm-tbl tbody, .adm-tbl tr, .adm-tbl td { display: block; width: 100%; }
  .adm-tbl tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .adm-tbl td { border: none; padding: 3px 0; }
  .adm-tbl td[data-k]::before {
    content: attr(data-k); display: inline-block; min-width: 92px;
    font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--faint);
  }
}

/* ---- status words ----
   A word, not a coloured tile. Live is teal because live is good news;
   failed is the soft red the site already uses for errors; every other
   state is plain muted text. */
.st { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.st.live, .st.ok { color: var(--teal); }
.st.failed, .st.bad { color: #FF8A80; }

/* ---- a track row with its artwork ---- */
.adm-art {
  width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: var(--panel-2); display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 0.7rem;
}
.adm-track { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.adm-track b { display: block; color: var(--cream); font-weight: 600; }

/* ---- forms that need a reason ---- */
.adm-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 0 0 12px; }
.adm-form input[type=text], .adm-form input[type=search], .adm-form input[type=number],
.adm-form input[type=date], .adm-form select, .adm-form textarea {
  background: var(--ink); border: 1px solid var(--line); color: var(--cream);
  border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 0.92rem; min-height: 44px;
  flex: 1 1 220px; min-width: 0; max-width: 100%;
}
.adm-form textarea { min-height: 72px; flex-basis: 100%; }
.adm-form input:focus, .adm-form select:focus, .adm-form textarea:focus { border-color: var(--teal); outline: none; }
.adm-form .btn { flex-shrink: 0; }
.adm-form label.adm-lbl { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); margin-bottom: -4px; }
.btn-quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-quiet:hover { color: #FF8A80; border-color: #FF8A80; }

/* Deleting an account: set apart at the foot of the Actions box, behind a
   red line, with the only red button in the panel. */
.adm-danger { margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--adm-red); }
.adm-danger h3 { font-size: 1rem; margin-bottom: 8px; color: #FF8A80; }
.adm-danger ul { margin: 6px 0 12px 20px; font-size: 0.9rem; line-height: 1.7; }
.btn-danger { background: var(--adm-red); color: #FFF; border-color: var(--adm-red); }
.btn-danger:hover { filter: brightness(1.1); }

.adm-msg { border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; font-size: 0.92rem; }
.adm-msg.bad { border-left-color: #FF8A80; }

.adm-dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; font-size: 0.92rem; }
.adm-dl dt { color: var(--muted); }
.adm-dl dd { overflow-wrap: anywhere; }
@media (max-width: 560px) { .adm-dl { grid-template-columns: 1fr; gap: 2px; } .adm-dl dd { margin-bottom: 8px; } }

.adm-audio { width: 100%; max-width: 520px; margin: 6px 0 4px; }

/* ---- progress while a track converts ---- */
.adm-progress { margin-top: 10px; font-size: 0.88rem; color: var(--muted); }
.adm-progress .bar { height: 6px; background: var(--panel-2); border-radius: 4px; overflow: hidden; margin: 6px 0; max-width: 420px; }
.adm-progress .bar i { display: block; height: 100%; width: 0; background: var(--teal); transition: width 0.4s ease; }

.adm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.adm-pages { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 0.9rem; }

/* "Not yet connected" pages: plainly a plan, never a screen. */
.adm-plan { border: 1px dashed var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
.adm-plan ul { margin: 8px 0 0 20px; color: var(--muted); font-size: 0.92rem; line-height: 1.7; }


/* =====================================================================
   THE ADMIN COLOUR BOX  (resources/views/admin/partials/box.blade.php)
   =====================================================================
   One style for every coloured box in the panel. A box is one of the
   eight tones above (.is-teal … .is-now) and nothing else — change the look
   here and every section follows.

   Big number or state, short label under it, an optional line under that,
   and, when it is an <a>, a link through to the detail. `.cbox-panel` is the
   same box holding a form or a list instead of a number.

   The grid stacks rather than squeezes: at the 360px phone width there is
   room for two boxes side by side at 150px, and anything narrower than
   that goes to one column. Nothing is ever narrower than 150px.
   ===================================================================== */

.cbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cbox-grid.wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.cbox {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  border-radius: 12px; padding: 16px 18px;
  border: 2px solid var(--box-edge);
  background: var(--box-fill);
  color: var(--adm-on-fill);
  overflow-wrap: anywhere;
}
.cbox, .cbox a, .cbox .muted, .cbox .small, .cbox dt, .cbox dd, .cbox th, .cbox td { color: var(--adm-on-fill); }
.cbox a { text-decoration: underline; }
a.cbox { text-decoration: none; }
a.cbox:hover { text-decoration: none; filter: brightness(1.12); }
a.cbox:focus-visible { outline: 3px solid var(--adm-on-fill); outline-offset: 2px; }

.cbox-v { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.05; }
.cbox-v.word { font-size: 1.25rem; line-height: 1.25; }
.cbox-l { font-weight: 600; font-size: 0.92rem; line-height: 1.35; }
.cbox-s { font-size: 0.84rem; line-height: 1.5; }
.cbox-go { font-size: 0.8rem; font-weight: 600; margin-top: auto; padding-top: 6px; }

/* Which filter box you are on: a white ring, not a different colour. */
.cbox[aria-current] { box-shadow: 0 0 0 3px var(--adm-on-fill); }

.cbox-panel { padding: 18px 20px; margin-bottom: 14px; gap: 10px; }
.cbox-panel .adm-tbl th { color: var(--adm-on-fill); border-bottom-color: rgba(255,255,255,0.35); }
.cbox-panel .adm-tbl td { border-bottom-color: rgba(255,255,255,0.2); }
.cbox-panel .btn-ghost, .cbox-panel .btn-quiet { color: var(--adm-on-fill); border-color: var(--adm-on-fill); }
.cbox-panel .st { color: var(--adm-on-fill); }

.is-teal   { --box-fill: var(--adm-teal-fill);   --box-edge: var(--adm-teal); }
.is-blue   { --box-fill: var(--adm-blue-fill);   --box-edge: var(--adm-blue); }
.is-purple { --box-fill: var(--adm-purple-fill); --box-edge: var(--adm-purple); }
.is-rose   { --box-fill: var(--adm-rose-fill);   --box-edge: var(--adm-rose); }
.is-steel  { --box-fill: var(--adm-steel-fill);  --box-edge: var(--adm-steel); }
/* The "All" box: a mixture of every kind of person, so it has no colour of
   its own — the dark panel, a light edge, and the white ring when chosen. */
.is-plain  { --box-fill: var(--adm-plain-fill);  --box-edge: var(--adm-plain); }
.is-green  { --box-fill: var(--adm-green-fill);  --box-edge: var(--adm-green); }
.is-amber  { --box-fill: var(--adm-amber-fill);  --box-edge: var(--adm-amber); }
.is-red    { --box-fill: var(--adm-red-fill);    --box-edge: var(--adm-red); }
.is-grey   { --box-fill: var(--adm-grey-fill);   --box-edge: var(--adm-grey); }
/* ORANGE: something waiting for you (the four counts above), above zero
   only. The edge is the full brand orange, unmistakable next to amber. */
.is-now    { --box-fill: var(--adm-now-fill);    --box-edge: var(--adm-now); border-width: 3px; }

/* A small coloured label, for the action type on each row of the log. */
.ctag {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--box-fill); color: var(--adm-on-fill); border: 1px solid var(--box-edge); white-space: nowrap;
}

/* Images waiting, and the child-safety page. A thumbnail box, and the
   placeholder that stands where a marked picture would be — nothing of the
   picture itself is ever drawn. */
.adm-pic { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.adm-thumb {
  width: 140px; height: 140px; flex: none; border-radius: 10px; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.78rem; color: var(--muted); padding: 8px;
}
.adm-thumb img { width: 100%; height: 100%; object-fit: contain; }
.adm-scores { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.adm-scores span { font-family: var(--mono); font-size: 0.74rem; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.adm-scores span.over { border-color: rgba(255,138,128,0.6); color: #FF8A80; }