/* Verdikt engineering dashboards — shared design system.
   Tokens mirror docs/design-system.html. Consumed by:
     reports/index.html            (engineering hub)
     reports/dashboard.html        (test suite)
     reports/features.html         (feature board)
     reports/code-review.html      (code-review board)
     reports/security-review.html  (security-review board)
*/

:root {
  --ink-50:  #f6f5f1;
  --ink-100: #eeece4;
  --ink-200: #dcd8c8;
  --ink-300: #a9a394;
  --ink-500: #6c6858;
  --ink-700: #3a382f;
  --ink-900: #141410;
  --seal-300: #8ec7b5;
  --seal-500: #2f8f76;
  --seal-700: #1e5f4f;
  --red-500: #b6483a;
  --red-700: #7f2f24;
  --amber-500: #c98a2b;
  --amber-700: #7f5312;
  --blue-500: #3f6fb0;
  --hair: rgba(20,20,16,0.12);
  --hair-soft: rgba(20,20,16,0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-50);
  color: var(--ink-900);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
/* Mobile: tighter side padding so cards get more real estate on 320-393px viewports. */
@media (max-width: 520px) {
  .container { padding: 0 16px; }
}

/* Global mobile guards: nothing on the page should ever push the viewport
   wider than itself. Prevents accidental horizontal scroll from a stray
   fixed-width table, long monospace path, or oversized svg. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* Wrap long paths, URLs, hashes inside code blocks and mono cells. */
code, .mono, td.mono, .r-evidence, .feature-evidence,
.callout code, table.data td.mono, table.files td.mono {
  overflow-wrap: anywhere; word-break: break-word;
}

/* Data tables become horizontally scrollable at narrow widths — with a
   subtle right-edge fade to hint the overflow is intentional. Applied to
   any `.data` table that has meaningfully more than two columns. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent 92%, rgba(20,20,16,0.05));
  background-attachment: local, scroll;
  background-repeat: no-repeat;
  background-size: 100% 100%, 24px 100%;
  background-position: 0 0, 100% 0;
}
.table-scroll > table.data,
.table-scroll > table.files { min-width: 560px; }

/* Fallback for JS-injected tables: dashboard suite-detail (.detail-body),
   features backlog (#backlog), security-review inspect-detail body. The
   injecting JS drops a bare <table class="data|files"> into these
   containers, so we let the container scroll horizontally on narrow
   viewports without needing to change the JS. */
#backlog, .inspect-detail-body, .detail-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#backlog > table.data,
.inspect-detail-body > table.data,
.detail-body > table.files { min-width: 560px; }

/* Header + cross-nav */
header.hairline-b {
  border-bottom: 1px solid var(--hair);
  background: var(--ink-50);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(6px);
}
.nav { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1;
  color: var(--seal-700);
}
a.brand { cursor: pointer; transition: opacity 120ms ease; }
a.brand:hover { opacity: 0.85; }
.brand .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
}
.brand .mark svg { width: 26px; height: 26px; display: block; }
/* Brand-tag — masthead tagline next to the wordmark. Mirrors the landing
   page: Instrument Serif, ink-500, with an italic seal-700 em phrase.
   Vertical hair rule separates it from the wordmark. */
.brand-tag {
  display: none;
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 18px; line-height: 1; letter-spacing: 0.005em;
  color: var(--ink-500);
  margin-left: 12px; padding-left: 12px;
  border-left: 1px solid var(--hair);
}
.brand-tag em { color: var(--seal-700); font-style: italic; }
@media (min-width: 640px) { .brand-tag { display: inline-block; } }
.nav-meta { color: var(--ink-500); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

.crossnav {
  display: flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.crossnav a {
  padding: 6px 12px; border-radius: 999px; border: 1px solid transparent;
  color: var(--ink-500); transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.crossnav a:hover { color: var(--seal-700); border-color: var(--hair); }
.crossnav a.active {
  color: var(--seal-700); border-color: rgba(47,143,118,0.35);
  background: rgba(47,143,118,0.06);
  position: relative;
  display: inline-flex; align-items: center;
}
.crossnav a.active::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--seal-500); margin-right: 8px;
  animation: crossnav-pulse 1.8s ease-in-out infinite;
}
@keyframes crossnav-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(60,179,113,0.55);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(60,179,113,0);
  }
}
/* Persistent highlight on the Hackathon link — judges spot it at a glance */
.crossnav a[href$="hackathon.html"] {
  color: #fff; background: var(--seal-700); border-color: var(--seal-700);
  font-weight: 600;
}
.crossnav a[href$="hackathon.html"]:hover {
  color: #fff; background: var(--seal-500); border-color: var(--seal-500);
}
.crossnav a[href$="hackathon.html"].active {
  color: #fff; background: var(--seal-700); border-color: var(--seal-700);
  box-shadow: 0 0 0 3px rgba(47,143,118,0.18);
}
.crossnav a[href$="hackathon.html"].active::before {
  background: #fff;
}
.crossnav a[href$="hackathon.html"].active {
  animation: hackathon-active-pulse 2.2s ease-in-out infinite;
}
@keyframes hackathon-active-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(47,143,118,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(47,143,118,0.05); }
}
/* Hamburger button — desktop-hidden, appears only on mobile. Injected
   into the nav by verdikt.js so no per-page HTML edits are needed. */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 6px;
  width: 38px; height: 38px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-hamburger:hover { border-color: var(--seal-500); }
.nav-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink-700);
  transition: transform 180ms ease, opacity 160ms ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile: nav becomes brand + hamburger; crossnav is a drop-down
   drawer that toggles open under the header when the hamburger is
   tapped. Every dashboard link stays reachable. */
@media (max-width: 820px) {
  .nav { position: relative; height: 56px; }
  .nav-hamburger { display: flex; }
  .crossnav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: #fefdf9;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: 10px 16px 12px;
    gap: 4px;
    box-shadow: 0 12px 32px -14px rgba(20,20,16,0.18);
    z-index: 20;
  }
  .crossnav.open { display: flex !important; }
  .crossnav a {
    padding: 10px 14px;
    text-align: left;
    border-radius: 6px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}

/* Hero */
.hero { position: relative; padding: 56px 0 32px; }
.hero-glyph {
  position: absolute;
  right: 24px; top: 16px;
  width: 260px; height: 260px;
  opacity: 0.16;
  pointer-events: none;
}
@media (max-width: 1100px) { .hero-glyph { right: 12px; width: 200px; height: 200px; } }
@media (max-width: 820px) { .hero-glyph { display: none; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--hair);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--seal-700); background: #fff;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--seal-500); }
.eyebrow.amber { color: var(--amber-700); }
.eyebrow.amber .dot { background: var(--amber-500); }
.eyebrow.red { color: var(--red-700); }
.eyebrow.red .dot { background: var(--red-500); }
.display {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 20px 0 12px;
}
.display em { font-style: italic; color: var(--seal-700); }
.lede { max-width: 720px; font-size: 18px; line-height: 1.55; color: var(--ink-700); }

/* Meta chips */
.meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair);
  background: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-700);
}
.meta-chip .k { color: var(--ink-500); }
.meta-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--seal-500); }

/* Section blocks */
section.block { padding: 40px 0; border-top: 1px solid var(--hair); }
section.block .kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--seal-700);
  margin-bottom: 8px;
}
section.block h2 {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 32px; line-height: 1.1; letter-spacing: -0.01em;
  margin: 0 0 8px;
}
section.block .subhead {
  color: var(--ink-500); max-width: 640px; margin: 0 0 24px; font-size: 14px;
}

/* KPI cards */
.kpi-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .kpi-row { grid-template-columns: repeat(5, 1fr); } }
.kpi-row.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .kpi-row.four { grid-template-columns: repeat(4, 1fr); } }
.kpi {
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 18px 20px;
}
.kpi .k {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500);
}
.kpi .v {
  margin-top: 4px;
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 32px; line-height: 1.1;
}
.kpi.pass .v { color: var(--seal-700); }
.kpi.fail .v { color: var(--red-500); }
.kpi.err .v { color: var(--amber-500); }
.kpi.info .v { color: var(--blue-500); }
.kpi .d { margin-top: 4px; font-size: 12px; color: var(--ink-500); }

/* Card grids */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .card-grid.three { grid-template-columns: repeat(3, 1fr); } }
.card {
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 22px; line-height: 1.15;
}
.card-desc { color: var(--ink-500); font-size: 13px; line-height: 1.45; }
.card-link {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--hair);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--seal-700);
}
.card-link:hover { color: var(--seal-500); }

/* Status pills */
.pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(47,143,118,0.35);
  color: var(--seal-700); background: rgba(47,143,118,0.06);
  white-space: nowrap;
}
.pill.pass { color: var(--seal-700); border-color: rgba(47,143,118,0.35); background: rgba(47,143,118,0.06); }
.pill.fail { color: var(--red-500); border-color: rgba(182,72,58,0.35); background: rgba(182,72,58,0.08); }
.pill.warn { color: var(--amber-700); border-color: rgba(201,138,43,0.35); background: rgba(201,138,43,0.08); }
.pill.info { color: var(--blue-500); border-color: rgba(63,111,176,0.35); background: rgba(63,111,176,0.06); }
.pill.muted { color: var(--ink-500); border-color: var(--hair); background: #fff; }

/* Feature list — nested inside a category card. Row is a vertical
   stack: content (name + description) at top using full width, then a
   footer row with the evidence path on the left and the status pill on
   the right, on the same line. */
.feature-list { display: flex; flex-direction: column; gap: 0; margin-top: 6px; }
.feature-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0; border-top: 1px dashed var(--hair-soft);
  min-width: 0;
}
.feature-row > * { min-width: 0; }
.feature-row:first-child { border-top: 0; }
.feature-content { min-width: 0; }
.feature-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-top: 2px;
}
.feature-footer > .pill { flex-shrink: 0; }
.feature-name {
  font-size: 14px; color: var(--ink-900); font-weight: 500;
  overflow-wrap: anywhere;
}
.feature-desc {
  font-size: 12.5px; color: var(--ink-500); margin-top: 2px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.feature-evidence {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  color: var(--ink-300);
  overflow-wrap: anywhere; word-break: break-word;
  flex: 1 1 auto; min-width: 0;
}
/* Roadmap card container needs to be able to shrink on mobile too */
.journey-card, .journey-detail, .journey-stop { min-width: 0; }
.journey-card { overflow-wrap: anywhere; }

/* Row list — used by gates, audits, threat notes */
.row-list { display: flex; flex-direction: column; gap: 10px; }
.row-item {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--hair); background: #fff; border-radius: 8px;
}
.row-item .r-title { font-weight: 500; font-size: 14px; }
.row-item .r-prompt {
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-style: italic; font-size: 15px; line-height: 1.5;
  color: var(--ink-700); margin-top: 6px;
  padding-left: 12px; border-left: 2px solid var(--seal-500);
}
.row-item .r-desc { color: var(--ink-500); font-size: 12.5px; margin-top: 8px; line-height: 1.55; }
.row-item .r-evidence {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  color: var(--ink-300); margin-top: 6px;
}

/* Judging showcase — four Devpost criteria, aligned with .inspect-card pattern */
.judging-showcase .kicker { color: var(--seal-700); }
.judging-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px;
}
.judging-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.judging-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--seal-500);
}
.judging-card:hover {
  transform: translateY(-2px);
  border-color: var(--seal-500);
  box-shadow: 0 12px 32px -18px rgba(47,143,118,0.28);
}
.judging-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.judging-ord {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--seal-700);
}
.judging-title {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 22px; line-height: 1.15;
  color: var(--ink-900);
  margin: 0;
}
.judging-prompt {
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-700);
  margin: 0; padding: 4px 0 4px 12px;
  border-left: 2px solid var(--seal-500);
}
.judging-points {
  list-style: none;
  margin: 4px 0 0; padding: 0;
  display: grid; gap: 8px;
}
.judging-points li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-700);
}
.judging-points li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--seal-500);
}
.judging-answer {
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}

@media (max-width: 720px) {
  .judging-card { padding: 18px 18px; gap: 10px; }
  .judging-title { font-size: 20px; }
  .judging-prompt { font-size: 14px; }
}

/* Two-column tables */
table.data { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
table.data th, table.data td {
  padding: 10px 14px; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--hair-soft);
}
table.data th {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
  font-weight: 500; background: var(--ink-50);
}
table.data td.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-700); }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: rgba(47,143,118,0.03); }

/* Callout — for backlog, parked, threat notes */
.callout {
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 18px 22px;
}
.callout .callout-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500);
  margin-bottom: 12px;
}
.callout ul { margin: 0; padding-left: 18px; }
.callout li { margin-bottom: 8px; font-size: 13.5px; color: var(--ink-700); line-height: 1.5; }
.callout li b { color: var(--ink-900); }

/* Inline text-color helpers (CSP-safe alternatives to inline style attrs) */
.ink-ship   { color: var(--seal-700); }
.ink-flight { color: var(--blue-500); }
.ink-back   { color: var(--amber-700); }

/* Roadmap journey (features board) — cards along a winding path between
   start and finish flags. Rail sits left on mobile, centered on desktop
   with stops alternating on either side. */
.journey { position: relative; padding: 8px 0; }
.journey::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 16px; width: 4px;
  background-image: linear-gradient(to bottom, var(--seal-500) 0 8px, transparent 8px 18px);
  background-size: 4px 18px;
  border-radius: 4px;
}
@media (min-width: 900px) {
  .journey::before { left: 50%; transform: translateX(-2px); }
}

.journey-flag {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--hair); border-radius: 12px;
  background: #fff;
  margin: 4px 0 20px 0;
  max-width: 340px;
}
.journey-flag.end { margin: 20px 0 4px 0; }
@media (min-width: 900px) {
  .journey-flag { margin-left: auto; margin-right: auto; }
}
.journey-flag .flag-icon {
  width: 44px; height: 60px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.journey-flag .flag-caption { display: flex; flex-direction: column; gap: 4px; }
.journey-flag .flag-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500);
}
.journey-flag .flag-title {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 22px; line-height: 1.1;
}
.journey-flag .flag-title em { font-style: italic; }
.journey-flag.start .flag-title em { color: var(--seal-700); }
.journey-flag.end .flag-title em { color: var(--amber-700); }
.journey-flag .flag-sub {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-500);
}

.journey-stop { position: relative; padding: 0 0 20px 52px; scroll-margin-top: 76px; }
@media (min-width: 900px) {
  .journey { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
  .journey-flag { grid-column: 1 / -1; justify-self: center; }
  .journey-stop { padding: 0 0 28px; width: auto; }
  .journey-stop.left  { grid-column: 1; padding-right: 44px; }
  .journey-stop.right { grid-column: 2; padding-left: 44px;  }
}

.journey-node {
  position: absolute; top: 14px; left: 3px;
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 2px solid var(--seal-500);
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  color: var(--seal-700);
  box-shadow: 0 1px 3px rgba(30,95,79,0.14);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
@media (min-width: 900px) {
  .journey-stop.left  .journey-node { left: auto; right: -15px; }
  .journey-stop.right .journey-node { left: -15px; right: auto; }
}
.journey-stop.expanded .journey-node {
  background: var(--seal-700); border-color: var(--seal-700); color: #fff;
  transform: scale(1.08);
}

.journey-card {
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 18px 20px; cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.journey-card:hover {
  transform: translateY(-1px); border-color: var(--seal-500);
  box-shadow: 0 6px 24px -14px rgba(47,143,118,0.35);
}
.journey-stop.expanded .journey-card {
  border-color: var(--seal-500);
  box-shadow: 0 8px 24px -16px rgba(47,143,118,0.35);
}
.journey-stop.expanded .journey-node { border-color: var(--seal-700); }
.journey-stop.expanded .journey-node::after { transform: scale(1); }

.journey-stop-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--seal-700);
  margin-bottom: 6px;
}
.journey-title {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 22px; line-height: 1.15; margin: 0 0 4px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.journey-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-500); letter-spacing: 0.08em; white-space: nowrap;
}
.journey-desc {
  color: var(--ink-500); font-size: 13px; line-height: 1.45; margin: 0 0 12px;
}
.journey-progress {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.journey-detail {
  display: none;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--hair);
}
.journey-stop.expanded .journey-detail { display: block; }

/* Legacy swim lanes — retained for compatibility */
.roadmap { display: flex; flex-direction: column; gap: 10px; }
.lane {
  position: relative;
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 16px 20px; cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.lane:hover { transform: translateY(-1px); border-color: var(--seal-500); box-shadow: 0 6px 24px -14px rgba(47,143,118,0.35); }
.lane.expanded { border-color: var(--seal-500); }
.lane-head {
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  align-items: center;
}
.lane-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lane-name {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-size: 22px; line-height: 1.15;
}
.lane-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-500); letter-spacing: 0.10em;
}
.lane-desc {
  color: var(--ink-500); font-size: 13px; line-height: 1.45; margin-top: 4px;
  max-width: 640px;
}
.lane-progress {
  margin-top: 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.progress-bar {
  height: 10px; border-radius: 999px; background: var(--ink-100);
  overflow: hidden; display: flex;
}
.progress-bar .seg-ship { background: var(--seal-500); }
.progress-bar .seg-flight { background: var(--blue-500); }
.progress-bar .seg-back { background: var(--amber-500); }
.progress-bar .seg { height: 100%; transition: width 300ms ease; }
.progress-legend {
  display: flex; gap: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  color: var(--ink-500);
}
.progress-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.progress-legend .lg::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ink-300);
}
.progress-legend .lg.ship::before { background: var(--seal-500); }
.progress-legend .lg.flight::before { background: var(--blue-500); }
.progress-legend .lg.back::before { background: var(--amber-500); }
.lane-toggle {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500);
  white-space: nowrap;
}
.lane.expanded .lane-toggle { color: var(--seal-700); }
.lane-detail {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--hair);
  display: none;
}
.lane.expanded .lane-detail { display: block; }

/* Inspect cards — clickable summary + drill-down (code + security boards) */
.inspect-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .inspect-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .inspect-grid { grid-template-columns: repeat(3, 1fr); } }
.inspect-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 22px 22px 58px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.inspect-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--seal-500);
}
.inspect-card.warn::before { background: var(--amber-500); }
.inspect-card.fail::before { background: var(--red-500); }
.inspect-card:hover { transform: translateY(-2px); border-color: var(--seal-500); box-shadow: 0 12px 32px -18px rgba(47,143,118,0.28); }
.inspect-card.selected { border-color: var(--seal-500); box-shadow: 0 10px 28px -14px rgba(47,143,118,0.35); }
.inspect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.inspect-title {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 22px; line-height: 1.15;
}
.inspect-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.16em; color: var(--ink-500); text-transform: uppercase;
  white-space: nowrap;
}
.inspect-desc { color: var(--ink-500); font-size: 13px; line-height: 1.5; }
.inspect-summary {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-700);
}
.inspect-summary .k { color: var(--ink-500); margin-right: 4px; }

/* Click badge — stylized "click to inspect" indicator, bottom-right of card */
.click-badge {
  position: absolute; bottom: 14px; right: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 12px; border-radius: 999px;
  border: 1px dashed rgba(47,143,118,0.45);
  background: rgba(47,143,118,0.05);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--seal-700);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.click-badge.inline { position: static; }
.click-badge .arrow { display: inline-block; transition: transform 160ms ease; font-family: inherit; }
.inspect-card:hover .click-badge,
.suite-card:hover .click-badge,
.lane:hover .click-badge {
  border-style: solid; border-color: var(--seal-500);
  background: rgba(47,143,118,0.12);
}
.inspect-card:hover .click-badge .arrow,
.suite-card:hover .click-badge .arrow,
.lane:hover .click-badge .arrow { transform: translateX(3px); }
.inspect-card.selected .click-badge,
.suite-card.selected .click-badge,
.lane.expanded .click-badge {
  border-style: solid; border-color: var(--seal-500);
  background: rgba(47,143,118,0.15);
}

/* Inspect detail panel — appears below the grid when a card is clicked */
.inspect-detail {
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  margin-top: 20px; overflow: hidden;
}
.inspect-detail-head {
  padding: 18px 22px; border-bottom: 1px solid var(--hair);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  background: var(--ink-50);
}
.inspect-detail-title {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-size: 24px;
  line-height: 1.15;
}
.inspect-detail-sub {
  color: var(--ink-500); font-size: 13px; margin-top: 4px; max-width: 640px;
}
.inspect-detail-close {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500);
  background: transparent; border: 1px solid var(--hair); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.inspect-detail-close:hover { color: var(--seal-700); border-color: var(--seal-500); }
.inspect-detail-body { padding: 20px 22px 22px; }
.inspect-detail-body .row-item:first-child { margin-top: 0; }

/* Executive score cards (index overview) */
.score-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .score-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .score-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px)  { .score-grid.five { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1050px) { .score-grid.five { grid-template-columns: repeat(5, 1fr); } }
.score-card {
  border: 1px solid var(--hair); border-radius: 12px; background: #fff;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.score-card:hover { transform: translateY(-2px); border-color: var(--seal-500); box-shadow: 0 12px 32px -18px rgba(47,143,118,0.28); }
.score-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--seal-500);
}
.score-card.pass::before { background: var(--seal-500); }
.score-card.warn::before { background: var(--amber-500); }
.score-card.fail::before { background: var(--red-500); }
.score-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500);
}
.score-verdict {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 40px; line-height: 1.02; color: var(--seal-700);
  letter-spacing: -0.01em;
}
.score-card.fail .score-verdict { color: var(--red-500); }
.score-card.warn .score-verdict { color: var(--amber-700); }
.score-tag {
  font-size: 13px; color: var(--ink-700);
}
.score-tag b { color: var(--ink-900); }
.score-meta {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-500);
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--hair);
}
.score-meta .k { color: var(--ink-300); }
.score-meta .v { color: var(--ink-700); }
.score-link {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--seal-700);
}

/* Loading / error state */
.state {
  padding: 60px 24px; text-align: center;
  color: var(--ink-500); font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.state.err { color: var(--red-500); }
.state code {
  display: inline-block; margin-top: 8px; padding: 10px 14px;
  background: var(--ink-900); color: var(--ink-50); border-radius: 6px;
  font-size: 12px; letter-spacing: 0;
}

/* Verdict card (paper stamp) — reused across dashboards */
.verdict-wrap {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
  margin-top: 8px;
}
@media (min-width: 900px) { .verdict-wrap { grid-template-columns: 1fr 1fr; gap: 48px; } }
.verdict-stage { position: relative; padding: 24px 4px; min-height: 260px; display: grid; place-items: center; }
.verdict-stage::before {
  content: ""; position: absolute; inset: -6% -6% -6% -6%; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(47,143,118,0.18), transparent 65%),
    radial-gradient(ellipse 40% 30% at 30% 85%, rgba(142,199,181,0.20), transparent 70%);
}
.verdict-card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: #f8f4e8; border: 1px solid rgba(20,20,16,0.14); border-radius: 6px;
  padding: 26px 30px 24px; transform: rotate(1.4deg); color: var(--ink-900);
  box-shadow: 0 32px 70px -32px rgba(20,20,16,0.38),
              0 10px 24px -14px rgba(47,143,118,0.22),
              inset 0 1px 0 rgba(255,255,255,0.65);
}
.verdict-card::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(30,95,79,0.14); border-radius: 4px; pointer-events: none;
}
.vc-head {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--seal-700);
  padding-bottom: 12px; border-bottom: 1px dashed rgba(30,95,79,0.32);
}
.vc-head .title { flex: 1; }
.vc-head .seq { color: var(--ink-500); font-size: 10px; letter-spacing: 0.14em; }
.vc-meta {
  margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 20px; font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.vc-meta .k { color: var(--ink-500); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.vc-meta .v { color: var(--ink-900); font-size: 12px; }
.vc-verdict-row {
  position: relative; margin: 22px 0 18px;
  display: flex; justify-content: center; align-items: center; min-height: 118px;
}
.vc-verdict {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 56px; letter-spacing: 0.10em; color: var(--seal-700); line-height: 1;
}
.vc-verdict.red { color: var(--red-500); }
.vc-stamp {
  position: absolute; right: -10px; top: -4px;
  width: 108px; height: 108px; border-radius: 999px;
  border: 2px solid var(--seal-700); color: var(--seal-700);
  transform: rotate(-11deg); display: grid; place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 8.5px; letter-spacing: 0.24em; text-align: center; padding: 12px; opacity: 0.9;
}
.vc-stamp.red { border-color: var(--red-500); color: var(--red-500); }
.vc-stamp::before {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid currentColor; border-radius: 999px; opacity: 0.55;
}
.vc-stamp span { display: block; line-height: 1.5; }

/* Suite cards (tests dashboard) — click-to-drill-down pattern */
.suite-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .suite-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .suite-grid { grid-template-columns: repeat(3, 1fr); } }
.suite-card {
  position: relative;
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 20px 20px 54px; display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; transition: transform 120ms ease, border-color 120ms ease;
}
.suite-card:hover { transform: translateY(-1px); border-color: var(--seal-500); }
.suite-card.selected { border-color: var(--seal-500); box-shadow: 0 6px 24px -14px rgba(47,143,118,0.35); }
.suite-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.suite-name {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 22px; line-height: 1.15;
}
.suite-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(47,143,118,0.35);
  color: var(--seal-700); background: rgba(47,143,118,0.06);
}
.suite-badge.fail { color: var(--red-500); border-color: rgba(182,72,58,0.35); background: rgba(182,72,58,0.08); }
.suite-desc { color: var(--ink-500); font-size: 13px; line-height: 1.45; }
.suite-stats {
  display: flex; gap: 14px; margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  color: var(--ink-700);
}
.suite-stats .k { color: var(--ink-500); margin-right: 4px; }
.bar { height: 6px; border-radius: 999px; background: var(--ink-100); overflow: hidden; }
.bar-fill { height: 100%; background: var(--seal-500); transition: width 300ms ease; }
.bar-fill.fail { background: var(--red-500); }

/* Suite detail panel (tests dashboard) */
.detail {
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  margin-top: 20px; overflow: hidden;
}
.detail-head {
  padding: 18px 22px; border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink-50);
}
.detail-title { font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-size: 24px; }
.detail-close {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500);
  background: transparent; border: 1px solid var(--hair); border-radius: 6px;
  padding: 6px 12px; cursor: pointer;
}
.detail-close:hover { color: var(--seal-700); border-color: var(--seal-500); }
.detail-body { padding: 4px 0 0; }
table.files { width: 100%; border-collapse: collapse; }
table.files th, table.files td {
  padding: 10px 22px; text-align: left; font-size: 13px;
  border-bottom: 1px solid var(--hair-soft);
}
table.files th {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500);
  font-weight: 500; background: var(--ink-50);
}
table.files td.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-700); }
table.files td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.files td.pass { color: var(--seal-700); font-weight: 500; }
table.files td.fail { color: var(--red-500); font-weight: 500; }
table.files tr:last-child td { border-bottom: 0; }
table.files tr:hover td { background: rgba(47,143,118,0.03); }

/* Tabs (hackathon board) */
.tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 28px;
  padding: 8px; background: var(--ink-50);
  border: 1px solid var(--hair); border-radius: 12px;
}
.tab {
  appearance: none; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink-700);
  background: #fff;
  padding: 12px 20px;
  border: 1px solid var(--hair); border-radius: 10px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.tab .tab-count {
  display: inline-block; padding: 2px 9px;
  border-radius: 999px;
  background: var(--seal-700); color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  min-width: 22px; text-align: center;
  box-shadow: 0 2px 6px -2px rgba(30,95,79,0.4);
}
.tab:hover {
  color: var(--seal-700); border-color: var(--seal-500);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -12px rgba(47,143,118,0.35);
}
.tab.active {
  color: #fff;
  background: var(--seal-700);
  border-color: var(--seal-700);
  box-shadow: 0 8px 20px -10px rgba(30,95,79,0.5);
}
.tab.active .tab-count {
  background: rgba(255,255,255,0.22); color: #fff;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tab-fade 180ms ease; }
@keyframes tab-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tab-panel .tab-panel-head { margin-bottom: 18px; }
.tab-panel .tab-panel-head h2 { margin: 0 0 6px; }

/* Mobile tabs — below 640px the buttons overflow their container when
   wrapping (5+ tabs, three ragged rows). Switch to a single-line horizontal
   strip that scrolls; each tab keeps its full label and stays a 44px-tall
   touch target. */
@media (max-width: 640px) {
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px;
    gap: 6px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* Hackathon reuse split (prior work vs submission-window work) */
.split-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .split-grid { grid-template-columns: repeat(2, 1fr); } }
.split-card {
  position: relative;
  border: 1px solid var(--hair); border-radius: 10px; background: #fff;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.split-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ink-300, #b8c3c1);
}
.split-card.new::before { background: var(--seal-500); }
.split-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.split-title {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400;
  font-size: 22px; line-height: 1.15;
}
.split-package {
  font-size: 12.5px; color: var(--ink-500);
  padding: 4px 8px; background: var(--ink-50); border-radius: 4px;
  align-self: flex-start;
}
.split-scope { font-size: 14px; color: var(--ink-700); line-height: 1.55; }
.split-list-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500);
  margin-top: 6px;
}
.split-list { margin: 0; padding-left: 18px; }
.split-list li { margin-bottom: 6px; font-size: 13.5px; color: var(--ink-700); line-height: 1.5; }

/* Footer — unified across every report page. Brand mark + wordmark +
   page tag on the left; timestamp (optional, populated by dashboards)
   and GitHub link on the right. Story pages leave nav-meta empty and
   the separator hides via :empty + adjacent-sibling. */
footer, footer.foot {
  padding: 40px 0 32px; margin-top: 40px;
  border-top: 1px solid var(--hair);
  color: var(--ink-500); font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
footer a, footer.foot a {
  color: var(--seal-700);
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
footer a:hover, footer.foot a:hover { border-color: var(--seal-500); }
footer .foot-brand {
  display: inline-flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
footer .foot-mark { display: inline-flex; }
footer .foot-mark svg { width: 20px; height: 20px; display: block; }
footer .foot-wordmark {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700; font-size: 15px;
  color: var(--seal-700);
  letter-spacing: -0.01em;
}
footer .foot-tag {
  color: var(--ink-500);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  border-left: 1px solid var(--hair); padding-left: 10px;
}
footer .foot-meta {
  display: inline-flex; align-items: center; gap: 8px;
}
footer .foot-sep { color: var(--ink-300); }
footer .nav-meta:empty { display: none; }
footer .nav-meta:empty + .foot-sep { display: none; }
@media (max-width: 640px) {
  footer, footer.foot {
    justify-content: center; text-align: center;
    padding: 28px 0 20px;
    gap: 10px;
  }
  footer .foot-brand {
    justify-content: center; flex-wrap: nowrap; gap: 8px;
  }
  footer .foot-mark svg { width: 18px; height: 18px; }
  footer .foot-wordmark { font-size: 13px; }
  footer .foot-tag {
    font-size: 9.5px; letter-spacing: 0.10em;
    padding-left: 8px;
  }
  footer .foot-meta { flex-wrap: nowrap; gap: 6px; font-size: 11px; }
}