/* =========================================================================
 * sb-app.css — page-level views: home/hero, search + map, profile, rating,
 * add-stable, account. Depends on tokens/base/components. All `.sb-` scoped.
 * ========================================================================= */

.sb-center { text-align: center; }
.sb-muted { color: var(--sb-text-muted); }
.sb-h3 { font-family: var(--sb-font-head); font-size: var(--sb-fs-lg); margin: 0 0 var(--sb-sp-3); }

/* =========================================================================
 * Home / hero
 * ========================================================================= */
.sb-hero {
  background:
    radial-gradient(1200px 400px at 50% -10%, var(--sb-green-100), transparent 60%),
    linear-gradient(180deg, var(--sb-green-050), var(--sb-surface));
  border-bottom: 1px solid var(--sb-border);
}
.sb-hero__inner { padding-block: var(--sb-sp-8) var(--sb-sp-7); text-align: center; }
.sb-hero__title { max-width: 16ch; margin-inline: auto; }
.sb-hero__lead { max-width: 60ch; margin-inline: auto var(--sb-sp-6); }
.sb-hero__search { max-width: 860px; margin-inline: auto; }
.sb-hero__hint { margin-top: var(--sb-sp-4); color: var(--sb-text-muted); }

/* Search form */
.sb-search-form {
  background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg);
  padding: var(--sb-sp-4); box-shadow: var(--sb-shadow);
  text-align: left;
}
.sb-search-form__row { display: flex; gap: var(--sb-sp-3); align-items: flex-end; flex-wrap: wrap; }
.sb-search-form__row + .sb-search-form__row { margin-top: var(--sb-sp-3); }
.sb-search-form .sb-field { margin-bottom: 0; }
.sb-field--grow { flex: 1 1 320px; }
.sb-field--radius { flex: 0 0 150px; }
.sb-search-form__submit { flex: 0 0 auto; }
.sb-search-form__row--secondary .sb-field { flex: 1 1 200px; }
.sb-search-form--bar { box-shadow: none; border-radius: var(--sb-radius); }

/* Steps */
.sb-steps { display: grid; gap: var(--sb-sp-5); grid-template-columns: 1fr; margin-top: var(--sb-sp-5); }
.sb-step { background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); padding: var(--sb-sp-5); }
.sb-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sb-green-700); color: #fff; font-weight: 700; margin-bottom: var(--sb-sp-3);
}
.sb-signals { display: grid; gap: var(--sb-sp-6); }
.sb-signals__text { max-width: 60ch; }

/* =========================================================================
 * Search results + map
 * ========================================================================= */
.sb-searchbar { background: var(--sb-bg-alt); border-bottom: 1px solid var(--sb-border); padding-block: var(--sb-sp-4); position: sticky; top: var(--sb-header-h); z-index: 40; }
.sb-search-layout { display: grid; grid-template-columns: 1fr; gap: var(--sb-sp-6); }
.sb-search-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sb-sp-3); margin-bottom: var(--sb-sp-5); }
.sb-search-title { margin: 0; }
.sb-search-count { color: var(--sb-text-muted); margin: 0; }
.sb-search-tools { margin-left: auto; display: flex; gap: var(--sb-sp-3); align-items: center; }
.sb-search-tools .sb-select { min-height: 40px; padding-block: var(--sb-sp-2); }

.sb-results-grid { display: grid; grid-template-columns: 1fr; gap: var(--sb-sp-4); }
.sb-card__media--empty { display: flex; align-items: center; justify-content: center; color: var(--sb-green-400); }
.sb-card__link { text-decoration: none; color: inherit; display: block; }
.sb-card__score--none { color: var(--sb-text-muted); font-size: var(--sb-fs-sm); }

/* Pagination */
.sb-pagination { display: flex; gap: 4px; justify-content: center; margin-top: var(--sb-sp-6); flex-wrap: wrap; }
.sb-page-btn {
  min-width: 40px; height: 40px; padding: 0 var(--sb-sp-2);
  border: 1px solid var(--sb-border); background: #fff; border-radius: var(--sb-radius-sm);
  cursor: pointer; font: inherit; color: var(--sb-ink-700);
}
.sb-page-btn:hover:not([disabled]) { border-color: var(--sb-green-400); }
.sb-page-btn.is-current { background: var(--sb-green-700); color: #fff; border-color: var(--sb-green-700); }
.sb-page-btn[disabled] { opacity: .4; cursor: not-allowed; }
.sb-page-ellipsis { padding: 0 4px; align-self: center; color: var(--sb-text-muted); }

/* Map panel + consent gate */
.sb-search-map { position: sticky; top: calc(var(--sb-header-h) + 64px); align-self: start; }
.sb-map-panel, .sb-search-map { min-height: 320px; }
.sb-map-consent {
  display: flex; align-items: center; justify-content: center; min-height: 320px;
  background: var(--sb-surface-2); border: 1px dashed var(--sb-border); border-radius: var(--sb-radius-lg);
  text-align: center;
}
.sb-map-panel--inline .sb-map-consent { min-height: 220px; }
.sb-map-consent__inner { max-width: 320px; padding: var(--sb-sp-5); }
.sb-map-consent__inner .sb-icon { width: 32px; height: 32px; color: var(--sb-green-500); margin-bottom: var(--sb-sp-3); }
.sb-map-consent__text { font-size: var(--sb-fs-sm); color: var(--sb-text-muted); margin-bottom: var(--sb-sp-4); }
.sb-map-consent__link { display: inline-block; margin-top: var(--sb-sp-3); font-size: var(--sb-fs-sm); }
.sb-map-canvas { width: 100%; min-height: 320px; height: 100%; border-radius: var(--sb-radius-lg); overflow: hidden; }
.sb-map-panel--inline .sb-map-canvas { min-height: 220px; }
.sb-map-info { font-size: var(--sb-fs-sm); line-height: 1.4; }

/* =========================================================================
 * Stable profile (STB-004)
 * ========================================================================= */
.sb-profile__status { padding-block: var(--sb-sp-7); }
.sb-profile__header { background: var(--sb-green-050); border-bottom: 1px solid var(--sb-border); padding-block: var(--sb-sp-6); }
.sb-profile__header-inner { display: flex; flex-wrap: wrap; gap: var(--sb-sp-5); align-items: flex-start; justify-content: space-between; }
.sb-profile__heading { flex: 1 1 320px; }
.sb-profile__name { margin: var(--sb-sp-2) 0; }
.sb-profile__meta { display: flex; flex-wrap: wrap; gap: var(--sb-sp-3); align-items: center; color: var(--sb-text-muted); margin: 0 0 var(--sb-sp-3); }
.sb-profile__location { display: inline-flex; align-items: center; gap: 4px; }
.sb-profile__score { margin-top: var(--sb-sp-2); }
.sb-score-big { display: flex; align-items: center; gap: var(--sb-sp-2); }
.sb-noratings { font-weight: var(--sb-fw-semibold); color: var(--sb-green-700); }
.sb-profile__actions { flex: 0 0 auto; }

.sb-profile__layout { display: grid; grid-template-columns: 1fr; gap: var(--sb-sp-6); padding-block: var(--sb-sp-6); }
.sb-profile__section { margin-bottom: var(--sb-sp-7); }

/* Gallery */
.sb-profile__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sb-sp-2); margin-bottom: var(--sb-sp-7); border-radius: var(--sb-radius-lg); overflow: hidden; }
.sb-gallery__item { margin: 0; aspect-ratio: 4/3; background: var(--sb-surface-3); }
.sb-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-gallery__item--lead { grid-column: span 2; aspect-ratio: 16/9; }

/* Category scores */
.sb-cat-scores { display: grid; gap: var(--sb-sp-4); margin-top: var(--sb-sp-4); }
.sb-cat__head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.sb-cat__label { font-weight: var(--sb-fw-medium); }
.sb-cat__val { font-weight: var(--sb-fw-bold); color: var(--sb-ink-900); }
.sb-cat__bar { height: 10px; background: var(--sb-surface-3); border-radius: var(--sb-radius-pill); overflow: hidden; }
.sb-cat__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sb-green-500), var(--sb-green-700)); border-radius: inherit; }

/* Comments */
.sb-comments { display: grid; gap: var(--sb-sp-4); margin-top: var(--sb-sp-4); }
.sb-comment { background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius); padding: var(--sb-sp-4); }
.sb-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-sp-3); margin-bottom: var(--sb-sp-2); }
.sb-comment__author { font-weight: var(--sb-fw-semibold); }
.sb-comment__date { color: var(--sb-text-muted); font-size: var(--sb-fs-sm); margin-left: auto; }
.sb-comment__text { margin: 0; }
.sb-pill--verified { color: var(--sb-success); background: var(--sb-success-bg); border-color: #b7d8c4; }

/* Contact list */
.sb-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sb-sp-3); }
.sb-contact-list__item { display: flex; justify-content: space-between; gap: var(--sb-sp-3); flex-wrap: wrap; }
.sb-contact-list__label { color: var(--sb-text-muted); font-size: var(--sb-fs-sm); }
.sb-contact-note { font-size: var(--sb-fs-xs); margin: var(--sb-sp-3) 0 0; }
.sb-profile__aside > .sb-card { margin-bottom: var(--sb-sp-4); }

/* =========================================================================
 * Rating flow
 * ========================================================================= */
.sb-rate__head { margin-bottom: var(--sb-sp-5); }
.sb-rate__stablecard { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sb-sp-3); align-items: center; background: var(--sb-green-050); border: 1px solid var(--sb-green-100); border-radius: var(--sb-radius); padding: var(--sb-sp-4); margin-bottom: var(--sb-sp-5); }
.sb-rate-cat { border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); padding: var(--sb-sp-5); margin: 0 0 var(--sb-sp-5); }
.sb-rate-cat__legend { font-family: var(--sb-font-head); font-size: var(--sb-fs-lg); font-weight: var(--sb-fw-bold); padding: 0 var(--sb-sp-2); color: var(--sb-green-800); }
.sb-crit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sb-sp-3); padding: var(--sb-sp-3) 0; border-bottom: 1px solid var(--sb-surface-3); }
.sb-crit:last-child { border-bottom: none; }
.sb-crit__label { display: inline-flex; align-items: center; gap: var(--sb-sp-2); font-weight: var(--sb-fw-medium); flex: 1 1 200px; }
.sb-crit__controls { display: inline-flex; align-items: center; gap: var(--sb-sp-4); }
.sb-crit__na { display: inline-flex; align-items: center; gap: 4px; font-size: var(--sb-fs-sm); color: var(--sb-text-muted); cursor: pointer; white-space: nowrap; }
.sb-crit__na-input { width: 16px; height: 16px; accent-color: var(--sb-green-700); }
.sb-crit.is-na { opacity: .55; }
.sb-crit.has-error { background: var(--sb-error-bg); border-radius: var(--sb-radius-sm); }
.sb-rate__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-sp-4); justify-content: space-between; margin-top: var(--sb-sp-5); }
.sb-rate__progress { margin: 0; color: var(--sb-text-muted); font-size: var(--sb-fs-sm); }

/* =========================================================================
 * Add stable
 * ========================================================================= */
.sb-fieldset { border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); padding: var(--sb-sp-5); margin: 0 0 var(--sb-sp-5); }
.sb-fieldset legend { font-family: var(--sb-font-head); font-weight: var(--sb-fw-bold); padding: 0 var(--sb-sp-2); color: var(--sb-green-800); }
.sb-add__submit { margin-top: var(--sb-sp-5); }

/* =========================================================================
 * Account / auth
 * ========================================================================= */
.sb-authtabs { display: flex; gap: 4px; background: var(--sb-surface-2); border-radius: var(--sb-radius); padding: 4px; margin-bottom: var(--sb-sp-5); }
.sb-authtab { flex: 1; text-align: center; padding: var(--sb-sp-3); border-radius: var(--sb-radius-sm); text-decoration: none; color: var(--sb-text-muted); font-weight: var(--sb-fw-semibold); }
.sb-authtab.is-active { background: #fff; color: var(--sb-green-800); box-shadow: var(--sb-shadow-sm); }
.sb-authform { display: grid; gap: var(--sb-sp-4); }
.sb-authform__foot { text-align: center; margin: 0; font-size: var(--sb-fs-sm); }
.sb-account__grid { display: grid; grid-template-columns: 1fr; gap: var(--sb-sp-4); }
.sb-account__logout { margin-top: var(--sb-sp-5); }
.sb-myratings { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sb-sp-3); }
.sb-myratings__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-sp-3); padding-bottom: var(--sb-sp-3); border-bottom: 1px solid var(--sb-surface-3); }
.sb-myratings__item time { margin-left: auto; font-size: var(--sb-fs-sm); }

/* =========================================================================
 * Responsive breakpoints
 * ========================================================================= */
@media (min-width: 560px) {
  .sb-results-grid { grid-template-columns: repeat(2, 1fr); }
  .sb-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .sb-search-layout { grid-template-columns: 1fr 380px; }
  .sb-search-map { grid-row: 1 / 3; }
  .sb-profile__layout { grid-template-columns: 1fr 340px; }
  .sb-account__grid { grid-template-columns: 1fr 1fr; }
  .sb-signals { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  .sb-results-grid { grid-template-columns: repeat(2, 1fr); }
}
/* When the map is hidden, results use full width comfortably */
body:not(.sb-map-open) .sb-search-map[hidden] { display: none; }