/* week.css — the Week screen (every spot × the next 7 days) and its day sheet. */

.week-panel {
    padding: 16.8px 0;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.week-head { padding: 0 16.8px 11.2px; }
.week-head h6 { margin: 0 0 4px; color: var(--color-neutral-400); }
.week-panel .saved-copy-note { margin: 0 16.8px 11.2px; }
.week-empty { padding: 9px 16.8px; }

/* Seven columns don't fit a phone: the table scrolls sideways inside the
   card (never the page), with the spot names pinned on the left. */
.week-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.week-table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}
.week-table th {
    padding: 5.6px 4px;
    font-weight: 500;
    color: var(--color-neutral-500);
    white-space: nowrap;
}
.week-table thead th { font-size: 11px; text-align: center; }
.week-table td { padding: 2px; }
.week-table .week-spot {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-left: 16.8px;
    min-width: 96px;
    max-width: 120px;
    background: var(--color-surface);
    text-align: left;
    white-space: normal;
    font-size: 13px;
    color: var(--color-text);
}
.week-table thead .week-spot { font-size: 11px; color: var(--color-neutral-500); }
.week-table td:last-child { padding-right: 16.8px; }

.week-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 100%;
    min-width: 62px;
    padding: 6px 2px 5px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(233, 233, 237, 0.03);
    font: inherit;
    color: var(--color-text);
    cursor: pointer;
    transition: background 120ms ease-out, transform 120ms ease-out;
}
.week-cell b {
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.week-cell.is-go b { color: var(--color-go); }
.week-cell.is-caution b { color: var(--color-caution); }
.week-cell.is-no_go b { color: var(--color-no-go-text); }
.week-cell.is-unknown b { color: var(--color-neutral-500); }
.week-cell.is-go { background: #35b06a14; }
.week-cell.is-no_go { background: #d9575a0f; }
/* Go to dive with Excellent visibility: the days the push announces. */
.week-cell.is-great { border-color: #35b06a99; }
.week-mark { font-size: 12px; margin-right: 2px; vertical-align: 1px; }
.week-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; margin-left: 4px; }
.week-legend .ph { vertical-align: -1px; }
.week-legend .is-go { color: var(--color-go); }
.week-legend .is-caution { color: var(--color-caution); }
.week-legend .is-no_go { color: var(--color-no-go-text); }
.week-vis { font-size: 11px; white-space: nowrap; }
.week-conf { font-size: 11px; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.week-bw {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 11px;
    color: #c8915a;
}

/* Further ahead, less certain: the forecast fades with each day. */
.week-cell.lead-2 > * { opacity: 0.92; }
.week-cell.lead-3 > * { opacity: 0.85; }
.week-cell.lead-4 > * { opacity: 0.78; }
.week-cell.lead-5 > * { opacity: 0.7; }
.week-cell.lead-6 > * { opacity: 0.62; }

@media (hover: hover) and (pointer: fine) {
    .week-cell:hover { background: rgba(233, 233, 237, 0.08); }
}
.week-cell:active { background: rgba(233, 233, 237, 0.12); transform: scale(0.97); }
.week-cell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.is-stale .week-cell b,
.is-stale .week-vis { filter: grayscale(1); }

/* ── Day sheet ─────────────────────────────────────────────────────────── */
.day-sheet-date { margin: 2px 0 11.2px; font-size: 13px; color: var(--color-neutral-400); }
.day-sheet {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px 16.8px;
    margin: 0;
    font-size: 14px;
}
.day-sheet dt { color: var(--color-neutral-500); }
.day-sheet dd { margin: 0; }
.day-sheet-note {
    margin: 14px 0 0;
    padding: 8.4px 11.2px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--color-neutral-300);
    background: color-mix(in srgb, #c8915a 14%, transparent);
}