/* Coastal SD Pros — profile v4 "consumer marketplace" system.
   Ported from the owner-approved comp:
   design-previews/marketplace-craft-2026-08-10/profile-mr-rogers.html
   Used only by generated /pros/ pages (scripts/build-profile-pages.mjs). */

@font-face {
  font-family: "CSDP Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "CSDP Newsreader";
  src: url("/assets/fonts/newsreader-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1a2733;
  --ink-strong: #10202e;
  --muted: #5d6772;
  --faint: #8a939c;
  --white: #ffffff;
  --bg-soft: #f7f7f5;
  --line: #e8eaec;
  --line-strong: #d3d8dc;
  --coral: #d95745;
  --coral-dark: #c24736;
  --teal: #147d80;
  --teal-dark: #0d6265;
  --amber: #f2a33c;
  --navy: #0c2033;
  --focus: #4fc3c0;
  --shell: 1220px;
  --sh-card: 0 1px 2px rgba(16,32,46,.06), 0 4px 12px rgba(16,32,46,.06);
  --sh-float: 0 3px 10px rgba(16,32,46,.1), 0 14px 36px rgba(16,32,46,.14);
  --sans: "CSDP Inter", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "CSDP Newsreader", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; min-width: 320px;
  background: var(--white); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 32px; }
.num { font-variant-numeric: tabular-nums; }
svg.ic { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--white); color: var(--ink);
  border-radius: 0 0 10px 0; box-shadow: var(--sh-float); font-weight: 660;
}
.skip:focus, .skip:focus-visible { left: 0; }

/* star rows (fractional fill: bg layer + clipped amber layer) */
.stars { position: relative; display: inline-flex; }
.stars__bg, .stars__fill { display: inline-flex; gap: 1px; }
.stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; }
.stars svg { width: 16px; height: 16px; flex: none; fill: var(--amber); }
.stars__bg svg { fill: var(--line-strong); }
.stars__fill svg { fill: var(--amber); }

/* header (same system as listing) */
.hd { position: relative; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.hd__in { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px; }
.brand { font-family: var(--serif); font-size: 21.5px; font-weight: 640; letter-spacing: -.012em; color: var(--ink-strong); white-space: nowrap; }
.brand em { font-style: normal; color: var(--coral); }
.hd__nav { display: flex; align-items: center; gap: 6px; }
.hd__nav > a { padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); transition: background .14s ease-out; }
.hd__nav > a:hover { background: var(--bg-soft); }
.hd__biz {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; margin-left: 6px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 14px; font-weight: 640; color: var(--ink);
  transition: box-shadow .14s ease-out, border-color .14s ease-out;
}
.hd__biz:hover { border-color: var(--ink); box-shadow: var(--sh-card); }
.hd__menu { display: none; }

/* map hero — real Google embed */
.maphero {
  position: relative; height: 252px; overflow: hidden;
  background: linear-gradient(100deg, #cfe6ef 0%, #cfe6ef 10%, #edf0ea 10.6%, #edf0ea 100%);
  border-bottom: 1px solid var(--line);
}
.maphero__embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.maphero__open {
  position: absolute; right: 24px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  background: var(--white); border-radius: 999px; box-shadow: var(--sh-card);
  font-size: 13.5px; font-weight: 660; color: var(--ink);
  transition: box-shadow .14s ease-out;
}
.maphero__open:hover { box-shadow: var(--sh-float); }
.maphero__open .ic { width: 14.5px; height: 14.5px; color: var(--teal); }

/* identity */
.idwrap { padding: 26px 0 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: var(--faint); }
.crumbs a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--muted); }
.id__grid { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 56px; align-items: start; }
.id h1 { margin: 14px 0 0; font-size: 33px; font-weight: 780; letter-spacing: -.022em; line-height: 1.12; text-wrap: balance; }
.id__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 15px; }
.id__rating b { font-weight: 720; }
.id__rating a { color: var(--muted); }
.id__rating a:hover { text-decoration: underline; text-underline-offset: 3px; }
.id__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.id__meta b { color: var(--ink); font-weight: 640; }
.id__meta .dot { color: var(--line-strong); }
.pillrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: 8px; background: var(--bg-soft);
  font-size: 12.5px; font-weight: 620; color: var(--muted);
}
.pill .ic { width: 13px; height: 13px; }
.pill--open { background: rgba(20,125,128,.09); color: var(--teal-dark); }
.pill--open .ic { color: var(--teal); }

/* sections */
.layout { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 56px; align-items: start; padding-bottom: 72px; }
.sec { padding: 28px 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec h2 { margin: 0 0 16px; font-size: 20px; font-weight: 740; letter-spacing: -.016em; }
.sec__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--faint); }

.svc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.svc li { padding: 8px 14px; border-radius: 8px; background: var(--bg-soft); font-size: 13.5px; font-weight: 620; color: var(--ink); }
.svc li span { color: var(--faint); font-weight: 560; }

.hours-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; }
.openline { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14.5px; font-weight: 680; color: var(--teal-dark); }
.openline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.hours table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours th { padding: 7px 0; text-align: left; font-weight: 500; color: var(--muted); }
.hours td { padding: 7px 0; text-align: right; font-weight: 640; }
.hours tr + tr { border-top: 1px solid var(--line); }
.hours--empty .sec__note { margin: 0; font-size: 13.5px; color: var(--muted); }
.hours--empty .btn { margin-top: 14px; }
.locbox { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.locbox__map { position: relative; height: 150px; background: linear-gradient(100deg,#cfe6ef 0%,#cfe6ef 12%,#edf0ea 12.6%,#edf0ea 100%); }
.locbox__map svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #d3dade; }
.locbox__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-90%); width: 22px; height: 22px; border-radius: 50% 50% 50% 4px; rotate: -45deg; background: var(--coral); box-shadow: 0 2px 6px rgba(16,32,46,.3); }
.locbox__pin::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--white); }
.locbox__body { padding: 14px 16px; }
.locbox__body b { display: block; font-size: 14px; font-weight: 660; }
.locbox__body small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--faint); }
.locbox__body a { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 660; color: var(--teal-dark); }
.locbox__body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.locbox__body a .ic { width: 13px; height: 13px; }

.rev { display: flex; align-items: center; gap: 26px; }
.rev__score { margin: 0; font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: .95; }
.rev__score small { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--faint); }
.rev__det { display: grid; gap: 5px; justify-items: start; }
.rev__det .stars svg { width: 19px; height: 19px; }
.rev__det a { font-size: 14.5px; font-weight: 660; color: var(--teal-dark); }
.rev__det a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rev__det p { margin: 0; font-size: 12.5px; color: var(--faint); }
.rev__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 20px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--bg-soft); }
.rev__cta p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 46ch; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 660; white-space: nowrap;
  transition: border-color .14s ease-out, background .14s ease-out, transform .12s ease-out, box-shadow .14s ease-out;
  touch-action: manipulation;
}
.btn .ic { width: 14.5px; height: 14.5px; }
.btn--line { border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); box-shadow: var(--sh-card); }
.btn--line:active { transform: scale(.98); }
.btn--line .ic { color: var(--teal); }

/* about this profile */
.ev { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ev h3 { margin: 0 0 7px; font-size: 14.5px; font-weight: 700; }
.ev p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.ev-flags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.flag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; background: var(--bg-soft); font-size: 12.5px; font-weight: 640; color: var(--muted); }
.flag strong { font-weight: 720; color: var(--ink); }
.flag time { font-weight: inherit; }
.ev__disc { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--faint); }
.ev__disc strong { color: var(--muted); }

.cities { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 14.5px; }
.cities a { font-weight: 660; color: var(--teal-dark); }
.cities a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cities .dot { color: var(--line-strong); }

/* action card (Airbnb booking-card anatomy) */
.action {
  position: sticky; top: 24px;
  margin-top: -104px;
  padding: 24px; background: var(--white);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-float);
}
.action__rating { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 14.5px; }
.action__rating b { font-weight: 720; }
.action__rating span { color: var(--muted); }
.btn--coral {
  width: 100%; height: 48px; border: 0; background: var(--coral); color: var(--white);
  font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(217,87,69,.55);
}
.btn--coral:hover { background: var(--coral-dark); transform: translateY(-1px); }
.btn--coral:active { transform: translateY(0) scale(.98); }
.btn--coral .ic { color: var(--white); }
.action .btn--line { width: 100%; height: 44px; margin-top: 10px; }
.action dl { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.action dl div { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 12px; align-items: baseline; }
.action dt { font-size: 12.5px; font-weight: 620; color: var(--faint); }
.action dd { margin: 0; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.action dd a { color: var(--teal-dark); }
.action dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.action__fine { margin: 16px 0 0; font-size: 12px; color: var(--faint); text-align: center; }
.unclaimed {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white);
}
.unclaimed .ic { width: 15px; height: 15px; color: var(--faint); }
.unclaimed p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.unclaimed a { font-weight: 660; color: var(--teal-dark); }
.unclaimed a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* tools strip + footer */
.tools { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 44px 0; }
.tools h2 { margin: 0 0 18px; font-size: 20px; font-weight: 760; letter-spacing: -.016em; }
.tools__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.tool {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; background: var(--white);
  border: 1px solid var(--line); border-radius: 14px;
  font-size: 14.5px; font-weight: 640; color: var(--ink);
  transition: border-color .14s ease-out, box-shadow .14s ease-out, transform .14s ease-out;
}
.tool:hover { border-color: var(--ink); box-shadow: var(--sh-card); transform: translateY(-1px); }
.tool .ic { width: 15px; height: 15px; color: var(--faint); }
.tool:hover .ic { color: var(--teal); }

.ft { background: var(--white); border-top: 1px solid var(--line); }
.ft__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; }
.ft__left { display: flex; align-items: baseline; gap: 18px; }
.ft .brand { font-size: 17px; }
.ft__tag { font-size: 12.5px; color: var(--faint); }
.ft__nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ft__nav a { font-size: 13px; font-weight: 560; color: var(--muted); }
.ft__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Intent-guide mesh links in the coverage section (Oceanside plumbing cell) */
.svclinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.svclinks__label { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.svclinks a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 620; text-decoration: none; transition: border-color 140ms ease-out; }
.svclinks a:hover { border-color: var(--ink); }

.sticky-m { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 1080px) {
  .id__grid, .layout { grid-template-columns: minmax(0,1fr); gap: 0; }
  .action { position: static; margin-top: 24px; }
}

@media (max-width: 720px) {
  .shell { padding: 0 18px; }
  .hd__in { height: 58px; }
  .hd__nav { display: none; }
  .hd__menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; color: var(--ink); }
  .hd__menu .ic { width: 22px; height: 22px; }
  .maphero { height: 180px; }
  .maphero__open { right: 18px; bottom: 14px; height: 44px; }
  .idwrap { padding-top: 18px; }
  .id h1 { font-size: 26px; }
  .layout { padding-bottom: 120px; }
  .hours-grid, .ev { grid-template-columns: 1fr; gap: 24px; }
  .rev { gap: 20px; }
  .rev__score { font-size: 46px; }
  .rev__cta { flex-direction: column; align-items: flex-start; gap: 12px; }
  .tools__grid { grid-template-columns: 1fr; }
  .ft__in { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 96px; }
  .sticky-m {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line);
  }
  .sticky-m .btn--coral { flex: 1.4; height: 48px; }
  .sticky-m .btn--line { flex: 1; height: 48px; }
  .sticky-m--single .btn--coral { flex: 1; }
}

/* real map in the location card */
.locbox__map { height: 200px; }
.locbox__embed { display: block; width: 100%; height: 100%; border: 0; }

/* owner-requested: centered identity block on desktop.
   2026-08-11 wave 2.1: the previous pass centered the h1 inside .id, but
   .id__grid still reserved a 372px empty right column (the sidebar spacer),
   so the "centered" text sat left of the page's visual center — the owner
   read it as still off-center at 1440px. The identity band has nothing in
   that second column (an empty aria-hidden div), so on desktop the grid
   collapses to one full-width column and the h1 centers on the shell. */
@media (min-width: 1081px) {
  .id__grid { grid-template-columns: minmax(0, 1fr); }
  .id h1 { text-align: center; }
  .id__rating,
  .id__meta,
  .pillrow { justify-content: center; }
}

/* ===========================================================================
   AIRBNB LAYER — owner-directed 2026-08-20 ("use airbnb").
   G8: the Google review snapshot becomes a framed, centered trust module
   (the Guest-favorite grammar carrying CSDP's records DNA: real rating,
   linked review count, capture date). Category chips move from filled soft
   blocks to quiet outlined chips. The booking-style action card (G7)
   already ships above — ring, radius 16, sticky — and stays as is.
   ======================================================================== */

.rev {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
  background: var(--white);
}

.rev__score {
  font-size: 62px;
}

.rev__det {
  justify-items: center;
  gap: 7px;
}

.rev__det .stars svg {
  width: 21px;
  height: 21px;
}

.rev__cta {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 14px;
}

.svc li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Airbnb listing header: left-aligned title block in its own column, the
   booking card in the right rail. This also removes the clip where the
   centered pill row ran under the floating card (measured at 1440: the
   header grid computed to ONE 1220px column and pills ended at x1042
   under a card starting at x918 — 2026-08-20 sweep). */
.id h1 {
  text-align: left;
}

.id {
  min-width: 0;
  text-align: left;
}

.id__rating,
.id__meta,
.pillrow {
  justify-content: flex-start;
}

.pillrow {
  flex-wrap: wrap;
  max-width: none;
  margin-inline: 0;
}

@media (min-width: 1100px) {
  .id__grid {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 56px;
  }
}