/* chirp-fm.com — browser full-viewport (reuses apk fullbleed layout tokens) */ /* * Web/TWA uses apk-fullbleed layout with . Tokens mirror * html.chirp-apk-native so safe-area and masthead heights stay correct on phones. */ html.chirp-web, html.chirp-web[data-app-surface="web"] { height: 100%; --apk-safe-top: env(safe-area-inset-top, 0px); --apk-safe-right: env(safe-area-inset-right, 0px); --apk-safe-bottom: env(safe-area-inset-bottom, 0px); --apk-safe-left: env(safe-area-inset-left, 0px); --apk-masthead-h: clamp(6.8rem, 14dvh, 7.85rem); --apk-face-pad-y: clamp(0.28rem, 0.9dvh, 0.45rem); --apk-face-pad-x: clamp(0.5rem, 2vw, 0.6rem); --apk-face-gap: clamp(0.35rem, 1.4dvh, 0.65rem); --apk-hero-min-h: clamp(3.6rem, 9dvh, 4.75rem); --apk-now-chip-min: clamp(52px, 7.5dvh, 62px); --apk-play-btn: clamp(44px, 6.5dvh, 50px); --apk-dial-max-h: clamp(48px, 6.4dvh, 56px); --apk-nav-clearance: clamp(3.05rem, 7dvh, 3.45rem); --apk-subpage-header-h: 3.15rem; --apk-header-pad-top: calc(var(--apk-safe-top) + 0.55rem); --apk-screen-header-offset: calc(var(--apk-safe-top) + var(--apk-subpage-header-h)); } html.chirp-web body.chirp-web-body { min-height: 100%; margin: 0; } /* Web: single-column radio shell (secondary column only when library is docked open) */ html.chirp-web.layout-wide .chirp-apk-body .radio-layout, html.chirp-web.layout-unfolded .chirp-apk-body .radio-layout, html.chirp-web.layout-desktop .chirp-apk-body .radio-layout { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; flex: 1 1 auto; min-height: 0; width: 100%; } html.chirp-web .chirp-apk-body .radio-layout__primary { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; } html.chirp-web .chirp-apk-body .radio-layout__secondary { flex: 0 0 auto; width: 100%; } html.chirp-web .chirp-apk-body .radio-layout__secondary:empty, html.chirp-web .chirp-apk-body .radio-layout__secondary .station-library-dropdown[hidden] { display: none; } /* --- Phone / TWA: chin (current block + dial) pinned above bottom nav; hero/now playing spread --- */ html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-unit__face { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-face-main { flex: 0 0 auto; justify-content: flex-start; gap: var(--apk-face-gap); } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-stack-mid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; gap: clamp(0.85rem, 3dvh, 1.4rem); padding: clamp(0.4rem, 1.5dvh, 0.75rem) clamp(0.45rem, 2.5vw, 0.65rem); } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-stack-mid .now-playing, html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-stack-mid .radio-controls-deck { flex: 0 0 auto; margin: 0; } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-unit__chin { flex: 0 0 auto; margin-top: 0; width: 100%; } /* Tighter top: no double safe-area band above the menu bar */ html.chirp-web .chirp-apk-body .phone--apk-fullbleed .screen--radio { padding-top: 0; } html.chirp-web .chirp-apk-body .phone--apk-fullbleed::before { height: var(--apk-safe-top); } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-topbar { padding-top: max(var(--apk-safe-top), 6px); min-height: calc(2.75rem + max(var(--apk-safe-top), 6px)); } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-face-main { padding-top: clamp(0.6rem, 2.4dvh, 1rem); } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .now-playing { min-height: max(var(--apk-now-chip-min), 88px); max-width: min(100%, 340px); } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .schedule-toggle-bar { min-height: 2.85rem; } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .schedule-toggle { min-height: 2.65rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .queue-list { max-height: 11.5rem; } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .radio-unit__face.is-schedule-expanded .queue-list, html.chirp-web .chirp-apk-body .phone--apk-fullbleed:has(.schedule-section.is-open) .queue-list, html.chirp-web .chirp-apk-body .phone--apk-fullbleed:has(.schedule-section.is-closing) .queue-list { flex: 1 1 auto; min-height: 0; max-height: none; } html.chirp-web .chirp-apk-body .phone--apk-fullbleed .station-hero .hero-program, html.chirp-web .chirp-apk-body .phone--apk-fullbleed .station-hero__program { margin-top: 0.08rem; } /* --- Desktop / wide browser: fill viewport, use horizontal space --- */ html.chirp-web.layout-wide body.chirp-web-body, html.chirp-web.layout-unfolded body.chirp-web-body, html.chirp-web.layout-desktop body.chirp-web-body { display: flex; flex-direction: column; align-items: stretch; min-height: 100dvh; box-sizing: border-box; padding: 0; background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.05), transparent 38rem), #0a0c0f; } html.chirp-web.layout-wide #phone.phone--apk-fullbleed, html.chirp-web.layout-unfolded #phone.phone--apk-fullbleed, html.chirp-web.layout-desktop #phone.phone--apk-fullbleed { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; flex: 1 1 auto; border-radius: 0; box-shadow: none; border: none; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-unit__face { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: clamp(0.5rem, 1.2vw, 1rem) clamp(1rem, 2.5vw, 2rem); align-content: center; align-items: center; justify-items: center; max-width: min(1040px, 100%); margin-left: auto; margin-right: auto; padding: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem); overflow: hidden; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-unit__face.is-schedule-expanded { display: flex; flex-direction: column; padding: 0; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-face-main { grid-column: 1; grid-row: 1; flex: none; min-height: 0; height: auto; justify-content: center; align-items: center; max-width: min(480px, 100%); justify-self: end; align-self: center; padding-top: 0; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-stack-mid { grid-column: 2; grid-row: 1; flex: none; min-height: 0; height: auto; justify-content: center; align-self: center; gap: clamp(0.65rem, 1.2vw, 1rem); max-width: min(400px, 100%); justify-self: start; padding: 0; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-stack-mid .now-playing, html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-stack-mid .radio-controls-deck { margin: 0; width: 100%; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-stack-mid .radio-controls-deck { margin: 0; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-unit__chin { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(0.35rem, 0.8vw, 0.65rem); max-width: min(920px, 100%); justify-self: center; width: 100%; flex: 0 0 auto; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-unit__face:not(.is-schedule-expanded) .radio-unit__dial { border-radius: 0 0 12px 12px; } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .station-row { max-width: min(100%, 560px); } html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .now-playing, html.chirp-web.layout-desktop .chirp-apk-body .phone--apk-fullbleed .radio-controls-deck { max-width: min(100%, 400px); } /* Wide tablet (not full desktop): still single column but use full phone width */ html.chirp-web.layout-wide:not(.layout-desktop) #phone.phone--apk-fullbleed, html.chirp-web.layout-unfolded:not(.layout-desktop) #phone.phone--apk-fullbleed { width: 100%; max-width: min(100vw, 900px); height: 100dvh; max-height: 100dvh; margin: 0 auto; } /* Docked station library on wide web uses a side column inside secondary */ html.chirp-web.layout-desktop .chirp-apk-body .radio-layout:has(.station-library-dropdown.is-open.is-docked) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important; gap: clamp(0.75rem, 1.5vw, 1.25rem); } html.chirp-web.layout-desktop .chirp-apk-body .radio-layout:has(.station-library-dropdown.is-open.is-docked) .radio-layout__secondary { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* Auth gate: hide full app shell until /auth/me confirms session (TWA reopen). */ html.chirp-auth-pending #phone { visibility: hidden; pointer-events: none; } .chirp-auth-check { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: #0a0b0d; color: #f4f5f7; font-family: "DM Sans", system-ui, sans-serif; } .chirp-auth-check__card { text-align: center; padding: 2rem 1.5rem; } .chirp-auth-check__msg { margin: 1.25rem 0 0; font-size: 0.95rem; color: #9aa3b2; }