/**
 * Avayis · "prototype" notice — shared by every Swiss page.
 * -------------------------------------------------------------------------
 * The Swiss site runs as a prototype, and says so in three places on every
 * page: an inline tag in whatever sits at the top (the example pages' fixed
 * Avayis bar, the landing's strip, the concept page's ribbon), and a fixed
 * badge in the bottom-left corner that opens the explanation. Loaded only by
 * the Swiss market (`{{#if proto}}` in each template), so the international
 * pages never fetch it.
 *
 * Deliberately Avayis-branded — dark with the lime accent — on every page,
 * whatever the page's own palette: it is our note about the page, not part of
 * the page, the same way the example pages' top bar is.
 */

.proto-pill {
  display: inline-block;
  vertical-align: middle;
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 600; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #0E1114; background: #C6EE1A;
  padding: 5px 8px 4px; border-radius: 2px;
  white-space: nowrap;
}
/* The example pages' bar hides its second span on phones; the tag must stay. */
.avayis-bar .tag span.proto-pill { display: inline-block; margin: 0 4px 0 8px; }

/* ---- The badge ---------------------------------------------------------- */

.proto-badge {
  --proto-bottom: 18px;
  position: fixed; left: 18px; bottom: calc(var(--proto-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 1050;               /* under full-screen lightboxes (1200+) */
  max-width: min(340px, calc(100vw - 36px));
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #EDEFEC;
}
.proto-badge summary {
  display: inline-flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer; user-select: none;
  background: #0E1114; border: 1px solid rgba(198, 238, 26, 0.55);
  border-radius: 999px; padding: 9px 14px 9px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #C6EE1A;
  transition: border-color .15s ease, background .15s ease;
}
.proto-badge summary::-webkit-details-marker { display: none; }
.proto-badge summary:hover { border-color: #C6EE1A; }
.proto-badge summary:focus-visible { outline: 2px solid #C6EE1A; outline-offset: 3px; }
.proto-badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #C6EE1A; flex: none;
  box-shadow: 0 0 0 0 rgba(198, 238, 26, 0.6);
  animation: proto-pulse 2.4s ease-out infinite;
}
.proto-badge .i {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(198, 238, 26, 0.6);
  font-size: 10px; letter-spacing: 0; text-transform: none; line-height: 1;
}
.proto-badge[open] .i { background: #C6EE1A; color: #0E1114; }
@keyframes proto-pulse {
  0% { box-shadow: 0 0 0 0 rgba(198, 238, 26, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(198, 238, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 238, 26, 0); }
}
.proto-badge p {
  position: absolute; left: 0; bottom: calc(100% + 8px);
  width: max-content; max-width: min(320px, calc(100vw - 36px));
  margin: 0; padding: 12px 14px;
  background: #0E1114; border: 1px solid rgba(237, 239, 236, 0.14); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  font-size: 13.5px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: #EDEFEC;
}
.proto-badge p strong { color: #C6EE1A; font-weight: 600; }
.proto-badge p a { color: #C6EE1A; }

/* ---- Landing strip: above the header, first thing on the page ------------ */

.proto-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 12px;
  padding: 9px 16px;
  background: #111518; border-bottom: 1px solid rgba(237, 239, 236, 0.08);
  color: rgba(237, 239, 236, 0.82);
  font-size: 13.5px; line-height: 1.45; text-align: center;
}

/* ---- Real-address warning -------------------------------------------------
   The map demos centre on a real building so the federal data is genuine.
   Wherever that address appears as if it were a listing, this says plainly
   that the building is real and everything else is invented. Amber, not
   lime: this one is a warning, not a status. Neutral on any page palette. */

.addr-warn {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 11px 14px;
  background: #FFF6E0; border: 1px solid #F0C75E; border-left-width: 4px;
  border-radius: 8px; color: #4A3500;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px; line-height: 1.5; text-align: left;
}
.addr-warn::before {
  content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: #B26A00; color: #FFFFFF; font-weight: 700; font-size: 13px; line-height: 1;
}
.addr-warn strong { font-weight: 700; color: #3A2900; }
/* On the dark Avayis landing. */
.addr-warn.on-dark { background: rgba(255, 196, 64, 0.1); border-color: rgba(255, 196, 64, 0.45); color: #F3E3BD; }
.addr-warn.on-dark strong { color: #FFD166; }
.addr-warn.on-dark::before { background: #FFB020; color: #0E1114; }

/* ---- Lifted above bottom bars that span the screen ------------------------ */

/* The landing's assistant bubble goes full width on phones. */
@media (max-width: 560px) { .proto-badge--lift-sm { --proto-bottom: 86px; } }
/* The concept page's price-and-contact bar is fixed from 900px down. */
@media (max-width: 900px) { .proto-badge--lift-md { --proto-bottom: 84px; } }

@media (prefers-reduced-motion: reduce) {
  .proto-badge .dot { animation: none; }
}
@media print {
  .proto-badge { display: none; }
}