/* ---------- Brand + back link ---------- */

.brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  margin-bottom:1.1rem;
  text-decoration:none;
}

.brand .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--teal);
  flex-shrink:0;
}

/* ---------- Site nav (mini header) + site footer ---------- */

.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.75rem 1.5rem;
}

.site-nav .brand{ margin-bottom:0; }

.site-nav-links{
  display:flex;
  gap:1.25rem;
  font-family:var(--mono);
  font-size:0.76rem;
}

.site-nav-links a{
  color:var(--ink-soft);
  text-decoration:none;
}

.site-nav-links a:hover{ color:var(--teal); }

.site-footer{
  margin-top:4rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem 1.5rem;
  font-family:var(--mono);
  font-size:0.76rem;
}

.site-footer a{
  color:var(--ink-soft);
  text-decoration:none;
}

.site-footer a:hover{ color:var(--teal); }

.back-link{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--ink-soft);
  text-decoration:none;
  margin-bottom:2.25rem;
  border-bottom:1px solid var(--line);
  padding-bottom:0.15rem;
}

.back-link:hover{ color:var(--teal); border-color:var(--teal); }

/* ---------- Roadmap label ---------- */

.roadmap-block{ margin-top:3.5rem; }

.roadmap-label{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:1.1rem;
}

.roadmap-label b{ color:var(--ink); font-weight:600; }

/* ---------- Legend ---------- */

.legend{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:1.25rem;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
}

.legend span{ display:inline-flex; align-items:center; gap:0.4rem; }
.legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }

/* ---------- Card grid ---------- */

.grid{
  margin-top:3.75rem;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}

@media (max-width:640px){
  .grid{ grid-template-columns:1fr; }
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.5rem;
  transition:border-color 0.15s ease, transform 0.15s ease;
}

.card:hover{
  border-color:var(--ink-soft);
  transform:translateY(-2px);
}

/* Cards with no destination page yet -- visually recede into the page
   background instead of looking like an equally-clickable tile. */
.card.unavailable{
  background:var(--paper);
  border-style:dashed;
}

.card.unavailable:hover{
  border-color:var(--line);
  transform:none;
}

.card.unavailable .card-title,
.card.unavailable .card-desc{
  color:var(--ink-soft);
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:1rem;
}

.icon-badge{
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.icon-badge svg{ width:19px; height:19px; }

.badge-teal{ background:var(--teal-tint); color:var(--teal); }
.badge-plum{ background:var(--plum-tint); color:var(--plum); }

.card-meta{ text-align:right; }

.entry-num{
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
  display:block;
}

.status{
  font-family:var(--mono);
  font-size:0.64rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:0.6;
  display:block;
  margin-top:0.25rem;
}

.card-title{
  font-family:var(--display);
  font-weight:600;
  font-size:1.12rem;
  line-height:1.28;
  margin-bottom:0.55rem;
}

.card-desc{
  font-size:0.9rem;
  color:var(--ink-soft);
}

.tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.2rem 0.5rem;
  border-radius:20px;
  margin-top:1rem;
}

.tag.reference{ background:var(--teal-tint); color:var(--teal); }
.tag.analysis{ background:var(--plum-tint); color:var(--plum); }

/* ---------- Tables ---------- */

.table-scroll{
  overflow-x:auto;
  margin-top:1.75rem;
  border:1px solid var(--line);
  border-radius:12px;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:0.85rem;
  min-width:520px;
}

th, td{
  text-align:left;
  padding:0.75rem 0.9rem;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}

th{
  font-family:var(--mono);
  font-size:0.68rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--paper);
}

tr:last-child td{ border-bottom:none; }
td a{ color:var(--teal); }

.empty-row td{
  color:var(--ink-soft);
  font-style:italic;
  font-size:0.85rem;
}

/* ---------- Footer ---------- */

footer a{ color:var(--teal); text-decoration:none; }
footer a:hover{ text-decoration:underline; }

footer{
  margin-top:4rem;
  padding-top:1.75rem;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0.6rem;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--ink-soft);
}