/* flow.css — diagrama netfilter animată (pagina /flow, FAZA 2).
   Mobile-first; responsive 375/768/1280/2560 fără scroll orizontal (SVG scalează).
   Doar transform/opacity pentru animații; respectă prefers-reduced-motion. */

.flow-page { width: 100%; }
.flow-note { max-width: 70ch; }

/* Selectorul de tip de trafic */
.flow-selector {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0;
}
.flow-btn { flex: 0 1 auto; }
.flow-btn[aria-pressed="true"] {
  background: var(--accent); color: #04121a; border-color: var(--accent);
  box-shadow: 0 0 18px -4px var(--accent-glow);
}

/* Descrierea curentă (aria-live) */
.flow-desc {
  color: var(--ink-dim); font-size: var(--fs-sm);
  border-left: 2px solid var(--accent-line);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); margin: var(--sp-3) 0;
  max-width: 90ch;
}

/* Containerul SVG — scalează la lățimea coloanei, fără scroll orizontal */
.flow-trace-wrap { width: 100%; }
.flow-svg {
  width: 100%; height: auto; display: block;
  max-width: 100%; overflow: visible;
  background: radial-gradient(ellipse at 50% 30%, var(--bg-3) 0%, #04060c 70%);
  border: var(--border-soft); border-radius: var(--radius);
}

/* Traseele (pline) — invizibile, doar pentru mișcare */
.flow-trace { fill: none; stroke: none; }

/* Hook-urile */
.hook .hook-box {
  fill: color-mix(in srgb, var(--bg-3) 70%, transparent);
  stroke: var(--border-soft); stroke-width: 1.5;
  transition: stroke var(--dur) var(--ease), fill var(--dur) var(--ease),
              filter var(--dur) var(--ease);
}
.hook .hook-name {
  fill: var(--ink); font-family: var(--font-mono);
  font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
}
.hook .hook-tables { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; }

/* Hook aprins (când pachetul îl atinge) */
.hook.is-active .hook-box {
  stroke: var(--accent); stroke-width: 2;
  fill: color-mix(in srgb, var(--accent) 16%, transparent);
  filter: drop-shadow(0 0 10px var(--accent-glow));
}
.hook.is-active .hook-name { fill: var(--accent); }
.hook.is-active .hook-tables { fill: var(--ink-dim); }

/* Pachetul demo (SIMULARE) */
.flow-packet {
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

/* Eticheta SIMULARE (SVG text) */
.flow-badge {
  fill: var(--mag); font-family: var(--font-mono); font-size: 13px;
  font-weight: 700; letter-spacing: 0.14em;
  opacity: 0.85;
}

/* Telefon ≤600 (inclusiv 375): diagrama e mai compactă, text mai mic. */
@media (max-width: 600px) {
  .flow-btn { flex: 1 1 100%; justify-content: center; }
  .flow-desc { font-size: var(--fs-xs); }
  .hook .hook-name { font-size: 11px; }
  .hook .hook-tables { font-size: 8px; }
  .flow-badge { font-size: 10px; }
}

/* Tabletă 601–1024 (inclusiv 768). */
@media (min-width: 601px) and (max-width: 1024px) {
  .hook .hook-name { font-size: 13px; }
  .hook .hook-tables { font-size: 10px; }
}

/* Laptop/desktop 1025–1920 (inclusiv 1280): diagrama largă. */
@media (min-width: 1025px) and (max-width: 1920px) {
  .flow-trace-wrap { max-width: 1000px; }
}

/* Ecran lat ≥1921 (inclusiv 2560): lățime max. conținut. */
@media (min-width: 1921px) {
  .flow-trace-wrap { max-width: 1000px; }
}

/* Reduced motion: fără glow pulsant (stare statică). */
@media (prefers-reduced-motion: reduce) {
  .flow-packet { filter: drop-shadow(0 0 4px var(--accent-glow)); }
  .hook.is-active .hook-box { filter: none; }
}