/* Monochrome, and deliberately so: the only colour on this screen is the one
   word that has to be read at a glance. Everything else is type and space. */
:root{
  --bg:#000; --fg:#fff; --dim:#8b8b8b; --line:#1c1c1c; --card:#0b0b0b;
  --live:#33d17a; --gone:#5c5c5c;
  --pad:16px; --nav:92px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:0 var(--pad) calc(var(--nav) + env(safe-area-inset-bottom) + 18px);
}

/* ── Type ────────────────────────────────────────────────────────────────── */
header{padding:20px 0 6px}
h1{font-size:26px;letter-spacing:.01em;margin:0;font-weight:800;text-transform:uppercase}
.sub{color:var(--dim);font-size:13px;margin:3px 0 0}

/* ── Filters ─────────────────────────────────────────────────────────────── */
.filters{display:flex;gap:6px;overflow-x:auto;padding:14px 0 10px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--dim);
      border-radius:999px;padding:7px 14px;font:13px inherit;font-family:inherit;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:650}
.chip:focus-visible,.tab:focus-visible,.act:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* ── Cards ───────────────────────────────────────────────────────────────── */
ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}

.card{display:flex;gap:13px;align-items:center}

/* Art first, because it is how a collection is recognised before it is read. */
.art{width:64px;height:64px;border-radius:15px;flex:0 0 auto;object-fit:cover;background:#151515}
.art.placeholder{display:flex;align-items:center;justify-content:center;
                 color:var(--gone);font-weight:700;font-size:24px;text-transform:uppercase}

.body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.titles{display:flex;align-items:baseline;gap:8px;min-width:0}
.name{font-weight:650;font-size:16px;letter-spacing:-.01em;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.state{font-size:9px;letter-spacing:.12em;text-transform:uppercase;flex:0 0 auto;font-weight:700}
.state.live{color:var(--live)} .state.soon{color:var(--fg)} .state.done{color:var(--gone)}

/* The number being decided on, so it is the largest thing after the name. */
.price{font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.tag{font-size:11px;color:var(--dim);background:#151515;border:1px solid var(--line);
     border-radius:999px;padding:3px 9px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tag.ghost{background:transparent}

/* ── The fill ring ───────────────────────────────────────────────────────── */
.ring{position:relative;flex:0 0 auto;width:52px;height:52px;display:grid;place-items:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:#1e1e1e;stroke-width:5}
.ring .fill{fill:none;stroke-width:5;stroke-linecap:round;
            transition:stroke-dasharray .4s ease}
@media (prefers-reduced-motion:reduce){.ring .fill{transition:none}}
.pct{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.pct i{font-style:normal;font-size:9px;color:var(--dim);margin-left:1px}

/* ── Action ──────────────────────────────────────────────────────────────── */
.act{display:block;width:100%;margin-top:13px;background:var(--fg);color:var(--bg);
     border:0;border-radius:999px;padding:14px;font:700 15px inherit;font-family:inherit;
     letter-spacing:.01em;cursor:pointer}
.act[disabled]{background:transparent;color:var(--gone);border:1px solid var(--line);
               font-weight:600;cursor:default}
.act.wide{margin-top:22px;max-width:280px}

.note,.foot{color:var(--dim);font-size:13px;text-align:center;padding:24px 2px;line-height:1.5}
.foot{color:var(--gone);font-size:11px;padding-top:22px}
.skel{height:118px;background:linear-gradient(90deg,#0b0b0b,#151515,#0b0b0b);
      background-size:200% 100%;border-radius:18px;animation:sh 1.1s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;
       padding:56px 12px;color:var(--dim)}
.empty .glyph{font-size:34px;color:var(--gone);margin-bottom:16px}
.empty h2{color:var(--fg);font-size:18px;margin:0 0 10px;font-weight:700}
.empty p{margin:0;max-width:36ch;line-height:1.55}

/* ── Bottom navigation ───────────────────────────────────────────────────── */
/* Deliberately large. This is the only navigation the app has, it is reached
   with a thumb, and the labels stay visible on every tab — a row of unlabelled
   glyphs makes someone guess. */
.tabs{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;gap:4px;padding:7px;width:calc(100% - 28px);max-width:430px;
  background:#0d0d0d;border:1px solid var(--line);border-radius:999px;
  box-shadow:0 10px 34px rgba(0,0,0,.75);z-index:10;
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
     border:0;background:transparent;color:var(--gone);border-radius:999px;
     padding:11px 6px;font:600 11px inherit;font-family:inherit;cursor:pointer;min-height:56px}
.tab .ico{font-size:19px;line-height:1}
.tab .lbl{display:inline;letter-spacing:.02em}
.tab.is-on{background:var(--fg);color:var(--bg)}