/* Interactive fail2ban bypass simulator for the "Bypass Fail2Ban with IPv6"
   project page. The article's write-up typography now lives in the shared
   article.css (scoped under .md-article); this file holds only the simulator.
   Everything is scoped under .f2b-sim and relies on the CSS custom properties
   (--fg, --border, --accent, --muted, --code-bg) defined by the enclosing
   .md-article wrapper. */

.f2b-sim {
  --syn: #6fb4ff;
  --ftp: #ffb84d;
  --ban: #ff8e7a;
  --rotate: #b79cff;
  --ok: #5fd99c;
  --sys: #8ca0b3;

  margin: 1.9rem 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.f2b-sim .f2b-head { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.f2b-sim .f2b-eyebrow {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.f2b-sim h3 {
  margin: 6px 0 5px;
  padding: 0;
  border: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fg);
}
.f2b-sim .f2b-lede {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.f2b-sim .f2b-lede code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.f2b-sim .f2b-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.f2b-sim .f2b-panel { background: #fff; padding: 14px 18px; }
.f2b-sim .f2b-panel-label {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* attacker readouts */
.f2b-sim .f2b-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.f2b-sim .f2b-row:last-child { border-bottom: 0; }
.f2b-sim .f2b-k { font-size: 0.82rem; color: var(--muted); }
.f2b-sim .f2b-v {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--fg);
  text-align: right;
  word-break: break-all;
}
.f2b-sim .f2b-v.hot { color: var(--ban); font-weight: 700; }

/* fail2ban jail-status card (mirrors `fail2ban-client status vsftpd`) */
.f2b-sim .f2b-jail {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  white-space: pre;
  overflow: auto;
  max-height: 168px;
}
.f2b-sim .f2b-jail b { color: var(--ban); }

/* controls */
.f2b-sim .f2b-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.f2b-sim button {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 8px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}
.f2b-sim button:hover:not(:disabled) { transform: translateY(-1px); }
.f2b-sim button:focus { outline: none; }
.f2b-sim button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.f2b-sim button.ghost { background: #fff; color: var(--fg); border-color: var(--border); }
.f2b-sim button:disabled { opacity: 0.4; cursor: default; }
.f2b-sim .f2b-hint {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

/* dark packet log (a terminal) */
.f2b-sim .f2b-log {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.85;
  padding: 12px 16px;
  height: 210px;
  overflow-y: auto;
  background: #0f1b29;
  color: #b8c9da;
}
.f2b-sim .f2b-log .ln { opacity: 0; animation: f2b-fadein 0.3s forwards; }
.f2b-sim .f2b-log .tag { font-weight: 700; margin-right: 8px; }
.f2b-sim .f2b-log .tag.syn { color: var(--syn); }
.f2b-sim .f2b-log .tag.ftp { color: var(--ftp); }
.f2b-sim .f2b-log .tag.ban { color: var(--ban); }
.f2b-sim .f2b-log .tag.rotate { color: var(--rotate); }
.f2b-sim .f2b-log .tag.ok { color: var(--ok); }
.f2b-sim .f2b-log .tag.sys { color: var(--sys); }
.f2b-sim .f2b-log .muted { color: var(--sys); }
@keyframes f2b-fadein { to { opacity: 1; } }

/* success banner */
.f2b-sim .f2b-result {
  padding: 16px 18px;
  background: #eaf7ef;
  border-top: 1px solid #b6e2c6;
  color: #1a7f43;
  font-size: 0.95rem;
}
.f2b-sim .f2b-result strong {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.f2b-sim .f2b-result .f2b-sub { display: block; margin-top: 4px; color: #2f8f57; font-size: 0.86rem; }

@media (max-width: 700px) {
  .f2b-sim .f2b-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .f2b-sim .f2b-log .ln { animation: none; opacity: 1; }
  .f2b-sim button:hover:not(:disabled) { transform: none; }
}