/* ============================================================
   ELYQO — BusinessOpenStatusCard
   ТЗ «Статус работы бизнеса внутри публичной карточки» §2, §14–§19.

   Блок живёт внутри identity-карточки бизнеса, занимает всю её ширину и
   не создаёт собственной прокрутки: раскрытый график увеличивает высоту
   документа, а не прячет строки во внутренний скролл (§17).
   ============================================================ */
.bsc{
  --bsc-bg:#F3F7F4; --bsc-line:#D8E8DE; --bsc-ink:#14361F; --bsc-accent:#1E9E57;
  --bsc-badge-bg:#1FA45C; --bsc-badge-ink:#FFFFFF;
  border:1px solid var(--bsc-line); background:var(--bsc-bg); color:var(--bsc-ink);
  border-radius:16px; margin:14px 0 0; overflow:hidden;
  font-family:inherit;
}
/* OPEN — точные цвета демо-состояния ТЗ «Верхняя карточка клиники» §3:
   позднейшая, более конкретная спецификация имеет приоритет над §19 —
   там же явно разрешена мягкая пульсация индикатора (см. .bsc-dot ниже). */
.bsc--open{ --bsc-bg:#F2F8F4; --bsc-line:#DFEBE3; --bsc-ink:#214E36; --bsc-accent:#119B51;
  --bsc-title-c:#214E36; --bsc-sub-c:#627269; --bsc-halo:#DDEFE4;
  --bsc-badge-bg:#1FA45C; box-shadow:0 0 0 3px rgba(31,164,92,.06); }
/* CLOSES SOON — тёплый янтарь, не тревога (§7) */
.bsc--soon{ --bsc-bg:#FFF8EC; --bsc-line:#F3E0BC; --bsc-ink:#4A3410; --bsc-accent:#B87400;
  --bsc-badge-bg:#C98212; }
/* CLOSED — мягкий коралловый, не аварийный (§5) */
.bsc--closed{ --bsc-bg:#FEF4F4; --bsc-line:#F6DADA; --bsc-ink:#4A1F1F; --bsc-accent:#C6453F;
  --bsc-badge-bg:#FFFFFF; --bsc-badge-ink:#B3352F; }
/* TEMPORARILY CLOSED — красно-серый нейтральный (§22) */
.bsc--temp{ --bsc-bg:#F7F4F4; --bsc-line:#E4DCDC; --bsc-ink:#3B2C2C; --bsc-accent:#9B6060;
  --bsc-badge-bg:#FFFFFF; --bsc-badge-ink:#7A4A4A; }
/* HOURS UNKNOWN — серо-фиолетовый, красного здесь быть не должно (§23) */
.bsc--unknown{ --bsc-bg:#F5F4FA; --bsc-line:#E2DFF0; --bsc-ink:#2E2A45; --bsc-accent:#6C5CE0;
  --bsc-badge-bg:#FFFFFF; --bsc-badge-ink:#4B3FBF; }

/* Статичная плашка (ТЗ «Верхняя карточка клиники» §4): не кнопка, не
   аккордеон — без cursor:pointer, hover-подсветки и фокуса по Tab. */
.bsc-head{
  display:flex; align-items:center; gap:12px; width:100%; padding:16px 18px; min-height:78px;
  background:none; border:0; text-align:left; color:inherit; font:inherit; cursor:default;
  -webkit-tap-highlight-color:transparent;
}
.bsc-head:focus-visible{ outline:2px solid var(--bsc-accent); outline-offset:-3px; border-radius:14px; }

/* Индикатор — точка с мягким ореолом вместо иконки-глифа: 32×32 область,
   точка 10px. Пульсирует только пока бизнес открыт (см. .bsc--open ниже);
   декоративный (aria-hidden) — статус всегда продублирован текстом. */
.bsc-ind{ position:relative; width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; }
.bsc-halo{ position:absolute; width:22px; height:22px; border-radius:50%;
  background:var(--bsc-halo, color-mix(in srgb, var(--bsc-accent) 20%, transparent)); }
.bsc-dot{ position:relative; width:10px; height:10px; border-radius:50%; background:var(--bsc-accent); }
/* только opacity/transform — размеры в потоке не меняются (§4) */
.bsc--open .bsc-dot{ animation:bsc-dot-pulse 2s ease-in-out infinite; }
.bsc--open .bsc-halo{ animation:bsc-halo-pulse 2s ease-in-out infinite; }
@keyframes bsc-dot-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
@keyframes bsc-halo-pulse{ 0%,100%{ transform:scale(1); opacity:.65 } 50%{ transform:scale(1.12); opacity:.35 } }

.bsc-txt{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.bsc-title{ font-size:20px; font-weight:600; line-height:1.2; letter-spacing:-.01em;
  color:var(--bsc-title-c, var(--bsc-accent)); }
/* break-word, а не anywhere: anywhere рвал слова посередине —
   «następujący|ch godzinach» на 390px. Строка одного веса и цвета целиком —
   время внутри неё не выделяется жирным (§4). */
.bsc-sub{ font-size:14px; line-height:1.35; color:var(--bsc-sub-c, var(--bsc-ink)); opacity:1;
  overflow-wrap:break-word; }

/* ---- строка фактов: 1–3 колонки по доступной ширине (§14) ---- */
.bsc-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:2px 0; border-top:1px solid var(--bsc-line); background:rgba(255,255,255,.42);
}
.bsc-fact{ display:flex; align-items:center; gap:10px; padding:11px 14px; min-width:0; }
.bsc-fact + .bsc-fact{ box-shadow:inset 1px 0 0 var(--bsc-line); }
.bsc-fi{ width:20px; height:20px; flex:0 0 20px; color:var(--bsc-accent); opacity:.85; }
.bsc-ft{ min-width:0; display:flex; flex-direction:column; }
.bsc-ft .k{ font-size:11.5px; line-height:1.25; color:var(--bsc-ink); opacity:.62; }
.bsc-ft .v{ font-size:13.5px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }

@media (max-width:374px){
  .bsc-head{ gap:10px; padding:14px }
  .bsc-ind{ width:28px; height:28px; flex-basis:28px }
  .bsc-title{ font-size:18px }
  .bsc-sub{ font-size:13px }
}
@media (max-width:559px){
  .bsc-facts{ grid-template-columns:1fr; }
  .bsc-fact + .bsc-fact{ box-shadow:inset 0 1px 0 var(--bsc-line); }
}
/* ---- планшет и десктоп: ширину задаёт карточка бизнеса, а не окно (§15, §16) ---- */
@media (min-width:768px){
  .bsc-title{ font-size:24px; }
  .bsc-head{ padding:16px 18px; }
  .bsc-fact{ padding:12px 16px; }
}
@media (prefers-reduced-motion:reduce){
  .bsc-dot, .bsc-halo{ animation:none!important }
}
/* пульсация — на паузе, пока вкладка скрыта (совместно с visibilitychange в salon.html) */
html.opb-paused .bsc-dot, html.opb-paused .bsc-halo{ animation-play-state:paused; }