/* v8.7 domain line under the band name (generator card and /bio/ pages). Sits below the Generate button and
   the action row, with reserved height so the result landing does not shove the vote box around. */
.dom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 84px; margin: -4px 0 0; padding: 12px 0 0; border-top: 2px dashed var(--ink); color: var(--ink); }
.dom[hidden] { display: none; }
.dom-line { flex: 0 1 auto; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: #333; overflow-wrap: anywhere; }
.dom-name { color: var(--ink); font-weight: 800; }
.dom .dom-buy { min-height: 40px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.dom-fine { flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 1.4; color: #555; }
.dom[data-state="checking"] .dom-line, .dom[data-state="error"] .dom-line { color: #666; font-weight: 600; }
.dom[data-state="checking"] .dom-name { color: #666; font-weight: 700; }
@media (max-width: 520px) {
  .dom { min-height: 112px; margin-top: 0; padding-top: 10px; gap: 6px 10px; }
  .dom-line { flex: 1 1 180px; font-size: 14px; }
  .dom .dom-buy { min-height: 40px; padding: 0 12px; font-size: 14px; border-width: 2px; }
}
/* /bio/ page: the line lives in the dark page, not the cream card. */
.bio-page .dom { margin: 6px 0 0; padding: 12px 14px; min-height: 0; background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; }