/* Строка «Это демо» (SPEC §8.25): над программой и страницей бронирования
   демо-заведения сайта. Цвет приборной линейки — тот же тёмный тон, что у
   шахматки, в обеих темах; красная точка — тон линии «сейчас»: демо живое и
   идёт по настоящим часам. Высота — переменной: программа вычитает её из
   своей высоты в окно, и ничего не уезжает под край. */
:root{ --demo-h:32px }
html[data-demo] .app{height:calc(100dvh - var(--demo-h))}
/* Карточки уведомлений встают под строкой, а не на неё: строка — правда о демо, её не закрывают. */
html[data-demo] .nt-layer{top:calc(62px + var(--demo-h))}

.demo-strip{
  /* Своего слоя у строки нет: окна и шторки встают над ней, как над всей страницей. */
  display:flex;align-items:center;justify-content:center;gap:14px;
  height:var(--demo-h);padding:0 16px;
  background:var(--band);color:var(--band-ink);
  border-bottom:1px solid var(--band-3);
  font:450 12.5px/1 var(--font);letter-spacing:.005em;white-space:nowrap;
}
.demo-strip-say{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.demo-strip-say::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--now);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--now) 22%, transparent);
}
.demo-strip-say b{font-weight:650;color:var(--band-ink)}
.demo-strip-say :is(.demo-strip-long,.demo-strip-short){color:var(--band-ink-2)}
.demo-strip-short{display:none}
.demo-strip-go{
  flex:none;color:var(--band-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--band-ink) 45%, transparent);
  text-underline-offset:3px;border-radius:4px;
  transition:text-decoration-color .16s ease;
}
@media (hover:hover){ .demo-strip-go:hover{text-decoration-color:currentColor} }
.demo-strip-go:focus-visible{outline:2px solid var(--band-ink);outline-offset:2px}

@media (max-width:720px){
  html[data-demo] :is(.nt-layer,.nc){top:calc(8px + var(--demo-h) + env(safe-area-inset-top,0px))}
  .demo-strip{justify-content:space-between;gap:10px;font-size:12px}
  .demo-strip-long{display:none}
  .demo-strip-short{display:inline}
}
@media (max-width:360px){
  .demo-strip-say .demo-strip-short{display:none}
}