@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); .poi-action-icons.svelte-10larau { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; width: 100%; box-sizing: border-box; } .action-row.svelte-10larau { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 4px 12px; background-color: transparent; color: var(--color-text); cursor: pointer; transition: background-color 0.2s ease-in-out; border: 0; margin: 0; text-align: left; width: 100%; } .action-row.svelte-10larau:hover { background-color: var(--color-background-mute); } .icon-wrapper.svelte-10larau { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; } .action-title.svelte-10larau { font-size: 14px; color: var(--color-indigo-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:hover { text-decoration: underline; } } .action-row.svelte-10larau .logo:where(.svelte-10larau) { width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; } .action-row.youtube.svelte-10larau .logo:where(.svelte-10larau) { background-image: url('../../../map-graphics/youtube.png'); background-size: 28px; } .action-row.navily.svelte-10larau .logo:where(.svelte-10larau) { background-image: url('../../../map-graphics/navily.png'); background-size: 160px; background-position: -14px -6px; } .action-row.google-maps.svelte-10larau .logo:where(.svelte-10larau) { background-image: url('../../../map-graphics/maps.png'); background-size: 58px; } .action-row.external.svelte-10larau .logo:where(.svelte-10larau) { background-image: url('../../../map-graphics/external.png'); background-size: 22px; } @media (max-width: 600px) { } /* Dark mode (class-based — html.dark) */ html.dark .action-row.svelte-10larau { color: #f3f4f6; } html.dark .action-row.svelte-10larau:hover { background-color: #374151; } html.dark .action-title.svelte-10larau { color: #93c5fd; } /* The external-link logo is a single-colour black PNG that vanishes on the dark panel; invert it to white. The Navily/YouTube/Google-Maps logos are full-colour bitmaps and stay untouched. */ html.dark .action-row.external.svelte-10larau .logo:where(.svelte-10larau) { filter: invert(1); } .button-container.svelte-6v9ve9 { display: flex; justify-content: center; width: 100%; margin: 8px 0; } .google-place-button.svelte-6v9ve9 { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 16px; background-color: #e8f0fe; color: #1a73e8; border: none; border-radius: 20px; cursor: pointer; font-family: 'Google Sans', Roboto, Arial, sans-serif; font-size: 14px; font-weight: 400; transition: background-color 0.2s ease-in-out; } .google-place-button.svelte-6v9ve9:hover { background-color: #d2e3fc; } .google-place-button.svelte-6v9ve9:active { background-color: #c4d7f5; } .google-maps-logo.svelte-6v9ve9 { width: 20px; height: 20px; background-image: url('../../../map-graphics/maps.png'); background-size: 52px; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .button-text.svelte-6v9ve9 { white-space: nowrap; } .button-text.svelte-6v9ve9 strong:where(.svelte-6v9ve9) { font-weight: 600; } /* Class-based dark mode toggled by $lib/utils/theme.ts on . */ html.dark .google-place-button.svelte-6v9ve9 { background-color: #1e3a8a; color: #93c5fd; } html.dark .google-place-button.svelte-6v9ve9:hover { background-color: #1e40af; } html.dark .google-place-button.svelte-6v9ve9:active { background-color: #2563eb; } /* 1h/3h/6h/12h/1d forecast cadence toggle (moved from PoiFacilities, U4). */ .resolution-toggle.svelte-a42hs2 { display: inline-flex; flex-shrink: 0; border: 1px solid var(--color-gray-200, #e5e7eb); border-radius: 9999px; overflow: hidden; background: var(--card-background, #fff); } .res-btn.svelte-a42hs2 { border: 0; background: transparent; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.5; color: #6b7280; cursor: pointer; transition: background 0.15s, color 0.15s; } .res-btn.active.svelte-a42hs2 { background: #1976d2; color: #fff; } html.dark .resolution-toggle.svelte-a42hs2 { border-color: #374151; background: #1f2937; } html.dark .res-btn.svelte-a42hs2 { color: #9ca3af; } html.dark .res-btn.active.svelte-a42hs2 { background: #60a5fa; color: #0b1220; } .contact-details.svelte-d5o650 { padding: 4px 10px; display: flex; flex-direction: column; row-gap: 12px; .contact-item:where(.svelte-d5o650) { display: flex; align-items: center; column-gap: 12px; font-size: 14px; color: var(--color-text); /* Phone/email fields: keep the original text inline with the swapped-in tokens, wrapping as a unit rather than stacking each on its own row. */ .phone-field:where(.svelte-d5o650), .email-field:where(.svelte-d5o650) { display: inline-flex; flex-wrap: wrap; align-items: center; white-space: pre-wrap; } a:where(.svelte-d5o650), a:where(.svelte-d5o650):visited, a:where(.svelte-d5o650):link, a:where(.svelte-d5o650):hover { text-decoration: none; color: #0b57d0; } } } /* Dark mode (class-based — html.dark) */ html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) { color: #f3f4f6; } html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) a:where(.svelte-d5o650), html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) a:where(.svelte-d5o650):visited, html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) a:where(.svelte-d5o650):link, html.dark .contact-details.svelte-d5o650 .contact-item:where(.svelte-d5o650) a:where(.svelte-d5o650):hover { color: #93c5fd; } html.dark .contact-details.svelte-d5o650 .material-symbols-outlined:where(.svelte-d5o650) { color: #d1d5db; } .haven-score-graph.svelte-1ges2s0 { touch-action: none; user-select: none; cursor: grab; /* The score pill always floats above the line; at high scores it extends past the top of the plot frame. Let it draw there (it may overlap the slider above — acceptable) rather than being clipped. */ overflow: visible; } .haven-score-graph.grabbing.svelte-1ges2s0 { cursor: grabbing; } .curve-layer.svelte-1ges2s0 { transition: transform 0.2s ease-out; } .curve-layer.dragging.svelte-1ges2s0 { transition: none; } /* Fill comes from the per-band alpha-ramp gradient (black); the theme strength is applied here as element opacity (× the gradient's 0→1→0 edge ramp). */ .night-rect.svelte-1ges2s0 { opacity: 0.14; } .gridline.svelte-1ges2s0 { stroke: rgba(100, 116, 139, 0.35); stroke-width: 1; } .grid-label.svelte-1ges2s0 { font-size: 9px; font-family: sans-serif; fill: #64748b; } .axis-title.svelte-1ges2s0 { font-size: 9px; font-family: sans-serif; font-weight: 600; letter-spacing: 0.3px; fill: #94a3b8; } .marker-line.svelte-1ges2s0 { stroke: rgba(100, 116, 139, 0.6); stroke-width: 1; stroke-dasharray: 3 3; } .score-pill-text.svelte-1ges2s0 { font-size: 11px; font-family: sans-serif; font-weight: 700; fill: #fff; } /* Dot + pill glide vertically between steps; instant while actively scrolling (mirrors .curve-layer so the dot tracks the line frame-for-frame mid-drag). */ .marker-dot.svelte-1ges2s0 { transition: transform 0.2s ease-out; } .marker-dot.dragging.svelte-1ges2s0 { transition: none; } /* Dark mode overrides */ html.dark .night-rect.svelte-1ges2s0 { /* Stronger on dark so the night band stays visible against dark bands. */ opacity: 0.30; } html.dark .gridline.svelte-1ges2s0 { stroke: rgba(148, 163, 184, 0.25); } html.dark .grid-label.svelte-1ges2s0 { fill: #94a3b8; } html.dark .axis-title.svelte-1ges2s0 { fill: #64748b; } html.dark .marker-line.svelte-1ges2s0 { stroke: rgba(148, 163, 184, 0.5); } .poi-facilities-container.svelte-1l73rip { width:100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--text-color); padding: 4px 0; box-sizing: border-box; max-height: 140px; overflow: hidden; .more:where(.svelte-1l73rip) { position:absolute; right: 12px; top: 50%; transform: translateY(-50%); display:flex; align-items: center; justify-content: flex-end; button:where(.svelte-1l73rip) { height: 36px; width: 36px; border:0; background-color: var(--color-gray-200); border-radius: 9999px; display:flex; align-items: center; justify-content: center; cursor: pointer; .material-symbols-outlined:where(.svelte-1l73rip) { font-size: 24px; color: var(--icon-color); } } } .poi-facilities:where(.svelte-1l73rip) { border:0; background:transparent; width: 100%; text-align: left; line-height: 0; padding-right: 40px; &::-webkit-scrollbar { display: none; } .facility-item:where(.svelte-1l73rip) { display: inline-flex; vertical-align: middle; align-items: center; gap: 4px; background-color: var(--card-background); padding: 4px 8px; border-radius: 4px; .material-symbols-outlined:where(.svelte-1l73rip) { padding:2px 0; } .facility-icon:where(.svelte-1l73rip) { width: 28px; height: 28px; min-width: 28px; min-height: 28px; fill: var(--icon-color); } } } &.is-open { max-height: none; align-items: flex-start; column-gap: 0; padding: 11px 3px; .more:where(.svelte-1l73rip) { top: 10px; transform: none; } .more-info:where(.svelte-1l73rip) { width:100%; display: flex; flex-direction: row; /* When there isn't room for the facilities beside the weather section, the weather section wraps as a WHOLE onto its own full-width row (its internal weather|wind-rose columns stay side by side — R12: temp/humidity never above the rose). */ flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px; /* Size container so the weather section can compress its internal gap at narrow widths (see @container below). */ container-type: inline-size; } .facilities-column:where(.svelte-1l73rip) { display: flex; flex-direction: column; /* basis:auto (not 0) so the column's natural width drives the flex line-break: if the labels can't fit beside the weather section, the weather section wraps instead of crowding them. */ flex: 1 1 auto; min-width: 0; } .poi-facilities:where(.svelte-1l73rip) { display: flex; text-align: initial; line-height: normal; padding-right: 0; width: auto; flex-shrink: 0; flex-direction: column; align-items: flex-start; row-gap:8px; .facility-item:where(.svelte-1l73rip) { column-gap:12px; } } .weather-wind-section:where(.svelte-1l73rip) { display: flex; flex-direction: row; /* stretch so the weather column spans the wind-rose height; that lets the 1h/3h toggle (item 13) pin to the bottom, level with the wind-rose legend, while the readout stays vertically centered. */ align-items: stretch; gap: 35px; /* 40px to account for wind rose arrow length */ flex-shrink: 0; /* Centered when it wraps onto its own row; inert while sharing a row (the facilities column's flex-grow absorbs free space). */ margin-inline: auto; } /* Narrow panels: once the weather section is on its own row and space is still tight, compress the inter-column gap (the weather column already renders above the rose arrows via z-index) — but NEVER stack the two columns. */ @container (max-width: 410px) { .weather-wind-section:where(.svelte-1l73rip) { gap: 12px; } } .weather-column:where(.svelte-1l73rip) { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; /* Render above wind rose arrows */ } /* Wraps the WeatherDisplay so it centers in the space above the bottom-pinned 1h/3h toggle when the column is stretched. */ .weather-display-wrap:where(.svelte-1l73rip) { flex: 1; display: flex; align-items: center; justify-content: center; } .wind-rose-column:where(.svelte-1l73rip) { flex-shrink: 0; } } } .time-slider-container.svelte-1l73rip { width: 100%; } /* Item 14: haven score graph (havens only) */ .haven-graph-container.svelte-1l73rip { width: 100%; padding: 2px 0 0; } /* Worst-gust note for coarse cadences (explains a low worst-case score) */ .max-gust-note.svelte-1l73rip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: #b45309; /* amber-700 */ white-space: nowrap; } .max-gust-note.svelte-1l73rip .material-symbols-outlined:where(.svelte-1l73rip) { font-size: 14px; } html.dark .max-gust-note.svelte-1l73rip { color: #fbbf24; /* amber-400 */ } /* Forecast cadence toggle styles moved to CadenceControl.svelte (U4). */ .weather-loading.svelte-1l73rip, .weather-error.svelte-1l73rip { display: flex; align-items: center; gap: 8px; padding: 16px; color: #666; font-size: 13px; } .weather-error.svelte-1l73rip { color: #999; } .spinning.svelte-1l73rip { animation: svelte-1l73rip-spin 1s linear infinite; } @keyframes svelte-1l73rip-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .weather-compact.svelte-1l73rip { display: inline-flex; vertical-align: middle; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; } .inline-windrose.svelte-1l73rip { display: inline-flex; vertical-align: middle; } .weather-compact-icon.svelte-1l73rip { width: 22px; height: 22px; } .temp-compact.svelte-1l73rip { color: #333; } .wind-compact.svelte-1l73rip { color: #1976d2; } /* Dark mode (class-based — html.dark) */ html.dark .facility-icon.svelte-1l73rip { /* Facility SVGs ship as black-on-transparent — invert to white-on- transparent for dark mode rather than rebuilding the assets. */ filter: invert(1); } html.dark .material-symbols-outlined.svelte-1l73rip, html.dark .temp-compact.svelte-1l73rip { color: #f3f4f6; } html.dark .wind-compact.svelte-1l73rip { color: #60a5fa; } html.dark .weather-compact.svelte-1l73rip .text-gray-400:where(.svelte-1l73rip) { color: #9ca3af; } /* Round chevron-up "collapse facilities" button uses --color-gray-200 which the theme system doesn't remap; force a dark surface so it doesn't read as a flashlight on the dark panel. */ html.dark .poi-facilities-container.svelte-1l73rip .more:where(.svelte-1l73rip) button:where(.svelte-1l73rip) { background-color: #374151; } html.dark .poi-facilities-container.svelte-1l73rip .more:where(.svelte-1l73rip) button:where(.svelte-1l73rip) .material-symbols-outlined:where(.svelte-1l73rip) { color: #f3f4f6; } .icon.share.svelte-1hj3f1v { border: 0; background: transparent; cursor: pointer; span:where(.svelte-1hj3f1v) { font-size: 28px; } } .locale-pill-wrapper.svelte-16vdizi { position: relative; display: inline-flex; /* RTL-safe right-align: sits at the logical end of the parent flex row in both LTR and RTL. */ margin-inline-start: auto; } .locale-pill.svelte-16vdizi { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; border: 1px solid rgb(0 0 0 / 12%); background: rgb(255 255 255 / 80%); color: #374151; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; cursor: pointer; transition: background 120ms ease, opacity 120ms ease; } .locale-pill.svelte-16vdizi:hover { background: rgb(255 255 255 / 100%); } .locale-pill-disabled.svelte-16vdizi { opacity: 0.5; pointer-events: none; cursor: wait; } .locale-pill-code.svelte-16vdizi { line-height: 1.2; } .locale-pill-chevron.svelte-16vdizi { width: 12px; height: 12px; color: rgb(0 0 0 / 50%); } .locale-pill-spinner.svelte-16vdizi { font-size: 12px; animation: svelte-16vdizi-locale-pill-spin 1s linear infinite; } @keyframes svelte-16vdizi-locale-pill-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .locale-pill-popover.svelte-16vdizi { position: absolute; top: calc(100% + 4px); /* Anchor to the logical end of the pill so RTL flips it naturally and the popover never overflows the panel edge. */ inset-inline-end: 0; z-index: 1010; min-width: 180px; padding: 4px; background: #fff; border: 1px solid rgb(0 0 0 / 8%); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 12%); } .locale-pill-option.svelte-16vdizi { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; background: transparent; color: #1f2937; font-size: 13px; text-align: start; cursor: pointer; border-radius: 4px; } .locale-pill-option.svelte-16vdizi:hover, .locale-pill-option.svelte-16vdizi:focus-visible { background: rgb(0 0 0 / 5%); outline: none; } .locale-pill-option-active.svelte-16vdizi { font-weight: 600; } .locale-pill-option-check.svelte-16vdizi { width: 14px; color: #2563eb; } .locale-pill-option-name.svelte-16vdizi { flex: 1; } .locale-pill-option-code.svelte-16vdizi { color: rgb(0 0 0 / 50%); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } /* Dark mode — match the rest of the map panels. */ html.dark .locale-pill.svelte-16vdizi { background: rgb(31 41 55 / 80%); color: #e5e7eb; border-color: rgb(255 255 255 / 12%); } html.dark .locale-pill.svelte-16vdizi:hover { background: rgb(31 41 55 / 100%); } html.dark .locale-pill-chevron.svelte-16vdizi { color: rgb(255 255 255 / 50%); } html.dark .locale-pill-popover.svelte-16vdizi { background: #1f2937; border-color: rgb(255 255 255 / 12%); color: #e5e7eb; } html.dark .locale-pill-option.svelte-16vdizi { color: #e5e7eb; } html.dark .locale-pill-option.svelte-16vdizi:hover, html.dark .locale-pill-option.svelte-16vdizi:focus-visible { background: rgb(255 255 255 / 10%); } .report-form { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; font-family: "Open Sans", sans-serif; } .report-header { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 600; } .back-arrow, .close-x { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } } .report-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; overflow-y: auto; } .section-label { margin-top: 8px; font-size: 14px; font-weight: 600; color: #374151; } /* Severity cards */ .severity-cards { display: flex; flex-direction: column; gap: 8px; } .severity-card { display: grid; grid-template-rows: auto auto; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; text-align: left; cursor: pointer; background: white; border: 2px solid #e5e7eb; border-radius: 10px; transition: border-color 0.15s, background-color 0.15s; &:hover { background: #f9fafb; } &.selected { background: color-mix(in srgb, var(--card-color) 6%, white); border-color: var(--card-color); } } .severity-emoji { grid-row: 1 / -1; align-self: center; font-size: 22px; } .severity-label { font-size: 14px; font-weight: 600; color: #1f2937; } .severity-sublabel { font-size: 12px; color: #6b7280; } /* Description textarea */ textarea#report-description { box-sizing: border-box; width: 100%; min-height: 80px; padding: 10px 12px; font-family: "Open Sans", sans-serif; font-size: 14px; resize: vertical; border: 1px solid #d1d5db; border-radius: 8px; &:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgb(59 130 246 / 20%); } } /* Photo upload */ .photo-buttons { display: flex; gap: 8px; } .upload-btn { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; font-size: 13px; font-weight: 500; color: #374151; cursor: pointer; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 8px; transition: background 0.15s; &:hover { background: #e5e7eb; } .material-symbols-outlined { font-size: 18px; } } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (width <= 400px) { .photo-grid { grid-template-columns: repeat(2, 1fr); } } .photo-preview { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; img { width: 100%; height: 100%; object-fit: cover; } .remove-photo { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; color: white; cursor: pointer; background: rgb(239 68 68 / 90%); border: none; border-radius: 50%; .material-symbols-outlined { font-size: 16px; } } } /* Email field */ .email-subtitle { margin: 0; font-size: 12px; color: #6b7280; } /* Photo upload consent notice (shown under the photo buttons in both modes) */ .photo-consent { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: #6b7280; } .report-form input[type="text"], .report-form input[type="email"] { box-sizing: border-box; width: 100%; padding: 10px 12px; font-family: "Open Sans", sans-serif; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; &:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 2px rgb(59 130 246 / 20%); } } /* Error message */ .error-message { margin: 0; font-size: 13px; color: #ef4444; } /* Submit button */ .submit-button { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; padding: 12px 16px; margin-top: 8px; font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 600; color: white; cursor: pointer; background: #3b82f6; border: none; border-radius: 10px; transition: background 0.15s; &:hover:not(:disabled) { background: #2563eb; } &:disabled { cursor: not-allowed; background: #9ca3af; } .spinning { font-size: 18px; animation: spin 1s linear infinite; } } /* Success view */ .success-view { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; .success-icon { font-size: 48px; } h3 { margin: 0; font-size: 20px; font-weight: 600; color: #1f2937; } p { margin: 0; font-size: 14px; color: #6b7280; } .email-note { font-size: 13px; font-style: italic; color: #3b82f6; } } .back-button-full { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 240px; padding: 10px 20px; margin-top: 16px; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; color: #3b82f6; cursor: pointer; background: white; border: 2px solid #3b82f6; border-radius: 10px; transition: background 0.15s; &:hover { background: #eff6ff; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Dark mode (class-based — html.dark) lives here so :global() compiles. */ html.dark .report-form, html.dark .severity-label { color: #f3f4f6; } html.dark .report-header { border-bottom-color: rgb(255 255 255 / 10%); } html.dark .report-header .back-arrow, html.dark .report-header .close-x { color: #f3f4f6; background: #374151; } html.dark .section-label { color: #e5e7eb; } html.dark .severity-card { color: #f3f4f6; background: #374151; border-color: #4b5563; } html.dark .severity-card:hover { background: #4b5563; } html.dark .severity-card.selected { background: color-mix(in srgb, var(--card-color) 18%, #374151); border-color: var(--card-color); } html.dark .severity-sublabel, html.dark .email-subtitle, html.dark .photo-consent, html.dark .success-view p { color: #9ca3af; } html.dark .report-form textarea#report-description, html.dark .report-form input[type="text"], html.dark .report-form input[type="email"] { color: #f3f4f6; background: #374151; border-color: #4b5563; } html.dark .report-form textarea#report-description::placeholder, html.dark .report-form input[type="text"]::placeholder, html.dark .report-form input[type="email"]::placeholder { color: #9ca3af; } html.dark .report-form textarea#report-description:focus, html.dark .report-form input[type="text"]:focus, html.dark .report-form input[type="email"]:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgb(59 130 246 / 35%); } html.dark .upload-btn { color: #f3f4f6; background: #374151; border-color: #4b5563; } html.dark .upload-btn:hover { background: #4b5563; } html.dark .error-message { color: #f87171; } html.dark .submit-button:disabled { background: #4b5563; } html.dark .success-view h3 { color: #f3f4f6; } html.dark .success-view .email-note, html.dark .back-button-full { color: #60a5fa; } html.dark .back-button-full { background: transparent; border-color: #60a5fa; } html.dark .back-button-full:hover { background: rgb(96 165 250 / 12%); } .slide-panel { overflow: hidden; background-color: white; box-shadow: 0 -2px 10px rgb(0 0 0 / 10%); will-change: transform; } .slide-panel.portrait { border-radius: 20px 20px 0 0; } .slide-panel.landscape { border-radius: 0; box-shadow: -2px 0 10px rgb(0 0 0 / 10%); } /* Drag handle areas */ .drag-handle-area { flex-shrink: 0; touch-action: none; cursor: grab; user-select: none; } .drag-handle-area:active { cursor: grabbing; } /* Portrait: horizontal pill at top */ .portrait-handle { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; } .portrait-collapse-btn { position: absolute; top: 50%; right: 12px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: #5f6368; touch-action: manipulation; cursor: pointer; background: transparent; border: none; border-radius: 50%; transform: translateY(-50%); } .portrait-collapse-btn:active { background-color: rgb(0 0 0 / 8%); } .portrait-collapse-btn .material-symbols-outlined { font-size: 22px; } .drag-pill { width: 36px; height: 4px; background-color: #dadce0; border-radius: 2px; } /* Landscape: vertical bar on left edge */ .landscape-handle { position: absolute; top: 0; left: -12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 100%; } .drag-bar { width: 4px; height: 48px; background-color: #dadce0; border-radius: 2px; } .landscape-handle:hover .drag-bar { background-color: #bbb; } .landscape-collapse-btn { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: #5f6368; touch-action: manipulation; cursor: pointer; background: transparent; border: none; border-radius: 50%; transform: translate(-50%, -50%); } .landscape-collapse-btn:active { background-color: rgb(0 0 0 / 8%); } .landscape-collapse-btn .material-symbols-outlined { font-size: 20px; } /* Inner layout */ .slide-panel-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .slide-panel.portrait .slide-panel-inner { height: calc(100% - 28px); /* subtract handle height */ } .slide-panel-header { flex-shrink: 0; } .slide-panel-content { flex: 1; /* Contain scroll chaining so flinging past the end of the panel never scrolls the page/map behind it. */ overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Smooth max-height transition during snap animation */ .slide-panel.portrait.is-animating .slide-panel-inner { transition: max-height 0.3s cubic-bezier(0.77, 0, 0.175, 1); } /* Disable scrollbar flicker during drag */ .slide-panel.is-dragging .slide-panel-content { overflow: hidden; } /* Dark-mode rules live inside SlidePanel.svelte's \3c style> block so :global() compiles correctly. */ /* Dark mode lives here in the Svelte \3c style> block (not the imported CSS file) so :global() reliably reaches the compiler. Selectors use the class-based dark mode set up by $lib/utils/theme.ts on . */ html.dark .slide-panel { background-color: #1f2937; color: #f3f4f6; box-shadow: 0 -2px 10px rgb(0 0 0 / 50%); } html.dark .slide-panel.landscape { box-shadow: -2px 0 10px rgb(0 0 0 / 50%); } html.dark .drag-pill, html.dark .drag-bar { background-color: #4b5563; } html.dark .landscape-handle:hover .drag-bar { background-color: #6b7280; } html.dark .portrait-collapse-btn, html.dark .landscape-collapse-btn { color: #d1d5db; } html.dark .portrait-collapse-btn:active, html.dark .landscape-collapse-btn:active { background-color: rgb(255 255 255 / 8%); } /* InfoPanel content styles - positioning handled by SlidePanel */ .poi-header { position: relative; display: flex; flex-flow: column wrap; gap: 10px; row-gap: 2px; align-items: flex-start; font-family: "Open Sans", sans-serif; .back-button { position: absolute; top: 6px; left: 0; } .poi-title-row { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 12px 16px 0; } .poi-header-actions { display: flex; flex-shrink: 0; gap: 8px; align-items: center; } .close-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } .draft-tag { padding: 2px 8px; font-size: 12px; font-weight: 600; color: #b45309; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 4px; } .edit-location-button { cursor: pointer; background: transparent; border: 0; } .edit-location-button .material-symbols-outlined { font-size: 28px; } .report-button { cursor: pointer; background: transparent; border: 0; } .report-button .material-symbols-outlined { font-size: 28px; } .add-to-itinerary-button { display: flex; gap: 6px; align-items: center; justify-content: center; width: calc(100% - 32px); padding: 8px 16px; margin: 0 16px; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 500; color: white; cursor: pointer; background: #4caf50; border: none; border-radius: 8px; transition: background-color 0.2s ease, opacity 0.2s ease; } .add-to-itinerary-button:hover { background: #388e3c; } .add-to-itinerary-button .material-symbols-outlined { font-size: 20px; } .add-to-itinerary-button .button-text { white-space: nowrap; } .add-to-itinerary-button.add-again { background: #1976d2; } .add-to-itinerary-button.add-again:hover { background: #1565c0; } /* Multi-day "Add to itinerary" day picker */ .add-to-itinerary-wrap { position: relative; } .add-to-itinerary-button .day-menu-caret { margin-left: auto; } /* Keep the trigger above the click-away backdrop while the menu is open so it stays interactive (toggle-to-close) and shows hover/active states. */ .add-to-itinerary-button.day-menu-open { position: relative; z-index: 12; } .day-menu-backdrop { position: fixed; inset: 0; z-index: 10; } .day-menu { position: absolute; top: calc(100% + 6px); right: 16px; left: 16px; z-index: 11; display: flex; flex-direction: column; max-height: 240px; padding: 6px; overflow-y: auto; background: white; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / 18%); } .day-menu-title { padding: 4px 8px 6px; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 600; color: #6b7280; } .day-menu-item { padding: 8px 10px; font-family: "Open Sans", sans-serif; font-size: 14px; color: #1f2937; text-align: left; cursor: pointer; background: none; border: none; border-radius: 6px; } .day-menu-item:hover { background: #f3f4f6; } .back-button .material-symbols-outlined { font-size: 28px; } .poi-title { flex: 1; min-width: 0; margin: 0; font-size: 24px; font-weight: 500; &.no-subtitle { padding-bottom: 12px; } } .poi-type { display: flex; gap: 8px; align-items: center; width: 100%; padding: 0 16px 8px; font-size: 14px; color: rgb(1 1 1 / 60%); text-transform: capitalize; border-bottom: 1px solid rgb(0 0 0 / 8%); } .poi-tags-row { width: 100%; padding: 8px 16px; } .location-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; } .location-tag { display: inline-flex; padding: 3px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #fff; text-transform: none; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border: 1px solid #b45309; border-radius: 10px; } } .panel-body { flex-grow: 1; overflow: auto; .poi-additional-info { position: relative; font-family: "Open Sans", sans-serif; } .poi-about { box-sizing: border-box; width: 100%; padding: 12px 16px; font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 1.5; color: #333; background: white; img { max-width: 100%; height: auto; } :global(img) { max-width: 100%; height: auto; } iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } :global(iframe) { width: 100%; height: auto; aspect-ratio: 16 / 9; } .google-place-loading { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 200px; font-family: "Open Sans", sans-serif; color: #666; .spinning { font-size: 32px; animation: spin 1s linear infinite; } } } .google-place-inline { flex: 1; overflow: auto; background: white; gmp-place-details { display: block; width: 100%; min-height: 400px; } .google-place-loading { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 200px; font-family: "Open Sans", sans-serif; color: #666; .spinning { font-size: 32px; animation: spin 1s linear infinite; } } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } } .google-place-view { position: relative; display: flex; flex-direction: column; height: 100%; } .google-place-floating-buttons { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; gap: 8px; .back-button, .close-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } .add-location-button, .copy-url-button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; background: #f0f0f0; border: none; border-radius: 50%; } } .google-place-body { flex: 1; height: 100%; overflow: auto; background: white; gmp-place-details { display: block; width: 100%; height: 100%; } .google-place-loading { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; height: 200px; font-family: "Open Sans", sans-serif; color: #666; .spinning { font-size: 32px; animation: spin 1s linear infinite; } } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Dark-mode rules live inside InfoPanel.svelte's \3c style> block (:global() fully reaches the Svelte compiler there). */ /* Dark mode (class-based — :global(html.dark) ...) lives in the Svelte \3c style> block so the compiler processes :global() reliably. */ html.dark .poi-header, html.dark .poi-header .close-button, html.dark .poi-header .edit-location-button, html.dark .poi-header .report-button { color: #f3f4f6; } html.dark .poi-header .close-button { background: #374151; } html.dark .poi-header .draft-tag { color: #fbbf24; background: #422006; border-color: #b45309; } html.dark .poi-header .poi-type { color: rgb(243 244 246 / 75%); border-bottom-color: rgb(255 255 255 / 10%); } /* Item 16: phone numbers detected in the about prose render with the Phone affordance (WhatsApp launch + dial link), inline within the sentence. */ .poi-about .about-phone { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; white-space: nowrap; } .poi-about .about-phone-wa { display: inline-flex; align-items: center; line-height: 0; } .poi-about .about-phone-wa img { width: 16px; height: 16px; } html.dark .panel-body .poi-about { color: #f3f4f6; background: #1f2937; } /* Per-line white backgrounds and per-span black text colours occasionally creep into POI descriptions (e.g. the Salamis Battle entry stored HTML where the editor pinned `color: #000` and a white background on each line). Force every descendant to honour the panel's dark surface so the text doesn't end up as black on white ribbons. */ html.dark .panel-body .poi-about * { background-color: transparent !important; color: #f3f4f6 !important; } html.dark .panel-body .poi-about a, html.dark .panel-body .poi-about a:visited { color: #93c5fd !important; } html.dark .panel-body .poi-about .google-place-loading, html.dark .panel-body .google-place-inline .google-place-loading { color: #9ca3af; } html.dark .panel-body .google-place-inline { background: #1f2937; } /* The Google web component renders inside its own shadow DOM and ships a light-only stylesheet, so it punches a white rectangle into the otherwise-dark panel. CSS-invert the embed (and re-rotate the hue) so it reads as dark while keeping its colours roughly the same. Photos rendered inside the embed get their hue inverted too — acceptable trade-off until Google ships a dark theme for the component. */ html.dark .google-place-inline gmp-place-details, html.dark .google-place-body gmp-place-details { filter: invert(1) hue-rotate(180deg); background: transparent; } html.dark .google-place-inline gmp-place-details img, html.dark .google-place-body gmp-place-details img { /* Cancel out the parent invert/hue-rotate on photos so they render with their original colours. */ filter: invert(1) hue-rotate(180deg); } html.dark .google-place-floating-buttons .back-button, html.dark .google-place-floating-buttons .close-button, html.dark .google-place-floating-buttons .add-location-button, html.dark .google-place-floating-buttons .copy-url-button { color: #f3f4f6; background: #374151; } html.dark .google-place-body { background: #1f2937; } html.dark .google-place-body .google-place-loading { color: #9ca3af; } html.dark .day-menu.svelte-1rw9vfk { background: #1f2937; border-color: #374151; } html.dark .day-menu-title.svelte-1rw9vfk { /* Lighter than #9ca3af to clear WCAG AA (4.5:1) on the #1f2937 menu bg. */ color: #cbd5e1; } html.dark .day-menu-item.svelte-1rw9vfk { color: #f3f4f6; } html.dark .day-menu-item.svelte-1rw9vfk:hover { background: #374151; } .shimmer-wrapper.svelte-1tm4o7z { position: relative; overflow: hidden; background-color: #e0e0e0; height:150px; } .shimmer.svelte-1tm4o7z { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100% ); animation: svelte-1tm4o7z-shimmer 1.5s infinite; } @keyframes svelte-1tm4o7z-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } html.dark .shimmer-wrapper.svelte-1tm4o7z { background-color: #374151; } html.dark .shimmer.svelte-1tm4o7z { background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100% ); } .itineraries-grid.svelte-1444lfa { display: grid; grid-template-columns: 1fr; grid-template-rows: 150px; gap: 16px; } .itinerary-item-shimmer.svelte-1444lfa { width: 100%; height: 150px; position: relative; } .itinerary-item-shimmer.svelte-1444lfa .shimmer-wrapper { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 8px; } .details-header.svelte-tarnde { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; gap: 16px; } .itinerary-title-container.svelte-tarnde { flex: 1; min-width: 0; } .itinerary-actions.svelte-tarnde { display: flex; gap: 8px; } .itinerary-separator.svelte-tarnde { height: 1px; background-color: #cacaca; } .itinerary-panel-body.svelte-tarnde { padding: 20px; } .itinerary-steps.svelte-tarnde { padding: 0 24px; } .step-shimmer.svelte-tarnde { display: flex; min-height: 120px; padding: 12px 0; } .step-shimmer.svelte-tarnde:last-child .step-line:where(.svelte-tarnde) { display: none; } .step-icon-container.svelte-tarnde { display: flex; flex-direction: column; align-items: center; margin-right: 8px; } .step-line.svelte-tarnde { width: 2px; background-color: #e0e0e0; flex-grow: 1; margin-top: 8px; } .step-content.svelte-tarnde { flex-grow: 1; padding-top: 12px; } .shimmer.svelte-tarnde { background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%); background-size: 200% 100%; animation: svelte-tarnde-shimmer 1.5s infinite; border-radius: 4px; } .shimmer.title.svelte-tarnde { height: 24px; width: 60%; margin-bottom: 8px; } .shimmer.subtitle.svelte-tarnde { height: 14px; width: 80px; } .shimmer.icon-button.svelte-tarnde { width: 32px; height: 32px; border-radius: 50%; } .shimmer.step-icon.svelte-tarnde { width: 48px; height: 48px; border-radius: 50%; } .shimmer.step-title.svelte-tarnde { height: 18px; width: 50%; margin-bottom: 12px; } .shimmer.step-text.svelte-tarnde { height: 14px; width: 100%; margin-bottom: 8px; } .shimmer.step-text.short.svelte-tarnde { width: 70%; } @keyframes svelte-tarnde-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } html.dark .itinerary-separator.svelte-tarnde { background-color: #374151; } html.dark .step-line.svelte-tarnde { background-color: #374151; } html.dark .shimmer.svelte-tarnde { background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%); background-size: 200% 100%; } /* Inherits styles from ItineraryPanel.css */ .proposal-alert.svelte-1nwng5r { display: flex; gap: 12px; align-items: flex-start; padding: 16px; margin: 12px 0; border-radius: 12px; animation: svelte-1nwng5r-slideDown 0.3s ease-out; } .proposal-alert.svelte-1nwng5r .material-symbols-outlined:where(.svelte-1nwng5r) { font-size: 24px; color: #2196f3; } .proposal-content.svelte-1nwng5r { flex: 1; } .proposal-card-content.svelte-1nwng5r { margin-bottom: 8px; font-size: 14px; color: #333; } .proposal-actions.svelte-1nwng5r { display: flex; gap: 8px; } .proposal-actions.svelte-1nwng5r button:where(.svelte-1nwng5r) { padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 6px; transition: opacity 0.2s; } .proposal-actions.svelte-1nwng5r button:where(.svelte-1nwng5r):hover { opacity: 0.8; } .accept-button.svelte-1nwng5r { color: white; background-color: #2196f3; border: none; } .ignore-button.svelte-1nwng5r { color: #666; background-color: transparent; border: 1px solid #ccc; } .extra-button.svelte-1nwng5r { color: #999; background-color: transparent; border: 1px solid #ddd; } .reorder-proposal.svelte-1nwng5r { border: 1px solid #2196f3; } .warning-proposal.svelte-1nwng5r { border: 1px solid #ff9800; } .warning-proposal.svelte-1nwng5r .material-symbols-outlined:where(.svelte-1nwng5r) { color: #ff9800; } .warning-proposal.svelte-1nwng5r .accept-button:where(.svelte-1nwng5r) { background-color: #ff9800; } .proposal-alert.compact.svelte-1nwng5r { padding: 8px 12px; margin: 4px 0 4px 42px; font-size: 13px; background-color: rgb(33 150 243 / 5%); border-style: dashed; box-shadow: none; .material-symbols-outlined:where(.svelte-1nwng5r) { font-size: 20px; } .proposal-card-content:where(.svelte-1nwng5r) { margin-bottom: 4px; } .proposal-actions:where(.svelte-1nwng5r) button:where(.svelte-1nwng5r) { padding: 4px 8px; font-size: 12px; } } .proposal-alert.compact.warning-proposal.svelte-1nwng5r { background-color: rgb(255 152 0 / 5%); } .insert-proposal.svelte-1nwng5r { background-color: rgb(255 183 77 / 20%); border: 1px solid #ffb74d; } .insert-proposal.svelte-1nwng5r .material-symbols-outlined:where(.svelte-1nwng5r) { color: #f57c00; } .insert-proposal.svelte-1nwng5r .accept-button:where(.svelte-1nwng5r) { background-color: #f57c00; } .proposal-alert.compact.insert-proposal.svelte-1nwng5r { background-color: rgb(255 183 77 / 15%); } @keyframes svelte-1nwng5r-slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Class-based dark mode (html.dark). The proposal alert lives inside the InfoPanel/ItineraryPanel surface, so all the dim grays here need light replacements. The brand blue / amber accents stay. */ html.dark .proposal-card-content.svelte-1nwng5r { color: #f3f4f6; } html.dark .ignore-button.svelte-1nwng5r { color: #d1d5db; border-color: #4b5563; } html.dark .extra-button.svelte-1nwng5r { color: #9ca3af; border-color: #4b5563; } .weather-section.svelte-x97k5r { background: var(--color-slate-50, #f8fafc); border: 1px solid var(--color-slate-200, #e2e8f0); border-radius: 0.5rem; margin-bottom: 0.5rem; overflow: visible; /* allow popover to escape */ } html.dark .weather-section.svelte-x97k5r { background: var(--color-slate-800, #1e293b); border-color: var(--color-slate-700, #334155); } .weather-section-summary.svelte-x97k5r { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--color-slate-700, #334155); user-select: none; } /* The disclosure toggle — a real