/* Base */
*{box-sizing:border-box}
html{font-size:16px}
body{
  font-family:system-ui,Segoe UI,Arial;
  margin:0;
  background:#0b0f14;
  color:#e8eef7;
}

/* =========================
   Topbar (single definition, no overrides)
   Goal: Home/About centered, other links right
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  padding:0.875rem 1.125rem;                 /* 14px 18px */
  border-bottom:0.0625rem solid #1d2633;     /* 1px */
  background:#0e141d;
  display:block;
}

.brand{font-weight:700}

.topbar .nav{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;        /* left spacer | center | right */
  align-items:center;
  gap:0.75rem;                               /* 12px */
}

.nav-left{
  grid-column:2;
  justify-self:center;
  display:flex;
  gap:1.2em;
  flex-wrap:wrap;                             /* mobile safety */
}

.nav-right{
  grid-column:3;
  justify-self:end;
  display:flex;
  gap:1.2em;
  flex-wrap:wrap;                             /* mobile safety */
  justify-content:flex-end;
}

/* links */
.nav a{
  color:#cfe2ff;
  text-decoration:none;
  margin:0;                                   /* use gap, not margins */
}
.nav a:hover{ text-decoration:underline; }

/* Make ALL card links match the nav link color */
a.link, a.link:visited{
  color:#aeceff;
  text-decoration:none;
}
a.link:hover{ text-decoration:underline; }

a.link-monitor,
a.link-monitor:visited{
  color:#f4d462;
}
a.link-monitor:hover{
  text-decoration:underline;
}

/* Layout */
.container{
  max-width:68.75rem;                         /* 1100px */
  margin:0 auto;
  padding:1.125rem;                           /* 18px */
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)); /* 200px */
  gap:0.75rem;                                /* 12px */
  margin:0.875rem 0 1.25rem;                  /* 14px 0 20px */
}

.card{
  border:0.0625rem solid #1d2633;             /* 1px */
  background:#0e141d;
  border-radius:0.625rem;                     /* 10px */
  padding:0.75rem;                            /* 12px */
}

.label{opacity:.75;font-size:0.8125rem}       /* 13px */
.value{font-size:1.375rem;font-weight:700;margin-top:0.25rem} /* 22px, 4px */

.table{
  width:100%;
  border-collapse:collapse;
  border:0.0625rem solid #1d2633;             /* 1px */
  background:#0e141d;
  border-radius:0.625rem;                     /* 10px */
  overflow:hidden;
}

.table th,.table td{
  padding:0.625rem;                           /* 10px */
  border-bottom:0.0625rem solid #1d2633;      /* 1px */
  text-align:left;
  font-size:0.875rem;                         /* 14px */
}
.table th{opacity:.8}

h1{margin:0.375rem 0 0.75rem}                 /* 6px 0 12px */
h2{margin:1.125rem 0 0.625rem}                /* 18px 0 10px */

/* Overview hero + text */
.overview-hero{
  margin-top:0.8em;
  border-radius:0.9em;
  overflow:hidden;
  border:0.0625rem solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.02);
}
.overview-hero img{
  display:block;
  width:100%;
  height:auto;
}

.overview-text{
  max-width:42em;
  margin:0 auto;
}
.overview-text p{
  margin:0.6em 0 0;
  text-align:justify;
  text-align-last:center;
  hyphens:auto;
}

/* =========================
   Mobile optimizations
   ========================= */
@media (max-width:40rem){ /* ~640px */
  .topbar{padding:0.75rem 0.875rem}
  .container{padding:0.875rem}

  /* Stack nav rows so it doesn't overflow */
  .topbar .nav{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .nav-left{grid-column:1; justify-self:center; gap:1em}
  .nav-right{grid-column:1; justify-self:center; gap:1em; justify-content:center}

  /* Allow tables to scroll horizontally on small screens */
  .table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Slightly tighter cards */
  .card{padding:0.6875rem} /* 11px-ish, keeps feel similar */
}


/* =========================
   Control Tower layout helpers
   ========================= */

.ct-header{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.ct-title-row{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}

.ct-title{
  line-height:1.35;
}

.ct-meta{
  margin-top:0.75rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
  flex-wrap:wrap;
}

.ct-sep{ opacity:0.7; }

.status-dot{
  display:inline-block;
  width:0.7rem;
  height:0.7rem;
  border-radius:50%;
  margin:0 0.35rem 0 0.15rem;
  vertical-align:middle;
}

/* Button: bigger tap target on mobile */
.info-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2rem;
  height:2rem;
  padding:0;
  border-radius:999rem;
  border:0.0625rem solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:#cfe2ff;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.info-btn:hover{ text-decoration:none; }

/* Grid helpers */
.grid{
  display:grid;
  gap:1rem;
  margin-top:1rem;
}
.grid-1{ grid-template-columns:1fr; }
.grid-2{ grid-template-columns:1fr 1fr; }

.card-title{
  margin-top:0;
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}

/* Tables: always safe on mobile */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table{
  width:100%;
  border-collapse:collapse;
  border:0.0625rem solid #1d2633;
  background:#0e141d;
  border-radius:0.625rem;
  overflow:hidden;
  table-layout:auto; /* better on narrow screens */
  min-width:34rem;   /* forces scroll instead of crushing columns */
}

.table th,.table td{
  padding:0.625rem;
  border-bottom:0.0625rem solid #1d2633;
  text-align:left;
  font-size:0.875rem;
  vertical-align:top;
}

.nowrap{ white-space:nowrap; }

/* Slightly nicer key/value lines */
.kv{ margin-top:0.25rem; }

/* =========================
   Mobile optimizations
   ========================= */
@media (max-width:40rem){

  /* Your existing nav mobile rules can stay as-is */

  /* Collapse 2-col grid to 1-col */
  .grid-2{ grid-template-columns:1fr; }

  /* Reduce table min width so it fits more often */
  .table{ min-width:28rem; }

  /* Slightly tighter table padding */
  .table th,.table td{ padding:0.5rem; }

  /* Prevent title line from feeling huge on tiny screens */
  .ct-title{ font-size:0.95rem; }
}



.info-btn{ position:relative; z-index:5; pointer-events:auto; }
.modal-backdrop{ z-index:1000; }
.modal{ z-index:1001; }