/* WC3 Brand Studio. Tokens from the Web Conductors design packet (colors_and_type.css); product layer
   ported from the P0 prototype (LocalRank kit shell). Type floor: 14px for all body and support text. */
:root{
  --wc-yellow:#FECA04;--wc-yellow-bright:#FFD827;--wc-yellow-deep:#E8B400;--wc-yellow-soft:#FFF4C2;--wc-yellow-wash:#FFFBEA;
  --wc-black:#0A0A0B;--wc-charcoal:#2C2C30;--wc-white:#FFFFFF;--wc-paper:#FAFAF7;--wc-fog:#F4F4EF;
  --wc-line:#E2E2DC;--wc-line-strong:#C9C9C2;--wc-slate:#54545A;
  --fg-1:var(--wc-black);--fg-2:var(--wc-slate);--fg-on-dark:var(--wc-white);
  --bg-1:var(--wc-white);--bg-2:var(--wc-paper);--bg-3:var(--wc-fog);
  --ok-soft:#E5F5EC;--warn-soft:#FFF1D6;--err-soft:#FCE7E5;--info-soft:#E5EDF9;
  --ok-text:#1B7A43;--warn-text:#9A5D00;--err-text:#B42D22;--info-text:#2B5FB3;
  --r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:999px;
  --s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;
  --shadow-1:0 1px 2px rgba(10,10,11,.06),0 1px 1px rgba(10,10,11,.04);
  --shadow-2:0 4px 12px rgba(10,10,11,.08),0 2px 4px rgba(10,10,11,.04);
  --shadow-3:0 12px 32px rgba(10,10,11,.10),0 4px 10px rgba(10,10,11,.05);
  --border-1:1px solid var(--wc-line);--border-2:1px solid var(--wc-line-strong);
  --ease:cubic-bezier(.2,.8,.2,1);--fast:140ms;--base:220ms;
  --font-display:"Poppins","Helvetica Neue",Arial,sans-serif;--font-body:"Inter","Helvetica Neue",Arial,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --t-h2:clamp(28px,3.2vw,40px);--track-tight:-.02em;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}[hidden]{display:none!important}
body{margin:0;background:var(--bg-2);color:var(--fg-1);font:400 16px/1.5 var(--font-body)}
button,select,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--wc-black);outline-offset:2px}
.eyebrow{font:600 14px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum","zero"}
.help{font-size:14px;color:var(--fg-2);line-height:1.45}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* sign-in / gate screen */
.gate-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;max-width:480px;margin:0 auto;gap:12px}
.gate-sun{width:72px;height:72px;margin-bottom:8px}
.gate-screen h1{font:700 28px/1.2 var(--font-display);letter-spacing:var(--track-tight)}
.gate-screen p{color:var(--fg-2)}
.gate-screen small{margin-top:20px;color:var(--fg-2);font-size:14px}
.gate-screen .btns{justify-content:center;margin-top:8px}
.gate-screen .btns:has(.signin){align-self:stretch}
.gate-screen .signin{width:100%;text-align:left}
.gate-screen .signin .fields{margin-top:4px}
.gate-screen .signin .btn.full{justify-content:center;width:100%}
.gate-screen .signin a{color:var(--fg-1);text-decoration:underline;text-underline-offset:2px}
.gate-screen .signin #siErr .alert{margin-top:12px}

/* shell */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{background:var(--bg-1);border-right:var(--border-1);padding:24px 16px;display:flex;flex-direction:column;gap:24px;position:sticky;top:0;height:100vh}
.lockup{display:flex;align-items:center;gap:10px;padding:0 4px}
.lockup svg{width:34px;height:34px;flex:none}
.lockup b{display:block;font:700 17px/1 var(--font-display);letter-spacing:var(--track-tight)}
.lockup small{display:block;font-size:14px;color:var(--fg-2);margin-top:4px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;background:transparent;border-radius:10px;font-size:15px;font-weight:500;color:var(--fg-2);cursor:pointer;text-align:left;min-height:44px;transition:background var(--fast) var(--ease)}
.nav button:hover{background:var(--bg-3);color:var(--fg-1)}
.nav button[aria-current=page]{background:var(--wc-yellow-soft);color:var(--wc-black);font-weight:600}
.nav .count{margin-left:auto;font:600 14px var(--font-mono);color:var(--wc-black);background:var(--wc-yellow);border-radius:var(--r-pill);padding:1px 9px}
.sidecard{margin-top:auto;background:var(--wc-black);color:var(--fg-on-dark);border-radius:var(--r-md);padding:16px}
.sidecard b{display:block;font:600 15px var(--font-display);margin-bottom:4px}
.sidecard p{font-size:14px;line-height:1.45;color:#D6D6D0}
.sidecard .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wc-yellow);margin-right:6px}
.main{display:flex;flex-direction:column;min-width:0}
.top{background:var(--bg-1);border-bottom:var(--border-1);padding:12px 32px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.crumbs{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--fg-2);min-width:0;flex-wrap:wrap}
.crumbs select{font-weight:600;color:var(--fg-1)}
.top .spacer{flex:1}
.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--fg-2);min-width:0}
.who b{color:var(--fg-1);font-weight:600;overflow-wrap:anywhere}
.who a{color:var(--fg-1)}
select{border:var(--border-2);border-radius:var(--r-sm);padding:9px 12px;background:var(--bg-1);min-height:44px;max-width:100%;cursor:pointer;font-size:15px}
select:disabled{cursor:default;opacity:1;background:var(--bg-3)}
.content{padding:32px;max-width:1520px;width:100%}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px;margin-bottom:24px}
.pagehead h1{font:700 var(--t-h2)/1.2 var(--font-display);letter-spacing:var(--track-tight)}
.pagehead p{color:var(--fg-2);max-width:640px}
.pagehead>.row,.pagehead>.seg{margin-left:auto}

/* controls */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:44px;font-size:15px;font-weight:500}
.switch input{appearance:none;width:44px;height:26px;border-radius:var(--r-pill);background:var(--wc-line-strong);position:relative;cursor:pointer;flex:none;margin:0;transition:background var(--fast) var(--ease)}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--bg-1);box-shadow:var(--shadow-1);transition:left var(--base) var(--ease),background var(--fast) var(--ease)}
.switch input:checked{background:var(--wc-black)}.switch input:checked::after{left:21px;background:var(--wc-yellow)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:6px;border:var(--border-2);background:var(--bg-1);border-radius:var(--r-pill);padding:9px 16px;cursor:pointer;min-height:44px;font-size:15px;font-weight:500;text-align:left;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.opt:hover:not(:disabled){border-color:var(--wc-black)}
.opt[aria-pressed=true]{background:var(--wc-yellow);border-color:var(--wc-yellow-deep);color:var(--wc-black);font-weight:600}
.opt:disabled{cursor:not-allowed;border-style:dashed;color:var(--fg-2);background:var(--bg-3)}
.opt[aria-pressed=true]:disabled{background:var(--wc-yellow-soft);border-style:solid;color:var(--wc-black)}
.opt .gate{display:inline-flex;align-items:center;gap:4px;font:600 14px var(--font-body);color:var(--warn-text)}
.opt .gate .ico{width:14px;height:14px}
.seg{display:inline-flex;background:var(--bg-3);border-radius:var(--r-pill);padding:4px;gap:2px}
.seg button{border:0;background:transparent;border-radius:var(--r-pill);padding:8px 16px;min-height:40px;font-size:15px;font-weight:500;color:var(--fg-2);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--bg-1);color:var(--fg-1);font-weight:600;box-shadow:var(--shadow-1)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.row label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--fg-2)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--fg-2)}
.fields input,.fields select,.fields textarea{border:var(--border-2);border-radius:var(--r-sm);padding:10px 12px;min-height:44px;background:var(--bg-1);color:var(--fg-1);font-weight:400;font-size:15px;width:100%}
.fields textarea{min-height:72px;resize:vertical}
.fields .full{grid-column:1/-1}
.check,.fields label.check{display:flex;flex-direction:row;gap:10px;align-items:center;font-size:15px;font-weight:500;color:var(--fg-1);cursor:pointer;min-height:44px}
.check input{width:20px;height:20px;accent-color:var(--wc-black);margin:0;flex:none}

/* cards, tags, alerts, buttons */
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.card{background:var(--bg-1);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:24px;min-width:0}
.card>header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:16px}
.card h2{font:600 18px/1.3 var(--font-display)}
.tag{display:inline-flex;align-items:center;gap:5px;font:600 14px/1.3 var(--font-body);border-radius:var(--r-pill);padding:3px 10px;background:var(--bg-3);color:var(--fg-2);max-width:100%;overflow-wrap:anywhere}
.tag .ico{width:14px;height:14px}
.tag.ok{background:var(--ok-soft);color:var(--ok-text)}.tag.warn{background:var(--warn-soft);color:var(--warn-text)}.tag.err{background:var(--err-soft);color:var(--err-text)}.tag.dark{background:var(--wc-black);color:var(--fg-on-dark)}
.status{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:16px}
.alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md);padding:10px 12px;font-size:15px;line-height:1.45}
.alert .ico{margin-top:2px}
.alert.block{background:var(--err-soft);color:var(--err-text)}.alert.warn{background:var(--warn-soft);color:var(--warn-text)}.alert.info{background:var(--bg-3);color:var(--fg-1)}.alert.ok{background:var(--ok-soft);color:var(--ok-text)}
.alert b{font-weight:600}
.alert ul{margin:6px 0 0;padding-left:18px}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-pill);padding:0 20px;min-height:44px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.btn.primary{background:var(--wc-yellow);color:var(--wc-black)}.btn.primary:hover:not(:disabled){background:var(--wc-yellow-bright)}
.btn:disabled{cursor:not-allowed;opacity:.55}
.btn.dark{background:var(--wc-black);color:var(--fg-on-dark)}.btn.dark:hover:not(:disabled){background:var(--wc-charcoal)}
.btn.line{background:var(--bg-1);color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--wc-line-strong)}.btn.line:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--wc-black)}
.btn.ghost{background:transparent;color:var(--fg-on-dark);box-shadow:inset 0 0 0 1px #5A5A60}
.btn.sm{min-height:40px;padding:0 14px}
.iconbtn{width:44px;height:44px;border-radius:50%;border:var(--border-1);background:var(--bg-1);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.iconbtn:hover:not(:disabled){border-color:var(--wc-black)}.iconbtn:disabled{opacity:.4;cursor:default}
.empty{color:var(--fg-2);padding:16px 0}
.skel{color:var(--fg-2);display:flex;align-items:center;gap:8px;padding:12px 0}
.tok{font:600 14px var(--font-mono);background:var(--bg-3);border:1px dashed var(--wc-line-strong);border-radius:6px;padding:0 5px;white-space:nowrap}

/* member profile */
.profile{margin-bottom:32px}
.profile .rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.profile .rows>div>.eyebrow{display:block;margin-bottom:10px}

/* builder grid */
.grid3{display:grid;grid-template-columns:196px minmax(0,1fr) 400px;gap:24px;align-items:start}
.cats{position:sticky;top:calc(var(--top-h, 72px) + 16px);display:flex;flex-direction:column;gap:2px}
.cats .eyebrow{padding:0 12px 8px}
.cats button{display:flex;justify-content:space-between;gap:8px;text-align:left;border:0;background:none;border-radius:10px;padding:10px 12px;cursor:pointer;min-height:44px;font-size:15px;font-weight:500;color:var(--fg-2);transition:background var(--fast) var(--ease)}
.cats button:hover{background:var(--bg-1);color:var(--fg-1)}
.cats button[aria-pressed=true]{background:var(--wc-black);color:var(--fg-on-dark);font-weight:600}
.cats .n{font:500 14px var(--font-mono);opacity:.85;white-space:nowrap}
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:12px}
.brand{position:relative;border:var(--border-1);border-radius:var(--r-md);padding:14px;background:var(--bg-1);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px;min-height:112px;min-width:0;transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.brand:hover:not(:disabled){border-color:var(--wc-line-strong);box-shadow:var(--shadow-2)}
.brand[aria-pressed=true]{border:2px solid var(--wc-black);padding:13px;box-shadow:var(--shadow-2)}
.brand .wm{font:700 17px/1.15 var(--font-display);letter-spacing:var(--track-tight);padding-right:24px;overflow-wrap:anywhere}
.brand .sun{position:absolute;top:10px;right:10px;width:22px;height:22px;opacity:0;transition:opacity var(--base) var(--ease)}
.brand[aria-pressed=true] .sun{opacity:1}
.brand:disabled{cursor:not-allowed;background:var(--bg-2)}.brand:disabled .wm{color:var(--fg-2)}
.brand .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.lockedlist{margin-top:16px}
.lockedlist summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--fg-2);padding:11px 0}
.lockedlist .brands{margin-top:8px}
.dests{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.dest{display:flex;gap:12px;align-items:flex-start;border:var(--border-2);border-radius:var(--r-md);padding:12px 14px;text-align:left;background:var(--bg-1);cursor:pointer;min-height:44px;transition:border-color var(--fast) var(--ease)}
.dest:hover:not(:disabled){border-color:var(--wc-black)}
.dest:disabled{cursor:not-allowed;border-style:dashed;background:var(--bg-3)}.dest:disabled b{color:var(--fg-2)}
.dest .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--wc-line-strong);flex:none;margin-top:2px;position:relative}
.dest[aria-pressed=true]{border:2px solid var(--wc-black);padding:11px 13px;background:var(--wc-yellow-wash)}
.dest[aria-pressed=true] .radio{border-color:var(--wc-black)}
.dest[aria-pressed=true] .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--wc-black)}
.dest b{display:block;font-size:15px;font-weight:600}.dest .help{display:block;margin-top:2px}
.why{background:var(--wc-yellow-wash);border-radius:var(--r-md);padding:12px 14px;font-size:15px;line-height:1.5;margin-top:16px}
.why .held{color:var(--warn-text);font-weight:600}
.saverow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}

/* summary panel + generation */
.panel{position:sticky;top:calc(var(--top-h, 72px) + 16px);max-height:calc(100vh - var(--top-h, 72px) - 36px);overflow:auto}
.panel h3{font:700 22px/1.2 var(--font-display);letter-spacing:var(--track-tight);margin:6px 0 10px;overflow-wrap:anywhere}
.panel dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 12px;margin:0 0 16px;font-size:15px}
.panel dt{color:var(--fg-2);font-weight:600}.panel dd{margin:0;overflow-wrap:anywhere}
.gen{background:var(--wc-black);color:var(--fg-on-dark);border-radius:var(--r-md);padding:16px}
.gen b{font:600 16px var(--font-display)}
.gen p{font-size:14px;color:#D6D6D0;margin:4px 0 12px}
.gen .btn.primary{width:100%}
.steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#8E8E88}
.steps li .ico{margin-top:2px}
.steps li.done{color:#D6D6D0}.steps li.done .ico{color:var(--wc-yellow)}
.steps li.now{color:var(--fg-on-dark);font-weight:600}.steps li.now .ico{color:var(--wc-yellow)}
.elapsed{font:500 14px var(--font-mono);color:#D6D6D0;margin-top:12px}

/* rendered playbook */
.result,#options{scroll-margin-top:88px}
.result{margin-top:32px;display:flex;flex-direction:column;gap:24px;outline:0}
.pbhead{background:var(--wc-black);color:var(--fg-on-dark);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:14px}
.pbhead .eyebrow{color:var(--wc-yellow)}
.pbhead h2{font:700 clamp(24px,2.6vw,32px)/1.2 var(--font-display);letter-spacing:var(--track-tight);color:var(--fg-on-dark);overflow-wrap:anywhere}
.pbhead .posline{font:600 clamp(18px,1.8vw,22px)/1.4 var(--font-display);color:var(--fg-on-dark);border-left:4px solid var(--wc-yellow);padding-left:16px;max-width:900px}
.pbhead .tag{background:#1F1F22;color:#E6E6E0}.pbhead .tag.ok{background:var(--ok-soft);color:var(--ok-text)}
.pbhead .tok{background:#2C2C30;color:var(--fg-on-dark);border-color:#5A5A60}
.pbhead .btns .btn.line{background:transparent;color:var(--fg-on-dark);box-shadow:inset 0 0 0 1px #5A5A60}
.sech{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sech h3{font:700 22px/1.2 var(--font-display);letter-spacing:var(--track-tight)}
.pposts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.pp{display:flex;flex-direction:column;gap:12px}
.pp .hook{font:600 19px/1.35 var(--font-display);overflow-wrap:anywhere}
.pp dl{display:flex;flex-direction:column;gap:10px;margin:0}
.pp dt{font:600 14px/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.pp dd{margin:2px 0 0;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.pp .onscreen{background:var(--bg-3);border-radius:var(--r-sm);padding:8px 10px;font-weight:600}
.pp .frames{margin:4px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;white-space:normal}
.pp .frames li::marker{font-weight:600;color:var(--fg-2)}
.pp .frames li>b,.pp .frames li>span{display:block;margin-top:3px}
.pp .frames li>span:not(.tag){color:var(--fg-2);font-size:15px}
.pp .frames li>.tag{display:inline-flex;margin-top:6px}
.lp{padding:0;overflow:hidden}
.lp .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--bg-3);border-bottom:var(--border-1)}
.lp .bar i{width:10px;height:10px;border-radius:50%;background:var(--wc-line-strong)}
.lp .bar span{margin-left:8px;font:500 14px var(--font-mono);color:var(--fg-2);overflow-wrap:anywhere}
.lp .in{padding:32px;display:flex;flex-direction:column;gap:16px;max-width:820px}
.lp h4{font:700 clamp(24px,2.6vw,34px)/1.2 var(--font-display);letter-spacing:var(--track-tight);overflow-wrap:anywhere}
.lp .sub{font-size:18px;color:var(--fg-2)}
.lp .secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.lp .secs div{border-top:2px solid var(--wc-black);padding-top:10px}
.lp .secs b{display:block;font:600 16px var(--font-display);margin-bottom:4px}
.lp .secs p{font-size:15px;white-space:pre-wrap}
.lp .formcta{display:flex;flex-direction:column;gap:8px;background:var(--wc-yellow-wash);border-radius:var(--r-md);padding:16px}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.timeline li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;background:var(--bg-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);border:var(--border-1);padding:16px 18px}
.timeline .day{font:700 16px var(--font-mono);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.timeline b{display:block;font-weight:600;margin-bottom:4px;overflow-wrap:anywhere}
.timeline p{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.checks li .ico{margin-top:3px;color:var(--fg-2)}
.notes li .ico{color:var(--warn-text)}

/* brand library */
.filtercard{margin-bottom:16px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filtercard .help{margin-top:10px}
.search{display:flex;align-items:center;gap:8px;border:var(--border-2);border-radius:var(--r-pill);padding:0 14px;min-height:44px;flex:1 1 240px;background:var(--bg-1);min-width:0}
.search input{border:0;outline:0;flex:1;min-width:0;background:transparent;font-size:15px}
.search:focus-within{border-color:var(--wc-black)}
.brands.lib .brand{cursor:default}
.soon-card{margin-bottom:24px;display:flex;gap:16px;align-items:flex-start}
.soon-card .ic{width:44px;height:44px;border-radius:50%;background:var(--wc-yellow-soft);display:flex;align-items:center;justify-content:center;flex:none}
.soon-card p{color:var(--fg-2);margin-top:4px;max-width:720px}

/* photo drop */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border:2px dashed var(--wc-line-strong);box-shadow:none;padding:48px 24px;cursor:pointer;position:relative;margin-bottom:24px;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.dropzone:hover,.dropzone:focus-within,.dropzone.over{border-color:var(--wc-black);background:var(--wc-yellow-wash)}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.dropzone .ic{width:56px;height:56px;border-radius:50%;background:var(--wc-yellow);display:flex;align-items:center;justify-content:center}
.dropzone b{font:600 18px var(--font-display)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:24px}
.pcard{background:var(--bg-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);border:var(--border-1);overflow:hidden;display:flex;flex-direction:column}
.thumb{aspect-ratio:4/3;background:var(--bg-3);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .ph{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--fg-2);font:600 14px var(--font-body)}
.pcard .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.pcard .nm{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .dims{font:500 14px var(--font-mono);color:var(--fg-2)}
.pcard .rm{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.94)}
.pcard.analyzing .body{opacity:.6}
.ratios{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.ratio{border-radius:var(--r-sm);padding:6px 2px;text-align:center;font:600 14px/1.25 var(--font-body)}
.ratio small{display:block;font:500 14px var(--font-mono)}
.r-ready{background:var(--ok-soft);color:var(--ok-text)}.r-small{background:var(--warn-soft);color:var(--warn-text)}.r-no{background:var(--err-soft);color:var(--err-text)}
.reqbanner{background:var(--wc-black);color:var(--fg-on-dark);border-radius:var(--r-lg);padding:24px;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.reqbanner .eyebrow{color:var(--wc-yellow)}
.reqbanner h2{font:700 20px var(--font-display);color:var(--fg-on-dark);overflow-wrap:anywhere}
.reqbanner ol{margin:0;padding-left:20px;font-size:15px;line-height:1.5;color:#E6E6E0}
.reqbanner .tok{background:#2C2C30;color:var(--fg-on-dark);border-color:#5A5A60}
.reqbanner .opts .tag{background:#1F1F22;color:#E6E6E0}

.qs{display:flex;flex-direction:column;gap:10px;border-top:var(--border-1);padding-top:10px;margin-top:2px}
.q{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500}
.yn{display:flex;gap:6px}.yn .opt{min-width:72px;justify-content:center;padding:9px 14px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.mcard{border:var(--border-1);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.mcard .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mcard .nm{font-weight:600;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard .dims{font:500 14px var(--font-mono);color:var(--fg-2)}

/* plan usage, saved sets, plan limits */
.usage{flex:1 1 100%;max-width:640px;background:var(--bg-1);border:var(--border-1);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;min-width:0}
.usage .uhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;flex:1 1 100%}.usage .uhead b{font:600 15px var(--font-display);overflow-wrap:anywhere}
.meter{display:flex;flex-direction:column;gap:6px;font-size:15px;flex:1 1 160px;min-width:0}
.meter i{display:block;height:6px;border-radius:var(--r-pill);background:var(--bg-3);overflow:hidden;position:relative}
.meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--wc-black);border-radius:inherit}
.meter.full b{color:var(--err-text)}.meter.full i::after{background:var(--err-text)}
.usage .limit,.usage>.btns{flex:1 1 100%}
.usage .billing{flex:1 1 100%;display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}.usage .billing b{font:600 15px var(--font-display)}
.alert.limit .btns{margin-top:8px}
.sets{display:flex;flex-direction:column;gap:6px;margin-top:20px;padding-top:16px;border-top:var(--border-1)}
.sets>.eyebrow{margin-bottom:4px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:var(--border-1);border-radius:var(--r-sm);background:var(--bg-1);padding:8px 12px;min-height:52px;cursor:pointer;transition:border-color var(--fast) var(--ease)}
.setrow:hover{border-color:var(--wc-black)}
.setrow[aria-pressed=true]{border:2px solid var(--wc-black);padding:7px 11px;background:var(--wc-yellow-wash)}
.setrow .what{display:flex;flex-direction:column;min-width:0}.setrow b{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.older summary{cursor:pointer;font-size:15px;font-weight:600;color:var(--fg-2);padding:11px 0}
.older>.setrow+.setrow,.older>.rset{margin-top:6px}

/* finished posts on each post card */
.fin{display:flex;flex-direction:column;gap:12px;border-top:var(--border-1);padding-top:14px;margin-top:auto}
.finh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.mk{display:flex;flex-direction:column;gap:10px;background:var(--bg-2);border-radius:var(--r-md);padding:14px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.pick{position:relative;border:2px solid transparent;border-radius:var(--r-sm);padding:0;background:var(--bg-3);cursor:pointer;aspect-ratio:1;overflow:hidden;min-height:44px}
.pick img{width:100%;height:100%;object-fit:cover;display:block}
.pick .tag{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);white-space:nowrap}
.pick[aria-pressed=true]{border-color:var(--wc-black);box-shadow:0 0 0 2px var(--wc-yellow)}
.mkgen p{margin-bottom:0}
.rset{display:flex;flex-direction:column;gap:10px;border:var(--border-1);border-radius:var(--r-md);padding:12px}
.rset.fresh{border:2px solid var(--wc-black);padding:11px}
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rimg{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.rthumb{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--bg-3);border-radius:var(--r-sm);overflow:hidden}
.rthumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.rimg.fail .rthumb img{opacity:.45}
.rimg figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:15px}
.rimg .btn.sm{padding:0 12px}
.whyfail{margin:0;padding-left:18px;font-size:14px;color:var(--err-text);line-height:1.4}

/* approvals */
.aprow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;background:var(--bg-1);border-radius:var(--r-lg);box-shadow:var(--shadow-1);border:var(--border-1);padding:14px 18px}
.aprow .ic{width:40px;height:40px;border-radius:50%;background:var(--wc-yellow-soft);display:flex;align-items:center;justify-content:center;flex:none}
.aprow .what{flex:1 1 240px;min-width:0}.aprow .what b{display:block;font-weight:600;overflow-wrap:anywhere}
.aprow .btns{margin-left:auto}
.aprow .note{flex:1 1 100%;display:flex;gap:8px;flex-wrap:wrap}
.aprow .note input{flex:1 1 220px;min-width:0;border:var(--border-2);border-radius:var(--r-sm);padding:9px 12px;min-height:44px;font-size:15px}
.aprow .err{flex:1 1 100%}

/* calendar */
.calnav{gap:8px}.calnav .mono{font-size:15px;font-weight:600;min-width:120px;text-align:center}
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.month header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:12px}
.month h2{font:700 20px var(--font-display)}
.month .fmt{margin-top:12px}.month .fmt:first-of-type{margin-top:0}
.month .fmt>.eyebrow{display:block;margin-bottom:6px}
.post{display:block;width:100%;text-align:left;border:0;background:var(--bg-2);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:6px;cursor:pointer;font-size:15px;line-height:1.4;min-height:44px;overflow-wrap:anywhere}
.post:hover{background:var(--wc-yellow-wash);box-shadow:inset 0 0 0 1px var(--wc-yellow-deep)}
.month.now{box-shadow:var(--shadow-3),inset 0 0 0 2px var(--wc-black)}

@media (max-width:1280px){.grid3{grid-template-columns:180px minmax(0,1fr)}.panel{grid-column:1/-1;position:static;max-height:none}.profile .rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:start}   /* short pages must not stretch the header row */
  .side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;padding:12px 16px;gap:10px;border-right:0;border-bottom:var(--border-1)}
  .nav{flex-direction:row;overflow-x:auto;min-width:0;flex:1 1 100%;scrollbar-width:thin}.nav button{flex:none}
  .sidecard{display:none}
  .top{position:static;padding:12px 16px}
  .content{padding:16px}
  .grid3{grid-template-columns:minmax(0,1fr)}
  .cats{position:static;flex-direction:row;overflow-x:auto;min-width:0;padding-bottom:4px}.cats .eyebrow{display:none}.cats button{flex:none}
  .fields,.two{grid-template-columns:minmax(0,1fr)}
  .pagehead>.row,.pagehead>.seg{margin-left:0}
  .pbhead{padding:24px}
  .lp .in{padding:20px}
}
@media (max-width:560px){
  .profile .rows{grid-template-columns:minmax(0,1fr)}
  .brands{grid-template-columns:repeat(2,minmax(0,1fr))}.brand .wm{font-size:15px}
  .card{padding:16px}
  .pposts{grid-template-columns:minmax(0,1fr)}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:8px}
  .timeline .day{flex-direction:row;align-items:center}
  .months{grid-template-columns:minmax(0,1fr)}
  .panel dl{grid-template-columns:minmax(0,1fr);gap:2px}.panel dd{margin-bottom:8px}
  .crumbs>span{display:none}
}
/* Members: three tabs under the thumb; staff navigation hidden; Ray on Today only */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--bg-1);border-top:var(--border-1);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.tabs button{flex:1 1 0;min-height:56px;border:0;background:transparent;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 13px/1.2 var(--font-body);color:var(--fg-2);cursor:pointer}
.tabs button .ico{width:22px;height:22px}
.tabs button[aria-current=page]{background:var(--wc-yellow-soft);color:var(--wc-black)}
body.member .nav button[data-view=library],body.member .nav button[data-view=approvals],body.member .nav button[data-view=calendar]{display:none}
body.member .nav .member-only{display:flex}
body.member #builder.mode-posts .pagehead,body.member #builder.mode-posts #profile,body.member #builder.mode-posts .grid3>.cats,body.member #builder.mode-posts .grid3>.col{display:none}
body.member #builder.mode-posts .grid3{grid-template-columns:minmax(0,1fr)}
body.member #builder.mode-posts{display:flex;flex-direction:column;gap:16px}body.member #builder.mode-posts #result{order:-1}
body.member #builder.mode-posts~#guide,body.member.mode-posts .ray{display:none}
body.member #builder.mode-today #result{display:none}
.upd{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:21;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--wc-black);color:var(--fg-on-dark);border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--shadow-3);font-size:15px}
body:not(.member) .upd{bottom:16px}
@media (max-width:900px){
  body.member .side .nav{display:none}
  body.member .tabs{display:flex}
  body.member .content{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  body.member .ray{margin-top:12px}
  body.member .btn{min-height:48px}
}
@media (min-width:901px){.tabs{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Larger text: one switch, whole app, remembered on this device */
body.big{zoom:1.18}
/* Levels of control on Today: Simple (Make), More choices (brand + category), Full control (every option) */
.levels{display:flex;gap:6px;margin:12px 0 2px;flex-wrap:wrap}
.levels .opt{min-height:44px}
.levels .opt[aria-pressed=true]{background:var(--wc-black);color:var(--wc-white);border-color:var(--wc-black)}
.lvlhelp{font-size:14px;color:var(--fg-2);margin:4px 0 0}
body.member #builder.mode-today.lvl2 .grid3,body.member #builder.mode-today.lvl3 .grid3{display:grid}
body.member #builder.mode-today.lvl2 #options,body.member #builder.mode-today.lvl2 #panel{display:none}
body.member #builder.mode-today.lvl2 .grid3{grid-template-columns:minmax(0,1fr)}
/* Show as store: staff see exactly what a member sees; a bar reminds them */
.asbar{position:sticky;top:0;z-index:30;background:var(--wc-black);color:var(--fg-on-dark);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;font-size:14px}
.asbar .btn{min-height:36px}
body.member [data-asstore=on]{display:none}
/* Make in two taps (members, Today): pick a brand, tap Make; finished posts follow on their own */
.make{margin:12px 32px 0}
.make .chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.make .chips .opt{min-height:48px}
.make .prog{margin-top:12px}
.make .prog ol.steps{margin-top:8px}
body.member #builder.mode-today .grid3{display:none}
body.member #builder.mode-today.more .grid3{display:grid}
@media (max-width:900px){.make{margin:12px 16px 0}}
/* Ray, the guide: one card, speaks after an action, never a popup */
.ray{margin:16px 32px 0;background:var(--bg-1);border:var(--border-1);border-radius:var(--r-md);padding:16px 18px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.ray .mark{width:44px;height:44px;border-radius:50%;background:var(--wc-black);display:flex;align-items:center;justify-content:center}
.ray .mark svg{width:28px;height:28px}
.ray .who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ray .who b{font:700 15px/1.3 var(--font-body)}.ray .who small{color:var(--fg-2);font-size:13px}
.ray h2{font:700 20px/1.25 var(--font-display);margin:0 0 4px;letter-spacing:var(--track-tight)}
.ray p{margin:0;font-size:15px;line-height:1.45;color:var(--fg-1)}
.ray ol{margin:8px 0 0;padding-left:20px;font-size:15px;line-height:1.5}.ray ol li{margin:2px 0}
.ray .when{display:inline-block;margin-left:8px;font-size:13px;color:var(--fg-2)}
.ray .btns{margin-top:12px}
.ray .btn.quiet{color:var(--fg-2)}
@media (max-width:900px){.ray{margin:12px 16px 0;padding:14px}.ray .btn{min-height:48px}}
@media (max-width:560px){.ray{grid-template-columns:36px minmax(0,1fr);gap:10px}.ray .mark{width:36px;height:36px}.ray .mark svg{width:24px;height:24px}.ray h2{font-size:18px}}

/* the pre-made month on the invite page (D27): ideas lead, images prove */
.premade{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;text-align:left}
.premade h2{font-size:22px;margin:0}
.pmimgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pmimgs img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:#eee}
.pmideas{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.pmideas li b{display:block;font-size:16px}.pmideas li span{font-size:14px;color:var(--fg-2, #555)}
@media (max-width:480px){.pmimgs{grid-template-columns:repeat(3,1fr)}.pmideas li span{display:none}}

/* invite page, second pass after Mobbin (Infatuation onboarding): hero, callout, one black CTA */
.premade{gap:12px}
.premade h2{font:800 26px/1.1 var(--font-display);letter-spacing:var(--track-tight)}
.pmhero{position:relative;border-radius:18px;overflow:hidden;background:var(--bg-3);margin:0 0 6px}
.pmhero img{display:block;width:100%;height:320px;object-fit:cover}
.pmhero.text{background:var(--wc-yellow-wash);padding:22px 18px 18px;display:flex;flex-direction:column;gap:10px}
.pmhero.text p{font:700 22px/1.2 var(--font-display);letter-spacing:-.015em}
.pmcall{position:absolute;left:12px;bottom:12px;background:var(--bg-1);border-radius:12px;padding:8px 12px;box-shadow:var(--shadow-2);display:flex;flex-direction:column;gap:1px}
.pmhero.text .pmcall{position:static;align-self:flex-start}
.pmcall small{font:600 11px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.pmcall b{font:700 15px/1.2 var(--font-display)}
.pmimgs{grid-template-columns:repeat(2,1fr)}
.pmcta{background:var(--wc-black);color:var(--wc-white);min-height:56px;font:700 17px/1.2 var(--font-display);margin-top:4px}
.gate-screen .signin .pmcta{background:var(--wc-black);color:var(--wc-white);text-decoration:none;display:flex}

/* competitor watch (member profile) */
.cwlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.cwrow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) minmax(0,1.4fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:var(--border-1, 1px solid rgba(0,0,0,.08))}
@media (max-width:760px){.cwrow{grid-template-columns:minmax(0,1fr)}}
/* Brand kit panel (per store): logos, colours, fonts, voice, its own lines, do-nots */
.kitcard .krow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:12px}
.kitcard .klogos{display:flex;gap:10px;flex-wrap:wrap}.kitcard .klogos div{padding:12px 16px;border-radius:var(--r-sm);border:var(--border-2);display:flex;align-items:center}
.kitcard .klogos img{max-height:56px;max-width:220px;display:block}.kitcard .klogos .dark{background:#1b1d20}
.kitcard .sw{display:inline-flex;align-items:center;gap:8px;margin:0 12px 8px 0;font-size:13px}.kitcard .sw i{width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,.15);display:inline-block}
.kitcard ul{margin:6px 0 0 18px;font-size:14px}.kitcard .conf{font-size:12px;color:var(--fg-3)}
.kitcard .fields input[type=color]{padding:2px;min-height:44px;width:56px}
@media (max-width:900px){.kitcard .krow{grid-template-columns:minmax(0,1fr)}}
.fbitem{display:grid;gap:4px;padding:10px 0;border-top:var(--border-1, 1px solid rgba(0,0,0,.08))}.fbitem p{margin:2px 0 0}
.emlist{list-style:none;margin:12px 0;padding:0;display:grid;gap:10px}.emlist li{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* Send preview: one row per platform with its suggested time, tags and checks */
.splist{list-style:none;padding:0;margin:10px 0;display:grid;gap:10px}
.sprow{border:1px solid var(--line,#E3E0D6);border-radius:12px;padding:12px 14px;display:grid;gap:6px}
.sphead{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.sptext{font-size:15px;line-height:1.45}
.sprow .status{display:flex;flex-wrap:wrap;gap:6px}
/* Send to WC3: the set bar, the confirm sheet (the second key) and the result */
.sendbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px}.sendbar.open{display:block}
.wc3send .confirm{border:2px solid var(--wc-black);border-radius:var(--r-md);padding:16px;display:grid;gap:8px;background:var(--wc-white)}
.wc3send .big{font-size:17px;line-height:1.45;margin:4px 0}
.wc3send.done{border-left:4px solid var(--ok-text);padding-left:14px}

/* niches: the Stores page, badges, rule chips, modules and the niche picker (public/stores.js) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.nbadge,.kbadge{display:inline-flex;align-items:center;font:600 14px/1.3 var(--font-body);border-radius:var(--r-pill);padding:3px 11px;white-space:nowrap}
.nbadge{background:var(--wc-yellow-soft);color:var(--wc-black);box-shadow:inset 0 0 0 1px var(--wc-yellow-deep)}
.kbadge{background:var(--bg-3);color:var(--fg-2)}
.kbadge[data-kind=retail-goods]{background:var(--info-soft);color:var(--info-text)}
.kbadge[data-kind=service]{background:var(--ok-soft);color:var(--ok-text)}
.kbadge[data-kind=hybrid]{background:var(--warn-soft);color:var(--warn-text)}
.filtercard{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.fgroup .eyebrow{min-width:120px}
.fchip{display:inline-flex;align-items:center;gap:8px;border:var(--border-2);background:var(--bg-1);border-radius:var(--r-pill);padding:8px 14px;min-height:44px;font-size:15px;font-weight:500;cursor:pointer}
.fchip:hover{border-color:var(--wc-black)}
.fchip b{font:600 14px var(--font-mono);color:var(--fg-2)}
.fchip[aria-pressed=true]{background:var(--wc-black);border-color:var(--wc-black);color:var(--fg-on-dark)}
.fchip[aria-pressed=true] b{color:var(--wc-yellow)}
.ngroup>header{align-items:flex-start;flex-wrap:nowrap;gap:16px}
.ngroup>header p{margin-top:2px;max-width:560px}
.gcounts{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end}
.gcounts b{font-size:28px;line-height:1.1}
.srows{display:flex;flex-direction:column}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto 24px;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;border-top:var(--border-1);padding:12px 8px;min-height:56px;cursor:pointer;border-radius:var(--r-sm)}
.srow:first-child{border-top:0}
.srow:hover{background:var(--bg-2)}
.sname{display:flex;flex-direction:column;min-width:0}
.sname b{font-weight:600;overflow-wrap:anywhere}
.sname small{font-size:14px;color:var(--fg-2)}
.sbadges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.srow .go{color:var(--fg-2);display:flex}
.nichebox{margin-top:20px;padding-top:20px;border-top:var(--border-1);display:flex;flex-direction:column;gap:14px}
.nicheline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nicheline .btn{margin-left:auto}
.nsec{display:flex;flex-direction:column;gap:8px}
.mods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mods li{display:flex;gap:10px;align-items:flex-start;border:var(--border-1);border-radius:var(--r-md);padding:10px 12px}
.mods li span{display:flex;flex-direction:column;min-width:0}
.mods small{font-size:14px;color:var(--fg-2);line-height:1.4}
.mods li.on .ico{color:var(--ok-text);margin-top:3px}
.mods li.on{background:var(--ok-soft);border-color:transparent}
.mods li.off{background:var(--bg-2);color:var(--fg-2);border-style:dashed}
.mods li.off b{font-weight:500}
.mods li.off .ico{margin-top:3px}
.step{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.nedit{border-top:var(--border-1);padding-top:16px}
.npick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.ncard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;border:var(--border-2);background:var(--bg-1);border-radius:var(--r-md);padding:14px 16px;cursor:pointer;min-height:44px}
.ncard:hover{border-color:var(--wc-black)}
.ncard[aria-checked=true]{border-color:var(--wc-yellow-deep);background:var(--wc-yellow-wash);box-shadow:0 0 0 2px var(--wc-yellow)}
.ncard .nhead{display:flex;justify-content:space-between;gap:8px;width:100%;align-items:center;font-size:16px}
.ncard .nmeta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.ncard .nmeta small{font-size:14px;color:var(--fg-2)}
.ncard .nrules{margin-top:4px}
.ncard .ncheck{position:absolute;right:12px;bottom:12px;width:24px;height:24px;border-radius:50%;background:var(--wc-yellow);display:flex;align-items:center;justify-content:center}
.ncard[aria-checked=true] .nrules{padding-right:30px}
.tsub{font-weight:400;font-size:14px;color:var(--fg-2);margin-left:4px}
.opt[aria-pressed=true] .tsub{color:var(--wc-black)}
@media (max-width:900px){.ngroup>header{flex-wrap:wrap}.gcounts{text-align:left;align-items:flex-start}.npick{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .mods{grid-template-columns:minmax(0,1fr)}
  .srow{grid-template-columns:minmax(0,1fr) 24px}.sbadges{grid-column:1;justify-content:flex-start;order:3}.srow .go{grid-column:2;grid-row:1}
  .fgroup .eyebrow{min-width:100%}
  .nicheline .btn{margin-left:0}
}
.ncard .nhead .tag{flex:none;white-space:nowrap}.ncard .nhead b{min-width:0}

/* Evaluation fixes (2026-10-17): the Make card's brand picker (search + categories, as in the store app), why a button
   can't run said beside it, and "Requested on ..." once the owner asked for their look */
.make .mk2q{display:block;width:100%;margin:10px 0 0;min-height:48px;padding:0 16px;border:var(--border-2);border-radius:var(--r-pill);background:var(--bg-1);font:400 16px/1.4 var(--font-body);color:var(--fg-1)}
.make .mk2q:focus{outline:2px solid var(--wc-black);outline-offset:1px}
.make .mk2list{max-height:340px;overflow:auto;margin-top:8px;padding:2px 4px 4px 0;overscroll-behavior:contain}
.make .mk2g h3{margin:12px 0 0;font:600 14px/1.4 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.make .mk2g h3 small{font:inherit;letter-spacing:0;text-transform:none}
.make .mk2g .chips{margin:6px 0 0}
.why-off{margin:8px 0 0;font:600 14px/1.45 var(--font-body);color:var(--fg-2)}
.asked{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font:600 15px/1.45 var(--font-body)}
.asked svg{flex:none;width:18px;height:18px;margin-top:2px}
.sbadges .tag.warn{white-space:nowrap}