/* ═══════════════ BUILD FEED · Design System v1 ═══════════════ */

/* ── Design tokens ── */
:root {
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #f6f5f1;
  --paper: #ffffff;
  --panel: #ffffff;
  --ink: #1a1714;
  --muted: #6b6258;
  --faint: #a8a094;
  --rule: #d9d2c3;
  --rule-strong: #1a1714;
  --accent: #b54328;
  --accent-soft: #f1d9d1;
  --fresh: #1c8a48;
  --recent: #b48a1a;
  --stale: #888888;
  --tag-bg: #eceae4;

  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  --page-max: 1280px;
}

[data-theme="dark"] {
  --bg: #1c1a17;
  --paper: #24211d;
  --panel: #2a2723;
  --ink: #e8e3d8;
  --muted: #9b9388;
  --faint: #6b6258;
  --rule: #3a3530;
  --rule-strong: #6b6258;
  --accent: #d46a52;
  --accent-soft: #3a1f17;
  --fresh: #4ade80;
  --recent: #facc15;
  --stale: #6b6b6b;
  --tag-bg: #2a2723;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; }
img { max-width: 100%; display: block; }

/* ── Typography ── */
.serif { font-family: var(--serif); }
.sans { font-family: var(--sans); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.label-caps { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.label-mono { font-family: var(--mono); font-size: 11px; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }

/* ── Responsive ── */
.desktop { display: block; }
.mobile { display: none; }
@media (max-width: 959px) {
  .desktop { display: none; }
  .mobile { display: block; }
}

/* ═══════════════ DESKTOP ═══════════════ */

/* ── Masthead ── */
.masthead {
  background: var(--paper);
  padding: var(--sp-lg) var(--sp-2xl) var(--sp-md);
  border-bottom: 1px solid var(--rule-strong);
  max-width: var(--page-max);
  margin: 0 auto;
}
.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-md);
}
.masthead-actions { display: flex; gap: var(--sp-md); align-items: center; }
.btn-ghost { font-size: 14px; color: var(--muted); padding: var(--sp-xs) var(--sp-sm); }
.btn-ghost:hover { color: var(--ink); }
.masthead-title {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  line-height: 1.05;
}
.masthead-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin-top: var(--sp-xs);
}
/* Row 1: tasks — the only navigation axis */
.nav-row-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-sm);
  margin-top: var(--sp-md);
}
.nav-tasks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.nav-tasks a {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  text-underline-offset: 4px;
}
.nav-tasks a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

.separator { color: var(--rule-strong); font-family: var(--serif); }

/* ── Dateline ── */
.dateline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px var(--sp-2xl);
  border-bottom: 1px solid var(--rule);
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--paper);
}

/* ── Feed ── */
.feed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: var(--sp-lg) var(--sp-2xl);
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--bg);
}

/* ── Section head ── */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.rule-line { flex: 1; height: 1px; background: var(--rule-strong); }

/* ── Cards ── */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--sp-md);
}
.card-row { padding-bottom: 14px; margin-bottom: 0; }
.card-overline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
.card-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--sp-xs);
}
.card-blurb {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: var(--sp-sm);
}
.card-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-sm);
  font-size: 12px;
  color: var(--muted);
}

/* Task map: maturity section + responsive card grid */
.task-group { display: flex; flex-direction: column; gap: var(--sp-md); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
@media (max-width: 1279px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

/* Empty task block */
.empty-task { padding: var(--sp-xl); text-align: center; }
.empty-task .card-title { font-size: 24px; }

/* "new" — the one freshness claim we back with a fact (year of appearance) */
.new-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  color: var(--accent);
  white-space: nowrap;
}

/* Round 12.1 — aliveness. The three states reuse the freshness tokens the
   design system already carries in both themes; `unknown` deliberately gets
   the faint colour and no dot, because "we looked and found nothing dated"
   should read as an absence, not as a fourth verdict. */
.activity-chip {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--faint);
}

.activity-chip[data-activity]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: currentColor;
}

.activity-chip[data-activity="unknown"]::before { display: none; }
.activity-chip[data-activity="evolving"] { color: var(--fresh); }
.activity-chip[data-activity="alive"] { color: var(--recent); }
.activity-chip[data-activity="quiet"] { color: var(--stale); }

.detail-activity {
  margin: 0 0 var(--sp-lg);
  font-size: 14px;
  line-height: 1.5;
}

.detail-activity .activity-chip { display: block; margin-bottom: var(--sp-xs); }

/* 14.2.4: what we could not check ourselves, said under the summary. Its own
   class, not .detail-activity — that one is the product's state, this one is
   ours, and an e2e test reads them apart. */
.detail-unread {
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: calc(var(--sp-xs) * -1) 0 var(--sp-sm);
}
.detail-activity a { color: var(--accent); }

/* Where the fact came from. Autodesk, Canva and Matterport shut automated
   clients out, so their newest dated page can only be read through the search
   index's extract of it — a weaker claim than opening the page, and the reader
   is told which one they are looking at. */
.fact-provenance { display: block; margin-top: var(--sp-xs); font-size: 12px; }

.mob-row-meta .activity-chip { margin-right: var(--sp-sm); }

/* 4.6.0 — the second kind of card. A model is not louder than a tool, it is
   different: the chip says how you reach it, because that is the fact that
   decides whether the rest of the card is any use to you. Open weights and a
   cloud endpoint are not better and worse, so they are not green and red —
   they are two neutral outlines, one filled, one not. */
.access-chip {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1px 5px;
  border: 1px solid var(--faint);
  color: var(--faint);
}

.access-chip[data-access="open-weights"] {
  border-color: var(--accent);
  color: var(--accent);
}

.card-model .card-overline { display: flex; align-items: center; gap: var(--sp-xs); justify-content: space-between; }
.mob-row-title .access-chip { margin-left: var(--sp-xs); }

/* 14.0.5b — what somebody who used it said. Set like the application claim,
   because they are the same kind of statement: a sentence that is only worth
   anything together with the page it came from. */
.detail-testimony {
  margin: 0 0 var(--sp-sm);
  font-size: 14px;
  line-height: 1.5;
}

.detail-testimony a { color: var(--accent); margin-left: var(--sp-xs); white-space: nowrap; }

/* Outbound link on the card itself: the visitor has already decided, do not
   make them open a panel first. */
.card-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.card-link:hover { text-decoration: underline; }

.footer-note { max-width: 68ch; line-height: 1.6; }

/* ── Chips / badges ── */
.chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--rule-strong);
}
.chip-accent {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* ── Delta (kept: derived from data, not a rank) ── */
.delta { font-family: var(--mono); font-size: 11px; }
.delta.up { color: var(--fresh); }
.delta.new { color: var(--accent); }

/* ── Source stack ── */
.src-stack { display: inline-flex; align-items: center; gap: 6px; }
.src-dots { display: inline-flex; }
.src-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-left: -4px;
  border: 1px solid var(--paper);
}
.src-dot:first-child { margin-left: 0; }

/* ── Freshness ── */
.freshness { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.dot.fresh { background: var(--fresh); }
.dot.recent { background: var(--recent); }
.dot.stale { background: var(--stale); }

/* ── Spacer ── */
.spacer { flex: 1; }

/* ── Footer ── */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-xl);
  border-top: 1px solid var(--rule-strong);
  padding: var(--sp-md) var(--sp-2xl);
  max-width: var(--page-max);
  margin: 0 auto;
}

/* ═══════════════ MOBILE ═══════════════ */
.mobile {
  background: var(--bg);
  padding-bottom: 80px;
}

.mob-header {
  background: var(--paper);
  padding: var(--sp-md) var(--sp-md) var(--sp-sm);
  border-bottom: 1px solid var(--rule-strong);
}
.mob-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-xs);
}
.mob-title {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.mob-tasks {
  display: flex;
  gap: 6px;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mob-tasks button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 5px 9px;
  border: 1px solid var(--ink);
  color: var(--ink);
  white-space: nowrap;
}
.mob-tasks button.active {
  background: var(--ink);
  color: var(--paper);
}

.mob-dateline {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

.mob-tool-row {
  padding: var(--sp-md);
  border-bottom: 1px solid var(--rule);
}
.mob-tool-row:last-child { border-bottom: 0; }
.mob-row-title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.mob-row-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.mob-empty { padding: var(--sp-lg) var(--sp-md); background: var(--paper); border-bottom: 1px solid var(--rule); }

.mob-section {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.mob-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

/* ═══════════════ DETAIL VIEW ═══════════════ */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-xl) 0;
  overflow-y: auto;
}
.detail-sheet {
  background: var(--paper);
  border: 1px solid var(--rule);
  width: 100%;
  max-width: 720px;
  margin: 0 var(--sp-md);
}
.detail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
}
.detail-back { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.detail-back:hover { color: var(--ink); }
.detail-body { padding: var(--sp-lg); }
.detail-rank {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--sp-xs);
}
.detail-name {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--sp-sm);
}
.detail-blurb {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 540px;
  margin-bottom: var(--sp-md);
}
.detail-actions {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}
.btn-primary {
  padding: 10px 18px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-block;
}
.btn-primary:hover { opacity: 0.9; }
.btn-ghost {
  padding: 10px 14px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }
.detail-screenshot {
  margin-bottom: var(--sp-lg);
}
.detail-section-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: var(--sp-sm);
  margin-top: var(--sp-lg);
}
.detail-reason {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: var(--sp-md);
}
.detail-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
  margin-top: var(--sp-lg);
}
@media (max-width: 640px) {
  .detail-two-col { grid-template-columns: 1fr; }
}
.detail-dl {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.7;
}
.detail-dl div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-sm);
  padding: 4px 0;
  border-bottom: 1px dotted var(--rule);
}
.detail-dl dt { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.detail-dl dd { margin: 0; }
.detail-sources {
  list-style: none;
  padding: 0;
  font-family: var(--serif);
  font-size: 13px;
}
.detail-sources li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-sm);
  padding: 6px 0;
  border-bottom: 1px dotted var(--rule);
}
.detail-sources a { text-decoration: underline; text-underline-offset: 2px; }
.detail-vendor { margin-bottom: var(--sp-sm); }