/**
 * Shared chrome for the resource list pages.
 *
 * The hero, the toolbar, the jump bar and the conversion card were written
 * three times, once per page, and had already drifted: the same control was a
 * different height, the same band a different colour. This file is the one
 * copy. Each page keeps its OWN styles for the thing it is actually about —
 * the job rows, the timeline cards — because those genuinely differ.
 *
 * Everything is scoped under .res-doc, which is the container the pages put
 * their design tokens on (--accent, --border, --text …). Unscoped rules here
 * would resolve those tokens against the app shell instead, where they mean
 * something else, and would also leak into the sidebar.
 *
 * Loaded AFTER each page's inline <style>, so where a rule overlaps, this one
 * wins. The superseded blocks were deleted from the pages rather than left to
 * rot; if a page needs to differ, it should say so below this file, not above
 * it.
 */

/* ── Hero ────────────────────────────────────────────────────────────────
   The dek ran the full 1160px column, which put a three-line paragraph at a
   measure nobody reads comfortably and made the page open with a wall. Capped
   at a normal reading width; the heading keeps the full column. */
.res-doc .hero-inner .dek,
.res-doc .article-hero-inner .article-dek {
  max-width: 62ch;
}

/* The count and the freshness line are one row of supporting detail, not two
   competing labels. Tightened against the dek above them. */
.res-doc .meta-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; font-size: 12.5px; color: var(--subtle);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────
   Grid, not flex-wrap. As a wrapping flex row the search box and the filter
   each claimed a full-width line of their own on the shell's narrower column
   — two stacked bars where one row was intended, which is most of what made
   the top of the page feel stacked and heavy. Explicit columns cannot wrap by
   accident; below 640px they stack because there they genuinely should. */
.res-doc .toolbar {
  max-width: 1160px; margin: 26px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  align-items: stretch;
}
.res-doc .toolbar input[type="search"],
.res-doc .toolbar select {
  min-width: 0; height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 14px; color: var(--text); background: #fff; outline: none;
  font-family: inherit;
}
.res-doc .toolbar select { min-width: 210px; cursor: pointer; }
.res-doc .toolbar input[type="search"]:focus,
.res-doc .toolbar select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(17, 85, 187, .12);
}
@media (max-width: 640px) {
  .res-doc .toolbar { grid-template-columns: minmax(0, 1fr); }
  .res-doc .toolbar select { min-width: 0; }
}

/* ── Jump bar ────────────────────────────────────────────────────────────
   Ten section links wrapping onto a second row inside a sticky band was the
   single messiest element on these pages: the band changed height as the
   viewport changed, and it read as a paragraph of links rather than a set of
   shortcuts. One row at every width, scrolled horizontally when it does not
   fit, so its height is constant and the eye has one line to scan. */
.res-doc .jumpnav-wrap {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.res-doc .jumpnav {
  max-width: 1160px; margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-size: 12.5px;
  /* The scrollbar is chrome on a row of links; the overflow is discoverable
     from the row being cut off, which is the normal convention here. */
  scrollbar-width: none;
}
.res-doc .jumpnav::-webkit-scrollbar { display: none; }
.res-doc .jumpnav-label {
  flex-shrink: 0; font-weight: 700; color: var(--subtle);
  text-transform: uppercase; letter-spacing: .06em; font-size: 10px;
}
.res-doc .jumpnav a {
  flex-shrink: 0; white-space: nowrap;
  color: var(--muted); font-weight: 600; padding: 4px 0;
  border-bottom: 1.5px solid transparent;
}
.res-doc .jumpnav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── The conversion card ─────────────────────────────────────────────────
   Was a pale strip with a sentence on the left and a text link on the right,
   at the same weight as the filter controls above it — the most important
   thing on the page styled as the least. It is now a card with its own
   surface and a real button.
   White on a tinted rule rather than a tinted fill: the job rows below are
   white cards, so a filled band cut the page in half horizontally. This reads
   as part of the same stack, just louder. */
.res-doc .cta-strip {
  /* Aligned to the CONTENT edge, not the container edge. .body is 1160px wide
     with 24px of gutter, so its rows are 1112px across; a card capped at 1160
     sat 48px wider than everything it sits above and read as a banner bolted
     on rather than part of the stack. The calc keeps the same 24px gutter at
     narrow widths, where the cap is not the constraint. */
  width: calc(100% - 48px); max-width: 1112px;
  margin: 30px auto 4px; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 42, 80, .05), 0 8px 24px rgba(20, 42, 80, .05);
}
.res-doc .cta-strip-text { min-width: 0; }
.res-doc .cta-strip p {
  font-size: 16px; font-weight: 750; color: var(--navy);
  letter-spacing: -.015em; line-height: 1.3;
}
.res-doc .cta-strip-sub {
  font-size: 13px; font-weight: 500; color: var(--muted);
  margin-top: 4px; line-height: 1.45;
}
/* A filled button, so the one action on the page does not have to compete
   with the section links for attention. */
.res-doc .cta-strip a {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 20px; border-radius: 10px;
  background: var(--navy); color: #fff;
  font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: background .12s, transform .12s, box-shadow .12s;
}
.res-doc .cta-strip a:hover {
  background: #22374F; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20, 42, 80, .18); text-decoration: none;
}
.res-doc .cta-strip a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 560px) {
  .res-doc .cta-strip { align-items: stretch; }
  .res-doc .cta-strip a { justify-content: center; width: 100%; }
}

/* ── The section label in the shell header ───────────────────────────────
   Every resource page carries this, hub and guides alike. It was on the hub
   only for one build, so opening a guide dropped you into a page whose header
   had gone blank — the shell was there, but nothing said where you were.
   Styled off Discover's .hs-tab so the two headers read as one component.

   Scoped to body[data-nav-id="resources"] rather than left bare: this sheet is
   linked into pages that also load shared.css, and a global `.top-header` rule
   here would restyle the header of anything that ever loads it. The body marker
   is already on every resource page for the sidebar's benefit. */
body[data-nav-id="resources"] .res-page-tabs {
  display: flex; align-items: center; padding-left: 24px; flex-shrink: 0;
}
body[data-nav-id="resources"] .res-page-tab {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  color: #2F5270; background: rgba(47, 82, 112, 0.11);
  padding: 7px 12px; border-radius: 7px; text-decoration: none;
}
body[data-nav-id="resources"] a.res-page-tab:hover { background: rgba(47, 82, 112, 0.17); }
/* The header is a row: label on the left, the shell's actions on the right. */
body[data-nav-id="resources"] .top-header { display: flex; align-items: center; }
body[data-nav-id="resources"] .top-header-inner { flex: 1; }