/* OpenWorldEngineer: Artifacts › Draft heads (artifacts-draft-head.html, assets/art/draft-head.js). Builds on styles.css
   (tokens, .card, .select, .btn, .note, .tip) and adds only dh- classes.
   Colours: accepted drafts wear an indigo (accent) wash, the target's own tokens a grey one; in the acceptance chart the
   picked model is the accent line, the comparison model the ink line and the rest recede in grey (an emphasis chart,
   so no categorical palette); models are named in the legend and lane headers. Indigo accent vs ink-2: OKLab
   ΔE 30.3 light / 23.3 dark, both ≥ 3:1 on the card (6.1:1 / 6.3:1); the CVD figures were last run for the old orange
   accent (ink is the neutral of an emphasis pair, so the validator's band and chroma checks fail by design). */

.dh {
  container-type: inline-size;
  --dh-acc: color-mix(in srgb, var(--accent) 24%, transparent);
  --dh-own: color-mix(in srgb, var(--muted) 22%, transparent);
  --dh-b: var(--ink-2);
  --dh-reply-h: 300px;
  display: grid; gap: 16px; min-width: 0; color: var(--ink); font-size: var(--fs-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dh { --dh-acc: color-mix(in srgb, var(--accent) 34%, transparent); --dh-own: color-mix(in srgb, var(--muted) 30%, transparent); }
}
:root[data-theme="dark"] .dh { --dh-acc: color-mix(in srgb, var(--accent) 34%, transparent); --dh-own: color-mix(in srgb, var(--muted) 30%, transparent); }
.dh-head p { max-width: 76ch; }
.dh-loading { padding: 24px 0; }

/* playback card: pickers, the prompt, transport, key, lanes */
.dh-play-card { display: grid; gap: 14px; padding: 16px 18px 18px; min-width: 0; }
.dh-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.dh-field { display: grid; gap: 4px; min-width: 0; }
.dh-field-k { font-size: 0.75rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.dh-field-p { flex: 1 1 320px; }
.dh-field .select { max-width: 100%; text-overflow: ellipsis; }
.dh-field-p .select { width: 100%; }

.dh-prompt { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--code-bg); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); min-width: 0; }
.dh-prompt-meta { color: var(--muted); }
.dh-prompt-meta b { color: var(--ink-2); font-weight: 600; }
.dh-prompt-x { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.dh-prompt-req { color: var(--ink); font-weight: 560; overflow-wrap: anywhere; }
.dh-prompt-k { font-size: 0.6875rem; font-weight: 640; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }

.dh-transport { display: flex; align-items: center; gap: 8px 10px; min-width: 0; flex-wrap: wrap; }
.dh-play { min-width: 104px; gap: 6px; }
.dh-ic { width: 14px; height: 14px; flex: none; }
.dh-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--rule-strong); background: var(--sheet); color: var(--ink-2); cursor: pointer;
}
.dh-icon:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.dh-icon:disabled { opacity: 0.45; cursor: default; }
.dh-range { flex: 1 1 200px; min-width: 120px; accent-color: var(--accent); height: 28px; margin: 0; }
.dh-clock { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 9.5ch; text-align: right; }

.dh-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8125rem; color: var(--muted); }
.dh-key-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dh-sw { display: inline-block; width: 14px; height: 14px; border-radius: 0; }
.dh-sw-a { background: var(--dh-acc); }
.dh-sw-t { background: var(--dh-own); }
.dh-sw-r { width: auto; height: auto; padding: 0 4px; font-style: normal; font-family: var(--font-mono); font-size: 0.75rem; line-height: 16px; border: 1px solid var(--rule-strong); text-decoration: line-through; color: var(--muted); }
.dh-sw-s { width: 2px; height: 14px; border-radius: 0; background: var(--rule-strong); }

/* lanes: one per model, side by side when comparing on a wide card */
.dh-lanes { display: grid; gap: 14px; min-width: 0; }
.dh-lanes.is-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dh-lanes .dh-diverge { grid-column: 1 / -1; margin-top: -4px; }
.dh-lane { display: grid; gap: 8px; align-content: start; min-width: 0; }
.dh-lane-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.dh-lane-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.dh-lane-name b { font-family: var(--font-mono); font-size: 1rem; font-weight: 660; letter-spacing: -0.03em; }
.dh-lane-link { font-size: var(--fs-small); color: var(--muted); }
.dh-cfg { flex-basis: 100%; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }
.dh-line { display: inline-block; width: 16px; height: 0; border-top: 3px solid; border-radius: 0; align-self: center; }
.dh-line-a { border-color: var(--accent); }
.dh-line-b { border-color: var(--dh-b); }
.dh-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; font-size: 0.875rem; color: var(--muted); }
.dh-stats b { font-family: var(--font-mono); font-weight: 660; color: var(--ink); font-variant-numeric: tabular-nums; }
.dh-done { padding: 0 8px; border-radius: 0; background: var(--hover); border: 1px solid var(--rule); font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }

/* the current call: seven drafts, then the model's own token */
.dh-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 30px; font-size: 0.8125rem; color: var(--muted); }
.dh-strip-k { font-weight: 640; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 6.5ch; }
.dh-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.dh-chip {
  display: inline-block; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: pre; padding: 1px 5px;
  border-radius: 0; border: 1px solid transparent; font-family: var(--font-mono); font-size: 0.75rem; line-height: 18px; color: var(--ink);
}
.dh-chip-acc { background: var(--dh-acc); }
.dh-chip-rej { border-color: var(--rule-strong); color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dh-chip-skip { color: var(--muted); opacity: 0.5; border-color: var(--rule); }
.dh-chip-tgt { background: var(--dh-own); font-weight: 600; }
.dh-arrow { color: var(--muted); padding: 0 1px; }
.dh-strip-note { white-space: nowrap; }

/* the reply: one span per target call, tokens tinted by who wrote them */
.dh-reply {
  height: var(--dh-reply-h); overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--sheet);
  font-size: 0.9375rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink);
}
.dh-reply:focus-visible { outline-offset: -2px; }
.dh-s { border-left: 1.5px solid var(--rule-strong); }
.dh-s0 { border-left: 0; }
.dh-s.is-cur { outline: 1.5px solid var(--ink-2); outline-offset: 1px; border-radius: 0; }
.dh-tok { padding: 2px 0; }
.dh-a { background: var(--dh-acc); }
.dh-t, .dh-p { background: var(--dh-own); }
.dh-end { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 0; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 18px; color: var(--muted); }

/* charts */
.dh-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; min-width: 0; }
.dh-chart { display: grid; gap: 8px; align-content: start; padding: 16px 18px; min-width: 0; }
.dh-h { font-size: 1.0625rem; font-weight: 660; }
.dh-acc-plot { min-width: 0; }
.dh-acc-svg { display: block; overflow: visible; }
.dh-grid { stroke: var(--rule); stroke-width: 1; }
.dh-ax { stroke: var(--rule-strong); stroke-width: 1; }
.dh-tick { fill: var(--muted); font-size: 11px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dh-axis-t { font-family: var(--font-sans); font-size: 12px; }
.dh-ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dh-ln-o { stroke: var(--line-other); stroke-width: 1.5; }
.dh-ln-a { stroke: var(--accent); }
.dh-ln-b { stroke: var(--dh-b); }
.dh-dot { stroke: var(--sheet); stroke-width: 2; }
.dh-dot-a { fill: var(--accent); }
.dh-dot-b { fill: var(--dh-b); }
.dh-cross { stroke: var(--rule-strong); stroke-width: 1; pointer-events: none; }
.dh-hit { fill: transparent; cursor: crosshair; outline: none; }
.dh-hit:focus-visible { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.dh-lk { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--line-other); border-radius: 0; flex: none; }
.dh-lk-a { border-top: 3px solid var(--accent); }
.dh-lk-b { border-top: 3px solid var(--dh-b); }
.dh-lk-o { border-top-color: var(--line-on); }
.tip .tk i.dh-tk { width: 12px; height: 0; border-radius: 0; border-top: 2px solid var(--tip-muted); }
.tip .tk i.dh-tk-a { border-top: 3px solid var(--accent); }
.tip .tk i.dh-tk-b { border-top: 3px solid var(--tip-fg); }

.dh-tau-wrap { overflow-x: auto; min-width: 0; }
.dh-tau { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.dh-tau th, .dh-tau td { padding: 7px 6px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dh-tau th:first-child { padding-left: 2px; }
.dh-tau thead th { font-size: var(--fs-small); font-weight: 560; color: var(--muted); border-bottom-color: var(--rule-strong); text-align: left; }
.dh-tau tbody th { text-align: left; font-weight: 520; color: var(--ink-2); }
.dh-tau tbody th .dh-lk { margin-right: 8px; vertical-align: middle; }
.dh-tau .r { text-align: right; font-family: var(--font-mono); font-size: 0.8125rem; }
.dh-tau thead .r { font-family: var(--font-sans); }
.dh-tau .dh-sep { border-right: 1px solid var(--rule); }
.dh-tau td.is-top { font-weight: 700; color: var(--ink); }
.dh-tau tr.dh-row-a th, .dh-tau tr.dh-row-b th { color: var(--ink); font-weight: 640; }
.dh-tau tr.dh-row-a, .dh-tau tr.dh-row-b { background: var(--hover); }

@container (max-width: 760px) {
  .dh-lanes.is-two { grid-template-columns: minmax(0, 1fr); }
  .dh { --dh-reply-h: 240px; }
}
@media (max-width: 900px) {
  .dh-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dh-play-card { padding: 14px; }
  .dh-chart { padding: 14px; }
  .dh-controls > .dh-field { flex: 1 1 140px; }
  .dh-controls > .dh-field .select { width: 100%; }
  .dh-controls > .dh-field-p { flex-basis: 100%; }
  .dh-range { flex-basis: 100%; order: 5; }
  .dh-clock { margin-left: auto; }
  .dh-strip-note { white-space: normal; }
}
.dh-details { margin-top: 6px; font-size: var(--fs-small); color: var(--muted); }
.dh-details summary { cursor: pointer; width: max-content; font-weight: 560; }
.dh-details summary:hover { color: var(--ink); }
.dh-details[open] summary { margin-bottom: 6px; }
.dh-s:not(.dh-s0) { cursor: pointer; }
.dh-details-n { margin-top: 6px; font-size: 0.75rem; }

/* the set switch (hidden test prompts | public dev prompts) and the head's role in the hidden view */
.dh-set { justify-self: start; max-width: 100%; }
.dh-set button { white-space: nowrap; }
.dh.is-loading .dh-play-card, .dh.is-loading .dh-charts { opacity: 0.55; transition: opacity 120ms; }
/* the hidden table has twelve heads with a role tag: give it the wider column */
@media (min-width: 901px) {
  .dh[data-set="hidden"] .dh-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
}
.dh-role { margin-left: 6px; padding: 0 6px; border-radius: 0; border: 1px solid var(--rule); font-size: 0.6875rem; font-weight: 560; color: var(--muted); vertical-align: 1px; }
@media (max-width: 560px) {
  .dh-set { display: flex; justify-self: stretch; }
  .dh-set button { flex: 1; padding-inline: 8px; }
}

/* a task page's frame (html.embed, see app.js initEmbed): one head, so its τ values run down one column */
@media (min-width: 901px) {
  .embed .dh[data-set="hidden"] .dh-charts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.embed .dh-tau-one tr.is-sep > * { border-bottom-color: var(--rule-strong); }