/* Изгледът, докато сайтът се изгражда. Токените са от style.css. Офисът е в центъра, скелетът и „Докато чакате“ около него. */
.bv { display: grid; gap: 22px; padding: 22px 0 8px; min-width: 0; }
.bv-todo li, .bv-get li, .bv-running li { overflow-wrap: anywhere; }

.bv-now { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid var(--rule); }
.bv-now-head { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: baseline; }
.bv-kicker { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.bv-meta { font: 500 13px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.bv-running { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bv-running li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bv-running li b { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); background: var(--accent); padding: 3px 7px; }
.bv-running li.failed b { background: var(--warn); }
.bv-running li span { font-weight: 600; }
.bv-running li code { font: 12px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.bv-bar { height: 4px; background: var(--sunken); }
.bv-bar i { display: block; height: 100%; background: var(--accent); transition: width .8s ease; }

.bv-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) minmax(0, .9fr); gap: 24px; align-items: start; }
.bv h3 { margin: 0 0 10px; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* център: офисът */
.bv-office { display: grid; gap: 8px; }
.bv-office-frame { border: 2px solid var(--rule); background: #1b1d22; aspect-ratio: 16 / 10; overflow: hidden; }
.bv-office-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.bv-office-cap { margin: 0; color: var(--muted); font-size: 13px; }

/* вляво: скелетът */
.bv-browser { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.bv-url { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); font: 11.5px var(--mono); color: var(--muted); }
.bv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.bv-browser.on .bv-dot { background: var(--ok); }
.bv-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--text); }
.bv-live { white-space: nowrap; }
.bv-page { --s-primary: #c9ccc6; --s-bg: var(--surface); --s-text: var(--muted); --s-surface: var(--sunken);
  background: var(--s-bg); color: var(--s-text); padding: 10px; display: grid; gap: 8px; transition: background .6s; }
.bv-header { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 18px; }
.bv-brand { font-weight: 700; font-size: 12px; min-width: 60px; }
.bv-nav { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-end; }
.bv-nav .item { font-size: 10px; }
.bv-hero { background: var(--s-primary); padding: 12px 10px; display: grid; gap: 5px; transition: background .6s; }
.bv-h1 { display: block; height: 9px; width: 80%; background: var(--s-bg); opacity: .85; }
.bv-h1.short { width: 50%; }
.bv-btn { display: block; height: 10px; width: 64px; background: var(--s-text); margin-top: 4px; }
.bv-sections { display: grid; gap: 6px; }
.bv-sections .sec { display: block; height: 18px; background: var(--s-surface); border-left: 3px solid var(--s-primary); animation: bv-in .5s ease-out; }
.bv-footer { height: 16px; background: var(--s-text); opacity: .9; }
@keyframes bv-in { from { opacity: 0; transform: translateY(4px); } }

/* части, които още не са направени: мигащ скелет */
.bv .ghost, .bv-sections .sec.ghost, .bv-hero.ghost, .bv-footer.ghost {
  background: linear-gradient(90deg, var(--sunken) 0%, var(--line) 50%, var(--sunken) 100%) !important;
  background-size: 200% 100% !important; animation: bv-shimmer 1.4s linear infinite; border-color: transparent !important; color: transparent !important;
}
.bv-brand.ghost { height: 10px; }
.bv-nav .item.ghost { display: inline-block; width: 34px; height: 8px; }
.bv-hero.ghost .bv-h1, .bv-hero.ghost .bv-btn { visibility: hidden; }
@keyframes bv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bv-site-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

/* вдясно: докато чакате */
.bv-wait-lead, .bv-wait-note { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; }
.bv-wait-note { margin-top: 12px; }
.bv-todo, .bv-get { list-style: none; margin: 0 0 18px; padding: 0; }
.bv-todo li, .bv-get li { padding: 7px 0 7px 22px; border-top: 1px dashed var(--line); font-size: 14px; position: relative; }
.bv-todo li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 10px; height: 10px; border: 1.5px solid var(--rule); }
.bv-get li::before { content: "→"; position: absolute; left: 0; top: 6px; color: var(--accent); font-weight: 700; }

/* тясно (уиджет, телефон): офисът първи, после скелетът и списъкът */
@media (max-width: 960px) { .bv-grid { grid-template-columns: minmax(0, 1fr); } .bv-office { order: -1; } }
body.embed .bv-grid { grid-template-columns: minmax(0, 1fr); }
body.embed .bv-office { order: -1; }
body.embed .bv-kicker { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  .bv .ghost, .bv-sections .sec { animation: none !important; }
  .bv-bar i, .bv-page, .bv-hero { transition: none; }
}