/*
 * Winnipeg Police Calls for Service, Day by Day.
 *
 * Layout and chrome follow WFPSIncidents so the two sites read as siblings. Colour is set in
 * tokens below, and every chart and the map read them, so light and dark each have one
 * definition. The dark values are chosen for the dark surface, not inverted from the light.
 *
 * Data colour has exactly two jobs here:
 *   --series      the calls being counted (bars, dots, the selected filter)
 *   --seq-0..5    a single-hue blue ramp for magnitude (calendar, week grid, shaded map)
 * Service types are never told apart by colour. Seven hues cannot be kept distinguishable
 * for colour-blind readers on a map, so types are named in text and picked with the filter.
 */

:root {
    --page: #f7f7f5;
    --surface: #ffffff;
    --surface-2: #f3f3f0;
    --ink: #1b1b1a;
    --ink-2: #52514e;
    --muted: #6f6e69;
    --hairline: #e1e0d9;
    --baseline: #c3c2b7;
    --series: #2a78d6;
    --series-strong: #1c5cab;
    --context: #8f8e87;
    --tick: #1b1b1a;
    --focus: #2a78d6;
    --selected-ring: #0b0b0b;

    --seq-0: #efeee9;
    --seq-1: #cde2fb;
    --seq-2: #9ec5f4;
    --seq-3: #5598e7;
    --seq-4: #256abf;
    --seq-5: #104281;
    --seq-ink-light: #1b1b1a;
    --seq-ink-dark: #ffffff;

    --warn-bg: #fff6e0;
    --warn-border: #f0d58c;
    --warn-ink: #6b4e00;
}

html.dark-mode {
    color-scheme: dark;
    --page: #151617;
    --surface: #1f2123;
    --surface-2: #272a2d;
    --ink: #f1f1ee;
    --ink-2: #c3c2b7;
    --muted: #9b9a93;
    --hairline: #34373a;
    --baseline: #4a4d50;
    --series: #3987e5;
    --series-strong: #86b6ef;
    --context: #6b6e71;
    --tick: #f1f1ee;
    --focus: #6da7ec;
    --selected-ring: #ffffff;

    /* Low values recede toward the dark surface; high values come forward. */
    --seq-0: #2a2c2e;
    --seq-1: #173457;
    --seq-2: #1c5cab;
    --seq-3: #2a78d6;
    --seq-4: #6da7ec;
    --seq-5: #b7d3f6;
    --seq-ink-light: #f1f1ee;
    --seq-ink-dark: #0d1b2e;

    --warn-bg: #3a3014;
    --warn-border: #5c4a17;
    --warn-ink: #f3dc92;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--page);
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
}

a {
    color: var(--series-strong);
}

.app-shell {
    max-width: 1320px;
    min-height: 100vh;
    padding-bottom: 0;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---- Header ---- */

.site-header {
    text-align: center;
}

.page-title {
    font-size: clamp(1.35rem, 3.2vw, 2rem);
    font-weight: 700;
    margin: 0.9rem 0 0.25rem;
}

.page-title a {
    color: var(--ink);
    text-decoration: none;
}

.page-subtitle {
    color: var(--ink-2);
    font-size: 0.9rem;
    margin: 0 auto 0.9rem;
    max-width: min(90ch, 100%);
}

/* ---- Day navigation ---- */

.day-top {
    margin: 0 auto;
    max-width: min(110ch, 100%);
    text-align: center;
}

.day-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.9rem;
}

.day-nav-btn,
.day-nav-latest {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.3rem 0.9rem;
    text-decoration: none;
}

.day-nav-btn:hover,
.day-nav-latest:hover {
    border-color: var(--series);
    color: var(--ink);
}

.day-nav-btn.is-disabled {
    opacity: 0.4;
}

.day-nav-latest {
    background: var(--series);
    border-color: var(--series);
    color: #fff;
}

.day-nav-latest:hover {
    color: #fff;
}

.day-picker input {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.8rem;
}

@media (max-width: 575.98px) {
    .day-nav-text {
        display: none;
    }
}

/* ---- Headline ---- */

.day-date {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    font-weight: 700;
    gap: 0.5rem;
    justify-content: center;
    margin: 0 0 0.4rem;
}

.day-badge {
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
}

.day-badge-holiday {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    color: var(--ink-2);
}

.day-badge-partial {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-ink);
}

.day-headline {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0 auto 0.25rem;
    max-width: 80ch;
}

.day-comparison {
    color: var(--ink-2);
    font-size: 0.92rem;
    margin: 0 auto 0.9rem;
    max-width: 80ch;
}

/* ---- Stat tiles ---- */

.stat-row {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    margin: 0 auto 0.9rem;
    text-align: left;
}

.stat-tile {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
}

.stat-tile-hero .stat-value {
    color: var(--series-strong);
    font-size: 2.2rem;
}

.stat-value-text {
    font-size: 1.15rem;
    padding: 0.35rem 0 0.2rem;
}

.stat-value-muted {
    color: var(--warn-ink);
    font-size: 1.2rem;
}

.stat-label {
    color: var(--ink-2);
    font-size: 0.82rem;
    line-height: 1.35;
    margin-top: 0.15rem;
}

.stat-sub {
    color: var(--muted);
    display: block;
    font-size: 0.78rem;
}

a.stat-sub {
    color: var(--series-strong);
}

.stat-row-compact .stat-value {
    font-size: 1.35rem;
}

/* ---- Service-type filter ---- */

.type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 0.8rem;
}

.type-chip {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 0.82rem;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0.2rem 0.75rem;
    text-decoration: none;
}

.type-chip:hover {
    border-color: var(--series);
    color: var(--ink);
}

.type-chip.is-selected {
    background: var(--series);
    border-color: var(--series);
    color: #fff;
}

.type-chip-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: 0.8;
}

/* ---- Map ---- */

.map-wrapper {
    position: relative;
}

.map-panel {
    background: var(--surface-2);
    border-radius: 0.6rem;
    height: min(68vh, 44rem);
    min-height: 22rem;
    width: 100%;
}

/*
 * OpenStreetMap's own colours compete with the data, so the tiles are desaturated; in dark
 * mode they are inverted too, which makes a keyless dark basemap. A configured CARTO key
 * swaps in CARTO's dark tiles, which need no filter.
 */
.map-panel .leaflet-tile-pane {
    filter: grayscale(0.85) contrast(0.92) brightness(1.04);
}

html.dark-mode .map-panel .leaflet-tile-pane {
    filter: grayscale(1) invert(1) brightness(0.82) contrast(0.88);
}

html.dark-mode .map-panel.uses-carto-dark .leaflet-tile-pane {
    filter: none;
}

.map-loading {
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.6rem;
    display: flex;
    inset: 0;
    justify-content: center;
    position: absolute;
    z-index: 1000;
}

.map-loading[hidden] {
    display: none;
}

html.dark-mode .map-loading {
    background: rgba(20, 20, 22, 0.8);
}

.map-loading-inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.map-panel-unavailable {
    align-items: center;
    border: 1px dashed var(--baseline);
    color: var(--muted);
    display: flex;
    justify-content: center;
    padding: 1rem;
    text-align: center;
}

.map-controls {
    align-items: flex-start;
    display: flex;
    gap: 0.4rem;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1001;
}

.map-mode {
    background: var(--surface);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    display: flex;
    overflow: hidden;
}

.map-mode-btn {
    background: transparent;
    border: 0;
    color: var(--ink);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
}

.map-mode-btn[aria-pressed="true"] {
    background: var(--series);
    color: #fff;
}

.map-settings-wrapper {
    position: relative;
}

.map-settings-btn {
    align-items: center;
    background: var(--surface);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 5px 7px;
}

.map-settings-panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    color: var(--ink);
    min-width: 240px;
    padding: 0.6rem 0.75rem;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
}

.map-settings-title {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.map-settings-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    user-select: none;
}

.map-settings-item:last-child {
    margin-bottom: 0;
}

.map-replay {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    bottom: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    gap: 0.6rem;
    left: 50%;
    max-width: calc(100% - 24px);
    padding: 0.3rem 0.9rem 0.3rem 0.35rem;
    position: absolute;
    transform: translateX(-50%);
    width: 30rem;
    z-index: 1001;
}

.map-replay[hidden] {
    display: none;
}

.replay-btn {
    align-items: center;
    background: var(--series);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex: none;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.replay-label {
    flex: none;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    min-width: 7.5rem;
}

.map-replay input[type="range"] {
    accent-color: var(--series);
    flex: 1;
    min-width: 0;
}

.map-note {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0.4rem auto 1rem;
    max-width: 90ch;
    text-align: center;
}

.map-legend {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--ink);
    font-size: 0.75rem;
    line-height: 1.5;
    max-width: 15rem;
    padding: 0.4rem 0.6rem;
}

.map-legend-title {
    font-weight: 600;
}

.map-legend-row {
    align-items: center;
    display: flex;
    gap: 0.4rem;
}

.map-legend-dot {
    border: 1px solid var(--surface);
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.map-popup h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.1rem;
}

.map-popup .map-popup-sub {
    color: var(--muted);
    font-size: 0.78rem;
    margin: 0 0 0.4rem;
}

.map-popup table {
    font-size: 0.8rem;
    width: 100%;
}

.map-popup td.num {
    font-variant-numeric: tabular-nums;
    padding-left: 0.75rem;
    text-align: right;
}

.map-popup .map-popup-total {
    font-size: 0.85rem;
    margin: 0 0 0.35rem;
}

.leaflet-container {
    font-family: inherit;
}

html.dark-mode .leaflet-popup-content-wrapper,
html.dark-mode .leaflet-popup-tip,
html.dark-mode .leaflet-tooltip {
    background: var(--surface-2);
    color: var(--ink);
}

html.dark-mode .leaflet-bar a {
    background: var(--surface);
    border-color: var(--hairline);
    color: var(--ink);
}

html.dark-mode .leaflet-control-attribution {
    background: rgba(31, 33, 35, 0.8) !important;
    color: var(--muted);
}

html.dark-mode .leaflet-control-attribution a {
    color: var(--ink-2);
}

/* ---- Panels ---- */

.day-bottom {
    margin: 0 auto;
}

.panel-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    margin-bottom: 0.9rem;
}

.panel-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    margin: 0.6rem 0 0;
}

.card-panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
    margin-bottom: 0.9rem;
    padding: 0.9rem 1rem;
}

.panel-grid > .card-panel {
    margin-bottom: 0;
}

.card-panel-wide {
    grid-column: 1 / -1;
}

.panel-head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: space-between;
}

.panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.panel-subtitle {
    color: var(--ink-2);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.8rem 0 0.35rem;
}

.panel-subtitle small {
    font-weight: 400;
}

.panel-sub {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0 0 0.6rem;
}

.panel-empty {
    color: var(--muted);
    font-size: 0.9rem;
}

.legend-tick {
    background: var(--tick);
    border-radius: 1px;
    display: inline-block;
    height: 0.8em;
    vertical-align: -0.1em;
    width: 2px;
}

/* ---- Bar lists ---- */

.bar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bar-row {
    align-items: center;
    border-radius: 4px;
    display: grid;
    font-size: 0.82rem;
    gap: 0.6rem;
    grid-template-columns: minmax(7rem, 38%) 1fr 3.2rem;
    padding: 0.2rem 0.25rem;
}

.bar-row:hover,
.bar-row:focus-visible {
    background: var(--surface-2);
}

.bar-label {
    line-height: 1.2;
    min-width: 0;
}

.bar-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-detail {
    color: var(--muted);
    display: block;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-track {
    height: 0.8rem;
    position: relative;
}

.bar-fill {
    background: var(--series);
    border-radius: 0 4px 4px 0;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
}

.bar-row.is-current .bar-fill {
    background: var(--series-strong);
}

.bar-row.is-current .bar-name {
    font-weight: 700;
}

.bar-tick {
    background: var(--tick);
    border-radius: 1px;
    bottom: -3px;
    margin-left: -1px;
    position: absolute;
    top: -3px;
    width: 2px;
}

.bar-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
}

.bar-list-more {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0.4rem 0 0 0.25rem;
}

/* ---- Hour chart ---- */

.hour-chart {
    align-items: stretch;
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(24, 1fr);
    height: 11rem;
    list-style: none;
    margin: 1.2rem 0 0;
    padding: 0;
}

.hour-col {
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hour-col:hover .hour-bar,
.hour-col:focus-visible .hour-bar {
    background: var(--series-strong);
}

.hour-plot {
    border-bottom: 1px solid var(--baseline);
    flex: 1;
    position: relative;
}

.hour-bar {
    background: var(--series);
    border-radius: 4px 4px 0 0;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
}

.hour-tick {
    background: var(--tick);
    border-radius: 1px;
    height: 2px;
    left: -1px;
    margin-bottom: -1px;
    position: absolute;
    right: -1px;
}

.hour-peak-label {
    font-size: 0.72rem;
    font-weight: 700;
    left: 50%;
    margin-bottom: 2px;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.hour-axis {
    color: var(--muted);
    font-size: 0.7rem;
    height: 1.2rem;
    line-height: 1.2rem;
    overflow: visible;
    white-space: nowrap;
}

/* ---- Tables ---- */

.table-panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
    margin-bottom: 0.9rem;
    padding: 0.7rem 1rem;
}

.table-panel-toggle {
    align-items: baseline;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.table-panel-hint {
    color: var(--muted);
    font-size: 0.8rem;
}

.table-wrapper {
    margin-top: 0.5rem;
    max-height: clamp(16rem, 40vh, 28rem);
    overflow: auto;
}

.data-table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--hairline);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--ink);
    font-size: 0.85rem;
    margin-bottom: 0;
}

.data-table thead th {
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 0.78rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table .num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.neighbourhood-table tbody tr[data-neighbourhood] {
    cursor: pointer;
}

.neighbourhood-table tbody tr.is-selected {
    outline: 2px solid var(--series);
    outline-offset: -2px;
}

.row-unlocated td {
    color: var(--muted);
    font-style: italic;
}

@media (max-width: 767.98px) {
    .table-wrapper {
        max-height: none;
        overflow: visible;
    }

    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        border: 1px solid var(--hairline);
        border-radius: 0.5rem;
        margin-bottom: 0.6rem;
        padding: 0.2rem 0.5rem;
    }

    .data-table td {
        border: 0;
        border-bottom: 1px solid var(--hairline);
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
        padding: 0.35rem 0;
        text-align: right;
    }

    .data-table td:last-child {
        border-bottom: 0;
    }

    .data-table td::before {
        color: var(--ink-2);
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
    }

    /* Each card leads with its neighbourhood, as a heading rather than a labelled row. */
    .neighbourhood-table td:first-child {
        font-size: 0.95rem;
        font-weight: 700;
        justify-content: flex-start;
        text-align: left;
    }

    .neighbourhood-table td:first-child::before {
        content: none;
    }

    /* 160 cards is a very long page on a phone: the busiest 15, then a button for the rest.
       Only when the script is running to work that button. */
    html.js .neighbourhood-table:not(.show-all) .row-extra {
        display: none;
    }

    html.js .show-all-btn {
        display: block;
    }
}

.show-all-btn {
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink);
    display: none;
    font-size: 0.85rem;
    margin: 0.4rem auto 0.2rem;
    padding: 0.35rem 1rem;
}

/* ---- Sequential shading (week grid, calendar, legends) ---- */

.seq-0 { background-color: var(--seq-0); color: var(--seq-ink-light); }
.seq-1 { background-color: var(--seq-1); color: var(--seq-ink-light); }
.seq-2 { background-color: var(--seq-2); color: var(--seq-ink-light); }
.seq-3 { background-color: var(--seq-3); color: var(--seq-ink-dark); }
.seq-4 { background-color: var(--seq-4); color: var(--seq-ink-dark); }
.seq-5 { background-color: var(--seq-5); color: var(--seq-ink-dark); }

html:not(.dark-mode) .seq-3 { color: #ffffff; }
html.dark-mode .seq-3 { color: #ffffff; }

.week-table {
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    min-width: 36rem;
    width: 100%;
}

.week-table th {
    color: var(--ink-2);
    font-weight: 600;
    padding: 0.25rem 0.4rem;
    white-space: nowrap;
}

.week-table thead th {
    font-size: 0.75rem;
    text-align: center;
}

.week-table thead th a {
    color: var(--ink-2);
}

.week-table thead th.is-selected {
    color: var(--ink);
}

.week-table tbody th,
.week-table tfoot th {
    text-align: left;
}

.week-table td {
    border-radius: 3px;
    padding: 0.25rem 0.4rem;
    text-align: center;
}

.week-table td.is-selected {
    box-shadow: inset 0 0 0 2px var(--selected-ring);
}

.week-table td.is-empty {
    background: transparent;
    color: var(--muted);
}

.week-table tfoot td,
.week-table tfoot th {
    border-top: 1px solid var(--baseline);
    font-weight: 700;
}

.week-table tfoot td.is-selected {
    box-shadow: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.week-partial {
    color: var(--warn-ink);
}

.scale-legend {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 0.25rem 0.8rem;
    margin-top: 0.6rem;
}

.scale-legend-item {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
}

.scale-swatch {
    border-radius: 2px;
    display: inline-block;
    height: 0.8rem;
    width: 1.2rem;
}

/* ---- Calendar ---- */

.calendar {
    display: grid;
    gap: 1rem 1.2rem;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}

.cal-month {
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
}

.cal-month caption {
    caption-side: top;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0 0 0.2rem;
}

.cal-month th {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
}

.cal-month td {
    padding: 0;
}

.cal-day {
    align-items: center;
    aspect-ratio: 1;
    border-radius: 3px;
    display: flex;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    justify-content: center;
    position: relative;
    text-decoration: none;
}

a.cal-day:hover {
    box-shadow: inset 0 0 0 2px var(--series-strong);
}

.cal-day.is-selected {
    box-shadow: inset 0 0 0 2px var(--selected-ring), 0 0 0 1px var(--surface);
    font-weight: 700;
}

.cal-day.is-empty {
    color: var(--baseline);
}

.cal-day.is-partial {
    background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(127, 127, 127, 0.45) 3px 4px);
}

.cal-day.is-holiday::after {
    background: currentColor;
    border-radius: 50%;
    bottom: 2px;
    content: "";
    height: 3px;
    left: 50%;
    margin-left: -1.5px;
    position: absolute;
    width: 3px;
}

.year-links {
    display: flex;
    gap: 0.4rem;
}

.year-links a,
.year-links span {
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 0.8rem;
    padding: 0.1rem 0.6rem;
    text-decoration: none;
}

.year-links .is-current {
    background: var(--series);
    border-color: var(--series);
    color: #fff;
}

/* ---- Tooltip ---- */

.tip {
    background: var(--ink);
    border-radius: 4px;
    color: var(--surface);
    font-size: 0.78rem;
    max-width: 18rem;
    padding: 0.3rem 0.55rem;
    pointer-events: none;
    position: fixed;
    z-index: 2000;
}

.tip[hidden] {
    display: none;
}

/* ---- Notes & footer ---- */

.page-notes {
    color: var(--ink-2);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1.5rem auto 0;
    max-width: min(96ch, 100%);
}

.page-notes h2 {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 700;
}

.prose-page {
    color: var(--ink-2);
    font-size: 0.93rem;
    line-height: 1.65;
    margin: 1rem auto 0;
    max-width: min(96ch, 100%);
    padding-bottom: 1rem;
}

.prose-page h2 {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 1.6rem;
}

.prose-page h3 {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.2rem;
}

.prose-page table {
    font-size: 0.85rem;
}

.emergency-notice {
    background-color: #fff4f4;
    border: 1px solid #f1c2c2;
    border-radius: 0.375rem;
    color: #713b3b;
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 1rem auto;
    max-width: min(104ch, 100%);
    padding: 0.6rem 0.9rem;
    text-align: center;
}

.emergency-notice strong {
    color: #a12626;
}

html.dark-mode .emergency-notice {
    background-color: #3a2626;
    border-color: #5c3a3a;
    color: #e8b4b4;
}

html.dark-mode .emergency-notice strong {
    color: #ff8080;
}

.site-footer {
    border-top: 1px solid var(--hairline);
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 1rem;
    padding: 0.75rem 0;
    text-align: center;
}

.site-footer a {
    color: var(--muted);
}

.site-footer-sep {
    margin: 0 0.4rem;
}

/* ---- Focus & motion ---- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.neighbourhood-table tbody tr:focus-visible {
    outline-offset: -2px;
}

.is-loading #region-top,
.is-loading #region-bottom {
    opacity: 0.55;
    transition: opacity 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .is-loading #region-top,
    .is-loading #region-bottom {
        transition: none;
    }
}

/* Print and forced colours: shading alone cannot carry the calendar and grid values. */
@media (forced-colors: active) {
    .bar-fill,
    .hour-bar {
        background: CanvasText;
    }

    .cal-day.is-selected {
        outline: 2px solid Highlight;
    }
}

.map-legend-note {
    border-top: 1px solid var(--hairline);
    color: var(--muted);
    margin-top: 0.3rem;
    padding-top: 0.3rem;
}

.replay-label {
    min-width: 11rem;
}

.chart-table {
    margin-top: 0.6rem;
}

.chart-table > summary {
    color: var(--muted);
    cursor: pointer;
    font-size: 0.8rem;
}

.chart-table .table-responsive {
    max-height: 22rem;
    overflow: auto;
}

.day-freshness {
    color: var(--muted);
    font-size: 0.8rem;
    margin: -0.2rem auto 0.45rem;
    max-width: 70ch;
}

.map-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
}

.map-find {
    align-items: center;
    color: var(--ink-2);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.5rem;
}

.map-find input {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    color: var(--ink);
    font: inherit;
    min-height: 2.1rem;
    padding: 0.2rem 0.85rem;
    width: 15rem;
}

@media (max-width: 575.98px) {
    .map-toolbar {
        justify-content: stretch;
    }

    .map-find,
    .map-find input {
        width: 100%;
    }
}