/* "My Forecasts" feed cards (cast-cards.js): the apps' home-list summary cards. */

/* Doubled class: beats the old row styles (.dc-report-card, .dc-fc-row) these cards replace.
   Light cards with dark text, as the apps' cards in light mode; the title bar stays navy. */
.dc-card.dc-card {
    position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; box-sizing: border-box;
    margin: 0; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
    background: #fff; color: #1e293b; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45); font: inherit;
}
/* Tripled: also beats the report list's `.dc-report-card[data-viewable]:hover` tint. */
.dc-card.dc-card.dc-card:hover { background: #fff; border-color: rgba(255, 255, 255, .6); }
.dc-card:focus-visible { outline: 2px solid #4fc3f7; outline-offset: 2px; }

/* Title bar: centred wordmark, unread dot left, ⋯ right. */
.dc-card-bar {
    position: relative; display: flex; align-items: center; justify-content: center; height: 30px;
    background: #1d3668; border-bottom: 1px solid rgba(255, 255, 255, .1); flex: none;
}
.dc-card-kind { font-size: 14px; font-weight: 900; letter-spacing: 2px; color: #FF8504; }
.dc-card-kind span { color: #fff; text-shadow: 0 0 6px rgba(255, 133, 4, .9), 0 0 16px rgba(255, 133, 4, .6); }
.dc-card-dot {
    position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
    background: #29b6f6; border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 0 2px rgba(255, 255, 255, .5), 0 0 4px rgba(41, 182, 246, .6);
}
.dc-card-more {
    position: absolute; right: 6px; top: 50%; width: 28px; height: 24px; margin-top: -12px; padding: 0;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 6px;
    background: none; color: rgba(255, 255, 255, .6); cursor: pointer;
}
.dc-card-more:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.dc-card-more svg { width: 16px; height: 16px; }

/* iOS SharedByBar: a thin full-width strip under the title bar (TripCast: under the verdict). */
.dc-card-sharedby {
    flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px;
    background: #e1f5fe; color: #01579b; font-size: 12px; font-weight: 600;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.dc-card-sharedby svg { width: 13px; height: 13px; flex: none; }
.dc-card-sharedby span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* TripCast verdict strip */
.dc-card-verdict { flex: none; padding: 5px 0; text-align: center; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 1px; }

.dc-card-head { padding: 10px 14px 0; }
.dc-card-head-split { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dc-card-head-split > :first-child { min-width: 0; }
.dc-card-title { font-size: 17px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-card-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
.dc-card-when { font-size: 14px; line-height: 1.35; margin-top: 0; }
.dc-card-aside { font-size: 12px; line-height: 1.45; color: #64748b; text-align: right; flex: none; }
.dc-card-pill {
    flex: none; font-size: 13px; padding: 3px 8px; border-radius: 6px;
    background: #eef2f7; color: #334155;
}

/* TripCast: From ⇄ To */
.dc-card-route {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
    padding: 6px 14px 0; font-size: 16px; font-weight: 700; color: #0f172a;
}
.dc-card-route span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-card-route span:last-child { text-align: right; }
.dc-card-route i { display: flex; color: #0277bd; }
.dc-card-route svg { width: 20px; height: 20px; }

.dc-card-map, .dc-card-shot {
    position: relative; height: 170px; margin: 10px 12px 0; border-radius: 8px; overflow: hidden;
    background: #e2e8f0; flex: none;
}
.dc-card-map .leaflet-container, .dc-card-map.leaflet-container { background: #aad3df; cursor: pointer; }   /* Voyager's water while tiles load */
.dc-card-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dc-card-body { padding: 10px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.dc-card-body:empty { display: none; }

/* SpotCast day verdict bar (the apps' WeatherCalendarBar) */
.dc-card-days { display: flex; gap: 1.5px; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, .15); }
.dc-card-day {
    position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 7px 0; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    background: linear-gradient(180deg, var(--v), color-mix(in srgb, var(--v) 75%, transparent));
}
.dc-card-day-icon { position: absolute; top: 4px; right: 4px; display: flex; color: rgba(255, 255, 255, .7); }
.dc-card-day-icon svg { width: 12px; height: 12px; }
.dc-card-day-icon svg [stroke="#0b1530"] { stroke: var(--v); }
.dc-card-day-icon svg [fill="#0b1530"] { fill: var(--v); }
.dc-card-day-dow { font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.dc-card-day-num { font-size: 18px; font-weight: 900; line-height: 1.1; }
.dc-card-day-v { font-size: 9px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; }
.dc-card-days-5 .dc-card-day-v { font-size: 8px; }

/* SpotCast one-line summary with its verdict icon */
.dc-card-line { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.4; color: #0f172a; padding: 0 2px; }
.dc-card-line-icon { display: flex; flex: none; margin-top: 2px; }
.dc-card-line-icon svg { width: 13px; height: 13px; }

/* AI prose, five lines then "See more" (opens the cast, like the card itself) */
.dc-card-prose { font-size: 14px; line-height: 1.45; color: #475569; padding: 0 2px; }
.dc-card-prose p { margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.dc-card-seemore { display: inline-block; margin-top: 2px; font-weight: 700; color: #1e293b; }
.dc-card-prose-pending:empty {
    height: 60px; border-radius: 6px;
    background: linear-gradient(90deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .09), rgba(15, 23, 42, .04)) 0 0 / 200% 100%;
    animation: dc-card-shimmer 1.4s linear infinite;
}
@keyframes dc-card-shimmer { to { background-position: -200% 0; } }

.dc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #64748b; }
.dc-card-updated { display: inline-flex; align-items: center; gap: 4px; }
.dc-card-updated svg { width: 13px; height: 13px; }
.dc-card-conf::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dc-card-conf-high::before { background: #34C759; }
.dc-card-conf-medium::before { background: #FF9500; }
.dc-card-conf-low::before { background: #FF3B30; }

.dc-card-status { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #b45309; padding: 4px 0; }
.dc-card-status-failed { color: #c62828; }
/* The report list's status colours and spinner (forecasts-panel.css) are for the dark panel. */
.dc-card .dc-fc-status-scheduled { color: #0277bd; }
.dc-card .dc-fc-status-pending, .dc-card .dc-fc-status-processing, .dc-card .dc-fc-status-generating { color: #b45309; }
.dc-card .dc-fc-status-failed { color: #c62828; }
.dc-card .dc-fc-spinner { border-color: rgba(15, 23, 42, .15); border-top-color: #FF8504; }

/* Rating row: a divider, then five stars */
.dc-card-rate {
    position: relative; display: flex; justify-content: center; gap: 14px; margin: 0 12px; padding: 8px 0 10px;
    border-top: 1px solid rgba(15, 23, 42, .1);
}
.dc-card-share {
    position: absolute; right: -6px; top: 50%; width: 36px; height: 36px; margin-top: -17px; padding: 0;
    display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px;
    background: none; color: #64748b; cursor: pointer;
}
.dc-card-share:hover:not(:disabled) { color: #0f172a; background: rgba(15, 23, 42, .06); }
.dc-card-share svg { width: 18px; height: 18px; }
.dc-card-share .dc-fc-spinner { width: 16px; height: 16px; }
.dc-card-star {
    padding: 0; border: 0; background: none; cursor: pointer; display: flex;
    color: rgba(15, 23, 42, .22); transition: color .12s, transform .12s;
}
.dc-card-star svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.dc-card-star.on { color: #FFC107; }
.dc-card-star.on svg { fill: currentColor; }
.dc-card-star:hover { color: #FFC107; transform: scale(1.08); }

/* "How was this forecast?" */
.dc-card-rate-overlay { z-index: 10100; }
.dc-card-rate-dialog {
    width: 320px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 20px;
    background: #0F2041; color: #fff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5); display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.dc-card-rate-title { font-size: 17px; font-weight: 700; }
.dc-card-rate-big { border: 0; margin: 0; padding: 0; gap: 12px; justify-content: center; }
.dc-card-rate-big .dc-card-star svg { width: 32px; height: 32px; }
.dc-card-rate-dialog .dc-card-star:not(.on):not(:hover) { color: rgba(255, 255, 255, .28); }   /* the dialog stays dark */
.dc-card-rate-note {
    width: 100%; box-sizing: border-box; resize: vertical; padding: 10px; border-radius: 8px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font: inherit; font-size: 14px;
}
.dc-card-rate-note:focus { outline: none; border-color: #4fc3f7; }
.dc-card-rate-actions { align-self: stretch; display: flex; justify-content: flex-end; }
.dc-card-rate-done {
    padding: 8px 18px; border: 0; border-radius: 8px; background: #FF8504; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
}

/* ⋯ menu: Share · Stop Sharing · Delete (the apps' card menu) */
.dc-card-menu {
    position: absolute; top: 32px; right: 8px; z-index: 5; min-width: 168px; padding: 4px;
    background: #16294f; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    cursor: default;
}
.dc-card-menu[hidden] { display: none; }
.dc-card-menu button {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 6px;
    background: none; color: #fff; font: inherit; font-size: 14px; cursor: pointer; text-align: left; white-space: nowrap;
}
.dc-card-menu button svg { width: 16px; height: 16px; flex: none; }
.dc-card-menu button:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.dc-card-menu button:disabled { opacity: .35; cursor: default; }
.dc-card-menu .dc-card-menu-danger { color: #ff6b6b; }
.dc-card-menu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 4px 6px; }
.dc-card-menu .dc-fc-spinner { width: 14px; height: 14px; flex: none; }

/* Confirm (Delete / Stop Sharing): the viewer's .dc-confirm dialog */
.dc-card-confirm { z-index: 10100; }
.dc-card-confirm .dc-confirm-actions button:disabled { opacity: .6; cursor: default; }

.dc-card-toast {
    position: fixed; left: 50%; top: 76px; z-index: 10200; transform: translate(-50%, -12px); opacity: 0;
    max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 16px; border-radius: 10px;
    background: #16294f; color: #fff; font-size: 14px; border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: opacity .2s, transform .2s; pointer-events: none;
    text-align: center; background: #22407a; border-color: rgba(255, 255, 255, .24); font-weight: 600;
}
.dc-card-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* A card that ends on its header (no AI yet) keeps the body's bottom padding. */
.dc-card-head:last-child, .dc-card-route:last-child, .dc-card-map:last-child { margin-bottom: 12px; }
.dc-card-head:last-child { padding-bottom: 0; }

/* Spot markers (DCCards.spotMarker): the apps' balloon + glyph, name always below. */
.dc-mk-icon { background: none; border: 0; }
.dc-mk { position: relative; width: 30px; height: 40px; cursor: pointer; }
/* .dc-mk scoping beats Leaflet's `.leaflet-map-pane svg { z-index: 200 }`, which lifts the balloon over the glyph. */
.dc-mk .dc-mk-ball { position: absolute; left: 0; top: 0; z-index: 0; width: 30px; height: 40px; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.dc-mk-ball path { fill: var(--c); stroke: #fff; stroke-width: 1.5; }
.dc-mk-glyph {
    position: absolute; left: 7px; top: 6.5px; width: 16px; height: 16px; background: #fff; z-index: 1;
    -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
}
.dc-mk-label {
    position: absolute; top: 41px; left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
    font: 700 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #fff;
    text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 3px rgba(0, 0, 0, .8);
}

/* ---- loading: the apps' radar overlay (DCCards.radar; iOS AILoadingOverlay + ForecastRadarView) ---- */
.dc-card-loading { position: relative; min-height: 200px; display: flex; flex-direction: column; }
/* A card map's Leaflet panes (z-index 400+) stay inside the map, under the radar; the
   map is hidden (its space kept) so the radar sits on the plain card, as on SpotCast. */
.dc-card-loading .dc-card-map { isolation: isolate; visibility: hidden; }
.dc-radar {
    position: absolute; inset: 0; z-index: 5; overflow: hidden; container-type: size; pointer-events: none;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, var(--o)), rgba(128, 128, 128, var(--o)));
}
.dc-radar-dish { position: absolute; left: 50%; top: 50%; width: 90cqmin; height: 90cqmin; transform: translate(-50%, -50%); }
.dc-radar-dish i { position: absolute; display: block; }
.dc-radar-ring { left: 50%; top: 50%; border-radius: 50%; box-sizing: border-box; translate: -50% -50%; }
.dc-radar-ring { width: calc(var(--k) * 25%); height: calc(var(--k) * 25%); border: 1.5px solid rgba(255, 255, 255, .15); }
.dc-radar-sweep { position: absolute; inset: 0; animation: dc-radar-spin 3s linear var(--rs) infinite; }
/* One sweep: the beam with its trail fading out behind it (the sweep turns clockwise). */
.dc-radar-fan {
    inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg 300deg, rgba(255, 133, 0, .03) 315deg, rgba(255, 133, 0, .1) 340deg,
        rgba(255, 133, 0, .28) 360deg);
}
.dc-radar-beam {
    left: calc(50% - 1.5px); top: 0; width: 3px; height: 50%; border-radius: 1.5px;
    background: linear-gradient(to right, #ff8500, rgba(255, 133, 0, .8), rgba(255, 133, 0, .3), transparent);
    box-shadow: 0 0 4px rgba(255, 133, 0, .8);
}
.dc-radar-dot { left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #ff8500; box-shadow: 0 0 4px #ff8500; }
.dc-radar-msg {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0 20px 20px; text-align: center; color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, .5);
}
.dc-radar-center .dc-radar-msg { top: 0; justify-content: center; padding-bottom: 0; }
.dc-radar-msg b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.dc-radar-msg small { font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .6); }
@keyframes dc-radar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dc-radar-sweep { animation-duration: 12s; } }