/* App-specific layout. Colors, type and effects come from tokens.css / components.css. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--font-body);
}

h1,
h2,
p {
  margin: 0;
}

.layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 30rem;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding:
    calc(var(--space-8) + env(safe-area-inset-top))
    calc(var(--space-5) + env(safe-area-inset-right))
    calc(var(--space-6) + env(safe-area-inset-bottom))
    calc(var(--space-5) + env(safe-area-inset-left));
}

@media (min-width: 48rem) {
  body {
    display: grid;
    place-items: center;
    padding: var(--space-10) var(--space-6);
  }

  .layout {
    width: 100%;
    min-height: 0;
    padding: var(--space-10) var(--space-10) var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--drop-4), var(--bevel-lg);
  }
}

.header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

#pack-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pack-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--elevation-2);
  -webkit-tap-highlight-color: transparent;
}

.pack-card:focus-visible {
  box-shadow: var(--elevation-2), var(--shadow-glow);
}

@media (hover: hover) {
  .pack-card:hover { box-shadow: var(--elevation-3); }
}

#transport {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

#pad-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

/* 24 pads = 6 rows of 4: a slightly stronger gap splits them into two blocks of three rows. */
#pad-grid > .pad:nth-child(n + 13):nth-child(-n + 16) {
  margin-top: var(--space-2);
}

/* "blocks" packs: six 2x2 blocks (one part each). An empty middle column and a stronger gap
   every two rows separate the blocks. */
#pad-grid[data-layout="blocks"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) 0 repeat(2, minmax(0, 1fr));
}
#pad-grid[data-layout="blocks"] > .pad:nth-child(4n + 1) { grid-column: 1; }
#pad-grid[data-layout="blocks"] > .pad:nth-child(4n + 2) { grid-column: 2; }
#pad-grid[data-layout="blocks"] > .pad:nth-child(4n + 3) { grid-column: 4; }
#pad-grid[data-layout="blocks"] > .pad:nth-child(4n + 4) { grid-column: 5; }
#pad-grid[data-layout="blocks"] > .pad:nth-child(n + 13):nth-child(-n + 16) { margin-top: 0; }
#pad-grid[data-layout="blocks"] > .pad:nth-child(n + 9):nth-child(-n + 12),
#pad-grid[data-layout="blocks"] > .pad:nth-child(n + 17):nth-child(-n + 20) {
  margin-top: var(--space-3);
}

@media (max-width: 23.75rem) {
  #pad-grid {
    gap: var(--space-2);
  }

  #pad-grid > .pad:nth-child(n + 13):nth-child(-n + 16) {
    margin-top: var(--space-1);
  }
}

.back-link {
  align-self: flex-start;
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: none;
}

.footer {
  margin-top: auto;
}

.footer a,
.credits a {
  color: var(--color-text);
}

/* Credits page */
.credits {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.credits__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.credits__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.credits__list li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-wrap: anywhere;
}

/* Play page */
#transport .ui-button {
  padding: 0 var(--space-5);
}

#transport .ui-button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

#bpm-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 100%;
  min-height: 44px;
}

#bpm-range {
  flex: 1;
  min-width: 0;
  accent-color: var(--color-primary);
}

#bpm-value {
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#recording-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

#recording-result[hidden] {
  display: none;
}

#recording-result audio {
  flex: 1 1 16rem;
  min-width: 0;
}

.pad {
  --pad-tint: var(--color-primary);
  position: relative;
  flex-direction: column;
  aspect-ratio: 1;
  min-height: var(--tap-min);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--pad-tint) 28%, var(--color-surface-raised));
  font: var(--font-caption);
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Long-press / context menu opens the picker: no native callout or text selection. */
.pad {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.pad[aria-busy="true"] {
  opacity: 0.6;
  cursor: progress;
}

.pad--drums { --pad-tint: #f2a88f; }
.pad--bass { --pad-tint: #8fb8f2; }
.pad--chords { --pad-tint: var(--color-primary); }
.pad--percussion { --pad-tint: #f2d88f; }
.pad--melody { --pad-tint: #c3a6f2; }
.pad--voice { --pad-tint: #f2a3cf; }

.pad[aria-pressed="true"] {
  background: color-mix(in srgb, var(--pad-tint) 80%, var(--color-surface-raised));
  color: var(--color-on-primary);
  border-color: var(--color-primary-strong);
  box-shadow: var(--elevation-1), var(--shadow-glow-soft);
}

.pad[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-strong);
}

.pad:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* Beat rings (Soft Mint tokens only) */
.pad__label {
  position: relative;
  z-index: 1;
}

.pad-ring {
  position: absolute;
  inset: var(--space-1);
  width: calc(100% - var(--space-2));
  height: calc(100% - var(--space-2));
  pointer-events: none;
}

.pad-ring__seg {
  fill: none;
  stroke: var(--color-divider);
  stroke-width: 5;
  stroke-linecap: butt;
  transition: stroke 120ms ease-out;
}

.pad-ring__seg.is-bar {
  stroke: var(--color-rim);
  stroke-width: 7;
}

.pad[data-state="off"] .pad-ring__seg {
  opacity: 0.55;
}

.pad[data-state="waiting"] .pad-ring__seg.is-head,
.pad[data-state="playing"] .pad-ring__seg.is-head {
  stroke: var(--color-primary-strong);
  stroke-width: 8;
}

.pad[data-state="playing"] .pad-ring__seg.is-lit {
  stroke: var(--color-primary-strong);
}

.pad[data-state="playing"] .pad-ring__seg.is-lit:not(.is-head) {
  stroke: var(--color-primary);
}

.pad[data-state="waiting"] .pad-ring {
  animation: pad-ring-wait 1.2s ease-in-out infinite;
}

@keyframes pad-ring-wait {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .pad-ring__seg { transition: none; }
  .pad[data-state="waiting"] .pad-ring { animation: none; }
}

/* Sound picker (Soft Mint) */
.sound-picker {
  width: min(28rem, calc(100vw - var(--space-6)));
  max-height: min(80dvh, 40rem);
  margin: auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--drop-5), var(--bevel-lg);
  overflow: hidden;
}

.sound-picker[open] {
  display: flex;
}

.sound-picker::backdrop {
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
}

.sound-picker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  min-height: 0;
  padding: var(--space-6) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
}

.sound-picker__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-inset);
}

.sound-picker__part {
  margin-top: 0;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
}

.sound-picker__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sound-picker__item {
  width: 100%;
  padding: 0 var(--space-3);
  text-align: center;
  overflow-wrap: anywhere;
}

.sound-picker__item[aria-current="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.sound-picker__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

.sound-picker__actions .ui-button {
  padding: 0 var(--space-5);
}

.sound-picker__group {
  padding: var(--space-2) var(--space-2) var(--space-1);
}