/* Hive audio receipt widget.

   Same rule as the new primitive block: every colour reads from the host page
   first and only falls back to a Hive default when the page does not set that
   variable, so this takes on the page palette instead of importing one. All
   class names are namespaced har so they cannot collide.

   Blue is product and action. Green is a pass verdict. No gold anywhere.
*/

.har{
  --har-bg: var(--hull, var(--panel, var(--card, #0a1224)));
  --har-bg2: var(--hull-2, var(--void, var(--bg, #071020)));
  --har-line: var(--line, var(--border, #1b3a58));
  --har-blue: var(--blue, var(--accent, #2F80FF));
  --har-blue-soft: var(--blue-soft, var(--accent-soft, #7ecfff));
  --har-green: var(--green, var(--ok, #34D399));
  --har-hot: var(--hot, var(--bad, #ff8da6));
  --har-text: var(--star, var(--fg, var(--text, #ffffff)));
  --har-muted: var(--muted, #b6c7dc);
  --har-dim: var(--dim, #7d8ea3);
  --har-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  border:1px solid var(--har-line);
  border-radius:16px;
  background:var(--har-bg);
  color:var(--har-text);
  padding:26px;
  text-align:left;
}
.har *,.har *::before,.har *::after{text-align:inherit;box-sizing:border-box}

.har__k{
  display:block;font-family:var(--har-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--har-blue-soft);margin:0 0 12px;
}
.har__h{font-size:clamp(20px,2.4vw,27px);line-height:1.18;margin:0 0 12px;font-weight:600}
.har__lede{font-size:15.5px;line-height:1.62;color:var(--har-muted);max-width:72ch;margin:0 0 22px}
.har__small{font-size:13px;line-height:1.6;color:var(--har-dim);margin:6px 0 12px}
.har__note{font-size:12.5px;line-height:1.55;color:var(--har-dim);max-width:56ch}

.har__drop{
  border:1px dashed var(--har-line);border-radius:13px;background:var(--har-bg2);
  padding:30px 20px;display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  cursor:pointer;transition:border-color .16s ease,background .16s ease;
}
.har__drop:hover,.har__drop:focus-visible,.har__drop.is-over{
  border-color:var(--har-blue);background:color-mix(in srgb,var(--har-blue) 8%,var(--har-bg2));
  outline:none;
}
.har__drop b{font-size:16px;font-weight:600}
.har__drop span{font-size:12.5px;color:var(--har-dim);font-family:var(--har-mono)}
.har__file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.har__row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:16px 0 0}

.har-b{
  font:inherit;font-size:14px;font-weight:600;line-height:1;
  padding:11px 17px;border-radius:9px;cursor:pointer;
  border:1px solid var(--har-blue);background:var(--har-blue);color:#03101f;
  text-decoration:none;display:inline-block;
}
.har-b:hover{filter:brightness(1.08)}
.har-b:disabled{opacity:.45;cursor:default}
.har-b.ghost{background:transparent;color:var(--har-blue-soft);border-color:var(--har-line)}
.har-b.ghost:hover{border-color:var(--har-blue)}
.har-b.is-live{border-color:var(--har-hot);background:var(--har-hot)}

.har__log{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.har__step{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  padding:10px 13px;border-radius:9px;border:1px solid var(--har-line);
  background:var(--har-bg2);font-size:13.5px;line-height:1.5;
}
.har__step-t{font-weight:600}
.har__step-d{
  font-family:var(--har-mono);font-size:11.5px;color:var(--har-dim);
  word-break:break-all;max-width:100%;
}
.har__step::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--har-dim);margin-right:2px;
}
.har__step.is-run::before{background:var(--har-blue);animation:har-pulse 1.1s ease-in-out infinite}
.har__step.is-ok::before{background:var(--har-green)}
.har__step.is-bad::before{background:var(--har-hot)}
@keyframes har-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.har__step.is-run::before{animation:none}}

.har__out{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.har-card{
  border:1px solid var(--har-line);border-radius:13px;background:var(--har-bg2);padding:20px;
}
.har-card h4{font-size:15.5px;margin:0 0 8px;font-weight:600}
.har-pre{
  font-family:var(--har-mono);font-size:11.5px;line-height:1.62;color:var(--har-muted);
  background:color-mix(in srgb,var(--hvt-bg) 22%,var(--har-bg));border:1px solid var(--har-line);
  border-radius:9px;padding:13px;overflow:auto;max-height:340px;margin:0 0 12px;
  white-space:pre;
}
.har-repro{margin-top:6px}
.har-repro b{display:block;font-size:13px;margin:0 0 8px}

.har-bad{
  border:1px solid var(--har-hot);border-radius:11px;padding:16px;
  background:color-mix(in srgb,var(--har-hot) 9%,var(--har-bg2));
}
.har-bad b{display:block;margin:0 0 6px;font-size:14.5px}
.har-bad p{margin:0;font-size:13.5px;line-height:1.6;color:var(--har-muted)}

.har-verdict{
  display:flex;flex-direction:column;gap:5px;padding:14px 16px;border-radius:10px;
  border:1px solid var(--har-line);margin:0 0 14px;
}
.har-verdict b{font-size:14.5px;font-family:var(--har-mono);letter-spacing:.04em}
.har-verdict span{font-size:13px;line-height:1.6;color:var(--har-muted)}
.har-verdict.is-ok{border-color:var(--har-green);background:color-mix(in srgb,var(--har-green) 9%,var(--har-bg2))}
.har-verdict.is-ok b{color:var(--har-green)}
.har-verdict.is-bad{border-color:var(--har-hot);background:color-mix(in srgb,var(--har-hot) 9%,var(--har-bg2))}
.har-verdict.is-bad b{color:var(--har-hot)}

.har-gates{width:100%;border-collapse:collapse;font-family:var(--har-mono);font-size:11.5px}
.har-gates td{border-top:1px solid var(--har-line);padding:7px 9px;vertical-align:top}
.har-gates__g{white-space:nowrap;color:var(--har-muted)}
.har-gates__r{white-space:nowrap;width:1%}
.har-gates tr.is-ok .har-gates__r{color:var(--har-green)}
.har-gates tr.is-bad .har-gates__r{color:var(--har-hot)}
.har-gates__w{color:var(--har-dim);line-height:1.55}

.har-seg{border-top:1px solid var(--har-line);margin-top:18px;padding-top:18px}
.har-seg h4{font-size:15px;margin:0 0 8px}
.har-seg__row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:0 0 14px}
.har-seg__row label{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--har-muted);
}
.har-seg__row input{
  font:inherit;font-family:var(--har-mono);font-size:13px;width:80px;
  padding:8px 10px;border-radius:8px;border:1px solid var(--har-line);
  background:var(--har-bg);color:var(--har-text);
}
.har-seg__out{margin:0 0 12px}
.har-seg__out:empty{display:none}

@media(max-width:620px){
  .har{padding:20px}
  .har-gates{font-size:10.5px}
  .har-gates__g{white-space:normal}
}