/* Hash Generator — a form: the Text / File switch, the text input card or a
   summary uploader (layout from styles/components/form.css + uploader.css),
   then the Hashes card (one .row per algorithm, built by app.js) and Verify.
   The text pane is styles/components/editor.css and byte counts use
   text-output.css; only the digest rows' typography and the match states are the page's own. */

/* Selectors below that style a form field are written input.<class>: the
   shared form rule in common.css is (0,1,1) and silently beats a bare
   class. */

textarea.hg-textarea {
  min-height: 128px;
}

.hg-computing {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
}
.hg-computing[hidden] { display: none; }
.hg-spinner { width: 14px; height: 14px; border-width: 2px; }

/* While the first digests are computing the card has no rows yet. */
#hg-hash-list:empty { display: none; }

.hg-hash-row { align-items: flex-start; }

.hg-hash-algo {
  flex: 0 0 66px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The digest is the core output — let it wrap fully instead of hiding the
   tail behind a hover-only title (unreachable on touch). */
.hg-hash-value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  word-break: break-all;
  color: var(--text);
  transition: color var(--duration-snap) var(--ease-standard);
}

.hg-hash-copy { flex: 0 0 auto; }

.hg-hash-row.is-match .hg-hash-value { color: var(--success); font-weight: 600; }
.hg-hash-row.is-mismatch .hg-hash-value { color: var(--text-quaternary); }
.hg-hash-row.is-match .hg-hash-algo { color: var(--success); }

input.hg-expected {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* The verdict caption: icon + text on one line, a touch heavier than a note. */
.hg-verify__result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 500;
}

/* Text-mode failure — said under the results so the page isn't left empty. */
.hg-error {
  margin: 0;
  padding: var(--row-pad-y) var(--inset);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}
.hg-error:empty { display: none; }

@media (max-width: 620px) {
  .hg-hash-value { font-size: 11px; }
  .hg-hash-algo  { flex-basis: 52px; }
}