/*
  Factory Design System — components.css
  Requires structure.css AND theme-default.css to be loaded first (in that
  order) — uses their custom properties only. structure.css supplies every
  --space-* and --text-* value below; theme-default.css (or a venture's
  brand.md, which replaces it wholesale) supplies every color, font-family,
  --radius-*, and --shadow-* value. No hardcoded colors, font-families,
  radii, or shadows below, and no hardcoded spacing/size that has a scale
  equivalent.

  Component set per references/design-system.md: page shell/container,
  section header, card, stat block, list row, email-capture block, footer.
  Light-mode only, mobile-first, AA-contrast. See README.md for the
  extraction log this was built from and the three-layer model
  (structure -> default theme -> per-venture brand.md).

  A venture re-skins by overriding ONLY the theme layer (one :root block
  in its brand.md, replacing theme-default.css) — this file and
  structure.css never need to change.
*/

/* ---------------------------------------------------------------
   PAGE SHELL / CONTAINER
   Both source artifacts: centered column, generous top/bottom
   padding, a max-width that keeps line length readable on desktop
   while staying edge-to-edge-safe on mobile (390px).
--------------------------------------------------------------- */
.fds-body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: var(--space-6) var(--space-3) var(--space-7);
}

.fds-shell {
  max-width: 680px; /* container width, not on the spacing/type scale */
  margin: 0 auto;
}

.fds-shell--wide {
  max-width: 1120px;
}

/* ---------------------------------------------------------------
   SECTION HEADER / MASTHEAD
   Shared pattern: small tracked mono eyebrow, large serif h1,
   a secondary dateline/subhead below, sitting on a hairline rule.
--------------------------------------------------------------- */
.fds-header {
  text-align: center;
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--hair-2);
  margin-bottom: var(--space-5);
}

.fds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.fds-header h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

@media (min-width: 700px) {
  .fds-header h1 {
    font-size: var(--text-2xl);
  }
}

.fds-header .fds-subhead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  margin-top: var(--space-2);
}

.fds-dateline {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
}

/* Section-level header used mid-page (not the page masthead):
   small uppercase label, optional trailing rule. */
.fds-section-head {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fds-section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, currentColor, transparent);
  opacity: 0.35;
}

/* ---------------------------------------------------------------
   CARD
   Shared pattern across all three source artifacts: white surface
   on the tinted page background, generous internal padding, soft
   two-layer shadow, rounded corners, thin hairline border. Optional
   left accent-color strip for coded/status cards.
--------------------------------------------------------------- */
.fds-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-4);
  margin-bottom: var(--space-3);
}

.fds-card:last-child {
  margin-bottom: 0;
}

.fds-card h2,
.fds-card h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.fds-card h2 {
  font-size: var(--text-lg);
  line-height: 1.25;
}

.fds-card h3 {
  font-size: var(--text-md);
}

.fds-card p {
  font-size: var(--text-base);
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

.fds-card p:last-child {
  margin-bottom: 0;
}

.fds-card p.fds-lead {
  color: var(--ink);
}

/* Status/coded left-border variants — small accent, never a fill */
.fds-card--red { border-left: 3px solid var(--red); }
.fds-card--green { border-left: 3px solid var(--green); }
.fds-card--blue { border-left: 3px solid var(--blue); }
.fds-card--amber { border-left: 3px solid var(--amber); }
.fds-card--accent { border-left: 3px solid var(--accent); }

/* Hero/lede variant: larger radius, italic serif intro paragraph */
.fds-lede {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
}

.fds-lede p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------------------------------------------------------------
   STAT BLOCK
   Big number + label, used for callouts (price, count, day number,
   score). Not present verbatim in the source artifacts but built
   from the same visual language as their numbered priority items
   and ledger rows (serif numeral in accent color + mono/uppercase
   label).
--------------------------------------------------------------- */
.fds-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
}

.fds-stat .fds-stat-number {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--accent);
}

.fds-stat .fds-stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fds-stat-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   LIST ROW
   Shared pattern: flex row, fixed-width mono time/label column,
   body text, hairline divider between rows, none on the last.
--------------------------------------------------------------- */
.fds-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fds-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--hair);
}

.fds-row:last-child {
  border-bottom: none;
}

.fds-row .fds-row-key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
  flex: 0 0 78px;
}

.fds-row .fds-row-body {
  font-size: var(--text-sm);
  color: var(--ink);
  flex: 1;
}

.fds-row .fds-row-body small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* Highlighted / "starred" row (e.g. a power day, a headline item) */
.fds-row--highlight .fds-row-key,
.fds-row--highlight .fds-row-body {
  color: var(--accent);
}

/* Small pill/chip, used inline after a row or card label */
.fds-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* ---------------------------------------------------------------
   EMAIL-CAPTURE BLOCK
   Not present in the source artifacts (they're private, not
   marketing pages) — built to match the shared visual language:
   quiet card, serif prompt, single input + button, no color noise.
--------------------------------------------------------------- */
.fds-capture {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  text-align: center;
}

.fds-capture h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.fds-capture p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 0 var(--space-4);
}

.fds-capture-form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.fds-capture-form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

.fds-capture-form input[type="email"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.fds-capture-form button {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--card);
  background: var(--ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

.fds-capture-form button:hover {
  background: var(--accent);
}

.fds-capture-form button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   FOOTER
   Shared pattern: small mono, muted color, centered or left-aligned,
   generous line-height, sits above/after a hairline rule.
--------------------------------------------------------------- */
.fds-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hair-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--muted);
  line-height: 1.8;
}

.fds-footer--center {
  text-align: center;
}

/* ---------------------------------------------------------------
   RESPONSIVE — mobile-first baseline
   Everything above already reads cleanly at 390px (single-column
   flex/stack by default); grid layouts a site builds on top of
   this file should collapse to 1 column below 700px, matching the
   breakpoint the source artifacts use. NOTE: these two @media
   numbers (480 / 700) mirror --breakpoint-sm / --breakpoint-md in
   structure.css — CSS custom properties can't be used inside an
   @media condition, so they're kept in sync by hand.
--------------------------------------------------------------- */
@media (max-width: 480px) {
  .fds-body {
    padding: var(--space-4) var(--space-2) var(--space-6);
  }

  .fds-card,
  .fds-lede,
  .fds-capture {
    padding: var(--space-3);
  }
}