/* Shared presentation contract, October 2026. Keep palette, type and responsive shell here, after the legacy screen styles. Semantic action colors and data/category colors remain separate. */ /* Important declarations in this named layer take precedence over the legacy unlayered important rules. Keep shared geometry here instead of increasing selector specificity for each screen. */ @layer ui-contract { #soundRoutesApp { --ui-small-size: 40px; --ui-small-icon: 20px; } #soundRoutesApp :is( .app-header-action, .recording-action-btn, .popup-mini-action-btn, .popup-mini-audio-btn, .preview-history-btn, .photo-history-btn, .photo-action-btn, .coordinate-paste-btn, .coordinate-recenter-btn, .map-floating-btn, .map-clear-search-btn, .compact-add-btn, .profile-title-edit-btn, .profile-title-delete-btn, .profile-group-edit-btn, .profile-group-delete-btn, .profile-sound-details-toggle-btn, .library-page-btn, .studio-icon-only, .choice-icon-button, .settings-device-label-icon, .audio-visualization-toggle, .library-details-toggle-btn, .btn-delete-all, button.btn-icon:has(> svg):not(:has(> span:not(.sr-only))), .leaflet-control-zoom a, .header-more-menu > summary ) { box-sizing: border-box !important; width: var(--ui-small-size) !important; height: var(--ui-small-size) !important; min-width: var(--ui-small-size) !important; min-height: var(--ui-small-size) !important; max-width: var(--ui-small-size) !important; max-height: var(--ui-small-size) !important; flex: 0 0 var(--ui-small-size) !important; padding: 0 !important; border-radius: 12px !important; align-items: center !important; justify-content: center !important; } #soundRoutesApp :is( .app-header-action, .recording-action-btn, .popup-mini-action-btn, .popup-mini-audio-btn, .preview-history-btn, .photo-history-btn, .photo-action-btn, .coordinate-paste-btn, .coordinate-recenter-btn, .map-floating-btn, .map-clear-search-btn, .compact-add-btn, .profile-title-edit-btn, .profile-title-delete-btn, .profile-group-edit-btn, .profile-group-delete-btn, .profile-sound-details-toggle-btn, .library-page-btn, .studio-icon-only, .choice-icon-button, .settings-device-label-icon, .audio-visualization-toggle, .library-details-toggle-btn, .btn-delete-all, button.btn-icon:has(> svg):not(:has(> span:not(.sr-only))), .leaflet-control-zoom a, .header-more-menu > summary ) svg { display: block !important; width: var(--ui-small-icon) !important; height: var(--ui-small-icon) !important; min-width: var(--ui-small-icon) !important; min-height: var(--ui-small-icon) !important; max-width: var(--ui-small-icon) !important; max-height: var(--ui-small-icon) !important; flex: 0 0 var(--ui-small-icon) !important; margin: 0 !important; } #soundRoutesApp .leaflet-control-zoom a { display: flex !important; line-height: 1 !important; font-size: 22px !important; } /* Rating stars form one compact control, independent of the 44px action tools. */ #soundRoutesApp { --rating-cell-width: 20px; --rating-cell-height: 24px; --rating-glyph-size: 16px; --rating-gold: #ac7b35; } #soundRoutesApp :is(.entry-rating, .profile-rating-pill) { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; width: fit-content !important; min-width: 0 !important; max-width: 100% !important; gap: 2px 6px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; vertical-align: middle !important; } #soundRoutesApp .entry-rating-stars { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex: 0 0 auto !important; width: max-content !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; vertical-align: middle !important; } #soundRoutesApp .entry-rating-star { box-sizing: border-box !important; appearance: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; vertical-align: middle !important; width: var(--rating-cell-width) !important; min-width: var(--rating-cell-width) !important; max-width: var(--rating-cell-width) !important; height: var(--rating-cell-height) !important; min-height: var(--rating-cell-height) !important; max-height: var(--rating-cell-height) !important; flex: 0 0 var(--rating-cell-width) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; color: var(--rating-gold) !important; -webkit-text-fill-color: currentColor !important; line-height: 0 !important; transform: none !important; filter: none !important; touch-action: manipulation !important; } #soundRoutesApp .entry-rating-star .rating-star-icon { display: block !important; width: var(--rating-glyph-size) !important; height: var(--rating-glyph-size) !important; min-width: var(--rating-glyph-size) !important; min-height: var(--rating-glyph-size) !important; max-width: var(--rating-glyph-size) !important; max-height: var(--rating-glyph-size) !important; flex: 0 0 var(--rating-glyph-size) !important; margin: 0 !important; } #soundRoutesApp .rating-star-outline { fill: #faf9f6 !important; stroke: #8490a4 !important; stroke-width: 1.5 !important; } #soundRoutesApp .rating-star-fill { fill: var(--rating-gold) !important; stroke: var(--rating-gold) !important; stroke-width: 1.5 !important; } #soundRoutesApp .entry-rating-star.filled .rating-star-outline { stroke: var(--rating-gold) !important; } #soundRoutesApp button.entry-rating-star:not(:disabled):hover { background: #fbf4e7 !important; } #soundRoutesApp button.entry-rating-star:not(:disabled):hover .rating-star-outline { fill: #fff2d8 !important; stroke: var(--rating-gold) !important; } #soundRoutesApp button.entry-rating-star:focus-visible { outline: 2px solid var(--ui-focus-color) !important; outline-offset: 1px !important; } #soundRoutesApp :is(.entry-rating-summary, .profile-rating-average, .profile-rating-total, .profile-rating-label) { display: inline-block !important; align-self: center !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; color: var(--text-soft) !important; font: 400 .75rem/1.4 var(--font) !important; } #soundRoutesApp .profile-title-rating { margin: 4px 0 0 !important; line-height: 1 !important; } @media (pointer: coarse) { #soundRoutesApp { --rating-cell-width: 24px; --rating-cell-height: 28px; } } #soundRoutesApp #soundRoutesRoot .recording-title-line h4 { font: 500 .875rem/1.4 var(--font-heading) !important; color: #51627b !important; } #soundRoutesApp .recording-title-stack { gap: 0 !important; } #soundRoutesApp .recording-title-meta { margin-top: 0 !important; gap: 6px !important; } #soundRoutesApp .recording-title-heading { gap: 6px !important; } #soundRoutesApp .recording-item-top { margin-bottom: 6px !important; } #soundRoutesApp .profile-sound-card:hover { transform: none !important; } #soundRoutesApp .audio-visualization-empty { font: 400 .75rem/1.5 var(--font) !important; width: 100% !important; text-align: center !important; } #soundRoutesApp .audio-visualization:not(.is-spectrogram) .recording-mini-wave:has(.audio-visualization-empty)::before { display: none !important; } #soundRoutesApp :is(.auth-image-field.ui-image-editor, #photoField, .intro-soundwalk-image) { --editor-preview-size: 200px !important; --sr-image-editor-preview-size: 200px !important; } #soundRoutesApp .ui-image-editor__preview-actions { display: grid !important; grid-template-columns: repeat(4, 44px) !important; grid-template-areas: "preview preview preview preview" "upload undo redo clear" !important; gap: 8px !important; width: 200px !important; min-width: 200px !important; max-width: 200px !important; justify-content: center !important; justify-items: center !important; } #soundRoutesApp .ui-image-editor__preview-actions .photo-history-controls { display: contents !important; } #soundRoutesApp .ui-image-editor__preview-actions :is(.photo-preview, .auth-avatar-preview) { grid-area: preview !important; width: 200px !important; height: 200px !important; min-width: 200px !important; max-width: 200px !important; min-height: 200px !important; max-height: 200px !important; } /* Validation decorates the actual input, not its surrounding card or label. */ #soundRoutesApp .field-missing:not(input, select, textarea), #soundRoutesApp .recording-toolbox:has(#recordSoundField.field-missing), #soundRoutesApp #recordSoundField.field-missing + .recording-toolbox { border-color: var(--line) !important; background: transparent !important; box-shadow: none !important; outline: none !important; } #soundRoutesApp .field-missing :is(.label-row, .label-text) { color: var(--ui-label-color) !important; } #soundRoutesApp .field-missing :is(.label-icon, .label-icon svg) { color: var(--ui-label-icon-color) !important; stroke: currentColor !important; } #soundRoutesApp :is(input, select, textarea):is(.field-missing, [aria-invalid="true"], :user-invalid):not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), #soundRoutesApp .field-missing :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) { border: 1px solid #b45b62 !important; background: #fff7f8 !important; box-shadow: 0 0 0 2px rgb(180 91 98 / 12%) !important; } @media (max-width: 620px) { #soundRoutesApp :is(.auth-image-field.ui-image-editor, #recordingPanel #photoField, #introScreen .intro-soundwalk-image) { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "label" "preview" "controls" !important; justify-items: stretch !important; } #soundRoutesApp .ui-image-editor__preview-actions { justify-self: center !important; } } @media (max-width: 480px) { #soundRoutesApp #savedPanel .card-content { padding: 12px !important; } #soundRoutesApp #savedPanel .library-list-box { padding: 0 !important; border: 0 !important; background: transparent !important; } #soundRoutesApp .recording-title-line { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) !important; gap: 6px 8px !important; align-items: center !important; } #soundRoutesApp .recording-title-stack { display: grid !important; grid-column: 2 !important; grid-row: 1 !important; gap: 0 !important; } #soundRoutesApp .recording-title-heading { grid-area: auto !important; } #soundRoutesApp .recording-title-meta { grid-area: auto !important; width: auto !important; } #soundRoutesApp .recording-title-line > .recording-action-btn.details { grid-column: 1 !important; grid-row: 1 !important; } } @media (max-width: 600px) { #soundRoutesApp #appHeader { background-position: right center !important; } /* The dropdown crosses the scenic card's lower edge. Lift its shell too: a child z-index cannot escape an ancestor's clipping or stacking context. */ #soundRoutesApp #soundRoutesRoot > [data-component="app-header"]:has(#headerMoreMenu[open]) { position: relative !important; z-index: 80 !important; overflow: visible !important; } #soundRoutesApp #appHeader:has(#headerMoreMenu[open]) { overflow: visible !important; } #soundRoutesApp #appHeader::after { border-radius: inherit !important; pointer-events: none; } #soundRoutesApp #appHeader .header-more-menu { width: 44px !important; height: 44px !important; flex-basis: 44px !important; } #soundRoutesApp #appHeader .header-more-menu[open] > .header-more-actions { max-height: min(320px, 60vh); max-height: min(320px, 60dvh); overflow-y: auto; overscroll-behavior: contain; } #soundRoutesApp #appHeader .header-more-actions .app-header-action { width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0 12px !important; justify-content: flex-start !important; } } /* One navigation component for the start page, profile and exploration. */ #soundRoutesApp .section-nav { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch !important; min-height: 0 !important; gap: 8px !important; margin-block: 12px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; } /* Profile navigation is a separate row between the banner and content card. */ #soundRoutesApp #profileScreen { box-sizing: border-box !important; width: var(--app-shell-measure) !important; max-width: var(--app-shell-measure) !important; margin: 0 auto !important; padding: 16px 0 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } #soundRoutesApp #profileScreen > #profileHubActions.section-nav { width: 100% !important; margin: 0 0 16px !important; } #soundRoutesApp #profileScreen > .profile-card { margin: 0 !important; } #soundRoutesApp .section-nav--three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #soundRoutesApp .section-nav--two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #soundRoutesApp #communicationNav { width: var(--app-shell-measure, min(calc(100% - 40px), 964px)) !important; margin: 16px auto 0 !important; } #soundRoutesApp #communicationMessagesBtn { --section-tone: var(--section-map); } #soundRoutesApp #communicationNotificationsBtn { --section-tone: var(--section-groups); } #soundRoutesApp #communicationNav .communication-count { position: static !important; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; min-height: 22px; padding: 0 5px; border-radius: 7px; background: white; color: inherit; font: 500 .75rem/1.3 var(--font) !important; } #soundRoutesApp #communicationNav .communication-count[hidden] { display: none !important; } #soundRoutesApp .communication-retry { min-height: 44px !important; padding: 10px 16px !important; margin: 0 0 12px; border: 1px solid var(--line) !important; border-radius: 12px !important; background: white !important; color: var(--section-map) !important; font: 500 .8125rem/1.5 var(--font-heading) !important; } #soundRoutesApp :is(#messagesStatus, #notificationsLoadStatus):empty { display: none !important; } #soundRoutesApp :is(#messagesStatus, #notificationsLoadStatus)[data-tone=error] { color: var(--section-recording) !important; } @media (max-width: 480px) { #soundRoutesApp #communicationNav > button { flex-wrap: wrap !important; gap: 6px !important; min-height: 52px !important; padding: 8px !important; } #soundRoutesApp #communicationNav > button > span { font-size: .75rem !important; } } #soundRoutesApp .section-nav > button { --section-tone: var(--section-map); display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; gap: 8px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 60px !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid color-mix(in srgb, var(--section-tone) 16%, white) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--section-tone) 8%, white) !important; color: var(--section-tone) !important; box-shadow: none !important; font: 500 .8125rem/1.5 var(--font-heading) !important; text-align: center !important; white-space: normal !important; overflow-wrap: normal !important; text-wrap: balance; text-transform: none !important; letter-spacing: 0 !important; transform: none !important; touch-action: manipulation; transition: background .15s ease, border-color .15s ease; } #soundRoutesApp .section-nav > button :is(span, .tab-btn-content) { font: inherit !important; color: inherit !important; } #soundRoutesApp .section-nav > button svg { display: block !important; box-sizing: content-box !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; flex: 0 0 20px !important; margin: 0 !important; color: var(--section-tone) !important; } #soundRoutesApp .section-nav > button svg * { color: inherit !important; stroke: currentColor !important; } #soundRoutesApp .section-nav > button:is(.active, [aria-current="page"]) { background: color-mix(in srgb, var(--section-tone) 16%, white) !important; color: var(--section-tone) !important; border-color: color-mix(in srgb, var(--section-tone) 48%, white) !important; box-shadow: inset 0 -3px 0 var(--section-tone) !important; } #soundRoutesApp .section-nav > button::after { content: none !important; } #soundRoutesApp .section-nav > button:not(.active):not([aria-current="page"]):hover { background: color-mix(in srgb, var(--section-tone) 12%, white) !important; border-color: color-mix(in srgb, var(--section-tone) 28%, white) !important; } #soundRoutesApp .section-nav > button:active { background: color-mix(in srgb, var(--section-tone) 18%, white) !important; } #soundRoutesApp :is(#introExploreBtn, #profileSoundwalksOpenBtn, #settingsProfileSoundwalksOpenBtn, #explorationNav [data-panel="mapPanel"]) { --section-tone: var(--section-map); } #soundRoutesApp :is(#introAroundBtn, #mainAroundBtn) { --section-tone: var(--section-around); } #soundRoutesApp #explorationNav [data-panel="recordingPanel"] { --section-tone: var(--section-recording); } #soundRoutesApp :is(#profileEditOpenBtn, #explorationNav [data-panel="savedPanel"]) { --section-tone: var(--section-sounds); } #soundRoutesApp :is(#profileCreateGroupOpenBtn, #settingsProfileGroupsOpenBtn) { --section-tone: var(--section-groups); } #soundRoutesApp :is(#introCreateBtn, #profileCreationsOpenBtn) { --section-tone: var(--section-creation); } #soundRoutesApp .section-nav > button:is(.hidden, [hidden]), #soundRoutesApp .section-nav:is(.hidden, [hidden]) { display: none !important; } @media (max-width: 860px) { #soundRoutesApp #profileHubActions.section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 700px) { #soundRoutesApp #introActivityPicker.section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; margin-block: 4px !important; } #soundRoutesApp #introActivityPicker.section-nav > button { min-height: 48px !important; padding: 6px 8px !important; gap: 6px !important; } #soundRoutesApp #soundRoutesRoot #introScreen .intro-mode-heading { gap: 8px !important; margin-bottom: 8px !important; } #soundRoutesApp #soundRoutesRoot #introScreen .intro-mode-heading > p { margin: 6px 0 4px !important; } } @media (max-width: 480px) { #soundRoutesApp #profileHubActions.section-nav { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } #soundRoutesApp :is(#profileHubActions, #settingsProfileHubActions).section-nav > button > span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; } #soundRoutesApp :is(#explorationNav, #profileHubActions, #settingsProfileHubActions).section-nav > button { min-height: 48px !important; padding: 6px 4px !important; } } /* Choice controls are light rows, with one selection mark and no icon box. */ #soundRoutesApp .choice-card { --choice-tone: var(--toggle-accent, var(--page-tone, var(--section-map))); } #soundRoutesApp .choice-card.language-choice-card { --choice-tone: var(--page-tone); } #soundRoutesApp .choice-card.language-choice-card .choice-card-inner { grid-template-columns: 20px minmax(0, 1fr) 18px !important; padding: 6px 8px !important; } #soundRoutesApp .choice-card .language-flag { display: grid !important; place-items: center !important; grid-column: 1 !important; grid-row: 1 !important; width: 20px !important; height: 24px !important; min-width: 20px !important; min-height: 24px !important; margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; filter: none !important; transform: none !important; text-shadow: none !important; } #soundRoutesApp .choice-card.visibility-public { --choice-tone: var(--section-sounds); } #soundRoutesApp .choice-card.visibility-private { --choice-tone: var(--section-around); } #soundRoutesApp #soundwalkModeField .visibility-private { --choice-tone: var(--section-map); } #soundRoutesApp .choice-card .choice-card-inner { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 18px !important; grid-template-rows: auto !important; align-items: center !important; gap: 8px !important; min-height: 60px !important; padding: 6px 12px !important; border: 1px solid #c9d3e4 !important; border-radius: 16px !important; background: white !important; box-shadow: none !important; color: var(--text) !important; } #soundRoutesApp .choice-card:has(input:checked) .choice-card-inner { background: color-mix(in srgb, var(--choice-tone) 8%, white) !important; border-color: color-mix(in srgb, var(--choice-tone) 30%, white) !important; } #soundRoutesApp .choice-card:hover .choice-card-inner { border-color: color-mix(in srgb, var(--choice-tone) 30%, white) !important; } #soundRoutesApp .choice-card:has(input:focus-visible) .choice-card-inner { outline: 2px solid var(--ui-focus-color) !important; outline-offset: 3px !important; } #soundRoutesApp .choice-card :is(.choice-icon-button, .choice-icon, .toggle-icon) { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--choice-tone) !important; } #soundRoutesApp .choice-card :is(.choice-icon-button, .choice-icon, .toggle-icon) svg, #soundRoutesApp .choice-card :is(.choice-icon-button, .choice-icon, .toggle-icon) svg * { color: inherit !important; stroke: currentColor !important; } #soundRoutesApp .choice-card .choice-title { display: block !important; min-width: 0 !important; font: 600 .8125rem/1.5 var(--font-heading) !important; color: var(--text) !important; white-space: normal !important; overflow-wrap: anywhere !important; overflow: visible !important; text-overflow: clip !important; } #soundRoutesApp .choice-card .choice-check { display: grid !important; place-items: center !important; box-sizing: border-box !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; padding: 0 !important; margin: 0 !important; border: 1.5px solid #b5becd !important; border-radius: 50% !important; background: white !important; } #soundRoutesApp .choice-card:has(input:checked) .choice-check { border-color: var(--choice-tone) !important; } #soundRoutesApp .choice-card:has(input:checked) .choice-check::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--choice-tone); } #soundRoutesApp .choice-card:has(input[type="checkbox"]) .choice-check { border-radius: 5px !important; } #soundRoutesApp .choice-card:has(input[type="checkbox"]:checked) .choice-check { background: var(--choice-tone) !important; } #soundRoutesApp .choice-card:has(input[type="checkbox"]:checked) .choice-check::after { width: 12px; height: 12px; border-radius: 0; background: white; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } #soundRoutesApp .choice-card:has(input[type="radio"]) .choice-check { border: 0 !important; border-radius: 0 !important; background: transparent !important; visibility: hidden; } #soundRoutesApp .choice-card:has(input[type="radio"]:checked) .choice-check { visibility: visible; } #soundRoutesApp .choice-card:has(input[type="radio"]:checked) .choice-check::after { width: 18px; height: 18px; border-radius: 0; background: var(--choice-tone); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } #soundRoutesApp .choice-card:not(.info-open) .choice-info { display: none !important; } #soundRoutesApp .choice-card.info-open .choice-info { display: block !important; } #soundRoutesApp .choice-grid:not(.settings-language-grid) { align-items: start !important; } #soundRoutesApp .choice-card { align-self: start !important; } #soundRoutesApp .choice-card .choice-card-inner { height: auto !important; max-height: none !important; overflow: hidden !important; } #soundRoutesApp .choice-card .choice-card-inner > div:not(.choice-check):not(.choice-info):not(.choice-main) { display: contents !important; } #soundRoutesApp .choice-card .choice-card-inner > .choice-icon-button { grid-column: 1; grid-row: 1; } #soundRoutesApp .choice-card .choice-main { grid-column: 2; grid-row: 1; min-width: 0 !important; text-align: start !important; } #soundRoutesApp .choice-card .choice-check { grid-column: 3; grid-row: 1; } #soundRoutesApp .choice-card .choice-info { display: block !important; position: static !important; inset: auto !important; z-index: auto !important; grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; box-sizing: border-box !important; margin: 0 !important; padding: 10px 0 6px !important; border: 0 !important; border-top: 1px solid color-mix(in srgb, var(--choice-tone) 15%, white) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font: 400 .8125rem/1.65 var(--font) !important; color: var(--text-soft) !important; white-space: normal !important; overflow-wrap: anywhere !important; cursor: text !important; } #soundRoutesApp .choice-card .choice-info[hidden] { display: none !important; } #soundRoutesApp #soundwalkModeField { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; } @media (max-width: 960px) { #soundRoutesApp #soundRoutesRoot #settingsScreen .settings-language-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { #soundRoutesApp #soundRoutesRoot #settingsScreen .settings-language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #soundRoutesApp #soundRoutesRoot .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } } @media (max-width: 480px) { /* Keep icon, text and selection in one row on phones too. The 40px information button extends into the 4px gutters around its 32px column; its touch area never covers the label or the reserved selection column. */ #soundRoutesApp .choice-card .choice-card-inner { grid-template-columns: 32px minmax(0, 1fr) 16px !important; min-height: 56px !important; padding: 4px !important; gap: 4px !important; border-radius: 12px !important; } #soundRoutesApp .choice-card .choice-card-inner > :is(.choice-icon-button, .choice-icon, .toggle-icon, .language-flag) { grid-column: 1 !important; grid-row: 1 !important; justify-self: center !important; } #soundRoutesApp .choice-card .choice-card-inner > .choice-icon-button { margin-inline: -4px !important; } #soundRoutesApp .choice-card .choice-check { grid-column: 3 !important; grid-row: 1 !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; justify-self: end !important; align-self: center !important; } #soundRoutesApp .choice-card:has(input[type="radio"]:checked) .choice-check::after { width: 16px; height: 16px; } #soundRoutesApp .choice-card .choice-main { grid-column: 2 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; text-align: start !important; } #soundRoutesApp .choice-card .choice-title { font-size: .75rem !important; line-height: 1.5 !important; white-space: normal !important; overflow-wrap: anywhere !important; } #soundRoutesApp .choice-card .choice-info { grid-row: 2 !important; } #soundRoutesApp .choice-card.language-choice-card .choice-card-inner { grid-template-columns: 20px minmax(0, 1fr) 16px !important; padding: 4px !important; } } /* Quiet surfaces and round headings leave color to the actions and media. */ #soundRoutesApp :is(.hero-card, .auth-card, .profile-card) { border: 0 !important; background: transparent !important; box-shadow: none !important; } #soundRoutesApp :is(.hero-content, .profile-main-card, .panel-card, .settings-panel) { border-color: #edf0f6 !important; box-shadow: 0 5px 24px rgb(70 79 116 / 3%) !important; } #soundRoutesApp :is(.section-description, .settings-intro, .around-intro, .studio-help) { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; color: var(--text-soft) !important; font-weight: 400 !important; line-height: 1.7 !important; } #soundRoutesApp :is(.eyebrow, .page-title-pill, .panel-title-pill) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-inline: 0 !important; color: #765799 !important; font-family: var(--font-heading) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; } #soundRoutesApp :is(.page-title-pill, .panel-title-pill) { display: inline-flex !important; align-items: center !important; gap: 9px !important; width: fit-content !important; max-width: 100% !important; padding: 8px 14px !important; border-radius: 999px !important; background: #f2eef9 !important; font-size: .875rem !important; line-height: 1.5 !important; } #soundRoutesApp :is(.page-title-pill, .panel-title-pill) .section-heading-icon { color: inherit !important; } #soundRoutesApp :is(button, summary, input, select, textarea) { font-family: var(--font-heading) !important; font-weight: 500 !important; } #soundRoutesApp :is(h3, h4, .label-row, .label-text, .filter-control > span, .library-page-size, .list-section-label, .settings-section-heading) { font-family: var(--font-heading) !important; font-weight: 500 !important; } #soundRoutesApp :is(.filter-control > span, .label-text, .library-more-filters > summary, .profile-more-filters > summary) { font-size: .8125rem !important; line-height: 1.6 !important; } #soundRoutesApp :is(.recording-meta, .profile-soundwalk-meta) { font: 400 .8125rem/1.8 var(--font) !important; color: var(--text-soft) !important; } #soundRoutesApp :is(.recording-meta, .profile-soundwalk-meta) strong { font: 500 .8125rem/1.8 var(--font-heading) !important; color: #68758c !important; } /* Tool and text actions use the same soft surface as the header tools. */ #soundRoutesApp :is(.btn-icon, .recording-action-btn, .popup-mini-action-btn, .popup-mini-audio-btn, .preview-history-btn, .photo-history-btn, .photo-action-btn, .coordinate-paste-btn, .coordinate-recenter-btn, .map-floating-btn, .compact-add-btn, .profile-title-edit-btn, .profile-title-delete-btn, .profile-group-edit-btn, .profile-group-delete-btn, .profile-sound-details-toggle-btn, .library-page-btn, .studio-icon-only) { --tool-tone: var(--ui-action-primary); background: color-mix(in srgb, var(--tool-tone) 8%, white) !important; color: color-mix(in srgb, var(--tool-tone) 88%, #20283a) !important; border: 1px solid color-mix(in srgb, var(--tool-tone) 18%, white) !important; box-shadow: 0 2px 8px rgb(31 42 67 / 5%) !important; text-shadow: none !important; transform: none !important; } #soundRoutesApp :is(.btn-icon, .recording-action-btn, .popup-mini-action-btn, .popup-mini-audio-btn, .preview-history-btn, .photo-history-btn, .photo-action-btn, .coordinate-paste-btn, .coordinate-recenter-btn, .map-floating-btn, .compact-add-btn, .profile-title-edit-btn, .profile-title-delete-btn, .profile-group-edit-btn, .profile-group-delete-btn, .profile-sound-details-toggle-btn, .library-page-btn, .studio-icon-only) svg, #soundRoutesApp :is(.btn-icon, .recording-action-btn, .popup-mini-action-btn, .popup-mini-audio-btn, .preview-history-btn, .photo-history-btn, .photo-action-btn, .coordinate-paste-btn, .coordinate-recenter-btn, .map-floating-btn, .compact-add-btn, .profile-title-edit-btn, .profile-title-delete-btn, .profile-group-edit-btn, .profile-group-delete-btn, .profile-sound-details-toggle-btn, .library-page-btn, .studio-icon-only) svg * { color: inherit !important; stroke: currentColor !important; } #soundRoutesApp :is(.btn-play, .btn-save, .btn-start, .recording-action-btn.play, .popup-mini-audio-btn.play, .compact-add-btn) { --tool-tone: var(--section-sounds); } #soundRoutesApp :is(.btn-delete, .btn-delete-all, .btn-stop, .btn-record, .recording-action-btn.delete, .recording-action-btn.stop, .popup-mini-audio-btn.stop, .preview-history-btn.delete, .photo-action-btn.delete, .profile-title-delete-btn, .profile-group-delete-btn) { --tool-tone: var(--section-recording); } #soundRoutesApp :is(.btn-edit, .btn-rename, .recording-action-btn.edit, .profile-title-edit-btn, .profile-group-edit-btn) { --tool-tone: var(--section-groups); } #soundRoutesApp :is(.btn-earth, .recording-action-btn.show-map, .map-floating-btn, .coordinate-recenter-btn) { --tool-tone: var(--section-sounds); } #soundRoutesApp :is(.btn-settings, .audio-visualization-toggle, .library-details-toggle-btn) { --tool-tone: var(--section-around); } #soundRoutesApp :is(.btn-export, .btn-report, .recording-action-btn.download) { --tool-tone: var(--section-map); } #soundRoutesApp :is(#mapQuickRecordBtn, #startRecBtn) { --tool-tone: var(--section-recording); background: color-mix(in srgb, var(--section-recording) 8%, white) !important; color: color-mix(in srgb, var(--section-recording) 88%, #20283a) !important; border-color: color-mix(in srgb, var(--section-recording) 18%, white) !important; } #soundRoutesApp :is(#mapQuickRecordBtn, #startRecBtn):not(:disabled):hover { background: color-mix(in srgb, var(--section-recording) 13%, white) !important; } #soundRoutesApp #startRecBtn.recording-active { background: color-mix(in srgb, var(--section-recording) 16%, white) !important; border-color: color-mix(in srgb, var(--section-recording) 45%, white) !important; box-shadow: inset 0 -3px 0 var(--section-recording) !important; } #soundRoutesApp #recordingPanel .recording-toolbox { scroll-margin-top: 16px; } #soundRoutesApp #recordingPanel .recording-controls { grid-template-columns: repeat(2, minmax(0, 220px)) !important; align-items: stretch !important; } #soundRoutesApp #recordingPanel .recording-controls :is(#startRecBtn, #uploadAudioBtn) { width: 100% !important; max-width: 220px !important; height: auto !important; min-height: 46px !important; max-height: none !important; padding: 8px 12px !important; } #soundRoutesApp #recordingPanel .recording-controls :is(#startRecBtn, #uploadAudioBtn) > span { max-width: none !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } @media (max-width: 480px) { #soundRoutesApp #recordingPanel .recording-controls { grid-template-columns: minmax(0, 1fr) !important; } #soundRoutesApp #recordingPanel .recording-controls :is(#startRecBtn, #uploadAudioBtn) { max-width: none !important; } } #soundRoutesApp :is(.btn-icon, .recording-action-btn, .preview-history-btn, .photo-history-btn, .studio-icon-only):is([aria-pressed="true"], [aria-expanded="true"]) { background: color-mix(in srgb, var(--tool-tone) 18%, white) !important; border-color: color-mix(in srgb, var(--tool-tone) 48%, white) !important; } #soundRoutesApp .audio-visualization-row { grid-template-columns: minmax(0, 1fr) 44px !important; gap: 12px !important; } #soundRoutesApp .audio-visualization-caption { margin: 6px 56px 0 0 !important; } #soundRoutesApp .recording-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; min-width: 0 !important; } #soundRoutesApp .recording-title-line { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 10px !important; } #soundRoutesApp .organization-panel-note { font: 400 .8125rem/1.7 var(--font) !important; color: var(--text-soft) !important; } #soundRoutesApp :is(h1, .profile-title-name, .organization-empty, .profile-title-text) { font-family: var(--font-heading) !important; font-weight: 500 !important; } #soundRoutesApp .audio-visualization-toggle { outline: none !important; } #soundRoutesApp .audio-visualization-toggle:focus-visible { outline: 2px solid var(--ui-focus-color) !important; outline-offset: 3px !important; } #soundRoutesApp #appHeader .app-header-brand-line { display: flex !important; align-items: center !important; align-self: center !important; grid-column: 2 !important; grid-row: 1 !important; flex-wrap: nowrap !important; gap: 10px !important; min-width: 0 !important; } #soundRoutesApp #appHeader .app-header-brand-line > .app-header-title-main { display: block !important; flex: 0 1 auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } #soundRoutesApp #appHeader .app-header-version { display: inline-flex !important; position: static !important; margin: 0 !important; align-items: center !important; justify-content: center !important; align-self: center !important; flex: 0 0 auto !important; transform: none !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; min-height: 26px !important; height: 26px !important; padding: 0 8px !important; border: 1px solid rgb(255 255 255 / 38%) !important; border-radius: 999px !important; background: rgb(255 255 255 / 14%) !important; color: white !important; font: 500 10px/1 var(--font) !important; letter-spacing: 0 !important; } @media (max-width: 480px) { #soundRoutesApp #appHeader .app-header-brand-line { gap: 8px !important; } #soundRoutesApp #appHeader .app-header-brand-line > .app-header-title-main { font-size: clamp(1.1rem, 5.5vw, 1.5rem) !important; } } #soundRoutesApp :is(.label-row, .label-text, .photo-adjust-label) { font-family: var(--font-heading) !important; font-weight: 500 !important; } #soundRoutesApp :is(.intro-welcome-kicker, .profile-section-description) { font-weight: 400 !important; } #soundRoutesApp #introScreen .intro-mode-heading > p { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-weight: 400 !important; line-height: 1.7 !important; } #soundRoutesApp :is(#introScreen .intro-welcome-card, #profileScreen .intro-title-lockup) { --identity-photo-size: clamp(78px, 10vw, 96px); border-color: transparent !important; border-radius: 18px !important; padding: 14px 16px !important; background: linear-gradient(110deg, #f4f0fc, #fff7ed) !important; box-shadow: none !important; align-items: stretch !important; gap: 12px !important; box-sizing: border-box !important; min-width: 0 !important; } #soundRoutesApp :is(#introWelcomeImage, #profileTitlePhoto) { width: var(--identity-photo-size) !important; min-width: var(--identity-photo-size) !important; height: auto !important; min-height: var(--identity-photo-size) !important; align-self: stretch !important; object-fit: cover !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #soundRoutesApp #profileTitlePhoto img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } #soundRoutesApp #profileTitlePhoto { position: relative !important; } #soundRoutesApp #profileScreen #profileTitle { display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: flex-start !important; gap: 3px !important; min-width: 0 !important; min-height: var(--identity-photo-size) !important; margin: 0 !important; padding: 0 !important; } #soundRoutesApp #introScreen .intro-welcome-card > div { display: flex !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; gap: 4px !important; } #soundRoutesApp #soundRoutesRoot :is(#welcomeUsernameText, #profileTitleUsername) { font: 500 clamp(1.125rem, 2.8vw, 1.75rem)/1.2 var(--font-heading) !important; margin: 0 !important; overflow-wrap: anywhere !important; } #soundRoutesApp #profileScreen #profileTitleMode { font: 400 .75rem/1.4 var(--font) !important; } #soundRoutesApp #profileScreen #profileTitleRating { margin: 0 !important; padding: 0 !important; line-height: 1 !important; } #soundRoutesApp #profileScreen .profile-account-shortcuts { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 10px 0 0 !important; min-width: 0 !important; } #soundRoutesApp #profileScreen .profile-account-shortcuts > button { --account-tone: var(--section-map); display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex: 0 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 44px !important; padding: 9px 12px !important; border: 1px solid color-mix(in srgb, var(--account-tone) 20%, white) !important; border-radius: 12px !important; box-shadow: none !important; background: color-mix(in srgb, var(--account-tone) 5%, white) !important; color: var(--account-tone) !important; font: 500 .8125rem/1.5 var(--font-heading) !important; white-space: normal !important; box-sizing: border-box !important; } #soundRoutesApp #profileScreen #profileNotificationsOpenBtn { --account-tone: var(--section-groups); } #soundRoutesApp #profileScreen .profile-account-shortcuts > button:hover { background: color-mix(in srgb, var(--account-tone) 11%, white) !important; } #soundRoutesApp #profileScreen .profile-account-shortcuts > button > svg { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; color: inherit !important; stroke: currentColor !important; } #soundRoutesApp #profileScreen .profile-account-count { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; min-width: 18px !important; height: 18px !important; padding: 0 5px !important; border-radius: 9px !important; box-sizing: border-box !important; background: var(--account-tone) !important; color: white !important; font: 500 11px/1 var(--font) !important; } #soundRoutesApp #profileScreen :is(.profile-account-shortcuts, .profile-account-count):is(.hidden, [hidden]) { display: none !important; } #soundRoutesApp #profileScreen .profile-title-actions { align-self: center !important; margin: 0 !important; } #soundRoutesApp #soundRoutesRoot #profileScreen :is(.profile-title-actions, .profile-title-actions > button):is(.hidden, [hidden]) { display: none !important; } /* Profile values are text, even where the legacy markup uses . */ #soundRoutesApp #soundRoutesRoot #profileScreen :is( .profile-overview-grid > div > strong, .profile-overview-value, .profile-overview-description, .profile-detail-value, .profile-info-value, .profile-connection-list, #profileOverviewLastLocation button ) { font: 400 .8125rem/1.6 var(--font-heading) !important; color: #51627b !important; } @media (max-width: 520px) { #soundRoutesApp :is(#introScreen .intro-welcome-card, #profileScreen .intro-title-lockup) { padding: 12px !important; gap: 10px !important; } #soundRoutesApp #profileScreen .profile-title-actions { grid-column: 1 / -1 !important; justify-self: end !important; } } #soundRoutesApp #appHeader :is(.app-header-action, .header-more-menu > summary) { --header-tone: var(--section-map); background: color-mix(in srgb, var(--header-tone) 8%, white) !important; color: var(--header-tone) !important; border: 1px solid rgb(255 255 255 / 76%) !important; box-shadow: 0 2px 8px rgb(31 42 67 / 8%) !important; } #soundRoutesApp #appHeader :is(.app-header-action, .header-more-menu > summary) svg { color: inherit !important; stroke: currentColor !important; } #soundRoutesApp #appHeader :is(.app-header-action, .header-more-menu > summary) svg * { color: inherit !important; stroke: currentColor !important; } #soundRoutesApp #appHeader .app-header-action[aria-current="page"] { background: color-mix(in srgb, var(--header-tone) 20%, white) !important; box-shadow: inset 0 -3px 0 var(--header-tone) !important; } #soundRoutesApp #appHeader :is(#studioBtn, #studioBtn.app-header-action) { --header-tone: var(--section-creation); } #soundRoutesApp .group-summary-pill { max-width: 100% !important; } #soundRoutesApp .group-pill-creations-action :is(svg, .group-pill-count) { color: var(--section-creation) !important; } #soundRoutesApp .group-pill-creations-separator { display: inline-flex !important; flex: 0 0 auto !important; } @media (max-width: 600px) { #soundRoutesApp .group-summary-pill .group-pill-user-action { flex: 1 1 auto !important; min-width: 0 !important; } #soundRoutesApp .group-summary-pill .group-pill-name { min-width: 0; max-width: none !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } } #soundRoutesApp #appHeader #modeBtn { --header-tone: var(--section-sounds); } #soundRoutesApp #appHeader #settingsBtn { --header-tone: var(--section-around); } #soundRoutesApp #appHeader #logoutBtn { --header-tone: var(--section-recording); } #soundRoutesApp #appHeader #notificationsBtn { --header-tone: var(--section-groups); } #soundRoutesApp #appHeader #communicationsBtn { --header-tone: var(--section-around); } /* Quiet, flat activity counts; the scenic header uses a translucent surface. */ #soundRoutesApp .group-summary-pill { padding: 3px 6px !important; gap: 2px !important; min-height: 52px !important; border-radius: 14px !important; background: rgb(246 250 250 / 78%) !important; box-shadow: none !important; } #soundRoutesApp .group-summary-pill :is(.group-pill-action, .group-pill-mini-action) { box-sizing: border-box !important; min-width: 44px !important; min-height: 44px !important; padding: 4px 6px !important; gap: 5px !important; border-radius: 9px !important; border: 1px solid transparent !important; background: transparent !important; box-shadow: none !important; font: 400 .75rem/1.3 var(--font) !important; } #soundRoutesApp .group-summary-pill :is(.group-pill-name, .group-pill-count, .group-pill-mini-action span) { font: 400 .75rem/1.3 var(--font) !important; } #soundRoutesApp .group-summary-pill .group-pill-avatar { width: 24px !important; height: 24px !important; min-width: 24px !important; } #soundRoutesApp .group-summary-pill .group-pill-stat-action { --stat-tone: var(--section-map); } #soundRoutesApp .group-summary-pill [data-pill-action=sounds] { --stat-tone: var(--section-sounds); } #soundRoutesApp .group-summary-pill [data-pill-action=groups] { --stat-tone: var(--section-groups); } #soundRoutesApp .group-summary-pill [data-pill-action=creations] { --stat-tone: var(--section-creation); } #soundRoutesApp .group-summary-pill .group-pill-stat-action :is(svg, .group-pill-count) { color: var(--stat-tone) !important; } #soundRoutesApp .group-summary-pill :is(.group-pill-stat-icon, .group-pill-stat-icon svg, .group-pill-mini-action svg) { width: 17px !important; height: 17px !important; min-width: 17px !important; } #soundRoutesApp .group-summary-pill :is(.group-pill-action, .group-pill-mini-action):is(:hover, :focus-visible) { background: rgb(255 255 255 / 32%) !important; } #soundRoutesApp .group-summary-pill .group-pill-breakdown { gap: 0 !important; color: #52676b !important; } #soundRoutesApp .group-summary-pill .group-pill-breakdown > span:is(:first-child, :last-child) { display: inline !important; font: 400 14px/1 var(--font) !important; } #soundRoutesApp .group-summary-pill .group-pill-mini-action span { font-size: 11px !important; } #soundRoutesApp .group-summary-pill .group-pill-mini-action svg { width: 14px !important; height: 14px !important; min-width: 14px !important; } #soundRoutesApp .group-summary-pill .group-pill-separator { color: #52676b !important; } #soundRoutesApp #appHeader .group-summary-pill { background: rgb(246 250 250 / 46%) !important; border: 1px solid rgb(255 255 255 / 46%) !important; backdrop-filter: blur(14px) saturate(110%) !important; -webkit-backdrop-filter: blur(14px) saturate(110%) !important; } #soundRoutesApp #appHeader .group-pill-name { color: #263e44 !important; } @media (max-width: 600px) { #soundRoutesApp #appHeader .group-summary-pill { display: grid !important; grid-template-columns: 44px repeat(4, minmax(0, 1fr)) !important; grid-template-rows: 44px !important; gap: 0 !important; padding: 3px 4px !important; white-space: nowrap !important; overflow: visible !important; } #soundRoutesApp #appHeader .group-summary-pill > .group-pill-user-action { grid-column: 1; grid-row: 1; width: 44px !important; padding: 0 !important; justify-content: center !important; } #soundRoutesApp #appHeader .group-pill-user-action .group-pill-name { display: none !important; } #soundRoutesApp #appHeader .group-summary-pill > .group-pill-stat-action { grid-row: 1; min-width: 44px !important; width: 100% !important; padding: 0 !important; } #soundRoutesApp #appHeader .group-summary-pill > [data-pill-action=soundwalks] { grid-column: 2; } #soundRoutesApp #appHeader .group-summary-pill > [data-pill-action=sounds] { grid-column: 3; } #soundRoutesApp #appHeader .group-summary-pill > [data-pill-action=groups] { grid-column: 4; } #soundRoutesApp #appHeader .group-summary-pill > [data-pill-action=creations] { grid-column: 5; } #soundRoutesApp #appHeader .group-summary-pill > .group-pill-separator { display: block !important; grid-row: 1; grid-column: 5; z-index: 1; justify-self: start; align-self: center; margin-inline-start: -2px; pointer-events: none; } #soundRoutesApp #appHeader .group-summary-pill > .group-pill-separator:has(+ [data-pill-action=soundwalks]) { grid-column: 2; } #soundRoutesApp #appHeader .group-summary-pill > .group-pill-separator:has(+ [data-pill-action=sounds]) { grid-column: 3; } #soundRoutesApp #appHeader .group-summary-pill > .group-pill-separator:has(+ [data-pill-action=groups]) { grid-column: 4; } } /* A 44px transparent drag target contains a fine cut line and a visible grip. */ #soundRoutesApp .audio-trim-handle { box-sizing: border-box !important; position: absolute !important; top: 0 !important; bottom: 0 !important; display: block !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 100% !important; min-height: 44px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; transform: translateX(-50%) !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; cursor: ew-resize !important; touch-action: none !important; pointer-events: auto !important; z-index: 5 !important; --audio-trim-color: #39796f; } #soundRoutesApp .audio-trim-handle::before { content: "" !important; position: absolute !important; left: calc(50% + var(--trim-edge-offset, 0px)) !important; top: 8px !important; bottom: 8px !important; width: 2px !important; height: auto !important; border: 0 !important; border-radius: 2px !important; background: var(--audio-trim-color) !important; transform: translateX(-50%) !important; box-shadow: 0 0 0 1px rgb(255 255 255 / 65%) !important; } #soundRoutesApp :is(.audio-trim-handle, .audio-trim-grip)::after { content: "" !important; position: absolute !important; box-sizing: border-box !important; left: clamp(10px, calc(50% + var(--trim-edge-offset, 0px)), 34px) !important; top: 50% !important; width: 18px !important; height: 34px !important; transform: translate(-50%, -50%) !important; border: 1px solid var(--audio-trim-color) !important; border-radius: 6px !important; background: linear-gradient(var(--audio-trim-color), var(--audio-trim-color)) 6px center / 1px 12px no-repeat, linear-gradient(var(--audio-trim-color), var(--audio-trim-color)) 10px center / 1px 12px no-repeat, #fff !important; box-shadow: 0 2px 4px rgb(35 86 76 / 12%) !important; } #soundRoutesApp :is(.audio-trim-handle, .audio-trim-grip):is(:hover, :focus-visible)::after { border-width: 2px !important; } #soundRoutesApp #recordingPanel .trim-label { top: 6px !important; left: calc(50% + var(--trim-edge-offset, 0px)) !important; font: 400 11px/1.4 var(--font) !important; padding: 2px 5px !important; border-radius: 6px !important; } #soundRoutesApp #appHeader .eyebrow { color: white !important; } #soundRoutesApp #appHeader [data-header-action][aria-current="page"]::after { display: none !important; } #soundRoutesApp .confirm-modal-card { width: min(440px, calc(100vw - 32px)) !important; padding: 24px !important; border-radius: 22px !important; background: white !important; } #soundRoutesApp .confirm-modal-card h4 { font: 600 1rem/1.5 var(--font-heading) !important; color: var(--text) !important; } #soundRoutesApp .confirm-modal-card p { font: 400 .875rem/1.7 var(--font) !important; color: var(--text-soft) !important; } #soundRoutesApp .confirm-modal-actions { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 10px !important; } #soundRoutesApp #confirmModal .confirm-modal-actions > button { box-sizing: border-box !important; flex: 0 1 auto !important; width: auto !important; min-width: 110px !important; max-width: 100% !important; height: auto !important; min-height: 44px !important; max-height: none !important; padding: 11px 18px !important; border-radius: 12px !important; font: 500 .8125rem/1.5 var(--font-heading) !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; background: #f2f4f9 !important; color: #51627b !important; border: 1px solid #dae0eb !important; box-shadow: none !important; } #soundRoutesApp #confirmModal[data-intent="danger"] #confirmModalOkBtn { color: #9d3e55 !important; background: #fceff2 !important; border-color: #eac5cf !important; } #soundRoutesApp #confirmModal[data-intent="primary"] #confirmModalOkBtn { color: #4263a0 !important; background: #eef2fc !important; border-color: #c6d3ee !important; } } /* A single page hierarchy replaces the remaining legacy title/type variants. */ @layer ui-contract { #soundRoutesApp { display: flex !important; flex-direction: column !important; min-height: 100vh !important; min-height: 100dvh !important; } #soundRoutesApp #soundRoutesRoot { display: flex !important; flex-direction: column !important; flex: 1 0 auto !important; width: 100% !important; font-family: var(--font) !important; font-weight: 400 !important; } #soundRoutesApp :is(#soundRoutesRoot, .confirm-modal-backdrop, .app-status-overlay, .global-loading-indicator) :where(*) { font-family: inherit !important; font-weight: inherit !important; } #soundRoutesApp :is(#soundRoutesRoot, .confirm-modal-backdrop, .app-status-overlay, .global-loading-indicator) :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading) !important; font-weight: 600 !important; } #soundRoutesApp :is(#soundRoutesRoot, .confirm-modal-backdrop, .app-status-overlay, .global-loading-indicator) :is(button, summary, label, legend, .label-row, .label-text, .choice-title, .section-title, .page-title-pill, .panel-title-pill) { font-family: var(--font-heading) !important; font-weight: 500 !important; } #soundRoutesApp :is(#soundRoutesRoot, .confirm-modal-backdrop, .app-status-overlay, .global-loading-indicator) :is(input, select, textarea, output, time, code, pre, .section-description, .settings-intro, .around-intro, .auth-section-heading > p) { font-family: var(--font) !important; font-weight: 400 !important; } #soundRoutesApp :is(#soundRoutesRoot, .confirm-modal-backdrop, .app-status-overlay, .global-loading-indicator) :is(strong, b) { font-weight: 600 !important; } #soundRoutesApp :is(#soundRoutesRoot, .confirm-modal-backdrop, .app-status-overlay, .global-loading-indicator) svg text { font-family: var(--font) !important; font-weight: 500 !important; } /* Empty-list messages use the same gentle display type as the surrounding UI. */ #soundRoutesApp #soundRoutesRoot :is(.empty-state, .notifications-empty, .messages-empty, .profile-empty-state-text, .admin-empty-state, .organization-empty) { font: 500 .8125rem/1.7 var(--font-heading) !important; color: var(--text-soft) !important; } #soundRoutesApp #soundRoutesRoot :is(.empty-state, .notifications-empty, .messages-empty, .profile-empty-state-text, .admin-empty-state, .organization-empty) :is(strong, b, span, p) { font-family: inherit !important; font-weight: inherit !important; font-size: inherit !important; } #soundRoutesApp #soundRoutesRoot :is(.page-title-pill, .panel-title-pill) { display: inline-flex !important; align-items: center !important; gap: 9px !important; box-sizing: border-box !important; width: fit-content !important; max-width: 100% !important; min-height: 40px !important; margin: 0 !important; padding: 8px 12px !important; border: 1px solid color-mix(in srgb, var(--page-tone) 15%, white) !important; border-radius: 12px !important; background: color-mix(in srgb, var(--page-tone) 7%, white) !important; color: color-mix(in srgb, var(--page-tone) 85%, #20283a) !important; box-shadow: none !important; backdrop-filter: none !important; font: 500 .875rem/1.5 var(--font-heading) !important; letter-spacing: 0 !important; text-transform: none !important; } #soundRoutesApp #soundRoutesRoot :is(.page-title-pill, .panel-title-pill)::before, #soundRoutesApp #soundRoutesRoot :is(.page-title-pill, .panel-title-pill)::after { content: none !important; display: none !important; } #soundRoutesApp #soundRoutesRoot :is(.page-title-pill, .panel-title-pill) :is(.section-heading-icon, svg) { display: block !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; flex: 0 0 20px !important; margin: 0 !important; padding: 0 !important; color: inherit !important; stroke: currentColor !important; border: 0 !important; background: transparent !important; } #soundRoutesApp #soundRoutesRoot :is(.page-title-pill, .panel-title-pill) svg * { color: inherit !important; stroke: currentColor !important; } /* Page labels identify a section. Their small capsule, lighter surface and absent border distinguish them from the 40px action controls. */ #soundRoutesApp #soundRoutesRoot :is(.page-title-pill, .panel-title-pill):not(button, a, summary, [role="button"]) { min-height: 26px !important; padding: 4px 8px !important; gap: 6px !important; border: 0 !important; border-radius: 999px !important; background: color-mix(in srgb, var(--page-tone) 4%, white) !important; font-size: var(--ui-title-label-size) !important; cursor: default !important; user-select: text; } #soundRoutesApp #soundRoutesRoot :is(.page-title-pill, .panel-title-pill):not(button, a, summary, [role="button"]) :is(.section-heading-icon, svg) { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; flex-basis: 16px !important; } /* One inherited accent connects the page title, fields and focus states. Profile subpages update through their existing data-profile-mode value. */ #soundRoutesApp #soundRoutesRoot { --page-tone: var(--section-around); } #soundRoutesApp #soundRoutesRoot :is(#mapPanel, #introScreen, #authScreen) { --page-tone: var(--section-map); } #soundRoutesApp #soundRoutesRoot :is(#profileScreen, #adminScreen) { --page-tone: var(--section-map); } #soundRoutesApp #soundRoutesRoot #settingsScreen { --page-tone: #62738d; } #soundRoutesApp #soundRoutesRoot :is(#aroundScreen, #messagesScreen) { --page-tone: var(--section-around); } #soundRoutesApp #soundRoutesRoot #notificationsScreen { --page-tone: var(--section-groups); } #soundRoutesApp #soundRoutesRoot #recordingPanel { --page-tone: var(--section-recording); } #soundRoutesApp #soundRoutesRoot #savedPanel { --page-tone: var(--section-sounds); } #soundRoutesApp #soundRoutesRoot :is(#studioScreen, #creationSetupScreen) { --page-tone: var(--section-creation); } #soundRoutesApp #soundRoutesRoot #profileScreen:has(.profile-main-card:is([data-profile-mode="sounds"], [data-profile-mode="edit-sound"])) { --page-tone: var(--section-sounds); } #soundRoutesApp #soundRoutesRoot #profileScreen:has(.profile-main-card:is([data-profile-mode="soundwalks"], [data-profile-mode="edit-soundwalk"])) { --page-tone: var(--section-map); } #soundRoutesApp #soundRoutesRoot #profileScreen:has(.profile-main-card:is([data-profile-mode="groups"], [data-profile-mode="view-group"], [data-profile-mode="create-group"])) { --page-tone: var(--section-groups); } #soundRoutesApp #soundRoutesRoot #profileScreen:has(.profile-main-card[data-profile-mode="creations"]) { --page-tone: var(--section-creation); } #soundRoutesApp #soundRoutesRoot #adminScreen:has(.admin-tab.active[data-admin-resource="sounds"]) { --page-tone: var(--section-sounds); } #soundRoutesApp #soundRoutesRoot #adminScreen:has(.admin-tab.active[data-admin-resource="organizations"]) { --page-tone: var(--section-groups); } #soundRoutesApp #soundRoutesRoot :is(.screen, .panel-section, .profile-main-card) { --ui-focus-color: var(--page-tone); --ui-label-icon-color: var(--page-tone); } #soundRoutesApp #soundRoutesRoot :is(.ui-section-card, .settings-section, .soundwalk-field-box, .signup-field-box, .visibility-panel, .organization-panel, .groups-section, .role-section) { border-color: color-mix(in srgb, var(--page-tone) 18%, white) !important; background: color-mix(in srgb, var(--page-tone) 3%, white) !important; box-shadow: none !important; } #soundRoutesApp #soundRoutesRoot .ui-field-group { margin-inline: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #soundRoutesApp #soundRoutesRoot .profile-edit-sound-metadata.ui-field-group { display: grid !important; gap: 16px !important; } #soundRoutesApp #soundRoutesRoot :is(.label-row, .settings-section-heading) > .label-icon { color: var(--page-tone) !important; } #soundRoutesApp #soundRoutesRoot :is(.label-row, .settings-section-heading) > .label-icon :is(svg, svg *) { color: inherit !important; stroke: currentColor !important; } #soundRoutesApp #soundRoutesRoot :is(.screen, .panel-section) :is(input, select, textarea):not([type="range"], [type="radio"], [type="checkbox"], [type="color"], [type="file"]):not(.field-missing, [aria-invalid="true"], :user-invalid) { border-color: color-mix(in srgb, var(--page-tone) 21%, white) !important; } #soundRoutesApp #soundRoutesRoot :is(.screen, .panel-section) :is(input, select, textarea):focus-visible:not(.field-missing, [aria-invalid="true"], :user-invalid) { outline: 2px solid color-mix(in srgb, var(--page-tone) 65%, white) !important; outline-offset: 3px !important; box-shadow: none !important; } /* Native legends interrupt the outline cleanly, including wrapped labels. Existing labels stay inside each legend so clicking still focuses its field. */ #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset { box-sizing: border-box !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding: 16px !important; border: 1px solid color-mix(in srgb, var(--page-tone) 24%, white) !important; border-radius: 16px !important; background: color-mix(in srgb, var(--page-tone) 4%, white) !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset > legend { box-sizing: border-box !important; float: none !important; position: static !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 6px !important; color: color-mix(in srgb, var(--page-tone) 85%, #49586c) !important; font: 500 .8125rem/1.6 var(--font-heading) !important; white-space: normal !important; overflow-wrap: anywhere !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset > legend :is(label, .label-row) { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; color: inherit !important; white-space: normal !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset > legend .label-text { color: inherit !important; white-space: normal !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-readonly-field > legend { display: inline-flex !important; align-items: center !important; gap: 8px !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-readonly-field > legend :is(span, strong) { margin: 0 !important; color: inherit !important; font: inherit !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-readonly-field > legend svg { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; color: var(--page-tone) !important; stroke: currentColor !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-readonly-field > :is(strong, .profile-overview-value, .profile-overview-description) { display: block !important; min-width: 0 !important; margin: 0 !important; font: 400 .8125rem/1.7 var(--font) !important; color: var(--text) !important; overflow-wrap: anywhere !important; } /* Collapsible studio/settings sections keep their real summary controls. */ #soundRoutesApp #soundRoutesRoot :is(.ui-outline-disclosure, .ui-outlined-library) { --outline-surface: color-mix(in srgb, var(--page-tone) 4%, white); border: 1px solid color-mix(in srgb, var(--page-tone) 24%, white) !important; border-radius: 16px !important; background: var(--outline-surface) !important; box-shadow: none !important; } #soundRoutesApp #soundRoutesRoot .ui-outline-disclosure { margin-top: 22px !important; padding: 22px 16px 16px !important; } #soundRoutesApp #soundRoutesRoot .ui-outline-disclosure > summary { display: flex !important; align-items: center !important; gap: 8px !important; box-sizing: border-box !important; width: fit-content !important; max-width: 100% !important; min-height: 44px !important; margin: -44px 0 12px !important; padding: 4px 6px !important; border: 0 !important; border-radius: 8px !important; background: var(--outline-surface) !important; color: var(--page-tone) !important; font: 500 .8125rem/1.6 var(--font-heading) !important; white-space: normal !important; } #soundRoutesApp #soundRoutesRoot .ui-outlined-library { position: relative !important; padding-top: 16px !important; } #soundRoutesApp #soundRoutesRoot .ui-outlined-library .studio-library-heading { justify-content: flex-end !important; } #soundRoutesApp #soundRoutesRoot .ui-outlined-library .studio-library-heading h3 { position: absolute !important; top: 0 !important; inset-inline-start: 12px !important; transform: translateY(-50%) !important; max-width: calc(100% - 24px) !important; margin: 0 !important; padding: 0 6px !important; background: var(--outline-surface) !important; color: var(--page-tone) !important; font: 500 .8125rem/1.6 var(--font-heading) !important; } #soundRoutesApp #soundRoutesRoot #studioScreen { --studio-line: color-mix(in srgb, var(--page-tone) 24%, white) !important; --studio-ink: color-mix(in srgb, var(--page-tone) 80%, #374151) !important; --studio-tool-tone: var(--page-tone) !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset > :is(input, select, textarea, .choice-grid) { margin-top: 0 !important; } #soundRoutesApp #soundRoutesRoot #recordingPanel .recording-toolbox .audio-player { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; grid-template-columns: minmax(0, 1fr) !important; } #soundRoutesApp #soundRoutesRoot #recordingPanel .audio-player > * { min-width: 0 !important; max-width: 100% !important; } #soundRoutesApp #soundRoutesRoot #recordingPanel .player-top { flex-wrap: wrap !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset.ui-image-editor { grid-template-areas: "controls preview" !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset > .auth-image-field.ui-image-editor { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; grid-template-areas: "controls preview" !important; } #soundRoutesApp #soundRoutesRoot #creationSetupForm > fieldset { margin: 0 !important; } #soundRoutesApp #soundRoutesRoot #creationSetupStatus:empty { display: none !important; } #soundRoutesApp #soundRoutesRoot .creation-form-actions { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; } #soundRoutesApp #soundRoutesRoot .creation-form-actions > button { width: auto !important; min-width: 0 !important; max-width: 100% !important; flex: 0 0 auto !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 10px 14px !important; } #soundRoutesApp #soundRoutesRoot .creation-form-actions > button > span { white-space: nowrap !important; } #soundRoutesApp #soundRoutesRoot .form-section-note { margin: 10px 0 0 !important; font: 400 .8125rem/1.7 var(--font) !important; color: var(--text-soft) !important; } #soundRoutesApp #soundRoutesRoot #creationTemplateHint:empty { display: none !important; } #soundRoutesApp #soundRoutesRoot #creationTemplateHint:not(:empty) { padding: 10px 12px !important; border-inline-start: 2px solid color-mix(in srgb, var(--page-tone) 40%, white) !important; border-radius: 0 10px 10px 0 !important; background: color-mix(in srgb, var(--page-tone) 6%, white) !important; } @media (max-width: 620px) { #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset { padding: 12px !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset.ui-image-editor, #soundRoutesApp #soundRoutesRoot fieldset.ui-fieldset > .auth-image-field.ui-image-editor { grid-template-areas: "preview" "controls" !important; } } @media (max-width: 480px) { #soundRoutesApp #soundRoutesRoot .creation-form-actions { flex-direction: column !important; } #soundRoutesApp #soundRoutesRoot .creation-form-actions > button { width: 100% !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsToggle { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) 20px !important; grid-template-areas: "icon label arrow" "icon count arrow" !important; min-width: 0 !important; max-width: 100% !important; gap: 2px 8px !important; white-space: normal !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsToggle > svg:first-child { grid-area: icon !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsToggle > .effect-dropdown-chevron { grid-area: arrow !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsToggle > [data-i18n="recording.audioEffects"] { grid-area: label !important; text-align: start !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsToggle > .effect-count { grid-area: count !important; justify-self: start !important; margin: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; } } #soundRoutesApp #soundRoutesRoot .auth-section-heading > p { margin: 10px 0 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text-soft) !important; font-size: .875rem !important; line-height: 1.7 !important; } #soundRoutesApp #soundRoutesRoot :is(.hero-card, .around-card, #mainScreen .panel-section.card) { border: 1px solid var(--line) !important; border-radius: 24px !important; background: var(--surface) !important; box-shadow: var(--shadow-soft) !important; } #soundRoutesApp #soundRoutesRoot .hero-card > .hero-content { margin: 0 !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; box-shadow: none !important; } #soundRoutesApp #studioScreen { box-sizing: border-box !important; width: var(--app-shell-measure) !important; max-width: var(--app-shell-measure) !important; margin: 24px auto 0 !important; padding: clamp(16px, 2.5vw, 28px) !important; border: 1px solid var(--line) !important; border-radius: 24px !important; background: var(--surface) !important; box-shadow: var(--shadow-soft) !important; } #soundRoutesApp #studioScreen :is(.studio-toolbar, .studio-mobile-nav) { background: var(--surface) !important; } #soundRoutesApp #soundRoutesRoot > .app-credit { position: static !important; flex: 0 0 auto !important; width: 100% !important; box-sizing: border-box !important; margin: auto 0 0 !important; padding: 24px 16px max(16px, env(safe-area-inset-bottom)) !important; color: var(--text-soft) !important; font: 400 .75rem/1.6 var(--font) !important; } #soundRoutesApp #recordingStatus { --feedback-tone: var(--section-map); } #soundRoutesApp #recordingStatus[data-message-mode=good] { --feedback-tone: var(--section-sounds); } #soundRoutesApp #recordingStatus[data-message-mode=warning] { --feedback-tone: var(--section-groups); } #soundRoutesApp #recordingStatus[data-message-mode=error] { --feedback-tone: var(--section-recording); } #soundRoutesApp #recordingStatus .app-status-card { grid-template-columns: 32px minmax(0, 1fr) !important; gap: 14px !important; min-height: 80px !important; padding: 20px !important; border: 1px solid color-mix(in srgb, var(--feedback-tone) 25%, white) !important; border-radius: 20px !important; background: color-mix(in srgb, var(--feedback-tone) 5%, white) !important; color: var(--text) !important; box-shadow: var(--shadow) !important; } #soundRoutesApp #recordingStatus .app-status-icon { width: 32px !important; height: 32px !important; background: transparent !important; color: var(--feedback-tone) !important; clip-path: none !important; transform: none !important; filter: none !important; } #soundRoutesApp #recordingStatus .app-status-icon svg { display: none !important; width: 32px !important; height: 32px !important; } #soundRoutesApp #recordingStatus[data-message-mode=good] [data-status-icon=good], #soundRoutesApp #recordingStatus[data-message-mode=warning] [data-status-icon=warning], #soundRoutesApp #recordingStatus[data-message-mode=error] [data-status-icon=error], #soundRoutesApp #recordingStatus:not([data-message-mode=good]):not([data-message-mode=warning]):not([data-message-mode=error]) [data-status-icon=info] { display: block !important; } #soundRoutesApp #recordingStatus .app-status-text { color: inherit !important; font: 400 .875rem/1.6 var(--font) !important; } } /* The entry view is a quiet foreground card over the existing soundwalk art. */ @layer ui-contract { #soundRoutesApp #authScreen .auth-entry-scene { display: none !important; } #soundRoutesApp[data-screen="auth"]:not([data-auth-view="signup"]) [data-component="app-header"] { display: none !important; } #soundRoutesApp[data-screen="auth"] #authScreen:not(.signup-mode) { display: grid !important; place-items: center !important; position: relative !important; isolation: isolate; flex: 1 0 auto !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 0 !important; min-height: 0 !important; padding: 32px 20px !important; } #soundRoutesApp[data-screen="auth"] #authScreen:not(.signup-mode) .auth-entry-scene { display: block !important; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #315a61; } .auth-entry-landscape { position: absolute; inset: -16px; background: linear-gradient(120deg, rgb(19 49 62 / 30%), rgb(40 64 57 / 15%)), url("../../images/soundroutes-background-v2.jpg") 60% center / cover; filter: blur(6px) saturate(.9); transform: scale(1.03); } .auth-entry-scene::after { content: ""; position: absolute; inset: 0; background: rgb(18 43 54 / 13%); } .auth-entry-float, .auth-entry-sound { position: absolute; z-index: 1; animation: entry-drift 14s ease-in-out infinite alternate; } .auth-entry-float { border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: rgb(255 255 255 / 7%); } .auth-entry-float-one { width: 84px; height: 84px; left: 10%; top: 22%; } .auth-entry-float-two { width: 28px; height: 28px; right: 12%; bottom: 18%; animation-delay: -6s; animation-duration: 18s; } .auth-entry-float-three { width: 12px; height: 12px; left: 23%; bottom: 16%; background: rgb(255 233 185 / 40%); animation-delay: -10s; } .auth-entry-sound { width: 120px; height: 60px; right: 8%; top: 18%; color: rgb(255 255 255 / 40%); animation-delay: -4s; animation-duration: 17s; } @keyframes entry-drift { from { transform: translate3d(-10px, 14px, 0) rotate(-5deg); } to { transform: translate3d(18px, -22px, 0) rotate(6deg); } } #soundRoutesApp #authWelcomePanel { position: relative; z-index: 1; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 18px !important; width: min(420px, 100%) !important; aspect-ratio: 1; box-sizing: border-box !important; margin: 0 !important; padding: 32px !important; border: 1px solid rgb(255 255 255 / 70%) !important; border-radius: 28px !important; background: rgb(255 255 255 / 91%) !important; box-shadow: 0 24px 80px rgb(18 39 49 / 20%) !important; backdrop-filter: blur(20px); text-align: center !important; } #soundRoutesApp .auth-welcome-logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 6px 18px rgb(28 74 74 / 10%); } #soundRoutesApp .auth-welcome-brand { display: flex; align-items: center; justify-content: center; gap: 9px; max-width: 100%; } #soundRoutesApp #authWelcomeTitle { font: 500 28px/1.25 var(--font-heading) !important; color: #304e59 !important; margin: 0 !important; } #soundRoutesApp .auth-welcome-version { font: 400 10px/1 var(--font) !important; color: #657a80; padding: 5px 7px; border-radius: 7px; background: #e9eff1; white-space: nowrap; } #soundRoutesApp .auth-welcome-description { font: 400 13px/1.75 var(--font) !important; color: #566d76 !important; margin: 0 !important; text-wrap: balance; } #soundRoutesApp .auth-welcome-actions { display: grid; gap: 8px; width: 100%; } #soundRoutesApp #authWelcomeLoginBtn { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 46px !important; border: 1px solid var(--section-sounds) !important; border-radius: 12px !important; background: var(--section-sounds) !important; color: white !important; box-shadow: none !important; font: 500 13px/1.5 var(--font-heading) !important; } #soundRoutesApp #authWelcomeSignupBtn { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 44px !important; background: transparent !important; color: #426773 !important; border: 0 !important; box-shadow: none !important; font: 500 12px/1.5 var(--font-heading) !important; } #soundRoutesApp #authWelcomeSignupBtn:hover { text-decoration: underline; text-underline-offset: 4px; } #soundRoutesApp[data-screen="auth"] #authScreen:not(.signup-mode) #authFormCard { position: relative; z-index: 1; display: block !important; width: min(440px, 100%) !important; margin: 0 !important; border: 1px solid rgb(255 255 255 / 70%) !important; border-radius: 28px !important; background: rgb(255 255 255 / 95%) !important; box-shadow: 0 24px 80px rgb(18 39 49 / 20%) !important; backdrop-filter: blur(20px); overflow: visible !important; } #soundRoutesApp #soundRoutesRoot #authScreen:not(.signup-mode) #authFormCard > .hero-content { padding: 24px 28px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #soundRoutesApp .auth-entry-form-top { display: none; } #soundRoutesApp #authScreen:not(.signup-mode) .auth-entry-form-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } #soundRoutesApp #authEntryBackBtn { width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; } #soundRoutesApp #authScreen:not(.signup-mode) .hero-copy { display: none !important; } #soundRoutesApp #authScreen.login-mode #loginPanel { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #soundRoutesApp #authScreen.reset-mode .reset-password-grid { grid-template-columns: 1fr !important; } #soundRoutesApp #authScreen.login-mode .auth-login-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 18px !important; } #soundRoutesApp #authScreen.login-mode .auth-login-actions > button { width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 44px !important; } #soundRoutesApp #authScreen.login-mode #loginBtn { background: var(--section-sounds) !important; color: white !important; border-color: var(--section-sounds) !important; } #soundRoutesApp #soundRoutesRoot #authScreen :is(#authWelcomePanel, #authFormCard)[hidden] { display: none !important; } #soundRoutesApp[data-screen="auth"]:not([data-auth-view="signup"]) #soundRoutesRoot > .app-credit { position: relative !important; z-index: 1; width: fit-content !important; max-width: calc(100% - 32px); padding: 8px 14px !important; margin: 0 auto 12px !important; border-radius: 12px; background: rgb(255 255 255 / 85%); color: #405860 !important; } @media (max-width: 480px) { #soundRoutesApp[data-screen="auth"] #authScreen:not(.signup-mode) { padding: 24px 16px !important; } #soundRoutesApp #authWelcomePanel { padding: 26px 24px !important; gap: 16px !important; } #soundRoutesApp #authWelcomeTitle { font-size: 25px !important; } #soundRoutesApp .auth-welcome-logo { width: 64px; height: 64px; border-radius: 18px; } #soundRoutesApp #soundRoutesRoot #authScreen:not(.signup-mode) #authFormCard > .hero-content { padding: 20px !important; } } @media (max-width: 360px) { #soundRoutesApp #authWelcomePanel { aspect-ratio: auto; } #soundRoutesApp #authWelcomeTitle { font-size: 23px !important; } } @media (prefers-reduced-motion: reduce) { .auth-entry-scene :is(.auth-entry-float, .auth-entry-sound) { animation: none !important; } } } :root, #soundRoutesApp { --font: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-heading: "Comfortaa", var(--font); --page: #f8f9fd; --surface: #fff; --surface-soft: #fafbfe; --surface-muted: #f1f4fb; --line: #e6e9f2; --line-strong: #becbdd; --text: #39465b; --text-soft: #5e6e84; --muted: #68798f; --brand: #32639f; --accent: #805b25; --purple: #765495; --teal: #206e77; --green: #23704f; --red: #bc3b43; --shadow: 0 10px 32px rgb(65 83 119 / 7%); --shadow-soft: 0 3px 14px rgb(65 83 119 / 5%); --ui-action-primary: #32639f; --ui-action-play: #23704f; --ui-action-audio: #bc3b43; --ui-action-edit: #805b25; --ui-action-add: #206e77; --ui-action-delete: #b14542; --ui-action-info: #32639f; --ui-action-map: #32639f; --ui-action-settings: #765495; --ui-action-neutral: #637489; --ui-action-media: #206e77; --ui-action-clear: #805b25; --ui-action-cancel: #736b7b; --ui-focus-color: #32639f; --ui-label-color: #51627b; --ui-description-color: #5e6e84; --ui-label-icon-color: #765495; --section-map: #32639f; --section-around: #206e77; --section-recording: #bc3b43; --section-sounds: #23704f; --section-groups: #805b25; --section-creation: #765495; --ui-button-label-weight: 600; --ui-control-shadow: 0 2px 4px rgb(65 83 119 / 4%); --ui-control-shadow-hover: 0 4px 10px rgb(65 83 119 / 12%); } html { background: var(--page); } body { font-family: var(--font); background: radial-gradient(ellipse at 0 12%, #f2eefb 0, transparent 44%), radial-gradient(ellipse at 100% 34%, #fff4e7 0, transparent 40%), var(--page); color: var(--text); line-height: 1.6; } button, input, select, textarea { font-family: var(--font); } .screen, .hero-card, .hero-content, .hero-actions, .panel, .settings-section, .profile-page-panel, .recording-meta, .choice-card-inner > div { min-width: 0; } /* No forced two-part subtitle, clipping, or viewport-dependent truncation. */ #appHeader.app-header { background-image: url("../../images/soundroutes-background-v2.jpg"); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 14px; min-height: 252px; height: auto; padding: clamp(18px, 3vw, 32px); border-radius: 24px; background-position: center; } #appHeader > .app-header-actions:not(.app-header-demo-actions) { grid-column: 1; grid-row: 1; width: 100%; flex-wrap: wrap; gap: 8px; } #appHeader > .app-header-demo-actions { position: static !important; grid-column: 1; grid-row: 2; justify-self: start; max-width: 100%; flex-wrap: wrap; } #appHeader .app-header-brand { grid-column: 1; grid-row: 3; width: 100% !important; max-width: 100% !important; padding: 4px 0; } #appHeader .app-header-title { width: 100%; max-width: none; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; } #appHeader .app-header-title-text { min-width: 0; overflow: visible; } #appHeader .app-header-title-main { font-family: var(--font-heading); font-size: clamp(1.65rem, 3.5vw, 2.55rem); font-weight: 700; line-height: 1.2; letter-spacing: -.045em; } #appHeader .app-header-title-sub { display: block; width: auto; max-width: 100%; margin-top: 8px; font-family: var(--font); font-size: clamp(.78rem, 1.5vw, .95rem); font-weight: 500; line-height: 1.55; letter-spacing: .015em; white-space: normal; text-wrap: balance; text-overflow: clip; overflow: visible; -webkit-line-clamp: unset; } #appHeader .app-header-logo { width: clamp(44px, 6vw, 68px); height: clamp(44px, 6vw, 68px); border-radius: 17px; } #appHeader .app-header-pill-row { grid-column: 1; grid-row: 4; } #appHeader .app-header-pill-row:empty { display: none; } body[data-auth-state="logged-out"] #appHeader .app-header-pill-row { display: none; } #appHeader::after { background: linear-gradient(90deg, rgb(21 41 48 / 72%), rgb(21 41 48 / 32%) 60%, rgb(21 41 48 / 8%)); } /* A common page hierarchy, including the two screens missed by older locks. */ .eyebrow, .page-title-pill, .panel-title-pill { font-family: var(--font) !important; font-weight: 700; color: var(--brand); box-shadow: none; } .hero-content, .hero-actions, .settings-section, .soundwalk-field-box, .auth-section-card, .ui-section-card { border-color: var(--line); box-shadow: none; } .hero-card { border-color: var(--line); box-shadow: var(--shadow); } .auth-section-heading > p, .settings-intro, .choice-info, .studio-help, .around-intro { color: var(--text-soft); line-height: 1.7; } body :is(#messagesScreen, #adminScreen, #studioScreen, #aroundScreen) button { font-family: var(--font) !important; } body :is(#messagesScreen, #adminScreen) .btn-icon { font-size: var(--ui-button-label-size) !important; font-weight: var(--ui-button-label-weight) !important; border-radius: var(--ui-command-radius) !important; } body :is(#studioScreen, #aroundScreen) :is(.label-row, .label-text) { font-family: var(--font) !important; font-size: var(--ui-label-size) !important; color: var(--ui-label-color); } .label-row > .label-text { min-width: 0; overflow-wrap: anywhere; } .label-row > :is(.label-icon, svg), .btn-icon > svg { flex-shrink: 0; } svg { stroke-linecap: round; stroke-linejoin: round; } button > svg[aria-hidden="true"] { pointer-events: none; } input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select { border-color: var(--line); } input::placeholder, textarea::placeholder { color: #718097; opacity: 1; } :is(input, textarea, select):focus-visible { outline: 2px solid var(--ui-focus-color); outline-offset: 3px; } .settings-language-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; } .creation-list-card .entry-photo img { width: 100%; height: 100%; object-fit: cover; } .creation-list-card .entry-photo { overflow: hidden; border-radius: 14px; } @media (max-width: 360px) { #soundRoutesApp #soundRoutesRoot > [data-component="app-header"] { width: calc(100% - 8px) !important; max-width: none !important; margin-inline: auto !important; } #soundRoutesApp #appHeader { width: 100% !important; padding: 10px 8px !important; } #soundRoutesApp #appHeader .app-header-title-sub { font-size: .65rem !important; letter-spacing: 0 !important; text-wrap: pretty; } } /* One exploration navigation bar survives the map / nearby-sounds transition. */ #soundRoutesApp #explorationNav { width: var(--app-shell-measure, min(calc(100% - 40px), 964px)) !important; max-width: 100%; margin: 20px auto 0 !important; } #soundRoutesApp #explorationNav[hidden] { display: none !important; } #soundRoutesApp #explorationNav .tab-btn-content { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: normal; } .header-more-menu, .header-more-actions { display: contents; } .header-more-menu > summary { display: none; } body[data-auth-state="logged-out"] #appHeader > .app-header-actions { display: none !important; } body[data-auth-state="logged-out"] #appHeader { min-height: 210px; } /* Cards and editors share the same quiet surfaces; action colors do the work. */ #soundRoutesApp :is(.choice-card-inner, .ui-section-card, .settings-section, .soundwalk-field-box) { background-image: none !important; border-color: var(--line) !important; box-shadow: none !important; } #soundRoutesApp :is(.settings-language-grid .choice-card, .metadata-simple, .metadata-full):has(input:checked) .choice-card-inner { border-color: #b7c7e6 !important; background: #edf1fb !important; } #soundRoutesApp .recording-title-line .recording-action-btn.details, #soundRoutesApp .recording-action-btn.details { background: #edf1fb !important; border: 1px solid #bdcce8 !important; color: #49659d !important; opacity: 1 !important; box-shadow: none !important; } #soundRoutesApp .recording-action-btn.details svg, #soundRoutesApp .recording-action-btn.details svg * { color: #49659d !important; stroke: #49659d !important; fill: none !important; opacity: 1 !important; } #soundRoutesApp .recording-action-btn.details[aria-expanded="true"] { background: #dce5f8 !important; } /* Visibility help is a stable popover: opening it does not stretch the form. */ #soundRoutesApp .choice-card:is(.visibility-public, .visibility-private) { position: relative; } #soundRoutesApp .choice-card:is(.visibility-public, .visibility-private) .choice-info { position: absolute; z-index: 15; bottom: calc(100% + 8px); left: 0; width: min(280px, calc(100vw - 80px)); margin: 0 !important; padding: 12px !important; border: 1px solid var(--line) !important; border-radius: 12px; background: white !important; box-shadow: var(--shadow); font-weight: 500 !important; line-height: 1.6 !important; } #soundRoutesApp .choice-card.visibility-private .choice-info { left: auto; right: 0; } #soundRoutesApp .choice-card:is(.visibility-public, .visibility-private):not(.info-open) .choice-info { display: none !important; } #soundRoutesApp .choice-card:is(.visibility-public, .visibility-private).info-open .choice-info { display: block !important; } /* The full, original subtitle spans the lockup rather than being squeezed into the narrow column beside the logo. Its wording is never abbreviated. */ #appHeader .app-header-title-text { display: contents; } #appHeader .app-header-logo { grid-column: 1; grid-row: 1; } #appHeader .app-header-title-main { grid-column: 2; grid-row: 1; align-self: center; } #appHeader .app-header-title-sub { grid-column: 1 / -1; grid-row: 2; } #soundRoutesApp #settingsScreen .settings-language-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } @media (max-width: 680px) { #appHeader.app-header { min-height: 224px; padding: 18px; border-radius: 20px; gap: 12px; } #appHeader .app-header-title { column-gap: 12px; } #appHeader .app-header-title-main { font-size: clamp(1.55rem, 6.5vw, 2rem); } #appHeader .app-header-title-sub { font-size: .8rem; line-height: 1.55; } .settings-language-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #soundRoutesApp #settingsScreen .settings-language-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body .screen { overflow-wrap: break-word; } /* All native fields use the shared compact input type. */ body :is(#authScreen, #creationSetupScreen, #settingsScreen, #profileScreen, #messagesScreen) :is(input[type="text"], input[type="email"], input[type="password"], input[type="date"], textarea, select) { font-size: var(--ui-input-size) !important; } } @media (max-width: 600px) { #appHeader .header-more-menu { display: block; position: relative; flex: 0 0 40px; width: 40px; height: 40px; z-index: 10; } #appHeader .header-more-menu > summary { display: flex; align-items: center; justify-content: center; list-style: none; width: 40px; height: 40px; border: 1px solid rgb(255 255 255 / 45%); border-radius: 12px; color: white; background: rgb(35 53 77 / 72%); cursor: pointer; } #appHeader .header-more-menu > summary::-webkit-details-marker { display: none; } #appHeader .header-more-menu > summary svg { width: 22px; height: 22px; } #appHeader .header-more-menu:not([open]) > .header-more-actions { display: none !important; } #appHeader .header-more-menu[open] > .header-more-actions { position: absolute; right: 0; top: calc(100% + 8px); display: grid; width: max-content; min-width: 190px; max-width: calc(100vw - 40px); gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 12px 35px rgb(28 45 73 / 18%); } #appHeader .header-more-actions .app-header-action { display: flex !important; align-items: center; justify-content: flex-start; gap: 12px; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 44px !important; padding: 0 12px !important; background: var(--surface-soft) !important; color: var(--text) !important; box-shadow: none !important; } #appHeader .header-more-actions .app-header-action[hidden] { display: none !important; } #appHeader .header-more-actions .app-header-action > span { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; } #appHeader .header-more-actions .app-header-action svg { color: var(--brand) !important; } body[data-auth-state="logged-in"] #appHeader { min-height: 0; padding: 14px; gap: 10px; } body[data-auth-state="logged-in"] #appHeader .app-header-actions { gap: 6px; } body[data-auth-state="logged-in"] #appHeader .app-header-action { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; } body[data-auth-state="logged-in"] #appHeader .app-header-logo { width: 36px; height: 36px; border-radius: 11px; } body[data-auth-state="logged-in"] #appHeader .app-header-version { display: none; } body[data-auth-state="logged-in"] #appHeader .app-header-title-main { font-size: 1.35rem; } body[data-auth-state="logged-in"] #appHeader .app-header-title-sub { display: block; font-size: clamp(.7rem, 2.9vw, .82rem); line-height: 1.5; margin-top: 7px; } body[data-auth-state="logged-in"] #appHeader .app-header-brand { padding: 0; } body[data-auth-state="logged-in"] #appHeader { grid-template-rows: auto auto auto; gap: 8px; background-position: right center; } body[data-auth-state="logged-in"] #appHeader .app-header-brand { grid-row: 1; } body[data-auth-state="logged-in"] #appHeader > .app-header-actions:not(.app-header-demo-actions) { grid-row: 2; justify-content: flex-start; } body[data-auth-state="logged-in"] #appHeader .app-header-pill-row { grid-row: 3; } #appHeader .group-pill-breakdown { display: none !important; } #appHeader .group-summary-pill { max-width: 100% !important; overflow: visible !important; width: 100% !important; justify-content: space-between !important; } #appHeader .group-pill-name { max-width: 105px; } #appHeader .group-pill-item { flex-shrink: 0; } #appHeader .group-pill-separator { display: none !important; } #soundRoutesApp #mapFilterPanel .map-search-control { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; align-items: center; gap: 6px 8px; width: 100% !important; max-width: none !important; } #soundRoutesApp #mapFilterPanel .map-search-control input { grid-column: 1 / -1; width: 100% !important; max-width: none !important; font-size: var(--ui-input-size) !important; } #soundRoutesApp #explorationNav { margin-top: 12px !important; } } @media (max-width: 480px) { /* Accessible names and tooltips remain when the visual labels are compact. */ #soundRoutesApp #explorationNav .tab-btn-content > span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; } #soundRoutesApp #explorationNav .tab-btn { min-height: 46px !important; padding: 9px !important; } #soundRoutesApp #explorationNav .tab-btn svg { width: 22px !important; height: 22px !important; } #soundRoutesApp #aroundScreen .around-actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); width: 100%; } #soundRoutesApp #aroundScreen .around-actions .around-button { width: 100% !important; min-width: 0 !important; max-width: none !important; } } @media (max-width: 380px) { #appHeader.app-header { padding: 14px; } #appHeader > .app-header-actions:not(.app-header-demo-actions) { gap: 6px; } #appHeader .app-header-title { column-gap: 10px; } #appHeader .app-header-logo { width: 40px; height: 40px; border-radius: 12px; } #appHeader .app-header-title-sub { font-size: .75rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* A bounded effects workspace: changing a category, help or duration never changes the form's height. Inputs remain native and keep 40px touch targets. */ @layer ui-contract { #soundRoutesApp #soundRoutesRoot #audioEffectsPanel { max-width: 460px !important; gap: 6px !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsToggle { border-color: color-mix(in srgb, var(--page-tone) 24%, white) !important; background: color-mix(in srgb, var(--page-tone) 5%, white) !important; color: color-mix(in srgb, var(--page-tone) 80%, #374151) !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsMenu:not([hidden]) { box-sizing: border-box !important; display: grid !important; grid-template-rows: 40px minmax(0, 1fr) 112px 32px !important; width: 100% !important; min-width: 0 !important; max-width: 460px !important; height: 332px !important; max-height: none !important; gap: 6px !important; margin: 0 !important; padding: 8px !important; overflow: hidden !important; overflow-anchor: none; border: 1px solid color-mix(in srgb, var(--page-tone) 24%, white) !important; border-radius: 12px !important; background: var(--surface, white) !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsPanel:has(#audioEffectsMenu:not([hidden])) #audioEffectsSelection { display: none !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsSelection { flex-wrap: nowrap !important; max-height: 32px !important; overflow-x: auto !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsSelection > * { flex-shrink: 0 !important; } #soundRoutesApp #soundRoutesRoot .effect-category-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px !important; min-width: 0 !important; } #soundRoutesApp #soundRoutesRoot .effect-category-tabs > button { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 4px !important; margin: 0 !important; font: 500 11px/1.4 var(--font-heading) !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere; border: 1px solid color-mix(in srgb, var(--page-tone) 20%, white) !important; border-radius: 9px !important; background: color-mix(in srgb, var(--page-tone) 3%, white) !important; color: color-mix(in srgb, var(--page-tone) 80%, #374151) !important; box-shadow: none !important; transform: none !important; } #soundRoutesApp #soundRoutesRoot .effect-category-tabs > button[aria-selected=true] { border-color: color-mix(in srgb, var(--page-tone) 55%, white) !important; background: color-mix(in srgb, var(--page-tone) 11%, white) !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsPanel :is(button,input,[role=tabpanel]):focus-visible { outline: 2px solid var(--page-tone) !important; outline-offset: -2px !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsMenu .effect-section-title { display: none !important; } #soundRoutesApp #soundRoutesRoot .effect-category-content { min-width: 0 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding: 2px; } #soundRoutesApp #soundRoutesRoot #audioEffectsMenu .effect-options:not([hidden]) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-content: start !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsMenu .audio-effect-option { padding: 0 4px !important; border-radius: 9px !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsMenu .effect-option-row { min-height: 40px !important; gap: 4px !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsMenu .effect-choice { min-width: 0 !important; min-height: 40px !important; gap: 8px !important; } #soundRoutesApp #soundRoutesRoot #audioEffectsMenu .effect-name { font: 500 12px/1.4 var(--font-heading) !important; overflow-wrap: anywhere; } #soundRoutesApp #soundRoutesRoot #audioEffectsMenu .is-inspected:not(.checked) { border-color: color-mix(in srgb, var(--page-tone) 30%, white) !important; } #soundRoutesApp #soundRoutesRoot #audioEffectInspector { box-sizing: border-box !important; position: relative; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; height: 112px !important; min-height: 0 !important; min-width: 0 !important; padding: 6px 8px !important; border: 1px solid color-mix(in srgb, var(--page-tone) 18%, white) !important; border-radius: 10px !important; background: color-mix(in srgb, var(--page-tone) 3%, white) !important; } #soundRoutesApp #soundRoutesRoot .effect-parameter-slot { min-width: 0 !important; } #soundRoutesApp #soundRoutesRoot #audioEffectParameters .effect-duration:not([hidden]) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: 18px 40px !important; gap: 0 8px !important; padding: 0 !important; margin: 0 !important; } #soundRoutesApp #soundRoutesRoot #audioEffectParameters :is(label,output) { font: 400 11px/1.5 var(--font) !important; margin: 0 !important; } #soundRoutesApp #soundRoutesRoot #audioEffectParameters input[type=range] { height: 40px !important; min-height: 40px !important; margin: 0 !important; } #soundRoutesApp #soundRoutesRoot .effect-detail-slot { min-height: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; } #soundRoutesApp #soundRoutesRoot #audioEffectDetails :is(.effect-description,p) { padding: 0 !important; margin: 0 !important; color: var(--text-soft) !important; font: 400 12px/1.5 var(--font) !important; } #soundRoutesApp #soundRoutesRoot #audioEffectDetailHint:not([hidden]) { display: flex !important; align-items: center; min-height: 72px !important; } #soundRoutesApp #soundRoutesRoot .effect-feedback { position: relative; min-width: 0; min-height: 0; } #soundRoutesApp #soundRoutesRoot .effect-feedback :is(.effect-warning,.effect-status):not([hidden]) { box-sizing: border-box !important; position: absolute; inset: 0; margin: 0 !important; padding: 1px 2px !important; overflow-y: auto !important; overscroll-behavior: contain; border: 0 !important; border-radius: 0 !important; font: 400 11px/1.4 var(--font) !important; background: var(--surface,white) !important; } @media (min-width: 700px) { #soundRoutesApp #soundRoutesRoot #audioEffectsMenu .effect-options:not([hidden]) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } } } /* Shared compact command tier for small mixer/channel switches. */ @layer ui-contract { #soundRoutesApp #soundRoutesRoot #studioScreen button.ui-control-compact { box-sizing: border-box !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; flex: 0 0 32px !important; padding: 0 !important; margin: 0 !important; border-radius: 9px !important; font: 500 11px/1 var(--font-heading) !important; } #soundRoutesApp #soundRoutesRoot #studioScreen button.ui-control-compact svg { width: 16px !important; height: 16px !important; } } /* Current page tones also apply to labels rendered outside the field legend. */ @layer ui-contract { #soundRoutesApp #soundRoutesRoot :is(.filter-label-icon, .list-section-label .label-icon, .map-legend-section-label-icon, .profile-detail-label svg, .profile-connection-label svg) { color: var(--page-tone, var(--section-map)) !important; } #soundRoutesApp #soundRoutesRoot :is(.filter-label-icon, .list-section-label .label-icon, .map-legend-section-label-icon) svg, #soundRoutesApp #soundRoutesRoot :is(.filter-label-icon, .list-section-label .label-icon, .map-legend-section-label-icon) svg * { color: inherit !important; stroke: currentColor !important; } #soundRoutesApp #soundRoutesRoot #mapFilterPanel .map-search-control { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; } #soundRoutesApp #soundRoutesRoot #mapFilterPanel .filter-label-icon { position: absolute !important; inset: 0 auto 0 12px !important; display: flex !important; align-items: center !important; pointer-events: none; } #soundRoutesApp #soundRoutesRoot #mapSearchInput { width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 8px 12px 8px 40px !important; font: 400 var(--ui-input-size)/1.5 var(--font) !important; } #soundRoutesApp #soundRoutesRoot #mapCaptureArea { margin-top: 16px !important; } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 12px !important; margin: 0 !important; padding: 8px !important; min-width: 0 !important; border-radius: 12px !important; overflow: visible !important; box-shadow: none !important; } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend .map-legend-section { min-width: 0 !important; display: grid !important; grid-template-columns: auto minmax(0,1fr) !important; justify-content: start !important; align-items: center !important; gap: 8px !important; flex: 1 1 240px !important; width: auto !important; max-width: 100% !important; } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend .map-legend-section-label { display: inline-flex !important; align-items: center !important; gap: 5px !important; font: 400 12px/1.4 var(--font) !important; text-transform: none !important; letter-spacing: normal !important; min-height: 36px !important; padding: 0 !important; border: 0 !important; } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend .map-legend-section-pills { display: flex !important; min-width: 0 !important; justify-content: flex-start !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important; padding: 3px !important; border: 0 !important; scrollbar-width: none; overscroll-behavior-x: contain; } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend .legend-group-pill { flex: 0 0 auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 36px !important; height: 36px !important; padding: 3px 8px 3px 3px !important; gap: 6px !important; box-sizing: border-box !important; font: 400 12px/1.4 var(--font) !important; } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend .legend-group-pill > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend .legend-group-avatar { width: 24px !important; height: 24px !important; min-width: 24px !important; flex: 0 0 24px !important; } #soundRoutesApp #soundRoutesRoot #mapPanel :is(.map-floating-btn, .leaflet-control-zoom a) { box-sizing: border-box !important; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 12px !important; background: color-mix(in srgb, var(--section-map) 6%, white) !important; color: var(--section-map) !important; border: 1px solid color-mix(in srgb,var(--section-map) 18%,white) !important; box-shadow: 0 2px 8px rgb(31 42 67 / 6%) !important; } #soundRoutesApp #soundRoutesRoot #mapPanel .leaflet-control-zoom { display: grid !important; gap: 6px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #soundRoutesApp #soundRoutesRoot #mapPanel .leaflet-control-zoom a { display: grid !important; place-items: center; line-height: 1 !important; font: 400 24px/1 var(--font) !important; } #soundRoutesApp #soundRoutesRoot #mapPanel .map-floating-btn svg { color: inherit !important; stroke: currentColor !important; width: 20px !important; height: 20px !important; } #soundRoutesApp #soundRoutesRoot .map-layer-menu { width: 184px !important; min-width: 0 !important; padding: 7px !important; gap: 5px !important; border-radius: 14px !important; border-color: color-mix(in srgb,var(--section-map) 20%,white) !important; } #soundRoutesApp #soundRoutesRoot .map-layer-menu button { display: grid !important; grid-template-columns: 24px minmax(0,1fr) !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 40px !important; min-height: 40px !important; padding: 6px 10px !important; gap: 8px !important; border-radius: 10px !important; background: transparent !important; border: 1px solid transparent !important; color: var(--section-map) !important; box-shadow: none !important; font: 500 12px/1.4 var(--font-heading) !important; } #soundRoutesApp #soundRoutesRoot .map-layer-menu button:is(:hover,.active) { background: color-mix(in srgb,var(--section-map) 8%,white) !important; border-color: color-mix(in srgb,var(--section-map) 24%,white) !important; } #soundRoutesApp #soundRoutesRoot .map-layer-menu .map-layer-choice-icon { display: grid !important; place-items: center; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; box-shadow: none !important; border-radius: 0 !important; } #soundRoutesApp #soundRoutesRoot .map-layer-menu .map-layer-choice-icon svg { width: 20px !important; height: 20px !important; color: inherit !important; stroke: currentColor !important; } #soundRoutesApp #soundRoutesRoot :is([data-map-layer="smooth"], .settings-map-grid .map-smooth) { display: none !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .intro-title-lockup { position: relative !important; isolation: isolate; overflow: hidden !important; display: grid !important; grid-template-columns: var(--identity-photo-size) minmax(0,1fr) auto !important; align-items: stretch !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .intro-title-lockup > :not(.profile-identity-wave) { position: relative; z-index: 1; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-identity-tools { display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: flex-end !important; gap: 8px !important; min-width: 0 !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-title-actions, #soundRoutesApp #soundRoutesRoot #profileScreen .profile-account-shortcuts { margin: 0 !important; gap: 6px !important; flex-wrap: nowrap !important; align-self: flex-end !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-account-shortcuts > button { --account-tone: var(--section-map); position: relative !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; flex: 0 0 40px !important; border-radius: 12px !important; background: rgb(255 255 255 / 62%) !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-account-count { position: absolute !important; top: -4px !important; right: -4px !important; z-index: 2; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-identity-wave { position: absolute !important; z-index: 0; right: -12px !important; top: 5% !important; width: 52% !important; height: 90% !important; max-width: none !important; stroke: #b49a60 !important; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; opacity: 0; animation: profile-wave-emerge 8s ease-in-out infinite; mask-image: linear-gradient(90deg,transparent,#000 25%,#000 85%,transparent); } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-empty-state { display: block !important; margin: 8px 0 !important; padding: 10px 0 !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text-soft) !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-empty-state-text { display: grid !important; gap: 4px !important; } @media (max-width: 600px) { #soundRoutesApp #soundRoutesRoot #mapSearchInput { font-size: var(--ui-input-size) !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .intro-title-lockup { grid-template-columns: var(--identity-photo-size) minmax(0,1fr) !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-identity-tools { grid-column: 1 / -1 !important; flex-direction: row !important; justify-content: flex-end !important; gap: 12px !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-identity-tools:has(.profile-title-actions.hidden):has(.profile-account-shortcuts.hidden) { display: none !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-identity-wave { width: 66% !important; } } @media (prefers-reduced-motion: reduce) { #soundRoutesApp #soundRoutesRoot #profileScreen .profile-identity-wave { animation: none !important; opacity: .09; } } } @keyframes profile-wave-emerge { 0%, 18%, 100% { opacity: 0; transform: translateX(12px) scaleY(.65); } 42%, 62% { opacity: .22; transform: translateX(0) scaleY(1); } 82% { opacity: 0; transform: translateX(-8px) scaleY(.8); } } @layer ui-contract { #soundRoutesApp #soundRoutesRoot #mapPanel .map-floating-controls { z-index: 1100 !important; } #soundRoutesApp #soundRoutesRoot #mapPanel .map-layer-menu { z-index: 1101 !important; } #soundRoutesApp #soundRoutesRoot #profileScreen .profile-title-edit-btn { --tool-tone: var(--page-tone); } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend .legend-group-pill > span:last-child { min-width: 0 !important; flex-shrink: 1 !important; } @media (max-width: 600px) { #soundRoutesApp #soundRoutesRoot #mapCaptureArea { height: clamp(280px,52dvh,420px) !important; min-height: 280px !important; aspect-ratio: auto !important; } #soundRoutesApp #soundRoutesRoot #mapGroupsLegend .map-legend-section-label > span:last-child { display: none !important; } #soundRoutesApp #soundRoutesRoot #profileScreen fieldset.ui-readonly-field { padding: 10px !important; } #soundRoutesApp #soundRoutesRoot #profileScreen fieldset.ui-readonly-field > legend { gap: 5px !important; padding-inline: 3px !important; font-size: 11px !important; overflow-wrap: normal !important; } #soundRoutesApp #soundRoutesRoot #profileScreen fieldset.ui-readonly-field > legend > span { min-width: 0 !important; overflow-wrap: normal !important; word-break: normal !important; } #soundRoutesApp #soundRoutesRoot #profileScreen fieldset.ui-readonly-field > legend svg { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; } } } /* The map surface is separate from its tools and journey information. */ @layer ui-contract { #soundRoutesApp #soundRoutesRoot #mapWorkspace { position: relative !important; min-width: 0 !important; width: 100% !important; margin-top: 16px !important; overflow: visible !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace #mapCaptureArea { margin-top: 0 !important; } #soundRoutesApp #soundRoutesRoot #mapToolbar { position: absolute !important; z-index: 1100; top: 14px; left: 14px; right: 14px; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; pointer-events: none; } #soundRoutesApp #soundRoutesRoot #mapToolbar .map-floating-controls { position: static !important; inset: auto !important; margin: 0 !important; pointer-events: auto; } #soundRoutesApp #soundRoutesRoot #mapZoomControls { min-width: 0; pointer-events: auto; } #soundRoutesApp #soundRoutesRoot #mapZoomControls .leaflet-control-zoom { float: none !important; clear: none !important; margin: 0 !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace > .map-location-strip { position: absolute !important; z-index: 520; bottom: 12px; left: 12px; right: 12px; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; width: auto !important; margin: 0 !important; gap: 10px !important; pointer-events: none; } #soundRoutesApp #soundRoutesRoot #mapPanel #completeSoundwalkBtn { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: max-content !important; min-width: 0 !important; max-width: 100% !important; min-height: 40px !important; height: auto !important; padding: 8px 12px !important; gap: 6px !important; margin: 12px 0 0 !important; border-radius: 12px !important; font: 500 var(--ui-button-label-size)/1.5 var(--font-heading) !important; white-space: nowrap !important; } #soundRoutesApp #soundRoutesRoot #mapPanel #completeSoundwalkBtn > span { font: inherit !important; white-space: nowrap !important; flex: 0 0 auto !important; } #soundRoutesApp #soundRoutesRoot #mapPanel #completeSoundwalkBtn svg { width: 18px !important; height: 18px !important; min-width: 18px !important; flex: 0 0 18px !important; } @media (max-width: 700px) { #soundRoutesApp #soundRoutesRoot #mapWorkspace { display: grid !important; gap: 10px !important; } #soundRoutesApp #soundRoutesRoot #mapToolbar { position: relative !important; inset: auto !important; width: 100% !important; align-items: center !important; min-height: 40px !important; } #soundRoutesApp #soundRoutesRoot #mapZoomControls .leaflet-control-zoom { display: flex !important; gap: 6px !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace #mapCaptureArea { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1 !important; border-radius: 16px !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace #mapCaptureArea #map { width: 100% !important; height: 100% !important; min-height: 0 !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace > .map-location-strip { position: static !important; inset: auto !important; display: grid !important; grid-template-columns: auto minmax(0,1fr) !important; align-items: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace .map-progress-status-stack { display: flex !important; flex-direction: row !important; gap: 6px !important; min-width: 0 !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace .map-location-strip .diagnostic-pill { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; min-height: 28px !important; padding: 4px 7px !important; gap: 4px !important; font: 400 11px/1.35 var(--font) !important; border-radius: 10px !important; box-shadow: none !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace .map-location-strip .map-status-icon { width: 14px !important; height: 14px !important; min-width: 14px !important; flex: 0 0 14px !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace #gpsQualityIndicator { justify-self: end !important; } #soundRoutesApp #soundRoutesRoot #mapWorkspace .map-location-strip .diagnostic-value { max-width: none !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; } #soundRoutesApp #soundRoutesRoot #mapPanel .map-diagnostic-strip { margin-top: 10px !important; } #soundRoutesApp #soundRoutesRoot #mapPanel .map-diagnostic-strip .diagnostic-pill { font-size: 10px !important; padding: 4px 7px !important; min-height: 24px !important; } } } @layer ui-contract { #soundRoutesApp #soundRoutesRoot #mapPanel #mapLayerMenu { position: fixed !important; top: var(--map-menu-top,8px) !important; left: var(--map-menu-left,8px) !important; right: auto !important; bottom: auto !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow: auto !important; overscroll-behavior: contain; } } /* Narrow phones share one type scale across every screen and dialog. Most UI text already uses rem; changing its root also reaches dynamically built cards. Percentages retain the reader's default font size and normal browser zoom. Control heights, icons, rating cells and the studio's pixel-sized meters stay independent of this scale. */ @media (max-width: 389px) { html:has(#soundRoutesApp) { font-size: 93.75%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #soundRoutesApp { font-size: .9375rem; --fs-body: .9375rem; --ui-micro-label-size: max(10px, .72rem); } } @media (max-width: 340px) { html:has(#soundRoutesApp) { font-size: 87.5%; } } /* Field text follows the label scale throughout the app, including the DAW. Text entry and touch geometry are separate: fields stay 40px tall. */ #soundRoutesApp { --ui-button-label-size: max(11px, .75rem); --ui-title-label-size: max(11px, .75rem); --ui-input-size: .8125rem; --ui-field-font-size: var(--ui-input-size); --ui-field-height: 40px; --control-h: 40px; } @layer ui-contract { #soundRoutesApp #soundRoutesRoot :is( input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"]), select, textarea ) { font-size: var(--ui-input-size) !important; line-height: 1.5 !important; } #soundRoutesApp #soundRoutesRoot :is(input, textarea)::placeholder { font-size: inherit !important; } #soundRoutesApp #soundRoutesRoot .ui-fieldset :is( input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"]), select, textarea ) { border-radius: 10px !important; padding: 8px 10px !important; } #soundRoutesApp #soundRoutesRoot .ui-fieldset :is(input, select, textarea):not(.field-missing, [aria-invalid="true"], :user-invalid, .field-missing *) { border-color: color-mix(in srgb, var(--page-tone) 24%, white) !important; } #soundRoutesApp #soundRoutesRoot .ui-fieldset :is( input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="button"], [type="submit"]), select ) { height: 40px !important; min-height: 40px !important; } #soundRoutesApp #soundRoutesRoot .ui-fieldset textarea { min-height: 88px !important; } #soundRoutesApp #soundRoutesRoot .ui-fieldset select { padding-inline-end: 28px !important; } /* One compact label size for actions, navigation and menus. Dedicated meter, rating and channel controls keep their existing small type. */ #soundRoutesApp :is(#soundRoutesRoot, .confirm-modal-backdrop) :is( button, summary, [role="button"] ):not(.entry-rating-star, .app-header-version, .studio-pane-button, .studio-track-name, .studio-console-name, .studio-console-slot, .studio-track-switches button, .studio-console-switches button, .group-summary-pill button, .around-headset-control) { font-size: var(--ui-button-label-size) !important; } #soundRoutesApp .group-summary-pill :is(.group-pill-action, .group-pill-name, .group-pill-count) { font-size: max(10px, .6875rem) !important; } #soundRoutesApp .choice-card .choice-icon-button:focus-visible { outline: 2px solid var(--ui-focus-color) !important; outline-offset: -3px !important; } #soundRoutesApp #soundRoutesRoot .settings-device-label-icon { color: var(--page-tone) !important; } #soundRoutesApp #soundRoutesRoot .settings-device-label-icon svg { color: inherit !important; stroke: currentColor !important; } #soundRoutesApp .choice-card .choice-card-inner > :is(.choice-icon, .toggle-icon) { display: grid !important; place-items: center !important; justify-self: center !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; } #soundRoutesApp #soundRoutesRoot #settingsScreen .settings-map-grid { padding: 0 !important; border: 0 !important; background: transparent !important; } /* The stage remains immersive; its surrounding controls use the same quiet surfaces, page accent and outlined groups as recording and creation. */ #soundRoutesApp #soundRoutesRoot #aroundScreen .around-card { border: 1px solid var(--line) !important; border-radius: 18px !important; background: var(--surface) !important; box-shadow: none !important; } #soundRoutesApp #soundRoutesRoot #aroundScreen fieldset.around-field { display: block !important; grid-template-rows: none !important; } #soundRoutesApp #soundRoutesRoot #aroundScreen .around-choice { --choice-tone: var(--page-tone) !important; } #soundRoutesApp #soundRoutesRoot #aroundScreen .around-range input { accent-color: var(--page-tone) !important; } #soundRoutesApp #soundRoutesRoot #aroundMask { --tool-tone: var(--page-tone) !important; } #soundRoutesApp #soundRoutesRoot #aroundScreen .around-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; } #soundRoutesApp #soundRoutesRoot #aroundScreen .around-button { --tool-tone: var(--around-tone, var(--page-tone)); width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 40px !important; height: auto !important; padding: 8px 10px !important; border-radius: 12px !important; } #soundRoutesApp #soundRoutesRoot #aroundScreen .around-back { width: 40px !important; height: 40px !important; padding: 0 !important; } #soundRoutesApp #soundRoutesRoot #aroundScreen .around-toolbar > .around-choice { width: 100%; } #soundRoutesApp #soundRoutesRoot #aroundScreen #aroundEmpty { border: 0 !important; padding: 0 !important; background: transparent !important; } #soundRoutesApp #soundRoutesRoot #aroundScreen .around-secondary { border: 0 !important; } #soundRoutesApp :is(button, summary, .label-icon, .filter-label-icon, .page-title-pill, .section-heading-icon) svg[data-sound-routes-icon] { stroke-width: 2.15 !important; } @media (max-width: 600px) { #soundRoutesApp #soundRoutesRoot #aroundScreen .around-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } } @layer ui-contract { @media (max-width: 389px) { #soundRoutesApp #appHeader .app-header-brand-line > .app-header-title-main { font-size: clamp(1rem, 4.8vw, 1.15rem) !important; } /* The scenic banner subtitle is already small. Do not scale it below its existing 320px size or shrink fine-print/choice labels without a floor. */ #soundRoutesApp #soundRoutesRoot #appHeader .app-header-title-sub { font-size: max(10.5px, .7rem) !important; } #soundRoutesApp .choice-card .choice-title { font-size: max(11px, .75rem) !important; } #soundRoutesApp :is(.small-text, .hint, .help-text, .image-field-note, .audio-visualization-caption) { font-size: max(11px, .78rem) !important; } #soundRoutesApp #soundRoutesRoot fieldset.ui-readonly-field > :is(strong, .profile-overview-value, .profile-overview-description) { font-size: max(11.5px, .8125rem) !important; } #soundRoutesApp #authWelcomeTitle { font-size: 1.5rem !important; } #soundRoutesApp :is(.auth-welcome-description, #authWelcomeLoginBtn) { font-size: .8125rem !important; } #soundRoutesApp #authWelcomeSignupBtn { font-size: max(11px, .75rem) !important; } #soundRoutesApp #soundRoutesRoot .app-credit { font-size: max(10px, .68rem) !important; } } } @layer ui-contract { #soundRoutesApp .auth-playground-button { margin-top: 8px !important; width: 100% !important; background: #edf3f6 !important; border: 1px solid #bed2db !important; color: #286473 !important; } #soundRoutesApp .auth-playground-note { margin: 0 !important; color: #617385 !important; font: 400 .75rem/1.6 var(--font) !important; } #soundRoutesApp .playground-only { display: none !important; } #soundRoutesApp[data-playground=true] .playground-only { display: block !important; } #soundRoutesApp[data-playground=true] .playground-session-note { padding: 10px 12px; border: 1px solid #c9dce2; border-radius: 12px; background: #f0f6f7; color: #426b74; } #soundRoutesApp[data-playground=true] #appHeader :is(.app-header-pill-row,.app-header-title-sub,.app-header-wave,#demoSeedActions), #soundRoutesApp[data-playground=true] #appHeader [data-header-action]:not([data-header-action=settings]), #soundRoutesApp[data-playground=true] #headerMoreMenu > summary, #soundRoutesApp[data-playground=true] :is(#settingsProfileHubActions,#communicationNav,#recordingContextField,#visibilityField,#draftRecoveryBanner,#completeSoundwalkBtn,#mapGroupsLegend .map-legend-section-users), #soundRoutesApp[data-playground=true] #settingsScreen fieldset:has(input[name=settingsSoundVisibilityChoice],input[name=settingsSoundwalkVisibilityChoice]) { display: none !important; } #soundRoutesApp[data-playground=true] #headerMoreMenu { display: contents !important; } #soundRoutesApp[data-playground=true] #headerMoreMenu .header-more-actions { display: flex !important; position: static !important; width: auto !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } #soundRoutesApp[data-playground=true] #settingsBtn { display: inline-flex !important; } #soundRoutesApp[data-playground=true] #appHeader { min-height: 0 !important; padding: 14px 18px !important; } #soundRoutesApp[data-playground=true] #appHeader .app-header-actions { margin: 0 !important; } #soundRoutesApp[data-playground=true] #mainTitle::after { content: 'Playground'; display: inline-block; margin-left: 8px; color: #dcecf1; font: 500 .75rem/1.5 var(--font-heading); } #soundRoutesApp[data-playground=true] #soundRoutesRoot :is(#settingsProfileHubActions,#communicationNav,#recordingContextField,#visibilityField,#draftRecoveryBanner,#completeSoundwalkBtn), #soundRoutesApp[data-playground=true] #soundRoutesRoot #mapGroupsLegend .map-legend-section-users { display: none !important; } #soundRoutesApp[data-playground=true] #soundRoutesRoot #appHeader { display: grid !important; grid-template-columns: minmax(0,1fr) 40px !important; align-items: center !important; gap: 8px !important; } #soundRoutesApp[data-playground=true] #soundRoutesRoot #appHeader > .app-header-actions:not(.app-header-demo-actions) { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; } #soundRoutesApp[data-playground=true] #soundRoutesRoot #appHeader .app-header-brand { grid-column: 1 !important; grid-row: 1 !important; padding: 0 !important; margin: 0 !important; } #soundRoutesApp[data-playground=true] #soundRoutesRoot #appHeader #mainTitle { column-gap: 6px !important; } }