/* Black-and-white look (inspired by youngstonerlife.com).
   Font: youngstonerlife.com uses "Widescreen Ex", a paid Adobe font; this uses Archivo Expanded (free,
   loaded from Google Fonts in each page's <head>) as a close match. If you license Widescreen Ex, put its
   name first in --font. */
:root {
  --bg: #000;
  --surface: #000;
  --surface-2: #0e0e0e;
  --line: #262626;
  --text: #fff;
  --muted: #8a8a8a;
  --accent: #fff;          /* highlights are plain white (see "Highlight colour" below for the optional pink) */
  --accent-ink: #000;
  --danger: #ff5a4f;
  --radius: 0px;           /* square corners throughout */
  --font: 'Archivo', Helvetica, Arial, sans-serif;
  --mono: 'Archivo', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px; font-weight: 500; font-stretch: 125%; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header { border-bottom: 1px solid #1a1a1a; position: sticky; top: 0; background: rgba(0, 0, 0, .82); z-index: 10; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.brand-icon { height: 24px; width: auto; display: block; }
nav { display: flex; align-items: center; gap: 24px; }
nav a { color: var(--text); text-decoration: none; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
nav a:hover { opacity: .6; }
.volume { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); cursor: pointer; }
.volume[hidden] { display: none; }
.volume svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.volume input { width: 90px; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* lightbulb: switches the highlight colour on/off (app.js); lit = pink */
.accent-toggle { display: grid; place-items: center; width: 24px; height: 24px; margin: 0 -4px 0 -8px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.accent-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.accent-toggle:hover { color: var(--text); }
.accent-toggle[aria-pressed="true"] { color: var(--hl); filter: drop-shadow(0 0 5px rgba(220, 0, 254, .7)); }

/* Intro */
.intro { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 72px 0 40px; }
.intro-text { min-width: 0; }
.eyebrow { color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 12px; }
h1, h2 { text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
h1 { font-size: clamp(22px, 3.6vw, 32px); line-height: 1.15; margin: 0 0 16px; }
.avatar {
  position: relative; flex: none; width: 200px; height: 200px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); border: 2px solid #fff;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lede { color: var(--muted); font-size: 13px; max-width: 520px; margin: 0; }
/* Social icons under the intro text (app.js, from "socials" in config.json) */
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.socials[hidden] { display: none; }
.social { display: grid; place-items: center; width: 34px; height: 34px; color: var(--text); background: rgba(0, 0, 0, .6); border: 1px solid var(--line); transition: border-color .15s, color .15s; }
.social svg { width: 17px; height: 17px; }
.social:hover, .social:focus-visible { border-color: #fff; outline: none; }

/* Filters, sort */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.list-controls { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.list-controls .filters { margin-bottom: 0; }
.sort { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 0; padding: 5px 8px;
  font: 11px var(--font); text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent); }
/* form controls don't inherit the font width; this comes after the select/input rules on purpose */
input, select, button, textarea { font-stretch: 125%; }
.order-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -6px 0 16px; }
.order-setting .sort { margin: 0; }
.order-setting .hint { margin: 0; }
.chip {
  font: 600 11px var(--font); color: var(--text); background: transparent; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--line); border-radius: 0; padding: 5px 12px; cursor: pointer;
}
.chip:hover { color: var(--text); border-color: #fff; }
.chip[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* Track grid: one card per track (the canvas is drawn by viz.js) */
.track-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.track-list .empty { grid-column: 1 / -1; color: var(--muted); padding: 32px 0; }
#tracks { scroll-margin-top: 80px; } /* page changes scroll here; keeps the list clear of the sticky header */

/* Page buttons under the grid (app.js) */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 22px; }
.pager[hidden] { display: none; }
.page-btn {
  min-width: 34px; height: 34px; padding: 0 10px; font: 600 12px var(--font); font-stretch: 125%; letter-spacing: .04em;
  color: var(--text); background: rgba(0, 0, 0, .6); border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
.page-btn:hover { border-color: #fff; }
.page-btn[aria-current="page"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); cursor: default; }
.page-btn:disabled { opacity: .3; cursor: default; }
.page-btn:disabled:hover { border-color: var(--line); }
.page-gap { color: var(--muted); padding: 0 2px; }
.card {
  display: flex; flex-direction: column; gap: 10px; min-height: 236px; padding: 14px;
  background: rgba(0, 0, 0, .6); border: 1px solid #1c1c1c; border-radius: var(--radius);
  transition: border-color .3s, box-shadow .3s;
}
.card:hover { border-color: #3a3a3a; }
.card.playing, .card.paused { border-color: #fff; }
.card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card-head .info { flex: 1; min-width: 0; }
/* tags on the left, button always on the right; a long tag list wraps onto more lines in its own space.
   overflow: hidden clips the "·" in front of the first tag on each line (see .tags below) */
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 26px; overflow: hidden; }
.card .tags { flex: 1 1 0; }
/* the box sets the size; the canvas sits on top of it so its pixel size can never change the layout */
.viz-box { position: relative; flex: 1; min-height: 84px; }
.viz { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }

.play {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff; background: #000;
  color: var(--text); cursor: pointer; display: grid; place-items: center; padding: 0; flex: none;
}
.play:hover, .card.playing .play { background: #fff; color: #000; border-color: #fff; }
.play svg { width: 14px; height: 14px; fill: currentColor; }

.info { min-width: 0; }
.title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* every tag starts with a "·"; the list is shifted left by one dot and clipped, so no line starts with one */
.tags { display: flex; flex-wrap: wrap; min-width: 0; margin-left: -14px; overflow: hidden; }
.tag { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.tag::before { content: '·'; display: inline-block; width: 14px; text-align: center; }

.meta { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; display: flex; gap: 10px; margin-top: 2px; }
.time { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; align-self: flex-start; }

/* seek bar: always takes its space so cards don't jump, only visible for the current track */
.progress { height: 4px; background: var(--line); border-radius: 0; cursor: pointer; position: relative; visibility: hidden; }
.card.playing .progress, .card.paused .progress { visibility: visible; }
.progress::before { content: ''; position: absolute; inset: -8px 0; } /* bigger click target */
.progress .fill { height: 100%; width: 0; background: #fff; border-radius: 0; }

/* Buttons: white outline, solid white when emphasised */
.btn {
  display: inline-block; font: 600 11px var(--font); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; cursor: pointer;
  padding: 8px 14px; border-radius: 0; border: 1px solid #fff; background: transparent; color: var(--text);
  white-space: nowrap;
}
.btn:hover { background: #fff; color: #000; border-color: #fff; }
.btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-accent:hover { opacity: .85; color: var(--accent-ink); }
.card .btn { padding: 5px 8px; margin-left: auto; font-size: 9.5px; letter-spacing: .05em; white-space: nowrap; flex: none; }

/* Contact & footer */
.contact { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 80px 0; } /* text left, picture right, like the intro */
.contact h2 { font-size: 28px; margin: 0 0 8px; }
.contact p { color: var(--muted); margin: 0 0 20px; }
.contact-text { min-width: 0; max-width: 560px; }
.contact-photo {
  position: relative; flex: none; width: 280px; height: 210px; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); border: 2px solid #fff;
}
.contact-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 24px 0; }

/* ---------- Background image ----------
   Choose one by changing --bg-image below (files are in public/backgrounds/), or set it to none for plain black.
   To compare them without editing, add ?bg=1 … ?bg=5 or ?bg=none to the page address
   (that only changes your own view). --bg-dim darkens the image: 0 = full strength, 1 = plain black. */
:root {
  /* the default: the smoke trail with the icon pattern blended over it (same as ?bg=4).
     Suggested darkness per image on its own: smoke-wispy .45, smoke-white .62 (it's brighter), smoke-trail .4.
     To make option 4 or 5 the default, copy the lines from its html[data-bg="…"] rule below into here. */
  --bg-image: url('backgrounds/smoke-trail.webp');
  --bg-dim: .52;
  --bg-overlay: url('backgrounds/pattern.webp'); --bg-overlay-size: 2200px; --bg-overlay-opacity: .32;
}
html[data-bg="1"] { --bg-image: url('backgrounds/smoke-wispy.webp'); --bg-dim: .45; --bg-overlay: none; }
html[data-bg="2"] { --bg-image: url('backgrounds/smoke-white.webp'); --bg-dim: .62; --bg-overlay: none; }
html[data-bg="3"] { --bg-image: url('backgrounds/smoke-trail.webp'); --bg-dim: .4; --bg-overlay: none; }
/* 4: the smoke trail with the icon pattern blended over it (made by scripts/make-pattern.js; it repeats seamlessly).
   --bg-overlay-opacity sets how strongly the pattern shows (0–1); it only adds light, so the smoke shows through. */
html[data-bg="4"] {
  --bg-image: url('backgrounds/smoke-trail.webp'); --bg-dim: .52;
  --bg-overlay: url('backgrounds/pattern.webp'); --bg-overlay-size: 2200px; --bg-overlay-opacity: .32;
}
/* 5: the icon pattern on its own */
html[data-bg="5"] { --bg-image: url('backgrounds/pattern.webp'); --bg-dim: .5; --bg-size: 2200px; --bg-repeat: repeat; --bg-overlay: none; }
html[data-bg="none"] { --bg-image: none; --bg-overlay: none; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, var(--bg-dim)), rgba(0, 0, 0, var(--bg-dim))),
    var(--bg-image) center / var(--bg-size, cover) var(--bg-repeat, no-repeat);
}
/* optional second layer (used by the default and 4): screen-blended, so it only lightens what's underneath */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg-overlay, none) center / var(--bg-overlay-size, auto) repeat;
  opacity: var(--bg-overlay-opacity, 0); mix-blend-mode: screen;
}
/* a soft dark halo keeps text that sits straight on the background readable over smoke and icons */
.intro-text, .list-controls, .contact, .site-footer { text-shadow: 0 0 10px #000, 0 0 3px #000; }

@media (max-width: 860px) { .track-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones */
@media (max-width: 640px) {
  :root, html[data-bg="4"] { --bg-overlay-size: 1100px; } /* smaller pattern tiles on phones */
  html[data-bg="5"] { --bg-size: 1100px; }
  .brand { letter-spacing: .08em; }
  nav { gap: 12px; }
  nav a { letter-spacing: .04em; }
  .volume input { width: 64px; }
  .track-list { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 210px; }
  .intro { padding: 48px 0 28px; gap: 16px; }
  .avatar { width: 112px; height: 112px; }
  .contact { gap: 16px; }
  .contact-photo { width: 150px; height: 112px; }
}
/* Narrow phones: smaller page buttons (app.js also shows fewer page numbers below 480px) */
@media (max-width: 479px) {
  .pager { gap: 4px; }
  .page-btn { min-width: 30px; height: 32px; padding: 0 6px; }
}
/* Phones held upright: logo only, the name doesn't fit next to the menu; it stays readable for screen readers */
@media (max-width: 479px) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Very small phones: shrink the volume slider and let the sort menu take its own line */
@media (max-width: 380px) {
  .volume input { width: 44px; }
  .brand { gap: 6px; font-size: 12px; }
  .brand-icon { height: 22px; }
  nav { gap: 10px; }
  .list-controls { flex-wrap: wrap; }
  .site-header .wrap { gap: 12px; }
  /* upload page */
  .order-setting .sort { flex-wrap: wrap; white-space: normal; }
  .order-setting select { max-width: 100%; }
  nav .btn { padding: 4px 7px !important; font-size: 10px; letter-spacing: .03em; }
}
/* The smallest phones (~320 px): no room for the volume slider next to the logo; they have volume buttons */
@media (max-width: 359px) {
  .volume { display: none; }
  .accent-toggle { margin-left: 0; }
}

/* ---------- Highlight colour (optional) ----------
   Adds touches of --hl in three amounts; each level includes the ones below it.
   Preview with ?accent=1, 2 or 3 at the end of the address (0 = none; your own view only).
   To use one for everyone, add data-accent="1" (or 2/3) to the <html> tag in public/index.html. */
:root { --hl: #dc00fe; --hl-ink: #000; }

/* 1 – subtle: only things that are active (selected filter, playing card, progress, volume) */
html:is([data-accent="1"], [data-accent="2"], [data-accent="3"]) .chip[aria-pressed="true"] { background: var(--hl); border-color: var(--hl); color: var(--hl-ink); }
html:is([data-accent="1"], [data-accent="2"], [data-accent="3"]) .page-btn[aria-current="page"] { background: var(--hl); border-color: var(--hl); color: var(--hl-ink); }
html:is([data-accent="1"], [data-accent="2"], [data-accent="3"]) .card.playing, html:is([data-accent="1"], [data-accent="2"], [data-accent="3"]) .card.paused { border-color: var(--hl); }
html:is([data-accent="1"], [data-accent="2"], [data-accent="3"]) .card.playing .play { background: var(--hl); border-color: var(--hl); color: var(--hl-ink); }
html:is([data-accent="1"], [data-accent="2"], [data-accent="3"]) .progress .fill { background: var(--hl); }
html:is([data-accent="1"], [data-accent="2"], [data-accent="3"]) .volume input { accent-color: var(--hl); }

/* 2 – medium: + coloured visualizer, the "BEATS" label, hover states, a faint glow on the playing card */
html:is([data-accent="2"], [data-accent="3"]) { --viz-tint: #dc00fe; /* viz.js reads this; keep it the same as --hl */ }
html:is([data-accent="2"], [data-accent="3"]) .eyebrow { color: var(--hl); }
html:is([data-accent="2"], [data-accent="3"]) nav a:hover { color: var(--hl); opacity: 1; }
html:is([data-accent="2"], [data-accent="3"]) .chip:hover { border-color: var(--hl); }
html:is([data-accent="2"], [data-accent="3"]) .social:hover, html:is([data-accent="2"], [data-accent="3"]) .social:focus-visible { border-color: var(--hl); color: var(--hl); }
html:is([data-accent="2"], [data-accent="3"]) .btn:hover { background: var(--hl); border-color: var(--hl); color: var(--hl-ink); }
html:is([data-accent="2"], [data-accent="3"]) select:focus, html:is([data-accent="2"], [data-accent="3"]) input:focus { border-color: var(--hl); }
html:is([data-accent="2"], [data-accent="3"]) .card.playing { box-shadow: 0 0 28px -12px var(--hl); }

/* 3 – strong: + glow on the heading and logo, a pink ring around the photo, a faint haze in the background */
html[data-accent="3"] h1 { text-shadow: 0 0 10px #000, 0 0 3px #000, 0 0 26px rgba(220, 0, 254, .45); }
html[data-accent="3"] .brand-icon { filter: drop-shadow(0 0 6px rgba(220, 0, 254, .65)); }
html[data-accent="3"] .avatar { border-color: var(--hl); box-shadow: 0 0 14px -6px rgba(220, 0, 254, .55); }
html[data-accent="3"] body::before {
  background: radial-gradient(ellipse 80% 55% at 75% 0%, rgba(220, 0, 254, .13), transparent 70%),
  linear-gradient(rgba(0, 0, 0, var(--bg-dim)), rgba(0, 0, 0, var(--bg-dim))),
  var(--bg-image) center / var(--bg-size, cover) var(--bg-repeat, no-repeat);
}

/* ---------- Upload page (admin) ---------- */
.admin main { padding: 40px 20px 80px; }
.panel { background: rgba(0, 0, 0, .6); border: 1px solid #1c1c1c; border-radius: var(--radius); padding: 24px; margin-bottom: 28px; }
.panel h2 { margin: 0 0 16px; font-size: 20px; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
input[type=text], input[type=number], input[type=password], input[type=file] {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font: 15px var(--font);
}
input:focus { outline: none; border-color: var(--accent); }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.status { margin-top: 14px; font-size: 14px; min-height: 1.5em; }
.status.error { color: var(--danger); }
.status.ok { color: var(--accent); }
.admin-row { display: grid; grid-template-columns: 14px 18px 40px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.admin-row:last-child { border-bottom: 0; }
.admin-row.is-selected { background: var(--surface-2); box-shadow: -10px 0 0 var(--surface-2), 10px 0 0 var(--surface-2); }
.pick, .select-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.select-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.select-all { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--muted); cursor: pointer; min-width: 110px; }
.select-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.select-actions .btn { padding: 6px 10px; font-size: 13px; }
.select-actions .btn:disabled { opacity: .4; cursor: default; }
.select-bar .status { flex-basis: 100%; margin: 0; }
.select-bar .status:empty { display: none; }
.select-bar[hidden] { display: none; }
.admin-row .play { justify-self: start; }
.grip { display: flex; align-items: center; justify-content: center; width: 14px; height: 32px; color: var(--muted); cursor: grab; touch-action: none; user-select: none; opacity: .6; }
.grip svg { width: 10px; height: 16px; fill: currentColor; }
.grip:hover { opacity: 1; color: var(--text); }
.admin-row.is-dragging { opacity: .4; }
.admin-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.admin-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }
.admin-row .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-row.is-hidden .view, .admin-row.is-hidden .play { opacity: .45; }
.badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 0; font: 500 11px var(--mono); color: var(--muted); vertical-align: middle; text-transform: uppercase; letter-spacing: .06em; }
.badge-accent { color: var(--accent); border-color: var(--accent); }
.admin-row .btn { padding: 6px 10px; font-size: 13px; }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.edit-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 8px; }
.edit-grid input { padding: 7px 9px; font-size: 14px; }
.login-box { max-width: 360px; margin: 12vh auto; }

/* Bulk upload */
.bulk-drop {
  position: relative; display: grid; place-items: center; text-align: center; padding: 28px 16px; margin: 0;
  border: 1px dashed #3a3a40; border-radius: var(--radius); background: var(--bg); color: var(--muted); cursor: pointer;
}
.bulk-drop:hover, .bulk-drop.over { border-color: var(--accent); color: var(--text); }
.bulk-drop strong { color: var(--accent); }
.bulk-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bulk-scroll { overflow-x: auto; margin-top: 16px; }
.bulk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bulk-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 0 6px 8px; }
.bulk-table td { padding: 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.bulk-table td.file { font-family: var(--mono); font-size: 12px; color: var(--muted); max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-table td.state { font-size: 13px; min-width: 140px; }
.bulk-table input { padding: 6px 8px; font-size: 14px; }
.bulk-table input[name=title] { min-width: 140px; }
.bulk-table input[name=bpm] { width: 72px; }
.bulk-table input[name=key] { width: 64px; }
.bulk-table input[name=tags] { min-width: 120px; }
.bulk-drop small { font-size: 12px; color: var(--muted); }
.bulk-table .btn { padding: 4px 9px; font-size: 13px; }
.bulk-table tr.is-warn td.file { color: var(--accent); }
.bulk-table tr.is-done { opacity: .55; }
.bulk-table tr.is-empty input { opacity: .5; }
.bulk-table .ok { color: var(--accent); }
.bulk-table .warn { color: var(--accent); }
.bulk-table .error { color: var(--danger); }
@media (max-width: 640px) {
  .edit-grid { grid-template-columns: 1fr; }
  /* file list becomes one small card per file, with each field labelled */
  .bulk-table thead { display: none; }
  .bulk-table, .bulk-table tbody { display: block; }
  .bulk-table tr { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px 10px; padding: 12px 0; border-top: 1px solid var(--line); }
  .bulk-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .bulk-table td.file { grid-column: 1 / 3; max-width: none; align-self: center; }
  .bulk-table td.remove { grid-column: 3; grid-row: 1; }
  .bulk-table td[data-label="Title"], .bulk-table td[data-label="Tags"], .bulk-table td.state { grid-column: 1 / -1; }
  .bulk-table td[data-label="Key"] { grid-column: 2 / -1; }
  .bulk-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
  .bulk-table td.state::before { display: none; }
  .bulk-table input, .bulk-table input[name=title], .bulk-table input[name=bpm], .bulk-table input[name=key], .bulk-table input[name=tags] { width: 100%; min-width: 0; }
  .admin-row { grid-template-columns: 14px 18px 1fr; }
  .admin-row .view, .admin-row .actions { grid-column: 1 / -1; }
  .admin-row .actions { justify-content: flex-start; }
}