/* Image Prompt DNA: tool-specific styles only. Shared primitives live in ai-tools.css, tools.css and ds.css.
 * Gene colours reuse the page's existing tokens and each gene also has its own underline style and a text label,
 * so colour is never the only signal. */
[hidden] { display: none !important; }

.dna-ann {
  font: 500 15px/1.9 var(--font-ui); color: var(--ink); background: #fff;
  border: 2px solid var(--line-2); padding: 14px 16px; min-height: 140px; max-height: 520px; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.dna-seg { display: inline; padding: 1px 3px 0; border-bottom: 3px solid var(--ink-3); }
.dna-tag {
  display: inline-block; margin-right: 6px; padding: 0 5px; vertical-align: 1px;
  font: 800 11px/1.55 var(--font-ui); letter-spacing: 0.02em; color: var(--ink-2); white-space: nowrap;
  border: 1px solid var(--line-2); background: #fff;
}
.dna-w {
  display: inline-block; margin-left: 6px; padding: 0 5px; vertical-align: 1px;
  font: 800 11px/1.55 var(--font-ui); white-space: nowrap; color: #5f3d00;
  border: 1px solid #f0cf8a; background: var(--warn-soft);
}

.dna-subject  { background: var(--m-soft); border-bottom-style: solid; border-bottom-color: var(--m); }
.dna-action   { background: var(--info-soft); border-bottom-style: dotted; border-bottom-color: var(--info); }
.dna-setting  { background: var(--ok-soft); border-bottom-style: dashed; border-bottom-color: var(--ok); }
.dna-camera   { background: var(--warn-soft); border-bottom-style: double; border-bottom-width: 4px; border-bottom-color: var(--warn); }
.dna-lighting { background: color-mix(in srgb, var(--sand) 45%, #fff); border-bottom-style: solid; border-bottom-color: var(--sand-ink); }
.dna-style    { background: var(--bad-soft); border-bottom-style: dotted; border-bottom-color: var(--bad); }
.dna-colour   { background: var(--page-2); border-bottom-style: dashed; border-bottom-color: var(--ink-2); }
.dna-mood     { background: var(--page-2); border-bottom-style: double; border-bottom-width: 4px; border-bottom-color: var(--m-ink); }
.dna-quality  { background: #fff; border-bottom-style: solid; border-bottom-color: var(--ok); }
.dna-detail   { border-bottom-style: dashed; border-bottom-width: 1px; border-bottom-color: var(--ink-3); }
.dna-negative { background: var(--bad-soft); border-bottom-style: solid; border-bottom-color: var(--bad); }
.dna-params   { background: var(--page-2); border-bottom-style: dotted; border-bottom-color: var(--ink-3); }

.dna-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.dna-legend li { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.dna-legend .dna-seg { padding: 2px 6px 0; }

.dna-table td, .dna-table th { vertical-align: top; }
.dna-table th .dna-seg { border-bottom-width: 2px; }
.dna-gene-cell { white-space: nowrap; font-weight: 800; color: var(--ink); }
.dna-value { overflow-wrap: anywhere; min-width: 12ch; color: var(--ink); }
.dna-lock { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 700; font-size: 13.5px; }
.dna-lock input { width: 22px; height: 22px; margin: 0; }
.dna-check { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 700; color: var(--ink); }
.dna-check input { width: 22px; height: 22px; margin: 0; }
.dna-seed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dna-seed input { flex: 1 1 10ch; min-width: 0; max-width: 24ch; }

.dna-diag { list-style: none; margin: 0; padding: 0; }
.dna-diag li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.dna-diag li:last-child { border-bottom: 0; }

.dna-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dna-item { border: 2px solid var(--line-2); background: #fff; padding: 12px 14px; min-width: 0; }
.dna-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.dna-head strong { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.dna-prompt {
  margin: 0 0 10px; font: 500 14px/1.75 var(--code); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.dna-prompt mark.ait-hl { padding: 1px 3px; }
.dna-prompt .dna-tag { font-size: 10.5px; }

.dna-item .ait-bar { margin-top: 0; }

/* Form controls: the shared rule draws a pale 4px ring, so this tool draws a solid one in the ink colour. */
.dna input:focus-visible, .dna select:focus-visible, .dna textarea:focus-visible {
  outline: 3px solid var(--m-ink); outline-offset: 2px; box-shadow: none;
}

@media (max-width: 480px) {
  .dna-prompt { font-size: 13px; }
  .dna-ann { font-size: 14.5px; }
}