:root {
    --foam:   #c8dff0;
    --accent: #f0a500;
    --muted:  #6b8fa8;
    --bg:     #07111e;
    --card:   #0d2137;
    --border: #1a3a56;
    --text:   #ddeeff;
    --low-bg: #0a1e30;

    --font-display: 'Arial Narrow', Arial, sans-serif;
    --font-mono:    ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;

    /* Mobile-first base sizes (≥14px everywhere) */
    --fs-base:    14px;
    --fs-small:   14px;   /* nothing goes below this */
    --fs-label:   14px;
    --fs-heading: 1.1rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    max-width: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    line-height: 1.5;
    min-height: 100vh;
    max-width: 100%;
    padding: 0 0 2rem;
}

/* ── Layout ──────────────────────────────────────────── */
main {
    width: 100%;
    max-width: 1670px;
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: 0;
}

/* ── Webcam ──────────────────────────────────────────── */
.cam-wrapper {
    position: relative;
    background: #000;
    width: 100%;
    display: block;
    isolation: isolate;   /* ensures absolute children stay inside */
    min-height: 1px;      /* guarantees a containing block even before image loads */
}
.cam-wrapper img {
    display: block;
    width: 100%;
    height: auto;
}
.cam-status {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .3rem;
    background: rgba(7,17,30,.8);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: .25rem .4rem;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.cam-status .dot {
    width: 8px; height: 8px;
    background: #3c3;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}
.cam-status.error .dot { background: #c33; animation: none; }

/* ── Card ────────────────────────────────────────────── */
.card {
    background: var(--card);
    border-top: 1px solid var(--border);
}
.card-header {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: var(--fs-heading);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--foam);
}
.card-body { padding: .75rem .5rem; }

/* ── Tide table ──────────────────────────────────────── */
/* Wrapper enables horizontal scroll on very narrow screens
    without blowing the page layout */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Contain horizontal scroll to this element only */
    max-width: 100vw;
}
.tide-table {
    width: 100%;
    min-width: 320px;   /* never collapse below readable width */
    border-collapse: collapse;
}
.tide-table thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    padding: .4rem .4rem;
    border-bottom: 1px solid var(--border);
}
.tide-table tbody td {
    font-size: var(--fs-base);
    padding: .45rem .4rem;
    border-bottom: 1px solid var(--border);
}
/* Only prevent wrapping on the short data columns */
.tide-table td:nth-child(2),
.tide-table td:nth-child(3),
.tide-table td:nth-child(4),
.tide-table th:nth-child(2),
.tide-table th:nth-child(3),
.tide-table th:nth-child(4) {
    white-space: nowrap;
}
.tide-table tbody tr:last-child td { border-bottom: none; }
.tide-table tbody tr.Low  { background: var(--low-bg); }
.tide-table tbody tr.High { background: var(--card); }

.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 2px;
    font-size: var(--fs-small);
    letter-spacing: .06em;
    text-transform: uppercase;
}
.badge.High { background: rgba(200,223,240,.12); color: var(--foam); }
.badge.Low  { background: rgba(14, 63,110,.35);  color: var(--muted); }

.height-val { color: var(--accent); font-weight: 500; }
.day-label  { color: var(--muted); }

/* ── Chart ───────────────────────────────────────────── */
.chart-wrap { padding: .75rem 1rem 1rem; }

/* ── Sources ─────────────────────────────────────────── */
.sources { font-size: var(--fs-small); color: var(--muted); }
.sources a { color: var(--foam); text-decoration: none; border-bottom: 1px solid var(--border); }
.sources a:hover { color: var(--accent); border-color: var(--accent); }
.sources ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.sources li::before { content: "→ "; color: var(--accent); }
.sources p { margin-top: .75rem; line-height: 1.6; }

.copyright { color: var(--muted); font-size: var(--fs-small); margin-top: .5rem; }

/* ── Desktop refinements (768px+) ────────────────────── */
@media (min-width: 768px) {
    :root {
        --fs-base:    13px;
        --fs-small:   12px;
        --fs-label:   11px;
        --fs-heading: 1.15rem;
    }

    main {
        padding: 1.5rem 1rem 0;
        gap: 1.25rem;
    }

    .card-body { padding: 1rem; }

    .tide-table thead th { padding: .4rem .75rem; }
    .tide-table tbody td { padding: .5rem .75rem; }

    .cam-wrapper {
        border: 1px solid var(--border);
        border-radius: 4px;
        overflow: hidden;
    }

    .card {
        border: 1px solid var(--border);
        border-radius: 4px;
        border-top: 1px solid var(--border);
    }
}