/**
 * tools-blockchain-visualizer.css
 * Component styles specific to the Blockchain Visualizer tool.
 * Depends on tokens from tools.css (loaded first).
 */

.bv-intro {
  color: var(--tool-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 68ch;
  margin: -4px 0 18px;
}

html[dir="rtl"] .bv-controls,
html[dir="rtl"] .bv-field {
  direction: rtl;
}

:where(.bv-field label, .bv-toast, .bv-status) {
  overflow-wrap: anywhere;
}
.bv-intro strong { color: var(--tool-text-primary); font-weight: 600; }

/* ---- Control bar ---- */
.bv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  background: var(--tool-bg-secondary);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 14px 16px;
  margin-block-end: 16px;
}

.bv-field { display: flex; flex-direction: column; gap: 5px; }
.bv-field--grow { flex: 1; min-width: 200px; }

.bv-field__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tool-text-muted);
  letter-spacing: 0.02em;
}

.bv-difficulty { display: flex; align-items: center; gap: 8px; }
.bv-difficulty input[type="range"] { width: 96px; }
.bv-difficulty__readout {
  font-family: var(--tool-mono);
  font-size: 0.82rem;
  color: var(--tool-accent-blue);
  min-width: 5.5ch;
}

/* ---- Status strip ---- */
.bv-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-end: 18px;
}
.bv-status__cell {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tool-bg-secondary);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 10px 16px;
}
.bv-status__cell--chain { flex: 1; min-width: 200px; }
.bv-status__num {
  font-family: var(--tool-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tool-text-primary);
  line-height: 1;
}
.bv-status__label {
  font-size: 0.72rem;
  color: var(--tool-text-muted);
  letter-spacing: 0.02em;
}

.bv-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
}
.bv-verdict__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.bv-verdict.is-valid { color: var(--tool-accent-green); }
.bv-verdict.is-valid .bv-verdict__icon {
  background: rgba(200, 255, 34, 0.16);
  box-shadow: 0 0 0 1px rgba(200, 255, 34, 0.4) inset;
}
.bv-verdict.is-broken { color: var(--tool-accent-red); }
.bv-verdict.is-broken .bv-verdict__icon {
  background: rgba(255, 107, 107, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.45) inset;
}
.bv-verdict__detail {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--tool-text-muted);
}

/* ---- Chain + blocks ---- */
.bv-chain { display: flex; flex-direction: column; }

.bv-block {
  background:
    linear-gradient(160deg, rgba(23, 52, 65, 0.6), rgba(19, 39, 48, 0.9)),
    var(--tool-bg-tertiary);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius);
  padding: 16px;
  position: relative;
  transition: border-color 0.25s var(--tool-ease), box-shadow 0.25s var(--tool-ease);
}

.bv-block.is-valid {
  border-color: rgba(200, 255, 34, 0.45);
}
.bv-block.is-broken {
  border-color: var(--tool-accent-red);
  box-shadow: var(--tool-glow-red);
}
.bv-block.is-tampered {
  border-color: var(--tool-accent-red);
}
.bv-block.is-mining {
  border-color: var(--tool-accent-yellow);
}

.bv-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 12px;
}
.bv-block__index {
  font-family: var(--tool-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tool-text-primary);
}
.bv-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
}
.bv-pill--genesis { color: var(--tool-accent-blue); }
.bv-pill--state { margin-inline-start: auto; }
.bv-pill--ok { color: var(--tool-accent-green); }
.bv-pill--bad { color: var(--tool-accent-red); }
.bv-pill--mining { color: var(--tool-accent-yellow); }

.bv-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bv-block__cell--full { grid-column: 1 / -1; }
.bv-cell__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--tool-text-muted);
  letter-spacing: 0.02em;
  margin-block-end: 4px;
}

.bv-data-input {
  width: 100%;
  background: var(--tool-bg-primary);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-text-primary);
  font-family: var(--tool-font);
  font-size: 0.85rem;
  padding: 8px 10px;
  transition: border-color 0.2s;
}
.bv-data-input:hover { border-color: var(--tool-text-muted); }
.bv-data-input:focus { outline: none; border-color: var(--tool-accent-blue); }

.bv-meta {
  font-family: var(--tool-mono);
  font-size: 0.85rem;
  color: var(--tool-text-secondary);
  padding: 8px 10px;
  background: var(--tool-bg-primary);
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
}

.bv-hash {
  font-family: var(--tool-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  word-break: break-all;
  padding: 8px 10px;
  background: #050c10;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-text-secondary);
}
.bv-hash__lead { color: var(--tool-accent-green); font-weight: 600; }
.bv-block.is-broken .bv-hash__lead,
.bv-block.is-tampered .bv-hash__lead { color: var(--tool-accent-red); }

/* prev-hash link state inside a block */
.bv-prev {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bv-prev__hash {
  font-family: var(--tool-mono);
  font-size: 0.85rem;
  color: var(--tool-text-secondary);
}
.bv-prev__flag {
  font-size: 0.68rem;
  font-weight: 700;
}
.bv-prev__flag.is-ok  { color: var(--tool-accent-green); }
.bv-prev__flag.is-bad { color: var(--tool-accent-red); }

/* ---- Connector between blocks ---- */
.bv-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 6px 20px;
  margin-inline-start: 18px;
  border-inline-start: 2px solid var(--tool-accent-green);
  position: relative;
}
.bv-link.is-broken {
  border-inline-start-style: dashed;
  border-inline-start-color: var(--tool-accent-red);
}
.bv-link__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-family: var(--tool-mono);
  color: var(--tool-text-muted);
  background: var(--tool-bg-secondary);
  border: 1px solid var(--tool-border);
  border-radius: 999px;
  padding: 3px 10px;
}
.bv-link.is-broken .bv-link__chip {
  color: var(--tool-accent-red);
  border-color: rgba(255, 107, 107, 0.5);
}
.bv-link.is-valid .bv-link__chip strong { color: var(--tool-accent-green); }

/* ---- Per-block actions ---- */
.bv-block__actions {
  display: flex;
  gap: 8px;
  margin-block-start: 12px;
  flex-wrap: wrap;
}
.bv-btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--tool-border);
  border-radius: var(--tool-radius-sm);
  color: var(--tool-text-secondary);
  cursor: pointer;
  font-family: var(--tool-font);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.bv-btn-mini:hover {
  border-color: var(--tool-accent-green);
  color: var(--tool-accent-green);
}
.bv-btn-mini--repair {
  border-color: rgba(200, 255, 34, 0.5);
  color: var(--tool-accent-green);
}
.bv-btn-mini--repair:hover {
  background: var(--tool-accent-green);
  color: var(--tool-text-inverse, #061117);
}
.bv-btn-mini:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Empty state ---- */
.bv-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--tool-text-muted);
  border: 1px dashed var(--tool-border);
  border-radius: var(--tool-radius);
}

/* ---- Animations (state-conveying, not decorative) ---- */
@keyframes bv-rehash {
  0%   { background: rgba(255, 209, 102, 0.18); }
  100% { background: #050c10; }
}
.bv-hash.is-rehashing { animation: bv-rehash 0.6s var(--tool-ease); }

@keyframes bv-cascade {
  0%   { box-shadow: var(--tool-glow-red); border-color: var(--tool-accent-red); }
  50%  { box-shadow: 0 0 30px rgba(255, 107, 107, 0.55); }
  100% { box-shadow: var(--tool-glow-red); border-color: var(--tool-accent-red); }
}
.bv-block.is-cascading { animation: bv-cascade 0.5s var(--tool-ease); }

@keyframes bv-mining {
  0%, 100% { border-color: var(--tool-accent-yellow); }
  50%      { border-color: rgba(255, 209, 102, 0.4); }
}
.bv-block.is-mining { animation: bv-mining 0.7s ease-in-out infinite; }

/* ---- Responsive ---- */
@media (max-width: 540px) {
  .bv-block__grid { grid-template-columns: 1fr; }
  .bv-controls { flex-direction: column; align-items: stretch; }
  .bv-field--grow { min-width: 0; }
}