/* Readyset. Dark, high contrast, big targets: this gets read on a dim stage. */
:root{
  --bg:#101114; --panel:#1a1c21; --panel2:#22252b; --line:#32363e;
  --ink:#f2f4f7; --dim:#9aa2ad; --accent:#ffc24a; --accent-ink:#2a1d00;
  --good:#5ad68a; --warn:#ff8f6b;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{font:17px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);overscroll-behavior-y:contain}
main{max-width:640px;margin:0 auto;padding:0 0 96px}
.pad{padding:14px 16px}
.dim{color:var(--dim)}
.sm{font-size:14px}
.xs{font-size:13px}
h1{font-size:23px;margin:0}
h2{font-size:18px;margin:22px 16px 8px}
a{color:var(--accent)}

/* header */
header{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-top)) ;padding-top:calc(10px + env(safe-area-inset-top))}
header .row1{display:flex;align-items:center;gap:10px;min-height:34px}
header .ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:19px}
.crumb{color:var(--dim);font-size:13px;margin-top:2px}

/* tabs */
nav.tabs{display:flex;gap:6px;margin-top:10px}
nav.tabs button{flex:1;padding:9px 4px;font-size:15px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--dim);font-weight:600}
nav.tabs button[aria-current="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* buttons */
button,.btn{font:inherit;border:1px solid var(--line);background:var(--panel2);color:var(--ink);
  border-radius:10px;padding:11px 14px;font-weight:600;cursor:pointer;display:inline-block;text-decoration:none}
button:disabled{opacity:.45}
.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ghost{background:transparent}
.danger{color:var(--warn)}
.wide{display:block;width:100%;text-align:center}
.bar{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px}
.bar>*{flex:1 1 auto}

/* inputs */
input,textarea,select{font:inherit;width:100%;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:11px 12px}
textarea{min-height:140px;resize:vertical;line-height:1.5}
label{display:block;margin:14px 16px 6px;font-size:14px;color:var(--dim);font-weight:600}
.field{padding:0 16px}

/* cards + lists */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin:10px 16px;padding:13px}
.list{margin:6px 10px;padding:0;list-style:none}
.row{display:flex;align-items:stretch;gap:0;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;margin:6px 0;touch-action:pan-y}
.row .num{flex:0 0 36px;display:flex;align-items:center;justify-content:center;color:var(--dim);
  font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}
.row .body{flex:1;min-width:0;padding:12px 4px 12px 0;display:flex;flex-direction:column;justify-content:center}
.row .t{overflow-wrap:anywhere;font-weight:500}
.row .sub{color:var(--dim);font-size:13px;margin-top:3px;overflow-wrap:anywhere}
.row .act{flex:0 0 auto;display:flex;align-items:center}
.row .act button{border:0;background:transparent;padding:12px 11px;color:var(--dim);font-size:19px;border-radius:0}
.grip{flex:0 0 44px;display:flex;align-items:center;justify-content:center;color:var(--dim);
  font-size:20px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.row.heading{background:var(--panel2);border-color:#44494f}
.row.heading .t{text-transform:uppercase;letter-spacing:.09em;font-size:14px;font-weight:800;color:var(--accent)}
.row.unused{opacity:.46}
.row.unused .num{visibility:hidden}
.row.lift{position:fixed;z-index:60;box-shadow:0 10px 26px rgba(0,0,0,.6);border-color:var(--accent);
  pointer-events:none;margin:0;opacity:1}
.ph{background:transparent;border:2px dashed var(--accent);border-radius:11px;margin:6px 0}
.divider{display:flex;align-items:center;gap:10px;margin:16px 0 6px;color:var(--dim);
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.empty{color:var(--dim);font-size:14px;padding:14px;text-align:center;border:1px dashed var(--line);border-radius:11px;margin:6px 0}

/* net banner */
.net{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:9px 14px;font-size:14px;text-align:center;
  background:var(--panel2);border-top:1px solid var(--line);color:var(--dim)}
.net.warn{background:#3a2a1c;color:#ffcfa8}
.net.ok{background:#17301f;color:var(--good)}

/* share links */
.link{word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:9px;margin:6px 0;color:var(--dim)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.stage{font-size:20px}
.stage .row .t{font-size:20px;font-weight:600}
.stage .row .num{flex:0 0 42px;font-size:17px}

/* ----- multi-select: the right-edge bar. Drag a finger down it to select a run. ----- */
.sel{flex:0 0 40px;display:flex;align-items:center;justify-content:center;color:var(--dim);
  font-size:19px;touch-action:none;user-select:none;-webkit-user-select:none;
  border-left:1px solid var(--line);cursor:pointer}
.sel.on{color:var(--accent)}
.row.selected{border-color:var(--accent);background:#241f14}
.row.unused.selected{opacity:1}
.selbar{position:fixed;left:0;right:0;bottom:0;z-index:72;display:flex;gap:8px;align-items:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--panel2);
  border-top:2px solid var(--accent)}
.selbar[hidden]{display:none}
.selbar .cnt{font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap}
.selbar button{padding:10px 12px;font-size:15px}

/* ----- paste-my-list import review ----- */
.imp{background:var(--panel);border:1px solid var(--line);border-radius:11px;margin:6px 10px;padding:11px}
.imp.ok{border-color:#2f5e42}
.imp.no{border-color:#5e3a2f}
.imp .ln{font-weight:600;overflow-wrap:anywhere}
.imp .cands{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.imp .cands button{padding:8px 10px;font-size:14px;font-weight:500}

/* The record-size ceiling, stated in the page rather than in a toast that fades. */
.sizebar{margin:10px 12px;padding:10px 12px;border-radius:9px;font-size:13.5px;line-height:1.45;
  background:#3a2a1c;color:#ffcfa8;border:1px solid #6b4a2e}
.sizebar.bad{background:#3d1d1d;color:#ffc9c0;border-color:#8a3b31;font-weight:600}

/* the demo band's standing banner — it must never be mistaken for a real band */
.demobar{margin:10px 12px 0;padding:11px 13px;border-radius:11px;background:#1d2330;
  border:1px solid #39506f;color:#cfe0f5}
.demobar button{font-size:14px;padding:9px 11px}

/* the action bar sits over the bottom of the screen; without this it hides the
   last rows of the very list it is acting on (measured run 5) */
body.selmode{padding-bottom:78px}