/* auth-sheet.js. The sign-up wizard (#profile-modal) and the sign-in dialog (#login-modal) as one sheet over the tour's live water. Transform and opacity only; the shared water and the two reused swell layers are the only loops. Tokens only, no new colours. Loaded before index.html's own <style>, so the shell rules below carry an id to win. */

.modal-overlay.auth-sheet { --auth-pad: var(--space-4); --auth-ground: var(--water-ground, color-mix(in srgb, var(--color-surface) 98%, var(--color-ink))); --auth-deep: var(--color-primary-dark); --auth-white: var(--color-surface-alt); padding: 0; align-items: stretch; justify-content: stretch; background: transparent }

/* Below 600px a full-screen sheet; from 600px a centred card over the scrim (ink at 45%, as .tour-scrim). The page behind does not scroll (html.app-modal-open). */
:is(#profile-modal, #login-modal).auth-sheet > .modal { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; padding: 0; overflow: hidden; border-radius: 0; background: var(--auth-ground); box-shadow: none; color: var(--color-ink); transform: none; transition: none }
@media (min-width: 600px) {
  .modal-overlay.auth-sheet { align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-ink) 45%, transparent) }
  :is(#profile-modal, #login-modal).auth-sheet > .modal { width: min(440px, 92vw); height: auto; max-height: min(760px, 94vh); max-height: min(760px, 94dvh); border-radius: 28px; box-shadow: var(--shadow-overlay) }
}
.auth-sheet .auth-inner { position: relative; isolation: isolate; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0 }

/* The water. Both hosts carry the tour's classes (tour-top, tour-deep) for its stills and its one --water-warm; the deep panel's edge is the tour's first swell shape (the clipPath auth-sheet.js redraws), its top is the active footer's top (--auth-deep-top, set by auth-sheet.js). */
.auth-sheet .auth-top, .auth-sheet .auth-deepwrap { position: absolute; z-index: 0; pointer-events: none }
.auth-sheet .auth-top { inset: 0; display: block; padding: 0; overflow: hidden; overflow: clip; background: var(--auth-ground) }
.auth-sheet .auth-deepwrap { left: 0; right: 0; bottom: 0; top: var(--auth-deep-top, 100%) }
.auth-sheet .auth-deep { position: absolute; inset: 0; background: var(--auth-deep) }
.auth-sheet .is-live::before { opacity: 0; transition: opacity var(--dur-panel) var(--ease-out) }
.auth-rim { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--auth-white); stroke-opacity: .42; stroke-width: 1.6; overflow: visible; pointer-events: none }
.auth-swell { position: absolute; top: 0; left: -18px; width: calc(100% + 36px); height: 60px; fill: var(--color-primary-dark); pointer-events: none }
.auth-swell-a { fill-opacity: .14 }
.auth-swell-b { fill-opacity: .22; left: -10px; width: calc(100% + 20px) }
.auth-sheet.is-moving .auth-swell-a { animation: tour-swell-a 11s ease-in-out -4s infinite alternate }
.auth-sheet.is-moving .auth-swell-b { animation: tour-swell-b 14s ease-in-out -9s infinite alternate }

/* Top to bottom (the DOM order is unchanged, so order does the placing): the head (progress, card, title) on the water, the glass, the error at the glass's foot, then the deep panel: the step's footer and the legal row. */
.auth-sheet :is(.wiz-head, .modal-hero, .auth-glass, .modal-error, .auth-foot, .legal-footer) { position: relative; z-index: 1 }
.auth-sheet :is(.wiz-head, .modal-hero) { order: 0 }
.auth-sheet .auth-glass { order: 1 }
.auth-sheet .modal-error { order: 2 }
.auth-sheet .auth-foot { order: 3 }
.auth-sheet .legal-footer { order: 4 }
/* Each step is a glass div and a footer div; the section and its box drop out so both are items of .auth-inner. */
.auth-sheet .wiz-steps, .auth-sheet .wiz-step.active, .auth-sheet .wiz-step.active.back { display: contents; animation: none }

.auth-sheet .wiz-head { flex: none; margin: 0; padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--auth-pad) var(--space-3); gap: var(--space-3); background: none; border-radius: 0 }
.auth-sheet .wiz-head-meta { margin: 0 }
.auth-sheet .wiz-progress span { background: color-mix(in srgb, var(--color-ink) 12%, transparent) }
.auth-sheet .wiz-progress span.done { background: var(--color-primary) }
.auth-sheet .wiz-step-icon, .auth-sheet .wiz-step-icon[hidden] { display: none }
.auth-sheet .wiz-head h2, .auth-sheet .modal-hero h2 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; text-align: left; color: var(--color-ink) }
.auth-sheet .modal-hero { flex: none; flex-direction: row; align-items: center; gap: var(--space-3); margin: 0; padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--auth-pad) var(--space-4); background: none; border-radius: 0 }

/* The glass: white at 88%, a hairline of ink at 10%, 20px corners; it scrolls inside. */
.auth-sheet .auth-glass { flex: 1 1 auto; min-height: 0; box-sizing: border-box; margin: 0 var(--auth-pad); padding: var(--space-4); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--color-surface-alt) 88%, transparent) }
/* Sign-in has two fields: its glass is as tall as they are, and the deep panel stays at the foot. */
#login-modal.auth-sheet .auth-glass { flex: 0 1 auto }
.auth-sheet .auth-glass > :first-child { margin-top: 0 }
.auth-sheet .auth-glass > :last-child { margin-bottom: 0 }
.auth-sheet .modal-error { flex: none; margin: var(--space-2) var(--auth-pad) 0; background: color-mix(in srgb, var(--color-contains) 9%, var(--auth-white)) }

/* The deep panel: content plus padding, never a fixed height. Its top padding clears the swell (36px at its lowest, 3px of bob). White text, 4.5:1 over the lightest deep pixel (DEEP_LIGHT_MAX). */
.auth-sheet .auth-foot { flex: none; display: flex; flex-direction: column; align-items: stretch; margin-top: auto; padding: 44px var(--auth-pad) 0; color: var(--auth-white) }
.auth-sheet .auth-foot .btn-primary { min-height: 48px; margin: 0; padding: 0 var(--space-5); border-radius: 24px; background: var(--auth-white); color: var(--color-ink); box-shadow: none }
.auth-sheet .wiz-links { margin: var(--space-2) 0 0 }
.auth-sheet .auth-foot .wiz-link, .auth-sheet .auth-foot .btn-quiet { min-height: 44px; padding: 0 var(--space-2); color: var(--auth-white); font-size: .9375rem }
.auth-sheet .auth-foot .btn-quiet { margin: var(--space-1) 0 0; border: 0; background: none }
.auth-sheet .modal-switch { margin: 0; text-align: center; font-size: .9375rem; color: var(--auth-white) }
.auth-sheet .modal-switch .wiz-link { min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.auth-sheet .auth-foot :focus-visible, .auth-sheet .legal-footer :focus-visible { outline-color: var(--auth-white) }
.auth-sheet .legal-footer.panel-legal-footer { flex: none; margin: var(--space-2) var(--auth-pad) 0; padding: 0 0 env(safe-area-inset-bottom, 0px); gap: 0 var(--space-4); border-top: 1px solid color-mix(in srgb, var(--auth-white) 24%, transparent) }
.auth-sheet .legal-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: var(--auth-white) }
.auth-sheet .legal-footer a:focus-visible { color: var(--auth-white) }
@media (hover: hover) and (pointer: fine) {
  .auth-sheet .auth-foot .btn-primary:hover:not(:disabled) { background: var(--auth-white); opacity: .92 }
  .auth-sheet .auth-foot .wiz-link:hover, .auth-sheet .auth-foot .btn-quiet:hover:not(:disabled) { background: none; color: var(--auth-white); opacity: .85 }
  .auth-sheet .legal-footer a:hover { color: var(--auth-white); opacity: .85 }
}
/* No script, no water: the footer still reads on a solid deep fill. */
.auth-sheet:not(.is-mounted) :is(.auth-foot, .legal-footer) { background: var(--auth-deep) }

/* The profile card (wizard only, aria-hidden). */
.auth-card { position: relative; box-sizing: border-box; width: 100%; border-radius: 20px; background: var(--auth-white); box-shadow: var(--shadow-raised) }
.auth-card.is-done { transform: translateY(-4px) }
.auth-band { position: relative; height: 56px; overflow: hidden; border-radius: 20px 20px 0 0; background: url(/features/water-panel-cool.webp) center / cover }
.auth-band .auth-swell { height: 100% }
.auth-avatar { position: absolute; z-index: 1; left: var(--space-4); top: 30px; width: 52px; height: 52px; border-radius: 50%; background: var(--auth-white); box-shadow: 0 0 0 3px var(--auth-white) }
.auth-face { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50% }
.auth-face svg { display: block; width: 100%; height: 100% }
.auth-ring { position: absolute; inset: 0; box-sizing: border-box; border: 2px solid var(--color-primary); border-radius: 50%; opacity: 0; pointer-events: none }
.auth-badge { position: absolute; right: -6px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--auth-white); color: var(--color-primary-dark); box-shadow: var(--shadow-rest); opacity: 0 }
.auth-card.is-done .auth-badge { opacity: 1 }
.auth-icon { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.auth-rows { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-3) 84px }
.auth-row { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0 }
.auth-row-label { font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--color-ink-muted) }
.auth-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0 }
.auth-skel { display: none; width: 56%; margin: var(--space-1) 0; border-top: 1px solid var(--color-hairline) }
.auth-row.is-empty .auth-skel { display: block }
/* A chip.selected, small. */
.auth-tag, .auth-more { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border: 1px solid var(--chip-accent, var(--color-primary)); border-radius: var(--r-sm); background: color-mix(in srgb, var(--chip-accent, var(--color-primary)) 14%, var(--auth-white)); color: var(--color-ink); font-size: .75rem; font-weight: 500; line-height: 1.3 }
.auth-tag[hidden], .auth-more[hidden] { display: none }
.auth-tag.is-custom { border-style: dashed }
.auth-tag.is-unverified { border-style: dashed; background: var(--auth-white) }
.auth-tag svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--chip-accent, currentColor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.auth-more { border-color: var(--color-hairline); background: var(--auth-white); font-variant-numeric: tabular-nums }
.auth-row-account { flex-direction: row; align-items: center; gap: var(--space-2) }
.auth-check { flex: none; width: 18px; height: 18px; color: var(--color-primary-dark) }
.auth-email { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--color-ink) }
.auth-row-account.is-empty :is(.auth-check, .auth-email) { display: none }

/* A short screen (under 700px high): the card is compact, a 36px avatar and every tag in one wrapped run, then the email; and the head, the glass and the deep panel scroll as one so every control stays reachable. */
@media (max-height: 699px) {
  :is(#profile-modal, #login-modal).auth-sheet > .modal { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain }
  .auth-sheet .auth-inner { flex: 1 0 auto }
  .auth-sheet .auth-glass { flex: 1 0 auto; overflow: visible }
  #login-modal.auth-sheet .auth-glass { flex: 0 0 auto }
  .auth-band { display: none }
  .auth-avatar { top: var(--space-3); left: var(--space-3); width: 36px; height: 36px }
  .auth-rows { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-height: 36px; padding: var(--space-3) var(--space-3) var(--space-3) 60px }
  .auth-row, .auth-tags { display: contents }
  .auth-row-label, .auth-row:not(.auth-row-account) .auth-skel { display: none }
  .auth-row-account { display: flex; flex: 1 0 100% }
}

/* Sign-in (T64). The logo tile and the Sign in button at every width; the phone layout below fills the whole height: the hero takes what the card and the deep panel leave, the card straddles the waterline (auth-sheet.js puts the panel's top at the card's centre line minus the edge's mean level, 27px), and the panel's content follows at a 16px rhythm. From 600px the card is as before. */
#login-modal.auth-sheet .auth-logo { position: relative; display: block; flex: none }
#login-modal.auth-sheet .auth-logo .logo { display: block; background: var(--auth-white) }
#login-modal.auth-sheet .auth-logo .auth-ring { display: none; border-color: var(--color-primary); border-radius: 20px }
#login-modal.auth-sheet .auth-foot .btn-primary { transition: opacity 140ms var(--ease-out), background-color 140ms var(--ease-out) }
#login-modal.auth-sheet .auth-foot .btn-primary:disabled { opacity: .62; background: var(--auth-white); color: var(--color-primary-dark) }
@media (max-width: 599px) {
  #login-modal.auth-sheet .modal-hero { flex: 1 1 auto; min-height: 150px; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-4); padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--auth-pad) var(--space-4) }
  #login-modal.auth-sheet .auth-logo { width: 72px; height: 72px }
  #login-modal.auth-sheet .auth-logo .logo { width: 100%; height: 100%; border-radius: 20px; box-shadow: var(--shadow-raised); object-fit: cover }
  #login-modal.auth-sheet .auth-logo .auth-ring { display: block }
  #login-modal.auth-sheet .modal-hero h2 { font-size: 26px; text-align: center }
  #login-modal.auth-sheet .auth-glass { flex: none; border-radius: 18px; background: color-mix(in srgb, var(--color-surface-alt) 92%, transparent) }
  #login-modal.auth-sheet .modal-error { margin: var(--space-3) var(--auth-pad) 0 }
  #login-modal.auth-sheet .auth-foot { margin-top: 0; align-items: stretch; gap: var(--space-4); padding: 20px var(--auth-pad) 0 }
  #login-modal.auth-sheet .auth-foot .btn-primary { min-height: 52px; border-radius: 26px }
  #login-modal.auth-sheet .auth-foot .btn-quiet { margin: 0; justify-content: center; color: color-mix(in srgb, var(--auth-white) 90%, transparent) }
  #login-modal.auth-sheet .modal-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--space-1) }
  #login-modal.auth-sheet .legal-footer.panel-legal-footer { margin: 0 var(--auth-pad); padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + var(--space-4)); justify-content: center; border-top-color: color-mix(in srgb, var(--auth-white) 22%, transparent) }
  #login-modal.auth-sheet .legal-footer { margin-top: var(--space-4) }
  #login-modal.auth-sheet .legal-footer a { color: color-mix(in srgb, var(--auth-white) 88%, transparent) }
  /* Short screens keep the rhythm tighter so less scrolls. */
  @media (max-height: 699px) {
    #login-modal.auth-sheet .auth-foot { gap: var(--space-2) }
    #login-modal.auth-sheet .legal-footer { margin-top: var(--space-2) }
  }
  @media (min-height: 800px) { #login-modal.auth-sheet .auth-logo { width: 96px; height: 96px } }
  /* The on-screen keyboard is up (auth-sheet.js sets .is-kb and the visible viewport's height and top): the sheet fits what shows, the hero collapses, and it scrolls if it still does not fit. */
  #login-modal.auth-sheet.is-kb { top: var(--auth-vtop, 0px); bottom: auto; height: var(--auth-vh, 100dvh) }
  #login-modal.auth-sheet.is-kb > .modal { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain }
  #login-modal.auth-sheet.is-kb .auth-inner { flex: 1 0 auto }
  #login-modal.auth-sheet.is-kb .modal-hero { flex: none; min-height: 0; gap: var(--space-1); padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--auth-pad) var(--space-3) }
  #login-modal.auth-sheet.is-kb .auth-logo { width: 44px; height: 44px }
  #login-modal.auth-sheet.is-kb .auth-logo .logo { border-radius: 12px }
  #login-modal.auth-sheet.is-kb .modal-hero h2 { font-size: 20px }
  #login-modal.auth-sheet.is-kb .auth-foot { gap: var(--space-2); padding-top: var(--space-3) }
  #login-modal.auth-sheet.is-kb .legal-footer { margin-top: var(--space-2) }
}

@media (prefers-reduced-motion: reduce) {
  .auth-sheet *, .auth-sheet *::before { transition: none !important; animation: none !important }
}