/* "My Forecasts" panel (forecasts-panel.js). The left sidebar: a 400px
   column under the 64px bar on desktop (Kai's panel is on the right), shown
   and hidden by the header button left of the logo or the tab on its edge;
   a bottom sheet on phones. transform (not left/right) slides it, which also
   makes it the containing block for the renderers' position:fixed sheets,
   so they stay inside. */
.dc-fc-panel {
    position: fixed; top: 64px; left: 0; bottom: 0; width: 400px; max-width: 100vw;
    z-index: 3000; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0F2041 0%, #0f1423 100%);
    color: #e8eef4; border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 8px 0 30px rgba(0, 0, 0, .45);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.dc-fc-panel.open { transform: none; visibility: visible; transition: transform .25s ease; }
/* The list and a DeepCast report swap in place (index.html swapInPlace). */
.dc-fc-panel.dc-no-slide, .dc-report-panel.dc-no-slide { transition: none !important; }
/* Closed, only the edge tab shows: no shadow bleeding onto the map. */
.dc-fc-panel:not(.open) { box-shadow: none; }

/* Edge tab: rides the panel's right edge, so it sits on the map's left edge
   when the panel is hidden. The chevron points the way the panel will move. */
.dc-fc-edge {
    position: absolute; left: 100%; top: 50%; margin-top: -24px; width: 22px; height: 48px;
    visibility: visible; display: flex; align-items: center; justify-content: center; padding: 0;
    background: #1a3160; color: #fff; cursor: pointer;
    /* A light outline plus a dark halo: readable on any map colour. */
    border: 1.5px solid rgba(255, 255, 255, .7); border-left: 0; border-radius: 0 8px 8px 0;
    box-shadow: 0 0 0 1px rgba(8, 18, 38, .6), 3px 0 10px rgba(0, 0, 0, .5);
}
.dc-fc-edge:hover { background: #24407a; border-color: #fff; }
.dc-fc-edge:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 2px; }
.dc-fc-edge svg { width: 16px; height: 16px; transition: transform .25s ease; }
.dc-fc-panel.open .dc-fc-edge svg { transform: rotate(180deg); }
body:not(.dc-authed) .dc-fc-edge { display: none; }

/* The map's left-hand controls (zoom, globe) move out from under the panel. */
.dc-map-container .leaflet-left { transition: transform .25s ease; }
body.dc-fc-open .dc-map-container .leaflet-left { transform: translateX(400px); }
/* Everything centred on the map (layer tabs, legend, tips, toasts) centres
   on the part the panel leaves visible: half the panel's width over.
   margin-left, not left/transform, so their own translateX(-50%) is
   untouched. The hourly timeline starts at the panel's edge. */
body.dc-fc-open .dc-base-toggle, body.dc-fc-open .dc-base-tooltip, body.dc-fc-open .dc-range-panel,
body.dc-fc-open .dc-contrast-tip, body.dc-fc-open .dc-share-toast, body.dc-fc-open .dc-measure-hint,
body.dc-fc-open .dc-status-banner, body.dc-fc-open #dc-map-error-toast { margin-left: 200px; }
body.dc-fc-open .dc-timeline { left: 400px; }
/* The DeepCast report (deepcast-report.css) opens in the same place, 560px wide. */
body.dc-report-open .dc-map-container .leaflet-left { transform: translateX(560px); }
body.dc-report-open .dc-base-toggle, body.dc-report-open .dc-base-tooltip, body.dc-report-open .dc-range-panel,
body.dc-report-open .dc-contrast-tip, body.dc-report-open .dc-share-toast, body.dc-report-open .dc-measure-hint,
body.dc-report-open .dc-status-banner, body.dc-report-open #dc-map-error-toast { margin-left: 280px; }
body.dc-report-open .dc-timeline { left: 560px; }
/* They slide with the panel. Each keeps its own transitions (fades, pops). */
.dc-base-toggle, .dc-range-panel { transition: opacity .15s ease, margin-left .25s ease; }
.dc-base-tooltip, .dc-measure-hint, #dc-map-error-toast { transition: margin-left .25s ease; }
.dc-share-toast { transition: opacity .3s, transform .3s, margin-left .25s ease; }
.dc-contrast-tip { transition: opacity .2s, transform .2s, margin-left .25s ease; }
/* body: the viewer's inline <style> for the banner comes after this file. */
body .dc-status-banner { transition: transform .35s ease, opacity .35s ease, margin-left .25s ease; }
.dc-timeline { transition: left .25s ease; }
/* Shifted right, a shrink-to-fit banner would lose width and wrap. */
@media (min-width: 641px) {
    body.dc-fc-open .dc-status-banner { width: max-content; max-width: calc(100vw - 460px); }
}
@media (min-width: 601px) {
    body.dc-report-open .dc-status-banner { width: max-content; max-width: calc(100vw - 620px); }
}

.dc-fc-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; flex: none; }
.dc-fc-title { white-space: nowrap; }
.dc-fc-title { flex: 1; font-size: 17px; font-weight: 700; }
.dc-fc-close, .dc-fc-back {
    background: none; border: 0; color: rgba(255, 255, 255, .7); cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; gap: 4px; font: inherit;
}
.dc-fc-close { font-size: 24px; line-height: 1; width: 32px; height: 32px; justify-content: center; }
/* Desktop closes with the edge tab or the header button; the X is for the phone sheet. */
.dc-fc-close { display: none; }
.dc-fc-close:hover, .dc-fc-back:hover { color: #fff; background: rgba(255, 255, 255, .08); }
/* Same size, weight and colour as the list's "My Forecasts" title, so the header doesn't jump;
   the chevron keeps its own room from the panel edge. */
.dc-fc-back { font-size: 17px; font-weight: 700; color: inherit; padding: 6px 10px 6px 0; margin-left: -4px; gap: 2px; }
/* A cast view: the back link replaces the title (and the "+"), so the cast
   gets the room. */
.dc-fc-back { display: none; }
.dc-fc-panel.dc-fc-detailing .dc-fc-back { display: flex; margin-right: auto; }
.dc-fc-panel.dc-fc-detailing .dc-fc-title { display: none; }
/* The product bar under the back row in a cast view (cast-cards.css .dc-card-bar). */
.dc-fc-kindbar.dc-card-bar { display: none; }
.dc-fc-panel.dc-fc-detailing .dc-fc-kindbar.dc-card-bar { display: flex; }
/* A cast view is framed like its list card: inset, the card's white edge and rounded corners,
   the bar on top and the scrolling cast under it. */
.dc-fc-kindbar.dc-card-bar {
    margin: 0 12px; border: 1px solid rgba(255, 255, 255, .24); border-bottom-color: rgba(255, 255, 255, .1);
    border-radius: 12px 12px 0 0;
}
.dc-fc-detail {
    margin: 0 12px calc(12px + env(safe-area-inset-bottom)); overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24); border-top: 0; border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    background: #F2F2F7;   /* the cast's light ground (cast-render.css --grouped-bg), also while it loads */
}
.dc-fc-detail .dc-fc-note { color: #64748b; }
.dc-fc-detail .dc-fc-spinner { border-color: rgba(15, 23, 42, .15); border-top-color: #FF8504; }
.dc-fc-back svg { width: 18px; height: 18px; flex: none; }

/* "+" beside the title: the map's "+" moves here while the panel is open. */
.dc-fc-new {
    flex: none; width: 32px; height: 32px; border-radius: 50%; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #FF8504; color: #fff; border: 0; box-shadow: 0 2px 8px rgba(255, 133, 4, .3);
}
.dc-fc-new:hover { background: #e67600; }
.dc-fc-new:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dc-fc-new svg { width: 18px; height: 18px; }
.dc-fc-panel.dc-fc-detailing .dc-fc-new { display: none; }
body.dc-fc-open .dc-map-cta { display: none !important; }

/* One small filter in the header row, between the title and the "+" (the apps have none). */
.dc-fc-filter { position: relative; flex: none; }
.dc-fc-filter select {
    appearance: none; -webkit-appearance: none; cursor: pointer; width: 124px;
    background: rgba(255, 255, 255, .04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffffb3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center / 14px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; color: #e8eef4; outline: none;
    font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding: 6px 30px 6px 10px;
}
.dc-fc-filter select:hover { border-color: rgba(255, 255, 255, .32); }
/* Same outline before and after use; a ring only for keyboard focus. */
.dc-fc-filter select:focus-visible { border-color: #4fc3f7; box-shadow: 0 0 0 2px rgba(79, 195, 247, .35); }
.dc-fc-filter select option { background: #0F2041; color: #fff; }
.dc-fc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.dc-fc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.dc-fc-section { margin-top: 18px; }
.dc-fc-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: rgba(255, 255, 255, .5); padding: 0 4px 8px;
}

/* The feed: the viewer's report cards and the cast cards, sorted by date
   (forecasts-panel.js sets each card's flex order). The wrappers are
   display:contents so their cards are the feed's own items. */
.dc-fc-feed { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.dc-fc-feed #dc-reports-content, .dc-fc-feed #dc-reports-list,
.dc-fc-feed #dc-fc-spotcasts, .dc-fc-feed #dc-fc-tripcasts { display: contents; }
.dc-fc-feed #dc-reports-loading, .dc-fc-feed #dc-reports-error { order: -1; }
.dc-fc-feed #dc-reports-pager, .dc-fc-feed #dc-reports-empty { display: none !important; }
.dc-fc-feed .dc-fc-feed-note { order: 100000; }
.dc-fc-feed .dc-fc-feed-note[hidden] { display: none; }
.dc-fc-feed .dc-report-card { margin: 0; }
.dc-fc-feed .dc-report-info h4 { margin: 0 0 2px; }
.dc-fc-feed .dc-report-detail { color: rgba(255, 255, 255, .55); line-height: 1.4; }
.dc-fc-status { font-size: 12px; font-weight: 600; margin-top: 2px; color: rgba(255, 255, 255, .55); }
.dc-fc-status-scheduled { color: #4fc3f7; }
.dc-fc-status-pending, .dc-fc-status-processing, .dc-fc-status-generating { color: #ffb74d; }
.dc-fc-status-failed { color: #ef5350; }
.dc-fc-feed .dc-report-actions { align-items: center; gap: 4px; }
.dc-fc-feed .dc-report-delete-btn { background: none; padding: 6px; border-radius: 6px; color: rgba(255, 255, 255, .45); }
.dc-fc-feed .dc-report-delete-btn:hover { background: rgba(244, 67, 54, .18); color: #ef5350; }
@media (hover: hover) {
    .dc-fc-feed .dc-report-delete-btn { opacity: 0; transition: opacity .15s; }
    .dc-fc-feed .dc-report-card:hover .dc-report-delete-btn,
    .dc-fc-feed .dc-report-delete-btn:focus-visible { opacity: 1; }
}
.dc-fc-feed[data-filter="reports"] .dc-fc-row,
.dc-fc-feed[data-filter="spotcast"] .dc-report-card, .dc-fc-feed[data-filter="spotcast"] .dc-fc-row-tripcast,
.dc-fc-feed[data-filter="tripcast"] .dc-report-card, .dc-fc-feed[data-filter="tripcast"] .dc-fc-row-spotcast { display: none; }

/* What each card is, as the apps say it: DEEP / SPOT / TRIP + CAST. */
.dc-fc-kind {
    display: block; margin: 0 0 4px; font-size: 10px; font-weight: 800; line-height: 1.2;
    letter-spacing: 1.2px; color: #FF8504;
}
.dc-fc-kind span { color: rgba(255, 255, 255, .92); }

/* Cast cards match the viewer's report cards (.dc-report-card). */
.dc-fc-row {
    width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
    background: rgba(255, 255, 255, .04); border: 0; border-radius: 8px;
    padding: 12px; margin: 0; color: inherit; font: inherit; cursor: pointer;
}
.dc-fc-row:hover { background: rgba(255, 255, 255, .08); }
.dc-fc-row-sample + .dc-fc-row-sample { margin-top: 8px; }
.dc-fc-thumb {
    position: relative; width: 64px; height: 64px; border-radius: 6px; flex: none; overflow: hidden;
    background: #0b0f1a; display: flex; align-items: center; justify-content: center;
}
.dc-fc-thumb img { position: absolute; width: 512px; height: 512px; max-width: none; filter: brightness(1.5) saturate(.6); }
.dc-fc-thumb svg { position: absolute; inset: 0; width: 64px; height: 64px; }
.dc-fc-thumb.dc-fc-star { background: rgba(255, 133, 4, .14); color: #FF8504; font-size: 22px; }
.dc-fc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-fc-row-title { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-fc-row-detail { font-size: 12px; color: rgba(255, 255, 255, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-fc-row-has-ai { flex-wrap: wrap; row-gap: 10px; }
.dc-fc-ai {
    flex: 0 0 100%; display: flex; align-items: flex-start; gap: 6px; box-sizing: border-box;
    padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .85);
}
.dc-fc-ai svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.dc-fc-ai-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.dc-fc-ai-go svg { color: #34C759; }
.dc-fc-ai-caution svg { color: #FF9500; }
.dc-fc-ai-no-go svg { color: #FF3B30; }
.dc-fc-ai-info svg { color: rgba(255, 255, 255, .45); }
.dc-fc-row-chev { width: 16px; height: 16px; flex: none; color: rgba(255, 255, 255, .35); }

.dc-fc-note { font-size: 13px; color: rgba(255, 255, 255, .55); padding: 6px 4px 10px; display: flex; align-items: center; gap: 8px; }
.dc-fc-spinner {
    width: 14px; height: 14px; border-radius: 50%; flex: none;
    border: 2px solid rgba(255, 255, 255, .2); border-top-color: #FF8504; animation: dc-fc-spin .8s linear infinite;
}
@keyframes dc-fc-spin { to { transform: rotate(360deg); } }

/* One cast, drawn by the share renderers (cast-render.css, light, compact). */
.dc-fc-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dc-fc-detail[hidden], .dc-fc-body[hidden] { display: none; }
.dc-fc-detail-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dc-fc-detail-body .sl-cast { min-height: 100%; }
.dc-fc-panel.dc-fc-detailing .dc-fc-filter { display: none; }
.dc-fc-cast-loading { padding: 16px; }

/* The toggle: a map control, top of the top-left stack, while the panel is closed (signed in only).
   index.html moves it from the header into the map at load. */
.dc-fc-mapctl .dc-fc-toggle {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0; padding: 0; box-sizing: border-box;
    background: rgba(10, 10, 25, 0.95); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px;
    color: #e0e0e0; cursor: pointer;
}
.dc-fc-mapctl .dc-fc-toggle:hover { background: rgba(30, 30, 60, 0.95); color: #fff; }
.dc-fc-mapctl .dc-fc-toggle svg { width: 22px; height: 22px; }
.dc-fc-mapctl { margin-bottom: 0 !important; }
body:not(.dc-authed) .dc-fc-mapctl, body.dc-fc-open .dc-fc-mapctl { display: none; }

@media (max-width: 640px) {
    .dc-fc-panel {
        top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 62dvh;
        border-right: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .45);
        transform: translateY(100%);
    }
    .dc-fc-edge { display: none; }
    .dc-fc-close { display: flex; }
    body.dc-fc-open .dc-map-container .leaflet-left { transform: none; }
    body.dc-fc-open .dc-base-toggle, body.dc-fc-open .dc-base-tooltip, body.dc-fc-open .dc-range-panel,
    body.dc-fc-open .dc-contrast-tip, body.dc-fc-open .dc-share-toast, body.dc-fc-open .dc-measure-hint,
    body.dc-fc-open .dc-status-banner, body.dc-fc-open #dc-map-error-toast { margin-left: 0; }
    body.dc-fc-open .dc-timeline { left: 0; }
    .dc-fc-panel.dc-fc-detailing { height: calc(100dvh - 64px); }
    .dc-fc-head::before {
        content: ''; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px;
        border-radius: 2px; background: rgba(255, 255, 255, .25);
    }
}

/* The report is a bottom sheet at 600px and below (deepcast-report.css). */
@media (max-width: 600px) {
    body.dc-report-open .dc-map-container .leaflet-left { transform: none; }
    body.dc-report-open .dc-base-toggle, body.dc-report-open .dc-base-tooltip, body.dc-report-open .dc-range-panel,
    body.dc-report-open .dc-contrast-tip, body.dc-report-open .dc-share-toast, body.dc-report-open .dc-measure-hint,
    body.dc-report-open .dc-status-banner, body.dc-report-open #dc-map-error-toast { margin-left: 0; }
    body.dc-report-open .dc-timeline { left: 0; }
}

/* A cast just made from the web: its card flashes once when the list opens,
   and its status line tracks generation (forecasts-panel.js showCreated). */
.dc-fc-row-new { animation: dc-fc-new 2.4s ease-out; }
@keyframes dc-fc-new {
    0%, 30% { box-shadow: inset 0 0 0 2px #FF8504; background: rgba(255, 133, 4, .12); }
    100% { box-shadow: inset 0 0 0 2px transparent; }
}
.dc-fc-status-generating { display: inline-flex; align-items: center; gap: 6px; }
.dc-fc-status-generating .dc-fc-spinner { width: 10px; height: 10px; margin: 0; }
/* The cast view while it loads or generates: the apps' radar over the whole view. */
.dc-fc-cast-radar { position: relative; height: 100%; min-height: 420px; }