/* /monitoring-ips: Magnific reference, using the shared dark-console tokens. */
.mips {
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: var(--space-9);
}
.mips h1,
.mips h2,
.mips h3,
.mips p {
  margin: 0;
}
.mips h2 {
  font-size: var(--fs-lg);
  line-height: 1.3;
}
.mips p {
  color: var(--text2);
  line-height: 1.65;
}
.mips__hero {
  padding: var(--space-9) 0;
  text-align: center;
}
.mips .mips__eyebrow {
  color: var(--accent);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}
.mips__hero h1 {
  font-size: var(--fs-2xl);
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.mips .mips__lead {
  max-width: 66ch;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-md);
}
.mips .mips__own {
  padding: var(--space-7);
  margin: 0;
  border-top: 2px solid var(--accent);
  background: var(--surface);
  box-shadow: none;
}
.mips__heading,
.mips__address-row,
.mips__export,
.mips__contact {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.mips__protocol {
  color: var(--accent);
  background: var(--status-info-bg);
  border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
  font: var(--fs-sm) var(--mono);
}
.mips__addresses,
.mips__region-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mips__address-row {
  justify-content: space-between;
  padding-top: var(--space-7);
}
.mips__address-row > div {
  min-width: 0;
}
.mips__address {
  font: 600 var(--fs-3xl) / 1.3 var(--mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  user-select: all;
}
.mips .mips__location {
  margin-top: var(--space-2);
  color: var(--muted2);
  font-size: var(--fs-14);
}
.mips__location code,
.mips__dates strong {
  font-family: var(--mono);
  font-size: inherit;
  font-weight: 400;
}
.mips__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: 500 var(--fs-14) / 1.4 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.mips__button[hidden] {
  display: none;
}
.mips__button:hover {
  border-color: var(--accent);
  background: var(--surface2);
  color: var(--text);
  text-decoration: none;
}
.mips__button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.mips__button--primary:hover {
  background: var(--accent);
  color: var(--bg);
  text-decoration: underline;
}
.mips__button:focus-visible,
.mips__details summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mips__button:disabled {
  cursor: wait;
  opacity: 0.7;
}
.mips .mips__feedback {
  font-size: var(--fs-sm);
  color: var(--accent);
}
.mips__feedback:not(:empty) {
  margin-top: var(--space-4);
}
.mips .mips__feedback--error {
  color: var(--red);
}
.mips__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-7);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--border2);
  font-size: var(--fs-sm);
}
.mips__dates p {
  color: var(--muted2);
}
.mips__dates strong {
  color: var(--text2);
}
.mips__export {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.mips__export-text {
  flex: 1;
  min-width: 0;
}
.mips__export-text > code {
  font: var(--fs-base) var(--mono);
  overflow-wrap: anywhere;
}
.mips__export-text p {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--muted2);
}
.mips .mips__ipv6 {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--muted2);
}
.mips .mips__empty {
  margin: var(--space-6) 0 var(--space-4);
}
.mips__regions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: var(--space-7);
  margin-top: var(--space-9);
}
.mips__regions h2 + p {
  margin-top: var(--space-4);
  font-size: var(--fs-14);
}
.mips .mips__warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  color: var(--status-warn);
  background: var(--status-warn-bg);
  border: 1px solid var(--status-warn-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.mips__warning > span {
  flex-shrink: 0;
}
.mips__details {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}
.mips__details summary {
  cursor: pointer;
  min-height: 44px;
  align-content: center;
  padding: var(--space-2) 0;
  color: var(--text2);
}
.mips__details p {
  padding-bottom: var(--space-4);
}
.mips__region-list {
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
}
.mips__region-list li {
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-14);
}
.mips__region-list li + li {
  border-top: 1px solid var(--border);
}
.mips__region-list code {
  font-family: var(--mono);
  color: var(--text2);
  grid-row: span 2;
}
.mips__region-list small {
  grid-column: 2;
  font-size: var(--fs-xs);
  color: var(--muted2);
}

/* Список собственных проб живёт в той же карточке, но в первой колонке у него
   не код региона, а IPv4-адрес. Общее правило задаёт колонку в 7ch — ровно под
   `us-east`; адрес занимает до 15 символов, вылезает за колонку и наезжает на
   город. Именно так это и выглядело на проде 18.09.2026: «38.180.26.1Dubai, AE».
   Поэтому здесь колонка по содержимому, а не по угаданной ширине. */
.mips__region-list--probes li {
  grid-template-columns: max-content minmax(0, 1fr);
}
.mips__region-list--probes code {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  user-select: all;
}

/* На узком экране адрес и город рядом не помещаются даже по содержимому:
   15 моноширинных символов плюс «Frankfurt am Main, DE» переполняют 390px.
   Складываем в одну колонку — адрес сверху, место под ним. */
@media (max-width: 600px) {
  .mips__region-list--probes li {
    grid-template-columns: minmax(0, 1fr);
  }
  .mips__region-list--probes code {
    grid-row: auto;
  }
  .mips__region-list--probes small {
    grid-column: 1;
  }
}
.mips__checks {
  margin-top: var(--space-9);
}
.mips__check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-6);
}
.mips__check {
  padding: 0 var(--space-6);
}
.mips__check:first-child {
  padding-left: 0;
}
.mips__check:last-child {
  padding-right: 0;
}
.mips__check + .mips__check {
  border-left: 1px solid var(--border2);
}
.mips__check-icon {
  display: inline-flex;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.mips__check h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-2);
}
.mips__check p {
  font-size: var(--fs-14);
}
.mips__contact {
  justify-content: space-between;
  padding: var(--space-6);
  margin-top: var(--space-9);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
}
.mips__contact h2 {
  font-size: var(--fs-md);
}
.mips__contact p {
  font-size: var(--fs-sm);
  margin-top: var(--space-2);
  max-width: 70ch;
}
@media (max-width: 768px) {
  .mips__regions,
  .mips__check-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .mips__regions {
    gap: var(--space-4);
  }
  .mips__check,
  .mips__check:first-child,
  .mips__check:last-child {
    padding: var(--space-4) 0;
  }
  .mips__check + .mips__check {
    border-left: 0;
    border-top: 1px solid var(--border2);
  }
  .mips__check-icon {
    float: left;
    margin: 0 var(--space-4) var(--space-2) 0;
  }
  .mips__contact {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 600px) {
  .mips__hero {
    padding: var(--space-7) 0;
  }
  .mips__hero h1 {
    font-size: var(--fs-xl);
  }
  .mips .mips__lead {
    font-size: var(--fs-base);
  }
  .mips .mips__own {
    padding: var(--space-4);
  }
  .mips__heading {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .mips__address-row,
  .mips__export {
    flex-direction: column;
    align-items: stretch;
  }
  .mips__address {
    font-size: var(--fs-xl);
  }
  .mips__file-icon {
    display: none;
  }
  .mips__export-text > code {
    font-size: var(--fs-sm);
  }
  .mips__region-list li {
    padding: var(--space-4);
  }
  .mips__regions,
  .mips__checks,
  .mips__contact {
    margin-top: var(--space-7);
  }
  .mips__contact {
    padding: var(--space-4);
  }
}

/* The runtime still exposes a legacy light theme. Keep this page readable
   there without changing shared tokens or the primary dark design. */
[data-theme="light"] .mips {
  --muted2: var(--text2);
}
[data-theme="light"] .mips .mips__warning,
[data-theme="light"] .mips .mips__feedback--error {
  color: var(--text);
}
[data-theme="light"] .mips__button--primary,
[data-theme="light"] .mips__button--primary:hover {
  color: var(--white);
}