/* css/tokens.css */
/* Design tokens: fonts, colours (light + dark), type/spacing/radius/z-index scales. Change colours here only. */
/* Fonts are self-hosted (no requests to Google): latin + latin-ext subsets in css/fonts/. */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMMono-latin-ext-0.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;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMMono-latin-1.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;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/DMMono-latin-ext-2.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;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/DMMono-latin-3.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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/HankenGrotesk-latin-ext-4.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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/HankenGrotesk-latin-5.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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/HankenGrotesk-latin-ext-4.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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/HankenGrotesk-latin-5.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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/HankenGrotesk-latin-ext-4.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;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/HankenGrotesk-latin-5.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;}
/* Breakpoints (media queries cannot read custom properties, so they are written as numbers):
     phone   max-width:600px   single column, bottom bars, 2-up grids
     tablet  max-width:960px   app sidebar becomes a drawer, public nav becomes the menu sheet
     wide    min-width:961px   (1100px also used: community aside, wizard summary, research contents)
   Older one-offs still in use: 340, 480, 560, 700, 760 (also pointer:coarse), 900, 1024. Fold them in only with a visual review. */
:root{
  --accent:#EDE274;          /* brand yellow: panels, buttons, highlights (same in dark mode on purpose) */
  --accent-deep:#DCCF45;
  --accent-light:#F2E88A;    /* radio beat flash on yellow panels */
  --on-accent:#15140E;       /* text on yellow; also the fixed ink of record labels and photo sleeves */
  --ground:#FBF8E1;          /* page ground: pale yellow */
  --paper:#FFFFFF;
  --mint:#F8F2BF;            /* soft highlight */
  --ink:#15140E;             /* text + lines */
  --ink-soft:#3B3927;
  --muted:#6B6750;
  --hair:rgba(21,20,14,.16);
  --hair-strong:#15140E;
  --dark:#15140E;            /* footer + radio */
  --on-dark:#F6F1C9;
  --on-dark-soft:rgba(246,241,201,.7);
  --viz:rgba(21,20,14,.12);  /* chart fill */
  --ok:#1E7A45;--warn:#9A5B00;--bad:#B3261E;
  --ok-bg:#E1F4E6;--warn-bg:#FFF0CF;--bad-bg:#FDE3E1;
  --info:#1d3f8f;--info-bg:#e6ecfb;   /* admin "paid" status (same in dark mode, as before) */
  --display:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:max(20px,env(safe-area-inset-left,0px));
  --gutter-r:max(20px,env(safe-area-inset-right,0px));
  --max:1360px;
  --player-h:64px;
  /* controls */
  --ctl-h:44px;              /* every tap target */
  --ctl-h-sm:36px;           /* .btn.sm and .chip on desktop (44px on touch) */
  --ring:0 0 0 1px var(--ink),0 0 0 4px var(--accent);
  /* type scale for UI text (headings use the clamp() classes .display .h1-.h4 in base.css) */
  --fs-micro:11px;           /* tags, table heads, small mono meta */
  --fs-caption:12px;         /* eyebrows, labels */
  --fs-ui:13px;              /* buttons, toasts */
  --fs-small:14px;           /* .small, secondary text */
  --fs-body-s:15px;          /* lists, tables, phone body */
  --fs-body:16px;            /* body, inputs (16px stops iOS zoom) */
  --fs-lead:18px;
  --fs-h5:20px;
  --fs-h4:22px;
  --fs-h3:28px;
  /* spacing scale (use it for new rules; older rules still use literals) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:48px;--sp-9:64px;
  /* radii: the design is square; round only for dots, avatars and pills */
  --r-0:0;--r-round:50%;--r-pill:999px;
  /* z-index layers (1-20 are local stacking inside one component) */
  --z-topbar:30;--z-drawer-scrim:35;--z-drawer:40;--z-sendbar:45;--z-menu-scrim:48;--z-menu:49;--z-header:50;
  --z-popover:60;            /* radio bar, account menu, bell panel */
  --z-progress:70;--z-modal:80;--z-toast:90;--z-tip:95;--z-skip:100;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#11110C;--paper:#1B1A13;--mint:#2A2814;--ink:#F3EEC8;--ink-soft:#DCD6AE;--muted:#A6A081;--hair:rgba(243,238,200,.16);--hair-strong:#F3EEC8;--dark:#0A0A07;--viz:rgba(237,226,116,.18);
    --ok:#6CD394;--warn:#F0B75A;--bad:#FF8A80;--ok-bg:rgba(108,211,148,.12);--warn-bg:rgba(240,183,90,.12);--bad-bg:rgba(255,138,128,.12);color-scheme:dark
  }
}
:root[data-theme="dark"]{
  --ground:#11110C;--paper:#1B1A13;--mint:#2A2814;--ink:#F3EEC8;--ink-soft:#DCD6AE;--muted:#A6A081;--hair:rgba(243,238,200,.16);--hair-strong:#F3EEC8;--dark:#0A0A07;--viz:rgba(237,226,116,.18);
  --ok:#6CD394;--warn:#F0B75A;--bad:#FF8A80;--ok-bg:rgba(108,211,148,.12);--warn-bg:rgba(240,183,90,.12);--bad-bg:rgba(255,138,128,.12);color-scheme:dark
}
[hidden]{display:none!important}

/* css/base.css */
/* Base: reset, element defaults, focus ring, typography helpers, screen-reader-only helpers. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;margin:0;background:var(--ground);color:var(--ink);font-family:var(--display);font-size:var(--fs-body);line-height:1.55;-webkit-tap-highlight-color:transparent;padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom,0px))}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
p{margin:0}
a{color:inherit;touch-action:manipulation}
button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}
label{touch-action:manipulation}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.small{font-size:var(--fs-small)}
.muted{color:var(--muted)}
.grow{flex:1;min-width:0}
.sp{flex:1}
.center{justify-items:center}
.danger{color:var(--bad)}
/* type */
.eyebrow{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase}
.label{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.label::before{content:"▬▬▬▬";letter-spacing:-.04em;font-size:var(--fs-micro)}
.display{font-size:clamp(44px,7.4vw,112px);font-weight:500;letter-spacing:-.045em;line-height:.94}
.h1{font-size:clamp(34px,4.6vw,64px)}
.h2{font-size:clamp(28px,3.6vw,46px)}
.h3{font-size:clamp(21px,2vw,28px)}
.h4{font-size:19px;letter-spacing:-.015em}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.45;max-width:50ch}
.big-p{font-size:19px;line-height:1.45}
.rule-top{border-top:1px solid var(--hair-strong);padding-top:14px}
.bigstat{font-size:clamp(80px,11vw,176px);font-weight:500;letter-spacing:-.05em;line-height:.85;display:block}
.back{text-decoration:none;display:inline-block;margin-bottom:12px}
/* details / FAQ */
details{border-top:1px solid var(--hair-strong);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--hair-strong)}
summary{cursor:pointer;font-size:19px;letter-spacing:-.01em;list-style:none;display:flex;justify-content:flex-start;align-items:baseline;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);margin-left:auto;flex:0 0 auto}
details[open] summary::after{content:"−"}
details p{margin-top:10px;max-width:68ch}
/* logo */
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:var(--fs-lead);letter-spacing:-.025em;white-space:nowrap}
/* the wordmark (step sequencer): 26px tall, 22px in the phone header, 28px in the footer; never squeezed below 20px */
.logo-word{display:block;height:26px;min-height:20px;width:auto;flex:none;transform-origin:0 50%}
.logo.on-dark .logo-word{height:28px}
@media (max-width:600px){
  .hdr .logo-word{height:22px}
}
.logo.on-dark{color:var(--on-dark)}
.logo-link{text-decoration:none;display:flex}
@media (max-width:960px){
  .hide-s{display:none}
}
@media (max-width:600px){
  body{font-size:var(--fs-body-s)}
}
/* request progress stepper (SS.views.stepper): 22 px circles joined by a 2 px line, labels centred under them (P-13) */
/* ---------- small helpers ---------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.nowrap{white-space:nowrap}
/* collapsible panel title (Scores in the feedback workspace): label left, +/− right, no gap when closed */
summary.label{justify-content:flex-start;font-size:var(--fs-caption);cursor:pointer}
summary.label::after{margin-left:auto}
details.stack:not([open]){gap:0}
/* ---------- admin: shared ---------- */
html:has(.adm){scrollbar-gutter:stable}
/* the paperclip is a button that opens a sheet of your tracks */
button.chat-att-w{padding:0;font:inherit}
button.chat-att-w:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
  a.m-step:hover{background:var(--mint)}
}

/* css/layout.css */
/* Layout: page helpers (.wrap .stack .row .grid2 .grid3 .section), public shell (header, phone menu, footer), app shell (sidebar, topbar, drawer). */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter) var(--gutter-r)}
/* layout helpers */
.stack{display:grid;gap:16px}
.stack > *{min-width:0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,24px)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.pad{padding:clamp(16px,2vw,24px)}
.frame{border:1px solid var(--hair-strong);background:var(--paper)}
.section{padding-block:clamp(48px,7vw,104px)}
.sec-head{margin-bottom:22px;align-items:end}
.hairlist > *{border-top:1px solid var(--hair)}
.hairlist > *:last-child{border-bottom:1px solid var(--hair)}
/* Public site: header, footer, hero, marquee, split panels, steps, formats, mentor cards + sleeves, profile, article, auth. */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:var(--z-header);background:var(--ground);border-bottom:1px solid var(--hair)}
.hdr .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.nav{display:flex;gap:24px;flex:1;justify-content:center}
.nav a{text-decoration:none;font-size:var(--fs-body-s);padding-block:6px;border-bottom:1px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
@media (hover:hover){
  .nav a:hover{border-bottom-color:var(--hair-strong)}
}
.hdr-actions{display:flex;gap:10px;align-items:center;position:relative;margin-left:auto}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--paper);border:1px solid var(--hair-strong);display:grid;min-width:180px;z-index:var(--z-popover);box-shadow:6px 6px 0 var(--accent)}
.acct-menu a,.acct-menu button{padding:12px 14px;text-decoration:none;text-align:left;background:none;border:0;border-bottom:1px solid var(--hair);font-size:var(--fs-body-s)}
.acct-menu > :last-child{border-bottom:0}
@media (hover:hover){
  .acct-menu a:hover,.acct-menu button:hover{background:var(--mint)}
}
.menu-btn{display:none;border:1px solid var(--hair-strong);background:transparent;width:42px;height:42px;padding:0}
.menu-btn span{display:block;width:18px;height:1px;background:var(--ink);margin:5px auto}
.ftr{background:var(--dark);color:var(--on-dark);padding-block:48px 36px}
.ftr .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.ftr h4{font-family:var(--mono);font-size:var(--fs-caption);text-transform:uppercase;font-weight:400;letter-spacing:.06em;margin-bottom:12px;color:var(--accent)}
.ftr a{display:block;text-decoration:none;padding-block:4px;color:var(--on-dark)}
/* founder: bottom row. Desktop: copyright left, links right, one row, one baseline (links 24px apart, no side padding so edges align).
   <=960: copyright on its own line, links below on one line; <=480: links in a 2x2 grid of equal columns. 44px tap height comes from padding. */
.ftr .fine{grid-column:1/-1;border-top:1px solid var(--on-dark-soft);padding-top:18px;font-family:var(--mono);font-size:var(--fs-caption);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px}
.page-top{padding-top:clamp(28px,5vw,64px)}
.intro-block{max-width:880px;display:grid;gap:18px;padding-bottom:36px}
/* "Log in" moves into the menu on phones so "Join" can stay in the header */
.nav .nav-login{display:none}
.ftr .fine-links{display:flex;flex-wrap:wrap;gap:0 24px}
.ftr .fine-links a{color:inherit;padding:12px 0;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
@media (max-width:960px){
  .nav.open .nav-login{display:flex;justify-content:center;order:-1;margin:8px 0 12px;border:1px solid var(--hair-strong);font-family:var(--mono);font-size:var(--fs-small);min-height:52px;padding:0}
  .hdr-actions .hdr-login{display:none}
}
/* Logged-in app: shell (sidebar + topbar), panels, lists, dashboard, wizard, chat, calendar, press, responsive rules for everything. */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:calc(100dvh - var(--player-h))}
.side-nav{position:sticky;top:0;height:calc(100dvh - var(--player-h));background:var(--paper);border-right:1px solid var(--hair-strong);display:flex;flex-direction:column;overflow:auto;z-index:var(--z-drawer)}
.side-logo{padding:0 20px;height:var(--bar-h,72px);box-sizing:border-box;display:flex;align-items:center;text-decoration:none;border-bottom:1px solid var(--hair)}   /* same height as the top bar, so the two lines meet */
.side-nav nav{display:grid;padding:10px 0;gap:1px}
/* ---------- app shell (sidebar and phone drawer), owned with shell.js ---------- */
.side-nav nav a{display:flex;align-items:center;gap:12px;padding:10px 20px;text-decoration:none;font-size:var(--fs-body-s);border-left:3px solid transparent;min-height:44px}
.side-nav nav a svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 19px}
.side-nav nav a span{flex:1}
.side-nav nav a[aria-current="page"]{background:var(--accent);color:var(--on-accent);border-left-color:var(--on-accent)}
@media (hover:hover){
  .side-nav nav a:not([aria-current]):hover{background:var(--mint)}
}
.side-nav hr{border:0;border-top:1px solid var(--hair);margin:8px 20px}
.side-foot{margin-top:auto;padding:16px 20px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:10px}
.side-foot a{text-decoration:none}
.app-col{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:var(--z-topbar);display:flex;align-items:center;gap:12px;min-height:var(--bar-h,72px);box-sizing:border-box;padding:8px var(--gutter-r) 8px var(--gutter);background:var(--ground);border-bottom:1px solid var(--hair)}
.top-title{font-family:var(--mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em}
.acct{display:flex;gap:10px;align-items:center;background:transparent;border:1px solid var(--hair);padding:4px 12px 4px 4px;border-radius:var(--r-pill)}
.app-menu{display:none}
.app-main{padding:clamp(20px,3vw,36px) var(--gutter-r) 56px var(--gutter)}
.app-wrap{max-width:1180px;margin-inline:auto;display:grid;gap:20px}
.app-wrap.wide{max-width:1320px}
.app-wrap.narrow{max-width:760px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head p{margin-top:6px}
.drawer-scrim{position:fixed;inset:0;background:rgba(21,20,14,.45);z-index:var(--z-drawer-scrim)}
.group-h{margin-top:12px}
/* calendar */
.cal-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--hair)}
.cal-dow span{font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;padding:10px 6px;color:var(--muted)}
.cal-cell{min-height:92px;border-top:1px solid var(--hair);border-left:1px solid var(--hair);padding:6px;display:grid;gap:4px;align-content:start}
.cal-cell:nth-child(7n){border-right:1px solid var(--hair)}
.cal-cell.empty{background:transparent}
.cal-cell.avail{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--viz) 6px 7px)}
.cal-cell.today .cal-n{background:var(--ink);color:var(--paper);padding:0 6px}
.cal-n{font-family:var(--mono);font-size:var(--fs-caption);justify-self:start}
.cal-ev{font-size:var(--fs-micro);font-family:var(--mono);padding:3px 5px;text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--on-accent)}
.cal-ev.confirmed,.cal-ev.done{background:var(--accent);color:var(--on-accent)}
.cal-ev.proposed{background:transparent;border-style:dashed}
@media (max-width:960px){
  .nav{display:none}
  .nav.open{position:fixed;top:calc(65px + env(safe-area-inset-top,0px));left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:0;overflow-y:auto;z-index:var(--z-menu);background:var(--ground);border-bottom:0;padding:8px var(--gutter-r) calc(24px + env(safe-area-inset-bottom,0px)) var(--gutter);justify-content:flex-start}
  .nav.open a{border-bottom:1px solid var(--hair);font-size:var(--fs-lead);padding:14px 0;min-height:52px;display:flex;align-items:center}
  .hdr .menu-btn{display:block;height:44px;min-height:44px;width:44px;border:1px solid var(--hair-strong)}
  .hdr .wrap{min-height:64px;position:relative;gap:10px}
  .grid3{grid-template-columns:1fr}
  .ftr .wrap{grid-template-columns:1fr 1fr}
  .ftr .wrap > div:first-child{grid-column:1/-1}
  /* app shell becomes a drawer */
  .app{grid-template-columns:1fr}
  .side-nav{left:0;top:0;bottom:0;height:100dvh;width:min(300px,86vw);transform:translateX(-102%);transition:transform .3s cubic-bezier(.2,.7,.2,1);padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom,0px));position:fixed}
  .side-nav.open{transform:none;visibility:visible}
  .app-menu{display:block;width:40px;height:40px}
  .acct-name{display:none}
  .acct{padding:3px}
  .cal-layout{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid2{grid-template-columns:1fr}
  .cal-cell{min-height:58px;padding:3px}
  .cal-ev{font-size:9px;padding:1px 3px}
}
/* header controls: Join, the menu button and the account button share one 44px square box on phones */
.hdr .menu-btn{position:relative}
.hdr .menu-btn span{position:absolute;left:50%;top:50%;width:18px;height:1px;margin:0;transform:translate(-50%,-4px);transition:transform .2s}
.hdr .menu-btn span + span{transform:translate(-50%,3px)}
.hdr .menu-btn[aria-expanded="true"] span{transform:translate(-50%,0) rotate(45deg)}
.hdr .menu-btn[aria-expanded="true"] span + span{transform:translate(-50%,0) rotate(-45deg)}
.hdr .acct{border-radius:0;border-color:var(--hair-strong)}
@media (max-width:960px){
  .hdr-actions .btn.sm{height:44px;min-height:44px;padding-inline:16px;font-size:var(--fs-ui)}
  .hdr .acct{height:44px;min-height:44px;padding:0 6px;gap:6px}
}
/* M-32: skip link */
.skip{position:absolute;left:8px;top:-60px;z-index:var(--z-skip);background:var(--ink);color:var(--ground);padding:12px 16px;font-family:var(--mono);font-size:var(--fs-ui);text-decoration:none}
.skip:focus{top:8px}
/* M-38 + founder: header. "Log in" (outline) and "Join" (yellow) are two buttons of the same size, 44px tall.
   Phones: Log in moves into the menu (top, full width) so Join and the menu button fit next to the logo. */
.hdr-actions .hdr-login,.hdr-actions .hdr-join{min-height:44px;height:44px;padding:0 18px;font-size:var(--fs-ui);min-width:88px}
/* M-16: phone menu is a full-height sheet under the header with a backdrop; the page behind does not scroll */
.nav-scrim{display:none}
@media (max-width:960px){
  .nav-scrim:not([hidden]){display:block;position:fixed;inset:0;background:rgba(21,20,14,.35);z-index:var(--z-menu-scrim)}
  html.menu-open,html.menu-open body{overflow:hidden}
}
/* M-32 + M-33: footer headings are h2 (styled as before); legal links are real 44px tap targets */
.ftr .ftr-h{font-family:var(--mono);font-size:var(--fs-caption);text-transform:uppercase;font-weight:400;letter-spacing:.06em;margin-bottom:12px;color:var(--accent);line-height:1.3}
.ftr .wrap > div > a{padding-block:10px;min-height:44px;display:flex;align-items:center}
@media (min-width:1024px){
  .ftr .fine,.ftr .fine-links{flex-wrap:nowrap}
  .ftr .fine > span{white-space:nowrap}
}
@media (max-width:960px){
  .ftr .fine{flex-direction:column;align-items:flex-start;gap:4px}
  .ftr .fine-links{flex-wrap:nowrap}
}
@media (max-width:480px){
  .ftr .fine-links{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;width:100%}
}
/* M-18: while a page loads, #view holds the space and shows a skeleton, so the footer never jumps to the top */
#view:not(.app-main):empty{min-height:100vh;background:linear-gradient(var(--hair),var(--hair)) var(--gutter) 64px/min(560px,70vw) 56px no-repeat, linear-gradient(var(--hair),var(--hair)) var(--gutter) 150px/min(420px,55vw) 16px no-repeat, linear-gradient(var(--hair),var(--hair)) var(--gutter) 230px/calc(100% - 2 * var(--gutter)) 280px no-repeat}
.page-head > .status{white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;flex:0 0 auto;align-self:flex-start;margin-top:6px}
@media (max-width: 960px), (pointer: coarse){
  /* lead: tap targets from the forms pass (agent G notes) */
  #appMenu{min-width:44px;min-height:44px}
  .topbar .icon-btn{min-width:44px;min-height:44px}
  .side-foot a,.side-foot .link{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width: 960px){
  /* lead: phone account button showed the avatar as an off-centre circle inside a second outlined circle.
   On phones the button is just the avatar: no ring, centred, 44px tap area kept invisible. */
  .topbar #acct{border:0;background:none;padding:0;width:44px;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;box-shadow:none}
  .topbar #acct > :not(.av){display:none}
  .topbar #acct .av{width:36px;height:36px;flex:0 0 36px;margin:0}
  .topbar #acct:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-round)}
}
@media (max-width:960px){
  .app-main:has(.msgs-page.has-cur){padding-top:0;padding-bottom:0;padding-left:0;padding-right:0}
  /* phone + tablet, inside a conversation: the thread header replaces the app top bar (one bar, like Messages on iOS) */
  .app-col:has(.msgs-page.has-cur) > .topbar{display:none}
}
.side-nav .nb.pts{background:transparent;color:var(--muted);border:1px solid var(--hair-strong);border-radius:var(--r-pill);padding:1px 8px;font-size:var(--fs-micro);white-space:nowrap}
.side-nav nav a[aria-current="page"] .nb.pts{color:var(--on-accent);border-color:var(--on-accent)}
@media (max-width:960px){
  .side-logo{padding-right:96px}
  .side-nav:not(.open){visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){
  .side-nav:not(.open){transition:none}
}
/* Admin / Producer / Artist view switch (admins only) and the artist preview bar */
.view-sw{flex-wrap:nowrap;gap:4px;margin-right:12px}
.view-sw .chip{min-height:36px;padding:0 12px;font-size:12px}
.preview-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px var(--gutter);min-height:64px;box-sizing:border-box;background:var(--accent);color:var(--on-accent);font-size:14px;border-bottom:1px solid var(--on-accent)}
.preview-bar .link{color:var(--on-accent);text-decoration:underline}
/* 64px = the nav's 10px top padding + a 44px row + 10px: the notice lines up with Home on the left */
@media (max-width:600px){.view-sw{margin-right:6px}.view-sw .chip{padding:0 8px;font-size:11px;min-height:32px}.top-title{display:none}}
/* test.sonic-seekers.com banner */
.test-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:8px var(--gutter);background:var(--accent);color:var(--on-accent);font-size:13px;border-bottom:1px solid var(--on-accent)}
.test-bar .test-as{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.test-bar button{font:inherit;font-weight:600;background:var(--on-accent);color:var(--accent);border:0;padding:6px 12px;min-height:32px;cursor:pointer}
.test-bar a{color:var(--on-accent);text-decoration:underline;margin-left:auto}
@media (max-width:600px){.test-bar a{margin-left:0}}
/* test site password screen */
.test-locked body > :not(.test-gate){visibility:hidden}
.test-gate{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:var(--ground)}
.test-gate-card{width:min(420px,100%);display:grid;gap:14px;border:1px solid var(--hair-strong);background:var(--paper);padding:28px}
/* two fields side by side: their input boxes line up even when one label wraps */
.grid2 > .field{align-content:end}
form .grid2{align-items:end}
/* admin: the "Whose artist area?" list, one full-width row per artist */
.pick-m{display:flex;width:100%;align-items:center;gap:12px;text-align:left;background:var(--paper);color:var(--ink);border:0;border-bottom:1px solid var(--hair);padding:12px 14px;font:inherit;cursor:pointer}
.pick-m:last-child{border-bottom:0}
.pick-m .grow{flex:1;min-width:0}
.pick-m:hover{background:var(--mint)}

/* css/components/buttons.css */
/* Buttons: .btn and its variants, loading state, icon buttons, text links, paired buttons. */
.link{background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:inherit;cursor:pointer;font-family:inherit;line-height:inherit;text-decoration-thickness:1px;padding-block:10px;margin-block:-10px;border-radius:0}
/* buttons */
/* ---------- buttons: one scale ---------- */
/* primary .btn 44px, .btn.sm 36px (44px on touch), .btn.line secondary, .btn.block full width, .link text button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent);text-decoration:none;position:relative;overflow:hidden;isolation:isolate;cursor:pointer;text-align:center;min-height:var(--ctl-h);padding:0 20px;font-size:var(--fs-ui);line-height:1.2;font-weight:500;letter-spacing:.01em;border-radius:0;white-space:normal;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:color .25s,opacity .15s,transform .08s}
.btn::after{content:"";position:absolute;inset:0;background:var(--on-accent);transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:-1}
.btn.line{color:var(--ink);border-color:var(--hair-strong);background:transparent}
/* outline buttons on a yellow surface keep dark ink in both themes (cream-on-yellow was unreadable in dark mode) */
.panel-blue .btn.line,.research-teaser .btn.line,.auth-demo .btn.line,.alert .btn.line,.finding .btn.line,.art-stats .btn.line,.adm-toast-bar .btn.line,.panel .btn.line.on-yellow{color:var(--on-accent);border-color:var(--on-accent)}
/* same for plain links and summaries on those surfaces */
.auth-demo summary,.auth-demo a:not(.btn){color:var(--on-accent)}
.btn.white{background:var(--on-accent);color:var(--accent)}
.btn.sm{min-height:var(--ctl-h-sm);padding:0 14px;font-size:var(--fs-caption);gap:6px}
.btn.block{width:100%;display:flex}
.btn:disabled{opacity:.42;cursor:not-allowed;pointer-events:none}
@media (hover:hover){
  .btn:not(:disabled):hover{color:var(--accent)}
  .btn:not(:disabled):hover::after{transform:scaleY(1)}
}
.icon-btn{background:transparent;border:1px solid var(--hair);display:grid;place-items:center;position:relative;padding:0;color:var(--ink);cursor:pointer;width:44px;height:44px}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
/* paired buttons: always the same width, side by side (stack only on very narrow screens) */
.eq-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px}
.eq-btns .btn{justify-content:center;text-align:center;width:100%}
@media (max-width:340px){
  .eq-btns{grid-template-columns:1fr}
}
/* confirm sheets: the safe choice left, the action right; destructive actions in red (P-05, P-23) */
.btn.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
@media (hover:hover){
  .btn.btn-danger:not(:disabled):hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
}
.confirm-btns{margin-top:12px}
.link.danger,.link.del-link{color:var(--bad)}
label.btn{cursor:pointer}
label.btn.busy{opacity:.55;pointer-events:none}
/* ---------- file inputs: always hidden inside a label that looks and acts like a button ---------- */
label.btn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
label.btn .file-vh{inset:0;width:100%;height:100%;clip:auto;pointer-events:auto}
label.btn:focus-within,label.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
label.btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.btn:focus{outline:0}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn:not(:disabled):not(.is-loading):active{transform:translateY(1px)}
.btn[aria-disabled=true]{opacity:.42;cursor:not-allowed;pointer-events:none}
/* loading: label hidden, spinner in the label colour, same size so nothing jumps */
.btn.is-loading,.btn[aria-busy=true]{color:transparent!important;pointer-events:none;cursor:progress;opacity:1}
.btn.is-loading::before,.btn[aria-busy=true]::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid var(--on-accent);border-right-color:transparent;border-radius:var(--r-round);animation:ss-spin .7s linear infinite,ss-fade .2s ease-out both;z-index:1}
.btn.line.is-loading::before,.btn.line[aria-busy=true]::before{border-color:var(--ink);border-right-color:transparent}
.btn.sm.is-loading::before{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
.btn.is-loading::after{transform:scaleY(0)!important}
@keyframes ss-spin{to{transform:rotate(360deg)}}
@keyframes ss-fade{from{opacity:0}}
.link:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
  .link:hover{text-decoration-thickness:2px}
}
.icon-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
  .icon-btn:hover{border-color:var(--ink);background:var(--mint)}
}
@media (max-width:760px),(pointer:coarse){
  /* ---------- touch: every control is at least 44px tall, and fields never trigger iOS zoom ---------- */
  .btn.sm{min-height:44px;padding-inline:14px}
}
@media (prefers-reduced-motion:reduce){
  .btn.is-loading::before{animation:none!important}
  .btn.is-loading::before,.btn[aria-busy=true]::before{animation:ss-spin 1.6s linear infinite!important}
}

/* css/components/forms.css */
/* Forms: inputs, select, textarea, checkboxes, range, chips, segments, fields and errors, filter bar, switches. */
input{font:inherit;color:inherit;touch-action:manipulation}
/* select: one drawn chevron in the text colour, room for it on the right */
select{font:inherit;touch-action:manipulation;width:100%;min-height:var(--ctl-h);border:1px solid var(--hair-strong);background-color:var(--paper);color:var(--ink);padding:10px 13px;border-radius:0;font-family:var(--display);font-size:var(--fs-body);line-height:1.35;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s;margin:0;cursor:pointer;padding-right:40px;text-overflow:ellipsis;white-space:nowrap;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
textarea{font:inherit;touch-action:manipulation;width:100%;border:1px solid var(--hair-strong);background-color:var(--paper);color:var(--ink);padding:10px 13px;border-radius:0;font-family:var(--display);font-size:var(--fs-body);appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s;margin:0;min-height:112px;resize:vertical;line-height:1.45}
/* chips + tags + status */
/* ---------- chips ---------- */
.chip{font-family:var(--mono);font-size:var(--fs-caption);border:1px solid var(--hair-strong);background:transparent;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;min-height:var(--ctl-h-sm);padding:0 13px;gap:6px;line-height:1.2;justify-content:center;white-space:nowrap;border-radius:0;transition:background-color .15s,color .15s}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.chip:disabled{opacity:.45;cursor:not-allowed}
/* forms */
/* field label + hint */
.field{display:grid;gap:7px;min-width:0}
.field > span{font-family:var(--mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.05em;line-height:1.35}
.field small{color:var(--muted);font-size:var(--fs-ui);line-height:1.4}
input:disabled,textarea:disabled{opacity:.55}
/* ---------- range sliders ---------- */
/* the filled part follows --pct, which SS.ui keeps in sync on every input event */
input[type=range]{--pct:50%;--fill:var(--ink);--rest:var(--hair);--thumb:var(--accent);--thumb-b:var(--on-accent);appearance:none;-webkit-appearance:none;width:100%;height:var(--ctl-h);background:transparent;margin:0;padding:0;cursor:pointer;accent-color:auto;touch-action:pan-y}
/* label + box: the box sits on the first text line; long text wraps under itself; the whole row is a 44px target */
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-body-s);line-height:22px;min-height:44px;padding-block:11px;margin-block:-6px;cursor:pointer;-webkit-user-select:none;user-select:none}
.check input{width:20px;height:20px;margin-top:1px;flex:0 0 20px}
.err{color:var(--bad);min-height:0;font-size:var(--fs-small);line-height:1.4}
.err:empty{display:none}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.tabs{margin-bottom:18px}
/* mentor directory + cards */
.filterbar{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:end;padding-block:16px;border-bottom:1px solid var(--hair)}
.filterbar .field{min-width:160px}
.filterbar .check{padding-bottom:11px;margin-block:0}
@media (max-width:600px){
  .filterbar .field{min-width:calc(50% - 8px);flex:1}
}
/* ---------- text fields, selects, textareas ---------- */
:is(input:not([type]),input[type=text],input[type=email],input[type=number],input[type=url],input[type=search],input[type=password],input[type=tel],input[type=date],input[type=time],input[type=datetime-local]){width:100%;min-height:var(--ctl-h);border:1px solid var(--hair-strong);background-color:var(--paper);color:var(--ink);padding:10px 13px;border-radius:0;font-family:var(--display);font-size:var(--fs-body);line-height:1.35;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s;margin:0}
:is(input,select,textarea)::placeholder{color:var(--muted);opacity:1}
:is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):focus{outline:0}
:is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):focus{outline:0;border-color:var(--ink);box-shadow:var(--ring)}
:is(input,select,textarea):disabled{background-color:var(--ground);color:var(--muted);border-color:var(--hair);opacity:1;cursor:not-allowed;-webkit-text-fill-color:var(--muted)}
:is(input,textarea)[readonly]{background-color:var(--ground)}
/* number: no spinner arrows, tabular digits */
input[type=number]{font-variant-numeric:tabular-nums;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* search: a drawn magnifier on the left, the native clear button kept */
input[type=search]{padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B6750' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.4 10.4 14 14'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px 50%;background-size:16px 16px}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
select:disabled{cursor:not-allowed}
select option{background:var(--paper);color:var(--ink)}
@media (hover:hover){
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea):not(:disabled):not(:focus):hover{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
}
/* invalid: shown after the person has touched the field (or tried to send), never on first paint */
:is(input,select,textarea):is([aria-invalid=true],:user-invalid):not([type=checkbox]):not([type=radio]){border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
:is(input,select,textarea):is([aria-invalid=true],:user-invalid):not([type=checkbox]):not([type=radio]):focus{box-shadow:0 0 0 1px var(--bad),0 0 0 4px var(--bad-bg)}
.field-err{color:var(--bad);font-size:var(--fs-small);line-height:1.35;margin:0;text-transform:none;letter-spacing:0;font-family:var(--display);display:flex;gap:6px;align-items:baseline}
.field-err::before{content:"✳";font-family:var(--mono);font-size:var(--fs-caption)}
.check + .field-err{margin-top:4px;padding-left:30px}
.err:not(:empty){border-left:2px solid var(--bad);padding:2px 0 2px 10px}
/* ---------- checkboxes + radios (custom, 20px, brand) ---------- */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 20px;margin:0;display:inline-grid;place-content:center;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;vertical-align:middle;position:relative;transition:background-color .12s,border-color .12s}
input[type=radio]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:0 0 20px;margin:0;display:inline-grid;place-content:center;border:1.5px solid var(--ink);background:var(--paper);cursor:pointer;vertical-align:middle;position:relative;transition:background-color .12s,border-color .12s;border-radius:var(--r-round)}
input[type=checkbox]:checked{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2315140E' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M4.5 10.2 8.3 14 15.5 6.3'/%3E%3C/svg%3E") center/16px 16px no-repeat;border-color:var(--on-accent)}
input[type=checkbox]:indeterminate{background:var(--accent) linear-gradient(var(--on-accent),var(--on-accent)) center/10px 2px no-repeat;border-color:var(--on-accent)}
input[type=radio]:checked{background:radial-gradient(circle,var(--on-accent) 0 3.5px,var(--accent) 4.5px);border-color:var(--on-accent)}
/* in dark mode the yellow fill keeps an ink border so it reads as the same control */
input[type=checkbox]:focus{outline:0}
input[type=radio]:focus{outline:0}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px var(--paper)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
@media (hover:hover){
  input[type=checkbox]:not(:disabled):not(:checked):hover,input[type=radio]:not(:disabled):not(:checked):hover{background-color:var(--mint)}
}
input[type=checkbox]:is([aria-invalid=true],:user-invalid){border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-bg)}
.check > input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px}
.check > span{min-width:0}
.check:has(input:disabled){cursor:not-allowed;color:var(--muted)}
input[type=range]:focus{outline:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,var(--fill) 0 var(--pct),var(--rest) var(--pct) 100%)}
input[type=range]::-moz-range-track{height:4px;background:var(--rest)}
input[type=range]::-moz-range-progress{height:4px;background:var(--fill)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;background:var(--thumb);border:1.5px solid var(--thumb-b);box-shadow:3px 3px 0 var(--thumb-b);transition:transform .12s}
input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--thumb);border:1.5px solid var(--thumb-b);border-radius:0;box-shadow:3px 3px 0 var(--thumb-b)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.08)}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:3px}
input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--ink);outline-offset:3px}
input[type=range]:disabled{opacity:.45;cursor:not-allowed}
.chip:focus{outline:0}
.chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.chip[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.chip[aria-pressed="true"]::before{content:"";width:6px;height:6px;background:currentColor;flex:0 0 6px}
.chip[data-like][aria-pressed="true"]::before{display:none}
.seg.tabs .chip[aria-pressed="true"]::before{display:none}
@media (hover:hover){
  .chip:not(:disabled):not([aria-pressed="true"]):hover{background:var(--mint);color:var(--ink)}
}
@media (max-width:760px),(pointer:coarse){
  .chip{min-height:44px}
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:var(--fs-body)!important}
}
/* ---------- settings: email switch ---------- */
.set-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;min-height:44px}
.set-switch > span{display:grid;gap:2px;min-width:0}
.set-switch b{font-weight:500;font-size:var(--fs-body-s)}
.set-switch small{font-size:var(--fs-ui)}
.set-switch input[role=switch]{flex:0 0 46px;width:46px;height:26px;border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--paper);position:relative;margin:0;cursor:pointer;transition:background-color .15s}
.set-switch input[role=switch]::before{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:var(--r-round);background:var(--ink);transition:transform .15s}
.set-switch input[role=switch]:checked{background:var(--accent);border-color:var(--on-accent)}
.set-switch input[role=switch]:checked::before{transform:translateX(20px);background:var(--on-accent)}
@media (prefers-reduced-motion:reduce){
  .set-switch input[role=switch]{transition:none}
  .set-switch input[role=switch]::before{transition:none}
}

/* css/components/badges.css */
/* Badges: tags, status pills, counters, avatars, small photos. */
.tag{font-family:var(--mono);font-size:var(--fs-micro);border:1px solid var(--hair);padding:2px 8px;white-space:nowrap}
.tag.hi{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
/* ---------- status chips ---------- */
.status{font-family:var(--mono);text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-micro);font-weight:500;line-height:1.3;letter-spacing:.05em;padding:3px 8px;min-height:24px;border:1px solid currentColor;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;flex:0 1 auto}
.status.ok{color:var(--ok);background:var(--ok-bg)}
.status.warn{color:var(--warn);background:var(--warn-bg)}
.status.bad{color:var(--bad);background:var(--bad-bg)}
.status.info{color:var(--ink);background:var(--mint);border-color:var(--ink)}
.stars{font-family:var(--mono);letter-spacing:.1em}
.nb{font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);padding:0 6px;min-width:20px;text-align:center}
.nb:empty{display:none}
.av{display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-family:var(--mono);font-size:var(--fs-caption);border:1px solid var(--on-accent);border-radius:var(--r-round);flex:0 0 auto}
.photo-prev{width:96px;height:96px;border:1px solid var(--hair-strong);background:var(--mint);display:grid;place-items:center;overflow:hidden}
.photo-prev img{width:100%;height:100%;object-fit:cover}
.mini-photo{width:40px;height:40px;flex:0 0 40px;border:1px solid var(--hair-strong);background:var(--accent);display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-micro);overflow:hidden}
.mini-photo.big{width:88px;height:88px;flex-basis:88px}
.mini-photo img{width:100%;height:100%;object-fit:cover}
/* ---------- Fix round 2026-09-25, audit 02 (producer) ---------- */
/* status chips: neutral grey for outcomes that are not errors (P-24); in lists they wrap instead of clipping (P-12) */
.status.neutral{color:var(--muted);background:var(--paper);border-color:var(--hair-strong)}
/* My tracks: older versions sit under the newest one, on the same left edge and with the same button slots.
   They are marked by the muted "v1 · older" tag and a dimmed waveform; a version group has no divider between its rows
   and a tighter gap (founder, 2026-09-25). Clips under 30 s say why they cannot be sent (P-08, P-09) */
.tag.tag-muted{color:var(--muted);border-color:var(--hair);background:transparent}
.photo-prev.big{width:160px;height:160px;flex:0 0 160px}
.status::before{content:"";width:6px;height:6px;border-radius:var(--r-round);background:currentColor;flex:0 0 6px}

/* css/components/cards.css */
/* Cards: panels, lists and rows, alerts, KPI strips and tiles, summaries, empty states. */
/* ---------- empty state ---------- */
.empty{text-align:center;display:grid;justify-items:center;padding:clamp(32px,5vw,48px) 20px;gap:10px;max-width:none}
.summary{border:1px solid var(--hair-strong);background:var(--paper)}
.summary > div{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--hair);font-size:var(--fs-body-s)}
.summary > div:last-child{border-bottom:0}
.summary .tot{font-weight:600;background:var(--mint)}
.summary .guarantee{display:block;color:var(--muted)}
/* panels + lists */
.panel{background:var(--paper);border:1px solid var(--hair-strong);min-width:0}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--hair)}
.panel-h a{text-decoration:underline;text-underline-offset:3px}
.link-panel{text-decoration:none;display:block}
@media (hover:hover){
  .link-panel:hover{background:var(--mint)}
}
.list{border:1px solid var(--hair-strong);background:var(--paper)}
.panel .list,.list .list{border:0}
.li{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.li:last-child{border-bottom:0}
@media (hover:hover){
  a.li:hover{background:var(--mint)}
}
.alert{background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);padding:14px 16px;display:grid;gap:8px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair-strong);background:var(--paper)}
.kpis > *{padding:16px 18px;border-right:1px solid var(--hair);display:block;text-decoration:none;color:inherit}
.kpis > *:last-child{border-right:0}
@media (hover:hover){
  .kpis > a:hover{background:var(--mint)}
}
.kpis b{display:block;font-size:30px;font-weight:500;letter-spacing:-.03em}
.kpis small{font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;color:var(--muted)}
@media (max-width:960px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpis > *:nth-child(2){border-right:0}
  .kpis > *:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
@media (max-width:600px){
  .li{flex-wrap:wrap}
}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));border-left:1px solid var(--hair-strong);border-top:1px solid var(--hair-strong);background:var(--paper)}
.kpi-tile{padding:16px;border-right:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong);text-decoration:none;color:inherit;display:grid;gap:4px}
.kpi-tile b{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.03em}
.kpi-tile small{font-size:var(--fs-caption);color:var(--muted)}
a.kpi-tile[href]:hover{background:var(--mint)}
.plain-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.alert.photo-nudge .btn{background:var(--paper)}
/* admin Numbers: 3 tiles a row (2 on phones); .kpi-fill completes a short last row on desktop only */
.kpi-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi-grid.compact .kpi-tile{padding:12px 14px;position:relative;align-content:start}
.kpi-fill{background:transparent;pointer-events:none}
.kpi-grid.compact .kpi-tile b{font-size:var(--fs-h4)}
a.kpi-tile:hover .kpi-go{color:var(--ink)}
@media (max-width:600px){
  .kpi-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-grid.compact .kpi-fill{display:none}   /* 2 per row on phones: no filler boxes */
  .kpi-grid.compact .kpi-tile b{font-size:var(--fs-h5)}
}
.panel-note{padding:12px 16px;margin:0;border-bottom:1px solid var(--hair)}
.panel-note:last-child{border-bottom:0}
.alert input[type=range]{--fill:var(--on-accent);--rest:rgba(21,20,14,.22);--thumb:var(--on-accent);--thumb-b:var(--on-accent)}
.alert .btn:focus-visible{outline-color:var(--on-accent)}
.empty > *{max-width:46ch;margin-inline:auto}
.empty h3{text-wrap:balance}
.empty p{line-height:1.5;text-wrap:pretty}
.empty .btn,.empty .link{margin-top:6px}

/* css/components/tables.css */
/* Tables: base table, scrolling wrapper, price table. */
/* tables */
.tbl{overflow-x:auto;border:1px solid var(--hair-strong);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-body-s)}
th{text-align:left;padding:11px 14px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;font-weight:400}
td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--hair)}
td.num,th.num{text-align:right;font-family:var(--mono)}
tr.us td{background:var(--accent);color:var(--on-accent)}
/* ---------- admin tables ---------- */
.tbl.cards td.act .btn{white-space:nowrap}
@media (max-width:700px){
  .tbl.cards{border:0;background:transparent;overflow:visible}
  .tbl.cards table,.tbl.cards tbody{display:block}
  .tbl.cards thead{display:none}
  .tbl.cards tr{display:block;border:1px solid var(--hair-strong);background:var(--paper);margin-bottom:12px;padding:6px 0}
  .tbl.cards td{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start;padding:8px 14px;border-bottom:0;text-align:left;overflow-wrap:anywhere}
  .tbl.cards td[data-label]::before{content:attr(data-label);font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:3px}
  .tbl.cards td.num{text-align:left}
  .tbl.cards td > .cv{min-width:0}
  .tbl.cards td.blank{display:none}
  .tbl.cards td[colspan]{display:block}
  .tbl.cards td.act{display:block;padding-top:10px;border-top:1px solid var(--hair);margin-top:4px}
  .tbl.cards td.act::before{display:none}
  .tbl.cards td.act .row,.tbl.cards td.act .stack{display:grid;grid-template-columns:1fr;gap:8px;flex-wrap:wrap}
  .tbl.cards td.act .btn{width:100%;min-height:44px}
  .tbl.cards td.act .small{display:block;padding:4px 0}
}
@media (min-width:701px) and (max-width:1099px){
  .tbl.adm-cards{border:0;background:transparent;overflow:visible}
  .tbl.adm-cards table,.tbl.adm-cards tbody{display:block}
  .tbl.adm-cards thead{display:none}
  .tbl.adm-cards tr{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) 140px 130px;gap:8px 20px;align-items:start;border:1px solid var(--hair-strong);background:var(--paper);margin-bottom:10px;padding:12px 14px}
  .tbl.adm-cards td{display:block;padding:0;border:0;text-align:left;overflow-wrap:anywhere}
  .tbl.adm-cards td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);margin-bottom:4px}
  .tbl.adm-cards td.act{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:10px}
  .tbl.adm-cards td.act::before,.tbl.adm-cards td:first-child::before{display:none}
  .tbl.adm-cards td.num{text-align:left}
}
@media (max-width:600px){
  /* ---------- mentor profile: price table becomes one block per format on phones ---------- */
  .price-tbl thead{display:none}
  .price-tbl table,.price-tbl tbody{display:block}
  .price-tbl tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 12px;padding:14px 16px;border-bottom:1px solid var(--hair)}
  .price-tbl tr:last-child{border-bottom:0}
  .price-tbl td{display:block;padding:0;border:0;text-align:left}
  .price-tbl td:first-child{grid-column:1/-1}
  .price-tbl td[data-label]::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px;line-height:1.3}
  .price-tbl td[data-label]{line-height:46px;white-space:nowrap}
  .price-tbl input{max-width:none!important;width:100%;text-align:left!important;height:46px;vertical-align:top}
}
/* ---------- Profile ---------- */
.price-tbl input[aria-invalid="true"]{border-color:var(--bad);outline-color:var(--bad)}

/* css/components/sheet.css */
/* Sheet (modal), scrim, toast, tooltip. */
/* modal, toast, tooltip */
/* ---------- modal sheet ---------- */
.scrim{position:fixed;inset:0;height:100dvh;z-index:var(--z-modal);background:rgba(21,20,14,.55);display:grid;place-items:center;padding:24px;overscroll-behavior:contain;animation:ss-scrim .2s ease-out}
.sheet{background:var(--paper);border:1px solid var(--hair-strong);width:min(520px,100%);overflow:auto;display:grid;position:relative;max-height:calc(100dvh - 56px);padding:0 24px 24px;gap:16px;overscroll-behavior:contain;box-shadow:8px 8px 0 var(--accent),8px 8px 0 1px var(--hair-strong);animation:ss-pop .22s cubic-bezier(.2,.7,.2,1);-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.sheet.wide{width:min(760px,100%)}
/* header stays put while the body scrolls, so Close is always in reach */
.sheet-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:3;background:var(--paper);margin-inline:-24px;padding:14px 24px 12px;border-bottom:1px solid var(--hair);gap:12px;min-height:62px}
/* ---------- toast ---------- */
.toast{position:fixed;z-index:var(--z-toast);background:var(--ink);color:var(--paper);font-family:var(--mono);left:16px;right:16px;transform:none;width:fit-content;max-width:min(460px,calc(100% - 32px));margin-inline:auto;padding:12px 16px;font-size:var(--fs-ui);line-height:1.45;text-align:center;border:1px solid var(--ink);box-shadow:4px 4px 0 var(--accent);animation:ss-pop .2s ease-out;overflow-wrap:anywhere;bottom:var(--toast-b,calc(var(--player-h) + 16px + env(safe-area-inset-bottom,0px)))}
.tip{position:absolute;z-index:var(--z-tip);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--fs-caption);padding:6px 9px;pointer-events:none;white-space:nowrap}
.sheet:focus{outline:0}
.sheet-head .eyebrow{color:var(--muted)}
.sheet-head [data-close]{margin-left:auto;flex:0 0 auto}
.sheet > .sheet-head + *{margin-top:4px}
@keyframes ss-scrim{from{background:rgba(21,20,14,0)}}
@keyframes ss-pop{from{opacity:0;transform:translateY(10px)}}
@keyframes ss-up{from{transform:translateY(100%)}}
@media (max-width:760px){
  /* phone: bottom sheet with a handle, rounded top, safe area at the bottom */
  .scrim{place-items:end stretch;padding:env(safe-area-inset-top,0px) 0 0}
  .sheet,.sheet.wide{width:100%;max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px));border:0;border-top:1px solid var(--hair-strong);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(21,20,14,.18);padding:0 var(--gutter-r) calc(20px + env(safe-area-inset-bottom,0px)) var(--gutter);animation:ss-up .28s cubic-bezier(.2,.7,.2,1)}
  .sheet-head{margin-inline:calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));padding:22px var(--gutter-r) 10px var(--gutter);min-height:0;border-radius:14px 14px 0 0}
  .sheet-head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;border-radius:2px;background:var(--hair);transform:translateX(-50%)}
  .toast{font-size:var(--fs-small);max-width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){
  .scrim{animation:none!important}
  .sheet{animation:none!important}
  .toast{animation:none!important}
}

/* css/components/notice.css */
/* Notice block (event-listing layout used on several pages). */
/* notice block (event-listing layout) */
.notice{max-width:760px;font-size:clamp(17px,1.5vw,20px);line-height:1.5}
/* lead: notice header is now an h2 (a11y); keep the mono label look */
.notice-h{font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin:0;font-weight:400;line-height:inherit}
.notice-h::before,.notice-h::after{content:"▬▬▬▬";letter-spacing:-.04em;font-size:var(--fs-caption)}
.notice-line{margin-top:18px;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.015em;line-height:1.25}
.notice hr{border:0;border-top:2px solid var(--ink);margin:22px 0;width:220px}
.notice ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.notice li{padding-left:28px;position:relative}
.notice li::before{content:"✳";position:absolute;left:0;top:0}
.panel-blue .notice hr{border-color:var(--on-accent)}
@media (min-width:1024px){
  /* M-22: notice blocks use the full width on desktop: heading and line left, the list right */
  .wrap > .notice,.wrap > div > .notice{max-width:none;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;align-items:start}
  .wrap > .notice > .notice-h,.wrap > div > .notice > .notice-h{grid-column:1;grid-row:1}
  .wrap > .notice > .notice-line,.wrap > div > .notice > .notice-line{grid-column:1;grid-row:2 / span 3}
  .wrap > .notice > hr:first-of-type,.wrap > div > .notice > hr:first-of-type{grid-column:2;grid-row:1;width:100%;margin-top:6px}
  .wrap > .notice > ul,.wrap > div > .notice > ul{grid-column:2;grid-row:2}
  .wrap > .notice > hr:last-of-type,.wrap > div > .notice > hr:last-of-type{grid-column:2;grid-row:3;width:100%}
}

/* css/components/charts.css */
/* Charts: bar rows, columns, table view, meters, rating distribution. */
.dist{flex-wrap:nowrap;gap:10px}
.dist .mono:first-child{width:26px}
.dist-t{flex:1;height:8px;background:var(--hair)}
.dist-t span{display:block;height:100%;background:var(--accent);outline:1px solid var(--ink)}
/* charts */
.chart{margin:0;border:1px solid var(--hair-strong);background:var(--paper);padding:18px 18px 8px}
.chart figcaption{display:grid;gap:2px;margin-bottom:14px}
.bars{display:grid;gap:8px}
.bar-row{display:grid;grid-template-columns:minmax(110px,34%) 1fr 48px;gap:12px;align-items:center;font-size:var(--fs-body-s);outline-offset:2px}
.bar-t{height:22px;background:var(--hair);position:relative}
.bar-f{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--ink);border-radius:0 4px 4px 0}
.bar-f.hi{background:var(--accent);outline:1px solid var(--ink)}
.bar-v{text-align:right;font-size:var(--fs-small)}
.cols{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;height:180px;align-items:end;padding-top:10px}
.col{display:grid;grid-template-rows:1fr auto;height:100%;gap:6px}
.col-f{align-self:end;height:var(--h);min-height:2px;background:var(--ink);border-radius:4px 4px 0 0}
.col-f.hi{background:var(--accent);outline:1px solid var(--ink)}
.col-l{text-align:center;font-size:var(--fs-micro);color:var(--muted)}
.table-view{border:0;padding:10px 0 6px}
.table-view summary{font-size:var(--fs-ui);font-family:var(--mono)}
.table-view table{margin-top:8px;font-size:var(--fs-ui)}
.table-view:last-of-type{border-bottom:0}
.meter{height:8px;background:var(--hair)}
.meter span{display:block;height:100%;background:var(--accent);outline:1px solid var(--ink)}
@media (max-width:600px){
  .bar-row{grid-template-columns:1fr 44px;row-gap:4px}
  .bar-l{grid-column:1/-1}
}
.dist-t span.zero{outline:0}

/* css/components/calendar.css */
/* Calendar and availability grid. */
.slots{display:grid;gap:12px}
.slot-day{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.cal{padding:0 12px 12px}
.avail-grid{display:grid;grid-template-columns:40px repeat(13,1fr);gap:3px;align-items:center;overflow-x:auto}
.av-c{height:26px;border:1px solid var(--hair);background:var(--paper);padding:0}
.av-c[aria-pressed="true"]{background:var(--accent);border-color:var(--on-accent)}
@media (max-width:600px){
  .slot-day{grid-template-columns:1fr}
}
@media (max-width: 960px), (pointer: coarse){
  .av-c{min-height:40px}
}
@media (max-width:760px){
  /* ---------- Calendar weekly hours (mentors only see this grid): 44 px cells, the grid scrolls sideways on phones ---------- */
  .avail-grid{grid-template-columns:48px repeat(13,44px);overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .avail-grid .av-c,.av-c{min-height:44px;height:44px}
  .avail-grid > span.small{position:sticky;left:0;z-index:1;background:var(--paper);align-self:stretch;display:flex;align-items:center}
}

/* css/components/upload.css */
/* Upload: dropzone and upload queue. */
/* ---------- Uploads: drop zone, queue rows with progress, one-file slots (wizard, new version, swap) ---------- */
.dropzone{border:1px dashed var(--hair-strong);padding:24px 18px;text-align:center;display:grid;gap:6px;justify-items:center;background:var(--paper);cursor:pointer;position:relative;transition:background-color .15s,border-color .15s;min-height:120px;align-content:center}
.dropzone.big{padding:40px 18px}
.dropzone.hot{background:var(--accent);border:2px dashed var(--on-accent);color:var(--on-accent)}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0}
.dropzone .dz-ico{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hair-strong);background:var(--accent);margin-bottom:4px}
.dropzone .dz-ico::before{content:"";width:12px;height:12px;border-left:2px solid var(--on-accent);border-top:2px solid var(--on-accent);transform:translateY(3px) rotate(45deg)}
.dropzone b u{text-underline-offset:3px}
.dropzone .dz-tap{display:none}
@media (pointer:coarse){
  .dropzone .dz-fine{display:none}
  .dropzone .dz-tap{display:block}
}
.dropzone:focus-within{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
  .dropzone:hover{border-color:var(--ink);border-style:solid;background:color-mix(in srgb,var(--mint) 60%,var(--paper))}
}
.dropzone .dz-drop{display:none;font-family:var(--mono);font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em}
.dropzone.hot .muted{color:var(--on-accent)}
.dropzone.hot .dz-drop{display:block}
.dropzone.hot .dz-ico{background:var(--on-accent)}
.dropzone.hot .dz-ico::before{border-color:var(--accent)}
.dropzone.off{opacity:.5;pointer-events:none}
.upq{display:grid;gap:8px;margin:12px 0 4px}
.upslot:empty{display:none}
.upslot{margin-top:4px}
.upi{border:1px solid var(--hair-strong);background:var(--paper);padding:10px 12px;display:grid;gap:8px;min-width:0}
.upi-top{display:flex;align-items:center;gap:10px;min-width:0}
.upi-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.upi-pct{font-size:var(--fs-caption);font-variant-numeric:tabular-nums;flex:0 0 auto}
.upi-ico{width:10px;height:10px;flex:0 0 10px;border:1px solid var(--ink);background:transparent}
.upi[data-st="read"] .upi-ico,.upi[data-st="up"] .upi-ico{background:var(--accent);animation:upblink 1s steps(2) infinite}
.upi[data-st="done"] .upi-ico{background:var(--ok);border-color:var(--ok)}
.upi[data-st="err"] .upi-ico{background:var(--bad);border-color:var(--bad)}
.upi[data-st="cancel"] .upi-ico{background:var(--hair)}
@keyframes upblink{50%{opacity:.35}}
.upbar{position:relative;height:8px;background:var(--mint);border:1px solid var(--hair-strong);overflow:hidden}
.upbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);transition:width .2s linear}
.upbar.ind i{width:30%!important;animation:upind 1.1s ease-in-out infinite}
@keyframes upind{from{left:-30%}to{left:100%}}
.upi-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.upi-msg{flex:1 1 200px;min-width:0;color:var(--muted);font-variant-numeric:tabular-nums}
.upi[data-st="err"] .upi-msg{color:var(--bad)}
.upi[data-st="done"] .upi-msg{color:var(--ink)}
.upi-acts{display:flex;gap:6px;align-items:center;flex:0 0 auto;margin-left:auto}
.upi-acts .btn{min-height:44px}
.upx{width:44px;height:44px;border:1px solid var(--hair-strong);background:transparent;color:var(--ink);font-size:var(--fs-lead);line-height:1;cursor:pointer;padding:0}
.upx:focus-visible,.upi-acts .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.upi-warn{margin:0;color:var(--warn);background:var(--warn-bg);padding:6px 10px;border-left:2px solid var(--warn)}
@media (max-width:600px){
  .upi-acts{width:100%}
  .upi-acts .btn{flex:1 1 0;min-height:44px}
  .upx{width:44px;height:44px;flex:0 0 44px}
}
@media (prefers-reduced-motion:reduce){
  .upbar.ind i,.upi-ico{animation:none!important}
}
.too-short{color:var(--warn)}
.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}

/* css/components/stepper.css */
/* Steppers: request status steps, wizard steps. */
.track-steps{display:grid;grid-template-columns:repeat(5,1fr)}
.track-steps span{padding:10px 12px 0;font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);border-top:3px solid var(--hair)}
.track-steps span.on{color:var(--ink);border-top-color:var(--ink)}
.steps-ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
.wsteps{display:flex;border:1px solid var(--hair-strong);background:var(--paper);overflow-x:auto}
.wsteps span{flex:1;padding:11px 14px;font-family:var(--mono);font-size:var(--fs-caption);border-right:1px solid var(--hair);white-space:nowrap;color:var(--muted)}
.wsteps span:last-child{border-right:0}
.wsteps span.on{color:var(--on-accent);background:var(--accent)}
.wsteps span.done{color:var(--ink)}
@media (max-width:600px){
  .track-steps span{font-size:9px;padding-inline:3px}
}
.stepper-wrap{padding:18px 14px 4px}
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stepper li{position:relative;display:grid;justify-items:center;gap:8px;min-width:0}
.stepper li::before{content:"";position:absolute;top:10px;right:50%;width:100%;height:2px;background:var(--hair-strong);z-index:0}
.stepper li:first-child::before{display:none}
.stepper li.done::before,.stepper li.cur::before{background:var(--ink)}
.stepper .sdot{position:relative;z-index:1;width:22px;height:22px;border-radius:var(--r-round);border:2px solid var(--hair-strong);background:var(--paper);display:grid;place-items:center;box-sizing:border-box}
.stepper li.done .sdot{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.stepper li.done .sdot svg{width:12px;height:12px}
.stepper li.cur .sdot{background:var(--accent);border-color:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
.stepper .slbl{font-family:var(--mono);font-size:var(--fs-caption);line-height:1.2;white-space:nowrap;color:var(--muted);text-align:center}
.stepper li.done .slbl{color:var(--ink)}
.stepper li.cur .slbl{color:var(--ink);font-weight:600}
.stepper-m{display:none;margin:12px 0 0;font-size:var(--fs-caption);letter-spacing:.02em;color:var(--ink);text-align:center}
.stepper-closed{display:flex;align-items:center;gap:10px;margin:0;padding:14px 16px 4px;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.02em;color:var(--muted)}
.stepper-closed .sdot{width:10px;height:10px;border-radius:var(--r-round);background:var(--hair-strong);flex:0 0 10px}
@media (max-width:600px){
  /* on a phone: circles and line only, then one line naming where it is */
  .stepper .slbl{display:none}
  .stepper li{gap:0}
  .stepper-m{display:block}
}
.wsteps-m{display:none}
@media (max-width:600px){
  /* one readable line plus a segment bar instead of the cut-off step bar (P-13) */
  .wsteps{display:none}
  .wsteps-m{display:grid;gap:8px;font-size:var(--fs-caption)}
  .wseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
  .wseg i{height:4px;background:var(--hair)}
  .wseg i.on{background:var(--ink)}
}

/* css/components/mentor-card.css */
/* Mentor cards, record sleeves, directory grid. */
/* mentor cards: equal height per row, meta line and price row pinned to the bottom, badge line always reserved */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:24px;border-left:0;border-top:0;padding:1px 0 0 1px}
.mcard{border-right:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong);background:var(--paper);display:grid;grid-template-rows:auto 1fr auto;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s;border:1px solid var(--hair-strong)}
.mcard .portrait{aspect-ratio:16/10;background:var(--accent);position:relative;overflow:hidden;isolation:isolate}
.mcard .badge{position:absolute;left:12px;top:12px;font-family:var(--mono);font-size:var(--fs-micro);background:var(--on-accent);color:var(--accent);padding:3px 8px;z-index:3}
.fav{position:absolute;background:transparent;border:0;color:var(--on-accent);line-height:1;z-index:3;width:44px;height:44px;right:4px;top:2px;padding:0;display:grid;place-items:center;font-size:var(--fs-h4);cursor:pointer}
.mcard .body{padding:18px;align-content:start;display:flex;flex-direction:column;gap:9px}
.mcard h3{font-size:var(--fs-h3)}
.mcard .foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hair)}
.mcard .foot div{padding:10px 12px;border-right:1px solid var(--hair);font-size:var(--fs-micro);font-family:var(--mono);text-transform:uppercase;display:flex;flex-direction:column;justify-content:space-between;gap:4px;line-height:1.3}
.mcard .foot div:last-child{border-right:0}
.mcard .foot b{display:block;font-weight:500;text-transform:none;margin-top:auto;font-size:var(--fs-body)}
@media (hover:hover){
  .mcard:hover{transform:translateY(-4px);box-shadow:8px 10px 0 var(--on-accent);position:relative;z-index:2}
  .mcard:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
}
/* record sleeves */
.sleeve-wrap{position:absolute;inset:0;display:grid;place-items:center}
.sleeve{position:relative;z-index:2;height:78%;aspect-ratio:1;background:var(--paper);border:1px solid var(--on-accent);display:grid;align-content:space-between;padding:6% 7%;color:var(--ink);transform:translateX(-18%);box-shadow:4px 4px 0 rgba(21,20,14,.15)}
.sleeve b{font-size:clamp(18px,1.8vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1}
.sleeve .mono{letter-spacing:.04em;text-transform:uppercase;font-size:var(--fs-micro)}
.sleeve .sl-city{opacity:.6}
.record{position:absolute;z-index:1;height:74%;aspect-ratio:1;border-radius:var(--r-round);background:repeating-radial-gradient(circle,#1b1a14 0 2px,#26251d 2px 3px);display:grid;place-items:center;transform:translateX(12%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rlabel{width:36%;aspect-ratio:1;border-radius:var(--r-round);background:var(--accent);border:1px solid var(--on-accent);display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-micro);color:var(--on-accent);position:relative}
.rlabel::after{content:"";position:absolute;width:6px;height:6px;border-radius:var(--r-round);background:var(--ground);border:1px solid var(--on-accent)}
.rlabel span{transform:translateY(-10px)}
.sleeve-hero{position:relative;aspect-ratio:16/9;width:100%}
.sleeve-hero .sleeve{height:88%}
.sleeve-hero .record{height:84%;inset:0;margin:auto}
/* sleeve with an artist photo as the cover */
.sleeve.photo{padding:0;overflow:hidden;background:var(--on-accent);display:block;position:relative}
.sleeve.photo img{object-fit:cover;display:block;filter:grayscale(.15) contrast(1.05);position:absolute;inset:0;width:100%;height:100%}
.sleeve.photo .sl-tag{position:absolute;left:0;right:0;bottom:0;background:var(--accent);color:var(--on-accent);padding:4px 8px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-micro)}
/* mentor card: the save button sits beside the link, not inside it (valid HTML, one tab stop each) */
/* lead: every card fills its grid row, so the pinned meta (badges, answers line, prices) lines up across the row */
.mcard-wrap{position:relative;margin:-1px 0 0 -1px;display:flex}
.mcard-wrap > .mcard{height:100%;flex:1;display:flex;flex-direction:column}
@media (max-width:600px){
  .mgrid{grid-template-columns:1fr}
}
@media (hover:hover){
  .mcard:hover .record{transform:translateX(38%) rotate(200deg);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
}
.mgrid > .empty{border:1px solid var(--hair-strong);margin:-1px 0 0 -1px;display:grid;gap:12px;justify-items:start;padding:24px}
.mcard .mc-meta{margin-top:auto;display:grid;gap:9px}
.mcard .mc-badges{align-items:center;height:24px;min-height:24px;overflow:hidden;flex-wrap:nowrap}
@media (max-width:600px){
  /* phone: a single card per row, so no reserved badge space */
  .mcard .mc-badges:empty{display:none}
  .mcard .mc-track{min-height:0}
}
.mcard .mc-track{min-height:2.6em;display:flex;align-items:flex-end;flex-wrap:wrap;align-content:flex-end;column-gap:.3em}
.mcard-wrap > .mcard > .body{flex:1}
/* M-25: mentor card. Name once (not on the sleeve), readable sleeve text, 44px save button */
.mcard .sleeve b{display:none}
.mcard .sleeve{align-content:space-between}
/* M-17: directory result count */
.m-count{font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;font-weight:400;margin-top:18px;line-height:1.3}
.m-count + .mgrid{margin-top:10px}
@media (max-width:600px){
  /* M-19: shorter home on phones. Mentors scroll sideways; format cards show name, price and one line */
  .mgrid.mgrid-home{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78vw;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:1px var(--gutter-r) 8px 1px;margin-right:calc(-1 * var(--gutter-r));overscroll-behavior-x:contain;scrollbar-width:none}
  .mgrid.mgrid-home::-webkit-scrollbar{display:none}
  .mgrid.mgrid-home > .mcard-wrap{scroll-snap-align:start;margin:0}
  .mgrid.mgrid-home > .empty{grid-column:auto}
}
.profile .sleeve-hero{max-width:360px}
@media (max-width:960px){
  .profile .sleeve-hero{max-width:260px}
}
/* v3.3.14: every sleeve the same size, whatever the genre text (Alex: Tomo Arc / Velvet Loop / Olmo Reyes sleeves were bigger) */
.mcard .sleeve{height:78%;aspect-ratio:1;min-height:0;min-width:0;overflow:hidden}
.mcard .sleeve .mono{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:break-word}
.pick-bar{font-size:var(--fs-small)}

/* css/components/player.css */
/* Players: radio bar, waveform player, pins and notes. */
/* radio bar */
.radio{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-popover);background:var(--dark);color:var(--on-dark);border-top:2px solid var(--accent);padding-bottom:env(safe-area-inset-bottom,0px)}
.radio .wrap{display:flex;align-items:center;gap:14px;height:var(--player-h);max-width:none}
.radio .pbtn{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;padding:0;box-sizing:border-box;overflow:hidden}
.radio .pbtn svg,.pbtn svg{width:15px;height:15px;fill:currentColor}
.radio .now{flex:0 1 auto;min-width:0;display:grid;line-height:1.25}
.radio .now small{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.radio .now b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .viz{display:flex;gap:3px;align-items:flex-end;height:22px}
.radio .viz i{width:3px;background:var(--accent);height:18%}
.radio.on .viz i{animation:viz .45s ease-in-out infinite alternate}
.radio .viz i:nth-child(2){animation-delay:-.15s}
.radio .viz i:nth-child(3){animation-delay:-.3s}
.radio .viz i:nth-child(4){animation-delay:-.05s}
@keyframes viz{from{height:15%}to{height:100%}}
/* radio bar volume: dark bar */
.radio input[type=range]{width:110px;accent-color:var(--accent);--fill:var(--accent);--rest:var(--on-dark-soft);--thumb:var(--accent);--thumb-b:var(--accent);height:32px}
/* waveform player (used in app) */
/* Waveform player (SS.audio.player). Extends the base .player rules in base.css.
   States live on .player[data-state]: preview · idle · loading · playing · buffering · paused · error. */
.player{position:relative;border:1px solid var(--hair-strong);background:var(--paper)}
.player-top{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--hair);flex-wrap:nowrap;min-width:0}
.pbtn{width:42px;height:42px;border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:0 0 42px;padding:0}
.wave{position:relative;height:118px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.wave canvas{width:100%;height:100%;display:block}
.wave .head{position:absolute;top:0;bottom:0;width:1px;background:var(--ink);pointer-events:none}
.pin{position:absolute;top:4px;transform:translateX(-50%);display:grid;justify-items:center;border:0;background:transparent;padding:0;z-index:2}
.pin i{font-style:normal;width:22px;height:22px;display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-micro);background:var(--accent);color:var(--on-accent);outline:1px solid var(--on-accent)}
.pin::after{content:"";width:1px;height:82px;background:var(--ink)}
.pin.on i{background:var(--ink);color:var(--paper)}
.time{font-family:var(--mono);font-size:var(--fs-ui)}
.note{display:grid;grid-template-columns:62px 1fr auto;gap:14px;padding:13px 16px;border-top:1px solid var(--hair);align-items:start}
.note .t{font-family:var(--mono);background:none;border:0;padding:0;color:var(--ink);text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.note .t.static{text-decoration:none;cursor:default}
.note.on{background:var(--mint)}
.note .cat{font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.04em}
/* live site without the radio feature: no bar, no space reserved for it */
.no-radio{--player-h:0px}
.no-radio #rbar,.radio-page #rbar{display:none}
.radio-page{--player-h:0px}
.mini{width:120px;height:34px;flex:0 0 120px}
.track-player{flex-basis:100%}
.track-player:empty{display:none}
@media (max-width:600px){
  .note{grid-template-columns:54px 1fr}
  .note > :nth-child(3){grid-column:2}
  .radio input[type=range]{display:none}
  .mini{width:84px;flex-basis:84px}
  .wave{height:100px}
}
/* wizard: Last look rows with Edit, a disabled round-one version, 44 px chips on touch (P-17, P-19, P-26) */
.note.ll{grid-template-columns:110px minmax(0,1fr) auto;align-items:start}
.note.ll > .ll-edit{grid-column:3;grid-row:1;align-self:start}
@media (max-width:600px){
  .note.ll{grid-template-columns:78px minmax(0,1fr) auto}
}
.radio input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;box-shadow:none}
.radio input[type=range]::-moz-range-thumb{width:12px;height:12px;box-shadow:none}
/* play / pause: a 48px square tap target */
/* Play and pause share one box everywhere: fixed square, icons centred on the same 16px grid (radio bar included) */
.player .pbtn{position:relative;width:48px;height:48px;flex:0 0 48px;border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .12s ease;box-sizing:border-box;overflow:hidden}
.player .pbtn svg{fill:currentColor;grid-area:1/1;width:16px;height:16px;flex:none;display:block}
.player .pbtn .i-pause{display:none}
.player .pbtn .spin{display:none;grid-area:1/1;width:20px;height:20px;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--r-round);animation:pspin .8s linear infinite}
.player[data-state="playing"] .pbtn .i-play{display:none}
.player[data-state="playing"] .pbtn .i-pause{display:block}
.player[data-state="loading"] .pbtn svg,.player[data-state="buffering"] .pbtn svg{display:none}
.player[data-state="loading"] .pbtn .spin,.player[data-state="buffering"] .pbtn .spin{display:block}
@keyframes pspin{to{transform:rotate(360deg)}}
.player .pbtn:active:not(:disabled){transform:scale(.95)}
@media (hover:hover){
  .player .pbtn:not(:disabled):hover{background:var(--on-accent);color:var(--accent)}
}
.player .pbtn:focus-visible,.player .pmute:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.player[data-state="preview"] .pbtn{background:transparent;color:var(--muted);border:1px dashed var(--hair-strong);cursor:not-allowed}
.player[data-state="error"] .pbtn{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
/* title + time */
.pmeta{display:grid;gap:2px;min-width:0;flex:1 1 auto}
.plabel{font-size:var(--fs-small);line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .time{font-family:var(--mono);font-size:var(--fs-caption);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.player .time [data-cur]{color:var(--ink)}
/* state chip: Loading… / Buffering… / Preview only */
.pstate{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--hair-strong);padding:3px 8px;color:var(--ink);flex:0 0 auto}
.pstate:empty{display:none}
.player[data-state="preview"] .pstate{border-style:dashed;color:var(--muted)}
/* volume (desktop only; not rendered where the page cannot set it) */
.pvol{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.pmute{width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);padding:0;cursor:pointer}
.pmute svg{width:16px;height:16px;fill:currentColor}
.pvol input[type=range]{width:88px;accent-color:var(--ink);margin:0;padding:0;border:0;background:transparent;min-height:0;height:20px}
@media (pointer:coarse){
  .pvol{display:none}
}
/* waveform: click or drag to scrub. pan-y keeps vertical page scrolling on phones */
.player .wave{position:relative;height:118px;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.player .wave:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.player .wave .head{position:absolute;top:0;bottom:14px;width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}
.player .wave .head::before{content:"";position:absolute;top:0;left:50%;width:10px;height:10px;transform:translate(-50%,-1px);background:var(--accent);border:1px solid var(--on-accent);opacity:0;transition:opacity .15s}
.player.scrub .wave .head::before,.player .wave:focus-visible .head::before{opacity:1}
@media (hover:hover){
  .player .wave:hover .head::before{opacity:1}
}
.player.scrub .wave{cursor:grabbing}
.hovt{position:absolute;top:6px;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-micro);line-height:1;background:var(--ink);color:var(--paper);padding:3px 5px;pointer-events:none;z-index:3;white-space:nowrap}
/* note pins: a 40px invisible hit area around each marker, so they are easy to tap */
.player .pin{position:absolute;top:4px;transform:translateX(-50%);display:grid;justify-items:center;border:0;background:transparent;padding:0;z-index:2;cursor:pointer}
.player .pin::before{content:"";position:absolute;left:50%;top:-4px;width:40px;height:40px;transform:translateX(-50%)}
.player .pin i{width:24px;height:24px;font-size:var(--fs-micro)}
.player .pin::after{height:78px}
.player .pin:focus-visible{outline:none}
.player .pin:focus-visible i{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
  .player .pin:hover i{background:var(--ink);color:var(--paper)}
}
/* error */
.perr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-top:1px solid var(--hair);background:var(--bad-bg);color:var(--bad);font-size:var(--fs-small)}
.perr .btn{color:var(--ink)}
.perr[hidden]{display:none}
@media (max-width:600px){
  .player-top{gap:10px;padding:8px 10px}
  .player .wave{height:100px}
  .player .pin::after{height:62px}
}
@media (prefers-reduced-motion:reduce){
  .player .pbtn .spin{animation-duration:2s}
}
.radio .pbtn svg{width:16px;height:16px;flex:none;display:block}
@media (max-width:480px){
  /* narrow screens: the title needs the room more than a volume slider (phones have hardware buttons) */
  .pvol{display:none}
}

/* css/components/chat.css */
/* Chat: message thread, composer, inbox and thread list. */
/* chat */
/* ---------- widget frame ---------- */
.chat{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:420px;max-height:70dvh;background:var(--ground)}
.chat.compact{min-height:300px;max-height:480px;height:480px}
.chat-log{overflow:auto;gap:10px;align-content:start;position:relative;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;padding:8px 16px 14px;display:block;min-height:0;scroll-padding-bottom:16px}
.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--hair);background:var(--paper)}
.composer input{flex:1;min-width:0}
.composer .att{width:auto;max-width:180px;font-size:var(--fs-small)}
.thread-box{margin-top:10px;border-left:2px solid var(--accent-deep);padding:4px 0 4px 14px;display:grid;gap:10px}
.inbox{display:grid;grid-template-columns:320px minmax(0,1fr);border:1px solid var(--hair-strong);background:var(--paper);min-height:560px}
.threads{border-right:1px solid var(--hair-strong);overflow:auto}
.threads-head{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--paper);z-index:1}
.threads-head input{flex:1;min-width:0}
.thread{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;position:relative}
.thread.on{background:var(--accent);color:var(--on-accent)}
.thread.on .muted{color:var(--on-accent)}
.thread-view{display:grid;grid-template-rows:auto 1fr;min-width:0}
.thread-top{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--hair-strong);background:var(--paper);min-width:0}
.thread-view .chat{height:100%;min-height:0;max-height:none}
.only-m{display:none}
@media (max-width:960px){
  .inbox{grid-template-columns:1fr}
  .inbox.has-cur .threads{display:none}
  .inbox:not(.has-cur) .thread-view{display:none}
  .threads{border-right:0}
  .only-m{display:inline-flex}
}
@media (max-width:600px){
  .composer .att{max-width:88px;font-size:var(--fs-ui);padding-right:26px}
  /* Messages, open conversation on a phone: Back, the name and Send a track each wrapped onto two lines */
  .thread-top{padding:8px 12px;gap:10px}
  .thread-top .btn{white-space:nowrap}
  .thread-top #thName{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thread-top > .sp{display:none}
  .thread-top > a.small{display:none}
  .inbox:not(.has-cur){min-height:0}
}
/* chat components (wave 2, one owner each): the chat widget (Messages page + request pages), the inbox list, the settings email switch.
   Loads after app.css and overrides its older chat rules. */
.chat-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chat-log:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.chat-msgs{display:flex;flex-direction:column;min-height:100%;justify-content:flex-end}
/* ---------- separators ---------- */
.chat-day{display:flex;align-items:center;gap:12px;margin:18px 0 6px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chat-unread{display:flex;align-items:center;gap:12px;margin:18px 0 6px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.chat-day::before,.chat-day::after,.chat-unread::before,.chat-unread::after{content:"";flex:1;height:1px;background:var(--hair)}
.chat-day span{padding:3px 10px;border:1px solid var(--hair);background:var(--paper)}
.chat-unread::before,.chat-unread::after{background:var(--ink);height:2px}
.chat-unread span{background:var(--accent);color:var(--on-accent);padding:3px 10px;border:1px solid var(--on-accent)}
/* ---------- system events: a centred line, not a bubble ---------- */
.chat-sys{align-self:center;max-width:min(92%,520px);margin:12px 0 4px;text-align:center;display:grid;gap:2px;justify-items:center}
.chat-sys p{margin:0;font-size:var(--fs-ui);line-height:1.45;color:var(--ink-soft);padding:6px 12px;border:1px dashed var(--hair-strong);background:var(--paper)}
.chat-sys time{color:var(--muted);margin-left:6px;white-space:nowrap;font-family:var(--display);font-size:var(--fs-caption)}
.chat-sys .cm-link{font-size:var(--fs-caption)}
/* ---------- message rows ---------- */
.cm{display:flex;gap:8px;align-items:flex-start;max-width:100%}
.cm.start{margin-top:12px}
.cm.cont{margin-top:3px}
.cm.me{justify-content:flex-end}
.cm-av{flex:0 0 30px;width:30px;min-height:1px}
.cm-col{display:flex;flex-direction:column;min-width:0;max-width:min(76%,560px)}
.cm.me .cm-col{align-items:flex-end}
.cm.them .cm-col{align-items:flex-start}
.cm-name{color:var(--muted);margin:0 0 3px 2px;font-family:var(--display);font-size:var(--fs-ui);font-weight:600;letter-spacing:0}
.cm-b{position:relative;display:grid;gap:8px;min-width:0;max-width:100%;padding:8px 12px;border:1px solid var(--hair-strong);background:var(--paper);color:var(--ink);border-radius:14px;cursor:default}
.cm.them.start .cm-b{border-top-left-radius:3px}
.cm.me .cm-b{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.cm.me.start .cm-b{border-top-right-radius:3px}
.cm-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font-size:var(--fs-body-s);line-height:1.45}
.cm-text a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cm-link{color:inherit;text-decoration:underline;text-underline-offset:2px;font-size:var(--fs-ui);font-family:var(--mono)}
.cm.pending .cm-b{opacity:.62}
/* failed send: a red "!" beside the bubble, Retry as a real target, and a tap on the bubble retries too */
.cm.failed .cm-b{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad);cursor:pointer}
/* time + state: shown on hover, on focus, on tap, and always while sending, failed, or for your newest message */
.cm-meta{display:block;white-space:normal;color:var(--muted);line-height:1.2;padding:0 4px;max-height:0;opacity:0;overflow:hidden;transition:opacity .12s,max-height .12s,margin .12s;font-family:var(--display);font-size:var(--fs-caption)}
.cm.show-meta .cm-meta{max-height:48px;opacity:1;margin-top:3px}
.cm:focus-within .cm-meta{max-height:48px;opacity:1;margin-top:3px}
.cm.pending .cm-meta{max-height:48px;opacity:1;margin-top:3px}
.cm.failed .cm-meta{opacity:1;margin-top:3px;color:var(--bad);max-height:60px}
.cm.latest .cm-meta{max-height:48px;opacity:1;margin-top:3px}
@media (hover:hover){
  .cm:hover .cm-meta{max-height:48px;opacity:1;margin-top:3px}
}
.cm-meta button{font:inherit;font-size:var(--fs-micro);background:none;border:0;padding:6px 4px;margin:-6px 0;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:28px}
.cm-meta button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* track attachment: a card that turns into the player */
.cm-track{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 10px 6px 6px;border:1px solid currentColor;background:var(--paper);color:var(--ink);border-radius:10px}
.cm-play{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-round);border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent);cursor:pointer;padding:0}
.cm.me .cm-play{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cm-play svg{width:13px;height:13px;fill:currentColor;margin-left:2px}
.cm-play:disabled{opacity:.5;cursor:progress}
.cm-play:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cm-track-t{display:grid;min-width:0;line-height:1.25}
.cm-track-t b{font-size:var(--fs-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-track-t span{font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted)}
.cm-player:empty{display:none}
.cm-player{width:min(480px,62vw);max-width:100%;background:var(--paper);color:var(--ink);border:1px solid var(--hair);padding:8px;border-radius:8px}
.cm-player .player{margin:0}
/* ---------- empty conversation ---------- */
.chat-empty{margin:auto;display:grid;justify-items:center;gap:8px;text-align:center;padding:36px 16px;max-width:360px}
.chat-empty .av{font-size:var(--fs-body-s)}
.chat-empty p{margin:0}
/* ---------- "New messages" pill ---------- */
.chat-pill{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--cmp-h,68px) + 10px);z-index:3;font-family:var(--mono);font-size:var(--fs-caption);padding:8px 14px;border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill);box-shadow:0 4px 16px rgba(0,0,0,.18);cursor:pointer;white-space:nowrap}
.chat-pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* ---------- composer: box and Send share one height; the box grows to five lines ---------- */
/* attach: a 44px paperclip button; the native track picker sits invisibly on top of it, so a tap opens it on every device */
.chat-composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--hair-strong);background:var(--paper);flex-wrap:wrap}
.chat-input{flex:1;min-width:0;width:auto;height:44px;min-height:44px;max-height:calc(5 * 1.35em + 22px);resize:none;overflow-y:hidden;line-height:1.35;padding:10px 13px;display:block}
.chat-send{flex:0 0 auto;height:44px;min-height:44px;padding:0 18px}
.chat-att-w{position:relative;flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair-strong);background:var(--paper);color:var(--ink);cursor:pointer}
.chat-att-w svg{width:20px;height:20px}
.chat-att-w.on{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.chat-att-w:has(select:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
  .chat-att-w:hover{background:var(--mint)}
  .chat-att-w.on:hover{background:var(--accent-deep)}
}
.chat-composer .chat-att{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer;padding:0;border:0;font-size:var(--fs-body)}
.chat-attached{flex:1 0 100%;display:flex;align-items:center;gap:8px;min-width:0;padding:4px 4px 4px 10px;border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent);font-size:var(--fs-small)}
.chat-attached svg{width:14px;height:14px;fill:currentColor;flex:0 0 14px}
.chat-attached-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.chat-attached-x{flex:0 0 36px;width:36px;height:36px;border:0;background:none;color:inherit;font-size:var(--fs-h5);line-height:1;cursor:pointer}
.chat-attached-x:focus-visible{outline:2px solid var(--on-accent);outline-offset:-2px}
/* ---------- inbox: list + conversation ---------- */
.msgs-page .inbox{min-height:0;grid-template-rows:minmax(0,1fr)}
.msgs-page .threads{display:flex;flex-direction:column;min-height:0;overflow:auto}
.msgs-page .thread-view{grid-template-rows:auto minmax(0,1fr);min-height:0}
#thList{display:block}
.thread:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  .thread:not(.on):hover{background:var(--mint)}
}
.th-main{display:grid;gap:2px;min-width:0;flex:1}
.th-line{display:flex;align-items:baseline;gap:8px;min-width:0}
.th-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.th-when{flex:0 0 auto;color:var(--muted);font-family:var(--display);font-size:var(--fs-caption)}
.th-prev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-small);color:var(--muted)}
.thread .nb{flex:0 0 auto;border-radius:var(--r-pill);align-self:center}
.thread.unread .th-prev{color:var(--ink);font-weight:500}
.thread.unread .th-when{color:var(--ink)}
.thread.on .th-prev,.thread.on .th-when{color:var(--on-accent)}
.th-who{display:grid;min-width:0;line-height:1.25;flex:1}
.th-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-who .small{font-family:var(--display);font-size:var(--fs-caption)}
.thread-top .sp{flex:1}
.thread-back{display:none;width:40px;height:40px;flex:0 0 40px;place-items:center;border:1px solid var(--hair-strong);text-decoration:none;color:var(--ink);font-size:var(--fs-lead);margin-left:-6px}
.thread-back:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .cm-meta{transition:none}
}
@media (max-width:960px){
  /* ---------- tablet + phone: list, then conversation, then back ---------- */
  .thread-back{display:grid;width:44px;height:44px;flex:0 0 44px}
  .msgs-page.has-cur > .page-head{display:none}
  .msgs-page.has-cur .inbox{border-left:0;border-right:0;border-top:0}
  .thread-top{position:relative;z-index:2}
}
@media (max-width:600px){
  .chat-log{padding:6px 10px 12px}
  .cm-col{max-width:84%}
  .cm.me .cm-col{max-width:86%}
  .cm-av{flex-basis:26px;width:26px}
  .cm-av .av{width:26px!important;height:26px!important;flex-basis:26px!important;font-size:10px}
  .chat-composer{padding:8px;gap:6px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  .chat-send{padding:0 14px}
  .thread-top .hide-s{display:none}
  .thread-top .btn.sm{padding:0 10px}
  .thread{padding:12px}
  .chat.compact{height:440px}
}
/* ---------- fix round 2026-09-25 (audit 03): times, attach sheet, retry, one header on phone ---------- */
/* a time line when an hour or more passes between two messages */
.chat-time{align-self:center;margin:14px 0 2px;font-size:var(--fs-caption);color:var(--muted)}
/* the time sits under the last bubble of every group, both sides; the rest still show on tap or hover */
.cm:not(:has(+ .cm.cont)) .cm-meta{max-height:48px;opacity:1;margin-top:3px}
.cm.me.failed .cm-b::before{content:"!";position:absolute;left:-28px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--r-round);background:var(--bad);color:#fff;font:600 13px/20px var(--display);text-align:center}
.cm-meta .cm-retry{position:relative;display:inline-flex;align-items:center;min-height:32px;margin:0 2px;padding:0 12px;border:1px solid var(--bad);border-radius:var(--r-pill);background:var(--paper);color:var(--bad);text-decoration:none;font-family:var(--display);font-size:var(--fs-ui);font-weight:600}
.cm-meta .cm-retry::after{content:"";position:absolute;inset:-6px -2px}
.cm-meta .cm-drop{font-family:var(--display);font-size:var(--fs-ui)}
/* track card: "v1 · 0:40" under the title */
.cm-track-t .cm-track-m{font-family:var(--display);font-size:var(--fs-caption)}
.cm-track-t .cm-track-m:empty{display:none}
.att-list{display:grid;max-height:56dvh;overflow:auto;border:1px solid var(--hair-strong);margin:4px 0 12px}
.att-row{display:grid;gap:2px;min-height:56px;align-content:center;text-align:left;padding:8px 14px;border:0;border-bottom:1px solid var(--hair);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}
.att-row:last-child{border-bottom:0}
.att-row b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-row span{font-size:var(--fs-ui);color:var(--muted)}
.att-row.on{background:var(--accent);color:var(--on-accent)}
.att-row.on span{color:var(--on-accent)}
.att-row:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  .att-row:not(.on):hover{background:var(--mint)}
}
/* "Write to a mentor" picker rows */
.nm-row{width:100%;text-align:left;background:var(--paper);border:0;border-bottom:1px solid var(--hair);min-height:56px;cursor:pointer;color:inherit;font:inherit;display:flex;justify-content:space-between;align-items:center;gap:12px}
.nm-row:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  .nm-row:hover{background:var(--mint)}
}
@media (max-width:960px){
  .msgs-page.has-cur .thread-top{padding-top:max(8px,env(safe-area-inset-top,0px))}
}
/* reply thread */
.thread-box .replies{display:grid;gap:12px}

/* v3.3.13: files in chat, and the locked composer (producer → artist before paying) */
.chat-file{position:relative;flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair-strong);background:var(--paper);color:var(--ink);cursor:pointer}
.chat-file svg{width:20px;height:20px}
.chat-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.chat-file:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.cm-file{display:flex;gap:10px;align-items:center;text-align:left;padding:8px 10px;margin-top:4px;border:1px solid var(--hair-strong);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;max-width:100%}
.cm-file svg{width:22px;height:22px;flex:0 0 22px}
.cm-file span{display:flex;flex-direction:column;min-width:0}
.cm-file b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-locked{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--hair);background:var(--paper)}
.chat-locked p{margin:0;max-width:60ch}

/* css/components/bell.css */
/* Notifications: bell button and panel. */
/* Notifications bell: unread count on the bell, dropdown panel under it on desktop, full-height sheet on phones.
   Markup and behaviour live in js/app/shell.js (openNotifications, renderPanel). */
/* the count on the bell (1 to 9, then 9+) */
.bell-btn{overflow:visible}
.bell-count{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;display:grid;place-items:center;background:var(--bad);color:var(--paper);font:500 11px/1 var(--mono);letter-spacing:0;border:2px solid var(--ground);box-sizing:content-box;pointer-events:none}
.bell-btn[aria-expanded="true"]{background:var(--mint);border-color:var(--hair-strong)}
/* visually hidden text for screen readers (live count, "Unread." prefix, loading) */
.nt-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* panel */
.nt-panel{position:fixed;z-index:var(--z-popover);width:min(400px,calc(100vw - 16px));max-height:min(560px,var(--nt-max,560px));display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:1px solid var(--hair-strong);box-shadow:0 18px 40px -12px rgba(0,0,0,.28);opacity:0;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease}
.nt-panel.in{opacity:1;transform:none}
.nt-panel:focus{outline:none}
.nt-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--hair);flex:0 0 auto}
.nt-head .sp{flex:1}
.nt-title{font:600 16px/1.2 var(--display);margin:0}
#ntMarkAll{white-space:nowrap}
#ntMarkAll:disabled{opacity:.45;cursor:default;text-decoration:none}
.nt-close{display:none}
.nt-list{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.nt-group + .nt-group{border-top:1px solid var(--hair)}
.nt-gh{margin:0;padding:12px 16px 6px;font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.nt-item{display:grid;grid-template-columns:32px 1fr 10px;gap:12px;align-items:start;padding:11px 16px;color:var(--ink);text-decoration:none;position:relative}
.nt-item + .nt-item{border-top:1px solid var(--hair)}
.nt-item:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  .nt-item:hover{background:var(--mint)}
}
.nt-ic{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--hair);background:var(--ground)}
.nt-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nt-item[data-kind="payment"] .nt-ic,.nt-item[data-kind="delivered"] .nt-ic{color:var(--ok)}
.nt-item[data-kind="refund"] .nt-ic{color:var(--bad)}
.nt-body{display:grid;gap:3px;min-width:0}
/* ---------- fix round 2026-09-25 (audit 03) ---------- */
/* the kind label is gone from each row (the icon carries it); long lines clamp to two lines */
.nt-text{font-size:var(--fs-small);line-height:1.4;color:var(--ink-soft);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-meta{font:400 12px/1.3 var(--mono);color:var(--muted)}
.nt-dot{width:8px;height:8px;border-radius:var(--r-round);margin-top:6px;background:transparent}
.nt-item.unread .nt-text{color:var(--ink);font-weight:600}
.nt-item.unread .nt-dot{background:var(--bad)}
/* one signal for unread: bold text and the red dot. The icon keeps one colour. */
.nt-item.unread .nt-ic{background:var(--ground);border-color:var(--hair);color:inherit}
.nt-item.nt-new{animation:ntNew 1.6s ease-out}
@keyframes ntNew{from{background:var(--accent)}to{background:transparent}}
/* empty + error */
.nt-empty{display:grid;justify-items:center;text-align:center;gap:6px;padding:40px 24px 44px}
.nt-empty p{margin:0;max-width:30ch}
.nt-empty svg{width:28px;height:28px;fill:none;stroke:var(--muted);stroke-width:1.5;margin-bottom:6px}
.nt-empty .btn{margin-top:10px}
/* loading skeleton */
.nt-skel{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:12px 16px}
.nt-skel + .nt-skel{border-top:1px solid var(--hair)}
.nt-skel > span:first-child{width:32px;height:32px;background:var(--viz)}
.nt-skel > span:last-child{display:grid;gap:7px;align-content:center}
.nt-skel i{display:block;height:10px;background:var(--viz);animation:ntPulse 1.1s ease-in-out infinite alternate}
.nt-skel i:last-child{width:40%}
@keyframes ntPulse{from{opacity:.5}to{opacity:1}}
/* phone: full-height sheet over the app */
.nt-panel.nt-sheet{inset:0;top:0;right:0;width:100%;max-height:none;height:100dvh;border:0;box-shadow:none;transform:translateY(12px);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.nt-panel.nt-sheet.in{transform:none}
.nt-sheet .nt-head{padding:12px var(--gutter-r) 12px var(--gutter);min-height:64px;box-sizing:border-box}
.nt-sheet .nt-close{display:inline-flex}
.nt-sheet .nt-gh{padding-left:var(--gutter)}
.nt-sheet .nt-item{padding:14px var(--gutter-r) 14px var(--gutter);min-height:56px}
.nt-sheet .nt-text{font-size:var(--fs-body-s)}
html.nt-lock,html.nt-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .nt-panel,.nt-panel.nt-sheet{transition:none;transform:none}
  .nt-item.nt-new,.nt-skel i{animation:none}
}
.nt-prev{font-size:var(--fs-ui);line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-item[data-kind="accepted"] .nt-ic,.nt-item[data-kind="payout"] .nt-ic{color:var(--ok)}
.nt-item[data-kind="declined"] .nt-ic,.nt-item[data-kind="expired"] .nt-ic,.nt-item[data-kind="deadline"] .nt-ic{color:var(--bad)}
.drawer-close{display:none}
@media (max-width:960px){
  .drawer-close{display:inline-flex;position:absolute;top:14px;right:14px;min-height:44px;min-width:44px;justify-content:center;z-index:1}
}

/* css/components/radio.css */
/* Radio bar additions (js/core/radio.js, index.html #rbar): tappable now-playing, channel tabs, open-radio link, progress line.
   Base bar rules live in components/player.css. Dark bar in both themes. */
.radio .wrap{position:relative}
.radio .now small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio .now{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:44px;align-content:center}
.radio .now:hover b{text-decoration:underline;text-underline-offset:3px}
.radio .now:focus-visible,.radio .rch button:focus-visible,.radio .rch-btn:focus-visible,.radio .ropen:focus-visible,.radio .pbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.radio .pbtn:disabled{background:transparent;color:var(--on-dark-soft);border-color:var(--on-dark-soft);cursor:default}
.rch{display:flex;gap:2px;flex:none}
.rch:empty{display:none}
.rch button{min-height:44px;padding:0 10px;background:none;border:0;border-bottom:2px solid transparent;color:var(--on-dark-soft);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.rch button:hover{color:var(--on-dark)}
.rch button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.rch-btn{display:none;min-height:44px;min-width:44px;padding:0 10px;background:none;border:1px solid var(--on-dark-soft);color:var(--on-dark);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;flex:none}
.ropen{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;color:var(--on-dark);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;flex:none;white-space:nowrap}
.ropen svg{width:14px;height:14px}
.ropen:hover{color:var(--accent)}
.rprog{position:absolute;left:0;right:0;top:-2px;height:2px;pointer-events:none}
.rprog i{display:block;height:100%;background:var(--on-dark);transform-origin:0 50%;transform:scaleX(0)}
/* tablet: channel tabs give way to one cycling button */
@media (max-width:1100px){
  .rch{display:none}
  .rch-btn:not([hidden]){display:inline-flex;align-items:center}
}
/* phone: play, now playing, channel, open */
@media (max-width:600px){
  .radio .wrap{gap:10px}
  .radio .viz{display:none}
  .ropen{min-width:44px;justify-content:center}
  .ropen-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.radio.on .viz i{animation:none;height:60%}}
/* artist name → public page */
.rartist{flex:0 1 auto;align-self:flex-end;margin-bottom:12px;margin-right:auto;font-size:13px;color:var(--on-dark-soft);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
/* the title (and the artist link, when there is one) sit left; everything else goes right */
.radio .now{margin-right:auto}
.radio .now:has(+ .rartist:not([hidden])){margin-right:0}
.rartist:hover{color:var(--accent)}
@media (max-width:600px){.rartist{max-width:12ch;font-size:12px}}

/* css/pages/home.css */
/* Home and marketing pages: hero, marquee, split panels, steps, formats, research block, demo window, journey, community example. */
/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:clamp(36px,6vw,88px)}
.hero .intro{display:grid;gap:18px;max-width:620px}
.hero .intro .rule-top{margin-top:14px}
.about-journey{padding:28px;display:grid}
/* marquee */
/* M-24: the genre line moves, but can be paused (and stops on hover); reduced motion keeps it still */
.marquee{overflow:hidden;border-block:1px solid var(--hair-strong);background:var(--accent);color:var(--on-accent);padding-block:14px;white-space:nowrap;position:relative}
.mq-track{display:inline-flex;gap:28px;align-items:center;font-size:clamp(22px,3vw,40px);letter-spacing:-.02em;animation:marquee 38s linear infinite;padding-left:28px}
.mq-track i{font-style:normal;font-size:.6em}
@keyframes marquee{to{transform:translateX(-50%)}}
/* split panels */
.split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair-strong)}
.split.framed{border:1px solid var(--hair-strong);margin-bottom:24px}
.split > *{padding:clamp(28px,4vw,60px) clamp(20px,4vw,64px);min-height:clamp(360px,44vw,600px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.split.framed > *{min-height:0}
.panel-white{background:var(--paper)}
.panel-blue{background:var(--accent);color:var(--on-accent)}
.panel-blue .eyebrow,.panel-blue h2,.panel-blue h3,.panel-blue a:not(.btn){color:var(--on-accent)}
.panel-blue ul{margin:0;padding-left:18px;display:grid;gap:4px}
/* steps + formats */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair-strong);background:var(--paper)}
.steps > div{padding:22px;border-right:1px solid var(--hair);display:grid;gap:10px;align-content:start}
.steps > div:last-child{border-right:0}
.steps .n{font-family:var(--mono);font-size:var(--fs-caption)}
.steps h4{font-size:21px}
/* cards share rows (name, price, text, list) so prices sit on one line across all cards */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair-strong);grid-template-rows:auto auto auto 1fr}
.tiers.with-free{grid-template-columns:repeat(4,1fr)}
.tier-price .price-big{white-space:nowrap}
.tier-free{background:var(--mint)}
.tier{grid-row:span 4;grid-template-rows:subgrid;row-gap:14px;padding:26px;display:grid;gap:14px;align-content:start;background:var(--paper);border-right:1px solid var(--hair-strong)}
@media (max-width:1100px){
  .tiers.with-free{grid-template-columns:repeat(2,1fr)}
  .tiers.with-free .tier{border-bottom:1px solid var(--hair-strong)}
}
.tier:last-child{border-right:0}
.tier.feature{background:var(--accent);color:var(--on-accent)}
/* formats: list items keep their natural spacing inside the shared subgrid row */
.tier ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:var(--fs-body-s);align-content:start}
.tier li{padding-left:18px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:currentColor}
.price-big{font-size:40px;letter-spacing:-.04em;font-weight:500}
.boxrow{display:grid;grid-template-columns:1fr 1fr;gap:28px;border:1px solid var(--hair-strong);background:var(--paper);padding:clamp(22px,3vw,34px);text-decoration:none;color:inherit}
.boxrow + .boxrow{margin-top:24px}
.boxrow .right{display:grid;gap:18px;align-content:start;max-width:48ch}
.research-teaser{background:var(--accent);color:var(--on-accent)}
/* product visuals */
.demo-win{background:var(--paper);border:1px solid var(--hair-strong);box-shadow:10px 10px 0 var(--accent),10px 10px 0 1px var(--ink);width:100%;max-width:600px;justify-self:end;display:grid}
/* M-10: hero demo. No fake play button; each note carries its pin number; newest at the bottom; room for 3 notes */
.dw-top{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--hair);min-height:66px}
.dw-play{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;background:var(--accent);border:1px solid var(--on-accent);color:var(--on-accent)}
.dw-play svg{width:13px;height:13px;fill:currentColor}
.dw-title{display:grid;line-height:1.25;min-width:0;flex:1}
.dw-title b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-wave{position:relative;height:118px;margin:22px 16px 8px}
.dw-wave canvas{width:100%;height:100%;display:block}
.dw-pins{position:absolute;inset:-16px 0 0 0;pointer-events:none}
.dw-pin{position:absolute;top:0;transform:translateX(-50%);width:22px;height:22px;display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-micro);background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);animation:pinDrop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pinDrop{from{transform:translate(-50%,-14px) scale(.4);opacity:0}to{transform:translateX(-50%);opacity:1}}
.dw-notes{display:grid;align-content:start;border-top:1px solid var(--hair);min-height:0}
.dw-note{display:grid;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hair);animation:noteIn .5s cubic-bezier(.2,.8,.2,1) both;grid-template-columns:22px 1fr;align-items:start}
.dw-note:first-child{background:transparent}
.dw-note > .mono{font-weight:500;text-decoration:underline;text-underline-offset:3px}
.dw-note p{font-size:var(--fs-body-s);line-height:1.35;margin-top:2px}
@keyframes noteIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.journey{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative;max-width:460px;width:100%;justify-self:center;align-self:center}
.journey::before{content:"";position:absolute;left:31px;top:30px;bottom:30px;width:1px;background:var(--on-accent);opacity:.5}
.journey li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;position:relative;transition:opacity .4s}
/* M-20: fewer text sizes on the public pages (scale 12/14/16/20/28/46/64/112) */
.journey li b{font-weight:500;letter-spacing:-.02em;display:block;font-size:var(--fs-h5)}
.journey li small{font-size:var(--fs-small);display:block;opacity:.85;max-width:36ch}
.journey .ji{width:64px;height:64px;display:grid;place-items:center;background:var(--accent);border:1px solid var(--on-accent);position:relative;z-index:1;color:var(--on-accent);transition:background .35s,color .35s,transform .35s}
.journey .ji svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.journey .ji svg text{fill:currentColor;stroke:none;font-family:var(--mono);font-size:9px}
.journey .ji .i-fill{fill:currentColor}
.journey .ji .i-label{fill:currentColor;fill-opacity:.25}
.journey li.on .ji{background:var(--on-accent);color:var(--accent);transform:scale(1.08)}
/* M-13: journey inactive steps readable (≥4.5:1) */
.journey li:not(.on):not(.past){opacity:1}
.jdot{position:absolute;left:27px;top:0;width:9px;height:9px;border-radius:var(--r-round);background:var(--on-accent);transform:translateY(calc(var(--jy,30px) - 4.5px));transition:transform .9s cubic-bezier(.6,0,.2,1)}
.i-bars rect{transform-box:fill-box;transform-origin:50% 100%;animation:bar .97s ease-in-out infinite alternate;animation-delay:calc(var(--b) * -.21s)}
@keyframes bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.i-type{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.i-needle{transform-origin:24px 34px;animation:needle 1.6s ease-in-out infinite}
@keyframes needle{0%,100%{transform:rotate(-52deg)}35%{transform:rotate(38deg)}55%{transform:rotate(18deg)}75%{transform:rotate(44deg)}}
.i-spin{transform-origin:24px 24px;animation:spin 1.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.i-wave{animation:wave 1.8s ease-out infinite}
.i-wave.w2{animation-delay:.3s}
.i-wave.w3{animation-delay:.6s}
@keyframes wave{0%{opacity:.1}30%{opacity:1}100%{opacity:.1}}
/* home: research block (numbers + quote together, framed) */
.research-block{border:1px solid var(--hair-strong);background:var(--paper)}
.rb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:clamp(22px,3vw,36px);border-bottom:1px solid var(--hair-strong)}
.rb-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hair-strong)}
/* M-11: survey stats line up with the heading above them */
.rb-stats > div{border-right:1px solid var(--hair-strong);display:grid;gap:10px;grid-template-rows:auto 1fr auto;padding:36px}   /* the "25 of 44" lines sit on one line even when a label wraps */
.rb-stats > div:last-child{border-right:0}
.rb-stats .bigstat{font-size:clamp(56px,7vw,104px)}
.rb-quote{margin:0;padding:clamp(22px,3vw,36px);background:var(--mint)}
.rb-quote p{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;line-height:1.25;font-weight:500;max-width:40ch}
.rb-quote cite{display:block;margin-top:14px;font-style:normal;font-family:var(--mono);font-size:var(--fs-caption)}
.artists-split{border-top:1px solid var(--hair-strong)}
@media (max-width:960px){
  .rb-stats{grid-template-columns:1fr}
  .rb-stats > div{border-right:0;border-bottom:1px solid var(--hair-strong)}
  .rb-stats > div:last-child{border-bottom:0}
}
.artists-split > *{min-height:clamp(300px,30vw,420px)}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:28px}
  .demo-win{justify-self:stretch;max-width:none;box-shadow:6px 6px 0 var(--accent),6px 6px 0 1px var(--ink)}
  .split{grid-template-columns:1fr}
  .boxrow{grid-template-columns:1fr}
  .split > *{min-height:0}
  .steps{grid-template-columns:1fr 1fr}
  .steps > div:nth-child(2){border-right:0}
  .steps > div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .tiers,.tiers.with-free{grid-template-columns:1fr}
  .tier{border-right:0;border-bottom:1px solid var(--hair-strong)}
  .tier:last-child{border-bottom:0}
}
@media (max-width:600px){
  .steps{grid-template-columns:1fr}
  .steps > div{border-right:0;border-bottom:1px solid var(--hair)}
  .steps > div:last-child{border-bottom:0}
}
.hero .demo-win{will-change:transform;transition:transform .1s linear}
/* hero genre line: break between genres, never before a dot */
.gen-line{display:flex;flex-wrap:wrap;column-gap:.5em;row-gap:2px}
.gen-line > span{white-space:nowrap}
/* For artists: the earnings calculator */
.calc{display:grid;gap:16px;border-top:1px solid var(--on-accent);padding-top:18px;max-width:48ch}
.calc .field{gap:8px}
.calc .row{align-items:flex-end;margin-top:4px}
/* lead: the community and for-artists panels place their button pair the same way: text on top, buttons at the bottom-left */
/* M-23: one rhythm. Buttons follow the text in split panels; page-level CTAs are 56px */
.split > .panel-white{display:flex;flex-direction:column;justify-content:flex-start;gap:32px}
.split > .panel-white > .eq-btns{margin-top:0}
.marquee:hover .mq-track,.marquee.paused .mq-track{animation-play-state:paused}
.mq-pause{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);line-height:1;z-index:2;cursor:pointer;font-size:var(--fs-body-s)}
@media (prefers-reduced-motion:reduce){
  .mq-pause{display:none}
}
.dw-note:last-child{background:var(--mint)}
.dw-n{width:22px;height:22px;display:grid;place-items:center;font-size:var(--fs-micro);background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);margin-top:1px}
.dw-note .eyebrow{display:block}
@media (min-width:961px){
  .dw-notes{min-height:246px}
}
@media (max-width:600px){
  .rb-head{padding:24px}
  .rb-stats > div{padding:20px 24px;gap:6px}
  .rb-quote{padding:24px}
}
/* M-26: one line under the formats heading, no per-card captions */
.sec-sub{max-width:60ch;color:var(--ink)}
.formats-more{margin-top:14px}
.formats-more a{color:inherit}
.tier-price{display:grid;gap:4px;align-content:start}
@media (max-width:600px){
  .home-formats .tier ul{display:none}
  .home-formats .tier{row-gap:8px;border-right:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong);padding:16px}
  .home-formats .price-big{font-size:24px}
  .hero{padding-block:24px 36px}
  .research-block .rb-stats .bigstat{font-size:44px}
}
/* M-13: community split shows an example post, not the paid journey */
.comm-panel{justify-content:center!important;align-items:center}
.comm-post{margin:0;width:100%;max-width:460px;background:var(--paper);color:var(--ink);border:1px solid var(--on-accent);box-shadow:8px 8px 0 var(--on-accent)}
.cp-head{display:grid;gap:4px;padding:16px;border-bottom:1px solid var(--hair)}
.cp-head b{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.02em}
.cp-head .small{color:var(--muted)}
.cp-wave{position:relative;height:64px;margin:26px 16px 12px;display:flex;align-items:center;gap:2px}
.cp-wave i{flex:1;background:var(--hair-strong);opacity:.3;min-height:4px}
.cp-wave i.on{opacity:1}
.cp-pin{position:absolute;top:-24px;transform:translateX(-50%);font-family:var(--mono);font-size:var(--fs-micro);background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);padding:1px 5px}
.cp-reply{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:12px 16px;border-top:1px solid var(--hair);font-size:var(--fs-body-s);line-height:1.4}
.cp-reply .mono{font-size:var(--fs-caption);text-decoration:underline;text-underline-offset:3px;padding-top:2px}
.cp-reply b{display:block;font-weight:700;font-size:var(--fs-caption);letter-spacing:.02em;margin-bottom:3px}   /* the name on its own line, above the comment (Alex) */
.journey li:not(.on):not(.past) .ji{opacity:.6}
/* M-39: the artists figure, and one body size in that split */
.artists-fig{display:grid;gap:6px}
.artists-fig b{font-size:clamp(28px,3vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1}
@media (min-width:961px){
  /* M-21: split panels and the profile line up with the header grid (same outer edge as .wrap) */
  .split > :first-child{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
  .split > :last-child{padding-right:max(var(--gutter-r),calc((100vw - var(--max)) / 2 + var(--gutter-r)))}
}
/* M-31: About headline at page-title size */
.about-h1{font-size:clamp(40px,5vw,64px)}
.about-intro{max-width:980px}
.artists-split .panel-white p{font-size:var(--fs-body)}
.dw-note > .dw-n{text-decoration:none;font-weight:400}
.home-formats.section{padding-top:0}
@media (max-width:600px){
  .home-formats .tiers,.home-formats .tiers.with-free{grid-template-columns:1fr 1fr}
  .home-formats .tier:nth-child(2n){border-right:0}
  .home-formats .tier:nth-last-child(-n+2){border-bottom:0}
  .home-formats .tier > p{display:none}
  .home-formats .tier .h3{font-size:var(--fs-lead)}
  .rb-stats .bigstat{font-size:44px}
  .rb-quote p{font-size:var(--fs-h5)}
}
/* on the yellow panel (For artists calculator) the thumb flips to ink so it does not disappear */
.calc input[type=range]{--fill:var(--on-accent);--rest:rgba(21,20,14,.22);--thumb:var(--on-accent);--thumb-b:var(--on-accent)}
.calc input[type=range]::-webkit-slider-thumb{box-shadow:none;background:var(--on-accent)}
/* Home: "Why stay" loop list and the radio band. Tokens only. (Lead, 25 Sep; fold into public.css in the next CSS pass.) */
.loop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:start}
.loop-head{display:grid;gap:14px;position:sticky;top:96px}
.loop-head .h2{text-wrap:balance}
.loop-head .eq-btns{margin-top:6px}
.loop-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair-strong)}
.loop-list li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.loop-list b{display:block;font-weight:600;font-size:17px;letter-spacing:-.01em}
.loop-list p{margin:4px 0 0;color:var(--ink-soft);max-width:56ch}
.loop-state{align-self:start;justify-self:start;margin-top:2px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border:1px solid var(--hair-strong);color:var(--muted);white-space:nowrap}
.loop-state.on{background:var(--accent);color:var(--on-accent);border-color:var(--ink)}
.radio-band{background:var(--dark);color:var(--on-dark)}
/* same two halves as the yellow/white panels above and below: text starts where their text starts, the channel list
   where the white panel's text starts; the list spans the text block top to bottom (Alex) */
.radio-band .rband{max-width:none;padding-inline:0;display:grid;grid-template-columns:1fr 1fr;gap:0;padding-block:clamp(48px,7vw,88px);align-items:stretch}
.radio-band .rband > *{padding-inline:clamp(20px,4vw,64px)}
.radio-band .rband > .rband-ch{padding-inline:0;margin-inline:clamp(20px,4vw,64px);max-width:520px}   /* margin, so its lines start where the text starts */
.rband-main{display:grid;gap:14px;justify-items:start}
.rband-main p{margin:0;max-width:54ch;color:var(--on-dark-soft)}
.rband-main .label{color:var(--accent)}
.rband-note{font-family:var(--mono)}
.rband-ch{list-style:none;margin:0;padding-block:0;border-top:1px solid var(--on-dark-soft);display:flex;flex-direction:column;justify-content:space-between;box-sizing:content-box}
.rband-ch li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid rgba(246,241,201,.25)}
.rband-ch b{font-weight:600;color:var(--on-dark)}
.rband-ch span{font-size:var(--fs-small);color:var(--on-dark-soft)}
@media (max-width:900px){
  .loop,.rband,.radio-band .rband{grid-template-columns:1fr}
  .radio-band .rband{gap:28px}
  .loop-head{position:static}
}
@media (max-width:600px){
  .loop-list li{grid-template-columns:1fr;gap:8px}
}
/* closing row: the line, then the buttons right under it, both left-aligned with the content (no gap to float in) */
.end-cta{display:grid;justify-items:start;gap:20px;padding-top:8px}
.end-cta-line{margin:0;max-width:40ch;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.015em;line-height:1.25;text-wrap:balance}
@media (max-width:600px){
  .end-cta{justify-items:stretch}
  .end-cta .eq-btns{width:100%}
}
/* hero pair: equal width side by side; stacked full width on phones */
@media (max-width:600px){
  .hero .eq-btns{grid-template-columns:1fr;max-width:none}
}

/* css/pages/mentors.css */
/* Mentor profile page. */
/* mentor profile */
.profile{display:grid;grid-template-columns:.9fr 1.1fr;border-bottom:1px solid var(--hair-strong)}
/* M-05 / M-06 / M-36: mentor profile. Stats under the name, the left column stays in view, a Send bar on phones */
.profile .left{background:var(--accent);color:var(--on-accent);padding:clamp(24px,4vw,56px);gap:22px;display:block;align-content:normal}
.profile .left .back{color:var(--on-accent)}
.profile .right{background:var(--paper);padding:clamp(24px,4vw,56px);display:grid;gap:26px;align-content:start}
.kv{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--on-accent)}
.kv div{padding:12px 12px 0 0}
.kv b{display:block;font-size:var(--fs-h3);font-weight:500;letter-spacing:-.03em}
.kv small{font-family:var(--mono);font-size:var(--fs-micro)}
.tsel{display:grid;border:1px solid var(--hair-strong)}
.topt{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--hair);cursor:pointer;background:var(--paper)}
.topt.static{grid-template-columns:1fr auto;cursor:default}
.topt:last-child{border-bottom:0}
.topt input{accent-color:var(--ink);width:20px;height:20px;flex:0 0 20px;margin:2px 0 0}
.topt:has(input:checked){background:var(--mint)}
.topt .p{font-family:var(--mono);font-size:var(--fs-body)}
.review{padding:14px 0;display:grid;gap:6px}
@media (max-width:960px){
  .profile{grid-template-columns:1fr}
}
@media (max-width:600px){
  .topt{grid-template-columns:22px 1fr}
  .topt .p{grid-column:2}
  .topt.static{grid-template-columns:1fr}
  .topt.static .p{grid-column:1}
  .kv b{font-size:var(--fs-h4)}
}
/* paired buttons on the profile span the column, like the price list above them */
.profile .eq-btns{max-width:none}
@media (min-width:961px){
  .profile > .left{padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
  .profile > .right{padding-right:max(var(--gutter-r),calc((100vw - var(--max)) / 2 + var(--gutter-r)))}
}
.profile .left-in{display:grid;gap:26px}
.prof-name{font-size:clamp(44px,6vw,92px)}
.profile .kv{grid-template-columns:repeat(3,minmax(0,1fr))}
.profile h2.label{font-size:var(--fs-caption);font-weight:400;line-height:1.3}
@media (min-width:961px){
  .profile .left-in{position:sticky;top:calc(73px + 24px)}
}
.send-bar{display:none}
@media (max-width:960px){
  .send-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sendbar);align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter);background:var(--ground);border-top:1px solid var(--hair-strong);transition:transform .25s}
  .send-bar b{font-size:var(--fs-h5);font-weight:500}
  .send-bar .btn{min-height:44px}
  .send-bar.gone{transform:translateY(110%)}
  body:has(.send-bar:not(.gone)) .toast{bottom:84px}
  body:has(.send-bar) .ftr{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
}
.topt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-2px}
@media (hover:hover){
  .topt:not(.static):not(:has(input:checked)):hover{background:color-mix(in srgb,var(--mint) 55%,var(--paper))}
}
/* artist page: each number reads as one line ("Usually answers in 1.4 days") */
.kv.kv-line{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline}
.kv.kv-line > div{display:flex;align-items:baseline;gap:6px;flex-direction:row}
.kv.kv-line > div b{font-size:18px;line-height:1.2}
.kv.kv-line > div small{font-size:var(--fs-small);color:var(--muted)}
.kv.kv-line b{display:inline}
/* artist page: their links as buttons (website, SoundCloud, Bandcamp, Discogs, Instagram, Resident Advisor) */
.m-links{display:flex;flex-wrap:wrap;gap:8px}
.m-links .m-link{min-height:44px}
@media (max-width:600px){.m-links .m-link{flex:1 1 calc(50% - 4px);justify-content:center}}

/* css/pages/research.css */
/* Research article: stats, contents, findings, pull quotes, map. */
/* article */
.art-head{display:grid;gap:18px;padding-block:clamp(32px,6vw,80px) 40px;max-width:1100px}
.art-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair-strong);background:var(--accent);color:var(--on-accent);margin-top:18px}
.art-stats > div{padding:20px;border-right:1px solid var(--on-accent);display:grid;gap:8px;grid-template-rows:auto 1fr auto}
.art-stats > div:last-child{border-right:0}
.art-stats .bigstat{font-size:clamp(56px,7vw,96px)}
.art-body{display:grid;grid-template-columns:220px minmax(0,720px);gap:64px;padding-bottom:80px;justify-content:center}
.toc{position:sticky;top:96px;align-self:start;display:grid;gap:4px}
.toc a{text-decoration:none;font-size:var(--fs-small);padding:6px 0 6px 10px;border-left:2px solid var(--hair);color:var(--muted)}
.toc a.on{border-left-color:var(--ink);color:var(--ink)}
.art-text{display:grid;gap:72px}
.art-text section{display:grid;gap:20px}
.art-text p{font-size:var(--fs-lead);line-height:1.65;max-width:66ch}
.finding{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:var(--accent);color:var(--on-accent);padding:20px;border:1px solid var(--on-accent)}
.finding .bigstat{font-size:clamp(56px,8vw,96px)}
.finding p{font-size:var(--fs-body)}
.pull{margin:8px 0;padding:6px 0 6px 22px;border-left:3px solid var(--accent);box-shadow:-1px 0 0 var(--ink)}
.pull p{letter-spacing:-.015em;line-height:1.35;font-size:var(--fs-h5)}
.pull cite{display:block;margin-top:8px;font-style:normal;font-family:var(--mono);font-size:var(--fs-caption);color:var(--muted)}
.map{border:1px solid var(--hair-strong);background:var(--paper)}
.map-row{display:grid;grid-template-columns:1fr 24px 1.4fr;gap:14px;padding:14px 16px;border-bottom:1px solid var(--hair);align-items:start}
.map-row:last-child{border-bottom:0}
.map-row span:first-child{font-weight:600}
@media (max-width:1100px){
  .art-body{grid-template-columns:minmax(0,720px)}
  .toc{display:none}
}
@media (max-width:960px){
  .art-stats{grid-template-columns:1fr}
  .art-stats > div{border-right:0;border-bottom:1px solid var(--on-accent)}
  .art-stats > div:last-child{border-bottom:0}
}
@media (max-width:600px){
  .map-row{grid-template-columns:1fr}
  .map-row span:nth-child(2){display:none}
  .finding{grid-template-columns:1fr}
}
/* M-27: research contents on phones (folded) and a way back to the top */
.toc-phone{display:none}
.art-text .to-top{display:none}
@media (max-width:1100px){
  .toc-phone{display:block;border:1px solid var(--hair-strong);background:var(--paper);padding:0 16px;margin-bottom:8px}
  .toc-phone summary{min-height:48px;display:flex;align-items:center;font-family:var(--mono);font-size:var(--fs-ui);cursor:pointer}
  .toc-phone nav{display:grid;padding-bottom:10px}
  .toc-phone a{padding:10px 0;text-decoration:none;border-top:1px solid var(--hair);font-size:var(--fs-body-s)}
  .art-text .to-top{display:inline-flex;align-items:center;min-height:44px;justify-self:start;color:var(--muted)}
}
/* contrast: muted mono under the research stats sits on yellow (was 4.27:1) */
.art-stats .muted{color:var(--on-accent)}

/* css/pages/auth.css */
/* Log in / sign up. */
/* auth */
.auth{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;padding-block:clamp(28px,6vw,72px);align-items:start;max-width:1100px}
.auth-card{padding:clamp(22px,3vw,36px);display:grid;gap:16px}
.auth-demo{background:var(--accent);color:var(--on-accent);padding:clamp(22px,3vw,36px);border:1px solid var(--on-accent)}
.auth-demo details{border-color:var(--on-accent)}
@media (max-width:960px){
  .auth{grid-template-columns:1fr}
}
/* M-30: why the Join form appeared */
.auth-why{background:var(--mint);border:1px solid var(--hair-strong);padding:12px 14px;font-size:var(--fs-body-s)}
.auth-demo input[type=range]{--fill:var(--on-accent);--rest:rgba(21,20,14,.22);--thumb:var(--on-accent);--thumb-b:var(--on-accent)}
.auth-demo .btn:focus-visible{outline-color:var(--on-accent)}
/* Join: producer or artist */
.join-as{margin:2px 0 4px}
.join-as .chip{flex:1;justify-content:center;text-align:center}

/* css/pages/legal.css */
/* Legal pages. */
/* legal pages: readable column, plain lists; unfilled details show in yellow so they can't be missed */
/* M-37: legal pages read like the rest of the site */
.legal{display:grid;gap:12px;padding-bottom:24px;max-width:68ch}
.legal h2{margin-top:24px}
.legal ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.legal a{color:inherit}
.to-fill{background:var(--accent);color:var(--on-accent);padding:0 4px;font-family:var(--mono);font-size:.9em}
.legal p,.legal li{font-size:var(--fs-body);line-height:1.6}

/* css/pages/press.css */
/* Press kit. */
/* press */
.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.disc-wrap{display:grid;place-items:center;padding:8px}
.disc{max-width:100%;aspect-ratio:1;transition:width .3s}
.disc-in{width:100%;height:100%;border-radius:var(--r-round);display:grid;place-items:center;border:1px solid var(--ink);background-image:repeating-radial-gradient(circle,rgba(255,255,255,.07) 0 1px,transparent 1px 4px)!important}
.disc-label{width:32%;aspect-ratio:1;border-radius:var(--r-round);background:var(--accent);border:1px solid var(--on-accent);display:grid;place-items:center;text-align:center;font-size:10px;color:var(--on-accent);padding:6px;line-height:1.1}
.spinning .disc{animation:spin 1.6s linear 2}
@media (max-width:960px){
  .press-grid{grid-template-columns:1fr}
}

/* css/pages/producer.css */
/* Producer app: dashboard, my tracks, request detail, send-a-track wizard. */
.req-li > div{display:grid;gap:3px;min-width:0}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:stretch}
/* both columns share top and bottom edges: the right column's panels stack with the same 20px gap and the last one fills */
.dash-grid > .stack{display:flex;flex-direction:column;gap:20px}
.dash-grid > .stack > :last-child{flex:1}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
/* tracks */
.track-li{flex-wrap:wrap}
.pick{cursor:pointer;justify-content:flex-start;min-height:56px}
.pick input{accent-color:var(--ink);width:20px;height:20px;flex:0 0 20px;margin:2px 0 0}
.pick:has(input:checked){background:var(--mint)}
/* wizard */
.wizard{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.wizard .summary{position:sticky;top:84px}
/* Wizard, Format step: lens cards stretch to the tallest one; keep title and text together at the top */
.lens{display:grid;gap:4px;text-align:left;padding:14px;border:1px solid var(--hair-strong);background:var(--paper);align-content:start}
.lens.on{background:var(--accent);color:var(--on-accent)}
.lens.on .muted{color:var(--on-accent)}
@media (max-width:1100px){
  .wizard{grid-template-columns:1fr}
  .wizard .summary{position:static}
}
@media (max-width:960px){
  .dash-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
}
/* Empty status lines (upload progress, errors) sat inside .stack and doubled the gap between buttons */
#acts > p:empty,#wb > p:empty,#wb > .err:empty,#upState:empty{display:none}
/* Request detail: the action buttons in the side panel share one width */
#acts > .btn,#acts > label.btn{width:100%}
/* My tracks: one action row, every button the same height. On a phone: three equal columns plus a square "•••"
   (founder: the row wrapped and "Get feedback" looked oversized) */
.track-li > .row .btn{min-height:44px}
.track-li .lbl-s{display:none}
@media (max-width:600px){
  /* the same slots on every row (Play · Feedback · Share · •••); an action that does not apply keeps its slot, disabled */
  .track-li > .row{display:grid;grid-template-columns:repeat(3,80px) 44px;gap:6px;width:max-content;max-width:100%}
  .track-li > .row:not(:has(.btn:nth-child(4))){grid-template-columns:repeat(2,minmax(0,1fr)) 44px}
  .track-li > .row .btn{min-height:44px;padding:0 6px;white-space:nowrap;min-width:0}
  .track-li > .row [data-more]{width:44px}
  .track-li .lbl-l{display:none}
  .track-li .lbl-s{display:inline}
}
/* Wizard nav (Back / Continue / Send it): same width on desktop. On a phone it becomes a sticky bottom bar with the price (below). */
#wb > .wnav .btn{min-width:140px}
.wnav-p{display:none}
@media (max-width:960px){
  /* Request page on a phone: what happens next (and the Cancel/Pay/Rate buttons) sat below the player and the whole
   conversation. Flatten the two columns so the action panel comes straight after the status. */
/* scoped to the producer request page: unscoped, it squeezed the mentor review page (mentor audit T-01) */
  .req-detail{display:flex;flex-direction:column;gap:20px}
  .req-detail > .stack{display:contents}
  .req-detail #acts{order:-2}
  .req-detail .bk-panel{order:-1}
}
.detail-grid .panel-h a{white-space:nowrap}
/* a track that just landed: a short yellow flash in the list */
.track-li.fresh{animation:freshin 2.4s ease-out 1}
@keyframes freshin{0%,40%{background:var(--accent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){
  .track-li.fresh{animation:none;outline:2px solid var(--accent)}
}
/* My tracks: the row's Play button turns into Pause while its player runs; a fixed width so the label swap never resizes it */
.track-li > .row [data-play]{width:84px;flex:0 0 84px;padding-left:0;padding-right:0}
@media (max-width:600px){
  .track-li > .row [data-play]{width:100%;flex:none}
}
.req-li .status{white-space:nowrap;overflow:visible;text-overflow:clip;max-width:none;flex:0 0 auto}
/* 44 px hit areas for small header links (P-26); the visual size stays the same */
.hit{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;margin-block:-10px;margin-right:-8px}
/* "Get feedback" context bar on Find a mentor (P-10) */
.pick-bar{display:flex;align-items:center;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);padding:4px 6px 4px 14px;margin-bottom:20px}
.pick-bar .hit{margin-block:0;color:var(--on-accent);text-decoration:underline;text-underline-offset:3px}
/* the public directory drawn inside the app column (same left edge as every other app page) */
.in-app.wrap{max-width:1180px;padding-inline:0}
.in-app.page-top{padding-top:0}
.track-li:has(+ .track-li.old){padding-bottom:6px;border-bottom-color:transparent}
.track-li.old{padding-top:6px}
.track-li.old .mini{opacity:.6}
/* the status sentence: its own row under the bar */
.rq-next{margin:14px 0 0;padding:12px 16px 14px;border-top:1px solid var(--hair);font-size:var(--fs-body-s);line-height:1.45}
.receipt{font-weight:500}
/* delivered: the player stays in view while you read the notes (P-06) */
.req-detail #rp{width:100%;min-width:0}
.rq-listen{width:100%;min-width:0;gap:20px}
.preq .note .t{min-height:44px;min-width:60px}
.preq .player .pin::before{width:44px;height:44px;top:-8px}
.preq .player .pin.on i{background:var(--ink);color:var(--paper)}
/* rating: five 44 px stars, editable in the sheet (P-31) */
.rate-row{display:flex;gap:6px;flex-wrap:wrap}
.rate-star{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--hair-strong);background:var(--paper);color:var(--muted);font-size:var(--fs-h5);line-height:1;cursor:pointer;padding:0}
.rate-star.on{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
@media (hover:hover){
  .rate-row:hover .rate-star{background:var(--accent);color:var(--on-accent)}
  .rate-row .rate-star:hover ~ .rate-star{background:var(--paper);color:var(--muted)}
}
.rate-star:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:960px){
  /* phone order on a delivered request: summary, player, notes, scores, then rating and round two, then chat */
  .req-detail.dlv #acts{order:5}
  .req-detail.dlv .rq-sum{order:1}
  .req-detail.dlv .rq-listen{order:2}
  .req-detail.dlv .rq-scores{order:4}
  .req-detail.dlv .rq-chat{order:6}
  .req-detail.dlv .rq-brief{order:7}
  .req-detail.dlv .bk-panel{order:8}
}
.ll-edit{min-height:44px;margin-block:-12px;padding-inline:8px}
.pick.off{opacity:.55;cursor:not-allowed}
@media (pointer:coarse){
  .wizard .chip,.preq .chip{min-height:44px}
}
@media (max-width:600px){
  /* the aside summary sat under the Continue button; the bottom bar carries the price instead (P-14) */
  .wizard > aside.summary{display:none}
  #wb > .wnav{position:sticky;bottom:calc(var(--player-h, 0px) + env(safe-area-inset-bottom,0px));z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;min-height:60px;background:var(--ground);border-top:1px solid var(--hair-strong);margin-inline:calc(-1 * var(--gutter, 16px)) calc(-1 * var(--gutter-r, 16px));padding:8px var(--gutter-r, 16px) 8px var(--gutter, 16px)}
  #wb > .wnav > .sp{display:none}
  #wb > .wnav .btn{min-width:0;min-height:44px;padding-inline:14px}
  .wnav-p{display:grid;line-height:1.25;min-width:0}
  .wnav-p b{font-size:17px}
  .wnav-p .small{font-size:var(--fs-micro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* My tracks, desktop: fixed slot widths so every row's buttons line up */
.track-li > .row{flex:0 0 auto}
.track-li > .row > :nth-child(2){min-width:132px;justify-content:center}
.track-li > .row [data-share],.track-li > .row .slot-off.line{min-width:84px}
.track-li > .row [data-more]{width:44px;min-width:44px;padding-inline:0}
@media (max-width:600px){
  .track-li > .row > :nth-child(2),.track-li > .row [data-share],.track-li > .row .slot-off.line{min-width:0}
}
.pick:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-2px}
@media (hover:hover){
  .pick:not(:has(input:checked)):hover{background:color-mix(in srgb,var(--mint) 55%,var(--paper))}
}
/* Track page sheet (My tracks → ••• → Track page) */
.cd-switch b{font-weight:600}
.cd-links{gap:var(--sp-4)}
.cd-copy{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:var(--sp-2);align-items:stretch}
.cd-copy input{min-width:0;font-family:var(--mono);font-size:var(--fs-caption)}
.cd-copy .btn{min-height:var(--ctl-h)}
.cd-stats{margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3)}
.cd-quotes{border-top:1px solid var(--hair);padding-top:var(--sp-4)}
.cd-qlist{display:grid;gap:var(--sp-1);margin-bottom:var(--sp-3)}
/* Share sheet: three destinations */
.send-opts{display:grid;border-top:1px solid var(--hair)}
.send-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hair)}
.send-opt p{margin:4px 0 0;color:var(--ink-soft)}
.send-opt .btn{min-width:120px}
@media (max-width:600px){.send-opt{grid-template-columns:1fr}.send-opt .btn{width:100%}}
/* My tracks: how sharing works */
.send-help{border:1px solid var(--hair);padding:0 16px;margin:16px 0}
.send-help > summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
.send-help ul{margin:0 0 14px;padding-left:18px;display:grid;gap:6px;color:var(--ink-soft)}
.btn.is-shared{background:var(--paper);color:var(--ink);border-color:var(--ok)}
.btn.is-shared span{color:var(--ok);font-weight:700}
.up-genre{max-width:420px;margin-bottom:12px}
.req-tabs{margin-bottom:var(--sp-4, 20px)}
.ms-list{margin:0;padding-left:1.1em;display:grid;gap:8px}
.wish-box{margin-top:32px;max-width:720px}
.piko-bal{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.piko-bal .bigstat{font-size:56px;line-height:1}
.piko-calc input[type=range]{width:100%}
.piko-out{border-top:1px solid var(--hair);padding-top:14px;display:grid;gap:8px}
.set-out.row{gap:10px;flex-wrap:wrap}
/* send-a-track wizard: the step's question sits above both columns, so the summary box lines up with the first choice */
.wiz-h{margin:0 0 16px}
.pre-line{white-space:pre-line}
.wizard textarea#goals{min-height:84px}
/* My tracks: where each track stands (1 Feedback · 2 New version · 3 Mastering · 4 Vinyl) and its next step as one button */
.tflow-help{margin:8px 0 0;max-width:72ch}
.tflow{flex-basis:100%;display:grid;gap:10px;border-top:1px dashed var(--hair);padding-top:12px;margin-top:2px}
.tflow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tflow-steps li{display:flex;align-items:flex-start;gap:8px;min-width:0;font-size:var(--fs-small);color:var(--muted);line-height:1.3}
.tf-n{flex:0 0 24px;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--hair-strong);font-size:var(--fs-micro);color:var(--ink)}
.tf-l{min-width:0;padding-top:3px;overflow-wrap:anywhere}
.tflow-steps li.done .tf-n{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tflow-steps li.cur{color:var(--ink);font-weight:600}
.tflow-steps li.cur .tf-n{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.tflow-next{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.tflow-next > .small{min-width:0;flex:1 1 260px}
.tflow-act{flex:none}
.tflow-act .btn{min-height:44px;min-width:180px;justify-content:center;cursor:pointer}
.tflow-skip{justify-self:start;color:var(--muted)}
.tflow .upslot:empty{display:none}
/* My tracks: the label link of a shared track, ready to copy */
.tlabel{flex-basis:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px 12px}
.tlabel input{min-width:0;font-family:var(--mono);font-size:var(--fs-caption)}
.tlabel .btn{min-height:44px}
.tlabel:has(> .muted:nth-child(2)){grid-template-columns:auto minmax(0,1fr) auto}
@media (max-width:600px){
  .tflow-steps{grid-template-columns:1fr 1fr;row-gap:8px}
  .tflow-act,.tflow-act .btn{width:100%}
  .tlabel{grid-template-columns:minmax(0,1fr) auto}
  .tlabel .eyebrow{grid-column:1 / -1}
  .tlabel > .small.nowrap{grid-column:1 / -1}
}
/* Label links page (#app-labels) */
.ll-grid{display:grid;gap:20px}
.ll-head{gap:12px;flex-wrap:wrap}
.ll-title{min-width:0;overflow-wrap:anywhere}
.ll-on{margin:0;min-height:44px}
.ll-body{gap:14px}
.ll-body .err:empty{display:none}
.ll-tools{gap:8px;flex-wrap:wrap}
.ll-tools .btn{min-height:44px}
.ll-nums{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair-strong)}
.ll-nums div{padding:12px 12px 12px 0;display:grid;gap:2px;align-content:start}
.ll-nums dd{order:-1;margin:0;font-size:var(--fs-h3);font-weight:500;font-variant-numeric:tabular-nums}
.ll-nums dt{font-size:var(--fs-small);color:var(--muted)}
.ll-log{display:grid;gap:8px}
.ll-list{list-style:none;margin:0;padding:0;border:1px solid var(--hair);max-height:260px;overflow:auto}
.ll-list li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:8px 12px;border-bottom:1px solid var(--hair)}
.ll-list li:last-child{border-bottom:0}
.ll-more{margin-top:16px}
@media (max-width:600px){
  .ll-nums{grid-template-columns:1fr}
  .ll-nums div{padding:10px 0;border-bottom:1px solid var(--hair)}
  .ll-list li{grid-template-columns:1fr;gap:2px}
}

/* css/pages/community.css */
/* Community: channels, feed, posts, replies, points. */
.composer-note{padding:0 12px 10px;margin:0;background:var(--paper)}
.post-acts{gap:8px;flex-wrap:wrap;align-items:center}
.reply p{margin:4px 0 0;font-size:var(--fs-body-s)}
.reply-form{display:flex;gap:8px;flex-wrap:wrap}
.reply-form .rf-x{flex:1 1 220px;width:auto;min-width:0}
.reply-form .rf-at{width:76px;flex:0 0 76px}
.post-player{margin:10px 0 4px}
.post-player .player{border:1px solid var(--hair)}
@media (max-width:560px){
  .feed .composer{flex-wrap:wrap}
  .feed .composer #pt{flex:1 1 100%}
  .feed .composer .att{max-width:none;flex:1}
}
/* community */
/* grid: channels + feed (the old right column is now the strip and the "How points work" sheet) */
.comm{display:grid;border:1px solid var(--hair-strong);background:var(--paper);grid-template-columns:210px minmax(0,1fr)}
.chans{border-right:1px solid var(--hair-strong);display:grid;align-content:start}
.chans button{background:transparent;border:0;border-bottom:1px solid var(--hair);padding:12px 14px;text-align:left;font-size:var(--fs-body-s)}
.chans button[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
.feed{display:grid;align-content:start;min-width:0}
.feed .composer{border-top:0;border-bottom:1px solid var(--hair)}
/* posts */
.post{padding:16px 18px;border-bottom:1px solid var(--hair);display:grid;gap:10px;scroll-margin-top:84px}
.aside{border-left:1px solid var(--hair-strong);padding:18px;display:grid;gap:12px;align-content:start}
.aside ol{margin:0;padding-left:18px;display:grid;gap:6px}
.points{display:grid;grid-template-columns:1fr 1.3fr;gap:24px}
@media (max-width:1100px){
  /* ---------------- responsive ---------------- */
  .comm{grid-template-columns:180px minmax(0,1fr)}
  .comm .aside{display:none}
}
@media (max-width:960px){
  .points{grid-template-columns:1fr}
  .comm{grid-template-columns:1fr}
  .chans{border-right:0;border-bottom:1px solid var(--hair-strong);display:flex;overflow-x:auto;scrollbar-width:none}
  .chans button{border-bottom:0;border-right:1px solid var(--hair);white-space:nowrap;flex:0 0 auto}
}
/* Community: the last post drew a second line on the feed border */
.feed > .post:last-of-type{border-bottom:0}
/* Community reply: "at 0:40" jumps the post's player to that time */
/* one-tap time chips: 32px to the eye, 44px to the finger */
.at-seek{background:transparent;border:1px solid var(--hair-strong);font:inherit;font-family:var(--mono);color:var(--ink);cursor:pointer;line-height:1.5;position:relative;min-height:32px;padding:0 10px;display:inline-flex;align-items:center;font-size:var(--fs-ui)}
@media (hover:hover){
  .at-seek:hover{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
}
.at-seek:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.rp-sticky{position:sticky;top:var(--app-top,69px);z-index:6;background:var(--ground);box-shadow:0 8px 0 var(--ground)}
/* Community styles (fix round, one owner). Markup in js/app/shared.js (app-community). Loads last, so it overrides app.css and ui-producer.css. */
/* points strip: above the feed at every width */
.cm-strip{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--hair-strong);background:var(--paper)}
.cm-strip p{margin:0;font-size:var(--fs-body-s);line-height:1.45;flex:1 1 320px;min-width:0}
.cm-strip .btn{min-height:44px;flex:0 0 auto}
/* first visit with an email-prefix name */
.name-nudge{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--on-accent);background:var(--accent);color:var(--on-accent)}
.name-nudge label{display:grid;gap:2px}
.name-nudge .muted{color:inherit;opacity:.8}
.name-nudge .row{gap:8px;flex-wrap:nowrap}
.name-nudge input{flex:1;min-width:0;min-height:44px}
.name-nudge .btn{min-height:44px;background:var(--ink);color:var(--paper);border-color:var(--ink)}
.comm > .aside{display:none}
/* channel list: links, with the last activity on the right */
.chans a{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 14px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);font-size:var(--fs-body-s)}
.chans a[hidden]{display:none}
.chans a .ch-n{flex:1;min-width:0}
.chans a .ch-when{font-family:var(--mono);font-size:var(--fs-micro);color:var(--muted);white-space:nowrap}
.chans a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.chans a[aria-current="page"] .ch-when{color:var(--on-accent)}
.chans a:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  .chans a:not([aria-current]):hover{background:var(--mint)}
}
@media (max-width:960px){
  .chans a{border-bottom:0;border-right:1px solid var(--hair);white-space:nowrap;flex:0 0 auto;min-height:48px}
}
/* feed head: which channel, and what it is for */
.feed-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 18px;border-bottom:1px solid var(--hair)}
/* composer: grows to four lines, the track picker and Post sit under it */
.cm-composer{display:grid;gap:8px;padding:12px}
.cm-composer textarea{width:100%;min-height:44px;max-height:calc(4 * 1.45em + 22px);resize:none;line-height:1.45;padding:10px 13px;display:block;overflow-y:auto}
.cm-composer-row{display:flex;align-items:center;gap:8px;min-width:0}
.cm-composer-row .sp{flex:1}
.cm-composer .att{max-width:min(320px,100%);min-width:0;min-height:44px;font-size:var(--fs-small);flex:0 1 auto}
.cm-post{min-width:80px;min-height:44px}
.cm-post:disabled{opacity:.45;cursor:default}
.composer-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:600px){
  .cm-composer .att{max-width:none;flex:1 1 auto;padding-right:26px}
}
.post-by{gap:8px;flex-wrap:wrap}
.post-x{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.post-acts .chip{min-height:44px}
.post-pts{flex:1 1 200px;min-width:0}
.pts-earned{font-family:var(--mono);font-size:var(--fs-caption);font-weight:500;background:var(--accent);color:var(--on-accent);border:1px solid var(--on-accent);padding:2px 8px;white-space:nowrap}
.cm-empty .empty{padding-block:40px}
/* loading: two grey post skeletons */
.post-skel{display:grid;grid-template-columns:30px 1fr;gap:10px 12px;padding:18px;border-bottom:1px solid var(--hair)}
.post-skel span{width:30px;height:30px;border-radius:var(--r-round);background:var(--viz)}
.post-skel i{grid-column:2;display:block;height:12px;background:var(--viz);animation:cmPulse 1.1s ease-in-out infinite alternate}
.post-skel i:first-of-type{width:40%}
.post-skel i:last-of-type{height:56px}
@keyframes cmPulse{from{opacity:.5}to{opacity:1}}
.reply .row{gap:8px;flex-wrap:wrap;align-items:center}
.reply.flash{animation:cmFlash 1.4s ease-out}
@keyframes cmFlash{from{box-shadow:-14px 0 0 -10px var(--accent-deep);background:var(--accent)}to{box-shadow:none;background:transparent}}
.at-seek::after{content:"";position:absolute;inset:-6px -2px}
/* reply form: the text gets the full width; time and Reply share the row under it */
.rp-form{display:grid;gap:6px;margin-top:4px}
.rp-x{width:100%;min-height:44px;max-height:calc(5 * 1.45em + 22px);resize:none;line-height:1.45;padding:10px 13px;display:block;overflow-y:auto}
.rp-hint{margin:0;font-family:var(--mono);font-size:var(--fs-caption);color:var(--muted)}
.rp-hint:empty{display:none}
.rp-row{display:flex;align-items:center;gap:8px;min-width:0}
.rp-row .sp{flex:1}
.rp-add{min-height:44px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rp-at{width:96px;flex:0 0 96px;min-height:44px}
.rp-send{min-height:44px;min-width:80px}
@media (max-width:600px){
  .rp-row{flex-wrap:wrap}
  .rp-at{flex:1 1 80px;width:auto}
  .rp-row .sp{display:none}
  .rp-send{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .reply.flash,.post-skel i{animation:none}
}

/* ---------- sharing (phase 2): share options, download state, favourites, reports, useful ---------- */
.sh-opts{display:grid;gap:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--hair)}
.sh-modes{border:0;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.sh-modes legend{font-size:var(--fs-caption);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2);padding:0}
.sh-mode{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3);border:1px solid var(--hair);background:var(--paper);cursor:pointer;min-height:44px}
.sh-mode:has(input:checked){border-color:var(--hair-strong);background:var(--mint)}
.sh-mode input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px}
.sh-mode > span,.sh-sw > span{display:grid;gap:2px;min-width:0}
.sh-mode b,.sh-sw b{font-weight:600;font-size:var(--fs-body-s)}
.sh-mode small,.sh-sw small{font-size:var(--fs-small);color:var(--muted);line-height:1.4}
.sh-rights{font-weight:500}
.sh-opts .check > input,.sh-opts .sh-mode > input,.sheet .sh-mode > input,.sheet .check > input{width:20px;height:20px;min-height:0;flex:0 0 20px;margin:1px 0 0;padding:0}
.chip.is-locked{color:var(--muted);border-style:dashed}
.post-dl:empty,[data-favs]:empty{display:none}
.fav-badge{margin:0;justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-family:var(--mono);letter-spacing:.02em;padding:4px 8px;background:var(--accent);color:var(--on-accent);border:1px solid var(--hair-strong)}
[data-badge]:empty{display:none}
.cm-fav[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--hair-strong)}
.post-state{margin:0;font-size:var(--fs-small);padding:var(--sp-2) var(--sp-3);border-left:3px solid var(--warn);background:var(--warn-bg);color:var(--ink)}
.post-state.bad{border-left-color:var(--bad);background:var(--bad-bg)}
.post.is-hidden .post-x,.post.is-hidden .post-player{opacity:.6}
.reply-acts{gap:var(--sp-2);margin-top:var(--sp-2)}
.reply-acts .chip{min-height:36px}
.useful-tag{font-family:var(--mono);color:var(--ok)}
.rate-line{margin:0 0 var(--sp-2)}
@media (max-width:600px){
  .post-acts .cm-more{margin-left:auto}
  .reply-acts .chip{min-height:44px}
}

/* Feedback exchange (v3.3.13): counter, track rows with their own player, review sheet */
.ex-count{display:flex;flex-direction:column;justify-content:center;gap:18px}
.ex-count .bigstat{line-height:1;padding-bottom:.06em}
.ex-count p{margin:0}
.ex-list{margin-top:20px}
.ex-item{border-bottom:1px solid var(--hair)}
.ex-item:last-child{border-bottom:0}
.ex-item .li{border-bottom:0;padding-bottom:8px}
.ex-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.ex-title{font-size:17px}
.ex-player{padding:0 16px 14px}
.pf-when{gap:10px;align-items:end;flex-wrap:wrap;margin-top:12px}
.pf-when .field{flex:0 0 140px}
.cm-up{position:relative;overflow:hidden;min-height:44px;white-space:nowrap}
.cm-up.is-busy{opacity:.55;pointer-events:none}
.cm-composer .upslot:not(:empty){margin-top:10px}
/* monthly challenge entries: row + its own player */
.ch-entry{border-bottom:1px solid var(--hair)}
.ch-entry:last-child{border-bottom:0}
.ch-entry .li{border-bottom:0;padding-bottom:6px}
.ch-player{padding:0 16px 12px}
/* monthly challenge (v3.3.14): the brief on top, the entries full width below so the players are full size */
.ch-top .panel-blue{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;padding:32px;border:1px solid var(--hair-strong)}
.ch-top .panel-blue .stack{max-width:62ch}
.ch-entries{margin-top:20px}
.ch-entries .ch-player{padding:0 0 14px}

/* ---------- v3.3.14 community: chat layout (channels | feed with the message box at the bottom) ---------- */
.cm2-wrap{padding-top:20px}
.cm2{display:grid;grid-template-columns:240px minmax(0,1fr);border:1px solid var(--hair-strong);background:var(--paper);min-height:480px}
.cm2-side{border-right:1px solid var(--hair-strong);display:flex;flex-direction:column;gap:2px;padding:10px 0;overflow:auto;min-height:0}
.cm2-h{margin:12px 14px 4px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cm2-h:first-child{margin-top:4px}
.cm2 .chans{border-right:0;display:flex;flex-direction:column}
.cm2 .chans a{min-height:40px;border-bottom:0;padding:8px 14px}
.cm2-none{padding:4px 14px 8px;display:block}
.cm2-new{margin:6px 14px 0;align-self:flex-start}
.cm2-rules{margin:auto 14px 4px;padding-top:14px;text-align:left}
.ch-lock{width:12px;height:12px;fill:currentColor;vertical-align:-1px}
.cm2-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cm2-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--hair)}
.cm2-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm2-title b{font-size:17px}
.cm-chip{font-family:var(--mono);font-size:var(--fs-micro);border:1px solid var(--hair-strong);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap;text-decoration:none;color:var(--ink)}
a.cm-chip:hover{background:var(--accent)}
.cm2-note{margin:0;padding:10px 18px;background:var(--mint);border-bottom:1px solid var(--hair)}
.cm2-feed{flex:1;min-height:0;overflow:auto;display:block;overscroll-behavior:contain}
.cm2-scroll{flex:1;min-height:0;overflow:auto;padding:18px}
.cm2-bottom{border-top:1px solid var(--hair-strong);background:var(--paper);display:grid;gap:8px;padding:10px 12px}
.cm2-bottom .cm-composer{padding:0;border:0}
.cm2-bottom .composer-note{padding:0}
.cm2-nudge{padding:10px 12px;gap:6px}
.cm2-nudge label{display:block}
.cm2 .feed > #feedBody > #posts > .post:last-child{border-bottom:0}
@media (max-width:960px){
  .cm2-wrap{padding-top:8px}
  .cm2{grid-template-columns:1fr;min-height:0}
  .cm2-side{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--hair-strong);padding:0;overflow-x:auto;overflow-y:hidden}
  .cm2-h,.cm2-none{display:none}
  .cm2 .chans{flex-direction:row}
  .cm2 .chans a{white-space:nowrap;border-right:1px solid var(--hair);min-height:46px}
  .cm2-new,.cm2-rules{margin:0 10px;white-space:nowrap;flex:0 0 auto}
  .cm2-feed{overflow:visible}
  .cm2-bottom{position:sticky;bottom:calc(var(--player-h,64px) + env(safe-area-inset-bottom,0px));z-index:3}
}
/* chat feel: few posts sit at the bottom near the box, light action buttons, a compact box */
.cm2-feed > #feedBody{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.cm2 .post{padding:12px 18px}
.cm2 .post-acts{gap:2px}
.cm2 .post-acts .chip{border-color:transparent;background:transparent;min-height:34px;padding:4px 10px}
.cm2 .post-acts .chip:hover{background:var(--mint);border-color:var(--hair)}
.cm2 .post-acts .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--on-accent)}
.cm2-bottom .cm-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.cm2-bottom .cm-composer #pt{grid-column:1;grid-row:1;min-height:44px;max-height:160px;resize:none}
.cm2-bottom .cm-composer .cm-composer-row{grid-column:1 / -1;grid-row:2}
.cm2-bottom .cm-composer .cm-composer-row .sp{display:none}
.cm2-bottom .cm-composer .cm-post{grid-column:2;grid-row:1;min-height:44px}
.cm2-bottom .cm-composer .upslot,.cm2-bottom .cm-composer .sh-opts{grid-column:1 / -1}
.cm2-wrap.app-wrap{padding-top:16px}
.cm2-foot{margin-top:auto;padding:10px 12px;border-top:1px solid var(--hair)}
.cm2-side{padding-bottom:0}
@media (max-width:960px){ .cm2-foot{margin:0 10px;padding:0;border:0;flex:0 0 auto} .cm2-foot .btn{white-space:nowrap} }
/* feedback vs reply (v3.3.14) */
.post-name{font-weight:700;color:var(--ink);text-decoration:none}
.post-name:hover{text-decoration:underline}
.cm-fb{font-weight:600}
.cm2 .post-acts .cm-fb{border-color:var(--hair-strong)}
.fb-tag{font-size:var(--fs-micro);padding:1px 6px}
.fb-count{margin-left:4px}
.rp-fb{border:1px solid var(--hair-strong);padding:10px;background:var(--mint)}
.rp-fb-h{margin:0 0 6px}
.rp-switch{margin-left:4px}

/* v3.3.15 community fixes (26 Sep 2026) */
/* 1. the page itself never scrolls past the chat layout on desktop: the box is sized to the window (fitCommunity),
   so the main area keeps only a small gap under it; the one grid row cannot grow past the box */
@media (min-width:961px){
  .app-main:has(.cm2-wrap){padding-bottom:12px}
  .cm2{grid-template-rows:minmax(0,1fr)}
}
@media (max-width:960px){ .app-main:has(.cm2-wrap){padding-bottom:0} }
/* search, time filter, older posts */
.cm2-head{flex-wrap:wrap}
.cm2-tools{flex:1 1 100%;display:flex;gap:8px;align-items:center;min-width:0}
.cm2-tools input[type=search]{flex:1 1 200px;min-width:0;min-height:38px;padding:6px 12px 6px 38px;background-position:12px center}
.cm2-tools select{flex:0 0 auto;min-height:38px;width:auto;font-size:var(--fs-small)}
.cm2-tools .btn{flex:0 0 auto;white-space:nowrap;min-height:38px}
.cm2-hits{margin:0;padding:8px 18px;border-bottom:1px solid var(--hair);background:var(--mint)}
.cm2 .post[hidden],#feedBody[hidden],.cm-res[hidden],.cm-older[hidden]{display:none}
.cm-older{display:flex;justify-content:center;padding:12px 18px;border-bottom:1px solid var(--hair)}
.cm-res-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--paper);z-index:1}
.cm-hit{display:grid;gap:4px;padding:12px 18px;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.cm-hit:hover{background:var(--mint)}
.cm-hit:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.cm-hit-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cm-hit-ch{font-family:var(--mono);font-size:var(--fs-micro);border:1px solid var(--hair-strong);padding:1px 6px}
.cm-hit-x{font-size:var(--fs-body-s);color:var(--muted);overflow-wrap:anywhere}
@media (max-width:600px){
  .cm2-tools{flex-wrap:wrap}
  .cm2-tools input[type=search]{flex:1 1 100%}
  .cm2-tools select{flex:1 1 auto}
}
/* favourite badge: opens the artist's page; several artists open a small list */
a.fav-badge{text-decoration:none;cursor:pointer}
a.fav-badge:hover,.fav-more summary:hover{text-decoration:underline}
.fav-more{justify-self:start}
.fav-more summary{cursor:pointer;list-style:none}
.fav-more summary::-webkit-details-marker{display:none}
.fav-list{margin:6px 0 0;padding:6px 0;list-style:none;border:1px solid var(--hair-strong);background:var(--paper);display:grid;min-width:180px}
.fav-list li a,.fav-list li span{display:block;padding:6px 12px;font-size:var(--fs-small);color:var(--ink)}
.fav-list li a:hover{background:var(--mint)}
/* Share your music: one plain line under the box */
.cm2-bottom .cm-share-note{margin:0}
/* feedback exchange in the chat layout */
.ex2{display:grid;gap:18px;align-content:start}
.ex2-diff{display:grid;border:1px solid var(--hair-strong)}
.ex2-diff p{margin:0;display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:10px 14px;font-size:var(--fs-body-s)}
.ex2-diff p + p{border-top:1px solid var(--hair)}
.ex2-diff p.is-here{background:var(--mint)}
.ex2-steps{margin:0;padding:0;list-style:none;counter-reset:ex;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ex2-steps li{counter-increment:ex;display:grid;gap:4px;align-content:start;padding:12px 14px 12px 48px;border:1px solid var(--hair);position:relative;font-size:var(--fs-body-s)}
.ex2-steps li::before{content:counter(ex);position:absolute;left:14px;top:11px;width:24px;height:24px;border:1px solid var(--hair-strong);border-radius:var(--r-round);display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-micro)}
.ex2-steps li.is-done::before{content:"✓";background:var(--accent);color:var(--on-accent)}
.ex2-queue{margin:0;padding:10px 14px;border:1px solid var(--hair)}
.ex2-queue.is-in{background:var(--accent);color:var(--on-accent);border-color:var(--hair-strong)}
.ex2-queue.is-in .muted{color:inherit;opacity:.8}
.ex2-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
.ex2-form .field{flex:1 1 240px;margin:0}
.ex2-h{margin:4px 0 -8px}
.ex2-list{display:grid;border:1px solid var(--hair-strong)}
.ex2-item + .ex2-item{border-top:1px solid var(--hair)}
.ex2-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px 8px}
.ex2-item .ex-player{padding:0 14px 12px}
.ex2-item.is-done .ex-meta b{color:var(--muted)}
@media (max-width:760px){
  .ex2-steps{grid-template-columns:1fr}
  .ex2-diff p{grid-template-columns:1fr}
  .ex2-row{flex-wrap:wrap}
}
/* track picker and Upload a track: the same size, side by side */
.cm2-bottom .cm-composer-row{gap:8px}
.cm2-bottom .cm-composer-row .att,.cm2-bottom .cm-composer-row .cm-up{flex:0 0 200px;width:200px;max-width:200px;height:40px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-small)}
.cm2-bottom .cm-composer-row .att{justify-content:flex-start;padding:0 26px 0 12px}
@media (max-width:600px){ .cm2-bottom .cm-composer-row .att,.cm2-bottom .cm-composer-row .cm-up{flex:1 1 0;width:auto;max-width:none} }

/* css/pages/mentor.css */
/* Mentor app: inbox, feedback workspace, profile editor, earnings. */
.inbox-li{align-items:flex-start}
/* ---------- mentor: requests inbox ---------- */
.inbox-act{flex:0 0 auto;justify-content:flex-end;gap:8px}
.inbox-act .status{align-self:center}
@media (max-width:600px){
  .inbox-li{flex-direction:column;align-items:stretch}
  .inbox-act{justify-content:flex-start;width:100%}
  .inbox-act .btn{flex:1 1 0}
}
/* ---------- mentor: feedback workspace ---------- */
#nf .panel-h{flex-wrap:wrap;row-gap:4px}
#nf .panel-h > b{white-space:nowrap}
@media (max-width:600px){
  #nf .panel-h > span{flex:1 1 100%}
}
/* ---------- mentor: profile photo ---------- */
.photo-edit{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.photo-edit > .stack{flex:1 1 220px;justify-items:start}
.file-vh{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
/* ---------- mentor: earnings ---------- */
.earn-tbl td{vertical-align:top}
@media (max-width:600px){
  .earn-tbl th:nth-child(4),.earn-tbl td:nth-child(4){display:none}
  .earn-tbl th,.earn-tbl td{padding:10px 10px}
}
/* ---------- shell: notifications list keeps the time on one line ---------- */
/* Mentor app styles (fix round, one owner: js/app/mentor.js). Audit: docs/audit-apple/04-mentor.md. */
.m-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- sheets (Accept, Pass, Send) ---------- */
.m-sheet-act{justify-content:flex-end;gap:10px;margin-top:6px}
.m-sheet-act .btn{min-width:120px}
.m-preview{margin:0;padding:12px 14px;border-left:3px solid var(--accent);background:var(--mint);font-size:var(--fs-small);white-space:pre-wrap;max-height:30dvh;overflow:auto}
/* ---------- undo bar ---------- */
.m-undo{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--player-h) + 16px + env(safe-area-inset-bottom,0px));z-index:var(--z-tip);display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--fs-ui);padding:8px 8px 8px 16px;max-width:calc(100% - 32px)}
.m-undo[hidden]{display:none}
.m-undo .btn{background:var(--accent);color:var(--on-accent);min-height:40px}
/* ---------- switch (Taking tracks) ----------
   A clear two-state button (Alex, 26 Sep 2026: the old white knob on yellow looked off).
   On = filled yellow with dark text and "On"; off = outlined, transparent, with "Off". Same in light and dark mode:
   --on-accent is always dark, so text on the yellow stays readable; the outline uses --ink, which flips with the theme. */
button.m-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 10px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:var(--fs-body-s);font-weight:600;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.m-switch-t{position:relative;width:34px;height:20px;flex:0 0 34px;border:1.5px solid currentColor;background:transparent;box-sizing:border-box}
.m-switch-t::after{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;background:currentColor;transition:transform .15s}
.m-switch-s{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;padding-left:10px;border-left:1px solid currentColor;min-width:3ch}
.m-switch-s::after{content:"Off"}
button.m-switch[aria-checked="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.m-switch[aria-checked="true"] .m-switch-t::after{transform:translateX(14px)}
.m-switch[aria-checked="true"] .m-switch-s::after{content:"On"}
@media (hover:hover){button.m-switch[aria-checked="false"]:hover{background:var(--mint)}}
.m-switch:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  button.m-switch,.m-switch-t::after{transition:none}
}
/* ---------- Home ---------- */
.m-open{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:20px}
.m-pause{display:inline-flex;align-items:center;gap:8px}
.m-pause input{min-height:44px}
.m-steps{margin-bottom:20px}
.m-step{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:12px 16px;min-height:44px;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.m-step:last-child{border-bottom:0}
.m-tick{width:24px;height:24px;border:1px solid var(--hair-strong);display:grid;place-items:center;font-size:var(--fs-small);line-height:1}
.m-step.ok .m-tick{background:var(--accent)}
.m-step.ok b{font-weight:500;color:var(--muted)}
.m-kpis{margin-bottom:20px}
.m-kpis > a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* ---------- Inbox ---------- */
.m-tabs{margin-bottom:16px}
.inbox-act .m-act-gap{width:12px}
@media (max-width:760px){
  .m-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gutter,16px));margin-right:calc(-1 * var(--gutter-r,16px));padding:0 var(--gutter-r,16px) 2px var(--gutter,16px)}
  .m-tabs::-webkit-scrollbar{display:none}
  .m-tabs .chip{flex:0 0 auto;min-height:44px}
  .inbox-act .m-act-gap{display:none}
}
/* ---------- Workspace ---------- */
.m-head{align-items:flex-start}
.m-facts{margin:6px 0 0;font-size:var(--fs-body-s)}
.m-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.m-save{font-family:var(--mono);font-size:var(--fs-caption);min-height:1.2em}
.m-save[data-st="error"],.m-save[data-st="offline"]{color:var(--bad)}
.m-ws .panel-h > .small{text-align:right}
.m-pin-row{gap:10px;flex-wrap:wrap;align-items:center}
.m-pin-row .check{align-items:center;min-height:44px}
.m-keys{margin:0}
@media (hover:none){
  .m-keys{display:none}
}
.m-note .m-t{min-height:36px;min-width:52px;padding:0 8px;border:1px solid var(--hair-strong);text-decoration:none;text-align:center}
.m-note.m-flash{background:var(--mint);transition:background-color 1.2s}
.m-note.editing{background:var(--mint)}
.m-note.editing .t{padding-top:10px}
.m-note.editing textarea{min-height:88px}
.m-nudge{gap:10px;align-items:center}
.m-del{color:var(--bad);border-color:var(--bad)}
.m-ok{color:var(--ok)}
.m-ready{margin:0;color:var(--muted)}
.m-ready.ok{color:var(--ok)}
.m-linkbtn{background:none;border:0;padding:0;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:36px}
/* scores: ten tappable segments per axis, no layout shift */
.m-scores summary{cursor:pointer;min-height:36px}
.m-scale{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:var(--fs-micro)}
.m-ax{display:grid;gap:6px}
.m-seg{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.m-seg button{min-height:36px;padding:0;border:1px solid var(--hair);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:var(--fs-caption);cursor:pointer}
.m-seg button[aria-checked="true"]{background:var(--accent);border-color:var(--on-accent);font-weight:600}
.m-seg button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* conversation: collapsible, filtered to this request */
.m-conv > summary{cursor:pointer;list-style:none;min-height:44px}
.m-conv > summary::-webkit-details-marker{display:none}
.m-conv > summary::after{content:"+";font-family:var(--mono);font-size:var(--fs-lead);margin-left:8px}
.m-conv[open] > summary::after{content:"−"}
.m-conv-bar{display:flex;align-items:center;gap:12px;padding:6px 16px;border-bottom:1px solid var(--hair)}
.m-conv:not(.all) .m-other{display:none}
/* Accept / Pass bar: sits at the bottom of the screen while the page scrolls */
.m-bar{position:sticky;bottom:calc(var(--player-h) + env(safe-area-inset-bottom,0px));z-index:20;display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding:12px 0;background:var(--ground);border-top:1px solid var(--hair)}
.m-bar .btn{min-height:48px}
.m-bar .btn:last-child{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:960px){
  /* phone and tablet: one column, ordered around the job, compact player pinned under the top bar */
  .m-ws .m-grid{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .m-ws .m-grid > .m-col{display:contents}
  .m-ws .m-grid > .m-col > *{width:100%;min-width:0}
  .m-o1{order:1}
  .m-o2{order:2}
  .m-o3{order:3}
  .m-o4{order:4}
  .m-o5{order:5}
  .m-o6{order:6}
  .m-o7{order:7}
  .m-player.m-sticky{position:sticky;top:var(--m-top,64px);z-index:15;background:var(--ground);padding-bottom:4px}
  .m-player.m-sticky .player-top{padding:6px 10px;gap:10px}
  .m-player.m-sticky .pbtn{width:44px;height:44px;flex-basis:44px}
  .m-player.m-sticky .pvol{display:none}
  .m-player.m-sticky .player .wave{height:64px}
  .m-head{flex-direction:column;gap:10px}
  .m-head-r{flex-direction:row;align-items:center;text-align:left}
  .m-bar{margin-left:calc(-1 * var(--gutter,16px));margin-right:calc(-1 * var(--gutter-r,16px));padding:10px var(--gutter-r,16px) 10px var(--gutter,16px)}
  .m-bar .btn{flex:1 1 0}
  .m-bar .btn:last-child{flex:2 1 0}
  .m-sheet-act .btn{flex:1 1 0}
}
@media (pointer:coarse){
  .m-ws .chip,.m-seg button,.m-note .m-t,.m-linkbtn{min-height:44px}
}
/* ---------- Earnings ---------- */
.m-bank{margin-bottom:20px;gap:6px;display:grid}
.m-bank p{margin:0}
#pErr:empty{display:none}
.m-dirty{position:sticky;bottom:calc(var(--player-h) + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--paper);border:1px solid var(--hair-strong)}
.m-dirty.on{background:var(--accent);color:var(--on-accent)}
.m-dirty.on .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:760px){
  /* Earnings on phones: keep "You get" and the payout, drop the format column (ui-staff.css hid column 4, which is now the money) */
  .earn-tbl th:nth-child(4),.earn-tbl td:nth-child(4){display:table-cell}
  .earn-tbl th:nth-child(2),.earn-tbl td:nth-child(2){display:none}
}
.m-gother{gap:8px;margin-top:8px;flex-wrap:nowrap}
.m-gother input{flex:1 1 auto;min-width:0}
.m-gc{background:var(--mint)}

/* mentor home: favourites (phase 2) span the whole grid so no half-empty row */
.dash-grid > .m-favs{grid-column:1 / -1}
.m-favs .li{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.m-favs .li > a{min-width:0;text-decoration:none;color:inherit}
.m-favs .li > a b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Favourites list (#app-favourites): a fixed grid, so the rank badge never pushes the title around.
   rank | play | title + who (title wraps to two lines, then an ellipsis) | buttons */
.fav-li{display:grid;grid-template-columns:64px 72px minmax(0,1fr) auto;grid-template-areas:"rank play main act";align-items:center;gap:6px 14px}
.fav-rank{grid-area:rank;display:grid;justify-items:start;line-height:1.1}
.fav-rank b{font-size:var(--fs-h5);font-weight:600;font-variant-numeric:tabular-nums}
.fav-rank small{font-size:var(--fs-micro);color:var(--muted);white-space:nowrap}
.fav-rank.none{color:var(--muted)}
.fav-li .fav-play{grid-area:play;min-width:72px;justify-content:center}
.fav-main{grid-area:main;min-width:0;display:grid;gap:2px}
.fav-t{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.fav-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fav-act{grid-area:act;flex:none;gap:6px;flex-wrap:nowrap}
.fav-act .btn{min-width:120px;justify-content:center}
.fav-player:not(:empty){margin-top:10px}
.fav-count{font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .fav-li{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"rank main" ". play" ". act";align-items:start}
  .fav-rank{padding-top:2px}
  .fav-li .fav-play{justify-self:start;min-width:96px}
  .fav-act{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .fav-act .btn{min-width:0}
  .fav-act .btn:only-child{grid-column:1/-1}
}
/* v3.3.13: quick listen = one column (player, then the answer); the conversation folds away below the work */
.m-one{margin-top:20px}
.m-conv-below{margin-top:20px}
.m-conv-below .m-conv-hint{display:inline}
.m-meet-new{gap:8px;flex-wrap:wrap}
.dash-grid.one{grid-template-columns:minmax(0,1fr)}

/* css/pages/admin.css */
/* Admin app: today, requests, mentors, people, settings. */
/* admin */
.admin-tabs{display:none}
@media (max-width:960px){
  /* phone and tablet: one scrolling line of sections, no visible scrollbar */
  .admin-tabs{display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;gap:8px;margin-inline:calc(-1 * var(--gutter,16px));padding-inline:var(--gutter,16px)}
  .admin-tabs .chip{white-space:nowrap;flex:0 0 auto}
}
#ab{min-width:0;display:grid;gap:16px;align-content:start}
#ab > *{min-width:0}
.adm .status{text-transform:none;letter-spacing:0;font-size:var(--fs-caption)}
.adm .status.paid,#sheet .status.paid{color:var(--info);background:var(--info-bg);border-color:var(--info)}
.adm-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.adm-chips::-webkit-scrollbar{display:none}
.adm-chips .chip{flex:0 0 auto;white-space:nowrap}
.adm-bar{gap:12px;flex-wrap:wrap}
.adm-bar p{flex:1 1 320px;margin:0}
@media (max-width:960px){
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tabs .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
}
/* ---------- admin Today ---------- */
#ab .group-h{margin:4px 0 10px}
.task-list{list-style:none;margin:0;padding:0;border:1px solid var(--hair-strong);background:var(--paper)}
.task-list li{display:flex;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid var(--hair)}
.task-list li:last-child{border-bottom:0}
.task-list li > span{flex:1 1 auto;min-width:0;font-size:var(--fs-body);line-height:1.4}
.task-list li .btn{flex:0 0 auto}
.task-clear{margin:0;padding:18px 16px;border:1px solid var(--hair-strong);background:var(--paper);font-size:var(--fs-body)}
.numbers{border:0;border-top:1px solid var(--hair-strong);padding:14px 0 0;margin:0;background:none}
.numbers > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px}
.numbers > summary::-webkit-details-marker{display:none}
.numbers > summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:var(--fs-lead)}
.numbers[open] > summary::after{content:"−"}
.num-h{font-family:var(--mono);font-size:var(--fs-caption);font-weight:500;color:var(--muted);margin:16px 0 8px}
.kpi-go{position:absolute;top:10px;right:12px;font-style:normal;font-family:var(--mono);font-size:var(--fs-ui);color:var(--muted)}
@media (max-width:600px){
  .task-list li{gap:12px;padding:12px 14px}
  .task-list li > span{font-size:var(--fs-body-s)}
  .task-list li .btn{min-height:44px;min-width:76px;justify-content:center}
}
.act-row{gap:6px;flex-wrap:wrap}
.adm .act-row .btn.sm,.adm .rq-act .btn.sm{min-height:32px;padding:0 12px}
/* action buttons: one size. The main action spans the row; the follow-ups sit side by side under it (links and buttons alike) */
.adm .act-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;max-width:240px;margin-left:auto}
.adm .act-row > .btn:first-child:not(:only-child){grid-column:1/-1}
.adm .act-row > .btn:only-child,.adm .act-row > .btn:nth-child(2):last-child{grid-column:1/-1}
.adm .act-row .btn.sm{height:32px;justify-content:center;text-align:center;white-space:nowrap;padding:0 8px}
.act-note{display:block;margin-bottom:6px}
.m-id{gap:10px;flex-wrap:nowrap}
.m-status{display:grid;gap:6px;justify-items:start}
.m-mail{overflow-wrap:anywhere}
.m-tbl td{vertical-align:top}
.adm .mini-photo{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-round)}
.adm .mini-photo img{object-fit:cover}
.rq-tbl td{vertical-align:top}
.rq-tbl td.act{min-width:190px}
.due-soon{color:var(--warn);font-weight:500}
.due-late{color:var(--bad);font-weight:500}
.rq-stats{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--hair-strong);background:var(--paper)}
.rq-stats > span{flex:1 1 150px;padding:10px 14px;border-right:1px solid var(--hair);display:grid;gap:2px}
.rq-stats > span:last-child{border-right:0}
.rq-stats small{font-size:var(--fs-caption);color:var(--muted)}
.rq-stats b{font-size:var(--fs-lead);font-weight:500}
.pay-warn{gap:6px;padding:12px 14px}
.pay-warn .row{gap:8px;flex-wrap:nowrap}
.how{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px;border:1px dashed var(--hair-strong)}
.how span{flex:1 1 300px}
.pay-mode{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);border-top:1px solid var(--hair);padding-top:12px}
.app-links a{overflow-wrap:anywhere}
/* request cards: shown under 1100 px instead of the table (compact, one next step) */
.rq-cards{display:none}
.rq-card{border:1px solid var(--hair-strong);background:var(--paper);padding:12px 14px;display:grid;gap:6px}
.rq-card + .rq-card{margin-top:10px}
.rq-l1{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rq-l1 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-price{font-weight:500;white-space:nowrap}
.rq-l2{color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rq-l3{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.rq-act{display:flex;gap:8px;align-items:center;margin-top:4px}
.rq-act > .btn{flex:1 1 auto;justify-content:center}
.more{position:relative;flex:0 0 auto;border:0!important;padding:0!important;margin:0!important;background:none}
.more > summary{list-style:none;cursor:pointer}
.more > summary::-webkit-details-marker{display:none}
.more-pop{position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;display:grid;gap:6px;padding:8px;background:var(--paper);border:1px solid var(--hair-strong);box-shadow:4px 4px 0 var(--accent);min-width:190px}
.more-pop .btn{width:100%;justify-content:center}
@media (max-width:1099px){
  .rq-tbl{display:none}
  .rq-cards{display:block}
}
@media (max-width:600px){
  .rq-act .btn,.rq-act summary.btn{min-height:44px!important}
}
@media (max-width:700px){
  /* stacked cards: generic admin tables on phones, the Mentors table under 1100 px */
  .scroll-seg{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .scroll-seg .chip{white-space:nowrap;flex:0 0 auto}
  /* phones: the Mentors card is the same compact card, two columns */
  .m-tbl tr{display:grid!important;grid-template-columns:1fr auto;gap:8px 12px;padding:12px 14px!important}
  .m-tbl td{display:block!important;padding:0!important}
  .m-tbl td[data-label]::before{display:block;margin-bottom:4px;padding:0!important}
  .m-tbl td:first-child{grid-column:1/-1}
  .m-tbl td:nth-child(2){grid-column:1/-1}
  .m-tbl td.act{grid-column:1/-1;margin-top:2px!important}
  .m-tbl td:first-child::before,.m-tbl td:nth-child(2)::before{display:none!important}
  .m-tbl td.act .row{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))!important}
}
/* ---------- admin sheets ---------- */
.adm-form{gap:18px}
.fgroup{border:0;margin:0;padding:0;display:grid;gap:14px;min-width:0}
.fgroup legend{font-family:var(--mono);font-size:var(--fs-caption);color:var(--muted);padding:0 0 8px;margin-bottom:4px;border-bottom:1px solid var(--hair);width:100%}
.adm-form .field > span,#apf .field > span,#pf .field > span,#rf .field > span,#mpf .field > span{text-transform:none;letter-spacing:0}
.slug-help.bad{color:var(--bad)}
.photo-row{gap:14px;align-items:center;flex-wrap:wrap}
.adm-foot{position:sticky;bottom:-24px;z-index:4;margin:0 -24px -24px;padding:12px 24px 16px;background:var(--paper);border-top:1px solid var(--hair-strong);display:grid;gap:8px}
.adm-foot .err:empty{display:none}
.discard{display:grid;gap:8px;padding:10px 12px;background:var(--warn-bg);border:1px solid var(--warn)}
.discard[hidden]{display:none}
.discard p{margin:0}
@media (max-width:760px){
  .adm-foot{bottom:calc(-20px - env(safe-area-inset-bottom,0px));margin:0 calc(-1 * var(--gutter-r,16px)) calc(-20px - env(safe-area-inset-bottom,0px)) calc(-1 * var(--gutter,16px));padding:12px var(--gutter-r,16px) calc(14px + env(safe-area-inset-bottom,0px)) var(--gutter,16px)}
  .adm-foot .row .btn{flex:1 1 0;justify-content:center}
}
.ledger{list-style:none;margin:0;padding:0;border:1px solid var(--hair-strong)}
.ledger li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--hair)}
.ledger li:last-child{border-bottom:0}
.confirm-line{flex:1 1 100%;display:grid;gap:8px}
.confirm-line p{margin:0}
/* ---------- admin: toast with one action (Undo) ---------- */
.adm-toast{position:fixed;z-index:var(--z-tip);right:24px;bottom:calc(var(--player-h,0px) + 24px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px;max-width:min(460px,calc(100% - 32px));padding:12px 14px 14px 16px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--accent);font-family:var(--mono);font-size:var(--fs-ui);line-height:1.4;overflow:hidden;animation:ss-pop .2s ease-out}
.adm-toast[hidden]{display:none}
.adm-toast span{flex:1 1 auto}
.adm-toast-btn{flex:0 0 auto;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);font:inherit;font-weight:600;padding:0 14px;min-height:36px;cursor:pointer}
.adm-toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform-origin:left;animation:adm-drain linear forwards}
@keyframes adm-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:760px){
  .adm-toast{left:16px;right:16px;max-width:none}
  .adm-toast-btn{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .adm-toast{animation:none}
  .adm-toast-bar{animation:none;display:none}
}
/* ---------- admin people: search row controls share one height ---------- */
#ab input[type=search]{border:1px solid var(--hair-strong);background:var(--paper);padding:11px 13px;border-radius:0;font-size:var(--fs-body);-webkit-appearance:none;appearance:none;min-height:46px}
#ab #pCp{min-height:46px}
@media (min-width:701px){
  #ab .panel.stack > .btn.sm{justify-self:start}
}
#mf .grid2,#mf .grid3{align-items:start}
@media (max-width: 960px), (pointer: coarse){
  #acct{min-width:44px;min-height:44px}
}
@media (max-width:600px){
  .rq-stats > span{flex:1 1 0;padding:8px 10px;min-width:0}
  .rq-stats b{font-size:var(--fs-body-s)}
  .rq-stats small{font-size:var(--fs-micro)}
}
.pay-warn .btn{white-space:nowrap;flex:0 0 auto}
.custom-g{gap:8px;flex-wrap:wrap;margin-top:8px}
.custom-g:empty{display:none}
.custom-g .chip{padding-right:4px}
.custom-g .x{border:0;background:none;font:inherit;font-size:var(--fs-body);line-height:1;min-width:28px;min-height:28px;cursor:pointer;color:inherit}
.other-g{gap:8px;flex-wrap:nowrap;margin-top:8px}
.other-g[hidden]{display:none}
.other-g input{flex:1 1 auto;min-width:0}
@media (max-width:600px){
  .rq-card{padding:10px 12px;gap:4px}
  .rq-act{margin-top:2px}
}
.admin-tabs .chip::before{display:none}
/* Radio: who put a track on the radio */
.tag.src-admin{background:var(--accent);color:var(--on-accent);border-color:var(--on-accent)}
.tag.src-comm{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.tag.src-artist{background:var(--mint);color:var(--ink)}
/* reports: one Decide button, the choices explained in a sheet */
.rep-opts{display:grid;gap:8px}
.rep-opt{display:grid;gap:2px;text-align:left;padding:12px 14px;border:1px solid var(--hair-strong);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit}
.rep-opt:hover{background:var(--accent);color:var(--on-accent)}
.rep-opt.danger b{color:var(--bad, #b3261e)}
.rep-opt[aria-pressed="true"]{background:var(--mint)}
/* ==================== Admin review round (Today table, Artists, Requests, Orders, People): tables agent ==================== */
/* Today: headline numbers, then the to-do table. No rule line above More numbers (Alex: the stray line under the to-dos) */
.tk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;border:1px solid var(--hair-strong);background:var(--paper)}
.tk-kpis .tk-tile{position:relative;display:grid;gap:2px;align-content:start;padding:12px 14px;border:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0 -1px -1px 0;color:var(--ink);text-decoration:none;background:none;min-height:0}
.tk-kpis .tk-tile b{font-size:var(--fs-lead);font-weight:500}
.tk-kpis .tk-tile small{font-size:var(--fs-caption);color:var(--ink)}
.tk-sub{font-size:var(--fs-micro);font-family:var(--mono);color:var(--muted)}
.tk-kpis a.tk-tile:hover{background:var(--mint)}
.numbers.tk-numbers{border-top:0;padding-top:0}
.tk-kind{white-space:nowrap}
.tk-text{display:block;min-width:260px;max-width:520px;white-space:normal}
.tk-as{display:grid;gap:4px;min-width:170px;justify-items:start}
.tk-as select{min-height:32px;height:32px;padding:0 30px 0 8px;font-size:var(--fs-small);width:100%;max-width:220px;background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%}
.tk-note{font-size:var(--fs-small);color:var(--muted);white-space:normal;max-width:240px}
.tk-quick{display:inline-flex;gap:6px;flex-wrap:wrap}
/* Artists: Live is a filled chip, photo placeholder keeps dark text on yellow in both themes */
.adm .status.st-fill{background:var(--ok);color:var(--paper);border-color:var(--ok)}
.adm .status.st-fill::before{background:var(--paper)}
.adm .mini-photo{color:var(--on-accent);font-weight:500}
.m-links{display:flex;flex-wrap:wrap;gap:4px 10px;min-width:170px;max-width:220px}
.m-links a{white-space:nowrap}
.m-links-top{max-width:none;gap:8px;margin:0 0 14px}
/* Requests: the "How payments work" guide */
.pay-how{border:1px solid var(--hair-strong);background:var(--paper);padding:0}
.pay-how > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:4px;min-height:44px;padding:0 14px}
.pay-how > summary::-webkit-details-marker{display:none}
.pay-how > summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:var(--fs-lead)}
.pay-how[open] > summary::after{content:"−"}
.pay-steps{margin:0;padding:4px 14px 14px 36px;display:grid;gap:6px;font-size:var(--fs-body-s);line-height:1.45}
.rq-host td.act .act-note{max-width:220px;white-space:normal}
/* People sheet: room between the email and Copy */
.ps-mail{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ps-what{margin:8px 0 14px;padding-left:20px;display:grid;gap:6px}
.ord-sec + .ord-sec{margin-top:14px}
/* the sticky actions cell never squeezes its buttons */
.adm .dt-box td.act .act-row{width:max-content;max-width:none;grid-template-columns:repeat(2,minmax(max-content,1fr))}
/* to-do buttons (Send link, Check, Open…) all the same size */
.todo-act{min-width:112px;justify-content:center;text-align:center}
.act-pay{min-width:120px;justify-content:center}

/* css/components/datatable.css */
/* Admin data tables (SS.views.dataTable in js/app/table.js): search + filters bar, filter panel, chips,
   sortable headers, clickable rows, footer pager. The table scrolls sideways inside its own box on narrow screens. */
.dt{display:grid;gap:10px;min-width:0;max-width:100%}
/* toolbar: search alone on the first row, full width; one tidy row of tools under it, every control the same height */
.dt-bar{display:grid;gap:8px;min-width:0}
.dt-bar .dt-q{width:100%;min-width:0}
.dt-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.dt-tools .btn,.dt-tools .chip,.dt-tools select{height:var(--ctl-h-sm);min-height:var(--ctl-h-sm);box-sizing:border-box;white-space:nowrap}
.dt-tools .btn{padding:0 14px}
.dt-sp{flex:1 1 0}
.dt-sortbox{display:inline-flex;align-items:center;gap:0;min-width:0}
.dt-sortl{font-family:var(--mono);font-size:var(--fs-caption);color:var(--muted);padding:0 8px 0 4px}
.dt-sortsel{width:auto;max-width:220px;padding:0 34px 0 10px;font-family:var(--mono);font-size:var(--fs-caption);background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%}
.dt-sortbox .dt-dir{margin-left:-1px;padding:0 12px}
.dt-sortbox .dt-dir[hidden]{display:none}
/* friendly filter chips: Any / More than 0 / Top 10, Any time / Last 7 days / ... */
.dt-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dt-quick .chip{min-height:30px;padding:0 10px}
.dt-unit{white-space:nowrap}
.dt-panel{border:1px solid var(--hair-strong);background:var(--paper);padding:var(--sp-4);display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--sp-4) var(--sp-5);align-items:start}
.dt-panel-foot{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:var(--sp-3)}
.dt-multi{max-height:196px;overflow:auto;border:1px solid var(--hair);padding:2px 10px;background:var(--paper)}
.dt-multi .check{min-height:34px;padding-block:6px;margin-block:0;font-size:var(--fs-small);line-height:20px}
.dt-multi .check input{width:18px;height:18px;flex-basis:18px}
.dt-range{display:flex;gap:6px;align-items:center;min-width:0}
.dt-range input{min-width:0;flex:1 1 0}
.dt-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dt-chip{background:var(--mint);max-width:100%;white-space:normal;text-align:left}
.dt-chip span[aria-hidden]{font-size:15px;line-height:1;margin-left:2px}
.dt-chips .link{margin-left:6px}
/* the box: the table scrolls sideways inside it, never the page */
.dt-box{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.dt-box td.act .btn{white-space:nowrap}
.dt-box table{min-width:100%}
.dt-box th{white-space:nowrap;vertical-align:bottom}
.dt-box td{vertical-align:top}
.dt-box td.num{white-space:nowrap}
.dt-box td.act{white-space:nowrap}
.dt-box td.act .row{flex-wrap:nowrap;gap:6px}
.dt-sort{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:28px;text-align:left}
.dt-sort:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dt-arrow{color:var(--muted);font-size:12px}
th[aria-sort="ascending"] .dt-arrow,th[aria-sort="descending"] .dt-arrow{color:var(--ink)}
th.num .dt-sort{flex-direction:row-reverse}
.dt-box tr.dt-click{cursor:pointer}
.dt-box tr.dt-click:hover td{background:var(--mint)}
.dt-box tr.dt-click:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.dt-box tbody tr:last-child td{border-bottom:0}
.dt-box table{margin:0}
.dt-box tbody tr:last-child td,.dt-box tbody tr:last-child td > *:last-child{margin-bottom:0}
/* the actions column stays in view on the right, even when the table scrolls sideways */
.dt-box th.act-h,.dt-box td.act{position:sticky;right:0;z-index:1;background:var(--paper);box-shadow:inset 1px 0 0 var(--hair)}
.dt-box tr.dt-click:hover td.act{background:var(--mint)}
.dt-box .pad{padding:var(--sp-4)}
.dt-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.dt-pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dt-size{display:inline-flex;gap:6px;align-items:center}
.dt-size select{width:auto;min-height:var(--ctl-h-sm);padding:4px 30px 4px 10px;font-size:var(--fs-small)}
.dt-emails{font-family:var(--mono);font-size:var(--fs-small)}
/* cell helpers used by the admin tables */
.dt-who{display:flex;gap:10px;align-items:center;min-width:180px}
.dt-sub{display:block;color:var(--muted);font-size:var(--fs-small)}
.dt-wrap{min-width:140px;max-width:260px;white-space:normal}
.dt-stack{display:flex;flex-wrap:wrap;gap:4px}
/* person sheet */
.ps-dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 14px;margin:14px 0}
.ps-dl dt{font-family:var(--mono);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:3px}
.ps-dl dd{margin:0;overflow-wrap:anywhere}
.ps-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.ps-list li{border-top:1px solid var(--hair);padding-top:10px}
@media (max-width:600px){
  .dt-sp{display:none}
  .dt-sortbox{flex:1 1 100%}
  .dt-sortsel{flex:1 1 auto;max-width:none}
  .dt-foot{justify-content:flex-start}
  .ps-dl{grid-template-columns:1fr;gap:2px 0}
  .ps-dl dd{margin-bottom:8px}
}
.dt-why{display:block;min-width:220px;max-width:360px;white-space:normal}
.dt-range:has(input[type=date]){flex-wrap:wrap}
.dt-range input[type=date]{min-width:140px}
@media (max-width:700px){ .dt-box th.act-h,.dt-box td.act{position:static;box-shadow:none} }

/* css/pages/admin-radio.css */
/* admin Radio tab (js/app/admin-radio.js), plus the clickable reason line on the radio bar and the #radio page */
.ar{min-width:0}
.ar-intro{margin:0 0 14px;padding:10px 14px;border:1px solid var(--hair);background:var(--paper);max-width:90ch;font-size:var(--fs-body-s)}
.ar-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:12px}
.ar-tabs{display:flex;flex-wrap:wrap;gap:6px}
.ar-tabs .chip{white-space:nowrap}
.ar-note{margin:0 0 10px;max-width:80ch}
.ar-foot{margin-top:14px}
.ar-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.ar-bar .sp,.ar-head .sp{flex:1 1 auto}
.ar-filt{gap:6px}
.ar-stack{gap:28px}
.ar-sec{display:grid;gap:6px;min-width:0}
.ar-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ar-head .h4{margin:0}
/* rows: everything vertically centred so play button, title, reasons and buttons line up */
.ar-tbl{overflow-x:auto}
.ar-tbl td,.ar .dt-box td{vertical-align:middle}
.ar-now table{width:100%;border-collapse:collapse}
.ar-now th.ar-pos,.ar-now td.ar-pos{width:56px;white-space:nowrap}
.ar-now th.ar-ord,.ar-now td.ar-ord{width:96px;white-space:nowrap}
.ar-now tr[draggable="true"]{cursor:grab}
.ar-now tr.ar-dragging{opacity:.45}
.ar-now tr.ar-over td{box-shadow:inset 0 2px 0 var(--ink)}
.ar-grip{display:inline-block;width:8px;height:14px;margin-right:8px;vertical-align:-2px;background:radial-gradient(circle,var(--muted) 1.2px,transparent 1.5px) 0 0/4px 4px;opacity:.7}
.ar .dt-box tr.ar-live td{background:var(--mint)}
.ar .dt-box tr.ar-live td.act{background:var(--mint)}
.ar-track{display:flex;align-items:center;gap:10px;min-width:0}
.ar-tt{min-width:0;overflow-wrap:anywhere}
.ar-title{font-weight:600;color:var(--ink);text-decoration:none}
.ar-title:hover{text-decoration:underline}
.ar-play{flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-strong);background:var(--paper);color:var(--ink);cursor:pointer}
.ar-play svg{width:14px;height:14px;fill:currentColor}
.ar-play:hover,.ar-play:focus-visible,.ar-play.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ar-why{display:block;font-size:var(--fs-small);line-height:1.35}
.ar-check{display:inline-grid;place-items:center;min-width:34px;min-height:34px;cursor:pointer}
.ar-check input{width:18px;height:18px;accent-color:var(--ink);cursor:pointer}
.ar-check input:disabled{cursor:default;opacity:.35}
/* the one action per row: same width in both states, so the column never jumps */
.ar-state{display:grid;grid-template-columns:auto 150px;align-items:center;justify-content:end;gap:10px}
.ar-state > :only-child{grid-column:2}
.ar-state .btn{width:150px}
.ar-onlbl{font-family:var(--mono);font-size:var(--fs-caption);color:var(--ok);white-space:nowrap}
.ar-nolbl{white-space:normal;text-align:right;line-height:1.3}
.ar-move{display:inline-flex;gap:4px}
.ar-ico{min-width:36px;padding-left:0;padding-right:0;justify-content:center}
.ar-prow td{background:var(--paper);padding:8px 12px 14px}
@media (max-width:760px){
  .ar-now table,.ar-now thead,.ar-now tbody,.ar-now tr,.ar-now td,
  .ar .dt-box table,.ar .dt-box thead,.ar .dt-box tbody,.ar .dt-box tr,.ar .dt-box td{display:block;width:100%}
  .ar-now thead,.ar .dt-box thead{display:none}
  .ar-now tr,.ar .dt-box tr{position:relative;padding:12px;border-bottom:1px solid var(--hair);box-sizing:border-box}
  .ar-now tr{padding-left:48px}
  .ar-now td,.ar .dt-box td{padding:3px 0;text-align:left;border:0;box-sizing:border-box}
  .ar .dt-box td.num,.ar-now td.num{text-align:left}
  .ar-now td.ar-pos{position:absolute;left:12px;top:18px;width:32px}
  .ar-now td.ar-pos .ar-grip{display:none}
  .ar-now td.ar-ord{width:auto}
  .ar-now td[data-label]:not([data-label=""]):not(.ar-pos)::before,
  .ar .dt-box td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:var(--fs-micro);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
  .ar-now td[data-label="Track"]::before{display:none}
  .ar .dt-box tr:has(td.ar-selc){padding-left:52px}
  .ar .dt-box td.ar-selc{position:absolute;left:10px;top:14px;width:auto;padding:0}
  .ar .dt-box tr.ar-live{background:var(--mint)}
  .ar .dt-box tr.ar-live td,.ar .dt-box tr.ar-live td.act{background:transparent}
  .ar .dt-box td.act,.ar-now td.act{position:static;box-shadow:none;background:transparent;padding-top:8px}
  .ar-state{grid-template-columns:1fr 1fr;justify-content:stretch}
  .ar-state > :only-child{grid-column:1 / -1}
  .ar-state .btn{width:100%}
  .ar-nolbl{text-align:left}
  .ar-prow{padding:0 0 12px !important}
  .ar-prow td{padding:0}
  .ar-head .sp,.ar-bar .sp{display:none}
  .ar-bar .btn{flex:1 1 auto}
}

/* admin Reports / Channels / Interest additions (js/app/admin.js: reports, channels, interest) */
.rep-quote{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--hair-strong);overflow-wrap:anywhere}
.rep-msg textarea{width:100%;min-height:140px;resize:vertical}
.ch-people{max-height:60vh;overflow:auto}
.inv-share{margin:12px 0 0;padding:14px;border:1px solid var(--hair)}
.inv-share .h4{margin:0}
.inv-share input[readonly]{width:100%;font-family:var(--mono);font-size:var(--fs-small)}
.inv-share textarea{width:100%;min-height:220px;resize:vertical}
.inv-btns{flex-wrap:wrap;gap:8px}

/* radio bar: the reason line opens the post's thread (js/core/radio.js) */
#rReason.rlink{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;cursor:pointer}
#rReason.rlink:hover{text-decoration-style:solid}
/* #radio page */
.rp-reason-btn{all:unset;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.rp-reason-btn:hover{text-decoration-style:solid}
.rp-reason-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.rp-reason-btn:disabled{cursor:default;text-decoration:none}

/* css/pages/chart.css */
/* Chart page (#app-chart). Tokens only. */
.chart-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.chart-bar .seg{margin:0}
.chart-bar .chip{min-height:var(--ctl-h)}
.chart-month select{min-height:var(--ctl-h);width:auto;min-width:180px}
.chart-rules{max-width:70ch;margin:0 0 var(--sp-5)}
.chart-list{list-style:none;margin:0;padding:0;border:1px solid var(--hair-strong);background:var(--paper)}
.chart-row{display:grid;grid-template-columns:48px var(--ctl-h) minmax(0,1fr) auto 80px;grid-template-areas:"rank play main num open" ". . badge . ." "player player player player player";
  align-items:center;column-gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--hair)}
.chart-row:last-child{border-bottom:0}
.chart-rank{grid-area:rank;font:500 var(--fs-h4)/1 var(--mono);letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums}
.chart-row.top .chart-rank{color:var(--ink)}
.chart-row:not(.top) .chart-rank{color:var(--muted)}
.chart-play{grid-area:play;width:var(--ctl-h);height:var(--ctl-h);border-radius:var(--r-round);border:1px solid var(--ink);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer;padding:0}
.chart-play svg{width:14px;height:14px;fill:currentColor;margin-left:2px}
.chart-play.on{background:var(--ink);color:var(--accent)}
.chart-play:disabled{opacity:.4;cursor:not-allowed}
.chart-play:focus-visible{outline:0;box-shadow:var(--ring)}
.chart-main{grid-area:main;display:grid;gap:2px;min-width:0}
.chart-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
.chart-title:hover{text-decoration:underline;text-underline-offset:3px}
.chart-badge{grid-area:badge;justify-self:start;margin-top:var(--sp-1);white-space:normal}
.chart-num{grid-area:num;display:grid;justify-items:end;gap:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chart-open{grid-area:open;justify-self:stretch}
.chart-player{grid-area:player}
.chart-player:not(:empty){margin-top:var(--sp-3)}
.chart-list.skel .chart-row{height:68px;background:var(--mint);opacity:.5}
@media (max-width:600px){
  .chart-bar{align-items:stretch}
  .chart-bar .seg{width:100%}
  .chart-bar .seg .chip{flex:1}
  .chart-month,.chart-month select{width:100%}
  .chart-row{grid-template-columns:32px var(--ctl-h) minmax(0,1fr) auto;grid-template-areas:"rank play main main" ". . badge badge" ". . num num" "player player player player";column-gap:var(--sp-3);row-gap:var(--sp-1)}
  .chart-rank{font-size:var(--fs-h5)}
  .chart-num{justify-items:start;grid-auto-flow:column;justify-content:start;gap:var(--sp-3)}
  .chart-open{display:none}
}

/* css/pages/card.css */
/* Public track card (#t-<code>): a record sleeve on the left, the proof on the right. Tokens only. */
.tcard-page{padding-block:var(--sp-8) var(--sp-9);display:grid;gap:var(--sp-7);max-width:1080px}
.tcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--hair-strong);background:var(--paper);box-shadow:8px 8px 0 var(--ink)}
.tcard-sleeve{background:var(--accent);color:var(--on-accent);padding:var(--sp-7);display:grid;grid-template-rows:auto 1fr auto;gap:var(--sp-6);aspect-ratio:1/1;min-width:0;border-right:1px solid var(--hair-strong)}
.tcard-top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.tcard-no{font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase}
.tcard-id{align-self:end;display:grid;gap:var(--sp-2);min-width:0}
.tcard-title{margin:0;font-size:clamp(34px,5vw,64px);line-height:.98;letter-spacing:-.035em;font-weight:600;text-wrap:balance;overflow-wrap:anywhere}
.tcard-artist{margin:0;font-size:var(--fs-h5);font-weight:500}
.tcard-meta{margin:0;letter-spacing:.04em;opacity:.8}
.tcard-player{min-width:0}
.tcard-sleeve .player,.tcard-sleeve .wave{color:var(--on-accent)}
.tcard-body{padding:var(--sp-7);display:grid;grid-template-rows:1fr auto;gap:var(--sp-7);min-width:0}
.tcard-proof{display:grid;align-content:start;gap:var(--sp-6);min-width:0}
.tcard-stamp{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;border-top:1px solid var(--hair);padding-top:var(--sp-4);color:var(--muted)}
.tcard-stamp .logo{color:var(--ink)}
.tcard-stamp .logo-word{height:20px}
.tcard-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tcard-nums{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border-top:1px solid var(--hair-strong)}
.tcard-nums div{padding:var(--sp-4) var(--sp-3) var(--sp-4) 0;border-bottom:1px solid var(--hair);display:grid;align-content:start;gap:var(--sp-1)}
.tcard-nums dd{order:-1}
.tcard-nums dd{margin:0;font-size:var(--fs-h3);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tcard-nums dt{font-size:var(--fs-small);color:var(--muted)}
.tcard-quotes{display:grid;gap:var(--sp-4)}
.tcard-fbl{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4)}
.tcard-fb{padding-left:var(--sp-4);border-left:2px solid var(--ink);display:grid;gap:var(--sp-1);min-width:0}
.tcard-fb-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.tcard-fb p{margin:0;font-size:var(--fs-body);line-height:1.5;overflow-wrap:anywhere}
.tcard-at{justify-self:start;background:none;border:0;padding:0;font-size:var(--fs-caption);color:var(--muted);min-height:24px}
button.tcard-at{cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.tcard-logo{color:var(--ink);text-decoration:none;display:inline-flex}
.tcard-foot{margin:0;max-width:64ch}
.tcard-dl .btn{min-height:52px;font-size:var(--fs-body)}
.tcard-dl{display:grid;gap:var(--sp-2)}
.tcard-dl p{margin:0}
.tcard-none{max-width:720px}
@media (max-width:900px){
  .tcard{grid-template-columns:1fr;box-shadow:6px 6px 0 var(--ink)}
  .tcard-sleeve{aspect-ratio:auto;min-height:0;border-right:0;border-bottom:1px solid var(--hair-strong)}
}
@media (max-width:600px){
  .tcard-page{padding-block:var(--sp-6) var(--sp-8);gap:var(--sp-6)}
  .tcard{box-shadow:4px 4px 0 var(--ink)}
  .tcard-sleeve,.tcard-body{padding:var(--sp-5)}
  .tcard-title{font-size:40px}
    }

/* css/pages/radio.css */
/* #radio page (js/public/radio.js): one quiet full screen, deliberately dark in both themes. Tokens only. */
.radio-page body{background:var(--dark);padding-bottom:0}
.rp{min-height:100dvh;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto;gap:24px;background:var(--dark);color:var(--on-dark);
  padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.rp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rp-home{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none}
.rp-home .logo-word{height:22px;width:auto}
.rp-ch{display:flex;gap:4px;flex-wrap:wrap}
.rp-ch button{min-height:44px;padding:0 12px;background:none;border:0;border-bottom:2px solid transparent;color:var(--on-dark-soft);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.rp-ch button:hover{color:var(--on-dark)}
.rp-ch button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.rp-main,.rp-empty{align-self:center;width:100%;max-width:880px;margin-inline:auto;display:grid;gap:28px}
.rp-main[hidden],.rp-empty[hidden]{display:none}
/* the sequencer: 16 steps, downbeats always lit; while playing a step chases along the bar (one bar at 124 BPM) */
.rp-seq{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:clamp(4px,1vw,10px)}
.rp-seq i{display:block;aspect-ratio:1;border:2px solid var(--accent);opacity:.35;border-radius:3px}
.rp-seq i.beat{background:var(--accent);opacity:.9}
.rp.on .rp-seq i{animation:rp-step 1.935s steps(1,end) infinite;animation-delay:calc(var(--i) * 1.935s / 16)}
@keyframes rp-step{0%{background:var(--accent);opacity:1}6.25%,100%{background:transparent;opacity:.35}}
.rp.on .rp-seq i.beat{animation-name:rp-beat}
@keyframes rp-beat{0%{opacity:1;transform:scale(1.08)}6.25%,100%{opacity:.9;transform:none}}
.rp-row{display:flex;align-items:center;gap:clamp(20px,4vw,40px)}
.rp-play{width:96px;height:96px;flex:0 0 96px;border-radius:var(--r-round);border:0;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .12s}
.rp-play svg{width:30px;height:30px;fill:currentColor}
.rp-play:active:not(:disabled){transform:scale(.96)}
.rp-play:disabled{background:transparent;border:2px solid var(--on-dark-soft);color:var(--on-dark-soft);cursor:default}
.rp-play:focus-visible,.rp-ch button:focus-visible,.rp-foot a:focus-visible,.rp-home:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rp-now{min-width:0;display:grid;gap:6px}
.rp-reason{margin:0;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.rp-title{margin:0;font-size:clamp(32px,5.6vw,64px);line-height:1.02;letter-spacing:-.03em;font-weight:500;overflow-wrap:anywhere;text-wrap:balance}
.rp-artist{margin:0;font-size:clamp(17px,2vw,22px);color:var(--on-dark-soft)}
.rp-prog{height:2px;background:var(--on-dark-soft);opacity:.5;position:relative;overflow:hidden}
.rp-prog i{position:absolute;inset:0;background:var(--on-dark);transform-origin:0 50%;transform:scaleX(0)}
.rp.on .rp-prog{opacity:1}
.rp-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rp-next{margin:0;font-family:var(--mono);font-size:var(--fs-caption);color:var(--on-dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.rp-vol{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-soft)}
.rp-vol input{width:140px;accent-color:var(--accent);--fill:var(--accent);--rest:var(--on-dark-soft);--thumb:var(--accent);--thumb-b:var(--accent);height:32px}
.rp-empty p{margin:0;max-width:52ch;color:var(--on-dark-soft);font-size:var(--fs-lead)}
.rp-empty .btn{justify-self:start}
.rp-foot{display:flex;gap:8px 24px;flex-wrap:wrap;align-items:center}
.rp-foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-soft);text-decoration:underline;text-underline-offset:3px;font-size:var(--fs-ui)}
.rp-foot a:hover{color:var(--on-dark)}
.rp-foot a[hidden]{display:none}
.rp-join{color:var(--accent)!important;animation:rp-in .6s ease-out both}
@keyframes rp-in{from{opacity:0}to{opacity:1}}
@media (max-width:600px){
  .rp-row{flex-direction:column;align-items:flex-start}
  .rp-play{width:88px;height:88px;flex-basis:88px}
  .rp-vol{display:none}
  .rp-seq{gap:3px}
  .rp-seq i{border-width:1.5px}
}
@media (prefers-reduced-motion:reduce){
  .rp.on .rp-seq i,.rp.on .rp-seq i.beat,.rp-join{animation:none}
}
.rp-artist a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.rp-artist a:hover{color:var(--accent)}

/* css/pages/profile.css */
/* Public producer page #p-<id> */
.pp{display:grid;gap:22px;max-width:860px;padding-bottom:clamp(32px,5vw,56px)}
.pp-cta{margin-top:16px;padding-top:24px;border-top:1px solid var(--hair)}
.pp-tracks{margin:0}
.pp-head{display:flex;align-items:center;gap:20px}
.pp-head .av{font-size:24px}
.pp-name{margin:0;text-wrap:balance}
.pp-genres{gap:6px}
.pp-bio{margin:0;max-width:60ch}
.pp-links{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.pp-link{flex-direction:column;align-items:flex-start;gap:2px;height:auto;padding:10px 16px}
.pp-link small{color:var(--muted);font-size:12px}
.pp-mail{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border:1px solid var(--hair);padding:10px 16px}
.pp-own{margin:0}
@media (max-width:600px){.pp-head{align-items:flex-start}.pp-links > *{flex:1 1 100%}}

/* css/pages/invite.css */
/* #invite-<data>: shareable invite for suggested artists / engineers / studios (js/public/invite.js) */
.inv{padding-bottom:clamp(40px,6vw,80px)}
.inv .h1{overflow-wrap:anywhere}
.inv-grid{display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start;max-width:880px}
.inv-count{display:grid;gap:6px;padding:20px;border:1px solid var(--hair-strong)}
.inv-count .bigstat{font-size:clamp(48px,7vw,72px);line-height:1}
.inv-what{display:grid;gap:16px;min-width:0}
.inv-what .h3{margin:0}
.inv-list{margin:0;padding-left:20px;display:grid;gap:8px;max-width:60ch}
.inv-cta{flex-wrap:wrap;gap:10px}
@media (max-width:640px){
  .inv-grid{grid-template-columns:1fr}
  .inv-count{grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:14px 16px}
  .inv-cta .btn{flex:1 1 100%;text-align:center}
}

/* css/motion.css */
/* Motion: page enter, headline word rise, scroll reveals, progress bar, radio beat pulse. Off for reduced motion. */
/* Base: reset, type scale, buttons, forms, generic layout helpers, modal, toast, tooltip, radio bar. */
*{box-sizing:border-box}
/* Motion: page enter, headline word rise, scroll reveals, progress bar, radio beat pulse. Off for reduced motion. */
.scrollbar{position:fixed;left:0;right:0;top:0;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:var(--z-progress);pointer-events:none;box-shadow:0 0 0 1px rgba(21,20,14,.08)}
.motion #view.enter{animation:pageIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* M-09: word-rise wrapper keeps room for descenders (g, y, p) */
.display .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.22em;margin-bottom:-.22em}
.motion .display .w > span{display:inline-block;animation:wordUp .9s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(var(--d) + 120ms)}
@keyframes wordUp{from{transform:translateY(105%)}to{transform:none}}
/* M-12: motion never hides content. Reveals only slide (opacity stays 1), short and small */
.motion .rv{opacity:1;transform:translateY(16px);transition:transform .4s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 60ms)}
.motion .rv.in{opacity:1;transform:none}
.motion.scrolled .hdr{box-shadow:0 1px 0 var(--hair-strong)}
.motion .mcard .record{animation:peek 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes peek{from{transform:translateX(-10%)}to{transform:translateX(12%)}}
.motion.radio-on .mcard .record,.motion .sleeve-hero .record{animation:peek 1s cubic-bezier(.2,.8,.2,1) both,turn 1.8s linear infinite 1s}
@keyframes turn{from{transform:translateX(12%) rotate(0)}to{transform:translateX(12%) rotate(360deg)}}
.motion .dw-pin,.motion .bigstat,.motion .logo-word,.motion .radio .pbtn{transition:transform .09s ease-out}
.motion.kick .dw-pin{transform:translateX(-50%) scale(1.15)}
.motion.kick .logo-word{transform:scale(1.06)}
.motion.kick .radio .pbtn{transform:scale(1.08)}
.motion.radio-on .panel-blue{transition:background-color .12s}
.motion.radio-on.kick .panel-blue{background-color:var(--accent-light)}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
.still .mq-pause{display:none}
/* page enter slides only; it never starts from invisible (a throttled background tab would leave the page blank) */
.motion #view:not(.app-main).enter{animation-name:pageInSlide}
@keyframes pageInSlide{from{transform:translateY(12px)}to{transform:none}}