:root{
  --app-bg:#0e0f13;
  --app-bg-2:#15171e;
  --line:#262a35;
  --text:#e8eaf0;
  --muted:#8c93a6;
  --accent:#7c5cff;
  --accent-2:#4ad9c0;
  --radius:10px;
  --size:96px;
  --gap:6px;
  --labelw:96px;
  --tile-radius:4px;
  --board-bg:#15161c;
  --board-fg:#ffffff;
  --board-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --title-size:22px;
  --label-size:20px;
  --cap-size:10px;
  --cols:5;
  --per-row:5;
  /* 1 for a square sleeve, 1.5 for the 2:3 of a film or TV poster. Everything
     that needs the height of a tile multiplies the width by this. */
  --art-ratio:1;
  /* The gutter the tier buttons hang in. It is outside the board on purpose:
     the board is what the PNG exporter measures, so anything that exists only
     for editing has to sit beyond its edge or it shows up as a lopsided margin
     in every exported image. */
  --act-gutter:44px;
}

*{box-sizing:border-box}
/* [hidden] only sets display:none at UA specificity, so any author rule setting
   display beats it — .rows and .chart are both flex, and hiding them did nothing
   at all. Several controls toggle with .hidden, so settle it once here. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, #1d1b3a 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #103033 0%, transparent 55%),
    var(--app-bg);
  color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom:1px solid var(--line);
  background:rgba(14,15,19,.72);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:40;
}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0;flex:0 1 auto}
.brand{font-weight:700;letter-spacing:.2px;font-size:16px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.listbar{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
#listPicker{
  /* the floor matters on a phone: without it the flex row squeezes the name to "F…" */
  flex:1 1 auto;min-width:120px;max-width:220px;
  padding:7px 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--app-bg-2);color:var(--text);
}
#listPicker:hover{border-color:#3a4153}
#listPicker:focus{outline:none;border-color:var(--accent)}
.logo{color:var(--accent);transform:translateY(-1px)}
/* Scrolls rather than wraps: a second row of buttons pushes the board down the
   page on every narrow screen, and these are all one-tap actions. */
/* margin-left, not justify-content: a flex row that is also a scroll container
   and justifies to the end starts scrolled past its own first button, so on a
   phone the bar opened on "Clear" with "+ Tier" off to the left. */
.topbar-actions{
  display:flex;gap:8px;flex:0 1 auto;min-width:0;margin-left:auto;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:2px 0;
}
.topbar-actions::-webkit-scrollbar{display:none}

.btn{
  border:1px solid var(--line);background:var(--app-bg-2);color:var(--text);
  padding:7px 12px;border-radius:8px;cursor:pointer;transition:.14s;white-space:nowrap;
}
.btn:hover{border-color:#3a4153;background:#1c1f28;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-primary{background:linear-gradient(180deg,#8a6cff,#6b47f5);border-color:#7250ff;color:#fff;font-weight:600}
.btn-primary:hover{background:linear-gradient(180deg,#9b80ff,#7a56ff);border-color:#8f73ff}
.btn-wide{display:block;text-align:center;width:100%}
.btn-icon{padding:7px 10px;flex:0 0 auto}
.only-narrow,.only-compact,.only-phone{display:none}

/* ---------- layout ---------- */
.layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:0}
.workspace{min-width:0;display:flex;flex-direction:column;padding:20px 20px 0;gap:14px;overflow:auto}
/* The tier buttons live in this padding, beyond the board's own edge. */
.board-scroll{min-width:0;padding-right:var(--act-gutter)}

/* ---------- board ---------- */
/* Width is set in script, and the whole thing is then scaled down with `zoom`
   until it fits the window. Zoom is display only: the exporter puts it back to
   1 before it measures anything, so the PNG is always the board at full size. */
.board{
  background:var(--board-bg);color:var(--board-fg);
  font-family:var(--board-font);
  border-radius:14px;padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);
  width:100%;
}
.board-title{
  font-size:var(--title-size);font-weight:700;letter-spacing:.2px;padding:2px 6px 10px;outline:none;min-height:1em;
  overflow-wrap:anywhere;
}
.board-title:empty::before{content:attr(data-ph);color:currentColor;opacity:.35}
.board-foot{font-size:12px;opacity:.55;padding:8px 6px 0;outline:none;min-height:1em;overflow-wrap:anywhere}
.board-foot:empty::before{content:attr(data-ph);opacity:.5}
.rows{display:flex;flex-direction:column;gap:3px}

.tier-row{display:flex;align-items:stretch;position:relative;min-height:calc(var(--size) * var(--art-ratio) + var(--gap)*2)}
.tier-label{
  width:var(--labelw);flex:0 0 var(--labelw);
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:3px 0 0 3px;padding:6px;
}
.tier-label-text{
  color:#101114;font-weight:800;font-size:var(--label-size);line-height:1.15;outline:none;
  /* Full width, not shrink-to-fit. Hugging the text gave the box zero slack, and
     the PNG exporter ellipsises anything measuring wider than its box — so a
     label that fit exactly came out as "Brilli…" the moment canvas measured the
     font a hair differently from layout. Centring comes from .tier-label. */
  word-break:break-word;width:100%;display:block;
}
.tier-items{
  flex:1;min-width:0;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;
  gap:var(--gap);padding:var(--gap);background:color-mix(in srgb, var(--board-fg) 7%, transparent);border-radius:0 3px 3px 0;
}
/* A fixed number of albums per row turns the row into a grid of set columns, the
   same way the chart works — which also makes the board's width a known
   quantity, so it can be scaled to fit instead of reflowing. */
.rows.fixed-row .tier-items{
  display:grid;grid-template-columns:repeat(var(--per-row), var(--size));
  justify-content:start;flex:0 0 auto;
}
.tier-items.drop-hot,.grid.drop-hot{background:rgba(124,92,255,.18);box-shadow:inset 0 0 0 1px rgba(124,92,255,.45)}
/* A cover is held and waiting to be put somewhere, so say where it can go. */
body.placing .tier-items,body.placing .grid,body.placing .bench{
  outline:2px dashed rgba(124,92,255,.55);outline-offset:-2px;
}

.tier-actions{
  position:absolute;left:100%;top:0;height:100%;
  width:calc(var(--act-gutter) * var(--ui-scale,1));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(2px * var(--ui-scale,1));
  opacity:0;transition:.15s;
  /* Nothing to click while it is invisible. On a narrow screen the strip lies
     over the right end of the row, where covers get dropped. */
  pointer-events:none;
}
.tier-row:hover .tier-actions,.tier-actions:focus-within{opacity:1;pointer-events:auto}
/* Touch has no hover to turn them on with, so there they are always live. */
@media (hover:none){.tier-actions{pointer-events:auto}}
.tier-actions button{
  width:calc(22px * var(--ui-scale,1));height:calc(18px * var(--ui-scale,1));
  line-height:1;padding:0;border-radius:4px;cursor:pointer;
  border:1px solid var(--line);background:var(--app-bg-2);color:var(--muted);
  font-size:calc(11px * var(--ui-scale,1));
}
.tier-actions button:hover{color:var(--text);border-color:#454c61}
/* One control instead of four, and tucked into the corner of the label rather
   than laid over the row, which is where the covers go. */
.tier-more{display:none}
.tier-actions input[type=color]{
  width:calc(22px * var(--ui-scale,1));height:calc(18px * var(--ui-scale,1));
  padding:0;border:1px solid var(--line);border-radius:4px;background:none;cursor:pointer;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:none;border-radius:2px}

/* ---------- chart (topster grid) ---------- */
.chart{display:flex;align-items:flex-start;gap:18px}
/* Fixed columns, not auto-fill: a chart is "my top 25 in a 5x5", so the column
   count is the thing being chosen and the board width follows from it. */
.grid{
  display:grid;grid-template-columns:repeat(var(--cols), var(--size));
  gap:var(--gap);align-content:start;justify-content:start;flex:0 0 auto;
  min-height:calc(var(--size) * var(--art-ratio));border-radius:3px;
}
/* Sized by its own text, not by whatever is left over. Stretching it meant the
   board kept a names-shaped column of empty space after the titles were turned
   off — and, in grid mode, the board is only as wide as what is on it. */
.chart-names{
  flex:0 1 auto;min-width:0;max-width:340px;display:flex;flex-direction:column;
  gap:calc(var(--cap-size) * .45);padding-top:2px;
}
.chart-row{min-width:0}
.chart-t{font-size:var(--cap-size);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.chart-a{font-size:calc(var(--cap-size) - 1px);line-height:1.3;opacity:.62;overflow-wrap:anywhere}

/* ---------- tiles ---------- */
.tile{
  width:var(--size);position:relative;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
}
.tile:active{cursor:grabbing}
.art{
  width:var(--size);height:calc(var(--size) * var(--art-ratio));
  border-radius:var(--tile-radius);overflow:hidden;position:relative;
  background:#2b2f3c;display:block;
}
.art img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;position:relative;z-index:1}
.art-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:calc(var(--size)/4);color:rgba(255,255,255,.75);text-align:center;padding:4px;
  line-height:1.1;overflow:hidden;
}
.tile-num{
  position:absolute;left:0;top:0;min-width:18px;height:18px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.66);color:#fff;font-size:11px;font-weight:700;
  border-radius:var(--tile-radius) 0 6px 0;z-index:2;
}
.cap{width:var(--size);padding-top:3px;overflow:hidden}
/* Both wrap as far as they need. Capping the title at one line cut "FULL COLOR
   ECLIPSE" in half; capping it at two still cut "Sgt. Pepper's Lonely Hearts Club
   Band", and the artist stayed on one line so "Godspeed You! Black Emperor" lost
   its tail. A long title makes for a taller tile, which beats an unreadable one.
   Whatever the board shows, the PNG shows — drawText wraps to the measured box. */
.cap-t{font-size:var(--cap-size);font-weight:600;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.cap-a{font-size:calc(var(--cap-size) - 1px);line-height:1.25;opacity:.62;text-align:center;overflow-wrap:anywhere}

/* Visible by default: a touch screen has no hover to reveal them with, so hiding
   them until :hover put them out of reach there entirely. Where a pointer really
   can hover, keep them tucked away until the cover is pointed at. */
.tile-btn{
  --btn:19px;
  position:absolute;top:calc(-6px * var(--ui-scale,1));
  width:calc(var(--btn) * var(--ui-scale,1));height:calc(var(--btn) * var(--ui-scale,1));
  border-radius:50%;border:1px solid rgba(0,0,0,.35);color:#fff;line-height:1;
  font-size:calc(11px * var(--ui-scale,1));
  cursor:pointer;display:flex;padding:0;align-items:center;justify-content:center;z-index:3;
}
.tile-x{right:calc(-6px * var(--ui-scale,1));background:#e04f5f}
.tile-ed{right:calc(16px * var(--ui-scale,1));background:#4b5570}
@media (hover:hover){
  .tile-btn{display:none}
  .tile:hover .tile-btn{display:flex}
}
/* No hover to reveal them with, and nowhere near enough room to leave them on
   every cover at once, so a tap arms the cover you mean and shows them there. */
@media (hover:none){
  .tile-btn{--btn:26px;display:none;top:calc(-9px * var(--ui-scale,1));font-size:calc(15px * var(--ui-scale,1))}
  .tile-x{right:calc(-9px * var(--ui-scale,1))}
  .tile-ed{right:calc(20px * var(--ui-scale,1))}
  .tile.armed .tile-btn{display:flex}
  .tile.armed .art{outline:2px solid var(--accent);outline-offset:1px}
}

.placeholder{
  height:calc(var(--size) * var(--art-ratio));border-radius:var(--tile-radius);
  border:2px dashed rgba(124,92,255,.85);background:rgba(124,92,255,.14);
}
/* Scaled to match the board it was picked up from, and anchored top-left so the
   cover stays under the finger that grabbed it whatever the board zoom is. */
.ghost{
  position:fixed;z-index:999;pointer-events:none;opacity:.92;
  transform-origin:top left;
  transform:scale(calc(var(--gz,1) * 1.06)) rotate(-2deg);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
.ghost .tile-btn{display:none}

/* ---------- bench ---------- */
.bench-wrap{padding-bottom:22px;max-width:100%}
.bench-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.bench-title{font-weight:600;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.hint{color:var(--muted);font-size:12px}
.bench-count{
  display:none;font-size:11px;font-weight:700;color:var(--muted);
  background:var(--app-bg-2);border:1px solid var(--line);border-radius:99px;padding:1px 8px;
}
.bench{
  display:flex;flex-wrap:wrap;gap:var(--gap);padding:12px;min-height:calc(var(--size) * var(--art-ratio) + 24px);
  border:1px dashed var(--line);border-radius:12px;background:rgba(255,255,255,.025);align-content:flex-start;
  font-family:var(--board-font);
}
.bench.drop-hot{border-color:var(--accent);background:rgba(124,92,255,.12)}

/* ---------- sidebar ---------- */
.sidebar{
  border-left:1px solid var(--line);background:rgba(16,17,23,.6);
  padding:16px;overflow:auto;display:flex;flex-direction:column;gap:14px;
}
.sidebar-head{
  display:none;align-items:center;justify-content:space-between;gap:10px;
  font-weight:700;font-size:13px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);
}
/* The sidebar is a flex column: without this, panels shrink under their own
   content and `overflow:hidden` crops the last controls off. Let them keep
   their height and scroll the sidebar instead. */
.panel{border:1px solid var(--line);border-radius:12px;background:var(--app-bg-2);overflow:hidden;flex:0 0 auto}
.panel-head{
  padding:10px 12px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);
}
.search{display:flex;gap:8px;padding:12px}
.search input{
  flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#0f1118;outline:none;
}
.search input:focus{border-color:var(--accent)}
.results{max-height:46vh;overflow:auto;padding:0 12px 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.results .pad{grid-column:1/-1;margin:0;font-size:12px}
.muted{color:var(--muted)}
.res{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.res-t{font-size:10px;line-height:1.25;margin-top:3px;max-height:24px;overflow:hidden}
.res-a{font-size:9px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.res-wrap{min-width:0}
.res-wrap .tile,.res-wrap .art{width:100%}
.res-wrap .art{height:auto;aspect-ratio:1/1;border-radius:6px}
.results[data-medium="movie"] .res-wrap .art,
.results[data-medium="tv"] .res-wrap .art{aspect-ratio:2/3}
.upload-row{padding:0 12px 12px}
.linkrow{padding:8px 0 0}

.opts{padding:12px;display:flex;flex-direction:column;gap:11px}
.opt-group{
  font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);padding-top:11px;margin-top:1px;
}
.opt{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.opt:not(.opt-check)>span{width:88px;flex:0 0 88px}   /* label column — sliders and swatches only */
.opt-wrap{align-items:flex-start}
.opt input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.opt output{width:38px;text-align:right;font-variant-numeric:tabular-nums;flex:0 0 38px}
.opt input[type=color]{width:44px;height:24px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.opt select{
  flex:1;min-width:0;padding:6px 8px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--app-bg);color:var(--text);
}
.opt-check{cursor:pointer}
.opt-check input{accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto;margin:0}
.opt-check span{color:var(--text)}
.opt-note{margin:-4px 0 0;font-size:11px;line-height:1.45;color:var(--muted);opacity:.8}
.modes,.media{display:flex;gap:6px;flex:1}
.media{padding:12px 12px 0}
.modes .btn,.media .btn{flex:1 1 0;padding:6px 8px;font-size:12px}
.modes .btn.on,.media .btn.on{background:linear-gradient(180deg,#8a6cff,#6b47f5);border-color:#7250ff;color:#fff;font-weight:600}
.swatches{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.sw{flex:1 0 auto;width:26px;height:22px;border-radius:6px;border:1px solid var(--line);cursor:pointer;padding:0}
.sw:hover{outline:2px solid var(--accent);outline-offset:1px}
.tips{margin:0;padding:12px 12px 12px 26px;color:var(--muted);font-size:12px;display:flex;flex-direction:column;gap:6px}

/* ---------- edit-album dialog ---------- */
.modal{
  border:1px solid var(--line);border-radius:14px;padding:0;color:var(--text);
  background:var(--app-bg-2);width:min(520px,calc(100vw - 32px));
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal::backdrop{background:rgba(6,7,10,.62);backdrop-filter:blur(3px)}
.modal-head{
  padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);
}
.modal-body{display:flex;gap:16px;padding:16px}
.modal-art{width:132px;flex:0 0 132px;display:flex;flex-direction:column;gap:8px}
.modal-art .art{width:132px;height:132px;border-radius:8px}
.modal-art .btn{padding:6px 8px;font-size:12px}
#edPreview{width:100%;height:100%;object-fit:cover;display:block}
.modal-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.field{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.field input{
  padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:#0f1118;outline:none;
  color:var(--text);min-width:0;
}
.field input:focus{border-color:var(--accent)}
.field-note{margin:2px 0 0;font-size:11px;line-height:1.45;color:var(--muted);opacity:.85}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 16px 16px}

/* ---------- bottom sheets ---------- */
/* A phone's thumb reaches the bottom of the screen, not the top of it, so the
   menus open from there. */
.sheet{
  border:0;padding:0;margin:auto auto 0;background:none;color:var(--text);
  width:100%;max-width:100%;max-height:88vh;overflow-y:auto;
}
.sheet::backdrop{background:rgba(6,7,10,.62);backdrop-filter:blur(3px)}
.sheet-card{
  background:var(--app-bg-2);border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;padding:8px 14px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:2px;
}
.sheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:2px auto 8px}
.sheet-group{
  font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
  padding:10px 6px 4px;
}
.sheet-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 12px;border-radius:10px;border:0;background:none;color:var(--text);
  font-size:15px;cursor:pointer;
}
.sheet-item:active{background:#1c1f28}
.sheet-item.danger{color:#ff8a97}
.sheet-item .sheet-label{color:var(--muted);font-size:13px;flex:1}
.sheet-item input[type=color]{width:52px;height:28px;padding:0;border:1px solid var(--line);border-radius:7px;background:none}
.sheet-close{margin-top:10px;padding:12px}

.scrim{position:fixed;inset:0;background:rgba(6,7,10,.5);z-index:45}

.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:#1c1f2a;border:1px solid var(--line);padding:9px 16px;border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:200;font-size:13px;
  max-width:calc(100vw - 32px);text-align:center;
}

/* ---------- narrow ---------- */
@media (max-width:960px){
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;inset:0 0 0 auto;width:min(380px,100vw);z-index:50;
    transform:translateX(101%);transition:.22s;box-shadow:-20px 0 50px rgba(0,0,0,.5);
    background:var(--app-bg);
    padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 24px 14px;
  }
  .sidebar.open{transform:none}
  .only-narrow{display:inline-flex}
  .sidebar-head{display:flex}
  /* The wordmark is the first thing to go: below this the panel button joins the
     bar, and Export PNG is worth more than a name the tab already says. The rest
     of the bar moves into the menu, which leaves four controls that fit at any
     phone width instead of nine that scroll off the edge. */
  .brand{display:none}
  .only-compact{display:inline-flex}
  .listbar .btn-icon,.topbar-actions .btn:not(#btnExport){display:none}
  #listPicker{min-width:0;max-width:none;flex:1 1 auto}
  .topbar-actions{overflow:visible}
  .results{max-height:none}
  /* No room for a gutter beside the board, so the tier buttons tuck into the
     right edge of the row instead. They are data-noexport either way. */
  .board-scroll{padding-right:0}
  .tier-actions{
    background:linear-gradient(90deg,transparent,rgba(0,0,0,.55));
    opacity:1;width:calc(32px * var(--ui-scale,1));left:auto;right:0;
  }
}
@media (min-width:961px){
  .scrim{display:none}
}

/* A touch screen gets one tier control instead of four, in the corner of the
   label where it covers nothing. It opens a sheet with the same four actions. */
@media (hover:none){
  .tier-actions{
    left:0;right:auto;top:auto;bottom:0;height:auto;width:auto;
    opacity:1;background:none;padding:2px;
  }
  .tier-actions > *{display:none}
  .tier-actions .tier-more{
    display:flex;align-items:center;justify-content:center;
    width:calc(26px * var(--ui-scale,1));height:calc(20px * var(--ui-scale,1));
    font-size:calc(13px * var(--ui-scale,1));
    background:rgba(0,0,0,.28);border:0;color:rgba(0,0,0,.6);border-radius:6px;
  }
}
@media (max-width:700px){
  .topbar{gap:8px;padding-top:8px;padding-bottom:8px}
  .topbar-left{flex:1 1 auto;min-width:0}
  .btn{padding:8px 11px}
  .only-phone{display:inline-flex}
  .workspace{padding:12px 12px 0;gap:12px}
  .board{border-radius:12px;padding:12px}
  .modal-body{flex-direction:column;align-items:center}
  .modal-art{width:150px;flex:0 0 auto}
  .modal-art .art{width:150px;height:150px}
  .modal-fields{width:100%}

  /* Unranked becomes a tray along the bottom. It is the one change that makes
     the thing usable one-handed: what you are placing and where it goes are on
     screen at the same time, instead of the queue being a scroll away below the
     board. Covers here keep a thumb-sized 64px whatever the board is scaled to —
     this is for picking from, not part of the picture. */
  .bench-wrap{
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    width:auto !important;max-width:none;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(14,15,19,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  .bench-head{margin-bottom:6px;gap:6px}
  .bench-wrap .hint{display:none}
  .bench-count:not(:empty){display:inline-block}
  .bench{
    --size:64px;
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    gap:8px;padding:0;min-height:0;border:0;background:none;
  }
  .bench::-webkit-scrollbar{display:none}
  .bench{scrollbar-width:none}
  .bench .tile{flex:0 0 auto}
  .bench:empty{
    min-height:38px;border:1px dashed var(--line);border-radius:10px;
    display:flex;align-items:center;justify-content:center;
  }
  .bench:empty::before{
    content:'Search for albums — they land here';color:var(--muted);font-size:12px;
  }
  /* Clear of the tray. The instruction to tap a tier is worth nothing if it is
     printed over the covers being tapped. */
  .toast{bottom:calc(var(--tray-h, 0px) + 14px)}
}
@media (max-width:420px){
  .results{grid-template-columns:repeat(2,1fr)}
  .opt:not(.opt-check)>span{width:74px;flex:0 0 74px}
}

/* Under the board rather than beside it: these are the sources for what is on
   the board, and the sidebar is for doing things, not for reading. */
.sources{
  max-width:100%;padding:0 2px 24px;
  color:var(--muted);font-size:11px;line-height:1.7;
}
.sources a{color:var(--accent-2);text-decoration:none}
.sources a:hover{text-decoration:underline}