/* Progressive Web App installation and update surfaces */

.install-app-button {
     width: var(--button-width-2xl);
     min-height: 58px;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: var(--space-md);
     padding: 6px var(--space-md);
     color: var(--storybook-brown-deep);
     background: linear-gradient(145deg, #fffdf4, var(--storybook-parchment-dark));
     border: var(--border-width-md) solid var(--card-border);
     border-bottom-width: var(--border-width-xl);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
     cursor: pointer;
}

.install-app-button:hover {
     transform: translateY(-2px);
     box-shadow: var(--shadow-xl);
}

.install-app-button:active {
     transform: translateY(1px);
     box-shadow: var(--shadow-sm);
}

.install-app-icon {
     width: 44px;
     height: 44px;
     flex: 0 0 auto;
     border-radius: 10px;
     box-shadow: var(--shadow-sm);
}

.install-app-button > span {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     line-height: 1.05;
}

.install-app-button strong {
     font-family: 'Bubblegum Sans', cursive;
     font-size: 1.25rem;
}

.install-app-button small {
     margin-top: 4px;
     color: var(--storybook-ink-faded);
     font-size: 0.76rem;
     font-weight: 600;
}

.install-modal {
     position: fixed;
     inset: 0;
     z-index: calc(var(--z-top) + 2);
     display: flex;
     align-items: center;
     justify-content: center;
     padding:
          max(var(--space-xl), env(safe-area-inset-top))
          max(var(--space-xl), env(safe-area-inset-right))
          max(var(--space-xl), env(safe-area-inset-bottom))
          max(var(--space-xl), env(safe-area-inset-left));
     background: rgba(46, 32, 22, 0.72);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
}

.install-dialog {
     position: relative;
     width: min(100%, 420px);
     max-height: calc(100dvh - 40px);
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: 26px 24px 20px;
     color: var(--storybook-brown-deep);
     text-align: center;
     background-color: var(--storybook-cream);
     background-image: var(--parchment-pattern);
     border: 3px solid var(--card-border);
     border-radius: var(--radius-3xl);
     box-shadow: var(--shadow-3xl);
     -webkit-overflow-scrolling: touch;
}

.install-close {
     position: absolute;
     top: 8px;
     right: 10px;
     width: 40px;
     height: 40px;
     padding: 0;
     color: var(--storybook-brown-deep);
     font-size: 2rem;
     line-height: 1;
     background: transparent;
     border: 0;
     border-radius: 50%;
     cursor: pointer;
}

.install-close:hover,
.install-close:focus-visible {
     background: rgba(184, 134, 11, 0.12);
     outline: 2px solid var(--storybook-gold-rich);
}

.install-dialog-icon {
     width: 82px;
     height: 82px;
     border-radius: 18px;
     box-shadow: var(--shadow-md);
}

.install-eyebrow {
     margin: var(--space-md) 0 4px;
     color: var(--storybook-gold-rich);
     font-size: 0.7rem;
     font-weight: 800;
     letter-spacing: 0.18em;
}

.install-dialog h2 {
     margin: 0 auto var(--space-sm);
     font-family: 'Bubblegum Sans', cursive;
     font-size: clamp(1.7rem, 7vw, 2.2rem);
     line-height: 1.05;
}

.install-description {
     max-width: 33ch;
     margin: 0 auto var(--space-lg);
     color: var(--storybook-ink-faded);
     font-size: 0.95rem;
     line-height: 1.45;
}

.install-steps {
     display: grid;
     gap: var(--space-md);
     margin: 0;
     padding: 0;
     list-style: none;
     text-align: left;
}

.install-steps li {
     display: flex;
     align-items: center;
     gap: var(--space-md);
     min-height: 48px;
     padding: var(--space-sm) var(--space-md);
     line-height: 1.35;
     background: rgba(255, 255, 255, 0.72);
     border: 1px solid rgba(184, 134, 11, 0.28);
     border-radius: var(--radius-lg);
}

.install-step-number {
     display: grid;
     width: 28px;
     height: 28px;
     flex: 0 0 auto;
     place-items: center;
     color: var(--storybook-cream);
     font-weight: 800;
     background: var(--storybook-gold-rich);
     border-radius: 50%;
}

.install-share-icon {
     display: inline-block;
     width: 1.15em;
     height: 1.15em;
     margin-left: 2px;
     overflow: visible;
     vertical-align: -0.18em;
     fill: none;
     stroke: currentcolor;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
}

.install-browser-steps {
     padding: var(--space-md) var(--space-lg);
     line-height: 1.45;
     background: rgba(255, 255, 255, 0.72);
     border: 1px solid rgba(184, 134, 11, 0.28);
     border-radius: var(--radius-lg);
}

.install-browser-steps p {
     margin: 0;
}

.confirm-install-button {
     width: 100%;
     margin-top: var(--space-lg);
     padding: 12px;
     color: var(--storybook-cream);
     font-family: 'Bubblegum Sans', cursive;
     font-size: 1.25rem;
     background: linear-gradient(to bottom, var(--storybook-gold-muted), var(--storybook-gold-rich));
     border: 2px solid var(--storybook-brown-medium);
     border-radius: var(--radius-lg);
     cursor: pointer;
}

.install-not-now {
     margin-top: var(--space-md);
     padding: var(--space-sm) var(--space-lg);
     color: var(--storybook-ink-faded);
     background: transparent;
     border: 0;
     text-decoration: underline;
     cursor: pointer;
}

.pwa-update-toast {
     position: fixed;
     right: max(var(--space-lg), env(safe-area-inset-right));
     bottom: max(var(--space-lg), env(safe-area-inset-bottom));
     left: max(var(--space-lg), env(safe-area-inset-left));
     z-index: calc(var(--z-top) + 1);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-md);
     max-width: 520px;
     margin: 0 auto;
     padding: var(--space-md) var(--space-lg);
     color: var(--storybook-cream);
     background: var(--storybook-brown-deep);
     border: 2px solid var(--storybook-gold-muted);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-3xl);
}

.pwa-update-toast button {
     min-height: 36px;
     padding: 4px var(--space-md);
     color: var(--storybook-brown-deep);
     font-weight: 700;
     background: var(--storybook-gold-highlight);
     border: 0;
     border-radius: var(--radius-md);
     cursor: pointer;
}

#dismiss-pwa-update {
     min-width: 36px;
     padding: 0;
     font-size: 1.3rem;
     background: transparent;
     color: var(--storybook-cream);
}

.install-modal-open {
     overflow: hidden;
}

@media (display-mode: standalone) {
     #install-app-button {
          display: none !important;
     }
}

@media (max-height: 700px) {
     .install-dialog {
          padding-top: 18px;
     }

     .install-dialog-icon {
          width: 58px;
          height: 58px;
     }

     .install-description {
          margin-bottom: var(--space-md);
     }

     .install-steps {
          gap: 6px;
     }

     .install-steps li {
          min-height: 40px;
          padding: 6px var(--space-sm);
          font-size: 0.88rem;
     }
}

@media (prefers-reduced-motion: reduce) {
     .install-app-button,
     .install-dialog,
     .pwa-update-toast {
          transition: none;
     }
}