/* ============================================================
   Portal replica: the hand-written layer over portal.css
   (portal.css is generated from the live page; don't edit it)
   · the site header (the theme's mobile header, rebuilt)
   · the one place the replica departs from the live page
   · touch indicator, sheet and popover motion, typing caret
   ============================================================ */

/* a phone shows no scrollbars; nor does the replica, on any screen. The theme's
   smooth scrolling is off here: the demo moves the page itself, frame by frame */
html { overflow: hidden; scroll-behavior: auto !important; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
body { margin: 0; }

/* ---------- Site header (zbiotics.com, phone width) ---------- */
.demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 72px;
  padding: 16px;
  background: #f7f9ee;
}
.demo-header__logo { display: block; width: 120px; height: 24px; }
.demo-header__icons { display: flex; gap: 8px; }
.demo-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #212121;
}
.demo-header__btn--menu { color: #121212; }
.demo-header__btn svg { display: block; width: 24px; height: 24px; }

/* ---------- Savings banner ----------
   On the live page (2026-10-06) the theme floats "You've saved with your
   subscription" at top: calc(var(--skio-banner-height) + 2rem + 1.6rem), a
   height meant for a promo banner that isn't showing, so it covers the title at
   every width. Here it sits in the 5.4rem band the theme reserves for it. */
#skio-root [data-skio-name="subscription-details-layout-container"] div:has([data-skio-name="saved-by-sub"]) {
  top: 1.6rem;
}

/* ---------- Card fields (Spreedly iframes on the live page) ---------- */
.demo-spreedly {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  font: 400 16px/40px "Suisse Int'l", system-ui, sans-serif;
  color: var(--color-text-heading, #212121);
  pointer-events: none;
}
.demo-spreedly::placeholder { color: var(--color-text-placeholder, #717680); opacity: 1; }
[data-demo-field="number"] { font-variant-numeric: tabular-nums; }

/* ---------- Touch indicator ---------- */
/* div.: the theme hides empty divs (div:empty { display: none }) */
div.demo-touch {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 600ms, 220ms;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1), ease;
  will-change: transform;
}
.demo-touch::before {
  content: '';
  position: absolute;
  left: -19px;
  top: -19px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(33, 33, 33, 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 2px 8px rgba(33, 33, 33, 0.1);
  transition: transform 140ms ease, background-color 140ms ease;
}
.demo-touch.is-on { opacity: 1; }
.demo-touch.is-down::before { transform: scale(0.8); background: rgba(33, 33, 33, 0.24); }

/* ---------- Sheets and popovers ---------- */
[data-skio-type="skio-modal-overlay"].demo-in { animation: demo-fade 260ms ease-out both; }
[data-skio-type="skio-modal-overlay"].demo-in [data-skio-type="skio-modal"] { animation: demo-rise 260ms cubic-bezier(0, 0, 0.2, 1) both; }
[data-skio-type="skio-modal-overlay"].demo-out { animation: demo-fade 200ms ease-in reverse both; }
[data-skio-type="skio-modal-overlay"].demo-out [data-skio-type="skio-modal"] { animation: demo-rise 200ms ease-in reverse both; }
.demo-swap-in { animation: demo-fade 200ms ease-out both; }
.demo-pop-in { animation: demo-fade 150ms ease-out both, demo-drop 150ms ease-out both; }
.demo-pop-out { animation: demo-fade 120ms ease-in reverse both; }

@keyframes demo-fade { from { opacity: 0; } }
@keyframes demo-rise { from { transform: translateY(1rem); } }
@keyframes demo-drop { from { transform: translateY(-0.4rem); } }

/* a value the flow just changed settles in place */
.demo-tick { animation: demo-tick 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes demo-tick { from { opacity: 0; transform: translateY(0.35em); } }

/* ---------- Typing caret ---------- */
.demo-caret {
  position: absolute;
  top: 50%;
  width: 1.5px;
  height: 20px;
  margin-top: -10px;
  background: var(--color-text-heading, #212121);
  pointer-events: none;
  animation: demo-blink 1s steps(1) infinite;
}
@keyframes demo-blink { 50% { opacity: 0; } }

/* ---------- Loop seam ---------- */
div.demo-veil {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background: #f7f9ee;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.demo-veil.is-on { opacity: 1; }

/* the still frame for reduced motion, and any jump between states */
.demo-instant *, .demo-instant *::before, .demo-instant *::after { animation: none !important; transition: none !important; }