/* Демо-слой для зеркала supershkaff.ru. Токены берутся из CSS сайта (--background, --primary, ...). */
:root{--demo-bar-h:0px}
html[data-demo-bar]{--demo-bar-h:46px}
@media (max-width:640px){html[data-demo-bar]{--demo-bar-h:64px}}

/* ---- плашка ---- */
.demo-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;gap:.75rem;
  min-height:46px;padding:.5rem 1rem;box-sizing:border-box;
  background:hsl(var(--card)/.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));
  font-family:var(--font-sans),"Golos Text",system-ui,sans-serif;font-size:.8125rem;line-height:1.35;
  animation:demo-up .5s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)) both}
.demo-bar__dot{flex:none;width:.5rem;height:.5rem;border-radius:999px;background:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.2)}
.demo-bar__txt{flex:1;min-width:0;text-align:center}
.demo-bar__txt b{font-weight:600;color:hsl(var(--foreground))}
.demo-bar__x{flex:none;appearance:none;border:0;background:transparent;color:hsl(var(--muted-foreground));cursor:pointer;
  width:2rem;height:2rem;border-radius:var(--radius,.375rem);font-size:1.25rem;line-height:1;display:grid;place-items:center;
  transition:color .2s,background-color .2s}
.demo-bar__x:hover{color:hsl(var(--foreground));background:hsl(var(--muted))}
html[data-demo-bar] body{padding-bottom:var(--demo-bar-h)}
@media (max-width:640px){.demo-bar{padding:.5rem .75rem;font-size:.75rem}.demo-bar__txt{text-align:left}}

/* ---- тост ---- */
.demo-toast{position:fixed;left:50%;bottom:calc(var(--demo-bar-h) + 1.25rem);z-index:95;transform:translate(-50%,12px);opacity:0;
  width:max-content;max-width:calc(100vw - 2rem);box-sizing:border-box;display:flex;align-items:center;gap:.75rem;
  padding:.8rem 1.1rem .8rem 1rem;background:hsl(var(--popover));color:hsl(var(--popover-foreground));
  border:1px solid hsl(var(--border));border-left:2px solid hsl(var(--primary));border-radius:var(--radius,.375rem);
  box-shadow:0 18px 40px -12px rgb(0 0 0/.6);font-family:var(--font-sans),"Golos Text",system-ui,sans-serif;font-size:.875rem;line-height:1.4;
  pointer-events:none;transition:opacity .3s var(--ease-out-quart,ease),transform .4s var(--ease-out-expo,ease)}
.demo-toast.is-on{opacity:1;transform:translate(-50%,0)}
.demo-toast small{display:block;color:hsl(var(--muted-foreground));font-size:.75rem;margin-top:.1rem}

/* ---- демо-статус вместо «заявка принята» ---- */
[data-demo-note]{border-left:2px solid hsl(var(--primary))!important;padding-left:1.1rem!important}
[data-demo-note] h3::before{content:"ДЕМО";display:inline-block;vertical-align:middle;margin-right:.75rem;padding:.2rem .5rem;
  border:1px solid hsl(var(--primary)/.6);border-radius:2px;color:hsl(var(--primary));
  font-family:var(--font-sans),"Golos Text",system-ui,sans-serif;font-size:.6875rem;font-weight:600;letter-spacing:.14em;line-height:1}

/* ---- карта-заглушка ---- */
.map-demo{display:grid;place-content:center;justify-items:center;gap:.9rem;text-align:center;padding:1.5rem;
  color:hsl(var(--muted-foreground));font-size:.875rem;
  background-color:hsl(var(--muted));
  background-image:linear-gradient(hsl(var(--border)/.55) 1px,transparent 1px),linear-gradient(90deg,hsl(var(--border)/.55) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 45%,hsl(var(--primary)/.14),transparent 62%);
  background-size:44px 44px,44px 44px,100% 100%}
.map-demo__pin{width:1.35rem;height:1.35rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:hsl(var(--primary));
  box-shadow:0 0 0 6px hsl(var(--primary)/.18);position:relative}
.map-demo__pin::after{content:"";position:absolute;inset:.42rem;border-radius:50%;background:hsl(var(--background))}
.map-demo__t{max-width:16rem;text-wrap:balance}

/* ---- /privacy на узких экранах: длинный h1 не должен давать горизонтальный скролл ---- */
main h1{overflow-wrap:anywhere}
@media (max-width:480px){main h1[class]{font-size:clamp(1.75rem,8.4vw,3rem)}}

/* ---- 404 ---- */
.nf{min-height:calc(100vh - 8rem);display:flex;align-items:center}
.nf .code{font-family:var(--font-display),Georgia,serif;font-size:clamp(5rem,22vw,11rem);line-height:.9;font-weight:500;color:hsl(var(--primary)/.9);letter-spacing:-.03em}

/* мобильное меню 404 (без JS) */
.nf-menu summary{list-style:none;cursor:pointer}
.nf-menu summary::-webkit-details-marker{display:none}
.nf-menu[open] summary span:first-child{transform:rotate(45deg)!important}
.nf-menu[open] summary span:last-child{transform:rotate(-45deg)!important}
.nf-menu__panel{position:fixed;left:0;right:0;top:5rem;display:grid;gap:.25rem;padding:1rem 1rem 1.5rem;background:hsl(var(--background));border-bottom:1px solid hsl(var(--border))}
.nf-menu__panel a{font-family:var(--font-display),Georgia,serif;font-size:1.75rem;padding:.4rem .25rem}
@media (min-width:1024px){.nf-menu{display:none}}

/* ---- полировка: браузерные поверхности, фокус, типографика (в палитре сайта) ---- */
::selection{background:hsl(var(--primary)/.35);color:hsl(var(--foreground))}
html{scrollbar-color:hsl(var(--border)) hsl(var(--background));scrollbar-width:thin;-webkit-text-size-adjust:100%}
:where(a,button,[role=button],input,textarea,select,summary):focus-visible{outline:2px solid hsl(var(--primary));outline-offset:3px;border-radius:var(--radius,.375rem)}
h1,h2,h3{text-wrap:balance}
main p{text-wrap:pretty}
input,textarea{caret-color:hsl(var(--primary))}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}