/* ============================================================
   LVRD · Case study "The LVRD Build" — page-specific styles
   Loads both the field-note primitives (article shell + P-*)
   and the case-study primitives (CS-*). CanonList is now
   canonical as CS-21 and lives in case-study-primitives.css.
   This file carries the remaining bespoke blocks: Installation
   manifest, numbers table, and a handful of page overrides.
   ============================================================ */
@import url("article-primitives.css");
@import url("case-study-primitives.css");

/* ============================================================
   Installation manifest — for §8 "The system"
   Same vocabulary as CanonList but with a richer column set:
   idx · name (sans, sentence case) · kind (mono caption) ·
   count (mono) · status pip (live / review).
   ============================================================ */
.manifest {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
}
.manifest-row {
  display: grid;
  grid-template-columns: 40px 1.4fr 1.6fr 110px 120px;
  align-items: baseline;
  gap: 24px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast) var(--easing-default);
}
.manifest-row:last-child { border-bottom: 0; }
.manifest-row:hover { background: var(--surface); }
.manifest-row .mn-idx {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-faint); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.manifest-row .mn-name {
  font-size: 16px; line-height: 22px;
  font-weight: 500;
  color: var(--fg-strong);
  letter-spacing: -0.005em;
}
.manifest-row .mn-kind {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted); letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 18px;
}
.manifest-row .mn-count {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-strong); letter-spacing: 0.02em;
  text-align: right;
  font-feature-settings: "tnum";
}
.manifest-row .mn-status {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.manifest-row .mn-status .mark {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.manifest-row .mn-status.mn-live   { color: var(--accent); }
.manifest-row .mn-status.mn-live   .mark { background: var(--accent); }
.manifest-row .mn-status.mn-review { color: var(--fg-muted); }
.manifest-row .mn-status.mn-review .mark {
  background: transparent;
  border: 1px solid var(--fg-muted);
  box-sizing: border-box;
}

/* ============================================================
   Numbers table — for §10
   ============================================================ */
.numbers {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border);
}
.numbers tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast);
}
.numbers tr:hover { background: var(--surface); }
.numbers th {
  text-align: left;
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  color: var(--fg);
  padding: 16px 16px 16px 0;
}
.numbers td.num {
  text-align: right;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  font-feature-settings: "tnum";
  padding: 16px 0;
  white-space: nowrap;
}

/* ============================================================
   Article H2 anchors — give the anchor scroll some headroom
   under the sticky header.
   ============================================================ */
.article h2[id] {
  scroll-margin-top: 96px;
}

/* ============================================================
   CSArtifact — equalize vertical padding for this page.
   Default kit value is 18/22 but the artifact in this piece
   carries a 3-line meta column; the asymmetric padding read
   as top-heavy. Override to symmetric 22px.
   ============================================================ */
.article .cs-artifact { padding: 22px; }

/* ============================================================
   CSMilestone — slight bottom-padding bump for this page.
   Visual leading on the desc's last line makes 56/56 read as
   top-heavy. Bump to 56/64 to balance the optical center.
   ============================================================ */
.article .cs-milestone { padding: 56px 48px 64px; }

/* ============================================================
   Responsive — keep system-grid, manifest, numbers, and the
   page-specific milestone/artifact overrides usable on tablet
   and phone. The CS primitives' own responsive paths live in
   case-study-primitives.css; this file only handles the bespoke
   blocks introduced here and undoes desktop-only overrides.
   ============================================================ */
@media (max-width: 1100px) {
  .system-grid { grid-template-columns: repeat(2, 1fr); }
  .system-grid > .cs-outcome:nth-child(3n) { border-right: 1px solid var(--border); }
  .system-grid > .cs-outcome:nth-child(2n) { border-right: 0; }
  .system-grid > .cs-outcome:nth-last-child(-n+3) { border-bottom: 1px solid var(--border); }
  .system-grid > .cs-outcome:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 900px) {
  /* Page overrides — undo the desktop-only padding bumps so the
     primitives' own ≤900 paths take effect. */
  .article .cs-milestone { padding: 36px 28px; }
  .article .cs-artifact { padding: 16px 18px; }

  /* Manifest — drop to a 2-row layout. Row 1 carries idx · name
     · status; row 2 carries kind + count. */
  .manifest-row {
    grid-template-columns: 32px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 4px;
    padding: 14px 16px;
  }
  .manifest-row .mn-idx   { grid-column: 1; grid-row: 1 / span 2; }
  .manifest-row .mn-name  { grid-column: 2; grid-row: 1; font-size: 15px; }
  .manifest-row .mn-status{ grid-column: 3; grid-row: 1; }
  .manifest-row .mn-kind  { grid-column: 2; grid-row: 2; }
  .manifest-row .mn-count { grid-column: 3; grid-row: 2; text-align: right; }
}

@media (max-width: 640px) {
  .article .cs-milestone { padding: 28px 22px 32px; }
  .article .cs-artifact { padding: 14px 16px; }

  .system-grid { grid-template-columns: 1fr; }
  .system-grid > .cs-outcome { border-right: 0 !important; border-bottom: 1px solid var(--border) !important; }
  .system-grid > .cs-outcome:last-child { border-bottom: 0 !important; }

  /* Numbers table — keep the row, drop type size further. */
  .numbers th { font-size: 13px; line-height: 20px; padding-right: 12px; }
  .numbers td.num { font-size: 15px; padding: 14px 0; }

  /* Manifest — tighten type at phone widths. */
  .manifest-row { padding: 12px 14px; column-gap: 12px; }
  .manifest-row .mn-name { font-size: 14px; line-height: 20px; }
  .manifest-row .mn-kind { font-size: 10px; }
  .manifest-row .mn-count { font-size: 11px; }
  .manifest-row .mn-status { font-size: 10px; }
}