/*
  HARP
  ----
  Harp-specific visuals only. Shared shell/buttons come from foundation.css.
*/

.harp-page {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--t2t-stage-bg);
  color: var(--t2t-stage-text-soft);
}

.harp-stage {
  width: 100%;
  height: calc(100dvh - 72px);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.harp-hero {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The app header already provides the title and controls. Keep the harp
   itself visually clean and large enough to fit the whole viewport. */
.harp-topline,
.harp-input-indicator {
  display: none;
}

.harp-board {
  --harp-ratio: 0.51473;
  position: relative;
  width: min(100vw, calc((100dvh - 72px) * var(--harp-ratio)));
  height: min(calc(100dvh - 72px), calc(100vw / var(--harp-ratio)));
  aspect-ratio: var(--harp-ratio);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.harp-art,
.harp-art img,
.harp-strings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.harp-art img {
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.harp-strings {
  overflow: visible;
  pointer-events: none;
}

.harp-string {
  fill: transparent;
  stroke: transparent;
  stroke-width: 28;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
  touch-action: manipulation;
  transition: stroke .12s ease, filter .12s ease;
}

.harp-string:hover {
  stroke: rgba(255, 204, 61, 0.18);
}

.harp-string.is-playing {
  stroke: rgba(47, 230, 201, 0.42);
  filter: drop-shadow(0 0 7px rgba(47, 230, 201, .6));
}

.harp-controls {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 96px));
  overflow-y: auto;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid rgba(183, 169, 222, 0.3);
  border-radius: 24px;
  background: #241542;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
}

.harp-controls[hidden] { display: none; }

.harp-controls__help {
  margin: 0 0 18px;
  line-height: 1.5;
  color: var(--t2t-stage-text-soft);
}

.string-list {
  display: grid;
  gap: 10px;
}

.harp-design-control {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.harp-design-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.harp-design-option {
  min-height: 42px;
}

.harp-design-option.is-selected {
  background: var(--t2t-teal);
  color: #17102a;
}

.string-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(130px, .85fr) minmax(130px, .85fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}

.string-row__name {
  color: #fff;
  font-weight: 900;
}

.string-row__hint {
  margin-top: 2px;
  color: var(--t2t-stage-text-soft);
  font-size: .73rem;
  font-weight: 700;
}

.string-row select,
.mapping-capture {
  width: 100%;
  min-height: 42px;
  border: 2px solid rgba(253,246,255,.22);
  border-radius: 12px;
  padding: 9px 11px;
  background: #1b1030;
  color: #fff;
  font: inherit;
  font-weight: 800;
}

.mapping-capture {
  border-color: var(--t2t-teal);
  background: rgba(47,230,201,.08);
  cursor: pointer;
}

.mapping-capture.is-capturing {
  background: var(--t2t-teal);
  color: #17102a;
}

.controls-error {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,93,115,.14);
  color: #ffb3be;
  font-weight: 800;
}

.text-button {
  margin-top: 16px;
  border: 0;
  background: none;
  color: var(--t2t-teal);
  font-weight: 900;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .string-row { grid-template-columns: 1fr 1fr; }
  .string-row__name { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .harp-stage { height: calc(100dvh - 64px); }
  .harp-board {
    width: min(100vw, calc((100dvh - 64px) * var(--harp-ratio)));
    height: min(calc(100dvh - 64px), calc(100vw / var(--harp-ratio)));
  }
  .harp-string { width: 18px; }
  .harp-string::after {
    bottom: -31px;
    min-width: 34px;
    padding: 2px 6px;
    font-size: .58rem;
  }
  .string-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .harp-string { transition: none; }
}