/* ==============================================================
   HUM · page styles
   File: /hum/hum.css
   Colours, font and buttons come from site.css.
   The "How it helps" section uses shared styles (site.css, section 13).

   Sections:
     1  Plate and sand colours (also used by the canvas)
     2  The room (intro and layout)
     3  Guidance, plate and "listening" badge
     4  Controls
   ============================================================== */


/* --------------------------------------------------------------
   1 · PLATE AND SAND COLOURS
   The plate stays dark metal in both themes, so the sand shows.
   -------------------------------------------------------------- */
:root {
  --plate-light: #4A5A62;
  --plate-dark: #232E34;
  --plate-edge: #151C20;
  --sand-grain: #EFE3C8;
  --plate-glow: 156, 199, 204;
}


/* --------------------------------------------------------------
   2 · THE ROOM
   -------------------------------------------------------------- */
.humroom {
  padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(3rem, 8vw, 5.5rem);
  background: linear-gradient(var(--c-sky-top), color-mix(in srgb, var(--c-sky-bottom) 60%, var(--bg)));
}
.humroom__inner {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.humroom__intro {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
.humroom__title {
  margin-bottom: .45em;
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  font-weight: var(--weight-light);
  letter-spacing: -.025em;
}
.humroom__lede {
  margin-bottom: 1rem;
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: 1.45;
}
.humroom__note { color: var(--muted); font-size: 1rem; }
.humroom__work { max-width: 38rem; }

@media (max-width: 900px) {
  .humroom__inner { grid-template-columns: 1fr; }
  .humroom__intro { position: static; }
}


/* --------------------------------------------------------------
   3 · GUIDANCE, PLATE AND "LISTENING" BADGE
   -------------------------------------------------------------- */
.hum-guide {
  min-height: 5.6rem;
  margin-bottom: 1rem;
  text-align: center;
}
.hum-guide__phase {
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  line-height: 1.15;
}
.hum-guide__detail {
  margin-top: .3rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.plate-stage {
  position: relative;
  width: min(100%, 64svh);
  aspect-ratio: 1;
  margin-inline: auto;
}
.plate-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.listening {
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}
.listening__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--danger);
  animation: dot-pulse 1.6s ease-in-out infinite;
}
.listening__meter {
  width: 3rem;
  height: .35rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.listening__meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}
@keyframes dot-pulse {
  50% { opacity: .35; }
}


/* --------------------------------------------------------------
   4 · CONTROLS
   -------------------------------------------------------------- */
.hum-panel {
  margin-top: 2.25rem;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
}
.hum-panel:focus { outline: none; }

.hum-choice {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}
.hum-choice legend {
  padding: 0;
  margin-bottom: .6rem;
  font-weight: var(--weight-strong);
}
.hum-choice__grid { display: grid; gap: .5rem; }
.hum-choice__row { display: flex; flex-wrap: wrap; gap: .5rem; }

.hum-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .15rem;
  padding: .8rem 1rem .85rem 2.6rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.hum-card input {
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--accent);
}
.hum-card__name { font-weight: var(--weight-strong); }
.hum-card__about { font-size: .95rem; color: var(--muted); line-height: 1.45; }
.hum-card.is-unavailable { opacity: .55; cursor: not-allowed; }

.hum-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 46px;
  padding: .45rem 1.1rem .45rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.hum-pill input { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

.hum-card:has(input:checked),
.hum-pill:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.hum-card:has(input:focus-visible),
.hum-pill:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

.session__round {
  margin-bottom: 1rem;
  font-size: var(--step-1);
  font-weight: var(--weight-light);
}

/* The big "Hold to hum" button */
.hold-btn {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 5.5rem;
  margin-bottom: 1rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
  font: var(--weight-strong) 1.15rem/1.2 var(--font-main);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: background-color .2s ease, transform .15s ease;
}
.hold-btn.is-held {
  background: var(--accent);
  color: var(--on-accent);
  transform: scale(.985);
}

.hum-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hum-status {
  min-height: 1.65em;
  margin-top: 1rem;
  color: var(--muted);
}