/* ==========================================================================
   Coastal SD Pros marketplace foundation
   Compact, border-led directory UI with direct actions and evidence-first
   marketplace signals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   INTERFACE TYPEFACE — self-hosted so the stack cannot silently fall to Arial.
   One variable file covers 100-900, so every weight below is a real weight and
   not a synthesised bold. Same file is declared in tool-chassis.css and
   styles.css; the browser dedupes by URL, so it downloads once.
   Licence: SIL Open Font Licence 1.1. Already shipped on other RSP sites.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --dir-white: #ffffff;
  --dir-ink: #17202a;
  --dir-navy: #16324f;
  --dir-teal: #147d80;
  --dir-teal-hover: #0f6669;
  --dir-coral: #d95745;
  --dir-coral-hover: #bf4738;
  --dir-paper: #f7f6f2;
  --dir-neutral: #f3f4f5;
  --dir-line: #d8d9dc;
  --dir-line-strong: #b9bdc2;
  --dir-muted: #5f6368;
  --dir-radius-control: 8px;
  --dir-radius-card: 8px;
  --dir-shadow-search: 0 6px 18px rgba(23, 32, 42, .08);
  --dir-sans: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html {
  color-scheme: light;
  scroll-behavior: auto;
}

body.dir-page {
  min-width: 320px;
  margin: 0;
  color: var(--dir-ink);
  background: var(--dir-white);
  font-family: var(--dir-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dir-page h1,
.dir-page h2,
.dir-page h3,
.dir-page h4,
.dir-page h5,
.dir-page h6 {
  color: var(--dir-ink);
  font-family: var(--dir-sans);
  text-wrap: balance;
}

.dir-page p,
.dir-page li {
  text-wrap: pretty;
}

.dir-page a {
  color: inherit;
}

.dir-page button,
.dir-page input,
.dir-page select,
.dir-page textarea {
  font: inherit;
}

.dir-page button,
.dir-page select {
  min-height: 44px;
}

.dir-page svg {
  display: block;
}

.dir-shell {
  width: min(calc(100% - 40px), 1180px);
  margin-inline: auto;
}

.dir-skip {
  position: fixed;
  z-index: 50;
  top: 8px;
  left: 8px;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: var(--dir-radius-control);
  color: var(--dir-white);
  background: var(--dir-navy);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-140%);
}

.dir-skip:focus {
  transform: translateY(0);
}

.dir-page :focus-visible {
  outline: 3px solid var(--dir-coral);
  outline-offset: 3px;
}

/* Header ------------------------------------------------------------------ */

.dir-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--dir-line);
  background: var(--dir-white);
}

.dir-header__top {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.dir-brand {
  display: inline-flex;
  min-width: max-content;
  min-height: 44px;
  align-items: center;
  gap: 0;
  color: var(--dir-navy);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.dir-brand__copy {
  display: inline-flex;
  align-items: baseline;
}

.dir-brand__copy strong {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.dir-brand__copy small {
  display: none;
}

.dir-brand__accent,
.csdp-brand__accent {
  color: var(--dir-coral);
}

.dir-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

.dir-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--dir-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.dir-nav a:hover {
  color: var(--dir-teal-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dir-nav__business {
  padding-inline: 13px;
  border: 1px solid var(--dir-line-strong);
  border-radius: var(--dir-radius-control);
  background: var(--dir-white);
}

.dir-nav__business:hover {
  border-color: var(--dir-teal);
  text-decoration: none !important;
}

/* Persistent directory search -------------------------------------------- */

.dir-searchbar {
  border-bottom: 1px solid var(--dir-line);
  background: var(--dir-paper);
}

.dir-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  padding-block: 12px;
}

.dir-search__divider {
  display: none;
}

.dir-search__field {
  display: grid;
  min-width: 0;
  padding: 5px 12px 4px;
  border: 1px solid var(--dir-line-strong);
  border-radius: var(--dir-radius-control);
  background: var(--dir-white);
}

.dir-search__field:first-of-type,
.dir-search__field:nth-of-type(2) {
  border: 1px solid var(--dir-line-strong);
  border-radius: var(--dir-radius-control);
}

.dir-search__field label {
  color: var(--dir-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
}

.dir-search__field select,
.dir-search__field input {
  width: 100%;
  min-width: 0;
  height: 30px;
  margin: 0;
  padding: 0 30px 0 0;
  border: 0;
  color: var(--dir-ink);
  background-color: transparent;
  font-size: 15px;
  font-weight: 600;
  outline: 0;
}

.dir-search__submit {
  min-width: 110px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid var(--dir-coral);
  border-radius: var(--dir-radius-control);
  color: var(--dir-white);
  background: var(--dir-coral);
  font-weight: 700;
  cursor: pointer;
}

.dir-search__submit:hover {
  border-color: var(--dir-coral-hover);
  background: var(--dir-coral-hover);
}

/* Shared primitives ------------------------------------------------------- */

.dir-kicker {
  margin: 0 0 7px;
  color: var(--dir-teal);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.dir-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  color: var(--dir-muted);
  font-size: 13px;
}

.dir-breadcrumbs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-underline-offset: 3px;
}

.dir-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--dir-coral);
  border-radius: var(--dir-radius-control);
  color: var(--dir-white) !important;
  background: var(--dir-coral);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.dir-button:hover {
  border-color: var(--dir-coral-hover);
  background: var(--dir-coral-hover);
}

.dir-button--quiet {
  border-color: var(--dir-line-strong);
  color: var(--dir-ink) !important;
  background: var(--dir-white);
}

.dir-button--quiet:hover {
  border-color: var(--dir-teal);
  color: var(--dir-teal-hover) !important;
  background: var(--dir-white);
}

/* Directory result cards -------------------------------------------------- */

.dir-page .bc {
  position: relative;
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 0 18px;
  overflow: hidden;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--dir-line);
  border-radius: var(--dir-radius-card);
  color: var(--dir-ink);
  background: var(--dir-white);
  list-style: none;
}

.dir-page .bc:hover {
  border-color: var(--dir-line-strong);
}

.dir-page .bc:target {
  border-color: var(--dir-coral);
  outline: 3px solid rgba(217, 87, 69, .16);
}

.dir-page .bc__visual {
  display: flex;
  min-height: 118px;
  align-self: start;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  border: 1px solid var(--dir-line);
  border-radius: 8px;
  color: var(--dir-muted);
  background: var(--dir-neutral);
  text-align: center;
}

.dir-page .bc__avatar {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--dir-line-strong);
  border-radius: 8px;
  color: var(--dir-navy);
  background: var(--dir-white);
  font-size: 15px;
  font-weight: 700;
}

.dir-page .bc__trade {
  max-width: 112px;
  overflow: hidden;
  color: var(--dir-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-page .bc__body {
  display: block;
  min-width: 0;
}

.dir-page .bc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.dir-page .bc__name {
  margin: 0;
  color: var(--dir-ink);
  font-family: var(--dir-sans);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.dir-page .bc__locality {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin: 5px 0 0;
  color: var(--dir-muted);
  font-size: 13px;
}

.dir-page .bc__place::before {
  content: "\2022";
  margin-right: 9px;
  color: var(--dir-line-strong);
}

.dir-page .bc__reputation {
  display: grid;
  justify-items: end;
  min-width: 145px;
  text-align: right;
}

.dir-page .bc__rating {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin: 0 0 3px;
  color: var(--dir-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dir-page .bc__rating::before {
  content: "\2605";
  color: var(--dir-coral);
  font-size: 16px;
}

.dir-page .bc__rating-value {
  font-size: 16px;
  font-weight: 700;
}

.dir-page .bc__rating-max {
  color: var(--dir-muted);
  font-size: 11px;
}

.dir-page .bc__reviews,
.dir-page .bc__captured {
  margin: 0;
  color: var(--dir-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dir-page .bc__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.dir-page .bc__badge {
  padding: 3px 7px;
  border: 1px solid var(--dir-line);
  border-radius: 8px;
  color: var(--dir-muted);
  background: var(--dir-white);
  font-size: 11px;
}

.dir-page .bc__facts {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 8px 18px;
  margin: 13px 0 0;
}

.dir-page .bc__fact {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.dir-page .bc__term {
  margin-bottom: 2px;
  color: var(--dir-muted);
  font-size: 11px;
  font-weight: 700;
}

.dir-page .bc__value,
.dir-page .bc__blank {
  margin: 0;
  color: var(--dir-ink);
  font-size: 13px;
  line-height: 1.4;
}

.dir-page .bc__blank {
  color: var(--dir-muted);
}

.dir-page .bc__why {
  margin: 12px 0 0;
  color: var(--dir-muted);
  font-size: 12px;
}

.dir-page .bc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.dir-page .bc__action {
  display: inline-flex;
  min-height: 44px;
  min-width: 108px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px 12px;
  border: 1px solid var(--dir-line-strong);
  border-radius: var(--dir-radius-control);
  color: var(--dir-ink);
  background: var(--dir-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.dir-page .bc__action:hover {
  border-color: var(--dir-teal);
  color: var(--dir-teal-hover);
}

.dir-page .bc__action--primary {
  border-color: var(--dir-navy);
  color: var(--dir-white);
  background: var(--dir-navy);
}

.dir-page .bc__action--primary:hover {
  border-color: var(--dir-teal-hover);
  color: var(--dir-white);
  background: var(--dir-teal-hover);
}

.dir-page .bc__action-detail {
  display: block;
  max-width: 175px;
  overflow: hidden;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  opacity: .82;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-page .bc__action--absent {
  color: var(--dir-muted);
  background: var(--dir-neutral);
}

.dir-page .bc__foot {
  display: block;
  grid-column: 2;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--dir-line);
}

.dir-page .bc__advisory {
  margin: 0 0 9px;
  padding: 9px 11px;
  border-left: 3px solid var(--dir-teal);
  color: var(--dir-muted);
  background: var(--dir-paper);
  font-size: 12px;
}

.dir-page .bc__manage {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0;
  color: var(--dir-muted);
  font-size: 11px;
}

.dir-page .bc__manage a {
  text-underline-offset: 3px;
}

.dir-page .bc__photo {
  display: none;
}

/* Footer ------------------------------------------------------------------ */

.dir-footer {
  padding: 34px 0;
  color: var(--dir-white);
  background: var(--dir-navy);
}

.dir-footer__grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.dir-brand--footer {
  color: var(--dir-white) !important;
}

.dir-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 20px;
}

.dir-footer nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--dir-white);
  font-size: 12px;
  text-underline-offset: 4px;
}

@media (max-width: 900px) {
  .dir-nav {
    gap: 10px;
  }

  .dir-nav a:not(.dir-nav__business) {
    display: none;
  }

  .dir-page .bc__head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dir-page .bc__reputation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: flex-start;
    justify-items: start;
    gap: 2px 8px;
    text-align: left;
  }

  .dir-page .bc__rating {
    grid-row: 1 / 3;
    margin: 0;
  }

  .dir-page .bc__captured {
    grid-column: 2;
  }

  .dir-footer__grid {
    align-items: flex-start;
    flex-direction: column;
  }

  .dir-footer nav {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .dir-shell {
    width: min(calc(100% - 24px), 1180px);
  }

  .dir-header__top {
    min-height: 58px;
  }

  .dir-brand {
    font-size: 16px;
  }

  .dir-nav__business {
    display: none;
  }

  .dir-search {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dir-search__submit {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
  }

  .dir-page .bc {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 0 12px;
    padding: 14px;
  }

  .dir-page .bc__visual {
    min-height: 86px;
    padding: 7px 4px;
  }

  .dir-page .bc__avatar {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .dir-page .bc__trade {
    max-width: 70px;
    font-size: 10px;
  }

  .dir-page .bc__name {
    font-size: 18px;
  }

  .dir-page .bc__facts {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .dir-page .bc__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .dir-page .bc__action {
    min-width: 0;
    padding-inline: 6px;
  }

  .dir-page .bc__action:not(.bc__action--primary) .bc__action-detail {
    display: none;
  }

  .dir-page .bc__foot {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dir-page *,
  .dir-page *::before,
  .dir-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   THE DIRECTORY GUIDE PAGE  (.dg-guide)
   The 24 trade x city pages: filter rail | result rows | coordinate map.

   READ THIS BEFORE EDITING ANYTHING ABOVE OR BELOW IT.

   A guide page loads four stylesheets, in this order:
       tool-chassis.css   canon tokens + form primitives
       directory.css      THIS FILE — the site chrome
       editorial.css      the type scale and the card (.bc)
       search.css         the three-column layout, the rail, the map, and the
                          CSS filter engine

   Its <body> is `class="ed-page dg-guide"`. It deliberately does NOT carry
   `dir-page`, for one measurable reason: `body.dir-page` is specificity
   (0,1,1) and `.ed-page` is (0,1,0), so the directory body reset would win
   over the editorial root scope no matter which file loaded last, and the
   page would be pulled back onto the other type system a rule at a time.

   That is also why every .bc* rule in the section above is scoped to
   `.dir-page`. The 227 profile, home, claim, tools and methodology pages that
   link this file alone all carry `dir-page` on <body>, so nothing about them
   changed; a guide page simply never matches those rules, and its card comes
   from editorial.css and search.css alone. Without that scoping the directory
   card's 136px media column, its 18px padding and its ::before star glyph all
   leaked into the editorial card — a star row being the exact cue this
   directory is not allowed to draw.

   WHAT THIS BLOCK CONTAINS
     1. The chrome bridge: the handful of things `body.dir-page` used to give
        the header and footer, restored at ZERO specificity with :where() so
        every existing .dir-* and .tc-* rule still wins over them.
     2. This page type's own furniture (.dg-*).
     3. Three adjustments to the shared search layout that are specific to
        this page type, each marked and reasoned.
   No colour literal below this line: every value is a token from
   tool-chassis.css, editorial.css or the :root block at the head of this file.
   ========================================================================== */

/* --- 1. CHROME BRIDGE -----------------------------------------------------
   `body.dir-page` set six things the chrome quietly depends on. The focus ring
   is deliberately NOT among them: an editorial page uses the Pacific 900 +
   Aqua 400 ring from `.ed-page :focus-visible`, and restoring the coral one
   here would give this page two different focus rings.
   :where() zeroes specificity, so each of these is (0,0,1) — enough to beat a
   browser default, never enough to beat a class. */
.dg-guide {
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(.dg-guide) a {
  color: var(--ed-ink);
  text-underline-offset: 3px;
}

:where(.dg-guide) button,
:where(.dg-guide) input,
:where(.dg-guide) select,
:where(.dg-guide) textarea {
  font: inherit;
}

:where(.dg-guide) button,
:where(.dg-guide) select {
  min-height: 44px;
}

:where(.dg-guide) svg {
  display: block;
}

/* The header and footer keep the site chrome exactly as the other 227 pages
   draw it. These two rules only re-assert the ink that `.dir-page a` used to
   inherit down, at a specificity that cannot reach into the results column. */
.dg-guide .dir-header {
  background: var(--dir-white);
}

.dg-guide .dir-footer a {
  color: var(--dir-white);
}

/* Short chrome links — "Home" in the breadcrumb, "Privacy" in the footer —
   measured 35px and 37px wide against a 44px bar. They are already 44px tall;
   this is the other axis. */
.dg-guide .dir-breadcrumbs a,
.dg-guide .dir-footer nav a {
  min-width: 44px;
  justify-content: center;
}

/* --- 2. PAGE FURNITURE --------------------------------------------------- */

.dg-masthead {
  padding-block: clamp(20px, 3vw, 32px) 0;
}

.dg-crumbs {
  margin-bottom: 14px;
}

.dg-masthead__head {
  align-items: end;
}

/* The single link that sits in a section head's meta slot ("See all free
   tools") measured 97 x 18. It is a standalone control, not a link inside a
   sentence, so it takes the 44px bar like every other control. */
.dg-guide .ed-section__meta > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The masthead count is the one large numeral on the page. Interface face,
   tabular lining figures, so it sits on the same numeral edge as the ratings
   in the column below it. */
.dg-masthead__meta {
  display: grid;
  justify-items: start;
  gap: 2px;
  max-width: 30ch;
}

.dg-masthead__count {
  font-size: var(--ed-t-4);
  font-weight: 700;
  line-height: var(--ed-lh-tight);
  color: var(--ed-ink);
  font-variant-numeric: var(--ed-nums);
}

@media (min-width: 900px) {
  .dg-masthead__meta {
    justify-items: end;
    text-align: right;
  }
}

/* The advertising slot in its "no paid placement here" state.
   Same component and the same real "Advertising" text node, laid out as one
   quiet line instead of a panel: it measured 120px above the first result,
   which is more of the reader's screen than an absence has earned. The lift
   shadow goes with it — that shadow exists to push a real paid panel out of
   the editorial plane, and there is nothing here to push out. When a paid
   placement does exist it renders as the full .ed-sponsored panel without
   this modifier. */
/* .dg-guide is not decoration on these selectors. directory.css loads BEFORE
   editorial.css so that the editorial card wins, which means a bare
   .dg-sponsored--none (0,1,0) loses every property to .ed-sponsored (0,1,0)
   and the modifier does nothing at all. Measured before the prefix was added:
   display grid, padding 22px, the lift shadow still painted. Any .dg- rule
   that modifies an .ed- or .sr- element needs the extra class. */
.dg-guide .dg-sponsored--none {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 16px 0 0;
  padding: 9px 12px;
  background: transparent;
  border-color: var(--ed-hairline);
  border-style: dashed;
  border-radius: var(--ed-radius-sm);
  box-shadow: none;
}

.dg-guide .dg-sponsored--none .ed-sponsored__head {
  flex: 0 0 auto;
}

.dg-guide .dg-sponsored--none .ed-sponsored__label {
  padding: 2px 8px;
  letter-spacing: .1em;
  border-color: var(--ed-rule-color);
}

.dg-guide .dg-sponsored--none .ed-sponsored__note {
  flex: 1 1 24ch;
  color: var(--ed-ink-soft);
  font-size: var(--ed-t--2);
}

/* The one-line correction route, in place of the claim/report strip that used
   to repeat under all 25 rows. */
.dg-correct {
  max-width: var(--ed-measure-prose);
  margin: 14px 0 0;
  color: var(--ed-ink-soft);
  font-size: var(--ed-t--1);
  line-height: var(--ed-lh-snug);
}

/* Same reason as the block above: .ed-empty and .ed-trust__note both set their
   own margin, at the same specificity, from the file that loads after this one. */
.dg-guide .dg-state {
  margin-top: 18px;
}

.dg-guide .dg-disclosure {
  margin-top: 20px;
}

.dg-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.dg-tools a {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 44px;
  height: 100%;
  padding: 16px;
  background: var(--ed-paper);
  border: 1px solid var(--ed-hairline);
  border-radius: var(--ed-radius-md);
  text-decoration: none;
}

.dg-tools a:hover {
  border-color: var(--ed-ink);
}

.dg-tools strong {
  font-size: var(--ed-t-0);
  font-weight: 700;
  line-height: var(--ed-lh-snug);
}

.dg-tools span {
  color: var(--ed-ink-soft);
  font-size: var(--ed-t--1);
  line-height: var(--ed-lh-snug);
}

.dg-claim__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
}

.dg-claim__action {
  margin: 0;
}

/* --- 3. THIS PAGE TYPE'S ADJUSTMENTS TO THE SHARED SEARCH LAYOUT ---------- */

/* (a) The scan rhythm. 25 rows have to read as one column, not 25 blocks, and
   the eye needs the gap to be smaller than the shortest row. editorial.css
   ships .ed-list at 16px for a general card list; the results column is
   tighter because the rows are uniform by construction. */
.dg-guide .sr-list {
  gap: 12px;
}

/* The business name at the card scale, not the article scale.
   MEASURED, on plumbers/oceanside at 1440px: at editorial.css's --ed-t-2 the
   25 names wrapped to 1, 2 and 3 lines (8 / 12 / 5 rows), which alone put a
   55px step into the column and made five rows taller than their own rating
   block. --ed-t-1 is the step editorial.css §1 names for a card name in a
   narrow column, and it is what the results column is. The name is still the
   largest thing in the row and still the editorial face. */
.dg-guide .bc__name {
  font-size: var(--ed-t-1);
}

/* THE NAME IS THE ONLY ROUTE TO THAT BUSINESS'S OWN LISTING PAGE, so it has to
   be a real target. MEASURED: a one-line name is a 19px-tall link. Growing the
   box to 44px would put slack between the name and the locality line under it,
   so the hit area is extended instead — 13px above and below takes it to 45px
   in both axes without moving a pixel of type. Nothing else in the row is
   interactive at that position, so this overlay cannot steal a click from
   another target. */
.dg-guide .bc__name a {
  position: relative;
}

.dg-guide .bc__name a::after {
  content: "";
  position: absolute;
  inset: -13px -6px;
}

/* 16px between five stacked groups adds 64px to every row. 13px keeps the
   groups separate at a glance and gives the column back 75px per screen. */
.dg-guide .bc__body {
  gap: 13px;
}

/* (b) The map above the list on a phone.
   DOM order is rail -> results -> map at every width, so reading order and tab
   order always put the listings before the drawing of them. Below 900px the
   layout is a single grid column, and `order` lifts the map between the
   collapsed filter control and the list, which is where a reader looking for
   "roughly where are these?" expects it. The cost is stated rather than
   hidden: on a phone the visual order is rail, map, list while the DOM order
   stays rail, list, map. */
@media (max-width: 899px) {
  .dg-guide .sr-rail {
    order: 1;
  }

  .dg-guide .sr-map {
    order: 2;
  }

  .dg-guide .sr-results {
    order: 3;
  }

  /* The map is a 380 x 430 drawing. At full phone width it renders 441px tall
     and, with its caption, measured 705px — the first result then started
     1,778px down a 844px screen. Capping the frame's WIDTH caps its height
     through the aspect ratio, so the map stays an orientation strip rather
     than a screenful. The caption is NOT capped: the sentence naming the
     listings that could not be plotted is the reason the map is honest. */
  .dg-guide .cm__frame {
    max-width: min(100%, 34vh);
  }
}

/* (c) The results column has a heading row of its own; the section rule under
   it would otherwise sit tight against the first card. */
.dg-guide .sr-results__head {
  margin-bottom: 4px;
}

/* (d) THE THREE-COLUMN LAYOUT NEEDS A RESULTS COLUMN, NOT A GAP BETWEEN TWO
   PANELS. Two measurements, taken on plumbers/oceanside:

     1024px viewport -> two columns, results 681px wide, rows 333-423px
     1180px viewport -> three columns, results 393px wide, rows 523-646px

   Widening the window by 156px made the results column 42% NARROWER and every
   row half again as tall, because the rail (264) + the map (420) + two 24px
   gaps take 732px before the results get any. search.css turns the third
   column on at 1180px, which is the right general default — it is the width at
   which the map's own pin targets stop shrinking — but this page type carries
   a wider shell and needs the centre to stay a column you can read a business
   card in.

   So: the shell widens to 1360px, and the third column waits until 1300px,
   where the results column lands at 513px and grows from there. Nothing about
   the map changes — --sr-map-w stays at the 420px search.css requires to keep
   the pin hit area above the 24px WCAG 2.5.8 floor. */
.dg-guide .sr-shell {
  --ed-shell: 1360px;
}

@media (min-width: 1180px) and (max-width: 1299px) {
  .dg-guide .sr-layout {
    grid-template-columns: var(--sr-rail-w) minmax(0, 1fr);
  }

  .dg-guide .sr-map {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 640px) {
  .dg-masthead__count {
    font-size: var(--ed-t-3);
  }

  /* The masthead's meta block repeats what the deck above it and the results
     head below it both already say, and it costs 88px on a phone before the
     reader has seen one business. The capture date is not lost with it: it is
     in the results head, in the map caption, and on all 25 rows. */
  .dg-masthead__meta {
    display: none;
  }

  .dg-claim__inner {
    align-items: flex-start;
  }

  /* Three actions in a 325px column: as a flex row each button wrapped its own
     label and the strip measured 128px. An equal three-track grid holds them
     on one line, and the secondary details go — the phone number stays,
     because on a phone the number IS the action. */
  .dg-guide .bc__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dg-guide .bc__action:not(.bc__action--call) .bc__action-detail {
    display: none;
  }
}