/* dashboard.css — Screen 1, Option 1B (Day ribbon). */

#dashboard-main[hidden] { display: none; }

.dash-stack { display: flex; flex-direction: column; gap: 16.8px; }

.panel {
    padding: 22.4px;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

/* ── Ribbon panel ───────────────────────────────────────────────────────── */
.ribbon-head {
    display: flex;
    align-items: flex-end;
    gap: 16.8px;
    flex-wrap: wrap;
    margin-bottom: 16.8px;
}
.ribbon-score {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 52px;
    line-height: 0.9;
    letter-spacing: -0.03em;
}
.ribbon-cat {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.ribbon-sub { font-size: 13px; color: var(--color-neutral-400); }

.best-window-pill {
    margin-left: auto;
    padding: 5.6px 11.2px;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-accent);
    white-space: nowrap;
}

/* ── Hourly clarity bars ────────────────────────────────────────────────── */
.hourly {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 120px;
}
.hour-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.6px;
    height: 100%;
    min-width: 0;
}
.hour-bar-track {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hour-bar {
    width: 100%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #3c4058, #282b3c);
    transition: height 400ms cubic-bezier(.22,.61,.36,1);
}
.hour-bar.is-best {
    background: linear-gradient(180deg, var(--color-accent), var(--color-accent-700));
    box-shadow: 0 0 18px rgba(145, 132, 217, 0.45);
}
.hour-label { font-size: 10px; color: var(--color-neutral-600); }
.hour-col.is-best .hour-label { color: var(--color-accent-300); }
.hourly-caption { margin: 11.2px 0 0; font-size: 11px; color: var(--color-neutral-600); }

/* ── Bottom row: conditions + depth ────────────────────────────────────── */
.dash-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 16.8px;
}
.dash-row > * { min-width: 0; } /* let wide content shrink/scroll, not stretch the row */
.dash-row h6 { margin: 0 0 11.2px; color: var(--color-neutral-400); }

.conditions-table td:first-child { color: var(--color-neutral-400); width: 44%; }
.conditions-table td:nth-child(2) { font-family: var(--font-heading); }
.conditions-table td:last-child {
    text-align: right;
    font-size: 12px;
    color: var(--color-neutral-600);
}

.depth-panel { display: flex; gap: 22.4px; }
.depth-ruler {
    flex: none;
    width: 74px;
    position: relative;
    border-radius: 8px;
    background: linear-gradient(#1d2136, #0e1018);
    overflow: hidden;
}
.depth-haze {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(75, 176, 232, 0.28), rgba(75, 176, 232, 0));
}
.depth-mark { position: absolute; left: 0; right: 0; height: 2px; background: var(--color-accent-400); }
.depth-mark-label { position: absolute; left: 6px; font-size: 11px; color: var(--color-accent-300); }
.depth-read p { margin: 0; font-size: 14px; line-height: 1.6; }
.depth-read .disclaimer { margin-top: 11.2px; font-size: 12px; color: var(--color-neutral-600); }

/* Missing-source note under the score. */
.degraded-note {
    margin-top: 8.4px;
    font-size: 12px;
    color: var(--color-neutral-600);
}

/* ── Loading skeleton ──────────────────────────────────────────────────── */
.dashboard-skeleton { display: flex; flex-direction: column; gap: 16.8px; }
.dashboard-skeleton[hidden] { display: none; }
.skeleton-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 16.8px; }
.skeleton-panel {
    border-radius: 14px;
    background: rgba(233, 233, 237, 0.04);
    min-height: 180px;
    position: relative;
    overflow: hidden;
}
.skeleton-panel-tall { min-height: 260px; }
.skeleton-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(145, 132, 217, 0.08), transparent);
    animation: skeleton-shimmer 1.6s linear infinite;
}
@keyframes skeleton-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

@media (max-width: 700px) {
    .panel { padding: 16.8px; }
    .hourly { gap: 1px; }
    .best-window-pill { margin-left: 0; }
    .conditions-table td:last-child { display: none; }
    .depth-panel { flex-direction: row; }
    .dash-row { gap: 11.2px; }
    .dash-map-panel { margin-top: 11.2px; }
    .dash-map-head { padding: 11.2px 14px 8.4px; }
    #dashboard-map { height: 52vh; height: 52svh; min-height: 280px; }
    .flow-legend { padding: 6px 8.4px; font-size: 11px; }
}

/* ── Spot map: depth contours + wind / current arrows ───────────────────── */
.dash-map-panel { margin-top: 16.8px; padding: 0; overflow: hidden; }
.dash-map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5.6px 11.2px;
    padding: 14px 16.8px 11.2px;
}
.dash-map-head h6 { margin: 0; }
.dash-map-sub { font-size: 11px; color: var(--color-neutral-500); }
#dashboard-map {
    width: 100%;
    height: min(56vh, 460px);
    min-height: 300px;
    background: radial-gradient(120% 100% at 30% 20%, #1d2136, #0f111c);
}

.leaflet-marker-icon.flow-arrow { background: none; border: 0; pointer-events: none; }
.flow-arrow span,
.flow-legend-arrow {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    transform-origin: center;
}
.flow-arrow svg { filter: drop-shadow(0 0 2px rgba(15, 17, 28, 0.9)); }
.flow-arrow.is-wind { opacity: 0.7; }
.flow-arrow.is-current { opacity: 0.95; }

.flow-legend {
    display: grid;
    gap: 8.4px;
    padding: 8.4px 11.2px;
    border-radius: 8px;
    background: rgba(22, 24, 38, 0.88);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    line-height: 1.3;
}
.flow-legend small { color: var(--color-neutral-400); }
.flow-legend-row { display: flex; align-items: center; gap: 8.4px; }
.flow-legend-arrow { width: 22px; height: 22px; flex: none; }