/* ==========================================================================
   Page styles: infra (servers, server detail + network map, services, domains, and their forms).
   Owned by the infra area. Classes are prefixed with `infra-` (pages) or `netmap` (map).
   ========================================================================== */

/* ---------- Shared bits ---------- */
.infra-ident { display: flex; flex-direction: column; min-width: 0; line-height: var(--lh-snug); }
.infra-name { font-family: var(--font-mono); font-size: 0.95em; letter-spacing: -0.01em; }
[dir="rtl"] .infra-name { text-align: right; }
.infra-host {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.infra-nowrap { white-space: nowrap; }
.infra-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--tone-neutral); }
.infra-dot--green { background: var(--tone-green); }
.infra-dot--red { background: var(--tone-red); }
.infra-dot--amber { background: var(--tone-amber); }
.infra-dot--plum { background: var(--tone-plum); }
.infra-dot--sky { background: var(--tone-sky); }
.infra-dot--indigo { background: var(--tone-indigo); }

.infra-tone--green { --tone: var(--tone-green); --tone-fg: var(--tone-green-fg); --tone-bg: var(--tone-green-bg); }
.infra-tone--red { --tone: var(--tone-red); --tone-fg: var(--tone-red-fg); --tone-bg: var(--tone-red-bg); }
.infra-tone--amber { --tone: var(--tone-amber); --tone-fg: var(--tone-amber-fg); --tone-bg: var(--tone-amber-bg); }
.infra-tone--plum { --tone: var(--tone-plum); --tone-fg: var(--tone-plum-fg); --tone-bg: var(--tone-plum-bg); }
.infra-tone--sky { --tone: var(--tone-sky); --tone-fg: var(--tone-sky-fg); --tone-bg: var(--tone-sky-bg); }
.infra-tone--indigo { --tone: var(--tone-indigo); --tone-fg: var(--tone-indigo-fg); --tone-bg: var(--tone-indigo-bg); }
.infra-tone--neutral { --tone: var(--tone-neutral); --tone-fg: var(--tone-neutral-fg); --tone-bg: var(--tone-neutral-bg); }

.infra-critical {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--tone-red-bg);
  color: var(--tone-red-fg);
  z-index: 1; /* above the row's stretched link (still inside it, so a click opens the server), so its tip shows */
}

.infra-ip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; position: relative; z-index: 1; }
.infra-ip .code-chip .icon { opacity: 0.55; }
.infra-ip__scope { font-size: var(--fs-2xs); color: var(--text-3); white-space: nowrap; }


/* ---------- KPI strip (servers) ---------- */
.infra-kpis { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.infra-kpi { display: flex; flex-direction: column; justify-content: space-between; }
.infra-kpi .card__head { margin-bottom: var(--sp-5); }
.infra-kpi .kpi__row { justify-content: flex-start; }
.infra-kpi:hover .card__title { color: var(--text); }

.infra-fleet__body { display: flex; align-items: flex-end; gap: var(--sp-6); min-width: 0; }
.infra-fleet__body > .kpi { flex: none; }

/* Monef "expense breakdown": pinned values over pill bars on a hatched band */
.infra-breakdown {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.infra-breakdown::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 22px;
  height: 46px;
  border-radius: var(--r-sm);
  background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1.5px, transparent 1.5px 7px);
  opacity: 0.8;
}
.infra-breakdown__item { position: relative; flex: var(--share) 1 64px; min-width: 64px; }
.infra-breakdown__link { display: grid; grid-template-rows: auto 38px auto; gap: 6px; border-radius: var(--r-md); }
.infra-breakdown__pin {
  position: relative;
  justify-self: start;
  margin-bottom: 14px;
  padding: 2px 10px;
  border-radius: var(--r-xs);
  background: var(--card-3);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.infra-breakdown__pin::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% - 8px);
  height: 26px;
  border-inline-start: 1px solid var(--border-strong);
}
.infra-breakdown__pin::before {
  content: "";
  position: absolute;
  inset-inline-start: -2px;
  top: calc(100% + 16px);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-2);
}
.infra-breakdown__bar {
  position: relative;
  z-index: 1;
  margin-block: 4px;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--tone), color-mix(in srgb, var(--tone) 68%, var(--card)));
  box-shadow: var(--glass-highlight), 0 8px 18px -12px var(--tone);
  transform-origin: right center;
  animation: iv-grow var(--dur-4) var(--ease-out) both;
}
.infra-breakdown__item:not(.is-peak) .infra-breakdown__bar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 30%, var(--card-3)), color-mix(in srgb, var(--tone) 18%, var(--card-2)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent);
}
.infra-breakdown__label { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.infra-breakdown__link:hover .infra-breakdown__label { color: var(--text); }
.infra-breakdown__link:hover .infra-breakdown__bar { filter: brightness(1.12); }

/* ---------- Browser card: toolbar + results ---------- */
.infra-browser { padding: var(--sp-5); }
.infra-toolbar { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.infra-toolbar__main { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.infra-toolbar__search.search--lg { flex: 1 1 300px; width: auto; }
.infra-toolbar__pills { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.infra-toolbar__pills::-webkit-scrollbar { display: none; }
.infra-view-toggle .segmented__item { padding-inline: var(--sp-3); }
.infra-view-toggle .segmented__item[aria-pressed="true"] { background: var(--card-3); color: var(--text); box-shadow: var(--glass-highlight); }
.infra-toolbar .segmented { height: 48px; }

/* Native select inside a Monef filter pill */
.infra-pill { position: relative; flex: none; cursor: pointer; padding-inline-end: var(--sp-3); }
.infra-pill__select {
  appearance: none;
  max-width: 190px;
  height: 100%;
  padding-inline: 0 22px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-overflow: ellipsis;
}
.infra-pill__select:focus-visible { box-shadow: none; }
.infra-pill__select option { background: var(--dropdown-bg); color: var(--text); }
.infra-pill__caret { position: absolute; inset-inline-end: var(--sp-3); pointer-events: none; color: var(--text-3); }
.infra-pill:focus-within { border-color: var(--indigo); box-shadow: var(--focus-ring); }
.infra-pill:has(option:checked:not([value=""])) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.infra-pill:has(option:checked:not([value=""])) .chip-icon { background: var(--accent-soft); color: var(--accent-text); }

/* Radio-backed segmented control */
.infra-seg .segmented__item { cursor: pointer; }
.infra-seg .segmented__item:has(input:checked) { background: var(--card-3); color: var(--text); box-shadow: var(--glass-highlight); }
.infra-seg .segmented__item:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.infra-results { min-width: 0; transition: opacity var(--dur-2); }
.infra-results.htmx-request { opacity: 0.55; }
.infra-results__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.infra-results__count { font-size: var(--fs-sm); color: var(--text-2); }
.infra-results__count b { color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.infra-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.infra-chips .filter-chip .icon { opacity: 0.8; }
.infra-chips__clear { padding-inline: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); transition: color var(--dur-1); }
.infra-chips__clear:hover { color: var(--tone-red-fg); }

.infra-fleet-table :is(th, td) { padding-inline: 10px; }
.infra-fleet-table td { white-space: nowrap; }
.infra-cell-name { width: 30%; max-width: 280px; }
.infra-cell-name .table__link > .infra-ident { flex: 1; }
.infra-cell-state { width: 1%; }
.infra-cell-state .badge { display: flex; width: max-content; }
.infra-cell-state .badge + .badge { margin-top: 5px; }
.infra-cell-where .infra-ident { max-width: 140px; }
.infra-cell-ip .infra-ip { flex-direction: column; align-items: flex-start; gap: 2px; }
.infra-cell-seen { color: var(--text-2); font-size: var(--fs-sm); }
.infra-cell-seen__icon { display: none; }

/* Cards presentation of the same table. The named container is set for the cards view
   and on phones, so the rules below are written once for both. */
.infra-results { container-type: inline-size; }
.infra-results[data-view="cards"] { container-name: infra-cards; }

@container infra-cards (min-width: 0px) {
  .infra-fleet-table { margin: 0; padding: 0; overflow: visible; }
  .infra-fleet-table thead { display: none; }
  .infra-fleet-table .table { display: block; }
  .infra-fleet-table tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
    gap: var(--sp-3);
  }
  .infra-fleet-table tr {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "name name name" "state where where" "usage usage usage" "ip seen owner";
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card-2);
    transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
  }
  .infra-fleet-table tbody tr:hover {
    background: var(--card-2);
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
  }
  .infra-fleet-table tr.is-production { border-color: color-mix(in srgb, var(--tone-plum) 32%, var(--border)); }
  .infra-fleet-table tr.is-production td:first-child { box-shadow: none; }
  .infra-fleet-table td { display: block; width: auto; height: auto; min-width: 0; max-width: none; padding: 0; border: 0; }
  .infra-cell-name { grid-area: name; }
  .infra-fleet-table .infra-cell-state { grid-area: state; display: flex; align-items: center; gap: 6px; width: auto; }
  .infra-cell-state .badge + .badge { margin-top: 0; }
  .infra-cell-where { grid-area: where; }
  .infra-fleet-table .infra-cell-where .infra-ident { max-width: none; flex-direction: row; gap: 4px; font-size: var(--fs-xs); }
  .infra-cell-where .table__primary { flex: none; }
  .infra-cell-ip .infra-ip { flex-direction: row; align-items: center; gap: 6px; }
  .infra-cell-where .table__primary { font-weight: var(--fw-regular); color: var(--text-2); }
  .infra-cell-where .table__secondary::before { content: "· "; }
  .infra-fleet-table .infra-cell-usage { grid-area: usage; padding-block: var(--sp-1) var(--sp-3); border-bottom: 1px solid var(--divider); }
  .infra-cell-ip { grid-area: ip; }
  .infra-fleet-table .infra-cell-seen {
    grid-area: seen;
    display: flex; align-items: center; justify-content: flex-end; gap: 5px;
    font-size: var(--fs-xs); color: var(--text-3);
  }
  .infra-cell-seen__icon { display: block; }
  .infra-cell-owner { grid-area: owner; }
  .infra-cell-owner .avatar { --av: 26px; }
  .infra-stretch::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
  .infra-stretch:focus-visible { box-shadow: none; }
  .infra-stretch:focus-visible::after { box-shadow: var(--focus-ring); }
  .infra-stretch:hover .table__primary { color: var(--accent-text); }
  .infra-fleet-table .infra-usage--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); min-width: 0; }
  .infra-fleet-table .infra-usage--compact .infra-usage__item { grid-template-columns: minmax(0, 1fr) auto; gap: 5px var(--sp-2); }
  .infra-fleet-table .infra-usage--compact .meter { grid-column: 1 / -1; grid-row: 2; height: 5px; }
  .infra-fleet-table .infra-usage--compact :is(.infra-usage__label, .infra-usage__value) { font-size: var(--fs-xs); }
}

/* ---------- Usage meters ---------- */
.infra-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.infra-usage__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px var(--sp-2); min-width: 0; }
.infra-usage__item .meter { grid-column: 1 / -1; }
.infra-usage__label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.infra-usage__value { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-2); font-variant-numeric: tabular-nums; }
.infra-usage__item.is-warn .infra-usage__value { color: var(--tone-amber-fg); }
.infra-usage__item.is-danger .infra-usage__value { color: var(--tone-red-fg); }

.infra-usage--compact { grid-template-columns: none; gap: 3px; min-width: 150px; }
.infra-usage--compact .infra-usage__item { grid-template-columns: 38px minmax(56px, 1fr) 34px; gap: var(--sp-2); }
.infra-usage--compact .infra-usage__item .meter { grid-column: auto; height: 4px; }
.infra-usage--compact .infra-usage__label,
.infra-usage--compact .infra-usage__value { font-size: var(--fs-2xs); line-height: 1.3; }

/* ---------- Server detail ---------- */
.infra-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; transition: color var(--dur-1); }
.infra-link:hover, .infra-link:hover .infra-list__title { color: var(--accent-text); }
.infra-head__title { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.infra-head__name { font-family: var(--font-mono); font-size: var(--fs-2xl); letter-spacing: -0.02em; overflow-wrap: anywhere; }
[dir="rtl"] .infra-head__name { text-align: right; }
.infra-head__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.infra-head__host { max-width: 260px; font-size: var(--fs-sm); color: var(--text-2); }
.page-head__actions .copy-btn.is-copied { color: var(--accent-text); }
.infra-prod-banner { align-items: center; }

.infra-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-4); align-items: start; }
.infra-detail-grid--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.infra-detail-stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.infra-health__top { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.infra-health__ring { --size: 76px; --stroke: 3; }
.infra-health__ring--warn { --tone: var(--tone-amber); }
.infra-health__ring .ring__label { color: var(--tone); }
.infra-health__ring .ring__label .icon { width: 22px; height: 22px; transform: none; }
.infra-info .meta-item--full { grid-column: 1 / -1; }
.infra-health .infra-usage { padding: var(--sp-4); border-radius: var(--r-lg); background: var(--card-2); border: 1px solid var(--border); }
.infra-health__caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.infra-health__caps div { display: flex; flex-direction: column; gap: 2px; padding-inline: var(--sp-1); }
.infra-health__caps dt { font-size: var(--fs-2xs); color: var(--text-3); }
.infra-health__caps dd { font-size: var(--fs-sm); color: var(--text); font-weight: var(--fw-medium); }
.infra-info .meta-grid { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.infra-info .code-chip { max-width: 100%; }
.infra-info .code-chip .icon, .infra-head .copy-btn .icon { opacity: 0.6; }

.infra-list { display: flex; flex-direction: column; }
.infra-list__item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 60px;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--divider);
  min-width: 0;
}
.infra-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.infra-list__item.is-amber .infra-list__title { color: var(--tone-amber-fg); }
.infra-list__item.is-red .infra-list__title { color: var(--tone-red-fg); }
.infra-list__item--stack { flex-direction: column; align-items: stretch; gap: 6px; }
.infra-list__main { flex: 1; }
.infra-list__title { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-list__meta { font-size: var(--fs-xs); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-list__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.infra-list__port { flex: none; }
.infra-muted-note { font-size: var(--fs-sm); color: var(--text-3); padding-block: var(--sp-2); }
.infra-notes { font-size: var(--fs-md); color: var(--text-2); line-height: var(--lh-base); overflow-wrap: anywhere; }
.infra-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding-inline: 6px;
  border-radius: var(--r-full);
  background: var(--chip);
  font-size: var(--fs-2xs);
  color: var(--text-2);
}

/* ---------- Network map ---------- */
.infra-map { overflow: hidden; }
.infra-map__flow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.infra-map__flow b { color: var(--text-2); font-weight: var(--fw-medium); }
.infra-map__canvas {
  margin-inline: calc(var(--sp-5) * -1);
  padding-inline: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: thin;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--indigo) 9%, transparent), transparent 60%),
    radial-gradient(circle, var(--chart-grid) 1px, transparent 1.2px) 0 0 / 22px 22px;
  border-block: 1px solid var(--divider);
}
.netmap {
  display: block;
  width: 100%;
  min-width: calc(var(--nm-w) * 0.74px);
  max-width: calc(var(--nm-w) * 1px);
  height: auto;
  margin-inline: auto;
  font-family: var(--font-sans);
}
.netmap__glow-stop { stop-color: var(--indigo); stop-opacity: 0.22; }
.netmap__glow-stop--end { stop-opacity: 0; }
.netmap__orbit { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 6; }

.netmap__edge { transition: opacity var(--dur-2); }
.netmap__track { fill: none; stroke: color-mix(in srgb, var(--tone) 30%, transparent); stroke-width: 1.6; }
.netmap__flow {
  fill: none;
  stroke: var(--tone);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 11;
  animation: netmap-flow 1.4s linear infinite;
}
@keyframes netmap-flow { to { stroke-dashoffset: -24; } }
.netmap__arrow { fill: var(--tone); }

.netmap__label { transition: opacity var(--dur-2); }
.netmap__label rect { fill: var(--card-2); stroke: color-mix(in srgb, var(--tone) 35%, var(--border)); }
.netmap__label-kind { font-size: 11px; fill: var(--text-2); }
.netmap__label-port { font-size: 11px; font-family: var(--font-mono); fill: var(--tone-fg); }

.netmap__node { cursor: pointer; transition: opacity var(--dur-2); outline: none; }
.netmap__pill {
  fill: color-mix(in srgb, var(--tone) 9%, var(--card));
  stroke: color-mix(in srgb, var(--tone) 40%, var(--border));
  stroke-width: 1;
  transition: stroke var(--dur-2), fill var(--dur-2);
}
.netmap__icon-bg { fill: var(--tone-bg); }
.netmap__glyph { color: var(--tone-fg); stroke-width: 1.9; }
.netmap__name { font-size: 12.5px; font-family: var(--font-mono); font-weight: var(--fw-medium); fill: var(--text); }
.netmap__meta { font-size: 11px; fill: var(--text-3); }
.netmap__status { fill: var(--tone); stroke: var(--card); stroke-width: 2; }
.netmap__status.is-live { animation: netmap-pulse 2.2s ease-in-out infinite; }
@keyframes netmap-pulse { 50% { opacity: 0.45; } }
.netmap__node:hover .netmap__pill { stroke: var(--tone); fill: color-mix(in srgb, var(--tone) 16%, var(--card)); }
.netmap__node:focus-visible .netmap__pill { stroke-width: 2.5; stroke: var(--indigo); }

/* The focus server: Monef solid active chip */
.netmap__node.is-center .netmap__pill { fill: var(--chip-active); stroke: none; }
.netmap__node.is-center .netmap__name { fill: var(--chip-active-ink); font-size: 14px; font-weight: var(--fw-semibold); }
.netmap__node.is-center .netmap__meta { fill: color-mix(in srgb, var(--chip-active-ink) 60%, transparent); }
.netmap__node.is-center .netmap__icon-bg { fill: var(--tone); }
.netmap__node.is-center .netmap__glyph { color: var(--chip-active); }
.netmap__node.is-center .netmap__status { stroke: var(--chip-active); }
.netmap__halo {
  fill: none;
  stroke: var(--tone);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: netmap-halo 2.8s var(--ease-out) infinite;
}
@keyframes netmap-halo { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }

/* Hover/focus a server: its links and neighbours stay lit, the rest steps back */
.infra-map__canvas.is-focusing :is(.netmap__edge, .netmap__label, .netmap__node):not(.is-lit) { opacity: 0.16; }
.infra-map__canvas.is-focusing .netmap__edge.is-lit .netmap__track { stroke-width: 2.4; }

.infra-map__note { display: flex; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); }
.infra-map__note .icon { margin-top: 3px; }
.infra-map__list { margin-top: var(--sp-4); }
.infra-map__list summary {
  display: flex; align-items: center; gap: var(--sp-2);
  width: max-content;
  min-height: 40px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-1), color var(--dur-1);
}
.infra-map__list summary::-webkit-details-marker { display: none; }
.infra-map__list summary:hover { background: var(--hover); color: var(--text); }
.infra-map__caret { transition: transform var(--dur-2) var(--ease-out); }
.infra-map__list[open] .infra-map__caret { transform: rotate(180deg); }
.infra-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.infra-links__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--card-2);
  border: 1px solid var(--border);
  min-width: 0;
}
.infra-links__route { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: var(--fs-sm); }
.infra-links__route a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text-2); }
.infra-links__route a:hover { color: var(--accent-text); }
.infra-links__route a.is-self { color: var(--text); font-weight: var(--fw-medium); }
.infra-links__arrow { color: var(--text-3); flex: none; }
.infra-links__kind { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1439px) {
  .infra-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .infra-fleet { grid-column: 1 / -1; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .infra-results:not([data-view="cards"]) :is(.infra-cell-where, .infra-cell-owner) { display: none; }
}
@media (max-width: 1279px) {
  /* The table needs ~1000px; narrower screens always get cards. */
  .infra-results { container-name: infra-cards; }
  .infra-view-toggle { display: none; }
}
@media (max-width: 767px) {
  .infra-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra-kpis > .infra-kpi:last-child { grid-column: 1 / -1; }
  .infra-kpi .card__head { margin-bottom: var(--sp-3); }
  .infra-kpi .kpi__value { font-size: var(--fs-2xl); }
  .infra-fleet__body { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .infra-browser { padding: var(--sp-4); }
  .infra-toolbar__main > .infra-seg { width: 100%; }
  .infra-toolbar__main > .infra-seg .segmented__item { flex: 1; justify-content: center; padding-inline: var(--sp-2); }
}
@media (max-width: 479px) {
  .infra-kpis .card { padding: var(--sp-4); }
  .infra-usage { gap: var(--sp-2); }
}
@media (max-width: 1279px) {
  .infra-detail-grid, .infra-detail-grid--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .infra-head__title { align-items: flex-start; gap: var(--sp-3); }
  .infra-head__host { max-width: 200px; }
  .infra-map__flow { display: none; }
  .infra-map__canvas { margin-inline: calc(var(--sp-4) * -1); padding-inline: var(--sp-4); }
  .infra-list__item { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .infra-breakdown__bar, .netmap__flow, .netmap__status.is-live, .netmap__halo { animation: none; }
}

/* ---------- Services page ---------- */
.infra-status-strip { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.infra-status-bar { display: flex; gap: 3px; height: 8px; border-radius: var(--r-full); overflow: hidden; }
.infra-status-bar__seg {
  min-width: 8px;
  border-radius: var(--r-full);
  background: var(--tone);
  transform-origin: right;
  animation: iv-grow var(--dur-4) var(--ease-out) both;
}
.infra-chips .filter-chip b { font-weight: var(--fw-semibold); color: var(--text); }

.infra-kinds {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* Fade the scrolling (logical end = left) edge so it reads as "more this way". */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px);
  mask-image: linear-gradient(to left, transparent 0, #000 40px);
}
.infra-kinds::-webkit-scrollbar { display: none; }
.infra-kind-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  flex: none;
  height: 44px;
  padding-inline: 5px var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--sunken);
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.infra-kind-chip:hover { color: var(--text); border-color: var(--border-strong); }
.infra-kind-chip.is-active { color: var(--text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.infra-kind-chip.is-active .infra-count { background: var(--accent); color: var(--accent-ink); }

.infra-kind + .infra-kind { margin-top: var(--sp-7); }
.infra-kind__title {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-title);
}
.infra-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: var(--sp-3); }
.infra-service-grid > li { min-width: 0; }

.infra-service {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--card-2);
  border: 1px solid var(--border);
  transition: border-color var(--dur-2), transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3);
}
.infra-service:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-1); }
/* Degraded / stopped services carry their tone on the logical-start edge — never colour alone (badge too). */
.infra-service.is-alert { border-color: color-mix(in srgb, var(--tone) 30%, var(--border)); }
.infra-service.is-alert::before {
  content: "";
  position: absolute;
  inset-block: var(--sp-4);
  inset-inline-start: -1px;
  width: 3px;
  border-radius: var(--r-full);
  background: var(--tone);
}
.infra-service__head { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.infra-service__head .infra-ident { flex: 1; }
.infra-service__name { font-size: var(--fs-md); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Latin names (dir="auto") would otherwise align away from the icon. */
[dir="rtl"] .infra-service__name { text-align: right; }
.infra-service__version { font-size: var(--fs-xs); color: var(--text-3); }
.infra-service__server {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--sunken);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color var(--dur-2);
}
.infra-service__server:hover { border-color: var(--border-strong); }
.infra-service__env { margin-inline-start: auto; flex: none; font-size: var(--fs-xs); color: var(--text-3); }
.infra-service__go { flex: none; color: var(--text-3); transition: transform var(--dur-2) var(--ease-out), color var(--dur-2); }
.infra-service__server:hover .infra-service__go { color: var(--text); transform: translateX(-3px); }
.infra-service__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; font-size: var(--fs-xs); color: var(--text-3); min-width: 0; }
.infra-service__url { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 120px; min-width: 0; color: var(--text-2); transition: color var(--dur-1); }
.infra-service__url:hover, .infra-service__url:hover .infra-host { color: var(--accent-text); }
.infra-service__project { margin-inline-start: auto; white-space: nowrap; }

/* ---------- Domains page ---------- */
.infra-domain-kpis { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.infra-next { display: flex; flex-direction: column; }
.infra-next__body { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.infra-next__days { font-size: var(--fs-4xl); font-weight: var(--fw-semibold); line-height: 1.1; letter-spacing: -0.01em; }
.infra-next__days small { font-size: var(--fs-md); font-weight: var(--fw-regular); color: var(--hero-fg-2); }
.infra-next__domain { font-family: var(--font-mono); font-size: var(--fs-lg); text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-next__what { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--hero-fg-2); }
.infra-next__what .icon { color: var(--hero-accent); }

.infra-timeline { display: flex; flex-direction: column; }
.infra-domain-list { display: flex; flex-direction: column; }
.infra-domain {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr) minmax(170px, auto);
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--divider);
}
.infra-domain-list > .infra-domain:last-child { border-bottom: 0; }
.infra-domain--axis { padding-block: 0 var(--sp-2); }
.infra-domain__info { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.infra-legend { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: var(--sp-3); font-size: var(--fs-2xs); color: var(--text-3); }
.infra-domain__name { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-domain__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--sp-2); font-size: var(--fs-xs); color: var(--text-3); }
.infra-domain__server { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); transition: color var(--dur-1); }
.infra-domain__server:hover { color: var(--text); }

/* Lane: the window runs right (past) → left (future); positions are logical-start percentages. */
.infra-domain__lane { position: relative; height: 38px; border-radius: var(--r-full); background: var(--sunken); border: 1px solid var(--border); }
/* Axis: month names on the first line, the "today" pill on the second, so they never collide.
   Narrow lanes (container query) keep every other month. */
.infra-axis { height: 40px; background: none; border: 0; container-type: inline-size; }
.infra-axis__tick, .infra-axis__today { position: absolute; transform: translateX(50%); font-size: var(--fs-2xs); white-space: nowrap; }
.infra-axis__tick { top: 0; color: var(--text-3); }
.infra-axis__today {
  top: 19px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--fw-semibold);
  line-height: 18px;
}
@container (max-width: 760px) {
  .infra-axis__tick:nth-of-type(even) { display: none; }
}
.infra-domain__today { position: absolute; inset-block: 5px; width: 2px; transform: translateX(50%); border-radius: var(--r-full); background: var(--accent); opacity: 0.7; }
.infra-domain__bar {
  position: absolute;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: var(--r-full);
  background: linear-gradient(to left, color-mix(in srgb, var(--tone) 20%, transparent), var(--tone));
  transform-origin: right;
  animation: iv-grow var(--dur-4) var(--ease-out) both;
}
.infra-domain__mark {
  position: absolute;
  top: 50%;
  width: 24px; height: 24px;
  margin-top: -12px;
  display: grid; place-items: center;
  transform: translateX(50%);
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--tone);
  color: var(--tone-fg);
  box-shadow: 0 0 0 3px var(--sunken);
}
.infra-domain__mark--ssl { width: 20px; height: 20px; margin-top: -10px; z-index: 1; }
.infra-domain__mark.is-beyond { border-style: dashed; opacity: 0.6; }

.infra-domain__dates { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.infra-deadline { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tone-fg, var(--text-3)); white-space: nowrap; }
.infra-deadline__label { color: var(--text-2); }
.infra-deadline time { margin-inline-start: auto; font-weight: var(--fw-medium); }

@media (max-width: 1279px) {
  .infra-domain-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .infra-domain-kpis > .infra-next { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .infra-domain { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
  .infra-domain > .infra-domain__lane { grid-column: 1 / -1; order: 3; }
  .infra-domain--axis .infra-domain__info, .infra-domain--axis .infra-domain__dates { display: none; }
}
@media (max-width: 767px) {
  .infra-domain-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra-domain-kpis > .infra-kpi:last-child { grid-column: 1 / -1; }
  .infra-next__days { font-size: var(--fs-3xl); }
}
@media (max-width: 479px) {
  .infra-domain { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .infra-status-bar__seg, .infra-domain__bar { animation: none; }
}

/* ==========================================================================
   Manage: server / service / domain forms, the add-link dialog, inline actions, danger zones
   ========================================================================== */

/* ---------- Form pages ---------- */
.infra-form { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.infra-form .alert p + p { margin-top: 2px; }
.infra-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--sp-5); align-items: start; }
.infra-form__main, .infra-form__side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.infra-form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.infra-form__fields--4 { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
.infra-form__fields--port { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.infra-form__full { grid-column: 1 / -1; min-width: 0; }
.infra-form__wide { min-width: 0; }
.infra-form__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.infra-req { color: var(--tone-red-fg); }

.infra-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.infra-fieldset > legend { padding: 0; margin-bottom: var(--sp-2); }
.infra-seg .segmented__item { position: relative; }
.infra-seg--block { display: flex; width: 100%; }
.infra-seg--block .segmented__item { flex: 1 1 auto; justify-content: center; }
.infra-seg--wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-lg); }

.infra-switch-row { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--sunken); border: 1px solid var(--border); }
.infra-switch-row .switch { align-items: flex-start; width: 100%; }
.infra-switch-row .switch input { margin-top: 2px; }

/* Live preview (server chip, service card) on a dotted stage, like the network map */
.infra-preview__stage {
  display: grid; place-items: center;
  min-height: 132px;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--divider);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--indigo) 8%, transparent), transparent 65%),
    radial-gradient(circle, var(--chart-grid) 1px, transparent 1.2px) 0 0 / 18px 18px;
}
.infra-preview__stage--card { place-items: stretch; min-height: 0; padding: var(--sp-4); }
.infra-preview__chip {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  max-width: 100%;
  padding-block: 7px;
  padding-inline: 7px var(--sp-5);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--tone, var(--tone-neutral)) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--tone, var(--tone-neutral)) 40%, var(--border));
  transition: background var(--dur-2), border-color var(--dur-2);
}
.infra-preview__icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--tone-bg, var(--chip));
  color: var(--tone-fg, var(--text-2));
}
.infra-preview__name { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-preview__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--sp-3); }
.infra-preview__service { height: auto; pointer-events: none; box-shadow: var(--shadow-1); }

/* Service kind: icon cards (radio-backed) */
.infra-kind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr)); gap: var(--sp-2); }
.infra-kind-option {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 92px;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--sunken);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.infra-kind-option:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.infra-kind-option .chip-icon { transition: transform var(--dur-3) var(--ease-spring); }
.infra-kind-option__label { font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-snug); }
.infra-kind-option__check {
  position: absolute; top: 8px; inset-inline-end: 8px;
  color: var(--tone-fg);
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.infra-kind-option:has(input:checked) { border-color: color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 9%, var(--sunken)); }
.infra-kind-option:has(input:checked) .chip-icon { transform: scale(1.08); }
.infra-kind-option:has(input:checked) .infra-kind-option__label { color: var(--text); font-weight: var(--fw-medium); }
.infra-kind-option:has(input:checked) .infra-kind-option__check { opacity: 1; transform: none; }
.infra-kind-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.infra-legend-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.infra-legend-list li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-snug); }
.infra-legend-list .badge { flex: none; min-width: 108px; }

/* ---------- Danger zone (bottom of detail / edit pages) ---------- */
.infra-danger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  border-color: color-mix(in srgb, var(--tone-red) 24%, var(--border));
}
.infra-danger__main { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.infra-danger__text { margin-top: 2px; max-width: 70ch; font-size: var(--fs-sm); color: var(--text-2); line-height: var(--lh-snug); }
.infra-danger__impact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.infra-danger__impact li {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px;
  padding-inline: 10px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--sunken);
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.infra-danger__impact b { font-weight: var(--fw-semibold); color: var(--text); }
.infra-danger__impact .icon { opacity: 0.8; }
.infra-danger__impact li.is-lost { color: var(--tone-red-fg); border-color: color-mix(in srgb, var(--tone-red) 26%, transparent); background: var(--tone-red-bg); }
.infra-danger__impact li.is-lost b { color: inherit; }

/* ---------- Inline actions on lists ---------- */
.infra-head-actions { justify-content: flex-end; }
.infra-tab-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.infra-list__actions { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.infra-list__line { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.infra-list__line .infra-list__title { flex: 1; min-width: 0; }
.infra-danger-btn:hover { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.infra-service__edit { margin-inline-start: -4px; }
.infra-domain__edit { margin-inline-start: auto; }
.infra-links__remove { flex: none; }
.infra-add-row {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;
  margin-top: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px dashed var(--border-strong);
  color: var(--text-2);
  font-size: var(--fs-sm);
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.infra-add-row:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: var(--accent-soft); }
.infra-map__actions { display: flex; align-items: center; gap: var(--sp-3); }
.infra-map__add { flex: none; }

/* ---------- Add-link dialog ---------- */
@media (min-width: 768px) { .infra-link-modal { width: min(600px, calc(100vw - 24px)); } }
.infra-link-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.infra-link-form .modal__body { flex: 1 1 auto; min-height: 0; }

.infra-direction { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.infra-direction__option {
  position: relative;
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--sunken);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2);
}
.infra-direction__option:hover { border-color: var(--border-strong); }
.infra-direction__option:has(input:checked) { border-color: color-mix(in srgb, var(--indigo) 55%, transparent); background: var(--tone-indigo-bg); }
.infra-direction__option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.infra-direction__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.infra-direction__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); }
.infra-direction__check { flex: none; color: var(--tone-indigo-fg); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.infra-direction__option:has(input:checked) .infra-direction__check { opacity: 1; transform: none; }
.infra-direction__route { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); color: var(--text-2); }
.infra-direction__route b { padding: 2px 8px; border-radius: var(--r-full); background: var(--chip); color: var(--text); font-weight: var(--fw-medium); }
.infra-direction__route .icon { flex: none; color: var(--text-3); }
.infra-direction__hint { font-size: var(--fs-xs); color: var(--text-3); line-height: var(--lh-snug); }

.infra-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.infra-choice {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 40px;
  padding-inline: 5px var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--sunken);
  color: var(--text-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-2), border-color var(--dur-2), background var(--dur-2);
}
.infra-choice:hover { color: var(--text); border-color: var(--border-strong); }
.infra-choice:has(input:checked) { color: var(--text); border-color: color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 12%, var(--sunken)); }
.infra-choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.infra-link-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-3); align-items: start; }

/* Route preview: source → target, laid out as flex items so bidi never flips the arrow */
.infra-route {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px dashed var(--border-strong);
  background: var(--sunken);
}
.infra-route__end {
  min-width: 0; max-width: 40%;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: var(--card-3);
  color: var(--text);
  font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.infra-route__edge { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 48px; color: var(--indigo); }
.infra-route__kind { font-size: var(--fs-2xs); color: var(--text-3); white-space: nowrap; }

/* ---------- Responsive (manage) ---------- */
@media (max-width: 1279px) {
  .infra-form__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .infra-form__fields--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .infra-form__fields--4 > .infra-form__wide { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .infra-form__fields, .infra-form__fields--port { grid-template-columns: minmax(0, 1fr); }
  .infra-form__actions { flex-direction: column-reverse; align-items: stretch; }
  .infra-form__actions .btn { width: 100%; }
  .infra-danger { grid-template-columns: minmax(0, 1fr); }
  .infra-danger__impact { order: 1; }
  .infra-danger__action { order: 2; }
  .infra-danger__action .btn { width: 100%; }
  .infra-head-actions > * { flex: 1 1 auto; }
  .infra-head-actions .segmented__item { flex: 1; justify-content: center; }
  .infra-head-actions > .btn { justify-content: center; }
  .infra-tab-actions { width: 100%; }
  .infra-tab-actions > * { flex: 1 1 auto; justify-content: center; }
  /* Row actions: name on its own line, actions at the logical end of the second; 40px touch targets. */
  .infra-list__item:has(.infra-list__actions) .infra-list__main { flex: 1 1 calc(100% - 48px); }
  .infra-list__actions { margin-inline-start: auto; }
  :is(.infra-list__actions, .infra-list__line, .infra-links__remove, .infra-service__foot, .infra-domain__info) .icon-btn--sm { --ib: 40px; }
}
@media (max-width: 479px) {
  .infra-form__fields--4 { grid-template-columns: minmax(0, 1fr); }
  .infra-seg--block .segmented__item { padding-inline: var(--sp-2); }
  .infra-kind-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .infra-direction, .infra-link-form__row { grid-template-columns: minmax(0, 1fr); }
  .infra-map__add { width: var(--btn-h); padding-inline: 0; }
  .infra-map__add-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .infra-kind-option, .infra-kind-option .chip-icon, .infra-kind-option__check, .infra-direction__check { transition: none; }
}