/*
  DEMO TOOL · Modal Chrome Kit v1
  First earned on Nelson Chiropractic (Oct 2026). Pair with modal-chrome.js.
  Requires the Status Bar Kit and viewport-fit=cover.

  The frost is the page. On a phone, Safari's clock and bottom toolbar
  composite those pixels. Desktop has neither bar; it still gets the frost.
  Do not fork a desktop copy. A fixed overlay between the bars leaves a seam.
*/

html.mc-open,
html.mc-open body {
  background-color: var(--mc-fallback, #102428);
}

html.mc-open [data-mc-frost] {
  position: relative;
  overflow: visible;
  filter: blur(var(--mc-blur, 22px)) saturate(var(--mc-saturate, 0.82));
}

html.mc-open [data-mc-frost]::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: var(--mc-wash, rgba(2, 20, 24, 0.68));
  pointer-events: none;
}

/* Anything fixed on the top edge becomes the clock color. Park the header above it. */
html.mc-open [data-mc-header] {
  position: fixed !important;
  top: -160px !important;
  filter: none !important;
  background: none !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}

html.mc-open [data-mc-dialog] {
  top: 10px !important;
}

/* A clear dialog lets the page frost show through. A painted sheet (data-mc-paint) keeps its own card. */
html.mc-open [data-mc-dialog]:not([data-mc-paint]) {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* A tall sheet that reaches the bottom edge becomes the toolbar color.
   The reserved padding is outside the card, even when the card's own
   max-height is based on the full screen. Short cards stay short. */
@media (hover: none) and (pointer: coarse) {
  html.mc-open [data-mc-dialog] {
    box-sizing: border-box !important;
    padding-bottom: 120px !important;
    overflow: hidden !important;
  }
  html.mc-open [data-mc-dialog] > * {
    max-height: 100% !important;
    min-height: 0 !important;
  }
  /* The dialog stays clear and reaches the bottom, the same way a service
     card does. Ending the box above the toolbar leaves Safari on the root
     color, which is the flat dark URL bar. The card is the child. The
     padding is the frost the address bar samples. */
  html.mc-open [data-mc-dialog][data-mc-paint] {
    top: 14px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 10px 120px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
  }
  html.mc-open [data-mc-dialog][data-mc-paint] > * {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }
}

/* Lengths so the keyboard return can ease. Fallbacks cover the first frame. */
@property --mc-pin-top {
  syntax: "<length>";
  inherits: true;
  initial-value: 14px;
}
@property --mc-pin-height {
  syntax: "<length>";
  inherits: true;
  initial-value: 640px;
}
@property --mc-vv-left {
  syntax: "<length>";
  inherits: true;
  initial-value: 10px;
}
@property --mc-vv-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 320px;
}

html.mc-kb-move {
  transition: --mc-pin-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
              --mc-vv-left 280ms cubic-bezier(0.16, 1, 0.3, 1),
              --mc-vv-width 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* While the iPhone keyboard is open, keep a painted sheet inside the visible screen.
   mc-kb-move holds that same box for the ease back to full height. */
html.mc-keyboard [data-mc-dialog][data-mc-paint],
html.mc-kb-move [data-mc-dialog][data-mc-paint] {
  top: var(--mc-pin-top, 10px) !important;
  bottom: auto !important;
  left: var(--mc-vv-left, 10px) !important;
  right: auto !important;
  width: var(--mc-vv-width, auto) !important;
  height: var(--mc-pin-height, 70dvh) !important;
  max-height: none !important;
  padding: 0 !important;
  transform: none !important;
}

/* Opt in: a footer row that should leave while the keyboard is up. */
html.mc-keyboard [data-mc-hide-keyboard] {
  display: none !important;
}

/* The address chip and the previous/next bar are drawn over the bottom of
   the visual viewport. Extra room lets the focused line scroll above them.
   Anchor is off so iOS does not pin that line back onto the chip. */
html.mc-keyboard [data-mc-dialog] .book-step-scroll {
  overflow-anchor: none;
  padding-bottom: calc(14px + var(--mc-kb-cover, 108px));
  scroll-padding-bottom: var(--mc-kb-cover, 108px);
}

html.mc-keyboard [data-mc-dialog] input,
html.mc-keyboard [data-mc-dialog] textarea,
html.mc-keyboard [data-mc-dialog] label {
  scroll-margin-top: 12px;
  scroll-margin-bottom: var(--mc-kb-cover, 108px);
}