/* The partner studio (/partners/studio). Built from the owner-approved final mockup,
   docs/design-research/partner-looks/studio-design/final/mockup.html (owner, 2026-11-07:
   "The website mockup looks great. Let's build it."). The mockup's site tokens and
   components are kept as drawn; additions for the working page are at the end.
   Built by tools/build_partners.py. */
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(/fonts/inter.woff2) format("woff2")}
@font-face{font-family:"Tilt Neon";font-weight:400;font-display:swap;src:url(/fonts/tilt-neon.woff2) format("woff2")}
/* ───────────── Site tokens (site.css) ───────────── */
:root{
  --bg:#0c0a14; --night:#07050d; --surface:#141022; --card:#120f1e; --well:#141022;
  --text:#f3eefe; --muted:#b3abcc; --faint:#a49dbb; --kicker:#a49dbb; --tert:#8f88a8;
  --accent:#9184d9; --accent-400:#b5abfc; --accent-300:#d2cefd; --accent-800:#423a6a; --accent-900:#2b2741;
  --gel-p:#e0559b; --gel-a:#e8a24a; --tube-p:#ff9ccc; --tube-a:#ffd49a; --tube-b:#b5abfc; --hot:#e89184;
  --line:#2e2644; --chipline:#332c47; --ctl:#3a3152; --dash:#4a3f66;
  --neon-p:0 0 3px #fff,0 0 10px #e0559b,0 0 24px #e0559b,0 0 50px rgba(224,85,155,.45);
  --neon-a:0 0 3px #fff,0 0 10px #e8a24a,0 0 24px #e8a24a,0 0 50px rgba(232,162,74,.45);
  --neon-b:0 0 3px #fff,0 0 10px #9184d9,0 0 24px #9184d9,0 0 50px rgba(145,132,217,.45);
  --r-md:8px; --r-lg:14px; --r-pill:999px;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --display:"Tilt Neon","Inter",system-ui,sans-serif;
  --ok:#5fd39a; --warn:#e8a24a; --bad:#ff8a7a;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent-400)}
button{font:inherit;color:inherit;cursor:pointer}
input,select{font:inherit}
h1,h2,h3,h4{font-weight:500;margin:0}
p{margin:0}
.kick{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--kicker)}
.hide{display:none!important}


/* Studio tabs: Look · Page · Codes · Singers */
.tabsnav{display:flex;gap:4px;margin-right:auto}
.tabsnav a{color:var(--muted);text-decoration:none;font-size:14.5px;padding:8px 12px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center}
.tabsnav a[aria-current=page]{color:var(--text);box-shadow:inset 0 0 0 1px var(--ctl);background:var(--surface)}
.brand.hasnav{margin-right:18px}

/* ───────────── Stats panel ───────────── */
.stats{max-width:1400px;margin:0 auto;padding:28px 24px 100px}
.stats h1{font-size:25px}
.stats .lede{color:var(--muted);margin-top:4px}
.stats .filters{display:flex;align-items:center;gap:14px;margin:18px 0 16px;flex-wrap:wrap}
.stats .filters .quiet{margin-left:auto}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;min-height:104px}
.kpi .l{font-size:13px;color:var(--muted)}
.kpi .v{font-family:var(--display);font-size:34px;line-height:1.1;color:#fff;margin-top:6px;text-shadow:0 0 10px rgba(145,132,217,.45)}
.kpi .v small{font-family:var(--body);font-size:13px;color:var(--faint);text-shadow:none;margin-left:6px}
.kpi .dl{font-size:12.5px;color:var(--faint);margin-top:4px}
.kpi .dl b{font-weight:500;color:var(--ok)}
.stats .grid2{display:grid;grid-template-columns:3fr 2fr;gap:12px;margin-top:12px;align-items:start}
.chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.chart h3{font-size:15px}
.chart .sub{font-size:12.5px;color:var(--faint);margin-top:2px}
.chart svg{width:100%;height:auto;display:block;margin-top:10px;overflow:visible}
.chart .bar{fill:var(--accent);opacity:.75}
.chart .bar:hover,.chart .bar.now{opacity:1}
.chart .bar.now{fill:var(--accent-400)}
.chart .stub{fill:none;stroke:var(--dash);stroke-width:1.5;stroke-dasharray:3 3}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--tert);font-size:10px;font-family:var(--body)}
.chart .val{fill:var(--text);font-size:11px;font-family:var(--body)}
.lst{list-style:none;margin:8px 0 0;padding:0}
.lst li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px;min-height:44px}
.lst li .s{font-size:12px;color:var(--faint)}
.lst li .n{font-size:14px;color:var(--text);text-align:right;white-space:nowrap}
.lst li .n small{color:var(--faint);font-size:12px;margin-left:6px}
.lst li .codec{font-family:var(--display);letter-spacing:.8px;color:#ffe7c7;text-shadow:0 0 6px rgba(232,162,74,.5)}
.lst li .few{color:var(--faint);font-size:13px}
.singers{margin-top:12px}
.singers .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.singers .hd .quiet{margin-left:auto}
.srows{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.srows details{border-bottom:1px solid var(--line);background:var(--card)}
.srows details:last-child{border-bottom:0}
.srows summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:11px 14px;min-height:52px}
.srows summary::-webkit-details-marker{display:none}
.srows .sn{font-family:var(--display);font-size:16px;color:#ffe3f1;text-shadow:0 0 8px rgba(224,85,155,.5)}
.srows .last{font-size:12.5px;color:var(--faint);margin-top:1px}
.srows .cnt{font-size:13px;color:var(--muted);white-space:nowrap}
.srows .car{color:var(--faint);transition:transform .15s}
.srows details[open] .car{transform:rotate(90deg)}
.srows ul{list-style:none;margin:0;padding:0 14px 10px 14px}
.srows ul li{display:grid;grid-template-columns:1fr auto;gap:10px;padding:6px 0;font-size:13px;border-top:1px solid var(--line)}
.srows ul li span{color:var(--faint)}
.srows ul li .v{color:var(--muted)}
/* The Singers tab before its first numbers: one line over the whole page at zero. */
.firstnums{margin-top:14px;border:1px dashed var(--ctl);border-radius:var(--r-lg);padding:10px 14px;font-size:13.5px;color:var(--muted)}
.firstnums a{color:var(--accent-400)}
.privacy{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;font-size:13px;color:var(--muted);background:var(--night)}
.privacy b{color:var(--text);font-weight:500}

/* Opt-in box on the prompt, and the share row in Settings */

/* ───────────── Masthead ───────────── */
.masthead{position:sticky;top:0;z-index:60;background:rgba(12,10,20,.9);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line);padding:12px 0}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}
.masthead .wrap{display:flex;align-items:center;gap:18px}
.brand{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--display);font-size:21px;color:#ffe3f1;text-shadow:var(--neon-p);text-decoration:none;margin-right:auto}
.brand small{font-family:var(--body);font-size:13px;color:var(--muted);text-shadow:none;letter-spacing:.2px}
.who{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-800);display:grid;place-items:center;font-size:12px;color:var(--text);border:1px solid var(--ctl)}

/* Status strip */
.status{border-bottom:1px solid var(--line);background:var(--night)}
.status .wrap{display:flex;align-items:center;gap:14px;min-height:44px;font-size:13.5px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ctl);flex:none}
.status[data-state=draft] .dot{background:var(--ctl)}
.status[data-state=review] .dot{background:var(--gel-a);box-shadow:0 0 8px var(--gel-a)}
.status[data-state=live] .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.status[data-state=changes] .dot{background:var(--hot);box-shadow:0 0 8px var(--hot)}
.status[data-state=paused] .dot{background:var(--hot)}
.status .msg{color:var(--text)}
.status .sub{color:var(--faint)}
.status .right{margin-left:auto;color:var(--faint);font-size:12.5px}

/* ───────────── Studio layout ───────────── */
.studio{display:grid;grid-template-columns:200px minmax(0,640px) 1fr;gap:40px;padding-top:28px;align-items:start}

.main{display:flex;flex-direction:column;gap:56px;padding-bottom:120px}
.step .lede{color:var(--muted);margin-top:6px;font-size:15px}
.block{margin-top:22px}
.block>h3{font-size:16px;margin-bottom:10px}
.block>h3 small{font-weight:400;color:var(--faint);font-size:13px;margin-left:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.quiet{color:var(--faint);font-size:13px}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}

/* Fields */
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.field input[type=text]{width:100%;background:var(--well);border:1px solid var(--ctl);border-radius:10px;color:var(--text);padding:11px 12px;font-size:15px;min-height:44px}
.field input[type=text]:focus{outline:2px solid var(--accent-400);outline-offset:1px;border-color:transparent}
.hint{font-size:12.5px;color:var(--faint);margin-top:6px}

/* Tube buttons (site style): outline + glow, color = role */
.tube{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);border:1.5px solid;background:transparent;padding:10px 18px;min-height:44px;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.tube.go{border-color:var(--tube-p);color:#ffd0e7;background:rgba(224,85,155,.14);box-shadow:0 0 10px rgba(224,85,155,.55),inset 0 0 10px rgba(224,85,155,.25)}
.tube.spot{border-color:var(--tube-a);color:#ffe7c7;background:rgba(232,162,74,.10);box-shadow:0 0 10px rgba(232,162,74,.5)}
.tube.work{border-color:var(--tube-b);color:#f3efff;background:rgba(145,132,217,.12);box-shadow:0 0 10px rgba(145,132,217,.5)}
.tube.neutral{border-color:var(--ctl);color:var(--muted)}
.tube.hot{border-color:var(--hot);color:#ffd6cf;background:rgba(232,145,132,.08)}
.tube.sm{min-height:36px;padding:6px 14px;font-size:13px}
.tube.lg{min-height:56px;padding:12px 28px;font-family:var(--display);font-weight:400;font-size:20px;border-width:2px}
.tube[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
/* Publish while there are changes to send: the tube's glow swells slowly (~2s, far under 3 Hz). Only while enabled; still under reduced motion. */
.tube.go.pulse:not([disabled]){animation:publishglow 2s ease-in-out infinite}
@keyframes publishglow{0%,100%{box-shadow:0 0 8px color-mix(in srgb,var(--gel-p) 45%,transparent),inset 0 0 8px color-mix(in srgb,var(--gel-p) 20%,transparent)}50%{box-shadow:0 0 26px 4px color-mix(in srgb,var(--gel-p) 90%,transparent),inset 0 0 16px color-mix(in srgb,var(--gel-p) 45%,transparent)}}
@media (prefers-reduced-motion:reduce){.tube.go.pulse:not([disabled]){animation:none}}
.link{background:none;border:0;padding:0;color:var(--accent-400);font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.link.quiet{color:var(--faint)}
.textbtn{background:none;border:0;color:var(--faint);min-height:44px;padding:0 6px}

/* Dropzone & logo */
.drop{border:1.5px dashed var(--dash);border-radius:var(--r-lg);padding:16px;display:flex;gap:16px;align-items:center;background:rgba(20,16,34,.5)}
.drop.has{border-style:solid;border-color:var(--line)}
.logo{width:72px;height:72px;border-radius:16px;background:#0b1020;display:grid;place-items:center;flex:none;border:1px solid #1e2a4a;position:relative;overflow:hidden}
.logo::before{content:"";position:absolute;inset:-30% -30% 50% 40%;background:radial-gradient(circle,#5b9dff 0%,transparent 65%);opacity:.9}
.logo::after{content:"";position:absolute;inset:40% 40% -30% -30%;background:radial-gradient(circle,#ff4fa3 0%,transparent 65%);opacity:.95}
.logo b{position:relative;z-index:1;font-family:var(--display);font-size:26px;color:#fff;letter-spacing:-.5px}
.logo.sm{width:44px;height:44px;border-radius:10px}.logo.sm b{font-size:16px}
.logo.xs{width:28px;height:28px;border-radius:7px}.logo.xs b{font-size:11px}

/* Swatches & jobs */
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;flex:none}
.sw.sq{border-radius:9px}
.jobs{display:grid;grid-template-columns:1fr;gap:0;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.job{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:12px 14px;background:var(--card);border-bottom:1px solid var(--line);min-height:56px}
.job:last-child{border-bottom:0}
.job .t{font-size:14.5px}
.job .d{font-size:12.5px;color:var(--faint)}
.job .pick{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ctl);border-radius:999px;padding:5px 12px 5px 6px;background:var(--well);font-size:13px;min-height:36px}
.job .pick .sw{width:22px;height:22px;border-width:1px}
.job .added{font-size:11px;color:var(--gel-a);background:rgba(232,162,74,.12);border:1px solid rgba(232,162,74,.35);border-radius:999px;padding:2px 8px;margin-left:8px}
.seg{display:inline-flex;border:1px solid var(--ctl);border-radius:999px;padding:3px;background:var(--well);gap:2px}
.seg button{border:0;background:transparent;border-radius:999px;padding:7px 16px;min-height:38px;color:var(--muted);font-size:14px}
.seg button[aria-pressed=true]{background:var(--accent-800);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}

/* Base (style) cards */
.bases{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.base{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 10px 12px;text-align:left;min-height:44px}
.base:hover{border-color:var(--ctl)}
.base[aria-pressed=true]{border-color:var(--accent-400);box-shadow:0 0 0 1px var(--accent-400),0 0 14px rgba(145,132,217,.45)}
.base{min-width:0}
.base .n{font-size:13.5px;display:block}
.base .d{font-size:11.5px;color:var(--faint);display:block;line-height:1.3;margin-top:2px}

/* Fonts */
.fonts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fontchip{border:1px solid var(--ctl);background:var(--well);border-radius:12px;padding:8px 12px;min-height:44px;min-width:96px;text-align:left}
.fontchip b{display:block;font-weight:400;font-size:18px;line-height:1.1}
.fontchip span{font-size:11px;color:var(--faint)}
.fontchip[aria-pressed=true]{border-color:var(--accent-400);box-shadow:0 0 0 1px var(--accent-400)}

/* Profiles */
.profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}

/* Checks */
.checks{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.chk{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:14px;background:var(--card);border-bottom:1px solid var(--line)}
.chk:last-child{border-bottom:0}
.chk .m{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.chk[data-k=fix] .m{background:rgba(255,138,122,.14);color:var(--bad);border:1px solid rgba(255,138,122,.5)}
.chk[data-k=close] .m{background:rgba(232,162,74,.12);color:var(--warn);border:1px solid rgba(232,162,74,.5)}
.chk[data-k=ok] .m{background:rgba(95,211,154,.12);color:var(--ok);border:1px solid rgba(95,211,154,.5)}
.chk .t{font-size:14.5px}
.chk .d{font-size:12.5px;color:var(--faint);margin-top:2px}
.chk .after{display:none}
.chk[data-k=ok] .before{display:none}.chk[data-k=ok] .after{display:block}
.chk .undo{background:none;border:0;color:var(--faint);font-size:12.5px;padding:0;min-height:36px;display:none}
.chk[data-k=ok] .undo{display:inline-flex}
.chk[data-k=ok] .fixbtn{display:none}
details.more{margin-top:10px;color:var(--faint);font-size:13px}
details.more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;list-style:none}
details.more summary::before{content:"›";display:inline-block;margin-right:8px;transition:transform .15s}
details.more[open] summary::before{transform:rotate(90deg)}
details.more ul{margin:6px 0 0 28px;padding:0;list-style:none}
details.more li{padding:4px 0}
details.more li::before{content:"✓ ";color:var(--ok)}

/* Icon + home screens */
/* The app icon beside its upload: home-screen size, the small size search shows, and Android's
   round crop, on a light and a dark wallpaper. */
.homes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.home{border-radius:14px;padding:30px 10px 12px;position:relative}
.home.light{background:linear-gradient(160deg,#dfe7ff,#f6d9ec);color:#111}
.home.dark{background:linear-gradient(160deg,#1c1f33,#0b0d18);color:#fff}
.home .lab{position:absolute;top:9px;left:12px;font-size:10px;letter-spacing:1px;text-transform:uppercase;opacity:.7}
.home .at{display:flex;align-items:flex-end;justify-content:center;gap:18px}
.home .spot{display:flex;flex-direction:column;align-items:center;gap:6px}
.home .name{font-size:11px;line-height:1.2}
.home .appicon.s60{width:60px;height:60px;border-radius:22.5%}
.home .appicon.s40{width:40px;height:40px;border-radius:22.5%}
.home .appicon.circle{border-radius:50%}
.appicon{width:52px;height:52px;border-radius:12px;background:#0b1020;display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.appicon::before{content:"";position:absolute;inset:-30% -30% 50% 40%;background:radial-gradient(circle,#5b9dff 0%,transparent 65%)}
.appicon::after{content:"";position:absolute;inset:40% 40% -30% -30%;background:radial-gradient(circle,#ff4fa3 0%,transparent 65%)}
.appicon b{position:relative;z-index:1;font-family:var(--display);font-size:19px;color:#fff}
.appicon.circle{border-radius:50%}
.iconchecks{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--muted)}
.iconchecks span::before{content:"✓ ";color:var(--ok)}

/* Codes */
.codes{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:10px}
.code{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.code:last-child{border-bottom:0}
.code .c{font-family:var(--display);font-size:20px;letter-spacing:1px;color:#ffe7c7;text-shadow:0 0 8px rgba(232,162,74,.6)}
.code .u{font-size:12.5px;color:var(--faint)}
.code .acts{display:flex;gap:6px}
.mk{display:flex;gap:8px;margin-top:10px;align-items:center}
.mk input{flex:1;background:var(--well);border:1px solid var(--ctl);border-radius:10px;color:var(--text);padding:10px 12px;min-height:44px;text-transform:uppercase;letter-spacing:1px}
.mk{flex-wrap:wrap}
.codenights{font-size:13px;margin-top:8px}

/* Publish */
.summary{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.summary ul{margin:4px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px}
.plan{margin-top:12px;border:1px solid rgba(232,162,74,.4);background:rgba(232,162,74,.06);border-radius:var(--r-lg);padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.plan .k{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#e8c193}
.plan .t{font-size:15px;margin-top:2px}
.plan .d{font-size:12.5px;color:var(--faint);margin-top:2px}
.sent{display:none;margin-top:12px}
.studio.after-send .sent{display:block}
.studio.after-send .sendrow{display:none}

/* ───────────── Phone preview: the shell; the Look renderer draws each screen inside it (lookView.js) ───────────── */
.preview{position:sticky;top:90px;display:flex;flex-direction:column;align-items:center;gap:12px}
.preview .screens{display:flex;gap:4px;border:1px solid var(--ctl);border-radius:999px;padding:3px;background:var(--well)}
.preview .screens button{border:0;background:transparent;border-radius:999px;padding:6px 12px;color:var(--muted);font-size:13px;min-height:36px}
.preview .screens button[aria-pressed=true]{background:var(--accent-800);color:var(--text)}
.preview .cap{font-size:12px;color:var(--faint);text-align:center;max-width:300px}

.phone{width:300px;height:620px;border-radius:40px;background:#000;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px #222;position:relative;flex:none}
.phone .scr{width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--night);position:relative;display:flex;flex-direction:column}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:24px;border-radius:14px;background:#000;z-index:3}
/* base-specific button construction */

/* Switches */
.sw-t{width:44px;height:26px;border-radius:13px;background:var(--ctl);position:relative;border:0;padding:0}
.sw-t::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.sw-t[aria-checked=true]{background:var(--accent)}
.sw-t[aria-checked=true]::after{left:21px}

/* ───────────── More options drawer ───────────── */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--card);border-left:1px solid var(--line);z-index:200;transform:translateX(100%);transition:transform .2s;overflow:auto;padding:20px 20px 60px;box-shadow:-20px 0 60px rgba(0,0,0,.5)}
.drawer.open{transform:none}
.drawer h2{font-size:20px}
.drawer .x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--ctl);background:var(--well);color:var(--text);font-size:18px}
.drawer .lede{color:var(--muted);font-size:13.5px;margin-top:4px}
.drawer h3{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--kicker);margin:22px 0 8px}
.drawer .pic{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:13.5px}
.drawer .pic .d{font-size:11.5px;color:var(--faint)}
.drawer .file{margin-top:8px}
.drawer .file details summary{cursor:pointer;color:var(--accent-400);font-size:13.5px;min-height:44px;display:flex;align-items:center}
.drawer pre{background:var(--night);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:11px;color:var(--muted);overflow:auto;max-height:220px;margin:8px 0}
.drawer .slider{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.drawer .slider input{flex:1;accent-color:var(--accent)}

/* ───────────── Mobile ───────────── */
.mobilebar{display:none}
@media (max-width:900px){
  html,body{overflow-x:clip}
  .studio{grid-template-columns:minmax(0,1fr);gap:0;padding-top:16px}
  .studio>*{min-width:0}
  .main{order:1}
  .tabsnav a{white-space:nowrap}
  .bases{grid-template-columns:repeat(2,1fr)}
  .profiles{grid-template-columns:1fr 1fr}
  .homes{grid-template-columns:1fr}
  /* The icon's card at phone width: the picture and its words on one line, the buttons under them. */
  #icon-drop{flex-wrap:wrap;gap:12px 14px}
  #icon-drop>.grow{flex:1 1 calc(100% - 70px);min-width:0;overflow-wrap:anywhere}
  .job{grid-template-columns:34px 1fr;gap:10px}
  .job .pick{grid-column:2;justify-self:start}
  .plan{grid-template-columns:1fr}
  .masthead .wrap{gap:10px}
  .who span{display:none}
  .status .right{display:none}
  .preview{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;background:rgba(12,10,20,.96);border-top:1px solid var(--line);padding:10px 16px 14px;gap:10px;transform:translateY(calc(100% - 64px));transition:transform .2s}
  .preview.open{transform:none;top:0;overflow:auto;padding-top:14px}
  /* Full-page capture of the mobile layout: the preview sits inline at the top instead of as a bottom sheet */
  .brand small{display:none}
  .brand{font-size:19px}
  .brand.hasnav{margin-right:6px}
  .masthead .wrap{gap:8px}
  .tabsnav{gap:0}
  .tabsnav a{font-size:13px;padding:6px 8px}
  .who{flex:none}
  .chk{grid-template-columns:22px 1fr}
  .chk .fixbtn{grid-column:2;justify-self:start}
  .kpis{grid-template-columns:1fr 1fr}
  .srows summary{grid-template-columns:1fr auto}
  .srows .cnt{grid-column:1;font-size:12px}
  .srows .car{grid-row:1/3;grid-column:2}
  .stats .grid2{grid-template-columns:1fr}
  .mobilebar{display:flex;align-items:center;gap:10px;width:100%;min-height:44px}
  .mobilebar .sw{width:22px;height:22px}
  .mobilebar b{font-weight:500;font-size:14px}
  .mobilebar span{color:var(--faint);font-size:12px}
  .mobilebar button{margin-left:auto}
  .main{padding-bottom:140px}
  .masthead{top:0}
}

/* ───────────── Final merge additions ───────────── */
.pill-status{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ctl);border-radius:999px;padding:6px 12px;font-size:13px;color:var(--muted);background:var(--well);white-space:nowrap}
.pill-status .dot{width:8px;height:8px}
.pill-status[data-state=review] .dot{background:var(--gel-a);box-shadow:0 0 8px var(--gel-a)}
.pill-status[data-state=live] .dot{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.ro{display:flex;align-items:center;gap:12px;background:var(--well);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;flex-wrap:wrap}
.ro .v{font-size:17px}
.ro .lock{font-size:12px;color:var(--faint);margin-left:auto;white-space:nowrap}
/* Pictures */
.pics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.picslot{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
.picslot .crop{width:72px;height:72px;border-radius:8px;background:var(--well);border:1px dashed var(--dash);display:grid;place-items:center;color:var(--faint);font-size:22px;overflow:hidden;position:relative}
.picslot .crop.tall{height:72px;width:36px;margin:0 auto}
.picslot .crop.has{border:1px solid var(--line);background:linear-gradient(160deg,#1a2a55,#0b1020 60%,#3a1248)}
.picslot .crop.has::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 4px,transparent 4px 10px)}
.picslot .crop.has i{position:absolute;left:8px;top:16px;width:36px;height:6px;border-radius:3px;background:rgba(255,255,255,.6)}
.picslot .t{font-size:14px}
.picslot .d{font-size:12px;color:var(--faint);margin-top:2px}
.picslot .acts{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.phone .hdr.pic{background:linear-gradient(160deg,rgba(26,42,85,.95),rgba(11,16,32,.25) 55%,rgba(58,18,72,.85));box-shadow:inset 0 0 0 999px rgba(11,16,32,0)}
.look[data-scrim=on] .hdr.pic{box-shadow:inset 0 0 0 999px rgba(11,16,32,.38)}
/* Profile badges, fix all */
/* Codes status */
.code .stt{font-size:12px;margin-top:3px}
.code .stt.live{color:var(--ok)}.code .stt.rev{color:var(--gel-a)}
.mkerr{color:var(--bad);font-size:12.5px;margin-top:6px;display:none}
.mk.bad+.mkerr{display:block}
.mk.bad input{border-color:var(--bad)}
/* Timeline */
/* Stats tables */
.tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
.tbl th{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--kicker);text-align:left;font-weight:400;padding:6px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td.n,.tbl th.n{text-align:right;white-space:nowrap}
.tbl td.few{color:var(--faint)}
.tbl tr:last-child td{border-bottom:0}
.tbl .codec{font-family:var(--display);letter-spacing:.8px;color:#ffe7c7;text-shadow:0 0 6px rgba(232,162,74,.5)}
.tbl .stt{font-size:12px}.tbl .stt.live{color:var(--ok)}.tbl .stt.rev{color:var(--gel-a)}
.tbl .s{font-size:12px;color:var(--faint)}
.kpi .d2{font-size:12px;color:var(--faint);margin-top:2px}
details.tablev{margin-top:8px;font-size:13px;color:var(--muted)}
details.tablev summary{cursor:pointer;min-height:40px;display:flex;align-items:center;color:var(--accent-400);list-style:none}
details.tablev summary::before{content:"›";margin-right:8px}
details.tablev[open] summary::before{content:"⌄"}
.peekwin{display:contents}
/* Advanced: the numbers switch */
.numsw{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin:10px 0 0}
.numsw .sw-t{transform:scale(.85)}

@media (max-width:900px){
  .status{display:none}
  .who{display:none}
  .tabsnav{display:none}
  .masthead{top:0}
  /* The peek: the top of the phone stays on screen while editing, under the masthead */
  .preview{position:sticky;top:0;bottom:auto;left:auto;right:auto;z-index:80;background:rgba(12,10,20,.97);border-top:0;border-bottom:1px solid var(--line);margin:0 -24px 14px;padding:8px 16px 10px;transform:none;transition:none;display:grid;grid-template-columns:118px 1fr;grid-template-areas:"bar bar" "win side";gap:6px 12px;align-items:start}
  .preview .mobilebar{grid-area:bar;min-height:0}
  .preview .screens{display:none}
  .preview .peekwin{grid-area:win;display:block;width:118px;height:112px;overflow:hidden;border-radius:12px;border:1px solid var(--line);position:relative;cursor:pointer;background:#000}
  .preview .peekwin .look.phone{position:absolute;left:-1px;top:-14px;transform:scale(.4);transform-origin:top left;pointer-events:none}
  .preview .cap{display:none}
  .preview.open{position:fixed;inset:0;z-index:95;margin:0;padding:14px 16px 30px;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
  .preview.open .screens{display:flex}
  .preview.open .peekwin{width:300px;height:620px;border:0;border-radius:40px;overflow:visible;background:transparent}
  .preview.open .peekwin .look.phone{position:static;transform:none;pointer-events:auto}
  .preview.open .cap{display:block}
  .preview.open .mobilebar{width:100%}
  .pics{grid-template-columns:1fr}
  .ro .lock{margin-left:0;white-space:normal}
}

/* ───────────── The working page: additions to the mockup ───────────── */
/* Owner, 2026-10-19: nothing that isn't a button is pill-shaped. The mockup's status pill,
   "we added this" and "Default" are plain marked text here. */
.pill-status{border:0;background:none;padding:6px 0;border-radius:0}
.job .added{background:none;border:0;padding:0;border-radius:0;font-size:11.5px;color:var(--gel-a)}
.job .added::before{content:"· "}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--card);color:var(--text);padding:10px 14px;border-radius:10px;border:1px solid var(--accent-400)}
.skip:focus{top:10px}
:focus-visible{outline:2px solid var(--accent-400);outline-offset:2px}
button,a,select,input,summary{-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
.tube:not([disabled]):hover{filter:brightness(1.12)}
.tube:not([disabled]):active{transform:translateY(1px)}
.tube.hot{color:#ffd6cf}
.textbtn{font-size:13px;cursor:pointer}
.textbtn:hover{color:var(--text)}
/* Removing a picture is a destructive action: its word takes the destructive role color (hotLabel,
   #E89184; owner, 2026-11-10: "its hard to see. make the remove word red"). 7.8:1 or better on every
   ground it sits on (the card, the well, the page). Pressed is one step past, as the hot tube's label. */
.textbtn.hotl{color:var(--hot)}
.textbtn.hotl:hover,.textbtn.hotl:active{color:#ffd6cf}
.link{cursor:pointer}
.link:hover{text-decoration:underline}
.studio .rail li a .n.dashed{border-style:dashed}
.masthead .tabsnav a{cursor:pointer}

/* Sample-data bar (mock transport) */
.demo{background:#1a1526;border-bottom:1px dashed #5a4f7a;color:#cfc7e6;font-size:13px;padding:8px 24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.demo b{color:#fff;font-weight:500}
.demo label{margin-left:auto;display:inline-flex;gap:8px;align-items:center}
.demo select{background:var(--well);color:var(--text);border:1px solid var(--ctl);border-radius:8px;padding:6px 8px;min-height:36px;font:inherit;font-size:13px}

/* Account menu */
.who{position:relative}
button.avatar{cursor:pointer;padding:0;width:44px;height:44px;font:inherit;font-size:12px}
.menu{position:absolute;right:0;top:52px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:160px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:120}
.menu button{width:100%;text-align:left;background:none;border:0;color:var(--hot);padding:10px 12px;min-height:44px;border-radius:8px}
.menu button:hover{background:var(--surface)}

/* Gate: sign in, link, loading */
.gate{max-width:560px;margin:0 auto;padding:56px 24px 120px}
.gatecard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 28px 22px}
.gatecard h1{font-size:26px;margin-top:6px;line-height:1.2}
.gatecard .lede{color:var(--muted);margin-top:10px}
.gatecard .fine{font-size:12.5px;color:var(--faint);margin-top:18px}
.providers{display:grid;gap:10px;margin-top:22px}
.prov{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;border:1.5px solid var(--ctl);background:var(--well);color:var(--text);font-size:15px;font-weight:500}
.prov:hover{border-color:var(--accent-400)}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px;margin:20px 0 6px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.emailform .field{display:block;margin-top:12px}
.field span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.field input[type=email],.field input[type=password],.field input[type=text]{width:100%;background:var(--well);border:1px solid var(--ctl);border-radius:10px;color:var(--text);padding:11px 12px;font-size:15px;min-height:44px}
.field input:focus{outline:2px solid var(--accent-400);outline-offset:1px;border-color:transparent}
.field input[readonly]{color:var(--muted)}
.steptitle{margin-top:14px;font-size:15px}
.formerr{color:var(--bad);font-size:13px;margin-top:8px;min-height:1em}
.steps{margin:16px 0 0;padding-left:20px;color:var(--muted);font-size:14px;display:grid;gap:6px}
.steps b{color:var(--text);font-weight:500}
.loading{text-align:center;color:var(--muted)}
.bulbrow{display:flex;gap:10px;justify-content:center;margin:10px 0 14px}
.bulbrow b{width:9px;height:9px;border-radius:50%;background:var(--gel-p);box-shadow:0 0 8px var(--gel-p);animation:chase 1.6s ease-in-out infinite}
.bulbrow b:nth-child(3n+2){background:var(--gel-a);box-shadow:0 0 8px var(--gel-a)}
.bulbrow b:nth-child(3n){background:var(--accent);box-shadow:0 0 8px var(--accent)}
.bulbrow b:nth-child(2){animation-delay:.11s}.bulbrow b:nth-child(3){animation-delay:.22s}.bulbrow b:nth-child(4){animation-delay:.33s}.bulbrow b:nth-child(5){animation-delay:.44s}.bulbrow b:nth-child(6){animation-delay:.55s}.bulbrow b:nth-child(7){animation-delay:.66s}.bulbrow b:nth-child(8){animation-delay:.77s}.bulbrow b:nth-child(9){animation-delay:.88s}
@keyframes chase{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bulbrow b{animation:none;opacity:1}*{scroll-behavior:auto!important;transition:none!important}}

/* Brand */
.logo.img{background:none;border-color:var(--line)}
.logo.img::before,.logo.img::after{display:none}
.logo.empty{background:var(--well);border:1px dashed var(--dash);color:var(--faint);font-size:26px}
.logo.empty::before,.logo.empty::after{display:none}
.pill-status[data-state=changes] .dot,.status[data-state=changes] .dot{background:var(--hot);box-shadow:0 0 8px var(--hot)}
.pill-status[data-state=paused] .dot{background:var(--hot)}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
.drop.over{border-color:var(--accent-400);background:rgba(145,132,217,.08)}
.swb{background:none;border:0;padding:5px;min-width:44px;min-height:44px;border-radius:50%;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.swb small,.hex{font-size:10.5px;color:var(--faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.swatches{align-items:center}
.swatches .swb .sw{width:34px;height:34px}
.job .pick{cursor:pointer;min-height:44px}
.job .pick:hover{border-color:var(--accent-400)}
.darklight{gap:16px;flex-wrap:wrap}
.darklight .seg{margin-left:auto}
.seg button{cursor:pointer;min-height:44px}

/* Style cards and fonts */
.base{cursor:pointer;color:var(--text);font:inherit}
.fontchip{cursor:pointer;color:var(--text)}
.fontchip b.caps{text-transform:uppercase}
.fontchip:hover{border-color:var(--accent-400)}

/* Pictures */
.picslot .crop.img{background-size:cover;background-position:center;border-style:solid}
.picslot .crop.img::after,.picslot .crop.img i{display:none}
.pics .picslot .acts .quiet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
#pic-checks{margin-top:12px}

/* Check rows */
.chk .num{font-size:12px;color:var(--faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-left:6px}
.chk[data-kind=fix] .m{background:rgba(255,138,122,.14);color:var(--bad);border:1px solid rgba(255,138,122,.5)}
.chk[data-kind=close] .m{background:rgba(232,162,74,.12);color:var(--warn);border:1px solid rgba(232,162,74,.5)}
.chk[data-kind=ok] .m,.chk[data-kind=tuned] .m{background:rgba(95,211,154,.12);color:var(--ok);border:1px solid rgba(95,211,154,.5)}
.chk .undo{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;text-decoration:underline;color:var(--muted)}
.chk .fixbtn{display:inline-flex}

/* Icon */
.appicon.img{background-size:cover;background-position:center}
.appicon.img::before,.appicon.img::after{display:none}
.appicon.ours{background:linear-gradient(160deg,#2b2741,#0c0a14);border:1px solid var(--ctl)}
.appicon.ours::before,.appicon.ours::after{display:none}
.drop>.appicon{flex:none}

/* Codes */
.mk.bad+.mkerr{display:block}
.mkerr{min-height:0}
.code .u{overflow-wrap:anywhere}

/* Publish */
.card.changes{margin-top:14px;border-color:rgba(232,145,132,.45)}
.card.changes .k{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--hot)}
.card.changes p{margin-top:6px}
.sent .link{margin-top:6px}

/* Dialog and toast */
.dlg-back{position:fixed;inset:0;background:rgba(7,5,13,.6);z-index:250}
.dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;z-index:260;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dlg h2{font-size:19px}
.dlg .pickrow{gap:12px;margin-top:14px;align-items:flex-end}
.dlg input[type=color]{width:56px;height:48px;border:1px solid var(--ctl);border-radius:10px;background:var(--well);padding:3px;cursor:pointer}
.dlg .qr{background:#fff;border-radius:12px;padding:10px;display:inline-block;margin-top:12px}
.dlg .qr svg{display:block;width:220px;height:220px}
.dlg .qr.making{width:220px;height:220px;box-sizing:content-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#5a5566}
.dlg .qr.making .spin{display:inline-block;width:22px;height:22px;border-radius:50%;border:2px solid transparent;border-top-color:var(--tube-b);border-right-color:var(--tube-b);animation:working .9s linear infinite}
.dlg .qr.making .quiet{color:#5a5566}
.dlg .qr svg{animation:landed .2s ease-out}
.tube[aria-disabled=true]{opacity:.5;pointer-events:none}
@media (prefers-reduced-motion:reduce){.dlg .qr.making .spin,.dlg .qr svg{animation:none}}
.dlg textarea.note{width:100%;min-height:140px;background:var(--well);border:1px solid var(--ctl);border-radius:10px;color:var(--text);padding:10px;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:10px}
.toast-live{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#2a2340;color:var(--text);border:1px solid var(--ctl);border-radius:12px;padding:10px 16px;font-size:14px;z-index:300;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 32px)}
.toast-live.on{opacity:1;transform:translate(-50%,0)}

/* Drawer */
.drawer{display:block}
.drawer .pic select{min-height:44px}
.drawer .pic label{cursor:default}
.drawer .slider input{min-height:44px}
.sw-t{cursor:pointer}
.numsw .sw-t{transform:none}
.drawer .tube.sm,.drawer .x{min-height:44px}

/* Your singers */
#singers{outline:none}
.stats .empty{margin-top:18px;padding:22px}
.stats .empty h2{font-size:19px}
.stats .empty p{margin-top:6px}
.kpi .fewv{font-family:var(--body);font-size:18px;color:var(--faint);text-shadow:none}
.chart svg g:focus{outline:none}
.chart svg g:focus .bar,.chart svg g:focus .stub{stroke:var(--accent-300);stroke-width:2}
.seg button[data-period]{min-height:44px}
.srows summary:focus-visible{outline-offset:-2px}

/* ───────────── The phone, as the build draws it ───────────── */
.phone .scr{position:relative}
/* The Look renderer draws the setlist and the Magic Mic into this host (lookView.js). */
.phone .lrhost{display:block;width:100%;height:100%}
@media (max-width:900px){
  .demo{padding:8px 16px}
  .demo label{margin-left:0}
  .gate{padding:28px 16px 80px}
  .gatecard{padding:22px 18px}
  body.peek-open{overflow:hidden}
  /* The account menu stays on a phone (sign out); the email doesn't. */
  .who:not([hidden]){display:flex}
  .who #who-email{display:none}
  body[data-view=singers] .pill-status{display:none}
  .preview{background:#0c0a14}
  .masthead .wrap{min-height:44px}
}
/* 44px targets everywhere (the mockup drew some at 30–40) */
.tube.sm{min-height:44px}
.brand{min-height:44px;align-items:center}
.tabsnav a{min-height:44px}
.preview .screens button{min-height:44px}
details.tablev summary,details.more summary{min-height:44px}
.demo select{min-height:44px}
@media (max-width:900px){
  .tabsnav a{padding:6px 10px}
}
/* Owner, 2026-10-19: only buttons are pill-shaped. A segmented control's track is a rounded box; its buttons stay capsules. */
.seg,.preview .screens{border-radius:14px}
.srows .srow1{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:11px 14px;min-height:52px;background:var(--card);border-bottom:1px solid var(--line)}
.srows .srow1:last-child{border-bottom:0}
.chart.soon{border-style:dashed;background:transparent}
.chart.soon .sub{margin-top:6px;font-size:13px;line-height:1.5}
.mkerr.on{display:block}
.mkerr.good{color:var(--ok)}
.oldcodes li::before{content:""}
.oldcodes .codec{font-family:var(--display);letter-spacing:.8px;color:#ffe7c7;margin-right:6px}
.code .acts{align-items:center}
.code .acts .textbtn{min-height:44px;padding:0 8px}

/* Anchored targets clear the sticky masthead */
#singers,#main{scroll-margin-top:90px}
.stats .grid2>*{min-width:0}
.tbl th.n,.tbl td.n{padding-left:12px}
@media (max-width:900px){
  .tbl th.n,.tbl td.n{white-space:normal}
  .tbl th{letter-spacing:.6px}
  .chart{overflow:hidden}
}
.chk .fixacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:900px){.chk .fixacts{grid-column:2;justify-content:flex-start}}
/* Two choices sit under the words, not beside them */
.chk:has(.fixacts){grid-template-columns:22px 1fr}
.chk .fixacts{grid-column:2;justify-content:flex-start}
.checks,#codes,#publish{scroll-margin-top:96px}
@media (max-width:900px){.checks,#codes,#publish{scroll-margin-top:190px}}

/* A blank start: a linked partner with nothing saved yet (owner, 2026-11-07: "not prepopulated with anything") */
.gatecard.start{max-width:none}
.gate:has(.start){max-width:1100px}
.startdrop{margin-top:8px}
.startdrop .logo{flex:none}
@media (max-width:900px){
  .startdrop{flex-wrap:wrap}
  .startdrop .grow{flex:1;min-width:160px}
}

/* Review MEDIUM: on a phone (and any touch screen) every field is at least 16px, so iPhone
   doesn't zoom the page when one is tapped. */
@media (pointer:coarse),(max-width:900px){
  input[type=text],input[type=email],input[type=password],input:not([type]),select,textarea,.mk input,.field input[type=text],.field input[type=email],.field input[type=password],.demo select,.dlg textarea.note{font-size:16px}
}
/* A save that didn't go through shows on the pill too: the status bar is hidden on a phone. */
.pill-status[data-error] .dot{background:var(--hot);box-shadow:0 0 8px var(--hot)}
/* Review LOW: every tap target at least 44px tall, the two small text links too. */
.ro .lock a,.help a{display:inline-flex;align-items:center;min-height:44px}

/* ───────────── Your page (docs/design-research/partner-looks/partner-page-design/final/:
   studio.png, studio-free.png; the phone: app-*.png, real/page-links-under-name.png) ───────────── */
.pgwrap{display:grid;grid-template-columns:minmax(0,920px) 320px;gap:32px;padding-top:28px;padding-bottom:100px;align-items:start}
.pgmain{min-width:0;outline:0}
.pgmain h1{font-size:25px}
.pgmain .lede{color:var(--muted);margin-top:4px}
.pghead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.pgstate[data-state=draft] .dot{background:var(--gel-a);box-shadow:0 0 8px var(--gel-a)}
.pgpreview{position:sticky;top:90px;display:flex;flex-direction:column;align-items:center;gap:10px}
.pgpreview .cap{font-size:12.5px;color:var(--faint);text-align:center;max-width:300px}
.pgbanner{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(232,162,74,.55);background:rgba(232,162,74,.08);color:#ffe7c7;border-radius:var(--r-lg);padding:12px 14px;margin-bottom:18px;font-size:14px}
.pgbanner .ic{width:20px;height:20px;flex:none;color:var(--gel-a);margin-top:1px}
.pgbanner b{font-weight:500;color:#fff1dc}
.pgbanner .link{min-height:0;display:inline;color:#ffd49a;font-size:14px}
.pgbanner.off{border-color:rgba(232,145,132,.55);background:rgba(232,145,132,.08);color:#ffd6cf}
.tiles2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.tilex{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.tilex .n{font:400 28px var(--display);text-shadow:0 0 8px var(--accent)}
.tilex .n small{font:13px var(--body);color:var(--muted);text-shadow:none}
.tilex .l{font-size:13px;color:#d7d1ea}
.tilex .s{font-size:12px;color:var(--tert);margin-top:2px}
.pgcard{margin-top:14px;padding:18px}
.pgcard .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.pgcard h2{font-size:17px}
.pgcard h3{font-size:14px;color:var(--muted);margin-bottom:8px}
.pgcard .block{margin-top:14px}
.pgcard .ic{width:18px;height:18px}
.quiet.small,.small{font-size:12.5px}
.nights{list-style:none;margin:12px 0 4px;padding:0}
.nrow.past .when,.nrow.past .where{opacity:.6}
.nrow{display:grid;grid-template-columns:110px minmax(0,1fr) 120px 150px auto;gap:12px;align-items:center;padding:12px 4px;border-top:1px solid var(--line)}
.nrow .when b{display:block;font-weight:500}
.nrow .when span{color:var(--muted);font-size:13px}
.nrow .where .src{color:var(--tert);font-size:12.5px}
.nrow .chip{display:inline-block;margin-top:5px;font-size:12px;color:var(--muted);border:1px solid var(--chipline);border-radius:999px;padding:2px 9px}
.nrow .hc{text-align:right}
.nrow .going b{font:400 20px var(--display)}
.nrow .going{font-size:13px;color:var(--muted)}
.nrow .going.was{font-size:13px}
.nrow .names{display:block;margin-left:auto;font-size:12.5px;min-height:32px}
.nrow .st{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.nrow .st .sub{font-size:12px;color:var(--tert)}
.stamp2{font-size:12px;border:1px solid;border-radius:999px;padding:1px 9px}
.stamp2.live{border-color:#4ade80;color:#86efac}
.stamp2.moved{border-color:var(--accent-400);color:#e7e5fe}
.stamp2.off{border-color:var(--hot);color:#ffd6cf}
.nrow .acts{display:flex;gap:6px;justify-content:flex-end}
.nrow.canceled .when,.nrow.canceled .where{opacity:.6}
.namelist{grid-column:1/-1;background:var(--well);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px}
.pgempty{margin-top:12px;border:1px dashed var(--dash);border-radius:12px;padding:16px;color:var(--muted);font-size:14px}
.pgempty b{color:var(--text);font-weight:500}
.pgcard textarea{width:100%;min-height:88px;margin-top:10px;background:var(--well);border:1px solid var(--ctl);border-radius:10px;color:var(--text);padding:11px 12px;font:15px/1.45 var(--body);resize:vertical}
.pgcard textarea:focus,.pgcard select:focus{outline:2px solid var(--accent-400);outline-offset:1px;border-color:transparent}
.pgcard select{width:100%;min-height:44px;background:var(--well);border:1px solid var(--ctl);border-radius:10px;color:var(--text);padding:0 10px;font-size:15px}
.pgcard .cnt{font-size:12px;color:var(--tert);text-align:right;margin-top:4px}
.row2{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.row2 .grow{flex:1;min-width:220px}
.row2.btns{margin-top:14px}
.notefill{display:flex;flex-wrap:wrap;gap:0 16px;align-items:center;margin-top:4px}
#note-link-help{margin-top:4px}
.checks2{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px}
.checks2:empty{display:none}
.checks2 .ok{color:var(--ok)}
.checks2 .bad,.ferr{color:var(--bad)}
.checks2 p{flex-basis:100%;margin:0}
.ferr{display:block;font-size:12.5px;margin-top:4px;min-height:0}
.linkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;margin-top:16px}
.field .prefixed{display:flex;align-items:center;background:var(--well);border:1px solid var(--ctl);border-radius:10px;min-height:44px;margin-bottom:0!important}
.prefixed:focus-within{outline:2px solid var(--accent-400);outline-offset:1px;border-color:transparent}
.field .prefixed .pre{display:inline;color:var(--tert);font-size:14px;padding-left:12px;margin:0;white-space:nowrap}
.field .prefixed input[type=text]{flex:1;border:0;background:none;padding-left:2px;outline:0;min-width:0}
.field .prefixed input[type=text]:focus{outline:0}
.pgcard .field{margin-top:12px}
.pgcard .field>span small{color:var(--tert)}
.logo.wide{width:150px;height:64px;border-radius:12px}
.logo.wide img{object-fit:contain}
.mvnote{margin-top:10px;font-size:13px;color:#e7e5fe;border-left:2px solid var(--accent-400);padding-left:10px}
.grid2f{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dlg .field{margin-top:12px}
.dlg .field label small{color:var(--tert)}
.dlg .under{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.dlg .under .hint{margin-top:0}
.dlg .cnt{font-size:12px;color:var(--tert);white-space:nowrap;margin-left:auto}
.cnt.over{color:var(--bad)}
.dlg .combo{position:relative}
.dlg .places{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;margin:0;padding:4px;list-style:none;background:var(--card);border:1px solid var(--ctl);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.55);max-height:min(320px,50vh);overflow:auto}
.dlg .places li{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:7px 10px;border-radius:8px;cursor:pointer}
.dlg .places li.on,.dlg .places li:hover{background:var(--well);outline:1px solid var(--accent-400)}
.dlg .places .pn{font-size:15px;color:var(--text);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.dlg .places .pa{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.dlg .places .ours{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--kicker);white-space:nowrap}
.dlg #nf-near:not([hidden]),.dlg #nf-search:not(:empty){margin-top:4px}
.dlg #nf-search:empty{display:none}
.nrow .where .addr,.nrow .where .nlink{display:block;font-size:12.5px;color:var(--tert);overflow-wrap:anywhere}
.dlg .hint.bad{color:var(--bad)}
.dlg.wide{width:min(640px,calc(100% - 32px))}
/* The night form (docs/design-research/studio-night-form-2026-11-12/DESIGN.md): this one dialog is
   roomier, and its date, start and length are the studio's own controls, not the browser's. */
.dlg.night{width:min(760px,calc(100% - 32px));padding:24px}
.dlg.night .grid2f,.dlg .gridwa,.dlg .gridtl{gap:0 16px}
.dlg .gridwa{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.dlg .gridtl{display:grid;grid-template-columns:1fr 2fr;align-items:start}
.dlg .when input[type=text]{padding-right:42px;background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}
.dlg .when.time input[type=text]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23b3abcc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.dlg .when.date input[type=text]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 9.5h15M8 3.5v3M16 3.5v3M6.5 5h11a2 2 0 012 2v11a2 2 0 01-2 2h-11a2 2 0 01-2-2V7a2 2 0 012-2z' fill='none' stroke='%23b3abcc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.dlg .when input[aria-expanded=true]{border-color:var(--accent-400);box-shadow:0 0 10px rgba(145,132,217,.35)}
.dlg .times,.dlg .cal{position:absolute;left:0;top:calc(100% + 4px);z-index:6;background:var(--card);border:1px solid var(--ctl);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.55),0 0 14px rgba(145,132,217,.18);animation:whenin .12s ease-out}
@keyframes whenin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.dlg .times{right:0;margin:0;padding:4px;list-style:none;max-height:min(272px,45vh);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--ctl) transparent}
.dlg .times li{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 12px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--text)}
.dlg .times li.on,.dlg .times li:hover{background:var(--well);outline:1px solid var(--accent-400)}
.dlg .times li.sel{color:var(--accent-300)}
.dlg .times li.sel::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-400);box-shadow:0 0 8px var(--accent)}
.dlg .cal{width:336px;max-width:calc(100vw - 44px);padding:8px 12px 12px}
.dlg .calhd{display:flex;align-items:center;justify-content:space-between}
.dlg .calmo{font-family:var(--display);font-size:18px;color:#fff;text-shadow:0 0 10px rgba(145,132,217,.55)}
.dlg .calnav{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:none;color:var(--muted)}
.dlg .calnav:hover{background:var(--well);color:var(--text)}
.dlg .calnav:focus-visible,.dlg .dnone:focus-visible,.dlg .stepper button:focus-visible{outline:2px solid var(--accent-400);outline-offset:1px}
.dlg .calnav svg{width:20px;height:20px}
.dlg .cal table{width:100%;border-collapse:collapse;table-layout:fixed}
.dlg .cal th{font-size:11px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;color:var(--tert);height:28px}
.dlg .cal td{height:44px;padding:0;text-align:center;cursor:pointer;outline:0}
.dlg .cal td:empty{cursor:default}
.dlg .cal td i{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.5px solid transparent;font-style:normal;font-size:14.5px;color:var(--text)}
.dlg .cal td:hover i{background:var(--well)}
.dlg .cal td[aria-current=date] i{color:var(--tube-a);text-shadow:0 0 8px rgba(232,162,74,.6)}
.dlg .cal td[aria-selected=true] i{border-color:var(--tube-b);color:#fff;background:rgba(145,132,217,.14);box-shadow:0 0 10px rgba(145,132,217,.6),inset 0 0 8px rgba(145,132,217,.3)}
.dlg .cal td[aria-disabled=true]{cursor:default}
.dlg .cal td[aria-disabled=true] i{color:var(--tert);opacity:.5;background:none}
.dlg .cal td:focus-visible i,.dlg .cal td:focus i{outline:2px solid var(--accent-400);outline-offset:1px}
.dlg .durrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.dlg .stepper{display:inline-flex;align-items:center;background:var(--well);border:1px solid var(--ctl);border-radius:var(--r-pill);padding:1px}
.dlg .stepper:focus-within{outline:2px solid var(--accent-400);outline-offset:1px;border-color:transparent}
.dlg .stepper button{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--accent-300);font-size:22px;line-height:1}
.dlg .stepper button:hover:not([disabled]){background:var(--accent-900)}
.dlg .stepper button[disabled]{opacity:.35;cursor:not-allowed}
.dlg .dval{min-width:118px;padding:0 6px;text-align:center;font-size:15px;color:var(--text);outline:0;white-space:nowrap}
.dlg .stepper.off{opacity:.4}
.dlg .dnone{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 13px;border:1px solid var(--ctl);border-radius:var(--r-pill);background:none;color:var(--muted);font-size:14px;white-space:nowrap}
.dlg .dnone i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--dash)}
.dlg .dnone:hover{color:var(--text);border-color:var(--dash)}
.dlg .dnone[aria-pressed=true]{border-color:var(--tube-b);color:#f3efff;background:rgba(145,132,217,.12);box-shadow:0 0 10px rgba(145,132,217,.45)}
.dlg .dnone[aria-pressed=true] i{border-color:var(--tube-b);background:var(--accent-400);box-shadow:0 0 8px var(--accent)}
.dlg #nf-end-hint b{font-weight:500;color:var(--text)}
@media (pointer:coarse),(max-width:900px){.dlg .dval{font-size:16px}}
@media (max-width:760px){
  .dlg.night{padding:18px 16px}
  .dlg .gridwa,.dlg .gridtl{grid-template-columns:1fr}
  .dlg .cal{left:-6px;right:-6px;width:auto;max-width:none;padding:8px 6px 10px}
}
@media (prefers-reduced-motion:reduce){.dlg .times,.dlg .cal{animation:none}}
.compare{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px}
.compare th,.compare td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--kicker);font-weight:400}
.compare tbody th{font-weight:400;color:var(--text)}
.compare td{color:var(--muted);width:28%}
.compare .yes{color:var(--ok)}.compare .no{color:var(--tert)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.choice{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.choice .ct{font-weight:500}
.choice .badge{font-size:11px;color:#ffe7c7;border:1px solid var(--tube-a);border-radius:999px;padding:1px 7px;margin-left:4px}
.choice .cp{font:400 22px var(--display)}
.choice .cl{font-size:12.5px;color:var(--faint);margin-bottom:8px}
.choice .tube{margin-top:auto;text-decoration:none}
#plan-soon{margin-top:12px}
.locked{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;border:1px dashed var(--dash);border-radius:var(--r-lg);padding:12px 16px;color:var(--faint);font-size:13.5px}
.locked .lk-h{display:flex;gap:8px;align-items:baseline}
.locked b{color:var(--muted);font-weight:500}
.stack{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.stats .kpis{margin-top:18px}
.stats .grid2.even{grid-template-columns:1fr 1fr}
.tbl .stt.mv{color:var(--accent-400)}
@media (max-width:1100px){.pgwrap{grid-template-columns:minmax(0,1fr)}.pgpreview{position:static}}
@media (max-width:760px){
  .nrow{grid-template-columns:1fr auto;gap:6px 12px}
  .nrow .hc{text-align:left}.nrow .names{margin-left:0}
  .nrow .acts{grid-column:1/-1;justify-content:flex-start}
  .tiles2,.linkgrid,.grid2f,.choices,.stats .grid2.even{grid-template-columns:1fr}
  .pghead{flex-direction:column}
  #pglogo-drop{flex-wrap:wrap}
  #pglogo-drop .grow{flex-basis:100%;order:1}
  #pglogo-drop .tube,#pglogo-drop .textbtn{order:2}
  .nrow .when b{display:inline;margin-right:6px}
}


/* The stage lights dialog: a live bulb row, three slots, your colors */
.lightrow{display:flex;justify-content:center;gap:12px;padding:14px 10px;border-radius:12px;margin-top:12px;border:1px solid var(--line)}
.lightrow b{width:14px;height:14px;border-radius:50%;display:block}
.lightslots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.lightslots .slot{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 8px;border-radius:12px;border:1px solid var(--line);background:var(--well);color:var(--text);font:inherit;text-align:left;cursor:pointer}
.lightslots .slot[aria-pressed=true]{border-color:var(--accent-400);box-shadow:0 0 0 1px var(--accent-400)}
.lightslots .slot .sw{width:26px;height:26px}
.lightslots .slot span{display:flex;flex-direction:column;font-size:13px;line-height:1.2}
.lightslots .slot small{font-size:11.5px;color:var(--muted)}
.lightslots .slot:focus-visible{outline:2px solid var(--accent-400);outline-offset:2px}
/* "N more to fix in Pictures": the rows Check it counts elsewhere, linked */

/* On a phone the three tabs (Your Look, Your page, Your singers) are their own row under the brand,
   on every view, so Your singers is one tap away (they used to hide under 900px). */
@media (max-width:900px){
  .masthead .wrap{flex-wrap:wrap;row-gap:6px}
  .tabsnav:not([hidden]){display:flex;order:5;flex:1 0 100%;gap:4px;margin:0}
  .tabsnav a{flex:1 1 0;justify-content:center;padding:6px 4px;font-size:13.5px}
}

/* ═══════════ Pass 2 (docs/design-research/partner-looks/studio-ease-of-use/final/): see it, don't read it ═══════════ */

/* The start screen: two numbered steps; style cards are mini phones */
.startsteps{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.startsteps li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.startsteps .sn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--ctl);color:var(--muted);font-size:13px;margin-top:10px}
.startsteps li.done .sn{border-color:var(--ok);color:var(--ok)}
.startsteps .st{font-size:15px;margin-top:12px}
.startsteps .st small{color:var(--faint);font-size:13px;margin-left:8px;font-weight:400}
.startsteps .drop .swatches .sw{width:22px;height:22px}
.bases.cards{grid-template-columns:repeat(5,1fr);margin-top:10px}
.base.card{padding:6px 6px 10px;display:flex;flex-direction:column}
.base.card .art{display:block;width:100%;aspect-ratio:260/294;border-radius:9px;margin-bottom:8px;background:#000;overflow:hidden;position:relative}
.base.card .n,.base.card .d{padding:0 4px}
.base:focus-visible,.ptile:focus-visible{outline:2px solid var(--accent-400);outline-offset:2px}
.onrow{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);font-size:13.5px}
.onrow b{font-weight:500}
.onrow .m{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;background:rgba(95,211,154,.12);color:var(--ok);border:1px solid rgba(95,211,154,.5)}
.onrow .quiet{color:var(--faint)}
.onrow .undo{margin-left:auto;background:none;border:0;color:var(--accent-400);text-decoration:underline;padding:0 4px;min-height:44px;white-space:nowrap;cursor:pointer;font:inherit}

/* Your brand: after a logo the six jobs fold into one line */
.jobline{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.jobline .jl{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;min-height:56px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--well);color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer}
.jobline .jl:hover{border-color:var(--accent-400)}
.jobline .jl .sw{width:24px;height:24px}
.jobline .jl .three{display:flex}
.jobline .jl .three .sw{width:18px;height:18px}
.jobline .jl .three .sw+.sw{margin-left:-5px}
.jobline .link{margin-left:4px;min-height:44px}
#jobs .jobs+.link{margin-top:6px;min-height:44px}

/* 3 · Make it yours: picture rows */
.partsec{margin-top:22px}
.partsec h3{font-size:16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.partsec h3 small{font-size:13px;color:var(--faint);font-weight:400}
.ptiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.ptile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 6px 8px;text-align:left;min-height:44px;min-width:0;color:var(--text);cursor:pointer;font:inherit;display:flex;flex-direction:column}
.ptile .art{display:block;width:100%;aspect-ratio:300/141;border-radius:9px;background:#000;overflow:hidden;position:relative}
.ptile .art.img{background:center/cover no-repeat}
.ptile .n{display:block;font-size:13px;margin-top:6px;padding:0 2px}
.ptile .d{display:block;font-size:11.5px;color:var(--faint);padding:0 2px;min-height:1em}
.ptile:hover{border-color:var(--ctl)}
.ptile[aria-pressed=true]{border-color:var(--accent-400);box-shadow:0 0 0 1px var(--accent-400),0 0 14px rgba(145,132,217,.45)}
.ptile.more .art,.ptile.own .art:not(.img){display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--dash);background:transparent;color:var(--muted);font-size:24px}
.ptiles .hidden{display:none}
.ptiles.open .hidden{display:flex}
.ptiles.open .more{display:none}
.lightcolors{display:flex;align-items:center;gap:14px;margin-top:10px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);flex-wrap:wrap}
.lightcolors .lbl{font-size:13.5px}
.lightcolors .lbl small{display:block;font-size:12px;color:var(--faint)}
.lightcolors .three{display:flex;gap:8px;align-items:center}
.lightcolors .three .sw{width:26px;height:26px;border-width:1px}
.lightcolors .pick{margin-left:auto}
.partsec .fonts{margin-top:10px}
details.opt{margin-top:22px}
details.opt>summary{cursor:pointer;background:var(--card);border:1px dashed var(--ctl);border-radius:var(--r-lg);padding:14px 16px;font-size:14.5px;min-height:56px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;list-style:none;color:var(--text)}
details.opt>summary::-webkit-details-marker{display:none}
details.opt>summary::after{content:"›";margin-left:auto;color:var(--faint);font-size:18px}
details.opt[open]>summary::after{transform:rotate(90deg)}
details.opt>summary .q{color:var(--faint);font-size:13px;font-weight:400}
details.opt .block{margin-top:14px}

/* 4 · Check it: quiet by default; what we tuned folds */
details.fold{margin-top:8px}
details.fold[hidden]{display:none}
details.fold>summary{cursor:pointer;color:var(--accent-400);font-size:13.5px;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"›";display:inline-block;transition:transform .15s;color:var(--faint)}
details.fold[open]>summary::before{transform:rotate(90deg)}
details.fold>summary .q{color:var(--faint)}
.chk .picbox{margin-top:8px;width:min(260px,100%);border-radius:8px;position:relative;overflow:hidden;background:#000 center/cover no-repeat}
.chk .picbox i{position:absolute;border:1px dashed rgba(255,138,122,.9);background:rgba(255,138,122,.14);border-radius:3px}
.chk .link.quiet{min-height:36px;font-size:12.5px;padding:0}
.chk .small{font-size:12px}
.okline{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--ok);margin-top:10px}
.okline.warn{color:var(--warn)}

/* The Stage lights dialog's bulb row, drawn by the renderer */
.lightsrow-host{display:block;height:64px;margin-top:12px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}

/* More options: on the left, over the form; the phone stays in view */
.drawer{right:auto;left:0;border-left:0;border-right:1px solid var(--line);transform:translateX(-100%);width:min(560px,100%);box-shadow:20px 0 60px rgba(0,0,0,.5)}
.drawer.open{transform:none}
.drawer .partrow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.drawer .partrow:first-of-type{border-top:0}
.drawer .partrow .pl{font-size:13.5px;padding-top:4px}
.drawer .partrow .d{font-size:11.5px;color:var(--faint)}
.drawer .strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.drawer .strip .ptile{flex:0 0 132px}
.drawer .wordrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px;min-height:44px}
.drawer .wordrow span{color:var(--faint);font-size:12.5px}
.drawer .wordrow .link{white-space:nowrap;min-height:44px}
.drawer .wordrow+.strip{margin-bottom:8px}
.drawer h3 small{font-weight:400;letter-spacing:0;text-transform:none;color:var(--faint)}

/* Phone width: the Once-you're-live steps are the tabs row; a one-row peek */
@media (max-width:900px){
  /* On Your Look only the one-row peek sticks; the masthead and its tabs scroll away above it. */
  body[data-view=look] .masthead{position:static}
  .preview:not(.open){grid-template-columns:56px minmax(0,1fr);grid-template-areas:"win bar";align-items:center;padding:6px 16px}
  .preview:not(.open) .peekwin{width:56px;height:56px;border-radius:9px}
  .preview:not(.open) .peekwin .look.phone{position:absolute;left:-1px;top:-2px;transform:scale(.187);transform-origin:top left;pointer-events:none}
  .preview .mobilebar{min-width:0}
  .preview .mobilebar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .preview .mobilebar b{white-space:nowrap}
  .bases.cards{grid-template-columns:repeat(2,1fr)}
  .ptiles{grid-template-columns:repeat(3,1fr)}
  .startsteps li{grid-template-columns:1fr}
  .startsteps .sn{display:none}
  .drawer{width:100%;top:68px}
  .drawer .partrow{grid-template-columns:1fr}
  body.drawer-open .preview:not(.open){z-index:210}
}
.chk:has(.picbox){align-items:start}

/* ───────────── The partner tab's icon (studio.md "The tab icon") ─────────────
   A five-tab bar as the apps draw it, on a dark and a light ground, the partner's
   tab selected and not. The mark is the server's rebuild (or the studio's own run
   of the same rebuild) used as a mask, so it takes the tab's tint like the others. */
.tabpreview{--tab-dark-ground:#07050d;--tab-dark-bar:rgba(38,33,56,.92);--tab-dark-off:#a49dbb;--tab-dark-on:#ff9ccc;
  --tab-light-ground:#ece9f2;--tab-light-bar:rgba(255,255,255,.94);--tab-light-off:#6b6478;--tab-light-on:#b8327a;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tabground{border-radius:var(--r-lg);padding:10px 10px 4px;display:grid;gap:8px}
.tabground.dark{background:var(--tab-dark-ground);border:1px solid var(--line)}
.tabground.light{background:var(--tab-light-ground)}
.tabground .tgl{font-size:11px;letter-spacing:.6px}
.tabground.light .tgl{color:var(--tab-light-off)}
.tabbar{display:grid;grid-template-columns:repeat(5,1fr);border-radius:999px;padding:5px 4px;min-width:0}
.tabground.dark .tabbar{background:var(--tab-dark-bar);color:var(--tab-dark-off);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tabground.light .tabbar{background:var(--tab-light-bar);color:var(--tab-light-off);box-shadow:0 2px 10px rgba(40,30,70,.12)}
.tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:3px 0;border-radius:999px}
.tabground.dark .tab.on{color:var(--tab-dark-on);background:rgba(255,255,255,.07)}
.tabground.light .tab.on{color:var(--tab-light-on);background:rgba(40,30,70,.06)}
.tabbar .tg{width:25px;height:25px;flex:none}
/* The rebuilt mark carries its own padding (the mark fills 20 of every 24): a 30px square draws it at 25px. */
.tabbar .tg.mark,.tithumb .tg.mark{display:block;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.tabbar .tg.mark{width:30px;height:30px;margin:-2.5px}
.tabbar .tl{font-size:10px;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tithumb{flex:none;width:52px;height:52px;border-radius:12px;background:var(--well);border:1px solid var(--ctl);display:grid;place-items:center;color:var(--text)}
.tithumb .tg{width:30px;height:30px}
.tithumb .tg.mark{width:36px;height:36px}
.tioriginal{flex:none;width:52px;height:52px;object-fit:contain;border-radius:12px;background:#fff}
.tiproblem{color:var(--warn);margin-top:6px}
.tiwarn{margin:10px 0 0;padding-left:18px;color:var(--warn);font-size:13.5px}
@media (max-width:620px){.tabpreview{grid-template-columns:1fr}}
/* A check beside the color it's about (owner, 2026-11-10): the pick stays; the note says why. */
.cnote{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--muted);margin:6px 0 2px}
.cnote .m{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;margin-top:1px}
.cnote[data-kind=fix] .m{background:rgba(255,138,122,.14);color:var(--bad);border:1px solid rgba(255,138,122,.5)}
.cnote[data-kind=warn] .m{background:rgba(232,162,74,.12);color:var(--warn);border:1px solid rgba(232,162,74,.5)}
.cnote .link{min-height:44px;padding:0 4px;font-size:12.5px}
.chk[data-kind=warn] .m{background:rgba(232,162,74,.12);color:var(--warn);border:1px solid rgba(232,162,74,.5)}
.jobs > .cnote{padding:2px 14px 10px;margin:0}

/* ───────────── In review: a status, not a pop-up (owner, 2026-11-10) ─────────────
   The strip is the status. While a version is with us it is pinned under the masthead (at phone
   width too) and carries the one way out: Make changes, then one question in place. */
.status .say{display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:1 1 300px;min-width:0;padding:6px 0}
.status .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.status .acts:empty{display:none}
.status .more{flex-basis:100%;color:var(--faint);font-size:12.5px;padding:0 0 10px 23px;margin-top:-6px}
.status .more[hidden]{display:none}
.status.pinned{position:sticky;top:var(--mast-h,57px);z-index:55;box-shadow:inset 0 -2px 0 transparent;transition:box-shadow .25s}
.status.pinned .wrap{padding-top:4px;padding-bottom:4px}
.status.pinned .acts{padding:4px 0}
.status.asking .sub{color:var(--text)}
/* An attempt to change something lights the strip's lower edge for two seconds. */
.status.pinned.lit{box-shadow:inset 0 -2px 0 var(--gel-a),0 8px 20px -10px rgba(232,162,74,.6)}
@media (prefers-reduced-motion:reduce){.status.pinned{transition:none}}
/* Whatever sticks under the masthead makes room for the pinned strip (studioMain fitStrip). */
/* On a phone the top belongs to the masthead or the one-row peek, so the strip pins to the bottom
   of the screen, where the thumb is; the page and the toast make room for it. */
@media (max-width:900px){
  .status.pinned{display:block;position:fixed;left:0;right:0;top:auto;bottom:0;z-index:85;border-bottom:0;border-top:1px solid var(--line);box-shadow:0 -10px 24px rgba(0,0,0,.5)}
  .status.pinned.lit{box-shadow:inset 0 2px 0 var(--gel-a),0 -10px 24px rgba(232,162,74,.28)}
  .status.pinned .wrap{gap:4px 12px;padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px))}
  .status.pinned .say{gap:4px 10px;flex-basis:100%}
  .status .more{padding:0 0 6px;margin-top:0}
  body{padding-bottom:var(--strip-h,0px)}
  .toast-live{bottom:calc(24px + var(--strip-h,0px))}
}

/* A reviewed file's state: a dot and two or three words in a square-cornered outline. Never a pill:
   pills are buttons on this site, and this isn't tappable. The dots are the strip's own colors. */
.amark{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ctl);border-radius:6px;padding:1px 7px;margin-left:8px;font-size:11.5px;font-weight:400;line-height:1.5;color:var(--muted);white-space:nowrap;vertical-align:middle}
.amark i{width:7px;height:7px;border-radius:50%;background:var(--ctl);flex:none}
.amark[data-mark=review]{border-color:rgba(232,162,74,.45);color:#f0d2a6}
.amark[data-mark=review] i{background:var(--gel-a);box-shadow:0 0 6px var(--gel-a)}
.amark[data-mark=live] i{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.amark.plain i{display:none}
.picslot .t .amark{margin-left:6px}

/* Notes and hard stops, each beside its control: a hard stop shows the color it would change. */
.cnote .pass{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin:0 2px}
.cnote .pass .sw{width:16px;height:16px;border-width:1px}
.cnote .pass span{color:var(--faint)}
.ptiles>.cnote{grid-column:1/-1}
.picslot .cnote{margin-top:8px}
.picslot .cnote .link{min-height:44px}
/* Beside Send for review: what blocks sending, and only sending. */

/* ═══════════ The layout (docs/design-research/partner-looks/partner-web-review-2026-11-10/DESIGN.md) ═══════════
   Four tabs; Look is three panels beside the one live phone, under one bar. This block is the
   layout's one set of rules: 1200 and up, 900 to 1199, under 900. */
.studio{grid-template-columns:minmax(0,760px) minmax(300px,1fr);gap:48px;padding-top:20px}
.main{gap:0;padding-bottom:120px;min-width:0}
#main,#codes-tab{scroll-margin-top:calc(90px + var(--strip-h,0px))}
.panels{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
.panels button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 16px;min-height:44px;color:var(--muted);font-size:15px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.panels button:hover{color:var(--text)}
.panels button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent-400)}
.panels button:focus-visible{outline:2px solid var(--accent-400);outline-offset:-2px;border-radius:8px}
.pdot{width:8px;height:8px;border-radius:50%;background:var(--gel-a);box-shadow:0 0 6px var(--gel-a)}
.pdot[hidden]{display:none}
.panel[hidden]{display:none}
.panel:focus{outline:0}
.panel>h2{font-size:25px;letter-spacing:-.2px}
.panel>.lede{color:var(--muted);margin-top:6px;font-size:15px}
.main>.help{margin-top:40px;font-size:12.5px;color:var(--faint)}
.main>.help a{display:inline-flex;align-items:center;min-height:44px}
#tuned{margin-top:18px}
/* Your name: theirs to change, through review */
.namerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.namerow .field{margin:0;min-width:200px}
.namerow .field input{font-size:17px}
.namerow .amark{margin-left:0}
#name .formerr:empty{display:none}
#name-note{margin-top:8px}
#name-note .link{font-size:13px;margin-left:4px}
.jobline .jl .added{display:block;font-size:10px;color:var(--faint)}
.picslot.wide{margin-top:10px}
/* The setlist header picture, under its row of our own header art on the Style panel: one slot, full width. */
.ps-header .pics{grid-template-columns:1fr}
#ground-own>p{margin-top:10px}
/* Codes, its own tab */
.codestab{padding-top:28px;padding-bottom:100px}
.codestab:focus{outline:0}
.codestab h1{font-size:25px}
.codestab .lede{color:var(--muted);margin-top:6px}
.codestab .block{max-width:760px}
.menu button.plain{color:var(--text)}

/* The one bar: state, what needs them, the one action. Always pinned on the Look tab. */
.status .wrap{gap:8px 14px}
.status .needs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status .needs:empty{display:none}
/* Square-cornered: these open a list, and only the action is a pill. */
.status .need{border:1px solid var(--ctl);background:var(--well);color:var(--text);border-radius:8px;padding:0 12px;min-height:44px;font-size:13px;cursor:pointer}
.status .need:hover,.status .need[aria-expanded=true]{border-color:var(--accent-400)}
.status .need.stop{border-color:rgba(232,162,74,.6);color:#f0d2a6}
.status .allreads{color:var(--ok);font-size:13px}
.status .need .sm{display:none}
.status .needs .link{font-size:13px}
.status .acts{margin-left:0}
.status .acts .why{color:var(--faint);font-size:12.5px}
.status .acts .why:empty{display:none}
.status .right{margin-left:auto}
.status .right:empty{display:none}
.status .right:empty+.acts{margin-left:auto}
.status .stlist{flex-basis:100%;min-width:0;max-height:min(46vh,420px);overflow:auto;border-top:1px solid var(--line);padding:8px 0 12px}
.status .stlist[hidden]{display:none}
.stlisthead{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.stlisthead span{flex:1;min-width:0}
.stlisthead b{font-weight:500;color:var(--text)}
.status .stlist .chk{margin-top:8px}

/* A color picker: a small panel beside its control. No backdrop: the phone stays in view. */
.pop{position:absolute;z-index:50;width:330px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--ctl);border-radius:14px;padding:14px 16px 16px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.pop[hidden]{display:none}
.pop h2{font-size:16px}
.pop h2 .hex{margin-left:6px}
.pop .pickrow{gap:12px;margin-top:12px;align-items:flex-end}
.pop input[type=color]{width:56px;height:48px;border:1px solid var(--ctl);border-radius:10px;background:var(--well);padding:3px;cursor:pointer}
.pop .popacts{gap:10px;margin-top:8px;flex-wrap:wrap}
.pop .popacts .quiet{font-size:12px}
.pop .formerr:empty{display:none}
.pop.sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;z-index:96;border-radius:16px 16px 0 0;border-width:1px 0 0;max-height:58vh;overflow:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -14px 40px rgba(0,0,0,.6)}

.preview .screens{flex-wrap:wrap;justify-content:center}
.preview .screens button{padding:6px 10px}
.jobline{align-items:stretch}

/* Sign-in: a provider's window that closed with no sign-in says so */
.provfail{margin-top:12px;padding:10px 12px;border:1px solid rgba(232,162,74,.5);border-left-width:3px;border-radius:10px;background:rgba(232,162,74,.07);font-size:13.5px;color:var(--text)}
.provfail .link{margin-top:2px}

@media (min-width:901px){
  .preview,.pgpreview{top:calc(90px + var(--strip-h,0px))}
  /* The bar sticks under the masthead; the panel's own row of names sits under both. */
  .status.pinned{position:sticky;top:var(--mast-h,57px);z-index:55}
}
/* 900 to 1199: the same two columns, the phone a little smaller, tiles four across. */
@media (min-width:901px) and (max-width:1199px){
  .wrap{padding:0 20px}
  .studio{grid-template-columns:minmax(0,1fr) 300px;gap:22px}
  .preview .look.phone{zoom:.85}
  .preview .screens{gap:0}
  .preview .screens button{padding:6px 6px;font-size:12px}
  /* Five across still: a row is four tiles and "more", or five names, and each is about 120 wide here. */
  .ptiles,.bases.cards{gap:8px}
  .who span{display:none}
  .masthead .wrap{gap:12px}
  .brand small{display:none}
}
/* Under 900: one column; the small live phone pinned at the top; tabs one row, panels a second;
   the bar and its action pinned at the bottom of the screen, where the thumb is. */
@media (max-width:900px){
  .studio{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .tabsnav:not([hidden]){display:flex}
  .tabsnav a{min-height:44px}
  .panels{margin:10px 0 16px}
  .panels button{flex:1 1 0;justify-content:center;padding:10px 6px}
  .main{order:1;padding-bottom:40px}
  .ptiles{grid-template-columns:repeat(3,1fr)}
  .bases.cards{grid-template-columns:repeat(2,1fr)}
  .pics{grid-template-columns:1fr}
  .namerow .field{flex-basis:100%;order:-1}
  .codestab{padding-top:18px}
  .status.pinned{display:block;position:fixed;left:0;right:0;top:auto;bottom:0;z-index:85;border-bottom:0;border-top:1px solid var(--line);box-shadow:0 -10px 24px rgba(0,0,0,.5)}
  .status.pinned .wrap{gap:6px 10px;padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px))}
  /* A draft's bar is what needs them and Send; its state is the pill at the top. */
  .status.pinned[data-state=draft] .say{display:none}
  .status.pinned .say{gap:4px 10px;flex-basis:100%}
  .status .needs{flex:1 1 auto;min-width:0}
  .status .need{padding:0 10px;font-size:12.5px}
  .status .need .lg{display:none}
  .status .need .sm{display:inline}
  .status .acts{margin-left:auto}
  .status .acts .why{display:none}
  .status .stlist{order:-1;max-height:50vh}
  body{padding-bottom:var(--strip-h,0px)}
  .toast-live{bottom:calc(24px + var(--strip-h,0px))}
}

/* ---------- partner styles: each card's own small palette, while the cards wear the styles' own colors ---------- */
.base.card .pal{display:none;gap:4px;padding:0 4px;margin-top:7px}
.bases.own .base.card .pal{display:flex}
.base.card .pal i{width:14px;height:14px;border-radius:50%;border:1px solid var(--ctl);flex:none}

/* ---------- showing the plan to a free partner (DESIGN.md "Showing the plan") ---------- */
/* The one mark: a small outlined label, amber (the spotlight's color), never a pill. The button
   around it is 44px tall; the label is what shows. */
.planmark{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 -12px 10px;padding:0 2px;border:0;background:none;font:inherit;cursor:pointer;vertical-align:middle}
.planmark span{display:inline-block;padding:2px 7px;border:1px solid var(--gel-a);border-radius:5px;color:var(--tube-a);font-size:11.5px;font-weight:500;line-height:1.3;letter-spacing:.02em;white-space:nowrap}
.planmark:hover span{background:rgba(232,162,74,.12)}
.planmark:focus-visible,.planfree:focus-visible{outline:2px solid var(--accent-400);outline-offset:2px}
.pmslot:empty{display:none}
/* Beside a phone that shows the partner's own tab: "Your own tab [Headliner]", or a quiet "Included with Headliner". */
.tabplan{display:flex;align-items:center;justify-content:center;margin:10px 0 0;min-height:24px;font-size:13px;color:var(--muted)}
.tabplan:empty{display:none}
.tabplan .quiet{font-size:12.5px;color:var(--faint)}
.pgpreview .tabplan{margin:0 0 10px}
.tabsnav a .plandot{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--gel-a);box-sizing:border-box;margin-left:6px;flex:none}
.tabsnav a .plandot[hidden]{display:none}
.planfree{border:1px solid var(--gel-a);background:none;color:var(--tube-a);border-radius:999px;padding:6px 12px;min-height:44px;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.planfree:hover{background:rgba(232,162,74,.12)}
.planfree[hidden]{display:none}
/* Under the phone: Singers today / On Headliner, and what each means. */
#planview{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:320px}
#planview[hidden]{display:none}
.planview button{min-height:44px;white-space:nowrap}
.pvcap{font-size:12px;color:var(--faint);text-align:center;margin:0;line-height:1.45}
.pvcap .link{font-size:12px;min-height:44px;padding:0 4px;display:inline-flex;align-items:center;vertical-align:middle;margin:-14px 0}
.preview.today .peekwin{outline:1px dashed var(--dash);outline-offset:6px;border-radius:44px}
/* The Singers tab: one dashed card per number the plan adds. No numbers in them. */
.plancards{margin-top:16px}
.pc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pc-h>div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.pc-h h2{font-size:16px;margin:0;font-weight:500}
.pc-h .lk-i{color:var(--tube-a);align-self:center;flex:none}
.pc-p{color:var(--muted);font-size:13.5px}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px}
.pc{border:1px dashed var(--dash);border-radius:var(--r-lg);padding:12px 14px;min-width:0}
.pc h3{font-size:14px;margin:0 0 4px;font-weight:500;color:var(--text)}
.pc p{font-size:12.5px;color:var(--faint);margin:0;line-height:1.45}
@media (max-width:899px){
  /* A phone: the switch shows with the enlarged preview, like the caption; the masthead keeps the plan a tap away in the account menu. */
  #planview{display:none}
  .preview.open #planview:not([hidden]){display:flex;grid-column:1/-1;justify-self:center}
  .planfree{display:none}
}

/* ═══════════ Onboarding: website first (onboard.js; partner-onboarding-2026-11-10/DESIGN.md) ═══════════ */
/* The website, the wait and its failures are gate cards. One pink button on each path: Draft my Look, then Send for review. */
.field input[type=url]{width:100%;background:var(--well);border:1px solid var(--ctl);border-radius:10px;color:var(--text);padding:11px 12px;font-size:15px;min-height:44px}
.gatecard h1:focus,.pass h1:focus{outline:none}
.gatecard h1:focus-visible,.pass h1:focus-visible{outline:2px solid var(--accent-400);outline-offset:4px;border-radius:4px}
.gatecard .nextline{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:14px}
.gatecard .nextline b,.gatecard .lede b,.pass .lede b{color:var(--text);font-weight:500}
.gatecard #site-under{font-size:12.5px;color:var(--faint);margin-top:10px}
.gatecard .formerr:empty{display:none}
.gatecard .fine .link,.gatecard p>.link{display:inline;min-height:0;font-size:inherit;text-decoration:underline}
.gatecard .fine .link{padding:14px 0;margin:-14px 0}
.buildcard{display:flex;gap:14px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-top:10px;background:rgba(20,16,34,.5)}
.buildcard b{font-weight:500}
.buildcard .tube{flex:none}
/* The caution treatment: the app's one failure banner (amber), here as a note and as a box. */
.caution{border:1px solid rgba(232,162,74,.55);background:rgba(232,162,74,.08);color:#ffe7c7;border-radius:var(--r-lg);padding:12px 14px;margin-top:14px;font-size:14px}
.caution.note{padding:8px 12px;font-size:13.5px}
.caution b{font-weight:500;color:#fff1dc}
.caution .tube{margin-top:10px}
/* The wait, a stepper: the ring on the step being worked on is the one thing moving; a step ticks
   only when its stage really finished, and the meter lights one still light per finished step. */
.meter{display:flex;align-items:center;gap:12px;margin:20px 0 4px}
.meter .segs{display:flex;gap:6px;flex:1;max-width:260px}
.meter .segs i{flex:1;height:4px;border-radius:var(--r-pill);background:var(--ctl)}
.meter .segs i.on{background:var(--gel-p);box-shadow:0 0 8px var(--gel-p)}
.meter .segs i.on:nth-child(3n+2){background:var(--gel-a);box-shadow:0 0 8px var(--gel-a)}
.meter .segs i.on:nth-child(3n){background:var(--accent);box-shadow:0 0 8px var(--accent)}
.meter .count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.stages{list-style:none;margin:14px 0 0;padding:0}
.stages li{position:relative;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;color:var(--faint);font-size:14.5px;padding-bottom:18px;min-height:50px}
.stages li:last-child{padding-bottom:0;min-height:32px}
.stages li:not(:last-child)::before{content:"";position:absolute;left:15.5px;top:36px;bottom:4px;width:1px;background:var(--line)}
.stages li[data-state=done]:not(:last-child)::before{background:rgba(95,211,154,.45)}
.stages .m,.oneline .m,.stopped .m{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;border:1.5px solid var(--ctl);color:var(--faint);flex:none}
.stages .m.ok{background:rgba(95,211,154,.12);color:var(--ok);border-color:rgba(95,211,154,.6);font-size:15px;animation:landed .28s ease-out}
.stages .t{padding-top:5px;min-width:0}
.stages .what{display:block}
.stages li[data-state=running]{color:var(--text)}
.stages li[data-state=running] .m,.oneline .m{border-color:rgba(232,162,74,.28);color:var(--tube-a);box-shadow:0 0 12px rgba(232,162,74,.35)}
.stages li[data-state=running] .m::after,.oneline .m::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--tube-a);border-right-color:var(--tube-a);animation:working .9s linear infinite}
.stages .now{display:block;color:var(--tube-a);font-size:13px;margin-top:2px}
.stages li[data-state=done]{color:var(--text)}
.stages b{font-weight:500;display:block}
.stages .found{display:block;color:var(--muted);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.stages .swatches{margin-top:8px;gap:6px}
.stages .sw{width:20px;height:20px}
.stages .sw,.filled .sw{border-radius:50%;display:inline-block;border:1px solid var(--ctl)}
.filled .sw{width:16px;height:16px}
.stages li[data-state=done] .t{animation:landed .28s ease-out}
@keyframes working{to{transform:rotate(360deg)}}
@keyframes landed{from{opacity:0}to{opacity:1}}
.waitcard .oneline{display:flex;align-items:center;gap:12px;margin-top:20px;color:var(--tube-a)}
.failcard .stopped{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted);font-size:13.5px}
.failcard .stopped .m{width:24px;height:24px;font-size:11.5px;border-color:var(--hot);color:var(--hot)}
.failcard .startdrop{margin-top:14px}
.failcard>p>.link{min-height:44px;display:inline-flex}
/* Build it yourself */
.gatecard.build .progress{margin-bottom:14px}
.buildname{margin-top:16px;max-width:560px}
.buildname .st{font-size:15px;margin-bottom:8px}
.buildname .st small{color:var(--faint);font-size:13px;margin-left:8px;font-weight:400}
.buildname .quiet{font-size:12.5px;color:var(--faint);margin-top:8px}
.bases[aria-busy=true]{opacity:.55;pointer-events:none}

/* The progress row: finished looks are links, the current one is marked, later ones are plain text. */
.progress{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:13.5px;color:var(--faint)}
.progress li{display:inline-flex;align-items:center;gap:8px}
.progress li+li::before{content:"";width:18px;height:1px;background:var(--ctl);margin-right:2px}
.progress .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;border:1px solid var(--ctl);flex:none}
.progress .cur{color:var(--text)}
.progress .cur .n{border-color:var(--accent-400);color:var(--accent-300);box-shadow:0 0 8px rgba(145,132,217,.5)}
.progress .done .n{border-color:rgba(95,211,154,.5);color:var(--ok)}
.progress button{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;padding:0 2px;color:var(--muted);font:inherit;cursor:pointer}
.progress button .lbl{text-decoration:underline;text-underline-offset:3px}
.progress button:hover{color:var(--text)}

/* The guided pass: the panels' own controls, one group at a time. */
.pass{margin-top:6px}
.pass[hidden],.passfoot[hidden],#while[hidden]{display:none}
.passrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;min-height:44px}
.passsaved{font-size:12.5px;color:var(--faint)}
.pass h1{font-size:26px;line-height:1.2;margin-top:14px}
.pass .lede{color:var(--muted);margin-top:8px;max-width:760px}
.pass .welcome{margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:14px;background:var(--card)}
.pass .welcome b{color:var(--text);font-weight:500}
.pass .welcome[hidden]{display:none}
.passname .quiet{font-size:12.5px;color:var(--faint);margin-top:8px}
.passname .quiet b{color:var(--muted);font-weight:500}
.passname .formerr:empty{display:none}
body[data-pass] #again,body[data-pass] #panels,body[data-pass] .panel>h2,body[data-pass] .panel>.lede,body[data-pass] .help,body[data-pass] #tuned,body[data-pass] #name-notes,body[data-pass] #tabicon-block,body[data-pass] #icon-block{display:none}
body[data-pass=picture] .panel,body[data-pass=send] .panel{display:none}
body[data-pass=you] .b-jobs,body[data-pass=you] .darklight,body[data-pass=you] #logo .swatches,body[data-pass=you] #logo .yc{display:none}
body[data-provisional] .b-name,body[data-provisional] #logo-drop .textbtn{display:none}
body[data-pass=colors] .b-name,body[data-pass=colors] #logo-drop{display:none}
body[data-pass=colors] #logo .yc{margin-top:0!important}
body[data-pass=style] #p-style{display:flex;flex-direction:column}
body[data-pass=style] #p-style[hidden]{display:none}
body[data-pass=style] .ps-light,body[data-pass=style] .ps-name,body[data-pass=style] .ps-header,body[data-pass=style] .b-more{display:none}
body[data-pass=style] #bases{order:1;margin-top:16px}
body[data-pass=style] #onrow{order:2}
body[data-pass=style] .ps-font{order:3}
body[data-pass=style] .ps-surface{order:4}
#font-from:empty{display:none}
#font-from{font-size:12.5px;margin-top:6px}
.base.card{position:relative}
.base.card .ourpick{position:absolute;top:8px;left:8px;padding:2px 7px;border-radius:5px;background:rgba(12,10,20,.86);border:1px solid var(--accent-400);color:var(--accent-300);font-size:11px;font-weight:500;letter-spacing:.02em;pointer-events:none}
/* What we filled in: a small table of what the draft holds. */
.filled{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.filled .frow{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:center;font-size:14.5px}
.filled .frow:last-child{border-bottom:0}
.filled .fk{color:var(--muted);font-size:13.5px}
.filled .fv{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;min-width:0}
.filled .swatches{margin:0;gap:6px}
.filled .quiet{font-size:12.5px;color:var(--faint)}
/* The Picture look */
.piccard{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:16px;align-items:center;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:14px;margin-top:18px}
.piccard .pic{aspect-ratio:1206/1212;border-radius:10px;background:#000 center/cover no-repeat}
.piccard .t{font-size:15px;margin-bottom:4px}
.picchoices{gap:10px;flex-wrap:wrap;margin:16px 0 12px}
/* The Send look */
.sendok{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.sendok .m{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;background:rgba(95,211,154,.12);color:var(--ok);border:1px solid rgba(95,211,154,.5)}
.sendok b,.nextsteps b{font-weight:500}
.sendstops{margin-top:18px}
.sendstops .checks,.sendnotes .checks{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.sendnotes{margin-top:10px}
.sendnotes .need{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--ctl);border-radius:8px;background:var(--well);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.next-h{font-size:16px;margin-top:24px}
.nextsteps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.nextsteps li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.nextsteps .sn,.wl .sn{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--ctl);color:var(--muted);font-size:12px;flex:none}
.nextsteps .quiet{font-size:13.5px;margin-top:3px;color:var(--faint)}
.nextsteps .quiet b{color:var(--muted)}
.nextsteps .link{display:inline;min-height:0;font-size:inherit;text-decoration:underline;padding:14px 0;margin:-14px 0}
/* The pass's buttons: Back and the primary in a row; the quiet links after. */
.passfoot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap}
.passfoot .pf-main{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.passfoot .pf-links{display:flex;gap:4px 18px;align-items:center;flex-wrap:wrap;flex:1}
.passfoot .pf-links .right,.passfoot .pf-links [data-act=pass-fine]{margin-left:auto}
.passfoot .why{font-size:12.5px;color:var(--warn)}
.passfoot .why:empty{display:none}
.passfoot .link .quiet{color:var(--faint)}
#pass-nomore{font-size:12.5px}

/* Sent: "While we look", three things that never wait for review; and the first visit after going live. */
.whilecard,.liveline{border:1px solid var(--line);border-radius:18px;background:var(--card);padding:18px 18px 8px;margin:6px 0 18px}
.whilecard h2{font-size:18px;line-height:1.3}
.whilecard h2 small{font-size:13px;color:var(--faint);font-weight:400;margin-left:8px;white-space:nowrap}
.wl{list-style:none;margin:8px 0 0;padding:0}
.wl li{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}
.wl li .grow{flex:1 1 240px;min-width:0}
.wl b{font-weight:500}
.wl .quiet{font-size:13.5px;color:var(--faint);margin-top:2px}
.wl .sn.ok{background:rgba(95,211,154,.12);color:var(--ok);border-color:rgba(95,211,154,.5)}
.wl .acts{display:flex;gap:8px;align-items:center}
.wl .good{color:var(--ok)}
.wl .bad{color:var(--warn)}
.wl .wlmk{margin:0;flex:0 1 300px;flex-wrap:nowrap}
.wl .wlmk input{min-width:0;width:100%}
.wl .planmark{margin-left:8px}
.wlfoot{display:flex;justify-content:flex-end}
.liveline{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;border-color:rgba(95,211,154,.4)}
.liveline b{font-weight:500}
.liveline .acts{display:flex;gap:8px}
#drafted-from{margin-top:8px;font-size:12.5px;color:var(--faint)}
@media (max-width:900px){
  input[type=url],.field input[type=url]{font-size:16px}
  .buildcard{flex-direction:column;align-items:flex-start}
  /* Numbers, with the label only on the current step. */
  .progress li:not(.cur) .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .progress li+li::before{width:10px}
  .passrow{margin-top:10px}
  .pass h1{font-size:23px}
  .filled .frow{grid-template-columns:76px 1fr}
  .piccard{grid-template-columns:1fr}
  .piccard .pic{max-width:240px}
  /* Back and the primary are pinned at the bottom, above the home indicator; the quiet links end the content. */
  .passfoot{border-top:0;margin-top:18px;padding-top:0}
  .passfoot .pf-links{flex-direction:column;align-items:flex-start;gap:0}
  .passfoot .pf-links .right,.passfoot .pf-links [data-act=pass-fine]{margin-left:0}
  .passfoot .pf-main{position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -10px 24px rgba(0,0,0,.5);padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));flex-wrap:nowrap}
  .passfoot .pf-main .tube{min-height:44px}
  .passfoot .pf-main .tube:last-child{flex:1}
  .passfoot .pf-main .why{flex:1;min-width:0}
  body[data-pass]{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body[data-pass] .toast-live{bottom:96px}
  .wl li .acts,.wl .wlmk{flex:1 1 100%}
}
/* Reduce Motion: nothing moves. The working step keeps a full, still ring and its "Working on it…" line. */
@media (prefers-reduced-motion:reduce){.stages .m.ok,.stages li[data-state=done] .t{animation:none}.stages li[data-state=running] .m::after,.oneline .m::after{animation:none;border-color:var(--tube-a)}}
/* In the pass the tabs are out of sight: the masthead's right side stays on the right. */
body[data-pass] .masthead .brand{margin-right:auto}
.masthead .brand:has(+ .tabsnav[hidden]){margin-right:auto}

/* Admin mode (studio.md "Editing as an admin"): the owner editing a partner's Look. The caution
   treatment, so it never reads as the partner's own studio; the partner-only tabs are gone. */
.adminbar{background:rgba(232,162,74,.14);border-bottom:1px solid rgba(232,162,74,.55);color:#f0d2a6;font-size:13px;line-height:1.4;padding:8px 16px;text-align:center}
.adminbar[hidden]{display:none}
body.adminmode #tabsnav a:not([data-tab=look]){display:none}
.amark[data-mark=waiting]{border-color:rgba(232,162,74,.45);color:#f0d2a6}
.amark[data-mark=waiting] i{background:var(--gel-a);box-shadow:0 0 6px var(--gel-a)}
.amark[data-mark=approved] i{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.againask{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)}
.againask p{margin-bottom:10px}
.againask:focus{outline:0}
/* Brand and Style sections that open and close (owner, 2026-11-11). Nothing here applies in the guided looks. */
.foldhead{position:relative}
.foldhead h3{display:block;font-size:16px;margin:0}
.foldbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 2px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.foldbtn .ft{flex:1 1 auto;min-width:0}
.foldbtn .ft small{font-weight:400;color:var(--faint);font-size:13px;margin-left:8px}
/* The summary sits on the header line but outside the heading (so the heading's name stays the title); taps go to the button under it. */
.fsum{position:absolute;right:30px;top:0;bottom:0;max-width:45%;display:flex;align-items:center;justify-content:flex-end;gap:4px;pointer-events:none;color:var(--muted);font-size:13px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsum .three{display:inline-flex;gap:3px}
.fsum .sw{width:16px;height:16px;border-width:1px}
.chev{flex:none;color:var(--muted);transition:transform .22s ease-out}
.foldbtn[aria-expanded=true] .chev{transform:rotate(180deg)}
.fold[data-open=true] .fsum{display:none}
.foldbtn:hover .chev{color:var(--text)}
.foldbtn:focus-visible{outline:2px solid var(--accent-400);outline-offset:2px;border-radius:8px}
.foldbody{padding-top:10px}
.foldbody.row.dlrow,.dlrow{gap:16px;flex-wrap:wrap}
.dlrow .seg{margin-left:auto}
body:not([data-pass]) .fold[data-open=false]>.foldbody{display:none}
/* While a section slides shut it stays drawn (animateFold). */
body:not([data-pass]) .fold[data-open=false].folding>.foldbody{display:block}
.fold.folding>.foldbody{overflow:hidden}
body:not([data-pass]) .fold[data-open=false] .ft small{display:none}
body[data-pass] .fold .fsum,body[data-pass] .fold .chev{display:none}
body[data-pass] .foldbtn{pointer-events:none;cursor:default}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}
@media (max-width:640px){.foldbtn .ft small{display:block;margin-left:0}.fsum{max-width:45%}}

/* A chosen file is being worked on (setBusy): a quiet spinner, controls off. Still under reduced motion. */
.drop.busy{border-style:solid;border-color:var(--tube-b)}
.tithumb .spin,.tube.working::after{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid transparent;border-top-color:var(--tube-b);border-right-color:var(--tube-b);animation:working .9s linear infinite}
.tube.working::after{content:"";width:14px;height:14px}
.tithumb.working{display:flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){.tithumb .spin,.tube.working::after{animation:none}}