/* ── Hash Generator — dark matte-instrument, amber-gold accent ──
   Reverted from the paper-tech light theme: a cream tool island floating in
   the dark site chrome read as detached and forced shared button-secondary
   contrast issues. Dark matte palette sits flush with the chrome and lets
   amber + dashed borders carry all of the identity. */

.hash-generator-page {
  --hg-frame-width: 1160px;
  --hg-amber: #f5a623;
  --hg-amber-hi: #fbc24a;
  --hg-amber-soft: rgba(245, 166, 35, 0.16);
  --hg-amber-glow: rgba(245, 166, 35, 0.45);
  --hg-bench-bg: linear-gradient(180deg, rgba(28, 38, 60, 0.72) 0%, rgba(18, 26, 44, 0.78) 100%);
  --hg-panel-bg: linear-gradient(180deg, rgba(20, 28, 48, 0.96), rgba(12, 18, 34, 0.98));
  --hg-panel-input-bg: linear-gradient(180deg, rgba(24, 34, 56, 0.96), rgba(14, 22, 40, 0.98));
  --hg-border: rgba(140, 165, 210, 0.22);
  --hg-border-dash: dashed 1px rgba(180, 145, 70, 0.32);
  --hg-ink: rgba(232, 238, 248, 0.96);
  --hg-ink-soft: rgba(206, 219, 239, 0.84);
  --hg-ink-muted: rgba(176, 192, 220, 0.62);
  --hg-tape-bg: rgba(10, 17, 32, 0.55);
  --hg-tape-border: rgba(180, 145, 70, 0.32);
  --hg-row-hover: rgba(245, 166, 35, 0.10);
  --hg-textarea-bg: rgba(8, 14, 28, 0.85);
  --hg-textarea-border: rgba(245, 166, 35, 0.35);
}

.hash-generator-page .tool-frame {
  width: 100%;
  max-width: var(--hg-frame-width);
  margin-inline: auto;
  padding-inline: clamp(0.35rem, 1vw, 0.7rem);
}

.hash-generator-page .tool-header-block {
  max-width: 46ch;
  padding-inline: 0.2rem;
}

.hash-generator-page .page-title {
  max-width: none;
  font-size: clamp(2.75rem, 3.7vw, 3.2rem);
  line-height: 0.97;
}

.hash-generator-page .page-subtitle {
  max-width: 42ch;
  font-size: clamp(1.04rem, 1.4vw, 1.12rem);
}

@media (min-width: 721px) {
  .hash-generator-page .page-subtitle {
    font-size: 1.08rem;
  }
}

/* ── Bench container ── */
.hash-bench {
  display: grid;
  gap: 0.7rem;
  padding: clamp(0.7rem, 1.1vw, 0.9rem);
  border-radius: 1.75rem;
  border: var(--hg-border-dash);
  background: var(--hg-bench-bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 24px 48px -28px rgba(0, 0, 0, 0.55),
              0 2px 6px rgba(0, 0, 0, 0.25);
}

.hash-bench__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: stretch;
}

/* ── Panel ── */
.hash-panel {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 0.62rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 1.4rem;
  border: var(--hg-border-dash);
  background: var(--hg-panel-bg);
}

.hash-panel__header {
  display: grid;
  gap: 0.2rem;
}

.hash-panel__eyebrow {
  margin: 0;
  color: var(--hg-amber);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hash-panel__hint {
  margin: 0;
  color: var(--hg-ink-muted);
  font-size: 0.88rem;
  line-height: 1.22;
}

/* ── Input textarea ── */
.hash-textarea {
  width: 100%;
  min-height: 11rem;
  resize: vertical;
  padding: 0.82rem 0.9rem;
  border: 1px solid var(--hg-textarea-border);
  border-radius: 1.1rem;
  background: var(--hg-textarea-bg);
  color: var(--hg-ink);
  font: 500 0.96rem/1.5 Consolas, "SFMono-Regular", Menlo, Monaco, monospace;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.hash-textarea::placeholder {
  color: rgba(150, 170, 200, 0.42);
}

.hash-textarea:focus-visible {
  outline: 2px solid var(--hg-amber);
  outline-offset: 1px;
  border-color: var(--hg-amber);
}

/* ── Action buttons row ── */
.hash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.52rem;
}

.hash-actions .button {
  min-height: 2.62rem;
  font-size: 0.9rem;
}

/* ── Status toast ── */
.hash-feedback-slot {
  min-height: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--hg-amber-hi);
}

.hash-feedback-slot[data-tone="error"] {
  color: #ff8585;
}

.hash-feedback-slot[data-tone="warn"] {
  color: #fbc24a;
}

/* ── Secure context guard ── */
.hash-secure-guard {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 120, 120, 0.4);
  border-radius: 0.85rem;
  background: rgba(80, 14, 14, 0.55);
  color: #ffd0d0;
  font-size: 0.9rem;
}

.hash-secure-guard p { margin: 0; }

/* ── Results panel: four tape-strip rows ── */
.hash-results {
  display: grid;
  gap: 0.48rem;
  align-content: start;
}

/* Each hash row is a labeled tape-strip scanner lane */
.hash-row {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: 0;
  padding: 0.46rem 0.52rem 0.46rem 0;
  border-radius: 0.9rem;
  border: dashed 1px var(--hg-tape-border);
  background: var(--hg-tape-bg);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.hash-row:hover {
  background: var(--hg-row-hover);
  border-color: var(--hg-amber-glow);
}

/* Amber flash animation when hash updates */
@keyframes hashRowFlash {
  0%   { background: rgba(245, 166, 35, 0.30); }
  100% { background: var(--hg-tape-bg); }
}

.hash-row--flash {
  animation: hashRowFlash 200ms ease-out forwards;
}

/* Algorithm label chip — fixed-width specimen-lane marker.
   Stacks algo name + status hint vertically so each row carries its own
   identity (Legacy / Recommended / 512-bit) instead of four template-listed rows. */
.hash-row__label {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.05rem;
  height: 100%;
  min-width: 5rem;
  padding: 0.32rem 0.6rem 0.32rem 0.7rem;
  border-right: dashed 1px var(--hg-tape-border);
  white-space: nowrap;
  user-select: none;
  font-family: "SFMono-Regular", Consolas, Menlo, Monaco, monospace;
}

.hash-row__algo {
  color: var(--hg-amber);
  font: 700 0.78rem/1 inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hash-row__hint {
  color: var(--hg-ink-muted);
  font: 500 0.58rem/1.15 inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Three-tier hierarchy (round-7 designer redo) ──────────────────────
   The previous 4-row equal-weight stack hid the spec's actual opinion
   ("use SHA-256 unless you have a reason not to"). The new structure:

     PRIMARY    SHA-256 — largest object on screen, dedicated plate
     SECONDARY  SHA-512 — normal weight, "if you need longer"
     TERTIARY   MD5 + SHA-1 — collapsed behind a <details> disclosure

   Visual hierarchy carries the argument, not a small badge.
   The data-status attributes stay (screen-reader aria) but the visual
   weight comes from the *-primary / *-secondary / *-tertiary classes. */

.hash-row--primary {
  grid-template-columns: 7.4rem minmax(0, 1fr) 2.6rem;
  padding: 0.92rem 0.62rem 0.92rem 0;
  border-color: rgba(245, 166, 35, 0.7);
  background: linear-gradient(180deg, rgba(245, 166, 35, 0.07), rgba(245, 166, 35, 0.03));
  box-shadow: inset 4px 0 0 var(--hg-amber),
              0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 8px 22px -16px rgba(245, 166, 35, 0.55);
}
.hash-row--primary .hash-row__label {
  min-width: 7rem;
  border-right-color: rgba(245, 166, 35, 0.45);
}
.hash-row--primary .hash-row__algo {
  color: var(--hg-amber-hi);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.hash-row--primary .hash-row__hint {
  color: var(--hg-amber-hi);
  font-weight: 700;
  font-size: 0.62rem;
}
.hash-row--primary .hash-row__tape {
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.42rem 0.72rem;
  color: rgba(248, 249, 252, 0.98);
}

.hash-row--secondary .hash-row__algo {
  color: rgba(232, 238, 248, 0.82);
}

/* ── Legacy disclosure (MD5 + SHA-1) ─────────────────────────────────── */
.hash-legacy {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.18rem;
}

.hash-legacy__summary {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.72rem;
  border-radius: 0.7rem;
  border: dashed 1px rgba(140, 165, 210, 0.18);
  background: transparent;
  color: var(--hg-ink-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hash-legacy__summary::-webkit-details-marker { display: none; }
.hash-legacy__summary::marker { content: ""; }
.hash-legacy__summary:hover {
  color: rgba(232, 238, 248, 0.85);
  border-color: rgba(140, 165, 210, 0.32);
}
.hash-legacy__summary:focus-visible {
  outline: 2px solid var(--hg-amber);
  outline-offset: 2px;
}

.hash-legacy__caret {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--hg-ink-muted);
  transition: transform 0.18s ease, color 0.15s;
  align-self: center;
}
.hash-legacy__summary:hover .hash-legacy__caret { color: var(--hg-amber); }
.hash-legacy[open] .hash-legacy__caret {
  transform: rotate(90deg);
}

.hash-legacy__label {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hash-legacy__note {
  font-size: 0.74rem;
  color: rgba(176, 192, 220, 0.45);
  letter-spacing: 0.005em;
}

/* Tertiary rows: compact, dimmed, indented so they read as nested under
   the summary. They're identical hash-rows under the hood (same JS, same
   IDs, copy + click-to-copy still work the same way). */
.hash-row--tertiary {
  grid-template-columns: 4.8rem minmax(0, 1fr) 2rem;
  padding: 0.32rem 0.46rem 0.32rem 0;
  margin-left: 0.85rem;
  border-color: rgba(140, 165, 210, 0.14);
  background: rgba(10, 17, 32, 0.32);
  opacity: 0.78;
}
.hash-row--tertiary .hash-row__label {
  min-width: 4.4rem;
  padding: 0.22rem 0.5rem 0.22rem 0.6rem;
}
.hash-row--tertiary .hash-row__algo {
  color: rgba(176, 192, 220, 0.62);
  font-size: 0.7rem;
}
.hash-row--tertiary .hash-row__tape {
  font-size: 0.74rem;
  padding: 0.26rem 0.5rem;
  color: rgba(206, 219, 239, 0.7);
}
.hash-row--tertiary .hash-row__copy {
  width: 1.8rem;
  height: 1.8rem;
}
.hash-row--tertiary .hash-row__copy svg { width: 13px; height: 13px; }

/* Hex tape strip — horizontally scrollable, never clipped */
.hash-row__tape {
  overflow-x: auto; /* SHA-512 is 128 chars — must scroll, not clip */
  overflow-y: hidden;
  white-space: nowrap;
  padding: 0.35rem 0.62rem;
  color: var(--hg-ink);
  font: 500 0.82rem/1.4 Consolas, "SFMono-Regular", Menlo, Monaco, monospace;
  letter-spacing: 0.02em;
  scrollbar-width: thin;
  scrollbar-color: var(--hg-amber-glow) transparent;
  user-select: text;
}

/* 4-char hex groups: JS sets innerHTML to <span>XXXX</span><span>YYYY</span>
   with NO whitespace between spans, so textContent equals the raw hex —
   Playwright known-answer asserts keep working. The visual gap is purely
   margin-right on the chunk. */
.hash-row__chunk {
  display: inline-block;
  margin-right: 0.36rem;
  letter-spacing: 0;
}
.hash-row__chunk:last-child { margin-right: 0; }

.hash-row__tape::-webkit-scrollbar { height: 3px; }
.hash-row__tape::-webkit-scrollbar-thumb { background: var(--hg-amber-glow); border-radius: 2px; }

/* Per-row copy icon button — min-height:0 overrides shared .button 44px */
.hash-row__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  min-height: 0; /* override shared .button min-height:44px */
  height: 2.2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--hg-ink-muted);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}

.hash-row__copy:hover {
  color: var(--hg-amber);
  background: var(--hg-amber-soft);
}

.hash-row__copy:focus-visible {
  outline: 2px solid var(--hg-amber);
  outline-offset: 1px;
  color: var(--hg-amber);
  background: var(--hg-amber-soft);
}

.hash-row__copy svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

/* Amber glow on successful copy */
.hash-row[data-copied="true"] .hash-row__copy {
  color: var(--hg-amber);
  background: var(--hg-amber-soft);
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .hash-bench__layout {
    grid-template-columns: 1fr;
  }

  .hash-panel {
    grid-template-rows: auto auto auto auto;
  }

  .hash-textarea {
    min-height: 8rem;
  }
}

@media (max-width: 720px) {
  .hash-generator-page .tool-header-block {
    max-width: none;
    padding-inline: 0.42rem;
  }

  .hash-generator-page .page-title {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    line-height: 1;
  }

  .hash-generator-page .page-subtitle {
    font-size: 0.9rem;
    max-width: 34ch;
  }

  .hash-bench {
    padding: 0.58rem;
    gap: 0.38rem;
  }

  .hash-panel {
    padding: 0.58rem;
    gap: 0.5rem;
  }

  .hash-textarea {
    min-height: 8rem;
    padding: 0.68rem;
    font-size: 0.94rem;
  }

  .hash-actions {
    gap: 0.44rem;
  }

  .hash-actions .button {
    min-height: 2.5rem;
    font-size: 0.86rem;
  }

  .hash-row {
    grid-template-columns: 5rem minmax(0, 1fr) 2.2rem;
  }

  .hash-row__label {
    font-size: 0.72rem;
  }

  .hash-row__tape {
    font-size: 0.76rem;
    padding: 0.3rem 0.48rem;
  }
}

@media (max-width: 480px) {
  .hash-generator-page .tool-frame {
    padding-inline: 0.42rem;
  }

  .hash-row {
    grid-template-columns: 4.6rem minmax(0, 1fr) 2rem;
  }

  .hash-row__label {
    padding-inline: 0.45rem;
    min-width: 4.4rem;
  }
  .hash-row__algo { font-size: 0.7rem; }
  .hash-row__hint { font-size: 0.54rem; }

  .hash-row__tape {
    font-size: 0.73rem;
    padding: 0.28rem 0.4rem;
  }
}

/* FAQ answers contain 64-char hash literals (e.g. SHA-256 of empty string).
   Without break-anywhere the grid min-content jumps to ~571px and overflows
   the 375px viewport — flagged by tests/hash-generator.spec.mjs mobile test. */
.hash-generator-page .tool-discovery__faq-a,
.hash-generator-page .tool-discovery__card .card-text,
.hash-generator-page .tool-discovery__example-item span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Spec accent is amber-gold; shared .button-primary defaults to blue. Override
   inside this tool's page-shell so the primary action ("Try 'hello'") carries
   the same color identity as labels, chips, and tape borders. */
.hash-generator-page .button.button-primary {
  background: var(--hg-amber);
  border-color: var(--hg-amber);
  color: #1a150a;
  box-shadow: 0 1px 0 rgba(120, 80, 10, 0.18), 0 6px 14px rgba(245, 158, 11, 0.28);
}
.hash-generator-page .button.button-primary:hover,
.hash-generator-page .button.button-primary:focus-visible {
  background: var(--hg-amber-hi);
  border-color: var(--hg-amber-hi);
  color: #15110a;
}
.hash-generator-page .button.button-primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(120, 80, 10, 0.18), 0 2px 6px rgba(245, 158, 11, 0.25);
}

/* Shared .button-secondary's :focus-visible ring is the browser-default blue,
   which breaks the amber color identity. Override Clear / Copy All to use
   an amber focus ring matching the rest of the tool's accent system. */
.hash-generator-page .button.button-secondary:focus-visible {
  outline: 2px solid var(--hg-amber);
  outline-offset: 2px;
  border-color: var(--hg-amber);
}
.hash-generator-page .button.button-secondary:hover {
  border-color: var(--hg-amber-glow);
  color: var(--hg-amber-hi);
}