/* Guided setup (app.js startTour) on the new layouts, in the look of each device ([data-gs]):
   ios / android: the phone layout (a sheet from the bottom), ipad / mac: Liquid Glass cards,
   atab: Material 3 on an Android tablet. */

/* ---------- shared: the High Desert scrim and spotlight, the install tip ---------- */
.gs[data-gs] { background: rgba(31, 26, 22, .4); }
.gs-spot[data-gs] { box-shadow: 0 0 0 3px var(--rust-600), 0 0 0 9999px rgba(31, 26, 22, .5); }
.gs-spot[data-gs].is-none { box-shadow: 0 0 0 9999px rgba(31, 26, 22, .5); }
.gs[data-gs] .gs-card__side { background: var(--brand-side, var(--ink-900)); }
.gs-card__grab { display: none; }
.gs-install { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sand-100); }
.gs-install__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--rust-600); color: var(--sand-50); font: 400 20px/1 var(--display); }
.gs-install__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ink-600); }
.gs-install__text strong { font-size: 14.5px; color: var(--ink-900); }

/* ---------- iPhone: a floating glass sheet ---------- */
.gs[data-gs="ios"] { place-items: end stretch; padding: 0; }
.gs[data-gs="ios"] .gs-card { min-height: 0; max-height: 92vh; overflow-y: auto; margin: 0 8px 8px; width: auto; border-radius: 38px;
  background: rgba(251, 247, 240, .9); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 20px 50px -20px rgba(31, 26, 22, .5); }
.gs[data-gs="ios"] .gs-card__main { padding: 10px 22px calc(20px + env(safe-area-inset-bottom)); }
.gs-coach[data-gs="ios"] { left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 32px; padding: 10px 20px 18px;
  background: rgba(251, 247, 240, .9); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 20px 50px -20px rgba(31, 26, 22, .5); }
.gs-coach[data-gs="ios"].is-top { top: calc(8px + env(safe-area-inset-top)) !important; bottom: auto; }
.gs[data-gs="ios"] .btn, .gs-coach[data-gs="ios"] .btn { border-radius: 999px; }
.gs[data-gs="ios"] .gs-card__grab, .gs-coach[data-gs="ios"] .gs-coach__grab { display: block; width: 36px; height: 5px; margin: 0 auto 6px; border-radius: 999px; background: rgba(31, 26, 22, .2); }

/* ---------- Android phone: a Material 3 bottom sheet ---------- */
.gs[data-gs="android"] { place-items: end stretch; padding: 0; }
.gs[data-gs="android"] .gs-card { min-height: 0; max-height: 92vh; overflow-y: auto; width: 100%; border-radius: 28px 28px 0 0; background: var(--sand-100); }
.gs[data-gs="android"] .gs-card__main { padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); }
.gs-coach[data-gs="android"] { border-radius: 28px 28px 0 0; background: var(--sand-100); padding: 8px 20px calc(18px + env(safe-area-inset-bottom)); }
.gs-coach[data-gs="android"].is-top { top: 0 !important; bottom: auto; border-radius: 0 0 28px 28px; padding-top: calc(14px + env(safe-area-inset-top)); }
.gs[data-gs="android"] .gs-card__grab, .gs-coach[data-gs="android"] .gs-coach__grab { display: block; width: 32px; height: 4px; margin: 6px auto 10px; border-radius: 999px; background: var(--ink-400); }
.gs[data-gs="android"] .btn, .gs-coach[data-gs="android"] .btn { border-radius: 999px; min-height: 40px; }
.gs[data-gs="android"] .gs-install, .gs-coach[data-gs="android"] .gs-try { background: var(--sand-200); border-radius: 16px; }

/* Phones: the coach's "Try it" row comes back, and the checklist reads as a list. */
.gs-coach[data-gs="ios"] .gs-try, .gs-coach[data-gs="android"] .gs-try { display: flex; }
.gs[data-gs="ios"] .gs-card__acts, .gs[data-gs="android"] .gs-card__acts { flex-direction: column; align-items: stretch; gap: 10px; }
.gs[data-gs="ios"] .gs-card__acts .link, .gs[data-gs="android"] .gs-card__acts .link { min-height: 44px; }

/* ---------- iPad and Mac: Liquid Glass ---------- */
.gs[data-gs="ipad"], .gs[data-gs="mac"] { background: rgba(31, 26, 22, .22); }
.gs[data-gs="ipad"] .gs-card, .gs[data-gs="mac"] .gs-card { border-radius: 22px;
  background: rgba(251, 247, 240, .9); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 30px 70px -24px rgba(31, 26, 22, .5); }
.gs-coach[data-gs="ipad"], .gs-coach[data-gs="mac"] { border-radius: 18px;
  background: rgba(251, 247, 240, .88); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 .5px rgba(255, 255, 255, .6), 0 24px 60px -20px rgba(31, 26, 22, .45); }
.gs-spot[data-gs="ipad"], .gs-spot[data-gs="mac"] { border-radius: 14px; }
.gs[data-gs="ipad"] .btn, .gs[data-gs="mac"] .btn, .gs-coach[data-gs="ipad"] .btn, .gs-coach[data-gs="mac"] .btn { border-radius: 999px; }
.gs-coach[data-gs="ipad"] .btn--rust { min-height: 40px; } /* a finger, not a mouse */

/* ---------- Android tablet: Material 3 cards ---------- */
.gs[data-gs="atab"] .gs-card { border-radius: 28px; background: var(--sand-100); }
.gs-coach[data-gs="atab"] { border-radius: 28px; background: var(--sand-100); box-shadow: 0 8px 24px -6px rgba(31, 26, 22, .35); }
.gs[data-gs="atab"] .btn, .gs-coach[data-gs="atab"] .btn { border-radius: 999px; min-height: 40px; }
.gs-coach[data-gs="atab"] .gs-try, .gs[data-gs="atab"] .gs-install { background: var(--sand-200); border-radius: 16px; }
.gs-spot[data-gs="atab"] { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .gs-spot[data-gs] { transition: none; }
}