/* Tour Dash — reports site brand system.
   Tokens lifted verbatim from tour-dash/src/index.css:
   light = A14 "Highlighter Desk", dark = A11 "Midnight Instrument".
   Chartreuse (--primary) is reserved for the primary action / active state only.
   Status colors are semantic and deliberately separate from the brand accent. */

:root {
  --background: 30 15.4% 94.9%;   /* f4f2f0 bone */
  --foreground: 30 20% 3.9%;      /* 0c0a08 ink */
  --card: 0 0% 100%;
  --card-foreground: 30 20% 3.9%;
  --primary: 64 88.9% 54.1%;      /* e4f222 chartreuse */
  --primary-foreground: 30 20% 3.9%;
  --secondary: 30 13.6% 91.4%;    /* ece9e6 */
  --muted: 30 13.6% 91.4%;
  --muted-foreground: 30 0.9% 42.4%; /* 6d6c6b ash */
  --border: 220 13% 91%;          /* e5e7eb hairline */
  --radius: 0.875rem;

  --shipped: 142 52% 34%;
  --progress: 36 84% 42%;
  --planned: 30 0.9% 52%;
  --shipped-bg: 142 45% 94%;
  --progress-bg: 36 80% 94%;
  --planned-bg: 30 10% 92%;
}

:root[data-theme="dark"] {
  --background: 210 11.1% 3.5%;   /* 08090a void */
  --foreground: 217.5 20.5% 84.7%; /* d0d6e0 mist */
  --card: 210 6.2% 6.3%;          /* 0f1011 carbon */
  --card-foreground: 217.5 20.5% 84.7%;
  --primary: 64 88.9% 54.1%;      /* e4f222 acid lime */
  --primary-foreground: 210 11.1% 3.5%;
  --secondary: 210 4.3% 9.0%;     /* 161718 obsidian */
  --muted: 210 4.3% 9.0%;
  --muted-foreground: 218.6 6.4% 56.9%; /* 8a8f98 fog */
  --border: 222.9 9.1% 15.1%;     /* 23252a graphite */

  --shipped: 142 48% 55%;
  --progress: 36 82% 60%;
  --planned: 218.6 6.4% 56.9%;
  --shipped-bg: 142 40% 11%;
  --progress-bg: 36 50% 11%;
  --planned-bg: 210 4.3% 11%;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: "cv01" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
a { color: inherit; }

.wrap { max-width: 840px; margin: 0 auto; padding: 0 24px 96px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px 18px; max-width: 840px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand svg { width: 24px; height: 24px; color: hsl(var(--foreground)); }
.brand span { font-size: 16px; font-weight: 510; letter-spacing: -0.01em; }
.bar-right { display: flex; align-items: center; gap: 6px; }

nav.site { display: flex; gap: 2px; }
nav.site a {
  font-size: 14.5px; font-weight: 500; text-decoration: none;
  color: hsl(var(--muted-foreground));
  padding: 7px 11px; border-radius: 8px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
nav.site a:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
nav.site a[aria-current="page"] { color: hsl(var(--foreground)); background: hsl(var(--muted)); }

.theme-btn {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid hsl(var(--border));
  background: transparent; color: hsl(var(--foreground)); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.theme-btn:hover { background: hsl(var(--muted)); }
.theme-btn svg { width: 15px; height: 15px; }

@media (max-width: 600px) {
  .topbar { flex-wrap: wrap; }
  nav.site { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  nav.site a { padding: 7px 9px; }
}

/* ---------- hero ---------- */
.hero { padding: 34px 0 42px; border-bottom: 1px solid hsl(var(--border)); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 510; letter-spacing: 0.04em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); margin-bottom: 16px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: hsl(var(--primary)); }
h1 { font-size: 38px; font-weight: 510; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 14px; }
.lede { font-size: 18px; line-height: 1.6; color: hsl(var(--muted-foreground)); max-width: 58ch; margin: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; font-size: 14.5px; color: hsl(var(--muted-foreground)); }
.meta b { color: hsl(var(--foreground)); font-weight: 510; }

@media (max-width: 560px) { h1 { font-size: 30px; } .lede { font-size: 16.5px; } }

/* ---------- sections ---------- */
section { padding: 44px 0; border-bottom: 1px solid hsl(var(--border)); }
section:last-of-type { border-bottom: none; }
.section-num {
  font-size: 13px; font-weight: 510; color: hsl(var(--muted-foreground));
  letter-spacing: 0.04em; margin-bottom: 10px;
}
h2 { font-size: 25px; font-weight: 510; letter-spacing: -0.01em; margin: 0 0 12px; }
h3 { font-size: 18px; font-weight: 510; letter-spacing: -0.005em; margin: 0 0 8px; }
.desc { font-size: 17px; line-height: 1.65; color: hsl(var(--muted-foreground)); max-width: 62ch; margin: 0 0 22px; }
p.body { font-size: 16.5px; line-height: 1.65; color: hsl(var(--muted-foreground)); max-width: 64ch; }

ul.changes { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 13px; }
ul.changes li { display: flex; gap: 12px; font-size: 16px; line-height: 1.55; color: hsl(var(--foreground)); }
ul.changes li::before {
  content: ""; width: 3px; border-radius: 999px; background: hsl(var(--primary));
  flex-shrink: 0; margin-top: 3px; align-self: stretch;
}
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ul.plain li {
  font-size: 16px; line-height: 1.55; color: hsl(var(--muted-foreground));
  padding-left: 18px; position: relative;
}
ul.plain li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 999px; background: hsl(var(--muted-foreground)); opacity: .55;
}
ul.plain li b { color: hsl(var(--foreground)); font-weight: 510; }

/* ---------- cards ---------- */
.card {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); padding: 22px 24px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* metric tiles */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric {
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); padding: 18px 18px 16px;
}
.metric .n { font-size: 28px; font-weight: 510; letter-spacing: -0.02em; line-height: 1.1; }
.metric .k { font-size: 13.5px; color: hsl(var(--muted-foreground)); margin-top: 6px; line-height: 1.4; }

/* phase blocks */
.phase { display: grid; grid-template-columns: 92px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid hsl(var(--border)); }
.phase:first-of-type { border-top: none; padding-top: 6px; }
.phase-tag { font-size: 13px; font-weight: 510; letter-spacing: 0.03em; color: hsl(var(--muted-foreground)); text-transform: uppercase; padding-top: 3px; }
@media (max-width: 640px) { .phase { grid-template-columns: 1fr; gap: 8px; } .phase:first-of-type { padding-top: 0; } }

/* standout feature */
.feature { padding: 24px 0; border-top: 1px solid hsl(var(--border)); }
.feature:first-of-type { border-top: none; }
.feature-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-size: 13.5px; font-weight: 590; margin-bottom: 12px;
}

/* pull quote */
.pull {
  border-left: 3px solid hsl(var(--primary)); padding: 4px 0 4px 20px; margin: 0 0 26px;
  font-size: 19px; line-height: 1.55; font-weight: 510; letter-spacing: -0.01em; max-width: 54ch;
}

/* ---------- status chips + roadmap ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 510; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.chip.shipped  { color: hsl(var(--shipped));  background: hsl(var(--shipped-bg)); }
.chip.progress { color: hsl(var(--progress)); background: hsl(var(--progress-bg)); }
.chip.planned  { color: hsl(var(--planned));  background: hsl(var(--planned-bg)); }

.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 800px) { .board { grid-template-columns: 1fr; } }
.col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.col-head .count { font-size: 13px; color: hsl(var(--muted-foreground)); }
.col-items { display: grid; gap: 10px; }
.item {
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 4px);
  background: hsl(var(--card)); padding: 14px 15px;
}
.item .t { font-size: 15px; font-weight: 510; line-height: 1.4; margin-bottom: 5px; }
.item .s { font-size: 13.5px; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.item .d {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  color: hsl(var(--muted-foreground)); margin-top: 9px; padding-top: 9px;
  border-top: 1px solid hsl(var(--border));
}
.item.is-shipped  { border-left: 2px solid hsl(var(--shipped)); }
.item.is-progress { border-left: 2px solid hsl(var(--progress)); }
.item.is-planned  { border-left: 2px solid hsl(var(--planned)); }

/* ---------- table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15.5px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; line-height: 1.5; }
th { font-weight: 510; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
td:first-child { font-weight: 510; }
td.dim { color: hsl(var(--muted-foreground)); font-weight: 400; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: hsl(var(--muted)); padding: 1.5px 5px; border-radius: 5px;
}

/* ---------- update rows ---------- */
.update {
  display: block; text-decoration: none; padding: 20px 22px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); transition: border-color .15s ease;
}
.update:hover { border-color: hsl(var(--muted-foreground)); }
.update-date { font-size: 13px; color: hsl(var(--muted-foreground)); letter-spacing: 0.02em; margin-bottom: 8px; }
.update-title { font-size: 19px; font-weight: 510; letter-spacing: -0.01em; margin: 0 0 7px; }
.update-sum { font-size: 15.5px; line-height: 1.6; color: hsl(var(--muted-foreground)); margin: 0; max-width: 60ch; }
.update-more { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 510; }
.update-more::after { content: " →"; }

/* ---------- footer ---------- */
footer {
  max-width: 840px; margin: 0 auto; padding: 28px 24px 56px;
  border-top: 1px solid hsl(var(--border));
  font-size: 14px; color: hsl(var(--muted-foreground));
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
}
footer a { text-decoration: none; }
footer a:hover { color: hsl(var(--foreground)); }