/* ==========================================================================
   EDSC Calendar
   Tokens are defined light-first on :root, then overridden for dark under both
   the system preference and an explicit data-theme, so the toggle wins either way.
   ========================================================================== */

:root {
    --bg: #eef1f6;
    --surface: #ffffff;
    --surface-2: #f7f9fc;
    --surface-3: #eff3f8;
    --border: #dfe4ec;
    --border-strong: #c6cedb;
    --text: #141b26;
    --text-dim: #58657a;
    --text-faint: #8c98a9;
    --accent: #0e6f8c;
    --accent-hover: #0b5b74;
    --accent-soft: #dff0f6;
    --accent-on: #ffffff;
    --next: #b45309;
    --next-soft: #fdf1de;
    --next-line: #f0b357;
    --danger: #b3261e;
    --danger-soft: #fdeceb;
    /* Tide chart. High water borrows --danger and the curve borrows --accent, so only the
       low-water blue and the hover tooltip need colours of their own. */
    --tide-low: #2f6fd0;
    --event-mark: #c026d3;   /* the selected event on the tide chart: a colour nothing else there uses */
    --tide-tip-bg: #0f2231;
    --tide-tip-ink: #e8f0f7;
    /* Weekend columns in the month grid. Warm sand so Sat/Sun read as different from
       the working week without competing with the event chips. Tune these four. */
    --weekend: #fdf4e3;
    --weekend-other: #f6ecd9;
    --weekend-head: #fbeed7;
    --weekend-ink: #8a6d1f;
    --shadow-sm: 0 1px 2px rgba(16, 26, 40, .06), 0 1px 3px rgba(16, 26, 40, .05);
    --shadow-md: 0 4px 12px rgba(16, 26, 40, .10), 0 1px 3px rgba(16, 26, 40, .06);
    --shadow-lg: 0 18px 48px rgba(16, 26, 40, .20);
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --topbar-h: 60px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0c1015;
        --surface: #151b23;
        --surface-2: #1b222c;
        --surface-3: #222b37;
        --border: #26303c;
        --border-strong: #3a4757;
        --text: #e7edf5;
        --text-dim: #9dabbd;
        --text-faint: #6f7d90;
        --accent: #45c6e4;
        --accent-hover: #6fd6ee;
        --accent-soft: #10333f;
        --accent-on: #04222c;
        --next: #f7c66b;
        --next-soft: #34291391;
        --next-line: #b8862f;
        --danger: #ff8a80;
        --danger-soft: #3a1c1a;
        --tide-low: #7ab0ff;
    --event-mark: #f0abfc;
        --event-mark: #f0abfc;
        --tide-tip-bg: #0a141d;
        --tide-tip-ink: #e7edf5;
        --weekend: #201a10;
        --weekend-other: #1a150d;
        --weekend-head: #251e12;
        --weekend-ink: #cfae67;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
        --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #0c1015;
    --surface: #151b23;
    --surface-2: #1b222c;
    --surface-3: #222b37;
    --border: #26303c;
    --border-strong: #3a4757;
    --text: #e7edf5;
    --text-dim: #9dabbd;
    --text-faint: #6f7d90;
    --accent: #45c6e4;
    --accent-hover: #6fd6ee;
    --accent-soft: #10333f;
    --accent-on: #04222c;
    --next: #f7c66b;
    --next-soft: #34291391;
    --next-line: #b8862f;
    --danger: #ff8a80;
    --danger-soft: #3a1c1a;
    --tide-low: #7ab0ff;
    --event-mark: #f0abfc;
    --tide-tip-bg: #0a141d;
    --tide-tip-ink: #e7edf5;
    --weekend: #201a10;
    --weekend-other: #1a150d;
    --weekend-head: #251e12;
    --weekend-ink: #cfae67;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
    color-scheme: dark;
}

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

/* Class rules below set `display`, which would otherwise out-rank the UA rule for [hidden]. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

button { font: inherit; color: inherit; }

:where(button, a, input, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ---------- shell ---------- */

.app { display: flex; flex-direction: column; height: 100dvh; }

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 30;
    /* One step above the body's 14px; the buttons, search box and view switch inherit it. */
    font-size: 15px;
}

.grow { flex: 1 1 auto; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 2px 4px; }
.brand-mark { width: 35px; height: 35px; flex: none; stroke: none; }
.dc-body { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.4; }
.dc-band { fill: var(--accent); }
.dc-ring { fill: var(--text-faint); }
.dc-day { fill: var(--text); font-size: 15px; font-weight: 700; font-family: inherit; stroke: none; }
.brand-text { font-size: 20px; letter-spacing: -.01em; font-weight: 600; white-space: nowrap; }
.brand-text span { font-weight: 400; color: var(--text-dim); }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 36px; height: 36px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn.tiny { width: 28px; height: 28px; }
.icon-btn.tiny svg { width: 16px; height: 16px; }

.menu-btn { display: none; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-3); }
.btn svg { width: 17px; height: 17px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-3); }

.arrows { display: flex; gap: 2px; }

.period { position: relative; }
.period-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 8px 5px 10px;
    background: none; border: 1px solid transparent; border-radius: var(--r-sm);
    font-size: 20px; font-weight: 500; letter-spacing: -.01em;
    cursor: pointer; white-space: nowrap;
}
.period-btn:hover { background: var(--surface-3); }
.period-btn svg { width: 18px; height: 18px; color: var(--text-dim); }

.popover {
    position: absolute; top: calc(100% + 6px); left: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 60;
    max-height: 70vh; overflow: auto;
}
.period-menu { width: 268px; }
.pm-year { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; }
.pm-year strong { font-size: 15px; }
.pm-years { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.pm-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pm-months button, .pm-years button {
    padding: 7px 6px; background: none; border: 1px solid transparent;
    border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--text-dim);
}
.pm-months button:hover, .pm-years button:hover { background: var(--surface-3); color: var(--text); }
.pm-months button[aria-current="true"], .pm-years button[aria-current="true"] {
    background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 600;
}

.search {
    display: flex; align-items: center; gap: 7px;
    background: var(--surface-3);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 6px 0 12px;
    height: 38px;
    min-width: 170px;
    flex: 0 1 300px;
    transition: background .12s ease, border-color .12s ease;
}
.search:focus-within { background: var(--surface); border-color: var(--accent); }
.search > svg { width: 17px; height: 17px; color: var(--text-dim); flex: none; }
.search input {
    flex: 1; min-width: 0;
    border: 0; background: none; outline: none;
    font: inherit; color: var(--text);
}
.search input::-webkit-search-cancel-button { display: none; }

/* The club burgee, sitting between the search box and the view switch.

   Sized by height so it scales with the topbar rather than being pinned to a width that
   stops matching when the row does; width:auto keeps the pennant's 3:2 shape. The artwork
   has a white background of its own -- it is the "WB" copy -- so it is given a white plate
   with the same rounding, which reads as deliberate in dark mode instead of as a stray
   white rectangle. */
.brand-logo {
    height: 30px;
    width: auto;
    flex: none;
    border-radius: 4px;
    background: #fff;
    padding: 2px 3px;
}

.segmented {
    display: inline-flex;
    background: var(--surface-3);
    border-radius: 999px;
    padding: 3px;
}
.segmented button {
    padding: 6px 14px;
    background: none; border: 0; border-radius: 999px;
    color: var(--text-dim); font-weight: 500; cursor: pointer; white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.segmented button:hover { color: var(--text); }
.segmented button[aria-selected="true"] {
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600;
}

.ico-moon { display: none; }
:root[data-theme="dark"] .ico-sun { display: none; }
:root[data-theme="dark"] .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ico-sun { display: none; }
    :root:not([data-theme="light"]) .ico-moon { display: block; }
}

/* ---------- workspace ---------- */

.workspace { flex: 1; display: flex; min-height: 0; }

.sidebar {
    width: 252px; flex: none;
    padding: 14px 12px 20px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 18px;
}

.main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 22px 56px; }

.scrim { display: none; }

/* mini calendar */
.mini-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
.mini-head strong { font-size: 14px; font-weight: 600; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mini-dow { text-align: center; font-size: 10px; color: var(--text-faint); padding: 3px 0; font-weight: 600; text-transform: uppercase; }
.mini-day {
    position: relative;
    aspect-ratio: 1; display: grid; place-items: center;
    border: 0; background: none; border-radius: 999px;
    font-size: 12px; color: var(--text); cursor: pointer;
}
.mini-day:hover { background: var(--surface-3); }
.mini-day.other { color: var(--text-faint); }
.mini-day.has-events::after {
    content: ""; position: absolute; bottom: 3px;
    width: 4px; height: 4px; border-radius: 999px; background: var(--accent);
}
.mini-day.today { background: var(--accent); color: var(--accent-on); font-weight: 700; }
.mini-day.today.has-events::after { background: var(--accent-on); }
.mini-day.selected:not(.today) { box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 600; }

/* filters */
.disclosure {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 6px 4px;
    background: none; border: 0; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em;
}
.disclosure svg { width: 16px; height: 16px; transition: transform .15s ease; }
.disclosure[aria-expanded="false"] svg { transform: rotate(-90deg); }
.disclosure[aria-expanded="false"] + .type-list,
.disclosure[aria-expanded="false"] ~ .filter-actions { display: none; }

.type-list { display: flex; flex-direction: column; gap: 1px; }
.type-row {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer;
    user-select: none;
}
.type-row:hover { background: var(--surface-3); }
.type-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.type-box {
    width: 16px; height: 16px; flex: none;
    border-radius: 4px;
    border: 2px solid var(--c);
    background: var(--c);
    display: grid; place-items: center;
    transition: background .12s ease;
}
.type-box svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3.2; }
.type-row input:not(:checked) + .type-box { background: transparent; }
.type-row input:not(:checked) + .type-box svg { display: none; }
.type-row input:focus-visible + .type-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.type-icon { font-size: 14px; line-height: 1; }
.type-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-row input:not(:checked) ~ .type-name { color: var(--text-faint); }
.type-count { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.filter-actions { display: flex; align-items: center; gap: 8px; padding: 8px 8px 0; color: var(--text-faint); font-size: 12px; }
.filter-actions button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 12px; }
.filter-actions button:hover { text-decoration: underline; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.btn.is-disabled { opacity: .45; pointer-events: none; }
.legend-note { margin: 0; font-size: 12px; color: var(--text-faint); text-align: center; }

/* ---------- shared view bits ---------- */

.view-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.view-head h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.view-head .sub { color: var(--text-dim); font-size: 13px; }

.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: var(--accent-soft); color: var(--accent);
}
.pill.next { background: var(--next-soft); color: var(--next); }
.pill.cancelled { background: var(--danger-soft); color: var(--danger); }

.empty {
    padding: 56px 20px; text-align: center; color: var(--text-faint);
    border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
}
.empty strong { display: block; color: var(--text-dim); font-size: 15px; margin-bottom: 4px; }

/* ---------- year view ---------- */

.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }

.month-card {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 15px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    text-align: left;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.month-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.month-card.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.month-card.is-empty { opacity: .62; }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.mc-count { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mc-bar { display: flex; gap: 3px; flex-wrap: wrap; }
.mc-dot { width: 100%; max-width: 22px; height: 5px; border-radius: 999px; background: var(--c); }
.mc-next { font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.mc-next > span { flex: none; white-space: nowrap; }
.mc-next b { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- month grid ---------- */

.cal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal-dow div { padding: 8px 6px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.cal-dow div:nth-child(6), .cal-dow div:nth-child(7) { background: var(--weekend-head); color: var(--weekend-ink); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.cal-cell {
    position: relative;
    min-height: 116px;
    padding: 5px 5px 7px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 3px;
    background: var(--surface);
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-grid > .cal-cell:nth-last-child(-n+7) { border-bottom: 0; }
.cal-cell.other { background: var(--surface-2); }
.cal-cell.weekend { background: var(--weekend); }
.cal-cell.weekend.other { background: var(--weekend-other); }
/* Matches .cal-cell.weekend.other so today still wins when it is a weekend day
   spilling in from the neighbouring month. */
.cal-grid .cal-cell.is-today { background: var(--accent-soft); }

.cal-num {
    align-self: center;
    display: grid; place-items: center;
    min-width: 24px; height: 24px; padding: 0 6px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.cal-cell.other .cal-num { color: var(--text-faint); font-weight: 400; }
.cal-cell.is-today .cal-num { background: var(--accent); color: var(--accent-on); font-weight: 700; }

.chip {
    display: flex; align-items: center; gap: 5px;
    width: 100%; padding: 3px 6px;
    border: 0; border-left: 3px solid var(--c);
    border-radius: 5px;
    background: color-mix(in srgb, var(--c) 15%, transparent);
    color: var(--text);
    font-size: 12px; text-align: left; cursor: pointer;
    overflow: hidden;
    transition: background .12s ease;
}
.chip:hover { background: color-mix(in srgb, var(--c) 28%, transparent); }
.chip .ci { flex: none; font-size: 11px; line-height: 1; }
.chip .ct { flex: none; color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 11px; }
.chip .cn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.chip.is-cancelled .cn { text-decoration: line-through; color: var(--text-faint); }
.chip.is-next { box-shadow: inset 0 0 0 1.5px var(--next-line); background: var(--next-soft); }

.cal-more { background: none; border: 0; padding: 2px 6px; font-size: 11px; color: var(--text-dim); cursor: pointer; text-align: left; border-radius: 5px; }
.cal-more:hover { background: var(--surface-3); color: var(--text); }

.cal-dots { display: none; flex-direction: column; align-self: stretch; gap: 3px; padding: 1px 3px 0; }
.cal-dots i { display: block; height: 7px; border-radius: 4px; background: var(--c); }

/* day strip shown under the grid on narrow screens */
.day-panel { margin-top: 14px; }
.day-panel h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }

/* ---------- agenda / search list ---------- */

.agenda { display: flex; flex-direction: column; gap: 22px; }
.agenda-group h2 {
    margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-dim);
}
.rows { display: flex; flex-direction: column; gap: 6px; }

.row {
    display: grid;
    grid-template-columns: 62px 30px 1fr auto;
    align-items: center; gap: 12px;
    width: 100%;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--c);
    border-radius: var(--r-md);
    cursor: pointer; text-align: left;
    box-shadow: var(--shadow-sm);
    transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease;
}
.row:hover { transform: translateX(2px); box-shadow: var(--shadow-md); }
.row.is-today { background: var(--accent-soft); border-color: var(--accent); border-left-color: var(--c); }
.row.is-next { box-shadow: 0 0 0 1.5px var(--next-line), var(--shadow-sm); }
.row.is-past { opacity: .72; }
/* Set by the Today button, and only on an event that is actually today. Declared after
   .is-next so it wins when the same row is both. */
.row.is-focus { opacity: 1; box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); }

.r-when { display: flex; flex-direction: column; line-height: 1.18; }
.r-dow { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.r-day { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.r-mon { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.row.is-today .r-day, .row.is-today .r-dow, .row.is-today .r-mon { color: var(--accent); }

.r-icon {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 999px;
    background: color-mix(in srgb, var(--c) 18%, transparent);
    font-size: 15px; line-height: 1;
}
.r-main { min-width: 0; }
.r-name { display: block; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.is-cancelled .r-name { text-decoration: line-through; color: var(--text-faint); }
.r-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.r-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--text-faint); }
.r-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.r-tail { display: flex; align-items: center; gap: 8px; }
.r-tail svg { flex: none; }
.mi { display: flex; align-items: center; gap: 8px; min-width: 0; }
mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.r-tail svg { width: 18px; height: 18px; color: var(--text-faint); }

.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11px; color: var(--text-dim); }

/* ---------- event sheet ---------- */

.sheet-wrap { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(10, 16, 24, .42); animation: fade .18s ease; }
.sheet {
    position: relative;
    width: min(440px, 100%);
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    /* Stops a flick past the end of the sheet from scrolling the calendar behind it, which
       matters now the sheet is long enough on a phone to actually need scrolling. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    animation: slide-in .2s cubic-bezier(.22, .8, .3, 1);
    display: flex; flex-direction: column;
}

/* The handle that says "drag/scroll me". Only earns its place on the phone bottom-sheet. */
.sheet-grip { display: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes slide-up { from { transform: translateY(28px); opacity: 0; } }

.sheet-top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 0; }
.sheet-top .grow { flex: 1; }
.sheet-body { padding: 6px 22px 22px; }
.sheet-type {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 12px 4px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--c) 16%, transparent);
    font-size: 12px; font-weight: 600;
}
.sheet-type i { font-style: normal; font-size: 14px; }
.sheet h1 { margin: 12px 0 4px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.sheet .when { color: var(--text-dim); font-size: 14px; }
.sheet .banner-inline {
    margin: 14px 0 0; padding: 9px 13px; border-radius: var(--r-md);
    background: var(--danger-soft); color: var(--danger); font-weight: 600; font-size: 13px;
}
.sheet .banner-inline.next { background: var(--next-soft); color: var(--next); }
.sheet-facts { margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.fact { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; font-size: 14px; }
.fact svg { width: 18px; height: 18px; color: var(--text-faint); margin-top: 2px; }
.fact .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); font-weight: 700; }
.fact .desc { white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ---------- misc ---------- */

.banner {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 90; max-width: min(560px, calc(100vw - 24px));
    display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
    padding: 11px 16px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    font-size: 13px;
}
.banner.error { border-color: var(--danger); color: var(--danger); }

.toast {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 95; padding: 9px 16px; border-radius: 999px;
    background: var(--text); color: var(--surface); font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-lg); animation: slide-up .18s ease;
}

/* ---------- add to calendar (narrow screens) ---------- */

/* Hidden by default and shown only below 920px. On a wide screen the sidebar's own
   "Download these events" button is on the page already, and two buttons doing exactly the
   same thing is one too many. 920px is where the sidebar goes behind the hamburger, so this
   appears at precisely the width where the other one stops being visible. */
.ics-cta { display: none; }

.ics-cta-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.ics-cta-text { flex: 1; min-width: 0; }
.ics-cta-text strong { display: block; font-size: 15px; }
.ics-cta-text span { font-size: 13px; color: var(--text-dim); }

.ics-cta .btn {
    flex: none;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); border-color: var(--accent); color: var(--accent-on);
    font-weight: 600;
}
.ics-cta .btn svg { width: 18px; height: 18px; flex: none; }

/* Nothing to download is said plainly rather than by handing over a button that produces an
   empty file. */
.ics-cta.is-empty .btn { display: none; }

/* ---------- tide & weather ----------
   Three blocks, appearing in two places: under the events of the selected day in the month
   view, and under the actions in the event sheet. The chart arrives as finished SVG from the
   server; everything below styles it from the outside via the classes it carries, which is
   what lets it follow the theme. */

.tide-blocks { display: flex; flex-direction: column; gap: 12px; }
.tide-blocks:not(:empty) { margin-top: 16px; }

.tide-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
}
.tide-block > h3 {
    margin: 0 0 10px; font-size: 12px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
}

/* The sheet is already --surface, so blocks inside it step down a shade to stay visible. */
.sheet .tide-blocks { margin-top: 18px; }
.sheet .tide-block { background: var(--surface-2); box-shadow: none; }
.sheet .tide-block .ext, .sheet .tide-block .wx-hour { background: var(--surface-3); }

.tide-loading {
    height: 92px; border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
    background-size: 200% 100%;
    animation: tide-shimmer 1.1s linear infinite;
}
@keyframes tide-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* The SVG is authored at a fixed viewBox per size and scaled to fit, so it never forces the
   page to scroll sideways. */
.tide-chart { width: 100%; }
.tide-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* The app-wide icon baseline (`svg { fill: none; stroke: currentColor }` near the top of this
   file) is what makes the bare <path> icons in the markup draw at all -- but fill and stroke
   inherit in SVG, so the chart picked it up too and outlined all 144 transparent hover strips
   in black. The chart paints itself, so it opts out of that baseline here and every class
   below states exactly what it wants. */
.tide-svg, .tide-svg * { fill: none; stroke: none; }

.tide-svg .grid { stroke: var(--border); stroke-width: 1; }
.tide-svg .baseline { stroke: var(--border-strong); stroke-width: 1; }
.tide-svg .axis { font-size: 11px; fill: var(--text-faint); }
.tide-svg .fill { fill: color-mix(in srgb, var(--accent) 15%, transparent); }
.tide-svg .curve {
    fill: none; stroke: var(--accent); stroke-width: 2.2;
    stroke-linejoin: round; stroke-linecap: round;
}
.tide-svg .mk-high { fill: var(--danger); }
.tide-svg .mk-low { fill: var(--tide-low); }

/* The event on the tide: its duration shaded, its start and end as solid lines, a dot where
   each meets the water, and the times written above. */
.tide-svg .ev-band { fill: color-mix(in srgb, var(--event-mark) 16%, transparent); }
.tide-svg .ev-line { stroke: var(--event-mark); stroke-width: 2; }
.tide-svg .ev-dot { fill: var(--event-mark); stroke: var(--surface); stroke-width: 2; }
.tide-svg .ev-label { font-size: 11.5px; font-weight: 700; fill: var(--event-mark); }

/* Hover readout, done with transparent hit strips and no script. Touch devices never fire it,
   which is why the times are also spelled out in the high/low boxes below the chart. */
.tide-svg .hit-area { fill: transparent; }
.tide-svg .tip { visibility: hidden; pointer-events: none; }
.tide-svg .hit:hover .tip { visibility: visible; }
.tide-svg .cross { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }
.tide-svg .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.tide-svg .tip-box { fill: var(--tide-tip-bg); opacity: .96; }
.tide-svg .tip-text { font-size: 11.5px; font-weight: 600; fill: var(--tide-tip-ink); }

.exts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.ext {
    padding: 9px 11px; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--border);
    border-left: 4px solid var(--c);
}
.ext.hi { --c: var(--danger); }
.ext.lo { --c: var(--tide-low); }
.ext .k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c); }
.ext .t { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ext .h { font-size: 12px; color: var(--text-dim); }
.tide-sum { margin: 10px 0 0; font-size: 12px; color: var(--text-dim); }

/* Where the tide and weather figures come from. Deliberately quiet -- it is a credit, not
   a heading, so it sits below the blocks rather than inside one. */
.tide-source { margin: -2px 0 0; padding-left: 2px; font-size: 11px; color: var(--text-faint); }

/* A scrolling strip rather than a 24-row table: this sits inside a day panel and a sheet,
   and neither can spare the vertical space a table would take. */
.wx {
    display: flex; gap: 6px; overflow-x: auto;
    padding-bottom: 4px; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.wx-hour {
    flex: 0 0 auto; width: 150px; scroll-snap-align: start;
    display: flex; flex-direction: column; gap: 5px;
    padding: 9px 11px; border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--border);
}
.wx-time {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.wx-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wx-ico { flex: none; width: 22px; text-align: center; font-size: 19px; line-height: 1.1; }
.wx-temp { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The arrow inherits the app's icon stroke, and is turned to point the way the wind blows. */
.wx-arrow { flex: none; width: 22px; height: 22px; color: var(--accent); transform: rotate(var(--deg, 0deg)); }
.wx-dir { font-size: 15px; font-weight: 700; }
.wx-speed { margin-left: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-speed small { font-size: 11px; font-weight: 500; color: var(--text-dim); }

/* ---------- admin ---------- */

/* The burgee doubles as the admin door (ten clicks), so it must not get selected or dragged
   by the clicking. */
.brand-logo { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }

.admin-badge { padding: 5px 12px; font-size: 13px; color: var(--next); border-color: var(--next-line); }
/* A Member's badge is a sign-out button inside a form; the form must not disturb the topbar's flex row. */
.badge-form { display: contents; }

/* An admin's new event before it has a name: an orange bar on the day while the form is open. */
.chip.is-draft {
    --c: #ea580c;
    background: #fdba74; color: #431407;
    cursor: default; font-style: italic;
}
.chip.is-draft:hover { background: #fdba74; }
.app.is-admin .cal-cell:not(.other) { cursor: copy; }
.app.is-admin .cal-cell .chip, .app.is-admin .cal-cell .cal-more { cursor: pointer; }

.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }
.btn:disabled { opacity: .55; cursor: default; }

.sheet-admin {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 14px; padding: 12px; border-radius: var(--r-md);
    background: var(--next-soft);
}
.sheet-admin .label {
    margin-right: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--next);
}

.modal-wrap { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(10, 16, 24, .48); animation: fade .18s ease; }
.modal {
    position: relative;
    width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
    padding: 22px;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    animation: slide-up .2s cubic-bezier(.22, .8, .3, 1);
}
.modal h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.modal-text { margin: 0; color: var(--text-dim); }
.modal-text strong { color: var(--text); }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > span { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.field small { font-weight: 400; color: var(--text-faint); }
.field input, .field select, .field textarea {
    width: 100%; padding: 8px 10px;
    font: inherit; color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
.field textarea { resize: vertical; min-height: 80px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.field-static { margin: -4px 0 0; color: var(--text-dim); font-weight: 600; }
.field-hint { margin: -6px 0 0; font-size: 12px; color: var(--text-faint); }
.check { display: inline-flex; align-items: center; gap: 7px; padding-bottom: 9px; white-space: nowrap; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

.modal-error {
    margin: 0; padding: 8px 12px; border-radius: var(--r-sm);
    background: var(--danger-soft); color: var(--danger); font-size: 13px; font-weight: 600;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
    .search { flex-basis: 210px; }
}

@media (max-width: 920px) {
    .menu-btn { display: inline-grid; }
    .sidebar {
        position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 50;
        width: 272px;
        transform: translateX(-100%);
        transition: transform .22s cubic-bezier(.22, .8, .3, 1);
        box-shadow: var(--shadow-lg);
    }
    .app.nav-open .sidebar { transform: none; }
    .app.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10, 16, 24, .4); }
    .main { padding: 16px 14px 48px; }

    .ics-cta { display: block; margin-top: 28px; }
}

@media (max-width: 780px) {
    .topbar { padding: 8px 10px; gap: 6px; row-gap: 8px; }
    .brand-text { font-size: 18px; }

    /* The topbar wraps onto two rows at this width and the burgee is the one thing on it
       that carries no information -- the brand text beside it already says EDSC Calendar. */
    .brand-logo { display: none; }
    .period-btn { font-size: 18px; }
    .search { order: 10; flex: 1 1 160px; }
    .segmented { order: 11; }
    .today-btn { padding: 7px 12px; }

    .cal-cell { min-height: 0; aspect-ratio: 1 / 1; padding: 3px 2px; gap: 2px; overflow: hidden; }
    .cal-cell .chip, .cal-more { display: none; }
    .cal-cell .chip.is-draft { display: flex; padding: 1px 3px; font-size: 9px; }
    .field-row { grid-template-columns: 1fr 1fr; }
    .field-row .check { grid-column: 1 / -1; padding-bottom: 0; }
    .cal-dots { display: flex; }
    .cal-num { min-width: 22px; height: 22px; font-size: 11.5px; }
    .cal-dow div { padding: 6px 2px; font-size: 10px; }

    .year-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; }
    .row { grid-template-columns: 50px 1fr auto; gap: 10px; padding: 10px 12px; }
    .r-icon { display: none; }
    .mi-desc { display: none; }
    .view-head h1 { font-size: 20px; }

    .sheet-wrap { align-items: flex-end; }
    /* Taller than it used to be: the sheet now carries a tide chart, the high/low boxes and
       the hourly strip below the actions, so it is meant to be scrolled up through. */
    .sheet {
        width: 100%; max-height: 94dvh;
        border-left: 0; border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
        animation: slide-up .22s cubic-bezier(.22, .8, .3, 1);
    }
    .sheet-grip {
        display: block; flex: none;
        width: 38px; height: 4px; margin: 8px auto 2px;
        border-radius: 999px; background: var(--border-strong);
    }
    .sheet-top { padding-top: 6px; }
    .sheet-body { padding: 6px 16px 28px; }

    /* Still wide enough for the wind to stay on one line; a peek of the next card is enough
       of a hint that the strip scrolls sideways. */
    .wx-hour { width: 142px; }
}

@media (max-width: 430px) {
    .ics-cta-inner { flex-direction: column; align-items: stretch; gap: 12px; }
    .ics-cta .btn { justify-content: center; }

    .brand-text span { display: none; }
    .segmented button { padding: 6px 11px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
    .topbar, .sidebar, .sheet-wrap, .modal-wrap, .scrim, .ics-cta, .tide-loading { display: none !important; }
    .main { overflow: visible; padding: 0; }
    body { background: #fff; }
}