/*
  Workstride site: core pages
  Page-specific styles for src/pages/index.html (home), src/pages/platform/index.html,
  src/pages/tour.html and src/pages/resources.html. Only the classes introduced on
  these pages: shared components (exhibit, route-grid, hub-section, chips, field,
  table, callout, commitments) are styled once in ws.css and are never restyled here.
  Tokens only, no hex values. See tmp/requests/core.md for one upstream request.
*/

/* ------------------------------------------------------------------ */
/* Home: the paired outcome and deadline teasers in "Useful now"       */
/* ------------------------------------------------------------------ */
.demo-teasers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}

@media (min-width: 45rem) {
  .demo-teasers {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Platform overview: the capability index                             */
/* ------------------------------------------------------------------ */
.platform-index {
  margin-top: var(--s6);
}

.platform-index__controls:not(:empty) {
  margin-bottom: var(--s6);
}

/* Layout for the sentence builder and status filter this holds once
   site/assets/js/demos/platform-index.js mounts lives in
   site/assets/css/demos/platform-index.css. */

/* Upstream bug worked around locally (tmp/requests/core.md): .table--stack tr
   only sets display:block below 45rem, which beats the browser's own
   [hidden] rule at that width. Table rows this page hides for a filter must
   stay hidden at every width. */
.platform-index tr[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Product tour: steps, captions and transcripts (static; the stepper  */
/* controls product-tour.js reveals are styled in demos/product-tour.css) */
/* ------------------------------------------------------------------ */
.tour {
  margin-top: var(--s6);
}

.tour__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s7);
}

.tour__step-label {
  margin: 0 0 var(--s2);
  color: var(--ink-3);
  font-size: var(--t-micro);
  font-weight: 700;
}

.tour__step-title {
  margin: 0 0 var(--s4);
  font-size: var(--t-h3);
  font-weight: 800;
  line-height: 1.15;
}

.tour__caption {
  max-width: var(--measure);
  margin-top: var(--s4);
}

.tour__transcript {
  max-width: var(--measure);
  margin-top: var(--s3);
}

.tour__transcript summary {
  cursor: pointer;
  color: var(--ink-2);
  font-weight: 700;
}

.tour__transcript summary:focus-visible {
  outline: 3px solid var(--focus, var(--ink));
  outline-offset: 3px;
}

.tour__transcript p {
  margin-top: var(--s3);
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ */
/* Resources: the role and topic filter panel (chips are ws.css's own; */
/* this only lays the panel out and is hidden until resources.js runs) */
/* ------------------------------------------------------------------ */
.resources-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--ground);
}

.resources-filter__group {
  flex: 1 1 17rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.resources-filter__status {
  flex: 1 1 12rem;
  align-self: center;
  color: var(--ink-3);
  font-size: var(--t-small);
}