/* ===========================================================================
   HARMONY — the Progressions workspace.
   Loaded after cipher.css, whose tokens and controls it uses.

   The chart and the line share one bar grid, drawn one above the other,
   because their relationship is the feature. Chord tones read in the system's
   green; everything happening between them reads neutral, so a glance
   separates the structure from the movement.
   =========================================================================== */

/* ------------------------------------------------------------- controls */

.hp-controls {
  display: grid;
  grid-template-columns: minmax(90px, 0.6fr) minmax(160px, 1.6fr) auto;
  gap: 0 clamp(14px, 2.4vw, 26px);
  align-items: end;
  padding-bottom: 20px;
}
.field-wide { grid-column: span 2; }
.hp-go { padding-bottom: 14px; }

.hp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0 clamp(12px, 2vw, 22px);
  align-items: end;
}
.hp-check { align-self: end; margin-bottom: 14px; }
.hp-range { display: flex; gap: 18px; flex-wrap: wrap; }
.hp-range .field { max-width: 8rem; }

/* --------------------------------------------------------------- blocks */

/* One primary action, and the controls that belong to it, on one line. The
   Play button carries the accent; the rest read as what they are. */
.hp-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 6px;
}
.hp-actions .field-inline { margin: 0; }
.hp-actions .field-inline select { min-width: 8.5rem; }

/* The progression's own hint line, under the editor. */
.hp-hint { font-size: 10.5px; color: var(--fg-3); letter-spacing: .06em; }

.hp-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
}

.hp-block {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
  cursor: grab;
  transition: border-color .12s var(--ease);
}
.hp-block:hover { border-color: var(--line); }
.hp-block.is-selected { border-color: var(--green-2); }
.hp-block.is-dragging { opacity: .4; cursor: grabbing; }
/* The drop target gets a rule, not just a tint, so the cue survives at any
   contrast setting. */
.hp-block.is-over { border-color: var(--green); box-shadow: -2px 0 0 var(--green); }

.hp-block-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 76px;
  padding: 9px 12px 7px;
  background: none;
  border: 0;
  cursor: inherit;
  text-align: left;
}
.hp-block-numeral {
  font-family: var(--f-mono);
  font-size: 15px;
  color: var(--fg);
  letter-spacing: .02em;
}
.hp-block.is-selected .hp-block-numeral { color: var(--green); }
.hp-block-bars { font-size: 9.5px; letter-spacing: .12em; color: var(--fg-3); text-transform: uppercase; }

.hp-block-tools {
  display: flex;
  border-top: 1px solid var(--line-hair);
}
.hp-tool {
  flex: 1;
  min-width: 22px;
  padding: 4px 0 5px;
  background: none;
  border: 0;
  border-right: 1px solid var(--line-hair);
  color: var(--fg-3);
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.hp-tool:last-child { border-right: 0; }
.hp-tool:hover { color: var(--green); background: rgba(86, 217, 138, .08); }

.hp-edit {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.hp-edit .field { flex: 1 1 15rem; }
.hp-edit .act { margin-bottom: 14px; }

/* ---------------------------------------------------------------- chart */

/* Bars are the grid unit, so a two-bar chord is physically twice as wide and
   a twelve-bar blues lays itself out without a special case. */
.hp-chart { margin: 4px 0 0; }

.hp-grid-chart {
  display: grid;
  grid-auto-columns: minmax(84px, 1fr);
  grid-auto-flow: column;
  gap: 1px;
  overflow-x: auto;
  padding: 12px 0 4px;
  background: var(--line-hair);
  border: 1px solid var(--line-hair);
}

.hp-cell {
  grid-column: span var(--span, 1);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 9px 11px 11px;
  background: var(--bg);
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.hp-cell:hover { background: var(--bg-1); }
.hp-cell.is-selected { background: var(--bg-1); border-left-color: var(--green); }

.hp-cell-numeral {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--fg-3);
  text-transform: none;
}
.hp-cell.is-selected .hp-cell-numeral { color: var(--green-2); }
.hp-cell-symbol {
  font-family: var(--f-mono);
  font-size: 15px;
  color: var(--fg);
}
.hp-cell-notes { font-family: var(--f-mono); font-size: 11px; color: var(--green-2); }
.hp-note-name + .hp-note-name { margin-left: 5px; }
.hp-dot::after { content: "·"; color: var(--fg-3); margin: 0 3px; }
.hp-cell-words {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--flat);
}
.hp-cell-bars { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }

/* ----------------------------------------------------------------- line */

.hp-line-row {
  display: grid;
  grid-auto-columns: minmax(84px, 1fr);
  grid-auto-flow: column;
  gap: 1px;
  overflow-x: auto;
  padding: 10px 0 6px;
}

.hp-line-group {
  grid-column: span var(--span, 1);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 10px;
  border-right: 1px solid var(--line-hair);
  min-width: 0;
}
.hp-line-group:last-child { border-right: 0; }

.hp-line-chord {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--fg-3);
}

.hp-line-notes { display: flex; flex-wrap: wrap; gap: 4px; }

.hp-ln {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 30px;
  padding: 4px 5px 3px;
  background: none;
  border: 1px solid var(--line-hair);
  cursor: pointer;
}
.hp-ln:hover { border-color: var(--line); }
.hp-ln-name { font-family: var(--f-mono); font-size: 12px; color: var(--fg-2); }
.hp-ln-role { font-family: var(--f-mono); font-size: 8.5px; color: var(--fg-3); }

/* A chord tone reads green and carries a solid top rule; everything between
   the chord tones stays neutral and dotted. Two signals, not one colour. */
.hp-ln.is-tone { border-top: 2px solid var(--green-2); }
.hp-ln.is-tone .hp-ln-name { color: var(--green); }
.hp-ln.is-tone .hp-ln-role { color: var(--green-2); }
.hp-ln.is-colour { border-top: 2px dotted var(--line); }

/* ---------------------------------------------------------------- words */

.hp-wordmap { border-top: 1px solid var(--line-hair); }
.hp-wordmap-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-hair);
}
.hp-wordmap-chord {
  flex: none;
  min-width: 12ch;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--fg-3);
}
.hp-wordmap-word {
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg);
  margin-right: 8px;
}
.hp-wordmap-patricia { font-family: var(--f-mono); font-size: 11px; color: var(--green-2); }

/* ---------------------------------------------------------- instruments */

.hp-inst-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
}
.hp-inst-numeral { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; color: var(--fg-3); }
.hp-inst-symbol { font-family: var(--f-mono); font-size: 16px; color: var(--green); }

.hp-save { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.hp-save .field { flex: 1 1 14rem; }
.hp-save .act { margin-bottom: 14px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .hp-controls { grid-template-columns: minmax(80px, .8fr) minmax(140px, 1.6fr) auto; }
  .hp-actions { gap: 8px; }

  /* The block's own controls are the fiddliest things on this screen, so they
     get the most room: the pick target and each tool clear the 44px line. */
  .hp-block-pick { min-height: 48px; }
  .hp-tool { min-height: 44px; min-width: 36px; font-size: 13px; }
  .hp-ln { min-width: 42px; min-height: 44px; }
  .hp-line-ctl .act, .hp-transport .act { min-height: 44px; }

  /* The chart scrolls rather than crushing twelve bars into a phone. */
  .hp-grid-chart, .hp-line-row { grid-auto-columns: minmax(96px, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-block, .hp-cell { transition: none; }
}

/* A button only goes full width when there is genuinely no room beside it.
   Stretching the primary action across a 700px column reads as shouting, not
   as hierarchy — the accent is what marks it, not the size. */
@media (max-width: 620px) {
  .hp-controls { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: span 2; }
  .hp-go { grid-column: span 2; padding-bottom: 0; padding-top: 12px; }
  .hp-go .act { width: 100%; }
  .hp-actions .act-go { flex: 1 1 100%; }
  .hp-actions .field-inline { flex: 1 1 100%; }
  .hp-actions .field-inline select { width: 100%; }
}

/* What the selected voicing family is, and when it could not be applied. */
.voicing-note { margin: 4px 0 12px; color: var(--fg-3); max-width: 60ch; }