/* ── 01 NEGATIVE HARMONY ─────────────────────────────────── */
#negative { --accent: var(--h2); }
.wheel-wrap { padding: clamp(18px, 3vw, 36px); display: grid; place-items: center; }
#nhWheel { width: 100%; max-width: 560px; aspect-ratio: 1; overflow: visible; }
#nhWheel .ring { fill: none; stroke: rgba(244,239,230,0.10); stroke-width: 1; }
#nhWheel .axis { stroke: var(--h4); stroke-width: 1.2; stroke-dasharray: 5 6; opacity: 0.8; }
#nhWheel .axis-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; fill: var(--h4); text-transform: uppercase; }
#nhWheel .node { cursor: pointer; }
#nhWheel .node circle { fill: var(--ink); stroke: rgba(244,239,230,0.22); stroke-width: 1; transition: fill 0.35s, stroke 0.35s, r 0.35s; }
#nhWheel .node text { font-family: var(--sans); font-weight: 600; font-size: 15px; fill: var(--paper-mute); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: fill 0.35s; }
#nhWheel .node:hover circle { stroke: var(--paper); }
#nhWheel .node.on circle { fill: var(--h2); stroke: var(--h2); }
#nhWheel .node.on text { fill: var(--ink); }
#nhWheel .node.ghost circle { stroke: var(--h4); stroke-dasharray: 3 3; }
#nhWheel .node.ping circle { animation: ping 0.5s var(--ease); }
@keyframes ping { 40% { stroke-width: 6; } }
#nhWheel .poly { fill: url(#nhFill); stroke: var(--h2); stroke-width: 1.5; stroke-linejoin: round; }
#nhWheel .poly.mirrored { stroke: var(--h4); }
#nhWheel .hub { fill: #0C0C1A; opacity: 0.94; }
#nhWheel .ghost-poly { fill: none; stroke: rgba(244,239,230,0.35); stroke-width: 1; stroke-dasharray: 4 5; stroke-linejoin: round; }
#nhWheel .center-lbl { font-family: var(--display); font-size: 30px; fill: var(--paper); text-anchor: middle; dominant-baseline: central; letter-spacing: -0.02em; }
#nhWheel .center-sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; fill: var(--paper-dim); text-anchor: middle; text-transform: uppercase; }

.prog-rows { padding: 16px 22px 20px; border-top: 1px solid rgba(244,239,230,0.08); display: grid; gap: 10px; }
.prog-row { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; transition: opacity 0.3s; }
.prog-row.dim { opacity: 0.45; }
.prog-row .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); }
.prog-row.mirror .lbl { color: var(--h4); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 12px; border-radius: 100px;
  border: 1px solid rgba(244,239,230,0.12);
  font-family: var(--display); font-size: 17px; letter-spacing: -0.01em;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ease);
}
.chip.now { background: var(--h2); color: var(--ink); border-color: var(--h2); transform: translateY(-2px); }
.prog-row.mirror .chip.now { background: var(--h4); border-color: var(--h4); }
@media (max-width: 560px) {
  .prog-row { grid-template-columns: 1fr; gap: 6px; }
}

/* hl:own */
/* T3: Roman numerals are chord symbols, and CSS capitals would turn the minor ii and vi
   into major II and VI (i18n spec 7.5) */
#nhPresets button[translate="no"] { text-transform: none; }
/* T3 (web spec 3.3, tool first): less air around the wheel and the rows, so a phone
   sees the whole stage under the bar */
@media (max-width: 560px) {
  .prog-row { gap: 4px; }
  .wheel-wrap { padding-top: 2px; padding-bottom: 0; }
  .prog-rows { padding: 8px 18px 12px; gap: 6px; }
  .chip { padding: 4px 11px; }
}