/* ===========================================================================
   SIERRA LOG & TIMBER — LANDOWNER RESOURCES WIDGET
   ===========================================================================

   The directory's own design, carried into somebody else's page: the same
   colour tokens as resources.sierralogandtimber.com (site/app/globals.css),
   the same two faces (Newsreader for headings, Public Sans for everything
   else), self-hosted beside this file so the widget makes no third-party
   request on a partner's behalf.

   Everything is scoped to #slt-resources and every colour is a custom
   property on that one selector. Three ways to change them, in the order a
   partner is likely to want them:

     ?accent=2d6a4f        one colour for buttons, bars and focus rings
     ?theme=dark|auto      light by default; dark starts dark, auto follows
                           the reader's system setting, and the reader's own
                           toggle switches either way
     self-hosting          override any --slt-* property from your own CSS

   ONE TYPE SCALE (12 / 13 / 14 / 16 / 19 / 24 / 30) AND ONE SPACING STEP
   (4px). The widget this replaces used eleven sizes chosen one element at a
   time, which is most of why it looked assembled rather than designed.

   CONTAINER QUERIES, NOT MEDIA QUERIES, for everything inside the widget:
   its width is whatever the partner's column gives it, which has nothing to
   do with the screen. The root's own padding is the one exception, because
   an element cannot query itself.
   =========================================================================== */

@font-face {
  font-family: "SLT Newsreader";
  src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SLT Public Sans";
  src: url("fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

#slt-resources {
  /* surfaces */
  --slt-ground: #f6f7f6;
  --slt-panel: #ffffff;
  --slt-shade: #eef1ee;
  /* text, darkest to lightest; --slt-muted is the lightest used for words */
  --slt-heading: #1c241d;
  --slt-body: #3c463d;
  --slt-muted: #5f6a60;
  --slt-faint: #8a948b;
  /* lines */
  --slt-line: #dde2dd;
  --slt-line-soft: #eef1ee;
  --slt-field: #b9c3ba;
  /* the pine, and the partner's accent which defaults to it */
  --slt-accent: #3f5a37;
  --slt-accent-deep: #334a2c;
  --slt-on-accent: #ffffff;
  --slt-accent-pale: #e7ede8;
  --slt-accent-ink: #2e4a33;
  /* the directory's three cost badges, verbatim */
  --slt-free-bg: #e3efe5;
  --slt-free-fg: #2e5a38;
  --slt-share-bg: #f3ecdc;
  --slt-share-fg: #6d5a22;
  --slt-reimb-bg: #e2ebf3;
  --slt-reimb-fg: #2f5473;
  /* maps */
  --slt-map-land: #f2f4f2;
  --slt-map-edge: #d3dad4;
  --slt-map-on: #e7ede8;
  --slt-map-on-edge: #8fb598;
  --slt-map-hover: #cfe0d2;

  --slt-radius: 12px;
  --slt-font: "SLT Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --slt-display: "SLT Newsreader", "Iowan Old Style", Georgia, serif;
  --slt-shadow: 0 1px 2px rgba(28, 36, 29, 0.05), 0 8px 24px rgba(28, 36, 29, 0.06);

  container-type: inline-size;
  box-sizing: border-box;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 28px 20px;
  background: var(--slt-ground);
  border: 1px solid var(--slt-line);
  border-radius: var(--slt-radius);
  color: var(--slt-body);
  font: 400 14px/1.55 var(--slt-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (max-width: 560px) {
  #slt-resources {
    padding: 20px 16px 16px;
  }
}

/* Dark: when the partner or the reader asks for it (data-theme="dark"), or
   under ?theme=auto when the reader's system is dark. Light otherwise, the
   system setting included: the root's own colours above ARE light, so a
   widget with no data-theme at all (no script) is light too.
   The same block twice, once for each way in, because a custom property set
   cannot be shared between a media query and an attribute selector. */
@media (prefers-color-scheme: dark) {
  #slt-resources[data-theme="auto"] {
    --slt-ground: #141a16;
    --slt-panel: #1c231e;
    --slt-shade: #232b25;
    --slt-heading: #eef2ee;
    --slt-body: #cdd5ce;
    --slt-muted: #a3aea5;
    --slt-faint: #7d887f;
    --slt-line: #2e3830;
    --slt-line-soft: #252d27;
    --slt-field: #46524a;
    --slt-accent-pale: #243227;
    --slt-accent-ink: #b8d4bd;
    --slt-free-bg: #1f3325;
    --slt-free-fg: #a9d4b2;
    --slt-share-bg: #36301f;
    --slt-share-fg: #e0cf96;
    --slt-reimb-bg: #1e2d3a;
    --slt-reimb-fg: #a9c7e3;
    --slt-map-land: #222a24;
    --slt-map-edge: #37433a;
    --slt-map-on: #2c4031;
    --slt-map-on-edge: #6f9a78;
    --slt-map-hover: #3b5642;
    --slt-shadow: none;
  }
  #slt-resources[data-theme="auto"]:not([data-accent]) {
    --slt-accent: #8fc09a;
    --slt-accent-deep: #a5cfae;
    --slt-on-accent: #10180f;
  }
}
#slt-resources[data-theme="dark"] {
  --slt-ground: #141a16;
  --slt-panel: #1c231e;
  --slt-shade: #232b25;
  --slt-heading: #eef2ee;
  --slt-body: #cdd5ce;
  --slt-muted: #a3aea5;
  --slt-faint: #7d887f;
  --slt-line: #2e3830;
  --slt-line-soft: #252d27;
  --slt-field: #46524a;
  --slt-accent-pale: #243227;
  --slt-accent-ink: #b8d4bd;
  --slt-free-bg: #1f3325;
  --slt-free-fg: #a9d4b2;
  --slt-share-bg: #36301f;
  --slt-share-fg: #e0cf96;
  --slt-reimb-bg: #1e2d3a;
  --slt-reimb-fg: #a9c7e3;
  --slt-map-land: #222a24;
  --slt-map-edge: #37433a;
  --slt-map-on: #2c4031;
  --slt-map-on-edge: #6f9a78;
  --slt-map-hover: #3b5642;
  --slt-shadow: none;
}
#slt-resources[data-theme="dark"]:not([data-accent]) {
  --slt-accent: #8fc09a;
  --slt-accent-deep: #a5cfae;
  --slt-on-accent: #10180f;
}

#slt-resources *,
#slt-resources *::before,
#slt-resources *::after {
  box-sizing: border-box;
}

#slt-resources :focus-visible {
  outline: 2px solid var(--slt-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

#slt-resources [tabindex="-1"]:focus {
  outline: none;
}

#slt-resources a {
  color: var(--slt-accent-ink);
}

#slt-resources button {
  font: inherit;
  color: inherit;
}

#slt-resources .slt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------- the top bar

   The reader's light and dark toggle, on every view, in a row of its own so
   it can never sit on a heading, a crumb trail or the home page's map
   whatever width the partner's column is. Pulled up into the root's padding
   so the row costs the page little height. The quiet button's own look:
   panel, field-coloured border, the accent on hover, the shared focus ring.
   Forty pixels square, a touch target, with an eighteen-pixel icon. */

#slt-resources .slt-top {
  display: flex;
  justify-content: flex-end;
  margin: -16px -16px 4px 0;
}

#slt-resources .slt-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--slt-field);
  border-radius: 10px;
  background: var(--slt-panel);
  color: var(--slt-heading);
  cursor: pointer;
  transition: border-color 0.15s;
}

#slt-resources .slt-theme:hover {
  border-color: var(--slt-accent);
}

#slt-resources .slt-theme svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 560px) {
  #slt-resources .slt-top {
    margin: -10px -8px 4px 0;
  }
}

/* ---------------------------------------------------------------- the head */

#slt-resources .slt-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--slt-muted);
}

#slt-resources .slt-title,
#slt-resources .slt-h {
  margin: 4px 0 8px;
  font: 500 30px/1.15 var(--slt-display);
  letter-spacing: -0.01em;
  color: var(--slt-heading);
}

#slt-resources .slt-h {
  margin: 0;
}

#slt-resources .slt-lede {
  margin: 0;
  max-width: 58ch;
  font-size: 16px;
  color: var(--slt-body);
}

/* --------------------------------------------------------------- the home */

#slt-resources .slt-home {
  display: grid;
  gap: 24px;
  align-items: start;
}

@container (min-width: 720px) {
  #slt-resources .slt-home {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 36px;
  }
}

#slt-resources .slt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

#slt-resources .slt-facts li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--slt-muted);
}

#slt-resources .slt-facts strong {
  font: 600 19px/1 var(--slt-display);
  color: var(--slt-heading);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- the search */

#slt-resources .slt-search {
  position: relative;
  margin-top: 20px;
}

#slt-resources .slt-field {
  position: relative;
}

#slt-resources .slt-field > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--slt-muted);
  pointer-events: none;
}

#slt-resources .slt-input {
  width: 100%;
  min-height: 48px;
  padding: 0 44px 0 42px;
  border: 1px solid var(--slt-field);
  border-radius: 10px;
  background: var(--slt-panel);
  color: var(--slt-heading);
  font: 400 16px/1.2 var(--slt-font);
  box-shadow: var(--slt-shadow);
  -webkit-appearance: none;
  appearance: none;
}

#slt-resources .slt-input::placeholder {
  color: var(--slt-faint);
}

#slt-resources .slt-input:focus {
  outline: none;
  border-color: var(--slt-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--slt-accent) 22%, transparent);
}

#slt-resources .slt-input::-webkit-search-cancel-button {
  display: none;
}

#slt-resources .slt-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--slt-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

#slt-resources .slt-clear:hover {
  background: var(--slt-shade);
  color: var(--slt-heading);
}

#slt-resources .slt-clear[hidden] {
  display: none;
}

#slt-resources .slt-hint {
  margin: 8px 2px 0;
  font-size: 13px;
  color: var(--slt-muted);
}

#slt-resources .slt-results {
  margin: 10px 0 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--slt-line);
  border-radius: 10px;
  background: var(--slt-panel);
  box-shadow: var(--slt-shadow);
}

#slt-resources .slt-results:empty {
  display: none;
}

#slt-resources .slt-option {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

#slt-resources .slt-option[aria-selected="true"],
#slt-resources .slt-option:hover {
  background: var(--slt-accent-pale);
}

#slt-resources .slt-option-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--slt-shade);
  color: var(--slt-accent-ink);
}

#slt-resources .slt-option-icon svg {
  width: 16px;
  height: 16px;
}

#slt-resources .slt-option-name {
  display: block;
  font-weight: 600;
  color: var(--slt-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#slt-resources .slt-option-where {
  display: block;
  font-size: 13px;
  color: var(--slt-muted);
}

#slt-resources .slt-option-go {
  font-size: 18px;
  color: var(--slt-muted);
}

#slt-resources mark {
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--slt-accent) 55%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- the maps */

#slt-resources .slt-map {
  display: block;
  width: 100%;
  height: auto;
}

#slt-resources .slt-map path {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

#slt-resources .slt-land {
  fill: var(--slt-map-land);
  stroke: var(--slt-map-edge);
  stroke-width: 1;
}

#slt-resources .slt-on {
  fill: var(--slt-map-on);
  stroke: var(--slt-map-on-edge);
  stroke-width: 1;
  cursor: pointer;
  transition: fill 0.15s;
}

#slt-resources .slt-on:hover,
#slt-resources .slt-on.slt-hot {
  fill: var(--slt-map-hover);
}

#slt-resources .slt-subject {
  fill: var(--slt-map-on);
  stroke: var(--slt-accent);
  stroke-width: 1.75;
}

#slt-resources .slt-map-label {
  font: 600 11px/1 var(--slt-font);
  fill: var(--slt-accent-ink);
  text-anchor: middle;
  pointer-events: none;
}

#slt-resources .slt-map-count {
  font-weight: 400;
  fill: var(--slt-muted);
}

#slt-resources .slt-town circle {
  fill: var(--slt-accent);
}

#slt-resources .slt-town text {
  font: 500 11px/1 var(--slt-font);
  fill: var(--slt-heading);
  paint-order: stroke;
  stroke: var(--slt-panel);
  stroke-width: 3px;
  stroke-linejoin: round;
}

#slt-resources .slt-town-from circle {
  fill: #c46d3b;
}

#slt-resources .slt-mapcard {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--slt-line);
  border-radius: var(--slt-radius);
  background: var(--slt-panel);
  box-shadow: var(--slt-shadow);
}

#slt-resources .slt-mapcard figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--slt-muted);
}

/* ------------------------------------------------------------ state buttons */

#slt-resources .slt-states {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}

#slt-resources .slt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--slt-line);
  border-radius: 999px;
  background: var(--slt-panel);
  color: var(--slt-heading);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

#slt-resources .slt-chip:hover,
#slt-resources .slt-chip.slt-hot {
  border-color: var(--slt-accent);
  background: var(--slt-accent-pale);
}

#slt-resources .slt-chip small {
  font-size: 12px;
  font-weight: 400;
  color: var(--slt-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- inner page head */

#slt-resources .slt-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--slt-muted);
}

#slt-resources .slt-crumb {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--slt-accent-ink);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

#slt-resources .slt-crumb:hover {
  text-decoration-color: currentColor;
}

#slt-resources .slt-sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--slt-muted);
}

#slt-resources .slt-h2 {
  margin: 0 0 12px;
  font: 500 19px/1.25 var(--slt-display);
  color: var(--slt-heading);
}

/* ---------------------------------------------------------------- the state */

#slt-resources .slt-state {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}

@container (min-width: 760px) {
  #slt-resources .slt-state {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

#slt-resources .slt-filter {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--slt-field);
  border-radius: 8px;
  background: var(--slt-panel);
  color: var(--slt-heading);
  font: 400 14px/1.2 var(--slt-font);
}

#slt-resources .slt-filter:focus {
  outline: none;
  border-color: var(--slt-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--slt-accent) 22%, transparent);
}

#slt-resources .slt-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 10px 0 4px;
}

#slt-resources .slt-letter {
  min-width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--slt-accent-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#slt-resources .slt-letter:hover {
  background: var(--slt-accent-pale);
}

#slt-resources .slt-letter:disabled {
  color: var(--slt-faint);
  cursor: default;
  background: transparent;
}

#slt-resources .slt-counties {
  max-height: 460px;
  overflow-y: auto;
  margin-top: 6px;
  padding-right: 4px;
  scrollbar-width: thin;
}

#slt-resources .slt-group {
  margin: 0;
  padding: 0;
  list-style: none;
}

#slt-resources .slt-group-head {
  position: sticky;
  top: 0;
  padding: 8px 2px 4px;
  background: var(--slt-ground);
  font: 600 12px/1 var(--slt-font);
  letter-spacing: 0.06em;
  color: var(--slt-muted);
}

#slt-resources .slt-county-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--slt-heading);
  text-align: left;
  cursor: pointer;
}

#slt-resources .slt-county-btn:hover,
#slt-resources .slt-county-btn.slt-hot {
  background: var(--slt-panel);
  border-color: var(--slt-line);
}

#slt-resources .slt-county-btn span:last-child {
  color: var(--slt-muted);
}

/* --------------------------------------------------------------- the county */

#slt-resources .slt-county {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

@container (min-width: 760px) {
  #slt-resources .slt-county {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: start;
  }
}

#slt-resources .slt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
}

#slt-resources .slt-stat {
  padding: 12px;
  border: 1px solid var(--slt-line);
  border-radius: 10px;
  background: var(--slt-panel);
}

#slt-resources .slt-stat dt {
  font-size: 12px;
  color: var(--slt-muted);
}

#slt-resources .slt-stat dd {
  margin: 2px 0 0;
  font: 600 24px/1.1 var(--slt-display);
  color: var(--slt-heading);
  font-variant-numeric: tabular-nums;
}

#slt-resources .slt-section {
  padding: 18px;
  border: 1px solid var(--slt-line);
  border-radius: var(--slt-radius);
  background: var(--slt-panel);
  box-shadow: var(--slt-shadow);
}

#slt-resources .slt-section + .slt-section {
  margin-top: 16px;
}

/* the category chart */

#slt-resources .slt-bars {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#slt-resources .slt-bar {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

#slt-resources .slt-bar-label {
  color: var(--slt-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#slt-resources .slt-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--slt-shade);
  overflow: hidden;
}

#slt-resources .slt-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--slt-accent);
  transform-origin: left;
  animation: slt-grow 0.5s ease-out both;
}

#slt-resources .slt-bar-n {
  text-align: right;
  font-weight: 600;
  color: var(--slt-heading);
  font-variant-numeric: tabular-nums;
}

/* the programmes */

#slt-resources .slt-progs {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#slt-resources .slt-prog {
  padding: 12px 14px;
  border: 1px solid var(--slt-line-soft);
  border-radius: 10px;
  background: var(--slt-ground);
}

#slt-resources .slt-prog-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

#slt-resources .slt-prog-name {
  font-weight: 600;
  color: var(--slt-heading);
}

#slt-resources .slt-prog-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--slt-muted);
}

#slt-resources .slt-badge {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--slt-shade);
  color: var(--slt-body);
}

#slt-resources .slt-badge--free { background: var(--slt-free-bg); color: var(--slt-free-fg); }
#slt-resources .slt-badge--share { background: var(--slt-share-bg); color: var(--slt-share-fg); }
#slt-resources .slt-badge--reimb { background: var(--slt-reimb-bg); color: var(--slt-reimb-fg); }

#slt-resources .slt-more {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--slt-muted);
}

/* actions */

#slt-resources .slt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

#slt-resources .slt-button,
#slt-resources .slt-button-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

#slt-resources .slt-button {
  background: var(--slt-accent);
  color: var(--slt-on-accent);
  border: 1px solid var(--slt-accent);
}

#slt-resources .slt-button:hover {
  background: var(--slt-accent-deep);
}

#slt-resources .slt-button-quiet {
  border: 1px solid var(--slt-field);
  background: var(--slt-panel);
  color: var(--slt-heading);
}

#slt-resources .slt-button-quiet:hover {
  border-color: var(--slt-accent);
}

#slt-resources .slt-button svg,
#slt-resources .slt-button-quiet svg {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------ states of mind */

#slt-resources .slt-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--slt-shade);
  font-size: 14px;
  color: var(--slt-body);
}

#slt-resources .slt-skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--slt-shade) 0%, var(--slt-line-soft) 50%, var(--slt-shade) 100%);
  background-size: 200% 100%;
  animation: slt-shimmer 1.2s linear infinite;
}

#slt-resources .slt-view {
  animation: slt-in 0.16s ease-out both;
}

@keyframes slt-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes slt-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes slt-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #slt-resources .slt-view,
  #slt-resources .slt-bar-fill,
  #slt-resources .slt-skel {
    animation: none;
  }
}

/* --------------------------------------------------------------- the foot */

#slt-resources .slt-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--slt-line);
  font-size: 13px;
  color: var(--slt-muted);
}

#slt-resources .slt-foot a {
  font-weight: 600;
}

#slt-resources .slt-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#slt-resources .slt-by svg {
  width: 16px;
  height: 16px;
}

#slt-resources .slt-caveat {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--slt-muted);
}

/* ------------------------------------------------------------- narrow frames */

@container (max-width: 520px) {
  #slt-resources .slt-title,
  #slt-resources .slt-h {
    font-size: 24px;
  }
  #slt-resources .slt-stat dd {
    font-size: 19px;
  }
  #slt-resources .slt-bar {
    grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 24px;
  }
}

/* =====================================================================
   PHASE 3: THE WHOLE COUNTY, THE SHADED STATE, AND WHERE-AM-I
   ===================================================================== */

/* the county header: name on the left, the two ways out on the right */
#slt-resources .slt-county-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 24px;
}

#slt-resources .slt-county-head .slt-actions {
  margin-top: 0;
}

#slt-resources .slt-county-side > * + * {
  margin-top: 16px;
}

#slt-resources .slt-intro {
  max-width: 72ch;
  margin-top: 16px;
  font-size: 15px;
  color: var(--slt-body);
}

#slt-resources .slt-intro p {
  margin: 0;
}

#slt-resources .slt-intro .slt-intro-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--slt-muted);
}

/* the chart's bars, once they filter the list */
#slt-resources .slt-bar:has(.slt-bar-btn) {
  display: block;
}

#slt-resources .slt-bar-btn {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 3px 4px;
  margin: -3px -4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

#slt-resources .slt-bar-btn:hover,
#slt-resources .slt-bar-btn[aria-pressed="true"] {
  background: var(--slt-accent-pale);
}

#slt-resources .slt-bar-btn[aria-pressed="true"] .slt-bar-label {
  font-weight: 600;
  color: var(--slt-heading);
}

/* filters */
#slt-resources .slt-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

#slt-resources .slt-select {
  min-height: 36px;
  max-width: 100%;
  padding: 0 32px 0 10px;
  border: 1px solid var(--slt-field);
  border-radius: 8px;
  background: var(--slt-panel);
  color: var(--slt-heading);
  font: 500 13px/1.2 var(--slt-font);
}

#slt-resources .slt-seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--slt-field);
  border-radius: 8px;
  overflow: hidden;
}

#slt-resources .slt-seg button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--slt-line);
  background: var(--slt-panel);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

#slt-resources .slt-seg button:last-child {
  border-right: 0;
}

#slt-resources .slt-seg button[aria-pressed="true"] {
  background: var(--slt-accent);
  color: var(--slt-on-accent);
}

#slt-resources .slt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--slt-body);
  cursor: pointer;
}

#slt-resources .slt-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--slt-accent);
}

#slt-resources .slt-count {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--slt-muted);
}

/* a programme, closed and open */
#slt-resources .slt-prog details > summary {
  display: block;
  list-style: none;
  cursor: pointer;
}

#slt-resources .slt-prog details > summary::-webkit-details-marker {
  display: none;
}

#slt-resources .slt-prog details > summary .slt-prog-meta {
  display: block;
}

#slt-resources .slt-prog details > summary::after {
  content: "Details \25BE";
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--slt-accent-ink);
}

#slt-resources .slt-prog details[open] > summary::after {
  content: "Less \25B4";
}

#slt-resources .slt-prog-flags {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

#slt-resources .slt-badge--status {
  background: var(--slt-share-bg);
  color: var(--slt-share-fg);
}

#slt-resources .slt-prog-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--slt-line);
  font-size: 14px;
}

#slt-resources .slt-prog-body > p {
  margin: 0 0 10px;
}

#slt-resources .slt-context {
  padding: 10px 12px;
  border-left: 3px solid var(--slt-map-on-edge);
  border-radius: 0 8px 8px 0;
  background: var(--slt-panel);
  color: var(--slt-body);
}

#slt-resources .slt-dl {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

#slt-resources .slt-dl dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--slt-muted);
}

#slt-resources .slt-dl dd {
  margin: 1px 0 0;
}

#slt-resources .slt-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#slt-resources .slt-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--slt-field);
  border-radius: 8px;
  background: var(--slt-panel);
  color: var(--slt-heading);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#slt-resources a.slt-contact:hover {
  border-color: var(--slt-accent);
}

#slt-resources .slt-contact svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--slt-accent-ink);
}

/* the caveat a sourced number carries: muted, never faint, because a caveat
   nobody can read is not a caveat (the directory's own rule) */
#slt-resources .slt-contact-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--slt-muted);
}

#slt-resources .slt-prog-link {
  margin: 10px 0 0;
  font-size: 13px;
}

/* the sections below the county */
#slt-resources .slt-wide {
  margin-top: 16px;
}

#slt-resources .slt-about {
  max-width: 72ch;
  margin: 0 0 14px;
  color: var(--slt-body);
}

#slt-resources .slt-offices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#slt-resources .slt-office {
  padding: 12px 14px;
  border: 1px solid var(--slt-line-soft);
  border-radius: 10px;
  background: var(--slt-ground);
}

#slt-resources .slt-office p {
  margin: 0;
}

#slt-resources .slt-office-name {
  font-weight: 600;
  color: var(--slt-heading);
}

#slt-resources .slt-office-addr,
#slt-resources .slt-office-notes {
  margin-top: 4px !important;
  font-size: 13px;
  color: var(--slt-body);
}

#slt-resources .slt-office .slt-contacts {
  margin-top: 10px;
}

#slt-resources .slt-office-map {
  max-width: 420px;
  margin-bottom: 14px;
}

#slt-resources .slt-more-offices,
#slt-resources .slt-retired {
  margin-top: 12px;
}

#slt-resources .slt-more-offices > summary,
#slt-resources .slt-retired > summary,
#slt-resources .slt-faq > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--slt-accent-ink);
  padding: 6px 0;
}

#slt-resources .slt-more-offices .slt-offices {
  margin-top: 8px;
}

#slt-resources .slt-seasons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#slt-resources .slt-season {
  padding: 12px 14px;
  border: 1px solid var(--slt-line-soft);
  border-radius: 10px;
}

#slt-resources .slt-season p {
  margin: 0 0 4px;
}

#slt-resources .slt-season-now {
  border-color: var(--slt-map-on-edge);
  background: var(--slt-accent-pale);
}

#slt-resources .slt-fact {
  margin-bottom: 12px;
}

#slt-resources .slt-fact p {
  margin: 0 0 2px;
}

#slt-resources .slt-faq {
  border-top: 1px solid var(--slt-line);
}

#slt-resources .slt-faq p {
  margin: 0 0 10px;
}

#slt-resources .slt-retired {
  padding: 10px 14px;
  border: 1px solid var(--slt-line);
  border-radius: 10px;
  font-size: 13px;
}

#slt-resources .slt-retired ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

#slt-resources .slt-report {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--slt-muted);
}

/* the state, shaded by how much is run in each county */
#slt-resources .slt-on.slt-q0 { fill: var(--slt-map-land); }
#slt-resources .slt-on.slt-q1 { fill: color-mix(in srgb, var(--slt-accent) 16%, var(--slt-panel)); }
#slt-resources .slt-on.slt-q2 { fill: color-mix(in srgb, var(--slt-accent) 32%, var(--slt-panel)); }
#slt-resources .slt-on.slt-q3 { fill: color-mix(in srgb, var(--slt-accent) 52%, var(--slt-panel)); }
#slt-resources .slt-on.slt-q4 { fill: color-mix(in srgb, var(--slt-accent) 74%, var(--slt-panel)); }

#slt-resources .slt-on.slt-hot,
#slt-resources .slt-on:hover {
  stroke: var(--slt-heading);
  stroke-width: 2;
}

#slt-resources .slt-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--slt-muted);
}

#slt-resources .slt-legend-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#slt-resources .slt-legend i {
  display: inline-block;
  width: 14px;
  height: 10px;
  border: 1px solid var(--slt-map-on-edge);
  border-radius: 2px;
}

#slt-resources .slt-legend i.slt-q0 { background: var(--slt-map-land); }
#slt-resources .slt-legend i.slt-q1 { background: color-mix(in srgb, var(--slt-accent) 16%, var(--slt-panel)); }
#slt-resources .slt-legend i.slt-q2 { background: color-mix(in srgb, var(--slt-accent) 32%, var(--slt-panel)); }
#slt-resources .slt-legend i.slt-q3 { background: color-mix(in srgb, var(--slt-accent) 52%, var(--slt-panel)); }
#slt-resources .slt-legend i.slt-q4 { background: color-mix(in srgb, var(--slt-accent) 74%, var(--slt-panel)); }

#slt-resources .slt-county-n {
  font-size: 12px;
  color: var(--slt-muted);
  white-space: nowrap;
}

/* where am I */
#slt-resources .slt-locate {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 10px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--slt-accent-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

#slt-resources .slt-locate svg {
  width: 18px;
  height: 18px;
}

#slt-resources .slt-locate:disabled {
  opacity: 0.6;
  cursor: progress;
}

#slt-resources .slt-locate-note {
  flex-basis: 100%;
  padding-left: 26px;
  font-size: 12px;
  font-weight: 400;
  color: var(--slt-muted);
}

#slt-resources .slt-show-all {
  margin-top: 12px;
  cursor: pointer;
}

#slt-resources .slt-show-all[hidden] {
  display: none;
}