/* Mobile overrides for guide detail page widgets.
   These use !important where needed to override React inline styles. */

@media (max-width: 599px) {
    /* ── BearcanSizer ── */
    .bcs-wrap {
        padding: 14px !important;
    }
    .bcs-header,
    .bcs-row {
        grid-template-columns: minmax(0, 1fr) 60px 60px !important;
        gap: 8px !important;
    }
    .bcs-cta {
        display: none !important;
    }

    /* ── CertFilterTable ── */
    .cft-table {
        min-width: 0 !important;
        font-size: 13px !important;
    }
    .cft-body-col {
        display: none !important;
    }
    .cft-table td,
    .cft-table th {
        padding: 8px 4px !important;
    }
    .cft-table .cft-status-badge {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }

    /* ── GearComparator ── */
    .gc-chip {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    .gc-table {
        font-size: 13px !important;
    }
    .gc-table th,
    .gc-table td {
        padding: 8px 6px !important;
    }

    /* ── RentalFinder ── */
    .rf-sections {
        grid-template-columns: 1fr !important;
    }

    /* ── PermitMap ── */
    .pm-wrap {
        padding: 12px !important;
    }
}

/* ── PermitMap layout ──
   The map stays in view while someone reads the list. Narrow widgets: the map
   sticks below the site header and the list flows with the page (no scrolling
   panel inside a scrolling page on touch screens). Wide widgets: map and list
   side by side, the list scrolling in its own panel with sticky program
   headers. */
.pm-wrap {
    container-type: inline-size;
}
.pm-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.pm-map {
    position: sticky;
    top: var(--hs-header-height, 56px);
    z-index: 2;
    height: 210px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: #eef2f5;
    box-shadow: 0 2px 6px rgba(26, 42, 58, 0.15);
}
/* Leaflet owns the canvas; .pm-map around it holds the layout and the hint. */
.pm-map-canvas {
    width: 100%;
    height: 100%;
}
.pm-list {
    position: relative;
    border: 1px solid #e3e9ef;
    border-radius: 6px;
}
/* The blog's link style (.post_content a: green, underlined) also catches
   Leaflet's zoom buttons; keep them plain black "+" and "−". */
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:hover {
    color: #000;
    text-decoration: none;
}
.pm-program-head {
    background: #f4f7fa;
    border-left: 4px solid #cbd5db;
    padding: 7px 10px;
}
@container (min-width: 600px) {
    .pm-body {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
    /* Side by side, the map doesn't need to stick. */
    .pm-map {
        position: relative;
        top: auto;
        box-shadow: none;
    }
    .pm-map,
    .pm-list {
        height: 440px;
    }
    .pm-list {
        overflow-y: auto;
    }
    .pm-program-head {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}

/* ── PermitMap affordances (#299) ──
   Markers drop in once when the map scrolls into view and the first one
   pulses; the selected marker grows. Circle markers are SVG paths, so they
   scale around their own box. */
.pm-map .pm-marker {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.25s ease;
}
.pm-map .pm-marker-wait {
    opacity: 0;
}
.pm-map .pm-marker-drop {
    animation: pm-drop 0.45s cubic-bezier(0.3, 1.5, 0.6, 1) backwards;
}
@keyframes pm-drop {
    from { opacity: 0; transform: translateY(-14px) scale(0.6); }
    to { opacity: 1; transform: none; }
}
.pm-map .pm-marker-on {
    transform: scale(1.45);
}
.pm-map .pm-pulse {
    transform-box: fill-box;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
    animation: pm-pulse 1.2s ease-out 2 both;
}
@keyframes pm-pulse {
    from { opacity: 0.9; transform: scale(1); }
    to { opacity: 0; transform: scale(3.4); }
}
/* Above Leaflet's panes, below its controls; it never takes a click. */
.pm-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 800;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(26, 42, 58, 0.85);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
    transition: opacity 0.4s ease;
    animation: pm-hint-in 0.4s ease 0.5s backwards;
}
.pm-hint-gone {
    opacity: 0;
}
@keyframes pm-hint-in {
    from { opacity: 0; transform: translateY(-4px); }
}
.pm-row {
    position: relative;
    padding: 6px 28px 6px 14px;
    border-bottom: 1px solid #edf1f5;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.pm-row::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: #9aa8b6;
    transition: transform 0.2s ease, color 0.2s ease;
}
.pm-row:hover,
.pm-row:focus-visible {
    background: #f4f9fc;
}
.pm-row:hover::after,
.pm-row:focus-visible::after {
    color: #32a9d6;
    transform: translate(3px, -50%);
}
.pm-row:focus-visible {
    outline: 2px solid #32a9d6;
    outline-offset: -2px;
}
.pm-row.pm-row-on {
    background: #eaf6fc;
    box-shadow: inset 3px 0 0 #32a9d6;
    animation: pm-row-flash 0.7s ease-out;
}
@keyframes pm-row-flash {
    from { background: #c6e8f5; }
}
.pm-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}
.pm-action:hover .pm-arrow,
.pm-action:focus-visible .pm-arrow {
    transform: translateX(3px);
}
.pm-list-fade {
    animation: pm-fade-in 0.3s ease-out;
}
@keyframes pm-fade-in {
    from { opacity: 0.2; }
}
.pm-count-flash {
    border-radius: 4px;
    animation: pm-count-flash 1s ease-out;
}
@keyframes pm-count-flash {
    from { background: #fdeeb8; }
}
/* No motion: markers just appear and nothing pulses, slides or fades. The
   hint chip and the hover and focus colors stay. */
@media (prefers-reduced-motion: reduce) {
    /* Only the widget's own classes: Leaflet's zoom waits on its transitions. */
    .pm-wrap [class*="pm-"],
    .pm-wrap [class*="pm-"]::after {
        animation: none !important;
        transition: none !important;
    }
    .pm-map .pm-marker-wait {
        opacity: 1;
    }
}

/* ── ApplyCalculator ──
   A controls panel (start date, direction, season bar), then one card per
   permit: its name and status, the one date that matters, and actions, with
   the full timeline opening below. Cards are one column on phones and two
   side by side once the widget is wide enough (tablets and desktop). */
.ac-wrap {
    container-type: inline-size;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    padding: 14px 16px 12px;
    margin: 24px 0;
    background: #fff;
    color: #1a2a3a;
    /* The post's 17px / 1.8 body text is too airy for a tool. */
    font-size: 14px;
    line-height: 1.4;
}
.ac-wrap .ac-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 2px;
    color: #1a2a3a;
}
.ac-wrap .ac-intro {
    font-size: 14px;
    color: #4a5868;
    margin: 0 0 10px;
    line-height: 1.45;
}

/* Controls */
.ac-wrap .ac-panel {
    background: #f4f7fa;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 12px;
}
.ac-wrap .ac-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 16px;
}
.ac-wrap .ac-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}
.ac-wrap .ac-field-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5a6878;
}
.ac-wrap .ac-date {
    font-size: 16px;
    padding: 5px 8px;
    height: 34px;
    border: 1px solid #cbd5db;
    border-radius: 6px;
    background: #fff;
    color: #1a2a3a;
}
.ac-wrap .ac-segments {
    display: inline-flex;
    padding: 2px;
    background: #e3e9ef;
    border-radius: 7px;
}
.ac-wrap .ac-segment {
    font-size: 13px;
    font-weight: 600;
    height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #3a4858;
    cursor: pointer;
    white-space: nowrap;
}
.ac-wrap .ac-segment.is-on {
    background: #fff;
    color: #1a2a3a;
    box-shadow: 0 1px 2px rgba(26, 42, 58, 0.18);
}

/* Season bar */
.ac-wrap .ac-seasons {
    margin: 12px 0 0;
}
.ac-wrap .ac-season-bar {
    position: relative;
    display: flex;
    gap: 2px;
    height: 22px;
}
.ac-wrap .ac-season {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: #1a2a3a;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.8;
}
.ac-wrap .ac-season:first-child { border-radius: 5px 0 0 5px; }
.ac-wrap .ac-season-end { border-radius: 0 5px 5px 0; }
.ac-wrap .ac-season:hover,
.ac-wrap .ac-season.is-current { opacity: 1; }
.ac-wrap .ac-season-prime { background: #9fd28b; }
.ac-wrap .ac-season-shoulder { background: #f4d58f; }
.ac-wrap .ac-season-early,
.ac-wrap .ac-season-late { background: #d5dee7; }
.ac-wrap .ac-season-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 4px;
    margin-left: -2px;
    border-radius: 2px;
    background: #1a2a3a;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
.ac-wrap .ac-months {
    display: flex;
    margin: 3px 0 0;
    font-size: 11px;
    color: #7a8898;
}
.ac-wrap .ac-months span {
    flex: 1 1 0;
}
.ac-wrap .ac-season-now {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #3a4858;
}
.ac-wrap .ac-season-chip {
    display: inline-block;
    margin-right: 6px;
    padding: 0 7px;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 19px;
    color: #1a2a3a;
}

/* Cards */
.ac-wrap .ac-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}
.ac-wrap .ac-card {
    border: 1px solid #e3e9ef;
    border-top: 3px solid #cbd5db;
    border-radius: 8px;
    padding: 9px 12px 0;
    min-width: 0;
}
/* Cards without a dates toggle still get bottom padding. */
.ac-wrap .ac-card > :last-child:not(.ac-more) {
    margin-bottom: 10px;
}
.ac-wrap .ac-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 8px;
}
.ac-wrap .ac-card-name {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #1a2a3a;
}
.ac-wrap .ac-chip {
    padding: 0 8px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}
.ac-wrap .ac-chip-upcoming { background: #e5effa; color: #24577f; }
.ac-wrap .ac-chip-open { background: #e3f2dc; color: #2f6b12; }
.ac-wrap .ac-chip-closed { background: #eef1f4; color: #5a6878; }
.ac-wrap .ac-card-sub {
    margin: 1px 0 0;
    font-size: 12.5px;
    color: #5a6878;
}
.ac-wrap .ac-note {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #5a6878;
}
.ac-wrap .ac-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    margin: 6px 0 0;
}
.ac-wrap .ac-lead-verb {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5a6878;
}
.ac-wrap .ac-lead-dates {
    font-size: 16px;
    font-weight: 700;
    color: #1a2a3a;
    white-space: nowrap;
}
.ac-wrap .ac-arrow {
    color: #9aa5b1;
    font-weight: 400;
}

/* Card actions */
.ac-wrap .ac-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 9px 0 0;
}
.ac-wrap .ac-btn {
    font-size: 12.5px;
    font-weight: 700;
    height: 28px;
    padding: 0 11px;
    border: 1px solid #8fcf9f;
    border-radius: 6px;
    background: #fff;
    color: #1a7d33;
    cursor: pointer;
}
.ac-wrap .ac-btn:hover { background: #eef8f0; border-color: #21ba45; }
.ac-wrap .ac-link {
    font-size: 12.5px;
    font-weight: 600;
    padding: 0;
    border: 0;
    background: none;
    color: #2d6a9f;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.ac-wrap .ac-link:hover { text-decoration: underline; }
/* Downloads a file rather than navigating, so it's underlined to read as a link. */
.ac-wrap .ac-link-file {
    text-decoration: underline;
    text-decoration-color: #a9c3da;
    text-underline-offset: 2px;
}
.ac-wrap .ac-caret {
    display: inline-block;
    margin-left: 3px;
    transition: transform 0.15s;
}
.ac-wrap .ac-caret.is-open { transform: rotate(180deg); }

/* The dates toggle is the card's footer row. */
.ac-wrap .ac-more {
    display: block;
    width: calc(100% + 24px);
    margin: 9px -12px 0;
    padding: 6px 12px;
    border: 0;
    border-top: 1px solid #edf1f5;
    border-radius: 0 0 8px 8px;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: #5a6878;
    text-align: left;
    cursor: pointer;
}
.ac-wrap .ac-more:hover { background: #f6f9fb; color: #1a2a3a; }

/* Timeline */
.ac-wrap .ac-timeline {
    list-style: none;
    margin: 8px 0 0;
    padding: 6px 0 2px;
    border-top: 1px solid #edf1f5;
}
.ac-wrap .ac-timeline li {
    margin: 0;
}
.ac-wrap .ac-event {
    display: grid;
    grid-template-columns: 6.6em minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: baseline;
    padding: 3px 0;
    font-size: 12.5px;
    line-height: 1.4;
}
.ac-wrap .ac-event-date {
    font-weight: 700;
    white-space: nowrap;
}
.ac-wrap .ac-event-label { color: #3a4858; }
.ac-wrap .ac-event.is-passed,
.ac-wrap .ac-event.is-passed .ac-event-label { color: #a0aab4; }
.ac-wrap .ac-ics {
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    padding: 0 7px;
    border: 1px solid #c6d6e4;
    border-radius: 9px;
    background: #fff;
    color: #2d6a9f;
    cursor: pointer;
    white-space: nowrap;
}
.ac-wrap .ac-ics:hover { background: #eef4fa; }

.ac-wrap .ac-footnote {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: #7a8898;
}

/* Phones: the direction control takes the full width, segments shared equally. */
@container (max-width: 459px) {
    .ac-wrap .ac-controls > .ac-field:last-child {
        flex: 1 1 100%;
    }
    .ac-wrap .ac-segments {
        display: flex;
    }
    .ac-wrap .ac-segment {
        flex: 1 1 0;
        padding: 0 4px;
    }
    /* Date and .ics on one line, what happens below at full width. */
    .ac-wrap .ac-event {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 1px;
    }
    .ac-wrap .ac-event-label {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@container (min-width: 600px) {
    .ac-wrap .ac-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ApplyCalculator: "Remind me" toggles and the signup at the bottom. */
.ac-wrap .ac-btn.is-on {
    background: #21ba45;
    border-color: #21ba45;
    color: #fff;
}
.ac-wrap .ac-btn.is-on:hover { background: #1ea33d; }
.ac-wrap .ac-signup-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #5a6878;
}
.ac-wrap .ac-signup {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 2px solid #32a9d6;
    border-radius: 8px;
    background: #f6fbfe;
}
.ac-wrap .ac-signup-title {
    margin: 0 0 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: #1a2a3a;
}
.ac-wrap .ac-signup-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ac-wrap .ac-email {
    flex: 1 1 220px;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    font-size: 16px;
    border: 1px solid #cbd5db;
    border-radius: 6px;
}
.ac-wrap .ac-submit {
    flex: 0 0 auto;
    height: 40px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #21ba45;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.ac-wrap .ac-submit:disabled { opacity: 0.6; cursor: default; }
.ac-wrap .ac-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
.ac-wrap .ac-signup-result {
    margin: 8px 0 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #1a7d33;
}
.ac-wrap .ac-signup-result.is-error { color: #b03a2e; }
.ac-wrap .ac-signup-result p {
    margin: 4px 0 0;
    font-weight: 400;
    color: #3a4858;
}
.ac-wrap .ac-signup-fine {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: #7a8898;
}
/* The first "Remind me" pulses the signup so the email box is the obvious next step. */
@keyframes ac-signup-pulse {
    0% { box-shadow: 0 0 0 0 rgba(50, 169, 214, 0.55); }
    70% { box-shadow: 0 0 0 10px rgba(50, 169, 214, 0); }
    100% { box-shadow: 0 0 0 0 rgba(50, 169, 214, 0); }
}
.ac-wrap .ac-signup.is-new {
    animation: ac-signup-pulse 1.1s ease-out 3;
}
.ac-wrap .ac-signup.is-new .ac-email {
    border-color: #32a9d6;
    box-shadow: 0 0 0 3px rgba(50, 169, 214, 0.25);
}
@media (prefers-reduced-motion: reduce) {
    .ac-wrap .ac-signup.is-new {
        animation: none;
        box-shadow: 0 0 0 3px rgba(50, 169, 214, 0.45);
    }
}
/* After the first pick, the other permits' "Also remind me" pulse once, a
   beat after the signup box, so several alerts at once is discoverable. */
@keyframes ac-suggest-pulse {
    0% { box-shadow: 0 0 0 0 rgba(33, 186, 69, 0.45); }
    100% { box-shadow: 0 0 0 7px rgba(33, 186, 69, 0); }
}
.ac-wrap .ac-btn.is-suggest {
    animation: ac-suggest-pulse 0.9s ease-out 0.25s 1;
}
.ac-wrap .ac-signup-more {
    margin: -4px 0 8px;
    font-size: 12.5px;
    color: #3a4858;
}
@media (prefers-reduced-motion: reduce) {
    .ac-wrap .ac-btn.is-suggest { animation: none; }
}