/*
 * JamJar app shell — phone-first chrome on top of tunetoy.css tokens.
 * Hero accent: grape (the guide's alternate-product accent).
 */

.hidden { display: none !important; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#app {
  display: flex; flex-direction: column;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------- top bar ---------- */

.jj-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px;
}
.jj-bar .toy-brand { font-size: 1.35rem; }
.jj-bar .spacer { flex: 1; }

.jj-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--toy-panel);
  border: var(--toy-border-control) solid var(--toy-ink);
  border-radius: var(--toy-radius-pill);
  box-shadow: 0 2px 0 var(--toy-ink);
  color: var(--toy-ink);
  font-family: var(--toy-font-body);
  font-size: 0.75rem; font-weight: 800;
  min-height: 2rem; padding: 0.2rem 0.7rem;
  letter-spacing: 0.04em;
}
.jj-chip--live { background: var(--toy-grape-soft); }
.jj-chip .dot {
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  border: 2px solid var(--toy-ink);
  background: #b9d9c6;
}
.jj-chip .dot.on {
  background: var(--toy-green-fill);
  animation: toy-breathe 1.2s ease-in-out infinite;
}
.jj-chip .dot.error { background: var(--toy-coral); }

.jj-iconbtn {
  min-height: 2.25rem; min-width: 2.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--toy-radius-pill);
}

/* ---------- step LEDs ---------- */

.jj-steps {
  display: grid; grid-template-columns: repeat(16, 1fr);
  gap: 3px; padding: 0 12px 8px;
}
.jj-steps i {
  height: 8px; border-radius: 4px;
  border: 2px solid var(--toy-ink);
  background: var(--toy-panel);
  opacity: 0.45;
}
.jj-steps i:nth-child(4n + 1) { opacity: 0.8; }
.jj-steps i.on {
  background: var(--toy-yellow-fill);
  opacity: 1;
}

/* ---------- screens ---------- */

.jj-screen { flex: 1; min-height: 0; display: none; flex-direction: column; }
.jj-screen.active { display: flex; }

.jj-home {
  justify-content: center; align-items: center;
  gap: 14px; padding: 18px; text-align: center;
}
.jj-home .toy-display { font-size: clamp(2.3rem, 12vw, 3.2rem); }
.jj-home .toy-lede { max-width: min(26rem, 100%); font-size: 1rem; }
.jj-home .toy-machine {
  width: min(92vw, 24rem);
  display: grid; gap: 12px; padding-top: 2.4rem;
}
.jj-home .row { display: flex; gap: 10px; }
.jj-home .row > * { flex: 1; }
.jj-home input[type="text"] {
  font-family: var(--toy-font-display); font-size: 1.05rem; font-weight: 800;
  color: var(--toy-ink);
  background: var(--toy-panel);
  border: var(--toy-border-control) solid var(--toy-ink);
  border-radius: var(--toy-radius-md);
  box-shadow: inset 0 2px 0 rgb(50 43 95 / 10%);
  padding: 0.5rem 0.6rem;
  text-transform: uppercase; text-align: center; letter-spacing: 0.22em;
  min-width: 0; width: 100%;
}
.jj-note { font-size: 0.75rem; font-weight: 600; color: var(--toy-muted); line-height: 1.5; }

/* ---------- instrument picker ---------- */

.jj-pick {
  padding: 10px 14px 16px; gap: 12px;
  overflow-y: auto;
}
.jj-pick h2 {
  font-family: var(--toy-font-display); font-weight: 800;
  color: var(--toy-ink); font-size: 1.3rem; text-align: center;
}
.jj-pick .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jj-card-inst {
  appearance: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--toy-panel);
  border: var(--toy-border-structure) solid var(--toy-ink);
  border-radius: var(--toy-radius-lg);
  box-shadow: var(--toy-shadow-card);
  padding: 18px 10px 14px;
  font-family: var(--toy-font-display); font-size: 1.05rem; font-weight: 800;
  color: var(--toy-ink);
  transition: box-shadow var(--toy-duration-fast), transform var(--toy-duration-fast);
}
.jj-card-inst:active { box-shadow: var(--toy-shadow-pressed); transform: translateY(3px); }
.jj-card-inst svg { width: 52px; height: 52px; }
.jj-card-inst .players {
  font-family: var(--toy-font-body); font-size: 0.7rem; font-weight: 800;
  color: var(--toy-muted); text-transform: uppercase; letter-spacing: 0.08em;
  min-height: 1em;
}

/* ---------- play view ---------- */

.jj-play { min-height: 0; }
.jj-instrument {
  flex: 1; min-height: 0;
  padding: 4px 12px 10px;
  display: flex; flex-direction: column;
}

/* Shared pad look for instruments (they may extend it in their own CSS). */
.jj-pad {
  appearance: none; cursor: pointer;
  background: var(--toy-panel);
  border: var(--toy-border-control) solid var(--toy-ink);
  border-radius: var(--toy-radius-md);
  box-shadow: var(--toy-shadow-control);
  color: var(--toy-ink);
  font-family: var(--toy-font-display); font-weight: 800;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--toy-duration-state), box-shadow var(--toy-duration-fast), transform var(--toy-duration-fast);
}
.jj-pad:active, .jj-pad.pressed {
  box-shadow: var(--toy-shadow-pressed);
  transform: translateY(2px);
}

/* ---------- band sheet (settings overlay) ---------- */

.jj-sheet {
  position: fixed; inset: 0; z-index: 8;
  display: grid; place-items: end center;
  background: rgb(50 43 95 / 32%);
}
.jj-sheet .card {
  width: min(100vw, 30rem);
  background: var(--toy-panel);
  border: var(--toy-border-structure) solid var(--toy-ink);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  display: grid; gap: 12px;
}
.jj-sheet h2 {
  font-family: var(--toy-font-display); font-weight: 800; font-size: 1.15rem;
  color: var(--toy-ink); text-align: center;
}
.jj-sheet .toy-control { text-align: left; }
.jj-sheet .row { display: flex; gap: 10px; align-items: center; }
.jj-sheet .row > .grow { flex: 1; }
.jj-sheet .bpm {
  font-family: var(--toy-font-display); font-size: 1.5rem; font-weight: 800;
  color: var(--toy-ink); min-width: 3.2rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.jj-sheet select {
  appearance: none;
  font-family: var(--toy-font-body); font-weight: 800; font-size: 0.9rem;
  color: var(--toy-ink);
  background-color: var(--toy-panel);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--toy-ink) 50%),
    linear-gradient(135deg, var(--toy-ink) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.65rem) 55%;
  background-repeat: no-repeat;
  background-size: 0.35rem 0.35rem;
  border: var(--toy-border-control) solid var(--toy-ink);
  border-radius: var(--toy-radius-md);
  box-shadow: 0 2px 0 var(--toy-ink);
  min-height: 2.625rem;
  padding: 0.4rem 2.2rem 0.4rem 0.75rem;
  width: 100%;
}
.jj-roomcode {
  font-family: var(--toy-font-display);
  font-size: 1.6rem; font-weight: 800; letter-spacing: 0.28em; text-indent: 0.28em;
  text-align: center; color: var(--toy-ink);
  background: var(--toy-grape-soft);
  border: var(--toy-border-control) solid var(--toy-ink);
  border-radius: var(--toy-radius-md);
  box-shadow: var(--toy-shadow-control);
  padding: 6px;
}

/* ---------- toast ---------- */

#toast {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9; pointer-events: none;
  background: var(--toy-ink); color: #fff;
  font-family: var(--toy-font-body); font-size: 0.8rem; font-weight: 700;
  border-radius: var(--toy-radius-pill);
  padding: 8px 16px;
  opacity: 0; transition: opacity 180ms;
  max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; }

@media (max-width: 350px) {
  .jj-pick .cards { grid-template-columns: 1fr; }
}