/* index.css — the clay board.
 *
 * The design is a Tailwind sketch; it is written out here as plain CSS at the
 * same values so the page carries no runtime CSS dependency. The clay ramp,
 * the two tile shadows and the board shadow are the whole visual system —
 * everything else is spacing. */

:root {
  --clay-50:  #f9f8f6;
  --clay-100: #f1ede7;
  --clay-200: #e1d9ce;
  --clay-300: #cebeae;
  --clay-400: #ba9e89;
  --clay-500: #ac856a;
  --clay-600: #a07159;
  --clay-700: #865b49;
  --clay-800: #6d4b3e;
  --clay-900: #593e34;

  --bisque: #e5e0d8;      /* an unglazed pad */
  --board:  #f0ebe1;      /* the grout bed */
  --iron:   #9c3d2e;      /* the playhead */

  /* A pad is recessed into the grout until it is struck, then it sits proud. */
  --tile-inactive: inset 2px 2px 4px rgba(0,0,0,0.1), inset -2px -2px 4px rgba(255,255,255,0.7);
  --tile-active: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -1px rgba(0,0,0,0.2),
                 inset 0 2px 4px rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.2);
  --board-shadow: 20px 20px 60px #c5c1ba, -20px -20px 60px #ffffff;

  --label-w: 150px;
  --pad-gap: 0.5rem;
  --row-gap: 0.6rem;

  --sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  /* ── the mosaic wall ──────────────────────────────────────────────────
   * A real tiled wall changes pattern between registers rather than running
   * one grain everywhere: a field, a border course, a panel. Each surface
   * here takes a different motif, and the scale is chosen for how much of
   * that surface is actually visible — big motifs need open ground, so the
   * star lattice goes on the page and the fine grains go in the narrow
   * places. All of them sit at very low contrast; they are ground, not
   * pattern you are meant to look at. */

  /* the wall itself: an eight-point star lattice with diamond keys */
  --tile-zellige: url("data:image/svg+xml,%3Csvg width='44' height='44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c9b9a7' stroke-opacity='.28' stroke-width='1'%3E%3Crect x='9' y='9' width='26' height='26'/%3E%3Crect x='9' y='9' width='26' height='26' transform='rotate(45 22 22)'/%3E%3C/g%3E%3Cg fill='%23c9b9a7' fill-opacity='.16'%3E%3Cpath d='M0 0l4 4-4 4-4-4z'/%3E%3Cpath d='M44 0l4 4-4 4-4-4z'/%3E%3Cpath d='M0 44l4 4-4 4-4-4z'/%3E%3Cpath d='M44 44l4 4-4 4-4-4z'/%3E%3C/g%3E%3C/svg%3E");

  /* border courses, top and bottom: brick set in running bond */
  --tile-bond: url("data:image/svg+xml,%3Csvg width='24' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23cebeae' fill-opacity='.22'%3E%3Crect x='.5' y='.5' width='10.8' height='4.8' rx='1'/%3E%3Crect x='12.5' y='.5' width='10.8' height='4.8' rx='1'/%3E%3Crect x='6.5' y='6.5' width='10.8' height='4.8' rx='1'/%3E%3Crect x='-5.5' y='6.5' width='10.8' height='4.8' rx='1'/%3E%3Crect x='18.5' y='6.5' width='10.8' height='4.8' rx='1'/%3E%3C/g%3E%3C/svg%3E");

  /* the bed the pads are set into: four glazed tesserae per repeat */
  --tile-tesserae: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Crect x='.6' y='.6' width='6.8' height='6.8' rx='1.2' fill='%23d9d1c3' fill-opacity='.55'/%3E%3Crect x='8.6' y='.6' width='6.8' height='6.8' rx='1.2' fill='%23cec6b6' fill-opacity='.42'/%3E%3Crect x='.6' y='8.6' width='6.8' height='6.8' rx='1.2' fill='%23d2cabb' fill-opacity='.34'/%3E%3Crect x='8.6' y='8.6' width='6.8' height='6.8' rx='1.2' fill='%23dcd4c7' fill-opacity='.5'/%3E%3C/g%3E%3C/svg%3E");

}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--clay-100);
  background-image: var(--tile-zellige);
  font-family: var(--sans);
  color: var(--clay-900);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--clay-300); }

button { font: inherit; color: inherit; cursor: pointer; }

.icon { width: 1.25rem; height: 1.25rem; display: block; flex: none; }
.icon-xs { width: 0.5rem;  height: 0.5rem; }
.icon-sm { width: 1rem;    height: 1rem; }
.icon-md { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.5rem;  height: 1.5rem; }

/* ── header ────────────────────────────────────────────────────────────── */

.topbar {
  width: 100%;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--clay-200);
  background-color: rgba(249, 248, 246, 0.82);
  background-image: var(--tile-bond);
  backdrop-filter: blur(4px);
  z-index: 20;
}

.brand { display: flex; align-items: center; }

.brand h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.625rem;
  line-height: 1.25;
  letter-spacing: 0.025em;
  font-weight: 400;
  color: var(--clay-900);
  white-space: nowrap;
}

/* ── transport ─────────────────────────────────────────────────────────── */

.transport {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background-color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid var(--clay-200);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.t-play {
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9999px;
  background: var(--clay-800); color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  transition: background-color 0.15s, box-shadow 0.15s;
}
.t-play:hover { background: var(--clay-700); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.t-play:focus-visible { outline: 2px solid var(--clay-500); outline-offset: 2px; }
.t-play.playing { background: #991b1b; }
.t-play.playing:hover { background: #7f1d1d; }

.t-stop {
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9999px;
  background: transparent; color: var(--clay-600);
  transition: color 0.15s, background-color 0.15s;
}
.t-stop:hover { color: var(--clay-900); background: var(--clay-100); }

.t-rule { height: 2rem; width: 1px; background: var(--clay-200); }

.t-bpm { display: flex; align-items: center; gap: 0.75rem; }
.t-bpm label { font-size: 0.875rem; font-weight: 500; color: var(--clay-600); width: 2.5rem; }
.t-bpm span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clay-900);
  width: 2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#bpmSlider {
  -webkit-appearance: none; appearance: none;
  width: 6rem; height: 4px;
  background: var(--clay-200);
  border-radius: 9999px;
  cursor: pointer;
}
#bpmSlider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 9999px;
  background: var(--clay-800); border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
#bpmSlider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 9999px;
  background: var(--clay-800); border: 2px solid #fff;
}

.t-clear {
  display: flex; align-items: center; gap: 0.25rem;
  border: 0; background: transparent;
  font-size: 0.875rem; font-weight: 500;
  color: var(--clay-500);
  transition: color 0.15s;
}
.t-clear:hover { color: #b91c1c; }

/* ── header actions ────────────────────────────────────────────────────── */

.actions { display: flex; align-items: center; gap: 0.75rem; }

.btn-ghost, .btn-solid {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem; font-weight: 500;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-ghost {
  border: 1px solid var(--clay-300);
  background-color: #fff;
  color: var(--clay-700);
}
.btn-ghost:hover { background-color: var(--clay-100); }
.btn-ghost[aria-expanded="true"] { background-color: var(--clay-200); }
.btn-solid {
  border: 0;
  background: var(--clay-900);
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.btn-solid:hover { background: #000; }

.menu-wrap { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  min-width: 17.5rem;
  padding: 0.375rem;
  background: #fff;
  border: 1px solid var(--clay-200);
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px -8px rgba(89,62,52,0.28);
}
.menu button {
  display: block; width: 100%;
  text-align: left;
  padding: 0.5rem 0.625rem;
  border: 0; background: transparent;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--clay-800);
}
.menu button:hover { background: var(--clay-100); }
.menu button small {
  display: block;
  font-size: 0.6875rem;
  color: var(--clay-500);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

/* ── board ─────────────────────────────────────────────────────────────── */

main {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: auto;
}

.glow { position: absolute; border-radius: 9999px; filter: blur(64px); z-index: -10; pointer-events: none; }
.glow-a { top: 5rem; left: 5rem; width: 16rem; height: 16rem; background: rgba(255,255,255,0.4); }
.glow-b { bottom: 5rem; right: 5rem; width: 24rem; height: 24rem; background: rgba(206,190,174,0.2); }

.board {
  position: relative;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem;
  background-color: var(--board);
  background-image: var(--tile-tesserae);
  border: 4px solid #fff;
  border-radius: 1.5rem;
  box-shadow: var(--board-shadow);
}

.playhead-track {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: var(--pad-gap);
  padding-left: calc(var(--label-w) + 1rem);
  margin-bottom: 0.5rem;
}

.playhead-dot {
  height: 6px;
  border-radius: 3px;
  background: #d1c7ba;
  transition: background-color 0.1s, box-shadow 0.1s;
}
.playhead-dot.beat { background: #c2b4a3; }
.playhead-dot.active { background: var(--iron); box-shadow: 0 0 8px var(--iron); }

.grid { display: flex; flex-direction: column; gap: var(--row-gap); }

.row { display: flex; align-items: center; gap: 1rem; }

/* ── the material label, straight off the catalogue list ───────────────── */

.label {
  width: var(--label-w);
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #fff;
  border: 1px solid var(--clay-200);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.label-name {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay-800);
  white-space: nowrap;
}

/* The catalogue's radio circle, given a job: it mutes the row. */
.label-mute {
  width: 1rem; height: 1rem; flex: none;
  padding: 0; border-radius: 9999px;
  border: 1px solid var(--clay-300);
  background: var(--clay-100);
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.label-mute::after {
  content: '';
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--accent);
  transition: transform 0.15s, opacity 0.15s;
}
.label-mute:hover { border-color: var(--accent); }
.row.muted .label-mute::after { transform: scale(0.1); opacity: 0; }
.row.muted .label { opacity: 0.55; }
.row.muted .pads { opacity: 0.4; filter: saturate(0.2); }

/* ── the pads ──────────────────────────────────────────────────────────── */

.pads {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: var(--pad-gap);
  /* a drag across the pads paints them; it must not scroll the page instead */
  touch-action: none;
  transition: opacity 0.2s, filter 0.2s;
}

.pad {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(206,190,174,0.5);
  border-radius: 0.25rem;
  background-color: var(--bisque);
  box-shadow: var(--tile-inactive);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
/* The playhead ring sits 4px outside the pad, in the grout, so the pad cannot
 * clip its own overflow — the crop is clipped by the face instead — and the
 * lit column has to rise above the pads drawn after it. */
.pad.playing-col { z-index: 5; }
/* every other group of four, so the 4/4 bar is readable at a glance */
.pad.offbeat { background-color: rgba(225,217,206,0.5); }

/* The crop. An unstruck pad is empty bisque — the object only appears when the
 * tile is struck, so the board reads as a clay field you are setting objects
 * into rather than a wall of photographs. */
.pad-face {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background-image: var(--crops);
  background-repeat: no-repeat;
  background-size: var(--sheet-w) var(--sheet-h);
  background-position: var(--crop-pos);
  opacity: 0;
  transition: opacity 0.15s;
}
.pad:hover { background-color: #dcd6cc; }

.pad.on { box-shadow: var(--tile-active); border-color: rgba(0,0,0,0.12); }
.pad.on .pad-face { opacity: 1; }

/* The glaze: a raking highlight across the struck tile, plus the material's
 * own surface pattern laid over the object at a whisper. */
.pad.on .pad-face::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--pattern);
  background-size: var(--pattern-size);
  background-position: center;
  mix-blend-mode: overlay;
  opacity: 0.55;
}
.pad.on .pad-face::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 40%,
                                      rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%);
}
.pad.struck { transform: scale(1.06); }

/* the column under the playhead */
/* A white ring alone is what the design asks for, but white on a bisque board
 * is nearly invisible — the playhead has to be findable at a glance while the
 * thing is running. So the ring keeps its white edge and gains a hairline and
 * a wash in the same iron the playhead dots use, which ties the two together. */
.step-highlight {
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 6px;
  background: rgba(156,61,46,0.07);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.05s;
  box-shadow: 0 0 10px rgba(255,255,255,0.55), 0 0 0 1px rgba(156,61,46,0.5);
  z-index: 10;
}
.pad.playing-col .step-highlight { opacity: 1; }

/* ── footer ────────────────────────────────────────────────────────────── */

.statusbar {
  width: 100%;
  padding: 1rem 2rem;
  border-top: 1px solid var(--clay-200);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; font-weight: 500;
  color: var(--clay-500);
  background-color: rgba(249,248,246,0.6);
  background-image: var(--tile-bond);
  z-index: 20;
}
.status-left { display: flex; align-items: center; gap: 1rem; }

/* ── about ─────────────────────────────────────────────────────────────── */

.about-wrap { position: relative; }

.about-cta {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--clay-600);
  border-bottom: 1px solid var(--clay-300);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.about-cta:hover,
.about-cta[aria-expanded="true"] { color: var(--clay-900); border-color: var(--clay-600); }

.about-panel {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  right: 0;
  z-index: 50;
  width: 26rem;
  max-width: calc(100vw - 4rem);
  padding: 1.25rem 1.375rem;
  background: #fff;
  border: 1px solid var(--clay-200);
  border-radius: 0.75rem;
  box-shadow: 0 16px 40px -12px rgba(89,62,52,0.35);
  animation: about-in 0.16s ease-out;
}
@keyframes about-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.about-panel h2 {
  margin: 0 0 0.5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--clay-900);
}
.about-panel p {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--clay-700);
}
.about-panel p:last-child { margin-bottom: 0; }
.about-hint {
  padding-top: 0.625rem;
  border-top: 1px solid var(--clay-200);
  font-size: 0.6875rem !important;
  color: var(--clay-500) !important;
}
.status-item { display: flex; align-items: center; gap: 0.375rem; }
.status-sep { color: var(--clay-300); }
#engineDot { color: #d1c7ba; transition: color 0.3s; }
#engineDot.ready { color: #22c55e; }

/* ── overlays ──────────────────────────────────────────────────────────── */

.tooltip {
  position: fixed;
  z-index: 60;
  max-width: 18rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid var(--clay-200);
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px -8px rgba(89,62,52,0.35);
  pointer-events: none;
}
.tooltip b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--clay-900);
}
.tooltip span {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--clay-500);
}
.tooltip em {
  display: block;
  margin-top: 0.375rem;
  font-style: normal;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clay-400);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 4.5rem;
  transform: translateX(-50%);
  z-index: 60;
  padding: 0.625rem 1.125rem;
  border-radius: 9999px;
  background: var(--clay-900);
  color: var(--clay-50);
  font-size: 0.8125rem;
  box-shadow: 0 10px 30px -8px rgba(89,62,52,0.5);
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; }
  .transport { order: 3; width: 100%; justify-content: center; }
}
@media (max-width: 820px) {
  :root { --label-w: 118px; --pad-gap: 0.3rem; }
  .board { padding: 1.25rem; }
}