/* ------------------------------------------------------------------ *
 * Masseur Directory — self-hosted design system.
 * No external assets: fonts are a system stack, icons are inline SVG,
 * colours/spacing are tokens. Nothing here fetches a third-party host,
 * so the strict `default-src 'self'` CSP and the no-third-party privacy
 * invariant both hold. To brand with a webfont, drop a .woff2 into
 * static/fonts/ and add an @font-face here (still same-origin).
 * ------------------------------------------------------------------ */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Black & gold brand — a single committed theme. The site renders dark for
     everyone (no prefers-color-scheme split): warm near-black surfaces,
     classic gold (#d4af37) accents, ivory text. Semantic colors (danger /
     success / star) keep their hue, tuned for the dark ground. */
  --bg: #0c0a07;
  --surface: #161209;
  --surface-2: #211b10;
  --border: #3b3220;
  --text: #f2ead6;
  --muted: #b5a87e;
  --primary: #d4af37;
  --primary-strong: #e6c65f;
  --on-primary: #1c1503;
  --ring: rgba(212, 175, 55, .32);
  --star: #e0b545;
  --danger: #f28578;
  --danger-bg: #3a1712;
  --success: #56c690;
  --success-bg: #12301f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 10px 34px -14px rgba(0, 0, 0, .75);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --space: 1rem;
  --container: 1120px;
}

/* Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: var(--primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); font-weight: 750; }
h2 { font-size: 1.3rem; font-weight: 700; margin-top: .5rem; }
h3 { font-size: 1.05rem; font-weight: 650; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Layout ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.1rem; }
main.container { flex: 1; padding-block: 2rem; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--muted); }
.icon { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; flex: none; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Header / nav ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 1rem; min-height: 62px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800;
  color: var(--text); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; color: var(--primary); }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.nav-links a { color: var(--text); padding: .45rem .7rem; border-radius: var(--radius-sm); font-weight: 550; }
.nav-links a:hover { background: var(--surface-2); text-decoration: none; }
.nav-user { color: var(--muted); font-size: .9rem; padding-inline: .3rem; }
form.inline { display: inline; }

/* Buttons ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  padding: .58rem .95rem; border-radius: var(--radius-sm); transition: background .15s, box-shadow .15s, border-color .15s; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-strong); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: .35rem .6rem; font-size: .88rem; }
.btn-block { width: 100%; }
.btn-danger { background: none; border: none; color: var(--danger); cursor: pointer; font: inherit; padding: 0; }
.btn-danger:hover { text-decoration: underline; }
.link-btn { background: none; border: none; color: var(--primary-strong); cursor: pointer; font: inherit; padding: 0; }

/* Hero + search ----------------------------------------------------- */
.hero { border-radius: var(--radius); padding: 2rem 1.5rem; margin-bottom: 1.75rem;
  background:
    radial-gradient(1200px 300px at 15% -20%, color-mix(in srgb, var(--primary) 24%, transparent), transparent),
    linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.hero h1 { max-width: 22ch; }
.hero p { color: var(--muted); margin-top: .4rem; max-width: 48ch; }
.searchbar { display: flex; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.searchbar .field-inline { position: relative; flex: 1; min-width: 180px; }
.searchbar .field-inline .icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.searchbar input { width: 100%; padding: .7rem .8rem .7rem 2.2rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
.searchbar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

/* Cards / listing grid --------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
/* The stacking margin above is for vertical card lists; inside a grid the
   gap handles spacing, and a stray margin misaligns the first row. */
.grid .card + .card { margin-top: 0; }

/* Verified trust-wall (homepage only) --------------------------------- */
.verified-section { margin-bottom: 1.75rem; }
.verified-note { margin-top: -.3rem; max-width: 60ch; }

/* Spotlight slider (homepage only) ----------------------------------- */
/* Pure-CSS auto-scroll: the track is rendered twice back to back and the
   keyframe slides exactly one copy-width (-50%), so the loop is seamless
   regardless of how many cards are in it. No JS, so it costs nothing
   against the `script-src 'self'` CSP. */
.spotlight { margin-bottom: 1.75rem; }
.spotlight-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.spotlight-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: spotlight-scroll 48s linear infinite;
}
/* Pause on hover/keyboard focus so a visitor can actually read a card. */
.spotlight-track-wrap:hover .spotlight-track,
.spotlight-track-wrap:focus-within .spotlight-track {
  animation-play-state: paused;
}
@keyframes spotlight-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.spotlight-card {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  box-shadow: var(--shadow-sm);
}
.spotlight-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.spotlight-card img, .spotlight-thumb {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2);
}
.spotlight-thumb.placeholder { display: grid; place-items: center; font-size: 2rem; font-weight: 800;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, var(--surface)), var(--surface-2));
  color: var(--primary-strong); }
.spotlight-info { padding: .6rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.spotlight-info .meta { font-size: .82rem; }
/* Reduced motion already kills the animation globally (see the reset above);
   fall back to a manually scrollable strip so the content stays reachable. */
@media (prefers-reduced-motion: reduce) { .spotlight-track-wrap { overflow-x: auto; } }
@media (max-width: 640px) { .spotlight-card { width: 160px; } }

/* Browse: city facet beside results ------------------------------- */
.browse-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr);
  gap: 1.4rem; align-items: start; }
.city-panel { position: sticky; top: calc(62px + 1.25rem); padding: .9rem; }
.city-panel h3 { display: flex; align-items: center; gap: .4rem; margin: .1rem .35rem .55rem; }
.city-list { display: flex; flex-direction: column; gap: .15rem; }
.city-link { display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--text); font-weight: 550; }
.city-link:hover { background: var(--surface-2); text-decoration: none; }
.city-link.active { background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary-strong); }
.city-link .count { color: var(--muted); font-size: .82rem; font-weight: 500; }

@media (max-width: 860px) {
  .browse-layout { grid-template-columns: 1fr; gap: 1rem; }
  .city-panel { position: static; }
  .city-list { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .city-link { padding: .3rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-pill); }
  .city-link.active { border-color: transparent; }
}

.listing { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: transform .15s, box-shadow .15s; }
.listing:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.listing a { color: inherit; }
.listing-thumb-link { position: relative; display: block; }
.listing-thumb { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--surface-2); }
.listing-thumb.placeholder { display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, var(--surface)), var(--surface-2));
  color: var(--primary-strong); font-size: 2.6rem; font-weight: 800; }
.listing-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.listing-body h3 a:hover { text-decoration: none; color: var(--primary-strong); }
.meta { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .9rem; }
.headline-clamp { color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Rating ------------------------------------------------------------ */
.stars { color: var(--star); font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; }
.stars .count { color: var(--muted); font-weight: 500; font-size: .9rem; }

/* Badges ------------------------------------------------------------ */
.badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 650;
  padding: .18rem .55rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); }
.badge-price { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--primary-strong); }
.badge-warn { background: var(--danger-bg); color: var(--danger); }
.badge-verified { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); color: var(--primary-strong); }

/* Trust badge: gold circular overlay on a profile's thumbnail (grid, spotlight). */
.verified-badge { position: absolute; top: .5rem; right: .5rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.verified-badge .icon { width: 1.05em; height: 1.05em; stroke: var(--on-primary); }

/* Profile page ------------------------------------------------------ */
.profile-head-card { padding: 1.5rem;
  background:
    radial-gradient(900px 260px at 10% -40%, color-mix(in srgb, var(--primary) 16%, transparent), transparent),
    var(--surface); }
.profile-head { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
.avatar { width: 116px; height: 116px; border-radius: var(--radius); flex: none; object-fit: cover;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.avatar.placeholder { display: grid; place-items: center; font-size: 2.6rem; font-weight: 800;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 28%, var(--surface)), var(--surface-2));
  color: var(--primary-strong); }
.profile-head .grow { flex: 1; min-width: 14rem; }
.profile-headline { color: var(--muted); font-size: 1.02rem; margin-top: .15rem; }
.profile-meta { gap: .5rem 1.1rem; margin-top: .5rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.offsite-note { font-size: .85rem; margin-top: .6rem; max-width: 52ch; }
.owner-tools { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  background: var(--surface-2); border: 1px dashed var(--border); margin-top: 1rem; }

/* Two-column profile layout ----------------------------------------- */
.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  column-gap: 1.5rem; align-items: start; }
.profile-main { min-width: 0; }
.profile-aside { position: sticky; top: calc(62px + 1.25rem); margin-top: 1.75rem;
  display: flex; flex-direction: column; gap: 1rem; }
.profile-aside .card + .card { margin-top: 0; }
.profile-aside h3 { margin-bottom: .55rem; }
.contact-card { display: flex; flex-direction: column; gap: .55rem; }
.contact-card h3 { margin-bottom: 0; }
.contact-alt { font-size: .85rem; margin-top: .15rem; }
.contact-note { font-size: .82rem; }
.contact-note .icon { color: var(--primary); }

/* Fixed bottom contact bar (mobile) --------------------------------- */
.mobile-cta, .mobile-cta-spacer { display: none; }

@media (max-width: 940px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-aside { position: static; margin-top: 1rem; }
  .mobile-cta-spacer { display: block; height: 4.2rem; }
  .mobile-cta { display: flex; gap: .6rem; position: fixed; inset: auto 0 0 0; z-index: 30;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
    backdrop-filter: saturate(1.2) blur(8px);
    border-top: 1px solid var(--border); }
  .mobile-cta .btn { flex: 1; }
}

/* Gallery ----------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; grid-auto-flow: dense; }
.gallery figure { position: relative; margin: 0; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--border); }
/* Every image stays a fixed 1/1 square — the 2x2 featured cell is itself
   square, and Safari mis-resolves height:100% + aspect-ratio:auto in grid. */
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.gallery--featured figure:first-child { grid-column: span 2; grid-row: span 2; }
.gallery figcaption { position: absolute; inset: auto 0 0 0; padding: .45rem .6rem;
  font-size: .78rem; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62)); }
@media (max-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* Bio / general info ------------------------------------------------ */
.bio { max-width: 68ch; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; margin: 0; }
.info-item { background: var(--surface-2); border-radius: var(--radius-sm); padding: .55rem .8rem; }
.info-grid dt { color: var(--muted); font-size: .74rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; }
.info-grid dd { margin: 0; font-weight: 650; }
.lang-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .9rem; }
.lang-label { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted);
  font-size: .88rem; font-weight: 600; margin-right: .3rem; }

/* Services ---------------------------------------------------------- */
.services-card { padding: 0; }
.service { display: flex; align-items: center; gap: .6rem; justify-content: space-between;
  padding: .95rem 1.1rem; }
.service + .service { border-top: 1px solid var(--border); }
.service .svc-main { display: flex; flex-direction: column; gap: .15rem; }

/* Reviews / message thread ----------------------------------------- */
.review-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.thread { display: flex; flex-direction: column; gap: .55rem; }
.bubble { max-width: 78%; padding: .6rem .8rem; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); }
.bubble .who { font-size: .78rem; color: var(--muted); margin-bottom: .15rem; }
.bubble.mine { align-self: flex-end; background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }

/* Forms ------------------------------------------------------------- */
.form { max-width: 34rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; }
.field input[type="checkbox"] { width: auto; margin-right: .4rem; }
.field ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.field ul label { display: inline-flex; align-items: center; font-weight: 500; margin-bottom: 0; }
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.field--error input, .field--error textarea, .field--error select { border-color: var(--danger); }
.field-help { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.field-error { color: var(--danger); font-size: .87rem; margin-top: .3rem; }

/* Alerts ------------------------------------------------------------ */
.alerts { list-style: none; padding: 0; margin-bottom: 1.25rem; }
.alerts li { padding: .7rem .9rem; border-radius: var(--radius-sm); margin-bottom: .5rem;
  border: 1px solid var(--border); }
.alerts .success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.alerts .error { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

/* Staff panel ------------------------------------------------------- */
.panel-tabs { display: flex; gap: .35rem; margin: .9rem 0 1.4rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.panel-tabs a { color: var(--text); padding: .4rem .75rem; border-radius: var(--radius-sm); font-weight: 600; }
.panel-tabs a:hover { background: var(--surface-2); text-decoration: none; }
.panel-tabs a.active { background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary-strong); }
.table-wrap { overflow-x: auto; padding: .4rem 0; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-size: .76rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; }
.table tr:last-child td { border-bottom: none; }
.badge-ok { background: var(--success-bg); color: var(--success); }
.danger-link { color: var(--danger); }
.status-select { padding: .6rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; }
.verified-filter { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem .3rem;
  color: var(--text); font-weight: 550; white-space: nowrap; }

/* Empty state ------------------------------------------------------- */
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; border: 1px dashed var(--border);
  border-radius: var(--radius); background: var(--surface); }

/* Footer ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.site-footer .container { padding-block: 1.4rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.site-footer .icon { color: var(--primary); }
.site-footer .sep { margin-inline: .4rem; opacity: .5; }

/* Utilities --------------------------------------------------------- */
.row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; }
.mt { margin-top: 1.25rem; }
.section-title { margin: 1.75rem 0 .8rem; display: flex; align-items: baseline; gap: .45rem; }
.section-title .count { color: var(--muted); font-weight: 500; font-size: .95rem; }

/* Legal / long-form prose (privacy policy) --------------------------- */
.legal { max-width: 68ch; margin-inline: auto; padding-block: 1.5rem 3rem; }
.legal h1 { margin-bottom: .35rem; }
.legal h2 { margin: 2rem 0 .7rem; font-size: 1.25rem; }
.legal h3 { margin: 1.4rem 0 .5rem; font-size: 1.05rem; }
.legal p, .legal li { line-height: 1.7; }
.legal p { margin-block: .7rem; }
.legal ul { margin-block: .7rem; padding-inline-start: 1.3rem; }
.legal li { margin-block: .4rem; }
.legal .card { margin-block: 1.1rem; padding: 1.1rem 1.25rem; }
.legal .card h2, .legal .card h3 { margin-top: 0; }
/* The residual-risk blocks carry the admissions Section 11 requires; the accent
   marks them as the part to read, not the part to skim past. */
.legal .card { border-left: 3px solid color-mix(in srgb, var(--primary) 55%, var(--border)); }