/* ============================================================
   CareHaven — components.css
   Состояния везде: rest · hover · active · focus-visible · disabled · loading
   Тач-таргет ≥44px. Один primary CTA на экран. Всё через tokens.css.
   ============================================================ */

/* ============================================================
   КНОПКИ — 3 вида + destructive. Один primary на экран.
   ============================================================ */
.btn {
  --_h: var(--touch);                 /* высота = тач-таргет 44            */
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-block-size: var(--_h);
  padding-inline: var(--s-5);
  font-family: var(--font-body);
  font-size: var(--fs-200); font-weight: var(--weight-label);
  line-height: 1; text-decoration: none; white-space: nowrap;
  border-radius: var(--r-input);
  border: 1.5px solid transparent;
  transition: background-color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
  user-select: none;
}
.btn:focus-visible { box-shadow: var(--shadow-focus); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed; transform: none; opacity: .5;
}
.btn--lg { min-block-size: 52px; padding-inline: var(--s-6); font-size: var(--fs-300); }
.btn--block { display: flex; inline-size: 100%; }

/* Primary — sage-заливка (ровно одна на экране) */
.btn--primary {
  background: var(--accent); color: var(--text-on-accent);
  border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
.btn--primary:active { background: var(--accent-active); border-color: var(--accent-active); }
.btn--primary[disabled], .btn--primary[aria-disabled="true"] {
  background: var(--accent-disabled); border-color: var(--accent-disabled); opacity: 1;
}

/* Secondary — surface + border-strong (3:1) */
.btn--secondary {
  background: var(--surface); color: var(--text);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-2); border-color: var(--accent); text-decoration: none; }
.btn--secondary:active { background: var(--surface-sunken); }

/* Ghost / tertiary — только текст-акцент, без бордера */
.btn--ghost {
  background: transparent; color: var(--accent-text); border-color: transparent;
  padding-inline: var(--s-3);
}
.btn--ghost:hover { background: var(--accent-100); text-decoration: none; }
.btn--ghost:active { background: var(--accent-050); }

/* Destructive — вид secondary, но семантика alert; всегда через confirm */
.btn--destructive {
  background: var(--surface); color: var(--status-alert);
  border-color: var(--status-alert);
}
.btn--destructive:hover { background: var(--status-alert-bg); text-decoration: none; }

/* Loading — спиннер в кнопке, блокировка повторного клика через aria-busy */
.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"] .btn__spinner { display: inline-block; }
.btn__spinner {
  display: none; inline-size: 1em; block-size: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-block-start-color: transparent;
  animation: ch-spin .7s linear infinite;
}
@keyframes ch-spin { to { transform: rotate(360deg); } }

/* Icon-only — сохраняем 44px хит-зону */
.btn--icon { padding-inline: 0; inline-size: var(--touch); }

/* ============================================================
   ПОЛЯ — label всегда сверху, error, iOS-anti-zoom (≥16px)
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label {
  font-size: var(--fs-200); font-weight: var(--weight-label); color: var(--text);
}
.field__label .req { color: var(--status-alert); margin-inline-start: 2px; }
.field__control {
  min-block-size: var(--touch);
  padding: var(--s-3) var(--s-4);
  /* iOS-anti-zoom: фактический размер шрифта инпута НЕ ниже 16px даже на
     ступени S, где --fs-300=16 (ок); фиксируем max(16px, …) как страховку */
  font-size: max(16px, var(--fs-300));
  font-family: var(--font-body); color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-input);       /* B4: 3:1 контур        */
  border-radius: var(--r-input);
  transition: border-color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard);
  inline-size: 100%;
}
.field__control::placeholder { color: var(--text-tertiary); }
.field__control:hover { border-color: var(--border-strong); }
.field__control:focus-visible,
.field__control:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus);
}
.field__control:read-only { background: var(--surface-2); }
.field__control:disabled {
  background: var(--surface-2); color: var(--text-disabled);
  border-color: var(--border); cursor: not-allowed;
}
textarea.field__control { min-block-size: calc(var(--touch) * 2); resize: vertical; line-height: var(--lh-snug); }
select.field__control { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-inline-end: var(--s-7);
}
.field__helper { font-size: var(--fs-100); color: var(--text-secondary); }
.field__error {
  font-size: var(--fs-100); color: var(--status-alert);
  display: flex; align-items: center; gap: var(--s-2);
}
/* error-состояние — навешивается на .field */
.field--error .field__control { border-color: var(--status-alert); }
.field--error .field__control:focus,
.field--error .field__control:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--status-alert);
}

/* ============================================================
   КАРТОЧКА — radius 16; дом-карточка (green партнёр / gray реестр)
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: clip;
}
.card--interactive {
  transition: box-shadow var(--dur-std) var(--ease-standard),
              border-color var(--dur-std) var(--ease-standard),
              transform var(--dur-std) var(--ease-standard);
}
.card--interactive:hover {
  box-shadow: var(--shadow-2); border-color: var(--accent);
  transform: translateY(-2px);
}
.card--interactive:focus-within { box-shadow: var(--shadow-focus); }
.card--active { border-color: var(--accent); background: var(--accent-050); } /* синхрон с пином */
.card__media { position: relative; aspect-ratio: 3 / 2; background: var(--surface-2); }
.card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400); }
.card__meta { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-secondary); }
.card__license { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--text-secondary); }
.card__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block-start: var(--s-1); }
/* Партнёр (green) vs реестр (gray) — приглушение реестровой карточки */
.card--registry { }
.card--registry .card__title { color: var(--text); }
.card--registry .card__media { opacity: .96; }
.card__pin-dot {                    /* точка-индикатор в углу медиа        */
  position: absolute; inset-block-start: var(--s-3); inset-inline-start: var(--s-3);
  inline-size: 12px; block-size: 12px; border-radius: 50%;
  border: 1.5px solid var(--surface); box-shadow: var(--shadow-1);
}
.card__pin-dot--green { background: var(--pin-verified); }
.card__pin-dot--gray  { background: var(--pin-registry); }
.card__overlay {                    /* «Not accepting» и т.п.              */
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--scrim-modal); color: var(--surface);
  font-weight: 600; font-size: var(--fs-200);
}

/* ============================================================
   ЧИПЫ — фильтр-toggle (B8: role=checkbox, ≥44), removable, статус
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: var(--touch); padding-inline: var(--s-4);
  font-size: var(--fs-200); font-weight: var(--weight-medium); line-height: 1;
  color: var(--text); background: var(--surface);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-pill);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard);
}
.chip:hover { background: var(--surface-2); }
.chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* selected = accent-050 + галочка + accent-text (НЕ sage-заливка = не CTA) */
.chip[aria-checked="true"], .chip--selected {
  background: var(--accent-050); border-color: var(--accent); color: var(--accent-text);
}
.chip[aria-checked="true"] .chip__check { display: inline-block; }
.chip__check { display: none; }
/* removable-чип активного фильтра «× Kirkland» */
.chip--removable .chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 20px; block-size: 20px; border-radius: 50%; margin-inline-end: -4px;
}
.chip--removable .chip__x:hover { background: var(--accent-100); }
/* Availability-чипы (read-only статус в карточке) */
.chip--status { min-block-size: 0; padding: 4px var(--s-3); font-size: var(--fs-100); cursor: default; }
.chip--wait { background: var(--status-wait-bg); border-color: var(--status-wait-border); color: var(--status-wait); }
.chip--open { background: var(--accent-050); border-color: var(--accent); color: var(--accent-text); }
.chip--full { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
/* Beds-бейдж */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s-3); border-radius: var(--r-pill);
  font-size: var(--fs-100); font-weight: 600;
  background: var(--surface-2); color: var(--text-secondary);
}
.badge--alert { background: var(--status-alert-bg); color: var(--status-alert); }
.badge--wait  { background: var(--status-wait-bg); color: var(--status-wait); }

/* ============================================================
   ШАПКА со слотом роли (.site-header) + role-badge
   ============================================================ */
.site-header {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-block-size: 64px;
}
.site-header__brand {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400);
  color: var(--text); text-decoration: none;
}
.site-header__brand:hover { text-decoration: none; }
.site-header__nav { display: flex; align-items: center; gap: var(--s-2); }
.site-header__slot { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-3); }
/* role-badge: Family / Owner / Staff */
.role-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s-3); border-radius: var(--r-pill);
  font-size: var(--fs-100); font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  background: var(--surface-2); color: var(--text-secondary);
}
.role-badge--owner { background: var(--accent-050); color: var(--accent-text); }

/* ============================================================
   МОДАЛКА + BACKDROP (только необратимое; focus-trap в JS)
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--s-4);
  background: var(--scrim-modal);
  animation: ch-fade var(--dur-std) var(--ease-decelerate);
}
.modal {
  inline-size: min(100%, 30rem); max-block-size: calc(100dvh - var(--s-7) * 2);
  overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  animation: ch-modal-in var(--dur-complex) var(--ease-spring);
}
.modal__header { padding: var(--s-5) var(--s-5) 0; display: flex; align-items: flex-start; gap: var(--s-3); }
.modal__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-500); flex: 1; }
.modal__close { margin-inline-start: auto; inline-size: var(--touch); block-size: var(--touch); border-radius: var(--r-sm); color: var(--text-secondary); display: grid; place-items: center; }
.modal__close:hover { background: var(--surface-2); }
.modal__body { padding: var(--s-4) var(--s-5); color: var(--text); }
.modal__footer { padding: 0 var(--s-5) var(--s-5); display: flex; justify-content: flex-end; gap: var(--s-3); flex-wrap: wrap; }
@keyframes ch-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Bottom-sheet / drawer-досье (одна абстракция) */
.sheet {
  background: var(--surface); box-shadow: var(--shadow-3);
  border-start-start-radius: var(--r-xl); border-start-end-radius: var(--r-xl);
}
.sheet__handle {
  inline-size: 40px; block-size: 4px; border-radius: var(--r-pill);
  background: var(--border-strong); margin: var(--s-3) auto;
}

/* ============================================================
   ТОСТ (error НЕ авто-дисмисс; aria-live="polite")
   ============================================================ */
.toast-region {
  position: fixed; z-index: var(--z-toast);
  inset-block-end: var(--s-5); inset-inline: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3); align-items: center;
  pointer-events: none;
}
@media (min-width: 48rem) {
  .toast-region { inset-inline: auto auto; inset-inline-start: var(--s-5); align-items: flex-start; }
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-3);
  inline-size: min(100%, 26rem); padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-inline-start-width: 4px;
  border-radius: var(--r-input); box-shadow: var(--shadow-3);
  animation: ch-toast-in var(--dur-std) var(--ease-decelerate);
}
.toast__msg { flex: 1; font-size: var(--fs-200); }
.toast--success { border-inline-start-color: var(--accent); }
.toast--info    { border-inline-start-color: var(--border-strong); }
.toast--warning { border-inline-start-color: var(--status-wait); background: var(--status-wait-bg); }
.toast--error   { border-inline-start-color: var(--status-alert); background: var(--status-alert-bg); }
@keyframes ch-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   СКЕЛЕТОН (shimmer; reduced-motion → статик)
   ============================================================ */
.skeleton {
  --_base: var(--surface-2);
  position: relative; overflow: hidden;
  background: var(--_base); border-radius: var(--r-sm);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%);
  animation: ch-shimmer 1.2s var(--ease-standard) infinite;
}
.skeleton--text { block-size: 1em; margin-block: .3em; border-radius: var(--r-xs); }
.skeleton--title { block-size: 1.4em; inline-size: 60%; }
.skeleton--media { aspect-ratio: 3 / 2; border-radius: var(--r-lg); }
.skeleton--line-70 { inline-size: 70%; }
.skeleton--line-40 { inline-size: 40%; }
@keyframes ch-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { display: none; }
  .skeleton { background: var(--surface-2); }
}

/* ============================================================
   ПУСТОЕ СОСТОЯНИЕ (.empty) — спроектированное, не «пусто»
   ============================================================ */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-4); padding: var(--s-7) var(--s-4);
  max-inline-size: 34rem; margin-inline: auto;
}
.empty__media {
  inline-size: 100%; max-inline-size: 22rem; aspect-ratio: 3 / 2;
  border-radius: var(--r-lg); overflow: clip; background: var(--surface-2);
}
.empty__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.empty__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-500); }
.empty__text { color: var(--text-secondary); }
.empty__meta {                    /* «N families waiting» (охра, без имён)  */
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-200); color: var(--status-wait);
}

/* ============================================================
   БЕЙДЖ ЛИЦЕНЗИИ (.lic-badge) — данные, НЕ цветной «verified»
   «Licensed by Washington State DSHS · License #XXXXXX · as of {date}»
   ============================================================ */
.lic-badge {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-100); color: var(--text-secondary);
}
.lic-badge__num { font-family: var(--font-mono); color: var(--text); }
.lic-badge__sep { color: var(--border-strong); }
.lic-badge__status { color: var(--text); font-weight: 600; }
.lic-badge__date { font-family: var(--font-mono); }
.lic-badge a { color: var(--accent-text); }
/* Полный адрес + бизнес-email дома (из публичного DSHS-реестра). Телефон сюда НЕ попадает. */
.dossier__address { font-style: normal; line-height: 1.5; color: var(--text); }
.dossier__address div { font-family: var(--font-body); }
.dossier__contact { margin-block-start: var(--s-2); }
.dossier__email { color: var(--accent-text); word-break: break-all; }
/* «CareHaven Verified» / «Owner-claimed» — чипы, только СО ссылкой на критерии */
.verify-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s-3); border-radius: var(--r-pill);
  font-size: var(--fs-100); font-weight: 600;
  background: var(--accent-050); color: var(--accent-text);
}
.verify-chip--claimed { background: var(--surface-2); color: var(--text-secondary); }

/* ============================================================
   ПИНЫ карты (.pin) — форма+цвет (капля verified / точка реестр)
   Для будущего рендера в разметке (fallback к MapLibre symbol-слоям).
   ============================================================ */
.pin {
  position: relative; inline-size: 22px; block-size: 30px;
  filter: drop-shadow(0 2px 3px rgba(43,40,35,.35));
}
.pin::before {                     /* капля                                */
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  inline-size: 22px; block-size: 22px; border-radius: 50% 50% 50% 0;
  transform: rotate(45deg); border: 1.5px solid var(--surface);
}
.pin::after {                      /* центральная точка                    */
  content: ""; position: absolute; inset-block-start: 7px; inset-inline-start: 7px;
  inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--surface);
}
.pin--green::before { background: var(--pin-verified); }
.pin--gray  { inline-size: 16px; block-size: 16px; }
.pin--gray::before {               /* реестр = ПРОСТАЯ круглая точка        */
  inline-size: 16px; block-size: 16px; border-radius: 50%; transform: none;
  background: var(--pin-registry);
}
.pin--gray::after { inset: 5px; inline-size: 6px; block-size: 6px; }
.pin--selected { z-index: var(--z-sticky); }
.pin--selected::before { box-shadow: 0 0 0 3px var(--accent-active); }
.pin__wait {                       /* доп-точка waitlist на пине            */
  position: absolute; inset-block-start: -2px; inset-inline-end: -2px;
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--pin-wait-dot); border: 1.5px solid var(--surface);
}
.pin:hover { transform: scale(1.15); }
/* Кластер */
.pin-cluster {
  display: grid; place-items: center; min-inline-size: 34px; min-block-size: 34px;
  padding: 6px; border-radius: 50%;
  background: var(--cluster-bg); color: var(--cluster-text);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-100);
  border: 2px solid var(--surface); box-shadow: var(--shadow-2);
}

/* ============================================================
   Reduced-motion для компонентов (сверх глобального сброса в tokens.css)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-backdrop, .toast { animation: none !important; }
  .sheet, .modal { transform: none !important; }
  .card--interactive:hover { transform: none; }
  .btn:active { transform: none; }
}