/* ============= PERVADE SOFTWARE ============== */
/* ===== Global Style ===== */
:root {
  /* Backgrounds (cool blue-gray dark) */
  --bg-primary: #0d141e;
  --bg-secondary: #141c2a;
  --bg-tertiary: #1a2536;
  --bg-card: #111b28;
  --bg-dark: #090e18;
  --bg-hover: #1c2a3e;
  --bg-input: #0f1a26;

  /* Text (cool blue-gray) */
  --text-primary: #e4eef8;
  --text-secondary: #b4cce2;
  --text-muted: #7a96b6;
  --text-dim: #4d6a88;
  --text-faint: #2a4058;

  /* Borders (blue-gray) */
  --border-primary: #1c2c3e;
  --border-secondary: #26384a;
  --border-light: #31465c;

  /* Blue primary palette (muted, grayish blue) */
  --blue-primary: #5a92cc;
  --blue-dark: #3a72aa;
  --blue-light: #7aafe0;
  --blue-lighter: #a8d0f0;
  --blue-muted: #4a7eb0;
  --blue-subtle: rgba(90, 146, 204, 0.1);
  --blue-glow: rgba(90, 146, 204, 0.18);

  /* Status colors (muted to fit blue-gray) */
  --green: #3ea06c;
  --green-bg: rgba(62, 160, 108, 0.12);
  --green-border: rgba(62, 160, 108, 0.18);

  --yellow: #c9a84c;
  --yellow-bg: rgba(201, 168, 76, 0.12);
  --yellow-border: rgba(201, 168, 76, 0.18);

  --red: #cc5a4a;
  --red-bg: rgba(204, 90, 74, 0.12);
  --red-border: rgba(204, 90, 74, 0.18);

  --purple: #b08ad9;
  --purple-bg: rgba(176, 138, 217, 0.1);
  --purple-border: rgba(176, 138, 217, 0.14);

  --shadow-color: rgba(0, 0, 0, 0.5);
  --radius: 1vh;
  --radius-lg: 1.5vh;
  --transition: 0.2s ease;
  --font-mono: "IBM Plex Mono", monospace;
  --font-sans: "Space Grotesk", sans-serif;
  --font-inter: "Inter", system-ui, -apple-system, sans-serif;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Manrope", sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 2.2vh;
  line-height: 1.6;
  overflow-x: hidden;
}
button {
  padding: 0.5vh 2vh;
  line-height: 3vh;
  text-align: center;
  border: solid thin var(--border-secondary);
  border-radius: var(--radius);
  background-color: var(--blue-dark);
  color: var(--text-primary);
  font-weight: bold;
  font-size: 1.2vh;
}
h1 {
  font-size: 5vh;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: var(--text-primary);
}
h1 span {
  color: var(--blue-primary);
}
h2 {
  font-size: 4vh;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: var(--text-primary);
}
h3 {
  font-family: var(--font-mono);
  font-size: 1.3vh;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--blue-primary);
  display: flex;
  align-items: center;
  gap: 1.2vh;
  margin-bottom: 2.1vh;
}
p {
  font-size: 1.6vh;
  margin-bottom: 3vh;
  color: var(--text-muted);
}
p span {
  color: var(--text-dim);
}
a {
  text-decoration: none;
  text-transform: none;
  color: var(--blue-lighter);
}
/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 99999;

  /* Keep your original width and centering */
  width: 80vw;
  margin: 0 auto;

  background: var(--bg-primary);

  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Safely extend background to edges without breaking iOS */
.header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10vw;
  right: -10vw;
  background: var(--bg-primary);
  z-index: -1;
}

.header .logo {
  background-image: url("/w/i/Pervade_Logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  height: 4vh;
  line-height: 4.5vh;
  width: 8.2vw;
  padding-left: 3vw;
  margin-right: 0;
  display: inline-block;
  text-align: left;
}
.header .nav {
  gap: 2vh;
  font-size: 1.5vh;
  flex-wrap: wrap;

  display: flex;
  justify-content: center;
  align-items: center;

  flex: 1;
  width: auto;
  margin: 1vh auto;
  text-align: left;
  padding:0;
}
.header .nav li {
  text-align: center;
  list-style: none;
  display: inline-block;
  height: 3vh;
  min-width: 10vh;
  margin: 0.3vh 0.3vh;
  line-height: 3vh;
  white-space: nowrap;
  padding: 0 1vh;
  width: auto;
}
.header .nav li a {
  color: var(--text-secondary);
  font-style: none;
  text-decoration: none;
  font-size: 1.5vh;
  font-weight: 300;
}
.header .nav li.selected a,.header .nav li a:hover {
  color: var(--text-primary);
}
.header .actions {
  height: 4vh;
  margin-left: 0;
  width: auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1vh;

  text-align: right;
}
/* ===== Page Content ===== */
.page {
  width: 100%;
  top: 10vh;
}
#banner {
  margin-top: 0;
  height: 60vh;
  width: 100vw;
  background-image: url("/w/i/herobgsmall.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% bottom;
  background-size: 60% auto;
}
#bannercontent {
  width: 80vw;
  margin-left: 10vw;
  padding-top: 6vh;
}
#banner p {
  color: var(--text-primary);
  max-width: 30vw;
}
.container,
.ribbon .cols {
  width: 80vw;
  margin: 5vh 10vw;
}
.ribbon .cols {
  width: 80vw;
  margin: 5vh auto;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2vw;
}
.meta {
  display: flex;
  gap: 2vh;
  font-family: var(--font-mono);
  font-size: 1vh;
  color: var(--text-dim);
  flex-wrap: wrap;
  margin-top: 3vh;
}
.meta span {
  display: flex;
  align-items: center;
  gap: 0.5vh;
}
.meta .divider {
  width: 0.1vh;
  height: 1.2vh;
  background: var(--border-primary);
}
.ribbon {
  border-top: 0.3vh solid var(--border-primary);
  border-bottom: 0.3vh solid var(--border-primary);
  background: var(--bg-secondary);
}
#news-banner {
  padding: 2rem 1rem;
  text-align: center;
}
#news-banner h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}
#stats2 .cols {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 1.5rem;
}
#stats2 .cols .col {
  width: auto;
  margin: 0;
}
#stats2 .cols .col h3 {
  font-size: clamp(1.5rem, 5.5vw, 2.5rem);
}
@media (max-width: 700px) {
  #stats2 .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}
.ribbon .cols .col {
  width: 19vw;
  margin-left: 0.3vw;
  display: inline-block;
}
.ribbon .cols .col h3 {
  font-size: 4vh;
  color: var(--text-primary);
}
.ribbon .cols .col p {
  font-size: 1.5vh;
  color: var(--text-muted);
}
p#errorp {
  color:var(--red);
  text-align: center;
  padding:0;
  margin-bottom:2vh;
}
#stats.ribbon .cols .col,
#stats2.ribbon .cols .col,
#stats.ribbon .cols .col h3,
#stats2.ribbon .cols .col h3 {
  text-align: center;
}
#stats.ribbon .cols .col h3,
#stats2.ribbon .cols .col h3 {
  justify-content: center;
}
.boxes {
}
#projects .projects-intro {
  max-width: none;
}
#projects .project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
#projects .project-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 2vw, 2rem);
  border: 1px solid var(--border-primary);
  border-top: 3px solid var(--blue-primary);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  min-width: 0;
  cursor: pointer;
  transition: background-color var(--transition);
}
#projects .project-card:hover {
  background: var(--bg-dark);
}
#projects .project-card:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 4px;
}
#projects .project-card:nth-child(2) {
  border-top-color: var(--green);
}
#projects .project-card:nth-child(3) {
  border-top-color: var(--purple);
}
#projects .project-card p {
  font-size: 0.95rem;
  line-height: 1.65;
}
#projects .project-card .project-category {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#projects .project-card h3 {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  color: var(--text-primary);
  letter-spacing: normal;
  text-transform: none;
}
#projects .project-card .project-benefit {
  color: var(--blue-light);
  font-weight: 600;
}
#projects .project-card .project-technology {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--text-muted);
}
#projects .projects-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
#projects .projects-contact button {
  flex-shrink: 0;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
}
@media (max-width: 1000px) {
  #projects .project-grid {
    grid-template-columns: 1fr;
  }
  #projects .projects-contact {
    align-items: flex-start;
    flex-direction: column;
  }
}
.boxes .box {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 22vw;
  min-height: 50vh;
  height: auto;
  display: inline-block;
  background: var(--bg-primary);
  cursor: pointer;
  border: 0.1vh solid var(--border-secondary);
  border-radius: var(--radius-lg);
  padding: 3vh 2vw;
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.25s;
}
.boxes .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.3vh;
  background: linear-gradient(90deg, transparent, var(--blue-primary), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.boxes .box:hover {
  border-color: var(--blue-glow);
  box-shadow: 0 1vh 4vh -1vh var(--blue-glow);
}
.boxes .box:hover::before {
  opacity: 1;
}
.boxes .box h2 {
  font-size: 2.5vh;
}
.boxes .box .featurelist {
  margin: 1vh auto;
  border-radius: var(--radius);
  background-color: var(--bg-dark);
  padding: 1vh 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 20vh;
  height: auto;
  overflow: hidden;
}
.boxes .box .featurelist ul {
  padding-left: 1.5vw;
}
.boxes .box .featurelist li {
  list-style: none;
  color: var(--blue-primary);
  font-size: 1.4vh;
}
.boxes .box .featurelist li span {
  color: var(--text-secondary);
}
#about .boxes .box {
  height: 70vh;
  margin-bottom: 2vh;
}
/* ===== Footer ===== */
footer {
  background-color: var(--bg-primary);
  border-top: 0.1vh solid var(--border-primary);
}
.footer_inner {
  width: 80vw;
  margin-left: 10vw;
  padding-top: 3vh;
}
.footer_top {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr 2fr;
  gap: 4vh;
  padding-bottom: 4vh;
  border-bottom: 0.1vh solid var(--border-primary);
}
.footer_brand {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}
#companyinfo,
#companycreds {
  width: 25vw;
}
#companycreds {
  background-image: url("/w/i/acreds.png");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: 1vw;
  margin-right: 1vw;
}
#footmenu {
  width: 18vw;
  margin-left: 7vw;
}
.footer_logo {
  display: inline-flex;
  align-items: center;
  gap: 1vh;
  font-weight: 700;
  font-size: 1.8vh;
  line-height: 2.2vh;
  color: var(--text-primary);
}
.footer_tagline {
  font-size: 1vh;
  color: var(--text-dim);
  line-height: 1.1vh;
  margin: 0;
}
.footer_status {
  display: flex;
  align-items: center;
  gap: 0.7vh;
  font-family: var(--font-mono);
  font-size: 1vh;
  color: var(--text-dim);
}
.footer_status-dot {
  width: 0.5vh;
  height: 0.5vh;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  animation: pulse-dot 2s infinite;
}
.footer_nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vh;
}
.footer_col-title {
  font-family: var(--font-mono);
  font-size: 1vh;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  display: block;
  margin-bottom: 1.5vh;
}
.footer_col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  line-height: 0.8vh;
}
.footer_link {
  font-size: 1vh;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer_link:hover {
  color: var(--text-primary);
}
.footer_bottom {
  padding-top: 2vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5vh;
}
.footer_copy {
  font-family: var(--font-mono);
  font-size: 1vh;
  color: var(--text-dim);
}
.footer_legal {
  display: flex;
  gap: 2vh;
  flex-wrap: wrap;
}
.footer_legal-link {
  font-size: 1vh;
  color: var(--text-dim);
  text-decoration: none;
}
.footer_legal-link:hover {
  color: var(--text-primary);
}
/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 2vw;
}
.hidden {
  display: none;
}

.modal_backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(5, 9, 16, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: modalFadeIn 0.25s ease forwards;
}

.modal_content {
  position: relative;
  max-width: 90vw;
  max-height: 75vh;
  width: 52vw;
  background: var(--bg-card);
  padding: 3.5vh 3vw;
  border-radius: var(--radius-lg);
  border: 0.1vh solid var(--border-secondary);
  overflow: auto;
  animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow:
    0 0 0 0.1vh var(--border-primary),
    0 1vh 3vh rgba(0, 0, 0, 0.45),
    0 4vh 12vh rgba(0, 0, 0, 0.3),
    0 0 8vh -2vh var(--blue-glow);
}
.modal_content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2vw;
  right: 2vw;
  height: 0.2vh;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--blue-primary) 30%,
    var(--blue-light) 50%,
    var(--blue-primary) 70%,
    transparent 100%
  );
  border-radius: 0 0 1vh 1vh;
  opacity: 0.6;
}

.modal_close {
  position: absolute;
  top: 1.2vh;
  right: 1.2vw;
  width: 3.2vh;
  height: 3.2vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  border: 0.1vh solid var(--border-primary);
  border-radius: var(--radius);
  color: transparent; /* Hides the text */
  cursor: pointer;
  padding: 0;
  font-size: 0; /* Prevents text from taking up any layout space */
  transition:
    background 0.2s,
    border-color 0.2s;
  border-image: none;
}
/* Creates the two lines of the X */
.modal_close::before,
.modal_close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4vh;
  height: 0.15vh;
  background: var(--text-dim);
  border-radius: 0.1vh;
  transition: background 0.2s;
}
.modal_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal_close:hover {
  background: var(--red-bg);
  border-color: var(--red-border);
}
.modal_close:hover::before,
.modal_close:hover::after {
  background: var(--red);
}
.modal_close:active {
  transform: scale(0.92);
}

.modal_content h2 {
  font-size: 2.6vh;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 2.5vh 0;
  color: var(--text-primary);
}

.modal_content form {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.modal_content label {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
  font-family: var(--font-mono);
  font-size: 1vh;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  line-height: 1;
}

.modal_content input[type="email"],
.modal_content input[type="password"],
.modal_content input[type="text"],
.modal_content input[type="url"],
.modal_content textarea,
.modal_content select {
  padding: 1vh 1.2vw;
  background: var(--bg-input);
  border: 0.1vh solid var(--border-secondary);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1.5vh;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  -webkit-appearance: none;
}

.modal_content textarea {
  resize: vertical;
}

.modal_content input::placeholder {
  color: var(--text-faint);
}

.modal_content .remember-login {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.7vw;
  margin-top: 0.6vh;
  font-family: var(--font-sans);
  font-size: 1.3vh;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.4;
  text-transform: none;
  cursor: pointer;
}

.modal_content .remember-login input {
  width: 1.7vh;
  height: 1.7vh;
  margin: 0;
  accent-color: var(--blue-primary);
  cursor: pointer;
}

.modal_content input:focus,
.modal_content textarea:focus,
.modal_content select:focus {
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 0.3vh var(--blue-glow);
}

.modal_content button[type="submit"] {
  margin-top: 0.8vh;
  padding: 1.2vh 2vw;
  font-size: 1.3vh;
  line-height: 1;
  width: 100%;
  background: var(--blue-dark);
  border: 0.1vh solid var(--blue-muted);
  border-radius: var(--radius);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.modal_content button[type="submit"]:hover {
  background: var(--blue-primary);
  border-color: var(--blue-primary);
}
.modal_content button[type="submit"]:active {
  transform: scale(0.985);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.8vw;
  margin: 0.8vh 0;
  color: var(--text-faint);
  font-size: 1.1vh;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  height: 1px;
  flex: 1;
  background: var(--border-secondary);
  content: "";
}

.passkey-login-button {
  width: 100%;
  padding: 1.2vh 2vw;
  border: 0.1vh solid var(--blue-muted);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-primary);
  font-size: 1.3vh;
  cursor: pointer;
}

.passkey-login-button:hover,
.passkey-login-button:focus-visible {
  background: var(--blue-glow);
  border-color: var(--blue-primary);
}

.passkey-login-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.modal_form-message {
  min-height: 2.2vh;
  margin: 0.5vh 0 0;
  color: var(--text-muted);
  font-size: 1.2vh;
  line-height: 1.5;
}

/* Scrollbar */
.modal_content::-webkit-scrollbar {
  width: 0.5vh;
}
.modal_content::-webkit-scrollbar-track {
  background: transparent;
}
.modal_content::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 9vh;
}
.modal_content::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* ===== Animation ===== */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(1.5vh) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.modal_content img,
.modal_content video {
  display: block;
  max-width: 100%;
  max-height: 50vh; /* Leaves room for modal padding & top accent line */
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  margin: 0 auto;
}

.news-article-date {
  margin: 0 0 0.8vh;
  color: var(--blue-light);
  font-family: var(--font-mono);
  font-size: 1.1vh;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.news-article-header h2 {
  margin-bottom: 1.8vh;
}

.news-article-hero {
  width: 100%;
  margin-bottom: 2.5vh !important;
  background: var(--bg-dark);
}

.news-article-body {
  color: var(--text-secondary);
  font-size: 1.45vh;
  line-height: 1.75;
}

.news-article-body p {
  margin: 0 0 1.8vh;
}

.news-article-body img {
  margin-top: 1.8vh;
  margin-bottom: 1.8vh;
}

.news-article-body a {
  color: var(--blue-light);
}

.news-archive > header {
  margin-bottom: 2.2vh;
}

.news-archive > header > p:last-child {
  color: var(--text-muted);
}

.news-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2vh;
}

.news-archive-card {
  display: grid;
  grid-template-columns: 8vw minmax(0, 1fr);
  gap: 1vw;
  width: 100%;
  min-width: 0;
  padding: 1.2vh;
  border: 0.1vh solid var(--border-secondary);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.news-archive-card:hover,
.news-archive-card:focus-visible {
  border-color: var(--blue-muted);
  background: var(--bg-secondary);
  transform: translateY(-0.15vh);
}

.news-archive-card:focus-visible,
#blog .box[role="button"]:focus-visible {
  outline: 0.2vh solid var(--blue-primary);
  outline-offset: 0.2vh;
}

.news-archive-card > img {
  width: 8vw;
  height: 8vh;
  margin: 0;
  object-fit: cover;
}

.news-archive-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.45vh;
}

.news-archive-card-copy .news-article-date {
  margin: 0;
  font-size: 0.9vh;
}

.news-archive-card-copy strong {
  color: var(--text-primary);
  font-size: 1.35vh;
  line-height: 1.3;
}

.news-archive-card-copy > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 1.05vh;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* ===== Telemetry ===== */
.feed {
  --section-padding: 0;
  border: 0.1vh solid var(--border-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
}
.feed_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125vh 0.85vw;
  border-bottom: 0.1vh solid var(--border-secondary);
  background: var(--bg-tertiary);
  flex-wrap: wrap;
  gap: 0.425vw;
}
.feed_title {
  font-size: 1.3125vh;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.015vh;
  font-family: var(--font-sans);
}
.feed_status {
  display: flex;
  align-items: center;
  gap: 0.32vw;
  font-size: 1.03vh;
  font-family: var(--font-mono);
  color: var(--text-dim);
}
.feed_status-dot {
  width: 0.5vh;
  height: 0.5vh;
  border-radius: 50%;
  background-color: var(--green);
  animation: pulse-dot 2s infinite;
}
.feed_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.1vh;
  background-color: var(--border-secondary);
}
.feed_column {
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  min-height: 20vh;
}
.feed_column-header {
  display: flex;
  align-items: center;
  gap: 0.425vw;
  padding: 0.75vh 0.6375vw;
  border-bottom: 0.1vh solid var(--border-secondary);
  background-color: var(--bg-secondary);
  flex-shrink: 0;
}
.feed_indicator {
  width: 0.5vh;
  height: 0.5vh;
  border-radius: 50%;
  flex-shrink: 0;
}
.feed_indicator--active {
  background-color: var(--green);
}
.feed_indicator--warn {
  background-color: var(--yellow);
}
.feed_indicator--info {
  background-color: var(--blue-primary);
}
.feed_column-title {
  font-size: 0.9375vh;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.15vh;
  flex: 1;
  font-family: var(--font-mono);
}
.feed_column-count {
  font-size: 0.9375vh;
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-weight: 500;
}
.feed_entries {
  flex: 1;
  height: 20vh;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.feed_entries .feed_entry:last-child {
  border-bottom: none;
}
.feed_entry {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.425vw;
  padding: 0.525vh 0.6375vw;
  border-bottom: 0.1vh solid var(--border-secondary);
  font-family: var(--font-mono);
  font-size: 1.03vh;
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  background: var(--bg-primary);
  min-height: 3vh;
  animation: feedSlide 0.25s ease;
}
.feed_entry::before {
  content: "";
  width: 0.25vw;
  height: 0.25vw;
  border-radius: 50%;
  background: var(--blue-primary);
  flex-shrink: 0;
  margin-top: 0.675vh;
}

@keyframes feedSlide {
  from {
    opacity: 0;
    transform: translateY(1.5vh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#feed-traffic,
#feed-threats {
  overflow-anchor: none; /* Prevent page scrolling with new items being appended */
}
.feed_entry:hover {
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 0 0 0.1vh var(--border-primary),
    0 0 1.5vh rgba(0, 170, 255, 0.08);
}

.feed_entry--new {
  opacity: 0;
  transform: translateY(-0.5vh);
}
.feed_entry-time {
  width: 12ch;
  white-space: nowrap;
  opacity: 0.5;
  flex-shrink: 0;
  font-size: 0.9375vh;
  letter-spacing: 0.075vh;
}

.feed_entry-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.03vh;
  color: var(--text-secondary);
}
.feed_entry-content .highlight {
  color: var(--blue-primary);
}
.feed_entry-content .dim {
  color: var(--text-dim);
}
.feed_entry-content .ok {
  color: var(--green);
}
.feed_entry-content .warn {
  color: var(--yellow);
}
.feed_entry-content .err {
  color: var(--red);
}
.feed_entry-content .purple {
  color: var(--purple);
}
.feed_entry-status {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.9375vh;
  text-transform: uppercase;
  letter-spacing: 0.06vh;
  padding: 0.075vh 0.425vw;
  border-radius: 9vh;
  text-align: center;
  white-space: nowrap;
}
.feed_entry-status--allow {
  color: var(--green);
  background: var(--green-bg);
  border: 0.1vh solid var(--green-border);
}
.feed_entry-status--block {
  color: var(--red);
  background: var(--red-bg);
  border: 0.1vh solid var(--red-border);
}
.feed_entry-status--blocked {
  color: var(--red);
  background: var(--red-bg);
  border: 0.1vh solid var(--red-border);
}
.feed_entry-status--rate {
  color: var(--yellow);
  background: var(--yellow-bg);
  border: 0.1vh solid var(--yellow-border);
}
.feed_entry-status--monitor {
  color: var(--blue-primary);
  background: var(--blue-subtle);
  border: 0.1vh solid var(--blue-glow);
}
.feed_entry-status--info {
  color: var(--blue-primary);
  background: var(--blue-subtle);
  border: 0.1vh solid var(--blue-glow);
}
.feed_entry-status--ok {
  color: var(--green);
  background: var(--green-bg);
  border: 0.1vh solid var(--green-border);
}
.feed_entry-status--warn {
  color: var(--yellow);
  background: var(--yellow-bg);
  border: 0.1vh solid var(--yellow-border);
}
.feed_entry-status--err {
  color: var(--red);
  background: var(--red-bg);
  border: 0.1vh solid var(--red-border);
}
.feed_entry-severity {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.9375vh;
  text-transform: uppercase;
  letter-spacing: 0.06vh;
  padding: 0.075vh 0.425vw;
  border-radius: 9vh;
  text-align: center;
  white-space: nowrap;
}
.feed_entry-severity--critical {
  color: var(--red);
  background: var(--red-bg);
  border: 0.1vh solid var(--red-border);
}
.feed_entry-severity--high {
  color: var(--yellow);
  background: var(--yellow-bg);
  border: 0.1vh solid var(--yellow-border);
}
.feed_entry-severity--medium {
  color: var(--text-muted);
  background: var(--blue-subtle);
  border: 0.1vh solid var(--border-secondary);
}
.feed_entry-severity--low {
  color: var(--text-dim);
  background: rgba(77, 106, 136, 0.06);
  border: 0.1vh solid var(--border-primary);
}
.feed_entry-rule-id {
  color: var(--purple);
  flex-shrink: 0;
  font-weight: 500;
}
.feed_entry-hits {
  min-width: 2.125vw;
  text-align: right;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9375vh;
}
.feed_entry:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}