/* ==========================================================================
   Demo: "One network" — infrastructure dependency console.
   Markup is built by /js/demos/infrastructure.js inside [data-demo="infrastructure"].
   The console is always dark (an instrument panel), in both themes and on
   any surface. Crimson is reserved for alerts and primary actions.
   ========================================================================== */

.inf-demo { container-type: inline-size; container-name: inf; position: relative; }
.inf-demo__noscript { padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink-3); font-size: var(--fs-small); }

.inf {
  --inf-ink: var(--night-ink);
  --inf-ink-2: var(--night-ink-2);
  --inf-ink-3: var(--night-ink-3);
  --inf-ink-4: rgb(245 245 247 / 0.58);
  --inf-line: rgb(255 255 255 / 0.08);
  --inf-line-2: rgb(255 255 255 / 0.14);
  --inf-panel: rgb(255 255 255 / 0.025);
  --inf-alert: var(--crimson-300);
  --focus: 0 0 0 2px var(--night-1), 0 0 0 4px var(--night-ink);
  position: relative;
  display: grid;
  color: var(--inf-ink);
  background:
    radial-gradient(90% 60% at 20% 0%, rgb(var(--crimson-rgb) / 0.08), transparent 60%),
    linear-gradient(180deg, var(--night-1), var(--night));
  border: 1px solid var(--inf-line-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-text);
  letter-spacing: var(--tracking-body);
  color-scheme: dark;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 60px 120px -60px rgb(0 0 0 / 0.9);
}
/* Outline, not box-shadow: pressed rows, primary, action and disabled buttons set their own shadows,
   which would cancel a shadow ring exactly when a keyboard user acts. */
.inf :focus-visible { outline: 2px solid var(--night-ink); outline-offset: 2px; }
.inf p { margin: 0; }

/* Labels and tags ---------------------------------------------------------- */
.inf__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inf-ink-3);
  margin: 0;
}
.inf__label--dim { color: var(--inf-ink-4); letter-spacing: 0.08em; }
.inf__label .inf__label--dim { margin-left: 12px; text-transform: none; letter-spacing: 0; font-family: var(--font-text); font-size: 12px; }

/* State labels: a small glyph and text, never a box. Shape carries the state; crimson only for a real alert. */
.inf-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--inf-ink-3);
  transition: color 400ms var(--ease-soft);
}
.inf-tag::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; border: 1px solid currentColor; box-sizing: border-box; }
.inf-tag[data-tone="alert"] { color: var(--inf-alert); }
.inf-tag[data-tone="alert"]::before { background: currentColor; }
.inf-tag[data-tone="risk"] { color: var(--inf-ink-2); }
.inf-tag[data-tone="risk"]::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.inf-tag[data-tone="hold"] { color: var(--inf-ink-2); }
.inf-tag[data-tone="hold"]::before { border-style: dashed; }
.inf-tag[data-tone="recover"], .inf-tag[data-tone="active"] { color: #fff; }
.inf-tag[data-tone="active"]::before { background: currentColor; }

/* Buttons ------------------------------------------------------------------ */
.inf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--inf-line-2);
  background: rgb(255 255 255 / 0.04);
  color: var(--inf-ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-exit) var(--ease-out), opacity var(--t-med);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .inf-btn:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.3); } }
.inf-btn:active { transform: scale(0.97); }
.inf-btn .icon { flex: none; }
.inf-btn--primary { background: var(--crimson); border-color: rgb(255 255 255 / 0.14); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 0.2) inset; }
@media (hover: hover) { .inf-btn--primary:hover { background: var(--crimson-400); border-color: rgb(255 255 255 / 0.24); } }
/* Suggested actions: white, so crimson keeps meaning "alert" on the board */
.inf-btn--act { background: #fff; border-color: #fff; color: var(--night); box-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 10px 24px -14px rgb(0 0 0 / 0.9); }
@media (hover: hover) { .inf-btn--act:hover { background: rgb(255 255 255 / 0.86); border-color: rgb(255 255 255 / 0.86); } }
.inf-btn--ghost { background: transparent; }
.inf-btn[aria-disabled="true"] { cursor: default; transform: none; background: transparent; border-color: var(--inf-line-2); color: var(--inf-ink-2); box-shadow: none; }
.inf-btn[aria-disabled="true"] .icon { color: #fff; }
.inf-btn[data-play-toggle] .icon:nth-of-type(2) { display: none; }
.inf-btn[data-play-toggle][aria-pressed="true"] .icon:nth-of-type(1) { display: none; }
.inf-btn[data-play-toggle][aria-pressed="true"] .icon:nth-of-type(2) { display: block; }
.inf-btn[data-play-toggle][aria-pressed="true"] { border-color: rgb(255 72 99 / 0.5); color: #fff; }

/* Bar ---------------------------------------------------------------------- */
.inf__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--inf-line);
  background: rgb(255 255 255 / 0.015);
}
.inf__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inf__glyph { display: grid; place-items: center; flex: none; color: var(--night-ink); }
.inf__title { font-weight: 650; font-size: 15px; letter-spacing: -0.015em; color: #fff; white-space: nowrap; }
.inf__title span { margin-left: 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inf-ink-3); }
.inf__sub { font-size: 12px; color: var(--inf-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inf__phases { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.inf__phases li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 72px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inf-ink-4);
  transition: color 500ms var(--ease-soft);
}
.inf__phases li::before { content: ""; height: 2px; border-radius: 2px; background: rgb(255 255 255 / 0.1); transition: background-color 600ms var(--ease-soft); }
.inf__phases li.is-done { color: var(--inf-ink-2); }
.inf__phases li.is-done::before { background: rgb(255 255 255 / 0.55); }
.inf__phases li.is-now { color: #fff; }
.inf__phases li.is-now::before { background: var(--crimson-300); box-shadow: none; }
.inf__meta { justify-self: end; display: flex; align-items: center; gap: 14px; }
.inf__count { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inf-ink-3); }
.inf__count b { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; transition: color 400ms; }
.inf.has-risk .inf__count b { color: var(--inf-alert); }
.inf__ref { padding-left: 14px; border-left: 1px solid var(--inf-line-2); font-family: var(--font-mono); font-size: 9.5px; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inf-ink-4); text-align: right; white-space: nowrap; }

/* Main: map + side ---------------------------------------------------------- */
.inf__main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 29%, 360px); min-height: 0; }
.inf__map { position: relative; min-width: 0; border-right: 1px solid var(--inf-line); background: radial-gradient(80% 90% at 50% 50%, rgb(255 255 255 / 0.02), transparent 70%); display: grid; align-items: center; overflow: hidden; }
.inf__side { display: flex; flex-direction: column; min-width: 0; }

/* The map ------------------------------------------------------------------- */
.inf-svg { display: block; width: 100%; height: auto; overflow: hidden; user-select: none; -webkit-user-select: none; }
.inf-svg text { font-family: var(--font-mono); }
.inf-grid path { stroke: rgb(255 255 255 / 0.035); stroke-width: 1; vector-effect: non-scaling-stroke; }
.inf-refs text { font-size: 9px; fill: rgb(255 255 255 / 0.22); letter-spacing: 0.1em; }
.inf-contours path { fill: none; stroke: rgb(255 255 255 / 0.055); stroke-width: 1; vector-effect: non-scaling-stroke; }
.inf-river { fill: none; stroke: rgb(170 190 210 / 0.12); stroke-width: 3; stroke-linecap: round; }
.inf-sea { stroke: none; }
.inf-hatch { stroke: rgb(255 255 255 / 0.06); stroke-width: 1; }
.inf-coast { fill: none; stroke: rgb(255 255 255 / 0.28); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.inf-area { font-size: 10px; letter-spacing: 0.3em; fill: rgb(255 255 255 / 0.3); }
.inf-north path { fill: rgb(255 255 255 / 0.4); }
.inf-north text { font-size: 9px; fill: rgb(255 255 255 / 0.4); }
.inf-scale path { stroke: rgb(255 255 255 / 0.4); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.inf-scale text { font-size: 9px; fill: rgb(255 255 255 / 0.45); letter-spacing: 0.1em; }

.inf-layer { transition: opacity 500ms var(--ease-soft); }
.inf-layer.is-hidden { opacity: 0; pointer-events: none; }

/* Gas */
.inf-pipe { fill: none; stroke: rgb(255 255 255 / 0.16); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.inf-pipe-core { fill: none; stroke: rgb(255 255 255 / 0.72); stroke-width: 2.4; stroke-linecap: round; }
.inf-pipe--spur { stroke-width: 7; }
.inf-pipe-core.inf-pipe--spur { stroke-width: 2; }
.inf-line-lbl, .inf-loop-lbl { font-size: 9.5px; letter-spacing: 0.18em; fill: rgb(255 255 255 / 0.52); }
.inf-loop { fill: none; stroke: rgb(255 255 255 / 0.26); stroke-width: 2; stroke-dasharray: 5 6; transition: stroke 600ms var(--ease-soft), stroke-width 600ms; }
.inf-loop[data-state="active"] { stroke: rgb(255 255 255 / 0.78); stroke-width: 2.6; stroke-dasharray: none; }
.inf-kp path { stroke: rgb(255 255 255 / 0.45); stroke-width: 1; vector-effect: non-scaling-stroke; }
.inf-kp text { font-size: 9px; fill: rgb(255 255 255 / 0.5); letter-spacing: 0.08em; }

/* Flows: dashes travelling along a line (paused unless the console is live) */
.inf-flow { fill: none; stroke-linecap: round; pointer-events: none; animation: inf-flow 1.6s linear infinite; animation-play-state: paused; }
.inf-demo.is-live .inf-flow { animation-play-state: running; }
.inf-flow--gas { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 3 17; opacity: 0.85; }
.inf-flow--power { stroke: rgb(255 255 255 / 0.9); stroke-width: 1.6; stroke-dasharray: 2 22; animation-duration: 1.1s; }
.inf-flow--loop { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 3 17; opacity: 0; transition: opacity 600ms; }
.inf-flow[data-state="active"] { opacity: 0.9; }
.inf-flow[data-state="risk"] { stroke: var(--inf-alert); animation-duration: 4.8s; opacity: 0.9; }
.inf-flow[data-state="off"] { opacity: 0; }
@keyframes inf-flow { to { stroke-dashoffset: -40; } }

/* Highlight of the downstream section and the isolated section */
.inf-hl { fill: none; stroke: var(--inf-alert); stroke-width: 9; stroke-linecap: round; opacity: 0; transition: opacity 700ms var(--ease-soft), stroke 600ms; pointer-events: none; }
.inf-hl[data-state="risk"] { opacity: 0.55; }
.inf-hl[data-state="ok"] { opacity: 0; }
.inf-hl.is-traced { opacity: 0.35; stroke: #fff; }
.inf-hl.is-traced[data-state="risk"] { opacity: 0.8; stroke: var(--inf-alert); }
.inf-iso { fill: none; stroke: var(--night-1); stroke-width: 10; stroke-linecap: butt; opacity: 0; transition: opacity 600ms var(--ease-soft); pointer-events: none; }
.inf-iso[data-state="hold"] { opacity: 1; stroke: rgb(12 12 14); stroke-dasharray: 4 3; }
.inf-iso.is-traced { opacity: 0.6; stroke: rgb(255 255 255 / 0.5); }

/* Power */
.inf-power { fill: none; stroke: rgb(255 255 255 / 0.36); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 600ms var(--ease-soft); }
.inf-tower { fill: var(--night-1); stroke: rgb(255 255 255 / 0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.inf-power[data-state="risk"] { stroke: rgb(255 72 99 / 0.75); }

/* Data */
.inf-data { fill: none; stroke: rgb(255 255 255 / 0.3); stroke-width: 1.2; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke 600ms var(--ease-soft), opacity 600ms; }
.inf-uplink { stroke: rgb(255 255 255 / 0.42); stroke-dasharray: 2 5; animation: inf-flow 2.4s linear infinite reverse; animation-play-state: paused; }
.inf-demo.is-live .inf-uplink { animation-play-state: running; }
.inf-tel { opacity: 0.45; }
.inf-data[data-state="risk"], .inf-data[data-state="alert"] { stroke: rgb(255 72 99 / 0.8); opacity: 1; }
.inf-data[data-state="hold"] { opacity: 0.15; }

/* Traced edges (selection) */
.inf-power.is-traced, .inf-data.is-traced { stroke: #fff; opacity: 1; }
.inf-power.is-traced[data-state="risk"], .inf-data.is-traced[data-state="risk"] { stroke: var(--inf-alert); }
.inf.has-selection .inf-layer .inf-edge:not(.is-traced) { opacity: 0.35; }

/* Port */
.inf-jetty { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-width: 2; }
.inf-ship { fill: rgb(255 255 255 / 0.55); }
.inf-lane { fill: none; stroke: rgb(255 255 255 / 0.25); stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }

/* Nodes */
.inf-node { --ns: 1; }
.inf-glyph .inf-g { transform: scale(var(--ns)); transform-box: fill-box; transform-origin: center; }
.inf-node .g-body { fill: var(--night-1); stroke: rgb(255 255 255 / 0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill 500ms var(--ease-soft), stroke 500ms var(--ease-soft); }
.inf-node .g-core, .inf-node .g-mark { fill: rgb(255 255 255 / 0.85); transition: fill 500ms; }
.inf-node .g-line { fill: none; stroke: rgb(255 255 255 / 0.85); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.inf-node .g-panel { fill: rgb(255 255 255 / 0.18); stroke: rgb(255 255 255 / 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.inf-node--valve .g-body { fill: var(--night-1); stroke-width: 1.2; }
.inf-node--plain .g-body { stroke: rgb(255 255 255 / 0.7); }
.inf-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; fill: #fff; paint-order: stroke; stroke: var(--night-1); stroke-width: 4px; stroke-linejoin: round; }
.inf-lbl-sub { font-size: 9.5px; letter-spacing: 0.04em; fill: rgb(255 255 255 / 0.55); paint-order: stroke; stroke: var(--night-1); stroke-width: 4px; stroke-linejoin: round; }
.inf-node--valve .inf-lbl, .inf-node--plain .inf-lbl, .inf-node--sat .inf-lbl, .inf-node--room .inf-lbl { font-size: 10px; font-weight: 500; fill: rgb(255 255 255 / 0.62); }
.inf-hit { fill: transparent; }
.inf-node[data-asset] { cursor: pointer; }
@media (hover: hover) { .inf-node[data-asset]:hover .g-body { stroke: #fff; fill: var(--night-3); } }
.inf-reticle { fill: none; stroke: var(--inf-alert); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; transform: scale(1.5); transform-box: fill-box; transform-origin: center; transition: opacity 400ms var(--ease-soft), transform 700ms var(--ease-spring); }

.inf-node[data-tone="alert"] .g-body { fill: var(--crimson); stroke: var(--crimson-300); }
.inf-node[data-tone="alert"] .g-core, .inf-node[data-tone="alert"] .g-mark { fill: #fff; }
.inf-node[data-tone="alert"] .inf-reticle { opacity: 1; transform: none; }
.inf-node[data-tone="risk"] .g-body { stroke: var(--crimson-300); fill: rgb(90 4 20); }
.inf-node[data-tone="risk"] .g-line, .inf-node[data-tone="risk"] .g-core, .inf-node[data-tone="risk"] .g-mark { stroke: var(--crimson-300); fill: var(--crimson-300); }
.inf-node[data-tone="risk"] .g-line { fill: none; }
.inf-node[data-tone="risk"] .inf-lbl { fill: var(--crimson-300); }
.inf-node[data-tone="hold"] .g-body { fill: rgb(40 40 46); stroke: rgb(255 255 255 / 0.55); stroke-dasharray: 3 2; }
.inf-node[data-tone="hold"] .g-core { fill: rgb(255 255 255 / 0.4); }
.inf-node[data-tone="recover"] .g-body { stroke: #fff; fill: var(--night-3); }
.inf-node[data-tone="closed"] .g-body { fill: #fff; stroke: #fff; }
.inf-node[data-tone="closed"] .inf-lbl { fill: #fff; }
.inf-node.is-selected .g-body { stroke: #fff; stroke-width: 2.4; }
.inf-node.is-selected .inf-reticle { opacity: 1; transform: none; stroke: #fff; }
.inf-node.is-selected[data-tone="alert"] .inf-reticle { stroke: var(--inf-alert); }

/* Drone */
.inf-drone-route { fill: none; stroke: rgb(255 255 255 / 0.5); stroke-width: 1.2; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 600ms; pointer-events: none; }
.inf-drone-route[data-state="active"], .inf-drone-route[data-state="done"] { opacity: 1; }
.inf-drone-route[data-state="done"] { opacity: 0.35; }
.inf-drone-route.is-traced { opacity: 1; stroke: #fff; }
.inf-drone { pointer-events: none; }
.inf-drone__body { opacity: 0; transition: opacity 500ms; }
.inf.drone-out .inf-drone__body { opacity: 1; }
.inf-drone__rot path { fill: #fff; stroke: var(--night-1); stroke-width: 1; filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.6)); }
.inf-drone__lbl { font-size: 10px; }
.inf-drone__orbit { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 600ms; animation: inf-spin 14s linear infinite; animation-play-state: paused; }
.inf-demo.is-live .inf-drone__orbit { animation-play-state: running; }
.inf.drone-on .inf-drone__orbit { opacity: 1; }
@keyframes inf-spin { to { transform: rotate(360deg); } }

/* Map overlays */
.inf__banner {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 6px 12px 6px 6px;
  border-radius: 4px;
  background: rgb(40 2 10 / 0.72);
  border: 1px solid rgb(255 72 99 / 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-soft), transform 600ms var(--ease-out);
  pointer-events: none;
}
.inf__banner b { padding: 3px 7px; border-radius: 2px; background: var(--crimson); font-weight: 600; }
.inf__banner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.inf__banner em { font-style: normal; color: rgb(255 255 255 / 0.6); white-space: nowrap; }
.inf:not([data-phase="idle"]):not([data-phase="contained"]) .inf__banner { opacity: 1; transform: none; }
.inf[data-phase="recover"] .inf__banner { border-color: rgb(255 255 255 / 0.3); background: rgb(10 10 12 / 0.7); }
.inf[data-phase="recover"] .inf__banner b { background: rgb(255 255 255 / 0.16); }

/* Side: signal + board ------------------------------------------------------- */
.inf__signal { padding: 16px 18px 14px; border-bottom: 1px solid var(--inf-line); }
.inf__signal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inf__reading { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.inf__reading b { font-family: var(--font-mono); font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.inf__reading span { font-family: var(--font-mono); font-size: 11px; color: var(--inf-ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.inf__chart { display: block; width: 100%; height: 52px; margin-top: 8px; overflow: visible; }
.inf__band { fill: rgb(255 255 255 / 0.05); stroke: rgb(255 255 255 / 0.12); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.inf__trace { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: stroke 500ms; }
.inf__trace.is-low { stroke: var(--inf-alert); }

.inf__board { display: flex; flex-direction: column; flex: 1; padding: 14px 10px 12px; min-height: 0; }
.inf__board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 8px 8px; }
.inf__board h3.inf__label { font-weight: 500; }
.inf__rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.inf-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 5px 8px;
  border-radius: 8px;
  text-align: left;
  color: var(--inf-ink-2);
  transition: background-color var(--t-fast);
}
@media (hover: hover) { .inf-row:hover { background: rgb(255 255 255 / 0.05); } }
.inf-row[aria-pressed="true"] { background: rgb(255 255 255 / 0.09); box-shadow: inset 2px 0 0 #fff; }
.inf .inf-row:focus-visible { outline-offset: -2px; }
.inf-row__id { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: #fff; }
.inf-row__name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inf-row[data-tone="alert"] .inf-row__id, .inf-row[data-tone="risk"] .inf-row__id { color: var(--inf-alert); }
.inf__inspect { margin-top: auto; padding: 12px 8px 2px; min-height: 58px; font-size: 12px; line-height: 1.5; color: var(--inf-ink-3); border-top: 1px solid var(--inf-line); }
.inf__inspect b { font-family: var(--font-mono); color: #fff; font-weight: 600; }
.inf__inspect span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inf-ink-4); margin-left: 4px; }

/* Deck: prompt, chain, actions, done ----------------------------------------- */
.inf__deck { display: grid; gap: 16px; padding: 18px; border-top: 1px solid var(--inf-line); background: rgb(255 255 255 / 0.015); }
.inf__prompt { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.inf__prompt-title { margin-top: 6px !important; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; color: #fff; }
.inf__prompt-text { margin-top: 6px !important; max-width: 560px; font-size: 13.5px; line-height: 1.5; color: var(--inf-ink-3); }
.inf__prompt-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.inf__chain { display: grid; gap: 10px; animation: inf-in 600ms var(--ease-out); }
.inf__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.inf__links li { display: inline-flex; align-items: center; gap: 6px; }
.inf__links li + li::before { content: ""; width: 18px; height: 1px; background: rgb(255 255 255 / 0.2); transition: background-color 500ms; }
.inf__links li span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--inf-line-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--inf-ink-4);
  transition: color 400ms, border-color 400ms, background-color 400ms;
}
.inf__links li.is-lit span { color: var(--inf-alert); border-color: rgb(255 72 99 / 0.6); background: rgb(255 72 99 / 0.08); }
.inf__links li.is-lit::before { background: var(--inf-alert); }
.inf__links li.is-root.is-lit span { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.inf[data-phase="recover"] .inf__links li.is-root span { background: transparent; }
/* Contained: the isolated section is held for repair, not alarming */
.inf[data-phase="contained"] .inf__links li.is-root span { background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.06) 0 3px, transparent 3px 6px); border-style: dashed; border-color: rgb(255 255 255 / 0.45); color: var(--inf-ink-2); }

.inf__actions { display: grid; gap: 12px; animation: inf-in 700ms var(--ease-out); }
.inf__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.inf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 14px;
  border-radius: 12px;
  background: var(--inf-panel);
  border: 1px solid var(--inf-line-2);
  transition: border-color 500ms, background-color 500ms;
}
.inf-card__n { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--inf-alert); }
.inf-card__title { font-size: 14px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; color: #fff; }
.inf-card__text { font-size: 12.5px; line-height: 1.5; color: var(--inf-ink-3); }
.inf-card__text a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.35); text-underline-offset: 3px; white-space: nowrap; }
.inf-card__text a:hover { text-decoration-color: #fff; }
.inf-card .inf-btn { margin-top: auto; align-self: flex-start; }
.inf-card .inf-card__text { margin-bottom: 8px; }
.inf-card.is-done { border-color: rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.05); }
.inf-card.is-done .inf-card__n { color: var(--inf-ink-3); }

.inf__done { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-radius: 12px; border: 1px solid rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.04); animation: inf-in 700ms var(--ease-out); }
.inf__done > div { flex: 1; min-width: 220px; }
.inf__done .inf__prompt-title { margin-top: 0 !important; }
.inf__done-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--crimson); flex: none; }
@keyframes inf-in { from { opacity: 0; transform: translateY(8px); } }

/* Foot ----------------------------------------------------------------------- */
.inf__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; padding: 12px 18px; border-top: 1px solid var(--inf-line); }
.inf__controls { display: flex; gap: 8px; }
.inf[data-phase="idle"]:not(.is-playing) .inf__controls { display: none; }
.inf__layers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inf__layers .inf__label { margin-right: 6px; }
.inf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--inf-line-2);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--inf-ink-2);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
@media (hover: hover) { .inf-toggle:hover { background: rgb(255 255 255 / 0.06); color: #fff; } }
.inf-toggle[aria-pressed="false"] { color: var(--inf-ink-4); border-style: dashed; }
.inf-toggle[aria-pressed="false"] .inf-key { opacity: 0.35; }
.inf-key { display: inline-block; width: 18px; height: 0; border-top: 2px solid #fff; }
.inf-key--power { border-top: 1.5px solid rgb(255 255 255 / 0.7); }
.inf-key--data { border-top: 2px dotted rgb(255 255 255 / 0.8); }
.inf__live { flex: 1 1 260px; min-height: 1.4em; margin-left: auto !important; font-size: 12.5px; color: var(--inf-ink-3); text-align: right; }

/* Container sizes ------------------------------------------------------------ */
@container inf (max-width: 980px) {
  .inf__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .inf__phases { grid-column: 1 / -1; grid-row: 2; }
  .inf__phases li { flex: 1; min-width: 0; }
  .inf__main { grid-template-columns: minmax(0, 1fr); }
  .inf__map { border-right: 0; border-bottom: 1px solid var(--inf-line); }
  .inf__side { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .inf__signal { border-bottom: 0; border-right: 1px solid var(--inf-line); }
}
@container inf (max-width: 720px) {
  .inf { border-radius: var(--r-lg); }
  .inf__bar { padding: 12px 14px; gap: 12px; }
  .inf__sub, .inf__ref { display: none; }
  .inf__phases li { font-size: 9px; letter-spacing: 0.06em; }
  .inf__side { grid-template-columns: minmax(0, 1fr); }
  .inf__signal { border-right: 0; border-bottom: 1px solid var(--inf-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: end; }
  .inf__signal-head { grid-column: 1 / -1; }
  .inf__reading { grid-column: 2; grid-row: 2; margin: 0; }
  .inf__chart { grid-column: 1; grid-row: 2; height: 40px; margin-top: 10px; }
  .inf__cards { grid-template-columns: minmax(0, 1fr); }
  .inf__deck { padding: 16px 14px; }
  .inf__foot { padding: 12px 14px; }
  .inf__live { text-align: left; margin-left: 0 !important; flex-basis: 100%; }
  .inf__banner { bottom: 10px; left: 10px; font-size: 10px; }
  .inf__label .inf__label--dim { display: block; margin: 6px 0 0; }
  .inf__banner em { display: none; }
  /* Bigger marks and labels when the map is drawn small */
  .inf-node { --ns: 1.7; }
  .inf-lbl { font-size: 22px; stroke-width: 6px; }
  .inf-lbl-sub, .inf-refs, .inf-kps, .inf-line-lbl, .inf-loop-lbl, .inf-scale, .inf-north, .inf-area, .inf-node--valve .inf-lbl, .inf-node--sat .inf-lbl, .inf-node--room .inf-lbl, .inf-node--plain .inf-lbl { display: none; }
  .inf-drone__lbl { display: none; }
  .inf-pipe { stroke-width: 12; }
  .inf-pipe-core { stroke-width: 3.4; }
  .inf-hl { stroke-width: 14; }
  .inf-iso { stroke-width: 15; }
  .inf-drone__rot path { transform: scale(1.8); transform-box: fill-box; transform-origin: center; }
}
@container inf (max-width: 420px) {
  .inf__title span { display: none; }
  .inf__meta { gap: 10px; }
  .inf__phases { gap: 3px; }
  .inf__phases li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inf-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
  .inf-row__name { font-size: 12px; }
  .inf__prompt-actions .inf-btn { flex: 1; }
  .inf__controls { flex: 1; }
  .inf__controls .inf-btn { flex: 1; }
  .inf__layers { gap: 5px; }
  .inf__layers .inf__label { display: none; }
  .inf-toggle { padding: 0 9px; gap: 6px; }
}

@container inf (max-width: 350px) {
  .inf__count span { display: none; }
}

/* Reduced motion: still, instant */
@media (prefers-reduced-motion: reduce) {
  .inf-flow, .inf-uplink, .inf-drone__orbit { animation: none !important; }
  .inf *, .inf *::before, .inf *::after { transition-duration: 0.01ms !important; }
}