/* 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);
}

/* ── Score cards: Visibility (feet) beside Dive conditions (Go/Caution/No-go) ── */
.score-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 16.8px;
}
.score-card {
    padding: 14px 16.8px;
    border-radius: 10px;
    background: rgba(233, 233, 237, 0.03);
    border: 1px solid var(--color-divider);
    min-width: 0;
}
.score-card h6 { margin: 0 0 8.4px; color: var(--color-neutral-400); }
.vis-cat {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.vis-meta { margin-top: 6px; font-size: 13px; color: var(--color-neutral-400); }
.score-explainer { margin: 8.4px 0 0; font-size: 12px; color: var(--color-neutral-500); }
.score-cards + .score-explainer { margin: 11.2px 0 14px; }

.verdict-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.verdict-chip.is-go { color: var(--color-go); background: #35b06a1f; }
.verdict-chip.is-caution { color: var(--color-caution); background: #e0bb4a1f; }
.verdict-chip.is-no_go { color: var(--color-no-go-text); background: #d9575a1f; }
.verdict-chip.is-unknown { color: var(--color-neutral-500); }

.verdict-chip b { font-variant-numeric: tabular-nums; }
.dive-suggest { display: flex; align-items: center; gap: 14px; }
.dive-score {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 52px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.dive-suggest-meta { font-size: 16px; }
.dive-band { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.dive-window { margin-left: 6px; font-size: 14px; color: var(--color-neutral-400); }
.dive-reach { color: var(--color-neutral-500); }
.dive-methods { list-style: none; margin: 11.2px 0 0; padding: 0; display: grid; gap: 6px; }
.dive-methods li {
    display: grid;
    grid-template-columns: 74px auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    font-size: 13px;
}
.dive-methods li.is-suggested .dive-method { font-weight: 600; }
.dive-reason { color: var(--color-neutral-400); min-width: 0; }
.dive-blue, .dive-note { margin: 10px 0 0; font-size: 12px; color: var(--color-neutral-400); }
.dive-note { color: var(--color-neutral-500); }

/* ── Hourly dive-conditions 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-col.is-best .hour-bar-track {
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--color-accent-400);
}
.hour-label { font-size: 11px; color: var(--color-neutral-500); }
.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-500); }

/* ── 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-500);
}

.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-500); }

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

/* ── 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; }
    .score-cards { grid-template-columns: minmax(0, 1fr); }
    .vis-cat { font-size: 28px; }
    .dive-score { font-size: 42px; }
    .dive-methods li { grid-template-columns: 64px auto; }
    .dive-reason { grid-column: 1 / -1; font-size: 12px; }
    .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; }

/* ── Hawaii DOH Brown Water Advisory ──────────────────────────────────── */
.advisory-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #d9575a66;
    background: #d9575a1f;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.45;
}
.advisory-banner > i { color: #d9575a; font-size: 20px; flex-shrink: 0; }
.advisory-banner strong { color: #ef8a8c; }
.advisory-banner p { margin: 4px 0 0; color: var(--color-neutral-300); }
.advisory-banner a { color: #ef8a8c; white-space: nowrap; }
#plan-conditions .advisory-banner { margin-bottom: 10px; }

.bw-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid #d9575a66;
    background: #d9575a1f;
    color: #ef8a8c;
    font-size: 11px;
    line-height: 16px;
    vertical-align: 1px;
}