.forecast-panel {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0.9);width: 90%;max-width: 400px;max-height: 80vh;background: #fff;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);border-radius: 16px;z-index: 1001;opacity: 0;visibility: hidden;transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s;display: flex;flex-direction: column;overflow: hidden}
.forecast-panel.active {transform: translate(-50%, -50%) scale(1);opacity: 1;visibility: visible}
body:has(
.tide-modal-overlay:not(.hidden),
.tide-level-modal-overlay:not(.hidden),
.sun-time-modal-overlay:not(.hidden),
.wind-modal-overlay:not(.hidden)
) .forecast-panel.active {opacity: 0;visibility: hidden}
body:has(.forecast-panel.active) .home-view-toggle--map,
body:has(.forecast-panel.active) .favorite-forecast-bar,
body:has(.forecast-panel.active) .fb-strip,
body:has(.forecast-panel.active) .home-chat {opacity: 0;visibility: hidden;pointer-events: none}
@media (max-width: 767px) {.forecast-panel {width: 95%;max-height: 85vh}}
.forecast-panel-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 1000;opacity: 1;transition: opacity 0.3s ease}
.forecast-panel-overlay.hidden {opacity: 0;pointer-events: none}
.forecast-panel-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 14px;background: linear-gradient(135deg, #1976D2, #2196F3);color: #fff;flex-shrink: 0}
.forecast-panel-title {display: flex;align-items: center;gap: 6px;font-size: 14px;font-weight: bold}
.forecast-panel-icon {display: flex;align-items: center}
.forecast-panel-icon svg {width: 18px;height: 18px}
.forecast-panel-close {display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;margin: -6px -8px -6px 0;background: none;border: none;border-radius: 50%;color: #fff;font-size: 26px;cursor: pointer;padding: 0;line-height: 1;opacity: 0.85;transition: opacity 0.2s, background 0.2s}
.forecast-panel-close:hover {opacity: 1;background: rgba(255, 255, 255, 0.18)}
.forecast-panel-close:active {background: rgba(255, 255, 255, 0.28)}
.forecast-panel-header--meta {gap: 6px;min-height: 58px;padding: 6px 4px 6px 14px;box-sizing: border-box}
.forecast-panel-heading {display: flex;flex: 1 1 auto;flex-direction: column;gap: 3px;min-width: 0}
.forecast-panel-header--meta .forecast-panel-title {min-width: 0;white-space: nowrap}
.forecast-panel-sub {display: flex;flex-wrap: nowrap;align-items: center;gap: 5px;min-width: 0;font-size: 11px;font-weight: 600;line-height: 16px;color: rgba(255, 255, 255, 0.95)}
.forecast-panel-sub[hidden] {display: none !important}
.forecast-panel-title-text {flex: none}
.forecast-panel-place {min-width: 0;margin-left: 2px;padding-left: 8px;border-left: 1px solid rgba(255, 255, 255, 0.55);overflow: hidden;font-size: 13px;font-weight: 600;color: rgba(255, 255, 255, 0.95);text-overflow: ellipsis;white-space: nowrap}
.forecast-panel-place[hidden] {display: none !important}
.forecast-panel-chip {display: inline-flex;flex: 0 1 auto;align-items: center;gap: 3px;min-width: 44px;max-width: 100%;padding: 1px 7px;background: #fff;border-radius: 10px;font-size: 10.5px;font-weight: 500;line-height: 16px;color: #555;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);box-sizing: border-box}
.forecast-panel-chip svg {flex: none;width: 12px;height: 12px}
.forecast-panel-chip > span {min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.forecast-panel-remaining {display: inline-flex;flex: none;align-items: center;height: 20px;padding: 0 8px;border-radius: 12px;background: #e8f4fd;color: #1976D2;font-size: 11px;font-weight: 700;white-space: nowrap}
.forecast-panel-remaining--warning {background: #fef3cd;color: #b45309}
.forecast-panel-actions {display: flex;flex: none;align-items: center}
.forecast-panel-star,
.forecast-panel-actions .forecast-panel-close {display: grid;flex: none;place-items: center;width: 44px;height: 44px;margin: 0;padding: 0;border: 0;border-radius: 0;background: none;color: #fff;cursor: pointer;opacity: 1}
.forecast-panel-star[hidden] {display: none !important}
.forecast-panel-actions .forecast-panel-close:hover,
.forecast-panel-actions .forecast-panel-close:active {background: none}
.forecast-panel-star-ring,
.forecast-panel-close-ring {display: grid;place-items: center;width: 36px;height: 36px;border-radius: 50%;transition: background 0.2s}
.forecast-panel-close-ring {font-size: 26px;line-height: 1;opacity: 0.92}
.forecast-panel-star-ring {background: rgba(255, 255, 255, 0.2)}
.forecast-panel-star.is-on .forecast-panel-star-ring {background: rgba(255, 255, 255, 0.96)}
.forecast-panel-star:not(.is-on):hover .forecast-panel-star-ring,
.forecast-panel-close:hover .forecast-panel-close-ring {background: rgba(255, 255, 255, 0.28)}
.forecast-panel-star:focus-visible,
.forecast-panel-actions .forecast-panel-close:focus-visible {outline: none}
.forecast-panel-star:focus-visible .forecast-panel-star-ring,
.forecast-panel-close:focus-visible .forecast-panel-close-ring {outline: 2px solid #fff;outline-offset: 1px}
.forecast-panel-loading {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px 20px;flex: 1}
.forecast-loading-spinner {width: 40px;height: 40px;border: 3px solid #e0e0e0;border-top-color: #1976D2;border-radius: 50%;animation: spin 1s linear infinite}
@keyframes spin {to {transform: rotate(360deg)}}
.forecast-panel-loading p {margin-top: 16px;color: #666;font-size: 14px}
.forecast-panel-error {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px 20px;text-align: center;flex: 1}
.forecast-panel-error p {color: #d32f2f;margin-bottom: 16px;font-size: 14px}
.forecast-retry-btn {background: #1976D2;color: #fff;border: none;padding: 10px 24px;border-radius: 6px;cursor: pointer;font-size: 14px;transition: background 0.2s}
.forecast-retry-btn:hover {background: #1565C0}
.forecast-panel-content {flex: 1;overflow-y: auto;display: flex;flex-direction: column}
.forecast-station-info {display: flex;flex-wrap: wrap;gap: 6px;padding: 8px 12px;background: #f5f5f5;border-bottom: 1px solid #e0e0e0}
.station-badge {display: inline-flex;align-items: center;gap: 4px;padding: 3px 8px;background: #fff;border-radius: 12px;font-size: 11px;color: #555;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)}
.station-badge svg {flex-shrink: 0}
.forecast-tabs {display: flex;border-bottom: 1px solid #e0e0e0;flex-shrink: 0}
.forecast-tab {flex: 1;padding: 8px 12px;background: none;border: none;border-bottom: 2px solid transparent;cursor: pointer;font-size: 13px;font-weight: 500;color: #666;transition: all 0.2s}
.forecast-tab:hover {background: #f5f5f5;color: #333}
.forecast-tab.active {color: #1976D2;border-bottom-color: #1976D2}
.forecast-tab:has(.forecast-tab-date) {display: flex;flex-direction: column;align-items: center;gap: 1px;padding: 5px 4px;line-height: 1.25;white-space: nowrap}
.forecast-tab-date {font-size: 10.5px;font-weight: 500;color: #94a3b8}
.forecast-tab-date:empty {display: none}
.forecast-tab.active .forecast-tab-date {color: #1976D2}
.forecast-tab .forecast-tab-wd.is-saturday {color: #2563eb}
.forecast-tab .forecast-tab-wd.is-sunday {color: #dc2626}
.forecast-day-content {flex: 1;padding: 10px 12px;overflow-y: auto}
.forecast-section {margin-bottom: 12px;padding-bottom: 10px;border-bottom: 1px solid #eee}
.forecast-section:last-child {border-bottom: none;margin-bottom: 0}
.section-title {font-size: 12px;font-weight: bold;color: #333;margin-bottom: 8px}
.no-data {color: #999;font-size: 11px;text-align: center;padding: 8px}
.forecast-panel .weather-info-section {background: linear-gradient(135deg, #fef9e7 0%, #e0f2fe 50%, #fef9e7 100%);border-radius: 10px;padding: 10px;margin-bottom: 8px}
.forecast-panel .weather-main {display: flex;align-items: flex-start;gap: 8px}
.forecast-panel .weather-main-icon {width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.forecast-panel .weather-main-icon svg {width: 28px;height: 28px}
.forecast-panel .weather-main-content {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 4px}
.forecast-panel .weather-main-category {font-size: 11px;font-weight: 500;color: #4b5563;line-height: 1.5}
.forecast-panel .weather-main-category .weather-sunny {color: #d97706}
.forecast-panel .weather-main-category .weather-cloudy {color: #6b7280}
.forecast-panel .weather-main-category .weather-rainy {color: var(--color-primary-dark)}
.forecast-panel .weather-main-category .weather-snowy {color: #0891b2}
.forecast-panel .weather-main-category .weather-thunder {color: var(--color-danger-dark)}
.forecast-panel .weather-main-category .weather-connector {color: #6b7280}
.forecast-panel .weather-temp-row {display: flex;align-items: center;gap: 8px}
.forecast-panel .weather-main-temp {font-size: 15px;font-weight: 700}
.forecast-panel .weather-temp-range {display: flex;align-items: baseline;gap: 3px;font-size: 15px;font-weight: 700}
.forecast-panel .weather-temp-range .temp-min {color: var(--color-primary)}
.forecast-panel .weather-temp-range .temp-separator {color: #9ca3af;font-weight: normal}
.forecast-panel .weather-temp-range .temp-max {color: var(--color-danger)}
.forecast-panel .weather-pop-item {display: flex;align-items: center;gap: 3px;background: rgba(255, 255, 255, 0.7);padding: 2px 6px;border-radius: 4px}
.forecast-panel .weather-pop-icon {display: flex;align-items: center;color: var(--color-primary)}
.forecast-panel .weather-pop-icon svg {width: 14px;height: 14px}
.forecast-panel .weather-pop-value {font-size: 11px;font-weight: 600;color: var(--color-primary)}
.forecast-panel .tide-graph-container svg {width: 100%;height: 100%}
.forecast-panel .tide-times-row {display: flex;justify-content: space-around;font-size: 10px;color: #666;flex-wrap: wrap;gap: 4px;padding: 6px;background: rgba(255, 255, 255, 0.5);border-radius: 6px}
.forecast-panel button.tide-times-row.tide-times-clickable {width: 100%;border: none;cursor: pointer;transition: background 0.2s}
.forecast-panel button.tide-times-row.tide-times-clickable:hover {background: rgba(255, 255, 255, 0.8)}
.forecast-panel button.tide-times-row.tide-times-clickable:active {background: rgba(255, 255, 255, 1)}
.forecast-panel .tide-time-item {display: flex;flex-direction: column;align-items: center;min-width: 50px}
.forecast-panel .tide-time-label {font-weight: 600;font-size: 9px}
.forecast-panel .tide-time-item.high-tide .tide-time-label {color: #1976D2}
.forecast-panel .tide-time-item.low-tide .tide-time-label {color: #e65100}
.forecast-panel .tide-time-value {font-size: 11px;color: #333;font-weight: 600}
.forecast-panel .tide-level-value {font-size: 9px;color: #666}
.forecast-panel .tide-info-block {background: linear-gradient(135deg, #e8f4fd 0%, #fef9e7 50%, #e8f4fd 100%);border-radius: 8px;padding: 8px;margin-bottom: 8px}
.forecast-panel .tide-info-block .tide-graph-section {background: transparent;padding: 0;margin-bottom: 0;border-radius: 0}
.forecast-panel .tide-info-block .tide-graph-container {position: relative;height: 40px;background: rgba(255, 255, 255, 0.5);border-radius: 6px;margin-bottom: 8px}
.forecast-panel .sun-tide-compact {padding: 0 0 6px 0}
.forecast-panel .sun-tide-row {display: flex;justify-content: space-between;align-items: center;gap: 6px}
.forecast-panel .sun-item,
.forecast-panel .tide-item {display: flex;flex-direction: column;align-items: center;gap: 1px;flex: 1;min-width: 0}
.forecast-panel .sun-item svg,
.forecast-panel .tide-item svg {width: 16px;height: 16px;flex-shrink: 0}
.forecast-panel .tide-trigger {display: flex;flex-direction: column;align-items: center;gap: 1px}
.forecast-panel .sun-tide-label {font-size: 9px;color: #6b7280;font-weight: 500}
.forecast-panel .sun-tide-value {font-size: 11px;font-weight: 600;color: #1f2937}
.forecast-panel .sun-item-clickable {background: none;border: none;padding: 4px;margin: -4px;border-radius: 8px;cursor: pointer;transition: background 0.2s}
.forecast-panel .sun-item-clickable:hover {background: rgba(0, 0, 0, 0.05)}
.forecast-panel .sun-item-clickable:active {background: rgba(0, 0, 0, 0.1)}
.forecast-panel .tide-item-clickable {background: none;border: none;padding: 4px;margin: -4px;border-radius: 8px;cursor: pointer;transition: background 0.2s}
.forecast-panel .tide-item-clickable:hover {background: rgba(0, 0, 0, 0.05)}
.forecast-panel .tide-item-clickable:active {background: rgba(0, 0, 0, 0.1)}
.forecast-panel .wind-info-section {background: linear-gradient(135deg, #e0f2fe 0%, #f0fdf4 50%, #e0f2fe 100%);border-radius: 10px;padding: 10px;margin-bottom: 8px}
.forecast-panel .wind-main-clickable {display: block;width: 100%;background: transparent;border: none;padding: 0;text-align: left;cursor: pointer;border-radius: 6px;transition: background 0.2s}
.forecast-panel .wind-main-clickable:hover {background: rgba(255, 255, 255, 0.5)}
.forecast-panel .wind-main-clickable:active {background: rgba(255, 255, 255, 0.8)}
.forecast-panel .wind-main {display: flex;align-items: center;gap: 8px}
.forecast-panel .wind-main-icon {width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 8px;flex-shrink: 0}
.forecast-panel .wind-main-icon svg {width: 18px;height: 18px}
.forecast-panel .wind-main-text {display: flex;flex-direction: column;gap: 1px}
.forecast-panel .wind-main-value {font-size: 14px;font-weight: 700;display: flex;align-items: center;gap: 3px}
.forecast-panel .wind-main-label {font-size: 10px;color: #6b7280;font-weight: 500}
.forecast-panel .wind-direction-arrow {width: 14px;height: 14px;flex-shrink: 0}
.forecast-panel .wind-periods {display: flex;gap: 6px;margin-top: 8px;padding-top: 8px;border-top: 1px solid rgba(0, 0, 0, 0.06)}
.forecast-panel .wind-period-item {display: flex;align-items: center;gap: 6px;background: rgba(255, 255, 255, 0.7);padding: 5px 8px;border-radius: 6px;flex: 1}
.forecast-panel button.wind-period-item.wind-period-clickable {border: none;cursor: pointer;transition: background 0.2s}
.forecast-panel button.wind-period-item.wind-period-clickable:hover {background: rgba(255, 255, 255, 0.9)}
.forecast-panel button.wind-period-item.wind-period-clickable:active {background: rgba(255, 255, 255, 1)}
.forecast-panel .wind-period-label {font-size: 9px;color: #6b7280;font-weight: 600;text-transform: uppercase}
.forecast-panel .wind-period-value {font-size: 12px;font-weight: 600;display: flex;align-items: center;gap: 3px}
.forecast-panel .wind-period-value .wind-direction-arrow {width: 11px;height: 11px}
.upgrade-prompt-overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);display: flex;align-items: center;justify-content: center;z-index: 10000;padding: 20px}
.upgrade-prompt-content {background: white;border-radius: 16px;padding: 32px 24px;max-width: 320px;width: 100%;text-align: center;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3)}
.upgrade-prompt-icon {color: var(--color-warning);margin-bottom: 16px}
.upgrade-prompt-icon svg {width: 48px;height: 48px}
.upgrade-prompt-title {font-size: 18px;font-weight: 700;color: #1f2937;margin: 0 0 12px 0}
.upgrade-prompt-message {font-size: 14px;color: #6b7280;line-height: 1.6;margin: 0 0 24px 0}
.upgrade-prompt-actions {display: flex;flex-direction: column;gap: 12px}
.upgrade-prompt-btn {display: block;padding: 12px 20px;border-radius: 8px;font-size: 14px;font-weight: 600;text-decoration: none;text-align: center;cursor: pointer;transition: all 0.2s;border: none}
.upgrade-prompt-btn-primary {background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color: white}
.upgrade-prompt-btn-primary:hover {background: linear-gradient(135deg, var(--color-primary-dark), #1d4ed8);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3)}
.upgrade-prompt-btn-secondary {background: #f3f4f6;color: #6b7280}
.upgrade-prompt-btn-secondary:hover {background: #e5e7eb}
.forecast-sample-body {position: relative;overflow-y: auto;flex: 1;min-height: 0;display: flex;flex-direction: column}
.forecast-sample-body .forecast-sample-day-content {flex: none}
.forecast-sample-header-badge {display: inline-block;background: rgba(255, 255, 255, 0.25);color: #fff;font-size: 10px;font-weight: 700;padding: 2px 8px;border-radius: 8px;letter-spacing: 0.5px;margin-left: 6px;vertical-align: middle}
.forecast-sample-login-cta {flex-shrink: 0;padding: 12px 16px 10px;text-align: center;border-top: 1px solid #e5e7eb;background: #f8fafc}
.forecast-sample-message {font-size: 12px;color: #6b7280;line-height: 1.5;margin: 0 0 10px 0}
.forecast-sample-message strong {color: #1e40af}
.forecast-sample-btn {display: inline-block;padding: 9px 24px;border-radius: 8px;font-size: 13px;font-weight: 600;text-decoration: none;text-align: center;cursor: pointer;transition: all 0.2s;border: none}
.forecast-sample-btn-primary {background: linear-gradient(135deg, #3b82f6, #2563eb);color: white}
.forecast-sample-btn-primary:hover {background: linear-gradient(135deg, #2563eb, #1d4ed8);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3)}
.forecast-sample-btn-secondary {background: #f3f4f6;color: #6b7280}
.forecast-sample-btn-secondary:hover {background: #e5e7eb}
.forecast-panel .hourly-heatmap-container {padding: 8px 12px 12px}
.forecast-panel .heatmap-legend {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 8px;padding: 0 2px;font-size: 9px;color: var(--color-text-muted)}
.forecast-panel .heatmap-legend-dot {display: inline-block;width: 8px;height: 8px;border-radius: 2px;flex-shrink: 0}
.forecast-attribution {margin-top: 16px;padding-top: 12px;border-top: 1px solid #e5e7eb;font-size: 11px;color: #9ca3af;text-align: center}
.forecast-tab-calendar {display: flex;align-items: center;justify-content: center;gap: 3px}
.forecast-tab-calendar svg {flex-shrink: 0}
.tide-cal-tab-content {padding: 4px 0}
.tide-cal-main,
.tide-cal-side {min-width: 0}
@media (min-width: 1120px) {.forecast-panel .tide-cal-tab-content--split {display: grid;grid-template-columns: minmax(0, 460px) minmax(0, 1fr);gap: 20px;align-items: stretch}
.forecast-panel .tide-cal-tab-content--split .tide-cal-main {display: flex;flex-direction: column}
.forecast-panel .tide-cal-tab-content--split .tide-cal-grid {flex: 1;grid-auto-rows: minmax(40px, 1fr)}
.forecast-panel .tide-cal-tab-content--split .tide-cal-side {border-left: 1px solid var(--color-border);padding-left: 20px;display: flex;flex-direction: column}
.forecast-panel .tide-cal-tab-content--split .tide-cal-detail {height: 100%}
.forecast-panel .tide-cal-tab-content--split .tide-cal-upgrade-hint {grid-column: 1 / -1}
.forecast-panel .tide-cal-tab-content--split .tide-cal-detail-section {border-top: none;padding-top: 0}
.forecast-panel .tide-cal-tab-content--split .tide-cal-cell {min-height: 40px;justify-content: center}}
.tide-cal-loading {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 12px;padding: 32px 0;color: #6b7280;font-size: 13px}
.tide-cal-nav {display: flex;align-items: center;justify-content: center;gap: 12px;margin-bottom: 6px}
.tide-cal-nav-btn {background: none;border: 1px solid #e5e7eb;border-radius: 6px;width: 28px;height: 28px;font-size: 16px;color: #374151;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background 0.2s}
.tide-cal-nav-btn:hover:not(.disabled) {background: #f3f4f6}
.tide-cal-nav-btn.disabled {opacity: 0.3;cursor: default}
.tide-cal-month-label {font-size: 14px;font-weight: 700;color: #1f2937;min-width: 90px;text-align: center}
.tide-cal-grid-header {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;font-size: 10px;font-weight: 600;color: #6b7280;margin-bottom: 2px}
.tide-cal-wday.sun { color: #dc2626; }
.tide-cal-wday.sat { color: #2563eb; }
.tide-cal-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 2px;margin-bottom: 6px}
.tide-cal-cell {display: flex;flex-direction: column;align-items: center;gap: 1px;padding: 3px 1px;border-radius: 6px;border: none;background: none;cursor: pointer;transition: background 0.15s;min-width: 0}
.tide-cal-cell:hover:not(.empty):not(.disabled) {background: #f0f9ff}
.tide-cal-cell.selected {background: #e0f2fe;box-shadow: inset 0 0 0 2px #1976D2}
.tide-cal-cell.today .tide-cal-day {background: #1976D2;color: #fff;border-radius: 50%;width: 18px;height: 18px;display: flex;align-items: center;justify-content: center}
.tide-cal-cell.empty {cursor: default}
.tide-cal-cell.disabled {cursor: default;opacity: 0.3}
.tide-cal-cell.sun .tide-cal-day { color: #dc2626; }
.tide-cal-cell.sat .tide-cal-day { color: #2563eb; }
.tide-cal-day {font-size: 10px;font-weight: 600;color: #374151;line-height: 1.2}
.tide-cal-tide-badge {font-size: 7px;font-weight: 700;color: #fff;padding: 1px 3px;border-radius: 3px;line-height: 1.3;white-space: nowrap}
.tide-cal-detail {min-height: 0}
.tide-cal-detail:empty {display: none}
.tide-cal-detail-loading {display: flex;justify-content: center;padding: 12px 0}
.tide-cal-detail-error {text-align: center;font-size: 12px;color: #9ca3af;padding: 12px 0}
.tide-cal-detail-section {border-top: 1px solid #e5e7eb;padding-top: 8px;display: flex;flex-direction: column;gap: 12px;height: 100%}
.tide-cal-detail-header {display: flex;align-items: center;justify-content: space-between;gap: 8px}
.tide-cal-detail-date {font-size: 18px;font-weight: 800;color: #0f172a}
.tide-cal-detail-tidename {font-size: 13px;font-weight: 800;color: #fff;padding: 3px 12px;border-radius: 999px;white-space: nowrap}
.tide-cal-detail-stats {display: grid;grid-template-columns: repeat(3, 1fr);gap: 8px;padding: 8px;background: linear-gradient(135deg, #e8f4fd 0%, #fef9e7 50%, #e8f4fd 100%);border-radius: 10px}
.tide-cal-stat {display: flex;flex-direction: column;align-items: center;gap: 2px;min-width: 0}
.tide-cal-stat svg {width: 18px;height: 18px}
.tide-cal-stat-label {font-size: 10px;color: #6b7280;font-weight: 600}
.tide-cal-stat-value {font-size: 14px;font-weight: 700;color: #1f2937}
.tide-cal-stat-value small {font-size: 10px;font-weight: 600;color: #6b7280}
.tide-cal-detail-graph {margin: 0}
.tide-cal-graph-label {display: flex;align-items: center;gap: 4px;font-size: 11px;font-weight: 700;color: #334155;margin-bottom: 4px}
.tide-cal-graph-label svg {width: 14px;height: 14px}
.tide-cal-graph-unit {color: #94a3b8;font-weight: 500;font-size: 10px;margin-left: 2px}
.tide-cal-graph-svg {border: 1px solid #eef2f7;border-radius: 8px;background: #fff;overflow: hidden}
.tide-cal-graph-svg svg {display: block;width: 100%;height: auto}
.tide-cal-detail-tides {display: grid;grid-template-columns: 1fr 1fr;gap: 10px}
.tide-cal-tide-col {min-width: 0}
.tide-cal-tide-head {font-size: 12px;font-weight: 700;margin: 0 0 6px;padding-bottom: 4px;border-bottom: 2px solid}
.tide-cal-tide-col.high .tide-cal-tide-head {color: #1976D2;border-color: #bfdbfe}
.tide-cal-tide-col.low .tide-cal-tide-head {color: #e65100;border-color: #fed7aa}
.tide-cal-tide-row {display: flex;align-items: baseline;justify-content: space-between;padding: 4px 8px;margin-bottom: 4px;border-radius: 6px;background: rgba(0, 0, 0, 0.02)}
.tide-cal-tide-row--empty {justify-content: center;color: #9ca3af}
.tide-cal-tide-time {font-size: 14px;font-weight: 700;color: #1f2937}
.tide-cal-tide-level {font-size: 12px;color: #64748b}
.tide-cal-upgrade-hint {display: flex;align-items: flex-start;gap: 6px;margin-top: 10px;padding: 8px 10px;background: linear-gradient(135deg, #eff6ff, #f0f9ff);border: 1px solid #bfdbfe;border-radius: 8px;font-size: 11px;line-height: 1.5;color: #1e40af}
.tide-cal-upgrade-icon {flex-shrink: 0;margin-top: 1px;color: #3b82f6}
.tide-cal-upgrade-text strong {font-weight: 700;color: #1d4ed8}
.tide-cal-upgrade-btn {flex-shrink: 0;align-self: center;padding: 4px 10px;background: #3b82f6;color: #fff;font-size: 11px;font-weight: 600;border-radius: 6px;text-decoration: none;white-space: nowrap;transition: background 0.15s}
.tide-cal-upgrade-btn:hover {background: #2563eb}
.forecast-panel .fc-cond-block {margin-bottom: 8px}
.forecast-panel .fc-cond-banner {display: flex;align-items: center;gap: 10px;border-radius: 10px 10px 0 0;padding: 9px 12px;color: #fff}
.forecast-panel .fc-cond-icon {width: 32px;height: 32px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;background: rgba(255, 255, 255, 0.22);border-radius: 9px}
.forecast-panel .fc-cond-icon svg {width: 20px;height: 20px}
.forecast-panel .fc-cond-text {display: flex;flex-direction: column;min-width: 0;line-height: 1.2}
.forecast-panel .fc-cond-heading {font-size: 10px;font-weight: 600;opacity: 0.92}
.forecast-panel .fc-cond-verdict {font-size: 17px;font-weight: 800;letter-spacing: 0.5px}
.forecast-panel .fc-cond-weather {font-size: 10px;font-weight: 600;opacity: 0.92;margin-top: 2px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.forecast-panel .fc-cond-weather .weather-sunny,
.forecast-panel .fc-cond-weather .weather-cloudy,
.forecast-panel .fc-cond-weather .weather-rainy,
.forecast-panel .fc-cond-weather .weather-snowy,
.forecast-panel .fc-cond-weather .weather-thunder,
.forecast-panel .fc-cond-weather .weather-connector {color: inherit}
.forecast-panel .fc-cond-chips {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1px;background: var(--color-border);border-radius: 0 0 10px 10px;overflow: hidden}
.forecast-panel .fc-cond-chip {background: var(--color-bg-secondary);padding: 7px 10px;display: flex;align-items: center;gap: 8px;min-width: 0}
.forecast-panel .fc-cond-chip--target {grid-column: 1 / -1;background: #ecfdf5}
.forecast-panel .fc-cond-chip-ico {width: 26px;height: 26px;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.forecast-panel .fc-cond-chip-ico svg {width: 14px;height: 14px}
.forecast-panel .fc-cond-chip-body {display: flex;flex-direction: column;align-items: flex-start;gap: 1px;min-width: 0;flex: 1}
.forecast-panel .fc-cond-chip-label {font-size: 9px;font-weight: 600;color: var(--color-text-muted);display: flex;align-items: center;gap: 3px}
.forecast-panel .fc-cond-chip-val--target {color: #059669;font-size: 12px;line-height: 1.3;white-space: normal;text-align: left}
.forecast-panel .fc-target-strip {display: flex;gap: 1.5px;margin-top: 2px;width: 100%;max-width: 160px}
.forecast-panel .fc-target-strip i {flex: 1;height: 4px;border-radius: 1px;background: #ffedd5}
.forecast-panel .fc-target-strip i.on {background: #fdba74}
.forecast-panel .fc-target-strip i.on.strong {background: #ea580c}
.forecast-panel .fc-target-strip i.on.weak {background: #fed7aa}
.forecast-panel .fc-target-strip i.past {opacity: 0.35}
.forecast-panel .fc-cond-chip-val {font-size: 13px;font-weight: 700;color: var(--color-text-primary)}
.forecast-panel .fc-cond-chip-val small {font-size: 9px;font-weight: 600;color: var(--color-text-muted)}
.forecast-panel .fc-cond-chip-val .fc-temp-min { color: var(--color-primary); }
.forecast-panel .fc-cond-chip-val .fc-temp-max { color: var(--color-danger); }
.forecast-panel .fc-cond-chip-sub {font-size: 8px;font-weight: 600;color: var(--color-text-secondary)}
.forecast-panel .fc-cond-chip-gust {color: var(--color-danger);font-weight: 700}
@media (max-width: 767px) {.forecast-panel .fc-cond-chips {display: none}}
.forecast-panel .fc-timeband {background: var(--color-bg-secondary);border-radius: 10px;padding: 8px 10px;margin-bottom: 8px}
.forecast-panel .fc-timeband-legend {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 6px;font-size: 9px;color: var(--color-text-muted)}
.forecast-panel .fc-timeband-legend-item {display: inline-flex;align-items: center;gap: 3px}
.forecast-panel .tb-feeding-mark {display: inline-block;width: 8px;height: 8px;border-radius: 50%;background: #fff;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);flex-shrink: 0}
.forecast-panel .fc-timeband-note {margin-top: 6px;font-size: 9px;line-height: 1.5;color: var(--color-text-muted);overflow-wrap: anywhere}
.forecast-panel .forecast-day-grid {display: block}
.forecast-panel .forecast-col-main,
.forecast-panel .forecast-col-hourly {min-width: 0}
@media (min-width: 1120px) {.forecast-panel {max-width: 1160px;width: 92%}
.forecast-panel .forecast-day-grid {display: grid;grid-template-columns: 300px minmax(0, 1fr);gap: 0 16px;align-items: start}
.forecast-panel .forecast-col-main {display: flex;flex-direction: column;gap: 10px}
.forecast-panel .forecast-col-main .fc-cond-block {margin-bottom: 0}
.forecast-panel .forecast-col-hourly {border-left: 1px solid var(--color-border);padding-left: 16px;min-width: 0}
.forecast-panel .forecast-col-main .tide-times-row {display: grid;grid-template-columns: 1fr 1fr;gap: 6px}}
@media (max-width: 1119px) {.forecast-panel .forecast-day-grid {display: flex;flex-direction: column}
.forecast-panel .forecast-col-main,
.forecast-panel .forecast-col-hourly {display: contents}
.forecast-panel .forecast-day-grid .fc-cond-block { order: 1; }
.forecast-panel .forecast-day-grid .fc-thunder-alert { order: 3; }
.forecast-panel .forecast-day-grid .fc-tl-section { order: 4; }
.forecast-panel .forecast-day-grid .tide-times-row { order: 5; }
.forecast-panel .forecast-day-grid .sun-tide-compact { order: 6; }
.forecast-panel .forecast-day-grid .fc-tl-legend { order: 7; }
.forecast-panel .forecast-day-grid .fc-timeband-note { order: 8; }}
@media (min-width: 768px) and (max-width: 1119px) {.forecast-panel {max-width: 560px}}
.forecast-sheet-grab {display: none}
@media (max-width: 767px) {.forecast-panel {--fc-sheet-h: 88vh;--fc-sheet-peek: 0.4;top: auto;bottom: 0;left: 0;right: 0;width: 100%;max-width: none;height: var(--fc-sheet-h);max-height: var(--fc-sheet-h);border-radius: 18px 18px 0 0;transform: translateY(100%)}
.forecast-panel.active {transform: translateY(calc(var(--fc-sheet-peek) * 100%))}
.forecast-panel.active[data-sheet-state="full"] {transform: translateY(0)}
.forecast-sheet-grab {display: flex;align-items: center;justify-content: center;padding: 16px 0 12px;flex-shrink: 0;cursor: grab;touch-action: none}
.forecast-sheet-grab::before {content: "";width: 48px;height: 5px;border-radius: 3px;background: #cbd5e1;transition: background 0.2s}
.forecast-sheet-grab:active {cursor: grabbing}
.forecast-sheet-grab:active::before {background: #94a3b8}
.forecast-panel .forecast-panel-header {cursor: grab;touch-action: none;user-select: none}
.forecast-panel .forecast-panel-header:active {cursor: grabbing}
.forecast-panel.active:not([data-sheet-state="full"]) .forecast-panel-content,
.forecast-panel.active:not([data-sheet-state="full"]) .forecast-sample-body {overflow: hidden}
.forecast-panel .forecast-tabs {order: 1}
.forecast-panel .forecast-day-content {order: 2}
.forecast-panel .forecast-sample-body .forecast-station-info {order: 3;border-top: 1px solid #e0e0e0;border-bottom: none}
.forecast-panel .forecast-attribution {order: 5}}
.forecast-panel .fc-simple,
.forecast-panel .fc-detfab-wrap {display: none}
@media (max-width: 767px) {.forecast-panel.active:not([data-sheet-state="full"]) .fc-simple {display: block}
.forecast-panel.active:not([data-sheet-state="full"]) .fc-simple ~ .fc-detail {display: none}
.forecast-panel .fc-simple ~ .fc-detail .fc-cond-block {display: none}
.forecast-panel .fc-simple ~ .fc-detail .forecast-day-grid .fc-thunder-alert {order: 5}
.forecast-panel .fc-simple {margin: -6px -4px 0}
.forecast-panel .fc-sm-label {display: block;font-size: 12px;font-weight: 600;line-height: 14px;letter-spacing: 0.02em;color: #64748b;white-space: nowrap}
.forecast-panel .fc-sm-chip {flex: none;width: 28px;height: 28px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;color: var(--fc-sm-ac);background: color-mix(in srgb, var(--fc-sm-ac) 12%, #fff)}
.forecast-panel .fc-sm-judge {position: relative;display: flex;align-items: center;min-height: 36px;padding: 3px 14px;gap: 8px;border-radius: 16px;background: var(--fc-sm-grad);color: #fff;min-width: 0}
.forecast-panel .fc-sm-judge-text {display: flex;flex-direction: column;min-width: 0}
.forecast-panel .fc-sm-judge-verdict {font-size: 20px;font-weight: 800;line-height: 22px}
.forecast-panel .fc-sm-judge-sub {font-size: 11px;font-weight: 600;line-height: 14px;overflow-wrap: anywhere}
.forecast-panel .fc-sm-warn {display: flex;align-items: center;height: 32px;margin-top: 8px;padding: 0 12px 0 8px;gap: 8px;border-left: 4px solid #dc2626;border-radius: 8px;background: color-mix(in srgb, #dc2626 8%, #fff);color: #991b1b;font-size: 17px;font-weight: 700;line-height: 20px;white-space: nowrap}
.forecast-panel .fc-sm-warn svg {flex: none;color: #dc2626}
.forecast-panel .fc-sm-next {display: flex;align-items: center;gap: 8px;margin-top: 8px;padding: 4px 12px;border-radius: 12px;background: color-mix(in srgb, var(--fc-sm-ac) 10%, #fff)}
.forecast-panel .fc-sm-next--none {display: block;min-height: 20px;padding: 0 4px;background: none}
.forecast-panel .fc-sm-next-body {min-width: 0}
.forecast-panel .fc-sm-next-main {display: flex;align-items: baseline;gap: 8px;line-height: 26px;white-space: nowrap}
.forecast-panel .fc-sm-next-time {font-size: 24px;font-weight: 800;color: #1e293b;font-variant-numeric: tabular-nums}
.forecast-panel .fc-sm-next-word {font-size: 17px;font-weight: 700;line-height: 20px;color: #1e293b}
.forecast-panel .fc-sm-next--none .fc-sm-next-word {color: #64748b}
.forecast-panel .fc-sm-next-sub {font-size: 12px;font-weight: 600;line-height: 14px;letter-spacing: 0.02em;color: #64748b;overflow-wrap: anywhere}
.forecast-panel .fc-sm-grid {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);gap: 8px;margin-top: 8px}
.forecast-panel .fc-sm-tile {display: flex;align-items: center;gap: 8px;min-width: 0;padding: 7px 12px;border-radius: 12px;background: color-mix(in srgb, var(--fc-sm-ac) 8%, #fff)}
.forecast-panel .fc-sm-tile-body {min-width: 0}
.forecast-panel .fc-sm-val {display: flex;align-items: baseline;gap: 2px;font-size: 17px;font-weight: 700;line-height: 20px;color: #1e293b;white-space: nowrap;font-variant-numeric: tabular-nums}
.forecast-panel .fc-sm-val--wx {flex-wrap: wrap;column-gap: 4px;row-gap: 0;font-size: 15px;line-height: 18px;white-space: normal}
.forecast-panel .fc-sm-val--wx > span {white-space: nowrap}
@media (max-width: 374px) {.forecast-panel .fc-sm-tile {gap: 6px;padding: 7px 10px}
.forecast-panel .fc-sm-val {font-size: 15px;line-height: 18px}}
@media (max-height: 820px) {.forecast-panel .fc-sm-warn,
.forecast-panel .fc-sm-next,
.forecast-panel .fc-sm-grid {margin-top: 6px}
.forecast-panel .fc-sm-grid {gap: 6px}
.forecast-panel .fc-sm-tile {padding-top: 5px;padding-bottom: 5px}}
.forecast-panel .fc-simple.is-compact-1 {margin-top: -8px}
.forecast-panel .fc-simple.is-compact-1 .fc-sm-judge {min-height: 32px;padding-top: 2px;padding-bottom: 2px}
.forecast-panel .fc-simple.is-compact-1 .fc-sm-warn,
.forecast-panel .fc-simple.is-compact-1 .fc-sm-next,
.forecast-panel .fc-simple.is-compact-1 .fc-sm-grid {margin-top: 4px}
.forecast-panel .fc-simple.is-compact-1 .fc-sm-warn {height: 28px}
.forecast-panel .fc-simple.is-compact-1 .fc-sm-next {padding-top: 2px;padding-bottom: 2px}
.forecast-panel .fc-simple.is-compact-1 .fc-sm-grid {gap: 4px}
.forecast-panel .fc-simple.is-compact-1 .fc-sm-tile {padding-top: 3px;padding-bottom: 3px}
.forecast-panel .fc-simple.is-compact-2 .fc-sm-next-main {line-height: 22px}
.forecast-panel .fc-simple.is-compact-2 .fc-sm-next-time {font-size: 20px}
.forecast-panel .fc-simple.is-compact-2 .fc-sm-next-word,
.forecast-panel .fc-simple.is-compact-2 .fc-sm-warn {font-size: 15px;line-height: 18px}
.forecast-panel .fc-simple.is-compact-2 .fc-sm-val {font-size: 14px;line-height: 17px}
.forecast-panel .fc-simple.is-compact-2 .fc-sm-chip {width: 24px;height: 24px}
.forecast-panel .fc-simple.is-compact-3 .fc-sm-judge-verdict {font-size: 18px;line-height: 20px}
.forecast-panel .fc-simple.is-compact-3 .fc-sm-judge-sub {line-height: 13px}
.forecast-panel .fc-simple.is-compact-3 .fc-sm-next-sub,
.forecast-panel .fc-simple.is-compact-3 .fc-sm-label {line-height: 13px}
.forecast-panel .fc-simple.is-compact-3 .fc-sm-val {line-height: 16px}
.forecast-panel .fc-sm-val small {font-size: 12px;font-weight: 600;color: #64748b}
.forecast-panel .fc-sm-slash {font-style: normal;font-weight: 600;color: #94a3b8;margin: 0 3px}
.forecast-panel .fc-sm-sunset-ic {display: inline-flex;align-self: center}
.forecast-panel.active:has(.forecast-panel-content:not(.hidden) .fc-simple) .fc-detfab-wrap {position: absolute;left: 0;right: 0;z-index: 4;display: flex;justify-content: center;pointer-events: none;top: calc(var(--fc-sheet-h) * (1 - var(--fc-sheet-peek)) - 16px - 44px - env(safe-area-inset-bottom, 0px))}
.forecast-panel.active[data-sheet-state="full"]:has(.forecast-panel-content:not(.hidden) .fc-simple) .fc-detfab-wrap {top: auto;bottom: calc(16px + env(safe-area-inset-bottom, 0px))}
.forecast-panel.active[data-sheet-state="full"]:has(.forecast-panel-content:not(.hidden) .fc-simple) .forecast-panel-content::after {content: "";flex: none;order: 9;height: calc(16px + 44px + 16px + env(safe-area-inset-bottom, 0px))}
.forecast-panel.active:not([data-sheet-state="full"]):has(.forecast-panel-content:not(.hidden) .fc-simple) .forecast-attribution {display: none}
.forecast-panel.active:not([data-sheet-state="full"]):has(.forecast-panel-content:not(.hidden) .fc-simple) .forecast-panel-content::after {content: "";flex: none;order: 9;height: calc(var(--fc-sheet-h) * var(--fc-sheet-peek) + 16px + 44px + 8px + env(safe-area-inset-bottom, 0px))}
.forecast-panel .fc-detfab {pointer-events: auto;display: inline-flex;align-items: center;gap: 6px;height: 44px;padding: 0 20px;border: 0;border-radius: 999px;background: #1976d2;color: #fff;font-size: 14px;font-weight: 700;cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 6px 16px rgba(25, 118, 210, 0.38)}
.forecast-panel .fc-detfab-chv {display: inline-flex}
.forecast-panel:not([data-sheet-state="full"]) .fc-detfab--back,
.forecast-panel[data-sheet-state="full"] .fc-detfab--open {display: none}}
@keyframes fc-detfab-in {from { transform: translateY(12px); opacity: 0; }
to { transform: none; opacity: 1; }}
@keyframes fc-detfab-chev-nudge {0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {.forecast-panel .fc-detfab {animation: fc-detfab-in 0.2s ease-out both}
.forecast-panel .fc-detfab--open .fc-detfab-chv {animation: fc-detfab-chev-nudge 1.2s ease-in-out 0.2s 3 both}}
.forecast-panel .fc-scroll-hint {position: absolute;bottom: 0;left: 0;z-index: 3;width: 100%;pointer-events: none;transition: opacity 0.4s ease}
.forecast-panel .fc-scroll-hint:not(.scroll-hint-hidden) .scroll-hint-chevrons {cursor: pointer;pointer-events: auto}
.forecast-panel .fc-scroll-hint .scroll-hint-fade {height: 48px}
.forecast-panel .fc-scroll-hint .scroll-hint-chevrons svg {width: 24px;height: 24px}
@media (max-width: 767px) {.forecast-panel .fc-scroll-hint .scroll-hint-fade {height: 40px}
.forecast-panel .fc-scroll-hint .scroll-hint-chevrons svg {width: 20px;height: 20px}}
.forecast-panel .forecast-day-content[tabindex="-1"]:focus {outline: none}
.forecast-panel .fc-scroll-hint:focus-visible {outline: none}
.forecast-panel .fc-scroll-hint:focus-visible .scroll-hint-chevrons {outline: 2px solid #1976d2;outline-offset: -2px}
.hidden {display: none !important}
.forecast-panel .fc-thunder-alert {display: flex;align-items: flex-start;gap: 10px;margin-top: 10px;background: #fef2f2;border: 1px solid #fecaca;border-left: 4px solid #ef4444;border-radius: 8px;padding: 10px 12px;font-size: 12px;color: #7f1d1d;line-height: 1.6}
.forecast-panel .fc-thunder-alert svg {width: 18px;height: 18px;color: #dc2626;flex-shrink: 0;margin-top: 2px}
.forecast-panel .fc-thunder-alert b {display: block;font-size: 12.5px}
.forecast-panel .fc-rain-alert {background: #eff6ff;border-color: #bfdbfe;border-left-color: #1e3a8a;color: #172554}
.forecast-panel .fc-rain-alert svg {color: #1e3a8a}
.forecast-panel .fc-rain-alert--extreme {background: #dc2626;border-color: #b91c1c;border-left-color: #7f1d1d;color: #fff}
.forecast-panel .fc-rain-alert--extreme svg {color: #fff}
.forecast-panel .fc-tl-section {margin-top: 12px}
.forecast-panel .fc-tl-head {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 8px;margin: 0 0 8px}
.forecast-panel .fc-tl-title {display: flex;align-items: center;gap: 6px;font-size: 14px;font-weight: 700;color: #1e293b}
.forecast-panel .fc-tl-title svg {width: 15px;height: 15px;flex-shrink: 0}
.forecast-panel .fc-tl-mode {display: flex;gap: 4px}
.forecast-panel .fc-tl-mode-btn {min-width: 44px;min-height: 44px;padding: 0 12px;border: 1px solid #cbd5e1;border-radius: 10px;background: #fff;color: #1e293b;font: inherit;font-size: 14px;font-weight: 600;cursor: pointer}
.forecast-panel .fc-tl-mode-btn[aria-pressed="true"] {background: #1976D2;border-color: #1976D2;color: #fff}
.forecast-panel .fc-tl-scroll {overflow-x: auto;overflow-y: hidden;overscroll-behavior-x: contain;-webkit-overflow-scrolling: touch}
.forecast-panel .fc-tl-inner {box-sizing: border-box;padding-bottom: 2px}
.forecast-panel .fc-tl-grid {display: grid;grid-template-columns: repeat(var(--n), minmax(0, 1fr))}
.forecast-panel .fc-tl-row {padding: 0 8px}
.forecast-panel .fc-tl-time {height: 28px;align-items: center}
.forecast-panel .fc-tl-tc,
.forecast-panel .fc-tl-wx-btn {margin: 0 1px;background: color-mix(in srgb, var(--c, transparent) 30%, transparent)}
.forecast-panel .fc-tl-tc {display: flex;align-self: stretch;align-items: center;justify-content: center;border-radius: 6px 6px 0 0;font-size: 12px;font-weight: 600;color: #475569;font-variant-numeric: tabular-nums;white-space: nowrap}
.forecast-panel .fc-tl-now-pill {display: inline-flex;align-items: center;height: 20px;padding: 0 4px;border-radius: 10px;background: #1976D2;color: #fff;font-size: 11px;font-weight: 700}
.forecast-panel .fc-tl-icons {height: 37px}
.forecast-panel .fc-tl-wx-btn {box-sizing: border-box;display: flex;align-items: center;justify-content: center;min-width: 0;height: 37px;padding: 0;border: 0;border-bottom: 5px solid var(--c, transparent);cursor: pointer}
.forecast-panel .fc-tl-wx-btn svg {width: 24px;height: 24px}
.forecast-panel .fc-tl-card {position: relative;overflow: hidden;overflow: clip;margin-top: 8px;padding: 8px;border-radius: 12px;background: #f8fafc}
.forecast-panel .fc-tl-card > :not(.fc-tl-nowband) {position: relative;z-index: 1}
.forecast-panel .fc-tl-nowband {position: absolute;z-index: 0;top: 0;bottom: 0;left: calc(8px + (100% - 16px) / var(--n) * var(--i));width: calc((100% - 16px) / var(--n));background: rgba(25, 118, 210, 0.06);pointer-events: none}
.forecast-panel .fc-tl-card > .fc-tl-pastveil {position: absolute;z-index: 1;top: 0;bottom: 0;left: 8px;width: calc((100% - 16px) / var(--n) * var(--i));background: rgba(241, 245, 249, 0.62);pointer-events: none}
.forecast-panel .fc-tl-past {opacity: 0.45}
.forecast-panel .fc-tl-card > .fc-tl-card-head {position: sticky;z-index: 2;left: 8px;display: flex;align-items: center;gap: 6px;width: max-content;height: 20px}
.forecast-panel .fc-tl-card-icon {display: inline-flex}
.forecast-panel .fc-tl-card-name {font-size: 12px;font-weight: 700;color: #1e293b}
.forecast-panel .fc-tl-card-unit {font-size: 11px;font-weight: 600;color: #64748b}
.forecast-panel .fc-tl-chart svg {display: block;overflow: visible}
.forecast-panel .fc-tl-ptx {font-size: 12px;font-weight: 700;paint-order: stroke;stroke: #fff;stroke-width: 3px;stroke-linejoin: round;font-variant-numeric: tabular-nums}
.forecast-panel .fc-tl-feed {margin: 0}
.forecast-panel .fc-tl-feed-item {display: flex;flex-direction: column;min-width: 0}
.forecast-panel .fc-tl-feed-item i {height: 6px;margin: 0 1px;border: 2px solid var(--k);border-top: 0;border-radius: 0 0 4px 4px}
.forecast-panel .fc-tl-feed-item span {overflow: hidden;height: 14px;font-size: 11px;font-weight: 700;line-height: 14px;text-align: center;white-space: nowrap}
.forecast-panel .fc-tl-wind-cell {display: flex;flex-direction: column;align-items: center;gap: 7px;min-width: 0;height: 48px;padding: 0;border: 0;background: none;color: #1e293b;font: inherit;font-size: 12px;font-weight: 700;line-height: 14px;font-variant-numeric: tabular-nums}
.forecast-panel .fc-tl-wind-btn {cursor: pointer}
.forecast-panel .fc-tl-wind-empty {justify-content: flex-end;padding-bottom: 3px;color: #94a3b8}
.forecast-panel .fc-tl-tide-head-now {display: inline-flex;align-items: center;gap: 4px;margin-left: 4px;font-size: 11px;font-weight: 600;color: #64748b}
.forecast-panel .fc-tl-tide-now {font-size: 12px;font-weight: 800;color: #1976D2;font-variant-numeric: tabular-nums}
.forecast-panel .fc-tl-tide-now small {font-size: 10px;font-weight: 700}
.forecast-panel .fc-tl-tide-trend {display: inline-flex;align-items: center;gap: 2px;padding: 1px 6px;border-radius: 999px;background: #e0f2fe;color: #0284c7;font-size: 10.5px;font-weight: 700}
.forecast-panel .fc-tl-tide-trend--down {background: #fef3c7;color: #b45309}
.forecast-panel .fc-tl-tide-trend svg {width: 11px;height: 11px}
.forecast-panel .fc-tl-legend {margin-top: 10px}
.forecast-panel .fc-tl-legend summary {display: inline-flex;align-items: center;gap: 4px;font-size: 11px;font-weight: 700;color: var(--color-text-secondary);cursor: pointer;list-style: none;border: 1px solid var(--color-border);border-radius: 999px;padding: 3px 12px;user-select: none}
.forecast-panel .fc-tl-legend summary::-webkit-details-marker {display: none}
.forecast-panel .fc-tl-legend summary svg {width: 11px;height: 11px;transition: transform 0.15s}
.forecast-panel .fc-tl-legend[open] summary svg {transform: rotate(180deg)}
.forecast-panel .fc-tl-legend-row {display: flex;flex-wrap: wrap;align-items: center;gap: 10px;padding-top: 8px;font-size: 10px;color: var(--color-text-muted)}
.forecast-panel .fc-tl-legend-group {font-weight: 700;color: var(--color-text-secondary);min-width: 2.5em}
.fc-fav-dlg-overlay {position: fixed;inset: 0;z-index: var(--z-index-modal);display: flex;align-items: center;justify-content: center;padding: 16px;background: rgba(15, 23, 42, 0.5);box-sizing: border-box}
.fc-fav-dlg {width: 100%;max-width: 340px;max-height: 100%;overflow-y: auto;padding: 16px;border-radius: 16px;background: #fff;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);color: #1e293b;box-sizing: border-box}
@media (max-width: 767px) {.fc-fav-dlg {max-width: 100%}}
.fc-fav-dlg-head {display: flex;align-items: center;gap: 8px;margin: 0 0 10px}
.fc-fav-dlg-head svg {flex: none}
.fc-fav-dlg-head h3 {margin: 0;font-size: 16px;font-weight: 700}
.fc-fav-dlg-info {display: flex;align-items: flex-start;gap: 8px;margin: 0 0 10px;padding: 10px 12px;border-radius: 12px;background: #e8f4fd;color: #0d47a1}
.fc-fav-dlg-info-ic {flex: none;margin-top: 1px}
.fc-fav-dlg-info p {margin: 0;min-width: 0;overflow-wrap: anywhere}
.fc-fav-dlg-info-main {font-size: 13px;font-weight: 700;line-height: 1.4;text-wrap: balance}
.fc-fav-dlg-info .fc-fav-dlg-info-sub {margin-top: 2px;font-size: 11.5px;line-height: 1.5;color: #334155}
.fc-fav-dlg-count {margin: 0 0 8px;font-size: 12px;font-weight: 600;color: #475569}
.fc-fav-dlg-count--warn {padding: 6px 10px;border-radius: 8px;background: #fef3cd;color: #92400e}
.fc-fav-dlg-limit,
.fc-fav-dlg-error {margin: 0 0 8px;font-size: 12px;line-height: 1.5;color: #b91c1c;overflow-wrap: anywhere}
.fc-fav-dlg-error[hidden],
.fc-fav-dlg-remove[hidden],
.fc-fav-dlg-confirm[hidden] {display: none !important}
.fc-fav-dlg-label {display: block;margin: 0 0 12px;font-size: 12px;font-weight: 600;color: #475569}
.fc-fav-dlg-input {display: block;width: 100%;max-width: 100%;height: 44px;margin-top: 4px;padding: 0 12px;border: 1px solid #cbd5e1;border-radius: 10px;background: #fff;font: inherit;font-size: 16px;color: #1e293b;box-sizing: border-box}
.fc-fav-dlg-input:focus {outline: none;border-color: #1976D2;box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2)}
.fc-fav-dlg-btns {display: flex;gap: 8px}
.fc-fav-dlg-btns button {flex: 1;min-width: 0;height: 44px;border-radius: 10px;font-size: 14px;font-weight: 700;cursor: pointer}
.fc-fav-dlg-cancel {border: 1px solid #cbd5e1;background: #fff;color: #334155}
.fc-fav-dlg-save {border: 0;background: #1976D2;color: #fff}
.fc-fav-dlg-save:disabled {background: #cbd5e1;color: #475569;cursor: not-allowed}
.fc-fav-dlg-remove,
.fc-fav-dlg-confirm {margin-top: 12px;padding-top: 12px;border-top: 1px solid #e2e8f0}
.fc-fav-dlg-remove-btn {display: inline-flex;align-items: center;justify-content: center;gap: 6px;width: 100%;min-height: 44px;padding: 0 12px;border: 0;border-radius: 10px;background: none;color: #b91c1c;font-size: 14px;font-weight: 700;cursor: pointer}
.fc-fav-dlg-remove-btn:hover {background: #fef2f2}
.fc-fav-dlg-confirm-text {margin: 0 0 8px;font-size: 13px;font-weight: 600;color: #b91c1c}
.fc-fav-dlg-delete {border: 0;background: #dc2626;color: #fff}
.fc-fav-dlg-delete:disabled {background: #fca5a5;cursor: not-allowed}
.forecast-panel .fc-sm-grid--facts {display: none}
.forecast-panel .fc-sm-gust,
.forecast-panel .fc-sm-ghead,
.forecast-panel .fc-sm-judge-wx {display: none}
@media (min-width: 1120px) {.forecast-panel:has(.forecast-day-content > .fc-simple) {max-height: 94vh;--gut: 96px}
.forecast-panel.active:not(.forecast-sample-panel) {width: 96%}
.forecast-panel .forecast-day-content:has(> .fc-simple) {display: grid;grid-template-columns: 300px minmax(0, 1fr);gap: 0 16px;align-items: stretch;align-content: start;padding: 8px 12px}
.forecast-panel .forecast-day-content > .fc-simple {grid-column: 1;grid-row: 1;display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);grid-template-areas:
"warn warn"
"judge judge"
"next next"
"hsea hsea"
"tide tname"
"wave wind"
"hsky hsky"
"wx temp"
"pop sun";align-content: start;column-gap: 8px;min-width: 0;margin: 0}
.forecast-panel .forecast-day-content > .fc-simple > * {margin: 0}
.forecast-panel .forecast-day-content:has(> .fc-simple) > .fc-detail,
.forecast-panel .forecast-day-content:has(> .fc-simple) .forecast-day-grid {display: contents}
.forecast-panel .forecast-day-content:has(> .fc-simple) .forecast-col-main {display: none}
.forecast-panel .forecast-day-content:has(> .fc-simple) .forecast-col-hourly {grid-column: 2;grid-row: 1;min-width: 0;border-left: 1px solid var(--color-border);padding-left: 16px}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-mode,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-legend,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-timeband-note {display: none}
.forecast-panel:has(.forecast-day-content > .fc-simple) .forecast-attribution,
.forecast-panel.active:not(.forecast-sample-panel) .forecast-attribution {margin-top: 4px;padding-top: 6px;font-size: 12px;display: flex;justify-content: center;gap: 14px;flex-wrap: wrap}
.forecast-panel .fc-simple .fc-sm-label {display: block;font-size: 12px;font-weight: 500;line-height: 16px;color: #64748b;white-space: nowrap}
.forecast-panel .fc-simple .fc-sm-chip {flex: none;width: 22px;height: 22px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;color: var(--fc-sm-ac);background: color-mix(in srgb, var(--fc-sm-ac) 12%, #fff)}
.forecast-panel .fc-simple .fc-sm-chip svg {width: 14px;height: 14px}
.forecast-panel .fc-simple .fc-sm-warn {grid-area: warn;display: flex;align-items: center;height: 30px;margin-bottom: 8px;padding: 0 12px 0 8px;gap: 8px;border-left: 4px solid #dc2626;border-radius: 10px;background: color-mix(in srgb, #dc2626 8%, #fff);color: #991b1b;font-size: 17px;font-weight: 700;line-height: 20px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;min-width: 0}
.forecast-panel .fc-simple .fc-sm-warn svg {flex: none;color: #dc2626}
.forecast-panel .fc-simple .fc-sm-judge {grid-area: judge;display: flex;align-items: center;gap: 10px;min-width: 0;min-height: 0;padding: 10px 14px 8px;border-radius: 16px 16px 0 0;background: var(--fc-sm-soft);color: #334155}
.forecast-panel .fc-simple .fc-sm-judge-text {display: flex;flex-direction: column;flex: 1 1 auto;gap: 2px;min-width: 0}
.forecast-panel .fc-simple .fc-sm-judge-verdict {font-size: 24px;line-height: 30px;font-weight: 800;color: var(--fc-sm-deep)}
.forecast-panel .fc-simple .fc-sm-judge-sub,
.forecast-panel .fc-simple .fc-sm-next-part {font-size: 13px;line-height: 17px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;min-width: 0}
.forecast-panel .fc-simple .fc-sm-judge-wx {flex: none;display: inline-flex;align-items: center;justify-content: center;width: 48px;height: 48px;border-radius: 50%;background: rgb(255 255 255 / 70%)}
.forecast-panel .fc-simple .fc-sm-next {grid-area: next;position: relative;display: grid;grid-template-columns: 24px auto minmax(0, 1fr);align-items: center;column-gap: 6px;row-gap: 1px;padding: 8px 14px 10px;border-radius: 0 0 16px 16px;background: var(--fc-sm-soft)}
.forecast-panel .fc-simple .fc-sm-next::before {content: "";position: absolute;top: 0;left: 14px;right: 14px;height: 1px;background: color-mix(in srgb, var(--fc-sm-cond) 28%, transparent)}
.forecast-panel .fc-simple .fc-sm-next--none {display: block}
.forecast-panel .fc-simple:not(:has(.fc-sm-judge)) .fc-sm-next {border-radius: 16px;background: var(--color-bg-secondary)}
.forecast-panel .fc-simple:not(:has(.fc-sm-judge)) .fc-sm-next::before {content: none}
.forecast-panel .fc-simple .fc-sm-next > .fc-sm-chip {grid-column: 1;grid-row: 1;width: 24px;height: 24px}
.forecast-panel .fc-simple .fc-sm-next > .fc-sm-chip svg {width: 16px;height: 16px}
.forecast-panel .fc-simple .fc-sm-next-body,
.forecast-panel .fc-simple .fc-sm-next-main {display: contents}
.forecast-panel .fc-simple .fc-sm-next .fc-sm-label {grid-column: 2;grid-row: 1;font-size: 13px}
.forecast-panel .fc-simple .fc-sm-next-word {grid-column: 3;grid-row: 1;justify-self: end;font-size: 17px;line-height: 22px;font-weight: 700;color: #1e293b;white-space: nowrap}
.forecast-panel .fc-simple .fc-sm-next--none .fc-sm-next-word {color: #64748b}
.forecast-panel .fc-simple .fc-sm-next-time {grid-column: 1 / -1;grid-row: 2;display: block;font-size: 28px;line-height: 30px;font-weight: 800;color: #1e293b;white-space: nowrap;font-variant-numeric: tabular-nums}
.forecast-panel .fc-simple .fc-sm-next-sub {grid-column: 1 / -1;grid-row: 3;min-width: 0;color: #475569}
.forecast-panel .fc-simple .fc-sm-next-part {display: block;font-weight: 500}
.forecast-panel .fc-simple .fc-sm-next-sep,
.forecast-panel .fc-simple .fc-sm-next-part--others,
.forecast-panel .fc-simple .fc-sm-next-sub:not(:has(.fc-sm-next-part:not(.fc-sm-next-part--others))) {display: none}
.forecast-panel .fc-simple .fc-sm-ghead {display: flex;align-items: center;gap: 8px;margin: 8px 0 4px;font-size: 12px;line-height: 16px;font-weight: 800;color: #475569}
.forecast-panel .fc-simple .fc-sm-ghead::after {content: "";flex: 1 1 auto;height: 1px;background: var(--color-border)}
.forecast-panel .fc-simple .fc-sm-ghead--sea { grid-area: hsea; }
.forecast-panel .fc-simple .fc-sm-ghead--sky { grid-area: hsky; }
.forecast-panel .fc-simple .fc-sm-grid,
.forecast-panel .fc-simple .fc-sm-grid--facts {display: contents}
.forecast-panel .fc-simple .fc-sm-tile--tide { grid-area: tide; }
.forecast-panel .fc-simple .fc-sm-fact--tname { grid-area: tname; }
.forecast-panel .fc-simple .fc-sm-fact--wave { grid-area: wave; }
.forecast-panel .fc-simple .fc-sm-tile--wind { grid-area: wind; }
.forecast-panel .fc-simple .fc-sm-tile--wx { grid-area: wx; }
.forecast-panel .fc-simple .fc-sm-fact--temp { grid-area: temp; }
.forecast-panel .fc-simple .fc-sm-fact--pop { grid-area: pop; }
.forecast-panel .fc-simple .fc-sm-tile--sun { grid-area: sun; }
.forecast-panel .fc-simple .fc-sm-fact--wave,
.forecast-panel .fc-simple .fc-sm-tile--wind,
.forecast-panel .fc-simple .fc-sm-fact--pop,
.forecast-panel .fc-simple .fc-sm-tile--sun {margin-top: 8px}
.forecast-panel .fc-simple .fc-sm-tile,
.forecast-panel .fc-simple .fc-sm-fact {box-sizing: border-box;min-width: 0;min-height: 54px;padding: 6px 10px;border: 1px solid var(--color-border);border-radius: 12px;background: #fff}
.forecast-panel .fc-simple .fc-sm-tile {display: grid;grid-template-columns: 22px minmax(0, 1fr);align-content: start;align-items: center;column-gap: 5px;row-gap: 2px}
.forecast-panel .fc-simple .fc-sm-tile-body {display: contents}
.forecast-panel .fc-simple .fc-sm-tile > .fc-sm-chip {grid-column: 1;grid-row: 1;color: var(--fc-sm-vc);background: color-mix(in srgb, var(--fc-sm-vc) 12%, #fff)}
.forecast-panel .fc-simple .fc-sm-tile .fc-sm-label {grid-column: 2;grid-row: 1}
.forecast-panel .fc-simple .fc-sm-tile .fc-sm-val {grid-column: 1 / -1;grid-row: 2}
.forecast-panel .fc-simple .fc-sm-fact {display: flex;flex-direction: column;justify-content: flex-start;gap: 2px}
.forecast-panel .fc-simple .fc-sm-fact-head {display: flex;align-items: center;gap: 5px;min-width: 0}
.forecast-panel .fc-simple .fc-sm-val {display: flex;align-items: baseline;gap: 2px;min-width: 0;font-size: 17px;line-height: 22px;font-weight: 700;color: var(--fc-sm-vc, var(--fc-sm-ac));white-space: nowrap;font-variant-numeric: tabular-nums}
.forecast-panel .fc-simple .fc-sm-val--wx > span {color: var(--fc-sm-vc)}
.forecast-panel .fc-simple .fc-sm-tmin { color: #2563eb; }
.forecast-panel .fc-simple .fc-sm-tmax { color: #dc2626; }
.forecast-panel .fc-simple .fc-sm-sunrise { color: #c2410c; }
.forecast-panel .fc-simple .fc-sm-sunset { color: #4338ca; }
.forecast-panel .fc-simple .fc-sm-gust {display: block;grid-column: 1 / -1;grid-row: 3;font-size: 12px;line-height: 16px;font-weight: 700;color: var(--color-danger);white-space: nowrap}
.forecast-panel .fc-simple .fc-sm-val--wx {flex-wrap: nowrap;font-size: 15px;line-height: 20px}
.forecast-panel .fc-simple .fc-sm-val small {font-size: 12px;font-weight: 600;color: #64748b}
.forecast-panel .fc-simple .fc-sm-slash {font-style: normal;font-weight: 600;color: #94a3b8;margin: 0 3px}
.forecast-panel .fc-simple .fc-sm-sunset-ic {display: none}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-section {margin-top: 0}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-head {margin-bottom: 6px}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-title {white-space: nowrap}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-time {height: 24px}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-icons,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-wx-btn {height: 33px}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-row {padding-left: calc(8px + var(--gut))}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card {margin-top: 4px;padding: 4px 8px 4px calc(8px + var(--gut))}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-nowband {left: calc(8px + var(--gut) + (100% - 16px - var(--gut)) / var(--n) * var(--i));width: calc((100% - 16px - var(--gut)) / var(--n))}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card > .fc-tl-pastveil {left: calc(8px + var(--gut));width: calc((100% - 16px - var(--gut)) / var(--n) * var(--i))}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card > .fc-tl-card-head {position: absolute;left: 8px;top: 0;bottom: 0;width: calc(var(--gut) - 10px);height: auto;gap: 0 4px;flex-wrap: wrap;align-content: center;align-items: baseline}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card--tide > .fc-tl-card-head {top: 4px;bottom: auto;align-content: flex-start;flex-direction: column;align-items: flex-start;gap: 2px}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card-icon {align-self: center}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card-icon svg {width: 13px;height: 13px}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card--tide > .fc-tl-card-head {flex-direction: row;flex-wrap: wrap;align-items: center;gap: 2px 4px}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card--tide .fc-tl-tide-head-now {flex-basis: 100%}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card--tide .fc-tl-card-name,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card--tide .fc-tl-tide-head-now {margin: 0}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-tide-head-now {flex-direction: column;align-items: flex-start;gap: 2px;margin-left: 0;white-space: nowrap}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-tide-trend {padding: 0 5px;white-space: nowrap}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-wind-cell {height: 44px;gap: 3px}
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-card-unit,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-feed-item span,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-now-pill,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-tide-head-now,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-tide-trend,
.forecast-panel .forecast-day-content:has(> .fc-simple) .fc-tl-tide-now small {font-size: 12px}
.forecast-panel.active:not(.forecast-sample-panel) .forecast-panel-chip {font-size: 12px}
.forecast-panel:not(.forecast-sample-panel) .tide-cal-wday,
.forecast-panel:not(.forecast-sample-panel) .tide-cal-day,
.forecast-panel:not(.forecast-sample-panel) .tide-cal-stat-label,
.forecast-panel:not(.forecast-sample-panel) .tide-cal-graph-label,
.forecast-panel:not(.forecast-sample-panel) .tide-cal-graph-unit,
.forecast-panel:not(.forecast-sample-panel) .tide-cal-tab-content small {font-size: 12px}
.forecast-panel:not(.forecast-sample-panel) .tide-cal-tide-badge {font-size: 12px;padding: 0 3px;line-height: 1.3}
.forecast-panel:not(.forecast-sample-panel) .tide-cal-tab-content svg text {font-size: 12px}}
.forecast-panel [data-explain] {cursor: pointer}
.forecast-panel .fc-explain-active {position: relative;z-index: 2;border-radius: 8px;box-shadow: 0 0 0 2px #2563eb}
.forecast-panel .fc-tl-card > .fc-tl-chart:has(> .fc-explain-col) {z-index: 2}
.forecast-panel [data-explain][role="button"]:focus-visible {outline: 2px solid #2563eb;outline-offset: 2px}
.forecast-panel .fc-explain-col {position: absolute;z-index: 3;top: 0;bottom: 0;box-sizing: border-box;border: 2px solid #2563eb;border-radius: 4px;background: rgba(37, 99, 235, 0.08);pointer-events: none}
.forecast-panel .fc-explain-bubble {position: absolute;z-index: 30;box-sizing: border-box;max-width: calc(100% - 16px);padding: 8px 12px;border: 1px solid #bfdbfe;border-radius: 10px;background: #fff;box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);pointer-events: none;animation: fc-explain-in 0.12s ease-out}
.forecast-panel .fc-explain-bubble::after {content: "";position: absolute;width: 12px;height: 12px;background: #fff}
.forecast-panel .fc-explain-bubble--up::after {left: var(--fc-explain-ax, 20px);bottom: -7px;transform: translateX(-50%) rotate(45deg);border-right: 1px solid #bfdbfe;border-bottom: 1px solid #bfdbfe}
.forecast-panel .fc-explain-bubble--down::after {left: var(--fc-explain-ax, 20px);top: -7px;transform: translateX(-50%) rotate(45deg);border-left: 1px solid #bfdbfe;border-top: 1px solid #bfdbfe}
.forecast-panel .fc-explain-bubble--right::after {top: var(--fc-explain-ay, 20px);left: -7px;transform: translateY(-50%) rotate(45deg);border-left: 1px solid #bfdbfe;border-bottom: 1px solid #bfdbfe}
.forecast-panel .fc-explain-bubble--left::after {top: var(--fc-explain-ay, 20px);right: -7px;transform: translateY(-50%) rotate(45deg);border-right: 1px solid #bfdbfe;border-top: 1px solid #bfdbfe}
.forecast-panel .fc-explain-head {display: flex;flex-wrap: wrap;align-items: center;gap: 4px 6px}
.forecast-panel .fc-explain-badge {padding: 1px 9px;border-radius: 999px;color: #fff;font-size: 12px;font-weight: 700;line-height: 1.5}
.forecast-panel .fc-explain-text {margin: 3px 0 0;color: #475569;font-size: 12px;line-height: 1.5;overflow-wrap: anywhere}
@keyframes fc-explain-in {from { opacity: 0; }
to { opacity: 1; }}
.forecast-panel .fc-simple .fc-sm-warn.fc-sm-warn--rain,
.forecast-panel .fc-sm-warn.fc-sm-warn--rain {border-left-color: #1e3a8a;background: #eff6ff;color: #172554;height: auto;min-height: 28px;padding-top: 4px;padding-bottom: 4px;white-space: normal}
.forecast-panel .fc-simple .fc-sm-warn.fc-sm-warn--rain svg,
.forecast-panel .fc-sm-warn.fc-sm-warn--rain svg {color: #1e3a8a}
.forecast-panel .fc-simple .fc-sm-warn.fc-sm-warn--rain.fc-sm-warn--extreme,
.forecast-panel .fc-sm-warn.fc-sm-warn--rain.fc-sm-warn--extreme {border-left-color: #7f1d1d;background: #dc2626;color: #fff}
.forecast-panel .fc-simple .fc-sm-warn.fc-sm-warn--rain.fc-sm-warn--extreme svg,
.forecast-panel .fc-sm-warn.fc-sm-warn--rain.fc-sm-warn--extreme svg {color: #fff}
.forecast-panel .fc-rain-warn-legend {flex: none;margin-right: 2px;vertical-align: -2px}
@media (max-width: 767px) {.forecast-panel .forecast-day-grid .tide-times-row,
.forecast-panel .forecast-day-grid .fc-tl-legend {display: none}
.forecast-panel[data-sheet-state="full"] .forecast-day-content:has(.fc-tl-section) {padding-top: 4px}
.forecast-panel .forecast-day-grid .fc-tl-section {margin-top: 4px}
.forecast-panel .fc-tl-head {flex-wrap: nowrap;margin-bottom: 6px}
.forecast-panel .fc-tl-mode {flex: none;gap: 0;padding: 2px;border-radius: 8px;background: #e2e8f0}
.forecast-panel .fc-tl-mode-btn {min-width: 0;min-height: 32px;padding: 0 12px;border: 0;border-radius: 6px;background: transparent;color: #475569;font-size: 12px}
.forecast-panel .fc-tl-mode-btn[aria-pressed="true"] {background: #fff;color: #1976D2;box-shadow: 0 1px 2px rgb(15 23 42 / 0.15)}
.forecast-panel .fc-tl-inner > .fc-tl-time,
.forecast-panel .fc-tl-inner > .fc-tl-icons,
.forecast-panel .fc-tl-inner > .fc-tl-feed {position: relative;z-index: 5;background: #fff;transform: translateY(var(--fc-tl-pin, 0px))}
.forecast-panel .fc-tl-inner.is-pinned > .fc-tl-feed,
.forecast-panel .fc-tl-inner.is-pinned > .fc-tl-icons:not(:has(+ .fc-tl-feed)) {box-shadow: 0 4px 4px -3px rgb(15 23 42 / 0.18)}
@supports (animation-timeline: scroll()) {.forecast-panel .fc-tl-pin-scroller {scroll-timeline: --fc-tl-pin-scroll block}
.forecast-panel .fc-tl-inner.is-pin-driven {--fc-tl-pin-range: var(--fc-tl-pin-start) calc(var(--fc-tl-pin-start) + var(--fc-tl-pin-max))}
.forecast-panel .fc-tl-inner.is-pin-driven > .fc-tl-time,
.forecast-panel .fc-tl-inner.is-pin-driven > .fc-tl-icons,
.forecast-panel .fc-tl-inner.is-pin-driven > .fc-tl-feed {animation-name: fc-tl-pin;animation-duration: auto;animation-timing-function: linear;animation-fill-mode: both;animation-timeline: --fc-tl-pin-scroll;animation-range: var(--fc-tl-pin-range)}
.forecast-panel .fc-tl-inner.is-pin-driven > .fc-tl-feed,
.forecast-panel .fc-tl-inner.is-pin-driven > .fc-tl-icons:not(:has(+ .fc-tl-feed)) {animation-name: fc-tl-pin, fc-tl-pin-shadow;animation-range: var(--fc-tl-pin-range), var(--fc-tl-pin-start) calc(var(--fc-tl-pin-start) + 1px)}}}
@keyframes fc-tl-pin {from { transform: translateY(0); }
to { transform: translateY(var(--fc-tl-pin-max)); }}
@keyframes fc-tl-pin-shadow {from { box-shadow: none; }
to { box-shadow: 0 4px 4px -3px rgb(15 23 42 / 0.18); }}