/* ═══════════════════════════════════════════════════════════════
   Datasets cluster — new-design page styles (docs/DESIGN_SYSTEM.md).

   Serves BOTH registry-driven SEO clusters behind the navbar's "Datasets"
   dropdown, because they are one design with two content sets:
     /funding-data          + /funding-data/<slug>   (hub + 6 spokes)
     /jobs-data             + /jobs-data/<slug>      (hub + 4 spokes)
   One stylesheet, one set of `.dsx__*` classes, so a value lives once
   (the single-edit-point guarantee) — the same call made for the
   data-delivery hub + spokes in data-delivery-ds.css.

   Layout only. Cards, pills, chips, buttons, headings and the numbered
   badges are DS components; every value here is a theme.css token.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page rhythm: alternating bands, like the data-delivery cluster ── */

/* Vertical padding ONLY, as longhand. The `padding: 96px 0` shorthand also
   sets horizontal to 0, which silently clobbered `.ds-section`'s own 32px side
   padding (both are single-class selectors and this file loads after ds.css) —
   every band's cards ended up flush against the viewport edge. */
.dsx__band { padding-top: 96px; padding-bottom: 96px; border-top: 1px solid var(--border); }

.dsx__band:first-child { border-top: 0; }

.dsx__band--tint { background: var(--muted); }

.dsx__band--last { padding-bottom: 104px; }

/* ── Hero ── */

.dsx__hero { padding-top: 148px; padding-bottom: 72px; }

.dsx__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted-foreground);
}

.dsx__breadcrumb a { color: var(--muted-foreground); text-decoration: none; }

.dsx__breadcrumb a:hover { color: var(--foreground); }

.dsx__breadcrumb [aria-current] { color: var(--foreground); }

/* Left-aligned masthead using the FULL content width.

   This was a centred column first, capped at 62ch. That was the wrong fix:
   capping the lede at 62ch inside a 1136px box leaves ~500px unused, and
   centring it only moves that space to both sides instead of removing it —
   the text ends up stranded in the middle of the band rather than anchored
   to it. Reverted. The description now runs the width of the band, which is
   also what the pre-DS page did.

   The measure this gives up is real (see `.dsx__hook` below); the band's own
   1200px cap is what keeps it from running away entirely. */
.dsx__h1 { margin-top: 20px; }

.dsx__hook {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body-foreground);
  margin: 22px 0 0;
  text-wrap: pretty;
}

.dsx__intro { margin-top: 20px; }

.dsx__intro p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body-foreground);
  margin: 0 0 16px;
  text-wrap: pretty;
}

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

/* ── Prose column (intro paragraphs, problem, solution) ──
   A measure, not a full-width slab: long-form SEO copy at 1200px is
   unreadable, and the canvas keeps body text inside ~72ch. */

.dsx__prose { max-width: 72ch; }

.dsx__prose p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--body-foreground);
  margin: 0 0 18px;
  text-wrap: pretty;
}

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

/* Prose links only. Without the :not(), this painted the DS buttons that sit
   inside a prose column accent-blue on their ink background — a component's
   own colors are not the page's to override. */
.dsx__prose a:not([class*="ds-"]) { color: var(--accent); text-decoration: none; }

.dsx__prose a:not([class*="ds-"]):hover { text-decoration: underline; }

/* ── Editorial split ─────────────────────────────────────────────
   `.dsx__split` is GONE — it is `.ds-split` in ds.css. It was one of TWO
   pre-existing copies (the other was `.dd__split`), and the one written as a
   bare `0.62fr 1fr` where it needed `minmax(0, 1fr)`. */

/* ── Use-case card grid (both hubs) ── */

.dsx__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.dsx__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.dsx__card:hover { border-color: var(--foreground); }

.dsx__card-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 14px 0 0;
}

.dsx__card-blurb {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-foreground);
  margin: 10px 0 0;
}

/* Pushes the footer row to the card's bottom edge whatever the blurb length,
   so a 3-up row of unequal copy still has its metadata on one line. */
.dsx__card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

.dsx__card-updated {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* ── Numbered how-it-works steps ── */

.dsx__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.dsx__step {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.dsx__step-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 16px 0 0;
}

.dsx__step-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--body-foreground);
  margin: 8px 0 0;
}

/* ── Example searches: the queries people actually type ──
   Monospace on a tinted rail, so they read as input rather than prose. */

.dsx__queries { margin-top: 36px; padding: 0; list-style: none; display: grid; gap: 10px; }

.dsx__query {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--foreground);
}

/* Curly quotes around each row, so it reads as something a person typed —
   the pre-DS page wrapped these in italic curly quotes for the same reason.

   BOTH marks. The first version had only the `::before`, so every query
   opened a quotation and never closed it.

   And the row is no longer `display: flex`. It was, with `gap: 12px` — which
   is why the closing mark could not simply be added: in a flex row the text
   node and each pseudo-element are separate flex items, so `::after` would
   have landed 12px clear of the last word instead of against it. As inline
   pseudo-elements they sit in the text flow, hug the text, and the closing
   mark follows the last line when a long query wraps. */
.dsx__query::before { content: "\201C"; }
.dsx__query::after { content: "\201D"; }

.dsx__query::before,
.dsx__query::after {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1;
  color: var(--muted-foreground);
}

/* ── Signals (jobs spokes only): one-click real searches ── */

.dsx__signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
  padding: 0;
  list-style: none;
}

.dsx__signal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.dsx__signal:hover { border-color: var(--foreground); }

.dsx__signal-label {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

.dsx__signal-body {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body-foreground);
}

.dsx__signal-cta { margin-top: auto; padding-top: 8px; }

/* ── Proof screenshot ── */

.dsx__shot {
  margin: 36px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
}

.dsx__shot img { display: block; width: 100%; height: auto; }

/* ── Works in your assistant ──
   The chip row + inline URL that used to live here is GONE. It was a
   downgrade the migration made without meaning to: the pre-DS page had
   interactive "Works in" pills that opened a per-client popover with the
   install steps, and static chips replaced an affordance with a label.

   The section now renders `components/ui/mcp_picker.html` — the same picker
   the home page uses, in its `--compact` form. So there is one MCP-connect
   design on the site instead of the three it briefly had (home's picker, the
   legacy popover, and these chips), and this file needs no rules for it. */

/* ── FAQ ──
   `.dsx__faq*` is GONE. The three clusters had three drifting accordions
   (different question size, padding, answer size and measure). The
   `max-width: 900px` that surfaced the drift was on `.dd__faqs` only, in
   data-delivery-ds.css — NOT on this one; an earlier version of this comment
   copied that sentence across all three files and so blamed the wrong file.
   One component now: `.ds-accordion` in ds.css,
   consumed via components/ui/accordion.html. */

/* ── Related links ── */

.dsx__related { margin-top: 32px; padding: 0; list-style: none; columns: 2; column-gap: 48px; }

.dsx__related li { margin-bottom: 12px; break-inside: avoid; }

/* ── Closing ink band ──
   The data-delivery cluster's closing band, matched deliberately: the two
   clusters share a footer CTA so the site has one ending, not three. */

.dsx__closing { background: var(--primary); padding: 88px 32px; }

.dsx__closing-inner { max-width: 720px; margin: 0 auto; text-align: center; }

.dsx__closing-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--primary-foreground);
  margin: 0;
}

.dsx__closing-sub {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--primary-foreground-muted);
  margin: 18px 0 0;
}

.dsx__closing-cta { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }

/* ── Responsive ─────────────────────────────────────────────────
   Type floors are the DS's (ds.css, keyed at 768px). These blocks are
   LAYOUT, keyed where each layout actually breaks — keeping the two
   concerns on separate breakpoints, per the note in ds.css. */

@media (max-width: 1060px) {
  .dsx__cards,
  .dsx__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .dsx__related { columns: 1; }
}

@media (max-width: 640px) {
  .dsx__band { padding-top: 64px; padding-bottom: 64px; }
  .dsx__hero { padding-top: 116px; padding-bottom: 56px; }
  .dsx__cards,
  .dsx__steps,
  .dsx__signals { grid-template-columns: minmax(0, 1fr); }
  .dsx__card,
  .dsx__step { padding: 22px; }
  .dsx__closing { padding: 64px 20px; }
  .dsx__card-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Long queries wrap instead of setting the page's min width (rule 6). */
  .dsx__query { white-space: normal; overflow-wrap: anywhere; }
}

/* ── 44px tap targets for this page's OWN controls ───────────────────────
   ds.css's `any-pointer: coarse` block only reaches `.ds-*` selectors, so a
   page-local control matches nothing in it. The breadcrumb link is a real
   standalone navigation target — its `nav` holds nothing but links, so the
   WCAG 2.5.5 inline-text exemption does not apply — and sits at 19px. Same
   pointer key and reasoning as ds.css; read the long comment there before
   changing the query. */
@media (any-pointer: coarse) {
  .dsx__breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
}