/* The editor's look: the same dark page and mint accent as Pinax. Colors are tokens; nothing here loads from another site. */
:root{--bg:#05070a;--panel:#0d1015;--panel2:#12171e;--fg:#f4f6f8;--muted:#9aa5b2;--accent:#4fe3c1;--line:#262e38;--amber:#e8a94a;--red:#ef6b61;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}
h1,h2,p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted)}.small{font-size:12.5px}
.sp{flex:1}
#app{min-height:100%;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font:800 17px Manrope,Inter,system-ui,sans-serif}
.mark{width:22px;height:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.mark i{background:#3a9c86;border-radius:2px}.mark i:nth-child(3){background:var(--accent);transform:translate(1px,-2px)}
.file{color:var(--muted);max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{font:600 11px Inter,system-ui;border-radius:99px;padding:2px 8px;border:1px solid #3a4452;color:var(--muted);white-space:nowrap}
.pill.g{color:var(--accent);border-color:#2b6a5d}.pill.a{color:var(--amber);border-color:#6b5120}
.lang{background:var(--panel2);color:var(--fg);border:1px solid #3a4452;border-radius:9px;padding:6px 8px;font:inherit}
.btn{font:600 13px Inter,system-ui;background:var(--panel2);color:var(--fg);border:1px solid #3a4452;border-radius:9px;padding:8px 13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;cursor:pointer}
.btn:hover{border-color:#566273}
.btn.p{background:var(--accent);color:#052019;border-color:var(--accent)}
.btn.s{padding:5px 9px;font-size:12px}
.btn.danger{color:var(--red)}
.btn:disabled{opacity:.45;cursor:default}
.lab{font:700 11px Inter,system-ui;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:block}
.in,input[type=search],input[type=text],select.in,textarea{background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--fg);padding:8px 11px;font:13px Inter,system-ui;width:100%;min-width:0}
/* start */
.start{max-width:1000px;width:100%;margin:0 auto;padding:44px max(18px,env(safe-area-inset-left)) 40px max(18px,env(safe-area-inset-right))}
.hero h1{font:800 clamp(26px,5vw,38px)/1.1 Manrope,Inter,system-ui,sans-serif;margin-bottom:12px;text-wrap:balance}
.hero p{color:var(--muted);font-size:16px;max-width:60ch}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:11px;min-width:0}
.ta{height:160px;resize:vertical;font:12px/1.5 ui-monospace,Menlo,monospace;background:#0a0d11}
.dz{border:1.5px dashed #3a4452;border-radius:12px;height:160px;display:grid;place-items:center;text-align:center;color:var(--muted);background:#0a0d11;cursor:pointer;padding:10px}
.dz.over{border-color:var(--accent);background:#0c1a17}
.dz b{display:block;color:var(--fg);font-size:15px;margin-bottom:3px}
.error{background:#2a1210;border:1px solid #6b2a24;color:#ffc9c3;border-radius:10px;padding:10px 14px;margin-top:16px}
.trust{display:flex;gap:8px 24px;flex-wrap:wrap;color:var(--muted);font-size:13px}.trust b{color:var(--fg)}
/* editor */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}
.ed{display:grid;grid-template-columns:270px minmax(0,1fr) 310px;flex:1;min-height:0;height:calc(100vh - 150px);min-height:420px}
.col{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
.col:last-child{border-right:0}
.colh{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.list{overflow:auto;display:flex;flex-direction:column;flex:1;min-height:0}
.g{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid #151a21;cursor:pointer}
.g .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.g .c{color:var(--muted);font-size:12px}
.g.on{background:#10201d;box-shadow:inset 3px 0 0 var(--accent)}
.g.off .n{color:#66717e;text-decoration:line-through}
.g.drop,.ch.drop{outline:2px dashed var(--accent);outline-offset:-2px}
.grip{color:#5a6573;letter-spacing:-2px;font-size:13px;flex:none;width:12px;cursor:grab}
.tog{width:32px;height:18px;border-radius:99px;background:#2a323d;position:relative;flex:none;border:0;padding:0;cursor:pointer}
.tog:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#8b97a5}
.tog.on{background:#1f7a68}.tog.on:after{left:16px;background:#d9fff4}
.tools{display:flex;gap:6px;padding:10px 14px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--panel)}
.gtoolsbtn{display:none}
.ch{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid #151a21;cursor:pointer}
.ch .t{flex:1;min-width:0}.ch .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch .t span{font-size:12px;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch.sel{background:#10201d}.ch.cur{box-shadow:inset 3px 0 0 var(--accent)}.ch.off{opacity:.5}
.logo{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;font:800 11px Inter,system-ui;color:#05070a;flex:none}
.ck{width:18px;height:18px;border-radius:5px;border:1.5px solid #4a5563;flex:none;background:transparent;padding:0;position:relative;cursor:pointer;display:inline-block}
.ck.on{background:var(--accent);border-color:var(--accent)}
.ck.on:after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #052019;border-width:0 2px 2px 0;transform:rotate(45deg)}
.bulk{background:#0f2a25;border-bottom:1px solid #1f5a4d;padding:8px 14px;display:flex;gap:8px;align-items:center;color:#bff5e7;flex-wrap:wrap}
.dupbar{display:flex;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.check{display:flex;align-items:center;gap:7px;cursor:pointer}
.check input{width:auto}
.more{margin:12px auto}
.empty{padding:24px 14px;color:var(--muted)}
.pad{padding:14px;overflow:auto}
.field{display:block;margin-bottom:12px}.field .lab{margin-bottom:5px}
.two{display:grid;grid-template-columns:1fr 90px;gap:10px}
.inline{display:flex;gap:10px;align-items:center}
.preview{position:relative;width:44px;height:44px;flex:none}.preview img{position:absolute;inset:0;width:44px;height:44px;border-radius:9px;object-fit:contain;background:#fff}
.hint{color:var(--muted);font-size:12.5px;margin:6px 0 12px}
.who{display:flex;flex-direction:column;min-width:0}.who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.btns.end{justify-content:flex-end;margin-top:16px}
.sum{padding:9px 16px;border-top:1px solid var(--line);background:var(--panel);display:flex;gap:18px;color:var(--muted);font-size:12.5px;flex-wrap:wrap}
.sheet-grip,.donebtn{display:none}
/* dialogs */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:start center;padding:8vh 16px;overflow:auto;z-index:20}
.modal{width:min(520px,100%);background:var(--panel);border:1px solid #3a4452;border-radius:16px;padding:20px}
.modal h2{font:800 20px Manrope,Inter,system-ui,sans-serif;margin-bottom:10px}
.opt{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.opt input{width:auto;margin-top:4px}.opt b{display:block}.opt span{color:var(--muted);font-size:13px}
.tip{margin-top:12px}
.checks{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;margin:8px 0 12px}
/* narrow screens: groups become chips, the details a sheet from the bottom */
@media (max-width:900px){
  .ed{display:flex;flex-direction:column;height:auto;min-height:0}
  .col{border-right:0}
  .groups{border-bottom:1px solid var(--line)}
  .groups .colh{display:none}
  .gl{flex-direction:row;overflow-x:auto;gap:7px;padding:10px 14px;flex:none}
  .g{border:1px solid #3a4452;border-radius:99px;padding:6px 11px;background:var(--panel2);white-space:nowrap;flex:none}
  .g .grip,.g .tog{display:none}
  .g.on{background:#10302a;border-color:#2b8a76;box-shadow:none}
  .tools{display:none;border-top:0;padding:0 14px 10px;background:none}
  .tools-open .tools{display:flex}
  .gtoolsbtn{display:inline-flex}
  .top .pill,.top .file,.nologo{display:none}
  .top{gap:8px}
  .ed:not(.select-mode) .ch .ck{display:none}
  .grip{display:none}
  .detail{display:none}
  .detail.open{display:flex;position:fixed;left:0;right:0;bottom:0;max-height:78vh;background:var(--panel);border-top:1px solid #3a4452;border-radius:18px 18px 0 0;box-shadow:0 -20px 40px rgba(0,0,0,.55);z-index:10;overflow:auto}
  .detail.open .sheet-grip{display:block;width:38px;height:4px;border-radius:9px;background:#3a4452;margin:10px auto 0}
  .detail.open .donebtn{display:inline-flex}
  .cards{grid-template-columns:1fr}
  .chans .colh{flex-wrap:wrap}
  .sum{padding-bottom:max(9px,env(safe-area-inset-bottom))}
}

/* tools */
.seg{display:flex;border:1px solid #3a4452;border-radius:9px;overflow:hidden;width:max-content;max-width:100%;flex-wrap:wrap}
.seg button{background:transparent;border:0;border-right:1px solid #3a4452;padding:7px 12px;font:600 12.5px Inter,system-ui;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button.on{background:#10302a;color:#bff5e7}
.menu{position:absolute;width:310px;max-width:calc(100vw - 16px);background:var(--panel);border:1px solid #3a4452;border-radius:13px;box-shadow:0 20px 50px rgba(0,0,0,.6);padding:6px;z-index:15}
.menu .it{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;padding:9px 11px;cursor:pointer}
.menu .it:hover,.menu .it:focus-visible{background:#12201d}
.menu .it b{display:block;font-weight:600}.menu .it span span{display:block;color:var(--muted);font-size:12.5px}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.ico{width:20px;text-align:center;color:var(--accent);flex:none}
.modal.wide{width:min(760px,100%)}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.inline2{flex-direction:row;flex-wrap:wrap;gap:6px 22px;max-height:none;margin:8px 0 4px}
.nobox{width:16px;flex:none}
.diff{border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-top:12px;background:#0a0d11}
.diff .h{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12.5px}
.diff .h b{color:var(--fg)}
.diff .r{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:6px;padding:7px 12px;border-bottom:1px solid #151a21;font-size:13px;align-items:center}
.diff .r:last-child{border-bottom:0}.diff .r.none{display:block;color:var(--muted)}
.old{color:#c9a0a0;text-decoration:line-through;text-decoration-color:#8a4a4a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new{color:#bff5e7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrow{color:#5a6573;text-align:center}
.chk{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.chk:first-of-type{border-top:0}
.chk b{display:block}.chk .d{color:var(--muted);font-size:13px;display:block}
.chk .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dot{width:10px;height:10px;border-radius:50%}.dot.r{background:var(--red)}.dot.a{background:var(--amber)}.dot.i{background:#6aa8ff}.dot.ok{background:var(--accent)}
.good{color:var(--accent)}
.setrow{padding:10px 12px;border:1px solid var(--line);border-radius:11px;margin-top:10px;background:#0a0d11}
.setrow .k{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;margin-top:6px}
.keep{background:#0f2a25;border:1px solid #1f5a4d;color:#bff5e7;border-radius:7px;padding:1px 7px;font:700 11px Inter}
.gone{color:#c9a0a0;text-decoration:line-through;text-decoration-color:#8a4a4a}.moved{color:var(--amber)}
.project{border-color:#2b6a5d}
.cards:has(.project){grid-template-columns:repeat(3,1fr)}
.small.tip{margin-top:10px}
@media (max-width:900px){.cards:has(.project){grid-template-columns:1fr}.two2{grid-template-columns:1fr}.chk{grid-template-columns:14px minmax(0,1fr)}.chk .acts{grid-column:2;justify-content:flex-start}.modal.wide{width:100%}}

/* guide matching */
.cand{display:grid;grid-template-columns:24px minmax(0,1fr) 24px minmax(0,1.2fr) auto;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid #151a21;font-size:13px}
.cand:last-child{border-bottom:0}
.cand .a b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cand .a span{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conf{font:700 11px Inter,system-ui;border-radius:99px;padding:2px 8px;border:1px solid}
.conf.hi{color:var(--accent);border-color:#2b6a5d}.conf.mid{color:var(--amber);border-color:#6b5120}
.stat{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.stat div{background:#0a0d11;border:1px solid var(--line);border-radius:11px;padding:10px 14px;min-width:120px}
.stat b{display:block;font:800 22px Manrope,Inter,system-ui,sans-serif}.stat span{color:var(--muted);font-size:12.5px}
.stat .good b{color:var(--accent)}.stat .some b{color:var(--amber)}.stat .none b{color:var(--red)}
@media (max-width:900px){.cand{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"ck a conf" ". g g"}.cand>:nth-child(1){grid-area:ck}.cand>:nth-child(2){grid-area:a}.cand>:nth-child(3){display:none}.cand>:nth-child(4){grid-area:g;color:#bff5e7}.cand>:nth-child(5){grid-area:conf}.stat div{min-width:0;flex:1}}
input[type=checkbox]{accent-color:var(--accent)}

@media (max-width:900px){
  .modal{padding:16px}
  .seg{width:100%}.seg button{flex:1 1 auto;white-space:normal;padding:8px 8px}
  .stat div{min-width:0;flex:1 1 90px;padding:8px 10px}
  .diff .h{flex-wrap:wrap}
  .cand>*{min-width:0}
}

/* the end date */
.datef{display:grid;grid-template-columns:1fr 140px;gap:10px;margin:0 0 0 27px}
.datef .field{margin-bottom:6px}
.datef[hidden],.hint[hidden]{display:none}
.hint.bad{color:var(--amber)}
.opt + .datef + .hint{margin-left:27px}
@media (max-width:900px){.datef{grid-template-columns:1fr 120px;margin-left:0}.opt + .datef + .hint{margin-left:0}}

.nojs{padding:24px;color:var(--fg)}

/* the text below the tool (for people and for search engines); hidden while a playlist is being edited */
.aboutwrap{max-width:1000px;width:100%;margin:0 auto;padding:0 max(18px,env(safe-area-inset-left)) 56px max(18px,env(safe-area-inset-right))}
.editing .aboutwrap{display:none}
.about{display:flex;flex-direction:column;gap:18px}
.about h2{font:700 12.5px Inter,system-ui;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:26px 0 0}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}.fc h3{font:800 17px Manrope,Inter,system-ui,sans-serif;margin:0 0 6px}.fc p{color:var(--muted);font-size:14px;margin:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:0;padding:0;counter-reset:step}
.st{border-top:2px solid #2b6a5d;padding-top:12px;counter-increment:step}.st:before{content:counter(step);font:800 13px Inter,system-ui;color:var(--accent);display:block;margin-bottom:4px}.st b{display:block;font:800 17px Manrope,Inter,system-ui,sans-serif;margin-bottom:4px}.st span{color:var(--muted);font-size:14px}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}.faq summary{font:700 16px Manrope,Inter,system-ui,sans-serif;cursor:pointer}.faq details p{color:var(--muted);margin:8px 0 2px;max-width:70ch}
.about .foot{color:var(--muted);font-size:13px;margin-top:24px}
@media (max-width:900px){.feats,.steps{grid-template-columns:1fr}}

.about .foot a{color:var(--accent);text-underline-offset:3px}