/* UX Lab stylesheet (ux-lab branch, 2026-10-12).

   Every lab feature keeps its styles here, after site.css, so the review
   branch can be read as a diff: site.css is the live site, lab.css is
   the proposal. Each block names the feature it belongs to so a feature
   can be lifted into site.css on its own, or dropped, when the owner
   decides. Colors use the site's own tokens; the dark theme remaps those
   tokens in lab-theme.css rather than restyling components. */

/* ------------------------------------------------------------------ */
/* Shared: tokens, numerals, motion easing, and small utilities        */
/* ------------------------------------------------------------------ */

:root {
  --text-strong:  #203040;   /* steel used as text (headings, labels) */
  --pressed-text: #FFFFFF;   /* text on a pressed filter button, 5.76:1 */
}

/* Counts and dates line up in columns when their digits share a width
   (Curated.design sets tnum at the root; measured 2026-10-12). */
.filter-count, .card-count, .verified, .lab-count, .badge,
.filter-button, .lab-chip, .lab-toc a, .trust-strip {
  font-variant-numeric: tabular-nums;
}

/* The hover lift on cards eases out instead of running linear
   (Are.na and Curated share this curve; NN/g recommends 100 to 400ms
   with ease-out for entrances). */
@media (hover: hover) and (pointer: fine) {
  .resource, .home .router-card, .check-step {
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* Visually hidden, still read by screen readers. */
.lab-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ */
/* Feature: filters rebuilt (counts, chips, status line, URL state)    */
/* ------------------------------------------------------------------ */

/* Option buttons carry a count in a quieter weight; the pair reads as
   "Free 212". A zero-count option stays clickable but fades, so the
   visitor can see it would empty the list (Baymard: counts let people
   avoid zero results). */
.filter-opt-count {
  font-size: 0.78em;
  color: var(--ink-muted);
  font-weight: 600;
}
.filter-button[aria-pressed="true"] .filter-opt-count { color: var(--pressed-text, #FFFFFF); }
/* A zero-count option reads as quiet, not disabled: muted ink on the
   card color still passes AA, and it stays clickable. */
.filter-button.is-zero { color: var(--ink-muted); border-color: var(--rule); }
.filter-button.is-zero .filter-opt-count { color: var(--ink-muted); }
/* Tap targets reach the WCAG 2.5.8 minimum of 24px (these are 34px). */
.filter-button { min-height: 2.125rem; border-radius: 2px; }
.filter-select { min-height: 2.5rem; }

/* The results bar sits directly under the filter panel: the live
   status line on the left, the density switch on the right, and the
   active chips on their own row underneath. */
.lab-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.9rem 0 0.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.lab-results-bar .lab-status { margin: 0; }
.lab-chips {
  flex-basis: 100%;
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lab-chip {
  font: inherit;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.2rem 0.55rem 0.2rem 0.7rem;
  border: 1px solid var(--ember-link);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink);
  cursor: pointer;
}
.lab-chip-key { color: var(--ink-muted); }
.lab-chip-value { font-weight: 600; }
.lab-chip-x {
  font-size: 1.1em;
  line-height: 1;
  color: var(--ember-link);
}
.lab-chip:hover { background: var(--paper); border-color: var(--ember-hover); }
.lab-chip-clear {
  border-color: var(--rule);
  color: var(--ember-link);
  font-weight: 600;
}

/* Preference buttons: a small segmented control used for density here
   and for appearance in the footer. */
.lab-density { display: inline-flex; align-items: center; gap: 0.35rem; }
.lab-density-label, .footer-prefs-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-right: 0.25rem;
}
.pref-button {
  font: inherit;
  font-size: 0.8rem;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.pref-button[aria-pressed="true"] {
  background: var(--steel);
  border-color: var(--steel);
  color: var(--white-hot);
}
.pref-button:hover { border-color: var(--steel); color: var(--ink); }
.pref-button[aria-pressed="true"]:hover { color: var(--white-hot); }

/* Empty result: says what is on, keeps the way out one tap away. */
.lab-empty {
  margin: 1.5rem 0;
  padding: 1.25rem 1.3rem;
  background: var(--paper-card);
  border: 1px dashed var(--rule);
  border-radius: 3px;
}
.lab-empty-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}
.lab-empty-body { margin: 0 0 0.9rem; color: var(--ink-muted); }
.lab-empty-actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
}

/* ------------------------------------------------------------------ */
/* Feature: phone filter sheet                                         */
/* ------------------------------------------------------------------ */

/* The sticky Filters button rides above the thumb zone, left of where
   the back-to-top button lives. */
.lab-sheet-button {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--ember-link);
  color: var(--pressed-text, #FFFFFF);   /* 5.76:1 light, 6.96:1 dark */
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 16, 24, 0.35);
}
.lab-sheet-count {
  background: var(--pressed-text, #FFFFFF);
  color: var(--ember-link);
  border-radius: 999px;
  min-width: 1.4em;
  padding: 0 0.4em;
  text-align: center;
  font-size: 0.8em;
  line-height: 1.5;
}
@media (min-width: 768px) { .lab-sheet-button { display: none; } }

.lab-sheet {
  border: 0;
  border-radius: 14px 14px 0 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  margin: auto 0 0;
  max-height: 85vh;
  max-height: 85dvh;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.lab-sheet:not([open]) { display: none; }
.lab-sheet::backdrop { background: rgba(16, 16, 24, 0.5); }
.lab-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.lab-sheet-head h2 {
  flex: 1;
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
}
.lab-sheet-clear {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ember-link);
  background: none;
  border: 0;
  padding: 0.4rem 0.3rem;
  cursor: pointer;
}
.lab-sheet-close {
  font-size: 1.6rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--paper-card);
  color: var(--ink);
  cursor: pointer;
}
.lab-sheet-body {
  /* flex: 1 alone (basis 0%) collapses this scroll container to nothing
     in WebKit when the dialog's height is auto; an auto basis with
     min-height 0 sizes it to its content and lets it shrink under the
     85dvh cap in every engine (found in real Safari, 2026-10-13). */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1rem 0.5rem;
}
.lab-sheet-body .filter-controls { display: flex; flex-direction: column; gap: 1.1rem; }
.lab-sheet-body .filter-button { min-height: 2.5rem; }
.lab-sheet-foot {
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.lab-sheet-foot .button { width: 100%; text-align: center; min-height: 2.9rem; }

/* ------------------------------------------------------------------ */
/* Feature: compact density                                            */
/* ------------------------------------------------------------------ */

/* Compact hides blurbs and tightens the cards so a long page scans
   like a list (Letterboxd's Small/Large toggle). Comfortable is the
   live layout, untouched. */
:root[data-density="compact"] .resource { padding: 0.55rem 0.8rem; margin-bottom: 0.4rem; }
:root[data-density="compact"] .resource-blurb { display: none; }
:root[data-density="compact"] .resource-name { font-size: 1rem; margin-bottom: 0.15rem; }
:root[data-density="compact"] .resource.has-logo { grid-template-columns: 28px minmax(0, 1fr); column-gap: 0.65rem; }
:root[data-density="compact"] .resource.has-logo > .resource-logo { width: 28px; height: 28px; padding: 2px; }
:root[data-density="compact"] .resource-meta { gap: 0.35rem; }
:root[data-density="compact"] .badge { font-size: 0.66rem; padding: 0.12rem 0.4rem; }
@media (min-width: 1024px) {
  :root[data-density="compact"] .resource.has-logo { grid-template-columns: 28px minmax(0, 1fr) auto; }
  :root[data-density="compact"] .resource.has-logo > .resource-side { flex-direction: row; gap: 1rem; align-items: center; }
}

/* ------------------------------------------------------------------ */
/* Feature: destination domain on cards                                */
/* ------------------------------------------------------------------ */

.lab-domain {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-muted);
  white-space: nowrap;
  letter-spacing: 0;
}
:root[data-density="compact"] .lab-domain { display: none; }

/* ------------------------------------------------------------------ */
/* Feature: saved listings                                             */
/* ------------------------------------------------------------------ */

/* The Save button sits with the link-checked label and Report Issue in
   the card's side column. Star outline when off, filled amber when on. */
.lab-save {
  font: inherit;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink-muted);
  cursor: pointer;
}
.lab-save-star { color: var(--rule); font-size: 1.05em; line-height: 1; }
.lab-save:hover { border-color: var(--ember-link); color: var(--ink); }
.lab-save[aria-pressed="true"] {
  border-color: var(--amber);
  background: #FFF4E5;
  color: var(--ink);
}
.lab-save[aria-pressed="true"] .lab-save-star { color: var(--amber); }
/* A saved card carries a thin amber mark at its left edge. */
.resource.lab-is-saved { border-left-color: var(--amber); }

/* "opened before" rides with the side column text. */
.lab-opened {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* The sticky bar's Saved link. */
.nav-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--white-hot);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  padding: 0.45rem 0.2rem;
  margin-top: 0.15rem;
}
.nav-saved:hover { color: var(--gold); }
.nav-saved-star { color: var(--gold); }
.nav-saved-count {
  background: var(--gold);
  color: #14161C;
  font-size: 0.72rem;
  line-height: 1.4;
  min-width: 1.4em;
  padding: 0 0.4em;
  border-radius: 999px;
  text-align: center;
}
@media (max-width: 640px) {
  .nav-saved-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-saved { font-size: 1.1rem; padding: 0.45rem 0.4rem; }
}
.nav-bar .nav-saved { order: 2; }
.nav-bar .nav-search { order: 3; }

/* The saved page. */
.lab-saved-note {
  font-size: 0.9rem;
  color: var(--ink-muted);
  background: var(--paper-card);
  border-left: 3px solid var(--gold);
  padding: 0.6rem 0.9rem;
  margin: 0 0 1.2rem;
}
.lab-saved-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
}
.lab-saved-status { font-size: 0.85rem; color: var(--ink-muted); margin-left: 0.3rem; }
.pref-button.lab-danger { color: var(--ember-link); }
.pref-button.lab-danger:hover { border-color: var(--ember-link); }
.page-saved .resource-side { margin-top: 0.35rem; }

/* ------------------------------------------------------------------ */
/* Feature: search upgrade                                             */
/* ------------------------------------------------------------------ */

/* Highlighted query words, in results and suggestions. */
mark {
  background: #FFE8B3;
  color: inherit;
  padding: 0 0.05em;
  border-radius: 2px;
}

.ac-heading {
  padding: 0.45rem 0.7rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.ac-recent .ac-name::before { content: "\21BA  "; color: var(--ink-muted); }
.ac-forget { color: var(--ink-muted); }

/* Result facets: directory pages with counts, then Free only. */
.lab-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.lab-facet {
  font: inherit;
  font-size: 0.82rem;
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink);
  cursor: pointer;
}
.lab-facet:hover { border-color: var(--ember-link); }
.lab-facet[aria-pressed="true"] {
  background: var(--steel);
  border-color: var(--steel);
  color: var(--white-hot);
}
.lab-facet[aria-pressed="true"] .filter-opt-count { color: var(--white-hot); opacity: 0.85; }
.lab-facet-free { margin-left: auto; border-color: var(--amber); }
.lab-facet-free[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #14161C; }
.lab-facet-free[aria-pressed="true"] .filter-opt-count { color: #14161C; }
.lab-dym { font-weight: 700; }

/* The phone sheet button must not cover the last card. */
.lab-has-sheet main { padding-bottom: 6rem; }


/* ------------------------------------------------------------------ */
/* Feature: on-this-page sidebar and section copy-links               */
/* ------------------------------------------------------------------ */

.lab-toc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  column-gap: 2rem;
  align-items: start;
}
.lab-toc-main { min-width: 0; }
.lab-toc {
  position: sticky;
  top: 4.6rem;
  max-height: calc(100vh - 5.4rem);
  max-height: calc(100dvh - 5.4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.2rem 0 1rem 0.2rem;
  margin-top: 2.5rem;
  border-left: 2px solid var(--rule);
  scrollbar-width: thin;
}
.lab-toc-title {
  margin: 0 0 0.4rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.lab-toc ol { list-style: none; margin: 0; padding: 0; }
.lab-toc li + li { margin-top: 0; }
.lab-toc a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.3rem 0.6rem 0.3rem 0.9rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
.lab-toc a:hover { color: var(--ember-link); border-left-color: var(--rule); }
.lab-toc a[aria-current="location"] {
  color: var(--ember-link);
  border-left-color: var(--ember);
  font-weight: 600;
}
.lab-toc-count {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.lab-toc li.is-empty a { color: var(--ink-muted); opacity: 0.55; }

/* Copy-link control inside section headings: present but quiet until
   the heading is hovered or the control is focused. */
.group-heading { position: relative; }
.lab-anchor {
  font-size: 0.85rem;
  line-height: 1;
  margin-left: 0.5rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  vertical-align: middle;
  opacity: 0;
  transition: opacity 120ms ease;
}
.group-heading:hover .lab-anchor,
.lab-anchor:focus-visible,
.lab-anchor.is-done { opacity: 1; }
.lab-anchor:hover { border-color: var(--rule); color: var(--ember-link); }
.lab-anchor.is-done::after {
  content: "Copied";
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 0.3rem;
  color: var(--ember-link);
}
/* Phones have no hover: the control stays visible but small. */
@media (hover: none) { .lab-anchor { opacity: 0.7; } }

/* The jump dropdown steps aside while the sidebar is on. */
.lab-toc-on .jump-nav { display: none; }

/* ------------------------------------------------------------------ */
/* Feature: wayfinding (nav counts, page facts, related, homepage)     */
/* ------------------------------------------------------------------ */

/* Listing counts in the menus. */
.nav-count {
  margin-left: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--steel-mist);
  font-variant-numeric: tabular-nums;
}
.site-nav a[aria-current="page"] .nav-count { color: var(--gold); }

/* Fact strip under a directory page's lede. */
.lab-pagemeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: -0.6rem 0 1.4rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.lab-pagemeta strong { color: var(--text-strong, var(--steel)); }
.lab-pagemeta a { font-weight: 600; }

/* Dated review line on guide and prose pages. */
.lab-reviewed {
  margin: -0.2rem 0 1.4rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.page-job-seeker-playbook .lab-reviewed { margin-bottom: 0.9rem; }

/* Count pill shared by the directory index and the related block. */
.lab-count {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-strong, var(--steel));
  background: var(--steel-tint);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  vertical-align: 0.1em;
}

/* Related directories at the foot of every directory page. */
.lab-related { margin-top: 3rem; }
.lab-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.4rem 1.5rem;
}
.lab-related li { margin: 0; }
.lab-related li + li { margin-top: 0; }
.lab-related a { font-weight: 600; }
.lab-related-note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--ink-muted); }

/* Homepage: situations block and the full directory index. Both join the
   hero grid at desktop through named areas. */
.lab-situations { margin: 1.4rem 0 0; }
.lab-situations h2 {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-strong, var(--steel));
  margin: 0 0 0.6rem;
}
.lab-situation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.lab-situation-list li { margin: 0; }
.lab-situation-list li + li { margin-top: 0; }
.lab-situation-list a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  min-height: 2.25rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-card);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.lab-situation-list a:hover { border-color: var(--ember-link); color: var(--ember-link); }

.lab-directory-index { margin-top: 2.6rem; }
.lab-directory-index > .group-heading { font-size: 1.3rem; }
.lab-dir-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem 2rem;
}
.lab-dir-group h3 {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.4rem;
}
.lab-dir-group ul { list-style: none; margin: 0; padding: 0; }
.lab-dir-group li { margin: 0; padding: 0.25rem 0; border-top: 1px solid var(--rule); }
.lab-dir-group li + li { margin-top: 0; }
.lab-dir-group a { font-weight: 600; text-decoration: none; }
.lab-dir-group a:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .home article.page {
    grid-template-areas:
      "eyebrow ."
      "h1      panel"
      "subhead panel"
      "summary panel"
      "intro   panel"
      "cta     panel"
      "trust   trust"
      "situations situations"
      "router  router"
      "dirs    dirs"
      "founder founder";
  }
  .home .lab-situations { grid-area: situations; }
  .home .lab-directory-index { grid-area: dirs; }
}
/* The situations block renders inside the cta paragraph's slot on the
   homepage (after the trust strip), so it must break out of the cta
   area's column at desktop; the named area above does that. */
.home .page-cta + .start-panel + .trust-strip + .lab-situations { margin-top: 1.4rem; }

/* The criteria page's funding note. */
.lab-money {
  margin-top: 2.5rem;
  padding: 1.1rem 1.3rem;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: 3px;
}
.lab-money h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.lab-money p { margin: 0; }

/* ------------------------------------------------------------------ */
/* Feature: playbook progress, remembered on request                   */
/* ------------------------------------------------------------------ */

.lab-remember {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.5rem 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-strong, var(--steel));
  cursor: pointer;
}
.lab-remember input { margin: 0.15rem 0 0; accent-color: var(--steel); }

/* ------------------------------------------------------------------ */
/* Feature: visual polish (small, CSS only)                            */
/* ------------------------------------------------------------------ */

/* Type badges as a dark shade on a pale tint of the same hue, the way
   GOV.UK and USWDS build tags, instead of solid steel. The cost badges
   keep their amber and gold, which carry the brand. Measured directories
   (AlternativeTo, Product Hunt) keep secondary tags quieter than the
   primary one, so cost reads first. #203040 on #E4E9EE is 10.9:1. */
.badge-type-nonprofit, .badge-type-government, .badge-type-tool,
.badge-type-training, .badge-type-community, .badge-type-recruiter,
.badge-type-events {
  background: #E4E9EE;
  color: #203040;
  border: 1px solid #C9D2DB;
}

/* Page-to-page fades: one rule opts a static site into cross-document
   view transitions where the browser supports them; everyone else gets
   the plain navigation they have today. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
}

/* Listing names a touch lighter than 700 (measured directories sit at
   600 to 650 and get hierarchy from color, not weight). */
.resource-name { font-weight: 650; }

/* Phones: the situation links sit in two columns of wrapping text
   boxes instead of eight stacked pills, so the block stays near one
   third of a screen tall and the category rows arrive sooner. */
@media (max-width: 639px) {
  .lab-situation-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .lab-situation-list a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 2.6rem;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.25;
  }
}

/* ------------------------------------------------------------------ */
/* Guards: the hidden attribute must win over any display rule above   */
/* ------------------------------------------------------------------ */

.lab-save[hidden], .lab-saved-tools[hidden], .lab-chips[hidden],
.lab-sheet-button[hidden], .lab-empty[hidden], .lab-saved-note[hidden],
.lab-results-bar[hidden], [data-filters][hidden] {
  display: none !important;
}

/* Phones: the search facets run as one scrolling row so the results
   start within the first screen even for a broad query (ten facets
   stacked ran about 800px tall in Safari). Free only leads the row. */
@media (max-width: 639px) {
  .lab-facets {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.3rem;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .lab-facet { flex: 0 0 auto; white-space: nowrap; }
  .lab-facet-free { order: -1; margin-left: 0; }
}