@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; } /* R29 — a `.contact-item a` rule used to live here, forcing every link in this component (email, website, tel fallback) to `#0b57d0` with no underline. Its selector (0,1,1) out-specifies the single-class `.a-normal` (0,1,0) now on those anchors, so keeping the rule alongside the class would have made adding the class a no-op — the link would still render with this rule's colour. Removed outright rather than merged into `a-normal`, since nothing else in this component's markup wants an unstyled link. */ } } /* 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 .material-symbols-outlined:where(.svelte-d5o650) { color: #d1d5db; } .haven-score-graph.svelte-1ges2s0 { /* Horizontal drags are the scrub; vertical ones scroll the POI pane. */ touch-action: pan-y; 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%; /* The collapse control below is `position: absolute`, and this is the box it must resolve against — the DETAILS section it belongs to. Without it the control escapes to `.poi-additional-info`, which since the score-explanation section was added also contains that section, so `top: 50%` measured half of details+explanation and floated the button up over the explanation's heading (in RTL it landed on top of the right-aligned Hebrew title). The two `top` values were always right; only the box they resolved against was wrong. */ position: relative; 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 { /* FIXED, not absolute: the pill's hosts live inside SlidePanel's overflow-hidden box, which clips an in-panel popover on the mobile bottom sheet whichever direction it opens. The inline style written by measurePopover() carries top/left (and max-height when capped); placeLocalePopover keeps the RTL-aware inline-end anchoring the old `inset-inline-end: 0` provided. */ position: fixed; 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%); } /* The container every @container query below resolves against. The POI panel is a fixed-width rail in landscape and the window in portrait, so its width is a property of the PANEL and not of the viewport. */ .wse.svelte-10r4ge5 { container-type: inline-size; container-name: wse; box-sizing: border-box; width: 100%; padding: 12px 16px; font-family: "Open Sans", sans-serif; font-size: 13px; line-height: 1.5; color: #333; border-bottom: 1px solid #eee; } .wse-title.svelte-10r4ge5 { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #6b7280; } .wse-title-meta.svelte-10r4ge5 { /* Undoes the heading's own casing and weight rather than picking new ones: a date reads as a date, and an uppercased "Thu 17 Sep" is harder to scan than the thing it labels. Colour is deliberately NOT set, so the dark-mode rule on `.wse-title` carries it. */ font-weight: 400; text-transform: none; letter-spacing: normal; /* The score keeps the heading's own weight (see `.wse-title-score`); only the period steps down, so the number stays as prominent as the pill it is explaining. */ /* The period wraps like everything else here. Holding it on one line was tried and reverted: on the narrowest panel a long locale's date is wider than the column, so an unwrappable run would overflow where a wrapped one merely takes a second line. Nothing in this section clips — the source check below pins that for the whole file. */ overflow-wrap: break-word; } .wse-title-score.svelte-10r4ge5 { /* The one number the whole section is about, so it carries the heading's weight back. Stated rather than inherited: `.wse-title-meta` sets 400 on the span this sits inside, and inheriting would pick that up. */ font-weight: 700; } .wse-verdict.svelte-10r4ge5 { /* Long locales wrap. Nothing here clips and nothing ellipsises: the verdict is the one line the section exists for. */ margin: 0; font-size: 14px; overflow-wrap: break-word; } .wse-levers.svelte-10r4ge5 { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .wse-lever.svelte-10r4ge5 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .wse-lever-text.svelte-10r4ge5 { overflow-wrap: break-word; } .wse-lever-link.svelte-10r4ge5 { padding: 0; border: 0; background: none; font: inherit; color: #1976d2; text-align: start; text-decoration: underline; cursor: pointer; } .wse-actions.svelte-10r4ge5 { /* Every control in the section shares this line. `wrap` because at the narrowest container width three links plus a chevron do not fit — and in Hebrew or Greek two already do not — so the line must break rather than overflow; nothing in this section clips. The line's own top margin replaces the toggle's, which is why the toggle no longer carries one. */ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; } .wse-toggle.svelte-10r4ge5 { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #1976d2; cursor: pointer; } .wse-chevron.svelte-10r4ge5 { font-size: 18px; line-height: 1; transition: transform 0.15s; } .wse-toggle[aria-expanded="true"].svelte-10r4ge5 .wse-chevron:where(.svelte-10r4ge5) { transform: rotate(90deg); } /* RTL: the chevron points the other way before it rotates. */ .wse[dir="rtl"].svelte-10r4ge5 .wse-chevron:where(.svelte-10r4ge5) { transform: rotate(180deg); } .wse[dir="rtl"].svelte-10r4ge5 .wse-toggle[aria-expanded="true"]:where(.svelte-10r4ge5) .wse-chevron:where(.svelte-10r4ge5) { transform: rotate(90deg); } .wse-breakdown.svelte-10r4ge5 { display: none; } .wse-breakdown.is-open.svelte-10r4ge5 { display: block; margin-top: 8px; } .wse-ledger.svelte-10r4ge5 { width: 100%; margin: 0; border-collapse: collapse; /* Auto layout on purpose: the value column is sized by its widest entry (see `.wse-ledger-title`'s width), which is what lets the values share one right edge. No breakpoint — a line is its title and its value on one row at EVERY width; the title wraps, the value never does. */ table-layout: auto; } .wse-ledger-row.svelte-10r4ge5 > th:where(.svelte-10r4ge5), .wse-ledger-row.svelte-10r4ge5 > td:where(.svelte-10r4ge5) { padding: 2px 0; vertical-align: baseline; } .wse-ledger-title.svelte-10r4ge5 { /* 100% is the auto-layout idiom for "everything the other column does not need": the value column collapses to its widest entry and this one takes the rest, wrapping as it must. `th` defaults undone: a row header here is a label, not a heading. */ width: 100%; font-weight: 400; text-align: start; color: #4b5563; overflow-wrap: break-word; padding-inline-end: 12px; } .wse-ledger-value.svelte-10r4ge5 { /* Physically right, in BOTH directions: the values are LTR numeric runs whatever the sentence direction, and their rightmost digits — the one beside the % — must sit on one vertical line. In RTL the column lands at the row's far end (the left) and the numbers align on its right, toward the title. */ white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .wse-ledger-row.is-maximum.svelte-10r4ge5 .wse-ledger-title:where(.svelte-10r4ge5) { /* The opening balance is context, not a finding; it steps back so the deductions under it are what the eye lands on. */ color: #6b7280; } .wse-ledger-row.is-total.svelte-10r4ge5 > th:where(.svelte-10r4ge5), .wse-ledger-row.is-total.svelte-10r4ge5 > td:where(.svelte-10r4ge5) { /* The rule sits on both cells so it runs the row's full width. */ font-weight: 700; border-top: 1px solid #e5e7eb; padding-top: 5px; } .wse-ledger-row.is-total.svelte-10r4ge5 .wse-ledger-title:where(.svelte-10r4ge5) { color: inherit; } .wse-ledger-actions.svelte-10r4ge5 { /* The expansion's own control row, shaped like `.wse-actions` above it: wraps rather than overflows, the FAQ link last. */ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; } .wse-faq.svelte-10r4ge5 { color: #1976d2; } /* The team line's feedback button: an inline icon riding the title's last line rather than a row of its own. */ .wse-feedback.svelte-10r4ge5 { display: inline-flex; vertical-align: middle; margin-inline-start: 6px; padding: 0; border: 0; background: none; color: #1976d2; cursor: pointer; } .wse-feedback.svelte-10r4ge5 .material-symbols-outlined:where(.svelte-10r4ge5) { font-size: 18px; } /* ≥ 480px — landscape `wide` (max(408, 50vw); ≈688px of content on a desktop). A lever's sentence and its link now fit on one line. */ @container wse (min-width: 480px) { .wse-lever.svelte-10r4ge5 { flex-direction: row; align-items: baseline; gap: 8px; } .wse-lever-text.svelte-10r4ge5 { flex: 1 1 auto; } .wse-lever-link.svelte-10r4ge5 { flex: none; } } html.dark .wse.svelte-10r4ge5 { color: #e5e7eb; border-bottom-color: #374151; } html.dark .wse-title.svelte-10r4ge5, html.dark .wse-ledger-row.is-maximum.svelte-10r4ge5 .wse-ledger-title:where(.svelte-10r4ge5) { color: #9ca3af; } html.dark .wse-ledger-title.svelte-10r4ge5 { color: #d1d5db; } html.dark .wse-ledger-row.is-total.svelte-10r4ge5 > th:where(.svelte-10r4ge5), html.dark .wse-ledger-row.is-total.svelte-10r4ge5 > td:where(.svelte-10r4ge5) { border-top-color: #374151; } html.dark .wse-lever-link.svelte-10r4ge5, html.dark .wse-toggle.svelte-10r4ge5, html.dark .wse-faq.svelte-10r4ge5 { color: #60a5fa; } /* 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; } /* Split "Add to itinerary": main zone (direct add to the last day) + arrow zone (day dropdown). The two buttons share one pill silhouette — the split lives on the wrapper, each half dropping the outer margin and the facing corner radii, with a hairline divider between them. */ .add-to-itinerary-wrap { position: relative; } .add-to-itinerary-split { display: flex; align-items: stretch; width: calc(100% - 32px); margin: 0 16px; } .add-to-itinerary-split .add-to-itinerary-button { width: auto; margin: 0; } .add-to-itinerary-split .add-to-itinerary-main { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; } .add-to-itinerary-split .add-to-itinerary-arrow { flex: 0 0 auto; padding: 8px 6px; border-left: 1px solid rgb(255 255 255 / 35%); border-top-left-radius: 0; border-bottom-left-radius: 0; } .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-split.day-menu-open { position: relative; z-index: 12; } .dblclick-add-hint { width: calc(100% - 32px); margin: 4px 16px 0; font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 1.3; color: #6b7280; } /* The marker double-click shortcut needs a mouse. */ @media (hover: none), (pointer: coarse) { .dblclick-add-hint { display: none; } } .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; } .day-menu-separator { height: 1px; margin: 4px 6px; background: #e5e7eb; } .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; } } /* The right-hand end of the type/subtype row: the marina "More details" menu (havens only) and the locale pill. `margin-inline-start: auto` pushes the pair to the row's end and is RTL-safe; it lives here rather than on LocalePill so the two stay together when the menu is present. */ .poi-type-actions { display: flex; gap: 6px; align-items: center; margin-inline-start: auto; } .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; } /* R29 — content links in this sanitized-HTML field get the a-normal treatment (blue-600, underlined) via CSS rather than a literal class: {@html} output has no template to add `a-normal` to, unlike the template-owned links in PoiContactDetails.svelte. Excludes the linkifyPhonesInHtml WhatsApp/dial pair (`.about-phone-wa` / `.about-phone-tel`), which keeps its own bespoke styling per R29. `!important` on colour guards against authored About HTML pinning its own inline anchor colour — the same problem the dark-mode rules below already have to fight. */ a:not(.about-phone-wa, .about-phone-tel) { color: #2563eb !important; text-decoration: underline; } /* Lists. Tailwind's preflight strips list markers (`list-style: none`), and Quill 2 — which authored this HTML — stores bullets AND numbering as `

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; } /* U9 — markdown view mode. Same treatment, and same reason, as `.poi-about` above: authored content routinely carries per-line white backgrounds and pinned `color: #000`, which render as black-on-white ribbons across a dark panel. Force every descendant onto the panel's dark surface. Carta's own `.markdown-body` nodes are inside {@html} output, so all of this has to be `:global()`. */ html.dark .poi-header .more-details-button { color: #f3f4f6; background: #374151; } html.dark .poi-header .more-details-button:hover { background: #4b5563; } /* Tables in curated documents — the seamark legend is one symbol per row, image in the first column, meaning in the second. The markdown stylesheet sets every image as a block with generous vertical margins, which in a table cell stretches each row to ~160px with the text baseline-aligned at the bottom, and its `max-width: 100%` lets the auto layout squeeze the symbol column. Inside a cell an image is inline on the middle line and the row hugs it. A cell image is one fixed-height tile — 56px, its width from its aspect ratio — so a column of them reads as equal tiles regardless of the source's pixel size: the legend renders every symbol onto the same 240x112 canvas (shown here at half size, retina-sharp), single symbols at one uniform icon size inside it, composites and diagrams filling it. Carta's output is {@html}, so the descendants need `:global()`. */ .poi-markdown.svelte-1rw9vfk table { width: 100%; } .poi-markdown.svelte-1rw9vfk th, .poi-markdown.svelte-1rw9vfk td { vertical-align: middle; } .poi-markdown.svelte-1rw9vfk td img { display: inline-block; margin: 0; height: 56px; width: auto; /* Not the stylesheet's `max-width: 100%`: with the height pinned, a shrinkable width lets the auto table layout squeeze the symbol column and the image with it — circles became ellipses. The tile is 120px wide; the cell takes it. */ max-width: none; vertical-align: middle; } html.dark .panel-body .poi-markdown { color: #f3f4f6; background: #1f2937; } html.dark .panel-body .poi-markdown * { background-color: transparent !important; color: #f3f4f6 !important; } /* R29 — a-normal dark colour (#60a5fa), replacing the ad-hoc #93c5fd. No phone-pair exclusion needed: linkifyPhones never runs on markdown content, only on the About field (see the .poi-about rule above). */ html.dark .panel-body .poi-markdown a, html.dark .panel-body .poi-markdown a:visited { color: #60a5fa !important; } /* Code blocks and quotes need a surface, which the blanket `transparent` above strips; give them a dark one back. */ html.dark .panel-body .poi-markdown pre, html.dark .panel-body .poi-markdown code { background-color: #111827 !important; } html.dark .panel-body .poi-markdown blockquote { border-left-color: #4b5563; } html.dark .panel-body .markdown-notice, html.dark .panel-body .markdown-notice * { color: #9ca3af !important; } html.dark .panel-body .markdown-retry { color: #f3f4f6 !important; background: #374151 !important; } html.dark .panel-body .markdown-shimmer .shimmer { background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%) !important; background-size: 200% 100%; } 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; } html.dark .day-menu-separator.svelte-1rw9vfk { 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; } .day-date-calendar.svelte-12p3lq2 { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 232px; padding: 0.5rem; font-size: 0.8125rem; color: #1f2937; cursor: default; background: #ffffff; border: 1px solid var(--color-slate-300, #cbd5e1); border-radius: 0.5rem; box-shadow: 0 8px 24px rgb(15 23 42 / 18%); } /* Anchored mode: escape the day group's / panel's overflow clipping. */ .day-date-calendar.anchored.svelte-12p3lq2 { position: fixed; z-index: 1200; } .ddc-header.svelte-12p3lq2 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; } .ddc-title.svelte-12p3lq2 { font-weight: 600; } .ddc-nav.svelte-12p3lq2 { background: none; border: none; padding: 0.125rem; cursor: pointer; color: inherit; border-radius: 0.25rem; display: inline-flex; } .ddc-nav.svelte-12p3lq2:hover { background: rgba(100, 116, 139, 0.15); } .ddc-nav.svelte-12p3lq2 .material-symbols-outlined:where(.svelte-12p3lq2) { font-size: 18px; } .ddc-grid.svelte-12p3lq2 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .ddc-weekday.svelte-12p3lq2 { text-align: center; font-size: 0.6875rem; color: #64748b; padding: 0.125rem 0; } .ddc-day.svelte-12p3lq2 { background: none; border: none; font: inherit; color: inherit; text-align: center; padding: 0.2rem 0; border-radius: 0.25rem; cursor: pointer; } .ddc-day.svelte-12p3lq2:hover { background: rgba(100, 116, 139, 0.15); } .ddc-day.selected.svelte-12p3lq2 { background: #0e7490; color: #ffffff; font-weight: 600; } .ddc-blank.svelte-12p3lq2 { cursor: default; pointer-events: none; } html.dark .day-date-calendar.svelte-12p3lq2 { background: #1f2937; border-color: #4b5563; color: #f3f4f6; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html.dark .ddc-weekday.svelte-12p3lq2 { color: #9ca3af; } html.dark .ddc-nav.svelte-12p3lq2:hover, html.dark .ddc-day.svelte-12p3lq2:hover { background: rgba(148, 163, 184, 0.2); } html.dark .ddc-day.selected.svelte-12p3lq2 { background: #22d3ee; color: #0f172a; } /* The menu's LOOK is the app's, not this component's: every `.share-menu-*` rule below the container lives in routes/[[t=t]]/(unlogged)/map/ItineraryPanel.css, which that panel @imports into a global sheet. Re-declaring them here would silently WIN (a Svelte-scoped selector outranks the plain global one) and restyle a shipped menu for no reason. So this block carries only what the global sheet has no rule for. */ /* Anchored INSIDE the tile so the dropdown cannot be half-cut at the bottom edge of the scrolling list. `position: relative` is also in the global sheet; the inline-flex is what keeps the trigger sized to its icon when the menu sits in a tile's control cluster rather than a toolbar. */ .share-menu-container.svelte-y3lorf { display: inline-flex; } /* Row 3: a status, not a button — so it gets the item's layout without the button affordances. */ .share-menu-status.svelte-y3lorf { display: flex; gap: 12px; align-items: center; width: 100%; padding: 14px 16px; font-size: 14px; font-weight: 500; cursor: default; opacity: 0.75; } /* Per-itinerary failure copy. Inline rather than a toast: a toast is global state, and the whole point of U17 is that one tile's failure must not appear to belong to another's menu. */ .share-menu-error.svelte-y3lorf { padding: 4px 16px 8px; color: #ef4444; font-size: 13px; } /* U18's touch-target floor, additive over the global padding. */ .share-menu-item.svelte-y3lorf, .share-menu-toggle-item.svelte-y3lorf { min-height: 44px; } .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