/* h4d35x0 keys page.
   Fingerprint rendered in the house status-readout grammar, the same one the
   boot screen and passive scan use. No JavaScript: a key block is selectable
   text and does not need a script to be useful. */

.h4-keys { max-width: 84rem; margin: 0 auto; padding: 2rem 1.6rem 6rem; }

.h4-keys__bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 2rem;
  padding: 1.4rem 0 1.2rem; border-bottom: 1px solid var(--h4-line);
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 1.15rem;
  color: var(--h4-dim);
}
.h4-keys__host { color: var(--h4-fg); }
.h4-keys__spacer { flex: 1 1 auto; }
.h4-keys__bar b { font-weight: 400; color: var(--h4-accent); }

.h4-keys__lede { max-width: 62ch; margin: 3.2rem 0 0; font-size: 1.5rem; line-height: 1.7; }

/* ---- fingerprint, the important line ---- */
.h4-keys__fpr {
  margin: 2.4rem 0 0;
  padding: 1.6rem;
  border: 1px solid var(--h4-accent-soft);
  border-left: 2px solid var(--h4-accent);
  overflow-x: auto;
}
.h4-keys__fpr-label {
  margin: 0 0 0.6rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 1.1rem; color: var(--h4-accent);
}
.h4-keys__fpr-value {
  margin: 0;
  font-family: var(--h4-mono);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1.5;
  color: var(--h4-fg);
  word-spacing: 0.35em;
  white-space: nowrap;
}

/* ---- key facts ---- */
.h4-keys__list { margin: 2.4rem 0 0; padding: 0; border-top: 1px solid var(--h4-line); }
.h4-keys__row {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr minmax(0, 1.4fr);
  align-items: baseline; gap: 0 0.8rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--h4-line);
}
.h4-keys__label {
  margin: 0; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 1.15rem; color: var(--h4-dim); white-space: nowrap;
}
.h4-keys__leader { height: 0; border-bottom: 1px dotted var(--h4-line); transform: translateY(-0.35em); }
.h4-keys__value { margin: 0; font-size: 1.3rem; color: var(--h4-accent); overflow-wrap: anywhere; }

/* ---- the armored block ---- */
.h4-keys__block {
  margin: 3.2rem 0 0;
  padding: 1.6rem;
  border: 1px solid var(--h4-line);
  background: rgba(0, 0, 0, 0.25);
  overflow-x: auto;
  font-family: var(--h4-mono);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--h4-fg);
  white-space: pre;
  -webkit-user-select: all;
  user-select: all;
}

.h4-keys__howto { margin: 3.2rem 0 0; max-width: 68ch; }
.h4-keys__howto h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--h4-dim); font-weight: 400;
}
.h4-keys__cmd {
  margin: 0 0 0.8rem; padding: 0.9rem 1.2rem;
  border-left: 1px solid var(--h4-line);
  font-size: 1.25rem; color: var(--h4-accent);
  overflow-x: auto; white-space: pre;
}
.h4-keys__note { margin: 1.4rem 0 0; max-width: 66ch; font-size: 1.3rem; color: var(--h4-dim); }

.h4-keys__back {
  display: inline-flex; gap: 0.6rem; margin: 3.2rem 0 0;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 1.15rem;
  text-decoration: none; border-bottom: 1px solid transparent;
}
.h4-keys__back::before { content: '<'; color: var(--h4-accent); }
.h4-keys__back:hover, .h4-keys__back:focus-visible { border-bottom-color: var(--h4-accent); }

@media screen and (max-width: 749px) {
  .h4-keys__row { grid-template-columns: 1fr; gap: 0.2rem; }
  .h4-keys__leader { display: none; }
  .h4-keys__fpr-value { white-space: normal; word-break: break-all; }
}