/* Shared hero captions retain the original IPv4 typography. The family hooks
   give this owner precedence over legacy percentage-based caption rules. */
body .ipblock .showip_mod .twoip-addresses .twoip-address-label:is(.iptitle, .ipv6title) {
  font-size: var(--twoip-address-label-size);
  font-weight: 400;
  font-family: "2ip";
  font-variant-numeric: normal;
  line-height: 1.45;
  letter-spacing: normal;
}

/* Family slots derive from existing type/copy metrics, not a blanket height. A known
   transport address paints immediately; discovery only fills the other slot. */
body .ipblock .showip_mod .twoip-addresses {
  --twoip-address-label-size: 18px;
  --twoip-address-primary-slot: calc(var(--twoip-address-label-size) * 1.45 + max(var(--twoip-hero-copy-size), var(--twoip-hero-ipv4-size) * 1.25));
  --twoip-address-secondary-slot: calc(var(--twoip-address-label-size) * 1.45 + max(var(--twoip-hero-copy-size), var(--twoip-hero-ipv6-size) * 1.4 * var(--twoip-hero-ipv6-lines)));
  --twoip-address-family-gap: 12px;
  --twoip-address-stage-height: calc(var(--twoip-address-primary-slot) + var(--twoip-address-secondary-slot) + var(--twoip-address-family-gap));
  block-size: var(--twoip-address-primary-slot);
  display: grid;
  grid-template-rows: var(--twoip-address-primary-slot);
}
body .ipblock .showip_mod .twoip-addresses > .ip {
  display: grid;
  grid-template-columns: minmax(0, max-content) var(--twoip-hero-copy-size);
  justify-content: center;
  grid-template-rows: calc(var(--twoip-address-label-size) * 1.45) minmax(0, 1fr);
  column-gap: 4px;
  align-items: center;
  align-self: stretch;
  block-size: 100%;
}
body .ipblock .showip_mod .twoip-addresses > [data-address-row="ipv4"] {
  grid-row: 1;
}
body .ipblock .showip_mod .twoip-addresses > [data-address-row="ipv6"] {
  grid-row: 1;
}
body .ipblock .showip_mod .twoip-addresses .twoip-address-label {
  grid-area: 1 / 1 / 2 / 3;
  block-size: calc(var(--twoip-address-label-size) * 1.45);
  margin-block: 0;
}
body .ipblock .showip_mod .twoip-addresses [data-address-unknown] {
  grid-row: 1 / -1;
  align-self: center;
}
body .ipblock .showip_mod .twoip-addresses[data-address-phase="pending"] [data-address-unknown] {
  visibility: hidden;
}

body .ipblock .showip_mod .twoip-addresses > .ip > .twoip-ip-address {
  grid-area: 2 / 1;
  max-width: 100%;
  align-content: center;
}
body .ipblock .showip_mod .twoip-addresses > [data-address-row="ipv4"] > .twoip-ip-address {
  block-size: calc(var(--twoip-hero-ipv4-size) * 1.25);
}
body .ipblock .showip_mod .twoip-addresses > [data-address-row="ipv6"] > .twoip-ip-address {
  block-size: calc(var(--twoip-hero-ipv6-size) * 1.4 * var(--twoip-hero-ipv6-lines));
}
body .ipblock .showip_mod .twoip-addresses > .ip > button {
  grid-area: 2 / 2;
  margin-inline-start: 0;
}

/* The fixed ASCII CLI caption must not resize its right-anchored control while
   the parser inserts the label or the embedded condensed face decodes. */
body .ipblock .showip_mod .cli button {
  --twoip-hero-cli-icon-size: 20px;
  --twoip-hero-cli-caption-size: 24px;
  display: grid;
  grid-template-columns: var(--twoip-hero-cli-icon-size) var(--twoip-hero-cli-caption-size);
  inline-size: calc(var(--twoip-hero-cli-icon-size) + var(--twoip-hero-cli-caption-size) + 6px + 16px);
}

/* Reserve only the visible families. An actual second result may expand the
   card once; a failed/slow probe never creates or removes an empty row. */
body .ipblock .showip_mod .twoip-addresses[data-stack="ipv6"] {
  block-size: var(--twoip-address-secondary-slot);
  grid-template-rows: var(--twoip-address-secondary-slot);
}
body .ipblock .showip_mod .twoip-addresses[data-stack="dual"] {
  block-size: var(--twoip-address-stage-height);
  grid-template-rows: var(--twoip-address-primary-slot) var(--twoip-address-secondary-slot);
  row-gap: var(--twoip-address-family-gap);
}
body .ipblock .showip_mod .twoip-addresses[data-stack="dual"] > [data-address-row="ipv6"] {
  grid-row: 2;
}