/* GENERATED by packages/design-system/scripts/build-wp.mjs in lonestar-launchpad-com. Do not edit; regenerate.
   Source: build/resource-library/css/resource-library.css */
/* ===========================================================================
   LoneStar LaunchPad — Resource Library hub.

   Imports the design-system tokens, then ONLY the components this page uses.
   No page imports a stylesheet named for a page it is not.
   =========================================================================== */

/* --- page-specific: layout and regions that belong to this page only --- */
/* ===========================================================================
   LoneStar LaunchPad — Resource Library hub (/resources/)

   COUPLING RESOLVED Sep 2026: this page imports site-shell.css, not another
   page's stylesheet. The shell carries the locals, resets and focus rings every
   page shares; the components above are exactly the ones this page renders.

   Departs from live deliberately, per approved Phase 2 decisions:
     · one category vocabulary, data-driven — a fifth is a data change
     · every count derived, never written down
     · TARGET (2026-09-28): the hub comps (docs/client-inputs: Ecosystem,
       Readiness, Content & Courses, Services, resource_cards). Live fills gaps.
     · carousel kept and repaired: labelled, arrows outside, keyboard-operable
     · cards: no flip; the excerpt shows on the face (clamped to three lines)
   Square corners, no shadows.
   =========================================================================== */
/* ---------------------------------------------------------------------------
   Un-tokenized locals — TOKEN GAPS, additional to the running list.
   --------------------------------------------------------------------------- */
:root {
  /* Category accents. Brand red/navy/slate carry three of them.
     Services needs a DARKENED gold: brand --lslp-gold #DAA520 measures 2.24:1
     on white and fails AA for text. #8B6914 measures 5.09:1. No token exists. */
  --lslp-x-accent-ecosystem:       var(--lslp-red);      /* 5.94:1 on white */
  --lslp-x-accent-readiness:       var(--lslp-navy);     /* 14.54:1 */
  --lslp-x-accent-content-courses: var(--lslp-slate);    /* 7.53:1 */
  --lslp-x-accent-services:        #8B6914;              /* 5.09:1 — NO TOKEN */

  --lslp-x-chip-fill: rgba(11, 42, 74, 0.05);            /* active filter chip */
}

/* ===========================================================================
   REGION A — Hero + featured carousel
   =========================================================================== */
.lslp-hub-hero .lslp-container { padding-block: var(--lslp-x-band-y); }
.lslp-hub-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lslp-space-6);
  align-items: center;
}@media (max-width: 767px){
 .lslp-hub-hero__grid { grid-template-columns: 1fr; }}

/* Grid/flex children default to min-width:auto, so the carousel track's
   min-content width (3 slides) would blow the column out past the viewport. */
.lslp-hub-hero__grid > * { min-width: 0; }

.lslp-hub-hero__body { display: flex; flex-direction: column; gap: var(--lslp-space-4); }
.lslp-hub-hero__title {
  font-family: var(--lslp-font-serif);
  font-size: var(--lslp-h1-size);
  line-height: var(--lslp-h1-line);
  letter-spacing: var(--lslp-h1-tracking);
  font-weight: var(--lslp-h1-weight);
  color: var(--lslp-navy);
}
.lslp-hub-hero__title em { font-style: italic; color: var(--lslp-red); }
.lslp-hub-hero__lead {
  padding-left: var(--lslp-space-4);
  border-left: 5px solid var(--lslp-line);
  font-size: var(--lslp-body-lg-size);
  line-height: var(--lslp-body-lg-line);
}
.lslp-hub-hero__actions { display: flex; gap: var(--lslp-space-4); flex-wrap: wrap; }

/* ===========================================================================
   REGION B — Filter bar
   Restyled: larger hit areas, a visible resting state, and linkable views.
   Buttons are real anchors (#slug) so they work without JS.
   =========================================================================== */
.lslp-filters { background: var(--lslp-navy); }
.lslp-filters .lslp-container { padding-block: var(--lslp-space-5); }
.lslp-filters__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--lslp-space-5);
  align-items: center;
}@media (max-width: 1024px){

  .lslp-filters__inner { grid-template-columns: 1fr; }}


/* Hub comps: plain mono tabs; the active one gold with a 3px gold underline. */
.lslp-filters__list { display: flex; flex-wrap: wrap; gap: var(--lslp-space-2) var(--lslp-space-5); }
.lslp-filter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: var(--lslp-space-3) var(--lslp-space-3);   /* 44px hit area */
  border-bottom: 3px solid transparent;
  font-family: var(--lslp-font-mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--lslp-white);
  text-decoration: none;
  cursor: pointer;
}
.lslp-filter:hover { border-bottom-color: var(--lslp-x-on-navy-50); }
.lslp-filter[aria-current="true"] { color: var(--lslp-gold); border-bottom-color: var(--lslp-gold); }
/* The underline as one element that slides between tabs (resource-library.js places it). Without JS
   it never shows, and the active tab keeps its own border, as before. */
.lslp-filters__list { position: relative; }
.lslp-filters__indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--w, 0);
  height: 3px;
  background: var(--lslp-gold);
  transform: translateX(var(--x, 0));
  pointer-events: none;
}
.lslp-filters__indicator[hidden] { display: none; }
.lslp-filters__list.has-indicator .lslp-filter[aria-current="true"] { border-bottom-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .lslp-filters__indicator.is-gliding { transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), width 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
}

/* Filter motion under View Transitions (resource-library.js names the parts only during a change).
   About 300ms, ease-out: groups glide and resize; leaving cards fade; arriving cards fade up 8px
   (their stagger is set per change); the results and the Browse panel are clipped as their height
   eases rather than stretched. Clicks pass through the overlay to the page. */
::view-transition { pointer-events: none; }
html.lslp-vt::view-transition-group(*) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
html.lslp-vt::view-transition-old(*):only-child { animation: lslp-vt-out 150ms ease-out both; }
html.lslp-vt::view-transition-new(*):only-child { animation: lslp-vt-in 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
html.lslp-vt::view-transition-old(hub-browse-title), html.lslp-vt::view-transition-new(hub-browse-title),
html.lslp-vt::view-transition-old(hub-browse-desc), html.lslp-vt::view-transition-new(hub-browse-desc) { animation-duration: 250ms; }
html.lslp-vt::view-transition-group(hub-results), html.lslp-vt::view-transition-group(hub-browse) { overflow: clip; }
html.lslp-vt::view-transition-old(hub-results), html.lslp-vt::view-transition-new(hub-results),
html.lslp-vt::view-transition-old(hub-browse), html.lslp-vt::view-transition-new(hub-browse) { height: 100%; object-fit: none; object-position: 50% 0; }
@keyframes lslp-vt-out { to { opacity: 0; } }
@keyframes lslp-vt-in { from { opacity: 0; transform: translateY(8px); } }
/* reduced motion: one quick fade, nothing moves */
html.lslp-vt-reduced::view-transition-group(*) { animation: none; }
html.lslp-vt-reduced::view-transition-old(*), html.lslp-vt-reduced::view-transition-new(*) { animation-duration: 120ms; animation-timing-function: ease-out; }
/* Mobile: one row that scrolls sideways, not three wrapped rows. */
@media (max-width: 767px) {
  .lslp-filters__list { flex-wrap: nowrap; gap: var(--lslp-space-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--lslp-x-section-x) * -1); padding-inline: var(--lslp-x-section-x); }
  .lslp-filters__list::-webkit-scrollbar { display: none; }
  .lslp-filter { flex: 0 0 auto; white-space: nowrap; }
}

.lslp-search { display: flex; }
.lslp-search__input {
  width: 100%;
  padding: var(--lslp-space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--lslp-x-on-navy-50);
  background: transparent;
  font-family: var(--lslp-font-mono);
  font-size: var(--lslp-mono-size);
  color: var(--lslp-white);
}
.lslp-search__input::placeholder { color: var(--lslp-x-on-navy-50); }
.lslp-search__input:focus-visible { outline-offset: 4px; }

/* ===========================================================================
   REGION B2 — Category panel ("Browse by Need")
   One panel, filled from the category data. Count is derived at runtime.
   =========================================================================== */
/* Hub comps: a 4px bar in the category accent down the left of the panel; the
   derived count and a clearing chip sit below it. */
.lslp-browse .lslp-container { padding-block: var(--lslp-space-7) 0; }
.lslp-browse__inner {
  display: flex;
  flex-direction: column;
  gap: var(--lslp-space-2);
  max-width: 1160px;
  margin-inline: var(--lslp-space-7) 0;
  padding-left: var(--lslp-space-6);
  border-left: 4px solid var(--lslp-accent, var(--lslp-red));
}
.lslp-browse__eyebrow {
  margin: 0;
  font-family: var(--lslp-font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--lslp-accent, var(--lslp-red));
}
.lslp-browse__title {
  margin: 0;
  font-family: var(--lslp-font-serif);
  font-size: var(--lslp-h4-size);
  line-height: 1.25;
  font-weight: 500;
  color: var(--lslp-navy);
}
.lslp-browse__desc { margin: 0; font-size: 20px; line-height: 1.6; color: var(--lslp-slate); }
.lslp-browse__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lslp-space-3) var(--lslp-space-4);
  margin: var(--lslp-space-6) 0 0 var(--lslp-space-7);
}
.lslp-browse__count { font-size: 20px; color: var(--lslp-slate); }
.lslp-browse__count strong { font-weight: 400; color: var(--lslp-ink); }
.lslp-browse__clear {
  display: inline-flex;
  align-items: center;
  gap: var(--lslp-space-3);
  padding: var(--lslp-space-1) var(--lslp-space-4);
  border: 1px solid var(--lslp-line);
  background: var(--lslp-limestone);
  font-family: var(--lslp-font-mono);
  font-size: 15px;
  color: var(--lslp-accent, var(--lslp-red));
  text-decoration: none;
}
.lslp-browse__clear:hover { border-color: currentColor; }
@media (max-width: 767px) {
  .lslp-browse__inner { margin-left: 0; padding-left: var(--lslp-space-4); }
  .lslp-browse__foot { margin-left: 0; }
  .lslp-browse__desc, .lslp-browse__count { font-size: var(--lslp-body-size); }
}

/* ===========================================================================
   REGION B3 — Card grid
   =========================================================================== */
/* One gap above the first card row, in All and in every filter, at every width: the results' top
   padding (--lslp-hub-gap-top). Sections are spaced by the column's gap, which skips hidden sections;
   the old sibling margin (.lslp-hub-section + .lslp-hub-section) still counted a hidden Ecosystem,
   so a filter on any later category opened 64px lower than Ecosystem did (2026-10-07). */
.lslp-results { --lslp-hub-gap-top: var(--lslp-space-7); }
.lslp-results .lslp-container {
  display: flex;
  flex-direction: column;
  gap: var(--lslp-space-8);
  padding-block: var(--lslp-hub-gap-top) var(--lslp-space-7);
}
/* Equal-height rows so the card foot pins; no fixed height anywhere. */
.lslp-results .lslp-resource-grid { align-items: stretch; }
.lslp-results .lslp-resource-card { height: 100%; }

/* ---------------------------------------------------------------------------
   All view: one section per category, in the filter tabs' order. Each opens with
   a header in the Browse panel's language (accent bar, browseTitle, count, one
   line of description, "View all n →"). Filtered: no headers, one full grid.
   --------------------------------------------------------------------------- */
.lslp-hub-section[hidden] { display: none; }
.lslp-hub-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--lslp-space-2) var(--lslp-space-7);
  align-items: end;
  margin-bottom: var(--lslp-space-6);
  padding-left: var(--lslp-space-5);
  border-left: 4px solid var(--lslp-accent, var(--lslp-red));
}
.lslp-hub-section__text { display: flex; flex-direction: column; gap: var(--lslp-space-1); min-width: 0; }
.lslp-hub-section__title {
  margin: 0;
  font-family: var(--lslp-font-serif);
  font-size: var(--lslp-h4-size);
  line-height: 1.25;
  font-weight: 500;
  color: var(--lslp-navy);
}
.lslp-hub-section__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin: 0;
  color: var(--lslp-slate);
}
.lslp-hub-section__meta { display: flex; align-items: baseline; gap: var(--lslp-space-5); margin: 0; white-space: nowrap; }
.lslp-hub-section__count { font-family: var(--lslp-font-mono); font-size: 14px; color: var(--lslp-slate); }
.lslp-hub-section__all {
  padding-block: var(--lslp-space-2);
  font-weight: 600;
  color: var(--lslp-accent, var(--lslp-red));
  text-decoration: none;
}
.lslp-hub-section__all:hover { text-decoration: underline; }
.lslp-hub-section__seeall { display: none; }   /* the mobile row's end tile only */
.lslp-results[data-filtered="true"] .lslp-hub-section__head,
.lslp-results[data-filtered="true"] .lslp-hub-section__seeall { display: none; }
/* The row is the containing block for anything absolutely positioned inside it
   (visually-hidden text), so nothing escapes the mobile scroller and widens the page. */
.lslp-hub-section__row { position: relative; }
/* Mobile swipe cue: square dots + "n of N", under each row. Desktop, tablet and
   filtered views never show it. */
.lslp-hub-section__pager { display: none; }
@media (max-width: 767px) {
  .lslp-results:not([data-filtered="true"]) .lslp-hub-section__pager:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: var(--lslp-space-4);
    margin-top: var(--lslp-space-4);
  }
}
/* A fixed window of 9 dots (8px + 6px gaps), the same width on every row; the track inside slides
   so the active dot stays near the middle (resource-library.js). Never wraps. Where more dots lie
   beyond an edge, that edge's dots shrink (.is-far, .is-near) and fade (the mask). */
.lslp-hub-section__dots {
  --dot: 8px;
  --dot-gap: 6px;
  flex: none;
  width: calc(9 * var(--dot) + 8 * var(--dot-gap));
  overflow: hidden;
  padding: 2px 0; /* room for the active dot's border */
}
.lslp-hub-section__dots.has-before { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px); mask-image: linear-gradient(to right, transparent, #000 24px); }
.lslp-hub-section__dots.has-after { -webkit-mask-image: linear-gradient(to left, transparent, #000 24px); mask-image: linear-gradient(to left, transparent, #000 24px); }
.lslp-hub-section__dots.has-before.has-after {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.lslp-hub-section__track { display: flex; flex-wrap: nowrap; gap: var(--dot-gap); width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .lslp-hub-section__track { transition: transform 240ms ease; }
  .lslp-hub-section__dot { transition: transform 240ms ease, background-color 240ms ease; }
}
.lslp-hub-section__dot {
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border: 1px solid var(--lslp-line);
  background: transparent;
}
.lslp-hub-section__dot.is-near { transform: scale(0.75); }
.lslp-hub-section__dot.is-far { transform: scale(0.5); }
/* the active dot: solid, dark, in the section's colour */
.lslp-hub-section__dot.is-active { background: var(--lslp-accent, var(--lslp-navy)); border-color: var(--lslp-accent, var(--lslp-navy)); transform: none; }
.lslp-hub-section__of {
  flex: none;
  font-family: var(--lslp-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--lslp-slate);
}
.lslp-hub-section__row:focus-visible { outline: 2px solid var(--lslp-navy); outline-offset: 4px; }

/* Mobile, All view: each section is a swipe row — ~1.2 cards visible so the next
   peeks, scroll-snap, a "See all →" tile at the end. Pure CSS: it scrolls with no
   JS; the row is a labelled, focusable region, so arrow keys scroll it too. */
@media (max-width: 767px) {
  .lslp-hub-section__head { grid-template-columns: 1fr; padding-left: var(--lslp-space-4); }
  .lslp-hub-section__desc { -webkit-line-clamp: 2; line-clamp: 2; font-size: 15px; }
  .lslp-results:not([data-filtered="true"]) .lslp-hub-section__row {
    display: flex;
    gap: var(--lslp-space-4);
    margin-inline: calc(var(--lslp-x-section-x) * -1);
    padding: 0 var(--lslp-x-section-x) var(--lslp-space-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lslp-x-section-x);
    scrollbar-width: none;
  }
  .lslp-results:not([data-filtered="true"]) .lslp-hub-section__row::-webkit-scrollbar { display: none; }
  .lslp-results:not([data-filtered="true"]) .lslp-hub-section__row > .lslp-resource-card {
    flex: 0 0 100%;
    height: auto;
    scroll-snap-align: start;
  }
  .lslp-results:not([data-filtered="true"]) .lslp-hub-section__seeall {
    display: flex;
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  .lslp-hub-section__seeall a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid var(--lslp-line);
    border-top: 8px solid var(--lslp-accent, var(--lslp-navy));
    font-weight: 600;
    color: var(--lslp-accent, var(--lslp-navy));
    text-decoration: none;
  }
}

.lslp-results__empty {
  padding: var(--lslp-space-8) 0;
  font-size: var(--lslp-body-lg-size);
  color: var(--lslp-text-muted);
  text-align: center;
}
.lslp-results__empty[hidden] { display: none; }

/* Phone: 16px in the search field (iOS zooms the page on focus below 16px) and a
   44px field; section links are full tap targets. */
@media (max-width: 767px) {
  .lslp-search__input { min-height: 44px; font-size: 16px; }
}
.lslp-hub-section__all { display: inline-flex; align-items: center; min-height: 44px; }